/* wiqqi — every value here is a token in DESIGN.md. */
:root {
  --bg: #FFFFFF; --fg: #17191C; --dim: #5A6068; --faint: #8B9098; --line: #E3E5E8;
  --chip: #F1F3F4; --card: #FFFFFF; --accent: #0F6B55;
  --serif: 'Literata', Georgia, serif;
  --sans: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --fresh: color-mix(in srgb, var(--fg) 22%, var(--card));
  --fresh-w: 7.6em;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111315; --fg: #E8EAED; --dim: #A0A6AE; --faint: #6F757D; --line: #272A2E; --chip: #1B1E21; --card: #17191C; --accent: #5CC7A6; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/24px var(--sans);
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  -webkit-tap-highlight-color: transparent;
}
main, .top, .foot { max-width: 680px; margin: 0 auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* Header: the wordmark stays left, whatever the page direction. */
.top {
  direction: ltr; display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  position: sticky; top: 0; z-index: 4; background: var(--bg);
  /* Full-bleed: the page colour reaches both screen edges, not just the column. */
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
}
.top::after { content: ''; position: absolute; bottom: 0; inset-inline: calc(50% - 50vw); border-bottom: 1px solid var(--line); }
:target { scroll-margin-top: 72px; }
.mark { font: 600 20px/28px var(--serif); color: var(--fg); padding: 8px 0; }
.mark:hover { text-decoration: none; }
.mark span { color: var(--accent); }
.top nav { display: flex; align-items: center; gap: 16px; }
.top nav a, .nav-rel { color: var(--dim); font-size: 15px; padding: 12px 0; }
.nav-rel { font: 400 15px/24px var(--sans); background: none; border: 0; cursor: pointer; }
.nav-rel:hover { color: var(--accent); }
/* Search: an icon, the last item of the nav, with a 44 px hit area. */
.top nav .nav-search { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; margin-inline-end: -12px; }
.top nav .nav-search:hover { color: var(--accent); }
/* Header search (src/lib/search-script.js): the magnifier turns the header
   into a field; results fill the screen below it. */
.top.searching > .mark, .top.searching > nav { display: none; }
.hsearch { flex: 1; display: flex; align-items: center; gap: 8px; }
.hsearch[hidden] { display: none; }
.hsearch input { flex: 1; min-width: 0; min-height: 40px; font: 16px/24px var(--sans); color: var(--fg); background: var(--chip); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.hsearch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.hsearch input::-webkit-search-cancel-button { filter: grayscale(1); }
.hs-close { min-height: 44px; padding: 0 0 0 4px; border: 0; background: none; color: var(--accent); font: 500 15px/22px var(--sans); cursor: pointer; }
.hresults {
  position: fixed; inset: 56px 0 0; z-index: 3; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); padding: 16px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}
.hresults[hidden] { display: none; }
.hresults-in { max-width: 680px; margin: 0 auto; }
body.search-open { overflow: hidden; }
form.search { display: flex; gap: 8px; margin: 16px 0 24px; }
form.search input { flex: 1; min-width: 0; min-height: 44px; font: 16px/24px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
form.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
form.search input::-webkit-search-cancel-button { filter: grayscale(1); }
form.search button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--accent); color: var(--bg); font: 600 15px/22px var(--sans); cursor: pointer; }
.search-n { font-size: 13px; line-height: 18px; color: var(--dim); margin-bottom: 8px; font-variant-numeric: tabular-nums; }

/* External links: a box with an arrow out of it, after the text. */
a[target=_blank]::after {
  content: ''; display: inline-block; width: 0.72em; height: 0.72em; margin-inline-start: 4px; vertical-align: 0.02em;
  background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2H2.5A.5.5 0 0 0 2 2.5v7a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V7'/%3E%3Cpath d='M7 2h3v3M10 2 5.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2H2.5A.5.5 0 0 0 2 2.5v7a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V7'/%3E%3Cpath d='M7 2h3v3M10 2 5.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Page heads */
.page-head, .ent-head, .hero { padding: 24px 0 0; }
h1 { font: 600 30px/36px var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.lede { font-size: 18px; line-height: 26px; color: var(--dim); margin-top: 8px; text-wrap: pretty; }
h2 { font: 600 20px/26px var(--serif); margin: 48px 0 12px; }
h3 { font: 500 13px/18px var(--sans); color: var(--dim); margin: 0 0 4px; }
.tag {
  display: inline-block; font-size: 13px; line-height: 18px; color: var(--dim);
  background: var(--chip); border-radius: 4px; padding: 1px 6px; margin-inline-start: 8px; vertical-align: 1px; white-space: nowrap;
}
.ent-head .tag { margin: 0 0 12px; padding: 4px 8px; }
.ent-head .tag:hover { text-decoration: none; color: var(--fg); }
.ent-head .lede { margin-top: 12px; }
.date-future { display: inline-block; margin-inline-end: 8px; font-size: 13px; line-height: 18px; color: var(--dim); font-variant-numeric: tabular-nums; }
.aka { font-size: 13px; line-height: 18px; color: var(--dim); margin-top: 8px; }

/* Quick row under the bio (src/pages/entity.js quickRow): chips that open one panel below. */
.quick { margin-top: 16px; }
.quick-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.qchip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg);
  font: 500 15px/22px var(--sans); cursor: pointer;
}
.qchip:hover { border-color: var(--dim); }
.qchip[aria-expanded='true'] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.qn { font-size: 13px; line-height: 18px; color: var(--dim); font-variant-numeric: tabular-nums; }
.qchip[aria-expanded='true'] .qn { color: var(--accent); }
/* The chevron says "this opens"; it turns over when the panel is open. */
.qchev { flex: none; margin-inline-start: -2px; color: var(--dim); transition: transform .18s ease; }
.qchip[aria-expanded='true'] .qchev { color: var(--accent); transform: rotate(180deg); }
/* The open panel is one soft block with an edge, so it reads as what the chip opened. */
.qpanel { margin-top: 8px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; background: var(--chip); overflow: hidden; }
/* A capped window, not the whole list: about three rows show, the next is cut
   so it reads as scrollable, and the page below stays one short swipe away.
   Scroll chains to the page at the end (no overscroll containment) on purpose. */
.qbody { max-height: min(288px, 40dvh); overflow-y: auto; padding: 4px 16px 8px; }
/* Tags inside the panel sit on --bg: on --chip they vanished into the panel. */
.qpanel .tag { background: var(--bg); }
.qbody { --qshade: rgb(0 0 0 / .18); }
@media (prefers-color-scheme: dark) { .qbody { --qshade: rgb(0 0 0 / .75); } }
/* While there is more below, a soft shadow at the bottom edge says "scroll";
   it fades out as the list reaches its end. Where scroll timelines are not
   supported there is simply no shadow. */
@supports (animation-timeline: scroll()) {
  .qbody { animation: qmore linear both; animation-timeline: scroll(self); }
  @keyframes qmore {
    0%, 85% { box-shadow: inset 0 -16px 12px -12px var(--qshade, rgb(0 0 0 / .18)); }
    100% { box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); }
  }
}
.qpanel .conn-group li:first-child, .qpanel .sheet-group li:first-child { border-top: 0; }
.qpanel .conn-group li:last-child, .qpanel .sheet-group:last-of-type li:last-child { border-bottom: 0; }
.qpanel h3 { margin-top: 12px; }
.qpanel .qlinks { border: 0; }
.qhide {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: none;
  color: var(--dim); font: 500 15px/22px var(--sans); cursor: pointer;
}
.qhide:hover { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .qpanel:not([hidden]) { animation: qin .18s ease-out; }
  @keyframes qin { from { opacity: 0; transform: translateY(-4px); } }
}
@media (prefers-reduced-motion: reduce) { .qchev { transition: none; } }
.qpanel .conn-group:last-child { margin-bottom: 0; }
.qpanel .sheet-group:first-child { margin-top: 0; }
.qlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qlinks a { display: inline-block; padding: 10px 0; }

/* Entity body */
.summary { margin-top: 24px; text-wrap: pretty; }
/* Names linked inside prose: accent plus a quiet underline, so a link reads as one in running text. */
a.inline { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
a.inline:hover { text-decoration-color: currentColor; }
.points { margin: 24px 0 0; padding-inline-start: 20px; }
.points li { padding: 4px 0; text-wrap: pretty; }
.points li::marker { color: var(--faint); }
/* A run-in heading, not a block: it reads as the next sentence, not a quote. */
.why { margin-top: 16px; text-wrap: pretty; }
.why b { font-weight: 600; }
/* Facts as compact rows: label left, value right, a hairline between. */
.facts { margin: 24px 0 0; }
.facts div { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.facts div:first-child { border-top: 1px solid var(--line); }
.facts dt { font-size: 13px; line-height: 22px; color: var(--dim); }
.facts dd { margin: 0; font-size: 15px; line-height: 22px; }
a.src { font-size: 12px; line-height: 0; vertical-align: super; color: var(--faint); border-radius: 4px; padding: 8px 6px; margin: -8px -4px -8px -2px; }

.conn-group { margin: 0 0 16px; }
.conn-group ul, .rows, .types, .items ol, .links ul { list-style: none; margin: 0; padding: 0; }
.conn-group li { border-bottom: 1px solid var(--line); }
.conn { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; column-gap: 8px; min-height: 44px; padding: 10px 0; color: var(--fg); }
.conn:hover { text-decoration: none; }
.conn:hover .conn-name { text-decoration: underline; text-underline-offset: 3px; }
.conn-group li:first-child { border-top: 1px solid var(--line); }
.conn-name { font-weight: 600; color: var(--accent); }
.conn.none .conn-name { color: var(--fg); }
.conn-note { flex-basis: 100%; font-size: 13px; line-height: 18px; color: var(--dim); }

/* Pictures: a face is round, a thing's logo or cover is squared. The letter
   sits under the image and shows when there is none or it fails to load. */
.pic { position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden; background: var(--chip); color: var(--dim); font-weight: 600; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A logo from faces is served as the org made it, often transparent: lay it on white like an app icon (as public/img does), so a dark logo stays visible in dark mode and the letter never shows through. */
.pic-thing img { background: #FFFFFF; }
.pic::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; }
.pic-person { border-radius: 50%; }
.pic-56 { width: 56px; height: 56px; font: 600 20px/26px var(--serif); }
.pic-56.pic-thing { border-radius: 8px; }
.pic-32 { width: 32px; height: 32px; font-size: 13px; line-height: 18px; }
.pic-32.pic-thing { border-radius: 4px; }
/* The picture sits beside the type tag, so a long name keeps the full width. */
.ent-pic { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.ent-head .ent-pic .tag { margin: 0; }
.conn.has-pic { position: relative; padding-inline-start: 44px; }
.conn.has-pic .pic { position: absolute; inset-inline-start: 0; top: 6px; }

.items li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.items li:first-child { border-top: 1px solid var(--line); }
.it-date { margin-bottom: 4px; font-size: 13px; line-height: 18px; color: var(--dim); }
.ago { font-variant-numeric: tabular-nums; }
.it-title { font-weight: 600; text-wrap: pretty; }
.it-text { color: var(--dim); font-size: 15px; line-height: 22px; margin-top: 4px; text-wrap: pretty; }

.links ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.links li a { display: inline-block; padding: 10px 0; }

.sources ol { margin: 0; padding-inline-start: 24px; color: var(--faint); font-size: 13px; line-height: 18px; }
.sources li { padding: 4px 0; overflow-wrap: anywhere; }
.sources li:target { background: var(--chip); border-radius: 4px; }
.acc { color: var(--faint); }

.checked { margin-top: 32px; font-size: 13px; line-height: 18px; color: var(--dim); display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.report { margin-top: 12px; font-size: 13px; line-height: 18px; }
.report a { display: inline-block; padding: 13px 0; }

/* Freshbar: the house draining tag (src/lib/fresh.js). Striped = estimated date. */
button.fresh {
  display: inline-block; font: inherit; font-weight: 400; font-size: 12px; line-height: 1.35; color: var(--dim);
  border: 0; border-radius: 4px; margin: -1px 8px -1px 0; padding: 1px 6px; min-width: var(--fresh-w);
  text-align: left; font-variant-numeric: tabular-nums; cursor: help; vertical-align: 1px;
  background: linear-gradient(to right, var(--fresh) calc(var(--l, 0) * 25%), var(--chip) 0);
  /* The house hairline (podqast, remote-manage; ~/.claude/docs/freshbar.md):
     without it the drained part melts into the page and "a quarter" has
     nothing to be a quarter OF. Inset shadow, not a border: the tag does not
     grow by a pixel. */
  box-shadow: inset 0 0 0 1px var(--line);
}
button.fresh.est {
  background:
    repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--bg) 55%, transparent) 3px 5px),
    linear-gradient(to right, var(--fresh) calc(var(--l, 0) * 25%), var(--chip) 0);
}
.fresh-legend { font-size: 13px; line-height: 18px; color: var(--dim); margin: -4px 0 12px; }
.fresh-pop { max-width: min(340px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--card); color: var(--fg); font-size: 15px; line-height: 22px; box-shadow: 0 8px 30px rgb(0 0 0 / .18); }
.fresh-pop p { margin: 8px 0 12px; color: var(--dim); }
.fresh-pop button { font: 600 15px/22px var(--sans); min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.fresh-pop::backdrop { background: rgb(0 0 0 / .25); }

/* Lists */
.rows li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rows li:first-child { border-top: 1px solid var(--line); }
.row-name { display: inline-block; padding: 8px 0; margin: -8px 0; font: 600 20px/26px var(--serif); }
.row-text { color: var(--dim); font-size: 15px; line-height: 22px; margin-top: 4px; }
.types li { display: flex; justify-content: space-between; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); }
.types li:first-child { border-top: 1px solid var(--line); }
.types a { font-weight: 600; flex: 1; padding: 12px 0; }
.types .n { color: var(--dim); font-variant-numeric: tabular-nums; }
.empty { color: var(--dim); }
.search-add { display: none; margin-top: 16px; }
.owner .search-add { display: block; }
.search-add > summary { min-height: 44px; display: flex; align-items: center; color: var(--accent); cursor: pointer; font-size: 15px; }
.search-add-f { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.search-add-t { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.search-add input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: 400 16px/22px var(--sans); width: 100%; }
.search-add button { justify-self: start; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--accent); color: var(--bg); font: 600 15px/22px var(--sans); cursor: pointer; }

/* Prose pages */
.prose p { margin-top: 16px; text-wrap: pretty; }
.prose .page-head p.lede { margin-top: 8px; }
.prose code { font-size: 14px; background: var(--chip); border-radius: 4px; padding: 1px 4px; }
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px; border-radius: 8px; border: 0;
  background: var(--accent); color: var(--bg); font: 600 15px/22px var(--sans); cursor: pointer;
}
.btn:hover { text-decoration: none; }

/* Feedback */
.fb fieldset { border: 0; margin: 24px 0 0; padding: 0; }
.fb legend, .fb label.t { display: block; font-size: 13px; line-height: 18px; color: var(--dim); margin: 24px 0 4px; padding: 0; }
.fb legend { margin-top: 0; }
.fb .kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb .kinds label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; cursor: pointer; }
.fb .kinds input { margin: 0; accent-color: var(--accent); }
.fb .kinds label:has(input:checked) { border-color: var(--accent); }
.fb textarea, .fb input[type=email] { display: block; width: 100%; font: 16px/24px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.fb textarea { min-height: 160px; resize: vertical; }
.fb input[type=email] { min-height: 44px; }
.fb .btn { margin-top: 24px; }
.fb .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.prose p.fb-note, .prose p.fb-from { font-size: 13px; line-height: 18px; color: var(--dim); }
.prose p.fb-from { margin-top: 12px; overflow-wrap: anywhere; }
.prose p.fb-msg { padding: 12px; border-radius: 8px; background: var(--chip); }
.prose p.fb-msg.no { border-inline-start: 2px solid var(--fg); }

/* Footer */
.foot { margin-top: 48px; padding: 24px 0 max(32px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--dim); }
.foot nav { display: flex; gap: 24px; margin-top: 4px; }
.foot a { display: inline-block; padding: 13px 0; }
.foot nav a { color: var(--dim); }

/* Related: the header's "Related" opens a bottom sheet (src/lib/related.js). */

.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 680px; max-height: 80dvh;
  padding: 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: var(--card); color: var(--fg); box-shadow: 0 8px 30px rgb(0 0 0 / .18);
  flex-direction: column; overflow: hidden;
}
.sheet:popover-open { display: flex; }
.sheet::backdrop { background: rgb(0 0 0 / .25); } /* the scrim, same as the freshbar popover's */
.sheet-grab { display: block; width: 32px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--line); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .sheet { transition: transform .24s cubic-bezier(.2, .8, .2, 1), overlay .24s allow-discrete, display .24s allow-discrete; transform: translateY(100%); }
  .sheet:popover-open { transform: none; }
  @starting-style { .sheet:popover-open { transform: translateY(100%); } }
}
html:has(.sheet:popover-open) { overflow: hidden; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 4px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { flex: 1; margin: 0; font: 600 18px/26px var(--serif); text-wrap: balance; }
.sheet-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--dim); cursor: pointer; }
.sheet-x:hover { color: var(--fg); background: var(--chip); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 16px; }
.sheet-foot { flex: none; padding: 8px 16px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sheet-foot button { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: var(--chip); color: var(--fg); font: 600 15px/22px var(--sans); cursor: pointer; }
.sheet-foot button:active { background: var(--line); }
.sheet-group { margin-top: 16px; }
.related .sheet-group:first-of-type { margin-top: 0; }
.sheet-group:first-child { margin-top: 8px; }
.sheet-group ul { list-style: none; margin: 0; padding: 0; }
.sheet-group li { border-bottom: 1px solid var(--line); }
.sheet-group li:first-child { border-top: 1px solid var(--line); }
.rel { display: flex; flex-direction: column; min-height: 44px; padding: 10px 0; color: var(--fg); }
.rel:hover { text-decoration: none; }
.rel:hover .rel-name { text-decoration: underline; text-underline-offset: 3px; }
.rel-top { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.rel-top .tag, .conn .tag { margin-inline-start: 0; }
.rel-name { font-weight: 600; color: var(--accent); }
.rel-why { font-size: 13px; line-height: 18px; color: var(--dim); margin-top: 2px; }

/* Owner cost bubble (src/lib/cost.js): only for the owner's browser. */
.ownercost-wrap { position: fixed; inset-inline-end: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; direction: ltr; }
.ownercost-wrap[data-on='1'] .ownercost-chip, .ownercost-wrap[data-on='0'] .ownercost { display: none; }
.ownercost-chip { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--dim); font: 600 16px/1 var(--sans); box-shadow: 0 8px 30px rgb(0 0 0 / .18); cursor: pointer; }
.ownercost-chip:hover { color: var(--accent); }
.ownercost { max-width: min(320px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgb(0 0 0 / .18); font-size: 13px; line-height: 18px; color: var(--fg); }
.ownercost summary { display: flex; gap: 16px; padding: 8px 12px; cursor: pointer; list-style: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.ownercost summary::-webkit-details-marker { display: none; }
.ownercost summary small { display: block; font-weight: 400; color: var(--dim); font-size: 12px; }
.ownercost-hide { margin-inline-start: auto; align-self: center; font: 400 13px/18px var(--sans); color: var(--accent); background: none; border: 0; padding: 12px 0 12px 8px; cursor: pointer; }
.ownercost p { margin: 0; padding: 0 12px 8px; color: var(--dim); }
.ownercost ul { list-style: none; margin: 0; padding: 0 12px 8px; }
.ownercost li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }

/* Owner: adding pages (src/lib/owner-script.js). Dotted = a name with no page yet. */
button.maybe { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 3px; }
button.maybe:hover, .maybe-row:hover { text-decoration-color: var(--accent); }
.maybe-row { cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.addbar { position: fixed; left: max(12px, env(safe-area-inset-left)); right: 68px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 6; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgb(0 0 0 / .18); padding: 12px; font-size: 15px; line-height: 22px; }
.addbar[hidden] { display: none; }
/* While the add bar is up, the cost bubble steps aside; the bar takes the full width. */
.adding .ownercost-wrap { display: none; }
.adding .addbar { right: max(12px, env(safe-area-inset-right)); }
.addbar-t { overflow-wrap: anywhere; }
.addbar-b { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.addbar-go { min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--accent); color: var(--bg); font: 600 15px/22px var(--sans); cursor: pointer; }
.addbar-x { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: 400 15px/22px var(--sans); cursor: pointer; margin-inline-start: auto; }
.addbar-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .addbar-spin { animation: none; } }
@media (min-width: 720px) { .addbar { left: auto; right: 68px; width: 420px; } }

@media (min-width: 720px) {
  h1 { font-size: 38px; line-height: 44px; }
  .page-head, .ent-head, .hero { padding-top: 48px; }
}

/* Owner: page attempts (/admin/queue, src/pages/queue.js). */
.qadd-d { margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qadd-d > summary { min-height: 48px; display: list-item; padding: 12px 0; color: var(--accent); font: 600 16px/24px var(--sans); cursor: pointer; }
.qadd { display: grid; gap: 8px; padding-bottom: 16px; }
.qa-sec h2 { margin-top: 32px; }
.qadd label { font-size: 13px; line-height: 18px; color: var(--dim); margin-top: 4px; }
.qadd input, .qadd textarea { width: 100%; min-height: 44px; font: 16px/24px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.qadd input:focus-visible, .qadd textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.qadd-go { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.qadd-go button { min-height: 44px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--accent); color: var(--bg); font: 600 15px/22px var(--sans); cursor: pointer; }
.qadd-msg { font-size: 13px; line-height: 18px; color: var(--dim); }
.qa-top { display: flex; align-items: center; gap: 8px; }
.qa-top .tag { margin: 0; }
.qa-published { color: var(--accent); }
.qa-id { font-size: 13px; line-height: 18px; color: var(--faint); font-variant-numeric: tabular-nums; }
.qa-name { font-weight: 600; margin-top: 8px; }
.qa-why { font-size: 15px; line-height: 22px; margin-top: 4px; }
.qa-meta { font-size: 13px; line-height: 18px; color: var(--dim); margin-top: 4px; font-variant-numeric: tabular-nums; }
.qa-ctx { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--dim); }
.qa-ctx summary { cursor: pointer; padding: 8px 0; }
.qa-ctx p { font-size: 15px; line-height: 22px; color: var(--fg); padding-inline-start: 12px; border-inline-start: 2px solid var(--line); }
.qa-retry { margin-top: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--accent); font: 500 15px/22px var(--sans); cursor: pointer; }
.qa-retry:hover { border-color: var(--accent); }


/* Order switch above a dated list: Suggested (as written) / Newest. */
.sort { display: inline-flex; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.sort[hidden] { display: none; }
.sort button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--dim); font: 500 15px/22px var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sort button[aria-pressed='true'] { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
@media (hover: hover) { .sort button[aria-pressed='false']:hover { color: var(--fg); } }
.sort button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }