@view-transition { navigation: auto; }

/* Day = 1950s blueline (blue ink on paper). Night = classic blueprint (white on Prussian). */
:root {
  --paper:#E6EDF2;
  --paper-2:#D5E0E8;
  --field:#C5D3DE;
  --ink:#0B3A56;
  --ink-soft:#3A5F75;
  --line:#1A5F82;
  --line-bright:#2A7AA3;
  --fade:#8AA3B4;
  --ember:#8B3A28;
  --rule:rgba(11,58,86,.22);
  --rule-strong:rgba(11,58,86,.4);
  --warn:#8B3A28;
  --ok:#2E6B52;
  --display:"Space Mono",ui-monospace,monospace;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --gutter:clamp(1rem,4.2vw,1.6rem);
  --sheet-max:40.5rem;
  --head-h:4.75rem;
  --vignette:rgba(8,40,58,.55);
  color-scheme:light;
}

html[data-plate="night"] {
  --paper:#0A3350;
  --paper-2:#0D3D5E;
  --field:#062538;
  --ink:#E7F4FB;
  --ink-soft:#A7C8DB;
  --line:#B8D9EC;
  --line-bright:#D4ECF8;
  --fade:#6F97AE;
  --ember:#E0A07A;
  --rule:rgba(231,244,251,.22);
  --rule-strong:rgba(231,244,251,.38);
  --warn:#E0A07A;
  --vignette:rgba(1,8,14,.82);
  color-scheme:dark;
}

@media (prefers-color-scheme:dark) {
  html:not([data-plate]) {
    --paper:#0A3350;
    --paper-2:#0D3D5E;
    --field:#062538;
    --ink:#E7F4FB;
    --ink-soft:#A7C8DB;
    --line:#B8D9EC;
    --line-bright:#D4ECF8;
    --fade:#6F97AE;
    --ember:#E0A07A;
    --rule:rgba(231,244,251,.22);
    --rule-strong:rgba(231,244,251,.38);
    --warn:#E0A07A;
    --vignette:rgba(1,8,14,.82);
    color-scheme:dark;
  }
}

* { box-sizing:border-box; }

html {
  background:var(--field);
  scroll-padding-top:calc(var(--head-h) + .8rem);
}

body {
  min-height:100vh;
  margin:0;
  color:var(--ink);
  font:1.05rem/1.55 var(--serif);
  background-color:var(--field);
  background-image:
    /* fine construction grid */
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px),
    /* major grid every 5 units */
    linear-gradient(color-mix(in srgb,var(--line) 28%,transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--line) 28%,transparent) 1px, transparent 1px),
    /* speckled diazo grain (no SVG dependency) */
    radial-gradient(circle at 12% 18%, color-mix(in srgb,var(--ink) 14%,transparent) .6px, transparent .7px),
    radial-gradient(circle at 67% 41%, color-mix(in srgb,var(--ink) 11%,transparent) .5px, transparent .65px),
    radial-gradient(circle at 33% 73%, color-mix(in srgb,var(--ink) 12%,transparent) .55px, transparent .7px),
    radial-gradient(circle at 81% 62%, color-mix(in srgb,var(--ink) 10%,transparent) .45px, transparent .6px),
    radial-gradient(circle at 48% 9%, color-mix(in srgb,var(--line) 16%,transparent) .5px, transparent .65px);
  background-size:
    1.1rem 1.1rem,
    1.1rem 1.1rem,
    5.5rem 5.5rem,
    5.5rem 5.5rem,
    3px 3px,
    4px 4px,
    5px 5px,
    3px 5px,
    4px 3px;
  background-attachment:fixed;
}

/* Coarse paper fiber overlay */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
  opacity:.45;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='4' stitchTiles='stitch'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.55'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23a)' opacity='0.55'/></svg>");
  background-size:160px 160px;
  mix-blend-mode:multiply;
}

html[data-plate="night"] body::before {
  opacity:.35;
  mix-blend-mode:screen;
  filter:contrast(1.15);
}

@media (prefers-color-scheme:dark) {
  html:not([data-plate]) body::before {
    opacity:.35;
    mix-blend-mode:screen;
    filter:contrast(1.15);
  }
}

/* Strong sheet vignette over everything */
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:31;
  pointer-events:none;
  background:
    radial-gradient(ellipse 68% 56% at 50% 40%, transparent 15%, var(--vignette) 100%);
  mix-blend-mode:multiply;
}

html[data-plate="night"] body::after {
  mix-blend-mode:darken;
  opacity:.95;
}

@media (prefers-color-scheme:dark) {
  html:not([data-plate]) body::after {
    mix-blend-mode:darken;
    opacity:.95;
  }
}

a { color:inherit; text-decoration-color:color-mix(in srgb,var(--line) 45%,transparent); text-underline-offset:.18em; }
a:hover { color:var(--line-bright); }
button,input,textarea { font:inherit; color:inherit; }
button,a,input,textarea,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:1px solid var(--line-bright); outline-offset:3px; }

.sr-only {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* —— Title block / running head —— */
.running-head {
  position:fixed;
  z-index:50;
  inset:0 0 auto;
  min-height:var(--head-h);
  padding:.4rem var(--gutter) .25rem;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:.25rem 1rem;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  border-bottom:2px solid var(--rule-strong);
  backdrop-filter:blur(10px);
  font:400 .58rem/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:inset 0 -1px 0 var(--rule);
}

.running-head .brand {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.3rem;
  min-height:44px;
}

.running-head .mark {
  font:700 .72rem/1 var(--mono);
  letter-spacing:.16em;
  text-decoration:none;
  color:var(--ink);
}

.zone-label {
  width:fit-content;
  padding:.15rem .4rem;
  border:1px solid var(--rule-strong);
  color:var(--line);
  letter-spacing:.14em;
  background:color-mix(in srgb,var(--line) 8%,transparent);
}

.readout {
  color:var(--fade);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
  letter-spacing:.14em;
}

.running-head nav {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin-top:.15rem;
  border-top:1px solid var(--rule);
}

.running-head nav a,
.plate-toggle,
.nav-form button {
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 .7rem;
  border:0;
  border-right:1px solid var(--rule);
  background:none;
  font:inherit;
  letter-spacing:.1em;
  text-decoration:none;
  cursor:pointer;
  color:var(--ink-soft);
}

.running-head nav a:hover,
.plate-toggle:hover,
.nav-form button:hover {
  color:var(--ink);
  background:color-mix(in srgb,var(--line) 8%,transparent);
}

.nav-form { display:contents; }
.running-head nav > :last-child { border-right:0; }

.scroll-progress {
  position:absolute;
  left:0;
  bottom:-2px;
  width:var(--scroll-progress,0%);
  height:2px;
  background:var(--line-bright);
}

/* —— Drawing sheet —— */
main {
  position:relative;
  z-index:1;
  width:min(100%,var(--sheet-max));
  min-height:100vh;
  margin:auto;
  padding:calc(var(--head-h) + 1rem) 0 6.5rem;
  background:
    linear-gradient(color-mix(in srgb,var(--line) 8%,transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--line) 8%,transparent) 1px, transparent 1px),
    var(--paper);
  background-size:1.1rem 1.1rem, 1.1rem 1.1rem, auto;
  border-left:1px solid var(--rule-strong);
  border-right:1px solid var(--rule-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--line) 18%,transparent),
    0 0 0 1px var(--rule),
    0 1.25rem 2.5rem color-mix(in srgb,var(--vignette) 35%,transparent);
}

.page-heading,
.thread-heading,
.join-card,
.settings-block {
  padding:1.35rem var(--gutter) 1.4rem;
  border-bottom:1px solid var(--rule-strong);
}

.page-heading,
.thread-heading {
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--line) 6%,transparent), transparent 100%);
}

.page-heading h1,
.join-card h1 {
  margin:.4rem 0 .4rem;
  font:700 clamp(1.55rem,6.5vw,2.15rem)/1.1 var(--display);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}

.thread-heading .thread-title-lg {
  margin:.4rem 0 .15rem;
  font:700 clamp(1.25rem,5vw,1.75rem)/1.15 var(--display);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}

.page-heading p,
.thread-heading p {
  margin:.35rem 0 0;
  max-width:32rem;
  color:var(--ink-soft);
  font:400 1.02rem/1.45 var(--serif);
  letter-spacing:0;
  text-transform:none;
}

.label {
  font:400 .58rem/1.3 var(--mono)!important;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--line)!important;
}

.label a { text-decoration:none; }
.label a:hover { text-decoration:underline; }

.meta {
  font:400 .65rem/1.45 var(--mono);
  letter-spacing:.06em;
  color:var(--ink-soft);
}

.room-title,
.thread-title-lg {
  margin:.1rem 0;
  font:700 1.05rem/1.25 var(--display);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
}

/* —— Lists —— */
.rows { border-top:1px solid var(--rule); }

.thread-block { border-bottom:1px solid var(--rule-strong); }
.thread-block .thread-row { border-bottom:0; }

.room-row,
.thread-row,
.search-row {
  position:relative;
  display:grid;
  min-height:52px;
  padding:.95rem var(--gutter);
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  background:transparent;
}

.room-row:hover,
.thread-row:hover,
.search-row:hover,
.subthread-row:hover {
  background:color-mix(in srgb,var(--line) 7%,transparent);
}

.room-row { grid-template-columns:1fr; gap:.2rem; }
.row-blurb {
  overflow:hidden;
  color:var(--ink-soft);
  text-overflow:ellipsis;
  white-space:nowrap;
  font:400 .95rem/1.35 var(--serif);
  text-transform:none;
  letter-spacing:0;
}

.thread-row { grid-template-columns:1rem 1fr auto; gap:.15rem .5rem; align-items:start; }
.thread-row .thread-title-lg { grid-column:2; }
.thread-row .meta { grid-column:2; }
.thread-flags {
  grid-column:3;
  grid-row:1/3;
  display:flex;
  gap:.25rem;
  align-items:center;
  font:400 .65rem var(--mono);
}
.thread-flags span {
  padding:.15rem .3rem;
  border:1px solid var(--rule-strong);
  color:var(--line);
}

.unread-dot {
  grid-column:1;
  grid-row:1/3;
  width:.4rem;
  height:.4rem;
  margin-top:.45rem;
  border-radius:0;
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--rule-strong);
}
.is-unread .unread-dot {
  background:var(--line);
  box-shadow:none;
}

.subthread-list {
  margin:0;
  padding:0 0 .4rem;
  list-style:none;
  border-top:1px solid var(--rule);
  background:color-mix(in srgb,var(--line) 4%,transparent);
}
.subthread-list li { margin:0; }
.subthread-row {
  display:grid;
  gap:.12rem;
  padding:.55rem var(--gutter) .55rem calc(var(--gutter) + 1.25rem);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.subthread-list li:last-child .subthread-row { border-bottom:0; }
.subthread-title {
  font:700 .82rem/1.3 var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
}
.subthread-row::before {
  content:"+";
  float:left;
  margin:-.05rem 0 0 -1.05rem;
  color:var(--line);
  font:700 .75rem/1.3 var(--mono);
}

.search-row { gap:.25rem; }
.search-row > span:not(.meta) {
  color:var(--ink-soft);
  font:400 .95rem/1.4 var(--serif);
  text-transform:none;
  letter-spacing:0;
}

.empty {
  padding:3.5rem var(--gutter);
  text-align:center;
}
.empty h1,
.empty h2 {
  margin:0 auto 1rem;
  max-width:24rem;
  font:700 1.15rem/1.25 var(--display);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}

/* —— Controls —— */
.button,
.send {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:44px;
  min-height:44px;
  padding:.65rem 1rem;
  border:1px solid var(--line);
  border-radius:0;
  color:var(--paper);
  background:var(--line);
  font:700 .65rem/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}

.button:hover,
.send:hover { background:var(--line-bright); border-color:var(--line-bright); }

.hero-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.hero-actions .button { margin-top:0; }
.button-primary { min-height:46px; padding-inline:1.2rem; }
.button-secondary {
  color:var(--line);
  background:transparent;
}
.button-secondary:hover {
  color:var(--ink);
  background:color-mix(in srgb,var(--line) 10%,transparent);
}
.button-danger {
  color:var(--paper);
  background:var(--warn);
  border-color:var(--warn);
}
.page-heading .button { margin-top:1rem; }
.page-heading .hero-actions .button { margin-top:0; }
.hero-actions form { margin:0; }

.pagination {
  display:flex;
  justify-content:space-between;
  padding:.9rem var(--gutter);
  font:400 .62rem var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  border-top:1px solid var(--rule);
}
.pagination a {
  min-height:44px;
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--line);
}

/* —— Posts —— */
.thread-heading { padding-bottom:1.15rem; }
.subthread-heading {
  padding:.85rem var(--gutter) .65rem;
  border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--line) 5%,transparent);
}
.subthread-heading p { margin:0; }
.overview-post .post {
  background:color-mix(in srgb,var(--line) 4%,var(--paper));
}

.posts { border-top:1px solid var(--rule-strong); }

.post {
  position:relative;
  padding:1.05rem var(--gutter) 1.1rem;
  border-bottom:1px solid var(--rule);
  background:var(--paper);
}

.post.is-own {
  box-shadow:inset 2px 0 0 var(--line);
  background:linear-gradient(90deg, color-mix(in srgb,var(--line) 6%,var(--paper)), var(--paper) 2rem);
}

.post-meta { margin-bottom:.7rem; }
.post-meta a {
  text-decoration:none;
  color:var(--line);
  font-weight:700;
}

.post-body {
  overflow-wrap:anywhere;
  font:400 1.08rem/1.65 var(--serif);
  color:var(--ink);
  text-transform:none;
  letter-spacing:0;
}
.post-body > :first-child { margin-top:0; }
.post-body > :last-child { margin-bottom:0; }
.post-body p { margin:0 0 .85rem; }
.post-body strong { font-weight:600; }
.post-body pre {
  overflow:auto;
  padding:.8rem .9rem;
  background:var(--paper-2);
  border-left:2px solid var(--line);
  font:400 .82rem/1.5 var(--mono);
}
.post-body code { font:.84em/1.5 var(--mono); }
.post-body blockquote {
  margin:.9rem 0;
  padding:.1rem 0 .1rem .9rem;
  border-left:2px solid var(--line);
  color:var(--ink-soft);
  font-style:italic;
}

.quote-block {
  display:block;
  margin:.1rem 0 .75rem;
  padding:.55rem .7rem;
  border-left:2px solid var(--rule-strong);
  color:var(--ink-soft);
  background:color-mix(in srgb,var(--line) 5%,transparent);
  font:400 .65rem/1.45 var(--mono);
  text-decoration:none;
}

.post-actions {
  display:flex;
  align-items:flex-start;
  gap:.1rem;
  margin-top:.8rem;
  padding-top:.35rem;
  border-top:1px solid var(--rule);
}

.post-actions > button,
.post-actions summary,
.post-actions form button {
  min-width:44px;
  min-height:40px;
  padding:.5rem .45rem;
  border:0;
  background:none;
  color:var(--ink-soft);
  font:400 .6rem/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
}

.post-actions > button:hover,
.post-actions summary:hover { color:var(--line); }
.post-actions form { margin:0; }

.edit-post { flex:0 1 auto; }
.edit-post form { display:grid; gap:.5rem; margin-top:.4rem; }
.edit-post textarea { min-height:10rem; }
details.edit-post[open] > summary { color:var(--line); }

.post-danger { margin-left:auto; }
.post-danger summary {
  min-width:44px;
  min-height:40px;
  padding:.5rem .45rem;
  cursor:pointer;
  list-style:none;
  font:400 .6rem/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.post-danger summary::-webkit-details-marker { display:none; }
.post-danger form { padding:.1rem .45rem .5rem; }

.danger-zone {
  margin:1.4rem var(--gutter) 2rem;
  padding:.5rem 0 0;
  border-top:1px dashed var(--rule-strong);
}
.danger-zone summary {
  width:fit-content;
  min-height:36px;
  display:flex;
  align-items:center;
  cursor:pointer;
  list-style:none;
  font:400 .58rem/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fade);
}
.danger-zone summary::-webkit-details-marker { display:none; }
.danger-zone[open] summary { color:var(--warn); margin-bottom:.5rem; }
.danger-zone p { margin:0 0 .55rem; }
.link-danger {
  min-height:36px;
  padding:0;
  border:0;
  background:none;
  color:var(--warn);
  font:400 .62rem/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:.18em;
  cursor:pointer;
  opacity:.8;
}
.link-danger:hover { opacity:1; }

.new-divider {
  position:relative;
  height:2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
}
.new-divider::before {
  content:"";
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  border-top:1px solid var(--ember);
}
.new-divider span {
  z-index:1;
  padding:0 .55rem;
  color:var(--ember);
  background:var(--paper);
  font:700 .58rem var(--mono);
  letter-spacing:.18em;
}

.new-posts-pill {
  position:fixed;
  z-index:45;
  top:calc(var(--head-h) + .55rem);
  left:50%;
  transform:translateX(-50%);
  min-height:44px;
  padding:.65rem 1rem;
  border:1px solid var(--rule-strong);
  border-radius:0;
  color:var(--ink);
  background:var(--paper);
  font:700 .62rem var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}

.floating-quote {
  position:fixed;
  z-index:30;
  min-width:60px;
  min-height:44px;
  padding:.5rem .7rem;
  border:1px solid var(--rule-strong);
  border-radius:0;
  color:var(--ink);
  background:var(--paper);
  font:700 .62rem var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}

/* —— Composer —— */
.composer {
  position:sticky;
  z-index:10;
  bottom:0;
  width:100%;
  padding:.6rem calc(var(--gutter) + env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:end;
  gap:.4rem;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  border-top:2px solid var(--rule-strong);
  backdrop-filter:blur(12px);
}

.thread-page main { padding-bottom:0; }

.composer textarea {
  grid-column:1;
  width:100%;
  min-height:48px;
  max-height:40vh;
  padding:.7rem .8rem;
  resize:none;
  border:1px solid var(--rule-strong);
  border-radius:0;
  background:var(--paper-2);
  font:400 1.02rem/1.45 var(--serif);
}

.composer .send { grid-column:3; min-width:5.25rem; }
.reply-chip {
  grid-column:1/-1;
  padding:.35rem .55rem;
  border:1px solid var(--rule);
  background:var(--paper);
  font:400 .65rem var(--mono);
}
.reply-chip button { float:right; min-width:32px; border:0; background:none; cursor:pointer; }
.draft-status { position:absolute; right:calc(var(--gutter) + 4rem); bottom:.1rem; }
.composer .paste-note,
.composer .no-ai-status {
  grid-column:1 / -1;
  margin:0;
  font-size:.58rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--line);
}

.markdown-hint { grid-column:2; }
.markdown-hint summary {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--rule-strong);
  background:var(--paper);
  cursor:pointer;
  font:700 .7rem var(--mono);
  color:var(--line);
}
.markdown-hint span {
  position:absolute;
  right:var(--gutter);
  bottom:4.2rem;
  max-width:17rem;
  padding:.7rem;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  font:400 .65rem/1.4 var(--mono);
}

.post.is-pending { opacity:.55; }
.post.is-failed { opacity:1; box-shadow:inset 2px 0 0 var(--warn); }

.quiet-note {
  padding:1rem var(--gutter);
  color:var(--ink-soft);
  font:400 .68rem/1.45 var(--mono);
  letter-spacing:.06em;
  border-top:1px solid var(--rule);
}

/* —— Forms —— */
.stack-form { display:grid; gap:.65rem; padding:1.3rem var(--gutter); }
.stack-form label,
.inline-form label {
  font:400 .62rem var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

input,
textarea {
  width:100%;
  min-height:46px;
  padding:.65rem .75rem;
  border:1px solid var(--rule-strong);
  border-radius:0;
  background:var(--paper-2);
}

input:focus,
textarea:focus {
  border-color:var(--line);
  background:var(--paper);
  outline:none;
}

textarea {
  min-height:12rem;
  resize:vertical;
  font:400 1.02rem/1.5 var(--serif);
}

.form-error {
  margin:1rem var(--gutter) 0;
  padding:.75rem .85rem;
  border-left:2px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,var(--paper-2));
  font:400 .95rem/1.4 var(--serif);
}

.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.prefixed-input {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.35rem;
  font:400 1rem var(--mono);
  color:var(--line);
}

.join-card {
  max-width:32rem;
  margin:5vh auto;
  border:1px solid var(--rule-strong);
  background:var(--paper);
  box-shadow:0 1rem 2rem color-mix(in srgb,var(--vignette) 30%,transparent);
}

.join-card > p:not(.label) { color:var(--ink-soft); }

.search-form,
.inline-form { display:flex; gap:.5rem; margin-top:1rem; }
.search-form input,
.inline-form input { flex:1; }

.settings-block h2 {
  margin:.25rem 0;
  font:700 1.05rem var(--display);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
}
.settings-block fieldset { border:1px solid var(--rule); padding:.7rem; }
.settings-block fieldset label {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-right:1rem;
  text-transform:none;
  letter-spacing:.02em;
}
.settings-block input[type="radio"] { width:auto; min-height:auto; margin-right:.35rem; }

.invite-list,
.request-list {
  margin:1rem 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--rule);
}
.invite-list li,
.request-list li {
  display:grid;
  gap:.3rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--rule);
  overflow-wrap:anywhere;
}
.request-list p { margin:0; color:var(--ink-soft); }
.request-list form { justify-self:start; }

@media (min-width:42rem) {
  :root { --head-h:3.35rem; }

  .running-head {
    grid-template-columns:auto 1fr auto;
    min-height:var(--head-h);
    padding-block:.1rem;
  }

  .running-head .brand {
    grid-column:1;
    flex-direction:row;
    align-items:center;
    gap:.7rem;
  }
  .readout { grid-column:2; text-align:left; padding-left:.4rem; }
  .running-head nav {
    grid-column:3;
    margin:0;
    border-top:0;
    justify-content:flex-end;
  }
  .running-head nav a,
  .plate-toggle,
  .nav-form button {
    min-height:44px;
    border-right:0;
    border-left:1px solid var(--rule);
  }
  .running-head nav > :first-child { border-left:0; }

  main {
    margin-top:1.6rem;
    margin-bottom:2.25rem;
    min-height:calc(100vh - 3.85rem);
    padding-top:calc(var(--head-h) + 1.25rem);
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}