/* Direction: machine-shop floor — warm steel paper, graphite sidebar, safety-orange accent, condensed display type */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f2f0eb;
  --surface: #ffffff;
  --surface-2: #e9e6df;
  --border: #d9d5cb;
  --border-strong: #b2aba5;
  --ink: #1b1e23;
  --muted: #5a606a;
  --accent: #c94009;
  --accent-hover: #ab3608;
  --accent-ink: #ffffff;
  --accent-text: #a83407;
  --accent-strong: #aa3607;
  --accent-soft: #ecd7cb;
  --accent-border: #e0a185;
  --success: #1a7a46;
  --success-ink: #ffffff;
  --success-soft: #d8e2d7;
  --success-strong: #187040;
  --warning: #9a5a00;
  --warning-ink: #ffffff;
  --warning-soft: #e7decf;
  --warning-strong: #8e5300;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #ead8d2;
  --danger-strong: #b3261e;
  --chart-1: #c94009;
  --chart-2: #a08a03;
  --chart-3: #0b7145;
  --chart-4: #0094b0;
  --chart-5: #4947be;
  --chart-6: #d059b4;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: 0.01em;
  --radius-card: 10px;
  --radius-btn: 6px;
  --radius-input: 6px;
  --x-band: #1b1e23;
  --x-on-photo: #ffffff;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0e0501;
  --surface: #261e1a;
  --surface-2: #1a120e;
  --border: #302825;
  --border-strong: #56504d;
  --ink: #f2f0eb;
  --muted: #97928d;
  --accent: #c94009;
  --accent-hover: #d15d2e;
  --accent-ink: #ffffff;
  --accent-text: #d56a40;
  --accent-strong: #d56a40;
  --accent-soft: #371203;
  --accent-border: #622005;
  --success: #1a7a46;
  --success-ink: #ffffff;
  --success-soft: #111f10;
  --success-strong: #4d986f;
  --warning: #9a5a00;
  --warning-ink: #ffffff;
  --warning-soft: #2d1801;
  --warning-strong: #b07e38;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #320c07;
  --danger-strong: #c9645e;
  --chart-1: #c94009;
  --chart-2: #a69014;
  --chart-3: #229761;
  --chart-4: #149ab6;
  --chart-5: #6a6fea;
  --chart-6: #d059b4;
}

html, body { max-width: 100%; }
body { overflow-x: clip; }
.app-top { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.app-main { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

.side { background: var(--x-band); color: var(--x-on-photo); }
.navlink { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 6px; color: var(--x-on-photo); opacity: .78; font-size: .9rem; transition: background .15s, opacity .15s; }
.navlink:hover { opacity: 1; background: rgb(255 255 255 / .09); }
.navlink:focus-visible { outline: 2px solid var(--x-on-photo); outline-offset: 1px; opacity: 1; }
.navlink[aria-current="page"] { background: var(--accent); opacity: 1; }
.navdrawer .navlink { color: var(--ink); opacity: .85; }
.navdrawer .navlink:hover { background: var(--surface-2); }
.navdrawer .navlink[aria-current="page"] { color: var(--accent-ink); }

.tbl { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); -webkit-overflow-scrolling: touch; }
.dt { width: 100%; border-collapse: collapse; font-size: .875rem; }
.dt th { text-align: left; padding: .65rem .85rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; background: var(--surface-2); }
.dt td { padding: .65rem .85rem; border-top: 1px solid var(--border); vertical-align: middle; }
.dt tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.dt .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }

.st { display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.st-good { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.st-warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.st-bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.st-neutral { color: var(--muted); background: var(--surface-2); }

.chipbar { display: flex; gap: .4rem; overflow-x: auto; max-width: 100%; padding-bottom: .2rem; }
.chipbar a { white-space: nowrap; padding: .3rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; background: var(--surface); }
.chipbar a[aria-current="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; font-size: .78rem; }
.cal span { padding: .4rem 0; border-radius: 6px; position: relative; }
.cal .today { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.cal .mark::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent); }
.cal .today.mark::after { background: var(--accent-ink); }

.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .25), rgb(0 0 0 / .78)); }
.grow-bar { transform-origin: bottom; animation: growY .7s cubic-bezier(.2, .7, .2, 1) both; }
.grow-x { transform-origin: left; animation: growX .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes growY { from { transform: scaleY(.15); } }
@keyframes growX { from { transform: scaleX(.1); } }
html.reduced-motion .grow-bar, html.reduced-motion .grow-x { animation: none; }

dialog.modal { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.docpage table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.docpage th, .docpage td { padding: .5rem .4rem; border-bottom: 1px solid var(--border); text-align: left; }
.docpage .r { text-align: right; }
@media print {
  .app-top, .side, .print\:hidden { display: none !important; }
  .docpage { box-shadow: none !important; border: 0 !important; }
}