/*
 * theme.css — Relay's design-system values.
 * Swiss ledger: cream paper, hairline rule, square corners, no shadow,
 * small capitals, and one rubber-stamp red reserved for getting a
 * snippet OUT of the app (Copy / the extension bridge).
 */

:root {
  --canvas: #faf8f3;
  --surface: #fdfcfa;
  --surface-2: #f1ede2;
  --border: #ddd7c8;
  --border-strong: #b6ae9a;
  --ink: #1b1a17;
  --muted: #6b6a66;

  --accent: #17171a;
  --accent-hover: #000000;
  --accent-ink: #faf8f3;
  --accent-text: #9c3427;
  --accent-strong: #17171a;
  --accent-soft: #ece7da;
  --accent-border: #c7bfa9;

  --success: #3f6b3a;
  --success-ink: #faf8f3;
  --success-soft: #e6ecdf;
  --success-strong: #33562f;

  --warning: #93601c;
  --warning-ink: #faf8f3;
  --warning-soft: #f1e6d3;
  --warning-strong: #7c4f16;

  --danger: #7d2a1f;
  --danger-ink: #faf8f3;
  --danger-soft: #f1e0da;
  --danger-strong: #6b2319;

  --chart-1: #17171a;
  --chart-2: #9c3427;
  --chart-3: #7c6a3e;
  --chart-4: #3f6b3a;
  --chart-5: #3a5f6b;
  --chart-6: #6b6a66;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.14em;

  --radius-btn: 2px;
  --radius-card: 0px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 12px 28px rgba(23, 23, 26, 0.16);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 700;
  --measure: 66ch;
}

html[data-theme="dark"] {
  --canvas: #161512;
  --surface: #201e1a;
  --surface-2: #29271f;
  --border: #3a3730;
  --border-strong: #574f3f;
  --ink: #f3efe4;
  --muted: #a29b8a;

  --accent: #f3efe4;
  --accent-hover: #ffffff;
  --accent-ink: #17171a;
  --accent-text: #e2836f;
  --accent-strong: #f3efe4;
  --accent-soft: #322f26;
  --accent-border: #4d473a;

  --success: #82ab7a;
  --success-ink: #17171a;
  --success-soft: #26301f;
  --success-strong: #a4c99a;

  --warning: #cf9c58;
  --warning-ink: #17171a;
  --warning-soft: #332918;
  --warning-strong: #e0b57c;

  --danger: #d6836f;
  --danger-ink: #17171a;
  --danger-soft: #33201a;
  --danger-strong: #e8a290;

  --chart-1: #f3efe4;
  --chart-2: #e2836f;
  --chart-3: #c9b57d;
  --chart-4: #82ab7a;
  --chart-5: #7fa6b3;
  --chart-6: #a29b8a;
}

/*
 * app.css — Relay's own screen: the fixed rail, the command bar, the pinned
 * stamp-strip, the note ledger and the extension-bridge mock. Tokens only.
 */

/* ---- Shell ---------------------------------------------------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
  background: var(--canvas);
}

.rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  width: 240px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem 1rem 1rem;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.rail-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 39;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}
body:has(.rail.is-open) .rail-scrim { display: block; }

/* Below the desktop breakpoint the rail is an overlay drawer: hidden by
   default (removed from layout and paint entirely, not merely moved off
   canvas), shown only while open. No motion here — it simply appears. */
@media (max-width: 1023px) {
  .rail { display: none; }
  .rail.is-open { display: flex; }
}

.rail-brand { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.25rem 0.5rem; }
.rail-mark {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: var(--display-weight);
}
.rail-word { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.05rem; letter-spacing: -0.01em; }
.rail-close { margin-left: auto; }

.rail-section { display: flex; flex-direction: column; gap: 0.125rem; }
.rail-heading {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.35rem 0.5rem; margin-top: 0.5rem;
  font-size: 0.68rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--eyebrow-tracking);
}
.rail-add { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: -0.5rem -0.5rem -0.5rem 0; color: var(--muted); }
.rail-add:hover { color: var(--ink); }

.rail-link {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.45rem 0.5rem;
  font-size: 0.85rem; color: var(--ink);
  border-left: 2px solid transparent;
}
.rail-link:hover { background: var(--surface-2); text-decoration: none; }
.rail-link.is-active { background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; }
.rail-link-icon { display: grid; place-items: center; color: var(--muted); }
.rail-link.is-active .rail-link-icon { color: var(--ink); }
.rail-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.rail-dot { display: inline-block; width: 0.5rem; height: 0.5rem; flex-shrink: 0; }
.rail-empty-note { padding: 0.35rem 0.5rem; font-size: 0.78rem; color: var(--muted); }

.rail-tag-cloud { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.25rem 0.5rem; }

.rail-spacer { flex: 1; }
.rail-bottom { border-top: 1px solid var(--border); padding-top: 0.5rem; }

.rail-footer { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.5rem 0; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted); }
.rail-footer-row { display: flex; align-items: center; gap: 0.5rem; }
.rail-theme { justify-content: space-between; margin-top: 0.25rem; }
.rail-footer-label { text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); font-size: 0.65rem; }
.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex-shrink: 0; }
.status-dot-on { background: var(--success); }
.status-dot-off { background: var(--border-strong); }
.status-dot-warn { background: var(--warning); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 1.75rem 2rem 3rem; gap: 1.5rem; }
.app-main-narrow { max-width: 46rem; margin-inline: auto; }

@media (min-width: 1024px) {
  .app-main { margin-left: 240px; }
}

.mobile-topbar { display: none; align-items: center; gap: 0.75rem; margin: -1.75rem -2rem 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.mobile-topbar-word { font-family: var(--font-display); font-weight: var(--display-weight); }
.mobile-topbar-spacer { flex: 1; }

@media (max-width: 1023px) {
  .mobile-topbar { display: flex; }
}

/* ---- Command bar ------------------------------------------------------------ */
.command-bar { display: flex; flex-direction: column; gap: 1rem; }
.command-bar-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head { display: flex; flex-direction: column; gap: 0.25rem; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.5rem; letter-spacing: var(--display-tracking); }
.page-sub { color: var(--muted); font-size: 0.875rem; }

.command-search-row { display: flex; }
.command-search { flex: 1; }
.command-kbd { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); }
.command-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- Pinned strip ------------------------------------------------------------ */
.pinned-strip { display: flex; flex-direction: column; gap: 0.625rem; }
.pinned-strip-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--eyebrow-tracking);
}
.pinned-strip-row { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.25rem; }
.stamp-card {
  display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto;
  min-width: 15rem; padding: 0.6rem 0.75rem;
  background: var(--surface); border: 1px solid var(--border);
}
.stamp-card-title { flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stamp-card-actions { display: flex; gap: 0.375rem; }

/* ---- Ledger ------------------------------------------------------------------ */
.ledger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }

.note-card { display: flex; flex-direction: column; gap: 0.75rem; }
.note-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.note-card-heading { min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.note-card-title { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-card-meta-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.note-card-toggles { display: flex; gap: 0.125rem; flex-shrink: 0; }
.icon-toggle { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: var(--muted); opacity: 0; transition: opacity 120ms, color 120ms; }
.icon-toggle .icon-fill { fill: currentColor; }
.icon-toggle.is-active { opacity: 1; color: var(--accent-text); }
.note-card:hover .icon-toggle, .icon-toggle:focus-visible { opacity: 1; }
.icon-toggle:hover { color: var(--ink); }

.note-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.note-content-text { font-size: 0.85rem; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.note-content-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.note-expand-btn { margin-top: 0.35rem; font-size: 0.78rem; }

.note-usage { font-size: 0.72rem; color: var(--muted); font-family: var(--font-mono); }

.note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }

/* ---- Trash --------------------------------------------------------------------- */
.trash-list { display: flex; flex-direction: column; gap: 0.75rem; }
.trash-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.trash-row-main { min-width: 0; }
.trash-row-preview { font-size: 0.82rem; color: var(--muted); margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34rem; }
.trash-row-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ---- Settings ------------------------------------------------------------------ */
.settings-card + .settings-card { margin-top: 1.25rem; }
.settings-toggle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem 1.5rem; }
.settings-saved { display: inline-block; margin-top: 0.25rem; }
.exclude-form { display: flex; gap: 0.75rem; align-items: flex-end; }
.excluded-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.chip-x { border: none; background: none; margin-left: 0.35rem; cursor: pointer; color: var(--muted); font-size: 0.9rem; line-height: 1; }
.chip-x:hover { color: var(--danger-strong); }
.data-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.swatch-row { display: flex; gap: 0.5rem; }
.swatch { cursor: pointer; position: relative; }
/* The native radio stays functional and reachable, just visually replaced by
   the coloured span next to it — hidden by clipping its box to nothing
   (never opacity, which an entrance-motion check reads as unfinished). */
.swatch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.swatch span { display: block; width: 1.5rem; height: 1.5rem; border: 1px solid var(--border); }
.swatch input:checked + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.install-steps { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
.install-steps code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-2); padding: 0.05rem 0.3rem; }
.ext-file-list { display: flex; flex-direction: column; gap: 0; margin-top: 1rem; border-top: 1px solid var(--border); }
.ext-file-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.ext-file-name { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.85rem; }

/* ---- Extension bridge mock ------------------------------------------------------ */
.bridge-card { overflow: visible; }
.bridge-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.bridge-demo-page { background: var(--surface-2); border: 1px solid var(--border); padding: 1.75rem 1.25rem; min-height: 14rem; position: relative; }
.bridge-demo-page-label { position: absolute; top: 0.6rem; left: 0.75rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--muted); }
.bridge-tab-mock {
  position: absolute; right: 1rem; bottom: 1rem;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow-raised);
}
.bridge-panel-mock {
  position: absolute; right: 1rem; bottom: 1rem; width: 15rem;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-raised);
  display: flex; flex-direction: column; font-size: 0.72rem;
}
.bridge-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); font-weight: 600; }
.bridge-panel-win { font-family: var(--font-mono); color: var(--muted); letter-spacing: 0.2em; }
.bridge-panel-search { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.6rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.bridge-panel-search .icon { width: 0.8rem; height: 0.8rem; }
.bridge-panel-row { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.25rem; }
.bridge-panel-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bridge-panel-actions { display: flex; gap: 0.3rem; margin-top: 0.2rem; }
.bridge-tag { display: inline-flex; align-items: center; height: 1.15rem; padding: 0 0.4rem; font-size: 0.6rem; border: 1px solid var(--border-strong); color: var(--muted); }
.bridge-panel-foot { padding: 0.45rem 0.6rem; text-align: center; color: var(--accent-text); font-weight: 600; }
.bridge-note { margin-top: 1rem; }

/* ---- Note editor drawer --------------------------------------------------------- */
.note-form-toggles { align-items: center; }

@media (max-width: 640px) {
  .app-main { padding: 1.25rem 1rem 2.5rem; }
  .mobile-topbar { margin: -1.25rem -1rem 0.5rem; }
  .ledger-grid { grid-template-columns: 1fr; }
  .command-bar-top { flex-direction: column; align-items: stretch; }
}