/* The QOR shell stylesheet (T-112 §1.4 → T-116 §1.1 → T-119) — the editorial
   pass on the tokens.css layer (loaded BEFORE this file everywhere). The three
   moves (t-119 §1): serif speaks / system serves; the overline is the meta
   voice; hairlines separate, boxes work. Base rules ARE the phone; the
   min-width query is the wide-viewport form of the SAME CSS. Single column,
   tap targets >= 44px, no horizontal scroll anywhere (T-112 §1.4 holds).

   The calm laws as CSS law (t-119 §1): NO keyframes, transitions are
   color/border/background only and <= 150ms (dead under
   prefers-reduced-motion), no digits in pseudo-content, danger is never red. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--text-base)/var(--leading) var(--font-system);
  color: var(--ink);
  background: var(--paper);
  overflow-wrap: break-word;   /* no horizontal scroll, ever (T-112 §1.4) */
}

/* the single-column member surface + every SSR page mount here */
#app, main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s4);
}

/* serif speaks (t-119 move 1): every heading is editorial */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  color: var(--ink);
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-deep); text-decoration: underline; text-underline-offset: 0.15em; }

::selection { background: var(--ring); }

/* the ONE focus treatment (t-119 §1.2): visible on every interactive element */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* motion law: color/border/background ONLY (spec §1) — the focus ring and
   shadows appear instantly, which is better a11y anyway (diff-gate finding 3) */
a, button, input, textarea, .qor-tab {
  transition: color var(--ease), background-color var(--ease),
              border-color var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* media never forces a horizontal scroll (the T-102 renderers size the tile) */
img, video, figure { max-width: 100%; height: auto; }
figure { margin: var(--s4) 0; }

/* tap targets: everything interactive clears 44px (T-112 §1.4) */
button,
input,
textarea,
select,
.qor-nav a {
  min-height: var(--tap);
  font: inherit;
}

/* chrome stays on the system stack even inside a serif reading surface */
button, input, textarea, select { font-family: var(--font-system); }

button {
  padding: var(--s2) var(--s4);
  cursor: pointer;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
button:not([disabled]):hover { background: var(--wash); border-color: var(--line-strong); }
button[disabled] { opacity: 0.55; cursor: default; }

/* the composer + editors usable at 390px: full-width fields, no overflow */
input,
textarea {
  width: 100%;
  max-width: 100%;
  padding: var(--s2) var(--s3);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
}
textarea { min-height: calc(var(--tap) * 2); resize: vertical; line-height: var(--leading); }

/* ── the overline: the meta voice (t-119 move 2) ─────────────────────────────
   dates, states, labels, bylines — everything that DESCRIBES rather than IS.
   (Georgian has no case; uppercase yields Mtavruli — a heading form.) */
header .pen-name,
.qor-field-label,
.qor-digest-count,
.qor-digest-day-label,
.qor-digest-byline,
.qor-digest-publication-kind,
.qor-reply-byline,
.qor-publication-state,
.qor-request-pending,
.qor-page-add-label,
.qor-shelf-date,
.qor-chip-label,
.qor-preview-domain,
.qor-digest-order-label,
.qor-pubdate {
  font-family: var(--font-system);
  font-size: var(--overline-size);
  font-weight: 500;
  letter-spacing: var(--overline-ls);
  text-transform: uppercase;
  color: var(--muted);
}

/* ── the app chrome (t-119 §1.2) ─────────────────────────────────────────── */

/* the member header: wordmark · nav · pen-name, one wrapping row, hairline under */
main > header {
  display: flex;
  flex-wrap: wrap;              /* long pen names + ka labels wrap, never overflow */
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding: var(--s3) 0;
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
main > header h1 { font-size: var(--step-2); margin: 0; }
main > header .qor-nav { margin-left: auto; padding: 0; }
header .pen-name { align-self: center; }

.qor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  padding: var(--s2) 0;
}
.qor-nav a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--muted);
}
.qor-nav a:hover { color: var(--ink); text-decoration: none; }

/* the calm tab bar (§1.2/§1.3) — real links, NO badge/count, ever */
.qor-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: 0;
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.qor-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  text-decoration: none;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: var(--overline-ls);
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;          /* the underline sits ON the bar's hairline */
}
.qor-tab:hover { color: var(--ink); text-decoration: none; }
.qor-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--amber); }

/* ── the component vocabulary (T-116 §1.2, dressed by t-119 §1.3) ──────────── */

/* button kinds */
.qor-btn { border-radius: var(--radius-sm); }
.qor-btn--primary { color: var(--paper); background: var(--amber); border-color: var(--amber); }
.qor-btn--primary:not([disabled]):hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.qor-btn--ghost { color: var(--muted); background: transparent; border-color: transparent; }
.qor-btn--ghost:not([disabled]):hover { color: var(--ink); background: var(--wash); border-color: transparent; }
.qor-btn--danger { color: var(--paper); background: var(--muted); border-color: var(--muted); }
.qor-btn[disabled] { opacity: 0.55; cursor: default; }

/* the quiet control (t-119 §1.3): every small inline act, one voice —
   text-level, muted → amber, still a 44px target */
.qor-share-delete,
.qor-share-delete-confirm button,
.qor-reply-take-back,
.qor-reply-send,
.qor-thread-earlier,
.qor-digest-chapter-header,
.qor-requests-set-aside-header,
.qor-publication-open,
.qor-request-in button,
.qor-request-set-aside button,
.qor-request-out button {
  display: inline-flex;
  align-items: center;
  padding: var(--s1) var(--s2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
}
.qor-share-delete:not([disabled]):hover,
.qor-share-delete-confirm button:not([disabled]):hover,
.qor-reply-take-back:not([disabled]):hover,
.qor-reply-send:not([disabled]):hover,
.qor-thread-earlier:not([disabled]):hover,
.qor-digest-chapter-header:not([disabled]):hover,
.qor-requests-set-aside-header:not([disabled]):hover,
.qor-publication-open:not([disabled]):hover,
.qor-request-in button:not([disabled]):hover,
.qor-request-set-aside button:not([disabled]):hover,
.qor-request-out button:not([disabled]):hover {
  color: var(--amber-deep);
  background: var(--wash);
  border: none;
}

/* text field + its a11y error line (§1.2) */
.qor-field { display: block; margin: var(--s3) 0; }
.qor-field-label { display: block; margin-bottom: var(--s1); }
.qor-field-error { color: var(--muted); font-size: var(--text-sm); margin-top: var(--s1); }
.qor-field-input[aria-invalid="true"] { border-color: var(--amber); box-shadow: 0 0 0 3px var(--ring); }

/* card + section header */
.qor-card {
  margin: var(--s4) 0;
  padding: var(--s4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.qor-section-header { margin: var(--s5) 0 var(--s3); }

/* the notice inline line (§1.2): findable, never loud — a hairline rail */
.qor-notice {
  padding: var(--s1) var(--s3);
  border-left: 2px solid var(--muted);
  border-radius: 0;
}
.qor-notice--error   { color: var(--muted); }
.qor-notice--success { color: var(--pine); border-left-color: var(--pine); }
.qor-notice--info    { color: var(--muted); }

/* every calm refusal line, one voice (t-119 §1.9b) */
.qor-composer-error,
.qor-page-error,
.qor-digest-error,
.qor-befriend-error,
.qor-share-error,
.qor-reply-error,
.qor-request-error,
.qor-export-error { color: var(--muted); font-size: var(--text-sm); }

/* the one toast render site (§1.4) */
.qor-toasts {
  position: fixed;
  left: 50%;
  bottom: var(--s5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: var(--measure);
  width: calc(100% - var(--s6));
  z-index: 10;
}
.qor-toast {
  padding: var(--s3) var(--s4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-left-color: var(--muted);
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.qor-toast--success { border-left-color: var(--pine); }

/* empty states: a librarian's note, never a void that begs */
.qor-empty-state,
.qor-digest-empty {
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
  padding: var(--s4) 0;
}
.qor-byline { color: var(--muted); font-size: var(--text-sm); }

/* the ONE modal (§1.2) */
.qor-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(38, 35, 25, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  z-index: 20;
}
.qor-modal {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  max-width: var(--measure);
  width: 100%;
  box-shadow: var(--shadow-soft);
}
.qor-modal-title { margin: 0 0 var(--s3); padding-right: var(--s7); }   /* clears the absolute × */
.qor-modal-close {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  margin: 0;
  padding: var(--s1) var(--s3);
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: var(--text-lg);
}
.qor-modal-close:not([disabled]):hover { color: var(--ink); background: var(--wash); border: none; }

/* ── the block renderers (t-119 §1.4 — every scope reads the same) ─────────── */

.qor-block { font-family: var(--font-serif); font-size: var(--text-reading); line-height: var(--leading-reading); }
.qor-text p { margin: 0 0 var(--s4); }
.qor-text p:last-child { margin-bottom: 0; }

.qor-block img, .qor-block video { border-radius: var(--radius); display: block; }
.qor-block figcaption { color: var(--muted); font-size: var(--text-sm); margin-top: var(--s2); font-family: var(--font-system); }

.qor-quote {
  border-left: 2px solid var(--line-strong);
  padding: var(--s1) 0 var(--s1) var(--s4);
}
.qor-quote blockquote {
  margin: 0;
  font-size: var(--text-lg);
  font-style: italic;
}
.qor-quote figcaption::before { content: "— "; }   /* punctuation, not copy */

.qor-link-card {
  display: block;
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-system);
  font-size: var(--text-base);
  line-height: var(--leading);
  text-decoration: none;
}
a.qor-link-card:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
/* a captioned card (T-120 §1.5): the figure carries the block margin */
.qor-link-card-figure .qor-link-card { margin: 0; }
.qor-link-card-title { display: block; font-weight: 500; }
.qor-link-card-desc { display: block; color: var(--muted); font-size: var(--text-sm); margin-top: var(--s1); }
.qor-link-card-domain {
  display: block;
  margin-top: var(--s2);
  font-size: var(--overline-size);
  font-weight: 500;
  letter-spacing: var(--overline-ls);
  text-transform: uppercase;
  color: var(--muted);
}

/* a single photo in the FLOW surfaces is bounded (T-119 walk finding
   2026-07-15: a portrait upload ran 1.5 screens and broke the day-book's
   rhythm) — the reader serves the full frame, the digest serves the day */
.qor-photo img { max-height: 34rem; width: auto; max-width: 100%; }

/* photo grids: one column on the phone, tight mortar; widened past the fold.
   Cells are EQUALIZED (same walk finding: two intrinsic ratios rendered a
   lopsided pair with dead air under the shorter frame) — the grid is a
   contact sheet, the reader is the print */
.qor-photo-pair-grid img,
.qor-photo-wall-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.qor-photo-pair-grid,
.qor-photo-wall-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
}

/* ── the digest (t-119 §1.5 — the flagship): hairlines, not boxes ──────────── */

.qor-digest-count { margin: var(--s4) 0 var(--s2); }

.qor-digest-day { margin-top: var(--s5); }
.qor-digest-day-label {
  margin: 0;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.qor-digest-day-items > * { padding: var(--s5) 0; }
.qor-digest-day-items > * + * { border-top: 1px solid var(--line); }

.qor-digest-item { font-family: var(--font-serif); font-size: var(--text-reading); line-height: var(--leading-reading); }
.qor-digest-byline { margin: 0 0 var(--s2); }

/* the collapsed publication announcement — announce, don't flood; beautifully */
a.qor-digest-publication {
  display: block;
  margin: var(--s3) 0;   /* air between the card's border and the row hairlines */
  padding: var(--s4) var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
a.qor-digest-publication:hover { background: var(--wash); border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.qor-digest-publication-title { font-size: var(--step-1); margin: var(--s1) 0; }
.qor-digest-publication-kind { margin: 0; }

/* the resonance item (a reply in the digest): quiet, content-first */
.qor-digest-reply,
.qor-digest-reply-text,
.qor-digest-reply-context { font-family: var(--font-serif); }
.qor-digest-reply-context { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--s2); }
.qor-digest-reply-text { margin: 0; font-size: var(--text-reading); line-height: var(--leading-reading); }

/* "you're all caught up" — the end-mark; a real place (t-119 §1.5) */
.qor-digest-caught-up {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  width: 100%;
  margin: var(--s6) 0;
  padding: var(--s2) 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: var(--text-sm);
}
.qor-digest-caught-up::before,
.qor-digest-caught-up::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
button.qor-digest-caught-up:not([disabled]):hover { color: var(--ink); background: transparent; border: none; }

/* collapsed chapters: recession is a quiet shelf, never a nag */
.qor-digest-chapter { margin: var(--s2) 0; }
.qor-digest-chapter-header {
  font-size: var(--overline-size);
  font-weight: 500;
  letter-spacing: var(--overline-ls);
  text-transform: uppercase;
}
.qor-digest-chapter-items > * { padding: var(--s5) 0; }
.qor-digest-chapter-items > * + * { border-top: 1px solid var(--line); }

/* ── shares: the bench and the flow (t-119 §1.6) ───────────────────────────── */

/* the folded composer: a full-width invitation (POSITIONAL selector — spec
   §1.6 recorded fragility: the tab bar's next sibling is the fold button on
   the Shares tab only; if anything mounts between, this calmly reverts) */
.qor-tab-bar + .qor-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: var(--s4) 0;
  padding: var(--s3);
  background: transparent;
  color: var(--muted);
}
.qor-tab-bar + .qor-btn:not([disabled]):hover { background: var(--wash); color: var(--ink); }

/* the unfolded composer: a working surface — the bench, not the page */
.qor-composer {
  margin: var(--s4) 0;
  padding: var(--s5);
  background: var(--wash);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
/* the writing-first surface (T-120 §1.1): the field IS the composer */
.qor-composer-text { width: 100%; min-height: calc(var(--tap) * 2.5); }

/* the one quiet row under the field (T-120 §1.2): attach + state chips */
.qor-composer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s2);
}
.qor-composer-attach {
  cursor: pointer;
  font-family: var(--font-system);
  font-size: var(--overline-size);
  font-weight: 500;
  letter-spacing: var(--overline-ls);
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--s1) 0;
}
.qor-composer-attach:hover { color: var(--ink); }
/* the file input stays in the tab order, visually hidden — the label carries
   the focus ring via :focus-within (the T-119 focus law) */
.qor-composer-attach input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.qor-composer-attach:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.qor-composer-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.qor-chip-name { color: var(--muted); font-size: var(--text-sm); }
.qor-chip-alt { max-width: 18rem; }
.qor-composer-chip .qor-btn { margin: 0; }

/* the advisory preview card (T-120 §1.4): quiet, removable */
.qor-composer-preview {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.qor-preview-title { margin: 0; overflow-wrap: anywhere; }
.qor-preview-domain { margin: var(--s1) 0 0; }
.qor-composer-preview .qor-btn { margin-top: var(--s2); }

/* the ISS-020 quiet hint, composer voice */
.qor-composer-hint { color: var(--muted); font-size: 0.9rem; margin: var(--s3) 0 0; }

/* the shape/add pickers: one pill voice (the composer's pills retired, T-120) */
.qor-page-shapes,
.qor-publish-actions,
.qor-page-section-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.qor-page-shapes button,
.qor-page-add button {
  border-radius: 999px;
  padding: var(--s1) var(--s4);
  font-size: var(--text-sm);
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.qor-page-shapes button:not([disabled]):hover,
.qor-page-add button:not([disabled]):hover { color: var(--ink); background: var(--paper-raised); }
.qor-page-section-fields { display: block; }
.qor-composer .qor-btn { margin-top: var(--s3); margin-right: var(--s2); }

/* progress: uploading is a fact, not a show (t-119 §1.9b) */
.qor-composer-progress,
.qor-page-uploading,
.qor-page-media-attached { color: var(--muted); font-size: var(--text-sm); }

/* own shares: the same hairline flow the digest reads in */
.qor-shares > * { padding: var(--s5) 0; }
.qor-shares > * + * { border-top: 1px solid var(--line); }
.qor-share {
  font-family: var(--font-serif);
  font-size: var(--text-reading);
  line-height: var(--leading-reading);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.qor-share > * { max-width: 100%; }
.qor-share .qor-share-delete,
.qor-share .qor-share-delete-confirm { align-self: flex-end; margin-top: var(--s2); }

/* the media states: a labeled resting place, not a broken hole (§1.9b) */
.qor-media-unavailable,
.qor-share-errored,
.qor-share-processing {
  color: var(--muted);
  font-family: var(--font-system);
  font-size: var(--text-sm);
  background: var(--wash);
  border-radius: var(--radius);
  padding: var(--s4);
  margin: var(--s2) 0;
}

/* threads: marginalia under their share (t-119 §1.6) */
.qor-thread {
  margin-top: var(--s4);
  padding-left: var(--s4);
  border-left: 1px solid var(--line);
  width: 100%;
  font-family: var(--font-system);
}
.qor-thread-replies { list-style: none; margin: 0; padding: 0; }
.qor-reply { padding: var(--s2) 0; }
.qor-reply-byline { margin: 0; }   /* the overline group above carries the voice */
.qor-reply-text { margin: var(--s1) 0; font-family: var(--font-serif); }
.qor-reply-composer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.qor-reply-composer .qor-reply-input { flex: 1; min-width: 0; }
/* a refusal breaks BELOW the field, never squeezed beside Send */
.qor-reply-composer .qor-reply-error { flex-basis: 100%; margin: 0; }

/* ── the page: the exhibition at home (t-119 §1.7) ─────────────────────────── */

.qor-page-view > .qor-block { margin: var(--s4) 0 var(--s5); }
.qor-page-draft-note,
.qor-page-publish-consequence,
.qor-page-public,
.qor-publication-public { color: var(--muted); font-size: var(--text-sm); }
/* the fact lines sit under a hairline (spec §1.7) — draft AND published */
.qor-page-draft-note,
.qor-page-public,
.qor-publication-public { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s5); }

/* publish is the primary act; unpublish a quiet one (mirrors the ui kinds) */
.qor-page-publish,
.qor-publication-publish,
.qor-publish-confirm { color: var(--paper); background: var(--amber); border-color: var(--amber); }
.qor-page-publish:not([disabled]):hover,
.qor-publication-publish:not([disabled]):hover,
.qor-publish-confirm:not([disabled]):hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.qor-page-unpublish,
.qor-publication-unpublish,
.qor-publish-cancel { color: var(--muted); background: transparent; border-color: transparent; }
.qor-page-unpublish:not([disabled]):hover,
.qor-publication-unpublish:not([disabled]):hover,
.qor-publish-cancel:not([disabled]):hover { color: var(--ink); background: var(--wash); border-color: transparent; }

/* the page editor: section cards are working surfaces (boxes stay here) */
.qor-page-sections { display: block; }
.qor-page-section {
  margin: var(--s4) 0;
  padding: var(--s4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.qor-page-section-fields > div > input,
.qor-page-section-fields > div > textarea { margin-top: var(--s2); }
.qor-page-section-controls { margin-top: var(--s3); }
.qor-page-section-controls button {
  padding: var(--s1) var(--s2);
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: var(--text-sm);
}
.qor-page-section-controls button:not([disabled]):hover { color: var(--amber-deep); background: var(--wash); border: none; }
.qor-page-add { margin: var(--s4) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.qor-page-editor .qor-btn { margin-top: var(--s3); margin-right: var(--s2); }
.qor-page-editing-published,
.qor-publication-editing-published { color: var(--muted); font-size: var(--text-sm); }

/* ── publications: the desk and the writing room (t-119 §1.8) ──────────────── */

.qor-publications-list { list-style: none; margin: var(--s4) 0; padding: 0; }
.qor-publication-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s2) 0;
  border-top: 1px solid var(--line);
}
.qor-publication-row:last-child { border-bottom: 1px solid var(--line); }
.qor-publication-row:hover { background: var(--wash); }
.qor-publication-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
}
.qor-publication-open { margin-left: auto; }

/* the view: reader-adjacent */
.qor-publication-view-title { font-size: var(--step-3); margin: var(--s4) 0 var(--s2); }
.qor-publication-view-subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--muted);
  margin: 0 0 var(--s4);
}
.qor-publication-view > .qor-block { margin-bottom: var(--s5); }
.qor-publication-view .qor-btn { margin-right: var(--s2); }

/* the editor: an input that looks like the title it will be. The three
   REQUIRED properties (spec §1.8): the hairline underneath, the muted
   placeholder (global), the focus ring — none may be dropped. */
.qor-publication-title-input,
.qor-publication-subtitle-input {
  font-family: var(--font-serif);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s2) 0;
}
.qor-publication-title-input { font-size: var(--step-2); font-weight: 600; }
.qor-publication-subtitle-input { font-size: var(--text-lg); margin-bottom: var(--s3); }
.qor-publication-title-input:focus,
.qor-publication-subtitle-input:focus {
  border-color: var(--line-strong);
  border-bottom-color: var(--amber);
  box-shadow: 0 0 0 3px var(--ring);
}
/* an EMPTY headline input must read as a prompt, not a rendered heading —
   the muted-at-full-weight placeholder cost the founder his title TWICE in
   one walk (ISS-020): "Title" looked typeset, so the eye typed a line below */
.qor-publication-title-input::placeholder,
.qor-publication-subtitle-input::placeholder {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  opacity: 0.5;
}
/* ISS-020's voice: the quiet line explaining why Save withholds itself */
.qor-publication-hint { color: var(--muted); font-size: 0.9rem; margin: var(--s3) 0 0; }
.qor-publication-editor .qor-btn { margin-top: var(--s3); margin-right: var(--s2); }

/* the writing surface: ProseMirror in the serif reading voice */
.qor-prose {
  margin: var(--s3) 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.qor-prose:focus-within { border-color: var(--line-strong); }
.qor-prose-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border-bottom: 1px solid var(--line);
}
.qor-prose-btn {
  min-height: var(--tap);
  padding: var(--s1) var(--s3);
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: var(--text-sm);
}
.qor-prose-btn:not([disabled]):hover { color: var(--ink); background: var(--wash); border: none; }
.qor-prose-host { padding: var(--s3) var(--s4); }
.qor-prose-host .ProseMirror {
  outline: none;
  font-family: var(--font-serif);
  font-size: var(--text-reading);
  line-height: var(--leading-reading);
  min-height: 12rem;
  /* PM's contract (its console warning is right): without pre-wrap,
     consecutive spaces and soft breaks collapse while editing */
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* the publish dialog: the one consent moment — it may sit up straight */
.qor-publish-dialog {
  margin: var(--s4) 0;
  padding: var(--s5);
  background: var(--wash);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.qor-publish-signs { margin-top: 0; }
.qor-publish-open-web { color: var(--muted); font-size: var(--text-sm); }
.qor-publish-url { font-size: var(--text-sm); }

/* the byline consent controls sit on ONE line with their sentence (T-118
   §1.5): both callsites, same anatomy. The LABEL is the 44px tap target;
   the box itself sizes like a checkbox. */
.qor-publications-byline,
.qor-publish-byline {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
}
.qor-publications-byline input[type="checkbox"],
.qor-publish-byline input[type="checkbox"] {
  min-height: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex: none;
  accent-color: var(--amber);
}

/* ── people + things (t-119 §1.9) ──────────────────────────────────────────── */

/* descendant, not child (diff-gate finding 1): the request lists nest their
   ULs inside divs — child-only left them browser-indented 40px beside a
   flush friends list. The classed lists' own rules win where they differ. */
main section ul { list-style: none; margin: var(--s2) 0; padding: 0; }

.qor-request-in,
.qor-request-out,
.qor-request-set-aside,
main li:has(> .pen-name) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  padding: var(--s2) 0;
  border-top: 1px solid var(--line);
}
li .pen-name { font-family: var(--font-serif); font-weight: 600; }
li .real-name { color: var(--muted); font-size: var(--text-sm); }

.qor-export {
  margin: var(--s5) 0;
  padding: var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.qor-export h2 { margin-top: 0; font-size: var(--step-1); }
.qor-export-building, .qor-export-expiry { color: var(--muted); font-size: var(--text-sm); }

/* the digest ordering choice (T-121 §3.4): a quiet Things control */
.qor-digest-order { margin: var(--s5) 0; }
.qor-digest-order-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}
.qor-digest-order-options button {
  border-radius: 999px;
  padding: var(--s1) var(--s4);
  font-size: var(--text-sm);
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.qor-digest-order-options button:not([disabled]):hover { color: var(--ink); background: var(--paper-raised); }
.qor-digest-order-options button.is-selected {
  background: var(--paper-raised);
  border-color: var(--line-strong);
  color: var(--ink);
}
.qor-digest-order-explainer { color: var(--muted); font-size: var(--text-sm); margin: var(--s2) 0 0; }
.qor-digest-order-error { color: var(--muted); font-size: var(--text-sm); }

/* ── the calm states (t-119 §1.9b) ─────────────────────────────────────────── */

.connecting,
.pending-logout,
.signed-out {
  text-align: center;
  margin-top: var(--s7);
  font-family: var(--font-serif);
  color: var(--muted);
}
.pending-logout button { margin-top: var(--s3); }

.qor-befriend-prompt { font-family: var(--font-serif); font-size: var(--text-lg); }

/* /privacy — the honesty page (A6 ruling 2026-07-16): the reading voice,
   left-set unlike the centered welcome — it is read, not glanced */
main.qor-privacy { max-width: 34rem; margin: 0 auto; padding: var(--s6) var(--s4); }
.qor-privacy-wordmark { font-family: var(--font-serif); }
.qor-privacy-wordmark a { text-decoration: none; }
main.qor-privacy h1 { font-family: var(--font-serif); font-weight: 400; }
main.qor-privacy p:not(.qor-privacy-wordmark) {
  font-family: var(--font-serif);
  font-size: var(--text-reading);
  line-height: var(--leading-reading);
}

/* the in-app not-found surface (ISS-023): calm bearings, the way home */
.qor-not-found { text-align: center; margin-top: var(--s7); }
.qor-not-found-title { font-family: var(--font-serif); font-weight: 400; }
.qor-not-found-line { color: var(--muted); }
.qor-not-found-home { display: inline-block; margin-top: var(--s3); }

/* ── the doors + the welcome (SSR — t-119 §1.10) ───────────────────────────── */

/* the SSR welcome (T-112 §1.3): a closed door with a warm lamp on */
main:has(> .qor-welcome-tagline) { text-align: center; padding-top: 18vh; }
main:has(> .qor-welcome-tagline) h1 { margin-bottom: var(--s5); }
.qor-welcome-tagline { font-family: var(--font-serif); font-size: var(--text-lg); }
.qor-welcome-invitation { color: var(--muted); }

/* the door forms (login/join): scoped on what doors OWN — `main > form`
   (NEVER `body > main`: the welcome, /p, and the /p 404 share that anatomy).
   Door buttons stay STANDARD (spec-gate finding 4: the code-entry door's two
   buttons are structurally identical — CSS cannot split them). */
main > form { max-width: 26rem; margin: var(--s4) 0; }
main > form label {
  display: block;
  font-size: var(--overline-size);
  font-weight: 500;
  letter-spacing: var(--overline-ls);
  text-transform: uppercase;
  color: var(--muted);
}
main > form label input { display: block; margin-top: var(--s2); font-size: var(--text-base); }
main > form p { margin: var(--s3) 0; }
/* the door's own prose — intro, stale notice, refusal, "didn't arrive?" —
   speaks in the notice voice (spec §1.10; diff-gate finding 2). Doors alone
   have a form as main's direct child (audited: not the welcome, /p, the 404,
   or any app surface), so the h1 stays ink and the meta lines go muted. */
main:has(> form) > p { color: var(--muted); }

/* ── the public /p surfaces (t-119 §1.11 — now on this stylesheet) ─────────── */

/* the SSR wordmark: its own anatomy — body > header, page-wide hairline */
body > header { border-bottom: 1px solid var(--line); }
body > header a {
  display: inline-block;
  padding: var(--s4) var(--s5);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
body > header a:hover { color: var(--amber-deep); text-decoration: none; }

/* the shelf: published work, listed like a colophon */
.qor-shelf { margin: var(--s6) 0; }
.qor-shelf-list { list-style: none; margin: 0; padding: 0; }
.qor-shelf-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
}
.qor-shelf-item:last-child { border-bottom: 1px solid var(--line); }
.qor-shelf-item a { flex: 1; min-width: 0; font-family: var(--font-serif); font-size: var(--text-lg); }

/* the studio: the intimate layer reads like the digest */
.qor-studio { margin: var(--s6) 0; }
.qor-studio > * { padding: var(--s5) 0; }
.qor-studio > * + * { border-top: 1px solid var(--line); }

/* the SSR befriend line (page.clj — distinct from the client surface) */
p.qor-befriend { color: var(--muted); }

/* ── wide viewport: the same CSS, roomier (T-112 §1.4) ─────────────────────── */
@media (min-width: 48rem) {
  .qor-photo-pair-grid { grid-template-columns: 1fr 1fr; }
  .qor-photo-wall-grid { grid-template-columns: repeat(3, 1fr); }
  #app, main { padding: var(--s6); }
  main > header { padding: var(--s4) 0; }
}