/* christiani.com — review fixes, lane L26.
 *
 * This file is loaded after /assets/styles.css and only ever adds to it. It is
 * kept separate on purpose: styles.css is generated by scripts/port.mjs from the
 * captured WordPress pages, so anything typed into it is lost the next time the
 * port runs. These rules survive that.
 *
 * Two faults, both fixed once here rather than page by page.
 */

/* ------------------------------------------------------------------ 1
   On a phone the menu did nothing.

   WordPress hides the navigation below 600px and opens it with its own
   JavaScript. That JavaScript is not part of a static site, so the button was
   there, it looked like a menu, and tapping it did nothing at all — on every
   page. The only link left in the header on a phone was the logo.

   The fix is to stop having a menu that opens. Below 600px the links are simply
   shown, in a row, the same links in the same type as the desktop header: home,
   about, work with me, field notes. The four category links stay off the phone
   header — they sit on every Field Notes card and under every article, and four
   more words in a header this size is clutter. Nothing here needs script.
*/
@media (max-width: 599px) {
  /* show the menu that was hidden waiting for JavaScript
     (the two buttons that used to sit here are gone from the markup itself —
     scripts/l26/fix.mjs, operations L26-6 and L26-7) */
  .wp-block-navigation__responsive-container {
    display: block !important;
    position: static !important;
    background-color: transparent !important;
    width: auto !important;
    z-index: auto !important;
  }
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close,
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog,
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
    display: block !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* one row, wrapping if it must, aligned right like the desktop header */
  .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.9em !important;
    row-gap: 0.35em !important;
  }

  /* the submenu is no longer a dropdown: its links join the row */
  .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0.9em !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  .wp-block-navigation .has-child > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 0 !important;
  }
  /* the little chevron pointed at a dropdown that no longer exists */
  .wp-block-navigation__submenu-icon { display: none !important; }

  /* the four category links live on the Field Notes cards; not in a phone header */
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2)
    > .wp-block-navigation__submenu-container { display: none !important; }

  /* "home" is the logo, three inches to the left. Saying it twice in a header
     this narrow costs a line of wrapping and buys nothing. */
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1)
    > .wp-block-navigation-item__content { display: none !important; }

  /* What is left — about · work with me · field notes — gets its own line under
     the logo, on every page.

     It nearly fits beside the logo, and "nearly" was the problem: the page you
     are currently on is marked in the menu, which makes that one word slightly
     wider, which tipped the row over on some pages and not others. The header
     was then 140px tall on Field Notes and 100px tall on Home. A header that
     changes height as you move around the site is the thing Carsten objected to,
     in miniature. One line, always, so it is the same everywhere. */
  header.wp-block-template-part
    .wp-block-group.is-content-justification-space-between { flex-wrap: wrap !important; }
  header.wp-block-template-part
    .wp-block-group.is-content-justification-space-between > *:last-child {
    flex-basis: 100% !important;
    margin-top: 0.55rem;
  }
  .wp-block-navigation__container { flex-wrap: nowrap !important; gap: 1.1em !important; }
  header.wp-block-template-part .wp-block-navigation-item__content { white-space: nowrap; }

  /* the header row itself has to be allowed to grow when the menu wraps */
  header.wp-block-template-part .wp-block-navigation { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ 2
   Nine pages were laid out differently from the other thirteen.

   The category and tag pages came out of WordPress full width: title and text
   started 104px from the left edge of a 1440px screen and the cards ran nearly
   the whole way across. Every other page on the site is a 620px column, centred,
   starting at 410px. Carsten: "it cannot vary from page to page."

   Measured before and after by scripts/design-grammar.mjs.
*/
main.alignfull > .wp-block-query-title,
main.alignfull > .wp-block-query,
main.alignfull > .wp-block-query > .wp-block-group,
main.alignfull .wp-block-post-template.alignfull {
  max-width: var(--wp--style--global--content-size, 620px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* "Category: Dispatches" had the second half in italic; no other page title on
   the site is italic. */
main.alignfull > .wp-block-query-title span { font-style: normal; }

/* Two cards side by side, like Field Notes — three in a 620px column left each
   one too narrow to read. One card wide on a phone, again like Field Notes. */
main.alignfull .wp-block-post-template.is-layout-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 781px) {
  main.alignfull .wp-block-post-template.is-layout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* The same card border Field Notes uses, so a category page and the Field Notes
   list are recognisably the same site. */
main.alignfull .wp-block-post-template > li {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1.1rem 1.2rem 1.3rem;
  transition: border-color 0.2s ease;
}
main.alignfull .wp-block-post-template > li:hover { border-color: rgba(74, 144, 217, 0.35); }

/* ------------------------------------------------------------------ 3
   The line under the subscribe box saying where an address goes.
   Same size and colour as "stay in touch — rss" above it, so it reads as part
   of the footer rather than as small print bolted on. */
.cc-nl-note {
  margin: 0.6rem auto 0;
  max-width: 30rem;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}

/* The date-and-category line under each archive card sat left on one card and
   centred on the next, because WordPress centres a row that is narrower than its
   container. Same line, same place, on every card. */
main.alignfull .wp-block-post-template .wp-block-group.is-content-justification-left {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}
main.alignfull .wp-block-post-template .wp-block-template-part
  > .wp-block-group.is-layout-constrained { padding-left: 0 !important; padding-right: 0 !important; }
/* The card is a vertical stack; WordPress centres the blocks in it, so a short
   date line floated to the middle while a long one filled the width. Stretch
   them all to the card, and every card's date sits in the same place. */
main.alignfull .wp-block-post-template > li .wp-block-group.is-vertical {
  align-items: stretch !important;
}
main.alignfull .wp-block-post-template > li .wp-block-template-part { width: 100%; }

/* ------------------------------------------------------------------ 4
   Post dates, 9 Oct 2026 (QA item 12).
   WordPress set the date under every essay and on every card in #636363, which
   on this page's #111 measures 3.14:1 — under the 4.5:1 small text needs. The
   footer's grey already passes (4.53:1, npm run contrast), so the dates take
   that same grey rather than a new one. */
.wp-block-post-date,
.wp-block-post-date a { color: rgba(255, 255, 255, 0.45); }

/* ------------------------------------------------------------------ 5
   The Sections list on /two-step-path/, 9 Oct 2026 (QA item 17).
   The list now names every heading in the essay, the smaller ones nested under
   the section they belong to, indented one step so the two levels read apart.
   On wide screens the list is pinned beside the essay; at 22 entries it is
   about 690px tall, so on a short laptop screen (1366x768) its last lines
   would fall below the window. It scrolls inside itself there instead. */
.tsp-toc-nav ol ol { margin-left: 1em; }
/* 9 Oct 2026, fidelity: the line that stood here (max-height: 100vh - 100px)
   overrode staging's own limit; the limit now lives in section 7 below. */

/* ------------------------------------------------------------------ 6
   Layout rules that lost to the port's own stylesheet, 9 Oct 2026 (fidelity).

   On staging every page carries its own copy of WordPress's global styles and,
   after it, the small "core-block-supports" rules that give each block its
   gap, wrap and alignment (.wp-container-…). styles.css joins every page's
   blocks into one file, so the global styles of later pages land after the
   block rules of earlier ones and win the tie: `.is-layout-flex { flex-wrap:
   wrap }` beat the Previous/Next row's nowrap, `:root :where(.is-layout-grid)
   { gap: 1.2rem }` beat the Field Notes grid's 40px, the date line under an
   article lost its flex-start and drifted to the middle, and the header,
   and footer gaps came out 19.2px. These are the same rules, copied
   from styles.css's core-block-supports blocks, restated after it so they win
   again as they do on staging. Each class is a hash of its declarations, so a
   rule only reaches the blocks that carried it on staging.
   Not restated inside the archive cards: those pages keep L26-D's column and
   card (section 2) exactly as before, so the archive grid and card rules
   (6180ff1b, d81b84eb) stay out and the date-line rule skips the cards.
   Measured: computed gap, wrap, alignment and columns of every .wp-container-
   element on 15 pages at 1440, staging against the build. */
.wp-container-core-group-is-layout-f4752a5b > *{margin-block-start:0;margin-block-end:0;}
.wp-container-core-group-is-layout-f4752a5b > * + *{margin-block-start:0px;margin-block-end:0;}
.wp-container-core-group-is-layout-c7f04a3e{gap:var(--wp--preset--spacing--20);}
.wp-container-core-navigation-is-layout-5e1415c7{gap:var(--wp--preset--spacing--20);justify-content:flex-end;}
.wp-container-core-group-is-layout-3bd2330e{justify-content:flex-start;}
.wp-container-core-group-is-layout-1d0a7695{justify-content:space-between;}
.wp-container-core-columns-is-layout-c7949b00{flex-wrap:nowrap;gap:1.2rem 2rem;}
.wp-container-core-group-is-layout-5aef3256 > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:840px;margin-left:0 !important;margin-right:auto !important;}
.wp-container-core-group-is-layout-5aef3256 > .alignwide{max-width:840px;}
.wp-container-core-group-is-layout-5aef3256 .alignfull{max-width:none;}
.wp-container-content-32e3a40d{flex-basis:min(2.5rem, 3vw);}
.wp-container-core-group-is-layout-6a058180:where(:not(.wp-block-post-template *)){gap:0.3em;justify-content:flex-start;}
.wp-elements-0ae16f37c51f66e554a559665613f479 a:where(:not(.wp-element-button)){color:#4a90d9;}
.wp-container-core-group-is-layout-d616d20b > .alignfull{margin-right:calc(var(--wp--preset--spacing--20) * -1);margin-left:calc(var(--wp--preset--spacing--20) * -1);}
.wp-container-core-group-is-layout-d0528b36 > .alignfull{margin-right:calc(0px * -1);margin-left:calc(0px * -1);}
.wp-container-core-post-template-is-layout-e1460667{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--wp--preset--spacing--30);}
.wp-container-core-group-is-layout-95c59878{gap:var(--wp--preset--spacing--10);flex-direction:column;align-items:stretch;}
.wp-container-core-group-is-layout-2b923ac6{flex-wrap:nowrap;justify-content:space-between;}

/* ------------------------------------------------------------------ 7
   The Sections list on /two-step-path/ beside the essay (1100px and wider).
   Staging: the list starts 19.2px below its pinned top (88px), so the small
   "SECTIONS" label sits clear of the header; in the port the list became the
   first child of its column and lost that margin, and the label went under the
   header. The margin is staging's own (`.is-layout-constrained > *`, 1.2rem).
   Staging's list, 13 entries, ended above the footer at the end of the page;
   with every heading named (T3) it is about 690px tall and ran over the footer.
   It now ends where the footer begins when the page is scrolled to the end and
   scrolls inside itself beyond that, as staging's own list did past its
   max-height: pinned top 88px + 1.2rem, footer 357px (measured at 1280, 1440
   and 1920), 24px between, so 100vh - 488px; 412px on a 900px-high window,
   where staging's list measured 355px. */
@media (min-width: 1100px) {
  .tsp-toc-nav {
    margin-block-start: 1.2rem !important;
    max-height: calc(100vh - 488px) !important;
    overflow-y: auto;
    /* The list scrolls inside itself, so it shows its scrollbar: thin and
       always there (the overlay one hid itself and nothing said more entries
       followed), in the site's own whites on #111, and a stable gutter so the
       text does not shift. */
    scrollbar-gutter: stable;
  }
  /* Chromium and WebKit draw it from the ::-webkit-scrollbar parts; Chromium
     turns them off and falls back to an overlay bar the moment
     scrollbar-width or scrollbar-color is set, so those two go only to
     browsers without the parts (Firefox). */
  .tsp-toc-nav::-webkit-scrollbar { width: 8px; }
  .tsp-toc-nav::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.12); }
  .tsp-toc-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.7); border-radius: 4px; }
  @supports not selector(::-webkit-scrollbar) {
    .tsp-toc-nav {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.12);
    }
  }
}

/* ------------------------------------------------------------------ 8
   Back to top, 9 Oct 2026 (fidelity). Staging shows a round "↑" bottom right
   once the page is scrolled 300px, faded in by a script; its look is ported
   in styles.css (.cc-back-to-top, opacity 0 until shown). This site runs no
   script, so the page's own scroll position shows it: hidden for the first
   300px, then visible, as on staging. A browser without scroll-driven
   animation shows it all the time rather than never. */
@keyframes cc-back-to-top-show {
  from { opacity: 0; visibility: hidden; pointer-events: none; }
  to   { opacity: 1; visibility: visible; pointer-events: auto; }
}
@supports (animation-timeline: scroll()) {
  .cc-back-to-top {
    animation: cc-back-to-top-show linear both;
    animation-timeline: scroll(root block);
    animation-range: 300px 340px;
  }
}
@supports not (animation-timeline: scroll()) {
  .cc-back-to-top { opacity: 1; pointer-events: auto; }
}

/* ------------------------------------------------------------------ 9
   The category pills above the Field Notes cards, 9 Oct 2026 (fidelity).
   On staging a script builds them (ALL, SYSTEMS, DISPATCHES, INNER WORK, AI)
   and its stylesheet, ported in styles.css (.cc-filter-bar, .cc-filter-btn),
   draws them. Here they are in the page itself as a group of radio buttons,
   so choosing one marks it without a script, as clicking does on staging.
   On staging choosing one changes the pill and nothing else: every card stays
   (its script hides cards, but the card rule's display:flex !important wins).
   That is matched, not mended; see DECISIONS.md F-20261009. */
/* staging's own margin under the bar (2.5rem), restated: in styles.css a later
   copy of the global styles zeroes it, as in section 6. */
.cc-filter-bar { margin: 0 0 2.5rem 0; }
.cc-filter-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.cc-filter-input:checked + .cc-filter-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
}
.cc-filter-input:focus-visible + .cc-filter-btn { outline: auto; }