/* ==========================================================================
   Arkive — polished stylesheet (replaces the spartan public/arkive.css).

   Faces:   General Sans (interface) · Sentient (prose) · IBM Plex Mono (code, dates)
   Colour:  neutral greys + one accent (peacock), each defined once with light-dark()
   Rhythm:  `rlh` = one line of body text; vertical gaps are multiples of 1 or ½ line
   Rule:    style only. Markup semantics, the native popover/details/radios and
            accessibility stay exactly as the spec describes.
   ========================================================================== */

/* --- Fonts (self-hosted, /fonts) ----------------------------------------------- */
@font-face {
   font-family: "General Sans";
   src: url("/fonts/GeneralSans-Variable.woff2") format("woff2");
   font-weight: 200 700;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "General Sans";
   src: url("/fonts/GeneralSans-VariableItalic.woff2") format("woff2");
   font-weight: 200 700;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: "Sentient";
   src: url("/fonts/Sentient-Variable.woff2") format("woff2");
   font-weight: 200 700;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "Sentient";
   src: url("/fonts/Sentient-VariableItalic.woff2") format("woff2");
   font-weight: 200 700;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: "IBM Plex Mono";
   src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "IBM Plex Mono";
   src: url("/fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: "IBM Plex Mono";
   src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "IBM Plex Mono";
   src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}

/* --- Tokens ------------------------------------------------------------------------ */
/* Screen width left over beside the page (text column + both gutters). Registered as a <length> so
   its `ch` resolves once, at the root, instead of in whichever element reads it. */
@property --room {
   syntax: "<length>";
   inherits: true;
   initial-value: 0px;
}
:root {
   --room: calc(100vw - var(--measure) - 2.5rem);
   color-scheme: light dark;

   --bg: light-dark(#fdfdfc, #111213);
   --text: light-dark(#1b1b1b, #e9e9e7); /* 16.9:1 · 15.4:1 */
   --muted: light-dark(#5f5f5f, #a5a5a2); /*  6.3:1 ·  7.6:1 */
   --faint: light-dark(#9a9a98, #5f605f); /* decoration only, never text */
   --rule: light-dark(#e3e3e0, #2a2b2d);
   --subtle: light-dark(#f4f4f2, #1a1b1d);
   --accent: light-dark(#0a6c80, #5ec4d4); /* peacock · 5.9:1 · 9.2:1 */
   --visited: light-dark(#4f7178, #86a6ab); /*  5.2:1 ·  7.2:1 */
   --tint: color-mix(in srgb, var(--accent) 10%, var(--bg));

   --sans: "General Sans", system-ui, sans-serif;
   --serif: "Sentient", Georgia, serif;
   --mono: "IBM Plex Mono", ui-monospace, monospace;
   --ui: 0.9375em; /* General Sans x-height 0.538 vs Sentient 0.504: this size makes them match */
   --measure: 70ch;

   font-family: var(--sans);
   font-size: clamp(
      1.0625rem,
      0.98rem + 0.3vw,
      1.1875rem
   ); /* 17px on phones → 19px on desktops */
   line-height: 1.6;
   font-kerning: normal;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   background: var(--bg);
   color: var(--text);
}

body {
   container-type: inline-size; /* lets @container rules ask how wide the text column is */
   touch-action: manipulation; /* no double-tap zoom (pinch still works), so a double-tap can mean "next" */
   max-width: var(--measure);
   margin: 0 auto;
   padding: 0.75rlh 1.25em 2rlh;
   overflow-wrap: break-word;
}
::selection {
   background: color-mix(in srgb, var(--accent) 22%, transparent);
}
:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
   border-radius: 4px;
}

/* --- Icons: <span class="icon"> and pseudo-elements, masked so they take currentColor ---- */
.icon {
   display: inline-block;
   flex: none;
   width: 1.1em;
   height: 1.1em;
   vertical-align: -0.2em;
   background: currentColor;
   -webkit-mask: var(--i) center / contain no-repeat;
   mask: var(--i) center / contain no-repeat;
}

/* --- Rhythm -------------------------------------------------------------------------- */
:where(
   p,
   ul,
   ol,
   dl,
   blockquote,
   pre,
   figure,
   details,
   form,
   aside,
   table,
   .wide
) {
   margin-block: 1rlh;
}
:where(li ul, li ol) {
   margin-block: 0;
}

/* --- Links: only content links carry the accent ---------------------------------------- */
a {
   color: inherit;
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.2em;
}
.prose a:not([data-tag]) {
   color: var(--accent);
}
.prose a:not([data-tag]):visited {
   color: var(--visited);
}

/* --- Header ------------------------------------------------------------------------------ */
.site {
   padding-bottom: 0.5rlh;
   box-shadow: inset 0 -1px 0 var(--rule);
}
.masthead {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.5em 1em;
}
.masthead p {
   margin: 0;
}
/* With arkive.js the header sticks, tucks away while you read down and returns on the way up.
   It sits on a blurred bar so the text scrolling underneath never fights with it. */
html[data-header] body > header.site {
   position: sticky;
   top: 0;
   z-index: 10;
   margin: -0.75rlh -1.25rem 0;
   padding: 0.75rlh 1.25rem 0.5rlh;
   background: color-mix(in srgb, var(--bg) 82%, transparent);
   -webkit-backdrop-filter: blur(14px) saturate(1.2);
   backdrop-filter: blur(14px) saturate(1.2);
   transition:
      transform 0.22s ease,
      visibility 0s;
}
html[data-header="hidden"] body > header.site {
   transform: translateY(-100%);
   visibility: hidden;
   transition:
      transform 0.22s ease,
      visibility 0s 0.22s;
}
.wordmark {
   font-family: var(--serif);
   display: inline-flex;
   align-items: center;
   gap: 0.45em;
   font-weight: 300;
   letter-spacing: 0.25em;
   color: var(--text);
   text-transform: uppercase;
   /* transform: skewX(10deg); */
}
.wordmark:hover {
   text-decoration: none;
}
.wordmark .mark {
   width: auto;
   height: 1em;
   color: var(--accent);
   /* margin-inline-end: 0.25em; */
}

/* --- Buttons -------------------------------------------------------------------------------- */
button {
   font: inherit;
   font-size: 0.875em;
   font-weight: 500;
   letter-spacing: 0.01em;
   line-height: 1.2;
   color: var(--text);
   display: inline-flex;
   align-items: center;
   gap: 0.45em;
   padding: 0.45em 0.95em;
   background: var(--bg);
   border: 1px solid var(--rule);
   border-radius: 999px;
   cursor: pointer;
   transition:
      border-color 0.15s,
      color 0.15s,
      background-color 0.15s;
}
button:hover {
   border-color: color-mix(in srgb, var(--text) 35%, var(--bg));
}
button:active {
   background: var(--subtle);
}
button[hidden] {
   display: none;
}
.index-btn .icon {
   --i: url("/icons/index.svg");
}
.close-btn .icon {
   --i: url("/icons/close.svg");
}

/* --- Keyboard-shortcut hints: on hover or keyboard focus only ----------------------------------- */
[data-key] {
   position: relative;
}
[data-key]::after {
   content: "Press " attr(data-key);
   position: absolute;
   z-index: 5;
   top: calc(100% + 8px);
   left: 50%;
   translate: -50% -2px;
   font: 500 0.6875rem/1 var(--mono);
   letter-spacing: 0.02em;
   white-space: nowrap;
   padding: 0.45em 0.65em;
   border-radius: 6px;
   background: var(--text);
   color: var(--bg);
   opacity: 0;
   pointer-events: none;
   transition:
      opacity 0.15s 0.3s,
      translate 0.15s 0.3s;
}
/* header hints sit beside the button, so they never cover the title below */
.masthead [data-key]::after {
   top: 50%;
   left: auto;
   right: calc(100% + 10px);
   translate: 6px -50%;
}
.pager [data-key] {
   position: static;
}
.pager .older [data-key]::after {
   left: 0;
   translate: 0 -2px;
}
.pager .newer [data-key]::after {
   left: auto;
   right: 0;
   translate: 0 -2px;
}
[data-key]:is(:hover, :focus-visible, :has(:focus-visible))::after {
   opacity: 1;
   translate: -50% 0;
   transition-delay: 0s;
}
.masthead [data-key]:is(:hover, :focus-visible)::after {
   translate: 0 -50%;
}
.pager p:is(:hover, :has(:focus-visible)) [data-key]::after {
   opacity: 1;
   translate: 0 0;
   transition-delay: 0s;
}
@media (hover: none), (max-width: 30em) {
   [data-key]::after {
      display: none;
   }
}

/* --- Entry head ---------------------------------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6) {
   font-family: var(--sans);
   font-weight: 600;
   margin-block: 1.75rlh 0.5rlh;
}
h1 {
   font-size: 2.25em;
   line-height: 1.12;
   letter-spacing: -0.025em;
   margin-top: 1rlh;
}
h2 {
   font-size: 1.5em;
   line-height: 1.25;
   letter-spacing: -0.015em;
}
h3 {
   font-size: 1.1875em;
   line-height: 1rlh;
   letter-spacing: -0.008em;
   margin-top: 1.5rlh;
}
h4 {
   font-size: 1em;
   line-height: 1rlh;
   margin-top: 1.5rlh;
}
.deck {
   font-family: var(--serif);
   font-style: italic;
   font-size: 1.1875em;
   line-height: 1.45;
   color: var(--muted);
   margin: 0.5rlh 0 1rlh;
}
.muted {
   color: var(--muted);
}

/* Metadata: a quiet two-column register between hairlines */
table.meta {
   width: 100%;
   font-size: 0.8125em;
   line-height: 1.5;
   margin-block: 1rlh 1.5rlh;
   border-collapse: collapse;
   border-block: 1px solid var(--rule);
}
table.meta :where(th, td) {
   padding: 0.4em 1.5em 0.4em 0;
   text-align: left;
   vertical-align: baseline;
}
table.meta tr:first-child > * {
   padding-top: 0.8em;
}
table.meta tr:last-child > * {
   padding-bottom: 0.8em;
}
table.meta th {
   font-weight: 500;
   font-size: 0.8125em;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--muted);
   white-space: nowrap;
}
table.meta time {
   font-family: var(--mono);
   font-size: 0.9375em;
   letter-spacing: -0.01em;
}

/* Tag chips (metadata) and the Index tag list */
.chips {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35em;
}
.chips a[data-tag],
.cloud li {
   display: inline-flex;
   align-items: baseline;
   gap: 0.35em;
   padding: 0.2em 0.7em;
   border-radius: 999px;
   border: 1px solid var(--rule);
   color: var(--text);
   font-size: 0.9375em;
   line-height: 1.4;
   white-space: nowrap;
   transition:
      border-color 0.15s,
      color 0.15s,
      background-color 0.15s;
}
.chips a[data-tag]:hover,
.cloud li:hover {
   border-color: var(--accent);
   color: var(--accent);
   text-decoration: none;
}
.chips a[data-tag]::before {
   content: "#";
   color: var(--faint);
}

/* --- Prose (Sentient) ------------------------------------------------------------------------ */
.prose {
   font-family: var(--serif);
   letter-spacing: 0.002em;
   hanging-punctuation: first;
}
@media (prefers-color-scheme: dark) {
   .prose {
      font-weight: 400;
   }
} /* light-on-dark reads heavier */
.prose :where(strong, b) {
   font-weight: 600;
}
/* Text edges line up: boxes bleed into the page gutter and list markers hang in it, so
   paragraphs, list text, callouts and quotes all start and end on the same two lines.
   The bleed is exactly the body's 1.25rem gutter, so on a narrow screen the boxes reach the viewport edge. */
.prose :where(ul, ol) {
   padding-inline-start: 0;
}
.prose li :where(ul, ol) {
   padding-inline-start: 1.4em;
}
.prose li::marker {
   color: var(--accent);
   font-family: var(--sans);
   font-size: 0.9em;
}
/* Markers hang in the gutter. Bulleted lists always use an arrow; numbered lists use numbers, except on a
   narrow column, where "10." is too wide for the gutter, so they use the arrow too. */
.prose ul {
   list-style-type: "→\00a0";
}
@container (max-width: 28.75em) {
   .prose ol {
      list-style-type: "→\00a0";
   }
}
.prose li + li {
   margin-top: 0.25rlh;
}

.prose blockquote {
   margin-inline: -1.25rem 0;
   padding: 0 0 0 calc(1.25rem - 2px);
   border-inline-start: 2px solid var(--accent);
   font-style: italic;
   font-size: 1.0625em;
   color: color-mix(in srgb, var(--text) 85%, var(--bg));
}

.callout {
   font-size: 0.9375em;
   padding: 0.75rlh 1.25rem;
   margin-inline: -1.25rem;
   background: var(--subtle);
   border-radius: clamp(0px, calc(var(--room) * 100), 12px);
} /* square once it touches the screen edge */
.callout > :first-child {
   margin-top: 0;
}
.callout > :last-child {
   margin-bottom: 0;
}
.callout a:not([data-tag]) {
   color: var(--accent);
}
.callout-title {
   display: flex;
   align-items: center;
   gap: 0.5em;
   margin-bottom: 0.25rlh;
   font-family: var(--sans);
   font-weight: 600;
   font-size: 0.8125em;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--accent);
}
.callout-title::before {
   content: "";
   width: 1.35em;
   height: 1.35em;
   background: currentColor;
   -webkit-mask: var(--i, url("/icons/note.svg")) center / contain no-repeat;
   mask: var(--i, url("/icons/note.svg")) center / contain no-repeat;
}
.callout[data-kind="question"] {
   --i: url("/icons/question.svg");
}
.callout:is(
   [data-kind="warning"],
   [data-kind="caution"],
   [data-kind="danger"]
) {
   --i: url("/icons/warning.svg");
}
.callout:is([data-kind="tip"], [data-kind="hint"]) {
   --i: url("/icons/tip.svg");
}

hr {
   border: 0;
   height: 1rlh;
   margin-block: 1.5rlh;
   background: var(--faint);
   -webkit-mask: url("/icons/ornament.svg") center / 4.5em auto no-repeat;
   mask: url("/icons/ornament.svg") center / 4.5em auto no-repeat;
}

/* --- Code -------------------------------------------------------------------------------------- */
:where(code, kbd, samp) {
   font-family: var(--mono);
   font-size: 0.85em;
}
:not(pre) > code {
   padding: 0.12em 0.38em;
   border-radius: 5px;
   background: var(--subtle);
   font-size: 0.82em;
}
/* Like callouts: the box bleeds into the gutter, the code text lines up with the prose, and on a narrow
   screen the side borders and corners go away where the box meets the edge. */
figure.code {
   --edge: clamp(0px, calc(var(--room) * 100), 1px);
   margin-inline: -1.25rem;
   overflow: hidden;
   border-style: solid;
   border-color: var(--rule);
   border-width: 1px var(--edge);
   border-radius: clamp(0px, calc(var(--room) * 100), 12px);
}
.code-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1em;
   padding: 0.35em 0.5em 0.35em calc(1.25rem - var(--edge));
   box-shadow: inset 0 -1px 0 var(--rule);
}
.code-head .muted {
   font-size: 0.6875em;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}
.code-head button {
   font-size: 0.75em;
   padding: 0.3em 0.75em;
   border-color: transparent;
   background: transparent;
   color: var(--muted);
}
.code-head button:hover {
   color: var(--text);
   background: var(--subtle);
}
.code-head button::before {
   content: "";
   width: 1.15em;
   height: 1.15em;
   background: currentColor;
   -webkit-mask: url("/icons/copy.svg") center / contain no-repeat;
   mask: url("/icons/copy.svg") center / contain no-repeat;
}
pre {
   overflow-x: auto;
   padding: 0.6rlh calc(1.25rem - var(--edge, 0px));
   background: var(--subtle);
   font-size: 0.8125em;
   line-height: 1.65;
   tab-size: 3;
}
figure.code pre {
   margin: 0;
}
pre code {
   font-size: inherit;
}
/* Shiki (defaultColor: false) gives every token --shiki-light / --shiki-dark; pick one per scheme */
pre span {
   color: light-dark(
      var(--shiki-light, var(--text)),
      var(--shiki-dark, var(--text))
   );
   font-style: var(--shiki-light-font-style, normal);
}

/* --- Tables in entries ----------------------------------------------------------------------------- */
.prose table {
   font-family: var(--sans);
   font-size: 0.8125em;
   line-height: 1.5;
   border-collapse: collapse;
}
.prose :where(th, td) {
   padding: 0.55em 1.25em 0.55em 0;
   text-align: left;
   vertical-align: top;
   box-shadow: inset 0 -1px 0 var(--rule);
}
.prose :where(th, td):first-child {
   padding-inline-start: var(--bleed, 0px);
}
.prose :where(th, td):last-child {
   padding-inline-end: var(--bleed, 0px);
}
.prose thead th {
   font-weight: 600;
   font-size: 0.9em;
   letter-spacing: 0.04em;
   box-shadow: inset 0 -1px 0 var(--text);
}
.prose tbody tr:last-child > * {
   box-shadow: none;
}
/* Tables and display equations are exactly as wide as the text. Table cells wrap; only something that cannot
   (a long code span) makes the table scroll sideways inside its box, with a faint shadow on the edge that hides more. */
.wide {
   overflow-x: auto;
}
.wide > table {
   margin: 0;
}
.wide-table {
   /* like callouts: on a phone the table reaches the screen edge, and its text keeps the gutter */
   --bleed: clamp(0px, calc(var(--room) * -100), 1.25rem);
   margin-inline: calc(var(--bleed) * -1);
   --shade: color-mix(
      in srgb,
      var(--text) 16%,
      transparent
   ); /* 0.5rem: it must stay inside the solid 30% of the 2rem covers, or it leaks through */
   background:
      linear-gradient(to right, var(--bg) 30%, transparent) left / 2rem 100%
         no-repeat local,
      linear-gradient(to left, var(--bg) 30%, transparent) right / 2rem 100%
         no-repeat local,
      linear-gradient(to right, var(--shade), transparent) left / 0.5rem 100%
         no-repeat scroll,
      linear-gradient(to left, var(--shade), transparent) right / 0.5rem 100%
         no-repeat scroll;
}
.wide-table > table {
   width: 100%;
}
/* On a phone, cells would wrap into slivers, so the table keeps its natural width and scrolls instead */
@container (max-width: 700px) {
   .wide-table > table {
      min-width: max-content;
   }
}
img,
video {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
}
svg {
   max-width: 100%;
}

/* --- Previous / next ------------------------------------------------------------------------------- */
.pager {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
   gap: 0.75em;
   margin-top: 1.5rlh;
}
.pager p {
   position: relative;
   margin: 0;
   padding: 0.8em 1em 0.9em;
   border: 1px solid var(--rule);
   border-radius: 12px;
   transition: border-color 0.15s;
}
.pager p:has(a):hover {
   border-color: var(--accent);
}
.pager .newer {
   text-align: end;
}
.pager .label {
   display: flex;
   align-items: center;
   gap: 0.4em;
   margin-bottom: 0.35em;
   font-size: 0.6875em;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
}
.pager .newer .label {
   justify-content: flex-end;
}
.pager .older .label .icon {
   --i: url("/icons/arrow-left.svg");
}
.pager .newer .label .icon {
   --i: url("/icons/arrow-right.svg");
}
.pager a {
   display: inline-block;
   font-weight: 500;
   line-height: 1.35;
}
.pager a::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 12px;
} /* whole card is the link */
.pager a:hover {
   color: var(--accent);
   text-decoration: none;
}
.pager .muted {
   font-size: 0.875em;
}
/* Narrow column: Previous and Next sit side by side as compact cards, without the article titles.
   The link text stays for screen readers, and the whole card is still the link. */
.pager-nav {
   container-type: inline-size;
}
@container (max-width: 28.75em) {
   .pager {
      grid-template-columns: 1fr 1fr;
   }
   .pager a {
      font-size: 0;
   }
   .pager .slot:has(a) {
      position: absolute;
      inset: 0;
   } /* out of flow: the card is just its label; the link still covers it */
   .pager .label {
      margin-bottom: 0;
   }
   .pager p:has(a) .label {
      color: var(--text);
   } /* the label is all that shows, so it reads as the link */
   .pager p:has(a:hover) .label {
      color: var(--accent);
   }
   .pager p:has(a:focus-visible) {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
   }
}
.scope {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5em 1em;
   margin-top: 1rlh;
   font-size: 0.8125em;
   color: var(--muted);
}
.scope button {
   font-size: 1em;
}

/* --- Footer ------------------------------------------------------------------------------------- */
footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 0.5em 1em;
   margin-top: 2rlh;
   padding-top: 1rlh;
   box-shadow: inset 0 1px 0 var(--rule);
   font-size: 0.8125em;
   color: var(--muted);
}
footer p {
   margin: 0;
}
footer a {
   display: inline-flex;
   align-items: center;
   gap: 0.3em;
}
footer a:hover {
   color: var(--text);
}
footer .icon {
   --i: url("/icons/rss.svg");
   width: 1em;
   height: 1em;
}

/* --- The Index (native popover) --------------------------------------------------------------------- */
#index {
   width: 100%;
   height: 100%;
   max-width: none;
   max-height: none;
   margin: 0;
   padding: 0;
   border: 0;
   overflow: auto;
   background: var(--bg);
   color: var(--text);
}
#index:popover-open {
   animation: index-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes index-in {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
}
@media (prefers-reduced-motion: reduce) {
   #index:popover-open {
      animation: none;
   }
   * {
      transition: none !important;
   }
}
#index > .stage {
   max-width: var(--measure);
   margin: 0 auto;
   padding: 0.75rlh 1.25em 2rlh;
}
#index h2 {
   font-size: 1.75em;
   letter-spacing: -0.02em;
   margin: 1rlh 0 0.25rlh;
}
#index .blurb {
   font-family: var(--serif);
   font-style: italic;
   color: var(--muted);
   margin-top: 0;
   font-size: var(--ui);
}

.search {
   margin-bottom: 0;
}
.search label,
#view-label {
   font-size: 0.6875em;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
}
.search label {
   display: block;
   margin-bottom: 0.5em;
}
.searchrow {
   position: relative;
   display: flex;
   gap: 0.5em;
}
.searchrow::before {
   content: "";
   position: absolute;
   left: 0.85em;
   top: 50%;
   translate: 0 -50%;
   width: 1.05em;
   height: 1.05em;
   pointer-events: none;
   background: var(--muted);
   -webkit-mask: url("/icons/search.svg") center / contain no-repeat;
   mask: url("/icons/search.svg") center / contain no-repeat;
}
.searchrow input {
   flex: 1;
   min-width: 0;
   font: inherit;
   font-size: var(--ui);
   color: var(--text);
   padding: 0.6em 0.9em 0.6em 2.4em;
   border: 1px solid var(--rule);
   border-radius: 10px;
   background: var(--bg);
   transition:
      border-color 0.15s,
      box-shadow 0.15s;
}
.searchrow input:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.searchrow input::placeholder {
   color: var(--faint);
}
.active-tag {
   margin: 0.5rlh 0 0;
   font-size: 0.8125em;
   color: var(--muted);
}
.active-tag b {
   color: var(--accent);
   font-weight: 600;
}
.active-tag a {
   text-decoration: underline;
   text-underline-offset: 0.2em;
}

/* Disclosure: a chevron instead of the triangle */
summary {
   list-style: none;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 0.45em;
   font-weight: 500;
}
summary::-webkit-details-marker {
   display: none;
}
summary::before {
   content: "";
   width: 0.95em;
   height: 0.95em;
   background: var(--muted);
   transition: rotate 0.15s;
   -webkit-mask: url("/icons/chevron.svg") center / contain no-repeat;
   mask: url("/icons/chevron.svg") center / contain no-repeat;
}
details[open] > summary::before {
   rotate: 90deg;
}
.tags-panel > summary {
   font-size: 0.8125em;
}

.cloud {
   list-style: none;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 0.45em;
   margin-top: 0.5rlh;
   font-size: 0.8125em;
}
.cloud li {
   position: relative;
   padding: 0.25em 0.75em;
}
.cloud li a::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 999px;
} /* whole chip is the link */
.cloud li a:hover {
   text-decoration: none;
}
.cloud li .muted {
   font-family: var(--mono);
   font-size: 0.85em;
}
.cloud li:has(a[aria-current]) {
   background: var(--accent);
   border-color: var(--accent);
   color: var(--bg);
}
.cloud li:has(a[aria-current]) .muted {
   color: color-mix(in srgb, var(--bg) 75%, var(--accent));
}

/* View switch: the native radios, drawn as a segmented control */
.view-switch {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.75em;
}
.view-switch .seg {
   display: inline-flex;
   gap: 2px;
   padding: 3px;
   border-radius: 999px;
   background: var(--subtle);
}
.view-switch label {
   position: relative;
   padding: 0.35em 0.95em;
   border-radius: 999px;
   font-size: 0.8125em;
   font-weight: 500;
   color: var(--muted);
   cursor: pointer;
   transition:
      color 0.15s,
      background-color 0.15s;
}
.view-switch input {
   position: absolute;
   inset: 0;
   margin: 0;
   opacity: 0;
   cursor: pointer;
}
.view-switch label:has(input:checked) {
   background: var(--bg);
   color: var(--text);
   box-shadow:
      0 1px 2px rgb(0 0 0 / 0.12),
      0 0 0 1px var(--rule);
}
.view-switch label:has(input:focus-visible) {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}
#index:has(#view-date:checked) .by-folder,
#index:has(#view-folder:checked) .by-date {
   display: none;
}
.count {
   margin-bottom: 0.5rlh;
   font-size: 0.8125em;
   color: var(--muted);
}

/* By date: the register (also used on /tags/<tag>/) */
table.entries {
   width: 100%;
   margin-top: 0;
   border-collapse: collapse;
   font-size: var(--ui);
}
table.entries th {
   padding: 0 1em 0.6em 0;
   text-align: left;
   font-size: 0.6875em;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
   box-shadow: inset 0 -1px 0 var(--rule);
}
table.entries td {
   padding: 0.8em 1em 0.8em 0;
   vertical-align: baseline;
   box-shadow: inset 0 -1px 0 var(--rule);
}
table.entries :where(th, td):last-child {
   padding-right: 0;
   text-align: right;
}
table.entries td:first-child {
   font-family: var(--mono);
   font-size: 0.75em;
   color: var(--muted);
   white-space: nowrap;
}
table.entries td:last-child {
   font-size: 0.6875em;
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--muted);
}
table.entries .title {
   font-weight: 500;
}
table.entries .title:hover {
   color: var(--accent);
}
table.entries .deck-line {
   display: block;
   margin-top: 0.2em;
   font-family: var(--serif);
   font-style: italic;
   font-size: 0.9375em;
   line-height: 1.45;
   color: var(--muted);
}
table.entries .tag-line {
   display: block;
   margin-top: 0.3em;
   font-size: 0.75em;
   color: var(--muted);
}
table.entries .tag-line a::before {
   content: "#";
   color: var(--faint);
}
table.entries .tag-line a:hover {
   color: var(--accent);
}
.reading,
.retired {
   display: inline-block;
   margin-left: 0.5em;
   padding: 0.1em 0.55em;
   border-radius: 999px;
   vertical-align: 0.15em;
   font-size: 0.6875em;
   font-weight: 500;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}
.reading {
   color: var(--accent);
   background: var(--tint);
}
.retired {
   color: var(--muted);
   background: var(--subtle);
}
tr[data-status="retired"] .title,
li[data-status="retired"] > a {
   color: var(--muted);
}

/* By folder: the tree, one guide line per level */
.tree {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: var(--ui);
}
.tree ul {
   list-style: none;
   margin: 0.15em 0 0 0.45em;
   padding: 0 0 0 1.1em;
   border-left: 1px solid var(--rule);
}
.tree li {
   margin-block: 0.4em;
}
.tree details {
   margin: 0;
}
.tree summary .muted {
   font-family: var(--mono);
   font-size: 0.75em;
   font-weight: 400;
}
.tree li[data-url] a:hover {
   color: var(--accent);
}
.tree li[data-url] small.muted {
   display: block;
   margin-top: 0.1em;
   font-family: var(--mono);
   font-size: 0.7em;
}

/* --- Math (MathML from KaTeX) ---------------------------------------------------------------------- */
math {
   font-size: 1.05em;
}