/* ============================================================
   MATERIAL INWARD — OPS BOARD
   Editorial, quiet. Bone canvas · serif content · mono data.
   Aesthetic in the spirit of Xcortex: warm bone, Source Serif 4,
   JetBrains Mono for all numerals/labels/eyebrows, forest-green
   accent, amber/alert reserved strictly for status. Hairlines,
   no heavy fills — colour means status, never decoration.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root { --mono: 'JetBrains Mono', ui-monospace, monospace; }
.ops[data-font="source"]   { --serif: 'Source Serif 4', Georgia, serif; }
.ops[data-font="spectral"] { --serif: 'Spectral', Georgia, serif; }
.ops[data-font="news"]     { --serif: 'Newsreader', Georgia, serif; }

/* ---- THEME : light "bone" (default) ---- */
.ops[data-theme="light"] {
  --bone:        #EFEADF;
  --bone-card:   #F7F4EC;
  --bone-deep:   #E6E0D2;
  --ink:         #1F201D;
  --ink-2:       #3A3A36;
  --ink-dim:     #6E6B63;
  --ink-faint:   #A6A198;
  --green:       #3A6EA5;   /* accent — mid blue */
  --green-soft:  #7BA3CC;
  --green-deep:  #2A4E73;
  --ghost:       #B9C3CE;
  --alert:       #B23A2E;
  --amber:       #B5803A;
  --rule:        rgba(31,32,29,0.09);
  --rule-strong: rgba(31,32,29,0.16);
  --field:       #FFFFFF;
  --shadow:      0 1px 2px rgba(31,32,29,0.03);
}
/* ---- THEME : dark "Mind" (control room) ---- */
.ops[data-theme="dark"] {
  --bone:        #14150F;
  --bone-card:   #1C1D1A;
  --bone-deep:   #26271F;
  --ink:         #ECE7D8;
  --ink-2:       #C9C4B4;
  --ink-dim:     #989384;
  --ink-faint:   #6E6B5F;
  --green:       #6E9BC4;   /* accent — mid blue (dark theme) */
  --green-soft:  #8FB4D6;
  --green-deep:  #AAC8E0;
  --ghost:       #59626B;
  --alert:       #D9685B;
  --amber:       #D2A35C;
  --rule:        rgba(236,231,216,0.10);
  --rule-strong: rgba(236,231,216,0.18);
  --field:       #11120D;
  --shadow:      0 1px 2px rgba(0,0,0,0.3);
}

/* status tone → colour (single source) */
.ops {
  --t-good: var(--green);
  --t-warn: var(--amber);
  --t-bad:  var(--alert);
  --t-info: var(--green-soft);
  --t-neutral: var(--ink-dim);
}

/* ---- density ---- */
.ops[data-density="comfortable"] {
  --pad-card: 17px 19px; --gap-grid: 14px; --row-h: 42px; --cell-px: 14px;
  --fs-cell: 14px; --fs-kpi: 40px; --section-gap: 34px;
}
.ops[data-density="compact"] {
  --pad-card: 12px 14px; --gap-grid: 9px; --row-h: 32px; --cell-px: 11px;
  --fs-cell: 13px; --fs-kpi: 31px; --section-gap: 24px;
}

/* ============================================================ BASE */
.ops {
  font-family: var(--serif);
  background: var(--bone);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}
.ops .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ops .eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
}

.shell { max-width: 1320px; margin: 0 auto; padding: 0 40px 80px; }

/* ============================================================ TOPBAR */
.topbar { background: var(--bone); border-bottom: 1px solid var(--rule-strong); position: sticky; top: 0; z-index: 30; }
.topbar-inner { max-width: 1320px; margin: 0 auto; padding: 22px 40px 18px; display: flex; align-items: flex-end; gap: 26px; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brandmark { width: 34px; height: 34px; flex: none; }
.brand-meta .crumb { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; white-space: nowrap; }
.brand-meta .title { font-size: 27px; line-height: 1; letter-spacing: -0.015em; font-weight: 500; }
.brand-meta .title em { font-style: italic; font-weight: 400; color: var(--green-deep); }

.spacer { flex: 1 1 auto; }

/* PLAN/ACTUAL-style screen toggle */
.screen-tabs { display: flex; gap: 2px; background: var(--bone-deep); border: 1px solid var(--rule); border-radius: 4px; padding: 3px; }
.screen-tab {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); background: transparent; border: none; padding: 9px 16px; border-radius: 2px;
  cursor: pointer; transition: background .18s, color .18s; display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.screen-tab .tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.screen-tab[aria-selected="true"] { background: var(--ink); color: var(--bone); }
.screen-tab[aria-selected="true"] .tdot { background: var(--amber); }
.ops[data-theme="dark"] .screen-tab[aria-selected="true"] { background: var(--green); color: var(--bone-card); }

.daterow { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.daterow label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.date-input { font-family: var(--mono); font-size: 13px; color: var(--ink); background: var(--bone-card); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 7px 10px; }
.date-input:focus { outline: none; border-color: var(--green); }

/* ============================================================ NOW-STRIP (context header) */
.now-strip { display: flex; align-items: center; gap: 20px; margin: 26px 0 6px; padding: 16px 20px; background: var(--bone-card); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); }
.now-strip .now-date { font-family: var(--mono); font-size: 22px; color: var(--green-deep); letter-spacing: 0.01em; white-space: nowrap; }
.now-strip .now-meta { flex: 1; min-width: 0; }
.now-strip .now-kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.now-strip .now-line { font-size: 17px; font-style: italic; color: var(--ink-2); }
.now-strip .now-line b { font-style: normal; font-weight: 600; color: var(--ink); }
.now-strip .live { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ============================================================ SECTION HEADS */
.sec-head { display: flex; align-items: baseline; gap: 14px; margin: var(--section-gap) 0 16px; }
.sec-title { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.sec-title em { font-style: italic; color: var(--green-deep); }
.sec-rule { flex: 1; height: 1px; background: var(--rule); align-self: center; }
.sec-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

/* ============================================================ KPI CARDS */
.kpi-grid { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.kpi { background: var(--bone-card); border: 1px solid var(--rule); border-radius: 14px; padding: var(--pad-card); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 11px; min-width: 0; position: relative; }
.kpi-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-dim); line-height: 1.35; display: flex; align-items: flex-start; gap: 8px; }
.kpi-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 3px; background: var(--tc, var(--ink-faint)); }
.kpi-valrow { display: flex; align-items: baseline; gap: 8px; }
.kpi-value { font-size: var(--fs-kpi); font-weight: 500; line-height: .95; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-value[data-toned="1"] { color: var(--tc); }
.kpi-unit { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.02em; }

/* ============================================================ FUNNEL */
.funnel-wrap { background: var(--bone-card); border: 1px solid var(--rule); border-radius: 16px; padding: 22px 24px 24px; box-shadow: var(--shadow); }
.funnel-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.funnel-cap .ft { font-size: 16px; font-weight: 500; }
.funnel-cap .fh { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* bars */
.fbars { display: flex; flex-direction: column; gap: 14px; }
.fbar { display: grid; grid-template-columns: 168px 1fr 108px; align-items: center; gap: 16px; cursor: var(--fcur, default); }
.fbar .fstage { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.fbar .ftrack { height: 12px; background: var(--bone-deep); border-radius: 6px; position: relative; overflow: hidden; }
.fbar .ffill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--fc); min-width: 4px; transition: width .55s cubic-bezier(.4,0,.1,1), filter .15s; }
.fbar .fcount { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
.fbar .fcount b { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.fcount .fpct, .cval .fpct { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--ink-faint); }
.cval .fpct { margin-left: 5px; }
.fbar.click:hover .ffill { filter: brightness(1.06); }
.fbar.active .fstage { color: var(--green-deep); }
.fbar.active .ftrack { box-shadow: 0 0 0 2px var(--bone-card), 0 0 0 3px var(--green); }
.fbar.dim { opacity: .42; }

/* trapezoid */
.ftrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ftrap .seg { width: 100%; display: flex; align-items: center; justify-content: center; color: var(--bone-card); position: relative; cursor: var(--fcur, default); }
.ftrap .seg .lab { display: flex; align-items: baseline; gap: 12px; }
.ftrap .seg .lab > span:first-child { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.ftrap .seg .lab .c { font-family: var(--mono); font-weight: 600; }

/* columns */
.fcols { display: flex; align-items: flex-end; gap: 4px; height: 210px; padding-top: 28px; }
.fcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; height: 100%; cursor: var(--fcur, default); position: relative; }
.fcol .cbar { width: 60%; max-width: 88px; border-radius: 7px 7px 0 0; background: var(--fc); position: relative; transition: height .55s cubic-bezier(.4,0,.1,1); }
.fcol .cval { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--ink); }
.fcol .cstage { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); text-align: center; line-height: 1.3; }
.fcol.active .cbar { box-shadow: inset 0 0 0 2px var(--green-deep); }
.fcol.dim { opacity: .42; }

.filter-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; font-style: italic; color: var(--ink-dim); }
.filter-note b { font-style: normal; color: var(--green-deep); font-weight: 600; }
.filter-clear { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-dim); border-radius: 3px; padding: 5px 10px; cursor: pointer; }
.filter-clear:hover { color: var(--ink); background: var(--bone-deep); }
.filter-hint { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }

/* ============================================================ BADGE */
.badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px 3px 8px; border-radius: 4px; color: var(--tc); border: 1px solid color-mix(in oklab, var(--tc) 34%, var(--rule)); background: color-mix(in oklab, var(--tc) 8%, transparent); white-space: nowrap; }
.badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: var(--tc); flex: none; }

/* ============================================================ DATA GRID */
.grid-card { background: var(--bone-card); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.grid-cap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.grid-cap .gt { font-size: 16px; font-weight: 500; }
.grid-cap .gmeta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.grid-search { font-family: var(--mono); font-size: 12px; padding: 7px 11px; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--field); color: var(--ink); width: 230px; }
.grid-search::placeholder { color: var(--ink-faint); }
.grid-search:focus { outline: none; border-color: var(--green); }

.grid-scroll { max-height: 580px; overflow: auto; }
.grid-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.grid-scroll::-webkit-scrollbar-thumb { background: var(--bone-deep); border-radius: 4px; }
table.dg { width: 100%; border-collapse: separate; border-spacing: 0; }
table.dg thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bone-card); color: var(--ink-faint);
  font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: left; padding: 12px var(--cell-px) 11px; border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap; cursor: pointer; user-select: none;
}
table.dg thead th.num { text-align: right; }
table.dg thead th .sortcaret { color: var(--green); margin-left: 5px; }
table.dg tbody td { padding: 0 var(--cell-px); height: var(--row-h); font-size: var(--fs-cell); border-bottom: 1px solid var(--rule); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
table.dg tbody td.num { text-align: right; }
table.dg tbody tr { cursor: pointer; transition: background .12s; }
table.dg tbody tr:hover td { background: color-mix(in oklab, var(--green) 5%, transparent); }
table.dg tbody tr:last-child td { border-bottom: none; }
td .party { font-size: calc(var(--fs-cell) + 2px); }
td .muted { color: var(--ink-faint); font-style: italic; }
td .gate, td .veh, td .tm { font-family: var(--mono); font-size: calc(var(--fs-cell) - 1px); letter-spacing: 0.02em; }
td .gate { color: var(--ink-dim); }
td .veh { color: var(--ink-2); }

/* age heat: mono number + thin ramp bar */
td.age .heatwrap { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; width: 100%; }
td.age .agev { font-family: var(--mono); font-size: var(--fs-cell); font-weight: 600; }
td.age .heatbar { height: 5px; width: 56px; border-radius: 3px; background: var(--bone-deep); overflow: hidden; flex: none; }
td.age .heatbar > span { display: block; height: 100%; border-radius: 3px; }
.ops[data-heat="off"] td.age .heatbar { display: none; }
.ops[data-heat="off"] td.age .agev { color: var(--ink) !important; }

.empty-row td { text-align: center; color: var(--ink-faint); font-style: italic; padding: 44px; font-size: 14px; }

/* ============================================================ NOTES / FOOT */
.notes-card { background: transparent; border: 1px solid var(--rule); border-radius: 14px; padding: 22px 24px; margin-top: 22px; }
.notes-card h3 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px; }
.notes-card p { font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 80ch; }
.notes-card em { color: var(--green-deep); }
.notes-card code { font-family: var(--mono); font-size: 12px; color: var(--green-deep); background: color-mix(in oklab, var(--green) 8%, transparent); border-radius: 4px; padding: 1px 6px; }

.foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

/* ============================================================ TRUCK MODAL + TIMELINE */
.modal-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(20,21,15,.5); padding: 24px; backdrop-filter: blur(2px); }
.modal { width: min(540px, 100%); background: var(--bone-card); border: 1px solid var(--rule-strong); border-radius: 16px; box-shadow: 0 16px 50px rgba(20,21,15,.28); overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .modal { animation: pop .22s cubic-bezier(.2,.6,.3,1) both; } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 24px 16px; }
.modal-gate { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); }
.modal-party { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; margin-top: 5px; }
.modal-x { cursor: pointer; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-dim); width: 30px; height: 30px; border-radius: 4px; font-size: 13px; flex: none; }
.modal-x:hover { color: var(--ink); background: var(--bone-deep); }
.modal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.modal-meta > div { background: var(--bone-card); padding: 12px 24px; display: flex; flex-direction: column; gap: 4px; }
.modal-meta span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); }
.modal-meta b { font-size: 16px; font-weight: 500; }
.modal-meta b.num { font-family: var(--mono); font-weight: 600; }
.tl { padding: 22px 24px 8px; }
.tl-step { display: flex; gap: 16px; padding-bottom: 20px; position: relative; }
.tl-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 27px; bottom: -1px; width: 1.5px; background: var(--rule-strong); }
.tl-step.done:not(:last-child)::before { background: var(--green); }
.tl-node { width: 27px; height: 27px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--rule-strong); background: var(--bone-card); color: var(--ink-faint); z-index: 1; }
.tl-step.done .tl-node { background: var(--green); border-color: var(--green); color: var(--bone-card); }
.tl-step.stuck .tl-node { background: transparent; border-color: var(--alert); color: var(--alert); }
.tl-stage { font-size: 16px; font-weight: 500; }
.tl-step.todo .tl-stage { color: var(--ink-faint); }
.tl-state { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.tl-step.done .tl-state { color: var(--green); }
.tl-step.stuck .tl-state { color: var(--alert); }
.modal-foot { padding: 12px 24px 18px; font-style: italic; font-size: 13px; color: var(--ink-faint); border-top: 1px solid var(--rule); }

/* fade-in */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fade .34s cubic-bezier(.2,.5,.3,1) both; }
  @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 820px) {
  .shell, .topbar-inner { padding-left: 20px; padding-right: 20px; }
  .topbar-inner { flex-wrap: wrap; gap: 14px; }
  .fbar { grid-template-columns: 120px 1fr 92px; gap: 12px; }
}