/* CLAIRE WING — Arctic Light by day, the night view after dark. House canon.
 * D-5, THE HELM DISPLAY LAW: type is FIXED, layout is FLUID. Sizes are rem under
 * --font-scale. Nothing is in vw, no scale transform on the page's own type.
 * NO SKEUOMORPHIC COSPLAY: no gauges, no needles, no brushed metal, no LED bezels — this is
 * paper and ink, not a dashboard cosplaying an instrument panel.
 */

:root {
  --font-scale: 1;
  font-size: calc(16px * var(--font-scale));

  --paper:    #F4EEE2;
  --card:     #FBF7EF;
  --ink:      #211D17;
  --ink-soft: #5A5145;
  --ink-faint:#8A7F70;
  --rule:     #E2D8C6;
  --walnut:   #6B4A2F;
  --brass:    #B4894A;
  --green:    #3F6B4E;
  --amber:    #B4772A;
  --red:      #A6412F;
  --shadow:   0 1px 2px rgba(33,29,23,.06), 0 6px 18px rgba(33,29,23,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #17140F;
    --card:     #211D17;
    --ink:      #EDE6D8;
    --ink-soft: #B5AB99;
    --ink-faint:#8A7F70;
    --rule:     #362F26;
    --walnut:   #C39B71;
    --brass:    #D8AE6B;
    --green:    #7FB08C;
    --amber:    #E0A257;
    --red:      #E0705C;
    --shadow:   0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  }
}
:root[data-theme="light"] {
  --paper:#F4EEE2; --card:#FBF7EF; --ink:#211D17; --ink-soft:#5A5145; --ink-faint:#8A7F70;
  --rule:#E2D8C6; --walnut:#6B4A2F; --brass:#B4894A; --green:#3F6B4E; --amber:#B4772A; --red:#A6412F;
  --shadow: 0 1px 2px rgba(33,29,23,.06), 0 6px 18px rgba(33,29,23,.05);
}
:root[data-theme="dark"] {
  --paper:#17140F; --card:#211D17; --ink:#EDE6D8; --ink-soft:#B5AB99; --ink-faint:#8A7F70;
  --rule:#362F26; --walnut:#C39B71; --brass:#D8AE6B; --green:#7FB08C; --amber:#E0A257; --red:#E0705C;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.55;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;               /* no horizontal scrolling, ever — a phone-glass law */
}

.wrap { max-width: 40rem; margin: 0 auto; padding: 1rem 1.15rem 4rem; }

header { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 .8rem; }
.mark { font-size: .78rem; letter-spacing: .17em; text-transform: uppercase; color: var(--brass); font-weight: 700;
        font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif; }
.spacer { flex: 1 1 auto; }

.lede { font-size: .92rem; color: var(--ink-soft); margin: 0 0 1.1rem; }

.card { background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
        padding: 1.1rem 1.15rem; margin-bottom: 1rem; box-shadow: var(--shadow); }

.cardhead { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.cardhead h2 { margin: 0; font-size: 1.1rem; }
.cardhead .spacer { flex: 1 1 auto; }

.freshbadge { font-family: ui-sans-serif, -apple-system, sans-serif; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: .18rem .5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.freshbadge.fresh { color: var(--green); }
.freshbadge.stale { color: var(--amber); }
.freshbadge.none  { color: var(--ink-faint); }

.genat { font-size: .78rem; color: var(--ink-faint); margin: 0 0 .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.body h3 { font-size: 1rem; margin: 1rem 0 .35rem; }
.body h3:first-child { margin-top: 0; }
.body p { margin: 0 0 .8rem; }
.body ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.body strong { color: var(--ink); }
.body em { color: var(--ink-soft); }

/* Expired content stays readable but must never pass for today's report. The notice sits in the
   reading line, and the body behind it is visibly demoted rather than hidden. */
.expired { color: var(--amber); font-size: .88rem; line-height: 1.45; margin: 0 0 .8rem;
  padding: .5rem .7rem; border-left: 3px solid var(--amber);
  background: color-mix(in srgb, var(--amber) 7%, transparent); border-radius: 0 4px 4px 0; }
.expired strong { color: var(--amber); }
.body.superseded { opacity: .55; }
.body.superseded strong { color: inherit; }

.grey { border-style: dashed; }
.grey .cardhead h2 { color: var(--ink-soft); }
.empty { color: var(--ink-faint); font-size: .92rem; margin: 0; }
.warn { color: var(--amber); font-size: .9rem; margin: 0; }
.err { color: var(--red); font-size: .9rem; margin: 0; }

/* ── the SITREP rebuild control ─────────────────────────────────────── */
.sitrepctl { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .7rem;
             border-top: 1px solid var(--rule); padding-top: .7rem; }
.statusline { font-size: .85rem; color: var(--ink-soft); }
.statusline .dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
                    background: var(--ink-faint); margin-right: .4rem; vertical-align: middle; }
.statusline.pending .dot  { background: var(--ink-faint); }
.statusline.claimed .dot  { background: var(--amber); }
.statusline.done .dot     { background: var(--green); }
.statusline.failed .dot   { background: var(--red); }

/* ── buttons: 44px min touch target everywhere, geometry in px, type in rem ── */
.primarybtn, .kindbtn, .iconbtn {
  font: inherit; min-height: 44px; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--brass);
}
.primarybtn {
  font-size: .85rem; letter-spacing: .04em; padding: 0 1.1rem;
  background: var(--walnut); color: var(--paper); border-color: var(--walnut); font-weight: 600;
}
.primarybtn:disabled { opacity: .5; cursor: default; }
.primarybtn.ghost { background: transparent; color: var(--walnut); }

.iconbtn { font-size: .85rem; background: transparent; border-color: var(--rule); color: var(--ink-soft); min-width: 44px; }

/* ── answers thread — correspondence, never the brief/sitrep slot ─────── */
.answeritem { padding: .5rem 0; }
.answeritem .answerq { font-weight: 600; margin: 0 0 .2rem; color: var(--ink); }
.answers hr { border: none; border-top: 1px solid var(--rule); margin: .6rem 0; }

/* ── write-back box ──────────────────────────────────────────────────── */
.writeback .label { font-family: ui-sans-serif, -apple-system, sans-serif; font-size: .7rem; letter-spacing: .14em;
         text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: .6rem; }
.hint { font-size: .78rem; color: var(--ink-faint); margin: -.3rem 0 .7rem; }
.kindrow { display: flex; gap: .5rem; margin-bottom: .7rem; }
.kindbtn { flex: 1 1 0; font-size: .85rem; background: transparent; color: var(--ink-soft); border-color: var(--rule); }
.kindbtn[aria-pressed="true"] { background: var(--card); color: var(--ink); border-color: var(--brass); box-shadow: var(--shadow); font-weight: 600; }

textarea#msgbox {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px; padding: .7rem .8rem; resize: vertical;
  min-height: 5.5rem;
}
textarea#msgbox:focus { outline: none; border-color: var(--brass); }

.sendrow { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; flex-wrap: wrap; }
.sendstate { font-size: .85rem; color: var(--ink-soft); }
.sendstate.ok { color: var(--green); }
.sendstate.err { color: var(--red); }

.recentlist { list-style: none; margin: 1rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--rule); }
.recentlist li { padding: .35rem 0; font-size: .82rem; color: var(--ink-soft); display: flex; gap: .5rem; align-items: baseline; }
.recentlist .rk { text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; font-weight: 700; color: var(--ink-faint); flex: 0 0 auto; }
.recentlist .rs { margin-left: auto; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); flex: 0 0 auto; }
.recentlist .rb { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stamp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: var(--ink-faint); margin-top: 1.5rem; }

/* Embedded in a Workbench wing: the host owns its own chrome, we own the content. */
body.embed .appchrome { display: none; }
body.embed .wrap { padding-top: .5rem; }

/* ══ THE CLOUDFLARE EDITION ══════════════════════════════════════════════════════════════
 * Everything below was added when this wing moved off the desk (:3064, tailnet guard) onto
 * the public House origin. The desk wing needed no gate — the socket was the lock. A public
 * origin has no socket, so it needs a sign-in screen, a way back out, and a type ladder that
 * does not depend on the Workbench host passing one in.
 */

/* The wing is DISPLAY:NONE until boot() has a session in hand. The SITREP must never paint,
 * even for a frame, before the session is known — a phone glanced at over a shoulder in a
 * coffee shop is exactly the condition this wing was built for. */
#app { display: none; }

#gate {
  max-width: 22rem; margin: 0 auto; padding: 4rem 1.25rem 2rem;
  display: flex; flex-direction: column; gap: .6rem;
}
#gate h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.01em; }
#gate .blurb { margin: 0 0 1rem; color: var(--ink-soft); font-size: .95rem; }
#gate input {
  font: inherit; font-size: 1rem; padding: .7rem .8rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
}
#gate input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
#gate button {
  font: inherit; font-size: .95rem; font-weight: 600; padding: .7rem .9rem;
  border-radius: 10px; border: 1px solid var(--walnut); background: var(--walnut);
  color: var(--paper); cursor: pointer;
}
#gate button.secondary { background: transparent; color: var(--ink-soft); border-color: var(--rule); font-weight: 500; }
#gate .msg { font-size: .85rem; color: var(--ink-soft); min-height: 1.2em; }
#gate .msg.err { color: var(--red); }
#gate .msg.ok  { color: var(--green); }

/* The type ladder. Fixed type, fluid layout — D-5. Never a pinch-zoom substitute; the
 * viewport meta deliberately still allows pinch as well. */
.ctl { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.ctl button {
  font: inherit; font-size: .85rem; padding: .45rem .7rem; border-radius: 8px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-soft); cursor: pointer;
}
.ctl .signout { margin-left: auto; border-color: transparent; color: var(--ink-faint); }

/* Recent requests — a courtesy list, never load-bearing. */
.recentlist { list-style: none; margin: .9rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--rule); }
.recentlist li { display: flex; gap: .5rem; align-items: baseline; font-size: .82rem; padding: .25rem 0; }
.recentlist .rk { color: var(--brass); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; flex: 0 0 auto; }
.recentlist .rb { color: var(--ink-soft); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recentlist .rs { color: var(--ink-faint); font-size: .72rem; flex: 0 0 auto; }

/* Answers thread. */
.answeritem .answerq { font-weight: 600; margin: 0 0 .2rem; }
.answers hr { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0; }