/* Graphite theme (Settings ▸ Appearance ▸ Theme): a soft slate-grey look with a muted steel-blue
   accent. Matte surfaces, no glow, so it stays calm all day. Layered over styles.css: mostly it swaps
   the colour variables. Orange still means "needs you". Applies while <html> has theme-graphite. */
html.theme-graphite {
  --canvas: #23272f; --surface: #2b3039; --ink: #e4e7ec; --muted: #9aa1ad; --faint: #6f7683;
  --line: #3a404b; --line-soft: #323741;
  --rail: #1c1f26; --rail-hover: #2a2f38; --rail-active: #343a45; --rail-ink: #e4e7ec; --rail-muted: #8b93a0;
  --accent: #7aa2d6; --accent-ink: #14202e; --accent-soft: rgba(122, 162, 214, .16);
  --signal: #f0a35a; --signal-soft: rgba(240, 163, 90, .16); --signal-ink: #f5bd85;
  --bad: #e88a86; --bad-soft: rgba(232, 138, 134, .16);
  --well: #252930; /* inputs and code: a touch darker than the page */
  color-scheme: dark;
}

html.theme-graphite ::-webkit-scrollbar { width: 10px; height: 10px; }
html.theme-graphite ::-webkit-scrollbar-thumb { background: #454c58; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
html.theme-graphite ::-webkit-scrollbar-thumb:hover { background-color: #565e6b; }
html.theme-graphite ::-webkit-scrollbar-track { background: transparent; }

/* Matte cards with a soft drop shadow instead of glow */
html.theme-graphite .panel, html.theme-graphite .agenda-card, html.theme-graphite .stats, html.theme-graphite .pj-files,
html.theme-graphite .pj-changes, html.theme-graphite .pj-log, html.theme-graphite .pcard {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 14px rgba(0, 0, 0, .12); }
html.theme-graphite #listCol { background: #272b33; }
html.theme-graphite .item.on { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
html.theme-graphite .item:hover { background: #2f343e; }

/* Fields and code sit in a slightly darker well */
html.theme-graphite input, html.theme-graphite select, html.theme-graphite textarea { background: var(--well); border-color: var(--line); }
html.theme-graphite input:focus, html.theme-graphite select:focus, html.theme-graphite textarea:focus { background: var(--well); }
html.theme-graphite .md pre, html.theme-graphite pre.code, html.theme-graphite pre.diff, html.theme-graphite .pj-code { background: var(--well); }
html.theme-graphite .md :not(pre) > code { background: #353b46; }
html.theme-graphite .btn { background: #313641; border-color: var(--line); }
html.theme-graphite .btn:hover { border-color: #565e6b; }
html.theme-graphite .btn.quiet { background: transparent; border-color: transparent; }
html.theme-graphite .btn.quiet:hover { background: #333944; }
html.theme-graphite .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

/* Chat */
html.theme-graphite .msg.user { background: #364257; color: var(--ink); }
html.theme-graphite .model-menu, html.theme-graphite .toast { background: #333944; color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }

/* Menu: the side rail and the dock are a deeper graphite; the open page uses the accent */
html.theme-graphite .rail { border-right: 1px solid #2c3039; }
html.theme-graphite .nav a.on svg { color: var(--accent); }
html.theme-graphite .mark .tile { background: linear-gradient(180deg, #4a5466, #2f3644); }
html.theme-graphite .shell.dock .rail { background: rgba(28, 31, 38, .94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06); }
html.theme-graphite .shell.dock .nav a.on, html.theme-graphite .shell.dock .ask-claude.on { background: var(--accent-soft); }
html.theme-graphite .shell.dock .nav a.on::after { background: var(--accent); }
html.theme-graphite .shell.dock .nav a .label, html.theme-graphite .shell.dock .ask-claude .label { background: #3a404b; color: var(--ink); }

html.theme-graphite .savebar { background: linear-gradient(transparent, var(--canvas) 30%); }