/* home_news_variants.css - HOME NEWS DESIGNS A, B and C. B IS ON BY DEFAULT. 2026-08-14, evening.
 *
 * Paired with home_news_variants.js, which puts .nd-b on .phone with no flag at all. .nd-a and
 * .nd-c wait for ?news=A and ?news=C; ?news=NOW puts none of them on and gives back the white card
 * he saw this morning. The B block below is therefore LIVE CODE, not an option.
 *
 * `[RYAN 2026-08-14 evening]` "News stories on Home same fucking colors. What. The. Actual. Fuck."
 * He was right and it was not a colour bug: all three designs were shipped switched off, so he
 * opened the app and saw the screen he had complained about four hours earlier.
 *
 * WHY ITS OWN FILE AND NOT THE END OF app.css. It started as an append to app.css. Another job
 * running on this same wall at 17:32 rewrote app.css whole and the appended block vanished without
 * an error: the file grew by someone else's 120 lines and mine were simply not there. A separate
 * file cannot be lost that way, and it also settles the cascade question instead of arguing it.
 *
 * CASCADE, STATED AND THEN MEASURED. Load order in index.html is
 *     app.css -> brand.css -> brand_palette.css -> brand_cats.css -> brand_phone.css -> THIS FILE
 * so this file is last, and on top of that every rule wins on SPECIFICITY alone, which is what
 * actually matters because cascade order has broken three fixes in this project:
 *     .phone.nd-a #home-updates  = one id + two classes  (1,2,0)
 * The rules it has to beat, every one of them a single class (0,1,0):
 *     .card           app.css:41  background, border, 16px radius, 16px padding, margin
 *     .section-label  app.css:42 and again app.css:704 WITH !important on size, colour, spacing
 *     .upd-tag .upd-body .upd-date .upd-open .hl-nav .hl-arrow .hl-dot .hl-foot  app.css 60,731-782
 *     nothing in brand.css, brand_palette.css, brand_cats.css or brand_phone.css matches
 *     #home-updates or .card at all
 * One id beats any number of classes, so no !important is needed and none is used, EXCEPT on the
 * section-label hide in C, where app.css:704 already carries !important on that same element.
 * Every number below was then MEASURED in a real Chromium at 414x900, never reasoned about.
 *
 * NO RED. `[RYAN QUOTED LFG2/DECIDED.md:35]` "keep red for emergencies i think". The CURRENT design
 * paints the Alert chip #C0392B, which is red, on the Home news block (app.js:878 UPD_CATS). None
 * of the three do. Colours used are the logo palette from brand_palette.css and the app's own
 * tokens: --navy #0B4FB0, --sky-soft #E4EEFB, --gold-soft #FBF3D6, --gold-ink #6B4E00, --ink,
 * --muted, --surface, --border. All of those already flip correctly in dark mode and in
 * high-contrast mode, so the variants inherit that instead of hardcoding a second palette that
 * would go wrong in the dark.
 *
 * Undo: delete this file, its one <link> in index.html, home_news_variants.js and its <script>.
 * ============================================================================================= */

/* ---------- THE ONE SOLID-BLUE-WITH-WHITE-TEXT RULE, HARDCODED, ALL MODES ----------
 * MEASURED BUG, caught before it shipped and not by reasoning: --navy INVERTS in dark mode
 * (app.css:368 sets --navy:#7da7d9, and .phone.dark.high-contrast at app.css:550 sets #a9cdf5).
 * Anything painting white text ON a --navy fill therefore reads 2.50:1 in dark and 1.65:1 in dark
 * high-contrast. That is the C header bar and the B category chip. Both were measured at those
 * numbers in Chromium at 414x900 before this block existed.
 * The fix is the one this project already uses for exactly this failure: brand.css hardcodes the
 * crisis buttons to a fixed deep red "all modes (fixes dark-mode 2.61:1)". Same move, blue.
 * #0B4FB0 is the logo navy from brand_palette.css and it does not move. White on it is 7.61:1 in
 * every one of the four appearance modes, and it stays visibly blue against a black surface.
 * Text ON a soft tint still uses the variables, because those pairs flip together correctly. */
.phone.nd-b #home-updates,
.phone.nd-c #home-updates{ --nd-solid:#0B4FB0; --nd-on-solid:#ffffff }

/* ---------- THE NEWS BLUE. THE ACTUAL ANSWER TO "SAME FUCKING COLORS". ----------
 * B used --sky-soft, #E4EEFB, which is white minus (27,17,4). Against the white card it replaces
 * that measures dE76 9.7 from the white card it replaces: a real change, but a quiet one, and
 * quiet is what he rejected tonight. --nd-panel is the SAME COLOUR PUSHED THREE TIMES AS FAR down
 * the identical line: white minus 3x(27,17,4) = rgb(174,204,243) = #AECCF3. Same hue, same
 * direction, no new brand colour invented, and dE76 29.4 from white instead of 9.7. Measured.
 * Ink on it: light 8.96:1, light high-contrast 12.73:1. Both measured in Chromium, not predicted.
 *
 * DARK MODES KEEP THE APP'S OWN TOKEN. --sky-soft is #21354e in dark (app.css:368) and stays that
 * in dark high-contrast, which is already an unmistakably blue panel on a #24262a card and pairs
 * correctly with --ink. Hardcoding a light blue here would have shipped the exact dark-mode bug
 * this file was written to avoid. The panel is the only thing that changes per mode: the 4px edge
 * stays var(--navy), which the app already flips (#0B4FB0 / #12335c / #7da7d9 / #a9cdf5). */
/* SUPERSEDED 2026-08-15 BY HIS OWN ANSWER, KEPT ONE WORD AWAY. The #AECCF3 above was the 08-14
 * fix and he answered q30 on it: OTHER, "maybe like a coral? IDK find a nice color". #AECCF3 was
 * still the SAME HUE as the search bar, 0.0 degrees apart, only darker, which is exactly the
 * "same fucking colors" complaint at a lower volume. The panel now leaves blue entirely.
 *
 * GOLD SHIPS. #F3DB85 is the logo palette's gold family (brand_palette.css --gold-soft #FBF3D6,
 * white minus (4,12,41), pushed 3x down its own line: white minus 3x = rgb(243,219,133), the same
 * derivation that built #AECCF3 from --sky-soft). Warm against the cool search bar, hue 47 vs the
 * bar's 214. Ink on it measured 10.76:1 light, and in dark it keeps the app's own --gold-soft
 * token (#33301f), measured 11.0:1. Panel height 166.3px before and after: nothing got taller.
 *
 * HIS CORAL WAS BUILT AND RENDERED, NOT ARGUED WITH, at ?panel=coral (#FFC5B0, ink 9.76:1). Why it
 * does not ship by default: red is reserved for the crisis path (`[RYAN LFG2/DECIDED.md:35]` "keep
 * red for emergencies i think"), and MEASURED, coral sits 12 degrees of hue from the crisis red
 * #C00C0C while gold sits 43 away, and in dark mode coral has no token of its own so it must
 * borrow --red-soft, the SAME surface the Help crisis card sits on. A news panel on the crisis
 * card's own colour is the muddying his rule exists to prevent. His eye can overrule this with
 * one word. ?panel=green is the third genuinely different idea (sage #AECFB7, ink 8.73:1), and
 * ?panel=blue is the 08-14 blue, unchanged. All four measured in Chromium at 390x844 and 414x896,
 * light, dark and high-contrast, horizontal scroll checked at every one. */
.phone.nd-b #home-updates{ --nd-panel:#F3DB85 }
.phone.dark.nd-b #home-updates{ --nd-panel:var(--gold-soft) }
.phone.nd-b.np-coral #home-updates{ --nd-panel:#FFC5B0 }
.phone.dark.nd-b.np-coral #home-updates{ --nd-panel:var(--red-soft) }
/* SAGE, ONE STEP LIGHTER, 2026-08-23, BECAUSE THE OLD VALUE FAILED AA AND THE PUBLISHED FIX WAS
 * BACKWARDS. #AECFB7 measured 4.4970:1 for the navy "See all news" link and the two chevrons in
 * light mode, against the 4.5:1 AA bar. PANEL_OPTIONS.md proposed DARKENING it to #A9CBB2. That
 * makes it worse, not better: the ink here is DARK navy #0B4FB0 on a LIGHT panel, so lowering the
 * panel's luminance closes the gap. #A9CBB2 computes to 4.4489, a bigger fail. The panel goes one
 * step LIGHTER instead. #B0D1B9 is +2 on every channel: hue 136.4, identical to #AECFB7 to the
 * tenth of a degree, the same sage to the eye, and navy on it measures 4.5906:1. Verified in a
 * real Chromium at 390x844, not taken from the doc. Dark mode keeps var(--green-soft) and was
 * never the problem: navy #7da7d9 on #1D3326 measures 5.41:1. */
.phone.nd-b.np-green #home-updates{ --nd-panel:#B0D1B9 }
.phone.dark.nd-b.np-green #home-updates{ --nd-panel:var(--green-soft) }
.phone.nd-b.np-blue #home-updates{ --nd-panel:#AECCF3 }
.phone.dark.nd-b.np-blue #home-updates{ --nd-panel:var(--sky-soft) }
/* On a gold panel the gold notice chip would vanish into its own colour; it sits on the app's
 * surface token instead, same inset gold-ink ring, so an Alert still reads as an alert. */
.phone.nd-b:not(.np-coral):not(.np-green):not(.np-blue) #home-updates .ndb-notice{ background:var(--surface) }
@media (prefers-color-scheme: dark){
  .phone:not(.appearance-set).nd-b #home-updates{ --nd-panel:var(--gold-soft) }
  .phone:not(.appearance-set).nd-b.np-coral #home-updates{ --nd-panel:var(--red-soft) }
  .phone:not(.appearance-set).nd-b.np-green #home-updates{ --nd-panel:var(--green-soft) }
  .phone:not(.appearance-set).nd-b.np-blue #home-updates{ --nd-panel:var(--sky-soft) }
}

/* ---------- A. PLAIN LEDGER. No box at all: the block stops being a card. ---------- */
.phone.nd-a #home-updates{
  background:transparent; border:0; border-radius:0; padding:0; margin-bottom:10px;
  border-top:1px solid var(--border);
}
.phone.nd-a #home-updates .nda-row{ padding:11px 2px 10px; border-bottom:1px solid var(--border) }
.phone.nd-a #home-updates .nda-what{ font-size:16px; line-height:1.4; color:var(--ink) }
.phone.nd-a #home-updates .nda-when{ font-size:12.5px; line-height:1.2; color:var(--muted); margin-top:5px }
.phone.nd-a #home-updates .nda-foot{ display:flex; justify-content:flex-end }
.phone.nd-a #home-updates .nda-all{
  display:inline-flex; align-items:center; min-height:44px; padding:0 2px;
  color:var(--navy); font-weight:700; font-size:15px; text-decoration:none;
}

/* ---------- B. TINTED PANEL. One story, filled, with a navy edge. ---------- */
.phone.nd-b #home-updates{
  background:transparent; border:0; border-radius:0; padding:0; margin-bottom:10px;
}
.phone.nd-b #home-updates .ndb-panel{
  background:var(--nd-panel); border-left:4px solid var(--navy); border-radius:0 12px 12px 0;
  padding:13px 14px 12px;
}
.phone.nd-b #home-updates .ndb-what{ font-size:17px; line-height:1.35; font-weight:600; color:var(--ink) }
.phone.nd-b #home-updates .ndb-meta{ display:flex; align-items:center; gap:9px; margin-top:9px; flex-wrap:wrap }
.phone.nd-b #home-updates .ndb-chip{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:3px 9px; line-height:1.5;
}
.phone.nd-b #home-updates .ndb-plain{ background:var(--nd-solid); color:var(--nd-on-solid) }
.phone.nd-b #home-updates .ndb-notice{ background:var(--gold-soft); color:var(--gold-ink); box-shadow:inset 0 0 0 1.5px var(--gold-ink) }
/* THE DATE AND THE COUNTER ARE NOT FADED ANY MORE, AND THAT IS A MEASURED CHANGE, NOT A TASTE ONE.
   The date was --ink at .72 opacity. On the stronger panel that composites to rgb(62,70,79) and
   measured 5.80:1 in light, the weakest thing in the block. Fading text is a habit, not a design:
   the size already separates a 13px date from a 17px sentence, so the fade only cost contrast.
   Full --ink measures 8.96:1 light, 10.35:1 dark, 12.73:1 light HC, 12.47:1 dark HC.
   The counter was --muted and measured 6.20:1 on the page, the lowest number in the whole block.
   Full --ink puts it at 13.66:1. Both audited in Chromium at 414x900, all four modes. */
.phone.nd-b #home-updates .ndb-date{ font-size:13px; font-weight:600; color:var(--ink) }
.phone.nd-b #home-updates .ndb-foot{ display:flex; align-items:center; gap:10px }
.phone.nd-b #home-updates .ndb-sp{ flex:1 1 auto }
.phone.nd-b #home-updates .ndb-all{
  display:inline-flex; align-items:center; min-height:44px; padding:0 2px;
  color:var(--navy); font-weight:700; font-size:15px; text-decoration:none;
}
.phone.nd-b #home-updates .ndb-count{ font-size:13px; font-weight:700; color:var(--ink) }

/* ============================================================================================
   BOTH ARROWS, ON THE SIDES. 2026-08-15.
   `[RYAN 2026-08-15]` "isnt there a way to do arrows in an attractive way on both sides not below"

   FOUR CONSTRAINTS, ALL FROM HIS OWN RECORD, AND HOW EACH IS MET:
     1 NOT RED. --navy #0B4FB0, the same ink "See all news" already uses. Red stays with the crisis
       path and the selected nav tab. `[RYAN QUOTED LFG2/DECIDED.md:35]` "keep red for emergencies".
     2 NO EXTRA HEIGHT. Too big is his most repeated complaint. The single forward button was
       removed from the foot row at the same time, and the panel's own vertical padding was cut
       from 13/12 to 11/11 to pay for the extra line the narrower text column can cost. Measured in
       a real Chromium at 414x900, before and after, and written into REPAIRS_DONE.md.
     3 A BIG TARGET FOR A SHAKING HAND. RAIL gives a strip the full height of the panel, about
       40 x 100px each side. That is more than twice the 44x44 minimum in both directions.
     4 SWIPE STILL WORKS BOTH WAYS. Untouched: app.js:965 handles it on #home-updates and these
       buttons are inside that element.

   TWO GEOMETRIES. .ndbar-a RAIL is the default and the one that ships. .ndbar-b DISC is one word
   away with ?arrows=B, kept because it costs nothing to keep and he can look at it on his phone.
   ============================================================================================ */
.phone.nd-b #home-updates .ndb-stage{ position:relative }
.phone.nd-b #home-updates .ndb-arrow{
  border:0; background:transparent; color:var(--navy); font-family:inherit; cursor:pointer;
  font-size:26px; font-weight:700; line-height:1; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
}
.phone.nd-b #home-updates .ndb-arrow:focus-visible{ outline:3px solid var(--navy); outline-offset:2px }

/* ---- A. RAIL. A tap strip the full height of the panel, flush to each side. The story sits in a
   framed band, which is why it reads as designed rather than as two buttons dropped on top. ---- */
/* TWO MEASURED TRICKS ARE WHAT KEEP THIS FROM GETTING TALLER, AND BOTH ARE WHY IT TOOK THREE
   RENDERS INSTEAD OF ONE.
   1 THE FULL BLEED. Measured in Chromium at 414x900: this sentence needs a 326px text column to
     stay at three lines, and it wraps to four at 320px, which costs 22.95px. Two rails inside the
     382px card could never leave 326px. The band is pulled the full 16px gutter to each screen
     edge, so the stage is 414px and the column is 346px. Three lines, and the band reads as a
     deliberate edge-to-edge news strip rather than a card with buttons stuck on.
   2 THE HIT AREA IS BIGGER THAN THE RAIL. The rail is 24px of visible tint. `::after` extends the
     touch target 10px past it on each side WITHOUT taking any layout width, so what a shaking hand
     actually has to hit is 44px wide and the full height of the panel, about 44 x 145. Visual
     weight stays light; the target is larger than the 44x44 minimum in both directions. */
.phone.nd-b.ndbar-a #home-updates .ndb-stage{ display:flex; align-items:stretch; margin:0 -16px }
.phone.nd-b.ndbar-a #home-updates .ndb-panel{ flex:1 1 auto; min-width:0; padding:11px 6px }
/* THE CHEVRONS SIT IN THE SCREEN GUTTER, NOT ON THE STORY. The panel keeps its own shape, its tint
   and its navy edge, exactly as he has already seen it, and the two chevrons live in the 16px of
   page margin either side, which is space the block was not using. Nothing is drawn on top of the
   words and the panel did not have to give up width to make room. */
.phone.nd-b.ndbar-a #home-updates .ndb-arrow{
  flex:0 0 24px; align-self:stretch; min-height:44px; position:relative; font-size:24px;
  background:transparent;
}
/* a soft 24x44 pill at the centre of a full-height button: it says "this is a control" without
   taking one pixel of layout and without putting a second hard border on the screen */
.phone.nd-b.ndbar-a #home-updates .ndb-arrow > span{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:44px; border-radius:999px; background:rgba(11,79,176,.10);
}
/* THE TARGET GROWS INWARD ONLY. Growing it outward pushed 12px past the right edge of the document
   and gave the whole page a horizontal scrollbar at all four widths. Caught by comparing
   scrollWidth against clientWidth, which is the kind of thing a screenshot never shows. */
.phone.nd-b.ndbar-a #home-updates .ndb-arrow::after{ content:""; position:absolute; top:0; bottom:0 }
.phone.nd-b.ndbar-a #home-updates .ndb-prev::after{ left:0; right:-20px }
.phone.nd-b.ndbar-a #home-updates .ndb-nextx::after{ left:-20px; right:0 }
.phone.nd-b.ndbar-a #home-updates .ndb-arrow:active{ color:var(--nd-on-solid) }
.phone.nd-b.ndbar-a #home-updates .ndb-arrow:active::before{
  content:""; position:absolute; left:-2px; right:-2px; top:50%; width:auto; height:44px;
  transform:translateY(-50%); border-radius:8px; background:var(--navy); z-index:-1;
}

/* ---- B. DISC. A 44px round button floating over each edge of the panel. ---- */
/* Same two tricks, solved the other way: the same full bleed, and a 40px disc whose ::after takes
   the touch target to 60x60 without taking layout width. Column measures 330px, still three lines. */
.phone.nd-b.ndbar-b #home-updates .ndb-stage{ margin:0 -16px }
.phone.nd-b.ndbar-b #home-updates .ndb-panel{ padding:11px 32px }
.phone.nd-b.ndbar-b #home-updates .ndb-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:999px; background:var(--surface); font-size:24px;
  box-shadow:0 1px 3px rgba(0,0,0,.18), inset 0 0 0 1.5px var(--navy);
}
/* grown inward and vertically only, never past the screen edge */
.phone.nd-b.ndbar-b #home-updates .ndb-arrow::after{ content:""; position:absolute; top:-8px; bottom:-8px }
.phone.nd-b.ndbar-b #home-updates .ndb-prev{ left:0 }
.phone.nd-b.ndbar-b #home-updates .ndb-nextx{ right:0 }
.phone.nd-b.ndbar-b #home-updates .ndb-prev::after{ left:0; right:-12px }
.phone.nd-b.ndbar-b #home-updates .ndb-nextx::after{ left:-12px; right:0 }
/* NAVYFILL 2026-09-23. The fifth of the six rules FINAL_2026-09-23 section 7 lists as pairing
   `background:var(--navy)` with white text, which is Community Gold in dark mode and would paint
   white on gold at 2.62:1 the moment it landed. `--navy-fill` is Burgundy in both themes.
   IT DOES NOT PAINT TODAY AND IT IS STILL FIXED. The live news variant is `ndbar-a`, so nothing on
   screen carries `.ndbar-b`, which is exactly why five contrast sweeps never saw this rule: a sweep
   reads what is rendered. A variant that is one class away from being switched on is not a safe
   place to leave a known 2.62. BRANDFINISH_2026-09-23 section 6 item 9 named the line and handed
   it back; this closes it.
   UNDO, one token: `background:var(--navy)`. */
.phone.nd-b.ndbar-b #home-updates .ndb-arrow:active{ background:var(--navy-fill,var(--navy)); color:#fff }

/* ---------- C. BOARD. Header bar plus a date rail, the section label folded into it. ---------- */
.phone.nd-c .home-sec[data-sec="updates"] .section-label{ display:none !important }
.phone.nd-c #home-updates{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:0; overflow:hidden; margin:2px 0 12px;
}
.phone.nd-c #home-updates .ndc-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--nd-solid); padding:0 6px 0 13px; min-height:44px; /* 44, not 40: the 44px tap floor applies to the way out of the block too. Measured. */
}
/* 2026-09-19 A6: was `font-family:'Josefin Sans',sans-serif`. Josefin is not one of the brand's three
   voices (BRANDFONTS_2026-09-18 section 6) and its stack ended in bare sans-serif with no Noto
   fall-through for Arabic, Khmer, Lao, Bengali, Korean or Chinese. This is tracked uppercase, which
   is the label face's own job. Gated behind ?feed=deck-c, so it is not one of the three live nodes
   FINALWALK_2026-09-19 counted; it is fixed at the same time so the old face cannot come back on a
   URL nobody tests. Colour, weight, tracking and size unchanged, so no contrast pair moves.
   The :lang() zero pair below is constraint 5: this rule is tracked caps on a translated string.
   UNDO: put `'Josefin Sans',sans-serif` back and delete the :lang() line. */
.phone.nd-c #home-updates .ndc-title{
  color:var(--nd-on-solid); font-family:var(--font-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; font-size:13px;
}
.phone.nd-c #home-updates .ndc-title:lang(ar),
.phone.nd-c #home-updates .ndc-title:lang(km),
.phone.nd-c #home-updates .ndc-title:lang(lo),
.phone.nd-c #home-updates .ndc-title:lang(bn){ letter-spacing:0 }
.phone.nd-c #home-updates .ndc-all{
  display:inline-flex; align-items:center; min-height:44px; padding:0 7px;
  color:var(--nd-on-solid); font-weight:700; font-size:14px; text-decoration:none;
}
.phone.nd-c #home-updates .ndc-row{ display:flex; gap:12px; padding:11px 13px; border-top:1px solid var(--border) }
.phone.nd-c #home-updates .ndc-row:first-child{ border-top:0 }
.phone.nd-c #home-updates .ndc-rail{
  flex:0 0 46px; border-radius:8px; padding:5px 0 6px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:flex-start;
}
.phone.nd-c #home-updates .ndc-plain{ background:var(--sky-soft); color:var(--navy) }
.phone.nd-c #home-updates .ndc-notice{ background:var(--gold-soft); color:var(--gold-ink) }
.phone.nd-c #home-updates .ndc-mon{ font-size:11px; font-weight:800; letter-spacing:.07em; line-height:1.1 }
.phone.nd-c #home-updates .ndc-day{ font-size:19px; font-weight:800; line-height:1.1 }
.phone.nd-c #home-updates .ndc-what{ font-size:16px; line-height:1.4; color:var(--ink); padding-top:1px }

/* ============================================================================================
   THE PANEL LEAVES GOLD. 2026-08-16.
   `[RYAN 2026-08-16]` "not crazy about the gold news color on the home page with the swoosh, can
   you research and do something else"

   HE NAMED THE SWOOSH, AND THE SWOOSH IS WHY GOLD FAILED. MEASURED, NOT GUESSED: the banner art
   (bw_banner.png, sampled pixel by pixel) is white 50%, black 21%, and then the four figure
   brights at FULL saturation: red #FC0C0C, lime #9CF000 hue 84, GOLD #F0CC00 hue 48, sky #0084F0
   hue 210, purple #9000E4 hue 280. The gold panel #F3DB85 is hue 47 and sits 1.15:1 in luminance
   from the artwork's own gold. Same hue, same brightness, one screen apart: the exact disease he
   called on the two blues on 08-15 ("too close", #E4EEFB vs #AECCF3 at 1.41:1), replayed between
   the panel and the artwork. And --gold-soft is also the app's NOTICE colour, so the whole news
   panel was wearing alert dress on routine stories, his "attention now" complaint in paint.

   THE SHIPPED ANSWER IS HIERARCHY, NOT A FOURTH HUE HUNT. The artwork owns the brights; any pale
   tint of lime, gold, sky or purple reads as a washed echo of the art directly above it. So the
   SEARCH takes the solid navy call-out, the direct descendant of his one complete recorded pick
   (`[RYAN QUOTED LFG2/BRYAN_SYNTHESIS.md:200]` the find-help bar was "too white", he chose the
   navy call-out from four mockups, 2026-06-17), and the news panel returns to the quiet blue
   #AECCF3 BELOW it. Navy vs panel measures 4.61:1, figure against ground, not two tints arguing.
   That styling lives in home_search_navy_2026-08-16.css; ?search=soft turns it off.

   THE LEFT SWOOSH EDGE COMES OFF. The 4px navy border-left is the descendant of the "little green
   swoosh accent left of the updates card" he disliked in August (RUNNING_LOG_BRAIN5.97.md:128) and
   the loud-left-border "made by claude" look. The panel is now a clean 12px-radius tint. The exact
   block he rejected today, gold plus swoosh edge, is preserved verbatim at ?panel=gold so the
   before/after can always be rendered honestly.

   ONE WORD AWAY: ?panel=gold (today's, exact), ?panel=none (no panel at all: hairline ledger,
   ink on the page, the restraint answer), ?panel=lavender (the artwork's quiet quadrant, the one
   brand bright with no alarm meaning anywhere in the app), ?panel=coral, ?panel=green unchanged.

   MEASURED, all in the same Chromium harness as every number above:
     blue #AECCF3: hue 214, 146 deg from crisis red #C00C0C; ink 8.96:1 light, 10.35:1 dark,
       12.73:1 light HC, 12.47:1 dark HC
     lavender #DCC8F0: hue 270, 90 deg from crisis red; ink 9.55:1 light, 13.56:1 light HC;
       dark #2C2440: 12.15:1, dark HC 14.65:1
     none: ink on canvas 13.66:1 light, 14.76:1 dark, 21:1 both HC
     navy search: white head 7.61:1 in all four modes (hardcoded fill, the file's own pattern)
   Panel height unchanged in every option: nothing gets taller.
   ============================================================================================ */
/* the swoosh edge off, everywhere except the preserved gold rendition */
.phone.nd-b #home-updates .ndb-panel{ border-left:0; border-radius:12px }
.phone.nd-b.np-gold #home-updates .ndb-panel{ border-left:4px solid var(--navy); border-radius:0 12px 12px 0 }
/* ?panel=gold keeps 2026-08-15's exact panel colours via the base rules above */
/* ?panel=none: the restraint option. No fill, no box: a hairline band, the words on the page. */
.phone.nd-b.np-none #home-updates{ --nd-panel:transparent }
.phone.nd-b.np-none #home-updates .ndb-panel{
  background:transparent; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  border-radius:0;
}
/* ?panel=lavender: hue 270, the banner purple's soft form, hardcoded dark like the navy above
   because no purple token exists to inherit; both values measured in all four modes */
.phone.nd-b.np-lavender #home-updates{ --nd-panel:#DCC8F0 }
.phone.dark.nd-b.np-lavender #home-updates{ --nd-panel:#2C2440 }
@media (prefers-color-scheme: dark){
  .phone:not(.appearance-set).nd-b.np-lavender #home-updates{ --nd-panel:#2C2440 }
  .phone:not(.appearance-set).nd-b.np-none #home-updates{ --nd-panel:transparent }
}

/* ============================================================================================
   SECOND PASS, HIS CORRECTION. 2026-08-16.
   `[RYAN 2026-08-16]` "I was referring to the news blue color to change, not the search blue
   color because now the search blue color on Help doesnt match the blue on Home"

   The navy search call-out above this block moved the WRONG element: it changed the search bar
   he never complained about and broke R-012, the ruling that ties the Home and Help search bars
   together. It also put the news panel back to #AECCF3, the same hue as the search bar, which
   was his ORIGINAL 2026-08-15 complaint, so that complaint went live again.

   BOTH ARE FIXED IN home_news_variants.js, NOT HERE: SRCH defaults back to soft (Home wears
   exactly what Help wears, .hs-navy is never set, home_search_navy_2026-08-16.css goes inert)
   and PANEL defaults to lavender (np-lavender, the rules already above). No selector in this
   file changed; this note exists so the file tells the truth about which block is live.

   WHY LAVENDER IS THE ONE THAT SHIPS, one sentence: he asked for a colour, and lavender is the
   only colour left that is his own (the banner purple's quiet form), a different hue FAMILY
   from the search bar so "too close" cannot recur, 90 deg from crisis red, no alarm meaning
   anywhere in the app, and zero added height. ?panel=none stays one word away: honest, calm,
   but it is not a colour and it costs 2px of hairlines. ?panel=blue is the state he corrected.
   SUPERSEDED 2026-08-23 BY HIS OWN EYE, TWICE. SEE THE NEXT BLOCK. */

/* ============================================================================================
   THIRD PASS. THE DEFAULT IS ?panel=none. 2026-08-23.
   `[RYAN 2026-08-22]` "[screenshot of the purple news panel] I hate this color and the tiny
   arrows, i need research and options"
   `[RYAN 2026-08-23]` "ASSUMING THIS IS UP TO DATE: still purple on home news that sucks"

   He said it twice, so lavender stops being what paints with no flag. NO SELECTOR IN THIS FILE
   CHANGED FOR THAT: the .np-none rules at the top of this block already existed and were already
   rendered. The one line that moved is the fallback in home_news_variants.js, which now returns
   "none". This note exists so the file tells the truth about which block is live.

   MEASURED THIS PASS, real Chromium, 390x844, light and dark, off this wall's own bytes:
     none      ink 13.66 light / 14.76 dark, navy 7.03 light / 7.12 dark. The widest margin of
               the four options, and the only one that is not a colour he has rejected, does not
               sit in the search bar's hue family, and does not fail AA.
     lavender  ink 9.55 light, navy 7.03. It passed. He hated it. His eye decides, not the ratio.
     blue      passes, and is the "too close to the search bar" pattern from 2026-08-15.
     green     failed AA at #AECFB7 and is fixed one step LIGHTER at #B0D1B9 in this same pass.

   THE ARROWS, MEASURED AND LEFT ALONE. He named "the tiny arrows" in the same breath as the
   colour, so they were measured rather than assumed, by hit-testing document.elementFromPoint one
   CSS pixel at a time across and down each button, which is what a finger actually lands on and
   is not what getBoundingClientRect reports. Result: each chevron's real tap target is 44 x 200
   CSS px (44 x 202 on ?panel=none, which is two hairlines taller). The BOX is 24 x 199.25; the
   ::after at line 212 below is what carries the other 20px inward, and a synthetic click at the
   far inner edge of that region steps the carousel, so the target is real and not just painted.
   44 x 200 clears WCAG 2.5.5 AAA 44 x 44 in both directions, so the geometry was NOT changed:
   nothing here needed to grow, and growing it outward is already known to give the whole page a
   horizontal scrollbar (line 209). What is small is the VISIBLE affordance, a 24 x 44 tint pill,
   and note that home_variants_2026-08-23.css:282 turns even that pill transparent under .hv3.
   That is a look question for his eye and not a tap-target failure, and it is left to the file
   that owns it rather than fixed blind from here.
   ============================================================================================ */