/* The shared press: both papers, The Daily Tally and The Daily Compile, are set with this one
   stylesheet (src/Emberlog.Press). Each is laid out like a newspaper: a section index down the left,
   today's front-page strip on top, stories ruled off with lines, condensed headlines, small caps
   kickers. Day edition is papaya paper with blue-black ink and cobalt; Night edition is a warm
   black with papaya ink and periwinkle. Gains are moss green, losses red, always with an arrow too.
   Every colour comes from the tokens below, so the rest of the file never mentions a theme. */

:root,
[data-theme="light"] {
    color-scheme: light;
    --paper: #fdf0d5;            /* papaya */
    --paper-2: #f5e4c3;          /* shaded rows, hover */
    --surface: #fff8ea;          /* inputs, the editor, split-flap cards */
    --rail: #fdf0d5;
    --ink: #0f1a2b;              /* blue-black */
    --ink-soft: #4f5666;
    --ink-faint: #858a96;
    --line: rgba(15, 26, 43, 0.13);
    --line-strong: rgba(15, 26, 43, 0.28);
    --accent: #1f3fa8;           /* cobalt, for text */
    --fill: #2747c7;             /* cobalt, for buttons, bars and marks */
    --on-fill: #fdf0d5;
    --fill-edge: #2747c7;
    --number: #a9bbff;           /* the number on the reversed (current) section */
    --ear: #2747c7;              /* its folded corner */
    --gain: #3e6b2f;             /* moss */
    --loss: #9c2b2b;
    --success: #3e6b2f;
    --danger: #9c2b2b;
    --grain: 0.04;
    --show-sun: none;
    --show-moon: inline;
    --headline: "Anton", "Impact", "Arial Narrow", sans-serif;
    --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --roll: cubic-bezier(0.3, 1.35, 0.5, 1);
    --frame: 1320px;
    --gap: 2rem;
    /* Cursors: a printer's registration mark, and a printer's fist over anything you can click. The fist
       points up and to the left like an ordinary cursor, and its fingertip is the click point. */
    --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23fdf0d5' stroke-width='4'%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Cpath d='M12 2v20M2 12h20'/%3E%3C/g%3E%3Cg stroke='%231f3fa8' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Cpath d='M12 2v20M2 12h20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 12 12, crosshair;
    --pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg transform='translate(7 3) rotate(25) translate(-2 -10) translate(32 0) scale(-1 1)'%3E%3Cg fill='%23fdf0d5' stroke='%23fdf0d5' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='1.5' y='8.5' width='4' height='14.5'/%3E%3Cpath d='M5.5 10Q8 8 12 8H28A2 2 0 0 1 28 12H18A1.75 1.75 0 0 1 18 15.5A1.75 1.75 0 0 1 18 19A1.5 1.5 0 0 1 18 22H5.5Z'/%3E%3C/g%3E%3Cg fill='%23fdf0d5' stroke='%230f1a2b' stroke-width='1.2'%3E%3Crect x='1.5' y='8.5' width='4' height='14.5'/%3E%3C/g%3E%3Cpath d='M5.5 10Q8 8 12 8H28A2 2 0 0 1 28 12H18A1.75 1.75 0 0 1 18 15.5A1.75 1.75 0 0 1 18 19A1.5 1.5 0 0 1 18 22H5.5Z' fill='%230f1a2b'/%3E%3Cpath d='M11 12H18M12 15.5H18M12 19H18' stroke='%23fdf0d5' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 7 3, pointer;
}

/* Night edition: chosen with the switch, or following Windows when nothing was chosen. */
[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0f0a0a;            /* warm black */
    --paper-2: #1b1313;
    --surface: #181111;
    --rail: #140e0e;
    --ink: #fdf0d5;
    --ink-soft: #b1a3a1;
    --ink-faint: #7d7170;
    --line: rgba(253, 240, 213, 0.11);
    --line-strong: rgba(253, 240, 213, 0.24);
    --accent: #8ea6ff;           /* periwinkle */
    --fill: #2e52d6;
    --on-fill: #fdf0d5;
    --fill-edge: #8ea6ff;
    --number: #1f3fa8;
    --ear: #2e52d6;
    --gain: #93c47d;
    --loss: #f07a7a;
    --success: #93c47d;
    --danger: #f07a7a;
    --grain: 0.05;
    --show-sun: inline;
    --show-moon: none;
    --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%230f0a0a' stroke-width='4'%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Cpath d='M12 2v20M2 12h20'/%3E%3C/g%3E%3Cg stroke='%238ea6ff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Cpath d='M12 2v20M2 12h20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 12 12, crosshair;
    --pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg transform='translate(7 3) rotate(25) translate(-2 -10) translate(32 0) scale(-1 1)'%3E%3Cg fill='%230f0a0a' stroke='%230f0a0a' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='1.5' y='8.5' width='4' height='14.5'/%3E%3Cpath d='M5.5 10Q8 8 12 8H28A2 2 0 0 1 28 12H18A1.75 1.75 0 0 1 18 15.5A1.75 1.75 0 0 1 18 19A1.5 1.5 0 0 1 18 22H5.5Z'/%3E%3C/g%3E%3Cg fill='%230f0a0a' stroke='%23fdf0d5' stroke-width='1.2'%3E%3Crect x='1.5' y='8.5' width='4' height='14.5'/%3E%3C/g%3E%3Cpath d='M5.5 10Q8 8 12 8H28A2 2 0 0 1 28 12H18A1.75 1.75 0 0 1 18 15.5A1.75 1.75 0 0 1 18 19A1.5 1.5 0 0 1 18 22H5.5Z' fill='%23fdf0d5'/%3E%3Cpath d='M11 12H18M12 15.5H18M12 19H18' stroke='%230f0a0a' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 7 3, pointer;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #0f0a0a;
        --paper-2: #1b1313;
        --surface: #181111;
        --rail: #140e0e;
        --ink: #fdf0d5;
        --ink-soft: #b1a3a1;
        --ink-faint: #7d7170;
        --line: rgba(253, 240, 213, 0.11);
        --line-strong: rgba(253, 240, 213, 0.24);
        --accent: #8ea6ff;
        --fill: #2e52d6;
        --on-fill: #fdf0d5;
        --fill-edge: #8ea6ff;
        --number: #1f3fa8;
        --ear: #2e52d6;
        --gain: #93c47d;
        --loss: #f07a7a;
        --success: #93c47d;
        --danger: #f07a7a;
        --grain: 0.05;
        --show-sun: inline;
        --show-moon: none;
        --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%230f0a0a' stroke-width='4'%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Cpath d='M12 2v20M2 12h20'/%3E%3C/g%3E%3Cg stroke='%238ea6ff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Cpath d='M12 2v20M2 12h20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 12 12, crosshair;
        --pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg transform='translate(7 3) rotate(25) translate(-2 -10) translate(32 0) scale(-1 1)'%3E%3Cg fill='%230f0a0a' stroke='%230f0a0a' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='1.5' y='8.5' width='4' height='14.5'/%3E%3Cpath d='M5.5 10Q8 8 12 8H28A2 2 0 0 1 28 12H18A1.75 1.75 0 0 1 18 15.5A1.75 1.75 0 0 1 18 19A1.5 1.5 0 0 1 18 22H5.5Z'/%3E%3C/g%3E%3Cg fill='%230f0a0a' stroke='%23fdf0d5' stroke-width='1.2'%3E%3Crect x='1.5' y='8.5' width='4' height='14.5'/%3E%3C/g%3E%3Cpath d='M5.5 10Q8 8 12 8H28A2 2 0 0 1 28 12H18A1.75 1.75 0 0 1 18 15.5A1.75 1.75 0 0 1 18 19A1.5 1.5 0 0 1 18 22H5.5Z' fill='%23fdf0d5'/%3E%3Cpath d='M11 12H18M12 15.5H18M12 19H18' stroke='%230f0a0a' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 7 3, pointer;
    }
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
    position: relative;
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15.5px;
    line-height: 1.5;
}

/* A faint newsprint grain over everything. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grain);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--fill); color: var(--on-fill); }

a { color: var(--ink); text-decoration: none; }

/* The cursors (tokens above). Text fields and the code editor keep the normal I-beam. */
body { cursor: var(--cursor); }
a, button, summary, select, label, [role="button"], input[type="checkbox"], input[type="radio"] { cursor: var(--pointer); }
input:not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"] { cursor: text; }
.prose a, .codex-link a, .codex-resources a, .subtle a { color: var(--accent); border-bottom: 1px solid currentColor; }
.prose a:hover, .codex-link a:hover, .codex-resources a:hover, .subtle a:hover { color: var(--ink); }

h1, h2, h3 { margin: 0; }
h1:focus { outline: none; }

/* Headlines: condensed caps that rise into place like a line of type being set. */
h1 {
    font-family: var(--headline);
    font-weight: 400;
    font-size: clamp(2.6rem, 4vw, 3.8rem);
    line-height: 0.98;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    animation: headline-in 0.7s var(--ease) both;
}

@keyframes headline-in {
    from { clip-path: inset(-0.3em 0 100% 0); translate: 0 0.35em; }
    to { clip-path: inset(-0.3em 0 -10% 0); translate: none; }
}

/* Section kickers: small cobalt caps above a story. */
h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    font-family: var(--body);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

h3 { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

.kicker {
    font-family: var(--body);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.subtle { color: var(--ink-soft); margin-top: 0; }
.error, .text-danger { color: var(--danger); margin: 0; }

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

.gain { color: var(--gain); }
.loss { color: var(--loss); }

/* ===================================================================
   Shell: the section index, the front-page strip, the page, the footer
   =================================================================== */

.shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100vh;
}

.rail {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100vh;
    padding: 1.5rem 0 1.4rem 1.3rem;
    background: var(--rail);
    border-right: 1px solid var(--ink);
    /* In a short window the rail scrolls on its own, so the edition switch at the bottom is
       always reachable (it's pinned to the window, so scrolling the page never reaches it). */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.rail-head { display: flex; align-items: flex-start; justify-content: space-between; padding-right: 1.3rem; }

.masthead {
    display: block;
    font-family: var(--headline);
    font-size: 2.3rem;
    line-height: 0.9;
    text-transform: uppercase;
}

.masthead b { font-weight: 400; color: var(--accent); }
.masthead-short { display: none; }

.motto { margin: 0.45rem 1.3rem 0 0; font-family: var(--body); font-style: italic; font-size: 0.82rem; color: var(--ink-soft); }

.issue {
    margin: 0.4rem 1.3rem 0.9rem 0;
    padding: 0.35rem 0 0.8rem;
    border-top: 1px solid var(--ink);
    border-bottom: 3px double var(--ink);
    font-family: var(--body);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

/* Fold: a small square button that tucks the rail away to a strip of section letters. */
button.rail-fold {
    padding: 0.2rem 0.45rem;
    background-color: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0;
}

.rail-fold .fold-out { display: none; }
.rail-folded .rail-fold .fold-in { display: none; }
.rail-folded .rail-fold .fold-out { display: inline; }

/* The press roller: a band of ink rolls across from the left and settles, and the label reverses. */
.rail-item,
button,
a.button,
.filter-tab {
    background-image: linear-gradient(90deg, var(--ink) calc(100% - 12px), transparent);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.42s var(--roll), color 0.15s 0.1s, border-color 0.2s, transform 0.08s;
}

.rail-item {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-right: 1.3rem;
    padding: 0.62rem 0.85rem 0.62rem 0.75rem;
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
}

/* Section letters, like a newspaper's A, B and C sections. */
.rail-item small {
    font-family: var(--headline);
    font-size: 1rem;
    font-weight: 400;
    color: var(--ink-soft);
    transition: color 0.15s 0.1s;
}

.rail-item:hover:not(.active) { background-size: 112% 100%; color: var(--paper); }
.rail-item:hover:not(.active) small { color: var(--paper); }

/* The current section: reversed type with a dog-eared corner. */
.rail-item.active {
    background: var(--ink);
    color: var(--paper);
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}

.rail-item.active small { color: var(--number); }

.rail-item.active::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 13px;
    height: 13px;
    background: linear-gradient(225deg, transparent 50%, var(--ear) 50%);
    transform-origin: top right;
    animation: fold 0.35s var(--ease) both;
}

@keyframes fold { from { transform: scale(0); } }

/* A section's own pages (Investing): numbered D1, D2… and indented under it with a rule. Always
   in the page; folded shut to no height, and it slides open (the rows drop in one by one) when
   you go into the section, and shut again when you leave. */
.rail-sub {
    display: grid;
    flex-shrink: 0;
    grid-template-rows: 0fr;
    margin: 0 1.3rem 0 0.75rem;
    border-left: 1px solid transparent;
    transition: grid-template-rows 0.42s var(--ease), margin 0.42s var(--ease), border-color 0.3s;
}

.rail-sub.open { grid-template-rows: 1fr; margin-top: 0.15rem; margin-bottom: 0.35rem; border-left-color: var(--ink); }
.rail-sub-inner { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.rail-sub .rail-subitem { opacity: 0; translate: 0 -8px; transition: opacity 0.18s, translate 0.25s var(--ease), background-size 0.42s var(--roll), color 0.15s 0.1s; }
.rail-sub.open .rail-subitem { opacity: 1; translate: none; transition-delay: calc(0.1s + var(--k, 0) * 55ms), calc(0.1s + var(--k, 0) * 55ms), 0s, 0.1s; }

/* The little arrow beside D turns down while the section is open. */
.rail-caret { display: inline-block; margin-right: 0.3rem; font-style: normal; font-size: 0.7em; transition: rotate 0.35s var(--roll); }
.rail-caret.open { rotate: 90deg; }
.rail-folded .rail-caret { display: none; }

.rail-subitem {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.32rem 0.6rem 0.32rem 0.8rem;
    font-family: var(--body);
    font-size: 0.85rem;
    color: var(--ink-soft);
    background-image: linear-gradient(90deg, var(--ink) calc(100% - 12px), transparent);
    background-repeat: no-repeat;
    background-size: 0% 100%;
}

.rail-subitem small { font-family: var(--headline); font-size: 0.85rem; color: var(--ink-soft); transition: color 0.15s 0.1s; }
.rail-subitem:hover:not(.active) { background-size: 112% 100%; color: var(--paper); }
.rail-subitem:hover:not(.active) small { color: var(--paper); }
.rail-subitem.active { color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--fill); }
.rail-subitem.active small { color: var(--accent); }

/* Back office: a quiet link above the edition switch, for backups and exports. */
.rail-office {
    margin: 0 1.3rem 0 0;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--line-strong);
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.rail-office:hover, .rail-office.active { color: var(--accent); }
.rail-folded .rail-office { margin: auto 0.7rem 0 0; padding: 0.5rem 0; text-align: center; }
.rail-folded .rail-office + button.theme-switch { margin-top: 0; }

button.theme-switch {
    display: flex;
    width: calc(100% - 1.3rem);
    padding: 0.62rem 0.75rem;
    border: none;
    border-top: 1px solid var(--line-strong);
    background-color: transparent;
    color: var(--ink);
    font-size: 0.85rem;
}

.theme-switch .to-day { display: var(--show-sun); }
.theme-switch .to-night { display: var(--show-moon); }

/* This week and today's question live at the foot of the rail, so nothing jumps under the page. */
.rail-daily {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: auto 1.3rem 0 0;
    padding: 0.9rem 0 1rem;
    border-top: 3px double var(--ink);
}

/* Folded: a slim strip of letters, the edition switch, and the fold button. */
.shell { transition: grid-template-columns 0.45s var(--roll); }
.rail-folded .shell { grid-template-columns: 70px minmax(0, 1fr); }
.rail-folded .rail { padding-left: 0.7rem; }
.rail-folded .rail-head { flex-direction: column; gap: 0.6rem; padding-right: 0.7rem; }
.rail-folded .masthead { font-size: 1.35rem; }
.rail-folded .masthead-full { display: none; }
.rail-folded .masthead-short { display: inline; }
.rail-folded .rail-sub, .rail-folded .rail-sub.open { margin-left: 0; margin-right: 0; border-left: none; }
.rail-folded .rail-subitem { justify-content: center; margin-right: 0.7rem; padding: 0.3rem 0; }
.rail-folded .motto, .rail-folded .issue, .rail-folded .rail-label, .rail-folded .rail-daily { display: none; }
.rail-folded .rail-item { justify-content: center; margin-right: 0.7rem; padding: 0.55rem 0; }
.rail-folded .rail-item small { font-size: 1.15rem; }
.rail-folded .rail-item.active small { color: var(--number); }
.rail-folded button.theme-switch { margin-top: auto; width: calc(100% - 0.7rem); justify-content: center; padding: 0.62rem 0; }
.rail-folded .rail-item:hover:not(.active) small { color: var(--paper); }

/* Shorter windows: a tighter rail, so it usually fits without scrolling. */
@media (max-height: 1100px) {
    .rail { padding-top: 1.1rem; }
    .rail-item { padding-top: 0.48rem; padding-bottom: 0.48rem; }
    .issue { margin-bottom: 0.6rem; padding-bottom: 0.6rem; }
    .rail-daily { gap: 0.7rem; padding: 0.7rem 0 0.8rem; }
}

.shell-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The front-page strip on every page: dateline, today's headline, habits, the day as 24 hours. */
.front {
    padding: 1.1rem 2.6rem 1.1rem;
    border-bottom: 1px solid var(--ink);
}

.front-dateline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-strong);
    font-family: var(--body);
    font-style: italic;
    font-size: 0.86rem;
    color: var(--ink-soft);
}

.front-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin: 0.8rem 0 0.7rem;
}

.front-headline {
    margin-top: 0.15rem;
    font-family: var(--headline);
    font-size: 2.15rem;
    line-height: 1;
    text-transform: uppercase;
    animation: headline-in 0.7s var(--ease) both;
}

.front-count { display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.front-count .flap-num { font-family: var(--headline); font-size: 1.9rem; }
.front-count-label { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--ink-soft); }

.habit-bar { display: flex; gap: 4px; height: 7px; }
.habit-bar i { flex: 1; background: var(--line-strong); transition: background-color 0.35s; }
.habit-bar i.met { background: var(--fill); }

/* "Filed today": today's journal entries as links. */
.filed {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.2rem;
    margin-top: 0.6rem;
    font-size: 0.9rem;
}

.filed-label { font-family: var(--body); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.filed a { font-family: var(--headline); font-size: 1.05rem; text-transform: uppercase; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; }
.filed a em { font-family: var(--body); font-size: 0.85rem; text-transform: none; color: var(--ink-soft); }
.filed a:hover { border-color: var(--fill); color: var(--accent); }

/* The page. */
.page {
    flex: 1;
    width: 100%;
    max-width: var(--frame);
    margin: 0 auto;
    padding: 0 2.6rem 3rem;
}

.page:has(.trial-wide) { max-width: 1680px; }

.page > h1,
.page > .page-header,
.page > .trial-wide > h1 { padding: 2.1rem 0 0.6rem; }

.page > .subtle { padding-bottom: 1.4rem; font-size: 1.05rem; max-width: 72ch; }
/* A kicker over a page's headline names the section, e.g. "Section D2 · Investing". */
.page > .kicker { display: block; padding-top: 2.1rem; }
.page > .kicker + h1,
.page > .kicker + .page-header { padding-top: 0.35rem; }
.page > p:has(> a) { padding-top: 1.6rem; margin: 0; }

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.card-header h2 { margin-bottom: 0.9rem; }
.card-header > a,
.card-header > .subtle { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; color: var(--ink-soft); }
.card-header > a { color: var(--accent); border-bottom: 1px solid currentColor; }
.card-header > a:hover { color: var(--ink); }

/* Sections are stories: ruled off with a heavy line, no boxes. */
.card {
    position: relative;
    margin: 0 0 var(--gap);
    padding: 1rem 0 0;
    border-top: 2px solid var(--ink);
    animation: story-in 0.5s var(--ease) both;
}

.page > *:nth-child(2) { animation-delay: 0.04s; }
.page > *:nth-child(3) { animation-delay: 0.08s; }
.page > *:nth-child(n+4) { animation-delay: 0.12s; }

@keyframes story-in {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: none; }
}

.week-days { display: flex; gap: 0.5rem; margin-top: 0.45rem; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }

.week-bar {
    display: flex;
    align-items: flex-end;
    width: 12px;
    height: 42px;
    border-bottom: 1px solid var(--ink);
    background: var(--line);
}

.week-bar i { display: block; width: 100%; background: var(--fill); transform-origin: bottom; animation: bar-up 0.6s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }
@keyframes bar-up { from { transform: scaleY(0); } }
.week-day:hover .week-bar { background: var(--line-strong); }
.week-letter { font-family: var(--mono); font-size: 0.64rem; color: var(--ink-faint); }
.week-day.today .week-letter { color: var(--accent); font-weight: 600; }

.prompt { display: block; }
.prompt-text { display: block; margin-top: 0.2rem; font-family: var(--headline); font-size: 1.12rem; line-height: 1.12; text-transform: uppercase; transition: color 0.2s; }
.prompt-go { display: inline-block; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; color: var(--accent); transition: transform 0.25s var(--ease); }
.prompt:hover .prompt-text { color: var(--accent); }
.prompt:hover .prompt-go { transform: translateX(6px); }

/* ===================================================================
   Controls
   =================================================================== */

/* Buttons: cobalt with papaya type. The press roller inks them on hover; a click presses in. */
button,
a.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.68rem 1.05rem;
    background-color: var(--fill);
    color: var(--on-fill);
    border: 1.5px solid var(--fill-edge);
    border-radius: 0;
    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    cursor: var(--pointer);
}

button:hover:not(:disabled),
a.button:hover { background-size: 112% 100%; color: var(--paper); border-color: var(--ink); }
button:active:not(:disabled),
a.button:active { transform: translateY(2px); }

button[type=submit]::after,
a.button::after,
[data-run-tests]::after {
    content: "→";
    transition: transform 0.25s var(--ease);
}

button[type=submit]:hover::after,
a.button:hover::after,
[data-run-tests]:hover::after { transform: translateX(4px); }

button:disabled { opacity: 0.35; cursor: var(--cursor); }

button.secondary {
    background-color: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

button.link {
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-bottom: 1px solid currentColor;
}

button.link:hover:not(:disabled) { background: none; color: var(--ink); border-color: currentColor; }
button.link:active { transform: none; }

button.step {
    width: 2rem;
    padding: 0.3rem 0;
    justify-content: center;
    background-color: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

/* Delete × appears only on hover (opacity, not visibility, so it stays clickable). */
button.delete {
    padding: 0 0.4rem;
    background: none;
    border: none;
    color: var(--ink-faint);
    font-size: 1.2rem;
    opacity: 0;
}

.quest-row:hover button.delete,
.money-row:hover button.delete,
.budget-row:hover button.delete,
button.delete:focus-visible { opacity: 1; }
button.delete:hover:not(:disabled) { background: none; color: var(--loss); }

input:not([type=checkbox]),
select,
textarea {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    font: inherit;
    transition: border-color 0.15s;
}

textarea { resize: vertical; line-height: 1.7; min-height: 14rem; }

input:not([type=checkbox]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ink);
    border-bottom-color: var(--fill);
}

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

/* Checkboxes: a box that gets a cobalt tick, stamped in. */
input[type=checkbox] {
    appearance: none;
    flex: none;
    width: 19px;
    height: 19px;
    margin: 0;
    background: var(--surface);
    border: 1.5px solid var(--ink);
    cursor: var(--pointer);
    transition: background-color 0.15s;
}

input[type=checkbox]:checked {
    background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23fdf0d5' stroke-width='2'/%3E%3C/svg%3E") center / 14px no-repeat;
    border-color: var(--fill);
    animation: stamp-down 0.3s var(--ease);
}

@keyframes stamp-down { 0% { scale: 1.5; rotate: -12deg; } 100% { scale: 1; rotate: 0deg; } }

.badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--line-strong);
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    white-space: nowrap;
}

.badge.tier { color: var(--accent); border-color: var(--accent); }

.tag {
    margin-left: 0.5rem;
    padding: 0.08rem 0.4rem;
    border: 1px solid var(--line-strong);
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.count-pill {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.85rem;
    white-space: nowrap;
}

.verdict { margin: 0.9rem 0 0.6rem; font-family: var(--mono); font-size: 0.82rem; text-transform: uppercase; }
.verdict.correct { color: var(--success); }
.verdict.wrong { color: var(--danger); }

.problems ul { margin: 0; padding-left: 1.25rem; color: var(--danger); }
.card.problems { border-top-color: var(--danger); }

/* "Done" notice: a stamp lands next to it. */
.done-banner {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 0 0 var(--gap);
    padding: 1rem 0;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.done-banner .stamp { position: static; }

/* ===================================================================
   Split-flap numbers (filled in by wwwroot/app.js from data-flap)
   =================================================================== */

.flap-num { display: inline-flex; position: relative; }
.flap-ready > .flap-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.flap-digits { display: inline-flex; gap: 2px; }

.flap {
    position: relative;
    display: inline-block;
    min-width: 0.58em;
    padding: 0 0.04em;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    line-height: 1.12;
}

.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.flap.plain { background: transparent; border-color: transparent; min-width: 0; padding: 0 0.04em; }
.flap.plain::after { display: none; }
.flap.go { animation: flip 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes flip {
    0% { transform: perspective(240px) rotateX(0); }
    50% { transform: perspective(240px) rotateX(-90deg); }
    100% { transform: perspective(240px) rotateX(0); }
}

/* ===================================================================
   Marks, stamps and the annotated-type card art
   =================================================================== */

/* How something was finished: a cobalt seal for a clean solve, an outline with help, a dashed ring to do. */
.mark { width: 15px; height: 15px; flex: none; vertical-align: -2px; overflow: visible; }
.mark circle { stroke-width: 1.5; }
.mark.todo circle { fill: none; stroke: var(--ink-faint); stroke-dasharray: 2.4 2; }
.mark.helped circle { fill: none; stroke: var(--fill); }
.mark.helped path { stroke: var(--fill); }
.mark.clean circle { fill: var(--fill); stroke: var(--fill); }
.mark.clean path { stroke: var(--on-fill); }
.mark path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.mark-row { display: flex; flex-wrap: wrap; gap: 5px; }
.mark-row a { display: inline-flex; transition: transform 0.2s var(--ease); }
.mark-row a:hover { transform: translateY(-3px); }

/* A rubber stamp: double ruled, slightly crooked, lands with a thump. */
.stamp {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border: 3px double var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--paper) 75%, transparent);
    font-family: var(--headline);
    font-size: 1rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    rotate: var(--tilt, -7deg);
    animation: stamp-in 0.45s 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

.stamp.pending { border-color: var(--ink-soft); color: var(--ink-soft); }

@keyframes stamp-in {
    from { opacity: 0; scale: 1.8; }
    to { opacity: 1; scale: 1; }
}

/* Card art: one big piece of type with encyclopedia-style annotations that ink themselves in. */
.annotated { position: relative; width: 100%; height: 100%; min-height: 11rem; }
.annotated svg { display: block; width: 100%; height: 100%; overflow: visible; }

.annotated .glyph {
    font-family: var(--headline);
    fill: var(--ink);
    text-anchor: middle;
    transition: fill 0.3s;
    animation: press-in 0.6s var(--ease) both;
}

@keyframes press-in {
    from { opacity: 0; transform: scale(1.06); transform-box: fill-box; transform-origin: center; }
    to { opacity: 1; transform: none; }
}

.annotated .lead {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.9s 0.45s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
}

.annotated .lead.second { animation-delay: 0.75s; }
.annotated .label { font-family: var(--mono); font-size: 8.5px; fill: var(--accent); opacity: 0; animation: fade-in 0.4s 1.05s forwards; }
.annotated .label.second { animation-delay: 1.3s; }
.annotated .stamp { position: absolute; right: 6%; bottom: 8%; }
.annotated.category .stamp { display: none; }
.trial-card:hover .annotated .glyph { fill: var(--fill); }

.fig-caption { font-family: var(--body); font-style: italic; font-size: 0.82rem; color: var(--ink-soft); }
.annotated.compact { min-height: 7rem; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

/* ===================================================================
   Today
   =================================================================== */

.habit-list,
.quest-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.habit-row,
.quest-row {
    display: grid;
    align-items: center;
    gap: 1rem;
    min-height: 3rem;
    padding: 0 0.4rem;
    border-top: 1px solid var(--line);
    transition: background-color 0.15s;
}

.habit-row:first-child,
.quest-row:first-child { border-top: none; }
.habit-row { grid-template-columns: 1fr auto 6rem; }
.quest-row { grid-template-columns: 1fr auto auto; }
.habit-row:hover, .quest-row:hover { background: var(--paper-2); }

.habit-name,
.quest-row label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.05rem;
}

label.habit-name, .quest-row label { cursor: var(--pointer); }
.habit-row.met .habit-name { font-weight: 600; }
.quest-row.done .quest-title { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--fill); }

.number-entry { display: flex; align-items: center; gap: 0.35rem; }
.number-entry input { flex: none; width: 4.5rem; text-align: center; padding: 0.35rem; }
.number-entry input::-webkit-inner-spin-button,
.number-entry input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.unit, .goal, .overdue, .saved, .reward, .codex-count {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--ink-soft);
}

.unit { min-width: 3rem; }
.goal { text-align: right; }
.overdue { color: var(--loss); white-space: nowrap; }
.habit-row.met .goal { color: var(--accent); }
/* A habit on its rest day: set back in grey; it can still be done for a bonus. */
.habit-row.resting .habit-name, .habit-row.resting .goal { color: var(--ink-faint); font-style: italic; }

/* Rest days on the habit form: Mon to Sun as toggles, reversed when picked. */
.rest-days { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 0.5rem; }
.rest-days legend { padding: 0; margin-bottom: 0.5rem; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--ink-soft); }
.rest-days legend .hint { text-transform: none; }
.rest-days > .hint { font-size: 0.85rem; color: var(--ink-soft); }
.day-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.habit-form .day-chip { display: inline-flex; flex-direction: row; gap: 0; color: var(--ink); padding: 0.4rem 0.7rem; border: 1px solid var(--ink); font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; cursor: var(--pointer); user-select: none; }
.day-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.habit-form .day-chip.on { background: var(--ink); color: var(--paper); }
.day-chip:has(input:focus-visible) { outline: 2px solid var(--fill); outline-offset: 2px; }

.add-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; }

/* Streak flame: appears at 3 days, hotter at 7, 14, 30 and 100. */
.streak {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.5rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
    vertical-align: middle;
}

.streak svg { width: 10px; height: 13px; fill: currentColor; transform-origin: bottom; }
.streak.heat-2, .streak.heat-3 { color: var(--accent); }
.streak.heat-3 svg { animation: flicker 1.8s ease-in-out infinite; }
.streak.heat-4 { color: var(--fill); font-weight: 600; }
.streak.heat-4 svg { width: 12px; height: 16px; animation: flicker 1.2s ease-in-out infinite; }
.streak.heat-5 { color: var(--fill); font-weight: 700; }
.streak.heat-5 svg { width: 14px; height: 18px; animation: flicker 0.8s ease-in-out infinite; }

@keyframes flicker {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(0.92, 1.08); }
    60% { transform: scale(1.06, 0.95); }
}

/* ===================================================================
   History and Progress
   =================================================================== */

.history-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.stats {
    display: grid;
    gap: 0;
    margin: 0;
    min-width: 11rem;
    border-left: 1px solid var(--ink);
}

.stats > div { padding: 0.5rem 0 0.5rem 1.2rem; border-bottom: 1px solid var(--line); }
.stats > div:last-child { border-bottom: none; }
.stats dt { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; color: var(--ink-soft); }
.stats dd { margin: 0; font-family: var(--headline); font-size: 1.7rem; line-height: 1.1; }
.stats small { display: block; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-soft); }

.heatmap, .hm-legend { --cell: 13px; --hm-gap: 3px; }

.heatmap {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: start;
    column-gap: 6px;
    row-gap: 4px;
    font-family: var(--mono);
    font-size: 0.64rem;
    color: var(--ink-soft);
}

.hm-months {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(var(--weeks), var(--cell));
    column-gap: var(--hm-gap);
    height: 1rem;
    text-transform: uppercase;
}

.hm-months span { white-space: nowrap; }

.hm-weekdays {
    grid-row: 2;
    display: grid;
    grid-template-rows: repeat(7, var(--cell));
    row-gap: var(--hm-gap);
    line-height: var(--cell);
}

.hm-grid {
    grid-row: 2;
    grid-column: 2;
    display: grid;
    grid-template-rows: repeat(7, var(--cell));
    grid-auto-columns: var(--cell);
    grid-auto-flow: column;
    gap: var(--hm-gap);
}

.hm-cell {
    position: relative;
    display: inline-block;
    width: var(--cell);
    height: var(--cell);
}

.hm-cell.met { background: var(--fill); }
.hm-cell.off-target { background: color-mix(in srgb, var(--fill) 30%, var(--paper-2)); }
.hm-cell.missed { background: var(--paper-2); }
.hm-cell.pending { background: var(--surface); outline: 1.5px solid var(--fill); outline-offset: -1.5px; }
.hm-cell.outside { background: transparent; }
/* A rest day: a thin rule across an empty cell, nothing was needed. */
.hm-cell.rest { background: linear-gradient(var(--line-strong), var(--line-strong)) center / 60% 1.5px no-repeat; }

/* Progress: the year, shaded by how many habits were met. */
.hm-cell.lv--1 { background: transparent; }
.hm-cell.lv-0 { background: var(--paper-2); }
.hm-cell.lv-1 { background: color-mix(in srgb, var(--fill) 28%, var(--paper-2)); }
.hm-cell.lv-2 { background: color-mix(in srgb, var(--fill) 52%, var(--paper-2)); }
.hm-cell.lv-3 { background: color-mix(in srgb, var(--fill) 76%, var(--paper-2)); }
.hm-cell.lv-4 { background: var(--fill); }

.hm-cell[data-tip]:hover { outline: 1.5px solid var(--ink); outline-offset: -1.5px; }

/* Instant tooltip (the native title attribute takes about a second to appear). */
.hm-cell[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 0.3rem 0.55rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 0.72rem;
    white-space: nowrap;
    pointer-events: none;
}

.hm-legend {
    display: flex;
    gap: 1.4rem;
    padding-bottom: 1.4rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.hm-legend span { display: flex; align-items: center; gap: 0.45rem; }
.hm-legend.inline { align-items: center; gap: 4px; padding: 1rem 0 0; }
.hm-legend.inline span { margin: 0 0.4rem; }

.toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: var(--pointer);
}

.quest-log-day h3 { margin: 1rem 0 0.35rem; color: var(--ink-soft); }
.quest-log-day ul { margin: 0; padding-left: 1.1rem; }
.quest-log-day li { padding: 0.15rem 0; }
.quest-log-day li::marker { color: var(--fill); }
.quest-log-day .overdue { margin-left: 0.5rem; }

/* Big numbers in ruled columns, like a markets table. */
.stat-cells {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--gap);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    animation: story-in 0.5s var(--ease) both;
}

.stat-cells > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.2rem;
    border-left: 1px solid var(--line-strong);
}

.stat-cells > div:first-child { border-left: none; padding-left: 0; }
.stat-cells.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-label, .stat-note { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; color: var(--ink-soft); }
.stat-value { font-family: var(--headline); font-size: 2.5rem; line-height: 1; }

.mark-group {
    display: grid;
    grid-template-columns: 14rem 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--line);
}

.mark-group:first-of-type { border-top: none; }
.mark-group-label { font-family: var(--body); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.mark-group-label:hover { color: var(--accent); }
.legend-marks { display: flex; align-items: center; gap: 0.4rem; }
.legend-marks .mark { margin-left: 0.6rem; }

/* ===================================================================
   Tables: Habits, Library, streaks, holdings
   =================================================================== */

.habit-table,
.trial-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.habit-table th {
    padding: 0.5rem 0.9rem;
    text-align: left;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--ink);
}

.habit-table th:first-child { padding-left: 0; }
.habit-table th:nth-child(1) { width: 40%; }
.habit-table th:nth-child(2) { width: 22%; }
.habit-table th:nth-child(3) { width: 18%; }

.habit-table td,
.trial-table td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
    vertical-align: middle;
}

.habit-table td:first-child,
.trial-table td:first-child { border-left: none; padding-left: 0; }

.habit-table tbody tr,
.trial-table tr { transition: background-color 0.15s; }
.habit-table tbody tr:hover,
.trial-table tr:hover { background: var(--paper-2); }

.habit-table .actions { text-align: right; white-space: nowrap; }
.habit-table .actions > * { margin-left: 1rem; }
/* Edit is a link and Archive a button; both are set like the button, in small mono capitals. */
.habit-table .actions a { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid currentColor; }

.streak-table td:not(:first-child) { font-family: var(--mono); font-size: 0.8rem; }

.trial-table td:nth-child(1) { width: 1.8rem; text-align: left; }
.trial-table td:nth-child(3) { width: 8rem; }
.trial-table td:nth-child(4) { width: 5rem; }
.trial-table td:nth-child(5) { width: 9rem; }
.trial-table td a { font-family: var(--headline); font-size: 1.25rem; text-transform: uppercase; }
.trial-table td a:hover { color: var(--accent); }
.trial-table .status { color: var(--fill); font-weight: 700; }
.trial-table tr.done a { color: var(--ink-soft); }
.mark-cell { white-space: nowrap; }
.mark-cell .mark { margin-right: 3px; }

/* ===================================================================
   Forms: habits and journal entries
   =================================================================== */

.habit-form,
.entry-form { display: flex; flex-direction: column; gap: 1.2rem; }

.habit-form label,
.entry-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.habit-form label input,
.habit-form label select,
.entry-form label input,
.entry-form label textarea { font-family: var(--body); font-size: 1.02rem; text-transform: none; color: var(--ink); }

.entry-form textarea { font-size: 1.12rem; }
.target-row { display: flex; gap: 1rem; }
.target-row label:first-child { flex: 1; }
.hint { color: var(--ink-faint); font-size: 0.72rem; text-transform: none; }
.form-actions { display: flex; align-items: center; gap: 1.5rem; }
.form-actions a { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid currentColor; }

/* ===================================================================
   Journal: The archive. Entries set as stories in columns.
   =================================================================== */

.archive-day { margin-bottom: 1.6rem; animation: story-in 0.5s var(--ease) both; }

.archive-dateline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.35rem;
    border-bottom: 3px double var(--ink);
}

.archive-dateline strong { font-family: var(--headline); font-weight: 400; font-size: 1.35rem; text-transform: uppercase; }
.archive-dateline span { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--ink-soft); }

.archive-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.archive-entry {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 12rem;
    padding: 1rem 1.3rem;
    border-left: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line);
    transition: background-color 0.25s;
    animation: story-in 0.45s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

.archive-entry:nth-child(3n + 1) { border-left: none; padding-left: 0; }
.archive-entry:hover { background: color-mix(in srgb, var(--fill) 6%, transparent); }

.entry-no { font-family: var(--headline); font-size: 2.3rem; line-height: 1; transition: color 0.2s; }
.archive-entry:hover .entry-no { color: var(--accent); }

/* The title as a small headline, underlined by the press roller on hover. */
.entry-headline {
    align-self: flex-start;
    font-family: var(--headline);
    font-size: 1.15rem;
    line-height: 1.05;
    text-transform: uppercase;
    background: linear-gradient(var(--fill), var(--fill)) left 96% / 0 3px no-repeat;
    transition: background-size 0.45s var(--roll);
}

.archive-entry:hover .entry-headline { background-size: 100% 3px; }

.entry-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    margin: 0.2rem 0 0.4rem;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--ink-soft);
    white-space: pre-line;
}

.entry-text b { color: var(--ink); font-weight: 600; }

/* The archive's tools: search on the left, the order on the right. Matches are highlighted. */
.archive-tools { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 0.4rem; }
.archive-tools .filter-tabs { margin: 0; }
.archive-search { flex: 1; }
.search-count { margin: 0.6rem 0 0; font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; color: var(--ink-soft); }
mark { background: color-mix(in srgb, var(--fill) 28%, transparent); color: inherit; padding: 0 0.05em; }

/* The mood next to an entry's number, and the mood picker on the form. */
.entry-mood { margin-left: 0.5rem; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); vertical-align: middle; }
.mood-pick { margin: 0; padding: 0; border: none; }
.mood-pick legend { padding: 0; margin-bottom: 0.5rem; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--ink-soft); }
.mood-pick legend .hint { text-transform: none; }
button.mood-chip { padding: 0.45rem 0.9rem; background-color: transparent; border: 1px solid var(--ink); color: var(--ink); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; }
button.mood-chip.on { background: var(--ink); color: var(--paper); }

/* On this day: old entries brought back on their anniversary, above the archive. */
.on-this-day { margin-bottom: 1.6rem; padding-top: 1rem; border-top: 2px solid var(--ink); animation: story-in 0.5s var(--ease) both; }
.on-this-day .archive-entry { min-height: 0; }

/* The mood line: dots joined by a line, great at the top and rough at the bottom. */
.mood-line { margin-bottom: 1.6rem; padding-top: 1rem; border-top: 2px solid var(--ink); animation: story-in 0.5s var(--ease) both; }
.mood-plot { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); height: 96px; margin: 0.6rem 0 0.2rem; }
.mood-axis { position: relative; }
.mood-axis span { position: absolute; left: 0; translate: 0 -50%; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; color: var(--ink-soft); }
.mood-chart { position: relative; }
.mood-chart svg { display: block; width: 100%; height: 100%; overflow: visible; animation: wipe 1.2s 0.1s var(--ease) both; }
.mood-mid { stroke: var(--line-strong); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.mood-path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mood-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.mood-x { display: flex; justify-content: space-between; margin-left: 4.2rem; padding-top: 0.5rem; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; color: var(--ink-soft); }

/* Today: three newspaper columns with rules between them, under one heavy rule. */
.front-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.8fr);
    margin-top: 2.1rem;
    border-top: 2px solid var(--ink);
    animation: story-in 0.5s var(--ease) both;
}

.front-columns > .column { min-width: 0; padding: 1rem 1.6rem 1.6rem; border-left: 1px solid var(--line-strong); }
.front-columns > .column:first-child { padding-left: 0; border-left: none; }
.front-columns > .column:last-child { padding-right: 0; }

.archive-pick { min-height: 0; margin-bottom: 1rem; padding: 0.2rem 0 1rem; border-left: none; }
.archive-pick .entry-text { -webkit-line-clamp: 8; }

/* Ctrl+K search: a box set like a classified ad, results grouped by kind. */
.search-dialog {
    width: min(760px, calc(100vw - 2rem));
    max-height: 72vh;
    margin: 12vh auto auto;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}

.search-dialog[open] { display: flex; flex-direction: column; animation: story-in 0.25s var(--ease) both; }
.search-dialog::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.search-box { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.1rem; border-bottom: 3px double var(--ink); }
.search-glyph { font-size: 1.5rem; color: var(--accent); }
.search-box input { flex: 1; padding: 0.2rem 0; background: transparent; border: none; font-family: var(--headline); font-size: 1.7rem; }
.search-box input:focus { outline: none; box-shadow: none; }
kbd { padding: 0.05rem 0.35rem; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 0.68rem; color: var(--ink-soft); }
.search-results { overflow-y: auto; padding: 0.3rem 0 0.8rem; }
.search-empty { margin: 0; padding: 1rem 1.1rem; color: var(--ink-soft); }
.search-group { padding: 0.7rem 1.1rem 0.25rem; font-family: var(--body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.search-hit { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.45rem 1.1rem; }
.search-hit .money-meta { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit.selected { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--fill); }
.rail-search { display: flex; align-items: center; width: calc(100% - 1.3rem); background-color: transparent; border: none; border-top: 1px solid var(--line-strong); text-align: left; letter-spacing: 0; }
.rail-profile em { margin-left: 0.35rem; font-family: var(--body); font-style: italic; text-transform: none; color: var(--ink-faint); }
.rail-search kbd { margin-left: 0.4rem; }
.rail-folded .rail-search { width: calc(100% - 0.7rem); justify-content: center; }

/* The Sunday edition: habits as a row of seven squares per habit, Monday first. */
.week-columns { margin-top: 1.4rem; }
.week-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 3rem; align-items: center; gap: 0.8rem; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.week-row.week-head { border-top: none; padding-bottom: 0.1rem; }
.week-row .money-meta { text-align: right; }
.week-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-dots { display: inline-flex; gap: 4px; }
.week-dots i, .week-dots b { width: 15px; height: 15px; }
.week-dots b { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; text-align: center; color: var(--ink-soft); }
.week-dots i { border: 1px solid var(--line-strong); }
.week-dots i.met { background: var(--fill); border-color: var(--fill); }
.week-dots i.miss { background: var(--paper-2); border-color: var(--ink-faint); }
.week-dots i.rest { border-style: dashed; }
.week-sub { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.week-figure { margin: 0 0 0.3rem; font-family: var(--headline); font-size: 1.9rem; line-height: 1.05; }
.back-issues .money-row.current .ledger-name { font-weight: 700; color: var(--accent); }
.sunday-out { color: var(--accent); font-style: normal; font-weight: 600; border-bottom: 1px solid currentColor; }

/* The Daily Compile's rail: what's up for review, as a short list of links. */
.rail-reviews { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }
.rail-reviews a { font-family: var(--headline); font-size: 1rem; line-height: 1.1; text-transform: uppercase; }
.rail-reviews a:hover { color: var(--accent); }
.rail-reviews em { display: block; font-family: var(--mono); font-size: 0.66rem; font-style: normal; text-transform: none; color: var(--ink-soft); }
a.front-headline { display: block; }
a.front-headline:hover { color: var(--accent); }

/* Up for review: a quiet card on an exercise or topic that's due for another look. */
.review-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; padding: 0.9rem 0 1rem; border-top: 2px solid var(--fill); }
.review-banner .kicker { flex-basis: 100%; }
.review-banner p { flex: 1 1 24rem; margin: 0; }

/* Today's exercise, under the tasks: a single "in brief" row. */
.daily-exercise { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.daily-exercise .brief { grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.9rem; border-top: none; padding: 0.4rem 0.2rem; }
.daily-exercise .brief-glyph { font-size: 1.5rem; }
.daily-exercise .lead-go { align-self: center; margin: 0; font-size: 0.72rem; }

@media (max-width: 1100px) {
    .front-columns { grid-template-columns: minmax(0, 1fr); }
    .front-columns > .column { padding: 1rem 0 1.6rem; border-left: none; border-top: 1px solid var(--line-strong); }
    .front-columns > .column:first-child { border-top: none; }
}

.entry-habits { margin-top: auto; display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; color: var(--ink-soft); }
.habit-strip { display: flex; gap: 3px; }
.habit-strip i { width: 9px; height: 9px; border: 1px solid var(--line-strong); }
.habit-strip i.met { background: var(--fill); border-color: var(--fill); }

.page > .entry-title { margin: 0.3rem 0 1.3rem; font-family: var(--headline); font-size: 1.5rem; color: var(--accent); text-transform: uppercase; }
.entry-actions { display: flex; gap: 0.8rem; }

.entry-body {
    max-width: 70ch;
    font-size: 1.18rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

.entry-body::first-letter { font-family: var(--headline); font-size: 3.2rem; line-height: 1; margin-right: 0.03em; color: var(--accent); }

.entry-meta {
    display: flex;
    gap: 2rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.confirm { display: flex; align-items: center; gap: 1.2rem; font-family: var(--mono); font-size: 0.82rem; text-transform: uppercase; }

/* ===================================================================
   Money
   =================================================================== */

.month-nav { display: flex; gap: 0.6rem; }
.money-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.money-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
}

.budget-row { padding: 0.55rem 0; border-top: 1px solid var(--line); }
.budget-row:first-of-type { border-top: none; }
.budget-line { display: flex; align-items: center; gap: 0.8rem; }
.budget-line > span:first-child { flex: 1; font-size: 1.02rem; }
.budget-numbers { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); }
.budget-row.over .budget-numbers { color: var(--loss); }

.segment-bar { display: flex; gap: 3px; height: 7px; margin-top: 0.4rem; }
.segment-bar i { flex: 1; background: var(--line-strong); }
.segment-bar i.met { background: var(--fill); transform-origin: left; animation: seg-in 0.4s var(--ease) both; animation-delay: calc(var(--k, 0) * 40ms); }
.budget-row.over .segment-bar i.met { background: var(--loss); }
@keyframes seg-in { from { transform: scaleX(0); } }

.money-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    min-height: 2.7rem;
    padding: 0 0.4rem;
    border-top: 1px solid var(--line);
    transition: background-color 0.15s;
}

.money-row:hover { background: var(--paper-2); }
.money-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.money-amount { font-family: var(--mono); font-size: 0.88rem; white-space: nowrap; }
.money-amount.in { font-weight: 600; }

/* Ledger rows: the name, a dotted leader running out to the amount, like a printed price list. */
.money-row.ledger { display: flex; align-items: baseline; gap: 0; padding-top: 0.75rem; padding-bottom: 0.55rem; min-height: 0; }
.ledger-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader { flex: 1 1 1.5rem; min-width: 1.5rem; margin: 0 0.6rem; border-bottom: 2px dotted var(--line-strong); translate: 0 -0.25em; }
.money-row.ledger button { align-self: center; margin-left: 0.4rem; }
.money-day { margin: 1.2rem 0 0.3rem; color: var(--ink-soft); }
.money-empty { margin: 1.2rem 0 0; }

/* Where it went: a ledger line per category with its share, and a bar against the biggest. */
.spend-row { padding: 0.5rem 0 0.6rem; border-top: 1px solid var(--line); }
.spend-row:first-of-type { border-top: none; }
.spend-line { display: flex; align-items: baseline; }
.spend-share { min-width: 3.2rem; text-align: right; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); }
.spend-bar { height: 5px; margin-top: 0.4rem; background: var(--line); }
.spend-bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; animation: seg-in 0.6s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }
.spend-row.over .spend-bar i { background: var(--loss); }
.spend-row.over .ledger-name { color: var(--loss); }
.spend-row.cash .spend-bar i { background: var(--ink-faint); }
.earnings-when { min-width: 10rem; margin-left: 0.8rem; text-align: right; }

/* Savings goals: like budgets, filling with cobalt, and moss once reached. */
.goal-row.reached .segment-bar i.met { background: var(--gain); }
.goal-row.reached .budget-numbers { color: var(--gain); }
.goal-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.goal-move { display: flex; align-items: center; gap: 0.5rem; }
.goal-meta > span { flex: 1 1 12rem; }
.goal-move input { flex: none; width: 6rem; min-width: 0; padding: 0.35rem 0.5rem; }
.goal-move button { padding: 0.35rem 0.7rem; font-size: 0.7rem; white-space: nowrap; }

.add-row.wrap { flex-wrap: wrap; }
.add-row input.amount { flex: 0 0 8rem; }
.add-row input.day { flex: 0 0 4.5rem; }
.add-row input[type=date] { flex: 0 0 10.5rem; }
.add-row select { flex: 0 0 5.5rem; }
.kind-switch { display: flex; gap: 0.4rem; }

/* ===================================================================
   Investing
   =================================================================== */

.portfolio-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--ink);
    margin-bottom: 0.4rem;
}

.portfolio-stats > div { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1.2rem; border-left: 1px solid var(--line-strong); }
.portfolio-stats > div:first-child { border-left: none; padding-left: 0; }
.portfolio-stats .stat-value { font-size: 1.45rem; }
.portfolio-stats > div { min-width: 0; }
.see-also { margin: 1rem 0 0; }
.row-link { margin-left: 0.8rem; font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid currentColor; }
.row-link:hover { color: var(--ink); }

/* Big figures set as plain type: the numbers still flip when they change, but without the cards. */
.figures .flap { background: transparent; border-color: transparent; min-width: 0; padding: 0; }
.figures .flap::after { display: none; }
.figures .flap-digits { gap: 0; }

.change { margin-left: 0.5rem; font-size: 0.78rem; }

.holdings-table { margin-top: 0.4rem; }
.holdings-table th:nth-child(1) { width: 30%; }
.holdings-table th:nth-child(2), .holdings-table th:nth-child(3) { width: 12%; }
.holdings-table td:not(:first-child) { font-family: var(--mono); font-size: 0.82rem; white-space: nowrap; }

.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.65rem 0.4rem; border-top: 1px solid var(--line); transition: background-color 0.15s; }
.news-list li:first-child { border-top: none; }
.news-list li:hover { background: var(--paper-2); }
.news-list a { font-family: var(--body); font-weight: 600; font-size: 1.02rem; line-height: 1.38; }
.news-list a:hover { color: var(--accent); }

.reading-row.read a { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--fill); }
.reading-row a:hover { color: var(--accent); }
.card-header .kind-switch { align-self: center; margin-bottom: 0.9rem; }

/* The portfolio chart (Components/PortfolioLineChart.razor): the value now, big; the line drawn in from
   the left, moss above the dashed opening line and red below; the axis and a tag for the latest
   value on the right. While you hover, app.js swaps the value now for the value at that time. */
.pchart { margin: 0.4rem 0 1.4rem; }
.pchart-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.pchart-now, .pchart-hover { display: flex; flex-direction: column; gap: 0.3rem; }
.pchart-hover { position: absolute; left: 0; bottom: 0; visibility: hidden; }
.pchart-hover.on { visibility: visible; }
.pchart-head:has(.pchart-hover.on) .pchart-now { visibility: hidden; }
.pchart-value { font-family: var(--headline); font-size: 3.4rem; line-height: 1; }
.pchart-value .flap { background: transparent; border-color: transparent; min-width: 0; padding: 0; }
.pchart-value .flap::after { display: none; }
.pchart-value .flap-digits { gap: 0; }
.pchart-change { font-family: var(--mono); font-size: 0.85rem; }

.pchart-body { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem; }
.pchart-plot { position: relative; height: 260px; border-bottom: 1px solid var(--ink); }
.pchart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; animation: wipe 1.4s 0.1s var(--ease) both; }
@keyframes wipe { from { clip-path: inset(-5% 100% -5% 0); } to { clip-path: inset(-5% -2% -5% 0); } }
.pchart-grid { stroke: var(--line); vector-effect: non-scaling-stroke; }
.pchart-open { stroke: var(--ink-soft); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.pchart-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pchart-line.gain { stroke: var(--gain); }
.pchart-line.loss { stroke: var(--loss); }

.pchart-axis { position: relative; }
.pchart-axis span { position: absolute; left: 0.6rem; translate: 0 -50%; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); }
.pchart-axis .pchart-tag { left: 0.3rem; padding: 0.1rem 0.4rem; background: var(--ink); color: var(--paper); font-weight: 500; }
.pchart-axis .pchart-tag.gain { background: var(--gain); color: var(--paper); }
.pchart-axis .pchart-tag.loss { background: var(--loss); color: var(--paper); }

.pchart-x { display: flex; justify-content: space-between; gap: 1rem; margin-right: 4.6rem; padding-top: 0.4rem; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); }

.pchart-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); }
.pchart-dot.gain { background: var(--gain); }
.pchart-dot.loss { background: var(--loss); }

/* The crosshair: a rule down through the hovered time and a ring on the line. */
.pchart-cross { position: absolute; inset: 0; pointer-events: none; }
.pchart-cross i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); }
.pchart-cross b { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }

.portfolio-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }

/* ===================================================================
   Exercise pages
   =================================================================== */

.trial-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 1.4rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.trial-meta .reward { margin-left: auto; font-size: 0.78rem; }

.trial-wide > p:first-child { padding-top: 1.6rem; margin: 0; }
.trial-wide > p:first-child a { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; }
.trial-wide > p:first-child a:hover { color: var(--accent); }
.trial-wide > h1 { padding: 2.1rem 0 0.6rem; }

.code-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--gap);
}

.code-editor { height: 520px; border: 1px solid var(--ink); }

.editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.code-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 1rem; }
.code-actions .subtle { font-family: var(--mono); font-size: 0.72rem; }
.code-actions .spacer { flex: 1; }

.compile-errors,
.test-results { list-style: none; margin: 0; padding: 0; }

.compile-errors li {
    padding: 0.5rem 0.4rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.8rem;
}

.compile-errors .location { margin-right: 0.6rem; color: var(--accent); }

.test-results li { padding: 0.55rem 0.4rem; border-top: 1px solid var(--line); }
.test-line { display: flex; align-items: center; gap: 0.7rem; }
.test-line .subtle { font-family: var(--mono); font-size: 0.7rem; }
.test-name { flex: 1; }
.test-icon { width: 1rem; font-weight: 700; }
.test-passed .test-icon { color: var(--success); }
.test-failed .test-icon, .test-timedout .test-icon { color: var(--danger); }
.test-notrun { color: var(--ink-faint); }

.test-message {
    margin: 0.3rem 0 0 1.7rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--danger);
    white-space: pre-wrap;
}

.test-output {
    margin: 0.4rem 0 0 1.7rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    font-size: 0.75rem;
    color: var(--ink-soft);
    white-space: pre-wrap;
}

/* Quiz */

.quiz-options {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

button.quiz-option {
    gap: 0.9rem;
    padding: 0.85rem 0.4rem;
    background-color: transparent;
    color: var(--ink);
    border: none;
    border-top: 1px solid var(--line);
    font-family: var(--body);
    font-size: 1.02rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
}

.quiz-option:first-child { border-top: none; }
.quiz-option:active { transform: none; }
.quiz-option:disabled { opacity: 1; cursor: var(--cursor); }
button.quiz-option.selected { background-color: var(--ink); color: var(--paper); }
.quiz-option.correct { background-color: color-mix(in srgb, var(--gain) 14%, transparent); box-shadow: inset 4px 0 0 var(--gain); }
.quiz-option.wrong { opacity: 0.45; text-decoration: line-through; }
.option-letter { font-family: var(--headline); font-size: 1rem; color: var(--accent); width: 1rem; }
.quiz-option.selected .option-letter { color: var(--number); }
.quiz-option code { font-family: var(--mono); }

/* A quiz or hints inside another story drop their own rule. */
.card .card,
.codex-question .card {
    padding: 0;
    margin: 0.9rem 0 0;
    border-top: none;
    animation: none;
}

/* Hints: collapsed until deliberately opened. */
details.hints > summary {
    cursor: var(--pointer);
    list-style: none;
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

details.hints > summary::-webkit-details-marker { display: none; }
details.hints > summary::before { content: "+  "; color: var(--accent); }
details.hints[open] > summary { margin-bottom: 1rem; color: var(--ink); }
details.hints[open] > summary::before { content: "−  "; }
.hint { display: flex; gap: 0.6rem; margin-bottom: 0.7rem; font-family: var(--body); font-size: 0.98rem; color: var(--ink); text-transform: none; }
.hint-number { font-family: var(--headline); font-size: 1rem; color: var(--accent); }
.hint-note { display: block; margin-top: 0.6rem; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); }

/* Deep dives */

.stage-list { list-style: none; margin: 0; padding: 0; }

.stage-list li {
    display: flex;
    gap: 0.7rem;
    padding: 0.6rem 0.4rem;
    border-top: 1px solid var(--line);
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stage-list .stage-icon { width: 1rem; text-align: center; }
.stage-list .done { color: var(--ink-soft); }
.stage-list .done .stage-icon { color: var(--fill); }
.stage-list .current { color: var(--ink); background: color-mix(in srgb, var(--fill) 8%, transparent); box-shadow: inset 3px 0 0 var(--fill); }
.stage-list .current .stage-icon { color: var(--fill); }
.stage-list .locked { color: var(--ink-faint); }

.card.stage-current { border-top-color: var(--fill); }

details.stage-done summary {
    cursor: var(--pointer);
    font-family: var(--mono);
    font-size: 0.76rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

details.stage-done[open] summary { margin-bottom: 0.9rem; }

/* ===================================================================
   Markdown content
   =================================================================== */

.prose { font-size: 1.02rem; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose li { margin: 0.2rem 0; }
.prose li::marker { color: var(--fill); }

.prose code {
    padding: 0.05rem 0.3rem;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.85em;
}

.prose pre {
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--fill);
    overflow-x: auto;
}

.prose pre code { padding: 0; background: none; font-size: 0.85rem; }

.prose table { border-collapse: collapse; margin: 0.75rem 0; font-size: 0.92rem; }
.prose th, .prose td { padding: 0.4rem 0.9rem; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.prose th { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-2); }

/* ===================================================================
   Library
   =================================================================== */

.codex-summary { margin-top: 0.15rem; color: var(--ink-soft); font-size: 0.9rem; font-family: var(--body); text-transform: none; }
.codex-link { margin: 0 0 1.4rem; color: var(--ink-soft); font-size: 0.95rem; }
.codex-body { line-height: 1.7; }
.codex-body > * { max-width: 76ch; }
.codex-body > h2 { margin-top: 1.8rem; }
.codex-body > h2:first-child { margin-top: 0; }
.codex-body pre { max-width: none; }

.codex-resources { list-style: none; margin: 0; padding: 0; }
.codex-resources li { padding: 0.6rem 0; border-top: 1px solid var(--line); }
.codex-resources li:first-child { border-top: none; }
.codex-resources .badge { margin-left: 0.5rem; }
.codex-host { margin-left: 0.5rem; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); }
.codex-note { color: var(--ink-soft); font-size: 0.9rem; }
.codex-quiz-heading { margin: 0.6rem 0 1.2rem; }

.codex-question-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.codex-question-number { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; color: var(--ink-soft); }
.codex-question details.hints { padding-top: 0.8rem; border-top: 1px solid var(--line); }
.codex-question .done-banner { margin: 0.9rem 0 0; }

/* ===================================================================
   Exercises: tabs and a grid of stories with annotated-type art
   =================================================================== */

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0 0 var(--gap);
}

.filter-tab,
button.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem;
    background-color: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.filter-tab:hover:not(:disabled):not(.active) { background-size: 112% 100%; color: var(--paper); border-color: var(--ink); }
.filter-tab:active { transform: none; }

/* The current tab: reversed, with the same folded corner as the current section. */
.filter-tab.active,
button.filter-tab.active {
    position: relative;
    background: var(--ink);
    color: var(--paper);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.filter-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: linear-gradient(225deg, transparent 50%, var(--ear) 50%);
}

.tab-count { font-family: var(--mono); font-weight: 500; font-size: 0.68rem; color: var(--ink-soft); }
.filter-tab.active .tab-count { color: var(--number); }
.filter-tab:hover .tab-count { color: inherit; }

/* The lead story: big annotated art beside the headline. */
.lead-story {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: var(--gap);
    padding-top: 1rem;
    border-top: 2px solid var(--ink);
    animation: story-in 0.5s var(--ease) both;
}

.lead-art { display: flex; flex-direction: column; gap: 0.3rem; min-height: 15rem; }
.lead-art .annotated { flex: 1; border-bottom: 1px solid var(--line); }
.lead-text { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }

.lead-title,
.story-title {
    align-self: flex-start;
    font-family: var(--headline);
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(var(--fill), var(--fill)) left 96% / 0 3px no-repeat;
    transition: background-size 0.45s var(--roll), color 0.2s;
}

.lead-title { font-size: clamp(2.2rem, 3.2vw, 3rem); }
.story-title { font-size: 1.35rem; }
.lead-story:hover .lead-title,
.second-story:hover .story-title,
.brief:hover .story-title,
.contents-row:hover .story-title { background-size: 100% 3px; }

.story-blurb { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.lead-meta { font-family: var(--body); font-style: italic; font-size: 0.86rem; color: var(--ink-soft); }

.lead-go {
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0.62rem 1.05rem;
    background: var(--fill);
    color: var(--on-fill);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background-image: linear-gradient(90deg, var(--ink) calc(100% - 12px), transparent);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.42s var(--roll), color 0.15s 0.1s;
}

.lead-story:hover .lead-go { background-size: 112% 100%; color: var(--paper); }
.lead-story:hover .annotated .glyph { fill: var(--fill); }

/* Two secondary stories side by side, smaller art beside each. */
.second-stories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--gap);
    border-top: 1px solid var(--ink);
}

.second-story {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1rem 1.4rem 1rem 0;
    transition: background-color 0.25s;
    animation: story-in 0.5s var(--ease) both;
    animation-delay: calc(0.1s + var(--i, 0) * 60ms);
}

.second-story + .second-story { padding-left: 1.4rem; border-left: 1px solid var(--line-strong); }
.second-story:hover { background: color-mix(in srgb, var(--fill) 5%, transparent); }
.second-story:hover .annotated .glyph { fill: var(--fill); }
.second-art { position: relative; border-bottom: 1px solid var(--line); }
.second-text { display: flex; flex-direction: column; gap: 0.4rem; justify-content: center; }
.second-text .story-blurb { font-size: 0.94rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* The rest, in brief: one line each, with the topic's glyph as a little cut. */
.in-brief { padding-top: 0.9rem; border-top: 3px double var(--ink); animation: story-in 0.5s 0.2s var(--ease) both; }

.brief {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 13rem 8rem;
    align-items: center;
    gap: 1.2rem;
    padding: 0.7rem 0.4rem;
    border-top: 1px solid var(--line);
    transition: background-color 0.2s;
}

.brief:first-of-type { border-top: none; }
.brief:hover { background: var(--paper-2); }
.brief-glyph { font-family: var(--headline); font-size: 1.7rem; line-height: 1; text-align: center; color: var(--ink-soft); white-space: nowrap; overflow: hidden; transition: color 0.2s; }
.brief:hover .brief-glyph { color: var(--fill); }
.brief-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.brief .story-title { font-size: 1.15rem; }
.brief-blurb { font-size: 0.88rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-meta { font-family: var(--body); font-style: italic; font-size: 0.84rem; color: var(--ink-soft); }
.brief-status { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--accent); }

/* Contents: the four sections as rows, like the index on page two. */
.contents { margin-bottom: var(--gap); padding-top: 1rem; border-top: 3px double var(--ink); animation: story-in 0.5s 0.1s var(--ease) both; }

.contents-row {
    display: grid;
    grid-template-columns: 3rem 7rem minmax(0, 1fr) auto 2rem;
    align-items: center;
    gap: 1.4rem;
    padding: 1.1rem 0.4rem;
    border-top: 1px solid var(--line-strong);
    transition: background-color 0.2s;
    animation: story-in 0.45s var(--ease) both;
    animation-delay: calc(0.15s + var(--i, 0) * 60ms);
}

.contents-row:first-of-type { border-top: none; }
.contents-row:hover { background: var(--paper-2); }
.contents-letter { font-family: var(--headline); font-size: 2.6rem; line-height: 1; color: var(--accent); }
.contents-glyph { font-family: var(--headline); font-size: 2.4rem; line-height: 1; text-align: center; white-space: nowrap; transition: color 0.2s; }
.contents-row:hover .contents-glyph { color: var(--fill); }
.contents-main { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.contents-main .story-title { font-size: 1.9rem; }
.contents-desc { font-size: 0.95rem; color: var(--ink-soft); }
.contents-count { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--headline); font-size: 1.6rem; white-space: nowrap; }
.contents-count small { font-family: var(--body); font-style: italic; font-size: 0.85rem; color: var(--ink-soft); }
.contents-go { font-size: 1.4rem; color: var(--accent); transition: transform 0.25s var(--ease); }
.contents-row:hover .contents-go { transform: translateX(5px); }

/* ===================================================================
   Motion: the page turn
   =================================================================== */

/* The page turn: a copy of the old page peels away from the top-right corner, folding along a
   diagonal with a shadow under the fold. Used for Night/Day edition and when you change page. */
.page-turn {
    position: fixed;
    z-index: 900;
    overflow: hidden;
    pointer-events: none;
    filter: drop-shadow(-10px 10px 14px rgba(0, 0, 0, 0.35));
    /* Linear: the timing applies to each half of the turn separately, so an eased curve would
       slow almost to a stop at the halfway fold. */
    animation: turn var(--dur, 0.9s) linear forwards;
}

.page-turn > * { position: absolute; margin: 0; background: var(--paper); }
/* The copy shows everything in its finished state (drawn lines, stamps, risen headlines), frozen. */
.page-turn * { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }

@keyframes turn {
    0% { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%); }
    50% { clip-path: polygon(0 0, 0 0, 100% 100%, 100% 100%, 0 100%); }
    100% { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===================================================================
   Blazor's built-in error UI
   =================================================================== */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: 0.7rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 0.8rem;
}

#blazor-error-ui .dismiss { cursor: var(--pointer); position: absolute; right: 0.75rem; top: 0.5rem; }
#blazor-error-ui a { color: var(--number); }

.blazor-error-boundary { padding: 1rem 1.5rem; background: var(--danger); color: var(--paper); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* "← Back" links above a heading read as small mono caps. */
.page > p:has(> a) a {
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
}

.page > p:has(> a) a:hover { color: var(--accent); }

/* Large monitors (e.g. 2560x1440): scale the whole interface up. */
@media (min-width: 2000px) {
    html { font-size: 18px; }
    body { font-size: 17px; }
    .page { --frame: 1500px; }
    .shell { grid-template-columns: 290px minmax(0, 1fr); }
}

/* ===================================================================
   Signing in: the masthead, a double rule and one narrow column.
   Nothing from anyone's paper is on these pages.
   =================================================================== */

.signin { min-height: 100vh; }

.signin-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 2rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.signin-top button.theme-switch {
    width: auto;
    padding: 0;
    border: none;
    border-bottom: 1px solid currentColor;
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--accent);
}

.signin-top button.theme-switch:hover { background: none; color: var(--ink); }

.signin-masthead { padding: 2.8rem 2rem 0; text-align: center; }

.signin-title {
    font-family: var(--headline);
    font-size: clamp(3.4rem, 7vw, 6.4rem);
    line-height: 0.9;
    text-transform: uppercase;
}

.signin-title b { font-weight: 400; color: var(--accent); }
.signin-masthead .motto { display: block; margin: 0.8rem 0 0; font-size: 0.95rem; }
.signin-rule { height: 4px; margin: 1.3rem 2rem 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }

.signin-page { width: min(27rem, calc(100% - 2rem)); margin: 0 auto; padding: 2.8rem 0 3.5rem; }
.signin-page h1 { margin: 0.35rem 0 0.8rem; font-size: clamp(2.4rem, 3.4vw, 3.2rem); }
.signin-page .subtle { margin-bottom: 1.6rem; }

.signin-form label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.signin-form input:not([type=checkbox]) {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.signin-form label.signin-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
}

.signin-check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--fill); }
.signin-hint { margin: -0.3rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.signin-actions { display: flex; gap: 0.75rem; margin-top: 1.4rem; }

.signin-problem {
    margin: 0 0 1.2rem;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--danger);
    background: var(--paper-2);
    color: var(--danger);
}

.signin-note {
    margin: 2rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

/* ===================================================================
   Profile: each setting a ledger line (name, dotted leader, value),
   with its form folded away until you open the line.
   =================================================================== */

.profile { max-width: 48rem; }

.profile-row {
    display: flex;
    align-items: baseline;
    padding: 0.7rem 0 0.55rem;
    border-bottom: 1px solid var(--line);
}

.profile-value { white-space: nowrap; color: var(--ink-soft); }
.profile-mono { font-family: var(--mono); font-size: 0.85rem; }

.profile-action {
    margin-left: 0.9rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: 1px solid currentColor;
}

.profile-inline { display: flex; align-items: baseline; gap: 0.9rem; }
.profile-inline input, .profile-inline select { flex: 0 1 18rem; min-width: 0; padding: 0.35rem 0.6rem; }

details.profile-more > summary { list-style: none; cursor: var(--pointer); }
details.profile-more > summary::-webkit-details-marker { display: none; }
details.profile-more > summary:hover .profile-action,
details.profile-more[open] .profile-action { color: var(--ink); }

.profile-form { display: grid; gap: 0.9rem; max-width: 26rem; padding: 1rem 0 1.1rem; }

.profile-form label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.profile-form input, .profile-form select { font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; }
.profile-form button, .profile-form .signin-problem { justify-self: start; margin: 0; }
.profile-remove { padding: 0 0 1.1rem; }
.profile-note { margin: 0.7rem 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.profile-note a { color: var(--accent); border-bottom: 1px solid currentColor; }
button.link.profile-danger { color: var(--loss); }

.profile-saved {
    margin: 0 0 1.4rem;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--success);
    background: var(--paper-2);
    color: var(--success);
}

.profile-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    max-width: 48rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ink);
}

.profile-foot > .profile-note { margin: 0; max-width: 22rem; text-align: right; }
details.profile-close { max-width: 26rem; }
details.profile-close > summary {
    list-style: none;
    margin-left: auto;
    width: max-content;
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    color: var(--loss);
    border-bottom: 1px solid currentColor;
    cursor: var(--pointer);
}
details.profile-close > summary::-webkit-details-marker { display: none; }
button.profile-close-button { background-color: var(--danger); border-color: var(--danger); color: var(--paper); }

/* ===================================================================
   Staff (the editor's list of accounts) and welcome links.
   =================================================================== */

.staff-row .ledger-name { display: flex; align-items: baseline; gap: 0.6rem; }
.staff-username { color: var(--ink-faint); }
.staff-editor { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--accent); }
.staff-row.off .staff-name { text-decoration: line-through; color: var(--ink-faint); }
.staff-row.off .profile-value { color: var(--ink-faint); }
.staff-form { display: inline; margin: 0; }
.staff-action { margin-left: 0.9rem; }
button.staff-action::after { content: none; }

.staff-add { display: flex; align-items: flex-end; gap: 0.9rem; flex-wrap: wrap; padding: 0.4rem 0 0.9rem; }
.staff-add label { display: grid; gap: 0.35rem; flex: 1 1 12rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.staff-add input { font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; }

.welcome-link { max-width: 48rem; margin: 0 0 var(--gap); padding: 0.9rem 1.1rem; border: 1.5px solid var(--ink); background: var(--paper-2); }
.welcome-link-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.5rem 0 0.4rem; }
.welcome-link-url { font-family: var(--mono); font-size: 0.9rem; word-break: break-all; }
.welcome-link-note { margin: 0; font-style: italic; font-size: 0.9rem; color: var(--ink-soft); }

.signin-form input[readonly] { background: transparent; border-color: var(--line); border-bottom-color: var(--line-strong); font-family: var(--mono); }
.signin-form .signin-hint + .signin-check { margin-top: 1rem; }