/* Hallmark · shape: Rulebook (Long Document with a Counter close) · genre: editorial · theme: Almanac (deal 2/3, seed piprally-swiss-trading-evaluation-af8f·18e7a685·2026-11-01·r0) · job: sign up · draw: none
 * hero: Stage · nav: edge-aligned · footer: colophon · imagery: none (type, figures, one diagram of the floors) · signature: the evaluation's rules set as a dated table on the printed sheet
 * axes: mid/grotesk-sans/chromatic-magenta · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a rules table could head any evaluation; the table carries the rule version, the date and the Zurich server line so only this one fits */
/* Hallmark · dismissed 58 · 86 words in the window that holds the rules rows and the price table, six over the budget, each a figure in a table cell */
/* Hallmark · waive 84 · the app is being redesigned in this run and has no screen to capture yet · the product appears nowhere on the page, the rules do */
@import url("./tokens.css");
@import url("./base.css");

body { color: var(--color-ink-2); font-size: 1.0625rem; }
h1, h2, h3 { color: var(--color-ink); font-weight: 600; }
h1 { letter-spacing: -0.035em; line-height: 0.95; }
a { text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; transition: text-decoration-thickness var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
.num, td.num, th.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; text-align: right; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; padding-block: var(--space-sm); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none; }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }

.hero { min-height: calc(100dvh - 64px); padding-block: var(--space-xl) var(--space-2xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); row-gap: var(--space-xl); align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: var(--space-lg); }
.hero__sheet { margin-right: calc(-1 * var(--gutter)); min-height: 60dvh; display: flex; flex-direction: column; justify-content: center; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink); background: transparent; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.link { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); }

.sheet { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); padding: var(--space-md) var(--space-lg) var(--space-lg); }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet caption { text-align: left; caption-side: top; font: 600 var(--text-md)/1.3 var(--font-display); color: var(--color-ink); padding-block: 0 var(--space-sm); }
.sheet caption small { display: block; font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }
.sheet th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); text-align: left; padding: var(--space-xs) 0; }
.sheet thead th { border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.sheet tbody th { font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-ink); border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; vertical-align: top; }
.sheet td { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0 var(--space-md) var(--space-md); vertical-align: top; }
.hero__sheet { padding: var(--space-lg) var(--space-xl) var(--space-xl) var(--space-xl); }
.hero__sheet td.num { font-size: var(--text-lg); }
.sheet td.num { font-size: var(--text-md); color: var(--color-ink); white-space: nowrap; }
.sheet td.note { font-size: var(--text-sm); color: var(--color-muted); }
.sheet tr.mark th, .sheet tr.mark td { color: var(--color-accent); }

.section { padding-block: 0; margin-block-start: var(--section-gap); }
.section--s { margin-block-start: var(--section-gap-s); }
.section--l { margin-block-start: var(--section-gap-l); }
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); }
.statement__text { grid-column: 1 / span 10; max-width: none; font-family: var(--font-display); font-weight: 600; font-size: var(--text-section); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-ink); text-wrap: balance; }
.statement__line { grid-column: 1 / span 7; max-width: 60ch; color: var(--color-muted); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.split > .head { grid-column: 1 / span 4; }
.split > .body { grid-column: 5 / span 8; }
.split > .wide { grid-column: 1 / span 12; }

.diagram { margin: 0; }
.diagram svg { width: 100%; height: auto; }
.diagram .grid-line { stroke: var(--color-rule); stroke-width: 1; }
.diagram .axis { stroke: var(--color-rule-2); stroke-width: 1; }
.diagram .series { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; }
.diagram .floor-day { fill: none; stroke: var(--color-ink); stroke-width: 2; }
.diagram .floor-all { fill: none; stroke: var(--color-muted); stroke-width: 2; }
.diagram .label { font: 500 13px var(--font-outlier); fill: var(--color-ink); font-variant-numeric: tabular-nums; }
.diagram .label--muted { fill: var(--color-muted); }
.diagram .day { font: 500 14px var(--font-body); fill: var(--color-muted); }
.diagram .point { fill: var(--color-accent); }
.diagram figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); max-width: 65ch; }
.diagram .key { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.key span::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: var(--space-xs); vertical-align: middle; background: var(--color-accent); }
.key .k-day::before { background: var(--color-ink); }
.key .k-all::before { background: var(--color-muted); }

.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.rows li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows h3 { grid-column: 1 / span 5; font-size: var(--text-title); }
.rows p { grid-column: 6 / span 7; max-width: 60ch; }

.band { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); margin-block-start: var(--section-gap-l); --color-focus: var(--color-sheet); }
.band .num { color: var(--color-sheet); }
.band h2 { color: var(--color-paper); }
.band .close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: center; }
.band .close > div:first-child { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--space-md); }
.band .close > div:last-child { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: var(--space-sm); font-size: var(--text-sm); }
.band .btn--primary { align-self: flex-start; }
.band a { text-decoration-color: var(--color-sheet); }

.colophon { padding-block: var(--space-2xl) var(--space-xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.colophon > p { grid-column: 1 / span 6; max-width: 60ch; }
.colophon > ul { grid-column: 8 / span 5; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.colophon .fill { color: var(--color-muted); outline: 1px dashed var(--color-rule-2); outline-offset: 2px; }

@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__sheet { margin-right: 0; min-height: 0; padding: var(--space-md) var(--space-lg) var(--space-lg); }
  .statement__text, .statement__line { grid-column: 1 / span 12; }
  .split > .head, .split > .body { grid-column: 1 / span 12; }
  .rows li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .rows h3, .rows p { grid-column: auto; }
  .band .close > div:first-child, .band .close > div:last-child { grid-column: 1 / span 12; }
  .colophon > p, .colophon > ul { grid-column: 1 / span 12; }
  .sheet { overflow-x: auto; }
}