:root {
  /* ---- surfaces: warm, paper-feeling — no true grays, every neutral is off-white/sand ---- */
  --bg: #f4ede0;        /* cream — page background */
  --bg-2: #fbf7f0;      /* warm white — cards / raised surfaces */
  --bg-3: #eae1d2;      /* sand — hover / pressed surface, chips */
  --bg-hover: #eae1d2;
  --line: #e4dcce;      /* default border */
  --line-2: #d5c9b5;    /* stronger / hover border */

  /* ---- text tiers: ink-green, never pure black ---- */
  --text: #2e3a33;      /* primary */
  --muted: #5c5f52;     /* secondary */
  --faint: #938b7c;     /* hint / placeholder */

  /* ---- brand ---- */
  --accent: #c9502e;        /* terracotta — primary actions, logo, active links (NOT body text) */
  --accent-2: #b0421f;      /* darker terracotta — primary hover / pressed */
  --accent-soft: rgba(201, 80, 46, 0.12); /* terracotta tint — active-link bg, pills */
  --on-accent: #fbf7f0;     /* warm-white text on terracotta/red fills */
  --honey: #e0a23d;         /* accent, used sparingly — highlights, hover/active underlines */
  --stone: #8a7f6e;         /* muted brand neutral — icons, dividers, de-emphasized chips */

  /* ---- semantic states: deliberately MUTED (a warm margin note, not an alarm) ---- */
  --pass: #5c7a33;   --pass-bg: #edf0e4;
  --warn: #b07a1e;   --warn-bg: #faf0dc;
  --fail: #c0421d;   --fail-bg: #f8e6df;   /* terracotta family, never hostile pure red */
  --pending: #8a7f6e;       /* stone */

  /* ---- role badges (spec didn't define these; warm-family stand-ins — tune freely) ---- */
  --role-admin: #b07a1e;    /* amber */
  --role-owner: #c9502e;    /* terracotta */
  --role-contrib: #6e6151;  /* deep stone */

  /* ---- light-mode shadows: soft, warm, low-opacity ink ---- */
  --shadow: 0 8px 28px rgba(46, 58, 51, 0.12);
  --shadow-sm: 0 2px 10px rgba(46, 58, 51, 0.08);
  --r: 12px;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
/* The `hidden` attribute must win over component `display` rules (.modal-backdrop,
   .login-screen, etc. set display:flex, which would otherwise override [hidden]). */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); display: flex; flex-direction: column; overflow: hidden; }

/* App shell: a height-constrained flex column so views/editor panes scroll
   internally instead of ballooning past the clipped body (was the dead-scroll bug). */
#app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.shell { flex: 1; min-height: 0; display: flex; }
.content { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* ---- project sidebar ---- */
.projnav { flex: none; width: 212px; background: var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; overflow: hidden; transition: width 0.16s ease, padding 0.16s ease; }
.projnav.collapsed { width: 62px; padding-left: 8px; padding-right: 8px; }

.pn-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.pn-proj { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; letter-spacing: -0.2px; color: var(--text); word-break: break-word; }
.pn-toggle { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.pn-toggle:hover { border-color: var(--accent); color: var(--accent); }
.pn-links { display: flex; flex-direction: column; gap: 2px; }
.pn-link { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: none; white-space: nowrap; }
.pn-link:hover { background: var(--bg-3); color: var(--text); }
.pn-link.active { background: var(--accent-soft); color: var(--accent); }
.pn-ico { font-size: 12px; width: 15px; text-align: center; opacity: 0.85; flex: none; }
.pn-back { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 9px 11px; font-size: 12.5px; font-weight: 600; color: var(--faint); cursor: pointer; text-decoration: none; border-radius: 9px; white-space: nowrap; }
.pn-back:hover { color: var(--accent); background: var(--bg-3); }

/* collapsed rail: icons only, labels become tooltips (title attr) */
.projnav.collapsed .pn-proj, .projnav.collapsed .pn-label { display: none; }
.projnav.collapsed .pn-head { justify-content: center; padding: 2px 0 12px; }
.projnav.collapsed .pn-link, .projnav.collapsed .pn-back { justify-content: center; padding: 9px 0; gap: 0; }
.projnav.collapsed .pn-ico { width: auto; font-size: 14px; }

.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }

/* ---- app bar (global nav) ---- */
.appbar { display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 54px; background: var(--bg-2); border-bottom: 1px solid var(--line); flex: none; }

/* brand lockup: terracotta "K" mark + wordmark */
.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.brand-mark { width: 27px; height: 27px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); flex: none; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }

/* breadcrumb: divided from the brand by a hairline (collapses when empty) */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); flex-wrap: wrap; border-left: 1px solid var(--line); padding-left: 14px; }
.crumbs:empty { border-left: none; padding-left: 0; }
.crumbs a { color: var(--muted); text-decoration: none; cursor: pointer; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: 0.5; }
.crumbs .cur { color: var(--text); font-weight: 600; }

/* ---- views ---- */
.view { flex: 1; min-height: 0; display: none; }
.view.active { display: flex; flex-direction: column; }
.list-view.active { display: block; overflow-y: auto; padding: 24px 28px 60px; }
.editor-view.active { display: flex; flex-direction: column; }
.editorbar { display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); flex: none; }

.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 4px 0 22px; flex-wrap: wrap; }
.view-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 0; }
.view-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); max-width: 560px; line-height: 1.55; }

/* ---- welcome hero + stats strip (projects landing) — centered ---- */
.welcome { text-align: center; margin: 26px 0 36px; }
.welcome .welcome-h { font-size: 60px; font-weight: 800; letter-spacing: -2px; line-height: 1.05; margin: 0; }
.welcome .wave { display: inline-block; transform-origin: 70% 80%; animation: wave 1.8s ease-in-out 0.4s 2; }
@keyframes wave { 0%, 55%, 100% { transform: rotate(0); } 12% { transform: rotate(14deg); } 24% { transform: rotate(-8deg); } 36% { transform: rotate(14deg); } 48% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .welcome .wave { animation: none; } }
.welcome-msg { margin: 16px auto 0; font-size: 30px; font-weight: 500; color: var(--muted); max-width: 760px; line-height: 1.35; }

.stats-strip { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.stats-strip .stat b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.stats-strip .sdot { color: var(--line-2); }

.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--faint); font-weight: 700; margin: 0 0 14px; }

/* ---- header project switcher (the "Projects" breadcrumb dropdown) ---- */
.ps { position: relative; display: inline-flex; }
.ps-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 7px; }
.ps-btn:hover { color: var(--accent); background: var(--bg-3); }
.ps-caret { font-size: 9px; opacity: 0.7; }
.ps-pop { position: absolute; left: 0; top: calc(100% + 6px); min-width: 234px; max-width: 320px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 60; }
.ps-loading { padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.ps-sec { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); font-weight: 700; padding: 8px 10px 4px; }
.ps-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: var(--sans); }
.ps-item:hover { background: var(--bg-3); }
.ps-item.active { color: var(--accent); }
.ps-ico { width: 22px; text-align: center; font-size: 12px; color: var(--muted); flex: none; }
.ps-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--mk, var(--accent)); color: var(--on-accent); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.ps-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-check { color: var(--accent); font-weight: 800; }
.ps-divider { height: 1px; background: var(--line); margin: 6px 4px; }
.ps-item.ps-new { color: var(--accent); }
.ps-item.ps-new:hover { background: var(--accent-soft); }
.head-actions { display: flex; gap: 8px; }
/* secondary buttons: transparent/cream fill, ink-green text, default border */
button.ghost, .head-actions button:not(.primary), .form-actions button:not(.primary) { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 600; padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }
button.ghost:hover, .head-actions button:not(.primary):hover { border-color: var(--accent); color: var(--accent); }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; max-width: 1180px; }
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 16px 18px; }
.card.click { cursor: pointer; transition: border-color 0.15s, transform 0.05s; }
.card.click:hover { border-color: var(--accent); }
.card .ct { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; word-break: break-word; }
.card .cmeta { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* project cards: monogram + name/role, format tags, footer stat + open affordance */
.proj-card { display: flex; flex-direction: column; gap: 14px; min-height: 158px; padding: 18px; }
.proj-card .ct { margin: 0; }
.proj-top { display: flex; align-items: center; gap: 12px; }
.proj-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--mk, var(--accent)); color: var(--on-accent); font-size: 17px; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-sm); }
.proj-id { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.proj-formats { display: flex; flex-wrap: wrap; gap: 5px; }
.proj-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
.proj-stat { font-size: 12.5px; color: var(--muted); }
.proj-stat b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.proj-go { font-size: 12.5px; font-weight: 700; color: var(--faint); transition: color 0.12s, transform 0.12s; }
.proj-card:hover .proj-go { color: var(--accent); transform: translateX(2px); }

/* dashed "new project" CTA card — keeps the grid from looking empty */
.add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 158px; background: transparent; border: 1.5px dashed var(--line-2); box-shadow: none; color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--sans); transition: border-color 0.15s, color 0.15s, background 0.15s; }
.add-card:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.add-plus { font-size: 30px; font-weight: 300; line-height: 1; }
.tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 999px; background: var(--bg-3); color: var(--muted); border: 1px solid var(--line); }
.tag.ok { background: var(--pass-bg); color: var(--pass); border-color: transparent; }
.tag.muted { background: var(--bg-3); color: var(--pending); }
.tag.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* ---- posts list (CMS-style stacked rows) ---- */
.post-list { display: flex; flex-direction: column; gap: 10px; max-width: 940px; }
.post-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 15px 18px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color 0.15s, box-shadow 0.15s, transform 0.04s; }
.post-row:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.post-row:active { transform: translateY(1px); }
.post-row .pr-main { flex: 1; min-width: 0; }
.post-row .pr-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 7px; line-height: 1.35; }
.post-row .pr-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-row .pr-time { font-size: 12px; color: var(--faint); }
.post-row .pr-by { font-size: 12px; color: var(--faint); }

/* per-post score pills (Judgement / Knowledge / Mechanical) */
.pr-scores { display: flex; gap: 6px; flex: none; }
.pscore { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; padding: 5px 8px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); }
.pscore .ps-num { font-size: 15px; font-weight: 800; color: var(--sc, var(--muted)); line-height: 1; font-variant-numeric: tabular-nums; }
.pscore .ps-lbl { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.pscore.dim { background: transparent; border-style: dashed; }
.pscore.dim .ps-num { color: var(--pending); }

.post-row .pr-go { color: var(--faint); font-size: 20px; line-height: 1; transition: transform 0.12s, color 0.12s; }
.post-row:hover .pr-go { color: var(--accent); transform: translateX(2px); }
.pr-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* destructive: icon button + inline confirm (shared by posts + project delete) */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--faint); cursor: pointer; padding: 6px; border-radius: 8px; line-height: 0; }
.icon-btn:hover { background: var(--bg-3); color: var(--muted); }
.icon-btn.danger:hover { color: var(--fail); background: var(--fail-bg); }
.confirm-q { font-size: 12.5px; color: var(--muted); }
.confirm-q b { color: var(--text); }
.mini { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); cursor: pointer; }
.mini:hover { border-color: var(--line-2); }
.mini.danger { background: var(--fail); color: var(--on-accent); border-color: transparent; }
.mini.danger:hover { filter: brightness(1.07); }

/* ---- setup tabs ---- */
.tabbar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 22px; max-width: 860px; }
.stab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; padding: 9px 14px; font-size: 13.5px; font-weight: 700; font-family: var(--sans); margin-bottom: -1px; white-space: nowrap; }
.stab:hover { color: var(--text); }
.stab.active { color: var(--accent); border-bottom-color: var(--accent); }
.stab.danger { color: var(--fail); opacity: 0.75; }
.stab.danger.active { opacity: 1; border-bottom-color: var(--fail); }
#setupPanels, .setup-save { max-width: 860px; }
.stab-panel { display: none; }
.stab-panel.active { display: block; }
.setup-save { justify-content: flex-start; margin-top: 20px; }
.setup-save[hidden] { display: none; }

/* ---- setup panel ---- */
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kv { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding: 12px 14px; }
.kv .k { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
.kv .v { font-size: 13.5px; color: var(--text); line-height: 1.5; word-break: break-word; }
.kv .v.mono { font-family: var(--mono); font-size: 12px; }
.ready-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.note { border: 1px dashed var(--line); border-radius: 10px; padding: 13px 15px; color: var(--muted); font-size: 13px; line-height: 1.6; background: var(--bg-2); }
.note b { color: var(--text); }

/* ---- forms ---- */
.form-card { margin-bottom: 18px; max-width: 520px; }
.form-row { margin-bottom: 11px; }
.form-row label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.form-row input { display: block; width: 100%; margin-top: 5px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: var(--sans); }
.form-row input:focus { outline: none; border-color: var(--accent); }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.form-err { color: var(--fail); font-size: 12.5px; margin-top: 10px; }

/* ---- legacy top bar (kept for reference) ---- */
.topbar { display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); flex: none; }
.brand { font-weight: 700; font-size: 18px; letter-spacing: -0.3px; cursor: pointer; }
.pill { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: var(--accent-soft); color: var(--accent); padding: 3px 8px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }

.gauges { display: flex; align-items: center; gap: 10px; }
/* width:auto + nowrap labels so "Knowledge"/"Mechanical" never escape the box */
.gauge { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); line-height: 1; padding: 0 12px; }
.gauge.primary { width: auto; min-width: 84px; height: 58px; border-color: var(--score-color, var(--line)); box-shadow: 0 0 0 1px var(--score-color, transparent) inset; }
.gauge.primary .num { font-size: 30px; font-weight: 800; color: var(--score-color, var(--muted)); }
.gauge.secondary { width: auto; min-width: 56px; height: 48px; }
.gauge.secondary .num { font-size: 19px; font-weight: 700; color: var(--score-color, var(--muted)); }
.gauge .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-top: 5px; white-space: nowrap; }
.gauge.primary .lbl { color: var(--score-color, var(--muted)); opacity: 0.9; }

.spacer { flex: 1; }
button.primary { background: var(--accent); color: var(--on-accent); border: none; font-weight: 700; padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; }
button.primary:hover { filter: brightness(1.08); }
button.primary:disabled { opacity: 0.55; cursor: progress; }

.banner { padding: 9px 18px; font-size: 13px; background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--line); flex: none; }
.banner.err { background: var(--fail-bg); color: var(--fail); }
.banner.info { background: var(--accent-soft); color: var(--text); }
.banner .banner-act { background: transparent; border: 0; padding: 0; margin-left: 2px; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: underline; }
.banner .banner-act:hover { color: var(--accent-2); }

/* ---- main 2-pane layout: one doc pane (source⇄rendered) + report sidebar ---- */
main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 440px; }
.pane { min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.sidebar { border-right: none; }

/* editor: toolbar (doc tabs + source/rendered toggle) over a single doc stack */
.doc-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); flex: none; }
.tabs { display: flex; gap: 2px; }
.tab { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 6px 11px; font-size: 12.5px; font-weight: 600; border-radius: 7px; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--bg-3); color: var(--text); }
.src-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--line); margin-left: 4px; }
.src-dot.on { background: var(--pass); }
.viewtoggle { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.vt { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; }
.vt:hover { color: var(--text); }
.vt.active { background: var(--accent); color: var(--on-accent); }
.doc-stack { flex: 1; min-height: 0; display: flex; }
.doc-stack > * { flex: 1; min-height: 0; min-width: 0; }
textarea.code { resize: none; border: none; outline: none; padding: 16px 18px; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 13px; line-height: 1.65; tab-size: 2; }
/* draft = title (editorbar) + meta field + body, stacked; body fills remaining height */
.draft-stack { display: flex; flex-direction: column; }
.draft-stack > textarea.code { flex: 1; min-height: 0; }
/* comment highlights in Source: a mirror layer sits behind a transparent textarea. Every
   property that affects text layout MUST match textarea.code or the marks drift out of
   register; JS sizes the layer to the textarea's client box (excludes its scrollbar). */
.draft-stack > .hl-wrap { flex: 1; min-height: 0; }
.hl-wrap { position: relative; display: flex; background: var(--bg); }
.hl-wrap > textarea.code { flex: 1; min-height: 0; background: transparent; position: relative; z-index: 1; }
.hl-layer { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 0;
  padding: 16px 18px; font-family: var(--mono); font-size: 13px; line-height: 1.65; tab-size: 2;
  white-space: pre-wrap; overflow-wrap: break-word; color: transparent; }
mark.cm-hl { background: rgba(224, 162, 61, 0.32); color: inherit; border-radius: 2px; box-shadow: 0 1px 0 rgba(176, 122, 30, 0.45); }
.hl-layer mark.cm-hl { color: transparent; }
#preview mark.cm-hl { cursor: pointer; }
#preview mark.cm-hl:hover, mark.cm-hl.active { background: rgba(224, 162, 61, 0.62); }
@keyframes cmFlash { 0%, 60% { background: rgba(224, 162, 61, 0.75); } 100% { background: rgba(224, 162, 61, 0.32); } }
mark.cm-hl.flash { animation: cmFlash 1.1s ease-out; }
.field-row { flex: none; display: flex; flex-direction: column; gap: 5px; padding: 11px 18px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.field-label { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.meta-input { resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 13px; line-height: 1.5; outline: none; }
.meta-input:focus { border-color: var(--accent); }
.field-input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; font-weight: 600; outline: none; }
.field-input:focus { border-color: var(--accent); }
.char-count { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); }
.char-count.warn { color: var(--accent); }

/* rendered preview ("paper" view — warm-white sheet on the cream desk, ink-green text) */
.markdown { overflow: auto; padding: 28px 34px; background: var(--bg-2); color: var(--text); line-height: 1.7; font-size: 15px; max-width: 100%; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { line-height: 1.25; margin: 1.4em 0 0.5em; }
.markdown h1 { font-size: 1.9em; }
.markdown h2 { font-size: 1.45em; border-bottom: 1px solid var(--line); padding-bottom: 0.2em; }
.markdown h3 { font-size: 1.2em; }
.markdown p { margin: 0.6em 0; }
.markdown a { color: var(--accent); text-decoration: none; }
.markdown a:hover { text-decoration: underline; text-decoration-color: var(--honey); }
.markdown code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 0.9em; }
.markdown pre { background: var(--bg-3); padding: 12px; border-radius: 8px; overflow: auto; }
.markdown blockquote { border-left: 3px solid var(--honey); margin: 1em 0; padding: 0.2em 1em; color: var(--muted); background: var(--warn-bg); }
.markdown table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.92em; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.markdown th { background: var(--bg-3); }
.markdown img { max-width: 100%; border-radius: 8px; }
.markdown img[src*="PLACEHOLDER_"] { display: none; }

/* ---- sidebar ---- */
.sidebar { background: var(--bg-2); display: flex; flex-direction: column; }
.rtabs { display: flex; gap: 4px; padding: 12px 14px 0; flex: none; border-bottom: 1px solid var(--line); }
.rtab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.rtab.active { color: var(--text); border-bottom-color: var(--accent); }
.rtab .usp { font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px; background: var(--accent-soft); color: var(--accent); padding: 1px 5px; border-radius: 4px; margin-left: 3px; vertical-align: middle; }
.panel { overflow-y: auto; padding: 0 14px 40px; flex: 1; }
.empty { margin: 18px 4px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* AI summary */
.ai-notes { margin: 14px 0 6px; padding: 12px 14px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); font-size: 13px; line-height: 1.55; }
.ai-notes .hd { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 6px; font-weight: 700; }

/* dimension cards */
.dims { margin-top: 10px; }
.dim { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 9px; background: var(--bg); overflow: hidden; }
.dim .head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.dim .head:hover { background: var(--bg-3); }
.dim .name { flex: 1; font-size: 13.5px; font-weight: 700; }
.dim .sc { font-family: var(--mono); font-size: 14px; font-weight: 800; color: var(--d-color, var(--muted)); min-width: 26px; text-align: right; }
.bar { height: 4px; background: var(--bg-3); }
.bar > span { display: block; height: 100%; width: var(--w, 0%); background: var(--d-color, var(--muted)); transition: width 0.3s; }
.dim .body { padding: 4px 12px 12px; }
.dim .body.hidden { display: none; }
.finding { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.finding:first-child { border-top: none; }
.fdot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--muted); }
.fdot.critical { background: var(--fail); }
.fdot.major { background: var(--warn); }
.fdot.minor { background: var(--pending); }
.fdot.praise { background: var(--pass); }
.finding .ftext { flex: 1; font-size: 12.5px; line-height: 1.5; }
.finding .ftitle { font-weight: 600; color: var(--text); }
.finding .fev { display: block; font-style: italic; color: var(--muted); margin-top: 3px; }
.finding .ffix { display: block; color: var(--muted); margin-top: 3px; }
.finding .ffix b { color: var(--accent); }

/* fix "example" preview — the concrete before→after / drop-in snippet for a finding */
.ffix-ex { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-3); overflow: hidden; }
.ffix-ex-hd { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 10px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
.ffix-copy { background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 2px 8px; cursor: pointer; }
.ffix-copy:hover { border-color: var(--accent); color: var(--accent); }
.ffix-ex-body { padding: 8px 10px; font-size: 12px; line-height: 1.5; color: var(--text); overflow-x: auto; }
.ffix-ex-body > :first-child { margin-top: 0; }
.ffix-ex-body > :last-child { margin-bottom: 0; }
.ffix-ex-body p { margin: 6px 0; }
.ffix-ex-body code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 0.9em; }
.ffix-ex-body pre { background: var(--bg); padding: 10px; border-radius: 6px; overflow-x: auto; }
.ffix-ex-body table { border-collapse: collapse; font-size: 11.5px; }
.ffix-ex-body th, .ffix-ex-body td { border: 1px solid var(--line); padding: 3px 8px; text-align: left; }
.ffix-ex-body th { background: var(--bg); }

/* knowledge track */
.knowbtn { margin: 14px 0 4px; width: 100%; }
.know-stats { display: flex; gap: 18px; margin-bottom: 6px; }
.know-stats .s { font-size: 12px; color: var(--muted); }
.know-stats .s b { font-family: var(--mono); font-size: 15px; font-weight: 800; }
.claims { margin-top: 8px; }
.claim { border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; margin-bottom: 8px; background: var(--bg); padding: 9px 11px; }
.claim.v-supported { border-left-color: var(--pass); }
.claim.v-understated, .claim.v-missing { border-left-color: var(--warn); }
.claim.v-overstated, .claim.v-contradicted, .claim.v-unsupported { border-left-color: var(--fail); }
.claim .vbadge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 2px 6px; border-radius: 5px; }
.vbadge.v-supported { background: var(--pass-bg); color: var(--pass); }
.vbadge.v-understated, .vbadge.v-missing { background: var(--warn-bg); color: var(--warn); }
.vbadge.v-overstated, .vbadge.v-contradicted, .vbadge.v-unsupported { background: var(--fail-bg); color: var(--fail); }
.claim .ctext { font-size: 13px; font-weight: 600; margin: 6px 0 0; line-height: 1.45; }
.claim .cline { display: block; font-style: italic; color: var(--muted); font-size: 12px; margin-top: 4px; cursor: pointer; }
.claim .cline:hover { color: var(--accent); }
.claim .csrc { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.claim .csrc b, .claim .cfix b { color: var(--accent); }
.claim .cfix { display: block; font-size: 12px; color: var(--text); margin-top: 4px; }

/* mechanical checklist */
.checklist { padding-top: 8px; }
.group-hd { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 16px 4px 6px; font-weight: 700; }
.row { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 7px; background: var(--bg); overflow: hidden; }
.row .rhead { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; cursor: pointer; }
.row .rhead:hover { background: var(--bg-3); }
.dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--pending); }
.dot.pass { background: var(--pass); } .dot.warn { background: var(--warn); } .dot.fail { background: var(--fail); }
.row .label { flex: 1; font-size: 13px; font-weight: 600; }
.row .body { padding: 0 11px 11px 29px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.row .body.hidden { display: none; }
.hits { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip { font-family: var(--mono); font-size: 11px; background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ===================== comments (review feedback) ===================== */
/* "＋ Comment" button in the doc toolbar (near the editor) */
.doc-comment { background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; padding: 5px 11px; font-size: 12px; font-weight: 600; border-radius: 8px; }
.doc-comment:hover { border-color: var(--accent); color: var(--accent); }
/* open-count badge on the Comments report tab */
.cbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 800; border-radius: 8px; background: var(--accent); color: var(--on-accent); vertical-align: middle; margin-left: 3px; }
/* posts-list open-comment chip */
.tag.cm-tag { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.cm-bar { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.cm-add { padding: 7px 12px; font-size: 12.5px; }
.cm-toggle { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.cm-toggle input { accent-color: var(--accent); }
.cm-count { color: var(--faint); }

.cm-composer { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 9px; background: var(--bg-2); padding: 10px 11px; margin: 8px 0 4px; }
.cm-quote { font-style: italic; color: var(--muted); font-size: 12px; line-height: 1.45; margin-bottom: 7px; }
.cm-text { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 13px; line-height: 1.5; padding: 8px 10px; }
.cm-text:focus { outline: none; border-color: var(--accent); }
.cm-composer .form-actions, .cm-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.comments { margin-top: 8px; }
.cm-card { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 9px; background: var(--bg); padding: 9px 11px; margin-bottom: 8px; }
.cm-card.resolved { border-left-color: var(--pass); background: var(--bg-2); opacity: 0.72; }
.cm-card.active { background: var(--warn-bg); box-shadow: 0 0 0 2px rgba(224, 162, 61, 0.55); }
.cm-quote-line { display: block; font-style: italic; color: var(--muted); font-size: 12px; line-height: 1.4; cursor: pointer; margin-bottom: 5px; }
.cm-quote-line:hover { color: var(--accent); }
.cm-jump { color: var(--accent); font-style: normal; }
.cm-text-body { font-size: 13px; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cm-card.resolved .cm-text-body { text-decoration: line-through; text-decoration-color: var(--line-2); }
.cm-meta { font-size: 11px; color: var(--faint); margin-top: 6px; }
.cm-actions { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.cm-actions .cm-resolve { font-weight: 700; color: var(--pass); }
.cm-actions .cm-resolve:hover { background: var(--pass-bg); color: var(--pass); }

/* ===================== SaaS shell additions ===================== */

/* polish: buttons + inputs + cards */
button.primary { background: var(--accent); transition: filter 0.12s, transform 0.04s; }
button.primary:hover { background: var(--accent-2); filter: none; }
button.primary:active { transform: translateY(1px); }
button.primary.block { width: 100%; padding: 11px; }
input, select, textarea { font-family: var(--sans); }
select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 13px; }
select:focus { outline: none; border-color: var(--accent); }
.card { box-shadow: var(--shadow-sm); transition: border-color 0.15s, box-shadow 0.15s; }
.card.click:hover { box-shadow: var(--shadow); }
.appbar { box-shadow: 0 1px 0 rgba(46, 58, 51, 0.04); }

/* ---- login ---- */
.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 50% -10%, rgba(201, 80, 46, 0.10), transparent), var(--bg); }
.login-card { width: 340px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.login-brand { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.login-sub { color: var(--muted); font-size: 13px; margin: -6px 0 8px; }
.login-card label { font-size: 12px; color: var(--muted); font-weight: 600; display: block; }
.login-card input { display: block; width: 100%; margin-top: 5px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; font-size: 14px; }
.login-card input:focus { outline: none; border-color: var(--accent); }

/* ---- user menu ---- */
.usermenu { position: relative; }
.um-btn { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 4px 12px 4px 5px; cursor: pointer; font-size: 13px; font-weight: 600; }
.um-btn:hover { border-color: var(--line-2); background: var(--bg-3); }
.um-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; display: flex; align-items: center; justify-content: center; flex: none; }
.um-caret { color: var(--faint); font-size: 10px; margin-left: 1px; }
.um-pop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 170px; padding: 5px; z-index: 50; }
.um-pop button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 9px 11px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.um-pop button:hover { background: var(--bg-3); }

/* ---- role badges ---- */
.role-badge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 999px; }
.role-badge.superadmin { background: var(--warn-bg); color: var(--role-admin); }
.role-badge.owner { background: var(--accent-soft); color: var(--accent); }
.role-badge.contributor { background: rgba(138, 127, 110, 0.20); color: var(--role-contrib); }

/* ---- modal ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(46, 58, 51, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { width: 380px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.modal-text { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.temp-pw { font-family: var(--mono); font-size: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; text-align: center; letter-spacing: 1px; margin-bottom: 14px; user-select: all; }
.form-ok { color: var(--pass); font-size: 12.5px; margin-top: 10px; }

/* ---- tables (admin / members) ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: var(--bg-2); }
.tbl .em { color: var(--text); font-weight: 600; }
.tbl .sub { color: var(--muted); font-size: 12px; }
.tbl .act { text-align: right; white-space: nowrap; }
.linkbtn { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 12.5px; padding: 4px 8px; border-radius: 6px; }
.linkbtn:hover { color: var(--accent); background: var(--bg-3); }
.linkbtn.danger:hover { color: var(--fail); }
.panel-block { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); padding: 4px 6px; margin-bottom: 20px; overflow: hidden; }
.block-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px; }
.block-head h2 { font-size: 14px; margin: 0; font-weight: 700; }

/* ---- setup edit form ---- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
.field input, .field textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 13px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 70px; line-height: 1.55; }
.field .hint { color: var(--faint); font-size: 11px; margin-top: 4px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bc-crit-block { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--line); }
.bc-crit-block .block-head h2 { font-size: 14px; margin: 12px 0 4px; }
.add-member { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; padding: 0 12px 12px; }
.add-member .field { margin: 0; flex: 1; min-width: 150px; }

/* ---- report history ---- */
.history { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.hchip { font-size: 11px; background: var(--bg-3); border: 1px solid var(--line); color: var(--muted); border-radius: 7px; padding: 4px 9px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.hchip:hover { border-color: var(--accent); color: var(--text); }
.hchip.active { border-color: var(--accent); color: var(--text); }
.hchip b { font-family: var(--mono); }

/* ---- editor title bar ---- */
.title-input { background: transparent; border: 1px solid transparent; color: var(--text); font-size: 15px; font-weight: 700; padding: 7px 10px; border-radius: 8px; min-width: 220px; max-width: 360px; }
.title-input:hover { border-color: var(--line); }
.title-input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.save-state { font-size: 11.5px; color: var(--muted); }
.save-state.dirty { color: var(--warn); }
.save-state.saved { color: var(--pass); }
#savePostBtn, #exportBtn { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }
#savePostBtn:hover, #exportBtn:hover { border-color: var(--accent); color: var(--accent); }
#exportBtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- editor format picker ---- */
.fmt-pick { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.fmt-pick > span { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.fmt-pick select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.fmt-pick select:hover:not(:disabled) { border-color: var(--accent); }
.fmt-pick select:disabled { opacity: 0.7; cursor: default; }

/* ---- new-post format chooser (modal) ---- */
.fmt-choices { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.fmt-choice { text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 12px 14px; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.fmt-choice:hover { border-color: var(--accent); background: var(--bg-3); }
.fmt-choice .fc-label { font-weight: 700; font-size: 14px; color: var(--text); }
.fmt-choice .fc-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

/* ---- supported-formats checkboxes (project settings) ---- */
.fmt-checks { display: flex; flex-direction: column; gap: 7px; padding: 4px 0; }
.fmt-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.fmt-check input { cursor: pointer; }
.fmt-check .hint { font-weight: 400; }

/* ---- loading / states ---- */
.loading { color: var(--muted); font-size: 13px; padding: 18px 4px; }
.role-read-only { color: var(--faint); font-size: 12px; }
.cmeta .tag + .tag { margin-left: 4px; }

/* ---- danger zone (project delete) ---- */
.danger-zone { border-color: rgba(192, 66, 29, 0.32); }
.danger-zone .block-head h2 { color: var(--fail); }
.dz-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px 14px; flex-wrap: wrap; }
.dz-text { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 540px; }
.dz-action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
button.ghost.danger { color: var(--fail); border-color: rgba(192, 66, 29, 0.4); }
button.ghost.danger:hover { color: var(--on-accent); background: var(--fail); border-color: transparent; }

/* ---- toast (action feedback, replaces alert() for new flows) ---- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px); background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 18px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: var(--fail); color: var(--fail); }

/* ---- engine editor (superadmin) ---- */
.eng-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.eng-active { font-size: 12.5px; color: var(--muted); }
.eng-sum { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.eng-sum b { font-variant-numeric: tabular-nums; font-size: 15px; }
.eng-dim { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 12px 14px; margin-bottom: 12px; }
.eng-dim-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.eng-dim-label { flex: 1; min-width: 200px; font-weight: 700; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.eng-w { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.eng-w input { width: 64px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font-variant-numeric: tabular-nums; }
.eng-guidance { width: 100%; resize: vertical; }
.eng-note-input { flex: 1; max-width: 320px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 13px; }
.dz-confirm { font-size: 13px; font-weight: 700; color: var(--fail); }