/* ============================================================
   TOKENS
   ============================================================ */
:root {
  color-scheme: light;

  --paper:        #eef0f3;
  --surface:      #ffffff;
  --surface-2:    #f7f8fa;
  --surface-3:    #e9ecf1;
  --ink:          #11141a;
  --ink-2:        #4c5361;
  --ink-3:        #858d9b;
  --rule:         #e0e3e9;
  --rule-2:       #cdd2da;

  --accent:       #cb0d11;
  --accent-ink:   #ffffff;
  --accent-soft:  #fbecec;
  --accent-line:  #f2c3c4;

  /* De merkband bovenaan houdt in beide thema's dezelfde rode kleur. */
  --band:         #cb0d11;
  --band-ink:     #ffffff;
  --band-dim:     rgba(255,255,255,.72);
  --band-line:    rgba(255,255,255,.26);
  --band-fill:    rgba(255,255,255,.14);

  --good:         #0ca30c;
  --good-ink:     #006300;

  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4;

  --q0:#eef4fd; --q1:#cde2fb; --q2:#9ec5f4; --q3:#6da7ec; --q4:#3987e5; --q5:#256abf; --q6:#184f95;
  --q-lo-ink:#11141a; --q-hi-ink:#ffffff;

  --grid:         #e9ebef;
  --axis:         #cdd2da;

  --shadow-1: 0 1px 2px rgba(17,20,26,.05);
  --shadow-2: 0 1px 2px rgba(17,20,26,.06), 0 10px 28px -14px rgba(17,20,26,.28);

  --font-ui:   system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ed:   Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-data: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --rail-w: 226px;
  --band-h: 56px;
}

/* Licht is de basis. Donker geldt alleen bij een expliciete data-theme="dark". */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#0c0e12; --surface:#161a20; --surface-2:#1c2129; --surface-3:#232932;
  --ink:#f2f4f7; --ink-2:#a8b0bd; --ink-3:#79808d;
  --rule:#272d36; --rule-2:#333a45;
  --accent:#ee5357; --accent-ink:#1a0505; --accent-soft:#2b1113; --accent-line:#5b2225;
  --good:#0ca30c; --good-ink:#3fce3f;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
  --q0:#1b2029; --q1:#184f95; --q2:#256abf; --q3:#2a78d6; --q4:#3987e5; --q5:#6da7ec; --q6:#9ec5f4;
  --q-lo-ink:#a8b0bd; --q-hi-ink:#0c0e12;
  --grid:#232830; --axis:#333a45;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.8);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.eyebrow {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ============================================================
   SHELL
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: var(--band-h) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- rode merkband ---------- */
.masthead {
  grid-column: 1 / -1;
  position: sticky; top: 0; z-index: 40;
  background: var(--band);
  color: var(--band-ink);
  display: flex;
  align-items: center;
  padding-right: 22px;
}
.masthead-brand {
  width: var(--rail-w);
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding-left: 18px;
}
.brand-pencil {
  width: 11px; height: 11px;
  background: var(--band-ink);
  border-radius: 2px 2px 2px 8px;
  transform: rotate(-45deg);
  flex: none;
}
.brand-name { font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
.masthead-rule { width: 1px; height: 24px; background: var(--band-line); flex: none; }
.masthead-title {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding-left: 18px;
}
.masthead-spacer { flex: 1; }
.masthead .eyebrow { color: var(--band-dim); }

.nav { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px 9px 11px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 500;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item[aria-current="page"] {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}
.nav-item svg { flex: none; opacity: .8; }

.rail-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--rule); }
.who { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 650; flex: none;
}
.who-name { font-size: 12.5px; font-weight: 550; }
.who-role { font-size: 11px; color: var(--ink-3); }

.theme-toggle {
  margin-top: 12px; width: 100%;
  padding: 6px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11.5px; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--rule-2); color: var(--ink); }

.rail {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--band-h);
  height: calc(100vh - var(--band-h));
}

/* ------------------------------------------------------------ */
main { min-width: 0; display: flex; flex-direction: column; }

.search { position: relative; width: 280px; }
.search input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--band-line);
  border-radius: 7px;
  background: var(--band-fill);
  color: var(--band-ink);
  font-size: 13px;
}
.search input::placeholder { color: var(--band-dim); }
.search input:focus { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--band-dim); }

.view { display: none; flex: 1; min-height: 0; }
.view.is-active { display: block; }

/* ============================================================
   BUTTONS / CONTROLS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--rule-2);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12.5px; font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.08); }
.btn-ghost { border-color: transparent; background: none; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); }
.btn-ai { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.btn-ai:hover { background: var(--accent-soft); border-color: var(--accent); filter: none; }
.btn-sm { padding: 4px 8px; font-size: 11.5px; }

.field {
  padding: 6px 26px 6px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 7px;
  background: var(--surface);
  font-size: 12.5px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 51%, calc(100% - 10px) 51%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
textarea.field, input.field {
  cursor: text; appearance: auto; background-image: none; padding-right: 10px; width: 100%;
  font-family: var(--font-ui);
}

.chipbar { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 4px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 20px;
  background: var(--surface);
  font-size: 12px; color: var(--ink-2);
  cursor: pointer;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 550; }

.pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  white-space: nowrap;
}

/* ============================================================
   MASTER / DETAIL
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  height: calc(100vh - var(--band-h));
}
.pane-list {
  border-right: 1px solid var(--rule);
  background: var(--surface);
  display: flex; flex-direction: column; min-height: 0;
}
.pane-tools {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.pane-scroll { overflow-y: auto; flex: 1; min-height: 0; }
.pane-detail { overflow-y: auto; background: var(--paper); min-width: 0; }

.card-item {
  display: block; width: 100%; text-align: left;
  padding: 14px;
  border: 0; border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  background: none; cursor: pointer;
}
.card-item:hover { background: var(--surface-2); }
.card-item[aria-selected="true"] {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.card-date { font-family: var(--font-data); font-size: 10.5px; color: var(--ink-3); }
.card-title {
  font-family: var(--font-ed);
  font-size: 14.5px; line-height: 1.32; font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 8px;
}
.card-foot { font-family: var(--font-data); font-size: 11px; color: var(--ink-2); }
.card-foot.is-empty { color: var(--ink-3); }

/* ============================================================
   ARTICLE DETAIL
   ============================================================ */
.detail-wrap { padding: 24px 30px 60px; max-width: 1060px; }
.detail-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.detail-bar-spacer { flex: 1; }

.article-sheet {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
  padding: 30px 34px;
}
.art-title {
  font-family: var(--font-ed);
  font-size: 27px; line-height: 1.18; font-weight: 700;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0 0 12px;
}
.art-lead {
  font-family: var(--font-ed);
  font-size: 16.5px; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 62ch;
}
.art-byline {
  display: flex; gap: 14px; align-items: center;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-data); font-size: 11px; color: var(--ink-3);
}
.art-body p {
  font-family: var(--font-ed);
  font-size: 15.5px; line-height: 1.68;
  max-width: 65ch;
  margin: 0 0 15px;
}

.section-head {
  display: flex; align-items: center; gap: 10px;
  margin: 30px 0 12px;
  padding: 9px 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.section-head h3 {
  margin: 0; font-size: 13px; font-weight: 660;
  letter-spacing: .01em; color: var(--accent);
}
.section-head-spacer { flex: 1; }

.qcard {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-1);
}
.qcard-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.qcard-text { font-size: 14.5px; font-weight: 570; line-height: 1.4; flex: 1; text-wrap: balance; }
.qcard-n { font-family: var(--font-data); font-size: 11px; color: var(--ink-3); white-space: nowrap; padding-top: 4px; }
.qcard-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.qcard:hover .qcard-actions, .qcard:focus-within .qcard-actions { opacity: 1; }

.empty {
  border: 1px dashed var(--rule-2);
  border-radius: 10px;
  padding: 30px 24px;
  text-align: center;
  background: var(--surface-2);
}
.empty-title { font-weight: 600; margin-bottom: 4px; }
.empty-body { color: var(--ink-3); font-size: 13px; margin-bottom: 16px; max-width: 44ch; margin-inline: auto; }
.empty-actions { display: flex; gap: 8px; justify-content: center; }

/* ============================================================
   OPINION BAND
   ============================================================ */
.band { display: flex; gap: 2px; height: 26px; margin-bottom: 9px; }
.band-seg {
  min-width: 3px;
  display: grid; place-items: center;
  font-family: var(--font-data); font-size: 11px; font-weight: 600;
  color: #fff;
  overflow: hidden;
  cursor: default;
}
.band-seg:first-child { border-radius: 5px 2px 2px 5px; }
.band-seg:last-child  { border-radius: 2px 5px 5px 2px; }
.band-seg:only-child  { border-radius: 5px; }
.band-seg.ink-dark { color: #11141a; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.legend-val { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.legend-n { font-family: var(--font-data); font-size: 11px; color: var(--ink-3); }

/* ============================================================
   QUESTIONS VIEW
   ============================================================ */
.topic-group { border-bottom: 1px solid var(--rule); }
.topic-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 14px;
  background: var(--surface-2); border: 0; cursor: pointer;
  text-align: left;
}
.topic-head:hover { background: var(--surface-3); }
.topic-caret { transition: transform .15s; color: var(--ink-3); flex: none; }
.topic-group.is-open .topic-caret { transform: rotate(90deg); }
.topic-name { font-weight: 620; font-size: 13px; }
.topic-n { margin-left: auto; font-family: var(--font-data); font-size: 11px; color: var(--ink-3); }
.topic-body { display: none; }
.topic-group.is-open .topic-body { display: block; }

.q-item {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px 12px 28px;
  border: 0; border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  background: none; cursor: pointer;
}
.q-item:last-child { border-bottom: 0; }
.q-item:hover { background: var(--surface-2); }
.q-item[aria-selected="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.q-item-text { font-size: 13px; line-height: 1.38; font-weight: 520; margin-bottom: 6px; }
.q-item-meta { font-family: var(--font-data); font-size: 10.5px; color: var(--ink-3); }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  margin: -20px -22px 16px; padding: 12px 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  border-radius: 9px 9px 0 0;
}
.panel-head h3 { margin: 0; font-size: 13px; font-weight: 640; }
.panel-head-spacer { flex: 1; }

.q-detail-title {
  font-size: 21px; font-weight: 620; line-height: 1.3; letter-spacing: -.012em;
  text-wrap: balance; margin: 0 0 20px; max-width: 30ch;
}

.opt-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--grid);
}
.opt-row:last-child { border-bottom: 0; }
.opt-label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.opt-mark { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.opt-bar-wrap { grid-column: 1 / -1; }
.opt-bar-track { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.opt-bar-fill { height: 100%; border-radius: 4px; }
.opt-val { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 620; font-size: 13px; }
.opt-n { font-family: var(--font-data); font-size: 11px; color: var(--ink-3); margin-left: 6px; }

.usedon-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 7px;
  background: none; border: 0; text-align: left; cursor: pointer; width: 100%;
}
.usedon-row:hover { background: var(--surface-2); }
.usedon-title { font-family: var(--font-ed); font-size: 13.5px; font-weight: 600; flex: 1; line-height: 1.35; }
.usedon-n { font-family: var(--font-data); font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* ============================================================
   ANALYTICS
   ============================================================ */
.an-wrap { padding: 22px 30px 60px; max-width: 1200px; }
.scopebar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  margin-bottom: 18px;
}
.scopebar-spacer { flex: 1; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 15px 17px; box-shadow: var(--shadow-1);
}
.kpi-label { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.kpi-value { font-family: var(--font-data); font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.delta-up { color: var(--good-ink); font-family: var(--font-data); font-weight: 620; }
.delta-flat { color: var(--ink-3); font-family: var(--font-data); font-weight: 620; }
.spark { display: block; margin-top: 10px; }

.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
@media (max-width: 1080px) { .grid-2 { grid-template-columns: minmax(0,1fr); } }

.chart-note { font-size: 12px; color: var(--ink-3); margin: -4px 0 14px; max-width: 62ch; line-height: 1.5; }

.xtab-scroll { overflow-x: auto; }
.xtab { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.xtab th {
  font-weight: 550; color: var(--ink-2); text-align: left; padding: 6px 8px;
  font-size: 11.5px; line-height: 1.25;
}
.xtab thead th { vertical-align: bottom; max-width: 108px; }
.xtab tbody th { max-width: 180px; padding-right: 12px; }
.xtab td {
  padding: 10px 8px; border-radius: 4px; text-align: center;
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 78px;
}
.xtab-corner {
  color: var(--ink-3) !important;
  font-size: 10.5px !important;
  font-family: var(--font-data);
  white-space: nowrap;
  max-width: none !important;
}

.seq-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }
.seq-ramp { display: flex; gap: 2px; }
.seq-step { width: 24px; height: 8px; border-radius: 2px; }

.linechart { width: 100%; height: auto; display: block; }
.lc-grid { stroke: var(--grid); stroke-width: 1; }
.lc-axis { stroke: var(--axis); stroke-width: 1; }
.lc-tick { fill: var(--ink-3); font-family: var(--font-data); font-size: 10px; }
.lc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lc-end { stroke: var(--surface); stroke-width: 2; }

/* ============================================================
   MODAL / DRAWER
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(17,20,26,.42);
  display: none;
  backdrop-filter: blur(2px);
}
.scrim.is-open { display: block; }

.modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(600px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, calc(100vw - 40px));
  transform: none; left: auto;
  border-radius: 0; border-right: 0; border-top: 0; border-bottom: 0;
  max-height: none;
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  background: var(--band); color: var(--band-ink);
}
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 640; }
.modal-head .x-btn { color: var(--band-dim); }
.modal-head .x-btn:hover { background: rgba(255,255,255,.16); color: var(--band-ink); }
.modal-head-spacer { flex: 1; }
.modal-body { padding: 18px; overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; gap: 8px; align-items: center;
  padding: 13px 18px; border-top: 1px solid var(--rule); background: var(--surface-2);
}
.modal-foot-spacer { flex: 1; }
.x-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 0; background: none;
  color: var(--ink-3); cursor: pointer; display: grid; place-items: center; flex: none;
}
.x-btn:hover { background: var(--surface-3); color: var(--ink); }

.form-row { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.opt-editor { display: flex; flex-direction: column; gap: 6px; }
.opt-edit-row { display: flex; align-items: center; gap: 7px; }
.opt-edit-row .field { flex: 1; }
.opt-handle { color: var(--ink-3); font-family: var(--font-data); font-size: 11px; width: 14px; flex: none; }
.opt-add { align-self: flex-start; margin-top: 2px; }

.sugg {
  border: 1px solid var(--rule); border-radius: 9px;
  padding: 14px; margin-bottom: 9px; background: var(--surface);
}
.sugg.is-added { border-color: var(--good); background: color-mix(in srgb, var(--good) 6%, var(--surface)); }
.sugg-text { font-size: 13.5px; font-weight: 560; line-height: 1.4; margin-bottom: 9px; text-wrap: balance; }
.sugg-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.sugg-opt {
  font-size: 11.5px; padding: 3px 8px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink-2);
}
.sugg-foot { display: flex; align-items: center; gap: 7px; justify-content: flex-end; }

.thinking { display: flex; align-items: center; gap: 9px; padding: 30px 0; justify-content: center; color: var(--ink-3); font-size: 13px; }
.thinking-dots { display: flex; gap: 4px; }
.thinking-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: bounce 1.1s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: .16s; }
.thinking-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes bounce { 0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

.pick-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px; border: 1px solid var(--rule); border-radius: 8px;
  margin-bottom: 6px; cursor: pointer; background: var(--surface);
}
.pick-row:hover { border-color: var(--ink-3); }
.pick-row[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pick-box {
  width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--rule-2);
  flex: none; margin-top: 2px; display: grid; place-items: center;
}
.pick-row[aria-pressed="true"] .pick-box { background: var(--accent); border-color: var(--accent); }
.pick-check { display: none; color: #fff; }
.pick-row[aria-pressed="true"] .pick-check { display: block; }
.pick-text { font-size: 13px; line-height: 1.4; font-weight: 520; }
.pick-meta { font-family: var(--font-data); font-size: 10.5px; color: var(--ink-3); margin-top: 4px; display: block; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 520;
  box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

.protoflag {
  position: fixed; right: 0; bottom: 0; z-index: 90;
  font-family: var(--font-data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 5px 12px; border-radius: 6px 0 0 0; opacity: .8;
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); }
  .masthead { grid-column: 1; padding-right: 14px; }
  .masthead-brand { width: auto; padding-left: 14px; }
  .masthead-rule, .masthead-title { display: none; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  .nav { flex-direction: row; padding: 8px; }
  .rail-foot { display: none; }
  .split { grid-template-columns: 1fr; height: auto; }
  .pane-list { max-height: 46vh; border-right: 0; border-bottom: 1px solid var(--rule); }
  .search { width: 160px; }
  .detail-wrap, .an-wrap { padding: 18px 16px 50px; }
  .article-sheet { padding: 22px 18px; }
}