/* Take Interest · MRP subsea-procurement demo · styles. System fonts only, no CDN.
   ============================================================================
   Subsea palette on the TI base. Deep ocean teal, signal gold, magenta accent,
   ink, cream. Evokes the seafloor and ocean tastefully. The class vocabulary is
   the shared one every surface reuses: band / card / table / badge / button, plus
   the demo-specific pieces (comparison table with a lit flagged row, node-graph
   flow, timeline, part + supplier cards, catch callout, rating bar, step engine).
   ============================================================================ */
:root {
  --ink: #14202B; --ink-2: #334656; --muted: #6B7785;
  --cream: #FFF4CE; --paper: #FFFDF5; --mint: #E8F8F3;
  --gold: #F6BA2A; --amber: #FF8A34; --volt: #54C95A; --coral: #E0503F; --pink: #C7395E;
  --steel: #B9C3C9; --teal: #087D88; --teal-deep: #094F58;
  --abyss: #071A22;     /* deep industrial canvas */
  --graphite: #101820; --graphite-2: #172532;
  --line: rgba(20,32,43,.12); --line-2: rgba(224,80,63,.26);
  --ok: #1E8F76; --warn: #B5791B; --risk: #D7493F; --unknown: #59616B; --skip: #9AA3AE;
  --shadow: 0 18px 48px rgba(7,26,34,.18);
  --shadow-hard: 0 24px 70px rgba(7,26,34,.28);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 520px at 86% -10%, rgba(84,201,90,.20), transparent 58%),
    radial-gradient(760px 420px at -4% 4%, rgba(255,138,52,.18), transparent 56%),
    linear-gradient(180deg, #EAF5F0 0%, #FFF4CE 42%, #F7EFE0 100%);
  line-height: 1.5;
  min-height: 100vh;
}
.skip-link { position: absolute; left: -999px; background: var(--abyss); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 20; }

/* ---- topbar ---- */
.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 22px;
  background: linear-gradient(180deg, rgba(7,26,34,.98), rgba(7,26,34,.92));
  border-bottom: 1px solid rgba(246,186,42,.30); position: sticky; top: 0; z-index: 10;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background:
    radial-gradient(circle at 50% 42%, var(--volt) 0 4px, transparent 5px),
    conic-gradient(from 210deg, var(--gold), var(--amber), var(--teal), var(--gold));
  color: var(--abyss); font-weight: 800;
}
.brand strong { display: block; font-size: 15px; letter-spacing: -.01em; color: #FFFDF5; }
.brand span { display: block; font-size: 11.5px; color: #Bfeaee; }
#nav { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tab {
  border: 1px solid rgba(255,255,255,.22); background: #0E2A34; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; color: #F4FFFF; cursor: pointer;
}
.tab:hover { border-color: var(--gold); color: #fff; }
.tab.active { background: var(--gold); color: var(--abyss); border-color: transparent; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.role-switcher { display: inline-flex; gap: 4px; background: #0E2A34; border-radius: 999px; padding: 3px; }
.role-btn {
  border: none; background: transparent; border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: #F4FFFF; cursor: pointer;
}
.role-btn:hover { color: #fff; }
.role-btn.active { background: var(--gold); color: var(--abyss); }
/* detail-level switcher: same pill as the role switcher */
.view-switcher { display: inline-flex; gap: 4px; background: #0E2A34; border-radius: 999px; padding: 3px; }
.view-btn {
  border: none; background: transparent; border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: #F4FFFF; cursor: pointer;
}
.view-btn:hover { color: #fff; }
.view-btn.active { background: var(--gold); color: var(--abyss); }
/* Immediate is the default: the roadmap cards (watch-it-work animation, scenario
   simulator, contract + expiry panels, builds-in-flight, receiving) hide, leaving
   each surface at its act-on-it-today core. Long term reveals them. One global
   attribute drives every surface at once. */
body[data-view="immediate"] [data-detail="advanced"] { display: none; }
.ghost-btn {
  border: 1px solid rgba(255,255,255,.26); background: #0E2A34; border-radius: 8px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: #F4FFFF; cursor: pointer; text-decoration: none;
}
.ghost-btn:hover { border-color: var(--gold); color: #fff; }

.app-shell { max-width: 1220px; margin: 0 auto; padding: 18px 22px 80px; }

/* ---- hero ---- */
.hero {
  min-height: min(640px, calc(100vh - 132px));
  display: grid; grid-template-columns: minmax(260px, .52fr) minmax(520px, 1.48fr);
  gap: 22px; align-items: stretch; padding: 8px 0 20px;
}
.hero-copy { max-width: 520px; }
.cockpit-hero { position: relative; }
.cockpit-copy {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 420px; padding: 28px 26px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(7,26,34,.96), rgba(20,32,43,.94));
  color: var(--paper); box-shadow: var(--shadow-hard);
  border: 1px solid rgba(246,186,42,.22);
}
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--teal); margin: 0 0 8px; }
.hero h1 { font-size: clamp(34px, 3.1vw, 44px); line-height: .92; letter-spacing: -.03em; margin: 0 0 14px; color: inherit; overflow-wrap: anywhere; }
.lede { font-size: 16px; color: rgba(255,253,245,.76); max-width: 31ch; margin: 0 0 22px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hero-actions-big { display: grid; grid-template-columns: 1fr; width: min(280px, 100%); margin-bottom: 16px; }
.primary-btn {
  background-color: var(--gold); background-image: linear-gradient(135deg, var(--gold), var(--amber)); color: var(--abyss); border: none; border-radius: 9px;
  padding: 12px 20px; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(255,138,52,.22);
}
.primary-btn:hover { filter: brightness(1.04); }
.primary-btn.alt { background-color: var(--teal); background-image: linear-gradient(135deg, var(--volt), var(--teal)); color: #fff; }
.primary-btn.dark { background-color: #071A22; background-image: linear-gradient(135deg, #213241, #071A22); color: var(--gold); border: 1px solid rgba(246,186,42,.34); }
.quiet-btn { background: #fff; color: var(--ink-2); border: 1px solid var(--line); border-radius: 9px; padding: 11px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.quiet-btn:hover { border-color: var(--teal); color: var(--ink); }

/* How-this-works education panel: today vs a live system, plus how a model fits */
.how-it-works { border-left: 3px solid var(--teal); background: rgba(8,125,136,.05); }
.hiw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hiw-toggle { padding: 6px 12px; font-size: 12.5px; }
.hiw-body { margin-top: 8px; }
.hiw-body p { margin: 6px 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.hiw-body .hiw-today { color: var(--ink); font-weight: 600; }
.hiw-body[hidden] { display: none; }

/* a small "Sample data" cue, used in the hero + anywhere mock data shows */
.sample-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal-deep); background: rgba(84,201,90,.13);
  border: 1px solid rgba(84,201,90,.30); border-radius: 999px; padding: 4px 10px;
}
.cockpit-copy .sample-tag {
  color: var(--paper); background: rgba(84,201,90,.18);
  border-color: rgba(84,201,90,.44);
}
.sample-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* first viewport cockpit */
.procurement-cockpit {
  position: relative; min-height: 520px; border-radius: 18px; overflow: hidden;
  padding: 18px; color: var(--paper);
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(180deg, rgba(23,37,50,.96), rgba(7,26,34,.98));
  border: 1px solid rgba(185,195,201,.18);
  box-shadow: var(--shadow-hard);
}
.procurement-cockpit::before {
  content: ""; position: absolute; inset: auto -80px -110px 34%;
  height: 260px; background: radial-gradient(ellipse, rgba(246,186,42,.26), transparent 66%);
  pointer-events: none;
}
.cockpit-topline {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin-bottom: 14px; color: rgba(255,253,245,.58); font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.cockpit-topline span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 8px; text-align: center; }
.flow-spine {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 8px 0 16px;
}
.flow-spine::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 33px; height: 3px;
  background: linear-gradient(90deg, var(--volt), var(--gold), var(--coral), var(--teal));
}
.flow-node {
  position: relative; min-height: 96px; border-radius: 14px; padding: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.flow-node span {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  color: var(--abyss); font-size: 13px; font-weight: 900; margin-bottom: 12px;
}
.flow-node strong { display: block; font-size: clamp(13px, 1.3vw, 18px); letter-spacing: -.02em; }
.flow-node.is-ready span { background: var(--volt); }
.flow-node.is-live span { background: var(--gold); }
.flow-node.is-blocked { border-color: rgba(224,80,63,.66); box-shadow: inset 0 0 0 1px rgba(224,80,63,.26); }
.flow-node.is-blocked span { background: var(--coral); color: #fff; }
.flow-node.is-award span { background: var(--teal); color: #fff; }
.cockpit-grid {
  position: relative; display: grid; grid-template-columns: 1.05fr 1.35fr .78fr; gap: 12px;
}
.visual-card {
  min-height: 170px; border-radius: 16px; padding: 14px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,253,245,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.visual-card strong { display: block; color: var(--paper); font-size: 18px; letter-spacing: -.02em; }
.visual-card small { color: rgba(255,253,245,.62); }
.part-board { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: center; }
.part-visual {
  position: relative; width: 112px; height: 112px; border-radius: 24px;
  background: radial-gradient(circle at 50% 50%, rgba(246,186,42,.18), rgba(255,255,255,.04));
}
.part-ring, .part-core, .part-bolt { position: absolute; display: block; }
.part-ring { inset: 20px; border: 12px solid var(--steel); border-radius: 999px; box-shadow: 0 0 24px rgba(246,186,42,.28); }
.part-core { inset: 44px; border-radius: 999px; background: var(--teal); }
.part-bolt { width: 10px; height: 10px; border-radius: 3px; background: var(--gold); }
.b1 { left: 24px; top: 24px; } .b2 { right: 24px; top: 24px; } .b3 { left: 24px; bottom: 24px; } .b4 { right: 24px; bottom: 24px; }
.quote-bars { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 72px 1fr 54px; gap: 10px; align-items: center; font-size: 12px; color: rgba(255,253,245,.72); }
.bar-row i { height: 12px; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--volt), var(--teal)); box-shadow: 0 0 18px rgba(84,201,90,.28); }
.bar-row b { color: var(--paper); text-align: right; }
.bar-row.is-risk i { background: linear-gradient(90deg, var(--coral), var(--amber)); box-shadow: 0 0 18px rgba(224,80,63,.32); }
.risk-gauge { display: grid; place-items: center; text-align: center; }
.gauge {
  width: 112px; height: 112px; border-radius: 999px;
  background: conic-gradient(var(--coral) 0 76deg, var(--gold) 76deg 140deg, rgba(255,255,255,.14) 140deg 360deg);
  display: grid; place-items: center; margin-bottom: 6px;
}
.gauge span { width: 74px; height: 74px; border-radius: 999px; background: var(--graphite); border: 1px solid rgba(255,255,255,.10); }
.lead-timeline { grid-column: 1 / -1; min-height: 112px; }
.rail { position: relative; height: 16px; margin: 28px 0 12px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.rail-ok, .rail-risk { display: block; position: absolute; inset-block: 0; border-radius: 999px; }
.rail-ok { left: 0; width: 68%; background: linear-gradient(90deg, var(--volt), var(--gold)); }
.rail-risk { left: 68%; width: 18%; background: var(--coral); }
.ticks { display: flex; justify-content: space-between; color: rgba(255,253,245,.58); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }

/* first-screen visual: a compact procurement board, not a static screenshot */
.mission-board {
  position: relative; min-height: 420px; border: 1px solid rgba(8,125,136,.22); border-radius: 16px;
  overflow: hidden; background:
    linear-gradient(180deg, rgba(234,248,249,.92), rgba(255,253,245,.96)),
    radial-gradient(480px 260px at 74% 18%, rgba(8,125,136,.24), transparent 62%);
  box-shadow: 0 28px 70px rgba(8,49,56,.20);
}
.mission-ocean {
  position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(11,42,51,.02) 0%, rgba(11,42,51,.10) 58%, rgba(11,42,51,.32) 100%);
}
.mission-ocean::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 132px;
  background:
    radial-gradient(180px 42px at 16% 80%, rgba(240,181,27,.26), transparent 65%),
    radial-gradient(220px 48px at 72% 90%, rgba(8,125,136,.34), transparent 70%),
    linear-gradient(180deg, rgba(11,42,51,0), rgba(11,42,51,.46));
}
.vent {
  position: absolute; bottom: 58px; width: 42px; height: 78px; border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, #38495A, #0B2A33); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.vent::before {
  content: ""; position: absolute; left: 9px; right: 9px; top: -50px; height: 58px; border-radius: 999px;
  background: radial-gradient(ellipse at bottom, rgba(240,181,27,.42), rgba(240,181,27,0) 68%);
}
.vent-a { left: 18%; }
.vent-b { right: 18%; transform: scale(.82); opacity: .72; }
.generator-core {
  position: absolute; left: 50%; bottom: 96px; width: 128px; height: 64px; transform: translateX(-50%);
  border-radius: 18px; background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  box-shadow: 0 18px 38px rgba(8,49,56,.26), inset 0 0 0 1px rgba(255,255,255,.22);
}
.generator-core::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: 8px;
  border-radius: 999px; background: rgba(240,181,27,.92); box-shadow: 0 16px 0 rgba(255,255,255,.22);
}
.cable { position: absolute; height: 3px; background: rgba(240,181,27,.72); transform-origin: left center; }
.cable-a { left: 22%; bottom: 128px; width: 210px; transform: rotate(-8deg); }
.cable-b { right: 22%; bottom: 125px; width: 190px; transform: rotate(8deg); }
.mission-card {
  position: absolute; width: min(220px, 36%); border: 1px solid rgba(23,33,47,.12);
  background: rgba(255,253,245,.92); border-radius: 12px; padding: 13px 14px;
  box-shadow: 0 16px 42px rgba(8,49,56,.16); backdrop-filter: blur(8px);
}
.mission-card strong { display: block; font-size: 17px; letter-spacing: -.02em; color: var(--ink); }
.mission-card small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); }
.mission-label {
  display: block; margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-deep);
}
.mission-part { left: 24px; top: 26px; }
.mission-rfq { right: 24px; top: 34px; }
.mission-risk {
  left: 38px; bottom: 34px; border-color: rgba(199,57,94,.32);
  background: linear-gradient(180deg, rgba(255,253,245,.96), rgba(199,57,94,.08));
}
.mission-risk .mission-label { color: var(--risk); }
.mission-clock { right: 34px; bottom: 38px; }

/* ---- bands + cards (the shared layout vocabulary) ---- */
.band { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 136px; }
.band:first-of-type { border-top: none; }
.band-title { font-size: 18px; letter-spacing: -.02em; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--ink); }
.src-tag { font-size: 11.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.band-sub { font-size: 12.5px; color: var(--ink-2); max-width: 52ch; margin: 0 0 14px; }
.band.tinted { background: linear-gradient(180deg, rgba(8,125,136,.06), rgba(255,255,255,0)); border-radius: 16px; padding: 22px 18px; }

.card { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card + .card { margin-top: 18px; }
/* every action-row button gets consistent breathing room under it, app-wide */
.hero-actions { margin-bottom: 6px; }
.muted { color: var(--muted); font-size: 12.5px; }

.today-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.today-grid .today-card { min-height: 190px; }
.today-card.priority-high { border-color: rgba(199,57,94,.34); }
.today-card.priority-medium { border-color: rgba(181,121,27,.34); }
.supplier-checkboxes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 12px 0; background: rgba(232,248,243,.48);
}
.supplier-checkboxes .mrp-field-label { grid-column: 1 / -1; }
.supplier-checkboxes .mrp-check { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.email-draft {
  margin: 10px 0 0; padding: 12px; max-height: 260px; overflow: auto; white-space: pre-wrap;
  border: 1px solid var(--line); border-radius: 10px; background: #F8FAF5; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.45;
}
.po-document {
  margin: 14px 0; padding: 16px; border: 1px solid rgba(8,125,136,.30); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,253,245,.98), rgba(232,248,243,.64));
}
.po-doc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.po-doc-brand { font-size: 15px; font-weight: 800; color: var(--ink); }
.po-doc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.po-doc-total { margin: 10px 0 4px; text-align: right; font-weight: 800; color: var(--ink); }

.kv-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; margin: 0; }
.kv-grid dt { color: var(--ink-2); font-size: 13.5px; }
.kv-grid dd { margin: 0; font-weight: 700; font-size: 13.5px; text-align: right; color: var(--ink); }

/* a generic deep-link a surface uses to jump to its neighbor */
.deep-link, .surface-link {
  display: inline-block; margin-top: 14px; font-weight: 700; font-size: 13.5px;
  color: var(--teal); text-decoration: none; cursor: pointer;
  background: none; border: none; padding: 0;
}
.deep-link[aria-disabled="true"] { color: var(--muted); cursor: default; }
.deep-link:not([aria-disabled]):hover, .surface-link:hover { text-decoration: underline; }

/* ---- onboarding band + education band ---- */
.band.onboarding-band {
  background: linear-gradient(180deg, rgba(240,181,27,.12), rgba(255,255,255,0));
  border-radius: 16px; padding: 22px 18px;
}
.principle-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 8px 0 20px; scroll-margin-top: 136px;
}
.principle-tile {
  min-height: 104px; border-radius: 14px; padding: 14px;
  display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; gap: 7px 12px;
  align-items: center; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.principle-tile .tile-icon {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; background: var(--graphite); color: var(--gold); font-weight: 900;
}
.principle-tile strong { font-size: 15px; letter-spacing: -.02em; }
.principle-tile small { font-size: 12px; color: var(--muted); }
.principle-tile button { align-self: start; justify-self: start; padding: 8px 10px; min-height: 34px; font-size: 12px; }
.tile-tour .tile-icon { background: var(--teal); color: #fff; }
.tile-help .tile-icon { background: var(--gold); color: var(--abyss); }
.tile-check .tile-icon { background: var(--volt); color: var(--abyss); }
.tile-memory .tile-icon { background: var(--coral); color: #fff; }
.onboarding-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.onboarding-hint { font-size: 12.5px; color: var(--muted); margin: 0; }

.edu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.edu-card { border: 1px solid var(--line); background: var(--paper); border-radius: 13px; padding: 14px 15px; box-shadow: var(--shadow); }
.edu-card h3 { font-size: 14.5px; margin: 0 0 6px; color: var(--ink); }
.edu-card p { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.edu-note { margin-top: 14px; }

/* ---- the surface mount + empty/error states ---- */
#surface-root { margin-top: 6px; scroll-margin-top: 136px; }
.surface-empty { text-align: left; }
.surface-empty-title { display: block; font-size: 16px; margin-bottom: 6px; color: var(--ink); }

/* ---- footer ---- */
.footer { max-width: 1080px; margin: 0 auto; padding: 22px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); }

/* ===========================================================================
   BADGES + CHIPS
   kinds: det (gated rule) · prob (model read) · ok · warn · risk · unknown ·
   neutral, plus domain kinds rfq / quote / po / awarded / draft / sent.
   =========================================================================== */
.badge, .chip {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; line-height: 1.5;
}
.chip { color: #fff; }
.chip-neutral, .badge-neutral { background: #E8EEF0; color: var(--ink); }
.chip-det { background: var(--teal); }
.chip-prob { background: var(--unknown); }
.chip-ok, .badge-ok { background: var(--ok); color: #fff; }
.chip-warn, .badge-warn { background: var(--warn); color: #fff; }
.chip-risk, .badge-risk { background: var(--risk); color: #fff; }
.chip-unknown { background: var(--unknown); }
.chip-rfq, .badge-rfq { background: rgba(8,125,136,.16); color: var(--teal-deep); }
.chip-quote, .badge-quote { background: rgba(240,181,27,.24); color: var(--warn); }
.chip-po, .badge-po { background: rgba(216,59,140,.16); color: var(--pink); }
.chip-awarded, .badge-awarded { background: var(--ok); color: #fff; }
.chip-draft, .badge-draft { background: rgba(23,33,47,.10); color: var(--muted); }
.chip-sent, .badge-sent { background: rgba(8,125,136,.16); color: var(--teal-deep); }

/* ===========================================================================
   COMPARISON TABLE with a LIT flagged row
   Surfaces put quotes (or suppliers, or parts) side by side and light the one
   row the system flagged, then a note row names why. This is the catch made
   legible, not a mystery highlight.
   =========================================================================== */
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.compare-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; padding: 8px 12px; border-bottom: 2px solid var(--line);
}
.compare-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink); background: #fff; }
.compare-table tr:first-child td { border-top: none; }
.compare-table .ta-right { text-align: right; }
.compare-table .ta-center { text-align: center; }
.compare-table tbody tr.flagged td {
  background: linear-gradient(180deg, rgba(199,57,94,.10), rgba(199,57,94,.04));
  box-shadow: inset 3px 0 0 var(--risk);
}
.compare-table tbody tr.clickable-row { cursor: pointer; }
.compare-table tbody tr.clickable-row:hover td { background: var(--mint); }
.compare-table tbody tr.clickable-row:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.compare-table tbody tr.selected td {
  background: linear-gradient(180deg, rgba(8,125,136,.14), rgba(232,248,243,.86));
  box-shadow: inset 4px 0 0 var(--teal), 0 8px 20px rgba(8,49,56,.10);
  font-weight: 850;
  padding-top: 18px;
  padding-bottom: 18px;
}
.compare-table tbody tr.flag-note-row td {
  background: rgba(199,57,94,.06); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); padding: 9px 12px;
}
.flag-note-mark {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--risk); border-radius: 999px; padding: 2px 8px; margin-right: 9px;
}
.flag-note-text { color: var(--ink-2); }

/* ===========================================================================
   CATCH CALLOUT  the hero of the demo: a costly mistake caught before the PO.
   =========================================================================== */
.catch-callout {
  border: 1px solid var(--line); border-left: 5px solid var(--warn);
  border-radius: 14px; padding: 16px 18px; background: var(--paper); box-shadow: var(--shadow);
}
.catch-callout.sev-risk { border-left-color: var(--risk); background: linear-gradient(180deg, rgba(199,57,94,.06), rgba(255,253,245,1)); }
.catch-callout.sev-warn { border-left-color: var(--warn); background: linear-gradient(180deg, rgba(181,121,27,.06), rgba(255,253,245,1)); }
.catch-callout.sev-ok { border-left-color: var(--ok); }
.catch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.catch-mark {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--risk); border-radius: 999px; padding: 3px 10px;
}
.catch-callout.sev-warn .catch-mark { background: var(--warn); }
.catch-callout.sev-ok .catch-mark { background: var(--ok); }
.catch-saved { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--risk); }
.catch-callout.sev-warn .catch-saved { color: var(--warn); }
.catch-title { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 6px; }
.catch-body { font-size: 13.5px; color: var(--ink-2); margin: 0 0 10px; }
.catch-evidence { margin: 0; padding-left: 18px; }
.catch-evidence li { font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }

/* ===========================================================================
   PART CARD + SUPPLIER CARD
   =========================================================================== */
.part-card, .supplier-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--paper); border-radius: 12px;
  padding: 76px 16px 15px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.part-card::before, .supplier-card::before {
  content: ""; position: absolute; left: 16px; top: 14px; width: 46px; height: 46px;
  border-radius: 14px; background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 6px, transparent 7px),
    conic-gradient(from 120deg, var(--steel), var(--teal), var(--amber), var(--steel));
  box-shadow: 0 12px 28px rgba(8,125,136,.20);
}
.part-card::after, .supplier-card::after {
  content: ""; position: absolute; right: 0; top: 0; width: 120px; height: 74px;
  background: linear-gradient(135deg, rgba(84,201,90,.16), rgba(246,186,42,.12));
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
.part-head, .supplier-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.part-name, .supplier-name { font-size: 15px; color: var(--ink); }
.part-id { font-size: 11.5px; font-family: ui-monospace, Menlo, monospace; color: var(--teal-deep); }
.part-spec { font-size: 13px; color: var(--ink-2); margin: 0; }
.part-meta, .supplier-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.part-lead, .part-price, .supplier-focus { font-size: 12px; color: var(--ink-2); }
.part-price { font-weight: 700; color: var(--warn); }
.part-note, .supplier-note { font-size: 12px; color: var(--muted); margin: 0; }
.part-open, .supplier-open {
  align-self: stretch; margin-top: 8px; background: var(--teal-deep); border: none; border-radius: 9px; padding: 10px 14px;
  color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; text-align: center;
}
.part-open:hover, .supplier-open:hover { background: var(--teal); }
.part-card.is-clickable, .supplier-card.is-clickable { cursor: pointer; }
.part-card.is-clickable:hover, .supplier-card.is-clickable:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 18px 44px rgba(8,49,56,.18); }
.part-card.is-clickable:focus-visible, .supplier-card.is-clickable:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.node-graph + .card-grid { margin-top: 22px; }
.node-graph + .po-list,
.node-graph + .suppliers-detail,
.suppliers-detail:empty + .card-grid { margin-top: 22px; }
.suppliers-detail:empty { display: none; }
.part-card.selected, .supplier-card.selected, .planning-row.selected, .user-row.selected, .rfq-card.selected, .po-card.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(8,125,136,.16), 0 22px 52px rgba(8,49,56,.18);
  transform: scale(1.06);
  background: linear-gradient(180deg, rgba(232,248,243,.74), var(--paper));
  z-index: 1;
}
.part-card.selected .part-name,
.supplier-card.selected .supplier-name,
.rfq-card.selected .part-name,
.po-card.selected .part-name {
  font-weight: 900;
}
.surface-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.toolbar-title { margin-right: auto; color: var(--ink); font-size: 13px; }
.seg-btn { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; padding: 8px 14px; font-weight: 800; cursor: pointer; }
.seg-btn.active { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.record-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr); gap: 16px; align-items: start; }
/* the catalog stays one column until a part is opened, so the grid uses the full
   width instead of sitting next to an empty reserved side column. */
.catalog-workspace { display: block; }
.catalog-workspace.has-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr); gap: 16px; align-items: start; }
.record-workspace.full-open {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.record-workspace.full-open .record-content { width: 100%; }
.catalog-content, .record-content { min-width: 0; }
/* search box + the inline add / intake forms */
.catalog-search { flex: 1 1 200px; min-width: 150px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; }
.catalog-search:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.catalog-add-host:not(:empty) { margin: 6px 0 2px; }
.intake-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 14px; margin: 8px 0; }
.catalog-side-detail, .record-side-detail {
  position: sticky; top: 132px; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid rgba(8,125,136,.28); border-radius: 14px;
  background: linear-gradient(180deg, rgba(232,248,243,.92), rgba(255,253,245,.98));
  box-shadow: var(--shadow); padding: 12px; max-height: calc(100vh - 156px); overflow: auto;
  animation: detailIn .2s ease both;
}
.catalog-side-detail .card,
.record-side-detail .card,
.inline-detail {
  font-weight: inherit;
}
.record-workspace.full-open .record-side-detail {
  position: static;
  width: 100%;
  max-height: none;
  overflow: visible;
}
.record-workspace.full-open .record-side-detail .card {
  padding: 22px;
}
.table-view { border: 1px solid var(--line); border-radius: 13px; background: var(--paper); box-shadow: var(--shadow); overflow: auto; }
.table-view .compare-table { min-width: 760px; }

/* planning, local details, and role management */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.metric-card {
  border: 1px solid var(--line); border-radius: 13px; padding: 14px;
  background: linear-gradient(145deg, rgba(255,253,245,.98), rgba(232,248,243,.78));
  box-shadow: var(--shadow); min-height: 104px;
}
.metric-card.metric-risk { background: linear-gradient(145deg, rgba(255,253,245,.98), rgba(215,73,63,.10)); border-color: rgba(215,73,63,.28); }
.metric-card.metric-warn { background: linear-gradient(145deg, rgba(255,253,245,.98), rgba(246,186,42,.16)); border-color: rgba(181,121,27,.26); }
.metric-card.metric-ok { background: linear-gradient(145deg, rgba(255,253,245,.98), rgba(30,143,118,.12)); border-color: rgba(30,143,118,.24); }
.metric-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.metric-value { display: block; font-size: 30px; line-height: 1; color: var(--ink); margin: 8px 0 4px; }
.metric-sub { color: var(--ink-2); font-size: 12px; }
.planning-layout, .users-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 12px; align-items: start; }
/* planning stacks the ranked inventory table over the contract panel so the table
   gets full width, the way a spreadsheet would. */
.planning-stack { display: flex; flex-direction: column; gap: 12px; }
.net-short { color: var(--coral, #d7493f); font-weight: 900; }
.compare-table tr.row-short td { background: rgba(215,73,63,.06); }
/* inventory: builds-in-flight + receive-PO rows */
.build-row { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px 12px; margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.build-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.planning-list, .users-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.planning-row, .user-row {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 24px rgba(7,26,34,.08);
}
.planning-row[role="button"] { cursor: pointer; }
.planning-row[role="button"]:hover { border-color: var(--teal); background: var(--mint); }
.planning-row[role="button"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.planning-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.planning-action {
  margin-left: auto; color: var(--teal-deep); font-size: 12px; font-weight: 800;
  border: 1px solid rgba(8,125,136,.18); border-radius: 999px; padding: 2px 8px;
}
.inline-detail {
  margin-top: 4px; border: 1px solid rgba(8,125,136,.24); border-radius: 12px;
  background: linear-gradient(180deg, rgba(232,248,243,.9), rgba(255,253,245,.98));
  padding: 12px; display: flex; flex-direction: column; gap: 9px; animation: detailIn .2s ease both;
}
.inline-title { color: var(--ink); font-size: 14px; }
.quote-selected-host { margin: 10px 0 12px; }
.expiry-row {
  display: block; width: 100%; text-align: left; margin-top: 8px;
  border: 1px solid rgba(215,73,63,.22); border-radius: 10px; background: rgba(215,73,63,.06);
  color: var(--ink); padding: 10px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.expiry-row:hover { border-color: var(--risk); background: rgba(215,73,63,.10); }
.role-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.role-card {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.scenario-host { margin-top: 10px; }
.scenario-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; animation: detailIn .2s ease both; }
.scenario-ok { border-color: rgba(30,143,118,.28); background: linear-gradient(180deg, rgba(30,143,118,.08), rgba(255,255,255,.98)); }
.scenario-warn { border-color: rgba(181,121,27,.30); background: linear-gradient(180deg, rgba(246,186,42,.14), rgba(255,255,255,.98)); }
.scenario-risk { border-color: rgba(215,73,63,.30); background: linear-gradient(180deg, rgba(215,73,63,.10), rgba(255,255,255,.98)); }
.scenario-outcome { font-size: 18px; color: var(--ink); }
.scenario-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.scenario-next { margin: 0; font-size: 13px; font-weight: 800; color: var(--teal-deep); }
@keyframes detailIn { from { opacity: .82; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* rating bar (supplier on-time, quote accuracy, anything 0..100) */
.rating-bar { display: flex; flex-direction: column; gap: 5px; }
.rating-row { display: flex; align-items: baseline; justify-content: space-between; }
.rating-label { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.rating-value { font-size: 12px; font-weight: 700; color: var(--ink); }
.rating-track { height: 8px; border-radius: 999px; background: rgba(23,33,47,.08); overflow: hidden; }
.rating-fill { height: 100%; border-radius: 999px; }
.fill-ok { background: var(--ok); }
.fill-warn { background: var(--warn); }
.fill-risk { background: var(--risk); }

/* ===========================================================================
   NODE-GRAPH FLOW  the procurement path read as connected steps.
   =========================================================================== */
.node-graph { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.ng-node {
  flex: 1 1 130px; min-width: 120px; text-align: left;
  border: 1px solid var(--line); background: var(--paper); border-radius: 12px;
  padding: 12px 13px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow);
}
button.ng-node { cursor: pointer; font: inherit; }
button.ng-node:hover { border-color: var(--teal); }
.ng-dot {
  width: 28px; height: 28px; border-radius: 999px; background: rgba(23,33,47,.10); color: var(--ink-2);
  font-weight: 700; font-size: 12px; display: grid; place-items: center;
}
.ng-label { font-size: 13.5px; color: var(--ink); }
.ng-sub { font-size: 11.5px; color: var(--muted); }
.ng-node.state-done .ng-dot { background: var(--ok); color: #fff; }
.ng-node.state-done { border-color: rgba(30,122,111,.4); }
.ng-node.state-active .ng-dot { background: var(--gold); color: var(--abyss); }
.ng-node.state-active { border-color: var(--teal); background: var(--mint); }
.ng-node.state-flagged .ng-dot { background: var(--risk); color: #fff; }
.ng-node.state-flagged { border-color: var(--risk); box-shadow: inset 0 0 0 1px rgba(199,57,94,.3); }
.ng-link {
  align-self: center; flex: 0 0 22px; height: 2px; background: linear-gradient(90deg, var(--teal), rgba(8,125,136,.25));
  margin: 0 -1px;
}
@media (max-width: 640px) {
  .node-graph { flex-direction: column; }
  .ng-link { width: 2px; height: 18px; flex: 0 0 18px; align-self: flex-start; margin-left: 24px;
    background: linear-gradient(180deg, var(--teal), rgba(8,125,136,.25)); }
  .step-host { grid-template-columns: 1fr; }
}

/* ===========================================================================
   TIMELINE  used for the deployment milestones / journey overview.
   =========================================================================== */
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tl-step {
  text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: 13px; padding: 14px;
  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow);
}
button.tl-step { cursor: pointer; font: inherit; }
button.tl-step:hover { border-color: var(--teal); }
.tl-index { width: 24px; height: 24px; border-radius: 999px; background: var(--gold); color: var(--abyss); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.tl-title { font-size: 15px; color: var(--ink); }
.tl-who { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); font-weight: 700; }
.tl-detail { font-size: 12.5px; color: var(--ink-2); }

/* ===========================================================================
   STEP ENGINE  the "watch it work piece by piece" reveal (stagedReveal).
   =========================================================================== */
.step-host { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.step-row {
  min-height: 116px;
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr auto; gap: 8px 10px; align-items: start;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background:
    linear-gradient(145deg, rgba(255,253,245,.98), rgba(232,248,243,.76));
  margin-bottom: 0; transition: border-color .2s ease, background .2s ease, opacity .2s ease;
  box-shadow: 0 12px 28px rgba(7,26,34,.08);
}
.step-row.pending { opacity: .5; }
.step-row.running { border-color: var(--teal); background: var(--mint); opacity: 1; }
.step-row.done { border-color: rgba(8,125,136,.4); opacity: 1; }
.step-n { width: 34px; height: 34px; border-radius: 999px; background: var(--gold); color: var(--abyss);
  font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.step-row.done .step-n { background: var(--teal); color: #fff; }
.step-body { min-width: 0; }
.step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.step-label { font-size: 13.5px; color: var(--ink); }
.step-detail { display: none; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 0; }
.step-conf { font-size: 11px; font-weight: 700; color: var(--unknown); }
.step-status { grid-column: 1 / -1; justify-self: start; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); align-self: end; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.step-row.running .step-status { color: var(--teal); }
.step-row.done .step-status { color: var(--ok); }

/* ===========================================================================
   CSP-safe form fields (mrp-ui textField / selectField / checkField)
   =========================================================================== */
.mrp-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mrp-field-label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.mrp-field input, .mrp-field select, .mrp-field textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px;
  color: var(--ink); background: #fff;
}
.mrp-field input:focus, .mrp-field select:focus, .mrp-field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.mrp-check { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.mrp-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 9px 16px;
  font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.mrp-btn:hover { border-color: var(--teal); color: var(--ink); }
.mrp-btn.primary { border: none; color: #fff; background: linear-gradient(135deg, var(--teal), var(--pink)); }

/* ===========================================================================
   ONBOARDING LAYER  tooltip bubble · help dock · guided tour. (mrp- prefix)
   Palette reuses the page tokens. CSP-safe: nodes come from onboarding.mjs.
   =========================================================================== */
[data-tip] { scroll-margin-top: 88px; }

/* tooltip bubble */
.mrp-tip-bubble {
  position: absolute; z-index: 60; max-width: 300px; width: max-content;
  background: var(--abyss); color: var(--paper); border-radius: 11px;
  padding: 14px 16px; box-shadow: 0 18px 48px rgba(8,42,51,.48);
  border: 1px solid rgba(240,181,27,.45); pointer-events: auto;
  opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease;
}
.mrp-tip-bubble[hidden] { display: none; }
.mrp-tip-bubble.is-visible { opacity: 1; transform: none; }
.mrp-tip-title { display: block; font-size: 14px; color: var(--gold); letter-spacing: 0; margin-bottom: 5px; }
.mrp-tip-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: #F4FFFF; }

/* help dock */
#help-dock { position: fixed; right: 18px; bottom: 18px; z-index: 70; }
.mrp-help-open {
  background: linear-gradient(135deg, var(--teal), var(--pink)); color: #fff; border: none;
  border-radius: 999px; padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 14px 32px rgba(8,125,136,.34);
}
.mrp-help-open::before { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px;
  margin-right: 8px; border-radius: 999px; background: rgba(255,255,255,.22); font-weight: 800; }
.mrp-help-panel {
  position: absolute; right: 0; bottom: 56px; width: min(380px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 96px)); overflow: auto;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 26px 64px rgba(8,42,51,.30); padding: 16px;
}
.mrp-help-panel[hidden] { display: none; }
.mrp-help-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mrp-help-title { font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.mrp-help-close { margin-left: auto; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.mrp-help-tourrow { margin-bottom: 12px; }
.mrp-help-tour {
  width: 100%; background: var(--teal-deep); color: #fff;
  border: none; border-radius: 10px; padding: 11px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.mrp-help-searchwrap { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.mrp-help-searchlabel { font-size: 12px; font-weight: 600; color: var(--ink-2); }
#mrp-help-search {
  font-size: 13.5px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
}
#mrp-help-search:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.mrp-help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mrp-help-empty { font-size: 13px; color: var(--muted); padding: 8px 4px; }
.mrp-help-item { margin: 0; }
.mrp-help-pick {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 12px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.mrp-help-pick:hover { border-color: var(--line-2); background: var(--mint); }
.mrp-help-itemtags { font-size: 11px; font-weight: 500; color: var(--muted); }
.mrp-help-detail { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.mrp-help-back { align-self: flex-start; border: none; background: none; color: var(--teal);
  font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; }
.mrp-help-detail-title { font-size: 14.5px; letter-spacing: -.01em; color: var(--ink); }
.mrp-help-editlabel { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.mrp-help-edit {
  font-family: inherit; font-size: 13px; line-height: 1.45; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; resize: vertical; color: var(--ink);
}
.mrp-help-edit:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.mrp-help-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mrp-help-save { background: linear-gradient(135deg, var(--teal), var(--pink)); color: #fff; border: none;
  border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.mrp-help-reset { background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mrp-help-status { font-size: 12px; color: var(--ok); margin: 0; min-height: 15px; }

/* guided tour */
.mrp-tour-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(8,42,51,.62); pointer-events: none; }
.mrp-tour-ring {
  position: absolute; border: 3px solid var(--gold); border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(8,42,51,0), 0 12px 30px rgba(240,181,27,.4);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; pointer-events: none;
}
.mrp-tour-card {
  position: absolute; z-index: 81; width: min(340px, calc(100vw - 32px));
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 26px 64px rgba(8,42,51,.36); padding: 16px 18px; pointer-events: auto;
}
.mrp-tour-count { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--teal); }
.mrp-tour-title { display: block; font-size: 16px; letter-spacing: -.02em; margin: 4px 0 6px; color: var(--ink); }
.mrp-tour-body { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
.mrp-tour-nav { display: flex; gap: 8px; align-items: center; }
.mrp-tour-skip { margin-right: auto; border: none; background: none; color: var(--muted);
  font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px; }
.mrp-tour-back { border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.mrp-tour-back:disabled { opacity: .4; cursor: default; }
.mrp-tour-next { border: none; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--teal-deep); cursor: pointer; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 560px) {
  .topbar { padding: 12px 14px; }
  #nav {
    width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 2px; scrollbar-width: none;
  }
  #nav::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 6px 12px; }
  .topbar-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .role-switcher { flex: 0 0 auto; }
  .app-shell { padding: 18px 14px 60px; }
  .kv-grid dd { font-size: 13px; }
  #help-dock { right: 12px; bottom: 12px; }
  .mrp-help-panel { width: calc(100vw - 24px); right: -6px; }
  .mrp-help-open {
    width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center;
    font-size: 0; line-height: 0;
  }
  .mrp-help-open::before { margin: 0; font-size: 13px; }
  .mrp-tip-bubble { max-width: calc(100vw - 28px); }
  .compare-table { font-size: 12px; }
  .compare-table th, .compare-table td { padding: 6px; overflow-wrap: anywhere; }
  .compare-table { table-layout: fixed; }
  .band, #surface-root { scroll-margin-top: 178px; }
  .principle-strip { grid-template-columns: 1fr 1fr; }
  .principle-tile { min-height: 90px; grid-template-columns: 34px 1fr; padding: 11px; }
  .principle-tile .tile-icon { width: 34px; height: 34px; }
  .step-host { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .planning-layout, .users-layout, .catalog-workspace, .record-workspace { grid-template-columns: 1fr; }
  .catalog-side-detail, .record-side-detail { position: static; max-height: none; }
  .planning-action { margin-left: 0; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .cockpit-copy { min-height: 0; }
  .cockpit-grid { grid-template-columns: 1fr 1fr; }
  .step-host { grid-template-columns: 1fr 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planning-layout, .users-layout, .catalog-workspace, .record-workspace { grid-template-columns: 1fr; }
  .catalog-side-detail, .record-side-detail { position: static; max-height: none; }
  .risk-gauge { min-height: 190px; }
  .mission-board { min-height: 360px; }
  .mission-card { width: min(210px, 46%); }
  .today-summary, .po-doc-meta { grid-template-columns: 1fr; }
  .po-document { padding: 12px; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 34px; }
  .procurement-cockpit { min-height: 0; padding: 12px; }
  .cockpit-topline { grid-template-columns: repeat(3, 1fr); }
  .flow-spine { grid-template-columns: 1fr 1fr; }
  .flow-spine::before { display: none; }
  .flow-node { min-height: 82px; }
  .flow-node span { width: 34px; height: 34px; margin-bottom: 8px; }
  .cockpit-grid { grid-template-columns: 1fr; }
  .step-host { grid-template-columns: 1fr; }
  .part-board { grid-template-columns: 86px 1fr; }
  .part-visual { width: 82px; height: 82px; }
  .part-ring { inset: 16px; border-width: 9px; }
  .part-core { inset: 34px; }
  .b1 { left: 18px; top: 18px; } .b2 { right: 18px; top: 18px; } .b3 { left: 18px; bottom: 18px; } .b4 { right: 18px; bottom: 18px; }
  .mission-board { min-height: 430px; }
  .mission-card { width: calc(100% - 32px); left: 16px; right: auto; }
  .mission-part { top: 16px; }
  .mission-rfq { top: 106px; }
  .mission-risk { top: 196px; bottom: auto; }
  .mission-clock { top: 286px; bottom: auto; }
  .generator-core { bottom: 18px; width: 108px; }
  .vent { bottom: 0; opacity: .55; }
}

/* ---- Super demo: the guided course walkthrough player ---------------------- */
body[data-super-demo="on"] { scroll-behavior: smooth; }
.sd-target { outline: 3px solid var(--gold, #F0B51B) !important; outline-offset: 4px; border-radius: 10px; box-shadow: 0 0 0 6px rgba(240,181,27,.22); transition: outline-color .2s ease; }
.sd-panel {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(640px, calc(100vw - 28px)); z-index: 1200;
  background: #0E2A34; color: #F4FFFF; border: 1px solid rgba(240,181,27,.35);
  border-radius: 16px; padding: 16px 18px; box-shadow: 0 18px 50px rgba(7,26,34,.45);
}
.sd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sd-act { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; }
.sd-act-immediate { background: var(--gold, #F0B51B); color: #07221C; }
.sd-act-roadmap { background: #2BB3A3; color: #04241F; }
.sd-counter { margin-left: auto; font-size: 12px; color: #BFE6E0; }
.sd-title { display: block; font-size: 17px; line-height: 1.2; margin: 2px 0 6px; }
.sd-why { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #E6F6F2; }
.sd-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sd-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1px solid rgba(244,255,255,.4); background: transparent; cursor: pointer; }
.sd-dot.done { background: rgba(43,179,163,.8); border-color: transparent; }
.sd-dot.current { background: var(--gold, #F0B51B); border-color: transparent; transform: scale(1.25); }
.sd-controls { display: flex; gap: 8px; }
.sd-btn { border: 1px solid rgba(244,255,255,.3); background: transparent; color: #F4FFFF; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer; }
.sd-btn:hover { border-color: var(--gold, #F0B51B); }
.sd-btn[disabled] { opacity: .4; cursor: default; }
.sd-next { margin-left: auto; background: var(--gold, #F0B51B); color: #07221C; border-color: transparent; }
.sd-play { background: rgba(43,179,163,.2); }
.sd-exit { color: #FFD9D3; }
@media (max-width: 520px) { .sd-panel { bottom: 8px; padding: 12px 14px; } .sd-title { font-size: 15px; } }
@media (max-width: 520px) { .email-draft { font-size: 11.5px; } }