/* ROI · stage 16 (2026-10-12): round-9 fixes for the labelled ship. Loads after stage15.css. */

/* 05 · the six halos draw whenever the section is on, even when the page jumps straight to #how
   (the steps re-render after the reveal observer has run, so the parent's state decides, not each step's) */
.js .arch.v14.on .hs.rv .hs-g { transform: none; opacity: 1; transition: transform var(--t4) var(--out), opacity var(--t3) var(--out); transition-delay: inherit; }
.arch .a-two { display: block; margin-top: 8px; color: var(--ash); }

/* 03 · six cells, numbers never cut */
.strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.s-sym span { text-overflow: clip; }
.s-rate, .s-rate span { overflow: visible; text-overflow: clip; white-space: nowrap; }
@media (max-width: 1180px) {
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip li { border-bottom: 0; border-right: 1px solid var(--hair); }
  .strip li:nth-child(3n) { border-right: 0; }
  .strip li:nth-child(-n+3) { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 760px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip li, .strip li:nth-child(3n) { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
  .strip li:nth-child(2n) { border-right: 0; }
  .strip li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* unread wallets = dotted, the same mark everywhere (hero chips, board rows, save-sort, now the strip and the footer) */
#strip li.prov .s-g { opacity: 1; border-radius: 50%; outline: 1.5px dotted rgba(236, 232, 239, .62); outline-offset: 1px; }
.foot-cluster .fc-h.prov svg { border-radius: 50%; outline: 1.5px dotted rgba(236, 232, 239, .55); outline-offset: -2px; }
.foot-cluster .fc-h.prov em { text-decoration: underline dotted rgba(236, 232, 239, .5); text-underline-offset: 4px; }
#now .sec-head { position: relative; }
#strip.has-prov::after { content: 'dotted = wallets still being read'; grid-column: 1 / -1; padding: 8px 12px 10px; border-top: 1px solid var(--hair); font: 400 12px var(--mono); color: var(--ash); }

/* 07 · the lead line names the coins the size line moves */
.b-read .b-mv { display: block; margin-bottom: 6px; color: var(--bone); }
.b-read .b-mv > b { font-weight: 600; }
.b-read .mvn { font: 400 13px var(--mono); color: var(--ash); white-space: nowrap; }
.b-read .mvn b { color: var(--mag); font-weight: 500; }

/* 08 · phones: two lines per row, so the ticker always shows and "× its size" never wraps */
@media (max-width: 760px) {
  .cmp-roi li { height: 58px; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 3px 10px; align-content: center; }
  .cmp-roi li .rk { grid-column: 1; grid-row: 1 / span 2; }
  .cmp-roi li b { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 15px; }
  .cmp-roi li .v { grid-column: 3; grid-row: 1; white-space: nowrap; }
  .cmp-roi li .was, .cmp-roi li.up .was { grid-column: 2 / -1; grid-row: 2; white-space: nowrap; overflow: hidden; }
}