/* =========================================================================
   QUANTUM ADVISORS - desk theme

   Two decisions drive everything here:

   1. Every number is monospaced and tabular-aligned. On a real blotter you
      read down a column, and proportional digits make that impossible. This
      is the typographic signature of the whole interface.
   2. No shadows, no gradients, hairline rules. Depth is communicated by
      surface value and by 1px lines, the way a dense data screen does it.
      Ornament costs legibility and buys nothing at this density.
   ========================================================================= */

:root {
  --ground:    #0E151E;
  --panel:     #16202C;
  --panel-2:   #1C2937;
  --panel-3:   #22313F;
  --rule:      #26374A;
  --rule-soft: #1E2C3A;

  --ink:       #E6EDF5;
  --ink-dim:   #93A7BC;
  --ink-mute:  #62778D;

  --signal:    #F2B035;   /* desk accent: headline figures, active nav */
  --signal-dk: #C08D22;
  --long:      #2FB37E;
  --short:     #E05C48;
  --cool:      #4E9FD1;
  --violet:    #9186F2;   /* quantum / optimiser surfaces */

  --long-bg:   rgba(47,179,126,0.10);
  --short-bg:  rgba(224,92,72,0.10);
  --signal-bg: rgba(242,176,53,0.10);
  --cool-bg:   rgba(78,159,209,0.10);
  --violet-bg: rgba(145,134,242,0.10);

  --display: 'IBM Plex Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius: 3px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600;
  letter-spacing: -0.01em; margin: 0 0 0.5em; color: var(--ink);
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.98rem; }

a { color: var(--cool); text-decoration: none; cursor: pointer; }
a:hover { color: var(--signal); text-decoration: underline; }

.container { max-width: 1220px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ---- Micro-label: the uppercase letterspaced caption used on every panel.
   This is the desk vernacular - short, flat, all-caps field names. ---- */
.label {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}

/* ---- Numerics. Applied to every figure in the app. ---- */
.num, td.num, .metric-value, .tape-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}
.pos { color: var(--long); }
.neg { color: var(--short); }
.flat { color: var(--ink-dim); }

/* =========================== NAV =========================== */
.navbar {
  background: var(--panel); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.navbar .container {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; min-height: 54px;
}
.navbar-brand {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700;
  color: var(--ink); letter-spacing: 0.01em; display: flex;
  align-items: baseline; gap: 8px;
}
.navbar-brand:hover { color: var(--signal); text-decoration: none; }
.navbar-brand .mark {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--signal); border: 1px solid var(--signal-dk);
  padding: 2px 5px; border-radius: 2px; text-transform: uppercase;
}
.navbar-links { display: flex; gap: 1px; align-items: center; flex-wrap: wrap; }
.navbar-links a {
  color: var(--ink-dim); padding: 7px 11px; border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 500;
}
.navbar-links a:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; }
.navbar-links a.active { color: var(--ground); background: var(--signal); font-weight: 600; }
.navbar-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  color: var(--ink); font-size: 1.1rem; cursor: pointer;
  border-radius: var(--radius); padding: 4px 10px;
}
@media (max-width: 1020px) {
  .navbar-toggle { display: block; }
  .navbar-links { display: none; flex-direction: column; width: 100%;
                  align-items: stretch; padding-bottom: 10px; }
  .navbar-links.open { display: flex; }
  .navbar-links a { padding: 11px 8px; }
}

main { padding: 22px 0 40px; }

/* =========================== PANELS =========================== */
.card {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.card-tight { padding: 14px 16px; }
.card-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft);
}
.card-header h1, .card-header h2, .card-header h3 { margin: 0; }
.card-accent { border-left: 2px solid var(--signal); }
.card-violet { border-left: 2px solid var(--violet); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-sidebar { grid-template-columns: 2fr 1fr; }
@media (max-width: 980px) {
  .grid-3, .grid-4, .grid-sidebar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4, .grid-sidebar { grid-template-columns: 1fr; }
}

/* ---- SIGNATURE: the regime tape.
   A horizontal strip of segmented state cells across the top of the desk,
   the way a risk monitor shows environment before it shows positions. ---- */
.tape {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; margin-bottom: 16px;
}
.tape-cell {
  padding: 12px 14px; border-right: 1px solid var(--rule-soft);
  position: relative; min-width: 0;
}
.tape-cell:last-child { border-right: none; }
.tape-cell .label { display: block; margin-bottom: 5px; }
.tape-value {
  font-size: 1.32rem; font-weight: 500; line-height: 1.1;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tape-sub { font-size: 0.73rem; color: var(--ink-mute); margin-top: 3px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-cell.state-hot   { background: var(--short-bg); }
.tape-cell.state-cool  { background: var(--cool-bg); }
.tape-cell.state-good  { background: var(--long-bg); }
.tape-cell.state-warn  { background: var(--signal-bg); }
@media (max-width: 980px) { .tape { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tape { grid-template-columns: 1fr; } }

/* ---- Metric tiles ---- */
.metric { padding: 2px 0; }
.metric .label { display: block; margin-bottom: 4px; }
.metric-value { font-size: 1.28rem; font-weight: 500; line-height: 1.15; }
.metric-value.sm { font-size: 1.02rem; }
.metric-note { font-size: 0.74rem; color: var(--ink-mute); margin-top: 2px; }
.metric-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 16px 20px;
}

/* =========================== TABLES =========================== */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
thead th {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody td {
  padding: 9px 10px; border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }
td.num, th.num { text-align: right; }
td.sym {
  font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink);
}

/* Inline bar used in the risk-share column. Shows the shape of a distribution
   without spending a whole chart on it. */
.microbar { display: block; height: 3px; background: var(--rule); border-radius: 2px;
            margin-top: 4px; overflow: hidden; }
.microbar span { display: block; height: 100%; background: var(--signal); }
.microbar span.over { background: var(--short); }

/* =========================== BUTTONS =========================== */
.btn {
  display: inline-block; border: 1px solid transparent; border-radius: var(--radius);
  padding: 8px 16px; font-family: var(--sans); font-size: 0.87rem;
  font-weight: 600; cursor: pointer; text-align: center;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--signal); color: #16202C; }
.btn-primary:hover { background: #ffc555; color: #16202C; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-outline:hover { border-color: var(--signal); color: var(--signal); }
.btn-violet { background: var(--violet); color: #12101f; }
.btn-violet:hover { background: #a79dff; color: #12101f; }
.btn-danger { background: transparent; color: var(--short); border-color: var(--short); }
.btn-danger:hover { background: var(--short-bg); }
.btn-sm { padding: 4px 10px; font-size: 0.76rem; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* =========================== FORMS =========================== */
label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: var(--ink-dim); margin-bottom: 5px;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%; background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 8px 11px; font-family: var(--sans); font-size: 0.92rem;
  margin-bottom: 14px;
}
input[type=number], input.mono { font-family: var(--mono); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 1px var(--signal-dk);
}
textarea { min-height: 96px; resize: vertical; font-family: var(--sans); }
.form-help {
  font-size: 0.76rem; color: var(--ink-mute);
  margin: -10px 0 14px;
}
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
@media (max-width: 680px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } }
.inline-form { display: flex; gap: 8px; align-items: flex-start; }
.inline-form input { margin-bottom: 0; }

/* =========================== BADGES / ALERTS =========================== */
.badge {
  display: inline-block; font-family: var(--mono); font-size: 0.66rem;
  font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px; border: 1px solid var(--rule);
  color: var(--ink-dim); white-space: nowrap;
}
.badge-signal { color: var(--signal); border-color: var(--signal-dk); background: var(--signal-bg); }
.badge-long   { color: var(--long); border-color: var(--long); background: var(--long-bg); }
.badge-short  { color: var(--short); border-color: var(--short); background: var(--short-bg); }
.badge-cool   { color: var(--cool); border-color: var(--cool); background: var(--cool-bg); }
.badge-violet { color: var(--violet); border-color: var(--violet); background: var(--violet-bg); }

.alert {
  border: 1px solid var(--rule); border-left-width: 2px;
  border-radius: var(--radius); padding: 11px 15px; margin-bottom: 14px;
  font-size: 0.89rem;
}
.alert-success { border-left-color: var(--long); background: var(--long-bg); }
.alert-danger  { border-left-color: var(--short); background: var(--short-bg); }
.alert-warn    { border-left-color: var(--signal); background: var(--signal-bg); }

/* The synthetic-data warning. Deliberately loud: a fabricated number that
   announces itself is a teaching tool; one that does not is a liability. */
.synthetic-banner {
  border: 1px solid var(--signal-dk); border-radius: var(--radius);
  background: var(--signal-bg); padding: 10px 14px; margin-bottom: 16px;
  font-size: 0.83rem; color: var(--ink);
  display: flex; gap: 10px; align-items: flex-start;
}
.synthetic-banner .label { color: var(--signal); flex-shrink: 0; padding-top: 2px; }

/* =========================== PROSE BLOCKS =========================== */
.report-box {
  background: var(--ground); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: 15px 17px;
  white-space: pre-wrap; font-size: 0.89rem; line-height: 1.65;
  color: var(--ink-dim);
}
.report-box strong, .report-box b { color: var(--ink); }
.muted { color: var(--ink-mute); }
.dim { color: var(--ink-dim); }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.small { font-size: 0.82rem; }
.tiny { font-size: 0.74rem; }

pre {
  background: var(--ground); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: 13px 15px; overflow-x: auto;
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-dim);
  line-height: 1.6;
}
code { font-family: var(--mono); font-size: 0.86em; color: var(--signal); }
pre code { color: inherit; }

/* =========================== CHARTS =========================== */
.chart-wrap { position: relative; width: 100%; }
canvas { display: block; width: 100%; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.legend span { display: flex; align-items: center; gap: 6px;
               font-size: 0.75rem; color: var(--ink-mute); }
.legend i { width: 10px; height: 2px; display: block; border-radius: 1px; }

/* Correlation heat grid */
.corr-grid { overflow-x: auto; }
.corr-grid table { font-size: 0.78rem; }
.corr-grid td.cell {
  text-align: center; font-family: var(--mono); padding: 7px 8px;
  border: 1px solid var(--ground);
}

/* =========================== AUTH =========================== */
.auth-shell {
  display: flex; justify-content: center; align-items: flex-start;
  min-height: 70vh; padding-top: 40px;
}
.auth-card {
  width: 100%; max-width: 420px; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px;
}
.auth-card h1 { margin-bottom: 4px; }
.auth-subtitle { color: var(--ink-mute); font-size: 0.87rem; margin: 0 0 22px; }
.demo-hint {
  margin-top: 20px; padding: 11px 13px; background: var(--ground);
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  font-size: 0.78rem; color: var(--ink-mute); font-family: var(--mono);
  line-height: 1.7;
}
.demo-hint code { color: var(--signal); }

/* =========================== ASSESSMENT =========================== */
.q-block {
  border-bottom: 1px solid var(--rule-soft); padding: 16px 0;
}
.q-block:last-child { border-bottom: none; }
.q-block.answered { opacity: 0.72; }
.q-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; }
.q-num {
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-mute);
  min-width: 26px;
}
.q-text { font-size: 0.95rem; }
.q-reverse { color: var(--signal); font-size: 0.7rem; font-family: var(--mono); }
.scale { display: flex; gap: 6px; align-items: center; margin-left: 38px; flex-wrap: wrap; }
.scale-anchor { font-size: 0.72rem; color: var(--ink-mute); min-width: 92px; }
.scale-anchor.right { text-align: right; }
.scale label {
  margin: 0; cursor: pointer; border: 1px solid var(--rule);
  border-radius: var(--radius); width: 40px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.88rem; color: var(--ink-dim);
  background: var(--ground); transition: all .1s ease;
}
.scale label:hover { border-color: var(--signal); color: var(--signal); }
.scale input { display: none; }
.scale input:checked + label {
  background: var(--signal); color: #16202C; border-color: var(--signal);
  font-weight: 600;
}
@media (max-width: 620px) {
  .scale { margin-left: 0; }
  .scale-anchor { min-width: 0; flex-basis: 100%; }
  .scale-anchor.right { text-align: left; }
}

.progress-track {
  height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden;
}
.progress-fill { height: 100%; background: var(--signal); transition: width .2s ease; }
.sticky-progress {
  position: sticky; top: 54px; z-index: 30; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 11px 16px; margin-bottom: 16px;
}

/* =========================== CHAT =========================== */
.chat-window {
  height: 480px; overflow-y: auto; background: var(--ground);
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px;
}
.msg { margin-bottom: 14px; max-width: 82%; }
.msg .label { display: block; margin-bottom: 4px; }
.msg-body {
  padding: 11px 14px; border-radius: var(--radius);
  white-space: pre-wrap; font-size: 0.88rem; line-height: 1.6;
}
.msg-user { margin-left: auto; }
.msg-user .msg-body { background: var(--panel-3); color: var(--ink); }
.msg-user .label { text-align: right; }
.msg-assistant .msg-body {
  background: var(--panel); border-left: 2px solid var(--signal); color: var(--ink-dim);
}
.msg-safety .msg-body { border-left-color: var(--short); background: var(--short-bg); }
.chat-input { display: flex; gap: 10px; align-items: flex-end; }
.chat-input textarea { margin-bottom: 0; min-height: 62px; }
.typing { color: var(--ink-mute); font-size: 0.82rem; font-style: italic; }

/* =========================== MODULE / CURRICULUM =========================== */
.module-card {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 17px 19px;
  display: flex; flex-direction: column; gap: 9px;
}
.module-card h3 { margin: 0; }
.module-card p { margin: 0; font-size: 0.85rem; color: var(--ink-mute); }
.module-card .btn { margin-top: auto; align-self: flex-start; }
.module-section { margin-top: 22px; }
.module-section h3 {
  font-size: 0.95rem; color: var(--signal); margin-bottom: 7px;
}
.module-section p { margin: 0; color: var(--ink-dim); font-size: 0.92rem; }
.exercise-box {
  border: 1px solid var(--signal-dk); background: var(--signal-bg);
  border-radius: var(--radius); padding: 14px 16px; margin-top: 26px;
}
.exercise-box .label { color: var(--signal); display: block; margin-bottom: 6px; }

/* =========================== STACK / COST TABLE =========================== */
.stack-row {
  display: grid; grid-template-columns: 150px 1fr 1fr 100px;
  gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.stack-row:last-child { border-bottom: none; }
.stack-row .layer { font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.stack-row .theirs { color: var(--ink-mute); font-size: 0.84rem; }
.stack-row .ours { color: var(--ink-dim); font-size: 0.84rem; }
.stack-row .cost { text-align: right; font-family: var(--mono); font-size: 0.86rem; }
@media (max-width: 900px) {
  .stack-row { grid-template-columns: 1fr; gap: 4px; }
  .stack-row .cost { text-align: left; }
}

/* Architecture flow strip on the data-layer page */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 6px 0 18px; }
.flow-step {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--ground); padding: 12px 13px;
}
.flow-step .label { display: block; color: var(--cool); margin-bottom: 5px; }
.flow-step p { margin: 0; font-size: 0.78rem; color: var(--ink-mute); line-height: 1.5; }
@media (max-width: 980px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } }

/* Provider status list */
.provider-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap;
}
.provider-row:last-child { border-bottom: none; }
.provider-row .name { font-weight: 600; font-size: 0.9rem; min-width: 190px; }
.provider-row .note { font-size: 0.78rem; color: var(--ink-mute); flex: 1; min-width: 200px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-on { background: var(--long); }
.dot-off { background: var(--ink-mute); }

/* =========================== FOOTER =========================== */
footer {
  border-top: 1px solid var(--rule); margin-top: 40px;
  padding: 22px 20px 34px; text-align: center;
}
.footer-main { font-size: 0.83rem; color: var(--ink-mute); margin: 0 0 8px; }
.footer-notice {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim);
  max-width: 780px; margin: 0 auto 10px; line-height: 1.65;
}
.footer-links { font-size: 0.8rem; color: var(--ink-mute); margin: 0; }

/* =========================== MOTION =========================== */
/* One deliberate micro-interaction: values flash when they refresh, so a
   change is visible without the user hunting for it. */
@keyframes valueflash {
  0%   { background: var(--signal-bg); }
  100% { background: transparent; }
}
.flash { animation: valueflash .6s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Visible keyboard focus everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, label:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px;
}