/* =====================================================================
   Farewell Notes — farewellnotes.org

   Design notes, because whoever maintains this should know the intent:

   THREE ROOMS, ONE BUILDING. The rule that governs everything below.

   /read/ is not an app. Someone will open it on the worst week of their
   life, probably on a phone, probably crying. So: no animation, no
   attention-seeking colour, nothing that moves, nothing that demands
   a second click to read the first sentence. Nothing in this file is
   allowed to put dashboard grammar in front of that person.

   /app/ is a tool. The owner uses it repeatedly, calmly, years before
   any of it matters, and it has to look like something you would trust
   with this. Restraint there was read as unfinished rather than
   dignified, which is a different failure and worth fixing. It gets
   real hierarchy, real surfaces, real controls.

   The marketing pages have to earn a stranger's trust in nine seconds.
   They follow /app/. But whatever the usual grammar of a pricing page
   is, it is still the wrong grammar for this one.

   The theme is fixed — a pale mauve "paper" with a soft top-to-bottom
   fade, plum-dark ink, dusty-rose accents. It does NOT follow the
   browser's dark-mode setting: everyone sees the same quiet page.

   TWO FACES. Lora, a warm round serif, for every word a human being
   wrote or reads as prose: letters, notes, headings, ledes, the whole
   reading room. A system sans for the furniture: nav, buttons, labels,
   column heads, counts, timestamps, status. The rule is "did a person
   write this sentence, or is it a control?" — see --serif and --sans.

   It prints. Someone will want a letter on paper.
   ===================================================================== */

/* ---------- fonts ----------
   Self-hosted so the site makes no third-party request. Filenames are
   the google-webfonts-helper defaults (gwfh.mranftl.com/fonts/lora),
   latin subset, v37. If those files are absent the browser falls back
   to Georgia and the site still works — see assets/fonts/README.md. */

@font-face {
    font-family: "Lora";
    src: url("/assets/fonts/lora-v37-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lora";
    src: url("/assets/fonts/lora-v37-latin-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Lora";
    src: url("/assets/fonts/lora-v37-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lora";
    src: url("/assets/fonts/lora-v37-latin-500italic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Lora";
    src: url("/assets/fonts/lora-v37-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lora";
    src: url("/assets/fonts/lora-v37-latin-600italic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Lora";
    src: url("/assets/fonts/lora-v37-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lora";
    src: url("/assets/fonts/lora-v37-latin-700italic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ---------- palette: "Mallow" ---------- */

:root {
    --paper:      #fdf9fc;
    --paper-bottom: #f2e8f0;
    --paper-card: #ffffff;
    --paper-sunk: #f7f0f5;  /* a well: table heads, stat tiles, quiet strips */
    --ink:        #2f2630;
    --ink-soft:   #655863;
    --ink-faint:  #837080;
    --rule:       #ecdfe8;
    --rule-firm:  #ddcbd8;  /* where a line has to actually divide something */
    --deep:       #6f4f6b;  /* primary action + links */
    --gold:       #9c5f74;  /* focus rings + hover accent (dusty rose) */
    --error:      #8f3a45;
    --error-bg:   #f8ebee;
    --ok:         #2c6244;
    --ok-bg:      #e9f1ec;
    --warn:       #8a5a2b;
    --notice-bg:  #f2eaf0;

    --serif:      "Lora", Georgia, "Iowan Old Style", "Times New Roman", serif;
    --mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* The interface face. Lora is for words a person wrote; this is for
       the furniture around them — nav, buttons, labels, column heads,
       counts, timestamps, status. Setting a status pill in a book serif
       is most of what made the owner's side read as a document rather
       than a tool.

       A system stack rather than a webfont, on purpose: it is the one
       family that costs no request and no bytes, which matters on a site
       that makes no third-party call by design. To swap in Inter later,
       add the @font-face rules and put it at the front of this list —
       nothing else has to change. */
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;

    --measure:    52rem;   /* the reading column: letters, notes, the public page */
    --shell:      74rem;   /* the app column: everything lines up with this */

    /* One spacing scale. Before this there were thirty inline margins and
       no two agreed, which is most of what "unfinished" looks like. */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --s8: 4rem;

    --radius:      8px;
    --radius-sm:   5px;
    --radius-pill: 999px;

    /* Plum-tinted rather than black: a neutral shadow goes muddy grey on
       a mauve page. */
    --shadow-sm: 0 1px 2px rgba(47, 38, 48, 0.05);
    --shadow:    0 1px 3px rgba(47, 38, 48, 0.06), 0 4px 12px rgba(47, 38, 48, 0.045);
    --shadow-lg: 0 2px 6px rgba(47, 38, 48, 0.07), 0 12px 28px rgba(47, 38, 48, 0.07);
}

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

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

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

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--paper);
    background-image: linear-gradient(180deg, var(--paper) 0%, var(--paper-bottom) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* The few transitions here are 120ms colour fades on hover. Somebody who
   has asked their machine to stop things moving gets none of them. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

a { color: var(--deep); text-underline-offset: 2px; }
a:hover { color: var(--gold); }

/* ---------- layout ---------- */

/* The shell, the bars and the footer all share one width and one gutter,
   so the brand mark sits directly above the <h1> instead of a few pixels
   off it. They did not agree before, and a misaligned edge is the kind
   of thing nobody consciously sees and everybody feels. */
.page {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--s7) 1.75rem var(--s8);
}

.page-narrow { max-width: var(--measure); }

/* Reading pages — a single letter or note, the public page — keep the
   container (and the bars above it) close to the text column so the
   words are not marooned in white space. */
body.reading .page,
body.reading .foot,
body.reading .bar-inner,
body.reading .preview-bar-inner { max-width: 56rem; }

.foot {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--s6) 1.75rem var(--s7);
    border-top: 1px solid var(--rule);
    color: var(--ink-faint);
    font-family: var(--sans);
    font-size: 0.8rem;
    text-align: center;
}

.foot-line { margin: 0.5rem 0 0; }

.foot-key {
    color: var(--ink-faint);
    text-decoration: none;
    border-bottom: 1px dotted var(--rule);
}

.foot-key:hover { color: var(--gold); }

/* ---------- typography ---------- */

h1, h2, h3 {
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 0.6em;
    text-wrap: balance;
}

h1 { font-size: 1.9rem; letter-spacing: -0.01em; font-weight: 500; }
h2 { font-size: 1.3rem; margin-top: 2.5rem; }
h3 { font-size: 1.05rem; margin-top: 2rem; }

p { margin: 0 0 1.1em; }

.lede {
    font-size: 1.12rem;
    color: var(--ink-soft);
}

.muted { color: var(--ink-faint); }

.small { font-size: 0.85rem; }

.kicker {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-faint);
    margin: 0 0 var(--s2);
}

/* The label above a section of the owner's side. Sits closer to its
   content than an <h2> does, because it introduces a list rather than
   opening a new argument. */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
    margin: var(--s7) 0 var(--s4);
}

.section-head > h2 { margin: 0; }

.section-head-aside {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-faint);
}

/* ---------- prose: letters and notes ---------- */

.prose {
    font-family: var(--serif);
    font-size: 1.3rem;
    line-height: 1.72;
    max-width: var(--measure);
}

.prose p { margin: 0 0 1.4em; }

.prose blockquote {
    margin: 1.6em 0;
    padding-left: 1.2em;
    border-left: 2px solid var(--deep);
    color: var(--ink-soft);
    font-style: italic;
}

.prose-rule {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.4em auto;
    width: 5rem;
}

.prose a { word-break: break-word; }

.signature {
    margin-top: 2.5rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ink-soft);
}

/* Chinese has no glyphs in Lora — fall through to the reader's system
   serif for CJK, keeping Lora for any Latin characters in the text. */
.lang-zh,
.lang-zh .prose,
.lang-zh .signature,
.lang-zh textarea {
    font-family: "Lora", Georgia, "Noto Serif SC", "Source Han Serif SC",
                 "Songti SC", "SimSun", "Microsoft YaHei", serif;
}

/* The quiet "read the original" line at the foot of a translated letter. */
.translated-note {
    margin-top: 2.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink-faint);
}

.translated-note a { color: var(--deep); }

/* ---------- cards and lists ---------- */

.card {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--s5);
    margin: 0 0 var(--s4);
}

.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.card-link:hover {
    border-color: var(--rule-firm);
    box-shadow: var(--shadow);
    color: inherit;
}

.card-title {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
    font-size: 1.08rem;
    font-weight: 600;
    margin: 0 0 var(--s1);
}

.card-meta {
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--ink-faint);
    margin: 0;
}

.card-excerpt {
    margin: var(--s2) 0 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

/* A card's own sentence, as opposed to its title or its links. Was
   style="margin:0" repeated on every card in the app. */
.card-body { margin: 0; }

/* A status used as a card's kicker takes the kicker's typography and
   contributes only its dot and its colour. */
.kicker .status {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.kicker .status::before { width: 0.45rem; height: 0.45rem; }

/* The links along the bottom of a card. Was an inline margin on every
   one of them. */
.card-actions {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 0.82rem;
    margin: var(--s3) 0 0;
}

.card-actions .sep { color: var(--rule-firm); }

/* The one card on the dashboard that reports the state of the whole
   thing. An edge of colour rather than a coloured panel: it has to be
   findable at a glance without shouting on a page somebody may be
   looking at for sad reasons. */
.state-card { border-left: 3px solid var(--rule-firm); }
.state-card.is-open { border-left-color: var(--ok); }

/* Something that wants doing. Same restraint — the list is the alarm,
   not each row of it. */
.card-todo { border-left: 3px solid var(--gold); }

.stack > * + * { margin-top: var(--s3); }

/* ---------- row cards: the owner's lists ----------

   People, Letters, Practical things and Keepers were HTML tables, and
   read as a database export: every field at the same weight, "Edit" as
   a bare blue word in the last column.

   A row card is still one line per record — you still scan down a
   column, and status and actions still land in the same place on every
   row, which is the only thing the table was doing well. What it adds is
   a hierarchy: the name is the name, everything identifying them is one
   quiet line underneath, and the facts that decide whether this row
   needs your attention sit in their own columns to the right.

   It collapses to a stack on a phone rather than scrolling sideways. */

.rows {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin: var(--s4) 0 var(--s6);
}

.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--s3) var(--s5);
    padding: var(--s4) var(--s5);
    border-top: 1px solid var(--rule);
}

.row:first-child { border-top: 0; }

.row:hover { background: var(--paper); }

/* A row nobody can currently use — revoked, inactive. Stated by fading
   the identity, never by hiding the row: it still has to be findable. */
.row-off .row-name,
.row-off .row-sub { opacity: 0.55; }

.row-main { min-width: 0; }

.row-name {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

.row-name a { text-decoration: none; color: inherit; }
.row-name a:hover { color: var(--deep); text-decoration: underline; }

/* Everything that identifies the record but is not its name: the email,
   the relationship, the excerpt. One line, one colour, never competing
   with the name above it. */
.row-sub {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-faint);
    margin: var(--s1) 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-sub .sep { opacity: 0.5; padding: 0 0.15rem; }

/* The columns that carry a fact worth scanning for. */
.row-facts {
    display: flex;
    align-items: center;
    gap: var(--s5);
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.row-fact { text-align: right; }

.row-fact-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-faint);
    margin-bottom: 0.1rem;
}

.row-fact-value { display: block; font-weight: 600; color: var(--ink); }
.row-fact-value.is-zero { font-weight: 400; color: var(--ink-faint); }

/* Status is its own column and left-aligned, so the dots form a line
   down the list and "which of these needs me" is one glance. */
.row-fact-status {
    text-align: left;
    min-width: 9rem;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    justify-content: flex-end;
}

.row-actions form { margin: 0; }

.rows-empty {
    font-family: var(--sans);
    color: var(--ink-faint);
    font-size: 0.9rem;
    padding: var(--s6) var(--s5);
    text-align: center;
}

@media (max-width: 46rem) {
    .row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s3);
    }

    .row-facts {
        justify-content: flex-start;
        gap: var(--s5);
        flex-wrap: wrap;
        white-space: normal;
    }

    .row-fact { text-align: left; }
    .row-actions { justify-content: flex-start; }
    .row-sub { white-space: normal; }
}

/* A list of cards that flows into columns on a wide screen and collapses
   to one on a phone — used for the letter lists so a handful of items
   does not sit as a stack of wide, near-empty bands. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.card-grid .card { margin: 0; height: 100%; }

.empty {
    color: var(--ink-faint);
    font-style: italic;
    padding: 1.5rem 0;
}

/* ---------- the door ---------- */

.door {
    max-width: 25rem;
    margin: 4rem auto;
    text-align: center;
}

.door h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.7rem;
}

.key-input {
    width: 100%;
    padding: 0.9rem 0.75rem;
    font-family: var(--mono);
    font-size: 1.25rem;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
    background: var(--paper-card);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.key-input:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
    border-color: var(--gold);
}

.key-hint {
    color: var(--ink-faint);
    font-size: 0.82rem;
    margin-top: 0.6rem;
}

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

/* Present to a screen reader, absent to the eye. Used where the field
   is self-evident visually but still needs a programmatic label. */
.visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

label {
    display: block;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin: var(--s5) 0 var(--s1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--paper-card);
    border: 1px solid var(--rule-firm);
    border-radius: var(--radius-sm);
}

input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 0.7; }

textarea {
    min-height: 16rem;
    line-height: 1.6;
    resize: vertical;
}

textarea.prose-editor {
    font-family: var(--serif);
    font-size: 1.05rem;
    min-height: 24rem;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
    border-color: var(--gold);
}

.field-help {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-faint);
    margin: var(--s1) 0 0;
    font-weight: 400;
    line-height: 1.5;
}

.checkline {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.5rem 0;
    font-size: 0.95rem;
}

.checkline input { margin-top: 0.25rem; }

fieldset {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.5rem 1rem 1rem;
    margin: 1.2rem 0;
}

legend {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    padding: 0 0.4rem;
}

/* Translation blocks in the letter / handoff editors. */
fieldset.i18n {
    border-style: dashed;
    border-color: var(--ink-faint);
}

fieldset.i18n legend { color: var(--deep); }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    background: var(--deep);
    border: 1px solid var(--deep);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* Darker plum, not near-black. Inverting the primary action to --ink
   made the one button on the page flinch away from its own colour. */
.btn:hover { background: #5c3f58; border-color: #5c3f58; color: #fff; }

.btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.btn-wide { width: 100%; }

.btn-quiet {
    background: var(--paper-card);
    color: var(--ink-soft);
    border-color: var(--rule-firm);
}

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

.btn-danger {
    background: var(--error);
    border-color: var(--error);
    color: #fff;
}

.btn-danger:hover { background: #6f2a33; border-color: #6f2a33; color: #fff; }

/* Row-level actions: the same control, sized for a list rather than for
   the bottom of a form. */
.btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.btn-row {
    display: flex;
    gap: var(--s2);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--s6);
}

/* A row of actions that opens a section rather than closing one, so it
   does not need the space a form's footer does. */
.btn-row-top { margin-top: var(--s4); }

/* ---------- flashes ---------- */

.flash {
    padding: var(--s3) var(--s4);
    border-radius: var(--radius-sm);
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 var(--s5);
    border: 1px solid transparent;
    border-left-width: 3px;
}

.flash-error  { background: var(--error-bg);  color: var(--error);    border-color: #e6c3ca; border-left-color: var(--error); }
.flash-ok     { background: var(--ok-bg);     color: var(--ok);       border-color: #bcd6c6; border-left-color: var(--ok); }
.flash-notice { background: var(--notice-bg); color: var(--ink-soft); border-color: var(--rule-firm); border-left-color: var(--deep); }

/* ---------- top bars ---------- */

.bar {
    background: var(--paper-card);
    border-bottom: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.85rem;
}

/* The owner's bar follows down a long list of letters. It carries the
   SEALED / OPEN state, which is the one fact that should never be
   scrolled off the screen while you are editing what it governs. */
.bar-app {
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--shadow-sm);
}

.bar-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--s3) 1.75rem;
    display: flex;
    align-items: center;
    gap: var(--s4);
    flex-wrap: wrap;
}

.bar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--serif);
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: 0;
}

.bar-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
}

.bar-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.bar-nav a:hover { color: var(--ink); background: var(--paper-sunk); }

/* Where am I. Nine flat links with no current-page marker is a menu you
   have to re-read every time you arrive. */
.bar-nav a[aria-current="page"] {
    color: var(--deep);
    background: var(--notice-bg);
    font-weight: 600;
}

/* ---------- nav groups ----------

   Nine flat links was a menu you had to read every time. They are four
   now, and each group answers one question: what am I leaving, how does
   it open, what happened.

   Built on <details>, so the menus open and close with no JavaScript at
   all and <summary> gets keyboard behaviour and a focus ring for free.
   nav.js only adds the things markup cannot: close on an outside click,
   close on Escape, and never two open at once. */

.nav-group { position: relative; }

.nav-group > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::marker { content: ""; }

.nav-group > summary:hover { color: var(--ink); background: var(--paper-sunk); }

.nav-group > summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

/* The group the current page lives in, marked the same way the page
   itself is, so a closed menu still tells you where you are. */
.nav-group.is-here > summary {
    color: var(--deep);
    background: var(--notice-bg);
    font-weight: 600;
}

.nav-chevron { transition: transform 0.15s ease; flex: none; }
.nav-group[open] .nav-chevron { transform: rotate(180deg); }

.nav-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 0.4rem);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 11rem;
    padding: 0.3rem;
    background: var(--paper-card);
    border: 1px solid var(--rule-firm);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* Must follow .bar-nav a — same specificity, so source order decides. */
.nav-menu a {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.nav-menu a:hover { background: var(--paper-sunk); color: var(--ink); }

/* A menu that opens off the right-hand end of the bar would go off the
   screen on a narrow window. */
@media (max-width: 34rem) {
    .nav-menu { left: auto; right: 0; }
}

.bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.bar-who { color: var(--ink-faint); }

.bar-exit {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.bar-exit:hover { color: var(--ink); background: var(--paper-sunk); }

.bar-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid currentColor;
}

.bar-state::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

.bar-state.is-sealed { color: var(--ink-faint); background: var(--paper-sunk); }
.bar-state.is-open   { color: var(--ok);        background: var(--ok-bg); }

@media (max-width: 60rem) {
    .bar-inner { gap: var(--s3); }
}

/* ---------- keeper preview ("view as") ---------- */

.preview-bar {
    background: #f3e3e8;
    border-bottom: 1px solid var(--gold);
    font-family: var(--sans);
    font-size: 0.83rem;
}

.preview-bar-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--s2) 1.75rem;
    display: flex;
    align-items: center;
    gap: var(--s2) var(--s3);
    flex-wrap: wrap;
}

.preview-tag {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--gold);
    color: #fff;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius);
}

.preview-msg { color: var(--ink-soft); }

.preview-switch { margin: 0 0 0 auto; }
.preview-exit   { margin: 0; }

.preview-switch select {
    width: auto;
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
}

.preview-switch button,
.preview-exit button {
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--ink-soft);
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius);
}

.preview-switch button:hover,
.preview-exit button:hover {
    color: var(--ink);
    border-color: var(--ink-faint);
}

/* link that is really a form submit button */
button.linklike {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: var(--deep);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

button.linklike:hover { color: var(--gold); }

/* ---------- tables ----------

   The owner's lists are row cards now (see .rows above). What is left on
   a table is genuinely tabular and read in bulk: the access log, the
   admin screens, the tier comparison. Those want density, so they stay
   tables — but they get the interface face and a real header. */

.table-wrap {
    overflow-x: auto;
    margin: var(--s4) 0 var(--s6);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-card);
    box-shadow: var(--shadow-sm);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 0.86rem;
}

th, td {
    text-align: left;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

thead th {
    background: var(--paper-sunk);
    border-bottom: 1px solid var(--rule-firm);
}

th {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-faint);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--paper); }

.tag {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--rule-firm);
    background: var(--paper-sunk);
    color: var(--ink-faint);
    white-space: nowrap;
    line-height: 1.4;
}

.tag-live  { color: var(--ok);   border-color: #bcd6c6; background: var(--ok-bg); }
.tag-draft { color: var(--ink-faint); }
.tag-role  { color: var(--deep); border-color: #d5c2d1; background: var(--notice-bg); }
.tag-warn  { color: var(--error); border-color: #e6c3ca; background: var(--error-bg); }

/* ---------- status ----------

   One grammar for "how is this doing", everywhere. It used to be a tag
   on one page, an inline coloured span on the next and plain grey text
   on the third, for the same three facts.

   A dot plus a word, never colour alone: "Set up" and "Not invited" have
   to be distinguishable by somebody who cannot tell green from red, and
   this gets read under stress. */

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.status-ok   { color: var(--ok); }
.status-wait { color: var(--warn); }
.status-none { color: var(--error); }

/* Nothing is wrong, there is simply nothing to report. A hollow dot, so
   it does not read as a fourth kind of alarm. */
.status-idle { color: var(--ink-faint); }
.status-idle::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.status-note {
    display: block;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--ink-faint);
    margin-top: 0.1rem;
}

/* ---------- stat tiles ----------

   The dashboard's "what is here" was a two-column table of counts with
   the word "manage" beside each. Same four numbers, but a number you can
   read at arm's length and a whole tile you can click. */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--s3);
    margin: var(--s4) 0 var(--s6);
}

.stat {
    display: block;
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--s4) var(--s4) var(--s3);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

a.stat:hover {
    border-color: var(--rule-firm);
    box-shadow: var(--shadow);
    color: inherit;
}

.stat-label {
    display: block;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-faint);
    margin-bottom: var(--s2);
}

.stat-value {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.stat-of {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-faint);
    letter-spacing: 0;
}

.stat-note {
    display: block;
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--ink-faint);
    margin-top: var(--s2);
}

.stat-note.is-warn { color: var(--warn); }

/* ---------- the issued key, shown once ---------- */

.keyplate {
    background: var(--paper-card);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    margin: 1.5rem 0;
}

.keyplate-code {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ink);
    word-break: break-all;
    margin: 0.5rem 0;
}

.keyplate-warn {
    font-size: 0.85rem;
    color: var(--error);
    margin: 0.8rem 0 0;
    font-weight: 600;
}

/* ---------- the seal switch ---------- */

.gravity {
    border: 2px solid var(--error);
    border-radius: var(--radius);
    padding: 1.5rem;
    background: var(--error-bg);
    margin: 2rem 0;
}

.gravity h2 { margin-top: 0; color: var(--error); }

.gravity p { color: var(--ink); }

/* ---------- print ---------- */

@media print {
    .bar, .foot, .btn-row, .btn { display: none !important; }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .page { max-width: none; padding: 0; }

    .prose { font-size: 12pt; max-width: none; }

    a { color: #000; text-decoration: none; }

    .prose a::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #444;
    }
}

/* =====================================================================
   Additions for the multi-tenant app: the language picker, the
   marketing bar, and the small pieces the auth pages need.
   ===================================================================== */

/* ---------- "or" divider between the two ways in ---------- */

.rule-or {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 2rem 0 1rem;
    color: var(--ink-faint);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.rule-or::before,
.rule-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--rule);
}

/* ---------- marketing bar ---------- */

.bar-marketing { background: transparent; }

.btn-small {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.foot-links { margin: 0 0 0.4rem; }
.foot-links a { color: var(--ink-faint); text-decoration: none; }
.foot-links a:hover { color: var(--gold); }

/* ---------- language picker ----------
   Markup in includes/lang-picker.php, driven by assets/js/translate.js. */

.lang-picker { position: relative; }

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font: inherit;
    font-size: 0.82rem;
    padding: 0.3rem 0.6rem;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
}

.lang-btn:hover,
.lang-picker.open .lang-btn { border-color: var(--gold); color: var(--gold); }

.lang-chevron { transition: transform 0.15s ease; }
.lang-picker.open .lang-chevron { transform: rotate(180deg); }

.lang-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 40;
    margin: 0;
    padding: 0.3rem;
    min-width: 11rem;
    max-height: 20rem;
    overflow-y: auto;
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(47, 38, 48, 0.10);
}

.lang-picker.open .lang-dropdown { display: block; }

.lang-dropdown li { list-style: none; }

.lang-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    padding: 0.4rem 0.6rem;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: var(--ink-soft);
    cursor: pointer;
}

.lang-dropdown button:hover  { background: var(--notice-bg); color: var(--ink); }
.lang-dropdown button.active { background: var(--notice-bg); color: var(--deep); font-weight: 600; }

/* The offer to machine-translate private content, and the notice that
   goes with it. Quiet — it is an option, not a recommendation. */

.translate-offer {
    margin: 2rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.translate-offer strong { color: var(--ink-soft); }

/* Google injects its own furniture; none of it belongs here. The same
   rules live in translate.js so they apply before first paint. */
.goog-te-banner-frame,
.skiptranslate { display: none !important; }

body { top: 0 !important; }

/* =====================================================================
   Marketing pages.

   Same rules as everywhere else: nothing moves, nothing shouts, no
   gradient asking to be admired. Someone reading these is deciding
   whether to trust us with the last thing they will ever say to their
   daughter. A landing page that behaves like a landing page would be
   the wrong answer to that.
   ===================================================================== */

.hero {
    max-width: var(--measure);
    padding: var(--s6) 0 var(--s4);
}

.hero h1 {
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: var(--s5);
}

@media (max-width: 40rem) {
    .hero h1 { font-size: 1.95rem; }
}

.hero .lede { font-size: 1.2rem; max-width: 34rem; }

/* The price, stated before anybody has to ask for it. Was an inline
   margin. */
.hero-note {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin: var(--s5) 0 0;
    max-width: 34rem;
}

/* ---------- assurances ----------

   Three facts under the hero. Not badges, not testimonials, not a logo
   wall — there are no logos and there is no social proof, and inventing
   either would be the exact thing this page must not do. These are three
   promises the software actually keeps, in the words used everywhere
   else, because the question a stranger is really asking here is "what
   stops you reading this". */

.assurances {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--s4);
    max-width: var(--measure);
    margin: var(--s6) auto 0;
    padding: var(--s5) 0 0;
    border-top: 1px solid var(--rule);
}

.assurance-title {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--deep);
    margin: 0 0 var(--s2);
}

.assurance-body {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

/* An alternating band, to break the page into readable stretches
   without drawing a line under anything. */
.band {
    margin: 3.5rem -1.75rem;
    padding: 2.5rem 1.75rem;
    background: var(--paper-card);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

section { max-width: var(--measure); margin: 3.5rem auto; }
.band   { max-width: none; }
.band > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }

section p { font-size: 1.05rem; }

/* ---------- the three steps ---------- */

.steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    gap: 2rem;
}

@media (min-width: 52rem) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.steps li { counter-increment: step; }

.steps li h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.steps li h3::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-right: 0.6rem;
    background: var(--notice-bg);
    border: 1px solid #dcc9d8;
    border-radius: 50%;
    color: var(--deep);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    vertical-align: 0.1em;
}

.steps li p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }

/* ---------- question and answer ---------- */

.qa h3 {
    margin: var(--s6) 0 var(--s2);
    padding-top: var(--s5);
    border-top: 1px solid var(--rule);
    font-size: 1.05rem;
    color: var(--ink);
}

.qa h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.qa p { margin: 0; color: var(--ink-soft); }

/* ---------- pricing ---------- */

.tiers {
    display: grid;
    gap: 1.5rem;
    max-width: var(--measure);
    margin: 2rem auto;
}

@media (min-width: 46rem) {
    .tiers { grid-template-columns: 1fr 1fr; align-items: start; }
}

.tier {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--s6);
}

.tier-featured {
    border-color: #d5c2d1;
    box-shadow: var(--shadow);
}

.tier-price {
    font-family: var(--sans);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: var(--s1) 0 0;
    color: var(--ink);
}

.tier-sub {
    font-family: var(--sans);
    margin: var(--s1) 0 0;
    color: var(--ink-faint);
    font-size: 0.85rem;
}

.tier-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    font-size: 0.95rem;
}

.tier-list li {
    padding: 0.45rem 0 0.45rem 1.4rem;
    position: relative;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
}

.tier-list li:last-child { border-bottom: 0; }

.tier-list li::before {
    content: "·";
    position: absolute;
    left: 0.4rem;
    color: var(--deep);
    font-weight: 700;
}

/* ---------- long-form legal ---------- */

/* Terms and privacy are set smaller than a letter — they are reference,
   not prose to be moved by. Still comfortable to actually read. */
body.reading .prose h2 {
    font-size: 1.15rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

body.reading .prose ul { color: var(--ink-soft); }
body.reading .prose li { margin-bottom: 0.5em; }

/* The legal pages set their own, tighter measure than a letter does. */
.prose code {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--notice-bg);
    padding: 0.1em 0.3em;
    border-radius: 2px;
}

/* ---------- pay what you want ---------- */

.amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.5rem 0 1.5rem;
}

.amount-btn {
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.7rem 1.3rem;
    min-width: 5rem;
    background: var(--paper-card);
    color: var(--deep);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
}

.amount-btn:hover {
    border-color: var(--deep);
    background: var(--notice-bg);
}

.amount-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.amount-custom input[type="text"] {
    max-width: 9rem;
    font-size: 1.05rem;
    text-align: right;
}

.amount-symbol {
    font-size: 1.05rem;
    color: var(--ink-faint);
}

/* ---------- brand mark ---------- */

.bar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bar-brand img {
    width: 28px;
    height: 28px;
    display: block;
}

/* On a narrow screen the monogram carries the brand on its own — the
   wordmark is the first thing worth losing when the bar gets crowded. */
@media (max-width: 30rem) {
    .bar-brand span { display: none; }
}

/* ---------- photographs ---------- */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
}

.photo {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin: 0;
}

.photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    background: var(--notice-bg);
}

.photo figcaption {
    margin: 0.7rem 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.photo-meta {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--ink-faint);
}

.photo input[type="text"] { font-size: 0.88rem; margin-top: 0.5rem; }
.photo .btn-row { margin-top: 0.5rem; }

/* On the reading side there is no editing furniture, so the pictures
   can be larger and the caption does the talking. */
.photo-grid-read {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.photo-grid-read .photo { padding: 0.5rem; }
.photo-grid-read a { display: block; }

.btn-small { padding: 0.35rem 0.8rem; font-size: 0.85rem; }

@media print {
    .photo-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .photo { border: 0; padding: 0; background: none; page-break-inside: avoid; }
}

/* ---------- one photograph, on its own page ---------- */

.photo-single {
    margin: 0 0 1.5rem;
    text-align: center;
}

.photo-single img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius);
    background: var(--notice-bg);
}

.photo-single figcaption {
    max-width: var(--measure);
    margin: 1.2rem auto 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-soft);
    text-align: left;
}

.photo-nav {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* Present but unusable, rather than absent — the row keeps its shape as
   you move through, so the Back button does not jump around under the
   thumb of somebody tapping through five photographs. */
.photo-nav .is-disabled {
    opacity: 0.35;
    cursor: default;
    user-select: none;
}

.photo-position {
    text-align: center;
    margin-top: 0.8rem;
}

@media print {
    .photo-nav, .photo-position { display: none !important; }
    .photo-single img { max-width: 100%; }
}

/* ---------- the writing surface ----------
   Only ever on the pages where somebody writes. The reading side has no
   JavaScript at all and this never loads there. */

.editor {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-card);
    margin-top: 0.35rem;
}

.editor-bar {
    display: flex;
    gap: 0.2rem;
    padding: 0.4rem;
    background: var(--paper-sunk);
    border-bottom: 1px solid var(--rule);
    border-radius: var(--radius) var(--radius) 0 0;
    flex-wrap: wrap;
}

/* The toolbar is a control, so it takes the interface face — the surface
   below it stays in the face the letter will be read in. */
.editor-btn {
    font-family: var(--sans);
    font-size: 0.95rem;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.5rem;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 1;
}

.editor-btn:hover  { background: var(--notice-bg); color: var(--ink); }
.editor-btn:focus  { outline: 2px solid var(--gold); outline-offset: 1px; }

/* The surface is set in the same face and size the letter will be read
   in, so what somebody writes looks like what they are writing. */
.editor-surface {
    min-height: 20rem;
    padding: 1.1rem 1.2rem;
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
    overflow-wrap: break-word;
}

.editor-surface:focus { outline: none; }
.editor:focus-within  { border-color: var(--gold); }

.editor-surface p          { margin: 0 0 1em; }
.editor-surface h2         { font-size: 1.15rem; margin: 1.4em 0 0.5em; font-weight: 600; }
.editor-surface ul,
.editor-surface ol         { margin: 0 0 1em; padding-left: 1.6em; }
.editor-surface li         { margin-bottom: 0.3em; }
.editor-surface blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 2px solid var(--deep);
    color: var(--ink-soft);
    font-style: italic;
}
.editor-surface hr {
    border: 0;
    border-top: 1px solid var(--rule);
    width: 5rem;
    margin: 1.6em auto;
}

/* ---------- headings inside a letter or note ----------
   A distinct class, so these do not inherit the rule-above styling the
   legal pages give every h2. */
.prose .prose-head {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 2rem 0 0.6rem;
    padding-top: 0;
    border-top: 0;
}

.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.5em; }
.prose li            { margin-bottom: 0.4em; }

/* ---------- admin: system diagnostics ----------
   A back-link, and a command meant to be selected and pasted. The
   command must wrap rather than scroll: a cron path is long, and a
   line the reader has to drag sideways to see the end of is a line
   they will copy half of. */

.crumb {
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}

.pre-wrap {
    font-family: var(--mono);
    font-size: 0.9rem;
    background: var(--paper-bottom);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin: 0.6rem 0 1.4rem;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}

/* ---------- the signature on /why.php ----------
   Set apart from the prose above it, the way a signature is set apart
   from a letter. Not a flourish: the page is a signed statement and
   should look like one. */

.why-sign {
    margin: 2.5rem 0 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ---------- the agreement box on signup ----------
   Laid out so the box sits beside the sentence rather than above it,
   and so the whole sentence is a click target. A checkbox somebody has
   to aim at is a checkbox somebody ticks without reading. */

.agree {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 1.4rem 0 0.5rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
    cursor: pointer;
    font-weight: 400;
}

.agree input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.18rem 0 0;
    accent-color: var(--deep);
    cursor: pointer;
}

.agree a { color: var(--deep); }

/* ---------- admin: the fold over a destructive action ----------
   Folded away by default so that deleting an account is never one
   stray click from a search result. Opening it is a decision. */

.danger-fold {
    margin-top: 1rem;
    border-top: 1px solid var(--rule);
    padding-top: 0.9rem;
}

.danger-fold > summary {
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--error);
    font-weight: 600;
    list-style: none;
}

.danger-fold > summary::-webkit-details-marker { display: none; }

.danger-fold > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: none;
}

.danger-fold[open] > summary::before { content: "▾ "; }

.danger-fold > summary:hover { color: var(--gold); }