/* ═════════════════════════════════════════════════════════
   OS PAGE · sites/fovea/os.html only, same file-ownership
   pattern as demo.css/product.js -- exclusive to one page, so
   it can be edited freely without touching the shared site.css
   or v3.css this hour. Loads after v3.css.
   ═════════════════════════════════════════════════════════ */

/* nav 2.3: the Product menu's two labelled subsections (os.html only for
   now -- the other pages get this nav when Fable says). Desktop dropdown
   is the "paper" object (site.css redefines its tokens to --paper-* for
   that surface); the >900px block below matches that, and the <=900px
   block mirrors site.css's own mobile override for .navmenu a at the same
   breakpoint (ink tokens, not paper tokens), so the label reads correctly
   in both contexts, same split site.css already draws for the links. */
.navmenu-label{display:block;padding:10px 12px 3px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-ink-3)}
.navmenu-label:first-child{padding-top:6px}
@media(max-width:900px){
  .navmenu-label{padding:10px 4px 3px 15px;color:var(--ink-3)}
}

/* the platform-scale loop (REFINE-V4 2.2): four static glass surfaces,
   site.css's own .surfaces/.surf-card pattern (already shipped on
   product.html's #intro as a 6-card grid) -- reused verbatim for the
   interaction, not reinvented, per Fable's Sep 23 clarification that the
   agent's four panel surfaces (understanding session/styles/exports/
   growth) do not get a second, platform-scale copy. Four items reads
   better at 4 columns than the shared 3-column grid, so it's overridden
   here, scoped to this page's own section id -- the 2-col/1-col mobile
   steps below match site.css's own breakpoints for .surfaces exactly. */
#loop .surfaces{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){ #loop .surfaces{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ #loop .surfaces{grid-template-columns:1fr} }

/* the tools band: LIVE/NEXT status, consolidated from copy that already
   ships elsewhere (the CARRY export list, the one-lens grid's own per-
   card tool + state) -- no new claims, just a compact restatement, so the
   truth table in COPY-CANON.md section 8 still governs every state here. */
.tools-band{display:flex;flex-wrap:wrap;gap:10px 12px;padding:clamp(22px,2.6vw,32px) 0 4px}
.tool-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;
  border-radius:100px;background:var(--surf);border:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--ink-2)}
.tool-chip b{font-weight:500;color:var(--ink)}
.tool-chip .st{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:100px}
.tool-chip .st.live{color:var(--accent-hi);background:color-mix(in srgb, var(--accent) 16%, transparent)}
.tool-chip .st.next{color:var(--ink-3);background:var(--surf-hi)}

/* ═════════════════════════════════════════════════════════
   Job 27b item 1 · Impeccable, fixed for real (not exempted)
   Every other page in this repo (.impeccable/config.json) has these
   exact same shared components -- .sc-n/.sc-v/.sc-go (product.html's
   own #intro), .fo-* (product.html's own #two-scales), .node-source and
   .one-lens-state (the one-lens/lit-list partials shared with index.
   html) -- EXEMPTED, with documented, canon-backed reasons (the
   typewriter-mono-label motif, DESIGN-SYSTEM.md's own size ramp).
   os.html carries no such exemption and per Fable's Sep 23 instruction
   never will: fixed here instead, every one measured against the raw,
   unexempted findings (66 total on os.html; confirmed the config never
   applied to os.html in the first place -- it lists five other files,
   os.html isn't one of them, so removing it changes nothing to remove).

   undersized-ui-text (38 of 66): every flagged selector bumped to the
   11px floor. Scoped to ids only os.html has (#loop, #fleets) or to
   .tool-chip (os.html's own new component), so the identical, still-
   legitimately-exempted components on every other page are untouched --
   product.html's #intro keeps its 10px .sc-n, product.html's #two-scales
   keeps its 9.5px .fo-*. The #one-lens fix that used to sit here moved
   to v3.css (FOVEA REGROUPED BRIEF, section A): #one-lens itself moved
   to index.html, and this file only ever loads on os.html, so a rule
   scoped by id but left in a page-scoped file would have silently gone
   dark on arrival there -- the real bug this comment exists to prevent
   in the first place. */
#loop .sc-n,#loop .sc-v,#loop .sc-go{font-size:11px}
#fleets .fo-scale-h span,#fleets .fo-agent .nm,#fleets .fo-lens .by{font-size:11px}
.tool-chip .st{font-size:11px}

/* tight-leading (1 of 66): .fo-lens .t ("Warm light, unsentimental") sits
   at line-height:1.25 sitewide (site.css); bumped to 1.34 here, scoped
   to #fleets only. */
#fleets .fo-lens .t{line-height:1.34}

/* all-caps-body (16 of 66): every instance traced to a real long string
   (>=30ish chars) inheriting text-transform:uppercase from a shared,
   short-label-oriented rule (.node-source, .nm, .mono, .fo-cap) --
   confirmed live via getComputedStyle, not guessed. .node-source's own
   fix (the lit list's .lit-output nodes) moved to v3.css alongside
   #one-lens above, same reason (#lit-list moved to index.html too).
   .fo-agent.solo's one long label ("You, in the tools you already
   open") versus every other .fo-agent's short one ("Claude",
   "Cursor"...), the reel-foot's own wall-note sentence and the two-
   scales panel's .fo-cap caption are each the only instance of their
   class on THIS page, so no scoping ambiguity there.

   First pass here only dropped text-transform:uppercase and made things
   worse, not better: re-running Impeccable after showed the exact same
   elements now flagged tiny-text + wide-tracking instead (11px and 0.11-
   0.16em tracking are fine for a short all-caps label but read as body
   text once the caps come off, and body text wants >=12px and <=0.05em
   tracking) -- one flag traded for two stricter ones, caught by actually
   re-running the check rather than assuming casing was the only
   variable. Real fix: sized and tracked as the small caption text these
   now read as (12px, 0.01em, sentence case as already written in the
   HTML) instead of trying to keep them at mono-label size with the caps
   sanded off. */
#fleets .fo-agent.solo .nm{text-transform:none;font-size:12px;letter-spacing:.01em;line-height:1.4}
#feedReel .reel-foot .mono{text-transform:none;font-size:12px;letter-spacing:.01em;line-height:1.4}
#fleets .fo-cap{text-transform:none;font-size:12px;letter-spacing:.01em;line-height:1.4}
/* POLISH-NOTES item 32: same root cause as item 17 on index.html's own
   reel (.mkt-reel) -- the shared .node-bar puts title and source side by
   side, and "Illustration"/"Illustrative" is longer than this card's own
   narrow width can hold on one line, so the title wrapped and collided
   with the source (confirmed here too: flexDirection measured "row", not
   fixed by the index.html-scoped rule, since this page's reel is scoped
   by #feedReel, a different selector for the same shared component).
   Same fix, stacked instead of side by side, applied here since os.css
   never shared that fix with site.css's own .mkt-reel-scoped rule. */
#feedReel .node-bar{flex-direction:column;align-items:flex-start;gap:2px}
#feedReel .node-source{text-align:left}