@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ========================================================
   GRAPHITE THEME
   Premium dark theme inspired by graphite, charcoal,
   drafting tools, and polished steel surfaces.
   ======================================================== */

[data-theme="graphite"] {
  /* ── Chromatic Glass palette ─────────────────── */
  --graphite-900: #02030a;
  --graphite-800: #06091a;
  --graphite-700: #0b1028;
  --graphite-600: #121836;
  --graphite-500: #1a2446;
  --graphite-400: #2e4070;
  --graphite-300: #5a80b8;
  --graphite-200: #90b8e0;
  --graphite-100: #c8e0f4;
  --graphite-50:  #e8f4fc;

  /* ── Iridescent spectrum (oil-on-water / tempered metal) ─ */
  --iris-blue:      #4d9fff;
  --iris-cyan:      #00dfff;
  --iris-violet:    #a878ff;
  --iris-lavender:  #c8b4ff;
  --iris-rose:      #ff90c8;
  --iris-silver:    rgba(200, 224, 255, 0.82);

  /* Gold accent — elevated to champagne */
  --graphite-gold:       #d8ae58;
  --graphite-gold-light: #f4d080;
  --graphite-gold-soft:  rgba(216, 174, 88, 0.14);

  /* ── Standard app variables ───────────────────── */
  --bg:               #02030a;
  --bg-elev:          #06091a;
  --bg-glass:         rgba(6, 9, 20, 0.82);
  --text:             #eaf4fe;
  --text-soft:        #9db9d4;
  --primary:          #4d9fff;
  --primary-strong:   #90c8ff;
  --primary-soft:     rgba(77, 159, 255, 0.12);
  --accent:           #d8ae58;
  --accent-soft:      rgba(216, 174, 88, 0.14);
  --urge-accent:      #d8b060;
  --urge-accent-soft: rgba(216, 176, 96, 0.14);
  --avoidance-accent:      #4d9fff;
  --avoidance-accent-soft: rgba(77, 159, 255, 0.14);
  --action-card-shadow:
    0 10px 30px rgba(0, 0, 0, 0.36),
    0 0 1px rgba(148, 174, 187, 0.12) inset,
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --action-card-border: rgba(255, 255, 255, 0.09);
  --border:        rgba(255, 255, 255, 0.08);
  --chip:          #08091a;
  --danger:        #ff4d72;
  --warning-bg:    rgba(216, 174, 88, 0.14);
  --warning-text:  #f4d080;
  --shadow:        0 28px 72px rgba(0, 0, 0, 0.80);
  --dropdown-bg:           #06091a;
  --dropdown-border:       rgba(255, 255, 255, 0.08);
  --dropdown-text:         #eaf4fe;
  --dropdown-focus-border: #4d9fff;
  --dropdown-focus-shadow: 0 0 0 3px rgba(77, 159, 255, 0.22);

  /* ── Graphite-specific extras ───────────────────── */
  --graphite-surface-raised: #0b1028;
  --graphite-border-bright:  rgba(255, 255, 255, 0.14);
  --graphite-shadow-card:
    0 16px 56px rgba(0, 0, 0, 0.78),
    0 1px 0 rgba(255, 255, 255, 0.09) inset;
  --graphite-shadow-raised:
    0 28px 80px rgba(0, 0, 0, 0.88),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;

  /* ── Notebook paper – Chore Mode (unchanged) ───────── */
  --graphite-paper:        #f2ede3;
  --graphite-paper-line:   rgba(70, 90, 110, 0.13);
  --graphite-paper-margin: rgba(190, 95, 80, 0.22);
  --graphite-paper-ring:   rgba(155, 148, 135, 0.52);
  --graphite-paper-shadow:
    0 8px 24px rgba(0, 0, 0, 0.55),
    2px 2px 6px rgba(0, 0, 0, 0.24);
  --graphite-ink:          #2b3840;
  --graphite-ink-soft:     #586870;
  --graphite-check-stroke: #2c5629;
}




/* ── BACKGROUND: Void black + iridescent prismatic atmosphere ─── */
[data-theme="graphite"] .app-bg {
  background:
    radial-gradient(ellipse 90% 60% at  8%  2%,  rgba(77, 159, 255, 0.32), transparent),
    radial-gradient(ellipse 70% 50% at 92%  3%,  rgba(168, 120, 255, 0.26), transparent),
    radial-gradient(ellipse 80% 55% at 48% 100%, rgba(0,  223, 255, 0.28), transparent),
    radial-gradient(ellipse 50% 40% at 78%  58%, rgba(168, 120, 255, 0.14), transparent),
    radial-gradient(ellipse 40% 35% at 18%  72%, rgba(77,  159, 255, 0.12), transparent),
    linear-gradient(180deg, #02030a 0%, #010208 100%);
}




/* Fixed prismatic atmospheric layer — orbs visible behind every screen */
[data-theme="graphite"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 800px 600px at 12%  12%, rgba(77,  159, 255, 0.16), transparent),
    radial-gradient(ellipse 700px 500px at 88%  6%,  rgba(168, 120, 255, 0.14), transparent),
    radial-gradient(ellipse 1000px 700px at 50% 94%, rgba(0,  223, 255, 0.15), transparent),
    radial-gradient(ellipse 500px 400px at 72%  52%, rgba(216, 174, 88,  0.08), transparent);
}




/* Fine chromatic grain texture */
[data-theme="graphite"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.20;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.022'/%3E%3C/svg%3E");
}




/* ----- Cards & Surfaces ----- */
/* ── GLASSMORPHISM CARDS ─────────────────────────────────────── */
[data-theme="graphite"] .card,
[data-theme="graphite"] .chart-card,
[data-theme="graphite"] .summary-panel,
[data-theme="graphite"] .settings-block,
[data-theme="graphite"] .results-type-row,
[data-theme="graphite"] .filter-row,
[data-theme="graphite"] .history-item,
[data-theme="graphite"] .time-record-card,
[data-theme="graphite"] .optional-group,
[data-theme="graphite"] .follow-up-block,
[data-theme="graphite"] .end-week-progress-card,
[data-theme="graphite"] .end-week-completion-state,
[data-theme="graphite"] .end-week-group-card,
[data-theme="graphite"] .chore-game-mode-card,
[data-theme="graphite"] .chore-selection-summary,
[data-theme="graphite"] .chore-settings-card,
[data-theme="graphite"] .chore-draft-prompt,
[data-theme="graphite"] .chore-game-mode-status,
[data-theme="graphite"] .topbar,
[data-theme="graphite"] .time-picker-card,
[data-theme="graphite"] .motivation-modal-card,
[data-theme="graphite"] .suggestions-card {
  background: rgba(14, 20, 30, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.60),
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 rgba(0, 0, 0, 0.30) inset;
  border-radius: 20px;
}




/* Modal/time-picker surface colours are set once in MODAL STYLING below. */
[data-theme="graphite"] .time-picker-card,
[data-theme="graphite"] .motivation-modal-card {
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
}




[data-theme="graphite"] .editable-row,
[data-theme="graphite"] .chart-preference-row,
[data-theme="graphite"] .diagnostics-row,
[data-theme="graphite"] .kv-item,
[data-theme="graphite"] .stat-card,
[data-theme="graphite"] .time-record-display,
[data-theme="graphite"] .state-choice,
[data-theme="graphite"] .choice-card,
[data-theme="graphite"] .hamburger-item {
  background: rgba(8, 12, 26, 0.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.56),
    0 0 0 0.5px rgba(77, 159, 255, 0.06) inset;
  transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
}




/* ----- Topbar ----- */
[data-theme="graphite"] .topbar {
  background: rgba(2, 3, 10, 0.88);
  backdrop-filter: blur(32px) saturate(2.0);
  -webkit-backdrop-filter: blur(32px) saturate(2.0);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.60),
    0 0 80px rgba(77, 159, 255, 0.05);
}




[data-theme="graphite"] .topbar h1 {
  background: linear-gradient(100deg,
    #c8e8ff  0%,
    #90c8ff 20%,
    #c8b4ff 45%,
    #90c8ff 70%,
    #f4d080 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.01em;
  font-weight: 900;
  filter: drop-shadow(0 0 12px rgba(77, 159, 255, 0.28));
}




[data-theme="graphite"] .tagline {
  color: var(--text-soft);
}




/* ----- Primary Button ----- */
[data-theme="graphite"] .primary-btn {
  background: rgba(6, 9, 22, 0.90);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.64),
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 0 0 0.5px rgba(77, 159, 255, 0.10) inset;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}




/* Diagonal iridescent sheen on every button */
[data-theme="graphite"] .primary-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    rgba(77,  159, 255, 0.10)  0%,
    rgba(168, 120, 255, 0.08) 30%,
    transparent               55%,
    rgba(0,  223, 255, 0.06)  80%,
    transparent               100%
  );
  opacity: 0.8;
  transition: opacity 0.20s ease;
  pointer-events: none;
}




[data-theme="graphite"] .primary-btn:hover {
  background: rgba(10, 14, 32, 0.96);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 16px 56px rgba(0, 0, 0, 0.76),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 28px rgba(77, 159, 255, 0.16),
    0 0 0 1px rgba(77, 159, 255, 0.12) inset;
  transform: translateY(-2px);
}




[data-theme="graphite"] .primary-btn:hover::before {
  opacity: 1;
}




[data-theme="graphite"] .primary-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.50),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}




[data-theme="graphite"] .primary-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(77, 159, 255, 0.60),
    0 0 24px rgba(77, 159, 255, 0.24);
}




[data-theme="graphite"] .screen[data-screen="home"] .primary-btn,
[data-theme="graphite"] .screen[data-screen="results"] .primary-btn {
  background: linear-gradient(145deg, #38444f, #28343e);
  border-color: rgba(179, 142, 69, 0.32);
}




[data-theme="graphite"] .screen[data-screen="chore"] .primary-btn,
[data-theme="graphite"] .screen[data-screen="end-week"] .primary-btn,
[data-theme="graphite"] .screen[data-screen="chore-settings"] .primary-btn,
[data-theme="graphite"] .screen[data-screen="end-week-settings"] .primary-btn {
  background: linear-gradient(145deg, #2e3c48, #22303a);
  border-color: rgba(179, 142, 69, 0.26);
}




[data-theme="graphite"] .screen[data-screen="add"] .primary-btn {
  background: linear-gradient(145deg, #2d3c4a, #23303e);
  border-color: rgba(184, 146, 74, 0.28);
}




/* ----- Chip / Action / Nav / Theme buttons ----- */
[data-theme="graphite"] .chip-btn,
[data-theme="graphite"] .action-btn,
[data-theme="graphite"] .range-btn,
[data-theme="graphite"] .results-type-btn,
[data-theme="graphite"] .nav-btn,
[data-theme="graphite"] .theme-toggle {
  background: rgba(6, 9, 22, 0.82);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.48),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}




[data-theme="graphite"] .chip-btn:hover,
[data-theme="graphite"] .action-btn:hover,
[data-theme="graphite"] .range-btn:hover,
[data-theme="graphite"] .results-type-btn:hover,
[data-theme="graphite"] .nav-btn:hover,
[data-theme="graphite"] .theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(10, 14, 32, 0.92);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.60),
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 16px rgba(77, 159, 255, 0.10);
}




[data-theme="graphite"] .chip-btn:active,
[data-theme="graphite"] .action-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}




[data-theme="graphite"] .range-btn.active,
[data-theme="graphite"] .results-type-btn.active,
[data-theme="graphite"] .nav-btn.active,
[data-theme="graphite"] .chore-game-mode-toggle .chip-btn.active {
  background: rgba(77, 159, 255, 0.14);
  border-color: rgba(77, 159, 255, 0.40);
  box-shadow:
    0 0 0 1px rgba(77, 159, 255, 0.20) inset,
    0 0 24px rgba(77, 159, 255, 0.16);
}




/* ----- Choice Cards ----- */
[data-theme="graphite"] .choice-card {
  background: rgba(6, 9, 22, 0.80);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.60),
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
  transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}




[data-theme="graphite"] .choice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    rgba(77,  159, 255, 0.06)  0%,
    transparent               40%,
    rgba(168, 120, 255, 0.04) 100%
  );
  opacity: 0;
  transition: opacity 0.20s ease;
  pointer-events: none;
}




[data-theme="graphite"] .choice-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(8, 12, 28, 0.92);
  transform: translateY(-2px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.72),
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 28px rgba(77, 159, 255, 0.10);
}




[data-theme="graphite"] .choice-card:hover::before {
  opacity: 1;
}




[data-theme="graphite"] .choice-card.selected {
  border-color: rgba(77, 159, 255, 0.52);
  background: rgba(77, 159, 255, 0.10);
  color: #90c8ff;
  box-shadow:
    0 0 0 1px rgba(77, 159, 255, 0.24) inset,
    0 10px 36px rgba(0, 0, 0, 0.64),
    0 0 32px rgba(77, 159, 255, 0.14);
  position: relative;
}




[data-theme="graphite"] .choice-card.selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  color: rgba(77, 159, 255, 0.90);
  font-size: 1.1rem;
  font-weight: 900;
  filter: drop-shadow(0 0 6px rgba(77, 159, 255, 0.60));
}




[data-theme="graphite"] .choice-card:active {
  transform: translateY(0) scale(0.97);
}




[data-theme="graphite"] #homeGameModeTotalPoints {
  color: var(--graphite-gold-light);
  font-size: 2rem;
  font-weight: 900;
  text-shadow:
    0 0 16px rgba(216, 174, 88, 0.40),
    0 0 32px rgba(216, 174, 88, 0.20);
}




[data-theme="graphite"] #homeGameModeCurrentRank,
[data-theme="graphite"] #homeGameModeWeekPoints {
  color: #90c8ff;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(77, 159, 255, 0.30);
}




[data-theme="graphite"] #homeGameModeNextRank {
  color: var(--text-soft);
}




[data-theme="graphite"] .home-game-mode-progress {
  background: rgba(148, 174, 187, 0.10);
  border-color: rgba(148, 174, 187, 0.14);
}




[data-theme="graphite"] .home-game-mode-progress-fill {
  background: linear-gradient(90deg, #6a8090, #b38e45);
}




/* ----- Stat Cards ----- */
[data-theme="graphite"] .stat-card {
  background: linear-gradient(145deg, #242d36, #1e2730);
  border-color: rgba(148, 174, 187, 0.14);
  box-shadow: var(--graphite-shadow-card);
}




[data-theme="graphite"] .stat-card .label {
  color: var(--text-soft);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}




[data-theme="graphite"] .stat-card .value {
  color: var(--primary-strong);
}




/* ----- Section titles ----- */
[data-theme="graphite"] .results-section-title,
[data-theme="graphite"] .settings-block > h2,
[data-theme="graphite"] .summary-panel > h2 {
  border-left: 3px solid rgba(148, 174, 187, 0.52);
  padding-left: 8px;
  letter-spacing: 0.02em;
}




[data-theme="graphite"] .filter-row {
  border-top: 3px solid rgba(88, 128, 160, 0.42);
}




[data-theme="graphite"] .summary-panel {
  border-top: 3px solid rgba(148, 174, 187, 0.30);
}




/* ----- Text colors ----- */
[data-theme="graphite"] .step-label,
[data-theme="graphite"] .field-help,
[data-theme="graphite"] .type-chip,
[data-theme="graphite"] .chart-summary,
[data-theme="graphite"] .empty-state-subtitle,
[data-theme="graphite"] .history-controls label,
[data-theme="graphite"] .k {
  color: var(--text-soft);
}




/* ----- Backdrops ----- */
[data-theme="graphite"] .time-picker-backdrop,
[data-theme="graphite"] .hamburger-backdrop {
  background: rgba(6, 10, 16, 0.74);
}




/* ----- Animation Keyframes ----- */
@keyframes graphite-pencil-in {
  0%   { opacity: 0; transform: translateY(-50%) translateX(-14px) rotate(-38deg); }
  100% { opacity: 1; transform: translateY(-50%) translateX(0)     rotate(-38deg); }
}




@keyframes graphite-pencil-out {
  0%   { opacity: 1; transform: translateY(-50%) translateX(0)    rotate(-38deg); }
  100% { opacity: 0; transform: translateY(-50%) translateX(10px) rotate(-28deg); }
}




@keyframes graphite-check-draw {
  0%   { stroke-dashoffset: 28; }
  100% { stroke-dashoffset: 0;  }
}




/* ----- Game Mode in Chore context ----- */
[data-theme="graphite"] .chore-game-mode-card {
  background: linear-gradient(145deg, #20303c, #192633);
  border-color: rgba(179, 142, 69, 0.24);
}




/* ----- Motivation screen ----- */
[data-theme="graphite"] .screen[data-screen="motivation"] .primary-btn {
  background: rgba(10, 8, 24, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(168, 120, 255, 0.28);
}




/* ----- Edit entry button ----- */
[data-theme="graphite"] .edit-entry-btn {
  background: rgba(77, 159, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(77, 159, 255, 0.18);
  color: #90c8ff;
  transition: all 0.18s ease;
}




[data-theme="graphite"] .edit-entry-btn:hover {
  background: rgba(77, 159, 255, 0.14);
  border-color: rgba(77, 159, 255, 0.32);
  box-shadow: 0 0 20px rgba(77, 159, 255, 0.12);
}




/* ----- Danger / delete buttons ----- */
[data-theme="graphite"] .delete-btn,
[data-theme="graphite"] .action-btn.danger,
[data-theme="graphite"] .chip-btn.danger {
  background: rgba(194, 86, 86, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(194, 86, 86, 0.28);
  box-shadow: 0 0 16px rgba(194, 86, 86, 0.06);
}




/* ----- Input / select / textarea overrides ----- */
/* Base already uses CSS vars, but add focus ring in graphite accent */
[data-theme="graphite"] input:focus-visible,
[data-theme="graphite"] select:focus-visible,
[data-theme="graphite"] textarea:focus-visible,
[data-theme="graphite"] .details-select:focus-visible {
  outline: none;
  border-color: rgba(122, 170, 187, 0.60);
  box-shadow: 
    0 0 0 3px rgba(122, 170, 187, 0.14),
    0 0 20px rgba(122, 170, 187, 0.10);
}




/* ----- Type chip (history/results badge) ----- */
[data-theme="graphite"] .type-chip {
  background: rgba(122, 170, 187, 0.08);
  backdrop-filter: blur(4px);
  color: rgba(173, 200, 214, 0.85);
  border: 1px solid rgba(122, 170, 187, 0.16);
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
}




/* ----- State choice selected state ----- */
[data-theme="graphite"] .state-choice.selected {
  background: rgba(148, 174, 187, 0.16);
  border-color: rgba(148, 174, 187, 0.48);
  color: var(--primary-strong);
}




/* ----- Add flow choice cards: urge/avoidance type selection ----- */
[data-theme="graphite"] .choice-card[data-select-type="urge"].selected {
  border-color: rgba(184, 146, 74, 0.62);
  background: linear-gradient(145deg, rgba(184, 146, 74, 0.14), #22303e);
}




[data-theme="graphite"] .choice-card[data-select-type="avoidance"].selected {
  border-color: rgba(88, 128, 160, 0.60);
  background: linear-gradient(145deg, rgba(88, 128, 160, 0.14), #22303e);
}




/* ----- Save-exit btn (chore mode) ----- */
[data-theme="graphite"] .save-exit-btn {
  border-color: rgba(148, 174, 187, 0.30);
  background: rgba(148, 174, 187, 0.10);
  color: var(--primary-strong);
}




/* ----- Follow-up block (edit view) ----- */
[data-theme="graphite"] .follow-up-block {
  background: rgba(148, 174, 187, 0.06);
  border-color: rgba(148, 174, 187, 0.18);
}




/* ============================================================
   GRAPHITE EXTENDED VISUAL SYSTEM
   Full app-wide identity – adapts the graphite visual language
   to every major section without repeating Chore Mode literally.
   ============================================================ */

/* ── TYPOGRAPHY SYSTEM ────────────────────────────────────── */

/* Step / page labels: gold annotation marks */
[data-theme="graphite"] .step-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--graphite-gold-light) !important;
}




/* Wizard help text: italic annotation voice */
[data-theme="graphite"] .step-help {
  font-style: italic;
}




/* Heading letter-spacing */
[data-theme="graphite"] h2 {
  letter-spacing: 0.01em;
}




[data-theme="graphite"] h3 {
  letter-spacing: 0.005em;
}




/* Summary panel + settings heading: index/report label */
[data-theme="graphite"] .summary-panel > h2,
[data-theme="graphite"] .settings-block > h2 {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-soft);
}




/* ── ADD / URGE / AVOIDANCE WIZARD ─────────────────────────── */

/* Wizard card: graphite form surface with soft top accent */
[data-theme="graphite"] .screen[data-screen="add"] .card.add-shell {
  border-top: 2px solid rgba(148, 174, 187, 0.24);
}




/* Wizard header: dashed separator below title */
[data-theme="graphite"] .add-head {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(148, 174, 187, 0.14);
}




[data-theme="graphite"] .add-head h2 {
  color: var(--graphite-100);
}




/* Choice cards: left notebook-tab border */
[data-theme="graphite"] .choice-card {
  border-left-width: 3px;
  border-left-color: transparent;
}




[data-theme="graphite"] .choice-card.selected {
  border-left-color: rgba(148, 174, 187, 0.72);
}




[data-theme="graphite"] .choice-card[data-select-type="urge"].selected {
  border-left-color: rgba(179, 142, 69, 0.85);
}




[data-theme="graphite"] .choice-card[data-select-type="avoidance"].selected {
  border-left-color: rgba(88, 128, 160, 0.85);
}




/* Stat cards: corner fold mark (pinned note aesthetic) */
[data-theme="graphite"] .stat-card {
  position: relative;
  overflow: hidden;
}




[data-theme="graphite"] .stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent rgba(148, 174, 187, 0.16) transparent transparent;
  pointer-events: none;
}




/* ── TEXTAREA: LINED WRITING SURFACE ────────────────────────── */

[data-theme="graphite"] textarea {
  border-color: rgba(148, 174, 187, 0.20);
  line-height: 1.65;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 23px,
    rgba(148, 174, 187, 0.07) 23px,
    rgba(148, 174, 187, 0.07) 24px
  );
  background-attachment: local;
  background-position: 0 10px;
}




/* Total points: prominent display */
[data-theme="graphite"] #homeGameModeTotalPoints {
  font-size: 1.45rem;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(179, 142, 69, 0.20);
}




/* Progress track: engraved/sunken feel */
[data-theme="graphite"] .home-game-mode-progress {
  height: 7px;
  border-radius: 4px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.30);
}




/* ── OUTCOME / FOLLOW-UP CONNECTOR ─────────────────────────── */

/* Gold left accent: visually connects to original entry */
[data-theme="graphite"] .follow-up-block {
  border-left-width: 3px;
  border-left-color: rgba(179, 142, 69, 0.45);
}




/* ── COPY SUMMARY BUTTON ────────────────────────────────────── */

[data-theme="graphite"] #copyBtn,
[data-theme="graphite"] #copySummaryBtn,
[data-theme="graphite"] [data-action="copy"] {
  background: linear-gradient(145deg, #2c3844, #232e38);
  border: 1px solid rgba(148, 174, 187, 0.24);
  letter-spacing: 0.02em;
}




/* ── EMPTY STATES ───────────────────────────────────────────── */

[data-theme="graphite"] .empty-state {
  color: var(--text-soft);
}




[data-theme="graphite"] .empty-state-subtitle {
  color: rgba(130, 152, 164, 0.65);
  font-style: italic;
}




/* ============================================================
   GRAPHITE – COMPLETE COMPONENT SYSTEM
   All UI elements styled for cohesion and premium feel
   ============================================================ */

/* ── EMPTY STATES ───────────────────────────────────────────── */

[data-theme="graphite"] .empty-state {
  background: rgba(10, 15, 24, 0.60);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.44);
  gap: 10px;
}




[data-theme="graphite"] .empty-state-title {
  color: #adc8d6;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
}




[data-theme="graphite"] .empty-state-subtitle {
  color: rgba(106, 136, 152, 0.90);
  font-style: italic;
  font-weight: 500;
}




/* Empty state SVG icon (the shared .cp-icon artwork), centered above the text */
[data-theme="graphite"] .empty-state svg {
  width: 28px;
  height: 28px;
  stroke: rgba(148, 174, 187, 0.32);
  stroke-width: 1.5;
  fill: none;
  max-width: 48px;
  max-height: 48px;
  margin: 8px auto;
}




/* ── TOAST MESSAGES ────────────────────────────────────────── */

[data-theme="graphite"] .toast {
  background: rgba(10, 14, 22, 0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #adc8d6;
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.60),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}




[data-theme="graphite"] .toast.show {
  animation: graphite-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}




/* ── LIST STYLING ──────────────────────────────────────────── */

[data-theme="graphite"] .editable-list {
  gap: 6px;
}




[data-theme="graphite"] .editable-row {
  border-left: 2px solid rgba(148, 174, 187, 0.12);
  background: linear-gradient(145deg, #242d36, #1e2730);
  border: 1px solid rgba(148, 174, 187, 0.14);
  transition: border-left-color 0.2s ease, background 0.2s ease;
}




[data-theme="graphite"] .editable-row:hover {
  border-left-color: rgba(148, 174, 187, 0.32);
  background: linear-gradient(145deg, #2a3440, #242e38);
}




[data-theme="graphite"] .diagnostics-key {
  color: var(--graphite-gold-light);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}




[data-theme="graphite"] .diagnostics-value {
  color: var(--primary-strong);
  font-family: monospace;
  font-size: 0.85rem;
}




/* ── FIELD GROUPS / FORM ORGANIZATION ──────────────────────── */

[data-theme="graphite"] .field-row {
  gap: 6px;
}




[data-theme="graphite"] .field-row label {
  color: var(--text-soft);
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  font-weight: 700;
}




/* ── INLINE ADD (Category + Add button) ────────────────────── */

[data-theme="graphite"] .inline-add {
  gap: 8px;
}




[data-theme="graphite"] .inline-add input {
  background: linear-gradient(145deg, rgba(24, 32, 42, 0.96), rgba(18, 28, 40, 0.98));
  border-color: rgba(148, 174, 187, 0.18);
}




[data-theme="graphite"] .inline-add button {
  background: linear-gradient(145deg, rgba(148, 174, 187, 0.16), rgba(120, 148, 162, 0.12));
  border-color: rgba(148, 174, 187, 0.24);
}




/* ── HELP TEXT / DESCRIPTIONS ──────────────────────────────── */

[data-theme="graphite"] .safety-note {
  color: rgba(194, 86, 86, 0.72);
  font-size: 0.85rem;
  font-style: italic;
  border-left: 2px solid rgba(194, 86, 86, 0.28);
  padding-left: 10px;
  margin-top: 8px;
}




/* ── ANIMATION KEYFRAMES FOR GRAPHITE ──────────────────────── */

@keyframes graphite-press {
  0% { transform: scale(1); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}




@keyframes graphite-pencil-draw {
  0% {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}




@keyframes graphite-stamp {
  0% {
    transform: rotate(-8deg) scale(0.8);
    opacity: 0;
  }
  60% {
    transform: rotate(-8deg) scale(1.08);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}




@keyframes graphite-slide-up {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ── BUTTON ANIMATIONS ─────────────────────────────────────── */

[data-theme="graphite"] .primary-btn:active,
[data-theme="graphite"] .chip-btn:active,
[data-theme="graphite"] .action-btn:active {
  animation: graphite-press 0.15s ease;
}




/* ── ACCESSIBILITY: FOCUS STATES ────────────────────────────── */

[data-theme="graphite"] button:focus-visible,
[data-theme="graphite"] a:focus-visible,
[data-theme="graphite"] input:focus-visible,
[data-theme="graphite"] select:focus-visible,
[data-theme="graphite"] textarea:focus-visible {
  outline: 2px solid rgba(148, 174, 187, 0.65);
  outline-offset: 2px;
  border-radius: 3px;
}




/* ── SELECTION TEXT COLOR ──────────────────────────────────── */

[data-theme="graphite"] ::selection {
  background: rgba(148, 174, 187, 0.24);
  color: var(--text);
}




[data-theme="graphite"] ::-moz-selection {
  background: rgba(148, 174, 187, 0.24);
  color: var(--text);
}




/* ── SCROLLBAR STYLING (WebKit browsers) ───────────────────── */

[data-theme="graphite"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}




[data-theme="graphite"] ::-webkit-scrollbar-track {
  background: rgba(27, 34, 41, 0.40);
}




[data-theme="graphite"] ::-webkit-scrollbar-thumb {
  background: rgba(148, 174, 187, 0.32);
  border-radius: 4px;
}




[data-theme="graphite"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 174, 187, 0.50);
}




/* ── OPTIONAL GROUP STYLING (collapsible sections) ─────────── */

[data-theme="graphite"] .optional-group {
  background: linear-gradient(145deg, #242d36, #1e2730);
  border: 1px solid rgba(148, 174, 187, 0.14);
  border-radius: 14px;
}




[data-theme="graphite"] .optional-group h3 {
  color: var(--primary-strong);
  letter-spacing: 0.01em;
}




[data-theme="graphite"] .optional-group summary {
  cursor: pointer;
  user-select: none;
  color: var(--primary-strong);
  font-weight: 700;
}




[data-theme="graphite"] .optional-group summary:hover {
  color: #d6e2e8;
}




[data-theme="graphite"] .optional-group summary::marker {
  color: rgba(148, 174, 187, 0.65);
}




/* ── DELETE BUTTON (Danger) ────────────────────────────────── */

[data-theme="graphite"] .delete-btn {
  background: linear-gradient(145deg, rgba(194, 86, 86, 0.12), rgba(180, 60, 60, 0.10));
  border: 1px solid rgba(194, 86, 86, 0.28);
}




[data-theme="graphite"] .delete-btn:hover {
  background: linear-gradient(145deg, rgba(194, 86, 86, 0.18), rgba(180, 60, 60, 0.14));
  border-color: rgba(194, 86, 86, 0.45);
}




/* ── CHART EMPTY STATE ──────────────────────────────────────– */

[data-theme="graphite"] .chart-empty {
  color: rgba(130, 152, 164, 0.72);
  font-style: italic;
}




/* ── ICON BUTTONS ──────────────────────────────────────────── */

[data-theme="graphite"] button[aria-label] {
  transition: transform 0.12s ease, background 0.12s ease;
}




[data-theme="graphite"] button[aria-label]:hover {
  background: rgba(148, 174, 187, 0.08);
}




[data-theme="graphite"] button[aria-label]:active {
  transform: scale(0.95);
}




/* ── KV (Key-Value) GRID ITEMS ────────────────────────────── */

[data-theme="graphite"] .kv-item {
  background: linear-gradient(145deg, #242d36, #1e2730);
  border: 1px solid rgba(148, 174, 187, 0.12);
}




[data-theme="graphite"] .kv-item .k {
  color: rgba(148, 174, 187, 0.75);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}




[data-theme="graphite"] .kv-item .v {
  color: var(--primary-strong);
  font-weight: 600;
}




/* ── CHART CONTAINER ────────────────────────────────────────– */

[data-theme="graphite"] .chart-canvas-wrap {
  background: linear-gradient(145deg, #242d36, #1e2730);
  border: 1px solid rgba(148, 174, 187, 0.12);
  border-radius: 12px;
  padding: 12px;
}




/* ── GAME MODE: COMPLETION & RANK DISPLAY ──────────────────── */

/* Rank badge: engraved achievement plate */
[data-theme="graphite"] .rank-badge,
[data-theme="graphite"] .points-badge,
[data-theme="graphite"] .week-badge {
  background: linear-gradient(145deg, #2a3744, #1e2830);
  border: 1px solid rgba(148, 174, 187, 0.20);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--primary-strong);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
}




[data-theme="graphite"] .rank-badge {
  background: linear-gradient(135deg, rgba(148, 174, 187, 0.14), rgba(88, 128, 160, 0.12));
  border-color: rgba(148, 174, 187, 0.28);
}




[data-theme="graphite"] .points-badge {
  background: linear-gradient(135deg, rgba(179, 142, 69, 0.14), rgba(150, 120, 60, 0.12));
  border-color: rgba(179, 142, 69, 0.28);
  color: var(--graphite-gold-light);
}




[data-theme="graphite"] .week-badge {
  background: linear-gradient(135deg, rgba(96, 138, 108, 0.14), rgba(80, 110, 90, 0.12));
  border-color: rgba(96, 138, 108, 0.28);
}




/* ── OUTCOME STATUS ────────────────────────────────────────── */

/* Outcome added / not added status pill */
[data-theme="graphite"] [class*="outcome"] {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}




/* ── THEME PREVIEW CARD (Settings) ────────────────────────── */

[data-theme="graphite"] .theme-option {
  background: linear-gradient(145deg, #242d36 0%, #1e2730 100%);
  border: 2px solid rgba(148, 174, 187, 0.14);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}




[data-theme="graphite"] .theme-option:hover {
  border-color: rgba(148, 174, 187, 0.32);
  background: linear-gradient(145deg, #2a3440 0%, #242e38 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}




[data-theme="graphite"] .theme-option.selected {
  border-color: rgba(148, 174, 187, 0.60);
  background: linear-gradient(135deg, rgba(148, 174, 187, 0.16), rgba(120, 148, 162, 0.12));
  box-shadow: 
    0 0 0 2px rgba(148, 174, 187, 0.24) inset,
    0 6px 16px rgba(148, 174, 187, 0.16);
}




[data-theme="graphite"] .theme-name {
  color: #d4e0e6;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}




/* ── FIELD VALIDATION ──────────────────────────────────────– */

[data-theme="graphite"] input[type="text"],
[data-theme="graphite"] input[type="email"],
[data-theme="graphite"] input[type="number"],
[data-theme="graphite"] input[type="search"],
[data-theme="graphite"] textarea,
[data-theme="graphite"] select {
  background: rgba(8, 12, 22, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.40),
    0 1px 0 rgba(255, 255, 255, 0.03) inset;
  transition: all 0.18s ease;
}




[data-theme="graphite"] input[type="text"]:focus,
[data-theme="graphite"] input[type="email"]:focus,
[data-theme="graphite"] input[type="number"]:focus,
[data-theme="graphite"] input[type="search"]:focus,
[data-theme="graphite"] textarea:focus,
[data-theme="graphite"] select:focus {
  border-color: rgba(122, 170, 187, 0.50);
  background: rgba(10, 16, 28, 0.95);
  box-shadow: 
    0 0 0 3px rgba(122, 170, 187, 0.14),
    0 0 24px rgba(122, 170, 187, 0.12),
    0 2px 12px rgba(0, 0, 0, 0.48);
  outline: none;
}




/* Validation error message */
[data-theme="graphite"] .error-message {
  color: #e8a8a8;
  font-size: 0.80rem;
  margin-top: 4px;
  display: block;
}




[data-theme="graphite"] .success-message {
  color: rgba(120, 180, 100, 0.90);
  font-size: 0.80rem;
  margin-top: 4px;
  display: block;
}




/* ── ADD SHELL / WIZARD CONTAINER ──────────────────────────– */

[data-theme="graphite"] .add-shell {
  border-radius: 16px 16px 0 0;
  border-top: 2px solid rgba(148, 174, 187, 0.16);
}




/* ── EDIT SHELL ────────────────────────────────────────────── */

[data-theme="graphite"] .edit-shell {
  border-radius: 16px 16px 0 0;
}




/* ── STEP HELP TEXT ────────────────────────────────────────– */

[data-theme="graphite"] .step-help {
  color: rgba(130, 152, 164, 0.80);
  font-style: italic;
  font-size: 0.90rem;
}




/* ── CHOICE GRID LAYOUT ────────────────────────────────────– */

[data-theme="graphite"] .choice-grid {
  gap: 10px;
}




[data-theme="graphite"] .choice-grid.two {
  grid-template-columns: 1fr 1fr;
}




[data-theme="graphite"] .choice-card {
  min-height: 66px;
  transition: all 0.15s ease;
}




/* ── STATS GRID ────────────────────────────────────────────– */

[data-theme="graphite"] .stats-grid {
  gap: 12px;
}




[data-theme="graphite"] .stat-card {
  position: relative;
}




[data-theme="graphite"] .stat-card .label {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: rgba(148, 174, 187, 0.72);
}




[data-theme="graphite"] .stat-card .value {
  color: var(--graphite-gold-light);
  font-size: 1.35rem;
}




/* ── QUICK GRID (Secondary action buttons) ────────────────── */

[data-theme="graphite"] .quick-grid {
  gap: 8px;
}




[data-theme="graphite"] .quick-grid button {
  min-height: 44px;
  font-size: 0.9rem;
}




/* ── ACTIONS GRID ──────────────────────────────────────────– */

[data-theme="graphite"] .actions-grid {
  gap: 10px;
}




[data-theme="graphite"] .actions-grid.compact {
  gap: 6px;
}




/* ── MODAL STYLING (TIME PICKER, MOTIVATION, GAME MODE) ────── */

[data-theme="graphite"] .time-picker-modal,
[data-theme="graphite"] .motivation-modal {
  backdrop-filter: blur(3px);
}




[data-theme="graphite"] {
  --modal-backdrop: rgba(0, 0, 0, 0.55);
}


[data-theme="graphite"] .time-picker-backdrop {
  background: rgba(0, 0, 0, 0.55);
}




[data-theme="graphite"] .time-picker-card,
[data-theme="graphite"] .motivation-modal-card {
  background: linear-gradient(145deg, #242d36, #1e2730);
  border: 1px solid rgba(148, 174, 187, 0.18);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.50);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}




[data-theme="graphite"] .time-picker-head,
[data-theme="graphite"] .motivation-modal-head {
  border-bottom: 1px solid rgba(148, 174, 187, 0.12);
  padding-bottom: 12px;
}




[data-theme="graphite"] .time-picker-head h3,
[data-theme="graphite"] .motivation-modal-head h3 {
  letter-spacing: 0.02em;
}




[data-theme="graphite"] .wheel-block {
  gap: 6px;
}




[data-theme="graphite"] .wheel-block label {
  color: rgba(148, 174, 187, 0.75);
  text-transform: uppercase;
  font-size: 0.70rem;
  letter-spacing: 0.05em;
  font-weight: 700;
}




[data-theme="graphite"] .wheel-select {
  background: linear-gradient(145deg, #1a242c, #141d26);
  border: 1px solid rgba(148, 174, 187, 0.14);
  padding: 8px;
  border-radius: 10px;
}




[data-theme="graphite"] .wheel-select:focus-visible {
  outline: none;
  border-color: rgba(148, 174, 187, 0.40);
  box-shadow: 0 0 0 3px rgba(148, 174, 187, 0.08);
}




[data-theme="graphite"] .wheel-select option {
  background: #1a242c;
  color: var(--text);
  padding: 10px;
}




[data-theme="graphite"] .time-picker-actions,
[data-theme="graphite"] .motivation-modal-actions {
  border-top: 1px solid rgba(148, 174, 187, 0.12);
  padding-top: 12px;
}




/* ── FOLLOW-UP BLOCK (Outcome entry section) ───────────────– */

[data-theme="graphite"] .follow-up-block {
  background: linear-gradient(145deg, #2a3440, #232e38);
  border: 1px solid rgba(148, 174, 187, 0.12);
  border-left: 3px solid rgba(88, 128, 160, 0.50);
}




[data-theme="graphite"] .follow-up-block h4 {
  color: var(--primary-strong);
  letter-spacing: 0.01em;
}




[data-theme="graphite"] .follow-up-block label {
  color: var(--text-soft);
}




/* ── EDIT ACTIONS ──────────────────────────────────────────– */

[data-theme="graphite"] .edit-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}




[data-theme="graphite"] .edit-entry-btn {
  background: linear-gradient(145deg, #2a3844, #232e38);
  border: 1px solid rgba(148, 174, 187, 0.18);
  color: var(--primary-strong);
  transition: all 0.12s ease;
}




[data-theme="graphite"] .edit-entry-btn:hover {
  border-color: rgba(148, 174, 187, 0.36);
  background: linear-gradient(145deg, #303c48, #282f38);
}




[data-theme="graphite"] .edit-entry-btn small {
  color: rgba(148, 174, 187, 0.80);
  font-weight: 600;
}




/* ── TYPE CHIP (Urge/Avoidance badge) ──────────────────────– */

[data-theme="graphite"] .type-chip {
  background: linear-gradient(145deg, #2a3440, #232e38);
  border: 1px solid rgba(148, 174, 187, 0.12);
  color: var(--text-soft);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}




[data-theme="graphite"] .type-chip.urge {
  background: linear-gradient(145deg, rgba(148, 174, 187, 0.12), rgba(120, 148, 162, 0.10));
  border-color: rgba(148, 174, 187, 0.24);
  color: var(--primary-strong);
}




[data-theme="graphite"] .type-chip.avoidance {
  background: linear-gradient(145deg, rgba(180, 60, 60, 0.12), rgba(160, 40, 40, 0.10));
  border-color: rgba(194, 86, 86, 0.24);
  color: #e8a8a8;
}




/* ── KV GRID STYLING (Key-value pairs in history) ─────────── */

[data-theme="graphite"] .kv-grid {
  gap: 10px;
}




[data-theme="graphite"] .kv-item {
  background: linear-gradient(145deg, #1a242c, #141d26);
  border: 1px solid rgba(148, 174, 187, 0.10);
}




[data-theme="graphite"] .kv-item .k {
  color: rgba(148, 174, 187, 0.70);
}




[data-theme="graphite"] .kv-item .v {
  color: var(--primary-strong);
  font-weight: 600;
  font-size: 0.95rem;
}




/* ── EDIT SHELL ACTIONS CONTAINER ──────────────────────────– */

[data-theme="graphite"] .primary-btn,
[data-theme="graphite"] .secondary-btn {
  transition: all 0.12s ease;
}




[data-theme="graphite"] .primary-btn:active,
[data-theme="graphite"] .secondary-btn:active {
  transform: scale(0.98);
}




/* ══════════════════════════════════════════════════════════════
   GRAPHITE – ACCESSIBILITY, RESPONSIVE & POLISH
   ══════════════════════════════════════════════════════════════ */

/* ── ENHANCED KEYBOARD FOCUS (All interactive elements) ────── */

[data-theme="graphite"] :focus-visible {
  outline: 2px solid rgba(148, 174, 187, 0.65);
  outline-offset: 2px;
  border-radius: 2px;
}




/* ── LINK STYLING ──────────────────────────────────────────– */

[data-theme="graphite"] a {
  color: rgba(148, 174, 187, 0.90);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.12s ease;
}




[data-theme="graphite"] a:hover {
  color: var(--primary-strong);
}




[data-theme="graphite"] a:focus-visible {
  outline: 2px solid rgba(148, 174, 187, 0.55);
}




/* ── STRONG EMPHASIZE ──────────────────────────────────────– */

[data-theme="graphite"] strong,
[data-theme="graphite"] b {
  color: var(--graphite-100);
  font-weight: 800;
}




/* ── ITALIC / EMPHASIS ────────────────────────────────────– */

[data-theme="graphite"] em,
[data-theme="graphite"] i {
  color: rgba(130, 152, 164, 0.90);
  font-style: italic;
}




/* ── SMALL / SECONDARY TEXT ───────────────────────────────– */

[data-theme="graphite"] small {
  color: var(--text-soft);
  font-weight: 500;
}




/* ── CODE / MONOSPACE ──────────────────────────────────────– */

[data-theme="graphite"] code,
[data-theme="graphite"] pre {
  background: rgba(27, 34, 41, 0.50);
  border: 1px solid rgba(148, 174, 187, 0.12);
  border-radius: 4px;
  padding: 2px 6px;
  color: rgba(148, 174, 187, 0.90);
  font-family: monospace;
  font-size: 0.88rem;
}




[data-theme="graphite"] pre {
  padding: 12px;
  overflow-x: auto;
}




/* ── MARK / HIGHLIGHT ──────────────────────────────────────– */

[data-theme="graphite"] mark {
  background: rgba(179, 142, 69, 0.22);
  color: var(--graphite-gold-light);
  border-radius: 2px;
  padding: 0 4px;
}




/* ── HORIZONTAL RULE ───────────────────────────────────────– */

[data-theme="graphite"] hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 174, 187, 0.18), transparent);
  margin: 16px 0;
}




/* ── TOUCH INTERACTION TARGETS (min 44x44px) ───────────────– */

[data-theme="graphite"] button,
[data-theme="graphite"] a[role="button"],
[data-theme="graphite"] input[type="button"],
[data-theme="graphite"] input[type="submit"],
[data-theme="graphite"] input[type="reset"] {
  min-height: 44px;
  min-width: 44px;
  position: relative;
}




/* ── REDUCED MOTION SUPPORT ────────────────────────────────– */

@media (prefers-reduced-motion: reduce) {
  [data-theme="graphite"] *,
  [data-theme="graphite"] *::before,
  [data-theme="graphite"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }}




/* ── MOBILE: SPACING & SIZING ──────────────────────────────– */

@media (max-width: 480px) {
  [data-theme="graphite"] body {
    font-size: 16px;
  }

  [data-theme="graphite"] button,
  [data-theme="graphite"] input,
  [data-theme="graphite"] select,
  [data-theme="graphite"] textarea {
    min-height: 48px;
    font-size: 16px;
  }

  [data-theme="graphite"] .card {
    padding: 14px;
  }

  [data-theme="graphite"] .primary-btn,
  [data-theme="graphite"] .secondary-btn,
  [data-theme="graphite"] .action-btn {
    min-height: 50px;
    font-size: 1rem;
  }}




/* ── TABLET: WIDER LAYOUTS ─────────────────────────────────– */

@media (min-width: 768px) {
  [data-theme="graphite"] .two-column {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-theme="graphite"] .three-column {
    grid-template-columns: repeat(3, 1fr);
  }}




/* ── DARK MODE: COLOR ADJUSTMENTS ──────────────────────────– */

@media (prefers-color-scheme: dark) {
  [data-theme="graphite"] {
    color-scheme: dark;
  }}




/* ── CONTRAST ENHANCEMENT MODE ────────────────────────────– */

@media (prefers-contrast: more) {
  [data-theme="graphite"] {
    --graphite-100: #ffffff;
    --primary-strong: #ffffff;
  }

  [data-theme="graphite"] button,
  [data-theme="graphite"] input,
  [data-theme="graphite"] select,
  [data-theme="graphite"] textarea {
    border-width: 2px;
  }}




/* ── PRINT STYLES (if app is printable) ────────────────────– */

@media print {
  [data-theme="graphite"] body {
    background: white;
    color: black;
  }

  [data-theme="graphite"] button,
  [data-theme="graphite"] .hamburger-fab-wrapper {
    display: none;
  }}




/* ══════════════════════════════════════════════════════════════
   GRAPHITE – FORM CONTROL REFINEMENTS
   ══════════════════════════════════════════════════════════════ */

/* ── FIELDSET STYLING ──────────────────────────────────────– */

[data-theme="graphite"] fieldset {
  border: 1px solid rgba(148, 174, 187, 0.14);
  border-radius: 12px;
  padding: 14px;
  margin: 0;
  background: rgba(27, 34, 41, 0.30);
}




[data-theme="graphite"] legend {
  color: var(--primary-strong);
  font-weight: 700;
  padding: 0 8px;
  letter-spacing: 0.02em;
}




/* ── BUTTON GROUP ──────────────────────────────────────────– */

[data-theme="graphite"] .button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}




[data-theme="graphite"] .button-group button {
  flex: 1 1 auto;
  min-width: 100px;
}




/* ── FORM GRID ─────────────────────────────────────────────– */

[data-theme="graphite"] .form-grid {
  display: grid;
  gap: 14px;
}




[data-theme="graphite"] .form-grid.two-col {
  grid-template-columns: 1fr 1fr;
}




/* ── FORM GROUP (Label + Input wrapper) ───────────────────– */

[data-theme="graphite"] .form-group {
  display: grid;
  gap: 6px;
}




[data-theme="graphite"] .form-group label {
  color: var(--text-soft);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 700;
}




[data-theme="graphite"] .form-group input,
[data-theme="graphite"] .form-group select,
[data-theme="graphite"] .form-group textarea {
  background: linear-gradient(145deg, rgba(24, 32, 42, 0.96), rgba(18, 28, 40, 0.98));
  border: 1px solid rgba(148, 174, 187, 0.16);
}




[data-theme="graphite"] .form-group input:focus,
[data-theme="graphite"] .form-group select:focus,
[data-theme="graphite"] .form-group textarea:focus {
  border-color: rgba(148, 174, 187, 0.40);
  background: linear-gradient(145deg, rgba(24, 32, 42, 0.98), rgba(18, 28, 40, 1.0));
  box-shadow: 0 0 0 3px rgba(148, 174, 187, 0.08);
}




/* ── INLINE FORM (Horizontal labels) ───────────────────────– */

[data-theme="graphite"] .form-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}




[data-theme="graphite"] .form-inline label {
  margin: 0;
  white-space: nowrap;
}




/* ── INPUT HINTS ───────────────────────────────────────────– */

[data-theme="graphite"] .input-hint {
  color: rgba(130, 152, 164, 0.70);
  font-size: 0.80rem;
  margin-top: 4px;
  display: block;
}




/* ── COUNTER / PLACEHOLDER TEXT ────────────────────────────– */

[data-theme="graphite"] input::placeholder,
[data-theme="graphite"] textarea::placeholder {
  font-style: italic;
}




/* ── GRAPHITE READABILITY PATCH ───────────────────────────── */

[data-theme="graphite"] .field-help,
[data-theme="graphite"] .step-help,
[data-theme="graphite"] .step-label,
[data-theme="graphite"] .type-chip,
[data-theme="graphite"] .chart-summary,
[data-theme="graphite"] .empty-state-subtitle,
[data-theme="graphite"] .history-controls label,
[data-theme="graphite"] .k,
[data-theme="graphite"] .input-hint,
[data-theme="graphite"] .stat-card .label,
[data-theme="graphite"] .tagline,
[data-theme="graphite"] .motivation-hero-reference {
  color: rgba(173, 200, 214, 0.90);
}




[data-theme="graphite"] .choice-card span,
[data-theme="graphite"] .editable-row .field-help,
[data-theme="graphite"] .diagnostics-row .field-help,
[data-theme="graphite"] .chart-preference-row label,
[data-theme="graphite"] .field-row label {
  color: rgba(185, 210, 220, 0.92);
}




[data-theme="graphite"] .history-item p,
[data-theme="graphite"] .summary-panel p,
[data-theme="graphite"] .settings-block p {
  color: rgba(214, 228, 236, 0.92);
}




/* ── FIELD DISABLED STATE ──────────────────────────────────– */

[data-theme="graphite"] input:disabled,
[data-theme="graphite"] select:disabled,
[data-theme="graphite"] textarea:disabled,
[data-theme="graphite"] button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}




/* ── INPUT SPINNER (number input arrows) ───────────────────– */

[data-theme="graphite"] input[type="number"]::-webkit-outer-spin-button,
[data-theme="graphite"] input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}




[data-theme="graphite"] input[type="number"] {
  -moz-appearance: textfield;
}




/* ── RANGE SLIDER ──────────────────────────────────────────– */

[data-theme="graphite"] input[type="range"] {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(27, 34, 41, 0.50);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}




[data-theme="graphite"] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2a3844, #232e38);
  border: 1px solid rgba(148, 174, 187, 0.24);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
}




[data-theme="graphite"] input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2a3844, #232e38);
  border: 1px solid rgba(148, 174, 187, 0.24);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
}




[data-theme="graphite"] input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, rgba(148, 174, 187, 0.20), rgba(148, 174, 187, 0.12));
  height: 4px;
  border-radius: 2px;
}




[data-theme="graphite"] input[type="range"]:focus-visible {
  outline: 2px solid rgba(148, 174, 187, 0.40);
}




/* ── COLOR INPUT ───────────────────────────────────────────– */

[data-theme="graphite"] input[type="color"] {
  width: 50px;
  height: 44px;
  border: 1px solid rgba(148, 174, 187, 0.16);
  border-radius: 8px;
  cursor: pointer;
  padding: 2px;
}




/* ── DATE / TIME INPUT ─────────────────────────────────────– */

[data-theme="graphite"] input[type="date"],
[data-theme="graphite"] input[type="time"],
[data-theme="graphite"] input[type="datetime-local"] {
  background: linear-gradient(145deg, rgba(24, 32, 42, 0.96), rgba(18, 28, 40, 0.98));
  border: 1px solid rgba(148, 174, 187, 0.16);
}




/* ══════════════════════════════════════════════════════════════
   GRAPHITE – ANIMATION & TRANSITION TWEAKS
   ══════════════════════════════════════════════════════════════ */

/* ── RIPPLE / PRESS EFFECT ─────────────────────────────────– */

[data-theme="graphite"] .ripple {
  position: relative;
  overflow: hidden;
}




[data-theme="graphite"] .ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(148, 174, 187, 0.24);
  transform: translate(-50%, -50%);
  animation: ripple-spread 0.6s ease-out;
}




@keyframes ripple-spread {
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}




/* ── SLIDE UP ANIMATION (Modals) ───────────────────────────– */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ── FADE IN ANIMATION ─────────────────────────────────────– */

@keyframes fadeInGraphite {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}




/* ── SCALE UP ANIMATION ────────────────────────────────────– */

@keyframes scaleUpGraphite {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}




@keyframes scaleUpGraphite {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1);    }
}




[data-theme="graphite"] .card {
  animation: scaleUpGraphite 0.20s ease-out;
}




/* ══════════════════════════════════════════════════════════════
   CHROMATIC GLASS — SIGNATURE ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

/* Slow iridescent shimmer drift across card surfaces */
@keyframes iris-shift {
  0%   { opacity: 0.6; background-position: 0%   50%; }
  50%  { opacity: 1.0; background-position: 100% 50%; }
  100% { opacity: 0.6; background-position: 0%   50%; }
}




/* Subtle chromatic border pulse on interactive focus */
@keyframes chroma-pulse {
  0%   { box-shadow: 0 0 0 0px rgba(77, 159, 255, 0),
                     0 0 0 0px rgba(168, 120, 255, 0); }
  50%  { box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.20),
                     0 0 20px rgba(168, 120, 255, 0.14); }
  100% { box-shadow: 0 0 0 0px rgba(77, 159, 255, 0),
                     0 0 0 0px rgba(168, 120, 255, 0); }
}




/* Prismatic sweep for pressed elements */
@keyframes iris-press {
  0%   { transform: scale(1);    filter: brightness(1.0); }
  40%  { transform: scale(0.97); filter: brightness(1.2) hue-rotate(20deg); }
  100% { transform: scale(1);    filter: brightness(1.0); }
}




/* Toast entrance */
@keyframes graphite-slide-up {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
}




/* Floating glow drift for FAB */
@keyframes iris-float {
  0%   { box-shadow: 0 16px 40px rgba(0,0,0,0.56), 0 0 24px rgba(77,159,255,0.08); }
  50%  { box-shadow: 0 20px 48px rgba(0,0,0,0.64), 0 0 40px rgba(168,120,255,0.14); }
  100% { box-shadow: 0 16px 40px rgba(0,0,0,0.56), 0 0 24px rgba(77,159,255,0.08); }
}




/* ── CHROMATIC FOCUS RING ────────────────────────────────────── */

[data-theme="graphite"] button:focus-visible,
[data-theme="graphite"] a:focus-visible,
[data-theme="graphite"] input:focus-visible,
[data-theme="graphite"] select:focus-visible,
[data-theme="graphite"] textarea:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(77,  159, 255, 0.60),
    0 0 0 4px rgba(168, 120, 255, 0.24),
    0 0 20px rgba(77,  159, 255, 0.24);
  border-radius: 4px;
}




/* ── CHROMATIC TEXT SELECTION ───────────────────────────────── */

[data-theme="graphite"] ::selection {
  background: rgba(77, 159, 255, 0.28);
  color: #eaf4fe;
}




[data-theme="graphite"] ::-moz-selection {
  background: rgba(77, 159, 255, 0.28);
  color: #eaf4fe;
}




/* ── INPUTS: CHROMATIC GLOW ON FOCUS ────────────────────────── */

[data-theme="graphite"] input[type="text"],
[data-theme="graphite"] input[type="email"],
[data-theme="graphite"] input[type="number"],
[data-theme="graphite"] input[type="search"],
[data-theme="graphite"] textarea,
[data-theme="graphite"] select {
  background: rgba(4, 6, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.56),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition: all 0.20s ease;
}




[data-theme="graphite"] input[type="text"]:focus,
[data-theme="graphite"] input[type="email"]:focus,
[data-theme="graphite"] input[type="number"]:focus,
[data-theme="graphite"] input[type="search"]:focus,
[data-theme="graphite"] textarea:focus,
[data-theme="graphite"] select:focus {
  border-color: rgba(77, 159, 255, 0.50);
  background: rgba(4, 6, 18, 0.98);
  box-shadow:
    0 0 0 3px rgba(77,  159, 255, 0.16),
    0 0 0 5px rgba(168, 120, 255, 0.08),
    0 0 32px rgba(77,  159, 255, 0.14),
    0 4px 16px rgba(0, 0, 0, 0.56);
  outline: none;
}




/* ── BADGES: PRISMATIC GLOW ─────────────────────────────────── */

[data-theme="graphite"] .rank-badge,
[data-theme="graphite"] .points-badge,
[data-theme="graphite"] .week-badge {
  background: rgba(6, 8, 20, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 16px;
  color: #90c8ff;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.56),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}




[data-theme="graphite"] .rank-badge {
  border-color: rgba(77, 159, 255, 0.32);
  color: #90c8ff;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.56),
    0 0 20px rgba(77, 159, 255, 0.14);
}




[data-theme="graphite"] .points-badge {
  border-color: rgba(216, 174, 88, 0.32);
  color: var(--graphite-gold-light);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.56),
    0 0 20px rgba(216, 174, 88, 0.14);
}




/* ── TOAST: CHROMATIC GLASS ─────────────────────────────────── */

[data-theme="graphite"] .toast {
  background: rgba(4, 6, 18, 0.94);
  backdrop-filter: blur(32px) saturate(2.0);
  -webkit-backdrop-filter: blur(32px) saturate(2.0);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #90c8ff;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.76),
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 32px rgba(77, 159, 255, 0.12);
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}




[data-theme="graphite"] .toast.show {
  animation: graphite-slide-up 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}




/* ── EMPTY STATES: CHROMATIC ─────────────────────────────────── */

[data-theme="graphite"] .empty-state {
  background: rgba(4, 6, 18, 0.64);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.60),
    0 0 40px rgba(77, 159, 255, 0.04);
  gap: 10px;
}




[data-theme="graphite"] .empty-state-title {
  color: #90c8ff;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  text-shadow: 0 0 20px rgba(77, 159, 255, 0.20);
}




[data-theme="graphite"] .empty-state-subtitle {
  color: rgba(74, 106, 154, 0.90);
  font-style: italic;
  font-weight: 500;
}




/* ── TYPE CHIPS: PRISMATIC ───────────────────────────────────── */

[data-theme="graphite"] .type-chip {
  background: rgba(77, 159, 255, 0.08);
  backdrop-filter: blur(4px);
  color: rgba(144, 200, 255, 0.85);
  border: 1px solid rgba(77, 159, 255, 0.18);
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
}




/* ── REDUCED MOTION ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-theme="graphite"] .card::after,
  [data-theme="graphite"] .chart-card::after,
  [data-theme="graphite"] .history-item::after,
  [data-theme="graphite"] .summary-panel::after,
  [data-theme="graphite"] .time-record-card::after,
  [data-theme="graphite"] .floating-menu-button {
    animation: none;
  }}




/* Individual icon backgrounds */
[data-theme="graphite"] .gr-icon-home       { background-image: url("../assets/themes/graphite/icons/graphite-icon-home.svg"); }



[data-theme="graphite"] .gr-icon-urge       { background-image: url("../assets/themes/graphite/icons/graphite-icon-urge.svg"); }



[data-theme="graphite"] .gr-icon-avoidance  { background-image: url("../assets/themes/graphite/icons/graphite-icon-avoidance.svg"); }



[data-theme="graphite"] .gr-icon-outcome    { background-image: url("../assets/themes/graphite/icons/graphite-icon-outcome.svg"); }



[data-theme="graphite"] .gr-icon-motivation { background-image: url("../assets/themes/graphite/icons/graphite-icon-motivation.svg"); }



[data-theme="graphite"] .gr-icon-results    { background-image: url("../assets/themes/graphite/icons/graphite-icon-results.svg"); }



[data-theme="graphite"] .gr-icon-history    { background-image: url("../assets/themes/graphite/icons/graphite-icon-history.svg"); }



[data-theme="graphite"] .gr-icon-game       { background-image: url("../assets/themes/graphite/icons/graphite-icon-game-mode.svg"); }



[data-theme="graphite"] .gr-icon-save       { background-image: url("../assets/themes/graphite/icons/graphite-icon-save.svg"); }



[data-theme="graphite"] .gr-icon-edit       { background-image: url("../assets/themes/graphite/icons/graphite-icon-edit.svg"); }



[data-theme="graphite"] .gr-icon-delete     { background-image: url("../assets/themes/graphite/icons/graphite-icon-delete.svg"); }



[data-theme="graphite"] .gr-icon-back       { background-image: url("../assets/themes/graphite/icons/graphite-icon-back.svg"); }



[data-theme="graphite"] .gr-icon-menu       { background-image: url("../assets/themes/graphite/icons/graphite-icon-menu.svg"); }



[data-theme="graphite"] .gr-icon-close      { background-image: url("../assets/themes/graphite/icons/graphite-icon-close.svg"); }



[data-theme="graphite"] .gr-icon-add        { background-image: url("../assets/themes/graphite/icons/graphite-icon-add.svg"); }



[data-theme="graphite"] .gr-icon-expand     { background-image: url("../assets/themes/graphite/icons/graphite-icon-expand.svg"); }



[data-theme="graphite"] .gr-icon-collapse   { background-image: url("../assets/themes/graphite/icons/graphite-icon-collapse.svg"); }



[data-theme="graphite"] .gr-icon-time       { background-image: url("../assets/themes/graphite/icons/graphite-icon-time.svg"); }



[data-theme="graphite"] .gr-icon-money      { background-image: url("../assets/themes/graphite/icons/graphite-icon-money.svg"); }



[data-theme="graphite"] .gr-icon-check      { background-image: url("../assets/themes/graphite/icons/graphite-icon-check.svg"); }



[data-theme="graphite"] .gr-icon-warning    { background-image: url("../assets/themes/graphite/icons/graphite-icon-warning.svg"); }



[data-theme="graphite"] .gr-icon-success    { background-image: url("../assets/themes/graphite/icons/graphite-icon-success.svg"); }



[data-theme="graphite"] .gr-icon-info       { background-image: url("../assets/themes/graphite/icons/graphite-icon-info.svg"); }




/* ── CUSTOM CHECKBOXES ────────────────────────────────────── */

[data-theme="graphite"] input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(4, 6, 18, 0.90);
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='2' width='16' height='16' rx='4' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}




[data-theme="graphite"] input[type="checkbox"]:checked {
  background-color: rgba(77, 159, 255, 0.18);
  border-color: rgba(77, 159, 255, 0.60);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2390c8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 10 8 14 16 6'/%3E%3C/svg%3E");
  box-shadow: 0 0 12px rgba(77, 159, 255, 0.20);
}




[data-theme="graphite"] input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(77, 159, 255, 0.40), 0 0 12px rgba(77, 159, 255, 0.16);
}




[data-theme="graphite"] input[type="checkbox"]:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}




/* ── CUSTOM RADIO BUTTONS ─────────────────────────────────── */

[data-theme="graphite"] input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(4, 6, 18, 0.90);
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  vertical-align: middle;
}




[data-theme="graphite"] input[type="radio"]:checked {
  background-color: rgba(77, 159, 255, 0.14);
  border-color: rgba(77, 159, 255, 0.60);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5' fill='%2390c8ff' fill-opacity='0.90'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 12px rgba(77, 159, 255, 0.18);
}




[data-theme="graphite"] input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(77, 159, 255, 0.40);
}




/* ── CUSTOM TOGGLE SWITCH ─────────────────────────────────── */
/* Applied to <input type="checkbox" class="gr-toggle"> */

[data-theme="graphite"] input[type="checkbox"].gr-toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(8, 12, 28, 0.90);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24'%3E%3Ccircle cx='13' cy='12' r='8' fill='rgba(255,255,255,0.18)' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
}




[data-theme="graphite"] input[type="checkbox"].gr-toggle:checked {
  background-color: rgba(77, 159, 255, 0.18);
  border-color: rgba(77, 159, 255, 0.50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24'%3E%3Ccircle cx='31' cy='12' r='8' fill='%2390c8ff' fill-opacity='0.90' stroke='rgba(77,159,255,0.60)' stroke-width='1'/%3E%3C/svg%3E");
  box-shadow: 0 0 16px rgba(77, 159, 255, 0.18);
}




/* ── EMPTY STATES WITH ILLUSTRATIONS ─────────────────────── */

[data-theme="graphite"] #historyEmpty.empty-state {
  background-image: url("../assets/themes/graphite/misc/graphite-empty-history.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 160px auto;
  padding-top: 120px;
}




[data-theme="graphite"] #resultsEmpty.empty-state {
  background-image: url("../assets/themes/graphite/misc/graphite-empty-results.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 160px auto;
  padding-top: 120px;
}




[data-theme="graphite"] .empty-checklist-state {
  background-image: url("../assets/themes/graphite/misc/graphite-empty-checklist.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100px auto;
  padding-top: 110px;
}




/* ── GAME MODE: RANK BADGE WITH ASSET ─────────────────────── */

[data-theme="graphite"] .rank-badge-graphic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 94px;
  background-image: url("../assets/themes/graphite/game-mode/graphite-rank-badge-base.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}




[data-theme="graphite"] .rank-badge-graphic .rank-text {
  position: relative;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #90c8ff;
  text-shadow: 0 0 8px rgba(77, 159, 255, 0.40);
  text-align: center;
  margin-top: 28px;
}




/* ── LOADER / SPINNER ────────────────────────────────────── */

[data-theme="graphite"] .gr-loader {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("../assets/themes/graphite/misc/graphite-loader.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}




/* Fallback CSS spinner if SVG animation unsupported */
[data-theme="graphite"] .gr-loader-css {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 2.5px solid rgba(77, 159, 255, 0.20);
  border-top-color: rgba(77, 159, 255, 0.80);
  border-radius: 50%;
  animation: gr-spin 0.9s linear infinite;
}




@keyframes gr-spin {
  to { transform: rotate(360deg); }
}




/* ── PROGRESS BAR CUSTOM STYLING ─────────────────────────── */

[data-theme="graphite"] .home-game-mode-progress {
  background: rgba(4, 6, 18, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  height: 10px;
  overflow: hidden;
  position: relative;
}




[data-theme="graphite"] .home-game-mode-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 18px,
    rgba(255, 255, 255, 0.03) 18px,
    rgba(255, 255, 255, 0.03) 20px
  );
  pointer-events: none;
}




[data-theme="graphite"] .home-game-mode-progress-fill {
  background: linear-gradient(90deg, rgba(77, 159, 255, 0.70), rgba(168, 120, 255, 0.60));
  height: 100%;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(77, 159, 255, 0.30);
  position: relative;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}




/* ── STEP INDICATORS (wizard dots) ──────────────────────── */

[data-theme="graphite"] .step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.20s ease;
}




[data-theme="graphite"] .step-dot.active {
  background: rgba(77, 159, 255, 0.80);
  border-color: rgba(77, 159, 255, 0.90);
  box-shadow: 0 0 10px rgba(77, 159, 255, 0.40);
  width: 22px;
  border-radius: 4px;
}




[data-theme="graphite"] .step-dot.complete {
  background: rgba(109, 224, 160, 0.60);
  border-color: rgba(109, 224, 160, 0.80);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolyline points='1.5 4 3.5 6 6.5 2' stroke='rgba(20,40,28,0.90)' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}




/* ── DIVIDERS ────────────────────────────────────────────── */

[data-theme="graphite"] .gr-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 159, 255, 0.16), rgba(168, 120, 255, 0.12), transparent);
  margin: 16px 0;
}




[data-theme="graphite"] .gr-divider-dotted {
  border: none;
  height: 1px;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(255, 255, 255, 0.08) 4px, rgba(255, 255, 255, 0.08) 6px);
  margin: 12px 0;
}




[data-theme="graphite"] .gr-divider-drafting {
  border: none;
  position: relative;
  height: 12px;
  margin: 12px 0;
}




[data-theme="graphite"] .gr-divider-drafting::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}




[data-theme="graphite"] .gr-divider-drafting::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cline x1='0' y1='6' x2='12' y2='6' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3Ccircle cx='20' cy='6' r='4' fill='none' stroke='rgba(77,159,255,0.28)' stroke-width='1'/%3E%3Cline x1='28' y1='6' x2='40' y2='6' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3C/svg%3E") no-repeat center;
}




/* ── BADGE CHIPS (inline status) ─────────────────────────── */

[data-theme="graphite"] .gr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(14, 20, 36, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #adc8d6;
  backdrop-filter: blur(8px);
}




[data-theme="graphite"] .gr-badge-blue {
  background: rgba(77, 159, 255, 0.12);
  border-color: rgba(77, 159, 255, 0.30);
  color: #90c8ff;
}




[data-theme="graphite"] .gr-badge-gold {
  background: rgba(216, 174, 88, 0.12);
  border-color: rgba(216, 174, 88, 0.30);
  color: #f0c870;
}




[data-theme="graphite"] .gr-badge-green {
  background: rgba(109, 224, 160, 0.10);
  border-color: rgba(109, 224, 160, 0.28);
  color: #6de0a0;
}




[data-theme="graphite"] .gr-badge-red {
  background: rgba(255, 77, 114, 0.10);
  border-color: rgba(255, 77, 114, 0.28);
  color: #ff8fa8;
}




/* ── TOOLTIP ─────────────────────────────────────────────── */

[data-theme="graphite"] [data-tooltip] {
  position: relative;
}




[data-theme="graphite"] [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4, 6, 18, 0.94);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #adc8d6;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
}




[data-theme="graphite"] [data-tooltip]:hover::after {
  opacity: 1;
}




/* Card layout: stack icon above text via flex column */
[data-theme="graphite"] .primary-action-card {
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 16px;
  gap: 4px;
}




/* ══════════════════════════════════════════════════════════════
   GRAPHITE – PREMIUM ANIMATION & INTERACTION ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

/* ── SHIMMER EFFECT FOR PREMIUM FEEL ────────────────────────– */

@keyframes graphite-shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}




[data-theme="graphite"] .primary-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: graphite-shimmer 2s infinite;
  pointer-events: none;
  opacity: 0;
}




[data-theme="graphite"] .primary-btn:hover::after {
  opacity: 1;
}




/* ── SOPHISTICATED SHADOW LAYERING ─────────────────────────– */
/* Resting shadow comes from --action-card-shadow (root token block) via the shared
   .primary-action-card rule; only the hover lift is a Graphite state override. */

[data-theme="graphite"] .primary-action-card {
  transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
}




[data-theme="graphite"] .primary-action-card:hover {
  box-shadow: 
    0 14px 40px rgba(0, 0, 0, 0.42),
    0 0 1px rgba(148, 174, 187, 0.14) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transform: translateY(-2px);
}




/* ── RESULT CARDS: PREMIUM REPORT STYLING ──────────────────– */

[data-theme="graphite"] .result-card,
[data-theme="graphite"] .result-row {
  background: linear-gradient(145deg, #242d36 0%, #1e2730 100%);
  border: 1px solid rgba(148, 174, 187, 0.14);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}




/* ── CHART STYLING: PREMIUM REPORT AESTHETIC ───────────────– */

[data-theme="graphite"] .chart-canvas-wrap {
  background: linear-gradient(145deg, #242d36 0%, #1e2730 100%);
  border: 1px solid rgba(148, 174, 187, 0.12);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}




/* ── URGE/AVOIDANCE CARDS: PREMIUM ENTRY STYLING ───────────– */

[data-theme="graphite"] .urge-card,
[data-theme="graphite"] .avoidance-card,
[data-theme="graphite"] .entry-card {
  background: linear-gradient(145deg, #242d36 0%, #1e2730 100%);
  border-left: 3px solid;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.24),
    0 0 1px rgba(148, 174, 187, 0.08) inset;
  transition: all 0.15s ease;
}




[data-theme="graphite"] .urge-card:hover,
[data-theme="graphite"] .avoidance-card:hover,
[data-theme="graphite"] .entry-card:hover {
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.30),
    0 0 1px rgba(148, 174, 187, 0.12) inset;
}




/* ── SECTION HEADERS: PREMIUM TYPOGRAPHY ────────────────────– */

/* Color comes from --read-text-section in the EYE COMFORT TEXT TUNING section. */
[data-theme="graphite"] .section-header,
[data-theme="graphite"] section > h2,
[data-theme="graphite"] section > h3 {
  font-weight: 900;
  letter-spacing: 0.02em;
  border-bottom: 2px solid rgba(148, 174, 187, 0.12);
  padding-bottom: 10px;
  margin-bottom: 14px;
}




/* ── BOTTOM SHEETS / MODALS: ENHANCED APPEARANCE ────────────– */

[data-theme="graphite"] .sheet,
[data-theme="graphite"] .modal-sheet {
  background: linear-gradient(180deg, #212b34 0%, #1b2229 100%);
  border-top: 2px solid rgba(148, 174, 187, 0.16);
}




/* ── DIVIDERS: PREMIUM SEPARATORS ──────────────────────────– */

[data-theme="graphite"] hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 174, 187, 0.20), transparent);
  margin: 16px 0;
}




/* ── PROGRESS CARDS: PREMIUM VISUALIZATION ─────────────────– */

[data-theme="graphite"] .progress-wrapper,
[data-theme="graphite"] .progress-card {
  background: linear-gradient(145deg, #242d36 0%, #1e2730 100%);
  border: 1px solid rgba(148, 174, 187, 0.12);
  border-radius: 12px;
  padding: 12px;
}




/* ── CATEGORY PILLS: PREMIUM TAGS ──────────────────────────– */

[data-theme="graphite"] .category-pill,
[data-theme="graphite"] .tag,
[data-theme="graphite"] .badge-pill {
  background: linear-gradient(135deg, rgba(148, 174, 187, 0.14), rgba(120, 148, 162, 0.10));
  border: 1px solid rgba(148, 174, 187, 0.24);
  color: #d4e0e6;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.80rem;
  letter-spacing: 0.02em;
  transition: all 0.12s ease;
}




[data-theme="graphite"] .category-pill:hover,
[data-theme="graphite"] .tag:hover,
[data-theme="graphite"] .badge-pill:hover {
  border-color: rgba(148, 174, 187, 0.40);
  background: linear-gradient(135deg, rgba(148, 174, 187, 0.20), rgba(120, 148, 162, 0.16));
}




/* ── EXPANDED/COLLAPSED STATES ─────────────────────────────– */

[data-theme="graphite"] details {
  border: 1px solid rgba(148, 174, 187, 0.12);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(145deg, #242d36 0%, #1e2730 100%);
}




[data-theme="graphite"] details summary {
  cursor: pointer;
  color: #d4e0e6;
  font-weight: 700;
  user-select: none;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.12s ease;
}




[data-theme="graphite"] details summary:hover {
  background: rgba(148, 174, 187, 0.06);
}




[data-theme="graphite"] details[open] summary {
  border-bottom: 2px solid rgba(148, 174, 187, 0.12);
  padding-bottom: 8px;
  margin-bottom: 8px;
}




/* ============================================================
   GRAPHITE - EYE COMFORT TEXT TUNING
   Softer luminance and clearer hierarchy for long reading.

   Cascade contract: these broad rules are Graphite's text layer and the only
   place its readable text colors are chosen. They consume the --read-* tokens
   below; component rules should consume the same tokens instead of adding new
   broad element selectors or hard-coded hex. The element rules (h1-h6, p, span,
   li, label) keep !important because Graphite's look depends on them beating
   legacy per-component colors; the shared .cp-icon slot is excluded from the
   span rule so icon colors never need !important. Containers set inherited
   color only and do not need !important.
   ============================================================ */

[data-theme="graphite"] {
  --read-text-main: #cedae3;
  --read-text-soft: #b1c2ce;
  --read-text-muted: #97acba;
  --read-control-text: #c1d0db;
  --read-primary-button-text: #c9d6e0;
  --read-placeholder: #8ba1af;
  --read-text-heading: #d2dee6;
  --read-text-section: #c9d6de;
  --read-text-emphasis: #ccd9e2;
  --read-input-text: #d3e0e8;
}




[data-theme="graphite"] body,
[data-theme="graphite"] .screen,
[data-theme="graphite"] .card,
[data-theme="graphite"] .summary-panel,
[data-theme="graphite"] .settings-block,
[data-theme="graphite"] .history-item,
[data-theme="graphite"] .result-card,
[data-theme="graphite"] .result-row,
[data-theme="graphite"] .chore-session-card,
[data-theme="graphite"] .chore-settings-card,
[data-theme="graphite"] .chore-game-mode-card,
[data-theme="graphite"] .chore-selection-summary,
[data-theme="graphite"] .end-week-group-card,
[data-theme="graphite"] .end-week-progress-card,
[data-theme="graphite"] .end-week-completion-state,
[data-theme="graphite"] .motivation-hero-card,
[data-theme="graphite"] .suggestion-result,
[data-theme="graphite"] .time-picker-card,
[data-theme="graphite"] .motivation-modal-card,
[data-theme="graphite"] .chart-card,
[data-theme="graphite"] .optional-group,
[data-theme="graphite"] .follow-up-block,
[data-theme="graphite"] .editable-row,
[data-theme="graphite"] .diagnostics-row,
[data-theme="graphite"] .chart-preference-row,
[data-theme="graphite"] .kv-item,
[data-theme="graphite"] .time-record-card {
  color: var(--read-text-main);
}

/* Choice tiles keep !important: it intentionally beats their .selected accent
   colors so selection is shown by the surface, not the label. */
[data-theme="graphite"] .state-choice,
[data-theme="graphite"] .choice-card {
  color: var(--read-text-main) !important;
}




[data-theme="graphite"] .section-header,
[data-theme="graphite"] section > h2,
[data-theme="graphite"] section > h3 {
  border-bottom-color: rgba(148, 174, 187, 0.10) !important;
}

/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="graphite"] .section-header,
[data-theme="graphite"] section > h2,
[data-theme="graphite"] section > h3:where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--read-text-section) !important;
}




/* Brighter emphasis copy. Plain p/li are owned by the readable-text rule below. */
[data-theme="graphite"] .choice-card span,
[data-theme="graphite"] .suggestion-summary {
  color: var(--read-text-emphasis) !important;
}




/* Soft copy not covered by the readable-text rule below. */
/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="graphite"] .stat-card .label,
[data-theme="graphite"] :is(.chart-summary, .empty-state-subtitle):where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--read-text-soft) !important;
}




/* Field text and placeholder colours come from --read-input-text / --read-placeholder
   (root token block) through the shared form-field contract in styles.css. */




/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="graphite"] .btn-title:where(:not([data-cosmetic-skin] *)),
[data-theme="graphite"] .stat-card .value,
[data-theme="graphite"] :is(h1, h2, h3, h4, h5, h6):where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))),
[data-theme="graphite"] .results-section-title:where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--read-text-heading) !important;
}




/* Readable body text. The span selector excludes the shared .cp-icon slot so
   component icon colors apply without !important; :where() keeps the original
   (0,1,1) specificity for every other span. */
/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="graphite"] li,
[data-theme="graphite"] .history-item p,
[data-theme="graphite"] .summary-panel p,
[data-theme="graphite"] .settings-block p,
[data-theme="graphite"] .step-help,
[data-theme="graphite"] .step-label,
[data-theme="graphite"] .tagline,
[data-theme="graphite"] .input-hint,
[data-theme="graphite"] .btn-sub:where(:not([data-cosmetic-skin] *)),
[data-theme="graphite"] .motivation-hero-reference,
[data-theme="graphite"] .motivation-hero-label,
[data-theme="graphite"] :is(p, span:where(:not(.cp-icon, .chore-item-text, .end-week-task-title, .end-week-task-points)), label):where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))),
[data-theme="graphite"] .field-help:where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--read-text-soft) !important;
}




[data-theme="graphite"] .primary-btn,
[data-theme="graphite"] .action-btn,
[data-theme="graphite"] .chip-btn,
[data-theme="graphite"] .range-btn,
[data-theme="graphite"] .results-type-btn,
[data-theme="graphite"] .nav-btn,
[data-theme="graphite"] .theme-toggle,
[data-theme="graphite"] .delete-btn,
[data-theme="graphite"] .time-record-display {
  color: var(--read-control-text);
}




/* Checklist rows: notebook-line colours for the shared --checklist-row-* contract
   (consumed in chore-mode.css). Single source for Graphite checklist row colours. */
[data-theme="graphite"] {
  --checklist-row-bg: transparent;
  --checklist-row-border: rgba(126, 147, 162, 0.20);
  --checklist-row-checked-bg: linear-gradient(180deg, rgba(45, 74, 68, 0.70), rgba(36, 62, 58, 0.74));
  --checklist-row-checked-border: rgba(102, 157, 138, 0.42);
  --checklist-row-text: #d7e2ea;
  --checklist-row-checked-text: #c9ddd4;
  --end-week-row-text: var(--checklist-row-text);
  --end-week-row-checked-text: var(--checklist-row-checked-text);
}




[data-theme="graphite"] .chore-item-text,
[data-theme="graphite"] .end-week-task-title {
  text-shadow: none !important;
}




/* End of Week rows: notebook-line shape; colours come from the row tokens above. */
[data-theme="graphite"] .end-week-task-row {
  border-style: none none solid;
  border-width: 0 0 1px;
  border-radius: 0;
  min-height: 2.5rem;
}




[data-theme="graphite"] .end-week-task-row input:checked ~ :is(.end-week-task-title, .end-week-task-points) {
  text-decoration-color: rgba(140, 198, 173, 0.60);
}




/* Graphite Results charts: dark text on light chart surfaces. */
[data-theme="graphite"] .screen[data-screen="results"] {
  --chart-text-primary: #dce8f0;
  --chart-text-secondary: #c3d4df;
  --chart-text-muted: #a9bfcc;
  --chart-axis-text: #c8d8e2;
  --chart-axis-title: #dce8f0;
  --chart-legend-text: #d0e0ea;
  --chart-value-label: #dce8f0;
  --chart-grid-line: rgba(156, 184, 199, 0.14);
  --chart-tooltip-bg: rgba(16, 24, 30, 0.94);
  --chart-tooltip-title: #f2f8fc;
  --chart-tooltip-text: #e4edf4;
  --chart-tooltip-border: rgba(194, 214, 226, 0.24);
  /* Results text contract (results.css): section titles use the secondary tone. */
  --results-section-title: var(--chart-text-secondary);
}


/* Shared icon slots outside cards (menu items, Settings headings, empty states,
   Add-step) are always present; Graphite only restyles them. Menu and Settings
   icons are styled in navigation.css / settings.css; the empty-state svg above. */
[data-theme="graphite"] .empty-state .cp-icon {
  display: flex;
  margin: 0 auto 4px;
  color: var(--read-text-muted);
}

[data-theme="graphite"] .cp-icon.add-step-icon {
  margin-bottom: 6px;
  color: var(--read-text-muted);
}

[data-theme="graphite"] .cp-icon.add-step-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
}