/* AI cost calculator (/tokens/) */
.tk{display:flex; flex-direction:column; gap:clamp(1.6rem,3vw,2.4rem)}
.tk-ico{display:none}
.toolhead-actions .btn svg{width:1rem; height:1rem}

/* ── planner: what you are building, how much, and the answer ────────── */
.tk-plan{display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); gap:1rem; align-items:stretch}
@media (max-width:66rem){ .tk-plan{grid-template-columns:minmax(0,1fr)} }
.tk-ask .panel-body{gap:1.05rem}
.tk-scen-list{display:flex; flex-wrap:wrap; gap:.4rem}
.tk-scen{position:relative; display:inline-flex; align-items:center; min-height:2.2rem; padding:.42rem .8rem; border:1px solid var(--line); border-radius:999px; background:var(--field); font:600 .86rem/1.2 var(--f-ui); color:var(--ink-2); cursor:pointer; user-select:none; transition:background .15s, color .15s, border-color .15s}
.tk-scen input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.tk-scen:hover{border-color:var(--ink-3); color:var(--ink)}
.tk-scen:has(input:checked),.tk-scen:has(input:checked):hover{background:var(--ink); border-color:var(--ink); color:var(--panel)}
.tk-scen:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.tk-scen-own{border-style:dashed}
.tk-scen-own:has(input:checked){border-style:solid}
.tk-why{font:400 1.02rem/1.45 var(--f-serif); color:var(--ink-2); margin-top:.55rem; max-width:66ch; text-wrap:pretty}
.tk-why .linkbtn{font:600 .84rem/1.45 var(--f-ui); white-space:nowrap}
.tk-line{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font:500 .95rem/1.3 var(--f-ui); color:var(--ink-2)}
.tk-line + .tk-line{margin-top:.55rem}
.tk-line .tk-num{width:8.5rem; flex:none}
.tk-line .tk-turns{width:5.2rem}
.tk-sel{width:auto; max-width:100%}
.tk-slot{display:contents}
.tk-money{position:relative; display:inline-flex; align-items:center}
.tk-dollar{position:absolute; left:.8rem; font:500 .82rem/1 var(--f-mono); color:var(--ink-3); pointer-events:none}
.tk-money .input{padding-left:1.65rem}
.tk-small{font:400 .84rem/1.45 var(--f-ui); color:var(--ink-3); margin-top:.45rem; max-width:64ch}
.tk-small:empty{display:none}
.tk-calls{color:var(--ink-2)}
.tk-curline{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem}
.tk-curline .select{flex:0 1 22rem; min-width:min(100%,14rem)}
.tk-curline .tk-small{flex:1 1 14rem; margin-top:0}

.tk-answer{box-shadow:var(--shadow)}
.tk-answer .panel-body{flex:1 1 auto; gap:.85rem}
.tk-lead{font:400 clamp(1.3rem,1.8vw,1.55rem)/1.32 var(--f-head); color:var(--ink); letter-spacing:-.008em; text-wrap:pretty}
.tk-lead b{font-weight:600}
.tk-n{font-family:var(--f-mono); font-variant-numeric:tabular-nums lining-nums; font-weight:500; letter-spacing:-.01em; white-space:nowrap}
.tk-lead .tk-n{font-size:.9em}
.tk-more{font:400 1.04rem/1.5 var(--f-serif); color:var(--ink-2); text-wrap:pretty}
.tk-more:empty{display:none}
.tk-more .tk-n{font-size:.88em; color:var(--ink)}
.tk-facts{display:grid; grid-template-rows:auto auto; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:.2rem 1rem; margin:0; padding:.75rem 0 .1rem; border-top:1px solid var(--line-2)}
.tk-facts dt{font:600 .76rem/1.3 var(--f-ui); color:var(--ink-3)}
.tk-facts dd{margin:0; font:500 1rem/1.3 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink); overflow-wrap:anywhere}
.tk-insights{display:flex; flex-direction:column; border-top:1px solid var(--line-2)}
.tk-insights:empty{display:none}
.tk-ins{position:relative; padding:.5rem 0 .5rem 1.15rem; border-bottom:1px solid var(--line-2); font:400 .9rem/1.45 var(--f-ui); color:var(--ink-2)}
.tk-ins:last-child{border-bottom:0}
.tk-ins::before{content:""; position:absolute; left:.12rem; top:1rem; width:.38rem; height:.38rem; transform:rotate(45deg); background:var(--ink-4)}
.tk-ins.good::before{background:var(--good)}
.tk-ins.warn::before{background:var(--hi)}
.tk-ins.bad::before{background:var(--bad)}
.tk-ins b{color:var(--ink); font-weight:600}
.tk-ins .tk-n{font-size:.92em; color:var(--ink)}
.tk-ins .linkbtn{font-weight:600}
.tk-ans-foot{gap:.55rem .7rem}
.tk-ans-foot .btn svg{width:.95rem; height:.95rem}
.tk-checked{flex:1 1 100%; font:400 .8rem/1.5 var(--f-ui); color:var(--ink-3)}
.tk-pro{font:400 .82rem/1.5 var(--f-ui); color:var(--ink-3)}
.tk-pro-tag{display:inline-block; margin-left:.3rem; padding:.16rem .42rem; border:1px solid var(--line); border-radius:999px; font:600 .66rem/1.1 var(--f-ui); color:var(--ink-3); vertical-align:1px; white-space:nowrap}
.tk-pro-team{margin-top:-.4rem}

/* how we calculate this */
.tk-how{margin-top:calc(-1 * clamp(1.6rem,3vw,2.4rem) + .55rem); border-bottom:1px solid var(--line-2)}
.tk-how > summary{display:inline-flex; align-items:center; gap:.5rem; min-height:2rem; padding:.3rem 0 .55rem; cursor:pointer; list-style:none; font:600 .9rem/1.3 var(--f-ui); color:var(--accent)}
.tk-how > summary::-webkit-details-marker{display:none}
.tk-how > summary::before{content:""; width:.45rem; height:.45rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .15s; margin-right:.1rem}
.tk-how[open] > summary::before{transform:rotate(45deg)}
.tk-how > summary:hover{text-decoration:underline}
.tk-how-body{padding:.3rem 0 1.4rem}
.tk-how-steps{display:flex; flex-direction:column; gap:.95rem; counter-reset:st; max-width:78ch}
.tk-how-steps > li{counter-increment:st; position:relative; padding-left:2.3rem; font:400 1.04rem/1.6 var(--f-serif); color:var(--ink-2)}
.tk-how-steps > li::before{content:counter(st); position:absolute; left:0; top:.12rem; width:1.5rem; height:1.5rem; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font:600 .74rem/1 var(--f-ui); color:var(--ink-2)}
.tk-how-steps > li > b{color:var(--ink); font-weight:600}
.tk-how-steps p{margin-top:.4rem}
.tk-how-sum{display:flex; flex-direction:column; margin:.45rem 0 0; padding-left:.85rem; border-left:2px solid var(--line)}
.tk-how-sum li{font:400 .92rem/1.65 var(--f-ui); color:var(--ink-2)}
.tk-how-sum .tk-n{color:var(--ink)}
.tk-how-total{font-weight:600; color:var(--ink) !important}
.tk-how-body > .tk-pro{margin-top:1.1rem; padding-left:2.3rem; max-width:78ch}

/* fine-tune */
.tk-fine{display:flex; flex-direction:column; gap:.9rem; min-width:0}
.tk-sec-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem}
.tk-sec-head .hint{max-width:70ch}
.tk-sec-h{font:380 clamp(1.4rem,2.4vw,1.75rem)/1.1 var(--f-head); letter-spacing:-.015em}
.tk-batchf{gap:.45rem}
.tk-batchwarn{font-size:.86rem; padding:.55rem .75rem}

/* ── inputs ─────────────────────────────────────────────────────────── */
.tk-top{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:1rem; align-items:start}
@media (max-width:66rem){ .tk-top{grid-template-columns:minmax(0,1fr)} }
.tk-side{display:flex; flex-direction:column; gap:1rem; min-width:0}
/* with token counts the prompt panel is short, so the counts panel moves under it */
@media (min-width:66.01rem){
  .tk-top.is-counts{grid-template-areas:"prompt usage" "counts usage"; grid-template-rows:auto 1fr; row-gap:1rem}
  .tk-top.is-counts .tk-side{display:contents}
  .tk-top.is-counts .tk-prompt{grid-area:prompt}
  .tk-top.is-counts .tk-usage{grid-area:usage}
  .tk-top.is-counts .tk-counts{grid-area:counts; align-self:start}
}
.tk-prompt .panel-head{gap:.5rem .7rem}
.tk-prompt .panel-title{margin-right:0}
.tk-prompt .seg{margin-left:auto}
.tk-labrow{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap}
.tk-count{font:500 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-3); font-variant-numeric:tabular-nums}
.tk-sys{min-height:9rem; max-height:60vh}
.tk-user{min-height:17rem; max-height:80vh}
.tk-savenote{font:400 .95rem/1.35 var(--f-serif); color:var(--ink-3)}
.tk-prompt .panel-foot{min-height:2.9rem}

fieldset.field{border:0; padding:0; margin:0}
fieldset.field > legend{padding:0; margin-bottom:.38rem}
.tk-presets{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.tk-presets button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; padding:.55rem .35rem; min-height:3rem; background:var(--field); color:var(--ink-2); text-align:center;
  font:600 var(--t-xs)/1.15 var(--f-ui); letter-spacing:.005em}
.tk-presets button small{font:400 var(--t-2xs)/1 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.tk-presets button:hover{background:var(--bg-2); color:var(--ink)}
.tk-presets button[aria-pressed="true"]{background:var(--ink); color:var(--panel)}
.tk-presets button[aria-pressed="true"] small{color:color-mix(in srgb, var(--panel) 72%, transparent)}
.tk-presets button:focus-visible{outline:2px solid var(--accent); outline-offset:-3px}
@media (max-width:30rem){ .tk-presets{grid-template-columns:repeat(3,minmax(0,1fr))} .tk-presets button:last-child{grid-column:span 2} }
.tk-inline{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:.5rem}
.tk-inline .hint{flex:1 1 12rem; font-size:var(--t-xs)}
.tk-num{width:8.5rem; flex:none}
.tk-usage .panel-body{gap:1.15rem}
.tk-details{font:400 var(--t-sm)/1.4 var(--f-ui); color:var(--ink-2)}
.tk-details summary{cursor:pointer; color:var(--accent); font:600 var(--t-xs)/1.4 var(--f-ui); width:max-content; max-width:100%}
.tk-details summary:hover{text-decoration:underline}
.tk-details .prose{margin-top:.6rem; font-size:.95rem}

/* counts */
.tk-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,7.2rem),1fr))}
.tk-stats .stat b{font-size:1.5rem; font-weight:360}
.tk-counts .panel-head .mono{font-family:var(--f-ui); font-weight:500}
.tk-comp{display:flex; flex-direction:column; gap:.5rem}
.tk-comp-head{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem}
.tk-comp-bar{display:flex; gap:2px; height:.8rem; border-radius:var(--r); overflow:hidden; background:var(--bg-2)}
.tk-comp-bar i{display:block; min-width:3px; flex-basis:0; background:var(--ink-4)}
.tk-comp-bar i.s,.tk-legend li.s i{background:var(--viz-1)}
.tk-comp-bar i.u,.tk-legend li.u i{background:var(--viz-2)}
.tk-comp-bar i.o,.tk-legend li.o i{background:var(--viz-3)}
.tk-legend{display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; font:500 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-2)}
.tk-legend li{display:inline-flex; align-items:center; gap:.4rem}
.tk-legend li i{width:.65rem; height:.65rem; border-radius:2px; flex:none}
.tk-legend b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.tk-fams{display:flex; flex-direction:column; gap:.45rem}
.tk-fams:empty{display:none}
.tk-famlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,8rem),1fr)); gap:.1rem 1.1rem}
.tk-famlist li{display:flex; justify-content:space-between; gap:.6rem; padding:.2rem 0; border-bottom:1px solid var(--line-2); font:500 var(--t-xs)/1.4 var(--f-ui); font-variant-numeric:tabular-nums}
.tk-famlist span{color:var(--ink-3)}
.tk-famlist b{font-family:var(--f-mono); font-weight:500; color:var(--ink)}

/* ── results ────────────────────────────────────────────────────────── */
.tk-results{display:flex; flex-direction:column; gap:1rem; min-width:0}
.tk-results-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem}
.tk-results-head .h3{font:380 clamp(1.4rem,2.4vw,1.75rem)/1.1 var(--f-head); letter-spacing:-.015em}
.tk-filters{display:flex; flex-wrap:wrap; align-items:flex-end; gap:.8rem 1.2rem; padding:.8rem .9rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel)}
.tk-f{flex:none}
.tk-f .select{min-width:11rem}
.tk-legacy{min-height:1.95rem}
.tk-or{flex:1 1 20rem; min-width:min(100%,18rem); position:relative}
.tk-or-box{position:relative}
.tk-or .input{min-height:1.95rem; padding-block:.3rem}
.tk-or-list{position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; max-height:min(24rem,60vh); overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:.25rem; display:flex; flex-direction:column; gap:1px}
.tk-or-opt{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.2rem .7rem; padding:.5rem .6rem; border-radius:var(--r); cursor:pointer}
.tk-or-opt:hover,.tk-or-opt[aria-selected="true"]{background:var(--accent-wash)}
.tk-or-opt[aria-disabled="true"]{cursor:default; opacity:.65}
.tk-or-name{display:flex; flex-direction:column; min-width:0}
.tk-or-name b{font:600 var(--t-sm)/1.25 var(--f-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tk-or-name small{font:400 var(--t-2xs)/1.3 var(--f-mono); color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tk-or-meta{display:flex; align-items:center; gap:.45rem; font-size:var(--t-xs); white-space:nowrap}
.tk-or-msg{padding:.7rem .7rem; font:400 var(--t-sm)/1.4 var(--f-serif); color:var(--ink-3)}
@media (max-width:40rem){
  .tk-or-opt{grid-template-columns:minmax(0,1fr)} .tk-or-meta{justify-content:flex-start}
  .tk-f .select{min-width:0; width:100%} .tk-f:first-child,.tk-f:nth-child(2){flex:1 1 100%}
  .tk-filters .seg{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%}
  .tk-filters .seg button{white-space:normal; padding:.5rem .3rem; line-height:1.2}
}

.tk-freenote{font-size:var(--t-sm); max-width:90ch}

/* tap targets: at least 24 × 24 px */
.tk-details summary{padding:.32rem 0}
.tk-usage input[type=range]{height:1.5rem; margin:.15rem 0 0; cursor:pointer}
.tk-chart-panel .panel-foot a{display:inline-flex; align-items:center; min-height:1.5rem}
.tk-chart-panel .panel-head .switch,.tk-legacy{min-height:1.5rem}

.tk-exactbox p{margin:0}
.tk-exactbox .btns{margin-top:.6rem}
.tk-exactbox .btns .hint{font-size:var(--t-xs)}
.tk-exacthint{margin-top:.35rem !important}

/* table */
.tk-table-wrap{position:relative}
.tk-table-wrap:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tk-table{min-width:56rem}
@media (min-width:40.01rem){ .tk-table.has-vs{min-width:64rem} }
.tk-table thead th{z-index:2}
.tk-table thead th.num{text-align:right}
.tk-table thead th.num button{justify-content:flex-end}
.tk-table thead th button{min-height:1.5rem; box-sizing:border-box}
.tk-table thead th:first-child{position:sticky; left:0; z-index:3; box-shadow:1px 0 0 var(--line-2)}
.tk-table th button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.tk-table thead th:not([aria-sort]) button::after{content:"↕"; font-size:.8em; opacity:0; transition:opacity .12s}
.tk-table thead th:not([aria-sort]) button:hover::after,.tk-table thead th:not([aria-sort]) button:focus-visible::after{opacity:.55}
.tk-table thead th[aria-sort]{color:var(--ink)}
.tk-table tbody th{position:sticky; left:0; top:auto; z-index:1; background:var(--panel); box-shadow:1px 0 0 var(--line-2);
  font:400 var(--t-sm)/1.35 var(--f-ui); color:var(--ink); text-transform:none; letter-spacing:0; white-space:normal; vertical-align:top;
  padding:.65rem .75rem; border-bottom:1px solid var(--line-2); min-width:16rem; max-width:22rem}
.tk-table tbody tr:last-child th{border-bottom:0}
.tk-table td{vertical-align:top; padding-top:.7rem; padding-bottom:.65rem}
.tk-table tbody tr:hover th{background:color-mix(in srgb, var(--bg-2) 45%, var(--panel))}
.tk-table tbody tr.tk-best > *{background:color-mix(in srgb, var(--good) 7%, var(--panel))}
.tk-table tbody tr.tk-best > th{box-shadow:inset 3px 0 0 var(--good), 1px 0 0 var(--line-2)}
.tk-table tbody tr.tk-cur > *{background:color-mix(in srgb, var(--accent) 6%, var(--panel))}
.tk-table tbody tr.tk-cur > th{box-shadow:inset 3px 0 0 var(--accent), 1px 0 0 var(--line-2)}
.tk-table td.tk-c-vs.good{color:var(--good)}
.tk-table tbody tr.tk-flash > *{animation:tkflash 1.6s ease-out}
@keyframes tkflash{0%,40%{background:var(--hi-wash)}}
.tk-mname{display:flex; align-items:center; gap:.3rem .4rem; flex-wrap:wrap; min-width:0}
.tk-mname .mpill{margin-right:.15rem}
.tk-mname .tag{padding:.2rem .38rem}
.tk-mname .tag button{font-size:1rem; padding:0; margin:-.3rem -.35rem -.3rem .1rem; min-width:1.5rem; min-height:1.5rem; display:inline-grid; place-items:center}
.tk-mname .mpill{font-size:var(--t-sm); font-family:var(--f-ui); font-weight:600}
.tk-mname .mpill span{white-space:normal}
.tk-mprice{margin-top:.35rem; font:400 var(--t-2xs)/1.4 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.tk-live{display:inline-block; margin-left:.4rem; padding:.05rem .3rem; border-radius:2px; background:var(--accent-wash); color:var(--accent); font:600 var(--t-2xs)/1.3 var(--f-ui); letter-spacing:.005em}
.tk-info{position:relative; isolation:isolate; display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; margin:-.17rem; color:var(--ink-2); font:650 .62rem/1 var(--f-ui); font-variant-numeric:tabular-nums; text-decoration:none; flex:none}
.tk-info::before{content:""; position:absolute; inset:.17rem; z-index:-1; border:1px solid var(--line); border-radius:50%; background:var(--field)}
.tk-info:hover,.tk-info:focus-visible{color:var(--ink)}
.tk-info:hover::before,.tk-info:focus-visible::before{border-color:var(--ink)}
.tk-info:focus-visible{outline:2px solid var(--accent); outline-offset:0; border-radius:50%}
.tk-approx{color:var(--ink-3); margin-right:.15rem}
.tk-exact{display:inline-block; margin-left:.4rem; padding:.08rem .3rem; border-radius:2px; background:var(--good-wash); color:var(--good); font:600 var(--t-2xs)/1.3 var(--f-ui); letter-spacing:.005em; vertical-align:1px}
.tk-sub{display:block; margin-top:.25rem; font:500 var(--t-2xs)/1.3 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); white-space:nowrap}
.tk-sub.good{color:var(--good)}
.tk-fit{min-width:9rem}
.tk-fitbox{display:flex; align-items:center; gap:.55rem}
.tk-fitbox .meter{flex:1 1 auto; max-width:6rem; min-width:3.5rem}
.tk-fitpct{font:500 .8rem/1 var(--f-mono); font-variant-numeric:tabular-nums; min-width:3.2rem}
.tk-fit.over .tk-fitpct,.tk-fit.over .tk-sub{color:var(--bad)}
.tk-month b{font-weight:600; color:var(--ink)}
.tk-table td.num{font-size:.82rem}
/* phones: each model becomes a card; the header row becomes a "sort by" bar */
@media (max-width:40rem){
  .tk-table-wrap{border:0; background:none; overflow:visible; border-radius:0}
  .tk-table{display:block; min-width:0}
  .tk-table thead,.tk-table tbody{display:block}
  .tk-table thead tr{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; padding-bottom:.7rem}
  .tk-table thead tr::before{content:"Sort by"; font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:.005em; color:var(--ink-3); margin-right:.2rem}
  .tk-table thead th,.tk-table thead th:first-child{display:block; position:static; padding:0; border:0; background:none; box-shadow:none}
  .tk-table thead th button{border:1px solid var(--line); border-radius:999px; padding:.42rem .62rem; background:var(--field); color:var(--ink-2); letter-spacing:.005em}
  .tk-table thead th[aria-sort] button{background:var(--ink); border-color:var(--ink); color:var(--panel)}
  .tk-table thead th:not([aria-sort]) button::after{display:none}
  .tk-table tbody{display:flex; flex-direction:column; gap:.6rem}
  .tk-table tbody tr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden}
  .tk-table tbody tr.tk-best{border-color:color-mix(in srgb, var(--good) 55%, var(--line))}
  .tk-table tbody th{position:static; grid-column:1 / -1; min-width:0; max-width:none; box-shadow:none; border-bottom:1px solid var(--line-2) !important}
  .tk-table tbody tr.tk-best > th{box-shadow:inset 3px 0 0 var(--good)}
  .tk-table tbody td{display:block; text-align:left !important; border-bottom:0; padding:.55rem .75rem .6rem; min-width:0}
  .tk-table tbody td::before{content:attr(data-label); display:block; font:600 var(--t-xs)/1.2 var(--f-ui); letter-spacing:.005em; color:var(--ink-3); margin-bottom:.3rem; white-space:nowrap}
  .tk-table tbody td.tk-month{order:1} .tk-table tbody td.tk-c-vs{order:2} .tk-table tbody td.tk-c-call{order:3} .tk-table tbody td.tk-c-k{order:4}
  .tk-table tbody td.tk-c-input{order:5; border-top:1px solid var(--line-2)}
  .tk-table tbody td.tk-fit{order:6; grid-column:span 2; border-top:1px solid var(--line-2)}
  .tk-table.has-vs tbody td.tk-c-k{border-top:1px solid var(--line-2)}
  .tk-table.has-vs tbody td.tk-fit{grid-column:span 1}
  .tk-table thead th.tk-col-vs{display:none}
  .tk-table tbody td.tk-c-vs::before{white-space:normal}
  .tk-table tbody tr.tk-cur{border-color:color-mix(in srgb, var(--accent) 55%, var(--line))}
  .tk-table tbody tr.tk-cur > th{box-shadow:inset 3px 0 0 var(--accent)}
  .tk-table tbody tr.tk-emptyrow{display:block; border:0; background:none}
  .tk-table tbody tr.tk-emptyrow td::before{display:none}
  .tk-month b{font-size:.95rem}
  .tk-sub{white-space:normal}
}

.tk-table-foot{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.7rem 1.5rem}
.tk-table-foot .hint{flex:1 1 30rem; max-width:80ch}
.tk-table-foot .btns svg{width:.95rem; height:.95rem}
.tk-notes{display:flex; flex-direction:column; gap:.6rem}
.tk-notes:empty{display:none}
.tk-notelist{display:flex; flex-direction:column; gap:.35rem}
.tk-notelist li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.65rem; align-items:start; padding:.4rem .5rem; margin-inline:-.5rem; border-radius:var(--r); font:400 var(--t-sm)/1.45 var(--f-ui); color:var(--ink-2); scroll-margin-top:calc(var(--bar-h) + 2rem)}
.tk-notelist li:focus{outline:none}
.tk-notelist li:focus-visible{outline:2px solid var(--accent)}
.tk-notelist li.tk-flash{animation:tkflash 1.6s ease-out}
.tk-noten{display:inline-grid; place-items:center; width:1.15rem; height:1.15rem; border-radius:50%; border:1px solid var(--line); font:650 .62rem/1 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-2); margin-top:.15rem}
.tk-note-models{display:inline-flex; flex-wrap:wrap; gap:.2rem .7rem; margin-right:.6rem}
.tk-notes .hint{max-width:80ch}

/* ── chart + where ──────────────────────────────────────────────────── */
.tk-lower{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start}
@media (max-width:70rem){ .tk-lower{grid-template-columns:minmax(0,1fr)} }
.tk-chart-panel .panel-foot a{font:600 var(--t-xs)/1.3 var(--f-ui)}

.tk-chart{--namew:12.5rem; --valw:5.2rem; --gap:.75rem; --pad:.4rem; position:relative}
.tk-axis{position:relative; height:1.1rem; margin:0 calc(var(--pad) + var(--valw) + var(--gap)) 0 calc(var(--pad) + var(--namew) + var(--gap)); font:400 var(--t-2xs)/1 var(--f-mono); color:var(--ink-3); font-variant-numeric:tabular-nums}
.tk-tick{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap}
.tk-tick.first{transform:none}
.tk-tick.last{transform:translateX(-100%)}
.tk-plot{position:relative}
.tk-grid{position:absolute; top:0; bottom:0; left:calc(var(--pad) + var(--namew) + var(--gap)); right:calc(var(--pad) + var(--valw) + var(--gap)); pointer-events:none}
.tk-grid i{position:absolute; top:0; bottom:0; width:1px; background:var(--line-2)}
.tk-bars{position:relative; display:flex; flex-direction:column}
.tk-bars:focus-within{outline:none}
.tk-bar{display:grid; grid-template-columns:var(--namew) minmax(0,1fr) var(--valw); gap:var(--gap); align-items:center; padding:.3rem var(--pad); min-height:2.1rem; border-radius:var(--r); cursor:default}
.tk-bar:hover,.tk-bar:focus{background:color-mix(in srgb, var(--bg-2) 70%, transparent)}
.tk-bar:focus{outline:none}
.tk-bar:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.tk-bar-name{display:flex; flex-direction:column; gap:.1rem; min-width:0}
.tk-bar-name .mpill{font-size:var(--t-xs)}
.tk-bar-flag{font:600 var(--t-2xs)/1.2 var(--f-ui); letter-spacing:.005em}
.tk-bar-flag.good{color:var(--good)}
.tk-bar-flag.bad{color:var(--bad)}
.tk-bar-flag:not(.good):not(.bad){color:var(--accent)}
.tk-bar-track{position:relative; height:14px}
.tk-bar-fill{position:absolute; left:0; top:0; bottom:0; background:var(--viz-1); border-radius:0 4px 4px 0; transition:width .25s ease}
.tk-bar:hover .tk-bar-fill,.tk-bar:focus .tk-bar-fill{filter:brightness(1.12)}
.tk-bar.best .tk-bar-fill{background:var(--good)}
.tk-bar.over .tk-bar-fill{background:repeating-linear-gradient(135deg, var(--ink-4) 0 2px, transparent 2px 5px); box-shadow:inset 0 0 0 1px var(--ink-4)}
.tk-bar-val{text-align:right; font:500 var(--t-xs)/1.2 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink)}
/* phones: name and value on one line, the bar full width underneath */
@media (max-width:40rem){
  .tk-chart{--namew:0px; --valw:0px; --gap:0px; --pad:.35rem}
  .tk-bar{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name val" "track track"; gap:.35rem .6rem; padding:.45rem var(--pad) .5rem}
  .tk-bar-name{grid-area:name; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:.1rem .5rem}
  .tk-bar-val{grid-area:val}
  .tk-bar-track{grid-area:track; height:12px}
}

.tk-tip{position:fixed; z-index:90; max-width:min(20rem, calc(100vw - 16px)); background:var(--ink); color:var(--panel); border-radius:var(--r); box-shadow:var(--shadow-pop); padding:.55rem .7rem; font:400 var(--t-xs)/1.4 var(--f-ui); font-variant-numeric:tabular-nums; pointer-events:none}
.tk-tip-in{display:flex; flex-direction:column; gap:.15rem}
.tk-tip-in b{font:600 .95rem/1.2 var(--f-mono); font-variant-numeric:tabular-nums}
.tk-tip-name{font-family:var(--f-ui); font-weight:600; opacity:.85}

.tk-refpick .select{max-width:13rem}
.tk-where .panel-body{gap:.9rem}
.tk-sent{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.3rem 1rem; margin:0; font:400 var(--t-sm)/1.4 var(--f-ui); align-items:baseline}
.tk-sent dt{font:600 var(--t-xs)/1.9 var(--f-ui); letter-spacing:.005em; color:var(--ink-3)}
.tk-sent dd{margin:0; font-size:var(--t-xs); font-variant-numeric:tabular-nums; line-height:1.9}
.tk-sent b{font-weight:600}
.tk-where-h{font:650 var(--t-md)/1.2 var(--f-ui); margin-top:.3rem}
.tk-blocks{display:flex; flex-direction:column; gap:.75rem}
.tk-blocks li{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.tk-block-top{display:flex; align-items:center; gap:.3rem .8rem; flex-wrap:wrap; font:500 var(--t-xs)/1.3 var(--f-ui)}
.tk-block-where{color:var(--ink-2)}
.tk-block-tok{color:var(--ink); font-variant-numeric:tabular-nums}
.tk-blocks .meter i{background:var(--viz-1)}
.tk-snip{font:400 var(--t-xs)/1.45 var(--f-mono); color:var(--ink-3); overflow-wrap:anywhere}
.tk-reveal{margin-left:auto; min-height:1.6rem; padding:.25rem .5rem}
.tk-findings{display:flex; flex-direction:column; gap:.6rem}
.tk-finding{border:1px solid var(--line-2); border-left:3px solid var(--hi); border-radius:var(--r); padding:.65rem .8rem; background:var(--field); display:flex; flex-direction:column; gap:.4rem}
.tk-finding-top{display:flex; align-items:center; gap:.4rem .6rem; flex-wrap:wrap}
.tk-finding-top b{font:600 var(--t-sm)/1.3 var(--f-ui)}
.tk-finding p{font:400 .95rem/1.45 var(--f-serif); color:var(--ink-2)}
.tk-dups{display:flex; flex-direction:column; gap:.3rem}
.tk-dups li{display:flex; align-items:center; gap:.2rem .5rem; flex-wrap:wrap; font:400 var(--t-xs)/1.4 var(--f-ui)}
.tk-dups .tk-snip{color:var(--ink-2)}

/* ── explainer ──────────────────────────────────────────────────────── */
.tk-explain h4{font:650 1.02rem/1.3 var(--f-ui); color:var(--ink); margin-top:1.2em}
.tk-explain h4 + p{margin-top:.35em}
.tk-formula{font-size:.8rem; white-space:pre; overflow-x:auto; max-width:100%}
.tk-faq{margin-top:.2em}
.tk-explain > h3:first-child{margin-top:0}
.tk-explain #tkWorked > * + *{margin-top:.8em}