/* ── Orbital GTAW Shell — UA Local 46
   Light-first token layer for the new EB-2 shell.
   Do NOT modify orbital.css, ko-tokens.css, or ko-components.css.
   ─────────────────────────────────────────────────────────────── */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  /* brand */
  --ua-red:   #C8102E;
  --ua-gold:  #C9A84C;

  /* surfaces — light default */
  --bg-base:   #FAFAF7;
  --bg-card:   #FFFFFF;
  --bg-subtle: #F2F2EC;

  /* text */
  --text-1:    #2A2A2A;
  --text-2:    #54544E;
  --text-3:    #88887E;

  /* status — readable on light */
  --go:         #15803D;
  --go-bg:      #F0FDF4;
  --go-border:  #86EFAC;
  --warn:       #B45309;
  --warn-bg:    #FFFBEB;
  --warn-border:#FCD34D;
  --stop:       #C8102E;
  --stop-bg:    #FFF1F2;
  --stop-border:#FECDD3;

  /* borders */
  --border:    #E2E2DA;
  --border-hi: #C4C4BC;

  /* type */
  --font-head: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* rhythm */
  --line-h:    1.6;
  --content-w: 70ch;

  /* nav */
  --nav-w:     240px;
  --nav-bg:    #FFFFFF;
  --nav-border:#E2E2DA;

  /* misc */
  --radius:    8px;
  --radius-sm: 4px;
  --shadow:    0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
}

[data-theme="dark"] {
  --bg-base:    #0F0F0F;
  --bg-card:    #161616;
  --bg-subtle:  #1E1E1E;
  --text-1:     #F4F1E8;
  --text-2:     #9CA3AF;
  --text-3:     #6B7280;
  --go:         #4ADE80;
  --go-bg:      #052E16;
  --go-border:  #166534;
  --warn:       #FBBF24;
  --warn-bg:    #1C1400;
  --warn-border:#92400E;
  --stop:       #F87171;
  --stop-bg:    #2D0A0A;
  --stop-border:#7F1D1D;
  --border:     rgba(255,255,255,.10);
  --border-hi:  rgba(255,255,255,.18);
  --nav-bg:     #111111;
  --nav-border: rgba(255,255,255,.08);
  --shadow:     0 1px 3px rgba(0,0,0,.4);
}

/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--line-h);
  color: var(--text-1);
  background: var(--bg-base);
  -webkit-text-size-adjust: 100%;
}
body { min-height: 100dvh; }
a { color: var(--ua-red); text-decoration: none; }
a:hover { text-decoration: underline; }
img,svg { display: block; max-width: 100%; }

/* ── Shell layout (sidebar + content) ───────────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  min-height: 100dvh;
}

.shell-content {
  min-width: 0;
  padding: 2rem 2.5rem;
  max-width: calc(var(--content-w) + 5rem);
}

/* ── Hub layout (no sidebar) ─────────────────────────────────── */
.hub { min-height: 100dvh; display: flex; flex-direction: column; }

.hub-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.hub-wordmark {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-1);
}
.hub-wordmark span { color: var(--ua-red); }

.hub-main {
  flex: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 2rem;
  width: 100%;
}

/* ── Left nav ────────────────────────────────────────────────── */
.eb2-nav {
  width: var(--nav-w);
  min-height: 100dvh;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 0 1rem 1.25rem;
  border-bottom: 1px solid var(--nav-border);
  margin-bottom: .75rem;
}

.nav-brand-mark {
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ua-red);
  background: var(--stop-bg);
  border: 1px solid var(--stop-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  flex-shrink: 0;
}

.nav-brand-text {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}

.nav-branch-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--ua-gold);
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.30);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: .04em;
}

.nav-group { padding: .5rem 0; }

.nav-group-label {
  display: block;
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: .25rem 1rem;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: .4375rem 1rem;
  font-size: .875rem;
  color: var(--text-2);
  transition: background .1s, color .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item:hover { background: var(--bg-subtle); color: var(--text-1); text-decoration: none; }
.nav-item.is-active {
  color: var(--ua-red);
  background: var(--stop-bg);
  font-weight: 600;
  border-right: 2px solid var(--ua-red);
}

.nav-footer {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--nav-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Toggle button ───────────────────────────────────────────── */
.toggle-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 8px;
  transition: background .15s;
}
.toggle-btn:hover { background: var(--border); color: var(--text-1); }

/* ── Branch cards (hub) ──────────────────────────────────────── */
.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.branch-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: border-color .15s, box-shadow .15s;
  text-decoration: none;
  color: inherit;
}
.branch-card:hover { border-color: var(--ua-red); box-shadow: 0 4px 12px rgba(200,16,46,.08); text-decoration: none; }

.branch-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 3px;
  align-self: flex-start;
}
.branch-chip--eb2  { color: var(--ua-gold); background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.30); }
.branch-chip--eb1  { color: var(--text-3); background: var(--bg-subtle); border: 1px solid var(--border); }
.branch-chip--trunk{ color: var(--text-3); background: var(--bg-subtle); border: 1px solid var(--border); }
.branch-chip--ref  { color: var(--text-2); background: var(--bg-subtle); border: 1px solid var(--border); }

.branch-card-title { font-family: var(--font-head); font-size: 1.375rem; font-weight: 700; color: var(--text-1); }
.branch-card-sub   { font-size: .875rem; color: var(--text-2); }
.branch-card-cta   { margin-top: auto; font-size: .875rem; font-weight: 600; color: var(--ua-red); }

/* ── Section heading ─────────────────────────────────────────── */
.section-heading {
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

.page-heading { font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; color: var(--text-1); margin-bottom: .25rem; }
.page-sub     { font-size: .9375rem; color: var(--text-2); margin-bottom: 2rem; }

/* ── Machine overview cards ──────────────────────────────────── */
.machine-section { margin-bottom: 2rem; }

.machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 1rem;
}

.machine-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.machine-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--bg-subtle);
}
.machine-card-img[src$=".svg"] { object-fit: contain; padding: 1rem; }

.machine-card-body  { padding: .625rem .75rem; }
.machine-card-label { font-size: .8125rem; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.machine-card-slot  { font-family: var(--font-mono); font-size: .6875rem; color: var(--text-3); }

/* ── Parameter card ──────────────────────────────────────────── */
.param-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.param-status { width: 6px; border-radius: 3px; align-self: stretch; flex-shrink: 0; }
.param-status--go   { background: var(--go); }
.param-status--warn { background: var(--warn); }
.param-status--stop { background: var(--stop); }
.param-name  { font-family: var(--font-mono); font-size: .875rem; font-weight: 600; color: var(--text-1); }
.param-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--text-1); }
.param-unit  { font-size: .75rem; color: var(--text-3); }
.param-desc  { font-size: .8125rem; color: var(--text-2); margin-top: .25rem; line-height: 1.4; }

/* ── Day-5-Difference callout ────────────────────────────────── */
.d5-callout {
  background: linear-gradient(135deg,rgba(201,168,76,.08),rgba(201,168,76,.03));
  border: 1px solid rgba(201,168,76,.30);
  border-left: 4px solid var(--ua-gold);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.d5-callout-label {
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ua-gold);
  margin-bottom: .375rem;
}
.d5-callout-heading { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--text-1); margin-bottom: .5rem; }
.d5-callout-body    { font-size: .9375rem; color: var(--text-2); line-height: var(--line-h); }

/* ── Schedule-builder stepper chrome ─────────────────────────── */
.stepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: .25rem;
}
.stepper-step    { display: flex; align-items: flex-start; }
.stepper-node    { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.stepper-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-hi);
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700; color: var(--text-3);
}
.stepper-dot--active { border-color: var(--ua-red); background: var(--stop-bg); color: var(--ua-red); }
.stepper-label {
  font-size: .6875rem; color: var(--text-3); white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.stepper-connector { width: 2.5rem; height: 2px; background: var(--border); flex-shrink: 0; margin-top: 13px; }
.stepper-stub-notice {
  font-size: .8125rem; color: var(--text-3); text-align: center;
  padding: 1.5rem; background: var(--bg-subtle);
  border-radius: var(--radius); border: 1px dashed var(--border-hi);
  margin-bottom: 1.5rem;
}

/* ── Defect rows (troubleshooting) ───────────────────────────── */
.defect-list { display: flex; flex-direction: column; gap: .75rem; }
.defect-row {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
}
.defect-severity {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; padding: 2px 8px; border-radius: 3px;
  text-transform: uppercase; margin-top: 2px;
}
.defect-severity--high { background: var(--stop-bg); color: var(--stop); border: 1px solid var(--stop-border); }
.defect-severity--med  { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
.defect-severity--low  { background: var(--go-bg);   color: var(--go);   border: 1px solid var(--go-border);   }
.defect-body    { flex: 1; min-width: 0; }
.defect-name    { font-weight: 600; font-size: .9375rem; color: var(--text-1); margin-bottom: .25rem; }
.defect-causes  { font-size: .875rem; color: var(--text-2); line-height: 1.5; }
.defect-causes span {
  display: inline-block; background: var(--bg-subtle);
  border-radius: var(--radius-sm); padding: 1px 6px; margin: 2px;
  font-family: var(--font-mono); font-size: .75rem;
}

/* ── Tool stub ───────────────────────────────────────────────── */
.tool-stub {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 4rem 2rem; gap: 1rem;
}
.tool-stub-icon  { font-size: 2.5rem; opacity: .25; }
.tool-stub-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--text-1); }
.tool-stub-body  { font-size: .9375rem; color: var(--text-2); max-width: 36ch; }

/* ── Catalog list ────────────────────────────────────────────── */
.catalog-list { display: flex; flex-direction: column; gap: .5rem; }
.catalog-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .875rem; color: var(--text-1);
  text-decoration: none; transition: border-color .1s;
}
.catalog-item:hover { border-color: var(--ua-red); text-decoration: none; }
.catalog-tag {
  font-family: var(--font-mono); font-size: .6875rem;
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg-subtle); color: var(--text-3); flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr; }

  .eb2-nav {
    width: 100%; height: auto; min-height: auto;
    position: static; border-right: none;
    border-bottom: 1px solid var(--nav-border);
    flex-direction: row; flex-wrap: wrap;
    padding: .5rem .75rem; overflow-x: auto;
  }
  .nav-brand  { border-bottom: none; padding-bottom: 0; margin-bottom: 0; padding-right: .75rem; }
  .nav-group  { padding: 0; }
  .nav-group-label { display: none; }
  .nav-item   { padding: .375rem .5rem; font-size: .8125rem; }
  .nav-footer { margin-top: 0; padding: 0; border-top: none; margin-left: auto; }

  .shell-content { padding: 1.25rem 1rem; }
  .machine-grid  { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
}

@media (max-width: 480px) {
  .hub-main       { padding: 2rem 1rem; }
  .branch-grid    { grid-template-columns: 1fr; }
  .machine-grid   { grid-template-columns: repeat(2,1fr); }
  .stepper-connector { width: 1.5rem; }
}