/* ==========================================
   Conduit components
   Spec: docs/plans/2026-04-17-conduit-visual-design.md § Component catalog
   Reset + tokens live in tokens.css; this file is component classes only.
   Components expand as Phase 1 features land — only primitives that are
   already in use belong here.
   ========================================== */

/* ----------- Density ----------- */
/* Cozy is the default (no class needed). Compact shrinks body text by 1px
   and tightens row padding per visual design spec § Density modes. */
body.compact {
  font-size: 12px;
}

/* ----------- Visually hidden (ARIA) ----------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------- Brand mark (Pixel C Bold 5x5) ----------- */
.brand-mark {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: var(--brand-gap, 1px);
  width: var(--brand-size, 20px);
  height: var(--brand-size, 20px);
  flex-shrink: 0;
}

.brand-mark span {
  background: transparent;
}

.brand-mark span.on {
  background: var(--amber);
}

.wordmark {
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-max);
  text-transform: uppercase;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-lockup:hover .wordmark {
  color: var(--amber-bright);
}

/* ----------- Chip ----------- */
/* Labeled inline pill/button. Variants: default, bordered, icon-only, active. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 10px;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.chip:hover {
  background: var(--bg-hot);
  color: var(--fg-bright);
}

.chip .chip-label {
  color: var(--fg-dim);
}

.chip .chip-val {
  color: var(--fg-bright);
}

.chip--bordered {
  background: var(--bg-surface);
  border-color: var(--line);
}

.chip--icon {
  padding: 5px;
  width: 26px;
  height: 26px;
  justify-content: center;
}

.chip--active,
.chip[aria-expanded='true'] {
  background: var(--bg-hot);
  border-color: var(--amber);
  color: var(--amber);
}

/* ----------- Card / panel ----------- */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-8);
  border-bottom: 1px solid var(--line-dim);
}

.card-title {
  font-size: var(--text-md);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-max);
  font-weight: 600;
}

.card-hint {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.card-body {
  padding: var(--sp-8);
}

.card-foot {
  padding: var(--sp-5) var(--sp-8);
  background: var(--bg-deep);
  border-top: 1px dashed var(--line-dim);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ----------- Row (list item) ----------- */
.row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-left: 2px solid transparent;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

body.compact .row {
  padding-block: var(--sp-3);
  gap: var(--sp-3);
}

.row:hover {
  background: var(--bg-hot);
  border-left-color: var(--amber);
}

.row .row-index {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

.row .row-icon {
  color: var(--fg-dim);
}

.row .row-primary {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row:hover .row-primary,
.row.is-active .row-primary {
  color: var(--amber);
}

.row .row-secondary {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
}

/* ----------- Section header inside a page ----------- */
.section-h {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-max);
}

.section-h::before {
  content: '//';
  color: var(--amber);
  letter-spacing: var(--tracking-widest);
}

/* ----------- Page heading ----------- */
.page-heading {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
}

.page-heading .page-title {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-max);
}

.page-heading .page-subtitle {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-dim);
}

/* ----------- Buttons ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  transition: color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.btn:hover {
  color: var(--fg-bright);
}

.btn--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg-deep);
  font-weight: 700;
  padding: 6px 12px;
}

.btn--primary:hover {
  background: var(--amber-bright);
  border-color: var(--amber-bright);
  color: var(--bg-deep);
}

.btn--secondary {
  border-color: var(--line);
  color: var(--fg);
}

.btn--secondary:hover {
  border-color: var(--line-bright);
  color: var(--fg-bright);
}

.btn--danger {
  border-color: rgba(230, 122, 92, 0.3);
  color: var(--red);
}

.btn--danger:hover {
  border-color: var(--red);
  color: var(--fg-max);
  background: rgba(230, 122, 92, 0.1);
}

.btn--ghost {
  color: var(--fg-dim);
}

.btn--ghost:hover {
  background: transparent;
  color: var(--fg-bright);
}

.btn--block {
  width: 100%;
  padding: 12px 16px;
}

/* Dirty indicator — amber dot prefix on an otherwise-primary button. */
.btn--primary[data-dirty='true']::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--bg-deep);
}

/* ----------- Input (component class; tokens.css handles bare <input>) ----------- */
.input {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--fg-bright);
  font-family: inherit;
  font-size: var(--text-base);
  padding: var(--sp-5) var(--sp-6);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease);
}

.input:focus {
  border-color: var(--amber);
}

.input--compact {
  font-size: 12px;
  padding: var(--sp-3) var(--sp-5);
}

/* Native date/time inputs — minimal terminal-styled pass.
   color-scheme: dark (set on html in tokens.css) already gives us the dark
   browser chrome and popup, so we only need to:
     - lock numbers to tabular figures so the digits don't dance as you tab
     - tint the calendar/clock indicator white via filter:invert(1) so it
       reads against the dark background regardless of theme accent
   The native popup is left browser-controlled — a full custom widget is
   tracked separately for if the native UX feels off. */
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
  filter: invert(1);
  transition: opacity var(--duration-fast) var(--ease);
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Empty-state dim so the placeholder format text reads as hint text, not
   a real value. :placeholder-shown is true while no value has been picked. */
input[type="datetime-local"]:placeholder-shown,
input[type="date"]:placeholder-shown,
input[type="time"]:placeholder-shown {
  color: var(--fg-dim);
}

/* ----------- Toggle ----------- */
.toggle {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  cursor: pointer;
  flex-shrink: 0;
}

.toggle input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.toggle .track {
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background var(--duration-normal) var(--ease);
}

.toggle .dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--fg-dim);
  transition: transform var(--duration-normal) var(--ease),
              background var(--duration-normal) var(--ease);
}

.toggle input:checked ~ .track {
  background: var(--bg-hot);
}

.toggle input:checked ~ .dot {
  background: var(--amber);
  transform: translateX(14px);
}

/* ----------- Segmented control ----------- */
.segmented {
  display: inline-flex;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  padding: 2px;
}

.segmented button {
  padding: 4px 8px;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}

.segmented button:hover {
  color: var(--fg-bright);
}

.segmented button[aria-pressed='true'] {
  background: var(--amber);
  color: var(--bg-deep);
  font-weight: 700;
}

/* ==========================================
   Login page
   ========================================== */

.login-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 20px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: var(--sp-16) 28px var(--sp-10);
  display: grid;
  gap: var(--sp-10);
}

.login-card .brand-row {
  display: grid;
  justify-items: center;
  gap: var(--sp-6);
}

.login-card .brand-mark {
  --brand-size: 48px;
  --brand-gap: 2px;
}

.login-card .wordmark {
  font-size: 16px;
}

.login-card .tagline {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
}

.login-card label {
  display: grid;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.login-card .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.login-footer {
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: var(--sp-2);
}

.login-error {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--red);
  text-align: center;
}

/* ==========================================
   App header strip
   ========================================== */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: var(--sp-5) var(--sp-10);
  border-bottom: 1px solid var(--line-dim);
  background: var(--bg-deep);
  position: relative;
  z-index: 100;
}

.app-header .brand-lockup {
  color: var(--fg-max);
}

.app-header .wordmark {
  font-size: 13px;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.header-clock {
  font-variant-numeric: tabular-nums;
  gap: var(--sp-2);
}

.header-clock .clock-date {
  color: var(--fg);
}

.header-clock .clock-sep {
  color: var(--fg-dim);
}

.header-clock .clock-time {
  color: var(--fg-bright);
}

/* ----------- Workspace chip + dropdown ----------- */

.workspace-chip-wrap {
  position: relative;
}

.workspace-chip {
  gap: var(--sp-2);
}

.workspace-chip .chip-label {
  color: var(--fg-dim);
}

.workspace-chip .chip-val {
  color: var(--amber);
}

.workspace-chip svg {
  color: var(--fg-dim);
  margin-left: 2px;
}

.workspace-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 200;
}

.workspace-dropdown li {
  padding: 0;
}

.workspace-dropdown button {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: 8px 12px;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.workspace-dropdown button:hover {
  background: var(--bg-hot);
  color: var(--fg-bright);
}

.workspace-dropdown li[aria-selected='true'] button {
  color: var(--amber);
}

.workspace-dropdown .ws-idx {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

.workspace-dropdown .ws-kbd {
  font-size: var(--text-xs);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
}

/* ==========================================
   Homepage (`/`)
   ========================================== */

.home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-10);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-10);
  position: relative;
  z-index: 1;
}

.home-left {
  display: grid;
  gap: var(--sp-10);
  align-content: start;
  min-width: 0;
}

.home-right {
  display: grid;
  gap: var(--sp-10);
  align-content: start;
  position: sticky;
  top: var(--sp-6);
}

.home-empty {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
  padding: var(--sp-12) var(--sp-8);
}

/* ----------- Hero clock ----------- */

.hero-clock {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-8) 0 var(--sp-4);
}

.hero-time {
  font-family: var(--font-mono);
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--fg-max);
  font-variant-numeric: tabular-nums;
}

.hero-sep {
  color: var(--amber);
  padding: 0 4px;
}

.hero-suffix {
  color: var(--fg-max);
}

.hero-date {
  font-size: 12px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}

/* ----------- Smart bar ----------- */

.smart-bar {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: var(--sp-6);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  padding: 14px 16px;
  position: relative;
  transition: border-color var(--duration-normal) var(--ease),
              box-shadow var(--duration-normal) var(--ease);
}

.smart-bar:focus-within {
  border-color: var(--amber);
  box-shadow: 0 0 24px rgba(212, 169, 58, 0.15);
}

.smart-glyph {
  font-size: 18px;
  text-align: center;
  color: var(--fg-dim);
  transition: color var(--duration-fast) var(--ease);
}

.smart-bar[data-mode='query'] .smart-glyph,
.smart-bar[data-mode='bang'] .smart-glyph,
.smart-bar[data-mode='url'] .smart-glyph,
.smart-bar[data-mode='tag'] .smart-glyph {
  color: var(--amber);
}

.smart-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.smart-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-2) 2px var(--sp-3);
  background: var(--bg-deep);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: inherit;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
}

.smart-provider-chip[hidden] {
  display: none;
}

.smart-provider-chip:hover {
  background: var(--amber);
  color: var(--bg-deep);
}

.smart-chip-bang {
  font-weight: 600;
}

.smart-chip-close {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  opacity: 0.7;
}

.smart-provider-chip:hover .smart-chip-close {
  opacity: 1;
}

.smart-input {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--fg-bright);
  outline: none;
  width: 100%;
}

.smart-input::placeholder {
  color: var(--fg-dim);
}

.smart-hint {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 3px 8px;
  border: 1px solid var(--line);
}

/* Blinking block cursor — only when idle + empty */
.smart-cursor {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 16px;
  background: var(--amber);
  pointer-events: none;
}

.smart-bar[data-mode='idle'] .smart-input:placeholder-shown {
  caret-color: transparent;
}

.smart-bar[data-mode='idle'] .smart-input:placeholder-shown ~ .smart-cursor {
  display: block;
  animation: smart-cursor-blink 1.1s step-end infinite;
}

@keyframes smart-cursor-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-cursor {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Context echo under the bar */
.smart-echo {
  grid-column: 2 / -1;
  margin-top: 4px;
  font-size: var(--text-md);
  color: var(--fg-dim);
  display: flex;
  gap: 6px;
  align-items: center;
}

.smart-echo-arrow {
  color: var(--amber);
}

/* Query-mode results dropdown (local shortcut matches + provider fallback) */
.smart-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  z-index: 300;
  max-height: 360px;
  overflow-y: auto;
}

.smart-results[hidden] {
  display: none;
}

.smart-results-group {
  display: block;
  padding: var(--sp-2) var(--sp-5) var(--sp-1);
  background: var(--bg-deep);
  color: var(--fg-dim);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-bottom: 1px dashed var(--line-dim);
}

.smart-results-group:not(:first-child) {
  border-top: 1px dashed var(--line-dim);
  margin-top: var(--sp-1);
}

.smart-result {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: 10px var(--sp-5);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.smart-result:hover,
.smart-result.is-selected {
  background: var(--bg-deep);
  border-left-color: var(--amber);
}

.smart-result-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  font-weight: 600;
  opacity: 0.85;
}

.smart-result-icon img {
  width: 18px;
  height: 18px;
  border-radius: 2px;
}

.smart-result-main {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}

.smart-result-label {
  color: var(--fg-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}

.smart-result-secondary {
  color: var(--fg-dim);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.smart-result-kbd {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid var(--line-dim);
  color: var(--fg-dim);
  font-size: var(--text-sm);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.smart-result:hover .smart-result-kbd,
.smart-result.is-selected .smart-result-kbd {
  opacity: 1;
  border-color: var(--amber);
  color: var(--amber);
}

.smart-result--provider .smart-result-icon {
  color: var(--fg-dim);
}

/* Provider picker dropdown */
.smart-provider-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 150;
}

.smart-provider-picker li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 8px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.smart-provider-picker li:hover,
.smart-provider-picker li.is-selected {
  background: var(--bg-hot);
  border-left-color: var(--amber);
}

.smart-provider-bang {
  font-size: var(--text-md);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.smart-provider-name {
  font-size: var(--text-base);
  color: var(--fg-bright);
}

.smart-provider-host {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
}

/* ----------- Most used / Today / Recent notes placeholder shells ----------- */

.most-used,
.today-panel,
.recent-notes {
  background: var(--bg-panel);
  border: 1px solid var(--line);
}

.most-used-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.most-used-menu {
  margin-left: auto;
}

.most-used-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.manage-hidden-body {
  max-height: 60vh;
  overflow-y: auto;
}

.manage-hidden-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.manage-hidden-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-deep);
  border: 1px solid var(--line-dim);
}

.manage-hidden-icon {
  display: grid;
  place-items: center;
  color: var(--fg-dim);
}

.manage-hidden-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-tabs {
  gap: var(--sp-8);
  padding: var(--sp-5) var(--sp-8);
}

.today-tabs .card-title {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--fg-dim);
  transition: color var(--duration-fast) var(--ease);
}

.today-tabs .card-title[aria-selected='true'] {
  color: var(--fg-max);
  border-bottom: 1px solid var(--amber);
  padding-bottom: 4px;
}

.today-tabs .card-title:hover {
  color: var(--fg-bright);
}

.today-body {
  padding: var(--sp-5) var(--sp-8);
}

.today-add {
  margin-bottom: var(--sp-5);
}

.today-add-input {
  width: 100%;
}

.today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.today-empty {
  text-align: center;
  padding: var(--sp-10) 0;
  color: var(--fg-dim);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.task-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px var(--sp-3);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.task-row:hover {
  background: var(--bg-hot);
  border-left-color: var(--amber);
}

.task-row.is-expanded {
  display: block;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  padding: var(--sp-5);
  cursor: default;
}

.task-check {
  width: 16px;
  height: 16px;
  background: transparent;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.task-check-box {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
  transition: border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}

.task-check:hover .task-check-box {
  border-color: var(--amber);
}

.task-title {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-due {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

.task-due[data-state='today'] {
  color: var(--amber);
}

.task-due[data-state='overdue'] {
  color: var(--red);
}

.task-edit {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}

.task-edit-actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

.task-edit-actions .spacer {
  flex: 1;
}

/* Press-and-hold mic button adjacent to an input. */
.voice-input-row {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
}

.voice-input-row > :first-child {
  flex: 1;
  min-width: 0;
}

.btn-mic {
  width: 32px;
  flex: 0 0 auto;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.btn-mic:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.btn-mic.is-recording {
  background: var(--amber);
  color: var(--bg-deep);
  border-color: var(--amber-bright);
  animation: mic-pulse 1.4s ease-in-out infinite;
}

.btn-mic.is-busy {
  opacity: 0.5;
  cursor: wait;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 169, 58, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 169, 58, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-mic.is-recording {
    animation: none !important;
  }
}

/* Responsive: collapse right column under 900px */
@media (max-width: 900px) {
  .home {
    grid-template-columns: 1fr;
  }
  .home-right {
    position: static;
  }
}

/* ==========================================
   Library (`/shortcuts`)
   ========================================== */

.library {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-10);
  position: relative;
  z-index: 1;
}

.library-empty {
  padding: var(--sp-16);
  text-align: center;
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-size: var(--text-sm);
}

.library-filter {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block: var(--sp-6) var(--sp-10);
}

.library-filter-input {
  flex: 1;
  min-width: 0;
}

.library-filter-hint {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

.library-section[hidden] {
  display: none;
}

.shortcut-tile[hidden] {
  display: none;
}

.library-section {
  margin-block: var(--sp-12);
}

.library-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.section-menu {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: var(--fg-dim);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}

.section-menu:hover,
.section-menu:focus-visible {
  color: var(--fg-bright);
  background: var(--bg-hot);
  outline: none;
}

.library-section-count {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wider);
  font-variant-numeric: tabular-nums;
}

.library-section-empty {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
  padding: var(--sp-5) var(--sp-6);
  border: 1px dashed var(--line-dim);
}

/* ----------- Shortcut grid ----------- */

.shortcut-grid {
  display: grid;
  gap: var(--sp-3);
}

.shortcut-grid[data-columns='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shortcut-grid[data-columns='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shortcut-grid[data-columns='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .shortcut-grid[data-columns] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------- Shortcut tile ----------- */

.shortcut-tile {
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  align-items: center;
  gap: var(--sp-4);
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line-dim);
  color: var(--fg);
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  position: relative;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.shortcut-tile:hover,
.shortcut-tile:focus-visible {
  background: var(--bg-hot);
  border-color: var(--line);
  color: var(--fg-bright);
  outline: none;
}

.shortcut-grid[data-columns='4'] .shortcut-tile {
  padding: 8px;
  gap: var(--sp-3);
}

body.compact .shortcut-tile {
  padding: 8px 10px;
}

.tile-icon {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  color: var(--fg-dim);
}

.tile-icon img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

.shortcut-tile:hover .tile-icon,
.shortcut-tile:focus-visible .tile-icon {
  color: var(--amber);
}

.tile-emoji {
  font-size: 14px;
  line-height: 1;
}

.tile-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-normal);
}

.shortcut-grid[data-columns='4'] .tile-title {
  font-size: 12px;
}

.tile-menu {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fg-dim);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.shortcut-tile:hover .tile-menu,
.shortcut-tile:focus-within .tile-menu {
  opacity: 1;
}

.tile-menu:hover {
  color: var(--fg-bright);
}

/* ----------- Pin + hide indicators ----------- */

.tile-pin-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  pointer-events: none;
}

.shortcut-tile[data-hidden='true'] {
  opacity: 0.5;
}

.tile-hide-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  color: var(--fg-dim);
  pointer-events: none;
}

/* If both pinned + hidden, shift the amber dot left of the eye-off icon. */
.shortcut-tile[data-pinned='true'][data-hidden='true'] .tile-pin-dot {
  right: 20px;
}

/* Group tile: chevron hint that toggles on expand. */
.shortcut-tile[data-type='group'] .tile-icon::after {
  content: '›';
  margin-left: 6px;
  color: var(--fg-dim);
  font-size: 14px;
  transition: transform var(--duration-fast) var(--ease);
  display: inline-block;
}

.shortcut-tile[data-type='group'][aria-expanded='true'] .tile-icon::after {
  transform: rotate(90deg);
  color: var(--amber);
}

/* Group children drawer — spans full width of the parent grid, hosts a
   nested grid of child tiles. */
.group-drawer {
  grid-column: 1 / -1;
  padding: var(--sp-3) 0 var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--amber);
  margin-left: 12px;
}

.group-drawer[hidden] {
  display: none;
}

.group-drawer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}

/* ==========================================
   Library heading (with actions row)
   ========================================== */

.library-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.library-heading-text {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}

.library-heading-actions {
  display: flex;
  gap: var(--sp-3);
}

.library-heading-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ==========================================
   Modal overlay + dialog
   ========================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: grid;
  place-items: center;
  padding: var(--sp-8);
  z-index: 500;
  animation: modal-overlay-in var(--duration-normal) ease-out;
}

.modal-overlay[hidden] {
  display: none;
}

@keyframes modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.modal-open {
  overflow: hidden;
}

.modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 80px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-8);
  border-bottom: 1px solid var(--line-dim);
}

.modal-close {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--fg-dim);
  transition: color var(--duration-fast) var(--ease);
}

.modal-close:hover {
  color: var(--fg-bright);
}

.modal-body {
  padding: var(--sp-8);
  overflow-y: auto;
  display: grid;
  gap: var(--sp-6);
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-8);
  background: var(--bg-deep);
  border-top: 1px dashed var(--line-dim);
}

/* ==========================================
   Form fields (generic; grows with features)
   ========================================== */

.form-field {
  display: grid;
  gap: var(--sp-2);
}

.form-field label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.form-hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-dim);
  font-size: var(--text-sm);
  margin-left: var(--sp-2);
}

.form-field--grid-2 {
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.form-field[hidden],
.form-field[data-visible-when-section][hidden] {
  display: none !important;
}

.form-error {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--red);
  color: var(--red);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

/* ==========================================
   Type picker (radiogroup)
   ========================================== */

.type-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  padding: 0;
  border: 0;
  margin: 0;
}

.type-picker-item {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 6px;
  padding: var(--sp-5) var(--sp-3);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.type-picker-item:hover {
  border-color: var(--line-bright);
  color: var(--fg-bright);
}

.type-picker-item[aria-checked='true'] {
  background: var(--bg-hot);
  border-color: var(--amber);
  color: var(--amber);
}

.type-picker-icon {
  display: grid;
  place-items: center;
}

.type-picker-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ==========================================
   Icon picker (inside add/edit shortcut modal)
   ========================================== */

.icon-picker {
  display: grid;
  gap: var(--sp-3);
  border: 1px solid var(--line);
  padding: var(--sp-4);
  background: var(--bg-deep);
}

.icon-picker-tabs {
  display: flex;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--line-dim);
  padding-bottom: var(--sp-3);
}

.icon-picker-tab {
  background: transparent;
  border: 0;
  padding: 2px 0;
  font-family: inherit;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
  border-bottom: 1px solid transparent;
}

.icon-picker-tab:hover {
  color: var(--fg-bright);
}

.icon-picker-tab[aria-selected='true'] {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

.icon-picker-panel[hidden] {
  display: none !important;
}

.icon-picker-panel[data-icon-panel='favicon']:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.icon-favicon-preview {
  width: 24px;
  height: 24px;
  background: var(--bg-panel);
  padding: 4px;
  border: 1px solid var(--line-dim);
  object-fit: contain;
}

.icon-emoji-input {
  font-size: 18px;
  max-width: 80px;
  text-align: center;
}

.lucide-search {
  margin-bottom: var(--sp-3);
}

.lucide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}

.lucide-empty {
  margin: var(--sp-3) 0 0;
  color: var(--fg-dim);
  font-size: var(--text-sm);
  text-align: center;
}

.lucide-option[hidden] { display: none; }

.icon-picker-panel[data-icon-panel='upload']:not([hidden]) {
  display: grid;
  gap: var(--sp-3);
}

.icon-upload-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.icon-upload-preview {
  width: 32px;
  height: 32px;
  background: var(--bg-panel);
  padding: 4px;
  border: 1px solid var(--line-dim);
  object-fit: contain;
}

.icon-upload-btn {
  cursor: pointer;
}

.icon-upload-status {
  font-size: var(--text-sm);
  color: var(--fg-dim);
}

.icon-upload-status.is-error {
  color: var(--red);
}

/* Curated emoji grid inside the Emoji tab */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  max-height: 200px;
  overflow-y: auto;
}

.emoji-grid button {
  font-size: 18px;
  line-height: 1;
  padding: var(--sp-2);
  background: var(--bg-deep);
  border: 1px solid var(--line-dim);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.emoji-grid button:hover {
  background: var(--bg-hot);
  border-color: var(--amber);
}

.emoji-grid button.is-selected {
  background: var(--bg-hot);
  border-color: var(--amber);
}

/* "or" divider used between file-upload + paste-URL affordances */
.form-divider {
  display: flex;
  align-items: center;
  margin: var(--sp-3) 0;
  color: var(--fg-dim);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--line-dim);
}
.form-divider span { padding: 0 var(--sp-3); }

.icon-url-row {
  display: flex;
  gap: var(--sp-3);
}
.icon-url-row .icon-url-input { flex: 1; }

.icon-url-error {
  color: var(--red);
  font-size: var(--text-sm);
  margin-top: var(--sp-2);
}

/* ==========================================
   Reorder sections modal
   ========================================== */

.reorder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.reorder-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-panel);
  border: 1px solid var(--line-dim);
  cursor: grab;
  user-select: none;
}

.reorder-row:active { cursor: grabbing; }

.reorder-row.is-dragging {
  opacity: 0.5;
  border-color: var(--amber);
}

.reorder-grip {
  color: var(--fg-dim);
  letter-spacing: -2px;
  font-size: var(--text-base);
  line-height: 1;
}

.reorder-name {
  color: var(--fg);
}

.reorder-actions {
  display: flex;
  gap: var(--sp-1);
}

.lucide-option {
  display: grid;
  place-items: center;
  padding: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--line-dim);
  color: var(--fg);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.lucide-option:hover {
  background: var(--bg-hot);
  color: var(--fg-bright);
}

.lucide-option[aria-pressed='true'] {
  background: var(--bg-hot);
  border-color: var(--amber);
  color: var(--amber);
}

/* ==========================================
   Context menu (tile + section menus)
   ========================================== */

.context-menu {
  min-width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  padding: 4px 0;
  z-index: 400;
}

.menu-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--fg);
  text-align: left;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.menu-item:hover,
.menu-item:focus-visible {
  background: var(--bg-hot);
  color: var(--fg-bright);
  outline: none;
}

.menu-item--danger {
  color: var(--red);
}

.menu-item--danger:hover,
.menu-item--danger:focus-visible {
  background: rgba(230, 122, 92, 0.08);
  color: var(--fg-max);
}

.menu-icon {
  width: 12px;
  display: grid;
  place-items: center;
  color: var(--fg-dim);
}

.menu-kbd {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-dim);
}

.menu-divider {
  height: 1px;
  margin: 4px 12px;
  background: var(--line-dim);
}

.menu-section {
  padding: 8px 12px;
}

.menu-section-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 6px;
}

/* ==========================================
   Command palette (⌘K)
   ========================================== */

.command-palette-overlay {
  align-items: start;
  padding-top: 15vh;
}

.command-palette {
  width: 100%;
  max-width: 560px;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 70vh;
}

.command-palette-input-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-8);
  border-bottom: 1px solid var(--line-dim);
}

.command-palette-input {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--fg-bright);
  outline: none;
  width: 100%;
}

.command-palette-input::placeholder {
  color: var(--fg-dim);
}

.command-palette-hint {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  color: var(--fg-dim);
  padding: 3px 6px;
  border: 1px solid var(--line);
}

.command-palette-results {
  overflow-y: auto;
  padding: var(--sp-3) 0;
}

.palette-group {
  padding: var(--sp-3) 0;
}

.palette-group + .palette-group {
  border-top: 1px dashed var(--line-dim);
}

.palette-group-label {
  padding: 4px var(--sp-8);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.palette-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.palette-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: 7px var(--sp-8);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.palette-item:hover,
.palette-item.is-selected {
  background: var(--bg-hot);
  border-left-color: var(--amber);
}

.palette-item-label {
  color: var(--fg-bright);
  font-size: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-item.is-selected .palette-item-label {
  color: var(--amber);
}

.palette-item-secondary {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
}

.palette-empty {
  padding: var(--sp-8) var(--sp-8);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ==========================================
   Settings page
   ========================================== */

.settings {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-10);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-10);
  position: relative;
  z-index: 1;
  align-items: start;
}

.settings-toc {
  position: sticky;
  top: var(--sp-8);
}

.settings-toc-title {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-max);
  margin-bottom: var(--sp-5);
}

.settings-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.settings-toc a {
  display: block;
  padding: 4px 0;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.settings-toc a:hover {
  color: var(--fg-bright);
}

.settings-stack {
  display: grid;
  gap: var(--sp-10);
  min-width: 0;
}

.settings-card .card-body {
  display: grid;
  gap: var(--sp-6);
}

.settings-foot {
  display: flex;
  gap: var(--sp-4);
  justify-content: flex-end;
}

.settings-foot .btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.workspaces-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.workspace-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-deep);
  border: 1px solid var(--line-dim);
}

.workspace-name {
  color: var(--fg-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.providers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.provider-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-deep);
  border: 1px solid var(--line-dim);
}

.provider-bang {
  font-size: var(--text-md);
  color: var(--amber);
  letter-spacing: var(--tracking-wider);
}

.provider-name {
  color: var(--fg-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-host {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
}

.sessions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.session-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-deep);
  border: 1px solid var(--line-dim);
}

.session-row[data-current='true'] {
  border-color: var(--line-bright);
}

.session-primary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.session-label {
  color: var(--fg-bright);
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-badge {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 1px 5px;
}

.session-secondary {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Voice card */
.voice-key-form .form-field {
  margin-bottom: var(--sp-6);
}

.voice-key-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.voice-key-masked {
  font-family: var(--font-mono);
  color: var(--amber);
  letter-spacing: 0.2em;
  padding: 6px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
}

.voice-key-input {
  flex: 1;
  min-width: 220px;
}

.voice-models-form {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.voice-test {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line-dim);
}

.voice-test-result {
  display: grid;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wide);
}

.voice-test-row .label {
  display: inline-block;
  min-width: 120px;
  color: var(--fg-dim);
}

.voice-test-row .value {
  color: var(--fg);
  font-family: var(--font-mono);
}

.voice-test-row .value--ok {
  color: var(--green);
}

.voice-test-row .value--err {
  color: var(--red);
}

/* Amber dot prefix when the save button is dirty */
.settings-foot .btn--primary[data-dirty='true']::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--bg-deep);
  display: inline-block;
}

@media (max-width: 720px) {
  .settings {
    grid-template-columns: 1fr;
  }
  .settings-toc {
    position: static;
  }
}

/* ==========================================
   Toast
   ========================================== */

.toast-stack {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  z-index: 600;
  max-width: 380px;
}

.toast {
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  color: var(--fg-bright);
  font-size: var(--text-base);
  cursor: pointer;
  animation: toast-in var(--duration-normal) ease-out;
}

.toast--success {
  border-left-color: var(--green);
}

.toast--error {
  border-left-color: var(--red);
}

.toast.is-leaving {
  animation: toast-out 150ms ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

/* ==========================================
   Voice-notes modal (feature 14a)
   ========================================== */

.modal.modal--wide {
  max-width: 680px;
}

.voice-notes-editor {
  display: grid;
  gap: var(--sp-3);
}

.voice-notes-textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 180px;
}

.voice-notes-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.voice-notes-toolbar .spacer {
  flex: 1;
}

.voice-notes-status {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.voice-notes-mic {
  width: 36px;
  height: 32px;
}

.btn.is-busy {
  opacity: 0.6;
  cursor: wait;
}

.voice-notes-format {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border: 1px solid var(--line-dim);
  border-bottom: 0;
  background: var(--bg-deep);
}

.voice-notes-format-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 var(--sp-2);
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-dim);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.voice-notes-format-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.voice-notes-format-btn:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 1px;
}

.voice-notes-format-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--line-dim);
  margin: 0 var(--sp-1);
}

.voice-notes-format + .voice-notes-textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.voice-notes-foot .spacer {
  flex: 1;
}

.voice-summary-toggle .checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
}

.voice-summary-toggle .checkbox-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--amber);
}

.voice-summary-toggle .checkbox-row code {
  background: var(--bg-deep);
  padding: 0 4px;
  font-size: 0.9em;
}

[data-visible-when-template][hidden] {
  display: none !important;
}

/* ==========================================
   Notes page (/notes) — three-column layout
   ========================================== */

.notes-page {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-8);
  min-height: calc(100vh - 48px);
}

.notes-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notes-heading-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.notes-preset {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}

.notes-preset-btn {
  padding: var(--sp-2) var(--sp-4);
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  font-family: inherit;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.notes-preset-btn[aria-pressed="true"] {
  background: var(--amber);
  color: var(--bg-deep);
}

.notes-preset-btn:hover:not([aria-pressed="true"]) {
  color: var(--fg);
}

.notes-layout {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 220px 340px 1fr;
  min-height: 0;
}

.notes-layout[data-preset="reader"] {
  grid-template-columns: 200px 1fr;
}
.notes-layout[data-preset="reader"] .notes-sidebar {
  display: none;
}
.notes-layout[data-preset="manage"] {
  grid-template-columns: 220px 480px 1fr;
}

.notes-sidebar {
  border: 1px solid var(--line-dim);
  background: var(--bg-panel);
  padding: var(--sp-5);
  overflow-y: auto;
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.notes-side-section {
  display: grid;
  gap: var(--sp-2);
}

.notes-side-head {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-bottom: 1px dashed var(--line-dim);
  padding-bottom: var(--sp-1);
}

.notes-side-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}

.notes-side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  color: var(--fg);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.notes-side-link:hover {
  background: var(--bg-deep);
}

.notes-side-link.is-active {
  border-left-color: var(--amber);
  color: var(--amber);
}

.notes-side-count {
  color: var(--fg-dim);
  font-size: var(--text-sm);
}

.notes-list-column {
  border: 1px solid var(--line-dim);
  background: var(--bg-panel);
  overflow-y: auto;
  display: grid;
  grid-template-rows: auto 1fr;
}

.notes-list-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-dim);
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.notes-list-filter-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.notes-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-3);
  border: 1px solid var(--line-dim);
  font-size: var(--text-sm);
  color: var(--fg-dim);
}

.notes-chip a {
  color: var(--fg-dim);
  text-decoration: none;
  font-weight: bold;
}

.notes-chip a:hover { color: var(--red); }

.notes-sort-toggle {
  color: var(--fg-dim);
  text-decoration: none;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.notes-sort-toggle:hover { color: var(--amber); }

.notes-list {
  overflow-y: auto;
}

.notes-list-group-head {
  position: sticky;
  top: 0;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: var(--bg-deep);
  border-bottom: 1px dashed var(--line-dim);
  z-index: 1;
}

.notes-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notes-list-item {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px dashed var(--line-dim);
  color: var(--fg);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.notes-list-item:hover {
  background: var(--bg-deep);
}

.notes-list-item.is-active {
  background: var(--bg-deep);
  border-left-color: var(--amber);
}

.notes-list-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--fg-dim);
}

.notes-list-badge {
  padding: 0 var(--sp-2);
  border: 1px solid var(--line-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.notes-list-tag {
  color: var(--amber);
}

.notes-empty {
  padding: var(--sp-6);
  color: var(--fg-dim);
  text-align: center;
}

.notes-detail {
  border: 1px solid var(--line-dim);
  background: var(--bg-panel);
  overflow-y: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

.notes-detail-empty {
  padding: var(--sp-8);
  color: var(--fg-dim);
  display: grid;
  place-items: center;
}

.notes-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line-dim);
  position: sticky;
  top: 0;
  background: var(--bg-panel);
}

.notes-detail-title {
  font-size: 1.3em;
  margin: 0 0 var(--sp-2) 0;
  color: var(--fg-bright);
}

.notes-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--fg-dim);
}

.notes-detail-badge {
  padding: 0 var(--sp-2);
  border: 1px solid var(--line-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.notes-detail-source { color: var(--amber); border-color: var(--amber); }

.notes-detail-tag { color: var(--amber); }

.notes-detail-body {
  padding: var(--sp-6);
  overflow-y: auto;
}

.notes-detail-empty-body {
  color: var(--fg-dim);
  font-style: italic;
}

.notes-detail-foot {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px dashed var(--line-dim);
  font-size: var(--text-sm);
  color: var(--fg-dim);
}

/* Markdown body typography — shared by the detail pane. */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  color: var(--fg-bright);
  margin-top: 1em;
  margin-bottom: 0.4em;
  letter-spacing: var(--tracking-tight);
}

.markdown-body h1 { font-size: 1.4em; }
.markdown-body h2 { font-size: 1.2em; }
.markdown-body h3 { font-size: 1.05em; }

.markdown-body p { margin: 0.5em 0; }

.markdown-body ul,
.markdown-body ol {
  margin: 0.5em 0 0.5em 1.2em;
  padding: 0;
}

.markdown-body li { margin: 0.2em 0; }

.markdown-body a {
  color: var(--amber);
  text-decoration: underline;
}

.markdown-body code {
  background: var(--bg-deep);
  padding: 0 4px;
  font-family: inherit;
  font-size: 0.95em;
  color: var(--amber);
}

.markdown-body pre {
  background: var(--bg-deep);
  padding: var(--sp-4);
  overflow-x: auto;
  border: 1px solid var(--line-dim);
}

.markdown-body pre code {
  background: transparent;
  padding: 0;
  color: var(--fg);
}

.markdown-body blockquote {
  border-left: 3px solid var(--amber);
  padding-left: var(--sp-4);
  color: var(--fg-dim);
  margin: var(--sp-4) 0;
}

.markdown-body img {
  max-width: 100%;
  height: auto;
}

.markdown-body hr {
  border: 0;
  border-top: 1px dashed var(--line-dim);
  margin: var(--sp-5) 0;
}

.markdown-body input[type="checkbox"] {
  margin-right: var(--sp-2);
  accent-color: var(--amber);
}

@media (max-width: 1100px) {
  .notes-layout {
    grid-template-columns: 180px 280px 1fr;
  }
  .notes-layout[data-preset="manage"] {
    grid-template-columns: 180px 400px 1fr;
  }
}

/* ==========================================
   Diagnostics card
   ========================================== */

.diagnostics {
  display: grid;
  gap: var(--sp-5);
}

.diagnostics-placeholder {
  color: var(--fg-dim);
  font-style: italic;
}

.diag-section {
  border: 1px dashed var(--line-dim);
}

.diag-section-head {
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-deep);
  border-bottom: 1px dashed var(--line-dim);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.diag-section-body {
  padding: var(--sp-2) var(--sp-4);
  display: grid;
  gap: 2px;
}

.diag-subsection {
  padding: var(--sp-2) 0;
  border-top: 1px dashed var(--line-dim);
}

.diag-subsection:first-child {
  border-top: 0;
  padding-top: 0;
}

.diag-subhead {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-1);
}

.diag-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-4);
  font-size: var(--text-sm);
}

.diag-k {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.diag-v {
  color: var(--fg);
  word-break: break-word;
}

.diag-errors {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}

.diag-error {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--line-dim);
}

.diag-error:last-child { border-bottom: 0; }

.diag-error-meta {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.diag-error-msg {
  color: var(--red);
  white-space: pre-wrap;
  word-break: break-word;
}

.diag-empty {
  color: var(--fg-dim);
  font-style: italic;
}

.diagnostics-foot-note {
  color: var(--fg-dim);
  font-size: var(--text-sm);
  text-align: right;
}

/* ==========================================
   Notifications bell + popover
   ========================================== */

.notif-wrap {
  position: relative;
  display: inline-block;
}

.notif-bell {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--amber);
  color: var(--bg-deep);
  border: 1px solid var(--bg-deep);
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  letter-spacing: 0;
}

.notif-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 360px;
  max-height: 70vh;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-rows: auto 1fr auto;
  z-index: 400;
}

.notif-popover[hidden] { display: none; }

.notif-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-dim);
}

.notif-popover-title {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

.notif-popover-count {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.notif-popover-body {
  overflow-y: auto;
  padding: var(--sp-2) 0;
}

.notif-popover-empty {
  padding: var(--sp-4);
  color: var(--fg-dim);
  text-align: center;
}

.notif-popover-foot {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px dashed var(--line-dim);
  background: var(--bg-deep);
}

.notif-group-head {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--amber);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-bottom: 1px dashed var(--line-dim);
}

.notif-rows {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notif-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px dashed var(--line-dim);
  cursor: pointer;
  border-left: 2px solid transparent;
}

.notif-row:last-child { border-bottom: 0; }

.notif-row:hover { background: var(--bg-deep); }

.notif-row.is-unread {
  border-left-color: var(--amber);
}

.notif-row-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.notif-row-title {
  color: var(--fg);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-row.is-read .notif-row-title {
  color: var(--fg-dim);
  font-weight: 400;
}

.notif-row-detail {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notif-row-meta {
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.notif-row-actions {
  flex: 0 0 auto;
}

.btn--sm {
  padding: 2px var(--sp-3);
  font-size: var(--text-sm);
}

/* Export / import card bits reuse generic form-field + btn classes; just a
   few small helpers unique to this card. */
.settings-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.settings-divider {
  margin: var(--sp-5) 0;
  border: 0;
  border-top: 1px dashed var(--line-dim);
}

.settings-status {
  margin-top: var(--sp-3);
  color: var(--fg-dim);
  font-size: var(--text-sm);
}

/* ==========================================
   Keybindings card (Settings)
   ========================================== */

.keybindings-group {
  margin-bottom: var(--sp-5);
}

.keybindings-group-head {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--amber);
  padding-bottom: var(--sp-2);
  border-bottom: 1px dashed var(--line-dim);
  margin-bottom: var(--sp-2);
}

.keybindings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.keybinding-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--line-dim);
}

.keybinding-row:last-child { border-bottom: 0; }

.keybinding-row.is-dirty {
  border-left: 2px solid var(--amber);
  padding-left: var(--sp-3);
  margin-left: calc(-1 * var(--sp-3));
}

.keybinding-row.has-conflict .keybinding-display {
  color: var(--red);
  border-color: var(--red);
}

.keybinding-label {
  color: var(--fg);
}

.keybinding-display {
  padding: 3px var(--sp-3);
  border: 1px solid var(--line-dim);
  color: var(--amber);
  font-family: inherit;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  min-width: 70px;
  text-align: center;
}

.keybinding-actions {
  display: flex;
  gap: var(--sp-2);
}

[data-keybinding-action="record"].is-recording {
  background: var(--amber);
  color: var(--bg-deep);
  border-color: var(--amber-bright);
}

.keybindings-status {
  flex: 1;
  color: var(--fg-dim);
  font-size: var(--text-sm);
}

/* ==========================================
   Recent Notes panel (homepage)
   ========================================== */

.recent-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recent-notes-new {
  font-size: var(--text-sm);
}

.recent-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-notes-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px dashed var(--line-dim);
}

.recent-notes-item:last-child {
  border-bottom: 0;
}

.recent-notes-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-notes-date {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  flex: 0 0 auto;
}

/* ----------- Bulk select (Today panel) ----------- */
.today-tabs-spacer { flex: 1; }

.bulk-checkbox {
  display: none;
  margin-right: var(--sp-4);
  accent-color: var(--amber);
  cursor: pointer;
}

.today-panel--selecting .bulk-checkbox {
  display: inline-block;
}

.today-panel--selecting .task-row--selected {
  background: var(--bg-hot);
}

.bulk-toolbar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-4);
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
}

.bulk-toolbar .bulk-count {
  font-size: var(--text-sm);
  color: var(--fg-dim);
}

.bulk-toolbar .bulk-spacer { flex: 1; }

.btn--xs {
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-4);
}

/* ----------- Help icon (per-section) ----------- */
.help-icon {
  width: 18px;
  height: 18px;
  font-size: 11px;
  line-height: 1;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  transition: color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.help-icon:hover {
  color: var(--amber);
  border-color: var(--amber);
}

/* ----------- Help modal ----------- */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.help-overlay[hidden] { display: none; }

.help-modal {
  width: min(720px, 90vw);
  max-height: 80vh;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.help-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.help-title {
  font-size: var(--text-base);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-bright);
}

.help-close {
  font-size: 18px;
  color: var(--fg-dim);
  cursor: pointer;
  width: 24px;
  height: 24px;
}
.help-close:hover { color: var(--amber); }

.help-views {
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-6);
}

.help-search {
  width: 100%;
  margin-bottom: var(--sp-5);
}

.help-group { margin-bottom: var(--sp-6); }
.help-group-title {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--sp-3);
}
.help-group-list { display: grid; gap: var(--sp-3); }

.help-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-dim);
  border-left: 2px solid transparent;
  transition: background var(--duration-fast) var(--ease),
              border-left-color var(--duration-fast) var(--ease);
}
.help-row--active {
  background: var(--bg-hot);
  border-left-color: var(--amber);
}
.help-row dt { color: var(--fg); }
.help-row--active dt { color: var(--fg-bright); }
.help-row dd kbd {
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fg-bright);
  background: var(--bg-deep);
  padding: 2px 6px;
  border: 1px solid var(--line);
}

.help-section-content h3 {
  font-size: var(--text-base);
  margin-bottom: var(--sp-4);
  color: var(--fg-bright);
}
.help-section-content h4 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
  color: var(--fg-dim);
}
.help-section-content p,
.help-section-content ul {
  margin-bottom: var(--sp-4);
}
.help-section-content ul { padding-left: var(--sp-6); }
.help-section-content li { margin-bottom: var(--sp-2); }

.help-cheatsheet-link {
  display: inline-block;
  margin-top: var(--sp-5);
  color: var(--amber);
  text-decoration: none;
}
.help-cheatsheet-link:hover { color: var(--amber-bright); }

/* ----------- Undo toast ----------- */
.toast--undo {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border-color: var(--amber);
}

.toast-undo {
  font-size: var(--text-sm);
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 2px 8px;
  cursor: pointer;
  background: transparent;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.toast-undo:hover {
  background: var(--amber);
  color: var(--bg-deep);
}

/* ----------- Workspace accent dot ----------- */
.ws-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: var(--sp-2);
  vertical-align: middle;
}
.ws-dot--chip {
  margin-right: var(--sp-3);
}

/* ----------- Updates card ----------- */
.updates-meta {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.updates-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--line-dim);
  padding-bottom: var(--sp-2);
}

.updates-meta-row dt {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--text-sm);
}

.updates-meta-row dd {
  color: var(--fg-bright);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.updates-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.updates-error {
  color: var(--red);
  font-size: var(--text-sm);
}

.updates-result {
  padding: var(--sp-4);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}