/*
 * Nexum Cockpit — JadeMind brand CSS.
 * Design tokens, header, hero, sections, cards and pills are ported verbatim
 * from the umbrella's self-contained pages (state-of-smartwear.html /
 * hal-architecture.html) so the console is visually one product with them.
 */

:root, [data-theme="dark"] {
  --bg:            hsl(210 20% 6%);
  --bg-grid:       hsl(210 12% 12% / 0.55);
  --surface:       hsl(210 18% 9%);
  --surface-elev:  hsl(210 16% 12%);
  --surface-2:     hsl(210 16% 15%);
  --surface-3:     hsl(210 16% 19%);
  --border:        hsl(210 12% 18%);
  --border-soft:   hsl(210 12% 24%);
  --border-strong: hsl(210 12% 32%);
  --foreground:    hsl(60 10% 92%);
  --foreground-2:  hsl(60 10% 78%);
  --muted:         hsl(210 10% 55%);
  --muted-2:       hsl(210 10% 40%);
  --jade:          hsl(160 55% 45%);
  --jade-glow:     hsl(160 60% 52%);
  --jade-light:    hsl(160 45% 68%);
  --jade-soft:     hsl(160 55% 45% / 0.10);
  --jade-edge:     hsl(160 55% 45% / 0.32);
  --plan:          hsl(38 90% 60%);
  --plan-soft:     hsl(38 90% 60% / 0.10);
  --lock:          hsl(28 90% 58%);
  --lock-soft:     hsl(28 90% 58% / 0.12);
  --mock:          hsl(220 90% 65%);
  --mock-soft:     hsl(220 90% 65% / 0.12);
  --done:          hsl(150 65% 50%);
  --done-soft:     hsl(150 65% 50% / 0.14);
  --shadow:        0 1px 0 hsl(0 0% 100% / 0.04) inset, 0 12px 36px hsl(0 0% 0% / 0.30);
}

[data-theme="light"] {
  --bg:            hsl(60 10% 96%);
  --bg-grid:       hsl(210 10% 88% / 0.65);
  --surface:       hsl(0 0% 100%);
  --surface-elev:  hsl(60 10% 98%);
  --surface-2:     hsl(60 10% 94%);
  --surface-3:     hsl(60 10% 90%);
  --border:        hsl(210 10% 86%);
  --border-soft:   hsl(210 10% 80%);
  --border-strong: hsl(210 10% 68%);
  --foreground:    hsl(210 20% 14%);
  --foreground-2:  hsl(210 15% 28%);
  --muted:         hsl(210 10% 42%);
  --muted-2:       hsl(210 10% 60%);
  --jade:          hsl(160 55% 36%);
  --jade-glow:     hsl(160 60% 36%);
  --jade-light:    hsl(160 55% 30%);
  --jade-soft:     hsl(160 55% 45% / 0.10);
  --jade-edge:     hsl(160 55% 45% / 0.35);
  --plan:          hsl(32 90% 42%);
  --plan-soft:     hsl(32 90% 60% / 0.14);
  --lock:          hsl(28 80% 42%);
  --lock-soft:     hsl(28 80% 42% / 0.12);
  --mock:          hsl(220 70% 48%);
  --mock-soft:     hsl(220 70% 48% / 0.12);
  --done:          hsl(150 60% 36%);
  --done-soft:     hsl(150 60% 36% / 0.14);
  --shadow:        0 1px 0 hsl(0 0% 100%) inset, 0 6px 24px hsl(210 20% 20% / 0.06);
}

:root { --radius: 0.5rem; --radius-lg: 1rem; --gutter: 32px; --max: 1240px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--foreground);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
}
a { color: var(--jade); text-decoration: none; }
a:hover { color: var(--jade-glow); }
a[aria-disabled="true"] { color: var(--muted); pointer-events: none; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.mono { font-family: 'JetBrains Mono', monospace; }
.dim  { color: var(--muted); }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: hsl(from var(--bg) h s l / 0.78);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px; gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--foreground);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--foreground); }
.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; color: var(--jade); }
.brand-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.brand-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); }

nav.toc { display: flex; gap: 6px; flex: 1; }
nav.toc a {
  color: var(--foreground-2); font-size: 13px; padding: 6px 10px; border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
nav.toc a:hover { color: var(--foreground); background: var(--surface-2); }
nav.toc a.active { color: var(--jade); background: var(--jade-soft); }

.header-actions { display: inline-flex; gap: 10px; align-items: center; }
.who { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
.tag {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 4px 8px; border: 1px solid var(--border-soft); border-radius: 999px;
  color: var(--foreground-2); letter-spacing: 0.02em;
}
.theme-toggle {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  color: var(--foreground); cursor: pointer;
  padding: 6px 8px; display: inline-grid; place-items: center; width: 34px; height: 34px;
}
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.btn-ghost button {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  color: var(--foreground); cursor: pointer; padding: 6px 12px; font-size: 12px; font-family: 'DM Sans', sans-serif;
}
.btn-ghost button:hover { border-color: var(--border-strong); }
.btn-jade button {
  background: var(--jade); color: hsl(210 20% 6%); border: 0; border-radius: 999px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.btn-jade button:hover { background: var(--jade-glow); }

/* ===== Hero ===== */
.hero { padding: 56px 0 24px; position: relative; z-index: 1; }
.hero-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 24px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted-2);
}
.hero-meta dt { color: var(--jade); letter-spacing: 0.06em; text-transform: uppercase; font-size: 10px; }
.hero-meta dd { margin: 4px 0 0; color: var(--foreground-2); font-size: 13px; }
.hero h1 {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 14px;
}
.hero h1 .accent { color: var(--jade); }
.hero .lede { font-size: 17px; color: var(--foreground-2); max-width: 720px; line-height: 1.55; }

/* ===== Sections ===== */
.section { padding: 40px 0; position: relative; z-index: 1; }
.section-head { margin-bottom: 24px; max-width: 820px; }
.rule {
  display: inline-flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px;
}
.section-id { color: var(--jade); font-weight: 600; }
.section-head h2 {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; margin: 0;
}
.section-head .lede { color: var(--foreground-2); font-size: 14px; margin: 10px 0 0; max-width: 720px; }
.crumbs { font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-bottom: 14px; }

/* ===== Stat cards ===== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat {
  display: flex; flex-direction: column; gap: 4px; padding: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.stat:hover { border-color: var(--border-strong); }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: var(--foreground); line-height: 1; }
.stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ===== Cards (requirements / decisions) ===== */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 20px 22px; position: relative; overflow: hidden;
}
.card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--jade); }
a.card:hover { border-color: var(--border-strong); color: var(--foreground); }
.card .id {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--jade); margin-bottom: 8px; display: block;
}
.card h3 { margin: 0 0 8px; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.card p { color: var(--foreground-2); font-size: 13.5px; line-height: 1.55; margin: 0; }
.card-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }

/* ===== Pills / badges ===== */
.pill {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.04em; border: 1px solid var(--border-soft); color: var(--foreground-2);
}
.st-delivered   { background: var(--done-soft); color: var(--done); border-color: transparent; }
.st-in-progress { background: var(--jade-soft); color: var(--jade); border-color: transparent; }
.st-agreed      { background: var(--mock-soft); color: var(--mock); border-color: transparent; }
.st-proposed    { background: var(--plan-soft); color: var(--plan); border-color: transparent; }
.st-superseded  { background: var(--lock-soft); color: var(--lock); border-color: transparent; }
.prio-must   { color: var(--lock); border-color: var(--lock-soft); }
.prio-should { color: var(--plan); border-color: var(--plan-soft); }
.prio-could  { color: var(--muted); }
.pill.issues { color: var(--jade); border-color: var(--jade-edge); }

/* Issue severity / status / category / vendor */
.sev-critical { background: hsl(0 80% 60% / 0.16); color: hsl(0 85% 72%); border-color: transparent; }
.sev-high     { background: var(--lock-soft); color: var(--lock); border-color: transparent; }
.sev-medium   { background: var(--plan-soft); color: var(--plan); border-color: transparent; }
.sev-low      { color: var(--muted); }
.is-communicated-to-vendor { background: var(--mock-soft); color: var(--mock); border-color: transparent; }
.is-in-progress { background: var(--jade-soft); color: var(--jade); border-color: transparent; }
.is-mitigated   { background: var(--done-soft); color: var(--done); border-color: transparent; }
.is-resolved    { background: var(--done-soft); color: var(--done); border-color: transparent; }
.is-open        { color: var(--muted); }
.cat-security { color: hsl(0 85% 72%); border-color: hsl(0 80% 60% / 0.4); }
.cat-firmware { color: var(--plan); border-color: var(--plan-soft); }
.cat-sync-data { color: var(--mock); border-color: var(--mock-soft); }
.cat-process  { color: var(--muted); }
.vendor-flag { background: var(--lock-soft); color: var(--lock); border-color: transparent; letter-spacing: 0.08em; }
.dir-outbound { background: var(--jade-soft); color: var(--jade); border-color: transparent; }
.dir-inbound  { background: var(--plan-soft); color: var(--plan); border-color: transparent; }
.dir-internal { color: var(--muted); }

/* Communications — dated log rows */
.comm-row { display:flex; gap:18px; padding:16px 0; border-bottom:1px solid var(--border); }
.comm-row:last-child { border-bottom:0; }
.comm-date { flex:0 0 110px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.comm-date .mono { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--foreground); }
.comm-body { flex:1; min-width:0; }
.comm-body .iss-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.comm-body .iss-id { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--jade); }
.comm-body h4 { margin:0; font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; color:var(--foreground); }
@media (max-width:640px){ .comm-row{ flex-direction:column; gap:8px; } .comm-date{ flex-direction:row; align-items:center; } }

/* Issue rows */
.issue-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px; position: relative; overflow: hidden; }
.issue-card.crit::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background: hsl(0 80% 60%); }
.issue-card .iss-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.issue-card .iss-id { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--jade); }
.issue-card h4 { margin:0; font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; color:var(--foreground); flex:1; min-width:200px; }
.issue-card .iss-detail { color: var(--foreground-2); font-size: 13.5px; margin: 0; }
.issue-card .iss-refs { margin-top: 8px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }

/* ===== Roadmap lanes ===== */
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.lane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
.lane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.lane-count { font-family: 'JetBrains Mono', monospace; color: var(--muted); font-size: 12px; }
.lane-empty { color: var(--muted-2); margin: 0; font-size: 13px; }
.rcard {
  display: block; background: var(--surface-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
}
.rcard:hover { border-color: var(--jade-edge); color: var(--foreground); }
.rcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rcard-title { color: var(--foreground); font-size: 13.5px; line-height: 1.4; }
.rcard-meta { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

/* ===== Table ===== */
.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid th {
  text-align: left; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.grid td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: var(--surface-2); }
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }

/* ===== Lists ===== */
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }

/* ===== Detail panel + rendered markdown ===== */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.panel + .panel { margin-top: 16px; }
.panel h3 { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--jade); margin: 22px 0 6px; }
.meta-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 18px; }
.md { color: var(--foreground-2); }
.md p { margin: 0 0 10px; }
.md ul { margin: 0 0 10px; padding-left: 20px; }
.md li { margin: 3px 0; }
.md strong, .md b { color: var(--foreground); }
.md code, code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }

/* ===== Flash ===== */
.flash { padding: 12px 16px; border-radius: var(--radius); margin: 18px 0 0; font-size: 14px; border: 1px solid var(--border); }
.flash.notice { background: var(--jade-soft); border-color: var(--jade-edge); color: var(--foreground); }
.flash.alert  { background: var(--lock-soft); border-color: var(--lock); color: var(--foreground); }

/* ===== Auth (login) ===== */
.auth-wrap { min-height: 70vh; display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.auth-card h1 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; margin: 0 0 4px; }
.auth-card .lede { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
form.auth { display: grid; gap: 14px; }
form.auth label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; background: var(--surface-elev); border: 1px solid var(--border); color: var(--foreground);
  border-radius: var(--radius); padding: 11px 13px; font-size: 15px; font-family: 'DM Sans', sans-serif;
}
input:focus { outline: none; border-color: var(--jade); }
input[type="submit"], button.primary {
  background: var(--jade); color: hsl(210 20% 6%); border: 0; border-radius: var(--radius);
  padding: 11px 16px; font-weight: 600; font-size: 15px; cursor: pointer; font-family: 'DM Sans', sans-serif;
}
input[type="submit"]:hover, button.primary:hover { background: var(--jade-glow); }

/* ===== Bilingual toggle (Summary) ===== */
.lang-de { display: none; }
[data-lang="de"] .lang-en { display: none; }
[data-lang="de"] .lang-de { display: revert; }
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  background: transparent; border: 0; color: var(--muted); padding: 5px 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; cursor: pointer; letter-spacing: 0.04em;
}
.lang-switch button.active { background: var(--jade-soft); color: var(--jade); }
.summary-lede { font-size: 16px; color: var(--foreground-2); max-width: 760px; line-height: 1.6; margin: 0 0 8px; }
.progress-track { height: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 6px 0 4px; max-width: 520px; }
.progress-fill { height: 100%; background: var(--jade); }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 28px 0 48px; position: relative; z-index: 1; }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-footer span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }