[hidden] { display: none !important; }

  :root {
    color-scheme: light;
    --bg: #f4f4f8;
    --surface: #ffffff;
    --surface-2: #eeedf5;
    --border: #dedce8;
    --border-strong: #c7c4d9;
    --text: #17161f;
    --text-2: #57546a;
    --text-3: #8b889b;
    --accent: #3730a6;
    --accent-ink: #ffffff;
    --accent-wash: #ecebfb;
    --focus: #6f68d8;

    --st-new: #d03b3b;
    --st-new-bg: #fbe3e2;
    --st-active: #ec835a;
    --st-active-bg: #fde6da;
    --st-reviewed: #b8860a;
    --st-reviewed-bg: #fdf1d3;
    --st-approved: #2a5fc4;
    --st-approved-bg: #e3ebfb;
    --st-resolved: #0c8f2f;
    --st-resolved-bg: #dff3e3;

    /* Deliberately a different hue family from the --st-* status colors
       above (which already span red/orange/gold/green/blue) so the
       "Clashes by discipline" chart never reads as if its colors mean
       status — purple/teal/magenta/slate instead. */
    --disc-1: #7c5cbf; --disc-2: #0e9aa7; --disc-3: #c2368f; --disc-4: #64748b;
    --disc-5: #b5651d; --disc-6: #2f855a; --disc-7: #3f6fb0; --disc-8: #8a5a2b;

    --shadow: 0 1px 2px rgba(23,22,31,0.06), 0 8px 24px -12px rgba(23,22,31,0.18);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #131319;
      --surface: #1c1b24;
      --surface-2: #24232e;
      --border: #322f3d;
      --border-strong: #423e52;
      --text: #f2f1f7;
      --text-2: #b3b0c3;
      --text-3: #8a8798;
      --accent: #9b95f0;
      --accent-ink: #171226;
      --accent-wash: #29244a;
      --focus: #9b95f0;

      --st-new: #ef6a69;
      --st-new-bg: #3c2224;
      --st-active: #f0a17c;
      --st-active-bg: #3d2b1f;
      --st-reviewed: #e3bb52;
      --st-reviewed-bg: #3c3220;
      --st-approved: #7ea4ef;
      --st-approved-bg: #212d47;
      --st-resolved: #63d17f;
      --st-resolved-bg: #1c3324;

      --disc-1: #9b81d9; --disc-2: #22b8c4; --disc-3: #db5aa8; --disc-4: #94a3b8;
      --disc-5: #d98a3d; --disc-6: #4caf7d; --disc-7: #6f9fd8; --disc-8: #c08a52;

      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #131319;
    --surface: #1c1b24;
    --surface-2: #24232e;
    --border: #322f3d;
    --border-strong: #423e52;
    --text: #f2f1f7;
    --text-2: #b3b0c3;
    --text-3: #8a8798;
    --accent: #9b95f0;
    --accent-ink: #171226;
    --accent-wash: #29244a;
    --focus: #9b95f0;

    --st-new: #ef6a69;
    --st-new-bg: #3c2224;
    --st-active: #f0a17c;
    --st-active-bg: #3d2b1f;
    --st-reviewed: #e3bb52;
    --st-reviewed-bg: #3c3220;
    --st-approved: #7ea4ef;
    --st-approved-bg: #212d47;
    --st-resolved: #63d17f;
    --st-resolved-bg: #1c3324;

    --disc-1: #9b81d9; --disc-2: #22b8c4; --disc-3: #db5aa8; --disc-4: #94a3b8;
    --disc-5: #d98a3d; --disc-6: #4caf7d; --disc-7: #6f9fd8; --disc-8: #c08a52;

    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; font-variant-numeric: tabular-nums; }
  a { color: var(--accent); }
  button { font-family: inherit; }
  ::selection { background: var(--accent-wash); }

  .app { display: flex; flex-direction: column; min-height: 100vh; }

  /* ---- Topbar ---- */
  .topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 20px; background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 30;
  }
  .brand { display: flex; align-items: center; gap: 12px; min-width: 0; position: relative; }
  /* .brand-logo (#arcdoxLogo) is the fixed ArcDox brand mark — its src is
     never touched by JS, so it always shows regardless of what's set (or
     not set) as the project's own thumbnail. That's a separate, optional
     image (#projectPic, .brand-project-pic) shown next to it. */
  .brand-logo { height: 28px; width: auto; display: block; flex: none; }
  .brand-project-pic { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; flex: none; border: 1px solid var(--border); }
  .brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .brand-name { font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }
  .brand-sub { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-menu { position: relative; flex: none; }
  .brand-menu-btn {
    background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-2);
    font-size: 12px; line-height: 1; padding: 5px 7px; cursor: pointer;
  }
  .brand-menu-btn:hover { background: var(--surface-2); }
  .brand-menu-list {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 170px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; z-index: 40;
  }
  .brand-menu-list button {
    display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 10px;
    font-size: 12.5px; color: var(--text); border-radius: 5px; cursor: pointer;
  }
  .brand-menu-list button:hover { background: var(--surface-2); }
  .project-item-pic { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex: none; margin-right: 4px; }
  .page-switch {
    display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; padding: 2px; background: var(--surface-2);
  }
  .page-switch-btn {
    border: none; background: none; font-size: 12.5px; font-weight: 700; color: var(--text-3);
    padding: 6px 14px; border-radius: 6px; cursor: pointer;
  }
  .page-switch-btn.is-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
  .page-switch-btn:hover:not(.is-active) { color: var(--text-2); }

  .issue-model-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
  .issue-model-row .ni-remove-row { flex: none; padding: 6px 9px; }

  .watcher-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
  .watcher-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 5px 3px 9px;
  }
  .watcher-chip button {
    border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 3px; border-radius: 50%;
  }
  .watcher-chip button:hover { background: var(--border); color: var(--text); }
  .watch-toggle-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

  .topbar-spacer { flex: 1; }
  .sync-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--text-2);
    padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface-2);
    white-space: nowrap;
  }
  .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
  .sync-pill[data-state="saved"] .sync-dot { background: var(--st-resolved); }
  .sync-pill[data-state="saving"] .sync-dot { background: var(--st-reviewed); animation: pulse 1.1s ease-in-out infinite; }
  .sync-pill[data-state="readonly"] .sync-dot,
  .sync-pill[data-state="local"] .sync-dot { background: var(--text-3); }
  .sync-pill[data-state="error"] .sync-dot { background: var(--st-new); }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text); cursor: pointer; white-space: nowrap;
  }
  .btn:hover { background: var(--surface-2); }
  .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-danger { background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); color: #fff; }
  .btn-danger:hover { filter: brightness(1.08); }
  .btn-ghost { border-color: transparent; background: transparent; }
  .btn-ghost:hover { background: var(--surface-2); }
  .btn-sm { padding: 5px 9px; font-size: 12.5px; border-radius: 7px; }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
  .btn.is-active { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
  .mentions-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
    padding: 0 4px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
    font-size: 10.5px; font-weight: 700; line-height: 1;
  }
  .mention { color: var(--accent); font-weight: 700; }
  .mention-dropdown {
    position: absolute; left: 0; top: 100%; margin-top: 2px; min-width: 180px; max-width: 260px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow); padding: 4px; z-index: 40;
  }
  .mention-option {
    padding: 7px 9px; border-radius: 5px; font-size: 12.5px; color: var(--text); cursor: pointer;
  }
  .mention-option:hover, .mention-option.is-active { background: var(--accent-wash); color: var(--accent); }
  .mention-option-co { color: var(--text-3); font-weight: 500; }
  .mention-option:hover .mention-option-co, .mention-option.is-active .mention-option-co { color: inherit; opacity: 0.75; }
  .priority-badge {
    display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-2); background: var(--surface-2);
    border: 1px solid var(--border); font-family: "IBM Plex Mono", monospace;
  }

  /* ---- Info banner ---- */
  .banner {
    font-size: 12.5px; color: var(--text-2); background: var(--surface-2);
    border-bottom: 1px solid var(--border); padding: 8px 20px;
  }
  .banner strong { color: var(--text); }

  /* ---- Stat strip ----
     Round donut-ring tiles instead of flat numbers — each ring's fill is
     that tile's share of the project total, so relative size reads at a
     glance instead of requiring a mental subtraction across plain text.
     Redesigned 2026-09-02 (Chiara: too small and too busy) — bigger rings,
     no hairline grid between tiles, and a wider minimum column so the strip
     wraps to fewer per row instead of staying crushed at 8-across. */
  /* Company filter above the stat gauges (Chiara: let the top stats be
     scoped to all companies or one specific company). */
  .stats-toolbar { display: flex; justify-content: flex-end; padding: 8px 12px 0; background: var(--surface); }
  .stats-company-picker { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
  .stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 4px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 4px;
  }
  .stat { background: var(--surface); padding: 16px 10px 14px; border-radius: 10px; }
  .stat-ring-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .stat-ring-wrap { position: relative; width: 84px; height: 47px; flex: none; }
  .stat-ring { display: block; }
  .stat-ring-num { position: absolute; left: 0; right: 0; bottom: 1px; display: flex; align-items: flex-end; justify-content: center; font-weight: 700; font-size: 17px; }
  .stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-2); }
  .stat-clickable { cursor: pointer; }
  .stat-clickable:hover { background: var(--surface-2); }
  .stat-clickable.is-active { background: var(--accent-wash); box-shadow: inset 0 0 0 2px var(--accent); }
  .stat-clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

  /* ---- Charts ---- */
  .charts-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--border); border-bottom: 1px solid var(--border);
  }
  .chart-card { background: var(--surface); padding: 16px 20px; min-width: 0; }
  .chart-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin: 0 0 2px; }
  .chart-sub { font-size: 11px; color: var(--text-3); margin: 0 0 12px; }
  .chart-bars { display: flex; flex-direction: column; gap: 9px; }
  .chart-bar-group { display: flex; flex-direction: column; gap: 2px; }
  .chart-bar-row { display: grid; grid-template-columns: 92px 1fr 46px; align-items: center; gap: 8px; }
  .chart-bar-label { font-size: 11.5px; color: var(--text-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chart-bar-track { position: relative; height: 16px; background: var(--surface-2); border-radius: 4px; overflow: hidden; display: flex; }
  .chart-bar-seg { height: 100%; }
  .chart-bar-seg:not(:last-child) { border-right: 2px solid var(--surface); }
  .chart-bar-val { font-size: 11.5px; font-family: "IBM Plex Mono", monospace; color: var(--text-2); font-variant-numeric: tabular-nums; }
  /* Always-visible per-assignee open/resolved split under each "Clashes by
     Assigned to" bar (Chiara: make the values visible, not hover-only) —
     indented to line up under the bar track itself (92px label + 8px gap). */
  .chart-bar-caption { font-size: 10px; color: var(--text-3); margin-left: 100px; font-variant-numeric: tabular-nums; }
  .chart-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; }
  .chart-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); }
  .chart-legend-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
  @media (max-width: 860px) { .charts-row { grid-template-columns: 1fr; } }
  .trend-card { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 20px; }
  .trend-empty { font-size: 12.5px; color: var(--text-3); font-style: italic; padding: 8px 0 4px; }
  .trend-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 4px 0 10px; }
  .trend-series-picker { display: flex; flex-wrap: wrap; gap: 2px 4px; }
  .trend-series-picker .chk-row { font-size: 12px; }
  .trend-scope-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
  .trend-scope-label { font-size: 11px; color: var(--text-3); margin-right: 2px; }
  .trend-scrub-block { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--border); }
  .trend-scrub-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
  .trend-scrub-date { font-family: "IBM Plex Mono", monospace; font-weight: 700; color: var(--accent); background: var(--accent-wash); padding: 2px 8px; border-radius: 6px; }
  input.time-scrub { width: 100%; accent-color: var(--accent); height: 20px; cursor: grab; }
  input.time-scrub:active { cursor: grabbing; }
  table.readout-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12.5px; }
  table.readout-table th, table.readout-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
  table.readout-table th:first-child, table.readout-table td:first-child { text-align: left; color: var(--text); }
  table.readout-table thead th { color: var(--text-3); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
  table.readout-table tbody td { font-family: "IBM Plex Mono", monospace; }
  table.readout-table tr.active-row { background: var(--accent-wash); }
  table.readout-table tr.total-row td, table.readout-table tr.total-row th { font-weight: 700; border-top: 1.5px solid var(--border-strong); border-bottom: none; }
  table.readout-table .mark-interp { color: var(--text-3); }
  table.readout-table .mark-interp::after { content: " ~"; }
  .sum-hint { font-size: 11px; color: var(--text-3); font-weight: 400; margin: 8px 0 0; }

  .models-card { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 20px; }
  /* Single column, not a multi-column grid — a filename is the whole point
     of this row, so it wraps in full rather than truncating with an
     ellipsis (that hid the very thing Chiara wanted to read at a glance). */
  .models-grid { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
  .model-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-2); }
  .model-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 4px; }
  .model-name { flex: 1; min-width: 0; color: var(--text); word-break: break-word; }
  .model-count { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--text-3); flex: none; white-space: nowrap; margin-top: 1px; }
  .models-source { font-size: 11.5px; color: var(--text-3); margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--border); }
  .models-source a { color: var(--accent); }

  .import-log-card { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 20px; }
  .import-log-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .history-disc-picker { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-2); flex: none; }
  .history-disc-picker .sel { width: auto; padding: 4px 8px; font-size: 12px; }
  .import-log-row { display: grid; grid-template-columns: 178px 1fr auto; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 12px; }
  .import-log-row:first-of-type { border-top: none; }
  .import-log-date { color: var(--text-3); font-family: "IBM Plex Mono", monospace; white-space: nowrap; }
  .import-log-who { color: var(--text-2); }
  .import-log-counts { color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .import-log-counts b { font-weight: 700; }

  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 18, 25, 0.5); display: flex;
    align-items: center; justify-content: center; padding: 20px; z-index: 60;
  }
  .modal-card {
    width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 26px 26px; box-shadow: var(--shadow);
    /* A tall modal (e.g. Project settings' Export PDF tab, with its intro
       textarea plus status/chart checklists) can exceed the viewport height,
       especially on a laptop screen — without this, the card's bottom half
       was simply cut off with no way to reach it. max-height leaves the
       backdrop's own 20px padding on both top and bottom. */
    max-height: calc(100vh - 40px); overflow-y: auto;
  }
  .modal-card h2 { font-size: 18px; margin: 0 0 6px; color: var(--text); }
  .modal-card p { font-size: 12.5px; color: var(--text-2); margin: 0 0 16px; }
  .modal-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 14px; }
  .modal-card input[type="file"] { display: block; width: 100%; margin-top: 6px; padding: 7px 0; }
  .modal-actions { display: flex; gap: 8px; margin-top: 4px; }
  .modal-actions .btn { flex: 1; }
  .modal-card-lg { max-width: 900px; }
  .members-table-wrap { max-height: 340px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
  .members-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .members-table th {
    position: sticky; top: 0; background: var(--surface-2); color: var(--text-3); text-align: left;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
    padding: 8px 10px; border-bottom: 1px solid var(--border);
  }
  .members-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
  .members-table tr:last-child td { border-bottom: none; }
  .members-perm-select { width: auto; min-width: 90px; padding: 5px 8px; font-size: 12px; }
  .members-perm-select:disabled { opacity: 0.5; cursor: not-allowed; }
  .mem-email { font-size: 11px; color: var(--text-3); }
  .mem-edit-input {
    width: 100%; min-width: 90px; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--border-strong);
    background: var(--bg); color: var(--text); font-size: 12px;
  }
  .mem-actions { white-space: nowrap; }
  .mem-actions .link-btn { display: block; font-size: 11.5px; margin: 2px 0; }
  .reimport-summary { font-size: 13px; line-height: 1.7; color: var(--text); margin: 14px 0; }
  .reimport-summary b { font-variant-numeric: tabular-nums; }
  .settings-pic-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .settings-pic-preview { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); flex: none; background: var(--surface-2); }
  .settings-pic-actions { display: flex; flex-direction: column; gap: 6px; }
  .settings-pic-actions input[type="file"] { font-size: 11.5px; }
  .settings-pic-filename { font-size: 11px; color: var(--text-3); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .link-btn { background: none; border: none; color: var(--text-3); font-size: 11.5px; cursor: pointer; padding: 0; text-align: left; }
  .link-btn:hover { color: var(--text); }
  /* Chiara, 2026-09-08: "In settings add General, Companies, etc on the left
     hand side rather than on top" — the tab strip moved from a horizontal
     row above the panels to a vertical nav column beside them. .settings-layout
     is the two-column shell (nav + content) that wraps the h2 and panels;
     .settings-tabs is now that nav column instead of a row. Falls back to
     the old horizontal strip under 640px (a narrow modal has no room for a
     side column and still needs the tab labels to stay readable). */
  .settings-layout { display: flex; gap: 26px; align-items: flex-start; }
  .settings-nav { flex: none; width: 172px; display: flex; flex-direction: column; gap: 2px; }
  .settings-content { flex: 1; min-width: 0; }
  .settings-tabs { display: flex; flex-direction: column; gap: 2px; }
  .settings-tab {
    background: none; border: none; border-left: 2px solid transparent; cursor: pointer;
    text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-3);
    padding: 8px 10px; border-radius: 0 6px 6px 0; white-space: normal; line-height: 1.3;
  }
  .settings-tab:hover { color: var(--text-2); background: var(--surface-2); }
  .settings-tab.is-active { color: var(--text); background: var(--surface-2); border-left-color: var(--accent, var(--text)); }
  .settings-tab-panel { min-height: 120px; }
  @media (max-width: 640px) {
    .settings-layout { display: block; }
    .settings-nav { width: auto; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
    .settings-tabs { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
    .settings-tab { border-left: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 2px 10px; margin-bottom: -1px; white-space: nowrap; }
    .settings-tab.is-active { background: none; border-left-color: transparent; border-bottom-color: var(--accent, var(--text)); }
  }
  .settings-models-wrap { max-height: 340px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; }
  .settings-models-list { display: flex; flex-direction: column; }
  .settings-model-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
  .settings-model-row:last-child { border-bottom: none; }
  /* Chiara, 2026-09-08 (item 7): "Navis Assignment still not be readable.
     it say A.... Archute..." — this was truncating with an ellipsis
     whenever a Navisworks assignee/company/priority-code name didn't fit
     next to its dropdown/count in one line, which got worse once the
     Settings modal moved to a narrower left-nav content column (item 9,
     same day). Wraps onto a second line instead of cutting the text off,
     so the full name is always readable without hovering for the title
     tooltip. min-width keeps it from being squeezed down to nothing
     before it gets a chance to wrap. */
  .settings-model-name { flex: 1 1 160px; min-width: 120px; font-size: 12.5px; color: var(--text); overflow-wrap: break-word; word-break: break-word; white-space: normal; line-height: 1.35; }
  /* Discipline on the Companies & Discipline tab's own rows — this is
     information, same as the company name beside it, not a muted
     secondary note, so it gets the same non-gray text color. Edit/Remove
     stay on .link-btn's gray, since those are actions, not information. */
  .settings-company-disc { flex: 0 0 140px; min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-model-company {
    flex: 0 0 130px; min-width: 0; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-strong);
    background: var(--bg); color: var(--text); font-size: 12px;
  }
  .settings-model-disc-readonly {
    flex: 0 0 130px; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .settings-model-row .mem-edit-input { flex: 1 1 auto; min-width: 60px; width: auto; }
  .settings-model-row .btn-sm { flex: none; white-space: nowrap; }
  .chart-toggle { display: flex; gap: 4px; }
  .chart-toggle .btn { padding: 4px 10px; font-size: 11.5px; }
  .danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
  .danger-zone input[type="text"] { border-color: var(--st-new); }
  .trend-svg-wrap { overflow-x: auto; }
  .trend-point { cursor: default; }

  /* ---- Layout ---- */
  .layout { flex: 1; display: flex; min-height: 0; }
  .rail {
    width: 248px; flex: none; background: var(--surface); border-right: 1px solid var(--border);
    padding: 16px 14px; overflow-y: auto;
  }
  .rail-group { margin-bottom: 20px; }
  .rail-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-3); margin: 0 0 8px;
  }
  .search-input {
    width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong);
    background: var(--bg); color: var(--text); font-size: 13px;
  }
  .search-input:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .chk-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; cursor: pointer; border-radius: 6px; font-size: 13px; }
  .chk-row:hover { background: var(--surface-2); }
  .chk-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; background: var(--bg); }
  .chk-list .chk-row { font-size: 12.5px; }
  .rail-hint { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-3); font-size: 10.5px; }
  .rail-empty { font-size: 12px; color: var(--text-3); margin: 4px 2px; }
  .roster-company { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); margin: 10px 0 3px; }
  .roster-company:first-child { margin-top: 0; }
  .roster-person {
    display: flex; align-items: center; gap: 6px; padding: 4px 2px; font-size: 12.5px; border-radius: 6px;
  }
  .roster-person:hover { background: var(--surface-2); }
  .roster-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .roster-admin-badge {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-radius: 4px; padding: 1px 5px; flex: none;
  }
  .roster-remove { flex: none; background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
  .roster-remove:hover { background: var(--danger-bg, var(--surface-2)); color: var(--danger, var(--text)); }
  .admin-add-form { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
  .admin-checkbox { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 8px; cursor: pointer; }
  .chk-row input { accent-color: var(--accent); width: 15px; height: 15px; }
  .chk-count { margin-left: auto; color: var(--text-3); font-size: 12px; font-family: "IBM Plex Mono", monospace; }
  .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  select.sel {
    width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border-strong);
    background: var(--bg); color: var(--text); font-size: 13px;
  }

  .main { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px 60px; }
  .result-line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--text-2); font-size: 12.5px; }
  .bulk-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px;
    padding: 8px 12px; border-radius: 8px; background: var(--accent-wash); border: 1px solid var(--border);
  }
  .bulk-count { font-size: 12.5px; font-weight: 700; color: var(--text); margin-right: 4px; }
  .bulk-justification-preview {
    margin: 0 0 16px; padding: 8px 10px; border-left: 3px solid var(--border-strong); background: var(--surface-2);
    font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; max-height: 140px; overflow-y: auto;
  }

  .board {
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface);
  }
  .row {
    display: grid;
    /* row-items (the actual clash data — item1/item2 discipline+element+label)
       is the only flexible (1fr) column here. It was previously starved of
       width by two wide fixed columns to its right (190px + 150px + a spare
       34px column no longer used), which — combined with row-items having no
       min-width:0 — let long labels overflow the column instead of eliding,
       visually shoving everything toward the right edge of the row. Trimmed
       the fixed columns and dropped the unused trailing one to fix this. */
    grid-template-columns: 18px 26px 48px 108px 1fr 150px 130px;
    align-items: center; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer;
  }
  /* Issues board rows (Chiara, 2026-09-07) — no bulk-select checkbox column
     (issues have no bulk actions yet), and the title needs real room since
     it's free text she writes, not a short Navisworks id — so this gets its
     own template rather than reusing the 7-column clash one: no 18px
     checkbox slot, and a much wider "title" column (260px vs clashes' 108px)
     so titles wrap less and status/priority/assigned-to still land at the
     right, same visual rhythm as the clash board. */
  .row.irow { grid-template-columns: 26px 48px 260px 1fr 165px 130px; }
  .row-select { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
  .row:last-child { border-bottom: none; }
  .row:hover { background: var(--surface-2); }
  .row.is-open { background: var(--accent-wash); }
  .chev { color: var(--text-3); transition: transform 0.15s ease; font-size: 11px; }
  .row-thumb { width: 48px; height: 48px; flex: none; }
  .row-thumb-img { width: 48px; height: 48px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); display: block; image-rendering: auto; }
  .row-thumb-fallback {
    width: 48px; height: 48px; border-radius: 5px; border: 1px dashed var(--border-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: var(--text-3); background: var(--surface-2); text-align: center;
  }
  .row.is-open .chev { transform: rotate(90deg); }
  .cid { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12.5px; }
  .row-items { min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
  .elems { min-width: 0; }
  .elem-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .elem-line + .elem-line { margin-top: 2px; }
  .elem-line .elem-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .disc-chip { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px; letter-spacing: 0.02em; flex: none; }
  /* Colors set inline per-discipline now (app.js discToken()) — disciplines
     are admin-named free text (Project settings → Models & disciplines),
     not a fixed set, so a static per-name class no longer makes sense. */
  .disc-Other { background: var(--surface-2); color: var(--text-2); }
  .elem-id { font-family: "IBM Plex Mono", monospace; }

  .status-pill {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
    padding: 3px 9px 3px 7px; border-radius: 999px; white-space: nowrap;
  }
  .status-pill .dot { width: 6px; height: 6px; }
  .lock-note {
    font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.02em;
    margin-left: 6px; cursor: help;
  }
  .status-New { color: var(--st-new); background: var(--st-new-bg); }
  .status-Active { color: var(--st-active); background: var(--st-active-bg); }
  .status-Reviewed { color: var(--st-reviewed); background: var(--st-reviewed-bg); }
  .status-Approved { color: var(--st-approved); background: var(--st-approved-bg); }
  .status-Resolved { color: var(--st-resolved); background: var(--st-resolved-bg); }
  /* Issues module statuses (Chiara, 2026-09-07) — reuses the same three
     status colors clashes already use for "in progress / awaiting review /
     done", so Open/In Review/Closed read consistently with New-ish/
     Reviewed/Resolved elsewhere on the board. "In Review" has no space in
     its CSS class (issueStatusClass() in app.js strips it) since a class
     name can't contain one. */
  .status-Open { color: var(--st-active); background: var(--st-active-bg); }
  .status-InReview { color: var(--st-reviewed); background: var(--st-reviewed-bg); }
  .status-Closed { color: var(--st-resolved); background: var(--st-resolved-bg); }

  .priority-badge.priority-Low { color: var(--st-resolved); background: var(--st-resolved-bg); border-color: transparent; }
  .priority-badge.priority-Medium { color: var(--st-reviewed); background: var(--st-reviewed-bg); border-color: transparent; }
  .priority-badge.priority-High { color: var(--st-active); background: var(--st-active-bg); border-color: transparent; }
  .priority-badge.priority-Critical { color: var(--st-new); background: var(--st-new-bg); border-color: transparent; }

  .deadline-badge {
    margin-left: 4px; font-size: 10.5px; font-weight: 600; color: var(--text-3);
    font-family: "IBM Plex Mono", monospace;
  }
  .deadline-badge.is-overdue { color: var(--st-new); font-weight: 700; }

  .assignee { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .assignee.is-empty { color: var(--text-3); font-style: italic; }
  .cmt-count { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-family: "IBM Plex Mono", monospace; }
  .pending-badge { margin-left: 4px; font-size: 10px; }
  /* "Query" vs "Issue" (Chiara, 2026-09-08) — a lighter-weight alternative
     to a full model-pinned Issue; this badge is the only visual difference
     on the board/detail, so it needs to read clearly at a glance. */
  .pill-badge.query-badge {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
    padding: 1px 6px; border-radius: 5px; color: var(--accent-ink); background: var(--accent);
    vertical-align: middle; margin-right: 2px;
  }

  /* ---- Detail panel ----
     Left column: photo + Activity & comments (moved back here, per Chiara —
     it previously ended up buried at the bottom of the right column, in an
     unstyled block, which read as "gone"). Right column: the clash's own
     fields (items, status, assignee, disposition). */
  .detail { grid-column: 1 / -1; padding: 16px; border-bottom: 1px solid var(--border); background: var(--bg); display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
  .detail-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .thumb-wrap { display: flex; flex-direction: column; gap: 6px; align-items: center; }
  .thumb {
    width: 200px; height: 200px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); position: relative; overflow: hidden; cursor: zoom-in;
  }
  .thumb svg { width: 100%; height: 100%; display: block; }
  /* image-rendering:auto (the browser's normal bicubic upscale) reads
     noticeably softer/cleaner than -webkit-optimize-contrast did at this
     size — but the real ceiling here is the source: these clash photos are
     genuinely captured at 44×44px by Navisworks itself, so no CSS/display
     change recovers detail that was never in the file. Click-to-enlarge
     (below) at least makes the most of what's there. */
  .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
  .thumb-note { font-size: 10.5px; color: var(--text-3); text-align: center; line-height: 1.35; }
  /* Created date under the clash ID on the board (Chiara, 2026-09-07): a bit
     smaller than the other .thumb-note text and kept to one line — the cid
     column above was widened slightly (92px -> 108px) to give it the room,
     nudging row-items a touch right rather than letting the date wrap or
     spill into the next column. */
  .row-created { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }

  .lightbox-backdrop {
    position: fixed; inset: 0; background: rgba(10, 12, 16, 0.82); z-index: 300;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    cursor: zoom-out; padding: 24px;
  }
  .lightbox-img { max-width: min(80vw, 480px); max-height: 70vh; border-radius: 10px; box-shadow: var(--shadow); image-rendering: auto; background: var(--surface); }
  .lightbox-note { color: #e7e9ee; font-size: 12px; text-align: center; max-width: 420px; }

  .feed-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .feed { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; background: var(--surface); }
  .feed-item { padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
  .feed-item:first-child { border-top: none; }
  .feed-item b { color: var(--text-2); font-weight: 700; }
  .feed-item .thumb-note { display: inline-block; margin-left: 6px; text-align: left; }
  .feed-item p { margin: 3px 0 0; color: var(--text-2); }

  .comment-attach-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .comment-attach-label { cursor: pointer; }
  .comment-attach-chip {
    font-size: 11px; color: var(--text-3); background: var(--surface); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 6px; margin-right: 4px;
  }
  .comment-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .comment-img-thumb {
    width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border);
    cursor: zoom-in;
  }

  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 0; }
  .field-block { margin-bottom: 14px; }
  .field-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
  .field-value { font-size: 13px; }
  .kv { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-2); }
  .kv b { color: var(--text); }
  .item-extra-fields { font-size: 11px; color: var(--text-3); text-align: left; margin-top: 4px; }
  .item-extra-fields b { color: var(--text-2); font-weight: 600; margin-right: 3px; }
  .item-extra-fields .dot-sep { margin: 0 6px; opacity: 0.6; }

  .form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
  .form-row label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
  .form-row input[type="text"], .form-row select, .form-row textarea {
    padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit;
    width: 100%;
  }
  .form-row textarea { resize: vertical; min-height: 56px; }
  .form-inline { display: flex; gap: 10px; }
  .form-inline > * { flex: 1; }

  .disposition-box {
    border: 1px dashed var(--border-strong); border-radius: 8px; padding: 10px 12px; margin-top: 4px; background: var(--surface);
  }
  .disposition-box.is-set.is-pending { border-style: solid; border-color: var(--st-reviewed); background: var(--st-reviewed-bg); }
  .disposition-box.is-set.is-approved { border-style: solid; border-color: var(--st-approved); background: var(--st-approved-bg); }
  .disp-note { font-size: 12px; color: var(--text-2); margin: 0 0 8px; }
  .disp-status { font-size: 12.5px; font-weight: 600; margin: 8px 0 0; }
  .disp-status-pending { color: var(--st-reviewed); }
  .disp-status-approved { color: var(--st-approved); }

  .comments { margin-top: 4px; }
  .comment { padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
  .comment:first-child { border-top: none; }
  .comment-head { display: flex; justify-content: space-between; color: var(--text-3); font-size: 11px; margin-bottom: 2px; }
  .comment-author { font-weight: 700; color: var(--text-2); }
  .activity-entry { background: var(--surface-2); border-radius: 6px; padding: 6px 8px; border-top: none; margin: 4px 0; }
  .activity-text { color: var(--text-2); font-style: italic; }
  .empty-note { font-size: 12.5px; color: var(--text-3); font-style: italic; padding: 6px 0; }

  .pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 0 4px; color: var(--text-2); font-size: 12.5px; }

  .toast {
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
    background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 8px;
    font-size: 13px; box-shadow: var(--shadow); z-index: 100; opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

  .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }

  @media (max-width: 860px) {
    .rail { display: none; }
    .row { grid-template-columns: 16px 20px 74px 1fr; }
    .row.irow { grid-template-columns: 20px 74px 1fr; }
    .row > .status-pill { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
    .assignee { display: none; }
    .row-thumb { display: none; }
    .stats { grid-template-columns: repeat(4, 1fr); }
    .detail { grid-template-columns: 1fr; }
    .thumb { width: 120px; height: 120px; }
  }

  .guest-preview-banner {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: var(--st-reviewed-bg); color: var(--st-reviewed); border-bottom: 1px solid var(--st-reviewed);
    padding: 8px 16px; font-size: 12.5px; font-weight: 600;
  }

/* ---- Login / project picker ---- */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 20px;
}
.login-card {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 32px 28px; box-shadow: var(--shadow);
}
.login-card-wide { max-width: 460px; }
.login-card input[type="file"] { padding: 7px 0; border: none; background: none; }
.login-logo { height: 32px; width: auto; display: block; margin-bottom: 18px; }
.login-card h1 { font-size: 21px; margin: 0 0 4px; color: var(--text); }
.login-sub { font-size: 13px; color: var(--text-2); margin: 0 0 20px; }
.login-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 14px; }
.login-card input {
  display: block; width: 100%; margin-top: 6px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font-size: 14px;
}
.login-error { color: var(--st-new); font-size: 12.5px; margin-top: 10px; }
.totp-qr { display: block; width: 180px; height: 180px; margin: 0 auto 12px; border-radius: 8px; border: 1px solid var(--border); }
.totp-secret-fallback { font-size: 11.5px; color: var(--text-3); text-align: center; margin: 0 0 20px; word-break: break-all; }
.totp-secret-fallback code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.privacy-notice {
  font-size: 12.5px; line-height: 1.5; color: var(--text-2); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px;
}
.invite-checkbox { display: flex !important; align-items: flex-start; gap: 8px; font-weight: 500 !important; margin-bottom: 18px !important; }
.invite-checkbox input { width: auto !important; margin: 2px 0 0 !important; }
.mem-status-badge {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  border-radius: 4px; padding: 1px 6px; vertical-align: middle;
}
.mem-status-invited { background: var(--st-new-bg, rgba(255,180,0,0.15)); color: var(--st-new, #b98a00); }
.mem-status-no2fa { background: var(--bg); color: var(--text-3); border: 1px solid var(--border); }
.project-list { display: flex; flex-direction: column; gap: 8px; }
.project-item {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--bg);
}
.project-item:hover { border-color: var(--accent); background: var(--accent-wash); }
.project-item .role { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-3); }

.me-pill { font-size: 12px; color: var(--text-2); padding: 0 6px; white-space: nowrap; }

.roster-company { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); margin: 10px 0 3px; }
.roster-company:first-child { margin-top: 0; }
.roster-person { display: flex; align-items: center; gap: 6px; padding: 4px 2px; font-size: 12.5px; border-radius: 6px; }
.roster-person:hover { background: var(--surface-2); }
.roster-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-admin-badge {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-radius: 4px; padding: 1px 5px; flex: none;
}
.roster-remove { flex: none; background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.roster-remove:hover { background: var(--surface-2); }
.admin-add-form { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.admin-checkbox { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 8px; cursor: pointer; }

.lock-note { font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.02em; margin-left: 6px; cursor: help; }
.row-thumb { width: 40px; height: 40px; flex: none; }
.row-thumb-img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); display: block; }
.row-thumb-fallback {
  width: 40px; height: 40px; border-radius: 5px; border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--text-3); background: var(--surface-2);
}
.thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }