/* OSIRIS free market tools: the frame every tool page shares
   (header with the live badge, the switcher between tools, number cards, panels with a canvas, "how to read" cards). */
.thero{padding:calc(var(--nav-h) + clamp(3rem,6vw,5rem)) 0 clamp(1.25rem,2.5vw,2rem)}
.thero__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}
.thero .h1{font-size:clamp(2.25rem,5vw,4.5rem)}
.thero .lead{margin-top:var(--s4);max-width:40em}
.tlive{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem;border-radius:var(--r-pill);border:1px solid rgba(53,208,143,.4);background:rgba(53,208,143,.08);font-size:var(--t-small);font-weight:700;color:var(--up);white-space:nowrap}
.tlive::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--up);box-shadow:0 0 0 .2rem rgba(53,208,143,.18);animation:tlivePulse 2s ease-in-out infinite}
.tlive.is-stale{border-color:var(--line-strong);background:var(--fill-soft);color:var(--muted)}
.tlive.is-stale::before{background:var(--muted);box-shadow:none;animation:none}
@keyframes tlivePulse{50%{box-shadow:0 0 0 .4rem rgba(53,208,143,0)}}

/* switcher */
.tswitch{display:flex;gap:.4rem;margin-top:clamp(1.5rem,3vw,2.25rem);overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter)}
.tswitch::-webkit-scrollbar{display:none}
.tswitch a{display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;min-height:2.75rem;padding:0 1.05rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);font-size:.9375rem;font-weight:700;color:var(--mist);white-space:nowrap;transition:color var(--d-fast),border-color var(--d-fast),background-color var(--d-fast)}
.tswitch a:hover{color:var(--bone);border-color:rgba(238,241,244,.34)}
.tswitch a[aria-current]{background:var(--bone);border-color:var(--bone);color:var(--obsidian)}
.tswitch .ico{font-size:1.05rem}

.tbody{display:grid;gap:1.1rem;padding-bottom:clamp(3rem,6vw,5rem)}

/* number cards */
.tmetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1.1rem}
.tmetric{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.25rem;border-radius:var(--r-card);border:1px solid var(--line-strong);background:rgba(238,241,244,.025);min-width:0}
.tmetric>span{font-size:var(--t-small);color:var(--mist)}
.tmetric>b{font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tmetric>small{font-size:var(--t-micro);color:var(--fog);min-height:1em}
.tmetric--main{background:radial-gradient(120% 140% at 0% 0%,rgba(78,177,194,.14),transparent 62%),rgba(238,241,244,.03)}
.tmetric--main>b{font-size:clamp(1.9rem,3.4vw,3rem)}
.tsignal{--sc:var(--mist);border-color:color-mix(in srgb,var(--sc) 45%,transparent);background:color-mix(in srgb,var(--sc) 8%,transparent)}
.tsignal>b{color:var(--sc);font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:.02em}
.is-pos{color:var(--nile-strong)}
.is-neg{color:var(--muted)}
.is-up{color:var(--up)}
.is-down{color:var(--down)}

/* panels */
.tpanel{position:relative;padding:clamp(1.1rem,2.2vw,1.75rem);border-radius:var(--r-panel);border:1px solid var(--line-strong);background:rgba(238,241,244,.025);min-width:0}
.tpanel__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-bottom:1.1rem}
.tpanel__h{font-size:1.125rem;letter-spacing:-.015em}
.tpanel__h small{margin-left:.5rem;font-size:var(--t-small);font-weight:400;letter-spacing:0;color:var(--mist)}
.tpanel__hint{font-size:var(--t-small);color:var(--fog)}
.tpanel__tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.tpanel canvas{display:block;width:100%;touch-action:pan-y}
.tpanel__fine{margin-top:.9rem;font-size:var(--t-small);color:var(--fog)}
.tcanvas{position:relative}
.tcanvas.is-loading{min-height:var(--th,20rem)}
.tcanvas.is-loading canvas{display:none}
.tcanvas.is-loading::after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(100deg,rgba(238,241,244,.03) 30%,rgba(238,241,244,.08) 50%,rgba(238,241,244,.03) 70%) 0 0/220% 100%;animation:tShimmer 1.4s linear infinite}
@keyframes tShimmer{to{background-position:-220% 0}}
.tmsg{padding:3rem 1rem;text-align:center;color:var(--mist);font-size:.9375rem}
.tmsg[hidden]{display:none}

/* segmented buttons and pills */
.tseg{display:inline-flex;gap:.2rem;padding:.25rem;border-radius:var(--r-pill);background:rgba(238,241,244,.06)}
.tseg button{min-height:2.25rem;min-width:2.75rem;padding:0 .9rem;border-radius:var(--r-pill);font-size:var(--t-small);font-weight:700;color:var(--mist);transition:background-color var(--d-fast),color var(--d-fast)}
.tseg button:hover{color:var(--bone)}
.tseg button.is-on{background:var(--bone);color:var(--obsidian)}
.tpill{display:inline-flex;align-items:center;gap:.45rem;min-height:2.25rem;padding:0 .85rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);font-size:var(--t-small);font-weight:700;color:var(--mist);transition:color var(--d-fast),border-color var(--d-fast),background-color var(--d-fast)}
.tpill::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--pc,var(--mist));opacity:.45;transition:opacity var(--d-fast)}
.tpill.is-on{color:var(--bone);border-color:rgba(238,241,244,.4);background:rgba(238,241,244,.06)}
.tpill.is-on::before{opacity:1}

/* legends */
.tlegend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;margin-top:1rem;font-size:var(--t-small);color:var(--mist)}
.tlegend i{display:inline-block;width:.75rem;height:.75rem;margin-right:.45rem;border-radius:3px;vertical-align:-.08em;background:var(--lc,var(--mist))}
.tlegend i.line{height:2px;width:1.1rem;border-radius:2px;vertical-align:.25em}
.tscale{display:flex;align-items:center;gap:.75rem;margin-top:1rem;font-size:var(--t-small);color:var(--mist)}
.tscale__bar{flex:1;max-width:22rem;height:.5rem;border-radius:var(--r-pill)}

/* how to read */
.thow{margin-top:clamp(1.5rem,3vw,2.5rem)}
.thow__h{font-size:var(--t-h3);letter-spacing:-.02em;margin-bottom:1.1rem}
.thow__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.thow__card{padding:1.25rem 1.35rem;border-radius:var(--r-card);border:1px solid var(--line-strong);background:rgba(238,241,244,.02)}
.thow__card h3{font-size:1.0625rem;letter-spacing:-.01em}
.thow__card p{margin-top:.5rem;font-size:.9375rem;line-height:1.55;color:var(--mist)}

/* tooltip */
.ttip{position:fixed;z-index:calc(var(--z-nav) + 5);top:0;left:0;padding:.55rem .75rem;border-radius:12px;border:1px solid var(--line-strong);background:rgba(10,15,24,.97);font-size:var(--t-small);line-height:1.45;white-space:nowrap;pointer-events:none;box-shadow:0 18px 40px -18px #000}
.ttip[hidden]{display:none}
.ttip b{display:block}
.ttip span{color:var(--mist)}

/* entrance: panels rise once, when they first come on screen */
.js .tbody>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.js .tbody>.is-in{opacity:1;transform:none}

@media (max-width:760px){
  .tmetrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .tmetric--main{grid-column:1/-1}
  .tbody{gap:.6rem}
  .thow__grid{grid-template-columns:1fr;gap:.6rem}
  .tpanel{border-radius:var(--r-card)}
  .tpanel__hint{display:none}
}