/* Hallmark · shape: Workbench · genre: modern-minimal · theme: Cobalt (deal 1/3, seed debloat-android-debloat-android-phone-58f7·7ae66291·2026-10-27·r0) · job: try · draw: ba26b4
 * hero: Stage · nav: masthead · footer: colophon block · imagery: screenshots 3 (Xvfb, the real Tkinter GUI on a simulated phone) · signature: the real scan window, four vendor apps checked, over a field of package names that thins from left to right
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · modes: light+dark · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a tool page argues little; the argument is reversibility, so the CLI refusal (exit 2) and the restore command carry it instead of adjectives */
/* Hallmark · hero-review: not run apart, the hero went through sloplint render (44b, 44c, 79) · finish-review: opencode (fresh context) · fix · 3 findings · 3 resolved: the Safe panel now shows its own unchecked capture, the EN head sets in three lines, phone commands wrap · gap: none */
@import url("./tokens.css");
@import url("./base.css");

:root { --shadow-tray: inset 0 1px 2px oklch(21% 0.028 262 / 0.1); --mast-h: 73px; }
[data-mode="dark"] { --shadow-tray: inset 0 1px 2px oklch(8% 0.01 260 / 0.5); }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) { --shadow-tray: inset 0 1px 2px oklch(8% 0.01 260 / 0.5); } }

body { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-weight: var(--display-weight); color: var(--color-ink); }
h1 { line-height: 1.02; }
h3 { font-weight: 500; }
code, pre, .mono { font-family: var(--font-outlier); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus-visible { top: var(--space-md); }

/* nav: masthead, the wordmark centred over a rule */
.mast { position: relative; z-index: var(--z-raised); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.mast-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 72px; }
.wordmark { justify-self: center; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.mast-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); }
.mast-link:hover, .wordmark:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }


/* light / dark: two keys on a sunken tray, beside the language link */
.mast-end { justify-self: end; display: flex; align-items: center; gap: var(--space-md); }
.mode-toggle { display: flex; gap: var(--space-3xs); padding: var(--space-3xs); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-tray); }
.mode-opt { min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-input); background: transparent; color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-display); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.mode-opt:hover { color: var(--color-ink); }
.mode-opt:active { background: var(--color-paper-2); }
.mode-opt.active { background: var(--color-key-face); color: var(--color-ink); box-shadow: var(--shadow-key); }
/* captures: the app in the page's own mode */
.only-dark { display: none !important; }
[data-mode="dark"] .only-dark { display: block !important; } [data-mode="dark"] .only-light { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) .only-dark { display: block !important; } :root:not([data-mode]) .only-light { display: none !important; } }

/* keycaps */
.keys { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.key { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.key small { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.key:disabled, .key[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.key--primary small { color: var(--color-accent-ink); }
.key--primary:active { box-shadow: var(--shadow-key-press); }

/* hero: Stage, the real window bleeding off the outer edge */
.hero { position: relative; isolation: isolate; min-height: calc(100dvh - var(--mast-h)); display: grid; align-items: center; padding-block: var(--space-2xl); background-image: radial-gradient(var(--color-glyph-1) 1px, transparent 1px); background-size: var(--cell-w) var(--cell-h); }
.js .hero { background-image: none; }
.field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.hero-text { display: grid; gap: var(--space-xl); }
.hero-text h1 { font-size: clamp(2.75rem, 6.2vw + 0.25rem, 6rem); }
.hero-text .lead { color: var(--color-ink-2); }
.hero-text .keys { margin-top: var(--space-xs); }
.hero-note { color: var(--color-muted); font-size: var(--text-sm); }
.shot.hero-shot { margin: 0 calc(-1 * (var(--gutter) + var(--space-3xl))) 0 0; }

/* captures: the real window, unframed, on the theme's cut */
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); box-shadow: var(--shadow-card); image-rendering: auto; }
@supports (corner-shape: bevel) { .shot img { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.hero-shot img { border-right: 0; border-radius: var(--radius-card) 0 0 var(--radius-card); }
@supports (corner-shape: bevel) { .hero-shot img { border-radius: var(--cut-l) 0 0 4px; } }
.shot figcaption { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); max-width: 60ch; }

/* sections */
.section { padding-block: var(--section-gap) 0; }
.section--tight { padding-block: var(--section-gap-s) 0; }
.head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(var(--gap-columns) * 2); align-items: end; margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }

/* switcher: Sûr / Avancé on a sunken tray */
.tray { display: inline-flex; gap: var(--space-xs); padding: var(--space-xs); margin-bottom: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-tray); }
.tray .key { min-height: 44px; }
.tray .key[aria-pressed="true"] { transform: translateY(3px); box-shadow: var(--shadow-key-press); background: var(--color-paper-2); color: var(--color-accent-deep); }
.switch-panel { max-width: 1180px; }
.switch-panel figcaption strong { color: var(--color-ink); font-weight: 500; }

/* the CLI, one graphite band */
.band { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-graphite); color: var(--color-graphite-ink); }
.band h2 { color: var(--color-graphite-ink); }
.band .lead { color: var(--color-graphite-muted); }
.cli { border: var(--rule-hair) solid var(--color-graphite-2); border-radius: var(--radius-card); overflow: hidden; }
.cli-strip { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); background: var(--color-graphite-2); color: var(--color-graphite-muted); font-size: var(--text-sm); }
.cli-strip code { color: var(--color-graphite-ink); }
.cli-row { display: grid; grid-template-columns: minmax(0, 5fr) 64px minmax(0, 6fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-lg); border-top: var(--rule-hair) solid var(--color-graphite-2); }
.cli-row:first-of-type { border-top: 0; }
.cli-row pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.6; }
.cli-in { color: var(--color-graphite-ink); }
.cli-in .prompt { color: var(--color-graphite-muted); }
.cli-in .token { color: var(--color-accent-2); }
.cli-out { color: var(--color-graphite-muted); }
.elbow { height: 24px; border-top: var(--rule-hair) solid var(--color-graphite-glyph-3); border-right: var(--rule-hair) solid var(--color-graphite-glyph-3); transform: translateY(12px); }
.exit { font-family: var(--font-display); font-size: var(--text-title); font-weight: 600; color: var(--color-graphite-ink); white-space: nowrap; }
.exit--refused { color: var(--color-accent-2); }

/* the database as a ruled table */
.ledger { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: right; }
.ledger th:first-child, .ledger td:first-child { text-align: left; padding-left: 0; }
.ledger thead th { color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; border-bottom-color: var(--color-rule-2); }
.ledger tbody th { font-family: var(--font-display); font-size: var(--text-title); font-weight: 500; }
.ledger td { font-family: var(--font-display); font-size: var(--text-title); font-weight: 500; color: var(--color-ink-2); }
.ledger td.total { color: var(--color-ink); font-weight: 600; }
.ledger tr.locked { background: var(--color-accent-wash); }
.ledger tr.locked th { padding-left: var(--space-md); }
.ledger tr.locked td { color: var(--color-accent-deep); }
.ledger .note { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; }

/* platforms as rows */
.rows { border-top: var(--rule-hair) solid var(--color-rule-2); }
.row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.row h3 { font-size: var(--text-title); }
.row p { color: var(--color-ink-2); }
.row p code { color: var(--color-ink); font-size: 0.9em; }
.cmd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 48px; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper-2); min-width: 0; }
@supports (corner-shape: bevel) { .cmd { border-radius: var(--cut) 4px var(--cut) 4px; corner-shape: bevel round bevel round; } }
.cmd code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: var(--text-sm); }
.copy { flex-shrink: 0; min-height: 44px; min-width: 64px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-display); cursor: pointer; box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.copy:hover { transform: translateY(-1px); }
.copy:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.copy:disabled { opacity: 0.55; cursor: not-allowed; }

/* the close: the restore window beside the download */
.close { padding-block: var(--section-gap-l); }
.close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.close-text { display: grid; gap: var(--space-lg); }
.close-text .lead { color: var(--color-ink-2); }

/* footer: colophon block */
.colophon { padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); }
.colophon-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.colophon .wordmark { justify-self: start; }
.colophon p { color: var(--color-ink-2); max-width: 62ch; }
.colophon p + p { margin-top: var(--space-sm); }
.colophon a { text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.colophon a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero-grid, .close-grid, .head, .colophon-inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .shot.hero-shot { margin-right: 0; }
  .hero-shot img { border-right: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); }
  .head { row-gap: var(--space-md); }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .cli-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cli-row .elbow { display: none; }
  .cli-row .cli-in { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .mast-inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-sm); }
  .mast-end { gap: var(--space-xs); }
  .mode-opt { padding: 0 var(--space-xs); }
  .wordmark { font-size: var(--text-lg); }
  .keys .key { flex: 1 1 100%; justify-content: center; }
  .ledger th, .ledger td { padding-inline: var(--space-xs); }
  .cmd code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .ledger tbody th, .ledger td { font-size: var(--text-lg); }
}