/* ═══════════════════════════════════════════════════════════════════
   ink-skin.css — the skin layer for inkling-s
   One file, loaded on all three sites. It overrides the token set the
   pages already declare (--paper, --ink, --accent, --gold, --line …),
   so the look changes without touching page markup.

   Palette: forest + rubric.
     green  #25322F  the dark — sampled off the reversed panel of the logo sheet
     red    #A6402B  ONE job: this is live — act on it, or it is on now
     gold   #AF8E59  the mark, and structure: rules, edges, group labels
     cream  #F2EFE5  the page
   Each colour does one job.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── brand constants ── */
  --ink-green:#25322F;
  --ink-green-2:#33433E;
  --ink-cream:#F2EFE5;
  --ink-sheet:#F9F7EF;
  --ink-red:#A6402B;
  --ink-red-deep:#87301E;
  --ink-gold:#AF8E59;

  /* ── the tokens the existing pages already use ── */
  --paper:var(--ink-cream);
  --card:var(--ink-sheet);
  --ink:#1B2A24;
  --mut:#48594F;
  /* --mut2 — the SECOND quiet. The scripture panel had two tiers of grey and the
     lower one sat at 2.0:1 on cream (verse numbers, credits, translation labels).
     This is the quietest warm grey that still clears 4.5:1 on --paper: 4.93. */
  --mut2:#6B6559;
  --line:#D8D2C2;
  --accent:var(--ink-red);          /* was #A6402B — blue links are the loudest wrong note */
  --accent2:#2F5744;
  --gold:var(--ink-gold);
  /* --gold is the MARK's gold. As text on cream it is 2.4:1, which is the
     contrast problem that sent every highlight to red in the first place.
     --gold-text is the same hue taken down until it reads. Measured, not guessed:
     #8A6A22 was 4.38:1 on --paper #F2EFE5 — it read as 4.6 against the OLD
     lighter paper and lost the margin when the ground darkened. 4.76:1 now. */
  --gold-text:#846426;
  --shadow:0 1px 2px rgba(27,42,36,.04), 0 6px 20px rgba(27,42,36,.05);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  /* Tell the browser both themes exist, so native controls — select popups,
     scrollbars, date pickers, spin buttons — follow the page instead of
     staying stubbornly light on a dark ground. */
  color-scheme:light dark;
}
:root[data-theme="light"]{color-scheme:light}

/* --gold-text, in context. Gold is the MARK's colour and it is never text on
   cream — 2.67:1, measured on ten pages. So every "gold label" in the site says
   color:var(--gold-text), and the TOKEN changes value on the two grounds that
   are dark, where the same gold reads fine and the dark one would not. Written
   once here instead of as a judgement call at each of ~290 call sites — that is
   the difference between this holding and it drifting back. */
nav.sitenav,nav.sitenav *,
.inkfoot-auto,.inkfoot-auto *{--gold-text:#C9AC6B}

/* ═══════════════════════════════════════════════════════════════════
   FORM CONTROLS — the white holes.

   In dark mode every text field and select on the site was a pure white
   box. Two separate bugs stacked, and the second one is worse than ugly:

     background comes from a LITERAL (#fff, #fffdf9) written before there
     was a dark mode, so it never darkens; while `color` is inherited from
     body, which our dark tokens DO darken — to cream. Cream text on a
     white field. You could not read what you typed.

   Every control now goes through the tokens. The ground is --paper rather
   than --card so a field reads as an inset against the sheet it sits on —
   true in both themes, one step darker in dark, one step warmer in light.
   ═══════════════════════════════════════════════════════════════════ */
input[type="text"],input[type="search"],input[type="email"],input[type="url"],
input[type="number"],input[type="password"],input:not([type]),
select,textarea,.srch,.sitesearch{
  background:var(--paper) !important;background-image:none !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  font-family:var(--serif) !important;
  -webkit-text-fill-color:var(--ink) !important}
input::placeholder,textarea::placeholder{color:var(--mut) !important;opacity:1 !important;
  font-style:italic}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent) !important;outline:none}
option{background:var(--card);color:var(--ink)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111A16; --card:#18231E; --ink:#EBE8DB; --mut:#AEBCB5; --line:#293831; --mut2:#8D9A93;
    /* was #D4674C — MORE saturated than the light red, not less. On a near-black
       ground a warm at that lightness vibrates and the eye can't settle on it.
       A dark variant should give up saturation, not gain it. */
    --accent:#BE6049; --accent2:#6E9377; --gold:#C0A05C; --gold-text:#C9AC6B;
    --shadow:0 1px 2px rgba(0,0,0,.24), 0 6px 20px rgba(0,0,0,.20);
  }
}

/* ── type ─────────────────────────────────────────────────────────
   Body text goes to the serif. The existing pages set var(--sans) on
   body and reach for var(--serif) on headings; we swap the roles,
   because this is a publication, not an interface.                  */
body{font-family:var(--serif);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;letter-spacing:0}

/* Small caps with wide tracking read as "too playful" — retire them site-wide.
   The list is long because the tracking is written per-component rather than
   from a token; these are every class that carries it. */
.lbl,.kicker,.eyebrow,.sechead h2,.navsec,.t-ref,.rp-mt,.wl-lbl,
.brand,.railhead,.rt,.fb-k,.tabbtn,.tagslbl,.qnote-tag,.saves-h,
.sortrow label,.card.editing label,.keepstatus,#count,#gcount,
.pinbook .pin-lbl,.mast-kicker,.memcta{
  text-transform:none !important;letter-spacing:0 !important}
.brand,.railhead,.tabbtn,.saves-h,.sortrow label{
  font-family:var(--serif) !important;font-weight:400 !important;font-size:15px !important}

/* ── chrome: the brand dark ──────────────────────────────────────
   Everything that FRAMES the reading is green; everything you read
   is paper.                                                        */
.topbar,.sitenav{background:var(--ink-green) !important;
  border-bottom:1px solid color-mix(in srgb,var(--ink-gold) 30%,transparent) !important}
.topbar .brandlink,.sitenav .brandlink{color:#F0EDE1 !important}
.topbar .navlinks a,.sitenav .navlinks a,
.topbar .navddbtn,.sitenav .navddbtn{color:#A9BBB1 !important}
.topbar .navlinks a:hover,.sitenav .navlinks a:hover,
.topbar .navddbtn:hover,.sitenav .navddbtn:hover{color:#F0EDE1 !important}
.topbar .navlinks a.active,.sitenav .navlinks a.active,
.topbar .navddbtn.active,.sitenav .navddbtn.active{
  color:#F0EDE1 !important;border-bottom-color:var(--ink-gold) !important}
/* the dropdown itself stays paper — it is a list you read */
.navmenu{background:var(--card) !important;border-color:var(--line) !important}

.inkfoot-auto,footer.inkfoot-auto{background:var(--ink-green) !important;
  color:#A9BBB1 !important;
  border-top:1px solid color-mix(in srgb,var(--ink-gold) 24%,transparent) !important}
.inkfoot-auto a{color:#A9BBB1 !important}
.inkfoot-auto a:hover{color:var(--ink-gold) !important}

/* THE FOOTER — the tagline leads.

   It was four centred lines of four different weights with nothing holding
   them, and "Built with Claude AI" dangling underneath, which gave the credit
   line the last word on all 42 pages. Now the tagline opens at display size
   and carries the wordmark inside it — the sentence IS the signature, and the
   period after "inkling-s" does double duty as the wordmark's own and the
   sentence's full stop. Then the verse, then one row: the two things you can
   do here, with the credit as the quietest item on the page.

   Left-aligned on purpose. A centred stack of five different line lengths
   gives the eye nothing to follow, which is what made the old one read soft. */
/* WHY IT WAS INSET — and it was never a choice.
   ink-keeper sets .inkfoot-auto{max-width:1000px;margin:52px auto 42px}. That was
   written for a footer with NO background, where max-width did one job: hold the
   line length. The moment the footer got a dark ground, the same rule turned the
   ground into a floating 1000px card with cream showing on all four sides.

   The ground should bleed to the edges; only the CONTENT should be measured. With
   no inner wrapper in the markup to constrain, the centring moves into the padding:
   each side gets whatever is left over past 1000px, never less than the gutter. */
.inkfoot-auto{
  max-width:none !important;
  margin:52px 0 0 !important;
  padding-inline:max(24px,calc((100% - 1000px) / 2)) !important;
  border-top:1px solid color-mix(in srgb,var(--ink-gold) 24%,transparent) !important;
  text-align:left !important;padding-bottom:34px !important}

/* THE FOOTER LOCKUP, 2026-09-14 — "Follow the inkling-s. / Find the Majesty."

   Two changes, both about what the eye groups together.

   1. THE MARKS GO RED. The hyphen and the period were gold — the same colour as
      "Follow the" — so the eye grouped them with the lead-in italic instead of
      with the name they are part of. They are the two smallest marks in the
      lockup and the only two that can take the loudest colour on the site
      without fighting anything. The period especially: it is what makes
      "inkling-s." read as a name rather than a plural.

   2. THE LEAD-IN GOES QUIET. Once the marks are red, gold on "Follow the" is a
      second bright colour introducing a name it then competes with. Muted, the
      lockup has exactly one bright thing in it and it is the name.

   THE RED IS LIFTED, and this is not a palette drift. Measured on the footer's
   own green (#25322F):

       #A6402B  the palette red     2.15:1   unreadable
       #BE6049  the dark-mode red   3.15:1   passes only above 24px
       #D9806D  this               4.61:1   passes at every size

   The tagline is clamp(21px, 2.6vw, 27px), so on a narrow window it renders at
   21px — small text, 4.5:1. A mark you cannot see is not a quiet mark, it is a
   missing one, and the name then reads "inklings". Same relationship as
   --gold-text on cream, in the other direction: the ground decides. */
.inkfoot-auto .ink-ftag{
  font-family:var(--serif) !important;font-style:italic;
  font-size:clamp(21px,2.6vw,27px);line-height:1.2;letter-spacing:-.014em;
  color:#A9BBB1 !important;margin:0 0 20px}
.inkfoot-auto .ink-ftag .ink-fwm{
  font-style:normal;color:#F0EDE1 !important;letter-spacing:-.02em;
  text-decoration:none;border-bottom:0}
.inkfoot-auto .ink-ftag .ink-fwm:hover{color:var(--ink-gold) !important}
.inkfoot-auto .ink-ftag .ink-fwm i{color:#D9806D !important;font-style:normal}
/* on hover the whole name goes gold — the marks come with it, or the lockup
   half-changes colour and looks broken mid-transition */
.inkfoot-auto .ink-ftag .ink-fwm:hover i{color:var(--ink-gold) !important}

.inkfoot-auto .ink-fverse{
  font-family:var(--serif) !important;font-size:17px !important;color:#A9BBB1 !important;
  max-width:60ch;margin:0 !important;padding-bottom:18px;
  border-bottom:1px solid color-mix(in srgb,var(--ink-gold) 16%,transparent)}
.inkfoot-auto .ink-fverse a{color:#F0EDE1 !important;border-bottom-color:transparent !important}
.inkfoot-auto .ink-fverse a:hover{color:var(--ink-gold) !important}

.inkfoot-auto .ink-frow{
  display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;margin-top:15px}
.inkfoot-auto .ink-flinks{
  font-family:var(--serif) !important;font-size:15.5px !important;
  letter-spacing:0 !important;gap:22px !important;justify-content:flex-start !important}
.inkfoot-auto .ink-flinks a:first-child{color:#A9BBB1 !important}
.inkfoot-auto .ink-fbuilt{
  margin:0 0 0 auto !important;font-family:var(--serif) !important;
  font-size:14px !important;font-style:italic;opacity:1 !important;
  /* was #7F9187 — 4.00:1 on the footer green, under the 4.5 it needs at 14px. */
  color:#93A49B !important}

/* ═══════════════════════════════════════════════════════════════════
   THE HEADER — one masthead on all three sites.

   Five things were wrong and all five are reachable from here, so this
   block touches no page markup and no ink-keeper.js. It is one screen of
   CSS; deleting it restores the old header exactly.

   1. THE MARK. The lion is a base64 PNG inlined in each page's HTML on
      Quotes and a /logo.png on the other two — three different sources
      for one image, so swapping the file would only fix a third of it.
      `content:url()` repaints the <img> from the stylesheet instead. The
      element, its box and its click hotspot all survive, so the Lion of
      Judah easter egg still works — it is now a hidden thing behind the
      crown rather than the crown itself.
   2. THE WORDMARK. Pages carry the literal text `inkling·s` — an
      interpunct, not the dash, and no closing period. CSS can't edit a
      text node, so the link's font-size goes to 0 (which does not touch
      the mark, whose height is set explicitly) and ::after sets the name.
   3. THE NAV LABELS. 11.5px Helvetica, uppercase, .15em tracked. Tracked
      caps are on the rejected list; they go to the serif at reading size.
   4. THE DROPDOWN RAMP. Each menu item's colour is a step of the retired
      gold→purple→blue ramp, written INLINE per item by ink-keeper's _mk.
      An !important declaration in a stylesheet outranks a non-important
      inline style, which is the only reason this is reachable without
      touching the JS.
   5. THE ICONS. Three SVGs carrying three different gradients. They are
      currentColor'd to gold so they read as one set.
   ═══════════════════════════════════════════════════════════════════ */

/* 1 — the mark.
   Selectors carry the element qualifier (img.brandlion, a.brandlink) because
   ink-keeper injects its stylesheet at runtime: its rules land AFTER this file
   in document order, so a bare .brandlion tie goes to it even with !important.
   Its own height overrides are 50px desktop / 30px ≤560 / 30px ≤430. */
img.brandlion{
  content:url("https://inkling-s.com/ink-mark.png") !important;
  height:40px !important;width:auto !important;
  animation:none !important;filter:none !important}
.inklion-hot:hover img.brandlion{filter:brightness(1.12) !important}

/* ── THE PHONE HEADER ─────────────────────────────────────────────
   At 375px the nav needed 464px and .sitenav-inner is overflow:hidden,
   so 89px was clipped — and the ☰ burger sat at x=430, entirely off the
   screen. That button is the ONLY thing that opens .navpanel, and the
   Quotes search field lives inside it, so a clipped burger meant no
   search on a phone at all. One bug, two symptoms.

   The budget at 375px: 345px usable after padding, against a 198px brand
   and 184px of nav links. Shrinking the type barely helps — the width is
   the MARK, not the letters. So the mark goes below 430px and the
   wordmark carries the brand alone, which it can: it is the brand now. */
@media (max-width:560px){
  img.brandlion{height:26px !important}
  a.brandlink::after{font-size:22px}
}
@media (max-width:430px){
  .inklion-hot,img.brandlion{display:none !important}
  a.brandlink{gap:0 !important}
  a.brandlink::after{font-size:21px}
  /* the last 10px: the icon cluster's own gaps, measured at 375px */
  .navlinks{gap:12px !important}
  .navright{gap:11px !important}
}

/* 2 — the wordmark.
   Selector is `a.brandlink`, not `.brandlink`, on purpose: ink-keeper injects
   its <style> at runtime, so its `.brandlink{font-size:30px!important}` comes
   AFTER this file in document order and wins a tie on equal specificity. The
   element qualifier breaks the tie without an arms race. */
a.brandlink{font-size:0 !important;gap:14px !important}
a.brandlink::after{
  content:"inkling-s.";
  font-family:var(--serif);font-size:30px;font-weight:400;
  letter-spacing:-.022em;line-height:1;color:#F0EDE1}
.brandlink:hover{background:none !important;-webkit-text-fill-color:currentColor !important}
.brandlink:hover::after{color:var(--ink-gold)}
/* THE LINE UNDER THE MARK (#inkBrandTagline — "Every Word" on this page).
   It was sitting in the crown's lower wings. Two causes, both mine:

   1. The mark is 40px tall but .brandlink's line box was only 30px, so the
      crown overhung its own box by 5px top and bottom and reached the line
      below. The link now has a real height and centres its contents.
   2. ink-keeper measures where the WORDMARK starts and indents this line to
      match, by walking .brandlink's child nodes for the first one with width.
      Our wordmark is a ::after pseudo-element — it has no node to find — so
      the measurement returned 0 and the line snapped back under the crown.
      The indent is set here instead: mark width plus the gap. Below 430px
      the mark is hidden, so the indent goes with it. */
/* REVERTED. I moved this line up beside the wordmark — "inkling-s. · Curated
   Quotes" — on the theory that a second row anchored to a calculated indent
   reads as floating. On screen it was plainly worse: a 16px italic hung off
   the baseline of a 30px serif, with a separator dot too small to do any
   separating, and the page name competing horizontally with the brand rather
   than sitting under it.

   The stacked arrangement was right. It goes back exactly as it was: under
   the wordmark, indented to the "i", 44px of line box so the mark cannot
   overhang into it. The 83px is the mark's width plus the gap; it is a fixed
   number and that is a real fragility, but it is measured exact at every size
   the mark actually renders, and a worse arrangement is not the fix for it. */
a.brandlink{min-height:44px !important;align-items:center !important}
#inkBrandWrap{
  flex-direction:column !important;align-items:flex-start !important;gap:2px !important}

/* THE TAGLINE, 2026-09-14 — centred on the lockup, and the number is gone.

   Three tries at this, and the first two were both the same mistake: I kept
   proving the left edge was exact instead of listening to what "it hangs out
   there" meant. It WAS exact — measured to 0.15px. It still looked wrong,
   because a 16px italic aligned to the left edge of a 208px lockup is 96px of
   nothing to its right, and the eye reads that emptiness, not the alignment.

   Centred on the whole lockup — crown, gap and wordmark together — there is no
   edge to be off, nothing hangs, and crucially there is NO MAGIC NUMBER: the
   tagline is width:100% of a wrap that is exactly as wide as the link, and
   text-align does the rest. The 83px, the 82.87px, the two media-query widths
   and the phantom bearing padding are all deleted. Nothing to drift.

   .brandlink gets width:max-content so the wrap cannot stretch wider than the
   lockup itself; without it the flex column takes the parent's width and
   "centred" would mean centred on the header, which is a different thing. */
a.brandlink{min-height:44px !important;align-items:center !important;
  width:max-content !important}
#inkBrandWrap{
  flex-direction:column !important;align-items:flex-start !important;
  gap:2px !important;width:max-content !important}
#inkBrandTagline{
  margin-left:0 !important;width:100% !important;text-align:center !important}
#inkBrandTagline::before{content:"" !important;margin:0 !important}

/* THE UNSTYLED LINK, 2026-09-14. A scan of reading.html turned up rgb(0,0,238)
   on 14 footer links — not a palette colour that got missed, but the BROWSER'S
   OWN default, showing through because nothing had ever set a colour there.
   Every page has some corner like this, and naming them one at a time means
   finding them one at a time.

   :where() has zero specificity, so this loses to every authored rule on the
   site no matter where it sits in the cascade — it can only ever beat the user
   agent's default. That makes it safe to apply to every link everywhere: it
   repaints exactly the links nobody styled, and touches nothing that was. */
:where(a:link),:where(a:visited){color:var(--accent)}

/* THE HEADER WRAPS WHEN THE SCRIPTURE PANEL IS OPEN, 2026-09-14.

   Measured, panel closed, 1200px window: brand block, the icon pair, the links
   and the Today/All-Time pills all share a centre line at y=45.8. One row, and
   every centre identical — the header is fine.

   Measured with the Scripture panel open: the window is still 1148px, but the
   header only gets 770 of it. The nav needs 292 + 582 + 24 = 898px to stay on
   one line, so .navright wraps to a second row, and the two rows then straddle
   the brand block — nav row 1 centred at 27, brand at 50.7, nav row 2 at 73.7.
   Nothing lines up with anything. That is the ragged header.

   ink-keeper collapses the nav into its burger at @media(max-width:900px), and
   that rule is measuring THE WINDOW. The window is 1148px. The thing that ran
   out of room is the header, and the header is 770px. A media query cannot see
   that — which is exactly what container queries are for.

   So the same collapse is repeated here against the header's OWN width. The
   viewport rule still fires on a genuinely small screen; this one fires when
   anything (this panel, a wider one later, a sidebar) takes the room away.
   Whichever runs first wins, and they agree, because the threshold is the
   same 900px in both. */
/* HEADER HEIGHT, 2026-09-14 — measured, because "tall enough" has a number.

   The lockup is 63.6px tall (40px crown, 30px wordmark, 16px tagline, stacked).
   ink-keeper gave .sitenav-inner 14px of vertical padding, making the bar 92.6px
   — so the lockup occupied 69% of its own bar, with 16px of air above and 15
   below. A masthead wants its content at roughly 55-65% of the bar; past that
   the mark stops sitting IN a bar and starts being clamped BY one, which is
   what reads as cramped.

       padding   bar      lockup fills
       14px      92.6     69%   ← was this
       18px     100.6     63%
       20px     104.6     61%
       22px     108.6     59%   ← this
       24px     112.6     56%
       26px     116.6     55%

   22px sits in the middle of the target band and gives 24px of air above the
   crown and below the tagline. Below 560px the crown shrinks to 26px and below
   430px it goes entirely, so the lockup is much shorter and the same 22px would
   be a lot of empty bar on a phone — it steps back down there.

   This is the template the other two sites inherit, so the number is written
   down rather than nudged. */
.sitenav-inner{padding-top:22px !important;padding-bottom:22px !important}
@media (max-width:560px){
  .sitenav-inner{padding-top:16px !important;padding-bottom:16px !important} }
@media (max-width:430px){
  .sitenav-inner{padding-top:13px !important;padding-bottom:13px !important} }

nav.sitenav{container-type:inline-size}
@container (max-width:900px){
  .navlinks{margin-left:auto !important;position:relative !important;flex:0 1 auto !important;
    flex-wrap:nowrap !important}
  .navburger{display:inline-flex !important}
  .navpanel{display:none !important;position:absolute;top:calc(100% + 10px);right:0;
    min-width:238px;max-height:calc(100vh - 84px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow);padding:8px 6px;z-index:40;
    flex-direction:column;align-items:stretch;gap:2px}
  .navlinks.open .navpanel{display:flex !important}
  .navtop{padding:10px 14px}
  .navtop.active{border-bottom:0;background:var(--chip,#F9F7EF);border-radius:8px}
}

/* The line was bold condensed sans in cream — a face that appears nowhere else
   in the lockup, at a weight heavier than anything beside it. That is what made
   the alignment look wrong; the alignment itself is exact (the tagline's left
   edge and the wordmark's both sit at the same pixel — measured, not assumed).
   Serif, regular, italic, muted — same family as the wordmark, so the two settle
   into one lockup, and (see the measurement above) the same family means the
   same left side bearing, so metric alignment IS optical alignment here. An
   earlier version of this rule carried a padding-left to "fix" a bearing
   difference of 0.151px; it moved the line a pixel off instead. */
#inkBrandTagline{
  background:none !important;background-image:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:#A9BBB1 !important;letter-spacing:0 !important;text-transform:none !important;
  font-family:var(--serif) !important;font-weight:400 !important;font-style:italic !important;
  font-size:16px !important;padding-left:0 !important}

/* 3 — the nav labels */
.navtop,.navddbtn,.navburger{
  font-family:var(--serif) !important;font-size:16px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;color:#A9BBB1 !important}
.navtop:hover,.navddbtn:hover,.navburger:hover,
.navtop.active,.navddbtn.active,.navdd.open .navddbtn{color:#F0EDE1 !important}
.navtop.active,.navddbtn.active,.navdd.open .navddbtn{border-bottom-color:var(--ink-gold) !important}
.navtop.inkfresh{animation:none !important;color:var(--ink-gold) !important}

/* 4 — the dropdown */
.navmenu a .nl,.navmenu a{
  background:none !important;background-image:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--ink) !important;font-family:var(--serif) !important;font-size:16px !important}
.navmenu a:hover,.navmenu a:hover .nl,.navmenu a.active,.navmenu a.active .nl{
  color:var(--accent) !important}
.navmenu a[data-desc]::after{color:var(--mut) !important;font-family:var(--serif) !important}
.navmenu .navsec{
  font-family:var(--serif) !important;font-size:13px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--mut) !important;font-style:italic}

/* 5 — the icons and the pill */
.navread svg *{fill:var(--ink-gold) !important;stroke:var(--ink-gold) !important}
.navread svg{filter:none !important}
.navread:hover svg,.navread.on svg{filter:none !important;opacity:1}
.navread svg,.navread:not(.on) svg{opacity:.82}
.inkc.inkcrown{color:var(--ink-gold) !important;border-color:color-mix(in srgb,var(--ink-gold) 46%,transparent) !important}
.inkc.inkcrown:hover{background:var(--ink-gold) !important;color:var(--ink-green) !important}
.inkta{border-color:color-mix(in srgb,var(--ink-gold) 34%,transparent) !important}
.inkta a{font-family:var(--serif) !important;font-size:14px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;color:#A9BBB1 !important}
.inkta a:hover{color:#F0EDE1 !important}
.inkta a.on{
  /* the mark's gold under the green text is 4.34:1 — under the 4.5 it needs at
     14px. The lift gold takes it to 6.09, and an "on" state reading a shade
     brighter than the mark is the right direction anyway. */
  background:#C9AC6B !important;color:var(--ink-green) !important}
.inkta a.on .inkta-cr{color:var(--ink-green) !important}
.inkta-cr{color:var(--ink-gold) !important}
.inkta a+a{border-left-color:color-mix(in srgb,var(--ink-gold) 34%,transparent) !important}

/* the kicker under the masthead title, and the title's own gradient */
.mast-kicker{color:var(--gold-text,#846426) !important;letter-spacing:0 !important;text-transform:none !important}
.mast-title,.a-title,.c-title,.dev-title,.page-title{
  background:none !important;background-image:none !important;
  -webkit-text-fill-color:currentColor !important;color:var(--ink) !important}

/* ═══════════════════════════════════════════════════════════════════
   THE RED BUDGET  (treatment B)

   Red used to be defined as "every highlight", which put it on 44
   declarations and eleven different jobs — rules, edges, links,
   attributions, tags, status bars, delete, section heads. A colour
   doing eleven jobs stops being an accent and becomes the page's
   texture, and a warm red as texture reads as alarm.

   Red now means exactly one thing:
       THIS IS LIVE — you can act on it, or it is on right now.
   So: links you click, hover states, the active tab, the saved mark,
   focus. That is the whole list.

   STRUCTURE is gold: section rules, the sidebar edge, group labels.
   INFORMATION is muted ink: attributions, tags, counts, the keeper
   row — each picking up red only on hover, when it becomes live.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the head rule ───────────────────────────────────────────────
   One gesture wherever a section is named. It was red → gold →
   nothing; a section head is structure, not an action, so the red
   comes out and the gold runs the whole way.                      */
.sechead,.side-h,.sp-h,.rp-head,.group > h3,.lane > h3{
  border-bottom:2px solid !important;
  border-image:linear-gradient(90deg,var(--gold) 0%,var(--gold) 34%,transparent 100%) 1 !important}

/* ── links and highlights ────────────────────────────────────── */
a{color:inherit}
.readmore,.walklink .walkarrow,.t-title a:hover,.teaser:hover .t-title{color:var(--accent)}
.donebtn.done,.markon{border-color:var(--accent) !important;color:var(--accent) !important}

/* ── retire the cosmic surfaces ──────────────────────────────────
   Any aurora/nebula gradient still living in a page becomes the
   brand dark. Light on an object, never light as the ground.      */
.hero,.herowrap,.navgrad,.gradband{background-image:none !important}
.hero,.herowrap{background:var(--ink-green) !important;color:#F0EDE1 !important}

/* ── soften the boxes ────────────────────────────────────────────
   Border + fill + radius + shadow on every block flattens the
   hierarchy. Keep the fill, drop the outline.                     */
.card,.sec,.teaser{border-radius:0 !important;box-shadow:none !important}

/* ═══════════════════════════════════════════════════════════════════
   THE SIDEBAR — treatment A, the standard for every page on all sites.

   The old blue→purple→gold wash is retired. In its place the sidebar is
   flat paper with the house rule stood on its end: a 2px edge running
   red → gold → nothing down its inner side. Same gesture as every
   section head. Light along an edge, never light as the ground.

   This also ends the drift your notes describe: reader pages stretched
   the gradient over a tall page while Quotes pinned it to one viewport,
   so the colour "moved up too soon". An EDGE has no colour story to
   complete, so sticky-vs-stretch stops mattering and the 259 rules no
   longer need to agree about height.

   Done as a border-image rather than a ::after, deliberately — several
   .side rules are already position:sticky, and adding position:relative
   to hang a pseudo-element on would break them.
   ═══════════════════════════════════════════════════════════════════ */
.side,.lib-side,.railL{
  background:var(--card) !important;
  background-image:none !important;
  border-style:solid !important;
  border-width:0 2px 0 0 !important;
  border-image:linear-gradient(180deg,var(--gold) 0%,var(--gold) 40%,transparent 100%) 1 !important;
}
/* the inner scroller must not repaint the ground over it */
.sideinner{background:transparent !important}

/* On the right-hand side of a layout the edge belongs on the left. */
.side-right,.rail-right{
  border-width:0 0 0 2px !important;
  border-image:linear-gradient(180deg,var(--gold) 0%,var(--gold) 40%,transparent 100%) 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   QUOTES — site-specific overrides.
   The page paints with the retired gold→purple→blue ramp as literals
   rather than tokens, so tokens alone can't reach it. 53 rules in
   index.html; they collapse into the dozen patterns below.
   ═══════════════════════════════════════════════════════════════════ */


/* the masthead title */
.mast-title{color:var(--ink) !important}
.mast-kicker{color:var(--gold-text,#846426) !important}

/* every purple/blue text colour → the highlight */
#chips .chip.on,.chip.on,.btn.on,.keepstatus.on,.toolrow .btn:hover,.toolrow .btn.on,
.rt:hover,.rt.on,.fb-all:hover,.cardacts .save,.cardacts .save.on,.cardacts button:hover,
.cardtools button:hover,.kacts button:hover,.qotd .qmore,.memcta,.tagslbl:hover,
.qlink:hover,.qcopy:hover,.qmem:hover,.qshare:hover,.addtoggle .att.on,.pin-hide,
.pinbook .pin-lbl,.pinbook .pin-cycle,.pinbook .pin-reclink,.pinbook .pin-mean-btn,
.pinbook .pin-cover .cap,.pinbook a.pin-btn,.tab-add,.esave,.membig,.nsave,
.delrow button,.gform .submit,.edit:hover,.totop:hover{
  color:var(--accent) !important}
.memcta:hover,.suggestbox .sugrow .btn:hover,.gform .submit:hover,
.pinbook .pin-reclink:hover{color:var(--accent2) !important}

/* the inset bars that marked the active tool */
.toolrow .btn.on{box-shadow:inset 3px 0 0 var(--accent) !important}
.toolrow .btn.inkfav.on{box-shadow:inset 0 -3px 0 var(--accent) !important}
.rt.on{box-shadow:inset 3px 0 0 var(--accent) !important}

/* lavender→sand gradients on controls → flat paper */
.fb-chip,.tab-add,.totop:hover,.edit:hover,.esave,.membig,.nsave,
.delrow button,.gform .submit{
  background:var(--card) !important;border:1px solid var(--line) !important}
.fb-chip:hover,.suggestbox .sugrow .btn:hover,.gform .submit:hover{
  background:var(--paper) !important;border-color:var(--accent) !important}
.keepbar button.on,.btn.on,.keepstatus.on{border-color:var(--accent) !important}

/* The "see all as a graph" link.
   This was a gradient clipped to the letters. Overriding `background` with the
   shorthand silently reset `background-clip` to border-box, so the ramp stopped
   being letters and painted as a full-width slab under the tags. Gradient text
   is the old house style anyway — one colour, one job. */
.chip-graph{
  background:none !important;background-image:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--accent) !important}
.pinbook{background:var(--gold) left/4px 100% no-repeat,var(--card) !important}
.pinbook .pin-cycle:hover,.pinbook a.pin-btn:hover{
  background:var(--accent) !important;border-color:var(--accent) !important}

/* the tags on a card — one colour, the accent on hover. The inline ramp that
   used to paint these is gone from the page; this is what replaces it. */
.tags .t,.card .tags .t{
  color:var(--mut) !important;cursor:pointer;transition:color .12s}
.tags .t:hover,.card .tags .t:hover{color:var(--accent) !important}
.tags .t.on{color:var(--accent) !important}

/* the three marks were white pills floating on a dark card */
.cardacts button,.cardacts .save,.cardacts .star,.cardacts .at-mark{
  background:transparent !important;background-image:none !important;
  border:1px solid var(--line) !important;color:var(--mut) !important;
  box-shadow:none !important}
.cardacts button:hover{border-color:var(--accent) !important;color:var(--accent) !important}
.cardacts .save.on{color:var(--accent) !important;border-color:var(--accent) !important}
.cardacts .star.on{color:var(--gold-text,#846426) !important;border-color:var(--gold) !important}
.cardacts .at-mark.on{color:var(--accent2) !important;border-color:var(--accent2) !important}

/* the cards themselves — the violet tint and the blue hover shadow */
.card{background:var(--card) !important;border-color:var(--line) !important;
  box-shadow:none !important}
.card:hover{box-shadow:var(--shadow) !important;transform:none !important}
.card.fav{border-left-color:var(--accent) !important;background:var(--card) !important}
.card.feat{border-left-color:var(--gold) !important;background:var(--card) !important}
.card.at{border-left-color:var(--accent2) !important;background:var(--card) !important}

/* the save/feature marks — one stop per mark, gold and red */
.card.fav.feat{background-image:linear-gradient(180deg,var(--accent) 0 50%,var(--gold) 50% 100%) !important}
.card.fav.at{background-image:linear-gradient(180deg,var(--accent) 0%,var(--accent2) 100%) !important}
.card.fav.feat.at{background-image:linear-gradient(180deg,var(--gold) 0%,var(--accent) 55%,var(--accent2) 100%) !important}

/* ── the way back ─────────────────────────────────────────────────
   Two dead ends, same shape. Arriving on a single quote from a shared
   link hides the whole rail, and "Show all quotes" lives inside it, so
   there was no route back to the collection at all. memorize.html never
   linked back either. One quiet link, same treatment on both. */
#qsoloback,.backlink{display:block;margin:0 0 22px;font-family:var(--serif);
  font-size:16px}
#qsoloback a,.backlink{color:var(--accent) !important;text-decoration:none;
  border-bottom:1px solid transparent}
#qsoloback a:hover,.backlink:hover{border-bottom-color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════
   THE QUOTES RAIL — three sections instead of nine blocks.

   Pairs with the rebuilt markup in index.html. The old rail stacked nine
   bordered blocks of equal weight; the eye reads that as nine equally
   important things. Now: SEARCH, SHOW, BROWSE, each with a head in the
   house grammar, and the four filters collapsed into one segmented row
   because they were always one choice.
   ═══════════════════════════════════════════════════════════════════ */
.side .sblk + .sblk{margin-top:30px}
.side .sblk-h{
  font-family:var(--serif) !important;font-weight:400;font-size:17px;
  letter-spacing:0;text-transform:none;color:var(--ink);
  margin:0 0 12px;padding-bottom:7px;
  border-bottom:2px solid;
  border-image:linear-gradient(90deg,var(--gold) 0%,var(--gold) 34%,transparent 100%) 1}

.side #q{width:100%;padding:10px 12px;border-radius:0 !important}
.side #count{margin:9px 0 0;color:var(--mut);font-size:14.5px;
  font-variant-numeric:tabular-nums;font-family:var(--serif)}
/* "1,422 quotes" and "★ 311 Featured" were two stacked blocks. One line,
   joined by the house separator. */
.side #count .cfav{display:inline !important;margin:0 !important}
.side #count .cfav::before{content:" · ";color:var(--line)}

/* one choice, one control */
/* FOUR FILTERS, 300px, AND HOW I GOT THIS WRONG TWICE.

   First try: four buttons across. "Featured" clipped mid-word and All-Time
   ran past the rail. Second try: move the glyph above the label to buy back
   its width — and I verified that at a 743px viewport, where the rail is a
   full-width stacked block and everything fits trivially. At the width the
   rail is ACTUALLY 300px, the labels were still colliding. A measurement
   taken at the wrong width is not a measurement.

   Four labels do not fit one 300px row, and "All-Time" carries a live count
   from JS, so the longest label is not even a fixed length. Two rows of two:
   each cell gets ~145px, it holds whatever the count grows to, and it is
   still one control rather than four. */
/* minmax(0,1fr), not 1fr. A bare `1fr` is `minmax(auto,1fr)`, so a column can
   never shrink below its content's min-content width — and "✦ All-Time (19)"
   is wider than "All", so the right column bullied the left one narrower.
   minmax(0,…) lets both halves be genuinely equal. */
.side .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
/* THE DIVIDERS ARE THE GAP, NOT A BORDER.
   Drawing them as borders on the cells meant the top row carried a 1px
   bottom border and the bottom row did not — and because the height is
   content-driven, that made row one exactly 1px taller than row two.
   Equal widths, unequal heights: a grid that looked subtly off and was.
   The container's background showing through a 1px gap draws the same
   lines while every cell stays identical. */
.side .seg .btn{
  min-width:0;margin:0 !important;border:0 !important;border-radius:0 !important;
  background:var(--paper) !important;color:var(--mut) !important;
  font-family:var(--serif) !important;font-size:14.5px !important;
  font-weight:400 !important;letter-spacing:0 !important;text-transform:none !important;
  padding:9px 4px !important;white-space:nowrap;box-shadow:none !important}

/* Four labels plus their glyphs did not fit 300px, so "Featured" was clipped
   mid-word and All-Time ran past the rail's edge. The glyph moves above the
   label: the button gets narrower by the width of a glyph plus its space, and
   the mark still reads. Measured, not guessed — see the note in the commit. */
.side .seg .btn{display:flex;flex-direction:row;align-items:baseline;
  justify-content:center;gap:6px;
  line-height:1.2;font-size:14px !important;padding:9px 6px !important}
.side .seg .btn .sg{font-style:normal;line-height:1}
.side .seg .btn.on .sg{opacity:1}
.side .seg .btn:hover{color:var(--ink) !important}
.side .seg .btn.on{color:var(--accent) !important}

/* occasional actions, as text */
.side .sutil{display:flex;column-gap:20px;row-gap:11px;align-items:baseline;flex-wrap:wrap;
  margin-top:16px;font-family:var(--serif);font-size:15px;color:var(--mut)}
/* MEASURED, 2026-09-14 — and the third time I looked at this row.
   Shuffle and Export were not indented. They were STRETCHED: .btn carries
   `flex:1 1 0%` so the four filter buttons can share a row up in .seg, and it
   comes along to these two, giving each a 110px box with `text-align:center`.
   The words then float in the middle of boxes you cannot see, which is why the
   row read as arbitrary spacing no matter what I did to the gaps — the gap was
   never the problem, the box was. Sized to their content, left-aligned, and
   they sit on the same left edge as everything else in the rail. */
.side .sutil .btn.lnk{
  flex:0 0 auto !important;width:auto !important;text-align:left !important;
  background:none !important;border:0 !important;padding:0 !important;margin:0 !important;
  border-radius:0 !important;box-shadow:none !important;
  font-family:var(--serif) !important;font-size:15px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;color:var(--mut) !important;
  border-bottom:1px solid var(--line) !important}
.side .sutil .btn.lnk:hover{color:var(--accent) !important;border-bottom-color:var(--accent) !important}
/* Sort was `margin-left:auto`, which pushed it to the right edge of the row —
   and when the row wrapped, onto its own line still pushed right. The rail then
   ran three consecutive lines at three different alignments: Shuffle/Export
   spread apart, Sort floating right, Themes/Authors hard left. Nothing in a
   282px column should be anywhere but the left edge.
   `flex:1 0 100%` puts Sort on its own full-width line deliberately instead of
   leaving it to whether the two links above happen to fill the row, so the
   block has the same shape at every rail width. */
.side .sutil .sortrow{display:inline-flex;align-items:baseline;gap:6px;
  margin:0 !important;flex:0 0 auto;width:auto;font-size:15px}
/* "Sort  Random" read as two words with no relationship — Steve: "not clear
   what Sort is doing there", and "why is Random a different color? Bc its
   selected?". It was neither selected nor highlighted: Random is the SELECT's
   current value, in --ink because it is content, beside a label in --mut.
   Nothing said it could be changed.
   A colon makes the label a label, and the value takes the site's own
   affordance — the gold underline it uses everywhere else for "this is
   editable". Now it reads as one phrase, and the changeable half looks it. */
.side .sutil .sortrow label::after{content:":"}
.side .sutil .sortrow select{
  border:0 !important;border-bottom:1px solid var(--gold) !important;
  border-radius:0 !important;background:none !important;background-image:none !important;
  padding:1px 0 2px !important;margin:0 !important;
  color:var(--ink) !important;font-family:var(--serif) !important;font-size:15px !important;
  cursor:pointer}
.side .sutil .sortrow select:hover{border-bottom-color:var(--accent) !important;
  color:var(--accent) !important}
/* (an earlier pass's `padding:3px 6px;font-size:14.5px` for this selector was
   here — removed; the rule above owns the control now) */

/* The device warning only when it is true — i.e. while Saved is the active
   filter. :has() lets the rail answer that without a line of JS; setKeeper()
   still owns the element's display, so keeper mode hides it as before. */
.side .favnote{
  background:none !important;border:0 !important;border-left:2px solid var(--gold) !important;
  border-radius:0 !important;padding:2px 0 2px 11px !important;margin-top:12px !important;
  font-family:var(--serif) !important;font-size:14.5px !important;font-style:italic;
  color:var(--mut) !important}
.side .favnote b{color:var(--ink) !important;font-weight:500;font-style:normal}
.side:not(:has(#favBtn.on)) .favnote{display:none}

/* THE BROWSE LIST — one row per item, name left, count right.
   Pairs with the ranked-list renderer in index.html. The cloud wrapped two-up
   whenever names were short, which is what ragged the column. */
.side .chips{display:block !important;margin:0 !important}
/* +3px a row, and the hairlines come out. At 5px the rows were cramped;
   at 8px the air alone separates them, so a rule under every name is a
   second separator doing the same job — and eight of them in a 282px
   column is a lot of line for a list of eight words. */
.side .chips .chip{
  display:flex !important;align-items:baseline;gap:10px;width:100%;
  margin:0 !important;padding:8px 0 !important;
  background:none !important;border:0 !important;border-radius:0 !important;
  border-bottom:0 !important;box-shadow:none !important;
  font-family:var(--serif) !important;font-size:15.5px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--ink) !important;text-align:left;cursor:pointer}
.side .chips .chip.on{font-weight:500 !important}
.side .chips .chip .cnm{flex:1 1 auto;min-width:0}
.side .chips .chip .cbar{flex:0 0 40px;height:3px;background:var(--line);position:relative}
.side .chips .chip .cbar i{position:absolute;inset:0 auto 0 0;display:block;
  background:var(--gold);opacity:.75}
.side .chips .chip.on .cbar i{background:var(--accent);opacity:1}
.side .chips .chip .cnt{flex:0 0 auto;color:var(--mut) !important;
  font-variant-numeric:tabular-nums;min-width:2.6em;text-align:right}

/* Themes / Authors — two tabs, not two buttons */
.side .railtoggle{display:flex;gap:18px;margin:0 0 12px;border:0 !important;background:none !important}
.side .railtoggle .rt{
  flex:0 0 auto;background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;padding:0 0 5px !important;margin:0 !important;
  font-family:var(--serif) !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--faint,#7B8981) !important}
.side .railtoggle .rt:hover{color:var(--ink) !important}
.side .railtoggle .rt.on{
  color:var(--ink) !important;border-bottom-color:var(--gold) !important;
  box-shadow:none !important}

.side .keepquiet{margin-top:30px !important;width:100%;
  font-family:var(--serif) !important;
  letter-spacing:0 !important;text-transform:none !important}

/* ── the red budget, applied to Quotes ───────────────────────────
   The block above converts the retired purple wholesale, which swept a
   lot of merely-informational text into red along with the genuinely
   live controls. These are the ones that are INFORMATION: they carry no
   action, so they sit in muted ink and turn red only on hover, at the
   moment they become something you can click. */
.pinbook .pin-lbl,.pinbook .pin-cover .cap,.qnote-tag,
.kacts button,.cardtools button,.delrow button,
.pinbook .pin-mean-btn{
  color:var(--mut) !important}
.kacts button:hover,.cardtools button:hover,.delrow button:hover,
.pinbook .pin-mean-btn:hover{color:var(--accent) !important}

/* the keeper row is machinery: quieter still, and only `delete` ever
   goes red — on hover, where the warning belongs */
.kacts button{color:var(--faint,#7B8981) !important;font-size:.92em}
.kacts .del{color:var(--faint,#7B8981) !important}
.kacts .del:hover{color:var(--accent) !important}

/* Quote of the Day — the lavender wash goes, the red rule stays */
.qotd{background:var(--card) !important}

/* Scripture Memorization — the loudest thing on the page and the last lavender
   slab. It earns emphasis, so it keeps a fill; the fill becomes the brand dark. */
/* THE MEMORIZATION CARD — inverted.
   It was the brand dark with a gold edge: the heaviest object in the rail,
   and the only solid block left once the filter boxes came out. Turned
   round — a light gold ground with a green edge — it still leads the rail
   without being a slab, and it now agrees with the meaning panel, which is
   also a gold tint with a coloured rule. The tint is built off the tokens
   so it lands correctly in both themes: mostly cream with a gold cast in
   light, mostly card with a gold cast in dark, and --ink flips with it so
   the text is legible either way.
   Square, like everything else in the rail now — a lone rounded panel was
   the last thing still shaped differently from its neighbours. */
/* NOT A BOX ANY MORE, 2026-09-14. A flat tan slab with four hard edges reads
   as a card, and a card in a rail of plain rows is a fifth kind of thing to
   learn. The tint now FADES OUT to the left across the width and is gone by
   the right edge, so there is no right edge to see — the block dissolves into
   the page instead of stopping. The green rule stays square and full-height on
   the left: that is the anchor the eye actually uses, and it is the same mark
   the status bars use on the cards.

   `background` shorthand is deliberately avoided here. Writing the gradient
   through background-image and leaving background-color transparent means the
   fade composites over the page ground rather than over an opaque slab — and
   it means a later `background:X` cannot silently wipe the size/repeat
   longhands, which has cost us four separate bugs on this site already. */
.memcta{
  background-color:transparent !important;
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--gold) 26%,transparent) 0%,
    color-mix(in srgb,var(--gold) 18%,transparent) 38%,
    transparent 92%) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:left top !important;
  color:var(--ink) !important;
  border:0 !important;border-radius:0 !important;
  border-left:3px solid var(--ink-green) !important;
  box-shadow:none !important;
  font-family:var(--serif) !important;font-weight:400 !important;font-size:17px !important;
  padding:14px 16px !important}
.memcta:hover{
  background-color:transparent !important;
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--gold) 38%,transparent) 0%,
    color-mix(in srgb,var(--gold) 26%,transparent) 38%,
    transparent 92%) !important;
  color:var(--ink) !important}
.memcta-sub,.memcta:hover .memcta-sub{color:var(--mut) !important}

/* the Manage button, and the last two literal purple ramps */
.cardtools .mngbtn,.cardtools .mngbtn:hover{
  background:none !important;background-image:none !important;
  -webkit-text-fill-color:currentColor !important;color:var(--accent) !important}
/* the masthead's own inline-styled kicker and byline caps */
.mast-sub,#count,#gcount{letter-spacing:0 !important;text-transform:none !important}
/* an attribution is information, not something you act on */
.t-ref,.qref,.mast-title+*,.scripref{color:var(--mut) !important}
.t-ref:hover,.qref:hover,.scripref:hover{color:var(--accent) !important}

/* ═══════════════════════════════════════════════════════════════════
   SCRIPTURE MEMORIZATION (memorize.html)

   The page declares its own :root with --accent:#A6402B, but it sits above
   the link to this file so our tokens win. What it does NOT route through
   tokens is ~35 literal purples, grouped below by the job each was doing.

   The pack list's coloured left bars are NOT here: they are an inline style
   from _packSty() in the page's own JS, walking blue → purple → gold across
   the list. That is the retired ramp's fourth home, and like the others it
   was colouring a LIST POSITION — which no one can read off a hue. Removed
   at the source rather than painted over.
   ═══════════════════════════════════════════════════════════════════ */

/* serif headings that were aubergine */
.namenote em,.mvg-name,.packcard h3,.syshead h2,.genttl,.gp-nm,
.bld-nm,.bld-nm-in,.setname{color:var(--ink) !important}

/* small uppercase labels → the house label: serif, no tracking, gold */
.sysgrp-h,.settopic,.setsec{
  font-family:var(--serif) !important;font-size:14px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;
  font-style:italic !important;color:var(--gold-text,#846426) !important}

/* the two segmented pickers — purple inset bar → the highlight */
.modesel button.on,.addtabs button.on{
  color:var(--accent) !important;background:var(--card) !important;
  box-shadow:inset 3px 0 0 var(--accent) !important}

/* lavender-to-sand gradients on buttons → flat paper with a real border */
.btn.primary,.btn.gold,.sr-add:hover,.card-mode-tog{
  background:var(--card) !important;background-image:none !important;
  border:1px solid var(--line) !important;color:var(--accent) !important}
.btn.primary:hover,.btn.gold:hover{
  background:var(--paper) !important;background-image:none !important;
  border-color:var(--accent) !important;color:var(--accent) !important}
.card-mode-tog:hover{background:var(--accent) !important;color:var(--card) !important;
  border-color:var(--accent) !important}

/* the "Build a pack by theme" panel — the loudest lavender slab on the page */
.genbox,.bldbox,.genwrap{
  background:var(--card) !important;background-image:none !important;
  border:0 !important;border-left:2px solid var(--gold) !important;border-radius:0 !important}
.genwait{color:var(--soft) !important}

/* the pack rows */
.setbtn.cur:hover{color:var(--accent) !important}
.setbtn.cur.on{background:var(--card) !important;color:var(--accent) !important;
  box-shadow:inset 3px 0 0 var(--accent) !important}
.setbtn.mine.on,.setbtn.custom.on,.setbtn.sys.on{
  background:var(--card) !important;color:var(--accent) !important;
  box-shadow:inset 3px 0 0 var(--accent) !important}
/* THE RAIL'S THREE REGISTERS.
   My first pass italicised the section LABELS gold — and then italicised the
   fold BUTTONS gold too, so "Systems" (a label) and "Navigators Topical Memory
   System" (a thing you can open) came out looking identical. Three different
   kinds of line need three different weights:

     label   small, italic, gold      — names a group, does nothing
     fold    serif, ink, gold caret   — a group you can open
     item    serif, ink, count right  — a set you can select               */
.setsec{font-size:13.5px !important;margin:22px 0 6px !important}
.setbtn.setgrp{
  box-shadow:none !important;background:none !important;
  font-style:normal !important;font-family:var(--serif) !important;
  font-size:16px !important;color:var(--ink) !important}
.setbtn.setgrp:hover{color:var(--accent) !important}
.setbtn.setgrp .setbtn-n{color:var(--gold-text,#846426) !important;font-style:normal;
  font-variant-numeric:tabular-nums}
/* the packs inside a fold sit in from their header */
.setbtn.sub{padding-left:16px !important}

/* ── air ──────────────────────────────────────────────────────────
   Every block in this rail was butted against the next, which is the
   "cramped" — nothing wrong with the parts, no room between them. */
.side .panel{margin-bottom:30px}
.genbox{padding:16px 18px !important;margin-bottom:8px !important}
.newpack{margin-top:16px !important}
.setbtn{padding-block:9px !important}

/* the section heads: 11px tracked sans caps in the highlight red, which is the
   loudest thing a label can be. Serif, sentence case; the gold dash stays,
   because that mark is the house's own and it is doing real work. */
.side .panel h2,.panel h2{
  font-family:var(--serif) !important;font-size:16px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--ink) !important;margin:0 0 14px !important}
.side .panel h2::before{background:var(--gold) !important;width:18px !important}

/* the mobile page title sat hard against the crown's lower wing */
.ink-mobtitle{margin-left:14px !important;align-self:center !important;
  font-family:var(--serif) !important;letter-spacing:0 !important;
  text-transform:none !important}

.newpack{border-color:var(--line) !important;color:var(--soft) !important}
.newpack:hover{border-color:var(--accent) !important;color:var(--accent) !important}

/* dashed edit affordances */
.gp-nm:focus,.bld-nm:focus,.bld-nm-in{border-bottom-color:var(--gold) !important}

/* the status pills: new / due / learning — semantic, so they keep three
   colours, but they come from the palette instead of from nowhere */
.st-new{color:var(--accent) !important;background:color-mix(in srgb,var(--accent) 9%,transparent) !important}
.st-due{color:var(--gold-text,#846426) !important;background:color-mix(in srgb,var(--gold) 16%,transparent) !important}
.st-learn{color:var(--accent2) !important;background:color-mix(in srgb,var(--accent2) 11%,transparent) !important}

/* the wordmark-style gradient title at the head of the page */
h1.title{background:none !important;background-image:none !important;
  -webkit-text-fill-color:currentColor !important;color:var(--ink) !important}

/* ═══════════════════════════════════════════════════════════════════
   THE SWEEP — Quotes, both themes, walked element by element rather
   than screenshot by screenshot. Everything the audit turned up, in
   one place, so there is a bottom to the list.

     off-palette   5  · the last blue and the last three purples
     tracked caps  4  · nav section labels, masthead kicker, the verse ref
     clipped       1  · "Possible meaning" cut mid-word
     overflow      2  · the rail's resize handle poking past the edge
     low contrast  4  · three of them are light literals that never darken
     wrong face    8  · Helvetica left on text that is read, not operated
   ═══════════════════════════════════════════════════════════════════ */

/* 1 — the verse reference under the masthead. Inline-styled blue (#A6402B),
       tracked caps, and the last literal blue anywhere on the page. */
.mast-sub a{color:var(--accent) !important;letter-spacing:0 !important;
  text-transform:none !important;font-family:var(--serif) !important;
  font-style:italic;border-bottom:0 !important}

/* 2 — "Notable Inklings". Inline-styled in the OLD gold (#c8941f) at 2.4:1
       on cream — the contrast problem that moved every highlight to red in
       the first place — and tracked caps besides. */
.masthead > div:first-child{
  color:var(--gold-text,#846426) !important;letter-spacing:0 !important;text-transform:none !important;
  font-family:var(--serif) !important;font-style:italic;font-size:16px !important;
  font-weight:400 !important}
#dateline,#masttotal{letter-spacing:0 !important;text-transform:none !important;
  font-family:var(--serif) !important}

/* 3 — the violet hairline under every card, and the purple caret on
       "Possible meaning" */
.cardrule{border-top-color:var(--line) !important}
.mngcar{color:inherit !important}

/* 4 — the pinned-book controls, still wearing lavender borders */
.pinbook .pin-cycle,.pinbook .pin-hide,.pinbook a.pin-btn{
  border-color:var(--line) !important}
.pinbook .pin-cycle:hover,.pinbook .pin-hide:hover{
  border-color:var(--accent) !important;color:var(--accent) !important}

/* 5 — "Possible meaning" was clipped at 109px inside a 116px button */
.cardtools .mngbtn{max-width:none !important;white-space:nowrap;overflow:visible !important}

/* 6 — the rail's resize handle sat 6–17px past the right edge */
.inkrsz,.inkrsz-reset{max-width:100% !important;right:0 !important}

/* 7 — THE LAST OF THE WHITE HOLES. .tab kept a light literal background, so
       in dark mode it was cream text on a near-white pill: 1.8:1, unreadable.
       Same bug as the form fields, different element. */
.tabs .tab,button.tab{
  background:transparent !important;background-image:none !important;
  color:var(--mut) !important;border:0 !important;border-radius:0 !important;
  border-bottom:2px solid transparent !important;
  font-family:var(--serif) !important;font-size:16px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;box-shadow:none !important}
.tabs .tab:hover,button.tab:hover{color:var(--ink) !important}
.tabs .tab.on,button.tab.on{color:var(--ink) !important;
  border-bottom-color:var(--gold) !important;background:transparent !important}
/* The one boxed thing in a row of plain-text tabs, and it was wide enough to
   push "Collected Quotes" onto two lines. It is the primary action there, so it
   keeps emphasis — but in the form this site uses for emphasis: a wash and a
   hairline, not an outline drawn around a phrase. The label also stops wrapping;
   a control that breaks across two lines is not a control, it is a paragraph. */
.tabs .tab.tab-add,button.tab.tab-add{color:var(--accent) !important;
  background-color:color-mix(in srgb,var(--accent) 10%,transparent) !important;
  background-image:none !important;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent) !important;
  white-space:nowrap !important;
  padding:5px 12px !important;
  /* square corners inside a 14px-rounded dock was the "weird box". A child of a
     rounded container wants radius = parent radius - parent padding, or the two
     curves fight: 14 - 6 = 8. */
  border-radius:8px !important}

/* THE DOCK'S "+ Add", 2026-09-14 — measured inside .tabdock-inner:

     Collected / Scripture / Guests   36px tall, padding 8px 15px, 7px of air
     ✚ Add                            30px tall, padding 5px 12px, 10px of air
     gaps between items               4px, 4px, then 8px

   Two button sizes in one 50px strip, and a gap that is 8px where its
   neighbours are 4 — close enough to 4 to read as a mistake rather than a
   decision. The cause is the rule directly above: `button.tab.tab-add` carries
   an element qualifier, so at (0,3,1) it outranks the dock's own
   `.tabdock .tab-add{padding:8px 15px}` at (0,3,0) and re-sizes the button
   only in the place where it has siblings to match.

   Here the padding goes back to the siblings' — matching height, matching air.
   The gap becomes a deliberate 14px: ✚ Add is an ACTION sitting beside three
   TABS, so the separation should be visible on purpose rather than ambiguous
   by accident. */
.tabdock-inner button.tab.tab-add{
  padding:8px 15px !important;
  margin-left:14px !important;
  border-radius:8px !important}
.tabdock-inner .tab{border-radius:8px !important}

/* 8 — private notes were #5b5145 on the dark ground: 2.1:1 */
.qnote,.qnote-body{color:var(--mut) !important}
.tagslbl{color:var(--mut) !important}

/* 9 — Helvetica left on text that is READ rather than operated. Buttons and
       machinery can stay sans; an attribution, a source line and a note
       cannot, or the card is set in two voices. */
.attr,.al,.srclink,.pin-src,.qnote,.cfav,.filterbar{
  font-family:var(--serif) !important;letter-spacing:0 !important}
.attr{font-size:16px !important}

/* ── the sweep, round two: what survived the first pass ───────────

   10 — .tabdock, the sticky duplicate of the tab row. Its inner pill is
        rgba(247,243,236,.97) — another light literal — so once .tab took
        its colour from the tokens, dark mode put cream text on a near-white
        pill: 1.1:1 for the active tab. Invisible, not just ugly.
        (This is also the control that appears twice on screen. Making it
        readable is the bug fix; whether it should exist at all is a
        layout decision, still open.) */
.tabdock-inner{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important}
.tabdock-inner .tab{color:var(--mut) !important}
.tabdock-inner .tab.on{color:var(--ink) !important;
  border-bottom-color:var(--gold) !important}

/* 11 — "Possible meaning": the button's box was 109px around 116px of text.
        It was being flex-shrunk (`flex: 0 1 auto`) and its width left to the
        flex algorithm. Sized to its content instead, so the box is the text. */
.cardtools .mngbtn{flex:0 0 auto !important;width:max-content !important}

/* 12 — the rail's resize handle. It is placed by JS with `left: <rail width>`,
        so `right` never applied — that was my first guess and it was wrong.
        Below 1040px the rail stops being a column and becomes a stacked block,
        at which point the handle is 11px of furniture that can resize nothing
        and hangs 6px off the right edge. It goes with the column. */
@media (max-width:1040px){
  .inkrsz,.inkrsz-reset{display:none !important}
}

/* ── Browse: eight, then the rest ─────────────────────────────────
   The list was 25 rows and the longest thing in the rail. Tucking the
   whole section behind a fold was the other option and I'd argue against
   it: a closed drawer is a dropdown by another name, and you only open one
   if you already know what is inside. Browsing is how someone finds
   "Wolterstorff" without knowing to look for him.
   Eight is enough to recognise a name in, and short enough to keep the rail
   to about a screen. The rest is one click, in place. */
/* !important, because the row rule above sets display:flex !important and a
   plain display:none loses to it however specific the selector is. */
body:not(.chips-all) .side .chips .chip:nth-child(n+9){display:none !important}
.chipmore{
  display:block;margin:11px 0 0;padding:0;background:none;border:0;
  font-family:var(--serif);font-size:15px;color:var(--accent);cursor:pointer;
  border-bottom:1px solid currentColor}
.chipmore:hover{color:var(--ink)}
.chipmore[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════
   THE TYPE FLOOR

   The first sweep checked colour, caps, clipping, overflow and contrast.
   It never checked TYPE — so rows kept shipping where a label and the
   things it labels disagreed on family, size AND weight at once:

     "Tags:"  Helvetica 10px 700   vs   the tags  Helvetica 13px 600
     "Sort"   Helvetica 15px       vs   Shuffle/Export  Newsreader 15px
     "Generate 3" weight 600       vs   every other keeper button 400

   Three differences saying nothing between them. The rule this replaces
   them with: within one row, everything shares a family, a size and a
   weight. A LABEL is distinguished from its CONTENT by colour and by
   italic — never by shrinking it and bolding it, which is what makes a
   row look ragged rather than ordered.
   ═══════════════════════════════════════════════════════════════════ */

/* the tag row on a card */
.card .tags,.tags{
  font-family:var(--serif) !important;font-size:15px !important;
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.card .tags .t,.tags .t,
.card .tags .tagslbl,.tags .tagslbl{
  font-family:var(--serif) !important;font-size:15px !important;
  font-weight:400 !important;letter-spacing:0 !important;text-transform:none !important}
.tags .tagslbl{font-style:italic;color:var(--faint,#7B8981) !important}

/* the rail's utility line — "Sort" was the only sans thing in it */
.side .sutil,.side .sutil *{font-family:var(--serif) !important}
.side .sutil label{font-size:15px !important;font-weight:400 !important;
  color:var(--mut) !important;font-style:italic}

/* the keeper bar: one size, one weight, no shouting item */
.keepbar button,.keepbar #genBtn{
  font-family:var(--serif) !important;font-size:14px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;
  background:var(--card) !important;background-image:none !important;
  color:var(--mut) !important;border:1px solid var(--line) !important}
.keepbar button:hover,.keepbar #genBtn:hover{
  border-color:var(--accent) !important;color:var(--accent) !important;
  background:var(--paper) !important}
.keepbar{background:none !important;border:0 !important;
  border-bottom:1px solid var(--line) !important;border-radius:0 !important;
  padding:0 0 12px !important}
.keepbar #keepinfo{font-family:var(--serif) !important;
  color:var(--faint,#7B8981) !important;font-style:italic}

/* the per-card action rows, so the whole card is one voice */
.cardtools,.cardtools button,.kacts,.kacts button{
  font-family:var(--serif) !important;letter-spacing:0 !important;
  text-transform:none !important;font-weight:400 !important}
.cardtools,.cardtools button{font-size:15px !important}
.kacts,.kacts button{font-size:14px !important}

/* ── the two "see all" links ──────────────────────────────────────
   The rail ended with two affordances that had nothing in common but
   their job: tag-graph.js injects "✦ See all 282 — as a graph" in bold
   sans salmon, and our own expander sat under it in serif red — two
   faces, two weights, two different totals, stacked. They are siblings;
   they now look like siblings, on one line, separated by the house dot.
   The expander stopped quoting a number (it only opens the rendered
   list) and the graph link keeps the real one. */
.side .chipmore,.side .chip-graph,.chip-graph{
  font-family:var(--serif) !important;font-size:15px !important;
  font-weight:400 !important;letter-spacing:0 !important;text-transform:none !important;
  color:var(--accent) !important;background:none !important;background-image:none !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;padding:0 !important;text-decoration:none !important}
.side .chipmore{
  border-bottom:1px solid currentColor !important}
.side .chip-graph,.chip-graph{display:inline;margin:0 !important;
  border-bottom:1px solid currentColor !important}
.side .chipmore:hover,.side .chip-graph:hover{color:var(--ink) !important}

/* one row for the pair, with the separator drawn by the row itself */
.side .sblk .chipmore{margin-top:12px !important}
.side .chip-graph::before{color:var(--line);border-bottom:0;
  -webkit-text-fill-color:var(--line)}

/* ═══════════════════════════════════════════════════════════════════
   THE RAIL'S TYPE SCALE — three steps, not seven.

   A census of every text element in the sidebar found SEVEN distinct
   sizes running at once — 13, 14, 15, 16, 17, 18px, plus a Georgia
   straggler where everything else is Newsreader. Each one arrived
   reasonably, one rule at a time, and together they are the "different
   fonts and font sizes" that read as absurd: nothing is wrong with any
   single value, and there is no system holding them.

   Three steps, and every line in the rail is on one of them:

     17px   a section head        Search · Show · Browse
     15px   anything you read
            or click              the field, the filters, the names,
                                  the links, the tabs
     13.5px meta beside something a count, a total, the device note

   A size is not a way of saying a new thing. Colour and italic are.
   ═══════════════════════════════════════════════════════════════════ */
.side,.side *{font-family:var(--serif) !important}

/* 17 — the heads */
.side .sblk-h{font-size:17px !important}

/* 15 — the working text */
.side #q,
.side .seg .btn,
.side .sutil,.side .sutil .btn.lnk,.side .sutil .sortrow,
.side .sutil .sortrow label,.side .sutil .sortrow select,
.side .railtoggle .rt,
.side .chips .chip,.side .chips .chip .cnm,
.side .chipmore,.side .chip-graph,
.side .favnote,
.side .keepquiet{font-size:15px !important}

/* 13.5 — the meta that sits beside something else */
.side #count,
.side .chips .chip .cnt,
.side #count .cfav{font-size:13.5px !important}

/* the memorization card: its own two steps, still on the scale */
.side .memcta{font-size:17px !important}
.side .memcta-sub{font-family:var(--serif) !important;font-size:15px !important;
  font-style:italic}

/* ═══════════════════════════════════════════════════════════════════
   FOUR THINGS IN THE RAIL, MEASURED AT 282px — not at a width where
   they happen to fit. All four are mine.

   1. The count wrapped to two lines again, orphaning "Featured".
      I put the quotes/scripture split back without checking that the
      "★ 311 Featured" suffix still had room after it. It does not, and
      it is redundant: the Featured filter sits directly below it.
   2. Author names truncated — "Cornelius Planti…", "Madeleine L'En…".
      The 40px bar I added takes the space the names needed. The count
      on the right already says what the bar says, so the bar goes and
      the names get their width back.
   3. The graph link ran a rule the full width of the rail, because it
      is an inline-BLOCK carrying a border-bottom. Inline, so the rule
      is under the words.
   4. 48px of nothing between the two links that belong together.
   ═══════════════════════════════════════════════════════════════════ */

/* 1 */
.side #count .cfav{display:none !important}
.side #count{white-space:nowrap}

/* 2 */
.side .chips .chip .cbar{display:none !important}
.side .chips .chip .cnm{overflow:visible;text-overflow:clip;white-space:normal}
.side .chips .chip{gap:12px}

/* 3 + 4 — the pair reads as a pair */
.side .chips{padding-bottom:0 !important}
/* It is a <button>, and something downstream keeps it inline-block, so the
   rule it carries stretched the full 240px of the rail. width:max-content
   makes the box the words whatever the display value ends up being — it
   does not depend on winning a specificity argument. */
.side .chip-graph,.chip-graph{
  display:inline-block !important;width:max-content !important;max-width:100% !important;
  text-align:left !important;margin:12px 0 0 !important;
  border-bottom:1px solid currentColor !important}
.side .chipmore{display:inline-block !important;margin:6px 0 0 !important}
.side .chip-graph::before{content:"" !important}

/* ═══════════════════════════════════════════════════════════════════
   THE PAGE TYPE SCALE — and an honest correction.

   I fixed the RAIL's type (seven sizes down to three) and reported the
   page as clean. It was not. A census of the whole page found:

     26 distinct family/size/weight specs
     3 families   Newsreader, Helvetica Neue, Arial
     10 sizes     10.5 11.5 12 12.5 13 13.5 14 15 16 16.5 17
     3 weights    400, 600, 700

   "Show more" was Helvetica 12 on 181 cards. Keeper meta was Helvetica
   11 on 79. A pin control was Arial. That is what "the fonts are still
   fucked" meant, and measuring one component and calling the page done
   is how I missed it.

   Five steps. Everything on the page is on one of them:

     25px   the quote, alone on its page (qsolo)
     19px   the quote in a list — the thing you came to read
     17px   a heading
     15px   anything you read around it, or click
     13.5px meta beside something else — dates, counts, small labels

   One family. One weight. A size is not a way of saying a new thing.
   ═══════════════════════════════════════════════════════════════════ */

/* one family, everywhere that is not deliberate monospace */
.wrap,.wrap *,main,main *,.masthead,.masthead *,.keepbar,.keepbar *{
  font-family:var(--serif) !important}
code,pre,kbd,samp{font-family:ui-monospace,Menlo,monospace !important}

/* one weight, with a single emphatic step for real emphasis */
.wrap *,main *{font-weight:400 !important}
.wrap b,.wrap strong,main b,main strong,
.card .body b,.mast-title,.sblk-h{font-weight:500 !important}

/* 25 / 19 — the quote itself */
body.qsolo #list .card .body{font-size:25px !important}
.card .body,.qbody{font-size:19px !important}

/* 17 — headings */
.mast-title{font-size:clamp(30px,4vw,44px) !important}
.mast-sub,.tabs .tab,.syshead h2,.packcard h3{font-size:17px !important}

/* 15 — everything read or clicked around the quote */
.card .attr,.card .tags,.card .tags .t,.card .tags .tagslbl,
.cardtools,.cardtools button,.more,.qnote,.qnote-body,
.keepbar button,.keepbar #keepinfo,.filterbar,.filterbar *,
.masthead > div:first-child,.mngbox,.suggestbox,.suggestbox *,
.pinbook,.pinbook *,.memcta-sub{font-size:15px !important}

/* 13.5 — meta */
.kacts,.kacts button,.kmeta,.kmeta *,.qnote-tag,.srclink,
#dateline,#masttotal,#count,#gcount,.saves-h,.cardacts,
.pin-src,.pin-lbl,.at-mark,.mngcar{font-size:13.5px !important}

/* the strays that carried their own weight or family */
.qnote-tag,.at-mark,.fb-k{font-weight:400 !important;letter-spacing:0 !important;
  text-transform:none !important}
.pin-cycle,.pin-hide,.at-mark,.mngcar{font-family:var(--serif) !important}

/* the last four strays, each found by the census rather than by eye */
.attr,.card .attr,div.attr{font-size:15px !important}          /* was 16, ×6  */
.mast-sub a{font-size:13.5px !important}                       /* was 11, ×2  */
.keepbar button,.keepbar #genBtn,#genBtn{font-size:15px !important}  /* Generate 3 was 14 */
.keepbar b,.keepbar #keepinfo b{font-weight:400 !important}

/* ── the rail steps back ──────────────────────────────────────────
   The quote is 19px and the rail 15px, which is the right hierarchy —
   the quote is what you came for, the rail is machinery. But both were
   painted in the SAME ink, so the rail was speaking at full volume in a
   smaller voice, and that reads as "too small" rather than "secondary".

   Colour carries the hierarchy the size was trying to carry alone.
   Nothing reflows: not one declaration here affects layout. The names
   come back to full ink on hover and when active, because at that moment
   they are the live thing. */
.side .chips .chip{color:var(--mut) !important}
.side .chips .chip:hover,.side .chips .chip.on{color:var(--ink) !important}
.side .chips .chip.on{font-weight:500 !important}
.side .railtoggle .rt.on{color:var(--ink) !important}

/* ── the filter counts ────────────────────────────────────────────
   All four filters carry their number now, not just All-Time. Set a
   step down and muted, so the count reads as an annotation on the
   label rather than part of it. */
.side .seg .btn .fc{color:var(--faint,#7B8981) !important;font-size:13px;
  font-variant-numeric:tabular-nums;margin-left:5px}
.side .seg .btn .fc:empty{display:none}
.side .seg .btn.on .fc{color:var(--accent) !important}

/* ── the filter bar — the last purple, and why my audit missed it ──
   "Filtered by [hope ×]" only EXISTS while a filter is applied, and
   every sweep I ran was on the page at rest. An audit only sees what is
   on screen when it runs; a control that appears in one state is
   invisible to it in every other. That is how a lavender-gradient chip
   with #54746d text survived a page I had called clean. */
.filterbar{font-family:var(--serif) !important}
.fb-k{font-family:var(--serif) !important;font-size:15px !important;
  font-weight:400 !important;letter-spacing:0 !important;text-transform:none !important;
  font-style:italic;color:var(--faint,#7B8981) !important}
/* THE ACTIVE FILTER IS NOT A BOX — 2026-09-14.
   It was a red-bordered rectangle sitting between an italic label and an
   underlined text link: three different treatments stacked in three rows of a
   282px column, and the box the loudest of them. Nothing else in this rail is
   a box — the filters are a segmented row, the browse list is plain rows, Sort
   and Shuffle are underlined words. A rectangle here is a fourth kind of thing
   to learn, introduced for one word.

   Same word, the rail's own vocabulary: ink-red text with a red underline —
   the affordance the site already uses for "this is live and you can change
   it" — and the × beside it. Red is right for this one: an active filter IS
   the live thing on the page, which is the single job red has here. */
.fb-chip{
  font-family:var(--serif) !important;font-size:15px !important;
  background:none !important;background-image:none !important;
  border:0 !important;border-bottom:1px solid var(--accent) !important;
  border-radius:0 !important;box-shadow:none !important;
  color:var(--accent) !important;padding:1px 0 2px !important}
.fb-chip:hover{background:none !important;background-image:none !important;
  border-bottom-color:var(--accent) !important;color:var(--accent) !important}

/* ...and it was butted against "Shuffle the collection" with nothing between
   them. The bar had a top rule and 9px above it and NOTHING below, so it
   collided with whatever came next. A filter statement is its own line in the
   rail's sequence; it gets the same air the sections get. */
/* It sits above the card list now, not in the rail, so it is sized for that
   column: the same left edge as the cards, room beneath it, and no rule of its
   own — the list below is the thing it separates from. */
#filterhere .filterbar{
  margin:0 0 18px !important;padding-top:0 !important;
  border-top:0 !important;gap:9px !important;align-items:baseline !important}
#filterhere:empty{display:none}
.fb-x{font-size:15px !important;opacity:.6}
.fb-chip:hover .fb-x{opacity:1}
.fb-all{font-family:var(--serif) !important;font-size:15px !important;
  color:var(--faint,#7B8981) !important;border-bottom:1px solid var(--line) !important}
.fb-all:hover{color:var(--accent) !important;border-bottom-color:var(--accent) !important}

/* two more, found only because the scan was widened from the content
   area to the whole body */
.srclink{border-bottom-color:var(--line) !important}   /* a navy-tinted underline, x8 */
.amz-note,.amz-note *{font-family:var(--serif) !important;font-size:13.5px !important;
  letter-spacing:0 !important;color:var(--faint,#7B8981) !important}

/* the "still counting" marker — quiet, italic, and gone the moment the
   server list lands */
.side #count .cload{color:var(--faint,#7B8981) !important;font-style:italic;
  font-size:13.5px !important}

/* ── "Possible meaning" goes gold ─────────────────────────────────
   It is not an action you take on the quote — it is a disclosure that
   there is more underneath. Red is for the live thing; an annotation
   belongs with the structure, which is gold. That also takes one more
   red off a card that had four. */
.cardtools .mngbtn,.cardtools .mngbtn:hover,.acts .mng{
  color:var(--gold-text) !important}
.cardtools .mngbtn:hover{border-bottom:1px solid currentColor}
/* THE MEANING BOX. Its ground was rgba(166,64,43,.05) — a 5% wash of the
   retired blue, which is where the lavender came from. Green is the right
   answer, and gold is the better one: the control that OPENS this panel is
   already gold, and so is the rule down its edge, so a gold ground makes the
   disclosure and its contents one object. Green would be a second signal
   for a single idea. A faint tint,
   so a faint tint of it reads as "an aside on this quote" without
   introducing a colour. Gold rule on the edge, matching "Possible
   meaning" itself. Built with color-mix off the tokens so it tints the
   card's own ground in either theme rather than being baked to one. */
.mngbox{
  background:color-mix(in srgb,var(--gold) 13%,var(--card)) !important;
  border-left:3px solid var(--gold) !important;
  border-radius:0 !important;
  font-family:var(--serif) !important;font-size:16px !important;
  color:var(--ink) !important;
  padding:12px 16px !important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mngbox{
    background:color-mix(in srgb,var(--gold) 15%,var(--card)) !important}
}
:root[data-theme="dark"] .mngbox{
  background:color-mix(in srgb,var(--gold) 15%,var(--card)) !important}

/* ═══════════════════════════════════════════════════════════════════
   THE STATUS BAR IS A BAR, NOT A BACKGROUND.

   A card marked BOTH saved and featured was rendering with a red-to-gold
   gradient across its entire face, swallowing the quote.

   Cause, and it is the same trap as the tag slab earlier: the page draws
   that two-tone status bar as a background-IMAGE constrained by
   `background-size:4px 100%; background-repeat:no-repeat`. I then wrote
   `.card{background:var(--card) !important}` — and the `background`
   SHORTHAND resets every background-* longhand it does not mention, so
   size went back to `auto` and repeat to `repeat`. The gradient was then
   free to paint the whole card.

   Every rule that paints one of these bars now states its own size,
   repeat and position, so no shorthand upstream can unmake it.
   ═══════════════════════════════════════════════════════════════════ */
.card.fav.feat,.card.fav.at,.card.feat.at,.card.fav.feat.at{
  background-color:var(--card) !important;
  background-repeat:no-repeat !important;
  background-position:left top !important;
  background-size:3px 100% !important;
  border-left:0 !important}

/* the single-mark cards keep a plain 3px border and no image at all */
.card.fav,.card.feat,.card.at{
  background-image:none !important;
  background-color:var(--card) !important;
  border-left-width:3px !important;border-left-style:solid !important}

/* the All-Time glyph's own little gradient had the same problem */
.cardacts .at-mark{
  background-repeat:no-repeat !important;background-size:100% 100% !important}

/* ═══════════════════════════════════════════════════════════════════
   THE CARD, GROUPED.

   Measured on a live card, the vertical gaps were 1 / 18 / 14 / 16 / 10px
   — near-uniform, so the card was six evenly-spaced bands and nothing told
   the eye which pieces belong together. A quote and its attribution are one
   thing; the tags are a second; the rule and the actions are a third.
   Tighten inside a group, open between them. Same total height, different
   read.
   ═══════════════════════════════════════════════════════════════════ */
/* First pass: 8 / 22 / 22 / 11 / 8. The grouping worked but the card was
   padded out — two 22s back to back left the tags floating in a band of
   their own. What creates a group is the RATIO between gaps, not their
   size, so the same 2x contrast at smaller values reads identically and
   gives back about 30px a card: 8 / 15 / 13 / 9 / 6. */
.card .attr{margin-top:8px !important}            /* the credit hugs the quote */
.card .more{margin-top:6px !important}
.card .tags{margin-top:15px !important}           /* a real gap, not a chasm */
.card .cardrule{margin-top:13px !important}
.card .cardtools{margin-top:9px !important}
.card .kacts{margin-top:6px !important}
/* 44px on the right is not cushion — it is the RESERVE for .cardacts, which
   is absolutely positioned in that corner. Tightening the card's padding, I
   cut the right from 44 to 20 along with everything else and the quote text
   ran straight under the ♥ ★ ✦. The other three sides stay tight; this one
   is load-bearing. */
.card{padding:16px 46px 14px 16px !important}
.card .qnote{margin-top:10px !important}

/* ...AND THE SECOND TIME, 2026-09-14, on the quote-of-the-day card.

   Measured: #qotd has padding-right:24px of its own, its .cardacts column is
   30px wide sitting at right:10px, so the buttons occupy the last 40px and the
   text was allowed to run to the last 24px. 16px of encroachment; the line
   "Freedom is never more than one generation away from extinction" crossed 9.1px
   under the star. Same bug as the .card one above, on a card the .card rule
   never selected.

   Fixing #qotd by name would leave the next card with a .cardacts in it to find
   the same way — by Steve seeing a letter under a button. So the reserve stops
   being a property of any particular card and becomes a property of CONTAINING
   THE BUTTONS: whatever element is the direct parent of a .cardacts gets the
   room, whether it is .card, #qotd, or something not written yet.

   46px = 10px inset + 30px column + 6px gutter. */
:has(> .cardacts){padding-right:46px !important}

/* .cardacts' own colours: .save was #60847c and its "on" ground rgb(96,132,124),
   the button borders rgb(150,129,100), and .at-mark ran a purple->blue gradient
   clipped to the glyph with rgb(174,140,92) behind its "on" state. The rules
   further up already caught the foreground colours; these are the grounds and
   borders they left behind. */
.cardacts button{border-color:rgba(37,50,47,.16) !important}
.cardacts button:hover{border-color:var(--accent) !important}
.cardacts .save.on{background-color:rgba(166,64,43,.13) !important}
.cardacts .star.on{background-color:rgba(175,142,89,.16) !important}
.cardacts .at-mark.on{background-color:rgba(47,87,68,.13) !important;
  border-color:var(--accent2) !important}

/* "Show more" is not a destination — it just uncrops text you are already
   reading. Muted, and red is left for the author, which actually takes you
   somewhere. */
.card .more{color:var(--mut) !important;border-bottom:1px solid var(--line) !important}
.card .more:hover{color:var(--ink) !important;border-bottom-color:var(--ink) !important}

/* The author's underline was `dotted 1px` in red — which is the spell-check
   squiggle, not a link. And the em-dash was red too, so "— Dietrich
   Bonhoeffer" read as one long red streak when only the NAME is clickable. */
.card .attr{color:var(--mut) !important}
.card .attr .al{color:var(--accent) !important;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent) !important;
  text-decoration:none !important}
.card .attr .al:hover{border-bottom-color:var(--accent) !important}
.card .attr .srclink,.card .attr cite{color:var(--mut) !important}

/* A private note is an annotation on a quote, not a second quote. One of
   yours renders 491px tall, which pushes the quote's own actions half a
   screen below it. Clamped to three lines; click to open it. */
.card .qnote{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;cursor:pointer;margin-top:14px !important}
.card .qnote.open{-webkit-line-clamp:unset;overflow:visible}
.card .qnote.editing{-webkit-line-clamp:unset;overflow:visible;cursor:auto}

/* ── "Browse" was the wrong word, and the right fix is to delete it ──
   Clicking a name FILTERS the collection — it does not browse and it does
   not sort (Sort is its own control above). But the honest rename is not
   "Filter by theme": the Themes / Authors tabs directly underneath already
   say exactly what the block is and what it does. A heading that only
   repeats the control below it, less accurately, is a heading to remove.
   The tab pair takes the head's grammar — the gold rule — and becomes the
   section head itself. One less line in the rail, and it stops lying. */
.side .sblk:last-of-type > .sblk-h{display:none}
.side .railtoggle{
  margin:0 0 12px !important;padding-bottom:7px !important;
  border-bottom:2px solid !important;
  border-image:linear-gradient(90deg,var(--gold) 0%,var(--gold) 34%,transparent 100%) 1 !important}
.side .railtoggle .rt{font-size:17px !important;padding-bottom:0 !important;
  border-bottom:0 !important}
.side .railtoggle .rt.on{color:var(--ink) !important;border-bottom:0 !important}
.side .railtoggle .rt:not(.on){color:var(--faint,#7B8981) !important}

/* ═══════════════════════════════════════════════════════════════════
   THE THREE MARKS ARE ONE OBJECT.

   They were three different things wearing the same job: ♡ a grey outline,
   ★ a gold outline, and ✦ a solid disc with a red-to-green gradient and no
   glyph visible at all.

   The ✦ is the fourth time the `background` shorthand has bitten tonight.
   The page paints that mark's gradient clipped to the glyph
   (`-webkit-background-clip:text`); my `.cardacts button{background:...}`
   reset background-clip to border-box, so the gradient stopped being the
   star and became the circle — and the star, still transparent from
   `-webkit-text-fill-color`, vanished into it.

   One object, three states: an outlined circle, the glyph in its own
   colour when set, muted when not. No gradient anywhere near it.
   ═══════════════════════════════════════════════════════════════════ */
.cardacts button,.cardacts .save,.cardacts .star,.cardacts .at-mark{
  background:none !important;background-image:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  width:30px !important;height:30px !important;border-radius:50% !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  font-size:14px !important;line-height:1 !important;padding:0 !important;
  border:1px solid var(--line) !important;color:var(--mut) !important;
  box-shadow:none !important}
.cardacts button:hover{border-color:var(--accent) !important;color:var(--accent) !important}
.cardacts .save.on{color:var(--accent) !important;border-color:var(--accent) !important}
.cardacts .star.on{color:var(--gold-text,#846426) !important;border-color:var(--gold) !important}
.cardacts .at-mark.on{color:var(--accent2) !important;border-color:var(--accent2) !important}
.cardacts .at-mark:disabled{opacity:.45}

/* ═══════════════════════════════════════════════════════════════════
   TWO LISTS, ONE SHAPE — the boxes come out.

   The rail was a control panel stacked on a list: a boxed field, a 2x2
   grid of bordered cells, a boxed select — and then, underneath, eight
   clean rows of names with their counts. The bottom half was the part
   that worked, and the top half was fighting it.

   Show and Browse do the SAME THING. One narrows by your relationship to
   a quote (all / saved / featured / anthology), the other by its subject
   or author. Two filters, so: two lists, one shape. Name left, count
   right in the same column, the active one in the highlight with a gold
   rule under it. No cells, no borders, nothing to align.

   The search field keeps an affordance because you type into it, but a
   rule under it says "field" as clearly as a box and weighs a quarter as
   much. Sort loses its box for the same reason — the caret already says
   it is a menu.
   ═══════════════════════════════════════════════════════════════════ */

/* the filters become rows */
.side .seg{
  display:block !important;border:0 !important;background:none !important;
  gap:0 !important;margin:0 !important}
.side .seg .btn{
  display:flex !important;align-items:baseline !important;justify-content:flex-start !important;
  width:100% !important;gap:10px !important;
  padding:8px 0 !important;margin:0 !important;
  background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;text-align:left !important;
  font-size:15px !important;color:var(--mut) !important}
.side .seg .btn:hover{color:var(--ink) !important;background:none !important}
.side .seg .btn.on{
  color:var(--accent) !important;background:none !important;box-shadow:none !important}
.side .seg .btn .sg{font-size:14px;opacity:.9;flex:0 0 auto;order:-1}
.side .seg .btn .fc{
  margin-left:auto !important;color:var(--faint,#7B8981) !important;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.side .seg .btn.on .fc{color:var(--accent) !important}

/* the field: a rule, not a box */
.side #q{
  background:none !important;border:0 !important;
  border-bottom:1px solid var(--line) !important;border-radius:0 !important;
  padding:8px 2px !important}
.side #q:focus{border-bottom-color:var(--accent) !important}

/* THREE RULES FOR ONE CONTROL — 2026-09-14.
   The sort <select> had .side .sutil .sortrow select written three separate
   times in this file: the styling above, an earlier pass's padding, and this
   block, which carried `border:0 !important`. Equal specificity, and this one
   came last, so it deleted the gold underline the moment it was added and the
   control went back to looking like plain text. I shipped the fix, looked at
   the live file, and found my own rule overridden by my own rule.
   Both duplicates are gone. The control has one home, above. That is the whole
   lesson from this file: in 1,700 lines the danger is not a wrong value, it is
   the same selector written twice a thousand lines apart. */
.side .sutil .sortrow select:focus{outline:none;
  border-bottom-color:var(--accent) !important}

/* Shuffle / Export were underlined text in a row of their own; with the
   boxes gone they can sit as plain links without competing */
.side .sutil .btn.lnk{border-bottom:0 !important;color:var(--mut) !important}
.side .sutil .btn.lnk:hover{color:var(--accent) !important;
  border-bottom:1px solid var(--accent) !important}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS DO NOT SLAB — 2026-09-14

   Steve, on the memorization block after it was changed from a flat tan
   rectangle to a tint that fades out: "i like that faded box.... I do not
   like the hard colored button we have in some places."

   A census across the three sites found THIRTY-NINE clickable surfaces
   painted with an opaque, dark fill — .btn.primary and .btn.got (solid
   #25322F), .tab-add.on, #inkHlBtn, .ink-thfixbtn, .donebtn.done,
   .itgp-cta:hover, .flagbtn.on and the rest. Several of them are mine from
   today, put there to fix white-text-on-a-gradient contrast bugs. Fixing a
   contrast bug by reaching for a solid slab is the reflex this block ends.

   THE RULE. Every other surface on this site states itself with a wash, a
   hairline, or a rule on one edge — the cards, the rail rows, the status
   bars, the memorization block. A solid dark rectangle is a fifth kind of
   object in a design that has deliberately got down to four, and it is the
   loudest one, so it wins the page whether or not it deserves to.

   So a button in a lit or primary state is:

       ground   a 12-16% wash of its colour, over the page — never opaque
       edge     1px of that colour at full strength
       text     that colour at a weight that READS on cream

   Same three parts every time; only the colour changes, and the colour is
   the role:

       green  #2F5744   the ordinary affirmative — do this, save, continue
       gold   #8A6A22   chosen, kept, featured
       red    #A6402B   live now, or destructive

   WHY A WASH AND NOT A FILL. On a solid you must reverse the text to
   cream, which is a second colour decision and the thing that produced
   every "white on gold at 2.2:1" bug in this file. On a wash the text
   stays the role colour, and the role colour was already chosen to read on
   cream. One decision instead of two, and it cannot drift into an
   unreadable pair.

   `background-color` and `background-image` are set separately, never with
   the `background` shorthand — that shorthand silently resets every
   longhand it does not name, which has cost this project four bugs. */

.ink-btn-wash,
.btn.primary,.btn.got,.tabs .tab.tab-add.on,button.tab.tab-add.on,
.donebtn.done,.ink-thfixbtn,.ink-thaskbtn,.itgp-cta,
.pl-btn.go,.lrqi-b.go,#inkDictBtn,
.thpanel .thapplybar .btn.go,.thpanel .thfa .btn.thok{
  background-color:color-mix(in srgb,var(--accent2) 13%,transparent) !important;
  background-image:none !important;
  border:1px solid var(--accent2) !important;
  color:var(--accent2) !important;
  -webkit-text-fill-color:var(--accent2) !important;
  box-shadow:none !important;
  text-shadow:none !important}

.btn.primary:hover,.btn.got:hover,.tabs .tab.tab-add.on:hover,
.donebtn.done:hover,.ink-thfixbtn:hover,.ink-thaskbtn:hover,.itgp-cta:hover,
.pl-btn.go:hover,.lrqi-b.go:hover,#inkDictBtn:hover,
.thpanel .thapplybar .btn.go:hover,.thpanel .thfa .btn.thok:hover{
  background-color:color-mix(in srgb,var(--accent2) 22%,transparent) !important;
  background-image:none !important;
  border-color:var(--accent2) !important;
  color:var(--accent2) !important;
  -webkit-text-fill-color:var(--accent2) !important}

/* gold — chosen, kept, featured */
.flagbtn.on,.pinbook a.pin-btn:hover,.pinbook a.pin-btn.on{
  background-color:color-mix(in srgb,var(--gold) 16%,transparent) !important;
  background-image:none !important;
  border:1px solid var(--gold) !important;
  color:var(--gold-text) !important;
  -webkit-text-fill-color:var(--gold-text) !important;
  box-shadow:none !important}

/* red — live now, or destructive. The highlight button and the delete. */
#inkHlBtn,#inkHlBtn:hover,.btn.miss,.btn.miss:hover,.keeperdel button:hover{
  background-color:color-mix(in srgb,var(--accent) 13%,transparent) !important;
  background-image:none !important;
  border:1px solid var(--accent) !important;
  color:var(--accent) !important;
  -webkit-text-fill-color:var(--accent) !important;
  box-shadow:none !important}
#inkHlBtn:hover,.btn.miss:hover,.keeperdel button:hover{
  background-color:color-mix(in srgb,var(--accent) 22%,transparent) !important}

/* The Reading Room pill in the Scripture panel. It was white on a
   red->green->gold gradient (2.2:1 at the gold end); I made it a solid green
   earlier today, which fixed the contrast and broke this rule. Wash. */
.isp-rr{
  background-color:color-mix(in srgb,var(--accent2) 14%,transparent) !important;
  background-image:none !important;
  border:1px solid var(--accent2) !important;
  color:var(--accent2) !important;
  -webkit-text-fill-color:var(--accent2) !important}
.isp-rr:hover{
  background-color:color-mix(in srgb,var(--accent2) 24%,transparent) !important;
  filter:none !important}

/* ── THE FADED BLOCK ────────────────────────────────────────────────
   The treatment Steve picked out, named so it can be reused rather than
   rediscovered. A feature block — something you are being offered, not a
   control you operate — is a tint that FADES OUT across its width and a
   3px rule on the left. No right edge, no bottom edge, no radius: it
   dissolves into the page instead of stopping, so it reads as emphasis on
   the page rather than as an object sitting on top of it.
   .memcta is the first one; .ink-feature is the reusable name. */
.ink-feature{
  background-color:transparent;
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--gold) 26%,transparent) 0%,
    color-mix(in srgb,var(--gold) 18%,transparent) 38%,
    transparent 92%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:left top;
  border:0;border-left:3px solid var(--ink-green);border-radius:0;
  padding:14px 16px}

/* ═══════════════════════════════════════════════════════════════════
   ALL-TIME GETS A SECOND MARK — 2026-09-14

   Steve: "should featured add a green line underneath? maybe starting on the
   left and fading midway across the box?" — then, seeing it: "I meant for
   All-Time."

   Moved, and it belongs there. This is the only status on the page carrying TWO
   marks; ♥ Saved and ★ Featured get one each, the bar on the left edge, and the
   point of that system is that the bar IS the status. An exception has to earn
   itself on rarity, and All-Time is the rarest thing here by a wide margin — 19
   quotes against 312 Featured and 220 Saved. A second mark on 19 cards reads as
   ceremony. The same mark on 312 would just be noise, which is why it is not on
   Featured. If it ever spreads, the bars stop meaning anything.

   Drawn as a gradient on the divider that is already there rather than a new
   element: .cardrule is the hairline above Share / Copy, so the line sits where
   a line already sits and the card gains no new furniture. Anchored hard left,
   gone by 62% — the fade language the rest of the site uses.

   3px of green rather than 0.5px of grey, and border-image is how a border
   carries a gradient at all (a border-color cannot). border-image-slice:1 is
   required or nothing paints — that is the usual way this rule gets broken. */
.card.at .cardrule,
.card.fav.at .cardrule,
.card.feat.at .cardrule,
.card.fav.feat.at .cardrule{
  border-top-width:3px !important;
  border-top-style:solid !important;
  border-image:linear-gradient(90deg,
    var(--accent2) 0%,
    color-mix(in srgb,var(--accent2) 55%,transparent) 28%,
    transparent 62%) 1 !important;
  border-image-slice:1 !important}

/* ── the per-card keeper fold ───────────────────────────────────────
   Five controls per card × 181 cards is 905 lowercase links on a reading
   surface, every one of them invisible to readers and rarely used by the
   keeper. Folded to one quiet word that opens in place. */
/* `margin-left:auto` was the reason it would not sit beside Add note — Steve
   asked twice. An auto margin eats the whole remaining line, so the item can
   never share a row with what came before it, and .cardtools wrapped it every
   time: Share / Copy on one line, Add note on the next, Keeper on a third.
   Three lines for four controls, on a row that measures 263px of content in a
   312px card. It just flows now, with the row's own 16px gap, and wraps only
   when it genuinely runs out of room. */
.kfold{margin:0}
/* the panel it opens is full width under the row */
.kfold[open]{flex:1 0 100%}
/* Measured on the row: the buttons are 17.5px tall, this summary was 27.3 — its
   own padding plus a taller line box — so a flex row on `align-items:baseline`
   sat the fold 4.5px above its neighbours and grew the row by 10px. Matched to
   the buttons exactly (15px × 1.167 = 17.5) and the row is level. */
.kfold > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--serif) !important;font-size:15px !important;font-weight:400 !important;
  line-height:1.167 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--mut) !important;padding:0}
.kfold > summary::-webkit-details-marker{display:none}
.kfold > summary::after{content:"\203A";display:inline-block;font-size:13px;
  transform:rotate(90deg);transition:transform .15s;color:var(--gold-text,#846426)}
.kfold[open] > summary::after{transform:rotate(-90deg)}
.kfold > summary:hover{color:var(--accent) !important}
.kfold .kacts{margin-top:8px !important;flex-wrap:wrap !important}
@media (prefers-reduced-motion:reduce){
  .kfold > summary::after{transition:none} }

/* ── THE RAIL, RESEQUENCED — 2026-09-14 ─────────────────────────────
   Search → Shuffle → Show (filters, then Sort) → Browse → Export → Keeper.
   The old .sutil row held Shuffle, Export and Sort together for no reason
   except that none of them belonged to a section, and it showed: three lines
   at three alignments that never looked like anything. Each has gone where it
   means something, and .sutil is now just Sort's home inside Show. */
/* The count line ends the Search block; Shuffle begins the next thing. They
   were touching, so a statement and an action read as one item. */
.side .railact{margin:22px 0 30px}
.side .railact-end{margin:6px 0 22px;padding-top:18px;
  border-top:1px solid var(--line)}
.side .railact .btn.lnk{
  flex:0 0 auto !important;width:auto !important;text-align:left !important;
  background:none !important;background-image:none !important;
  border:0 !important;border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;box-shadow:none !important;
  padding:0 0 2px !important;margin:0 !important;
  font-family:var(--serif) !important;font-size:15px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--mut) !important;cursor:pointer}
.side .railact .btn.lnk:hover{
  color:var(--accent) !important;border-bottom-color:var(--accent) !important}

/* Sort sits alone under the four filters now, so the underline hugs the word
   instead of running the full width of the rail — which is what made it read
   as an empty text field with something typed in it. The flex basis is set on
   the rule that already owns .sortrow, above; writing a second block here is
   how this file got 68 dead declarations. */
.side .sutil .sortrow select{width:max-content !important;max-width:100% !important}