/* ============================================================================
 * DESIGN: Terminal / CLI
 *
 * vim / tmux / monospace console mood.
 *
 * Background: black (dark by default, light = white-bg/black-text)
 * Font:       IBM Plex Mono / D2Coding everywhere
 * Status:     green (done) / yellow (in progress) / grey (pending) / red (stop)
 * Corners:    0 (sharp)
 * Shadow:     none
 * ============================================================================ */

html[data-design="terminal"] {
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --shadow-lg: none;
  --serif: 'IBM Plex Mono', 'D2Coding', 'Menlo', 'Courier New', monospace;
  --sans:  'IBM Plex Mono', 'D2Coding', 'Menlo', 'Courier New', monospace;
  --mono:  'IBM Plex Mono', 'D2Coding', 'Menlo', 'Courier New', monospace;
}

/* Force dark background by default; light mode → white-on-black inversion */
html[data-design="terminal"] {
  --bg: #0c0f0c;
  --bg-tint: #0f1410;
  --surface: #0f1410;
  --surface-2: #131a14;
  --border: #1e2a1e;
  --border-soft: #142014;
  --ink: #c5e7c8;
  --ink-soft: #94c08f;
  --muted: #6a8a6c;
}
html[data-design="terminal"][data-theme="light"] {
  --bg: #ffffff;
  --bg-tint: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --border: #d6d6d6;
  --border-soft: #ebebeb;
  --ink: #0a0a0a;
  --ink-soft: #2a2a2a;
  --muted: #6a6a6a;
}

/* Status colors as CSS vars for charts / dots */
html[data-design="terminal"] {
  --status-done:  #6ee067;
  --status-go:    #f3d266;
  --status-wait:  #888888;
  --status-stop:  #d8666a;
}

html[data-design="terminal"] body {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0;
  background: var(--bg) !important;
}
html[data-design="terminal"] body::before { opacity: 0 !important; }
html[data-design="terminal"] .drift-orb { display: none !important; }

/* Cards: hairline borders, no shadows, no rounding */
html[data-design="terminal"] .day,
html[data-design="terminal"] .today-card,
html[data-design="terminal"] .modal,
html[data-design="terminal"] .drawer,
html[data-design="terminal"] .palette-card,
html[data-design="terminal"] .task-breakdown {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
}

/* Headings: uppercase, mono */
html[data-design="terminal"] h1,
html[data-design="terminal"] h2,
html[data-design="terminal"] h3,
html[data-design="terminal"] h4,
html[data-design="terminal"] .day-name,
html[data-design="terminal"] .section-label {
  font-family: var(--mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Buttons: sharp, all-caps */
html[data-design="terminal"] button {
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Inputs: monospace, sharp */
html[data-design="terminal"] .task-input,
html[data-design="terminal"] .add-task-input,
html[data-design="terminal"] textarea,
html[data-design="terminal"] input[type="text"],
html[data-design="terminal"] input[type="date"],
html[data-design="terminal"] input[type="number"] {
  font-family: var(--mono) !important;
  border-radius: 0 !important;
}

/* Task rows: CLI feel */
html[data-design="terminal"] .task-item {
  padding: 2px 0 !important;
  font-family: var(--mono) !important;
  border-bottom: 1px dashed var(--border-soft);
}
html[data-design="terminal"] .task-input.done { color: var(--status-done); }
html[data-design="terminal"] .task-input:not(.done) { color: var(--status-go); }
html[data-design="terminal"] .chk { accent-color: var(--status-done); }

html[data-design="terminal"] .today-shell {
  font-family: var(--mono) !important;
}

/* Keyboard hint footer */
html[data-design="terminal"] body::after {
  content: 'j/k: move · x: toggle · g: goals · 1-5: views';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  pointer-events: none;
  z-index: 60;
  letter-spacing: 0.02em;
}

html[data-design="terminal"] .drawer {
  background: var(--surface) !important;
}
html[data-design="terminal"] .ai-msg .bubble {
  font-family: var(--mono) !important;
  font-size: 12.5px;
  line-height: 1.55;
}