/* v116-close.css — the closing round, A2 (Oct 9, 2026, afternoon). Tokens only.
   1 · the OPEN measuring clock (ui/meters.js openClock): how long a change takes to show is an estimate, so the bar never ends at it.
   3 · a page's record on a phone: a short head, a small drawing, one primary action and the rest under More.
   4 · Links › Opportunities on a phone: the links summary folds to one line, so the list comes first.
   5 · tab strips that scroll sideways on a phone: a clear fade at the cut edge, a partly visible next tab, every tab reachable by touch and keys. */

/* ---------- 1 · the open measuring clock ---------- */
.m-clock.is-open:not(.is-compact){display:grid;gap:8px;min-width:0}
.m-clock.is-open > .m-oc{display:grid;gap:6px;min-width:0}
/* the track runs past the estimate and fades out — it has no end, so it is never "full" */
.m-bar.m-open{overflow:visible;background:linear-gradient(to right,var(--m-track) 86%,transparent)}
.m-bar.m-open > .m-bf{border-radius:var(--r-full) 0 0 var(--r-full)}
/* the days since the last read's complete data: still settling (hatched, never solid) */
.m-bar.m-open > .m-bp{position:absolute;top:0;bottom:0;display:block;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--m-meas) 60%,transparent) 0 2px,transparent 2px 4px)}
/* the estimate: a dotted tick taller than the bar — never a flag, never an end */
.m-bar.m-open > .m-est{position:absolute;top:-4px;bottom:-4px;width:0;margin-left:-1px;display:block;border-left:2px dotted var(--fg-2)}
.m-bar.m-open.is-mini > .m-est{top:-3px;bottom:-3px}
.m-clock.is-open .m-cf-est{display:inline-flex;align-items:center;gap:6px;text-align:right}
.m-clock.is-open .m-estk{display:inline-block;flex:none;width:0;height:11px;border-left:2px dotted var(--fg-2)}
.m-clock.is-open .m-read{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.m-clock.is-compact.is-open .m-bar.is-mini{width:60px}
@media (max-width:640px){
  .m-clock.is-open .m-cf{flex-wrap:wrap;row-gap:2px}
  .m-clock.is-open .m-ch{flex-wrap:wrap;row-gap:2px}
}

/* ---------- 3 · a page's record on a phone (Website › Pages › <page>) ----------
   The numbers start right under a short head: the drawing shrinks to a 52px sketch beside the name (its labels and caption go — the figure keeps
   its title), and the actions are ONE primary (Send to developer) plus More, which holds the others (pages/lpages.js recordPage). */
.wx-acts .wx-a2{display:contents}
.wx-acts .wx-more{display:none}
@media (max-width:640px){
  .wx-one .fd-nav{margin-bottom:8px}
  .wx-hd{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .wx-hd .fd-labels{margin-bottom:6px}
  .wx-hd h1{font-size:var(--t-t1);line-height:var(--lh-t1)}
  .wx-hd .wx-status{margin-top:2px;font-size:var(--t-co);line-height:var(--lh-co)}
  .wx-hd > .wx-thumb{flex-direction:column;align-items:flex-end;gap:0;padding-top:2px}
  .wx-thumb .cg-phone{width:52px;padding:4px;gap:2px;border-radius:9px}
  .wx-thumb .cg-blk{min-height:6px;padding:0;border-radius:2px}
  .wx-thumb .cg-blk > span{display:none}
  .wx-thumb .cg-blk.is-big{min-height:14px}
  .wx-thumb figcaption{display:none}
  .wx-hd > .wx-acts{margin-top:12px}
  .wx-acts .wx-a2{display:none}
  .wx-acts .wx-more{display:inline-flex}
}

/* ---------- 4 · SEO Search › Links › Opportunities on a phone: the list first ----------
   The links summary and its chart fold into one line with "Show the chart" (pages/lsearch.js linksTab); on a wider screen the card stays. */
.sv-lk-sum{display:none}
@media (max-width:640px){
  .sv-lk-sum{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 8px 8px 12px;border:1px solid var(--ln);border-radius:var(--r-12);background:var(--bg-2);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
  .sv-lk-sum > svg{flex:none;color:var(--fg-3)}
  .sv-lk-sum b{font-weight:var(--w-medium);color:var(--fg)}
  .sv-lk-sum > .btn{flex:none}
  .sv-lk-card.is-folded{display:none}
}

/* ---------- 5 · tab strips that scroll sideways on a phone ----------
   The row already scrolls by touch and its tabs are links and buttons (Tab reaches each; main.js tabRows and ui/lboard.js fitTabs keep the open
   tab in view and set is-ovf-l / is-ovf-r). Here the cut edge says so clearly: a wider fade that reaches clear transparency, so the next tab shows
   as a fading partial label; a tab reached by the keyboard scrolls clear of the fade (scroll-margin); and the row never snaps a tab under it. */
@media (max-width:640px){
  :is(.pl-tabs,.gr-tabs,.pl-views).is-ovf-r{-webkit-mask-image:linear-gradient(to right,currentColor calc(100% - 64px),transparent calc(100% - 6px));mask-image:linear-gradient(to right,currentColor calc(100% - 64px),transparent calc(100% - 6px))}
  :is(.pl-tabs,.gr-tabs,.pl-views).is-ovf-l{-webkit-mask-image:linear-gradient(to right,transparent 6px,currentColor 64px);mask-image:linear-gradient(to right,transparent 6px,currentColor 64px)}
  :is(.pl-tabs,.gr-tabs,.pl-views).is-ovf-l.is-ovf-r{-webkit-mask-image:linear-gradient(to right,transparent 6px,currentColor 64px,currentColor calc(100% - 64px),transparent calc(100% - 6px));mask-image:linear-gradient(to right,transparent 6px,currentColor 64px,currentColor calc(100% - 64px),transparent calc(100% - 6px))}
  :is(.pl-tabs,.gr-tabs,.pl-views){scroll-padding-inline:24px}
  :is(.pl-tabs,.gr-tabs,.pl-views) > :is(a,button){scroll-margin-inline:64px}
}

/* final close (Oct 9): long stake amounts ("≈ 30 orders a week while it lasted (10–51) · ≈ $6K–$30K a week") wrap on phones instead of running off the card */
@media (max-width: 640px) { .db-im b, .db-b .stake-line b, .db-fv-l b, .db-gs b { white-space: normal; } }
