:root {
  --glossary-reserve: 380px; /* kept in sync with the glossary panel's real width by raci-app.js */
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #dde1e6;
  --text: #1c2128;
  --text-dim: #5b6472;
  --accent: #2f5fd8;
  --accent-soft: #e8edfc;

  --letter-a: #2f5fd8;
  --letter-a-bg: #e8edfc;
  --letter-r: #1a8a5f;
  --letter-r-bg: #e3f5ec;
  --letter-c: #b7791f;
  --letter-c-bg: #fbf1de;
  --letter-i: #6b7280;
  --letter-i-bg: #eceef1;

  --header-bg: #1c2540;
  --header-text: #f4f6fb;
  --group-bg: #eef1fb;
  --sticky-shadow: rgba(15, 23, 42, 0.10);

  --core-col-bg: #ffffff;
  --support-col-bg: #fbfbfc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161c;
    --panel: #1b1e27;
    --border: #2b2f3a;
    --text: #e7e9ee;
    --text-dim: #9aa1ae;
    --accent: #7c9aff;
    --accent-soft: #232a44;

    --letter-a: #8fb0ff;
    --letter-a-bg: #232a44;
    --letter-r: #6bd9a6;
    --letter-r-bg: #1c3129;
    --letter-c: #e8c07a;
    --letter-c-bg: #362c19;
    --letter-i: #9aa1ae;
    --letter-i-bg: #262a33;

    --header-bg: #0e1220;
    --header-text: #f4f6fb;
    --group-bg: #202538;
    --sticky-shadow: rgba(0, 0, 0, 0.45);

    --core-col-bg: #1b1e27;
    --support-col-bg: #171a22;
  }
}
:root[data-theme="dark"] {
  --bg: #14161c; --panel: #1b1e27; --border: #2b2f3a; --text: #e7e9ee; --text-dim: #9aa1ae;
  --accent: #7c9aff; --accent-soft: #232a44;
  --letter-a: #8fb0ff; --letter-a-bg: #232a44;
  --letter-r: #6bd9a6; --letter-r-bg: #1c3129;
  --letter-c: #e8c07a; --letter-c-bg: #362c19;
  --letter-i: #9aa1ae; --letter-i-bg: #262a33;
  --header-bg: #0e1220; --header-text: #f4f6fb; --group-bg: #202538; --sticky-shadow: rgba(0,0,0,0.45);
  --core-col-bg: #1b1e27; --support-col-bg: #171a22;
}
:root[data-theme="light"] {
  --bg: #f5f6f8; --panel: #ffffff; --border: #dde1e6; --text: #1c2128; --text-dim: #5b6472;
  --accent: #2f5fd8; --accent-soft: #e8edfc;
  --letter-a: #2f5fd8; --letter-a-bg: #e8edfc;
  --letter-r: #1a8a5f; --letter-r-bg: #e3f5ec;
  --letter-c: #b7791f; --letter-c-bg: #fbf1de;
  --letter-i: #6b7280; --letter-i-bg: #eceef1;
  --header-bg: #1c2540; --header-text: #f4f6fb; --group-bg: #eef1fb; --sticky-shadow: rgba(15,23,42,0.10);
  --core-col-bg: #ffffff; --support-col-bg: #fbfbfc;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  width: 100%;
  height: 100%;
  overflow: hidden; /* the table area scrolls internally; the document itself never does */
}

.raci-page { display: flex; flex-direction: column; height: 100vh; width: 100%; }

/* ---------- Top bar ---------- */
.raci-topbar {
  flex: 0 0 auto;
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: var(--header-bg); color: var(--header-text);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.raci-title { font-weight: 700; font-size: 15px; white-space: nowrap; }
.raci-mode-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.raci-mode-badge.readonly { background: rgba(255,255,255,0.12); color: #cfd6e6; }
.raci-mode-badge.editable { background: #2f8f5b; color: #eafff2; }

.raci-search-wrap { position: relative; flex: 1 1 280px; max-width: 420px; }
.raci-search-wrap input {
  width: 100%; padding: 7px 32px 7px 12px; border-radius: 8px; border: 1px solid transparent;
  background: rgba(255,255,255,0.12); color: var(--header-text); font-size: 13px;
}
.raci-search-wrap input::placeholder { color: rgba(244,246,251,0.55); }
.raci-search-wrap input:focus { outline: none; background: rgba(255,255,255,0.2); }
.raci-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(244,246,251,0.7); cursor: pointer; font-size: 15px; padding: 2px 6px;
  display: none;
}
.raci-search-count { font-size: 11.5px; color: rgba(244,246,251,0.7); white-space: nowrap; }

.raci-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.raci-btn {
  font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: var(--header-text);
  cursor: pointer; white-space: nowrap;
}
.raci-btn:hover { background: rgba(255,255,255,0.18); }
.raci-btn.primary { background: var(--accent); border-color: var(--accent); }
.raci-btn.danger { background: #7a2b2b; border-color: #7a2b2b; }
.raci-part-select {
  font-size: 12.5px; font-weight: 600; padding: 6px 8px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.1); color: var(--header-text);
}
.raci-part-select option { color: #111; }

/* ---------- Part intro ---------- */
.raci-part-intro {
  flex: 0 0 auto;
  padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.raci-part-intro h2 { margin: 0 0 4px; font-size: 16px; }
.raci-part-intro p { margin: 0; color: var(--text-dim); font-size: 12.8px; max-width: 980px; line-height: 1.5; }

/* ---------- Table container ---------- */
.raci-table-scroll {
  flex: 1 1 auto;
  min-height: 0; /* required so this flex child actually shrinks and scrolls, instead of growing and pushing scroll to the document */
  width: 100%;
  overflow: auto;
}
table.raci-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed; /* columns keep predictable widths; only col-category/col-task (JS-sized) absorb slack */
  /* Deliberately NOT width:100% — table-layout:fixed proportionally rescales
     every column's specified width to fill whatever width the table resolves
     to, so a percentage width here would blow right through col-category's
     and col-task's per-column caps. raci-app.js computes the table's exact
     width (base columns + however much col-category/col-task have grown,
     capped) and writes it to --table-width; this just consumes that value. */
  width: var(--table-width, 1320px);
}
.raci-table th, .raci-table td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}

/* frozen header row */
.raci-table thead th {
  position: sticky; top: 0; z-index: 30;
  background: var(--header-bg); color: var(--header-text);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap;
}
.raci-table thead th .role-sub { display: block; font-size: 10px; opacity: 0.7; text-transform: none; letter-spacing: 0; font-weight: 500; }

/* frozen left columns: category + task. Widths are set live by raci-app.js
   (--col-category-width / --col-task-width) so THEY absorb extra space on a
   wide monitor, proportional to their content — not col-notes, which stays
   a fixed, readable width regardless of screen size. */
.col-category { width: var(--col-category-width, 150px); min-width: 150px; }
.col-task { width: var(--col-task-width, 330px); min-width: 260px; }
.col-role { width: 108px; min-width: 96px; text-align: center; }
.col-notes { width: 300px; min-width: 220px; color: var(--text-dim); font-size: 12.4px; }

.raci-table thead th.col-category { left: 0; z-index: 35; }
.raci-table thead th.col-task { left: var(--col-category-width, 150px); z-index: 35; }
.raci-table tbody td.col-category {
  position: sticky; left: 0; z-index: 20;
  background: var(--panel);
  font-weight: 600; font-size: 12px; color: var(--text-dim);
  box-shadow: 1px 0 0 var(--border);
}
.raci-table tbody td.col-task {
  position: sticky; left: var(--col-category-width, 150px); z-index: 20;
  background: var(--panel);
  font-weight: 500;
  box-shadow: 2px 0 4px var(--sticky-shadow);
}
.raci-table tbody tr:nth-child(odd) td.col-category,
.raci-table tbody tr:nth-child(odd) td.col-task { background: var(--panel); }

.raci-table tbody tr.group-row td {
  position: static;
  background: var(--group-bg) !important;
  font-weight: 700; font-size: 12.5px;
  padding: 7px 10px;
  box-shadow: none !important;
}
.raci-table tbody tr.group-row td.group-source {
  font-weight: 500; font-size: 11px; color: var(--text-dim); text-transform: none;
}

.raci-table tbody tr:hover td:not(.group-row td) { filter: brightness(0.98); }
:root[data-theme="dark"] .raci-table tbody tr:hover td { filter: brightness(1.12); }
@media (prefers-color-scheme: dark) {
  .raci-table tbody tr:hover td { filter: brightness(1.12); }
}

.raci-cell-empty { color: var(--border); }

.raci-chip-row { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.raci-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 6px;
  font-size: 11px; font-weight: 800;
}
.raci-chip.A { color: var(--letter-a); background: var(--letter-a-bg); }
.raci-chip.R { color: var(--letter-r); background: var(--letter-r-bg); }
.raci-chip.C { color: var(--letter-c); background: var(--letter-c-bg); }
.raci-chip.I { color: var(--letter-i); background: var(--letter-i-bg); }

.raci-hit mark {
  background: #ffe066; color: #1c2128; border-radius: 3px; padding: 0 1px;
}
:root[data-theme="dark"] mark, @media (prefers-color-scheme: dark) { }
.raci-row-hidden { display: none; }

.raci-empty-state {
  padding: 40px; text-align: center; color: var(--text-dim); font-size: 13px;
}

/* ---------- Editable mode ---------- */
.raci-table.editable td.col-role .raci-chip-row { cursor: pointer; }
.raci-table.editable td.col-role:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.raci-table.editable td.col-notes { cursor: text; }
.raci-table.editable td.col-notes:hover { outline: 1px dashed var(--accent); outline-offset: -1px; }
.raci-table.editable [contenteditable="true"]:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.raci-table.editable .task-edit-inner { cursor: text; border-radius: 4px; }
.raci-table.editable .task-edit-inner:hover { outline: 1px dashed var(--accent); outline-offset: 1px; }
.raci-dirty-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #e0a000; margin-left: 6px; vertical-align: middle;
}

/* ---------- Letter picker popover ---------- */
.raci-picker {
  position: fixed; z-index: 200;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  padding: 8px; display: flex; gap: 6px;
}
.raci-picker button {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  font-weight: 800; font-size: 13px; cursor: pointer; background: var(--bg); color: var(--text);
}
.raci-picker button.active.A { background: var(--letter-a-bg); color: var(--letter-a); border-color: var(--letter-a); }
.raci-picker button.active.R { background: var(--letter-r-bg); color: var(--letter-r); border-color: var(--letter-r); }
.raci-picker button.active.C { background: var(--letter-c-bg); color: var(--letter-c); border-color: var(--letter-c); }
.raci-picker button.active.I { background: var(--letter-i-bg); color: var(--letter-i); border-color: var(--letter-i); }

/* ---------- Floating glossary ---------- */
.raci-glossary {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  width: 340px; max-height: 62vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15,23,42,0.22);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.raci-glossary.collapsed { width: auto; max-height: none; }
.raci-glossary-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--header-bg); color: var(--header-text); cursor: pointer; user-select: none;
}
.raci-glossary-head span.title { font-weight: 700; font-size: 12.5px; flex: 1; }
.raci-glossary-head .toggle-icon { font-size: 12px; opacity: 0.8; }
.raci-glossary-body { overflow-y: auto; padding: 10px 12px 14px; }
.raci-glossary.collapsed .raci-glossary-body { display: none; }
.raci-glossary-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.raci-glossary-tab {
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); cursor: pointer;
}
.raci-glossary-tab.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.raci-glossary-search {
  width: 100%; padding: 6px 9px; margin-bottom: 8px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 12px;
}
.raci-glossary-section { display: none; }
.raci-glossary-section.active { display: block; }
.raci-glossary-item { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.raci-glossary-item:last-child { border-bottom: none; }
.raci-glossary-item .term {
  font-weight: 700; font-size: 12.3px; display: flex; align-items: center; gap: 6px;
}
.raci-glossary-item .def { font-size: 11.8px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; }
.raci-glossary-item .chip { width: 18px; height: 18px; font-size: 10px; }

@media (max-width: 720px) {
  .raci-glossary { left: 10px; right: 10px; width: auto; bottom: 10px; }
  .col-task { max-width: 220px; }
}