/* Spotsheet design tokens — from Brief 1 (ported for the extension) */

:root {
  --bg-app:        #2e3135;
  --bg-deep:       #232528;
  --bg-panel:      #33363b;
  --bg-sub:        #3a3d42;
  --bg-row:        #2f3236;
  --bg-row-hover:  #383b40;
  --bg-row-sel:    #34414a;
  --bg-row-multi:  #333f47;

  --line:          #44484e;
  --line-strong:   #545861;
  --line-soft:     #3a3d42;

  --fg:            #d4d7dc;
  --fg-strong:     #ebedf0;
  --fg-mute:       #8b8f96;
  --fg-dim:        #5b5f66;
  --fg-faint:      #3d4047;

  --teal:          #35C5C7;
  --teal-deep:     #1e8587;
  --teal-bg:       rgba(53,197,199,0.07);
  --teal-line:     rgba(53,197,199,0.32);
  --teal-glow:     rgba(53,197,199,0.18);

  --wave-fill:     #69707a;
  --wave-played:   #a9e0df;
  --tc-green:      #8aae93;
  --cue-amber:     #c19355;

  --st-open:       #8b8f96;
  --st-resolved:   #7a9a86;
  --st-flagged:    #c19355;
  --st-danger:     #b46868;

  --cat-foley:     #c89d6a;
  --cat-fx:        #9b8ec9;
  --cat-dlg:       #6ba3d0;
  --cat-mus:       #d08aa3;
  --cat-bg:        #739683;

  --as-teal:   #4fb3b5;
  --as-rose:   #c47f95;
  --as-amber:  #b88752;
  --as-lilac:  #9080c0;
  --as-sky:    #6695bd;
  --as-sage:   #739683;
  --as-clay:   #b07260;

  --ui:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-1: 2px;
  --r-2: 3px;
  --r-3: 4px;
  --r-sheet: 8px;

  --inset-panel: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 -1px 0 rgba(0,0,0,0.4);
  --float: 0 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.45);

  --btn-grad:   linear-gradient(180deg, #3e4248 0%, #34373c 100%);
  --btn-grad-h: linear-gradient(180deg, #474b51 0%, #3c4046 100%);

  --st-resolved-bg: rgba(122,154,134,0.10);
  --st-flagged-bg:  rgba(193,147,85,0.10);
  --st-danger-bg:   rgba(180,104,104,0.10);
}

* { box-sizing: border-box; }

.mono, .num, .tc { font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; }

/* Buttons */
.nt-btn { font-family: var(--ui); font-size: 12px; letter-spacing: 0.02em; color: var(--fg); background: var(--btn-grad); border: 1px solid var(--line); border-radius: var(--r-2); padding: 6px 12px; height: 28px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--inset-panel); transition: background 0.15s, border-color 0.15s, color 0.15s; user-select: none; }
.nt-btn:hover { background: var(--btn-grad-h); color: var(--fg-strong); }
.nt-btn:active { transform: translateY(0.5px); }
.nt-btn.primary { border-color: var(--teal-line); color: var(--teal); }
.nt-btn.primary:hover { border-color: var(--teal); color: var(--teal); background: linear-gradient(180deg, rgba(53,197,199,0.10), rgba(53,197,199,0.04)); }
.nt-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--fg-mute); }
.nt-btn.ghost:hover { background: var(--bg-sub); color: var(--fg); }
.nt-btn.danger { border-color: rgba(180,104,104,0.4); color: var(--st-danger); }
.nt-btn.danger:hover { background: var(--st-danger-bg); }
.nt-btn.sm { height: 22px; padding: 0 8px; font-size: 11px; }
.nt-btn.lg { height: 36px; padding: 0 16px; font-size: 13px; }
.nt-btn.full { width: 100%; justify-content: center; }
.nt-btn[disabled] { color: var(--fg-faint); border-color: var(--line-soft); cursor: not-allowed; }

/* SS monogram mark */
.nt-mark { width: 26px; height: 26px; border-radius: var(--r-2); background: linear-gradient(150deg, #2a2d33 0%, #1a1c20 100%); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.02em; position: relative; overflow: hidden; flex-shrink: 0; }
.nt-mark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(53,197,199,0.10) 0%, transparent 60%); pointer-events: none; }
.nt-mark.lg { width: 40px; height: 40px; font-size: 13px; border-radius: var(--r-3); }

/* Assignee circle */
.nt-as { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-family: var(--ui); font-weight: 600; letter-spacing: 0.04em; color: rgba(0,0,0,0.65); user-select: none; flex-shrink: 0; }
.nt-as.sm { width: 18px; height: 18px; font-size: 8px; }

/* Select */
.nt-select { font-family: var(--ui); font-size: 13px; color: var(--fg); background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-2); height: 32px; width: 100%; padding: 0 8px 0 12px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,0.45); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.nt-select:hover { border-color: var(--line-strong); }
.nt-select:focus, .nt-select.open { border-color: var(--teal-line); box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 0 0 3px var(--teal-glow); }
.nt-select > span:first-child { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-select .nt-select-chev { color: var(--fg-dim); display: inline-flex; flex-shrink: 0; }

/* Scroll */
.nt-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.nt-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.nt-scroll::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; color: var(--fg-strong); }
::selection { background: var(--teal-line); color: var(--fg-strong); }