/* Crupiery: everyday tools. Original palette, with clearer color roles. */
:root {
  --brand-navy: #324875;
  --brand-orange: #ee821f;
  --brand-cyan: #339ac1;
  --brand-slate: #4f5c63;
  --brand-mist: #e9eff2;
  --paper: #fffefa;
  --surface: #eef2f5;
  --surface-raised: #ffffff;
  --ink: #283543;
  --muted: #586673;
  --line: #d3dce5;
  --line-strong: #a9b8c7;
  --green-950: #283c63;
  --green-800: #324875;
  --green-700: #126684;
  --amber: #9c4a13;
  --focus: #a44410;
  --action-bg: #ee821f;
  --action-bg-hover: #ff9b42;
  --action-fg: #172133;
  --success: #186b5e;
  --accent-blue: #324875;
  --accent-warm: #9c4a13;
  --accent-cyan: #126684;
  --wash-blue: #eef2f9;
  --wash-warm: #fff2e5;
  --wash-cyan: #eaf5f8;
  --metric-bg: #324875;
  --metric-fg: #ffffff;
  --color-primary: var(--accent-cyan);
  --color-amber: var(--amber);
  --color-border: var(--line);
  --color-text-muted: var(--muted);
}
html[data-theme='dark'] {
  --paper: #171c27;
  --surface: #202838;
  --surface-raised: #252e40;
  --ink: #edf0f6;
  --muted: #bec7d4;
  --line: #414e65;
  --line-strong: #697892;
  --green-950: #edf0f6;
  --green-800: #b4c6f0;
  --green-700: #8ed0e8;
  --amber: #ffb77a;
  --focus: #ffb77a;
  --action-bg: #f59a4b;
  --action-bg-hover: #ffb573;
  --action-fg: #182133;
  --success: #92d6bc;
  --accent-blue: #b4c6f0;
  --accent-warm: #ffb77a;
  --accent-cyan: #8ed0e8;
  --wash-blue: #252f49;
  --wash-warm: #332b2a;
  --wash-cyan: #233341;
  --metric-bg: #324875;
  --metric-fg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) {
    --paper: #171c27; --surface: #202838; --surface-raised: #252e40;
    --ink: #edf0f6; --muted: #bec7d4; --line: #414e65; --line-strong: #697892;
    --green-950: #edf0f6; --green-800: #b4c6f0; --green-700: #8ed0e8;
    --amber: #ffb77a; --focus: #ffb77a;
    --action-bg: #f59a4b; --action-bg-hover: #ffb573; --action-fg: #182133;
    --success: #92d6bc; --accent-blue: #b4c6f0; --accent-warm: #ffb77a; --accent-cyan: #8ed0e8;
    --wash-blue: #252f49; --wash-warm: #332b2a; --wash-cyan: #233341;
    --metric-bg: #324875; --metric-fg: #ffffff;
  }
}
/* Locale labels live in equal-size slots, rather than moving neighboring controls. */
.site-header .header-inner {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 272px;
  gap: 16px;
  align-items: center;
  min-height: 82px;
}
.site-header .header-inner > .brand { width: 160px; margin: 0; }
.site-header .main-nav { margin: 0; justify-content: center; gap: 0; flex-wrap: nowrap; }
.site-header .main-nav a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 96px; white-space: nowrap; font-size: .85rem; padding-inline: 4px; }
.site-header .main-nav a:nth-child(3) { flex-basis: 118px; }
.site-header .header-actions { display: grid; grid-template-columns: 68px 132px 44px; justify-content: end; align-items: center; gap: 12px; width: 272px; margin: 0; }
.site-header .lang-toggle { width: 68px; height: 33px; }
.site-header .lang-toggle a { flex: 0 0 30px; font-size: 10px; }
.site-header .reading-button { width: 132px; padding-inline: 4px; }
.site-header .reading-button span { font-size: 12px; }
.site-header .icon-button { width: 44px; min-width: 44px; height: 44px; }
@media (min-width: 1100px) and (max-width: 1150px) {
  .site-header .header-inner { grid-template-columns: 160px minmax(0, 1fr) 180px; }
  .site-header .header-actions { grid-template-columns: 68px 44px 44px; width: 180px; gap: 12px; }
  .site-header .reading-button { width: 44px; }
}
@media (max-width: 1099px) {
  .site-header .header-inner { grid-template-columns: minmax(0, 1fr) 222px; gap: 8px; }
  .site-header .header-inner > .brand { width: auto; }
  .site-header .main-nav { display: none; }
  .site-header .header-actions { grid-template-columns: 48px 68px 44px 44px; gap: 6px; width: 222px; }
  .site-header .mobile-nav { width: 48px; }
  .site-header .mobile-nav summary { width: 48px; min-width: 48px; padding-inline: 2px; font-size: 12px; }
  .site-header .reading-button { width: 44px; }
  .site-header .reading-button span { display: none; }
}
@media (max-width: 420px) {
  .site-header .header-inner > .brand { font-size: 1.2rem; gap: 6px; }
  .site-header .brand::before { width: 25px; height: 25px; }
}
@media (max-width: 350px) {
  .site-header .header-inner { grid-template-columns: 1fr; gap: 4px; }
  .site-header .header-actions { justify-content: start; }
}
html[data-text-size='large'] .site-header .header-inner { grid-template-columns: 160px minmax(0, 1fr) 180px; }
html[data-text-size='large'] .site-header .header-actions { grid-template-columns: 68px 44px 44px; width: 180px; gap: 12px; }
html[data-text-size='large'] .site-header .reading-button { width: 44px; }
html[data-text-size='large'] .site-header .reading-button span { display: none; }
@media(max-width:1099px) {
  html[data-text-size='large'] .site-header .header-inner { grid-template-columns: minmax(0, 1fr) 222px; }
  html[data-text-size='large'] .site-header .header-actions { grid-template-columns: 48px 68px 44px 44px; width: 222px; gap: 6px; }
}
@media(max-width:700px) {
  html[data-text-size='large'] .site-header .header-inner { grid-template-columns: 1fr; gap: 4px; }
  html[data-text-size='large'] .site-header .header-actions { justify-content: start; }
}
/* Color is functional: orange for action, blue for structure, cyan for shared work. */
.archive-masthead { border-top-color: var(--brand-orange); }
.cover-index > a { border-left: 3px solid var(--accent-blue); padding-left: 14px; }
.cover-index > a:nth-of-type(2) { border-left-color: var(--accent-cyan); }
.cover-index > a:nth-of-type(3), .cover-index > a:nth-of-type(4) { border-left-color: var(--brand-orange); }
.cover-index > a:nth-of-type(5) { border-left-color: var(--brand-slate); }
.resource-desk { background: var(--wash-blue); }
.workspace-band { background: var(--wash-cyan); }
.document-sample { box-shadow: 8px 8px 0 var(--wash-warm); border-top: 3px solid var(--brand-orange); }
.archive-label { color: var(--accent-warm); }
.cover-title h1 { color: var(--green-950); }
.topic-nav button[aria-pressed='true'] { color: var(--accent-warm); border-color: var(--brand-orange); background: var(--wash-warm); }
.template-card .catalog-number { color: var(--accent-warm); }
.template-card .badge { color: var(--accent-cyan); }
.template-card .button-row .button.secondary { border-color: var(--line-strong); }
.preview-instructions, .lock-backup-note { background: var(--wash-warm); border-left-color: var(--brand-orange); }
.sheet-tabs button[aria-pressed='true'] { background: var(--wash-blue); border-color: var(--accent-blue); }
.side-nav .nav-item.is-active { background: var(--wash-warm); border-left-color: var(--brand-orange); }
.metric-primary { background: var(--metric-bg); }
.metric-primary h2, .metric-primary p, .metric-primary small { color: var(--metric-fg); }
.author-signature { color: var(--accent-blue); }
.about-prose > .button:last-child { display: inline-flex; margin-top: 10px; }
.lang-toggle a.is-active { background: var(--accent-blue); color: var(--paper); }
html[data-theme='dark'] .lang-toggle a.is-active { background: #324875; color: #ffffff; }
@media(prefers-color-scheme:dark) { html:not([data-theme='light']) .lang-toggle a.is-active { background: #324875; color: #ffffff; } }
@media(prefers-reduced-motion:reduce) { .lang-toggle a { transition: none; } }

/* The visor has a projecting brim and open band: no opaque badge around it. */
.brand::before { background-image: url("../img/crupiery-visor-192.png"); width: 38px; height: 38px; flex: 0 0 38px; }
.site-header .brand::before { width: 38px; height: 38px; flex-basis: 38px; }
@media(max-width:420px) { .site-header .brand::before { width: 32px; height: 32px; flex-basis: 32px; } }