/* Direction: MachineX — industrial orange, graphite grey, warm off-white */
/* 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: #f7f3ec;
  --surface: #fffdf9;
  --surface-2: #efe9df;
  --border: #ddd5c8;
  --border-strong: #b5aea6;
  --ink: #272a2e;
  --muted: #5d6168;
  --accent: #c9530a;
  --accent-hover: #ab4709;
  --accent-ink: #ffffff;
  --accent-text: #a64108;
  --accent-strong: #9c4007;
  --accent-soft: #f1ddcc;
  --accent-border: #e2ab86;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dce5d7;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #efe0d1;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f0d9d3;
  --danger-strong: #b91c1c;
  --chart-1: #c9530a;
  --chart-2: #988f15;
  --chart-3: #167756;
  --chart-4: #1d93b6;
  --chart-5: #5c4ebc;
  --chart-6: #d15fa7;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: 0.01em;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-input: 8px;
  --shadow-card: 0 1px 2px rgba(39, 42, 46, 0.06);
  --card-pad: 1.1rem;
  --x-side: #272a2e;
  --x-side-2: #34383d;
  --x-side-ink: #ece8e0;
  --x-side-muted: #aeb1b6;
  --x-steel: #7d848d;
  --x-ok: #1f7a45;
  --x-warn: #9a6200;
  --x-bad: #b3261e;
  --x-info: #2f5f8a;
  --x-paper: #ffffff;
  --x-paper-ink: #1d1f22;
  --x-paper-mute: #565b62;
  --x-paper-line: #c9c5bd;
  --x-paper-fill: #f1eee8;
  --font-sans: "Barlow", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0e0701;
  --surface: #26201a;
  --surface-2: #1a130e;
  --border: #302a25;
  --border-strong: #56514d;
  --ink: #f7f3ec;
  --muted: #9a958e;
  --accent: #c9530a;
  --accent-hover: #d16d2f;
  --accent-ink: #ffffff;
  --accent-text: #d16e30;
  --accent-strong: #d16e30;
  --accent-soft: #371803;
  --accent-border: #622905;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #10220e;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #331803;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #340c07;
  --danger-strong: #d16969;
  --chart-1: #c9530a;
  --chart-2: #a69b0d;
  --chart-3: #1e966d;
  --chart-4: #19a0c7;
  --chart-5: #786dde;
  --chart-6: #d865ad;
}

/* Shell */
#sidebar {
  display: flex;
  flex-direction: column;
  width: 15rem;
  flex-shrink: 0;
  background: var(--x-side);
  color: var(--x-side-ink);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
#scrim { display: none; }
@media (max-width: 1023px) {
  #sidebar { display: none; position: fixed; inset: 0 auto 0 0; z-index: 50; }
  body.nav-open #sidebar { display: flex; }
  body.nav-open #scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.5); }
}
.nav-link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.8rem; border-radius: 0.6rem;
  color: var(--x-side-muted); font-weight: 500; font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--x-side-2); color: var(--x-side-ink); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

/* Tables */
.tbl { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--surface-2);
  white-space: nowrap;
}
.tbl td { padding: 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-wrap { overflow-x: auto; }
.mono { font-family: var(--font-mono); font-size: 0.8rem; }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px;
  padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 68%, var(--ink));
  background: color-mix(in srgb, var(--c) 15%, var(--surface));
}
.pill-ok { --c: var(--x-ok); }
.pill-warn { --c: var(--x-warn); }
.pill-bad { --c: var(--x-bad); }
.pill-info { --c: var(--x-info); }
.pill-mute { --c: var(--x-steel); }
.pill-acc { --c: var(--accent); }

/* Bars & stepper */
.bar { height: 0.5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; min-width: 4rem; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.bar.ok > i { background: var(--x-ok); }
.bar.steel > i { background: var(--x-steel); }
.bar.warn > i { background: var(--x-warn); }
.bar.bad > i { background: var(--x-bad); }
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.35rem; }
.stepper > div { height: 0.45rem; border-radius: 999px; background: var(--surface-2); }
.stepper > div.done { background: var(--x-ok); }
.stepper > div.now { background: var(--accent); }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.stat-card { border-left: 4px solid var(--x-steel); }
.stat-card.acc { border-left-color: var(--accent); }
.stat-card.ok { border-left-color: var(--x-ok); }
.stat-card.warn { border-left-color: var(--x-warn); }
.stat-card.bad { border-left-color: var(--x-bad); }
.stat-card.info { border-left-color: var(--x-info); }
.legend-dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; }
.seg-ok { background: var(--x-ok); }
.seg-acc { background: var(--accent); }
.seg-mute { background: var(--x-steel); }

/* Loading state on submit */
button.is-loading { opacity: 0.7; pointer-events: none; }
button.is-loading::after {
  content: ""; width: 0.9rem; height: 0.9rem; margin-left: 0.5rem; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; display: inline-block;
  animation: mx-spin 0.7s linear infinite;
}
@keyframes mx-spin { to { transform: rotate(360deg); } }
.flash { animation: mx-drop 0.3s ease-out; }
@keyframes mx-drop { from { transform: translateY(-8px); } to { transform: none; } }
html.reduced-motion .flash, html.reduced-motion button.is-loading::after { animation: none; }

dialog.modal form { max-height: 80vh; overflow-y: auto; }

/* Printable job card */
.sheet { background: var(--x-paper); color: var(--x-paper-ink); max-width: 56rem; margin: 0 auto; padding: 2rem; border: 1px solid var(--x-paper-line); border-radius: 6px; }
.sheet h1, .sheet h2, .sheet h3 { color: var(--x-paper-ink); font-family: var(--font-display); }
.sheet .sub { color: var(--x-paper-mute); }
.sheet table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sheet th, .sheet td { border: 1px solid var(--x-paper-line); padding: 0.4rem 0.55rem; text-align: left; vertical-align: top; }
.sheet th { background: var(--x-paper-fill); font-weight: 600; }
.sheet .box { border: 1px solid var(--x-paper-line); border-radius: 4px; padding: 0.6rem 0.75rem; min-height: 3rem; white-space: pre-line; }
.sheet .lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--x-paper-mute); }
.print-bar { max-width: 56rem; margin: 0 auto 1rem; }
@media print {
  .no-print, #sidebar, #scrim { display: none !important; }
  body { background: transparent !important; }
  .sheet { border: none; padding: 0; max-width: none; }
  main { padding: 0 !important; }
}