/* The design system. One stylesheet, loaded by every surface of the product, so
 * the product reads as one finished surface rather than three. It is the design
 * authority for every product page, and that much is kept: every product page
 * carries this file and no second stylesheet and no <style> block, and no
 * script but the operations band's on Selection, which
 * tests/test_one_stylesheet.py walks over HTTP and counts.
 *
 * Two things that guard has been read as saying and does not. It does not put
 * every /admin/ page on this file: /admin/ and
 * /admin/editorial/automaticfeedcontrol/ are §10 cuts, not product pages, and
 * still serve only Django's chrome as the paragraph below says — so the class
 * names templates/admin/owner_task.html and the Feed Operations change_list
 * emit (note, status, meta, secondary, list, row, diagnostic) match nothing
 * those two pages load until docs/PLAN.md §7 S6 and S7 put the routes on this
 * file. And EveryEmittedClassIsDefinedTest does not fail on a repo template
 * naming a class this file leaves undefined: it accepts a name defined in
 * either this file or Django's own admin CSS, 216 further names, so
 * `class="note module"` on owner_task.html passes it.
 *
 * Provenance, and where to read it. Every value here is lifted from the
 * standard docs/PLAN.md §4 names, cited below by line as feed_selection.css:N,
 * or from the gold Feed block of the accepted end-state prototype,
 * tests/end_state_prototype_server.py:2484-2547. Where a value comes from
 * neither, the rule says so and says why. The prototype is still tracked at
 * that path; the standard and the two markup systems named below were deleted
 * with the commit that shipped this file, and read at
 *   git show 866431d^:editorial/static/editorial/feed_selection.css
 *   git show 866431d^:subscriber_access/templates/subscriber_access/base_access.html
 *   git show 866431d^:subscriber_access/templates/subscriber_access/feed_surface.html
 *
 * What it replaced on every product page: base_access.html's inline <style>
 * (its own palette copy, its 760px shell, its text wordmark, its 48px Georgia
 * h1, its filled inverted buttons), feed_surface.html's inline <style> (a
 * second palette copy, a 1360px shell) and the admin override layer
 * in_the_loop_admin.css with its --itl-* token family. It did not replace
 * Django's own admin/css/base.css and responsive.css: the admin routes §10 cuts
 * are not product pages and still fall back to Django's chrome until the slice
 * that cuts each one runs (docs/PLAN.md §7 S1).
 *
 * Five contracts hold everywhere:
 *   - Colour is custom properties. No hex literal exists outside :root.
 *   - Padding, margin and gap take values only from {4,7,8,9,10,12}.
 *   - The window is the box. The shell is the viewport, at every width, and no
 *     box draws a left or a right edge: a box's sides are completed by the edge
 *     of the screen and the only structural line in the product is a horizontal
 *     rule across the whole of it. There is no outer ground, no gap between two
 *     boxes and no second layout above a breakpoint — desktop and phone render
 *     the same stack at different widths.
 *   - One shared left edge, and now one number: 9.00px, which is every box's own
 *     9px of padding against a viewport the shell starts at. The wordmark
 *     reaches 8.983px because the last 2px live in the mark's own side-bearing
 *     (viewBox 0 0 6660 1440 at 21px), not in any rule here. The mark is loaded
 *     from the asset route and never inlined: an inlined copy keeps proving an
 *     edge the product no longer has (docs/PLAN.md §4).
 *   - One band height. Every band of chrome is 44px of content — the target
 *     floor — plus the 1px rule that closes it, so nothing in the stack is
 *     taller than anything else for a reason it cannot state. Three members
 *     differ, and each says why where it is declared: .row, 64px, because it is
 *     two lines centred as a pair; .group-label, a label inside a list, which
 *     holds no control; and .diagnostic, the operations band's per-source
 *     entry, which is five metadata lines under a source name and has passed
 *     64px before the floor could apply.
 *
 */

/* ---------------------------------------------------------------------------
   Ground. feed_selection.css:1-8, value for value.
   --------------------------------------------------------------------------- */

:root { color-scheme:dark; --ink:#000; --cream:#e6e6e6; --link:#e6e6e6;
  --focus:#fff; --visited:#b8b8b8; --muted:#999; --line:#555; --in:#b8d8a4;
  --out:#d1a69a; --error:var(--out); }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--cream);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
/* Visited belongs on a destination that has been read, and an article title is
   the only such destination here. --visited #b8b8b8 is 10.6:1 on the ground
   where body text is 16.8:1, so a global rule made every control — Open Feed,
   Get an access link, Newest edition, the publish acknowledgement, the supply
   warning — quieter than the prose around it the moment it worked once. The one
   visited rule in this system is .title:visited. */
a { color:var(--link); text-decoration:none; }
a:hover,
a:focus-visible { color:var(--focus); }
/* What a link looks like at rest. --link and --cream are the same hex, a
   persistent underline is barred (docs/PLAN.md §4) and state through colour
   alone is barred (§4), so on a page whose prose is also cream and sometimes
   bold nothing distinguished a link from a sentence until it was tried. The walk
   already carries the product's own answer in its own text — `← Previous
   edition`, `Later →` — so the step mark becomes the rule rather than that one
   component's habit: every link that goes somewhere carries it, and the walk's
   dates, which are an index of where you already are rather than steps, and the
   row title, which is the destination itself, do not. Escaped rather than
   literal so the mark cannot depend on how the file is decoded. */
.note a::after,
.secondary a::after,
.foot.open a::after,
.redeem button::after { content:"\2192"; margin-left:4px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }

/* One utility from the replaced systems: [hidden] from base_access.html, which
   every inline-flex rule below would otherwise defeat on an element the markup
   has hidden. feed_surface.html's .visually-hidden came across with it and no
   element on any of the 23 pages matched it — the Feed's <h1> is now the visible
   date in the masthead — so it is deleted rather than carried. */
[hidden] { display:none !important; }

/* ---------------------------------------------------------------------------
   The shell. The window, and nothing else.
   --------------------------------------------------------------------------- */

/* feed_selection.css:9 insets the shell by 8px and caps it at 1424px, and this
   system carried that above 700px while the mobile block took it away. Both are
   gone: the walked answer is that the shell IS the window at every width, so
   the sides of every box are completed by the edge of the screen and the whole
   product is one column of full-width bands. A <main> is already a block at
   100% of its container, so the shell states neither width nor margin — the
   absence is the rule, and there is no longer a second layout for a media
   block to disagree with. position:relative is for the closing line below. */
.shell { position:relative; background:var(--ink); }
/* The page ends on a line, always. It may begin without one — the browser's own
   top edge does that job — but a stack of boxes that stops on bare text has no
   bottom edge at all, and three of the shapes the shell builds do exactly that:
   the Feed's open foot (border:0 by construction), a closed disclosure (a
   summary is a control, not a box) and the owner's foot before this round gave
   its rows their rules.
   Drawn as a positioned pseudo-element and not as a border on whichever box
   happens to be last, which is the same device .row + .row::before uses and for
   the same reason: a border on the last box doubles the line wherever that box
   already draws one, and an open disclosure ends on a list that does. This
   occupies exactly the last 1px of the shell's content box — the shell has no
   padding and no child carries a bottom margin — so where a line already exists
   it falls on it and the pair measures one hairline, and where none exists it
   is the line. Measured on every surface at every width. */
.shell::after { content:""; position:absolute; right:0; bottom:0; left:0;
  border-bottom:1px solid var(--line); }
/* §7.10 asked where a prose page's column sits — narrowed to the measure and
   centred, or on the shared left edge — and `?compose=` rendered both. The walk
   answered neither: the column is the window now, so there is no ground either
   side of it to divide and no alternative left to press for. The switcher, its
   --compose-left property and the narrowed .shell.note-page are deleted rather
   than kept as a second answer; what survives of the question is that prose
   still needs a measure, and it is stated on the sentence itself, with .note p
   below. `note-page` stays in the markup as the prototype's marker for `this
   page is prose`, and no rule here reads it. */

/* The skip link. Built from the contract: no gold source has one, and every
   page needs one control before the masthead. Out of the flow until focused,
   then an overlay flush to the top-left of the window, one border lighter on
   the side the window completes, so its word lands on the same 9px edge as the
   masthead it covers. clip-path rather than display:none, which is unreachable
   by focus. var(--muted) for that border and not var(--line): this is a
   control, and the .field comment below states the whole reason once. */
.skip { position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
.skip:focus { position:fixed; z-index:1; top:0; left:0;
  display:inline-flex; width:auto; height:auto; min-width:44px;
  min-height:44px; align-items:center; padding:8px 9px; overflow:visible;
  border:1px solid var(--muted); border-left-width:0; background:var(--ink);
  color:var(--focus); font-size:.75rem; font-weight:700; clip-path:none; }

/* ---------------------------------------------------------------------------
   The masthead. One band, three cells: the wordmark, an optional nav, an
   optional right slot. feed_selection.css:10-22 for the band and the nav; the
   gold Feed's own date cell for the right slot. The sign-out control that used
   to hold the third cell is a row of the foot now, and its rules moved with it.
   --------------------------------------------------------------------------- */

/* No min-height, and the deletion is the answer to `why is the date band taller
   than the nav above it`. feed_selection.css:10 ships 52px, which is 8px more
   than the 44px target every cell in this band already guarantees — invisible
   while the masthead was one row on its own, and 8px of disagreement the moment
   a second band (.pagehead) sat under it on a phone. The brand cell's own 44px
   is what sets the band now, so the masthead is 44px of content plus the 1px
   rule that closes it, exactly like every other band. */
.masthead { display:grid;
  grid-template-columns:minmax(min-content,1fr) auto auto; align-items:center;
  border:1px solid var(--line); border-width:0 0 1px; background:var(--ink); }
/* 7px of padding, and the mark's own 1.983px side-bearing carries it to
   8.983px against every other box's 9.00px. feed_selection.css:11 ships 12px,
   which is docs/PLAN.md §7.3's measured ≈5px break in the shared edge; this
   system fixes it rather than carrying it. */
.brand { display:flex; min-width:44px; min-height:44px; align-items:center;
  padding:8px 7px; line-height:0; }
.brand img { display:block; width:auto; height:21px; }
.masthead nav { display:flex; min-width:0; flex-wrap:wrap; align-items:center; }
/* 9px and not 12px, on both sides. Every other box in the product insets its
   word by 9px; this band was the one that did not, and only its left edge was
   ever pinned — below 521 the container hands the first item the 9 and the
   item's own left padding is cleared to 0, so the rag was fixed on the left and
   the right was never anybody's number. 12px is what the masthead's own right
   cell then stopped short of the window by, against 9px everywhere else.
   The space between two nav words is the two paddings that meet, so it is 18px
   above the stacking breakpoint and 9px below it, where the container carries
   the left one. Neither is ground between targets: the two 44px boxes are
   already adjacent and the padding is inside them.
   `<h1 aria-current="page">` is the owner's own heading under
   ?ownerhead=inline, where it is a cell of this band rather than a band of its
   own. What it takes from here is the 44px box and the margin reset; its face
   is the page-heading rule below, which comes after this one and wins. */
.masthead nav a,
.masthead h1[aria-current="page"],
.when { display:inline-flex; min-width:44px; min-height:44px; margin:0;
  align-items:center; padding:8px 9px 8px var(--nav-left,9px);
  font-size:.75rem; font-weight:700;
  line-height:1.2; text-decoration:none; }
/* Two headings, two rules, and the split is the point. The Feed's edition date
   and the owner's page name were one treatment and one switcher while both were
   cells of the masthead; the restructure gave the owner's its own band above
   the content it names, and a band over a list is not a cell beside a nav.
   What the binding cost, measured at 1400: Feed Operations set its own <h1> in
   12px mono over an <h2> inside its note in 15.04px Georgia, so the subordinate
   outweighed the heading that owns the page; and the band read as a peer of the
   `In this edition` label below it, the pair differing only by #fff against
   #e6e6e6 at the same family, size and weight. `?head=` now asks only about the
   Feed's date and `?pagehead=` asks about the owner's band, because they are
   two questions and always were. */

/* The Feed's edition date, in the masthead's right slot. §7.8's walked answer
   and Ryan's shipped pick: the date joins the band it sits in rather than the
   prose below it, at the size the nav, the walk, the foot and the metadata line
   already take, tracked out so a date still reads as a heading beside the nav's
   own words. docs/PLAN.md §4 names this date as the one stated exception to its
   Georgia-titles rule — it titles a page in the mono — and the two serif
   renderings stay one press away below. The box, the size and the weight are
   the masthead cell's rule above — this states only what is a fact about a
   heading rather than about the band.
   var(--focus), which §4's type table gives this date and :root defines here as
   #fff. */
.when { letter-spacing:.06em; line-height:1.14; color:var(--focus); }
/* The owner's page heading, in whichever place the arrangement puts it: its own
   band under the masthead by default, a cell of the nav under
   ?ownerhead=inline. Both are the same element doing the same job, so both take
   one face and one switcher.
   Georgia at .94rem and 700, and nothing new enters the scale doing it: that is
   exactly what .note h1 takes below, and `a note that IS the page's heading` is
   the same role this is — §3's own assignment for a heading that owns its page.
   It resolves both collisions at once. Against the note inside the page it is
   15.04px Georgia 700 over 15.04px Georgia 400, so no heading within the page
   outweighs it and the inversion cannot come back through a colour. Against the
   group label under it on Selection it differs by family AND size, where the
   pair used to differ by #fff against #e6e6e6 alone.
   It shares family, size and weight with a row title, and the two are not one
   treatment: a row title is var(--link) with a visited state, inside a 64px row
   of the list, and this is var(--focus) alone in a band above that list. That
   is the same separation .note h1 already lives with on every prose page. */
.pagehead,
.masthead h1[aria-current="page"] { color:var(--focus);
  font-family:Georgia,"Times New Roman",serif; font-size:.94rem;
  font-weight:700; line-height:1.14; letter-spacing:normal; }
/* The band the default arrangement draws it in. It takes what every other box
   takes — 9px of padding, which is what puts its word on the shared 9.00 edge,
   and 1px of rule at its foot — and the one band height: 44px of content plus
   that rule, which is 45px of box.
   52px is what it carried, lifted from the masthead's own min-height, and on a
   phone that made this the tallest band on the page — 52px of date under a
   45px band of nav, which is the difference Ryan walked into. The masthead has
   given the 52 up too, so the two bands agree by both being the target floor
   rather than by copying a number from each other.
   margin:0, and stating it is not tidying: an <h1> carries 21.44px of UA margin
   top AND bottom, and no sibling selector can reach the bottom one — it was the
   one gap in the stack nothing else could close, 21.44px of ground under the
   heading at every width. */
.pagehead { display:flex; min-height:45px; align-items:center; margin:0;
  padding:8px 9px; border:1px solid var(--line); border-width:0 0 1px;
  background:var(--ink); }
/* ---------------------------------------------------------------------------
   The list and the row. feed_selection.css:23-30, with two corrections.
   --------------------------------------------------------------------------- */

.list { margin:0; padding:0; list-style:none;
  border:1px solid var(--line); border-width:0 0 1px; background:var(--ink); }
/* Two groups inside one list still read as one list, so the inner list that
   carries a group's accessible name resets itself and nothing else. */
.group { margin:0; padding:0; list-style:none; }
/* A group label is a label and not a title — mono at the metadata's size, with
   the row's own 7px/9px so it lines up with the titles under it. Unstyled it
   rendered at the UA's 24px on 19.92px margins, 9px off the shared edge.
   It is the one horizontal division in the product that is not 44px of band,
   and the reason is that it is not a band: it lives inside the list rather than
   in the stack, and it holds no control, so the 44px target floor — which
   exists for things a thumb has to hit — has nothing to floor. 29px is its one
   line of text in the row's own padding.
   The 8px of ground it used to carry above itself is gone. That figure came
   from .group + .group, where the hairline alone could not say which pair of
   rows was a group boundary, so ground had to say it. Every group that has a
   neighbour now has a visible name, and the name is the boundary — so the 8px
   was a second device saying what the label already says, and the only gap left
   anywhere in the stack. What separates two groups is one line, like
   everything else. */
.group-label { margin:0; padding:7px 9px; font-size:.75rem; font-weight:700;
  line-height:1.25; }
.group + .group-label { border-top:1px solid var(--line); }
/* docs/PLAN.md §4 contract 5 states the row's exception: 64px, two lines
   centred as a pair. align-content is what centres the pair and align-items
   centres each line inside its own track. Both are
   needed and feed_selection.css:24 declares only the second.
   The separator is drawn by an absolutely-positioned ::before rather than a
   border, because border-box counts a border inside min-height: with
   .row + .row {border-top} the first row of a list measures 13.93/13.93 and
   every row after a separator measures 14.43/13.43 off the same declarations.
   Out of the box, every row is 64px with a 50px content box and one figure is
   literally true. */
.row { position:relative; display:grid; min-height:64px;
  grid-template-columns:minmax(0,1fr) auto; align-content:center;
  align-items:center; padding:7px 9px; }
.row + .row::before { content:""; position:absolute;
  top:0; right:0; left:0; border-top:1px solid var(--line); }
/* The title and its metadata are two lines of one column, never two columns:
   the pair is what align-content centres, and 13.93/13.93 is the figure that
   proves it. The second track carries the owner's decision control and its
   separation is that control's own margin, not the grid's gap — a gap is
   declared once and applies between rows as well, which would put 10px between
   the title and the metadata, and it reserves its gutter even on the Feed,
   where the second track is empty and the title would measure 10px short of
   the row it is centred in. */
.title,
.meta { grid-column:1; }
/* The control spans both lines rather than sitting on the title's, or its 44px
   sets the height of the first line alone and a row that measures 64 measures
   75. Spanning is not enough on its own: a 44px item spanning two auto tracks
   distributes its height into both, which raised them from 17.141/19 to
   21.063/22.938 and cut the row's free space from 13.859 to 6.000, so every
   owner row measured 11.953/11.969 against the Feed's 13.930. The item is
   therefore placed by the grid and sized out of it — height:0 with min-height:0,
   which is what turns off a grid item's automatic minimum size — and centres its
   own 44px control on that zero-height line. The control does not move a pixel:
   it spanned 10..54 of the 64px row before and spans 10..54 now. */
.actions { grid-column:2; grid-row:1 / span 2; height:0; min-height:0;
  margin-left:10px; }
/* A row title carries no measure, and that is the answer rather than an
   omission. A measure is a claim about reading a paragraph across; a row title
   is a scan target — one line the eye lands on and leaves — so it takes the
   full width of its row and wraps only where the window is too narrow to hold
   it. No breakpoint says that: a line that does not fit is the browser's own
   answer, and the only widths where the Feed's longest title wraps are the ones
   where it genuinely cannot fit. Prose keeps its measure, stated on the
   sentence in a note below.
   The deleted rule was padding-right:max(0px, 100% - var(--measure)), which
   held every title to 417.594px at every width, so the longest one set four
   lines on a desktop row that had 1382px to give it one. overflow-wrap stays:
   it is what keeps a single unbroken token inside the row at 320px. */
.title { display:block;
  color:var(--link);
  font-family:Georgia,"Times New Roman",serif; font-size:.94rem;
  font-weight:700; line-height:1.14; text-decoration:none;
  overflow-wrap:anywhere; }
.title:visited { color:var(--visited); }
.title:hover,
.title:focus-visible { color:var(--focus); }
.meta { display:block; margin-top:4px; color:var(--muted); font-size:.75rem;
  line-height:1.25; overflow-wrap:anywhere; }
.actions { display:flex; align-items:center; gap:4px; }
/* Feed Operations' per-source entry shares the row's box — the list's border,
   the shared 9px padding, the hairline between entries — and nothing else. It is
   five metadata lines under a source name, not a title and a metadata line and a
   control, so the two declarations that make a candidate row a candidate row are
   given back: the grid, which would place five spans into two tracks, and the
   64px floor, which would hold a five-line entry at a height it has already
   passed. */
.diagnostic { display:block; min-height:0; }

/* §7.4's settled answer, and it is the row's default, not the Feed's.
   docs/PLAN.md §4 makes this rule — .row a.title::after here — the answer for
   every row on every surface, and the Feed is not the only surface with
   rows: Selection and both edition pages carry the same anchor in the same box.
   Scoped to .hit-block it reached none of them and their title measured
   17.141 × 1310px. So the band is what a row title is, everywhere, and the two
   rejected answers below are the opt-in overrides.

   The anchor keeps its text box in flow, so nothing above it moves and the
   metadata stays outside the accessible name, and it takes a 44px band across
   its own column as its target. The band rather than the box because a 44px
   anchor in flow needs 44 + 4 + 15 = 63px of content against the row's 50px
   content box, which would make the row 77px and break the very measurement
   this is not allowed to break. The band hangs off the title, not off the row:
   across the row it would cover the decision control on the owner's rows and
   take its presses, and its focus ring would enclose a control the title does
   not own. Three terms place it. calc(50% - 22px) against a text box of any
   height gives exactly 44px; -9px gives back the row's own horizontal padding,
   so the Feed keeps the full 1382px band it was settled on and the owner's band
   stops 1px short of the control's 10px margin; and 9.5px moves the band off the
   title's centre and onto the pair's, being half of the metadata's own 4px
   margin and 15px line box. The result is the accepted Feed rendering to the
   pixel — the band spans 10..54 of a 64px row and its ring 13..51, clear above
   the title and clear below the metadata, with 20px of dead space between
   adjacent targets — now on every surface that has rows. */
.row a.title { position:relative; }
.row a.title::after { content:""; position:absolute; right:-9px; left:-9px;
  top:calc(50% - 22px + 9.5px); bottom:calc(50% - 22px - 9.5px); }
/* The ring goes where the target is, on every surface that has rows. Drawn on
   the text box it understates the band to exactly the person who cannot see the
   pointer change, so the anchor gives its own ring up and the band takes it. The
   offset is inward: an outward ring on a full-width band would sit on the list's
   own border, and at mobile widths, where that border is gone, past the viewport
   edge. */
.row a.title:focus-visible { outline:0; }
.row a.title:focus-visible::after { outline:3px solid var(--focus);
  outline-offset:-3px; }

/* ---------------------------------------------------------------------------
   The note. Built from the contract: no source system has one. One bordered box
   under the masthead
   for every page that has no list: the empty Feed, the Feed's not-found, the
   denial, and every page of the access journey, which is nothing but this box.
   One shape everywhere — heading always, sentence optional, one recovery or
   forward step optional — because a viewer cannot infer three.
   --------------------------------------------------------------------------- */

/* The measure, declared once, on the box whose font defines it and read by the
   two things inside it that have to end on one edge: the sentence and the
   field. It is 58 characters of the product's 12px mono — 417.594px measured —
   and it is REGISTERED, which is the whole of why this works. An unregistered
   custom property substitutes its tokens at the point of use, so `--measure:
   58ch` read by a 15.04px Georgia paragraph would resolve `ch` against Georgia
   and hand that paragraph 535.391px: 85 characters to the line where the field
   under it still ends at 417.594, which is the one right edge this system says
   they share, missed by 117.797px. Registered as a length, the value is
   computed HERE, where the 58 was counted, and inherits as a resolved length —
   so one declaration means one number whatever face reads it, and each of
   §7.9's three prose answers gets the same line to read.
   <length-percentage> and 100% as the initial value, so a use outside a note is
   `as wide as its box` rather than a collapsed one. */
@property --measure {
  syntax:"<length-percentage>"; inherits:true; initial-value:100%; }

/* The box is the window, like every other box. It used to stop at the measure,
   which put a 437.594px bottom rule under a full-width masthead on an owner
   list page — the mismatch §7.14 existed to ask about — and the walked answer
   settles it the other way round from either candidate: nothing stops short of
   the screen, and the measure moves off the box and onto the sentence inside
   it, where a measure is actually a claim about reading. `?notewidth=` is
   deleted with the question; `measure` is no longer even renderable, because a
   box that stops at 437px inside a full-bleed stack is a hairline that ends in
   the middle of the screen.
   font-size stays, and is not inherited: the measure above is 58ch of this
   box's own text, so the box has to be set at the size that figure was counted
   at. Every other child states its own rem size, so nothing else moves. */
.note { --measure:58ch; padding:12px 9px; border:1px solid var(--line);
  border-width:0 0 1px; background:var(--ink); font-size:.75rem; }
/* :where(h1, h2), because the note's heading is whichever level the page's
   outline leaves free: a page that already spends its <h1> on the masthead slot
   demotes the note's to <h2>, and every declaration here is a fact about the
   note rather than about the level. :where() contributes nothing to
   specificity, so the one declaration that IS a fact about the level — weight —
   wins from a plain type selector rather than from source order, which a later
   edit can silently reverse. */
.note :where(h1, h2) { margin:0; color:var(--focus);
  font-family:Georgia,"Times New Roman",serif; font-size:.94rem;
  font-weight:400; line-height:1.14; overflow-wrap:anywhere; }
/* Weight carries the heading's role, and the level already states the role. An
   <h1> here is the page's own heading with §7.9's prose beneath it in the same
   family at the same size, so 700 is what keeps it from reading as the first
   sentence. An <h2> is a status line under a masthead heading that is 400, so
   700 would invert the page it sits in and it keeps the note's default. */
.note h1 { font-weight:700; }
/* var(--cream), not var(--muted): the note's sentence is the one line on its
   page that has to be read — the proposition that sells the product, the
   warning before an irreversible act, the reason a Feed is empty. base_access
   .html made every <p> muted globally, which left exactly those sentences the
   dimmest text on their own pages. var(--muted) stays for text that really is
   secondary: metadata, the date, the quiet line under a control.
   And .94rem, not .75rem. This is the only prose in the product that is read
   rather than scanned, and it was set at 12px — the scale the timestamps and the
   field labels take, which is the scale for text you skim past. Nothing new
   enters the type scale doing it: 15.04px is already the row title's size and
   the page heading's, so the system still has the two sizes it always had, and
   the family carries the role instead of a third size.
   The family is the serif, and that is a measurement rather than a preference.
   The criterion was registered before the render: a face that cannot reach 45
   characters on a line at 375px is not a reading face. Measured from Range
   rects over the real text nodes on the seven pages that carried a sentence
   when it was measured — §3.4's token landing has joined them since — mono
   at 15.04px peaks at 40 characters and averages 36.4; the same size in Georgia
   averages 53.0 and reaches 58. Mono is one fewer family to learn and it lost
   its own test, so it is §7.9's named alternative below and not the default.
   1.5 rather than 1.25, because a 15px line needs leading a 12px label does
   not, and the rhythm is 8px off the heading, from the spacing set.
   max-width is the measure, and the measure is on the text now rather than on
   the box. The box used to carry it and the box is the window, so without this
   the sentence would set 190 characters to the line on a 1400px screen. A box
   is a shape and a measure is a claim about reading, so the claim belongs on
   the thing that is read: 42 to 66 characters a line at 1400, 42 to 58 at 375,
   and the same 417.594px of text at both. Read from the property rather than
   restated, so it cannot disagree with the field under it.
   :not(.secondary), because the quiet line under a control is a <p> on two
   pages and a <div> on the third — a form cannot live in a <p> — and .note p
   is one class and one type against .secondary's one class, so it was already
   taking that line's colour and margin and rendering the same component two
   ways. Winning the race back is not enough: the two variants below are three
   selectors deep and would win it again, so the line is taken out of the match
   rather than out-ranked, and the quiet line reads the same whichever element
   the page needed. */
.note p:not(.secondary) { max-width:var(--measure); margin:0; color:var(--cream);
  font-family:Georgia,"Times New Roman",serif; font-size:.94rem;
  line-height:1.5; overflow-wrap:anywhere; }
/* The rhythm carries :not(.secondary) too, and states its figure as a fallback
   of a custom property instead of as a declaration a variant has to out-rank.
   Both halves fix the same defect: margin:0 above is one class, one
   pseudo-class and one type, .note :is(h1, h2) + p was one class and two types,
   so the shorthand won and the heading sat on its sentence with no gap at all —
   a rule that stated 8px and had never once applied. Repeating the pseudo-class
   makes the rhythm rule a strict superset of the rule it must beat, which is a
   property of the selectors rather than a count a later edit can silently
   reverse. And a variant no longer restates margin-top: it sets the property
   the rhythm reads, so all three faces express the rhythm through one rule.
   There is one rhythm rule and not two. The second, .note p + p, set 12px
   between sentences and matched nothing: every note in the product carries at
   most one sentence, on all 23 pages at all six widths, so the rule and the
   --note-gap-prose property that existed only to feed it are deleted rather
   than kept against a note shape this product does not have. */
.note :is(h1, h2, .status) + p:not(.secondary) {
  margin-top:var(--note-gap-head,8px); }
/* §7.12, candidate: the same string as a <p class="status">, so the page is
   left with the one heading it already carries.
   It took the note's heading treatment, which made the rendering null: `plain`
   and `heading` were byte-identical screenshots on both pages that carry a
   status, because .note p already supplies the heading's family, size and
   weight and the two declarations left were colour and leading. A switcher
   whose two answers photograph the same is not a question, so this answers with
   a face as well as an element — the face the product already uses for a line
   that reports a fact rather than titling a section: the mono, at the metadata
   size and its leading. Nothing new enters the system; .meta and the foot's
   position marker are that treatment already.
   var(--cream) and not var(--muted), which is the other half of that
   treatment: muted is for a line that is secondary to something beside it, and
   a status line has nothing beside it — on Selection it is the whole of what
   the product says about the press it just took.
   The separator below stops naming .status with it. A rule under this line
   would be the heading's own device drawn under something that is not one, and
   what tells the two apart here is family and size, which no leading or colour
   can undo. The rhythm above keeps it: a status still holds 8px off the
   sentence it precedes, at either level.
   max-width:none because a status line reaches the window like every other
   chrome line in the product; the measure is for text that is read across, and
   this is one line that is glanced at. Repeating :not(.secondary) is what makes
   any of that apply: a :not() contributes its argument, so the prose rule is
   two classes and a type, and a bare .note .status was two classes and lost
   every declaration it made — Georgia at 15.04px over a 58ch measure, on the
   first page that rendered a status. Carrying the same :not() gives this rule
   every class the prose rule counts and one more, and a type can never make up
   a class, so it wins wherever either rule sits in the file. That is a property
   of the two selectors rather than a count a later edit can silently reverse.
   The prose rule is out-ranked, never narrowed: taking .status out of its match
   would take margin:0 and overflow-wrap with it and let the user agent's own
   1em 0 back onto the line, so the prose rule stays a statement about prose and
   still supplies both. */
.note .status:not(.secondary) { max-width:none; font-family:inherit;
  font-size:.75rem; line-height:1.25; color:var(--cream); }
/* What tells a 400 heading from a 400 sentence, once weight is spent on the
   page above. Rendered at 1400 and at 375, an <h2> and the <p> under it were
   the same family, size, weight and leading with #fff against #e6e6e6 between
   them, and the pair read as two sentences of one paragraph on every supply
   state Feed Operations has. Colour alone is not enough, so a line separates
   them, at the system's own 8px either side of it.
   It is drawn on the HEADING and not on the sentence, and the swap is the
   measure's doing. A rule drawn on the sentence is as wide as the sentence, and
   the sentence is 58ch now — so on a 1400px note it terminated mid-screen, the
   one hairline in the product that would not have reached the window. The
   heading has no measure, so its rule is the full width every other line here
   is. The condition is unchanged and still says `only where there is a sentence
   to separate`: :has(+ p) is the same sibling test read from the other end,
   which matters because a note may carry a heading and nothing else — Feed
   Operations does when every source refreshed — and an unconditional rule under
   that heading would draw a second line 12px above the note's own. Not on an
   <h1>: there weight already does this, and a second device saying the same
   thing is one to delete. Not on §7.12's .status either, which is no longer a
   heading in face any more than in element — it is 12px mono over 15.04px
   serif, and a line under it would say a second time what the change of face
   already says, on the one element whose whole question is whether it is a
   heading at all. */
.note h2:has(+ p:not(.secondary)) { padding-bottom:8px;
  border-bottom:1px solid var(--line); }
.note a { display:inline-flex; min-width:44px; min-height:44px;
  align-items:center; margin-top:4px; font-size:.75rem; font-weight:700;
  text-decoration:none; }
/* align-items:end, not the base form's center: a field is a label above an
   input, so a button centred against the pair sits above the input it submits
   and reads as belonging to the label.
   max-width is the measure, and it is what makes the field row end where the
   sentence above it ends. The field already carried the measure and the button
   did not, so at 1400 one band of a prose page terminated at four different x
   positions and the button was the only element in the product past the
   measure: 511.406 against the sentence's 426.594. Worse on the sign-in wall,
   where a form with two fields laid them out side by side across 918px because
   there was nothing to wrap against. With the measure on the form, the field
   fills a line, a second field takes the next one, and the button wraps to a
   line of its own. */
.note form { display:flex; max-width:var(--measure); flex-wrap:wrap; gap:4px;
  align-items:end; margin-top:4px; }
/* And the button ends where the input above it ends, which is where the
   sentence above that ends: one right edge for the whole band, 426.594 at
   every width wide enough to reach the measure. Scoped to the note's own form,
   which is a direct child, because the other form a note can hold is the
   unsubscribe act inside .secondary — a bordered control whose border belongs
   on the shared LEFT edge with everything else, and which this would move
   across the screen. This is the one element in the product that is placed from
   the right, and it is placed from the only right edge the product has. */
.note > form { justify-content:flex-end; }

/* ---------------------------------------------------------------------------
   The one disclosure. docs/PLAN.md §7 S7 puts the diagnostic lines behind a
   summary line that is the whole assertion, and asks for one 44px <details>
   band beneath Selection's list, always present — so this is a single component
   and never a per-item device. The band never renders open; the summary line is
   the whole assertion, so opening it is the reader's own press. Built from the
   contract: no source system has one.

   The summary takes the same 9px every box takes, so its marker lands on the
   shared edge, and a 28px line inside 8px padding, which is 44px of band
   without changing display:list-item — the marker is the only thing that says a
   summary opens, and any other display value in Chrome removes it. It carried
   10px while the boxes around it spent 1px on a left border; no box draws one
   now, so the two figures that stood in for that border are one figure again.

   Shut, the box is that 44px band plus the 1px rule that closes it, exactly
   like every other box here: a summary draws no border of its own, so without
   this the band and the foot below it ran together. Open, the rule comes off —
   the list inside already draws one at exactly the disclosure's own bottom, and
   a border here would be a second hairline on top of it.
   --------------------------------------------------------------------------- */

.disclose summary { padding:8px 9px; font-size:.75rem; font-weight:700;
  line-height:28px; cursor:pointer; }
.disclose:not([open]) { border:1px solid var(--line); border-width:0 0 1px; }

/* ---------------------------------------------------------------------------
   Form primitives. Built from the contract: feed_selection.css has no form and
   the access journey's own field is 48px tall on 11px and 16px padding, none of
   which is in the spacing set. The field reads the note's own measure, so a
   label, its input and the sentence above them share one right edge — and reads
   it rather than restating 58ch, because a second statement of the measure is a
   second thing to keep true and it is the sentence, not this, that the measure
   is for.

   flex-basis, not max-width alone: the field is a flex item inside .note form,
   so it shrank to the input's intrinsic width and width:100% then resolved
   against that — 187px of input under a 436px sentence, which is the opposite of
   the contract this comment states. With the measure as its basis it takes the
   note's whole content width and the button wraps under it, and it still shrinks
   below the measure at narrow widths.
   --------------------------------------------------------------------------- */

.field { flex:0 1 var(--measure); max-width:var(--measure); margin-top:8px; }
.field label { display:block; margin:0 0 4px; font-size:.75rem;
  font-weight:700; }
/* var(--muted), not var(--line): #555 on #000 is 2.82:1, under WCAG 1.4.11's
   3:1 for non-text contrast. As a row separator that is decorative and passes on
   its own terms; as the only boundary that identifies an input or a button as a
   control it does not. The token is not lifted — docs/PLAN.md §4 names
   --line:#555, so changing it is a plan change and giving controls their own
   boundary from a colour already in the palette is not. var(--muted) #999 is
   7.4:1, it is the same neutral the metadata line takes, and it draws the line
   between a control and a separator that the one shared hairline could not. */
.field input { display:block; width:100%; min-height:44px; padding:8px 9px;
  border:1px solid var(--muted); border-radius:0; background:var(--ink);
  color:var(--cream); font:inherit; font-size:.75rem; }
.field input[aria-invalid="true"] { border-color:var(--error); }
/* feed_selection.css:31-32. One button everywhere: outlined, never filled, mono,
   44px, square. It replaces the access journey's filled inverted button, whose
   fill is the committed look this system reserves for a pressed state. */
form { display:flex; align-items:center; }
button { min-width:44px; min-height:44px; padding:0 7px;
  border:1px solid var(--muted); background:var(--ink); color:var(--cream);
  font-family:inherit; font-size:.75rem; font-weight:700; cursor:pointer; }
/* feed_selection.css:19-20 brightens a control to var(--focus) on hover and
   focus. No :active rule exists on any control in this system
   (docs/PLAN.md §4). */
button:hover,
button:focus-visible { color:var(--focus); }
/* base_access.html's quieter line under a primary control. */
.secondary { margin:8px 0 0; color:var(--muted); font-size:.75rem;
  line-height:1.25; }
.secondary a { display:inline-flex; min-width:44px; min-height:44px;
  align-items:center; font-weight:700; overflow-wrap:anywhere; }
/* A control can live on the quiet line too, and on exactly one page it must:
   the unsubscribe confirmation, where Keep access is the note's forward step
   and the act itself belongs below it. Quieting a destructive act is right;
   erasing it is not. Borderless and unpadded it measured colour var(--muted),
   border 0px none, background transparent, padding 0px — box metrics a line of
   prose also has, which at 375px read as disabled text on the one page whose
   whole purpose is preventing a mistake. It keeps var(--muted), so it stays
   quieter than Keep access, which is var(--link) and carries the step mark; it
   takes back the outlined button's own boundary, which is what a control looks
   like in this system and the only thing that said so.
   The border does not cost the shared edge anything, because the border is what
   the edge is for: a bordered control puts its border on the shared edge and its
   text one padding step in, exactly as the masthead, the list, the note and the
   foot all do. The rule that dragged the box 10px left to put the *word* on
   18.00 hung its boundary a pixel outside the page and made this the one control
   in the system whose border was not on the edge; it and its mobile companion
   are deleted rather than corrected, and the base button's own padding stands. */
.secondary button { background:transparent; color:var(--muted); }
.secondary button:hover,
.secondary button:focus-visible { color:var(--focus); }
/* The pair is one decision, and 8px between two boxes is 37px between their two
   words: each control spends ~14.5px of its 44px target as ground under its own
   word, so a gap declared between the boxes is paid three times over between the
   words, and the act read as stranded rather than as the second answer. The
   boxes meet, which is what two stacked 44px targets do everywhere else in this
   system, and the 29px that remains is the targets themselves. Scoped to the
   pair: the quiet line that follows a form is a sentence and keeps its 8px. */
.note a + .secondary { margin-top:0; }

/* ---------------------------------------------------------------------------
   The scanner-safe redemption control. docs/PLAN.md §4: the one button with a
   forward-step face — a native POST submit that stays a 44px target,
   left-aligned at the shared edge and borderless, and does not inherit the
   right alignment or the box of a field's form action. §4 also lists it beside
   note, secondary and open-foot links as a carrier of the `\2192` mark, and it
   takes the mark from that one rule above rather than from a second one here.

   Three inheritances are refused, and only these three. `.note > form` places a
   field's action against the product's one right edge, which is the edge the
   input above it ends on; this form has no input, so there is nothing above it
   to end against and the shared LEFT edge is the only edge it has. And the base
   button's border is what a *choice* looks like here; this is the way through
   the page, and it says so in the colour it already has: the base button is
   var(--cream), and --cream and --link are the same hex, as the rest-state note
   above records, so the label is at the colour of every other forward step
   without this rule declaring a colour at all. That is what tells it apart from
   `.secondary button` two rules up, which is borderless-but-var(--muted) and
   once read as disabled text: quiet is the whole point there and the opposite
   of the point here, so the border came back there and goes here.

   background:transparent is the third, and it is the declaration
   `.secondary button` needed for exactly this reason. border:0 alone leaves the
   base button's background:var(--ink), so the control is borderless only
   because the note it sits in happens to be on the ink ground: the fill matches
   by a coincidence of the palette rather than by anything this rule says.
   Declared, fill-equals-ground is a property of the control, and it stays
   borderless against whatever ground it is put on.

   padding:0 rather than the base 0 7px, because a borderless control puts its
   own word on the shared edge where a bordered one puts its border — the same
   trade `.secondary a` makes. min-width and min-height stay the base 44px: the
   box is what goes, never the target.
   --------------------------------------------------------------------------- */

.note > form.redeem { justify-content:flex-start; }
.redeem button { padding:0; border:0; background:transparent; }

/* ---------------------------------------------------------------------------
   The one decision control. feed_selection.css:33-38 for the faces. The hover
   preview has no tracked source and is this system's own; the rules below say
   what it does and why.
   --------------------------------------------------------------------------- */

.choice { position:relative; }
.choice.include { border-color:var(--in); color:var(--in); }
.choice.exclude { border-color:var(--out); color:var(--out); }
.choice.include[aria-pressed="true"] { background:var(--in); color:var(--ink); }
.choice.exclude[aria-pressed="true"] { background:var(--out); color:var(--ink); }
/* feed_selection.css:37-38 draws this ring with box-shadow:inset, and
   docs/PLAN.md §4 bans shadows without qualification. The ring is load-bearing
   — it is what makes a filled face read as a committed press rather than a
   hover — so it is kept and drawn instead by the same device the row separator
   uses: a positioned pseudo-element that cannot change a box. It also survives
   alongside :focus-visible, which an outline-drawn ring would not. */
.choice[aria-pressed="true"]::before { content:""; position:absolute; inset:1px;
  border:2px solid var(--ink); }
/* One button, two faces (docs/PLAN.md §4). At rest the face states what is
   true; on hover it names what the press will do, taking the target state's
   outline and never its fill, so a preview can never be misread as a committed
   state. The ring goes with the fill. */
.choice.exclude:hover { border-color:var(--in); background:var(--ink);
  color:var(--in); }
.choice.exclude:hover .word { display:none; }
.choice.exclude:hover::after { content:"IN"; }
.choice.include:hover { border-color:var(--out); background:var(--ink);
  color:var(--out); }
.choice.include:hover .word { display:none; }
.choice.include:hover::after { content:"OUT"; }
.choice:hover::before { content:none; }

/* ---------------------------------------------------------------------------
   The foot. A bordered box of two rows, with no tracked source, and
   the gold Feed's own open foot for the one the Feed carries under its
   list — one quiet link, so no border and 10px in place of the border's 1px.
   Both land on the same edge.
   --------------------------------------------------------------------------- */

.foot { border:1px solid var(--line); border-width:0 0 1px; }
.foot-state { display:flex; min-height:44px; justify-content:space-between;
  align-items:center; }
/* One band height, and the foot's rows are bands. 46 and 47 are what this
   system carried until the walk; they are
   2px more than the 44px target floor every control in these rows already
   guarantees, and 2px is exactly the kind of figure that has no answer when
   Ryan asks why one band is taller than another. 44 + 1 is what the masthead,
   the page heading and the summary are, so it is what these are.
   45 and not 44 on the rows below the first: border-box counts the separator
   inside the row, so 45 is what measures a 44px band with a 1px rule on top of
   it. A row that opens the box has no rule above it and no 1px to carry.
   The sign-out row is the same row and takes the same rule, which is the whole
   of "it reads as part of the foot": without it the walk and the sign-out ran
   together with 0.000px between them and 0px of rule, on every owner page at
   every width — the one pair in the stack where the line was missing rather
   than doubled. */
.walk,
.foot-out { display:flex; min-height:45px; flex-wrap:wrap; align-content:center;
  border-top:1px solid var(--line); }
.foot > .walk:first-child,
.foot > .foot-out:first-child { min-height:44px; border-top:0; }
.foot a,
.foot .here,
.foot button,
.foot-state span { display:inline-flex; min-width:44px; min-height:44px;
  align-items:center; padding:8px 9px; font-size:.75rem; font-weight:700;
  text-decoration:none; }
/* Where you are, in its own place in the sequence: the muted of the metadata
   line, no link colour, no hover, no pointer, so it reads as a position and
   never as a control that has stopped working. */
.foot .here,
.foot-state span { color:var(--muted); cursor:default; }
/* docs/PLAN.md §3.2 makes Publish borderless inside the state row. */
.foot-state button { border:0; color:var(--cream); }
/* And the same shape one row down, for the control that used to sit in the
   masthead: borderless inside its row, and docs/PLAN.md §4's var(--muted), so
   signing out stays quieter than the walk it sits under. Everything else it
   needs — the 44px box, the 9px edge, the size and the weight — is the foot's
   own rule above, which is what makes it a row of the foot rather than a
   masthead control that has been moved. The hover is restated because a
   rest colour set on a class out-ranks the base button's hover. */
.foot-out button { border:0; color:var(--muted); }
.foot-out button:hover,
.foot-out button:focus-visible { color:var(--focus); }
/* The forward step holds the right edge whether or not a step back exists, so
   the oldest edition can drop its Previous anchor without Next sliding left. */
.walk .newer { margin-left:auto; }
/* The open foot: no rule of its own, so the page's closing line below is the
   only one under it. Quiet is its position — under the list, outside every
   box — and not its colour: the Feed's unsubscribe link was the lowest-contrast
   text on the page, so a subscriber who wants out could find it only by already
   believing it was there. It keeps the walk's own step treatment, which is what
   a control looks like here, and it no longer restates the foot's own 9px
   padding: it took 10px to stand in for a left border the foot used to draw,
   and no box draws one now. */
.foot.open { border:0; }

/* Constant foot height needs one line of dates at every width, so the walk draws
   only the band of dates that fits and drops the rest. That rule has no tracked
   source either. The
   breakpoints are the measured content of each band, not a convention:
   ← Earlier is 82.81px, Later → is 68.41px, and the widest date string is 90px,
   so three dates need 421.22px, five need 601.22px and seven need 781.22px.
   Round up with 2px of slack for subpixel rounding, and that is the whole sum
   now: the foot has no side borders to add and the shell has no inset, so each
   band's threshold is its own content and the window. One step each way is
   drawn at every width, so a narrowed window still says more editions exist. */
.walk .b3,
.walk .b5,
.walk .b7 { display:none; }
@media (min-width:424px) { .walk .b3 { display:inline-flex; } }
@media (min-width:604px) { .walk .b5 { display:inline-flex; } }
@media (min-width:784px) { .walk .b7 { display:inline-flex; } }
/* A step is banded by the same device as the dates, but it does not nest the way
   they do. A b1 date is still on screen inside b3, so bands accumulate; a step's
   target is one past its own band's edge, so it is wrong the moment the next
   band widens the window. Each band's step is therefore hidden again as its
   successor appears, leaving exactly one of each at every width, pointing at the
   date just past the ones actually drawn. */
@media (min-width:424px) {
  .walk .step.b1 { display:none; }
  .walk .step.b3 { display:inline-flex; } }
@media (min-width:604px) {
  .walk .step.b3 { display:none; }
  .walk .step.b5 { display:inline-flex; } }
@media (min-width:784px) {
  .walk .step.b5 { display:none; }
  .walk .step.b7 { display:inline-flex; } }

/* ---------------------------------------------------------------------------
   The seams. What is between one box and the next.

   Nothing, and there is no rule here that says so. `?seams=` asked whether the
   boxes are held 8px apart or meet on one line, and `lines` is the walked
   answer — but once every box draws its rule at the foot and nowhere else, the
   stack assembles itself: the box above ends on its own hairline, the box below
   begins with no edge of its own, and the pair meets on exactly one line
   because there was only ever one line to meet on. The three rules that used to
   state this — `.shell > * + *`, its `:not(.v-seams-gap)` scope and the
   variant's two properties — are deleted rather than kept as a second statement
   of what `border-width:0 0 1px` already says. Measured on every adjacent pair
   of every stack the product builds, on every surface and page-state, at 1400,
   900, 700, 600, 519, 375 and 320: distance 0.000px, 1px of border.

   The shared left edge is 9.00px at every one of those widths, the wordmark's
   ink 8.983px behind it, and the row keeps its 64px box, its 13.93/13.93
   centring and its 44px band.

   What is left is the one place inside a box where giving up a top edge leaves
   nothing between two things. A summary draws no bottom border, so the list
   inside a disclosure runs into the first source with neither ground nor rule —
   0.000px of distance and 0px of border, two boxes running together. Every box
   states `border:1px solid var(--line)` before narrowing it to the foot, so the
   style and the colour are already there for this width to bring back.

   A closed disclosure IS its summary, so the box under it once had the same
   hole, and `.disclose:not([open]) + *` used to fill it from below. That
   selector is deleted rather than re-pointed: the band's next sibling is the
   script tag that remembers it, `<script>` is display:none, and a rule that
   lands there draws nothing at all — the line under a shut band had already
   gone silently. It belongs on the shut band's own foot, which is where the
   rest of this stack keeps its rules, and it is stated with the component
   above.
   --------------------------------------------------------------------------- */

.disclose > * + * { border-top-width:1px; }

/* ---------------------------------------------------------------------------
   Widths. One breakpoint, from feed_selection.css:39-48, and it is no longer
   the one that took the sides off the boxes: they have no sides at any width
   now, so the max-width:700px block is gone entirely — the shell, the four box
   borders, the foot's top border, the two 10px paddings and the skip link's
   offset were all it held, and every one of them is stated once above as the
   only behaviour. What remains below 521 is not a second layout but the same
   bands in one column, which is what a masthead does when three cells will no
   longer sit on one line.
   --------------------------------------------------------------------------- */

@media (max-width:520px) {
  /* One column, so the masthead keeps source order (docs/PLAN.md §4). With two
     columns the right slot took row 1 beside the wordmark while the nav wrapped
     to row 2, which rendered a masthead against the DOM and the tab order that
     built it. One column places every cell in source order with no property
     that can disagree with the markup, and the DOM is untouched. */
  .masthead { grid-template-columns:minmax(0,1fr); }
  .masthead nav,
  .when { border-top:1px solid var(--line); }
  /* The masthead's cells are bands of their own here, so each takes the shared
     edge and the one band height. The nav reaches 45px on its own — a 44px item
     inside a box that has just gained a 1px rule — but .when is min-height:44px
     and border-box counts that rule inside it, so it would be a 43px band under
     a 44px one. 45px states the same 44 + 1 every other band is. .when needs
     nothing else here: its own 9px is the shared edge already.
     The nav is the only band that wraps, and `> :first-child` reaches the first
     flex item only — so a wrapped nav started row 1 on 9 and row 2 on 12, a 3px
     rag on the one edge this system is about. The 9px therefore goes on the
     nav's own box, which every row's start reads, and the items clear their own
     left padding through the custom property the band's rule already asks for.
     Their right padding is untouched, so 9px separates adjacent words here. */
  .masthead nav { padding-left:9px; --nav-left:0; }
  .when { min-height:45px; }
}
@media (forced-colors:active) {
  a,button { forced-color-adjust:auto; }
  .masthead,.pagehead,.list,.note,.foot,.field input,button,.shell::after,
  .note h2:has(+ p:not(.secondary)),
  /* Repeats the component's own :not([open]), so this matches at the same
     specificity and later in the file rather than losing to it. */
  .disclose:not([open]) { border-color:CanvasText; }
  .row::before,.walk,.foot-out,.masthead nav,.when,.group + .group-label {
    border-top-color:CanvasText; }
  button[aria-pressed="true"] { outline:2px solid CanvasText;
    outline-offset:-4px; }
}