/* ==========================================================================
   Seekers Almanac — chat UI design system
   Tokens are the actual shipped values from seekers-almanac/build.py.
   Do not alter, approximate, or "improve" any of these.
   ========================================================================== */

:root{
  --paper:#F2EEE4; --paper-2:#EAE4D6; --ink:#171410; --ink-soft:#4A4239;
  --ink-faint:#8B8072; --rule:#171410; --accent:#8C2F1E;
  --grain:.055; --vignette:.055; --hair:rgba(23,20,16,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12100D; --paper-2:#191612; --ink:#EFE9DC; --ink-soft:#B5AB9A;
    --ink-faint:#6F6759; --rule:#EFE9DC; --accent:#C9633F;
    --grain:.085; --vignette:.28; --hair:rgba(239,233,220,.20);
  }
}
/* Explicit toggle wins over prefers-color-scheme in both directions. */
:root[data-theme="dark"]{
  --paper:#12100D; --paper-2:#191612; --ink:#EFE9DC; --ink-soft:#B5AB9A;
  --ink-faint:#6F6759; --rule:#EFE9DC; --accent:#C9633F;
  --grain:.085; --vignette:.28; --hair:rgba(239,233,220,.20);
}
:root[data-theme="light"]{
  --paper:#F2EEE4; --paper-2:#EAE4D6; --ink:#171410; --ink-soft:#4A4239;
  --ink-faint:#8B8072; --rule:#171410; --accent:#8C2F1E;
  --grain:.055; --vignette:.055; --hair:rgba(23,20,16,.18);
}

/* ---- reset / base ------------------------------------------------------- */

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--paper);
  color:var(--ink);
}

body{
  font-family:"Fraunces","Georgia",serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow:hidden; /* the plate frame does not scroll; the chat list does */
}

a{ color:inherit; }

button{
  font:inherit;
  cursor:pointer;
  background:none;
  border:none;
  color:inherit;
}

/* ---- mono metadata voice -------------------------------------------------
   IBM Plex Mono, uppercase, wide tracking — every piece of metadata:
   running head, foot, tiers, states, axiom ids, timestamps. */

.mono{
  font-family:"IBM Plex Mono","SFMono-Regular",monospace;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
}

/* ---- grain + vignette overlays ------------------------------------------ */

.grain-overlay{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:50;
  opacity:var(--grain);
  mix-blend-mode:multiply; /* multiply reads correctly on light paper */
}
:root[data-theme="dark"] .grain-overlay{
  mix-blend-mode:screen; /* multiply does nothing on dark paper */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .grain-overlay{
    mix-blend-mode:screen;
  }
}

.vignette{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:49;
  opacity:var(--vignette);
  background:radial-gradient(ellipse at center, transparent 55%, var(--ink) 130%);
}

/* ---- the plate: 1px border + a 5px-offset second outline, the double
   rule of a printed cover, with a subtle vertical paper gradient ---------- */

.plate{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  height:100vh;
  max-width:760px;
  margin:0 auto;
  padding:22px 22px 5px;
  background:linear-gradient(to bottom, var(--paper), var(--paper-2));
  border:1px solid var(--rule);
  outline:1px solid var(--rule);
  outline-offset:5px;
}

@media (max-width: 620px){
  .plate{
    outline-offset:3px;
    padding:16px 14px 5px;
  }
}

/* ---- masthead ------------------------------------------------------------ */

.masthead{
  flex:0 0 auto;
}

.masthead-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.masthead-title{
  margin:0;
  font-family:"Fraunces",serif;
  font-optical-sizing:auto;
  font-variation-settings:"WONK" 1;
  font-weight:600;
  font-size:clamp(22px, 5vw, 32px);
  letter-spacing:.01em;
}

.theme-toggle{
  flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;
  font-weight:500;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--hair);
  padding:5px 9px;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--ink-faint); }

.masthead-rule{
  margin:14px 0 0;
  height:1px;
  background:var(--rule);
  opacity:.7;
}

/* ---- chat area ------------------------------------------------------------ */

.chat-wrap{
  flex:1 1 auto;
  min-height:0; /* required for the child overflow:auto to actually scroll */
  display:flex;
  flex-direction:column;
}

.chat-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:22px 0 18px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.empty-state{
  margin:auto 0;
  text-align:center;
  padding:40px 10px;
}

.empty-line{
  margin:0;
  font-family:"Fraunces",serif;
  font-optical-sizing:auto;
  font-variation-settings:"WONK" 1;
  font-style:italic;
  font-weight:400;
  font-size:17px;
  color:var(--ink-soft);
}

/* ---- messages ------------------------------------------------------------- */

.msg{
  max-width:100%;
}

.msg-user{
  align-self:flex-end;
  max-width:82%;
}
.msg-user .msg-body{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--ink-soft);
  border:1px solid var(--hair);
  padding:10px 13px;
  white-space:pre-wrap;
  word-break:break-word;
}

.msg-almanac{
  align-self:stretch;
  border-top:1px solid var(--hair);
  padding-top:16px;
}

.msg-meta{
  font-size:10px;
  color:var(--ink-faint);
  margin-bottom:10px;
  display:flex;
  flex-wrap:wrap;
  gap:0 18px;
}
.msg-meta .meta-item span.meta-label{ color:var(--ink-faint); }
.msg-meta .meta-item{ white-space:nowrap; }

.msg-body{
  font-family:"Fraunces",serif;
  font-optical-sizing:auto;
  font-variation-settings:"WONK" 1;
  font-weight:400;
  font-size:18px;
  line-height:1.5;
  color:var(--ink);
  white-space:pre-wrap;
  word-break:break-word;
}

.msg-body .cursor{
  display:inline-block;
  width:.5em;
  border-bottom:2px solid var(--ink-faint);
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---- citations — the ONE place --accent is allowed ------------------------ */

.citations{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--hair);
}

.citations-label{
  font-size:10px;
  color:var(--ink-faint);
  margin-bottom:8px;
}

.citation-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:6px 0;
  font-size:13px;
}

.citation-marker{
  font-family:"IBM Plex Mono",monospace;
  font-weight:500;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  flex:0 0 auto;
  white-space:nowrap;
}

.citation-claim{
  flex:1 1 auto;
  font-family:"Fraunces",serif;
  color:var(--ink-soft);
  font-size:14px;
}

.citation-link{
  flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.24em;
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ---- gate — a published failure, not a hidden error ------------------------ */

.gate{
  margin-top:16px;
  padding:10px 12px;
  border:1px solid var(--hair);
  border-left:3px solid var(--ink);
}

.gate-label{
  font-size:10px;
  color:var(--ink);
  margin-bottom:6px;
}

.gate-violation{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:none;
  color:var(--ink-soft);
  padding:2px 0;
}

/* ---- inline notice (fetch/stream errors) ----------------------------------- */

.notice{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--hair);
  padding:8px 10px;
  align-self:flex-start;
}

/* ---- composer ------------------------------------------------------------- */

.composer{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:14px 0 17px;
  border-top:1px solid var(--rule);
}

.composer-input{
  flex:1 1 auto;
  resize:none;
  min-height:22px;
  max-height:160px;
  font-family:"Fraunces",serif;
  font-size:16px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hair);
  padding:6px 2px;
  line-height:1.4;
}
.composer-input:focus{
  outline:none;
  border-bottom-color:var(--ink-faint);
}
.composer-input::placeholder{
  color:var(--ink-faint);
  font-style:italic;
}
.composer-input:disabled{
  color:var(--ink-faint);
}

.composer-send{
  flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;
  font-weight:500;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--rule);
  padding:9px 14px;
  margin-bottom:1px;
}
.composer-send:disabled{
  color:var(--ink-faint);
  border-color:var(--hair);
  cursor:default;
}

/* ---- responsive: 375px floor ------------------------------------------------ */

@media (max-width: 400px){
  .masthead-title{ font-size:20px; }
  .msg-body{ font-size:16px; }
  .msg-user{ max-width:92%; }
  .composer-send{ padding:9px 10px; font-size:10px; }
}

/* ==========================================================================
   ADMIN — curation interface. Same plate/masthead/mono system as the chat
   page, widened for tabular content. No second design language: every token
   below is one already defined at the top of this file.
   ========================================================================== */

/* The chat plate is a fixed-height, non-scrolling frame (the .chat-list child
   scrolls instead). The admin has many rows and needs the PAGE to scroll, so
   it opts out of that via a body-level class rather than touching .plate. */
body.admin-body{
  overflow:auto;
  height:auto;
  min-height:100%;
}
body.admin-body .plate{
  height:auto;
  min-height:100vh;
  padding-bottom:40px;
}
.plate.plate-wide{
  max-width:1040px;
}

/* Several admin elements below set their own `display` (grid/flex) and are also toggled
   via the native `hidden` attribute from admin.js. An author rule beats the UA stylesheet
   at equal specificity regardless of declaration order in that direction, so without this
   the `display` rule wins and the element never actually hides. One !important, applied
   once, generically, fixes every such element rather than chasing them selector by
   selector. */
[hidden]{ display:none !important; }

.masthead-eyebrow{
  margin:4px 0 0;
  font-size:10px;
  color:var(--ink-faint);
}

/* ---- tabs ----------------------------------------------------------------- */

.admin-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 0;
}

.admin-tab{
  font-size:11px;
  font-weight:500;
  color:var(--ink-faint);
  border:1px solid var(--hair);
  padding:8px 14px;
}
.admin-tab:hover{ color:var(--ink); border-color:var(--ink-faint); }
.admin-tab[aria-selected="true"]{
  color:var(--ink);
  border-color:var(--rule);
}

.admin-main{
  padding:22px 0 10px;
}

.admin-pane[hidden]{ display:none; }

.admin-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  border-bottom:1px solid var(--rule);
  padding-bottom:10px;
  margin-bottom:16px;
}

.admin-section-label{
  font-size:11px;
  color:var(--ink-faint);
}

/* ---- generic buttons -------------------------------------------------------
   Same visual family as .theme-toggle / .composer-send: mono, uppercase,
   bordered, no fill. Never accent — accent is reserved for the one warning
   below. */

.btn{
  font-family:"IBM Plex Mono",monospace;
  font-weight:500;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--rule);
  padding:8px 12px;
  background:none;
}
.btn:hover{ background:var(--hair); }
.btn:disabled{ color:var(--ink-faint); border-color:var(--hair); cursor:default; }

.btn-quiet{
  color:var(--ink-faint);
  border-color:var(--hair);
}
.btn-quiet:hover{ color:var(--ink); border-color:var(--ink-faint); }

/* ---- forms ------------------------------------------------------------------ */

.admin-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 20px;
  border:1px solid var(--hair);
  padding:18px;
  margin-bottom:20px;
}

.field{ display:flex; flex-direction:column; gap:6px; }
.field-wide{ grid-column:1 / -1; }
.field-trust{ grid-column:1 / -1; }

.field-label{
  font-size:10px;
  color:var(--ink-faint);
}

.admin-form input[type="text"],
.admin-form textarea{
  font-family:"Fraunces",serif;
  font-size:15px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hair);
  padding:6px 2px;
  resize:vertical;
}
.admin-form input[type="text"]:focus,
.admin-form textarea:focus,
.admin-filters input[type="text"]:focus{
  outline:none;
  border-bottom-color:var(--ink-faint);
}

.admin-form select,
.admin-filters select{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--hair);
  padding:7px 8px;
}

.field-actions{
  grid-column:1 / -1;
  display:flex;
  gap:10px;
}

/* ---- trust slider ------------------------------------------------------------
   Deliberately plain: the ceiling is enforced by min/max on the element
   itself (0.05–0.80, schema/trust.yaml), never by a color warning. No accent
   here — accent is reserved for the incomplete-record marker only. */

.trust-slider{
  width:100%;
  accent-color:var(--ink);
}

/* ---- filters (CANON pane) ---------------------------------------------------- */

.admin-filters{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:end;
  margin-bottom:18px;
}

.filter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:10px;
  color:var(--ink-faint);
}
.filter-field-wide{ flex:1 1 220px; }

.admin-filters input[type="text"]{
  font-family:"Fraunces",serif;
  font-size:14px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hair);
  padding:6px 2px;
}

/* ---- rows / cards -------------------------------------------------------------- */

.admin-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.row-card{
  border:1px solid var(--hair);
  padding:14px 16px;
}

.row-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin-bottom:8px;
}

.row-title{
  font-family:"Fraunces",serif;
  font-optical-sizing:auto;
  font-variation-settings:"WONK" 1;
  font-weight:600;
  font-size:16px;
  color:var(--ink);
}

.row-pill{
  font-size:9px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--ink-faint);
  border:1px solid var(--hair);
  padding:3px 7px;
}

.row-trust{
  font-size:9px;
  letter-spacing:.18em;
  color:var(--ink-soft);
}

/* The ONE place --accent is allowed in the admin: a source (or the trust
   entered against a canon row) at or above the disagreement threshold
   (schema/trust.yaml: require_disagreements_above) with nothing logged
   against it. Agreement alone is not a finished assessment of anyone. */
.badge-incomplete{
  color:var(--accent);
  border-color:var(--accent);
}

.row-meta{
  font-size:10px;
  color:var(--ink-faint);
  margin-bottom:8px;
  word-break:break-word;
}

.row-note{
  font-family:"Fraunces",serif;
  font-size:14px;
  color:var(--ink-soft);
  margin:0 0 10px;
}

.row-claim{
  font-family:"Fraunces",serif;
  font-optical-sizing:auto;
  font-size:16px;
  line-height:1.45;
  color:var(--ink);
  margin:0 0 8px;
}

.row-source-link{
  font-size:10px;
  letter-spacing:.18em;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:2px;
}

.row-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
  padding:10px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  margin-bottom:10px;
}

.field-inline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:var(--ink-faint);
}
.field-inline select{
  min-width:0;
  max-width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.field-inline .trust-slider{ width:110px; }

/* A <select> otherwise sizes to its longest OPTION text (tier names run long — e.g.
   "H1 · PRACTITIONER REPORT / OPERATOR EXPERIENCE") and blows out the row on desktop and
   off the plate entirely at phone width. Cap it and let the ellipsis rule above do the
   rest; the full name is still readable in the open dropdown. */
#pane-canon select{ max-width:220px; }
@media (max-width: 700px){
  #pane-canon select{ max-width:150px; }
}

.row-actions{
  display:flex;
  gap:10px;
}

/* ---- visibility pill + the deliberate private->public confirm ------------------ */

.visibility-control{ position:relative; }

.row-pill.visibility-public{ color:var(--ink); border-color:var(--rule); }
.row-pill.visibility-private{ color:var(--ink-faint); border-color:var(--hair); }

.confirm-panel{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid var(--hair);
  border-left:3px solid var(--ink);
  max-width:420px;
}
.confirm-label{
  font-size:10px;
  color:var(--ink);
  margin-bottom:6px;
}
.confirm-body{
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:14px;
  color:var(--ink-soft);
  margin:0 0 12px;
}
.confirm-panel .btn{ margin-right:8px; }

/* ---- disagreements ---------------------------------------------------------------- */

.disagreements{ margin-bottom:8px; }
.disagreements-label{
  font-size:9px;
  letter-spacing:.18em;
  color:var(--ink-faint);
  margin-bottom:6px;
}
.disagreement-row{
  font-family:"Fraunces",serif;
  font-size:13px;
  color:var(--ink-soft);
  padding:3px 0;
}
.disagreement-claim{ color:var(--ink-faint); font-style:italic; }
.disagreement-added{
  font-size:9px;
  color:var(--ink-faint);
  margin-left:8px;
}

.add-disagreement-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:8px 0 4px;
  padding:10px;
  border:1px solid var(--hair);
  max-width:420px;
}
.add-disagreement-form input,
.add-disagreement-form textarea{
  font-family:"Fraunces",serif;
  font-size:13px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hair);
  padding:5px 2px;
  resize:vertical;
}

/* ---- flash (inline error/notice, no alert()) --------------------------------------- */

.admin-flash{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:8px 10px;
  border:1px solid var(--hair);
  margin-bottom:14px;
}
.admin-flash-error{ color:var(--ink); border-left:3px solid var(--ink); }
.admin-flash-warn{ color:var(--ink-soft); border-left:3px solid var(--ink-soft); }
.admin-flash-notice{ color:var(--ink-faint); }

/* ---- stats ------------------------------------------------------------------------- */

.stats-totals{
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:20px;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
  margin-bottom:20px;
}

.stats-block{
  border:1px solid var(--hair);
  padding:14px 16px;
}
.stats-block-label{
  font-size:10px;
  color:var(--ink-faint);
  margin-bottom:10px;
}
.stats-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  padding:4px 0;
  border-bottom:1px solid var(--hair);
}
.stats-row:last-child{ border-bottom:none; }
.stats-row-key{ color:var(--ink-soft); }
.stats-row-value{ color:var(--ink); }

.stats-note{
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:15px;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:640px;
}

/* ---- admin responsive -------------------------------------------------------------- */

@media (max-width: 700px){
  .admin-form{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
}

/* ---- STANDING NOTICE -------------------------------------------------------
   Structural, permanently visible, never a linked-away terms page. Same pattern
   established for commerce in wealth-section.md B.2 rule 5, extended to health.
   Mono metadata voice. No accent: this is not a warning ornament, it is the
   publication's standing posture. */
.standing-notice{
  border-top:1px solid var(--hair);
  margin-top:1.25rem;padding:.85rem 0 .1rem;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.58rem;line-height:1.65;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.standing-notice p{margin:0 0 .45rem;max-width:62ch;}
.standing-notice strong{color:var(--ink-soft);font-weight:500;}
@media (max-width:34rem){ .standing-notice{font-size:.55rem;letter-spacing:.1em;} }

/* ==========================================================================
   HARNESS — three-pane workspace (PROJECTS/THREADS left rail, conversation
   centre, ARTIFACTS/DOCUMENTS right rail). Same plate/masthead/mono system
   as everything above — every token here is one already defined at the top
   of this file. No second design language.
   ========================================================================== */

.plate.plate-harness{ max-width:1240px; }

.masthead-row{ flex-wrap:wrap; row-gap:8px; }

.masthead-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Rail drawer toggles — hidden at desktop widths where the corresponding
   rail already renders inline; shown by the drawer breakpoints below. Same
   visual family as .theme-toggle, which this mirrors exactly. */
.rail-toggle{
  display:none;
  font-family:"IBM Plex Mono",monospace;
  font-weight:500;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--hair);
  padding:5px 9px;
}
.rail-toggle:hover{ color:var(--ink); border-color:var(--ink-faint); }

.rail-scrim{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.rail-scrim.visible{ opacity:1; pointer-events:auto; }

/* ---- the three-pane row ---------------------------------------------------
   The plate frame itself never scrolls (inherited from .plate/body above);
   each rail and the centre chat-list scroll independently within it. */

.harness{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  gap:22px;
}

.rail{
  flex:0 0 auto;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:26px;
}
.rail-left{ width:240px; border-right:1px solid var(--hair); padding-right:20px; }
.rail-right{ width:300px; border-left:1px solid var(--hair); padding-left:20px; }

.rail-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
}
.rail-section-label{ font-size:10px; color:var(--ink-faint); }

.rail-add{
  flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  line-height:1;
  color:var(--ink-faint);
  border:1px solid var(--hair);
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.rail-add:hover{ color:var(--ink); border-color:var(--ink-faint); }

.rail-list{ display:flex; flex-direction:column; }

/* Selected row marked with a rule, not a fill. */
.rail-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  width:100%;
  text-align:left;
  padding:9px 10px;
  border-left:2px solid transparent;
  border-bottom:1px solid var(--hair);
}
.rail-row:hover{ background:var(--hair); }
.rail-row.selected{ border-left-color:var(--rule); }
.rail-row-static{ cursor:default; }
.rail-row-static:hover{ background:none; }
.rail-row-muted .rail-row-title{ color:var(--ink-faint); font-style:italic; }

.rail-row-title{
  font-family:"Fraunces",serif;
  font-optical-sizing:auto;
  font-variation-settings:"WONK" 1;
  font-weight:500;
  font-size:14px;
  line-height:1.3;
  color:var(--ink);
  word-break:break-word;
}
.rail-row-sub{ font-size:9px; color:var(--ink-faint); }

.rail-empty{
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:13px;
  color:var(--ink-faint);
  margin:0;
  padding:4px 10px;
}

/* ---- inline PROJECT form (narrow rail variant of .admin-form) ------------- */

.rail-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  margin-bottom:12px;
  border:1px solid var(--hair);
}
.rail-form input[type="text"],
.rail-form textarea{
  font-family:"Fraunces",serif;
  font-size:13px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hair);
  padding:5px 2px;
  resize:vertical;
}
.rail-form input[type="text"]:focus,
.rail-form textarea:focus{
  outline:none;
  border-bottom-color:var(--ink-faint);
}
.rail-form select{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--hair);
  padding:6px 7px;
}
.rail-form-actions{ display:flex; gap:8px; }

.rail-flash{
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  border-left:3px solid var(--ink);
  padding:4px 6px;
}

/* ---- centre: chat view vs artifact view ------------------------------------ */

.centre{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.chat-view{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* composer-shell wraps the flash line + attachment chips + the original
   .composer input row; the border/padding that used to live on .composer
   itself moves up here so the separator sits above the flash/chips too. */
.composer-shell{
  flex:0 0 auto;
  padding:14px 0 17px;
  border-top:1px solid var(--rule);
}
.composer-shell .composer{ padding:0; border-top:none; }
.composer-shell.drag-over{ outline:1px dashed var(--ink-faint); outline-offset:6px; }

.composer-flash{
  font-size:10px;
  color:var(--ink-faint);
  margin-bottom:8px;
}

.attachments{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.attach-btn{
  flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;
  font-weight:500;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--hair);
  padding:9px 10px;
  margin-bottom:1px;
}
.attach-btn:hover{ color:var(--ink); border-color:var(--ink-faint); }
.attach-btn:disabled{ color:var(--ink-faint); opacity:.5; cursor:default; }

.attachment-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--hair);
  padding:6px 8px;
}
.attachment-chip.is-uploading{ color:var(--ink-faint); font-style:italic; }
.attachment-chip.is-error{ border-left:3px solid var(--ink); color:var(--ink); }
.attachment-name{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.attachment-size{ color:var(--ink-faint); white-space:nowrap; }
.attachment-remove{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  line-height:1;
  color:var(--ink-faint);
  padding:0 2px;
}
.attachment-remove:hover{ color:var(--ink); }

/* ---- artifact editor -------------------------------------------------------- */

.artifact-view{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:22px 0 18px;
}
.artifact-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.artifact-head-meta{ font-size:10px; color:var(--ink-faint); }

.artifact-body-wrap{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.artifact-kind-select{
  align-self:flex-start;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--hair);
  padding:6px 8px;
}
.artifact-title-input{
  font-family:"Fraunces",serif;
  font-optical-sizing:auto;
  font-variation-settings:"WONK" 1;
  font-weight:600;
  font-size:24px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hair);
  padding:4px 2px 10px;
}
.artifact-title-input:focus{ outline:none; border-bottom-color:var(--ink-faint); }
.artifact-title-input::placeholder{ color:var(--ink-faint); font-style:italic; }
.artifact-body-input{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  resize:none;
  font-family:"Fraunces",serif;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:transparent;
  border:none;
  padding:4px 2px;
}
.artifact-body-input:focus{ outline:none; }
.artifact-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:14px;
  border-top:1px solid var(--hair);
}
.artifact-save-state{ font-size:10px; color:var(--ink-faint); }

/* ---- drawer breakpoints ----------------------------------------------------
   Right rail collapses under 1200px; left rail collapses under 900px. Each
   becomes a fixed overlay sliding in over the plate, behind the shared scrim,
   closed with the scrim click or its own toggle. */

@media (max-width:1199px){
  .rail-toggle-right{ display:inline-flex; }
  .rail-right{
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(300px, 86vw);
    background:linear-gradient(to bottom, var(--paper), var(--paper-2));
    border-left:1px solid var(--rule);
    padding:22px 18px;
    transform:translateX(100%);
    transition:transform .18s ease;
    z-index:70;
  }
  .rail-right.open{ transform:translateX(0); }
}

@media (max-width:899px){
  .rail-toggle-left{ display:inline-flex; }
  .rail-left{
    position:fixed;
    top:0; left:0; bottom:0;
    width:min(240px, 82vw);
    background:linear-gradient(to bottom, var(--paper), var(--paper-2));
    border-right:1px solid var(--rule);
    padding:22px 18px;
    transform:translateX(-100%);
    transition:transform .18s ease;
    z-index:70;
  }
  .rail-left.open{ transform:translateX(0); }
}

@media (max-width:620px){
  .plate.plate-harness{ padding:16px 14px 5px; }
}

@media (max-width:400px){
  .artifact-title-input{ font-size:19px; }
  .rail-toggle{ font-size:9px; padding:5px 7px; }
  .attachment-name{ max-width:140px; }
}

/* ---- THE PORTAL ------------------------------------------------------------
   Not a separate product with its own name. Daniel, 2026-09-14: "it is just the
   portal into the Seekers Almanac, the portal into truth, health, and wealth."
   BETA is permanent-until-stated-otherwise, and stated plainly rather than as a
   badge that looks like decoration. Same reason the Almanac dates everything:
   a thing that claims to be finished is making a claim it cannot support. */
.portal-mark{
  margin:.15rem 0 0;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);
}
.portal-mark .beta{
  border:1px solid var(--hair);padding:.05rem .34rem;margin-left:.4rem;
  color:var(--ink-soft);
}
.portal-sub{
  margin:.2rem 0 0;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width:34rem){
  .portal-mark,.portal-sub{letter-spacing:.16em;}
}


/* The login wall. Same letterpress register as the Almanac itself — a reader
   who arrives here should recognise where they are before they sign in. */
html[data-auth="pending"] body > *:not(.gate) { visibility: hidden; }
html[data-auth="out"] body > *:not(.gate) { visibility: hidden; }
.gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper, #f4f2ea); padding: 1.5rem;
}
.gate-plate {
  width: min(30rem, 100%); text-align: center;
  border: 1px solid var(--rule, #cfc9b8); padding: clamp(1.6rem, 5vw, 2.8rem);
}
.gate-orn { display: flex; align-items: center; justify-content: center; gap: .8rem;
  color: var(--accent, #8c2f1f); margin-bottom: 1.4rem; }
.gate-orn i { width: 3.2rem; height: 1px; background: var(--accent, #8c2f1f); opacity: .6; }
.gate-plate h1 {
  font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: .94;
  font-size: clamp(2.1rem, 8vw, 3.1rem); margin: 0 0 .7rem; letter-spacing: -.01em;
}
.gate-plate h1 span { display: block; font-style: italic; font-weight: 300;
  font-size: .38em; letter-spacing: .04em; margin-bottom: .1em; }
.gate-lede { font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent, #8c2f1f); margin: 0 0 1.1rem; }
.gate-sub { font-family: Fraunces, Georgia, serif; font-style: italic;
  font-size: .9375rem; line-height: 1.5; opacity: .72; margin: 0 auto 1.9rem;
  max-width: 24rem; }
.gate-buttons { display: grid; gap: .6rem; }
.gate-btn {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .95rem 1rem; background: transparent; cursor: pointer;
  border: 1px solid var(--rule, #cfc9b8); color: inherit;
  transition: border-color .2s, color .2s;
}
.gate-btn:hover:not(:disabled) { border-color: var(--accent, #8c2f1f); color: var(--accent, #8c2f1f); }
.gate-btn:disabled { opacity: .4; cursor: default; }
.gate-note { font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase;
  opacity: .5; margin: 1.4rem 0 0; line-height: 1.7; }
.gate-beta { font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .5rem; letter-spacing: .3em; text-transform: uppercase;
  opacity: .34; margin: .5rem 0 0; }