/* Hallmark · shape: app screen · genre: editorial · theme: brand (kept by request: parchment, ledger olive, brass, Lora, blackletter) · redesign: full (layout and flow; the colours and faces stay)
 * nav: one row, the wordmark, the three tabs and the tools; the tabs take a second row below 1200px · signature: the olive balance panel with the brass progress bar, beside the phase plan, the figures in one strip below · states: loading (opening your case files), empty, full, error banners
 * axes: parchment/blackletter/olive · posture: kept · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: E, the colours and faces are the owner's own and stay; the difference is in the layout: the balance beside the phase plan, one strip of figures, one row of readings, hairline grids instead of boxes in boxes */
/* Hallmark · outcome: Floor 0 FAIL · Reflex 0 (waived 39b) · finish-review: subagent, verdict fix, 5 findings resolved (professor stays while the Detective talks, narrower professor corner, readings on one row, record dividers aligned, case tokens in even rows, lone phone figure full width) */
/* Hallmark · waive 39b · button.day cells of the month grid stand 56 to 122px tall · a calendar day is one cell of the month grid, kept a button so tapping a day opens its cases */
/* Hallmark · dismissed 23 · the olive at 5 to 8% is the ledger itself: the balance panel, the table heads and the selected tab, surfaces of the case file and not a highlight */
/* Hallmark · dismissed F4 · the two filled "buttons" are the challenge tabs; one tab is selected at a time, the rest are plain */
/* Hallmark · answered F7 · the pill radius stays on the tab strip and on the brass progress bar, a meter of the phase, never on a box */
/* Hallmark · answered F7 · the sheets of one case file (next trade, week target, account card) share one recipe on purpose; the case log became plain rows */
/* Hallmark · answered F25 · the ladder and the case files are tables of many columns; on a phone they scroll inside their panel with the first column pinned */
/* Tokens, base elements and shared components */
/* A detective's case file: parchment pages, olive ledger panels, brass progress. Every colour and face lives here. */
:root {
  /* paper and ink */
  --bg: #f4ecd2;          /* parchment */
  --bg-2: #e9dfbe;
  --panel: #fffbea;       /* cream sheet */
  --panel-2: #fbf3d9;
  --sheet: #fffdf3;
  --glow: #fbf5df;
  --line: #cdbf8f;        /* hairlines between things */
  --field-edge: #948452;  /* edges of inputs and controls, 3:1 on paper */
  --ink: #2a2214;
  --fg: var(--ink);
  --muted: #6d6043;
  --ink-deep: #14100a;    /* shadows and scrims */
  /* olive and brass */
  --accent: #4f5b2a;      /* ledger olive: actions, selection */
  --accent-2: #7d6a2a;
  --on-accent: #fffbe8;
  --brass: #c99a3b;
  --brass-deep: #a77a26;
  --brass-light: #f5d78e;
  --peach: #fbd3b5;
  --rust: #a14d1b;
  /* state */
  --good: #28703f;
  --warn: #8a6418;
  --bad: #b33a3a;
  /* the dark olive panel (balance, funded capital, the auth cover) */
  --dark-panel: #424c22;
  --dark-well: #3a4320;
  --dark-well-2: #2e351a;
  --dark-line: #6d7a42;
  --dark-accent: #e3b85a;
  --dark-accent-2: #b88a30;
  --on-dark: #fbf3d6;
  --on-dark-muted: #e6dcb6;
  --on-dark-good: #a8e8b6;
  --on-dark-bad: #ffb9b0;
  --on-dark-warn: #f3cd7a;
  --on-dark-bad-ink: #ffd9d5;
  /* the detective's blue */
  --case-blue: #24408e;
  --case-red: #c0392b;
  --case-blue-glow: #6f9dff;
  --case-blue-deep: #3b6cff;
  --case-blue-haze: #78a5ff;
  --flash: #fffdf6;
  /* Hallmark names for the same roles */
  --color-paper: var(--bg); --color-paper-2: var(--panel); --color-paper-3: var(--bg-2);
  --color-ink: var(--ink); --color-ink-2: var(--muted); --color-muted: var(--field-edge);
  --color-rule: var(--line); --color-accent: var(--accent); --color-accent-ink: var(--on-accent); --color-focus: var(--accent);
  --color-error: var(--bad); --color-success: var(--good);
  /* faces: blackletter for the wordmark and section titles, Lora for everything read and pressed, mono for figures */
  --font-brand: "UnifrakturMaguntia", "Old English Text MT", Georgia, serif;
  --font-display: var(--font-brand);
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-outlier: var(--font-mono);
  /* type scale, ratio 1.2 */
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem;
  --text-2xl: 1.728rem; --text-3xl: 2.074rem; --text-4xl: 2.488rem; --text-5xl: 2.986rem;
  /* spacing scale */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  /* shape and depth */
  --radius-tag: 4px; --radius-control: 6px; --radius-panel: 8px; --radius-pill: 999px;
  --shadow-raise: 0 8px 20px -12px color-mix(in srgb, var(--ink-deep) 45%, transparent);
  --shadow-float: 0 24px 60px -20px color-mix(in srgb, var(--ink-deep) 55%, transparent);
  --shadow-figure: drop-shadow(0 8px 10px color-mix(in srgb, var(--ink-deep) 35%, transparent));
  --scrim: color-mix(in srgb, var(--ink-deep) 60%, transparent);
  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --stamp-blend: multiply;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scrollbar-color: var(--field-edge) var(--bg); }
img { max-width: 100%; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; caret-color: var(--accent);
}
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--fg); }
/* every control shows where the keyboard is, at once */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding-block: 28px var(--space-2xl); padding-left: max(var(--space-md), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-md), env(safe-area-inset-right, 0px)); display: grid; gap: 20px;
}
h1, h2, h3 { font-family: var(--font-body); margin: 0; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); font-weight: 700; }
h3 { font-size: var(--text-md); font-weight: 600; }
/* a small label above a figure or a block: the body face, a step down, sentence case */
.eyebrow { font: 600 var(--text-sm) var(--font-body); color: var(--muted); }
.muted { color: var(--muted); }
.note-pair { display: inline-flex; flex-wrap: wrap; gap: 0 var(--space-sm); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-underline-offset: 0.16em; text-decoration-thickness: 1px; }

header.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm); }
/* the wordmark, and under it the byline (and the trader's name) */
.brand { display: grid; gap: var(--space-2xs); min-width: 0; }
.brand-by { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-sm); font: 600 var(--text-sm) var(--font-body); color: var(--rust); }
.brand-who { color: var(--accent); }
.brand-who:empty { display: none; }
.hero .brand-by { color: var(--accent); }
/* tabs: one segmented control; labels never wrap, the strip scrolls on a narrow phone */
.tabs { display: flex; gap: var(--space-2xs); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--space-2xs); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tab { appearance: none; border: 0; background: transparent; color: var(--muted); white-space: nowrap; flex: none; font: 600 var(--text-sm) var(--font-body); min-height: 36px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); cursor: pointer; transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.tab:active { transform: scale(.98); }
/* a phone shows all three tabs: the strip takes the full width, the labels a step smaller */
@media (max-width: 420px) {
  header.top .tabs { width: 100%; justify-content: space-between; }
  header.top .tab { font-size: var(--text-xs); padding: var(--space-xs); }
}

/* a panel: one sheet of the case file, olive rule on top, hairline round */
.panel { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-panel); padding: var(--space-lg); min-width: 0; }
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; top: 0; left: 50%; width: 140px; height: 3px; transform: translateX(-50%); background: var(--brass); border-radius: 0 0 var(--radius-tag) var(--radius-tag); }
.hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); align-items: flex-end; }
#f-level { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
.big { font-family: var(--font-body); font-weight: 700; font-size: var(--text-5xl); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.pct { font-family: var(--font-body); font-weight: 600; color: var(--accent); font-size: var(--text-lg); margin-left: var(--space-xs); white-space: nowrap; }
.goal { text-align: right; }
.goal .v { font-family: var(--font-body); font-weight: 700; font-size: var(--text-xl); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }

.bar { position: relative; height: 20px; border-radius: var(--radius-pill); background: var(--bg); border: 1px solid var(--line); margin-top: var(--space-lg); }
.bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent-2), var(--accent)); min-width: 20px; }
.bar .tick { position: absolute; top: -6px; bottom: -6px; width: 1px; background: color-mix(in srgb, var(--fg) 30%, transparent); }
.bar-labels { position: relative; height: 36px; margin-top: var(--space-xs); font-size: var(--text-xs); }
.bar-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; color: var(--muted); }
.bar-labels span.first { transform: none; }
.bar-labels span.last { transform: translateX(-100%); }
.hero-next { margin-top: var(--space-md); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; gap: var(--space-sm) var(--space-lg); font-size: var(--text-sm); color: var(--muted); }
.hero-next b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hero-next > span:not([class]) b { display: block; margin-top: var(--space-3xs); font-size: var(--text-md); color: var(--fg); }
.hero-next > [class] { grid-column: 1 / -1; }
.hero-next > .btn { justify-self: start; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--muted); }
/* legend key: a short piece of the bar it explains */
.key { display: inline-block; width: 16px; height: 8px; border-radius: var(--radius-pill); background: var(--accent); margin-right: var(--space-xs); vertical-align: middle; }

/* figures: the label in the body face above, the value below; no band, no lift */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-sm); }
.stat { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-sm) var(--space-md); display: grid; gap: var(--space-2xs); align-content: start; }
.stat .k { font: 600 var(--text-sm) var(--font-body); color: var(--muted); text-wrap: balance; }
.stat .s { font-size: var(--text-xs); color: var(--muted); }
.stat .v { font: 700 var(--text-lg)/1.25 var(--font-body); font-variant-numeric: lining-nums tabular-nums; }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.col { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (max-width: 820px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-md); }

/* buttons: 40px tall (32px small), 6px corners, every state */
.btn { appearance: none; border: 1px solid var(--field-edge); background: var(--panel-2); color: var(--fg); font: 600 var(--text-sm) var(--font-body); min-height: 40px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) ease, border-color var(--dur-micro) ease, transform var(--dur-micro) ease;
}
.btn:hover { border-color: var(--accent); background: var(--panel); }
.btn:active { transform: scale(.97); }
.btn.win { background: color-mix(in srgb, var(--good) 14%, var(--panel)); border-color: color-mix(in srgb, var(--good) 60%, var(--line)); color: var(--good); }
.btn.loss { background: color-mix(in srgb, var(--bad) 12%, var(--panel)); border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); color: var(--bad); }
.btn.small { min-height: 32px; padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); position: relative; }
.btn.small::after { content: ""; position: absolute; inset: -6px 0; } /* a 44px hit area */
.btn.ghost { background: transparent; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
label.f { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--muted); }
input, select { background: var(--sheet); color: var(--fg); border: 1px solid var(--field-edge); border-radius: var(--radius-control); min-height: 40px; padding: var(--space-xs) var(--space-sm); font: 400 var(--text-md) var(--font-mono); min-width: 0;
}
input[type="text"], input[type="email"], input[type="password"], input[type="url"], select { font-family: var(--font-body); }
input:hover, select:hover { border-color: var(--accent); }
input:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-sm); }

.next { display: grid; gap: var(--space-2xs); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-md); margin-bottom: var(--space-md); }
.next .line { display: flex; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.next-title { font: 700 var(--text-sm) var(--font-body); color: var(--muted); margin: 0 0 var(--space-2xs); }

/* tables: the olive ledger head, sentence case */
.tablewrap { overflow-x: auto; }
/* on a phone a wide table keeps the column that names the row in view */
@media (max-width: 600px) {
  .tablewrap th:first-child, .tablewrap td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
  .tablewrap td:first-child { background: var(--panel); }
  .tablewrap tbody tr:nth-child(even) td:first-child { background: color-mix(in srgb, var(--peach) 18%, var(--panel)); }
}
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font: 600 var(--text-sm) var(--font-body); color: var(--on-accent); background: var(--accent); }
td.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
th.n { text-align: right; }
tr.done td { color: var(--muted); }
tr.current td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* tags: small, square-cornered, sentence case */
.chip { display: inline-block; font: 600 var(--text-xs) var(--font-body); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-tag); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.done { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, var(--line)); }
.chip.now { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.chip.p { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }

.log { display: grid; max-height: 420px; overflow-y: auto; }
/* log entries are rows of the ledger, divided by a hairline */
.log-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-2xs); border-bottom: 1px solid var(--line); }
.log-item:last-child { border-bottom: 0; }
.log-item .note { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.empty { border: 1px dashed var(--line); border-radius: var(--radius-panel); padding: 20px; color: var(--muted); text-align: center; background: var(--sheet); }

.reality { display: grid; gap: var(--space-sm); }
.reality p { margin: 0; }
/* a note that needs attention: a tinted sheet with a hairline all round */
.callout { border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); padding: var(--space-sm) var(--space-md); background: color-mix(in srgb, var(--peach) 35%, var(--sheet)); border-radius: var(--radius-panel); }

details.settings summary { cursor: pointer; font: 600 var(--text-sm) var(--font-body); color: var(--muted); }
details.settings[open] summary { margin-bottom: var(--space-sm); }