/* Tool pages (latency chart, finder, true cost, cost check, compare). */

/* ---------- latency, full page ---------- */
.lat-full { padding-block: 28px 64px; }
.lat-head { margin-bottom: 24px; }
.lat-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); max-width: 22ch; }
.lat-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .lat-grid { grid-template-columns: minmax(0, 1fr) 400px; } }
.lat-full .lat-stage { overflow: hidden; background: var(--shoal-3); aspect-ratio: 1000 / 470; }
.lat-full .lat-svg { width: 100%; height: 100%; }
@media (max-width: 767px) { .lat-full .lat-stage { aspect-ratio: 4 / 3; } }
.lat-start { padding: 22px; display: grid; gap: 12px; }
.lat-full.has-result .lat-start .btn { --bg: transparent; --fg: var(--ink); border-color: var(--rule-strong); min-height: 44px; }
.lat-full .lat-result { padding: 22px; display: grid; gap: 18px; }
.dc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .dc-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.dc-card a { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper); text-decoration: none; height: 100%; }
.dc-card a:hover { border-color: var(--magenta); }
.dc-card strong { display: block; }

/* =====================================================================================================
   Hub, hosting finder, true cost, cost check, compare (tools_hub.py, finder.py, true_cost.py,
   cost_cutter.py, compare_tool.py). Interactive = pill, surfaces = 6px, magenta only for what matters.
   ===================================================================================================== */

/* ---------- shared tool bits ---------- */
.tool { padding-block: 28px 72px; }
.tool-head { max-width: 760px; margin-bottom: 26px; }
.tool-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); }
.i-flip { transform: scaleX(-1); }
.chip-warn { border-color: transparent; background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.sk { display: block; border-radius: var(--radius); background: var(--paper-2); animation: sk-pulse 1.4s ease-in-out infinite; }
.sk + .sk { margin-top: 14px; }
.sk-h { height: 34px; width: 55%; }
.sk-p { height: 18px; width: 80%; }
.sk-row { height: 76px; }
.sk-scale { height: 120px; }
@keyframes sk-pulse { 50% { opacity: .45; } }
@keyframes tool-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* compass rose (same drawing as the home page; home.css is not loaded here) */
:is(.finder-rose, .tile-rose) .rose { width: 100%; height: auto; }
:is(.finder-rose, .tile-rose) .rose-ring { fill: none; stroke: var(--ink); stroke-width: 1.2; }
:is(.finder-rose, .tile-rose) .rose-ticks line { stroke: var(--ink); stroke-width: 1; }
:is(.finder-rose, .tile-rose) .rose-letters text { font-family: var(--label); font-style: italic; font-size: 19px; fill: var(--ink); text-anchor: middle; }
:is(.finder-rose, .tile-rose) .rose-pt { fill: var(--shoal-1); stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
:is(.finder-rose, .tile-rose) .rose-pt-dark { fill: var(--shoal-3); }
:is(.finder-rose, .tile-rose) .rose-pt-minor { opacity: .8; }
:is(.finder-rose, .tile-rose) .rose-needle { transform-origin: 150px 150px; transform: rotate(var(--a, 0deg)); transition: transform 1.1s cubic-bezier(.34, 1.56, .64, 1); }
:is(.finder-rose, .tile-rose) .needle-n { fill: var(--magenta); }
:is(.finder-rose, .tile-rose) .needle-s { fill: var(--ink); }
:is(.finder-rose, .tile-rose) .needle-hub { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }

/* ---------- hub ---------- */
.hub-head { display: grid; gap: 8px; }
.hub-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.hub-pick-q { font-size: 1.2rem; color: var(--ink-2); margin-right: 4px; }
.hub-chip {
  min-height: 44px; padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--rule-strong); background: var(--paper);
  font-weight: 560; cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.hub-chip:hover { border-color: var(--magenta); color: var(--magenta); background: var(--magenta-wash); }
.hub-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hub-pick-say { flex-basis: 100%; min-height: 1.5em; color: var(--ink-2); }
.bento { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile-finder { grid-column: 1 / 8; grid-row: 1 / 3; }
  .tile-latency { grid-column: 8 / 13; grid-row: 1; }
  .tile-tide { grid-column: 8 / 13; grid-row: 2; }
  .tile-scale { grid-column: 1 / 7; grid-row: 3; }
  .tile-tug { grid-column: 7 / 13; grid-row: 3; }
}
.tile {
  position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: var(--paper);
  transition: opacity .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
}
.tile:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.tile:focus-within { border-color: var(--magenta); }
.bento[data-focus]:not([data-focus=""]) .tile:not(.is-match) { opacity: .38; }
.tile.is-match { border-color: var(--magenta); box-shadow: var(--shadow); }
.tile-body { display: grid; gap: 10px; align-content: start; padding: 20px 22px 24px; }
.tile-body h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); }
.tile-body p { color: var(--ink-2); }
.tile-link { text-decoration: none; }
.tile-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile-link:focus-visible { outline: none; }
.tile-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 620; color: var(--magenta); margin-top: 4px; }
.tile-go { justify-self: start; margin-top: 8px; }
.tile-cap { font-size: .92rem; color: var(--ink-2); margin-top: 8px; }
.tile-finder { background: var(--shoal-1); grid-template-rows: 1fr auto; }
.tile-finder .tile-body { padding: 24px 28px 30px; }
.tile-finder .tile-body p { font-size: 1.1rem; max-width: 46ch; }
.tile-rose { padding: 28px 28px 0; display: grid; place-items: center; }
.tile-rose .rose { max-width: 340px; }
.tile-finder:hover .rose-needle { --a: 38deg; }
.tile-latency .tile-art { aspect-ratio: 21 / 9; background: var(--shoal-3); overflow: hidden; contain: paint; }
.tile-latency .tile-art svg { width: 100%; height: 100%; }
.hub-dc { fill: var(--magenta); stroke: var(--paper); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tile-tide .tile-art { padding: 20px 22px 0; }
.mini-tide { width: 100%; height: auto; }
.mt-grid { stroke: var(--rule); stroke-dasharray: 2 4; }
.mt-lab { font-size: 10px; fill: var(--ink-3); text-anchor: middle; font-family: var(--label); font-style: italic; }
.mt-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.mt-line.is-best, .mt-kink.is-best { stroke: var(--magenta); stroke-width: 2.6; }
.mt-line.is-2, .mt-kink.is-2 { stroke: var(--ink); }
.mt-line.is-3, .mt-kink.is-3 { stroke: var(--ink-3); }
.mt-line.is-3 { stroke-dasharray: 5 4; }
.mt-kink { fill: var(--paper); stroke-width: 1.6; }
.tile-scale { background: var(--paper-2); }
.tile-scale .tile-art { padding: 34px 26px 0; }
.mini-scale { position: relative; height: 84px; }
.ms-band { position: absolute; left: var(--a); width: calc(var(--b) - var(--a)); top: 6px; bottom: 22px; background: var(--shoal-2); border-radius: 3px; }
.ms-ticks i { position: absolute; left: var(--x); bottom: 22px; width: 2px; height: 28px; background: var(--ink-3); opacity: .75; }
.ms-you { position: absolute; left: var(--x); top: -6px; bottom: 22px; border-left: 2px solid var(--magenta); }
.ms-you span { position: absolute; bottom: 100%; left: -1px; transform: translateX(-50%); font-family: var(--label); font-style: italic; color: var(--magenta); font-size: .95rem; white-space: nowrap; }
.ms-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-top: 1px solid var(--rule-strong); }
.ms-axis span { position: absolute; left: var(--x); transform: translateX(-50%); top: 3px; font-size: .78rem; color: var(--ink-2); }
.tile-tug .tile-art { padding: 22px 24px 0; }
.mini-tug .mg-heads { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.mini-tug .mg-heads .chart-label { color: var(--magenta); font-size: 1.2rem; }
.mini-tug ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-tug li { display: grid; grid-template-columns: 1fr 74px 1fr; align-items: center; gap: 8px; }
.mg-a, .mg-b { display: block; height: 9px; width: calc(var(--v) * 100%); border-radius: var(--pill); }
.mg-a { justify-self: end; background: var(--ink); }
.mg-b { background: var(--ink-3); }
.mg-l { text-align: center; font-size: .82rem; color: var(--ink-2); }
.hub-honest { border-top: 1px solid var(--rule); }
.hub-honest-grid, .tc-explain-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .hub-honest-grid, .tc-explain-grid { grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; } }

/* ---------- hosting finder ---------- */
.finder-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .finder-layout { grid-template-columns: minmax(260px, 4fr) 8fr; gap: 56px; } }
.finder-side h1 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); }
.finder-rose { max-width: 300px; }
@media (max-width: 959px) {
  .finder-side { display: grid; grid-template-columns: minmax(0, 1fr) 88px; column-gap: 16px; align-items: center; }
  .finder-side > * + * { margin-top: 0; }
  .finder-side h1 { grid-column: 1; grid-row: 1; }
  .finder-side .lede { grid-column: 1 / -1; margin-top: 10px; }
  .finder-rose { grid-column: 2; grid-row: 1; width: 88px; }
  .finder-rose .rose-letters, .finder-rose .rose-ticks { display: none; }
}
.finder-card { position: relative; padding: 30px 28px 24px; overflow: hidden; }
@media (min-width: 960px) { .finder-card { min-height: 520px; } }
@media (max-width: 599px) { .finder-card { padding: 24px 18px 18px; } }
.f-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rule); }
.f-progress span { display: block; height: 100%; width: var(--p, 0%); background: var(--magenta); transition: width .5s var(--ease); }
.f-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.f-step.is-in { animation: tool-rise .45s var(--ease) both; }
.f-q { display: grid; gap: 6px; padding: 0; margin-bottom: 22px; }
.f-count { color: var(--ink-2); font-size: 1.05rem; }
.f-qtext { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 640; font-stretch: 86%; letter-spacing: -.018em; line-height: 1.1; text-wrap: balance; }
.f-choices { display: grid; gap: 10px; }
.f-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.f-list { grid-template-columns: 1fr; }
.f-pills { display: flex; flex-wrap: wrap; }
.f-choice {
  display: grid; gap: 2px; align-content: center; text-align: left; min-height: 64px; padding: 12px 26px; border-radius: var(--pill);
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.f-choice:hover { border-color: var(--magenta); background: var(--magenta-wash); }
.f-choice:active { transform: scale(.985); }
.f-choice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.f-label { font-weight: 620; font-size: 1.06rem; line-height: 1.25; }
.f-hint { font-size: .9rem; color: var(--ink-2); line-height: 1.3; }
.f-choice[aria-pressed="true"] .f-hint { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.f-pills .f-choice { min-height: 50px; padding: 0 22px; }
.f-small .f-choice { min-height: 40px; padding: 0 16px; }
.f-small .f-label { font-size: .95rem; font-weight: 560; }
.f-aside { margin-top: 16px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.f-extras { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 14px; }
.f-extras-title { font-weight: 620; }
.f-extra-row { display: grid; gap: 8px; }
@media (min-width: 700px) { .f-extra-row { grid-template-columns: 150px 1fr; align-items: center; } }
.f-extra-label { font-size: .95rem; color: var(--ink-2); }
.f-nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.f-nav-gap { flex: 1; }
.f-nav [hidden] { display: none; }

.finder-result { scroll-margin-top: calc(var(--header) + 12px); }
.fr { padding: 26px 28px 24px; display: grid; gap: 22px; animation: tool-rise .5s var(--ease) both; }
@media (max-width: 599px) { .fr { padding: 20px 16px; } }
.fr.is-loading { gap: 0; }
.fr-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-chip { min-height: 34px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--rule); background: var(--paper-2); font-size: .88rem; cursor: pointer; color: var(--ink-2); }
.fr-chip:hover { border-color: var(--magenta); color: var(--magenta); }
.fr-type { background: var(--shoal-1); border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 8px; }
.fr-kicker { color: var(--ink-2); font-size: 1.1rem; }
.fr-type h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); outline: none; }
.fr-why { color: var(--ink-2); max-width: 60ch; }
.fr-size strong { font-weight: 680; }
.fr-nothing { border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 10px; justify-items: start; background: var(--paper-2); }
.fr-nothing h3 { font-size: 1.25rem; }
.fr-list-title { font-size: 1.3rem; }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fr-host {
  display: grid; gap: 12px 24px; padding: 20px 0; border-top: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id fit" "points points" "price price" "act act";
  animation: tool-rise .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms);
}
@media (min-width: 760px) {
  .fr-host { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-areas: "id price fit" "points act act"; align-items: start; }
}
.fr-id { grid-area: id; display: flex; gap: 14px; align-items: center; min-width: 0; }
.fr-id h4 { font-size: 1.3rem; }
.fr-id h4 a { text-decoration: none; }
.fr-id h4 a:hover { text-decoration: underline; }
.fr-fit { grid-area: fit; text-align: right; white-space: nowrap; line-height: 1; }
.fr-fit strong { font-size: 2.3rem; font-weight: 720; font-stretch: 84%; }
.fr-fit-word { font-size: .95rem; color: var(--ink-2); }
.fr-host.is-first .fr-fit strong { color: var(--magenta); }
.fr-points { grid-area: points; display: grid; gap: 6px; }
.fr-pros, .fr-cons { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fr-pros li, .fr-cons li { display: flex; gap: 8px; align-items: baseline; font-size: .97rem; }
.fr-pros .i, .fr-cons .i { position: relative; top: .15em; }
.fr-pros .i { color: var(--good); }
.fr-cons li { color: var(--ink-2); }
.fr-cons .i { color: var(--warn); }
.fr-price { grid-area: price; display: grid; gap: 2px; }
.fr-price strong { font-weight: 650; }
.fr-actions { grid-area: act; display: flex; flex-wrap: wrap; gap: 8px; align-self: end; }
@media (min-width: 760px) { .fr-actions { justify-content: flex-end; } }
.fr-more-title { font-weight: 620; margin-bottom: 10px; }
.fr-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fr-more a { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border: 1px solid var(--rule); border-radius: var(--pill); text-decoration: none; font-weight: 560; background: var(--paper); }
.fr-more a:hover { border-color: var(--magenta); }
.fr-more .logo-tile { border-radius: 50%; }
.fr-note { color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 16px; }
.fr-again { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.how-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .how-grid { grid-template-columns: 4fr 7fr; column-gap: 64px; } .how-grid p { grid-column: 2; } }
.how-scale { display: flex; height: 46px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule-strong); }
.how-scale span { flex: 0 0 var(--w); display: flex; align-items: center; padding: 0 10px; font-size: .86rem; font-weight: 560; background: var(--shoal-1); border-right: 1px solid var(--rule-strong); line-height: 1.15; overflow: hidden; }
.how-scale span:nth-child(even) { background: var(--shoal-2); }
.how-scale span:last-child { border-right: 0; background: var(--shoal-3); }
.how-scale span:first-child { background: var(--magenta); color: var(--on-magenta); }
@media (max-width: 699px) {
  .how-scale { flex-direction: column; height: auto; border: 0; gap: 6px; overflow: visible; }
  .how-scale span { flex: none; width: calc(var(--w) * 2.6); min-width: max-content; height: 34px; border: 0; border-radius: 4px; }
}

/* ---------- true cost ---------- */
.tc-layout { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1000px) { .tc-layout { grid-template-columns: 330px minmax(0, 1fr); } }
.tc-controls { padding: 20px; display: grid; gap: 18px; }
@media (min-width: 640px) and (max-width: 999px) { .tc-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tc-years, .tc-controls > p { grid-column: 1 / -1; } }
.tc-slot { position: relative; display: grid; gap: 10px; padding-left: 16px; }
.tc-swatch { position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: var(--pill); background: var(--rule-strong); transition: background-color .3s var(--ease); }
.tc-slot[data-rank="0"] .tc-swatch { background: var(--magenta); }
.tc-slot[data-rank="1"] .tc-swatch { background: var(--ink); }
.tc-slot[data-rank="2"] .tc-swatch { background: repeating-linear-gradient(to bottom, var(--ink-3) 0 6px, transparent 6px 10px); }
.tc-plan .select { font-size: .92rem; min-height: 42px; }
.tc-years label output { color: var(--magenta); font-weight: 700; }
.tc-ticks { display: flex; justify-content: space-between; font-size: .9rem; color: var(--ink-2); padding-inline: 4px; }
.tc-stage { padding: 14px 16px 6px; min-width: 0; }
.tc-chart-wrap { width: 100%; }
.tc-chart { display: block; width: 100%; height: auto; overflow: visible; }
.tc-skel rect { fill: var(--paper-2); animation: sk-pulse 1.4s ease-in-out infinite; }
.tc-grid line { stroke: var(--rule); }
.tc-grid .tc-vline { stroke-dasharray: 2 4; }
.tc-grid .tc-axis { stroke: var(--rule-strong); }
.tc-ylab { font-size: 12px; fill: var(--ink-2); text-anchor: end; font-variant-numeric: tabular-nums; }
.tc-xlab { font-size: 14px; fill: var(--ink-2); text-anchor: middle; }
.tc-area { fill: var(--magenta-wash); }
.tc-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.tc-line.is-best { stroke: var(--magenta); stroke-width: 3.2; }
.tc-line.is-2 { stroke: var(--ink); }
.tc-line.is-3 { stroke: var(--ink-3); stroke-dasharray: 7 5; }
.tc-kink { fill: var(--paper); stroke-width: 2.2; }
.tc-kink.is-best, .tc-end.is-best { stroke: var(--magenta); }
.tc-kink.is-2, .tc-end.is-2 { stroke: var(--ink); }
.tc-kink.is-3, .tc-end.is-3 { stroke: var(--ink-3); }
.tc-end { fill: var(--paper); stroke-width: 2; }
.tc-kinklab { font-size: 12.5px; text-anchor: end; font-family: var(--label); font-style: italic; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; fill: var(--ink-2); }
.tc-kinklab.is-best { fill: var(--magenta); }
.tc-leader { stroke: var(--rule-strong); fill: none; }
.tc-endname { font-size: 13px; font-weight: 620; fill: var(--ink-2); }
.tc-endval { font-size: 15px; font-weight: 720; fill: var(--ink); font-variant-numeric: tabular-nums; }
.tc-endname.is-best, .tc-endval.is-best { fill: var(--magenta); }
.tc-emptytext { text-anchor: middle; fill: var(--ink-2); font-family: var(--label); font-style: italic; font-size: 19px; }
.tc-totals { border-top: 1px solid var(--rule); margin-top: 8px; }
.tc-empty { padding: 18px 4px; color: var(--ink-2); }
.tc-rows { list-style: none; margin: 0; padding: 0; }
.tc-row {
  display: grid; gap: 8px 18px; padding: 14px 0 14px 14px; border-bottom: 1px solid var(--rule); position: relative;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who sum" "how how" "act act";
}
.tc-row:last-child { border-bottom: 0; }
@media (min-width: 1180px) { .tc-row { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.5fr) auto; grid-template-areas: "who sum how act"; align-items: center; } }
.tc-key { position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: var(--pill); background: var(--ink); }
.tc-row.rank-0 .tc-key { background: var(--magenta); }
.tc-row.rank-2 .tc-key { background: repeating-linear-gradient(to bottom, var(--ink-3) 0 6px, transparent 6px 10px); }
.tc-who { grid-area: who; display: flex; align-items: center; gap: 12px; min-width: 0; }
.tc-who > div { display: grid; min-width: 0; line-height: 1.3; }
.tc-who .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-sum { grid-area: sum; display: grid; text-align: right; line-height: 1.2; }
.tc-total { font-size: 1.75rem; font-weight: 720; font-stretch: 84%; }
.tc-row.rank-0 .tc-total { color: var(--magenta); }
.tc-how { grid-area: how; display: grid; gap: 2px; color: var(--ink-2); }
.tc-diff { color: var(--ink); font-weight: 560; }
.tc-diff.is-best { color: var(--magenta); }
.tc-act { grid-area: act; display: flex; gap: 8px; flex-wrap: wrap; }
.tc-notes { margin-top: 32px; max-width: 900px; display: grid; gap: 10px; }
.tc-notes-title { font-size: 1.5rem; margin-bottom: 4px; }
.tc-note { border-top: 1px solid var(--rule); }
.tc-note summary { cursor: pointer; padding: 14px 0; font-weight: 600; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tc-note-body { padding: 0 0 16px; display: grid; gap: 8px; }
.tc-note-body a { color: var(--magenta); }
.tc-explain-grid h2 { max-width: 14ch; }

/* ---------- cost check ---------- */
.cc-layout { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1000px) { .cc-layout { grid-template-columns: 370px minmax(0, 1fr); } }
.cc-form { padding: 22px; display: grid; gap: 18px; }
.cc-form .btn { justify-self: start; }
.cc-money { position: relative; }
.cc-money span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 650; color: var(--ink-2); }
.cc-money .input { padding-left: 30px; font-size: 1.15rem; font-weight: 620; }
.cc-two { display: grid; gap: 18px; }
@media (min-width: 480px) and (max-width: 999px) { .cc-two { grid-template-columns: 1fr 1fr; } }
.cc-needs { border: 0; margin: 0; padding: 0; min-width: 0; }
.cc-needs legend { padding: 0; margin-bottom: 8px; }
.cc-needs .choice span { min-height: 40px; padding: 0 14px; font-size: .95rem; }
.cc-err { color: var(--warn); font-weight: 560; }
.cc-hint { color: var(--ink-2); }
.cc-use { border: 0; background: none; padding: 0; color: var(--magenta); font-weight: 620; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.cc-result { padding: 24px 26px; min-width: 0; }
@media (max-width: 599px) { .cc-result { padding: 20px 16px; } }
.cc-out { display: grid; gap: 14px; animation: tool-rise .45s var(--ease) both; }
.cc-kicker { color: var(--ink-2); font-size: 1.08rem; }
.cc-out h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); outline: none; }
.cc-verdict { color: var(--magenta); }
.cc-steps5 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.cc-steps5 li { padding: 7px 4px; text-align: center; font-size: .8rem; line-height: 1.15; color: var(--ink-2); background: var(--paper-2); }
.cc-steps5 li:first-child { border-radius: var(--pill) 0 0 var(--pill); }
.cc-steps5 li:last-child { border-radius: 0 var(--pill) var(--pill) 0; }
.cc-steps5 li.is-on { background: var(--ink); color: var(--paper); font-weight: 650; }
@media (max-width: 520px) { .cc-steps5 li { font-size: .7rem; padding: 6px 2px; } }
.cc-scale-wrap { padding-top: 40px; }
.cc-scale { position: relative; height: 112px; }
.cc-band { position: absolute; left: var(--a); width: calc(var(--b) - var(--a)); top: 0; bottom: 26px; background: var(--shoal-2); border-radius: 4px; }
.cc-band-label { position: absolute; left: 6px; top: 4px; font-size: .9rem; color: var(--ink); white-space: nowrap; }
.cc-ticks { position: absolute; left: 0; right: 0; bottom: 26px; height: 70px; }
.cc-tick { position: absolute; left: var(--x); bottom: calc(var(--r) * 9px); width: 2px; height: 16px; margin-left: -1px; background: var(--ink-3); opacity: .8; border-radius: 1px; }
.cc-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; border-top: 1px solid var(--rule-strong); }
.cc-axis-mark { position: absolute; left: var(--x); top: 5px; transform: translateX(-50%); font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cc-ref { position: absolute; left: var(--x); top: 8px; bottom: 26px; border-left: 2px dashed var(--ink); }
.cc-ref-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cc-ref-key { display: inline-block; width: 0; height: 16px; border-left: 2px dashed var(--ink); }
.cc-you { position: absolute; left: var(--x); top: -10px; bottom: 26px; width: 3px; margin-left: -1.5px; background: var(--magenta); transition: left .5s var(--ease); }
.cc-you::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--magenta); border: 2px solid var(--paper); }
.cc-you-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; white-space: nowrap; background: var(--magenta); color: var(--on-magenta); border-radius: var(--pill); padding: 3px 11px; font-size: .88rem; font-weight: 650; }
.cc-you.is-right .cc-you-label { transform: translateX(calc(-100% + 8px)); }
.cc-you.is-left .cc-you-label { transform: translateX(-8px); }
.cc-text { color: var(--ink-2); }
.cc-text strong { color: var(--ink); }
.cc-alts { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); display: grid; gap: 14px; }
.cc-alts h3 { font-size: 1.35rem; }
.cc-alt-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cc-alt {
  display: grid; gap: 8px 22px; padding: 16px 0; border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "id" "save" "why" "act";
}
@media (min-width: 760px) {
  .cc-alt { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-areas: "label label label" "id save act" "why why why"; align-items: center; }
}
.cc-alt-label { grid-area: label; color: var(--ink-2); font-size: 1.02rem; }
.cc-alt-id { grid-area: id; display: flex; gap: 12px; align-items: center; min-width: 0; }
.cc-alt-id h4 { font-size: 1.2rem; }
.cc-alt-id h4 a { text-decoration: none; }
.cc-alt-save { grid-area: save; display: grid; line-height: 1.25; }
.cc-save { color: var(--magenta); font-size: 1.3rem; font-weight: 720; font-stretch: 88%; }
.cc-save.is-more { color: var(--ink-2); }
.cc-alt > p.small { grid-area: why; }
.cc-alt-act { grid-area: act; display: flex; gap: 8px; flex-wrap: wrap; }
.cc-empty { display: grid; gap: 8px; }
.cc-loading { display: grid; }
.cc-move { display: grid; gap: 26px; }
.cc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: mv; }
@media (min-width: 768px) { .cc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
.cc-steps li { display: grid; gap: 6px; align-content: start; counter-increment: mv; padding-top: 14px; border-top: 2px solid var(--ink); }
.cc-steps li::before { content: counter(mv); font-weight: 720; font-size: 1.9rem; font-stretch: 84%; color: var(--magenta); line-height: 1; }
.cc-steps strong { font-size: 1.08rem; }

/* ---------- compare (tug of war) ---------- */
.tw-panel { padding: 26px; display: grid; gap: 22px; }
@media (max-width: 599px) { .tw-panel { padding: 18px 14px; } }
.tw-top { display: grid; gap: 16px 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
@media (min-width: 860px) { .tw-top { grid-template-columns: minmax(0, 1fr) minmax(180px, 1.1fr) minmax(0, 1fr); } }
.tw-pick { display: grid; gap: 10px; min-width: 0; }
.tw-pick-b { text-align: right; }
.tw-pick-b .tw-logo { justify-self: end; }
.tw-logo .logo-tile { border-radius: 14px; }
.tw-logo .logo-tile img { width: 64%; height: 64%; }
.tw-total { line-height: 1; }
.tw-total strong { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); font-weight: 740; font-stretch: 82%; transition: color .3s var(--ease); }
.win-a .tw-pick-a .tw-total strong, .win-b .tw-pick-b .tw-total strong { color: var(--magenta); }
.tw-rope { position: relative; height: 44px; align-self: center; grid-column: 1 / -1; grid-row: 2; }
.tw-pick-a { grid-column: 1; grid-row: 1; }
.tw-pick-b { grid-column: 2; grid-row: 1; }
@media (min-width: 860px) { .tw-rope { grid-column: 2; grid-row: 1; } .tw-pick-b { grid-column: 3; grid-row: 1; } }
.tw-rope-line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: var(--pill); background: repeating-linear-gradient(90deg, var(--ink-3) 0 10px, var(--ink-2) 10px 12px); }
.tw-rope-mid { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; background: var(--rule-strong); }
.tw-knot { position: absolute; left: var(--x, 50%); top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--magenta); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--magenta); transition: left .7s cubic-bezier(.34, 1.56, .64, 1); }
.tw-verdict { font-size: 1.15rem; text-align: center; max-width: 60ch; margin-inline: auto; color: var(--ink-2); min-height: 1.6em; }
.tw-verdict strong { color: var(--ink); font-weight: 680; }
.tw-controls { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: end; padding-top: 18px; border-top: 1px solid var(--rule); }
.tw-project { width: min(100%, 280px); }
.tw-presets { border: 0; margin: 0; padding: 0; min-width: 0; }
.tw-presets legend { padding: 0; margin-bottom: 8px; }
.tw-rows { list-style: none; margin: 0; padding: 0; transition: opacity .3s var(--ease); }
.is-same .tw-rows { opacity: .35; }
.tw-row {
  display: grid; align-items: center; gap: 6px 10px; padding: 9px 0; border-bottom: 1px solid var(--rule);
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 34px; grid-template-areas: "mid mid mid mid" "va ba bb vb";
  transition: opacity .25s var(--ease);
}
@media (min-width: 760px) {
  .tw-row { grid-template-columns: 44px minmax(0, 1fr) minmax(190px, 230px) minmax(0, 1fr) 44px; grid-template-areas: "va ba mid bb vb"; gap: 14px; }
}
.tw-row:last-child { border-bottom: 0; }
.tw-row.is-off { opacity: .38; }
.tw-val { font-weight: 640; color: var(--ink-2); }
.tw-val-a { grid-area: va; text-align: right; }
.tw-val-b { grid-area: vb; }
.lead-a .tw-val-a, .lead-b .tw-val-b { color: var(--ink); font-weight: 760; }
.tw-bar { position: relative; height: 12px; }
.tw-bar-a { grid-area: ba; }
.tw-bar-b { grid-area: bb; }
.tw-bar i { position: absolute; top: 0; bottom: 0; background: var(--ink-3); opacity: .55; transition: width .55s var(--ease), background-color .3s var(--ease), opacity .3s var(--ease); }
.tw-bar-a i { right: 0; width: calc(var(--a, 0) * 100%); border-radius: var(--pill) 0 0 var(--pill); }
.tw-bar-b i { left: 0; width: calc(var(--b, 0) * 100%); border-radius: 0 var(--pill) var(--pill) 0; }
.lead-a .tw-bar-a i, .lead-b .tw-bar-b i { background: var(--ink); opacity: 1; }
.tw-row:not(.lead-a):not(.lead-b) .tw-bar i { opacity: .8; }
.tw-mid { grid-area: mid; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; }
.tw-mid label { font-weight: 600; font-size: .95rem; }
.tw-mid input { grid-column: 1 / -1; }
.tw-w { grid-row: 1; grid-column: 2; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .tw-mid { text-align: center; grid-template-columns: 1fr; } .tw-w { display: none; } }
.tw-foot { display: grid; gap: 14px; }
@media (min-width: 760px) { .tw-foot { grid-template-columns: 1fr 1fr; } .tw-curated, .tw-note { grid-column: 1 / -1; } }
.tw-host { background: var(--paper-2); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.tw-host-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tw-host-act { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-curated { justify-self: start; }
.tw-matchups { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .tw-matchups { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.tw-matchups a { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); text-decoration: none; font-weight: 600; }
.tw-matchups a:hover { border-color: var(--magenta); }
.tw-matchups a > span:last-child { margin-left: 6px; }