@import url(../fontawesome/css/all.min.css);

/* ==========================================================================
   COURIER — the Guild of Messengers console
   --------------------------------------------------------------------------
   A hand-written CSS system layered on Bootstrap 5.0.2.

   Structure of this file
     1.  TOKENS          design tokens for both themes
     2.  BASE            resets, typography, links, focus
     3.  CHROME          top rail, bottom tab bar, more-sheet
     4.  SURFACES        panels, page headers, sections, drop caps
     5.  DATA            data lists (table -> stacked cards), pagination
     6.  COMPONENTS      stats, badges, couriers, sigils, empty states
     7.  FORMS           inputs, labels, radio cards, help text
     8.  UTILITIES       spacing/tone helpers
     9.  MOTION          reduced-motion + print

   Rules that are not negotiable
     - Body copy is Inter at >= 16px, on a near-solid surface, >= 7:1.
     - Decorative faces (Cinzel, Uncial Antiqua) are for display text only:
       headings, nav labels, numerals, drop caps. Never paragraphs, labels,
       table cells or input text.
     - Texture lives on chrome and page background. Never behind body copy.
     - Status colour is never the only signal: icon + text label always.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* ---- Type families -------------------------------------------------
       --font-body     Inter          readable, everything the user reads
       --font-display  Cinzel         engraved caps: headings, nav, numerals
       --font-rune     Uncial Antiqua drop caps and single glyphs only
    */
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Cinzel", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-rune: "Uncial Antiqua", "Cinzel", Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* ---- Type scale (rem, 16px root) -----------------------------------  */
    --fs-micro: 0.75rem;   /* 12px — timestamps, table sub-labels only      */
    --fs-small: 0.875rem;  /* 14px — secondary text, never primary body     */
    --fs-body: 1rem;       /* 16px — BODY MINIMUM. inputs sit here too.     */
    --fs-lead: 1.0625rem;  /* 17px — lede paragraphs                        */
    --fs-h4: 1.125rem;
    --fs-h3: 1.3125rem;
    --fs-h2: 1.625rem;
    --fs-h1: 2rem;

    --lh-tight: 1.22;
    --lh-body: 1.6;

    /* ---- Geometry ------------------------------------------------------ */
    --radius-sm: 5px;
    --radius: 9px;
    --radius-lg: 14px;
    --rail-h: 60px;
    --tabbar-h: 62px;
    --tap: 44px;              /* minimum tap target */
    --measure: 68ch;          /* max line length for prose */

    /* ================= DAYLIGHT / PARCHMENT (default, light) =============
       Contrast ratios measured in-browser against --surface (#FDF8EE):
         --ink        #1B1408  17.25:1   body copy            (needs 7)
         --ink-muted  #5C4A2E   8.02:1   secondary/muted      (needs 4.5)
         --ink-faint  #6B5836   6.45:1   timestamps, hints
         --link       #57379B   8.18:1   inline links
         --gold-ink   #7A5310   6.46:1   display headings
         --ok         #1F6B3A   6.16:1   status label text
         --warn       #8A5B00   5.55:1
         --bad        #A3242B   6.97:1
         --info       #1D5A8A   6.88:1
         --ember      #A34A17   5.59:1   Emberquill courier
         --storm      #474C8C   7.40:1   Stormcrow courier
       Each status colour is also checked against its own tinted pill:
       ok 5.59, warn 4.97, bad 6.00, info 6.13, ember 5.28, storm 6.39.
       --gold (#B8862B) is 3.06:1 and is therefore DECORATIVE ONLY:
       rules, borders, icon glyphs 24px+, never text.
    */
    --parchment: #F6EEDC;      /* page field                                */
    --parchment-deep: #EADFC6; /* page field, second stop                   */
    --surface: #FDF8EE;        /* panel / card face — near solid            */
    --surface-2: #F4EBD8;      /* inset wells, table stripes                */
    --surface-3: #EBDFC4;      /* hover, chips                              */

    --ink: #1B1408;
    --ink-muted: #5C4A2E;
    --ink-faint: #6B5836;      /* 6.46:1 — timestamps, hint text            */

    --gold: #B8862B;           /* decorative leaf                           */
    --gold-soft: #D8B871;
    --gold-ink: #7A5310;       /* legible gold for display text             */
    --arcane: #57379B;
    --arcane-soft: #EDE6FA;
    --link: #57379B;
    --link-hover: #3E236F;

    --rule: #D9C79C;           /* hairline borders                          */
    --rule-strong: #BB9C58;
    --shadow-1: 0 1px 2px rgba(46, 32, 8, .08), 0 2px 10px rgba(46, 32, 8, .06);
    --shadow-2: 0 2px 6px rgba(46, 32, 8, .12), 0 10px 28px rgba(46, 32, 8, .10);

    --ok: #1F6B3A;
    --ok-bg: #E4F1E6;
    --warn: #8A5B00;
    --warn-bg: #F8EBCF;
    --bad: #A3242B;
    --bad-bg: #F8E3E1;
    --info: #1D5A8A;
    --info-bg: #E1EDF7;
    --neutral: #5C4A2E;
    --neutral-bg: #EEE4CE;

    --ember: #A34A17;          /* Emberquill — Personal Post                */
    --ember-bg: #FCF0E4;
    --ember-rule: #E0A472;
    --storm: #474C8C;          /* Stormcrow — Great Sending                 */
    --storm-bg: #E6E7F6;
    --storm-rule: #9AA0DA;

    --night-chrome: #17203A;   /* top rail / tab bar are always night-dark  */
    --night-chrome-2: #0F1628;
    --chrome-ink: #F3ECDC;
    --chrome-ink-muted: #C4B99E;

    --focus: #7A5310;
    --scrim: rgba(24, 17, 5, .55);

    color-scheme: light;
}

/* ================= NIGHTWATCH (dark) =================================
   Contrast ratios measured in-browser against --surface (#1B2338):
     --ink        #F2ECDD  13.26:1   body copy            (needs 7)
     --ink-muted  #A9B4CC   7.50:1   secondary/muted      (needs 4.5)
     --ink-faint  #9AA6BF   6.38:1   timestamps, hints
     --link       #E8DFFF  12.22:1   inline links
     --gold-ink   #E7C878   9.62:1   display headings
     --gold       #D9B25A   7.79:1   rules and heading accents
     --ok         #7EDCA2   9.41:1
     --warn       #F3C165   9.39:1
     --bad        #FCA5A5   8.23:1
     --info       #86C5F0   8.38:1
     --ember      #F4B77E   8.87:1
     --storm      #C3BAF7   8.69:1
   Against their own tinted pills: ok 8.59, warn 8.56, bad 8.23,
   info 8.10, ember 8.27, storm 8.76.
   ===================================================================== */
[data-theme="dark"] {
    --parchment: #0E1422;
    --parchment-deep: #080D18;
    --surface: #1B2338;
    --surface-2: #222C45;
    --surface-3: #2C3853;

    --ink: #F2ECDD;
    --ink-muted: #A9B4CC;
    --ink-faint: #9AA6BF;   /* one step dimmer than muted, as in Daylight */

    --gold: #D9B25A;
    --gold-soft: #8A6B2A;
    --gold-ink: #E7C878;
    --arcane: #C3BAF7;
    --arcane-soft: #262046;
    --link: #E8DFFF;
    --link-hover: #FFFFFF;

    --rule: #34405E;
    --rule-strong: #6E5A2E;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .55), 0 12px 30px rgba(0, 0, 0, .45);

    --ok: #7EDCA2;
    --ok-bg: #14301F;
    --warn: #F3C165;
    --warn-bg: #35290D;
    --bad: #FCA5A5;
    --bad-bg: #3A1A1C;
    --info: #86C5F0;
    --info-bg: #12283A;
    --neutral: #A9B4CC;
    --neutral-bg: #263049;

    --ember: #F4B77E;
    --ember-bg: #3A2413;
    --ember-rule: #8A5B2A;
    --storm: #C3BAF7;
    --storm-bg: #221F3E;
    --storm-rule: #5B54A0;

    --night-chrome: #0B1120;
    --night-chrome-2: #060A14;
    --chrome-ink: #F2ECDD;
    --chrome-ink-muted: #A9B4CC;

    --focus: #E7C878;
    --scrim: rgba(0, 0, 0, .68);

    color-scheme: dark;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

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

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink);
    background-color: var(--parchment);
    /* Map-and-vellum field. Texture lives here, behind cards — never under
       body copy, which always sits on --surface. */
    background-image:
        radial-gradient(circle at 12% 8%, rgba(184, 134, 43, .13), transparent 42%),
        radial-gradient(circle at 88% 4%, rgba(87, 55, 155, .10), transparent 38%),
        radial-gradient(circle at 50% 100%, rgba(87, 55, 155, .08), transparent 55%),
        linear-gradient(168deg, var(--parchment) 0%, var(--parchment-deep) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

[data-theme="dark"] body {
    background-image:
        radial-gradient(circle at 14% 6%, rgba(217, 178, 90, .10), transparent 40%),
        radial-gradient(circle at 86% 2%, rgba(147, 122, 224, .14), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(87, 55, 155, .16), transparent 55%),
        linear-gradient(168deg, var(--parchment) 0%, var(--parchment-deep) 100%);
}

/* Display faces — headings, nav, numerals. Never body copy. */
h1, h2, h3, h4, h5, h6,
.display-face {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .012em;
    line-height: var(--lh-tight);
    color: var(--ink);
    margin: 0 0 .5rem;
    overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 { font-size: var(--fs-h4); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover,
a:focus {
    color: var(--link-hover);
}

/* Visible, restyled focus ring — never removed. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 3px;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    opacity: 1;
    margin: 1.25rem 0;
}

code, kbd, pre, samp, .mono {
    font-family: var(--font-mono);
    font-size: .9375rem;
}

::selection {
    background: var(--gold-soft);
    color: #1B1408;
}

/* Small-caps eyebrow used above section titles. */
.eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin: 0 0 .25rem;
}

.muted {
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.faint {
    color: var(--ink-faint);
    font-size: var(--fs-micro);
}

.numeral {
    font-family: var(--font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--surface);
    color: var(--ink);
    padding: .75rem 1rem;
    border: 2px solid var(--focus);
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    left: .5rem;
    top: .5rem;
}

/* ==========================================================================
   3. CHROME — top rail, bottom tab bar, more sheet
   ========================================================================== */

.rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background:
        linear-gradient(180deg, var(--night-chrome) 0%, var(--night-chrome-2) 100%);
    color: var(--chrome-ink);
    border-bottom: 1px solid rgba(184, 134, 43, .45);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .28);
    padding-top: env(safe-area-inset-top);
}

/* A hair of gold leaf beneath the rail. */
.rail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(184, 134, 43, .0) 4%,
            rgba(184, 134, 43, .65) 22%,
            rgba(216, 184, 113, .9) 50%,
            rgba(184, 134, 43, .65) 78%,
            rgba(184, 134, 43, .0) 96%,
            transparent 100%);
    pointer-events: none;
}

.rail-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--rail-h);
    padding: 0 .75rem;
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
}

.rail-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: var(--tap);
    color: var(--chrome-ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rail-brand:hover,
.rail-brand:focus {
    color: #fff;
}

.rail-brand .brand-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.rail-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

/* Between 992 and 1239 the rail needs every pixel for the tool names, so the
   wordmark steps back to the crest alone — still announced to a screen
   reader, just not drawn. */
.rail-brand .brand-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 991.98px), (min-width: 1240px) {
    .rail-brand .brand-word {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
}

.rail-brand .brand-sub {
    display: none;
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--chrome-ink-muted);
}

.rail-nav {
    display: none;
    margin: 0 0 0 .75rem;
    flex: 0 1 auto;
    min-width: 0;
    /* Backstop: the links are nowrap, so without this a squeezed rail would
       run its last label underneath the tool buttons. */
    overflow: hidden;
}

.rail-list {
    display: flex;
    align-items: stretch;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.rail-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: .3rem .6rem;
    border-radius: var(--radius-sm);
    color: var(--chrome-ink);
    text-decoration: none;
    border: 1px solid transparent;
}

.rail-link:hover,
.rail-link:focus {
    background: rgba(184, 134, 43, .16);
    color: #fff;
}

.rail-link[aria-current="page"] {
    background: rgba(184, 134, 43, .22);
    border-color: rgba(216, 184, 113, .55);
    color: #fff;
}

.rail-link .fa-fw {
    font-size: 1.05rem;
    color: var(--gold-soft);
}

.rail-link[aria-current="page"] .fa-fw {
    color: #F0D79B;
}

.rail-label {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.rail-label .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: .04em;
    white-space: nowrap;
}

.rail-label .f {
    font-size: 11px;
    color: var(--chrome-ink-muted);
    letter-spacing: .02em;
    white-space: nowrap;
}

.rail-link[aria-current="page"] .rail-label .f {
    color: #E2D6B6;
}

.rail-tools {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
}

.rail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0 .55rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(216, 184, 113, .35);
    background: rgba(255, 255, 255, .06);
    color: var(--chrome-ink);
    font-size: var(--fs-small);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.rail-btn:hover,
.rail-btn:focus {
    background: rgba(184, 134, 43, .22);
    color: #fff;
}

/* Theme-toggle glyph swap — works anywhere the toggle is placed. */
.theme-dark-only { display: none; }
[data-theme="dark"] .theme-dark-only { display: inline; }
[data-theme="dark"] .theme-light-only { display: none; }

/* Rail dropdown (account menu) */
.rail-menu {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    padding: .35rem;
    min-width: 13rem;
}

.rail-menu .dropdown-item {
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--fs-body);
    padding: .55rem .65rem;
    min-height: var(--tap);
    display: flex;
    align-items: center;
    gap: .55rem;
}

.rail-menu .dropdown-item:hover,
.rail-menu .dropdown-item:focus {
    background: var(--surface-3);
    color: var(--ink);
}

.rail-menu .dropdown-item.is-danger { color: var(--bad); }
.rail-menu .dropdown-header {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-ink);
    padding: .4rem .65rem .25rem;
}

/* --- Bottom tab bar (mobile) ------------------------------------------- */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    background: linear-gradient(0deg, var(--night-chrome-2) 0%, var(--night-chrome) 100%);
    border-top: 1px solid rgba(184, 134, 43, .45);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .3);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--tabbar-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Horizontal padding is deliberately tiny: at 390px each of the five tabs
       gets 78px, and "Glimmerwing" needs 73.5px of it. */
    padding: .35rem .05rem;
    color: var(--chrome-ink-muted);
    text-decoration: none;
    background: none;
    border: 0;
    border-top: 3px solid transparent;
    cursor: pointer;
}

.tab i {
    font-size: 1.15rem;
    line-height: 1;
}

/* 10px in a display face, sized so "Glimmerwing" fits a fifth of a 390px
   viewport without ellipsis. Nav label, never body copy. */
.tab .t-n {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tab .t-f {
    font-size: 9px;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: .85;
}

.tab:hover,
.tab:focus {
    color: var(--chrome-ink);
}

.tab[aria-current="page"],
.tab.is-active {
    color: #F0D79B;
    border-top-color: var(--gold);
    background: rgba(184, 134, 43, .12);
}

/* --- "More" sheet ------------------------------------------------------- */
.sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: var(--scrim);
    border: 0;
    padding: 0;
    display: none;
}

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    display: none;
    background: var(--surface);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
    padding: .75rem .9rem calc(.9rem + var(--tabbar-h) + env(safe-area-inset-bottom));
    max-height: 80vh;
    overflow-y: auto;
}

body.sheet-open .sheet,
body.sheet-open .sheet-scrim {
    display: block;
}

.sheet-handle {
    width: 46px;
    height: 4px;
    border-radius: 4px;
    background: var(--rule-strong);
    margin: 0 auto .75rem;
}

.sheet-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .6rem .7rem;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
    margin-bottom: .5rem;
}

.sheet-item:hover,
.sheet-item:focus {
    background: var(--surface-3);
    color: var(--ink);
}

.sheet-item i {
    font-size: 1.2rem;
    color: var(--gold-ink);
    width: 1.6rem;
    text-align: center;
    flex: 0 0 1.6rem;
}

.sheet-item .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    display: block;
    line-height: 1.2;
}

.sheet-item .f {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    display: block;
}

/* No-JS fallback for the More sheet: a plain list at the foot of the page. */
.sheet-fallback {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1rem .75rem calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 1.5rem);
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
}

/* --- Page shell --------------------------------------------------------- */
.shell {
    padding-top: calc(var(--rail-h) + env(safe-area-inset-top));
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 1.5rem);
    min-height: 100vh;
}

.shell-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1rem .75rem 0;
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
}

/* Breadcrumbs */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.crumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.crumbs li + li::before {
    content: "\203A";
    color: var(--rule-strong);
    font-weight: 700;
}
.crumbs a { color: var(--ink-muted); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   4. SURFACES — page header, panels, sections
   ========================================================================== */

.page-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .85rem;
    margin: 0 0 1.15rem;
    padding: 1rem 1rem 1.05rem;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--gold);
    box-shadow: var(--shadow-1);
}

[data-theme="dark"] .page-header {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
}

.page-header .ph-crest {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, var(--gold-soft), var(--gold) 72%);
    color: #2A1D02;
    font-size: 1.25rem;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), var(--shadow-1);
}

[data-theme="dark"] .page-header .ph-crest {
    color: #17110A;
}

.page-header .ph-text {
    flex: 1 1 14rem;
    min-width: 0;
}

.page-header h1 {
    font-size: var(--fs-h1);
    margin: 0;
    color: var(--ink);
}

.page-header .ph-sub {
    margin: .2rem 0 0;
    color: var(--ink-muted);
    font-size: var(--fs-body);
    max-width: var(--measure);
}

.page-header .ph-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
}

/* --- Panel: "a leaf of the ledger" -------------------------------------- */
.panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    margin-bottom: 1.15rem;
}

/* Rune corners — pure CSS, decorative only. */
.panel::before,
.panel::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    opacity: .7;
}

.panel::before {
    top: 5px;
    left: 5px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
    border-top-left-radius: 4px;
}

.panel::after {
    bottom: 5px;
    right: 5px;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    border-bottom-right-radius: 4px;
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--rule);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    border-radius: var(--radius) var(--radius) 0 0;
}

.panel-head h2,
.panel-head h3 {
    font-size: var(--fs-h4);
    margin: 0;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink);
    min-width: 0;
    overflow-wrap: break-word;
}

.panel-head > i.panel-icon {
    color: var(--gold-ink);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.panel-head .panel-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.panel-body {
    padding: 1rem;
}

.panel-body.is-flush { padding: 0; }

.panel-foot {
    padding: .7rem 1rem;
    border-top: 1px solid var(--rule);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.panel-head.has-tabs { padding: 0 1rem; }

.panel-tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 0 0;
    padding: 0;
    list-style: none;
}

.panel-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .8rem .2rem;
    margin: 0 .8rem 0 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--ink-muted);
    font-size: var(--fs-h4);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.panel-tabs .nav-link:hover { color: var(--ink); }

.panel-tabs .nav-link.active {
    color: var(--ink);
    border-bottom-color: var(--gold);
}

/* Drop capital for section openers. Decorative face, single glyph.
   flow-root contains the float so the next paragraph starts below it. */
.dropcap {
    display: flow-root;
}

.dropcap::first-letter {
    font-family: var(--font-rune);
    font-size: 3.1rem;
    line-height: .82;
    float: left;
    margin: .12em .12em 0 0;
    color: var(--gold-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

[data-theme="dark"] .dropcap::first-letter {
    text-shadow: none;
}

/* Section divider with a small heraldic lozenge */
.rule-flourish {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.25rem 0;
    color: var(--gold);
}

.rule-flourish::before,
.rule-flourish::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule-strong), transparent);
}

.rule-flourish i { font-size: .8rem; }

/* Wax seal — used for "sent" confirmations and the auth page */
.seal {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #FBEFD8;
    font-size: 1.6rem;
    background: radial-gradient(circle at 34% 28%, #C4413C 0%, #8E241F 62%, #6B1713 100%);
    box-shadow: inset 0 -3px 8px rgba(0, 0, 0, .38), inset 0 3px 6px rgba(255, 255, 255, .2), var(--shadow-2);
    border: 2px solid rgba(0, 0, 0, .15);
}

.seal.is-gold {
    background: radial-gradient(circle at 34% 28%, #E4C179 0%, #B8862B 60%, #7A5310 100%);
    color: #2A1D02;
}

/* ==========================================================================
   5. DATA — responsive lists, pagination, timelines
   ========================================================================== */

.data-list {
    width: 100%;
}

.dl-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--ink);
    font-size: var(--fs-body);
}

.dl-table caption {
    caption-side: top;
    padding: .5rem 1rem;
    color: var(--ink-muted);
    font-size: var(--fs-small);
    text-align: left;
}

.dl-table thead th {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-ink);
    background: var(--surface-2);
    border-bottom: 2px solid var(--rule-strong);
    padding: .6rem .85rem;
    text-align: left;
    white-space: nowrap;
}

.dl-table tbody td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.dl-table tbody tr:last-child td { border-bottom: 0; }
.dl-table tbody tr:hover { background: var(--surface-2); }

.dl-title {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.dl-title:hover { text-decoration: underline; }

.dl-sub {
    display: block;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.dl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
}

/* The @forelse fallback row: a full-width empty state living inside tbody.
   It must not inherit the row-as-card treatment on small screens. */
.dl-table tr.dl-empty-row,
.dl-table tbody tr.dl-empty-row:hover {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.dl-table tr.dl-empty-row > td {
    display: block;
    border: 0;
    padding: 0;
    text-align: center;
}

.dl-table tr.dl-empty-row > td::before { content: none; }

/* Genuinely wide content (raw logs) may scroll inside its own box. */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Under 768px every record table becomes a stack of cards. */
@media (max-width: 767.98px) {
    .dl-table,
    .dl-table tbody,
    .dl-table tr,
    .dl-table td {
        display: block;
        width: 100%;
    }

    .dl-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .dl-table tr {
        border: 1px solid var(--rule);
        border-left: 3px solid var(--gold);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-1);
        padding: .35rem .1rem;
        margin: 0 0 .7rem;
    }

    .dl-table tbody tr:hover { background: var(--surface); }

    .dl-table td {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: .15rem .9rem;
        border-bottom: 1px dashed var(--rule);
        padding: .45rem .8rem;
        text-align: right;
    }

    /* A secondary line drops below the value rather than sitting beside it. */
    .dl-table td .dl-sub {
        flex: 1 0 100%;
        text-align: right;
    }

    .dl-table tr td:last-child { border-bottom: 0; }

    .dl-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-family: var(--font-display);
        font-size: var(--fs-micro);
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--gold-ink);
        text-align: left;
    }

    .dl-table td.dl-primary {
        display: block;
        text-align: left;
        border-bottom: 1px solid var(--rule);
        padding-top: .6rem;
    }

    .dl-table td.dl-primary::before { content: none; }

    .dl-table td.dl-cell-actions {
        display: block;
        text-align: left;
    }

    .dl-table td.dl-cell-actions::before { content: none; }
    .dl-table td .dl-actions { justify-content: flex-start; }
}

/* Glimmerwing (/glimmerwing) — Status column width */
.dl-contacts .dl-table thead th:nth-child(2),
.dl-contacts .dl-table tbody td:nth-child(2) {
    width: 150px;
}

/* Glimmerwing (/glimmerwing) — a condensed row: more of the roll fits on screen. */
.dl-contacts .dl-table tbody td {
    padding: .4rem .85rem;
}

.dl-contacts .avatar-row {
    gap: .5rem;
}

.dl-contacts .dl-sub {
    font-size: var(--fs-micro);
}

/* The Lorevault (/lorevault) — Kind column width */
.dl-resources .dl-table thead th:nth-child(2),
.dl-resources .dl-table tbody td:nth-child(2) {
    width: 150px;
}

/* Windrider (/windrider) — Last run column width */
.dl-automations .dl-table thead th:nth-child(4),
.dl-automations .dl-table tbody td:nth-child(4) {
    width: 150px;
}

/* Pagination (Laravel's Bootstrap-5 paginator + our own) */
.pagination {
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
}

.page-link {
    color: var(--link);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm) !important;
    min-width: var(--tap);
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-item.active .page-link {
    background: var(--gold-ink);
    border-color: var(--gold-ink);
    color: #FFF8E8;
}

.page-item.disabled .page-link {
    color: var(--ink-faint);
    background: var(--surface-2);
}

.pager-wrap {
    padding: .75rem 1rem;
    border-top: 1px solid var(--rule);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Timeline (campaign progress, contact history) */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.6rem;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: .42rem;
    top: .35rem;
    bottom: .35rem;
    width: 2px;
    background: linear-gradient(180deg, var(--gold), var(--rule));
}

.timeline li {
    position: relative;
    padding: 0 0 .9rem;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: -1.35rem;
    top: .42rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--gold);
}

.timeline li.is-done::before { background: var(--gold); }

.timeline .tl-label {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.timeline .tl-at {
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

/* Grouped bar chart for Ravenwing (no JS, no canvas).

   --bc-h    the plot area: bars are a percentage of it
   --bc-pad  headroom above the plot, where the value labels sit
   --bc-grp  one bucket's width; the plot scrolls sideways rather than letting
             a long range squeeze the groups until their values collide */
.barchart {
    --bc-h: 300px;
    --bc-pad: 3rem;
    --bc-grp: 32px;
    display: flex;
    align-items: flex-start;
    gap: .45rem;
}

.bc-axis {
    flex: 0 0 auto;
    padding-top: var(--bc-pad);
}

.bc-ticks {
    position: relative;
    height: var(--bc-h);
    min-width: 2.2rem;
}

.bc-ticks span {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--ink-muted);
}

.bc-scroll {
    flex: 1 1 auto;
    overflow-x: auto;
    /* Left visible it computes to auto beside overflow-x, and the value labels
       reaching into the plot's headroom raise a scrollbar for a pixel or two. */
    overflow-y: hidden;
}

.bc-plot { padding-top: var(--bc-pad); }

.bc-stack { position: relative; }

.bc-lines {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--bc-h);
}

.bc-lines i {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--rule);
}

.bc-lines i.is-base { border-top-style: solid; }

.bc-groups {
    position: relative;
    display: flex;
    gap: 1px;
}

.bc-group {
    flex: 1 0 var(--bc-grp);
    min-width: var(--bc-grp);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.bc-cols {
    height: var(--bc-h);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.bc-bar {
    position: relative;
    width: 9px;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
}

/* Written bottom-to-top: a horizontal number is wider than the bar it belongs
   to, so at three bars a bucket the labels would overlap. */
.bc-val {
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-muted);
}

.bc-label {
    text-align: center;
    font-size: var(--fs-micro);
    line-height: 1.1;
    color: var(--ink-muted);
    white-space: nowrap;
}

.bc-bar.b-sent { background: var(--storm-rule); }
.bc-bar.b-open { background: var(--gold); }
.bc-bar.b-click { background: var(--ok); }

@media (max-width: 767px) {
    .barchart {
        --bc-h: 210px;
        --bc-pad: 2.6rem;
    }
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: .6rem;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend b {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

/* Horizontal meter */
.meter {
    height: 10px;
    border-radius: 6px;
    background: var(--surface-3);
    overflow: hidden;
    border: 1px solid var(--rule);
}

.meter > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-soft), var(--gold));
}

.meter.is-ok > span { background: linear-gradient(90deg, #6FBF8C, var(--ok)); }
[data-theme="dark"] .meter.is-ok > span { background: linear-gradient(90deg, var(--ok), #4FA377); }

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- Stat tile ---------------------------------------------------------- */
.stat {
    position: relative;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: .8rem .9rem;
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.stat .s-top {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.stat .s-label {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

.stat .s-icon { color: var(--gold-ink); font-size: .95rem; }

.stat .s-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.stat .s-trend {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* A tile that opens the list of people behind its number. */
a.stat.is-linked {
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

a.stat.is-linked:hover,
a.stat.is-linked:focus-visible {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

.stat .s-link {
    margin-top: auto;
    padding-top: .35rem;
    font-size: var(--fs-micro);
    font-family: var(--font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-ink);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    opacity: .75;
}

a.stat.is-linked:hover .s-link,
a.stat.is-linked:focus-visible .s-link { opacity: 1; }

.stat.tone-ok { border-left-color: var(--ok); }
.stat.tone-ok .s-label, .stat.tone-ok .s-icon { color: var(--ok); }
.stat.tone-warn { border-left-color: var(--warn); }
.stat.tone-warn .s-label, .stat.tone-warn .s-icon { color: var(--warn); }
.stat.tone-bad { border-left-color: var(--bad); }
.stat.tone-bad .s-label, .stat.tone-bad .s-icon { color: var(--bad); }
.stat.tone-info { border-left-color: var(--info); }
.stat.tone-info .s-label, .stat.tone-info .s-icon { color: var(--info); }
.stat.tone-ember { border-left-color: var(--ember); }
.stat.tone-ember .s-label, .stat.tone-ember .s-icon { color: var(--ember); }
.stat.tone-storm { border-left-color: var(--storm); }
.stat.tone-storm .s-label, .stat.tone-storm .s-icon { color: var(--storm); }

/* --- Status badge — icon + label + colour, never colour alone ----------- */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.35;
    max-width: 100%;
    /* Deliberately wrappable: a few states have sentence-length labels, and a
       nowrap badge in a 390px column is what pushes a page sideways. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.badge-status i {
    font-size: .8em;
    flex: 0 0 auto;
}

.badge-status > span { min-width: 0; }

.badge-status.t-ok { color: var(--ok); background: var(--ok-bg); }
.badge-status.t-warn { color: var(--warn); background: var(--warn-bg); }
.badge-status.t-bad { color: var(--bad); background: var(--bad-bg); }
.badge-status.t-info { color: var(--info); background: var(--info-bg); }
.badge-status.t-neutral { color: var(--neutral); background: var(--neutral-bg); }
.badge-status.t-arcane { color: var(--arcane); background: var(--arcane-soft); }

/* A badge that is also a link: Glimmerwing's Pax standing badges open the
   Archon console. Underlined only on hover, so a row of them stays quiet. */
a.badge-status { text-decoration: none; }
a.badge-status:hover,
a.badge-status:focus-visible { text-decoration: underline; }

/* A mark's take-it-back button, tucked inside the badge. Inherits the badge's
   tone rather than carrying its own, so it works in all six colours and in
   both schemes without a rule per tone. */
.badge-status .btn-unstyled {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin-inline-start: .1rem;
    border: 0;
    background: none;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

.badge-status .btn-unstyled:hover,
.badge-status .btn-unstyled:focus-visible { opacity: 1; }

.pax-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .25rem;
}

/* --- Courier badge ------------------------------------------------------ */
.courier-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    border: 1px solid;
    font-size: var(--fs-small);
    line-height: 1.3;
    max-width: 100%;
}

.courier-badge .cb-glyph { font-size: .95em; flex: 0 0 auto; }
.courier-badge .cb-name { font-family: var(--font-display); font-weight: 700; letter-spacing: .03em; }
.courier-badge .cb-role { color: inherit; opacity: .92; }
.courier-badge .cb-provider {
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    border-left: 1px solid currentColor;
    padding-left: .45rem;
    margin-left: .1rem;
}

.courier-badge.c-emberquill {
    color: var(--ember);
    background: var(--ember-bg);
    border-color: var(--ember-rule);
}

.courier-badge.c-stormcrow {
    color: var(--storm);
    background: var(--storm-bg);
    border-color: var(--storm-rule);
}

.courier-badge.c-unknown {
    color: var(--neutral);
    background: var(--neutral-bg);
    border-color: var(--rule-strong);
}

.courier-badge.is-lg {
    font-size: var(--fs-body);
    padding: .4rem .75rem;
}

/* --- Courier picker: the loudest control on the campaign form ----------- */
.courier-picker {
    border: 2px solid var(--gold);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(184, 134, 43, .10), rgba(184, 134, 43, 0) 46%),
        var(--surface);
    padding: .9rem;
    box-shadow: var(--shadow-1);
}

/* Full-width, not notched into the border: a two-line legend at 390px breaks
   the notch, and the notch is not worth the breakage. */
.courier-picker > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 .2rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h4);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

.courier-picker .cp-help {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    margin: 0 0 .8rem;
    max-width: var(--measure);
}

.cp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
}

.cp-card {
    position: relative;
    display: block;
    /* The card is a <label>, so reset the 600 weight labels carry. */
    font-weight: 400;
    border: 2px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .85rem .9rem .85rem 2.9rem;
    cursor: pointer;
    min-height: var(--tap);
}

.cp-card input[type="radio"] {
    position: absolute;
    left: .95rem;
    top: 1.05rem;
    width: 20px;
    height: 20px;
    accent-color: var(--gold-ink);
    margin: 0;
}

.cp-card .cp-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: .45rem;
    line-height: 1.2;
}

.cp-card .cp-role {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
    display: block;
    margin-top: .1rem;
}

.cp-card .cp-blurb {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    margin: .35rem 0 0;
}

.cp-card .cp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-top: .5rem;
    font-size: var(--fs-micro);
    color: var(--ink-muted);
}

.cp-card:hover { border-color: var(--rule-strong); }

.cp-card.for-emberquill .cp-name { color: var(--ember); }
.cp-card.for-stormcrow .cp-name { color: var(--storm); }

.cp-card input:checked ~ .cp-body .cp-name::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .7em;
    margin-left: .2rem;
    color: var(--ok);
}

.cp-card:focus-within {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.cp-card.for-emberquill input:checked ~ .cp-body {
    /* selection is announced by the radio; these only reinforce it */
}

.cp-card.is-selected.for-emberquill,
.cp-card.for-emberquill:has(input:checked) {
    border-color: var(--ember);
    background: var(--ember-bg);
    box-shadow: inset 0 0 0 1px var(--ember-rule);
}

.cp-card.is-selected.for-stormcrow,
.cp-card.for-stormcrow:has(input:checked) {
    border-color: var(--storm);
    background: var(--storm-bg);
    box-shadow: inset 0 0 0 1px var(--storm-rule);
}

@media (min-width: 768px) {
    .cp-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Sigil (deterministic heraldic crest) ------------------------------- */
.sigil {
    display: inline-block;
    vertical-align: middle;
    border-radius: 6px;
    box-shadow: var(--shadow-1);
    flex: 0 0 auto;
}

.sigil.is-round { border-radius: 50%; }

/* --- Empty state -------------------------------------------------------- */
.empty {
    text-align: center;
    padding: 2rem 1rem 2.2rem;
    max-width: 34rem;
    margin: 0 auto;
}

.empty .e-crest {
    width: 78px;
    height: 78px;
    margin: 0 auto .85rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.9rem;
    color: var(--gold-ink);
    background:
        radial-gradient(circle at 50% 50%, var(--surface-2) 0%, var(--surface) 70%);
    border: 2px dashed var(--rule-strong);
}

.empty h3 {
    font-size: var(--fs-h3);
    margin-bottom: .4rem;
}

.empty p {
    color: var(--ink-muted);
    font-size: var(--fs-body);
    margin: 0 auto 1rem;
    max-width: 30rem;
}

/* --- Flash messages ----------------------------------------------------- */
.flash-region {
    position: relative;
    z-index: 5;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem .9rem;
    border-radius: var(--radius);
    border: 1px solid;
    border-left-width: 4px;
    background: var(--surface);
    margin-bottom: .85rem;
    box-shadow: var(--shadow-1);
    font-size: var(--fs-body);
    color: var(--ink);
}

.flash i.f-icon { font-size: 1.1rem; margin-top: .12rem; flex: 0 0 auto; }
.flash .f-body { flex: 1 1 auto; min-width: 0; }
.flash .f-title { font-weight: 700; display: block; }
.flash ul { margin: .35rem 0 0; padding-left: 1.1rem; }

.flash.t-ok { border-color: var(--ok); background: var(--ok-bg); }
.flash.t-ok i.f-icon { color: var(--ok); }
.flash.t-bad { border-color: var(--bad); background: var(--bad-bg); }
.flash.t-bad i.f-icon { color: var(--bad); }
.flash.t-warn { border-color: var(--warn); background: var(--warn-bg); }
.flash.t-warn i.f-icon { color: var(--warn); }
.flash.t-info { border-color: var(--info); background: var(--info-bg); }
.flash.t-info i.f-icon { color: var(--info); }

.flash .f-close {
    background: none;
    border: 0;
    color: var(--ink-muted);
    min-width: var(--tap);
    min-height: var(--tap);
    margin: -.5rem -.4rem -.5rem 0;
    cursor: pointer;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    border-radius: var(--radius-sm);
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-width: 1px;
    line-height: 1.25;
}

.btn-gold {
    color: #FFF8E8;
    background: linear-gradient(180deg, #9A6A15 0%, #7A5310 100%);
    border: 1px solid #66450D;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.btn-gold:hover,
.btn-gold:focus {
    color: #FFF8E8;
    background: linear-gradient(180deg, #AE7A1C 0%, #8A5E13 100%);
}

[data-theme="dark"] .btn-gold {
    color: #1A1204;
    background: linear-gradient(180deg, #E4C179 0%, #C39B3E 100%);
    border-color: #8A6B2A;
}

[data-theme="dark"] .btn-gold:hover,
[data-theme="dark"] .btn-gold:focus {
    color: #1A1204;
    background: linear-gradient(180deg, #EFD08F 0%, #D2A94A 100%);
}

.btn-quiet {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
}

.btn-quiet:hover,
.btn-quiet:focus {
    color: var(--ink);
    background: var(--surface-3);
}

.btn-ghost {
    color: var(--link);
    background: transparent;
    border: 1px solid transparent;
}

.btn-ghost:hover,
.btn-ghost:focus {
    color: var(--link-hover);
    background: var(--surface-3);
}

.btn-danger-outline {
    color: var(--bad);
    background: var(--surface);
    border: 1px solid var(--bad);
}

.btn-danger-outline:hover,
.btn-danger-outline:focus {
    color: #FFF3F2;
    background: var(--bad);
}

[data-theme="dark"] .btn-danger-outline:hover,
[data-theme="dark"] .btn-danger-outline:focus {
    color: #2A0E0F;
}

.btn-sm {
    min-height: 38px;
    padding: .25rem .6rem;
    font-size: var(--fs-small);
}

/* On phones, action buttons in a row get real tap targets. */
@media (max-width: 575.98px) {
    .btn-sm { min-height: var(--tap); }
    .btn-block-sm { width: 100%; }
}

/* --- Chips / filter pills ---------------------------------------------- */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 .25rem;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 38px;
    padding: .25rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--rule-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-small);
    text-decoration: none;
}

.chip:hover,
.chip:focus { background: var(--surface-3); color: var(--ink); }

.chip[aria-current="true"],
.chip.is-on {
    background: var(--gold-ink);
    border-color: var(--gold-ink);
    color: #FFF8E8;
    font-weight: 600;
}

[data-theme="dark"] .chip[aria-current="true"],
[data-theme="dark"] .chip.is-on {
    background: var(--gold);
    border-color: var(--gold);
    color: #1A1204;
}

.chip .c-count {
    font-variant-numeric: tabular-nums;
    opacity: .85;
}

/* --- Key/value description list ---------------------------------------- */
.kv {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .1rem .9rem;
}

.kv dt {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-ink);
    padding-top: .55rem;
}

.kv dd {
    margin: 0 0 .35rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

@media (min-width: 576px) {
    .kv { grid-template-columns: 11rem 1fr; }
    .kv dt { padding-top: .35rem; }
    .kv dd { padding-top: .35rem; }
}

/* Merge-token reference list: the term is code, not a display heading. */
.token-help dt {
    font-family: var(--font-mono);
    font-size: .8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}

/* Merge tokens double as buttons: click one to insert it at the cursor. */
.token-chip {
    all: unset;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--ink);
    border-radius: var(--radius-sm);
    padding: .1rem .35rem;
    margin: -.1rem -.35rem;
}

.token-chip:hover,
.token-chip:focus-visible {
    background: var(--surface-3);
    color: var(--gold-ink);
}

.token-chip:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }

/* --- Inset well (previews, code, quiet blocks) -------------------------- */
.well {
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: .8rem .9rem;
}

.well.is-quiet { background: var(--surface-2); color: var(--ink-muted); }

/* Sandboxed email preview frame */
.preview-frame {
    width: 100%;
    min-height: 70vh;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: #ffffff;
    display: block;
}

.parchment-sheet {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1rem;
}

/* ==========================================================================
   7. FORMS
   ========================================================================== */

.form-label,
label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--ink);
    margin-bottom: .3rem;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
textarea,
select {
    font-family: var(--font-body);
    /* 16px keeps iOS Safari from zooming the viewport on focus. */
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    min-height: var(--tap);
    padding: .5rem .7rem;
    max-width: 100%;
}

textarea.form-control { min-height: 7rem; }
textarea.is-code {
    font-family: var(--font-mono);
    font-size: 15px;
    min-height: 16rem;
    white-space: pre;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus {
    background-color: var(--surface);
    color: var(--ink);
    border-color: var(--gold-ink);
    box-shadow: 0 0 0 3px rgba(184, 134, 43, .28);
    outline: none;
}

.form-control::placeholder { color: var(--ink-faint); opacity: 1; }

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--surface-2);
    color: var(--ink-muted);
}

.form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .18rem;
    background-color: var(--surface);
    border: 1px solid var(--rule-strong);
    accent-color: var(--gold-ink);
}

.form-check-input:checked {
    background-color: var(--gold-ink);
    border-color: var(--gold-ink);
}

/* The box itself is 18px, so the label carries the tap target: the whole row
   is clickable and at least 44px tall. */
.form-check-label {
    font-weight: 400;
    font-size: var(--fs-body);
    padding: .5rem 0 .5rem .15rem;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--tap);
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.form-check {
    min-height: var(--tap);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
}

.form-check .form-check-input { margin-left: 0; flex: 0 0 auto; }

.form-hint {
    display: block;
    font-size: var(--fs-small);
    color: var(--ink-muted);
    margin-top: .3rem;
    max-width: var(--measure);
}

.form-error {
    display: block;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--bad);
    margin-top: .3rem;
}

.form-error::before {
    content: "\f06a";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: .35rem;
}

.is-invalid,
.form-control.is-invalid {
    border-color: var(--bad);
    border-width: 2px;
}

.field { margin-bottom: 1rem; }

.required-mark {
    color: var(--bad);
    font-weight: 700;
    margin-left: .15rem;
}

/* Toggle switch built on a checkbox */
.switch {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--tap);
    cursor: pointer;
}

.switch input {
    width: 46px;
    height: 26px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--rule-strong);
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
    margin: 0;
}

.switch input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: left .16s ease;
}

.switch input:checked { background: var(--ok); border-color: var(--ok); }
.switch input:checked::after { left: 22px; }

/* Search / filter bar */
.filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
}

.filterbar .f-grow { flex: 1 1 12rem; min-width: 0; }
.filterbar .f-fixed { flex: 0 1 11rem; min-width: 0; }

/* ==========================================================================
   8. UTILITIES
   ========================================================================== */

.stack > * + * { margin-top: .75rem; }
.stack-lg > * + * { margin-top: 1.15rem; }

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.cluster.is-end { justify-content: flex-end; }
.cluster.is-between { justify-content: space-between; }

.grid-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

@media (min-width: 768px) {
    .grid-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.grid-halves {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
}

@media (min-width: 992px) {
    .grid-halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .grid-halves.is-wide-first { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.grid-halves > .is-full { grid-column: 1 / -1; }

.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-bad { color: var(--bad); }
.text-info { color: var(--info); }
.text-ink { color: var(--ink); }
.text-muted-ink { color: var(--ink-muted); }
.text-ember { color: var(--ember); }
.text-storm { color: var(--storm); }
.text-gold { color: var(--gold-ink); }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.avatar-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.avatar-row .ar-text { min-width: 0; }

/* ==========================================================================
   AUTH / PLAIN shells
   ========================================================================== */

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
    position: relative;
    overflow: hidden;
}

/* Night sky with a scatter of stars, drawn with gradients only. */
.auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 246, 214, .85), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 12%, rgba(255, 246, 214, .7), transparent 60%),
        radial-gradient(1px 1px at 34% 42%, rgba(255, 246, 214, .6), transparent 60%),
        radial-gradient(1.5px 1.5px at 62% 66%, rgba(255, 246, 214, .55), transparent 60%),
        radial-gradient(1px 1px at 88% 48%, rgba(255, 246, 214, .5), transparent 60%),
        radial-gradient(1.5px 1.5px at 22% 78%, rgba(255, 246, 214, .5), transparent 60%),
        radial-gradient(1px 1px at 50% 8%, rgba(255, 246, 214, .55), transparent 60%);
    opacity: .55;
}

[data-theme="dark"] .auth-shell::before { opacity: .9; }

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-top: 4px solid var(--gold);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: 1.4rem 1.15rem 1.3rem;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1rem;
}

.auth-brand .ab-mark { width: 66px; height: 66px; }

.auth-brand h1 {
    font-size: 1.7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: .5rem 0 .1rem;
}

.auth-brand .ab-sub {
    color: var(--ink-muted);
    font-size: var(--fs-body);
    margin: 0;
}

.auth-foot {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    text-align: center;
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.plain-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
}

.plain-card {
    width: 100%;
    max-width: 34rem;
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-top: 4px solid var(--gold);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: 1.4rem 1.15rem;
}

/* Error pages */
.error-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
    text-align: center;
}

.error-code {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 18vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--gold-ink);
    letter-spacing: .06em;
    margin: 0;
}

/* ==========================================================================
   DESKTOP (>= 992px)
   ========================================================================== */

@media (min-width: 992px) {
    .rail-nav { display: flex; }
    .rail-brand .brand-sub { display: block; }
    .tabbar { display: none; }
    .sheet, .sheet-scrim { display: none !important; }

    .shell {
        padding-bottom: 2.5rem;
    }

    .shell-inner { padding: 1.35rem 1.25rem 0; }

    .page-header .ph-actions {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
    }
}

/* Rail density steps, measured in the browser so the last label is never
   clipped by the tool buttons:
     992-1365   6 tools, fantasy name only
     1366-1499  6 tools, name + plain-English function
     1500+      7 tools (Flights joins), name + function
   Below 992 the rail carries no nav at all — the bottom tab bar does. */
@media (max-width: 1365.98px) {
    .rail-label .f { display: none; }
    .rail-link { padding: .3rem .45rem; }
}

/* The tightest desktop step: crest-only brand, 13px names, minimal padding. */
@media (min-width: 992px) and (max-width: 1239.98px) {
    .rail-link { padding: .3rem .3rem; gap: .35rem; }
    .rail-label .n { font-size: .8125rem; }
    .rail-nav { margin-left: .4rem; }
}

.rail-item-wide { display: none; }

@media (min-width: 1500px) {
    .rail-item-wide { display: block; }
}

/* ==========================================================================
   9. MOTION + PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .rail, .tabbar, .sheet, .sheet-scrim, .ph-actions, .dl-actions { display: none !important; }
    .shell { padding: 0; }
    body { background: #fff; }
    .panel { box-shadow: none; break-inside: avoid; }
}