/* ============================================================ feed.css — the v2 Feed, APPENDED to signal.css by the packager. SCOPING IS THE LAW OF THIS FILE. These rules ride at the end of the shared stylesheet and therefore load on EVERY page of the site — article pages, v1 tag rivers, the lot. Two disciplines: 1. Shell rules (viewport lock, flex column) live under body.feedhome, which only index.hbs sets. An unscoped html/body overflow here would freeze scrolling on every article page. 2. Vocabulary v1 also owns (.card, .dek, .cred, .trail, .quote, .wim, .acts, .inst, .dev, .rcpb…) is scoped to the v2 CONTAINERS — :is(.app, .deckroot, .recwrap, .recdoc) — so the Feed's grammar can never restyle a v1 surface. CONTAINERS, not body classes, and this bit twice in one day: a channel deck extends v1's layout, so its body never carries feedhome. Scoped to the body class, a deck lost the why-block's box and — worse — showed the visually-hidden headline as type directly under the plate that already carried it. Everything else (pg*, rec*, brkbar, u-*, story*, tl/bd/brep) is v2-unique and safe bare. ============================================================ */ /* ---- v2 tokens ---- Scoped to .sg, not :root, because that is where this theme keeps every token (a layer outside .sg paints with undefined variables — the iOS transparent-sheet incident). Two families: MOTION. Measured off Flipboard first (2026-09-07) — card-level moves ~160ms, the article push ~200ms — then tuned by the owner on the phone to 140ms for card-level, which is where it stopped feeling like a transition and started feeling like a cut. The layer push stays at the measured 200ms: it travels the full width of the screen, and the same duration that reads as crisp over a page height reads as a snatch over a whole viewport. NEITHER OF THESE IS THE SNAP. The pager's physics belong to the browser and expose no timing at all — which is the entire reason the flick feels right and the reason the fold was deleted. These tokens govern only the motion we own: the cover-to-deck transition and the breaking bar. THE BREAKING BAND, designed for both grounds. It cannot use --ink, which inverts to near-white in dark mode and would flip the bar's ground to paper. Dark is now the default surface, so the band is an elevated dark strip under a red rule; light keeps the ink band. */ .sg{ --t-card:140ms; --t-layer:200ms; --ease-card:cubic-bezier(.3,.7,.25,1); --brk-bg:#131211; --brk-fg:#FFFFFF; --brk-hot:#FF6A54; --brk-rule:transparent; /* On paper the tile is white with a hairline, or it disappears into the page it is supposed to sit on. */ --srcchip:#FFFFFF; --srcchip-ln:rgba(19,18,17,.16); } .sg[data-mode="dark"]{ --brk-bg:#1B1B20; --brk-fg:#F7F5F0; --brk-hot:#FF6A54; --brk-rule:#E8412B; /* A DIMMED neutral, not paper white (owner, 2026-09-07: "drop the chip from cream to a dimmer neutral, so three little tiles don't out-brighten the deks on a very dark cover"). Bright enough that a light publisher mark still reads on it, dark enough to sit under the dek rather than in front of it. */ --srcchip:#CFCAC2; --srcchip-ln:transparent; } /* ---- shell: header row, breaking bar, then the pager owns the rest ---- SCOPE NOTE, twice revised. 2026-09-07 (morning): shell CHILDREN were scoped to the v2 containers (.app on the cover, .deckroot on a channel deck) rather than to body.feedhome, because a channel deck extends v1's layout and its body class never carries feedhome — that mistake cost the deck its header and brief twice in one day. 2026-09-07 (later): the HEADER's own rules are now scoped to NOTHING, because .fhead renders on every page of the site — post pages, reporter dossiers, About, the 404 — as of the chrome standardization. Container scoping would have left it unstyled on exactly the pages that needed fixing. That is safe here and only here: .fhead, .fwm, .hbtn, .qform, .chbtn, .chsheet, .chip and .chx are v2-unique, verified as ZERO hits each in v1's signal.css. Everything that is genuinely v1-shared vocabulary (.card, .cred, .trail, .quote, .wim, .inst, .dev) stays container-scoped and a test refuses it bare. */ body.feedhome{height:100%;overflow:hidden} /* --shellh, set by fitShell() from visualViewport.height, is the height that actually holds: svh over-reported on the owner's iPhone under Safari's expanded bottom chrome and pushed the deck bar off-screen. The svh below it is the PRE-JS value and must stay — it is what paints before feed.js measures. Why the fallback is svh and not dvh (owner caught content under the Safari toolbar, 2026-09-07): dvh tracks the toolbar and shrinks AFTER layout, so a page laid out with the toolbar hidden gets clipped when it slides back in. svh is the smallest viewport: the page always fits, at the cost of a little unused space when the toolbar is away. For a pager where a clipped sentence is a defect, that is the right trade. */ .feedhome .sg{height:100vh;height:100svh;height:var(--shellh,100svh);display:flex;flex-direction:column} .feedhome .app{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:760px; margin:0 auto;background:var(--paper)} .fhead{flex:none;position:relative;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink)} .fwm{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.042em;color:var(--ink);text-decoration:none} .fwm i{font-style:normal;font-weight:400;color:var(--ink2)} /* the accent character, same grammar as .wm in signal.css */ .fwm s{text-decoration:none;color:var(--acc)} /* THE WAY BACK ALSO LIVES AT THE TOP (same report as the .dbar note). The header is the one edge the browser's chrome never occupies, and the wordmark was already the ruled way home — owner, 2026-09-07: "The Fabric.Media logo should always take you to the top of the cover." So it wears the arrow rather than competing with a second control, and the arrow teaches what the wordmark already did. Only inside a deck: on the cover there is nowhere back to. */ /* THE ARROW SHOWS ON EVERY PAGE THAT IS NOT THE COVER (owner, 2026-09-09, landing on a shared signal: "when I land on that share there is no way to get back to The Signal"). It was scoped to the two DECK states, which was right when a deck was the only place you could be lost — but a share link now lands readers on post pages, story records and dossiers, and on every one of them the wordmark was an unmarked link. body.feedhome is the cover document and the only page with nowhere to go back to. */ /* THE SLOT IS ALWAYS THERE; ONLY THE ARROW COMES AND GOES (owner, 2026-09-09: "What I don't like is that the logo moves"). It did — prefixing the wordmark shifted it ~24px the moment you left the cover, so the one fixed landmark in the chrome was the thing that jumped. A nav bar reserves its leading slot whether or not there is a back control in it, and the title holds still. Same here: the glyph is rendered on every surface and merely made invisible on the cover, so the wordmark sits at one x from the cover to a record. */ .fwm::before{content:"\2190";margin-right:9px;font-family:var(--mono); font-size:15px;font-weight:400;color:var(--ink3);vertical-align:1px;visibility:hidden} :is(.app.indeck,.deckroot) .fwm::before, body:not(.feedhome) .fwm::before{visibility:visible} .hbtn{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ink3);border:1px solid var(--ln2);background:transparent;padding:7px 9px;cursor:pointer;text-decoration:none} .hbtn:hover{border-color:var(--ink);color:var(--ink)} /* THE CHROME ALIGNS TO THE PAGE'S OWN COLUMN, whichever that is (QA, 2026-09-07). Standardizing the header onto every page introduced the exact defect the owner reported that morning about the deck — "still seeing 'back' and the record way out on the width border" — on a new set of pages. Measured at 1440 on a post page: .fhead spanned the full 1440 with the wordmark at 16px while the article's content started at 112, misaligned by 96px, and .ffoot had NO padding at all because its only rule was scoped to the v2 containers. Three columns exist on this site and the chrome now matches each: v1-templated pages .in, max-width var(--wrap) + var(--pad) -> 112 @1440 the cover / a deck the 760px shell, 16px inset inside a deck .pgin's 620px reading column Base rule is the .in column with a 16px floor, so nothing moves below the width where --wrap binds. */ .fhead .r1{display:flex;align-items:center;gap:10px; padding:9px max(16px, calc((100% - var(--wrap)) / 2 + var(--pad)))} /* A v2 shell IS already a 760px column; its chrome sits at the shell's own inset, matching the cover's text. */ :is(.app,.deckroot) .fhead .r1{padding-inline:16px} /* ---- SEARCH: AN ICON THAT BECOMES A FIELD ---- The row is three controls wide on a 375px phone and the field was spending half of it on a placeholder. Collapsed it is a 34px button; .fhead.searching gives it the row and stands the channel chip down, because expanded field + chip + wordmark do not fit a phone and squeezing all three is how the field got small enough to be useless. The input stays in the DOM at every state — it is a real form, it still submits without JS, and collapsing is a width change rather than a teardown, so a half-typed query survives an accidental collapse. */ .qform{flex:none;margin:0;display:flex;align-items:center;min-width:0; transition:flex-grow 140ms var(--ease-card,ease)} .qbtn{flex:none;width:34px;height:32px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--ln2);background:transparent;color:var(--ink2);cursor:pointer;padding:0} .qbtn:hover{border-color:var(--ink);color:var(--ink)} .qform input{width:0;flex:1;min-width:0;padding:0;border:0;background:var(--el);color:var(--ink); font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; opacity:0;pointer-events:none;transition:opacity 120ms linear} .qform input::placeholder{color:var(--ink3);text-transform:uppercase} .qform input:focus{outline:none} .fhead.searching .qform{flex:1 1 auto} .fhead.searching .qbtn{border-right:0} .fhead.searching .qform input{width:auto;opacity:1;pointer-events:auto;padding:8px 10px; border:1px solid var(--ln2);border-left:0} .fhead.searching .chbtn{display:none} @media (prefers-reduced-motion:reduce){.qform,.qform input{transition:none}} /* CONTROLS TO THE RIGHT EDGE (owner, 2026-09-14: "move the search icon and the nav dropdown toward the right edge of the header with space in the middle"). The wordmark keeps the left; the search form takes the auto margin, so it and the channel chip sit flush right and the expanding field still grows into the gap. */ .fhead .r1 .qform{margin-left:auto} .chbtn{white-space:nowrap;flex:none} .chsheet{position:absolute;left:0;right:0;top:100%;border-top:1px solid var(--ln);background:var(--el); padding:12px 16px 14px;box-shadow:0 14px 28px rgba(19,18,17,.12);z-index:61} .chsheet .chips{display:flex;flex-direction:column;gap:2px} .chip{display:flex;width:100%;justify-content:flex-start;font-family:var(--mono);font-size:10.5px; font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:11px 10px;border:0; border-bottom:1px solid var(--ln);color:var(--ink2);text-decoration:none} .chip.on{background:var(--el2);color:var(--ink)} .chip .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cc,var(--ink3)); margin-right:6px;align-self:center} .chx{display:flex;gap:8px;margin-top:12px} /* ---- the breaking bar (design pass, 2026-09-07) ---- Measured on the live bar with a real breaking story up: 44 of 82 headline characters were clipped to one ellipsized line, the page counter was overlapping what survived, there was no time at all, and a full-bleed saturated red band sat directly above a saturated channel plate — two big colour fields fighting for the same screen. Four decisions: 1. THE GROUND IS INK, NOT RED. The theme already speaks in inverted ink bands (footer, units, follow bar), and ink does not compete with six channel hues. Red stays reserved and therefore precious: it is the pip and the word, not the field. 2. THE HEADLINE NEVER CLIPS. Two lines, clamped — a breaking headline is the last text on the site that should be truncated. 3. THE TIME IS THE NEWS. "Breaking" in red says the class; HH:mm says how breaking. v1's strip carried a time and the port dropped it. Colour never carries the meaning alone (the word is still there). 4. THE BAR YIELDS. Its job is to point at something NOT on your screen; once you reach that signal the plate's own red frame and chip say it twice over, so the bar collapses to a hairline (.seen) and stops taxing 4.6% of every full-viewport page for 24 hours. */ .brkbar{flex:none;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;align-items:baseline; padding:9px 15px 11px;background:var(--brk-bg);color:var(--brk-fg);text-decoration:none; border-bottom:2px solid var(--brk-rule); overflow:hidden;max-height:110px; transition:padding var(--t-card) ease,max-height var(--t-card) ease,background var(--t-card) ease} .brkbar .k{grid-column:1;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:8.5px; font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brk-hot)} .brkbar .k::before{content:"";width:5px;height:5px;border-radius:50%;background:#E8412B;flex:none; box-shadow:0 0 0 3px rgba(232,65,43,.28);animation:brkpip 2.4s ease-in-out infinite} .brkbar .tm{grid-column:2;justify-self:end;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em; color:color-mix(in srgb, var(--brk-fg) 52%, transparent);font-variant-numeric:tabular-nums} .brkbar .h{grid-column:1/-1;font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.022em; line-height:1.2;color:var(--brk-fg); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @keyframes brkpip{0%,100%{opacity:1}50%{opacity:.3}} @media (prefers-reduced-motion:reduce){.brkbar,.brkbar .k::before{transition:none;animation:none}} /* Yielded: the reader has reached (or tapped through to) the signal the bar was pointing at. .instant is the already-read-on-arrival case — the bar should render small, not animate down while you watch. */ .brkbar.instant{transition:none} .brkbar.seen{max-height:4px;padding:0;background:#E8412B} .brkbar.seen>*{opacity:0} /* The counter clears the bar. :has() rather than a JS class — the bar's presence is a fact about the document, and the overlap was a live defect the port introduced by carrying the offset only in the prototype. */ /* ---- the pager ---- */ #app.fpager{flex:1;min-height:0;position:relative;overflow-y:auto; scroll-snap-type:y mandatory;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none} #app.fpager::-webkit-scrollbar{width:0} .pg{height:100%;scroll-snap-align:start;scroll-snap-stop:always;border-bottom:1px solid var(--ln); overflow:hidden;position:relative;content-visibility:auto} .pg[hidden]{display:none} .pgin{height:100%;display:flex;flex-direction:column;max-width:620px;margin:0 auto;width:100%; padding:14px 16px calc(14px + env(safe-area-inset-bottom))} .pg.card{cursor:pointer;padding:0} .pg.card:focus-visible{outline:2px solid var(--acc);outline-offset:-2px} .pg .pgh{margin:0;font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.06} .pg .pgh a{color:var(--ink);text-decoration:none} .pg .kick{margin-bottom:10px;flex:none} .pg .plate{aspect-ratio:16/9;flex:none} /* ---- the watch affordance ---- A video signal keeps its plate (identity + headline) and gains a play control; playing swaps the plate for the iframe in place. The control is a real