/* 29Court Notebook. Palette and scale come from the 29Court tokens only. */
:root { color-scheme: light; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--29c-font-sans);
  font-size: var(--29c-text-base);
  line-height: var(--29c-leading-normal);
  background: var(--29c-color-paper);
  color: var(--29c-color-ink-950);
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; height: 100dvh; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--29c-space-2);
  padding: var(--29c-space-2) var(--29c-space-4);
  background: var(--29c-color-sand-100);
  border-bottom: 1px solid var(--29c-color-hairline);
  min-height: 60px;
}
.brand { display: flex; align-items: center; gap: var(--29c-space-2); font-weight: 700; font-size: var(--29c-text-lg); white-space: nowrap; }
.brand .mark-img { width: 32px; height: 32px; display: block; }
.side-what { font-size: var(--29c-text-sm); line-height: 1.45; opacity: .72; margin: 0 0 var(--29c-space-2); }
.save-alert {
  display: flex; align-items: center; gap: var(--29c-space-3); flex-wrap: wrap;
  padding: var(--29c-space-3) var(--29c-space-4);
  background: var(--29c-color-danger-soft); color: var(--29c-color-danger-deep);
  border-bottom: 1px solid var(--29c-color-danger);
  font-size: var(--29c-text-base); font-weight: 600;
}
.save-alert[hidden] { display: none; }
.storage-line { font-size: var(--29c-text-sm); line-height: 1.45; opacity: .72; margin: 0 0 var(--29c-space-2); font-variant-numeric: tabular-nums; }
.storage-line.warn { opacity: 1; color: var(--29c-color-danger-deep); font-weight: 700; }
.brand .mark {
  width: 32px; height: 32px; border-radius: var(--29c-radius-md);
  background: var(--29c-color-primary); color: var(--29c-color-on-primary);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.topbar .spacer { flex: 1; }
.sync-pill {
  /* The pill's words are the sync truth; they read at full ink, not
     muted (ink-500 on sand measured 3.12 to 1, below the gate). */
  font-size: var(--29c-text-sm); color: var(--29c-color-ink-950); font-weight: 600;
  background: var(--29c-color-sand-200); border-radius: var(--29c-radius-pill);
  padding: var(--29c-space-1) var(--29c-space-3); white-space: nowrap;
}

button, .court-btn {
  font-family: inherit; font-size: var(--29c-text-sm); font-weight: 600;
  min-height: 44px; padding: 0 var(--29c-space-4);
  border-radius: var(--29c-radius-md);
  border: 1px solid var(--29c-color-hairline);
  background: var(--29c-color-paper); color: var(--29c-color-ink-950);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--29c-space-2);
  justify-content: center; white-space: nowrap;
}
button:hover { background: var(--29c-color-sand-100); }
/* Primary actions use the design system's warm pair (ink on gold, the
   .court-btn--warm pattern): white on the DS primary blue measures
   2.78 to 1 at phone width, below the 4.5 to 1 At-Rest Gate. The warm
   pair measures about 7.3 to 1 in both schemes. */
button.primary, .court-btn.primary {
  background: var(--29c-color-gold); border-color: var(--29c-color-gold);
  color: var(--29c-color-ink-950);
}
button.primary:hover { background: var(--29c-color-gold); filter: brightness(0.94); }
/* In the dark scheme the ink token flips light, which would sink the
   warm pair to 1.84 to 1; the on-primary token flips dark there and
   keeps the pair at about 8.7 to 1 (both measured from renders). */
[data-theme="dark"] button.primary, [data-theme="dark"] .court-btn.primary { color: var(--29c-color-on-primary); }
[data-theme="dark"] .el-btn { color: var(--29c-color-on-primary); }
button.icon { min-width: 44px; padding: 0 var(--29c-space-2); }
button.danger { color: var(--29c-color-danger-deep); border-color: var(--29c-color-danger); }
:focus-visible { outline: 3px solid var(--29c-ring); outline-offset: 2px; }

/* ---------- layout ---------- */
.workspace { display: flex; flex: 1; min-height: 0; }
.sidebar {
  width: 300px; flex: 0 0 300px; display: flex; flex-direction: column;
  background: var(--29c-color-sand-100); border-right: 1px solid var(--29c-color-hairline);
  min-height: 0;
}
.sidebar .side-search { padding: var(--29c-space-3); }
.side-search input, .court-input {
  width: 100%; min-height: 44px; padding: 0 var(--29c-space-3);
  border: 1px solid var(--29c-input-border); border-radius: var(--29c-radius-md);
  background: var(--29c-color-paper); color: var(--29c-color-ink-950);
  font-family: inherit; font-size: var(--29c-text-base);
}
.side-search input:focus, .court-input:focus { border-color: var(--29c-input-border-focus); outline: 3px solid var(--29c-ring); outline-offset: 1px; }
.note-list { flex: 1; overflow-y: auto; padding: 0 var(--29c-space-2) var(--29c-space-3); }
.note-item {
  width: 100%; text-align: left; border: 0; background: transparent;
  border-radius: var(--29c-radius-md); padding: var(--29c-space-2) var(--29c-space-3);
  display: block; min-height: 44px;
}
.note-item:hover { background: var(--29c-color-sand-200); }
.note-item.active { background: var(--29c-color-primary-soft); }
.note-item .t { font-weight: 600; font-size: var(--29c-text-base); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item .s { font-size: var(--29c-text-sm); color: var(--29c-color-ink-700); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-section { padding: var(--29c-space-2) var(--29c-space-3); border-top: 1px solid var(--29c-color-hairline); }
.side-section h3 { margin: var(--29c-space-2) 0; font-size: var(--29c-text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--29c-color-ink-700); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--29c-space-1); }
.tag-chip {
  border: 1px solid var(--29c-color-hairline); background: var(--29c-color-paper);
  border-radius: var(--29c-radius-pill); padding: var(--29c-space-1) var(--29c-space-3);
  font-size: var(--29c-text-sm); min-height: 36px; cursor: pointer;
}
.tag-chip.on { background: var(--29c-color-sea-soft); border-color: var(--29c-color-sea); }

/* ---------- editor area ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.note-toolbar {
  display: flex; align-items: center; gap: var(--29c-space-2);
  padding: var(--29c-space-2) var(--29c-space-4);
  border-bottom: 1px solid var(--29c-color-hairline); background: var(--29c-color-paper);
  flex-wrap: wrap;
}
.title-input {
  flex: 1; min-width: 160px; border: 0; background: transparent;
  font-family: inherit; font-size: var(--29c-text-xl); font-weight: 700; color: var(--29c-color-ink-950);
  min-height: 44px; padding: 0 var(--29c-space-2); border-radius: var(--29c-radius-md);
}
.title-input:focus { outline: 3px solid var(--29c-ring); }
.view-toggle { display: flex; border: 1px solid var(--29c-color-hairline); border-radius: var(--29c-radius-md); overflow: hidden; }
.view-toggle button { border: 0; border-radius: 0; min-height: 44px; }
.view-toggle button.on { background: var(--29c-color-ink-950); color: var(--29c-color-on-dark); }
.editor-wrap { flex: 1; display: flex; min-height: 0; position: relative; }
.pane { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; display: none; }
.pane.show { display: block; }
.pane.editor textarea {
  width: 100%; height: 100%; border: 0; resize: none; background: var(--29c-color-paper);
  color: var(--29c-color-ink-950); font-family: var(--29c-font-mono); font-size: var(--29c-text-base);
  line-height: var(--29c-leading-loose); padding: var(--29c-space-6);
}
.pane.editor textarea:focus { outline: none; }
.pane.preview { padding: var(--29c-space-6); max-width: 860px; }
.pane.preview:only-child { max-width: 860px; margin: 0 auto; width: 100%; }

/* rendered markdown */
.preview h1 { font-size: var(--29c-text-3xl); } .preview h2 { font-size: var(--29c-text-2xl); }
.preview h3 { font-size: var(--29c-text-xl); } .preview h4 { font-size: var(--29c-text-lg); }
.preview h1, .preview h2, .preview h3, .preview h4 { line-height: var(--29c-leading-tight); margin: var(--29c-space-6) 0 var(--29c-space-3); }
.preview p { margin: var(--29c-space-3) 0; }
.preview a { color: var(--29c-color-info); }
.preview .wikilink { color: var(--29c-color-sea-deep); font-weight: 600; text-decoration: underline dotted; }
.preview .wikilink.missing { color: var(--29c-color-sunset-deep); }
.preview code { font-family: var(--29c-font-mono); background: var(--29c-color-sand-200); border-radius: var(--29c-radius-sm); padding: 0 var(--29c-space-1); font-size: 0.9em; }
.preview pre { background: var(--29c-color-ink-950); color: var(--29c-color-on-dark); border-radius: var(--29c-radius-lg); padding: var(--29c-space-4); overflow-x: auto; }
.preview pre code { background: transparent; padding: 0; }
.preview blockquote { border-left: 4px solid var(--29c-color-gold); margin: var(--29c-space-4) 0; padding: var(--29c-space-2) var(--29c-space-4); color: var(--29c-color-ink-700); background: var(--29c-color-gold-soft); border-radius: 0 var(--29c-radius-md) var(--29c-radius-md) 0; }
.preview table { border-collapse: collapse; width: 100%; margin: var(--29c-space-4) 0; }
.preview th, .preview td { border: 1px solid var(--29c-color-hairline); padding: var(--29c-space-2) var(--29c-space-3); text-align: left; }
.preview th { background: var(--29c-color-sand-200); }
.preview .table-wrap { overflow-x: auto; }
.preview ul.task { list-style: none; padding-left: var(--29c-space-2); }
.preview li.task input { width: 20px; height: 20px; accent-color: var(--29c-color-primary); vertical-align: middle; }
.preview .hashtag { color: var(--29c-color-info); font-weight: 600; }
.preview img { max-width: 100%; border-radius: var(--29c-radius-md); }

/* ---------- right panel ---------- */
.rightbar {
  width: 280px; flex: 0 0 280px; border-left: 1px solid var(--29c-color-hairline);
  background: var(--29c-color-sand-100); overflow-y: auto; padding: var(--29c-space-3);
}
.rightbar h3 { font-size: var(--29c-text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--29c-color-ink-700); margin: var(--29c-space-4) 0 var(--29c-space-2); }
.rightbar h3:first-child { margin-top: 0; }
.link-row {
  display: block; width: 100%; text-align: left; background: var(--29c-color-paper);
  border: 1px solid var(--29c-color-hairline); border-radius: var(--29c-radius-md);
  padding: var(--29c-space-2) var(--29c-space-3); margin-bottom: var(--29c-space-2); min-height: 44px;
}
.link-row:hover { border-color: var(--29c-color-primary-line); }
.empty-note { color: var(--29c-color-ink-700); font-size: var(--29c-text-sm); }

/* ---------- modals ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--29c-color-ink-950) 45%, transparent);
  display: none; align-items: flex-start; justify-content: center; z-index: 50; padding: var(--29c-space-8) var(--29c-space-3);
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--29c-color-paper); border-radius: var(--29c-radius-xl);
  box-shadow: var(--29c-shadow-pop); width: 640px; max-width: 100%;
  max-height: 80dvh; display: flex; flex-direction: column; overflow: hidden;
}
.modal header { padding: var(--29c-space-4); border-bottom: 1px solid var(--29c-color-hairline); display: flex; align-items: center; gap: var(--29c-space-2); }
.modal header input { flex: 1; }
.modal .modal-body { overflow-y: auto; padding: var(--29c-space-2); }
.modal footer { padding: var(--29c-space-3) var(--29c-space-4); border-top: 1px solid var(--29c-color-hairline); display: flex; justify-content: flex-end; gap: var(--29c-space-2); }
.result-row { display: flex; gap: var(--29c-space-3); align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; border-radius: var(--29c-radius-md); padding: var(--29c-space-2) var(--29c-space-3); min-height: 44px; }
.result-row:hover, .result-row.sel { background: var(--29c-color-primary-soft); }
.result-row .t { font-weight: 600; }
.result-row .m { font-size: var(--29c-text-sm); color: var(--29c-color-ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbd { font-family: var(--29c-font-mono); font-size: var(--29c-text-sm); background: var(--29c-color-sand-200); border: 1px solid var(--29c-color-hairline); border-radius: var(--29c-radius-sm); padding: 0 var(--29c-space-1); }
.shortcut-table { width: 100%; border-collapse: collapse; }
.shortcut-table td { padding: var(--29c-space-2) var(--29c-space-3); border-bottom: 1px solid var(--29c-color-hairline); }
#graphCanvas { width: 100%; height: 60dvh; display: block; background: var(--29c-color-sand-100); border-radius: var(--29c-radius-lg); }

/* wikilink autocomplete */
.wiki-suggest {
  position: absolute; z-index: 60; background: var(--29c-color-paper);
  border: 1px solid var(--29c-color-hairline); border-radius: var(--29c-radius-lg);
  box-shadow: var(--29c-shadow-float); max-height: 240px; overflow-y: auto; min-width: 240px; display: none;
}
.wiki-suggest.show { display: block; }

/* toast */
.toast {
  position: fixed; bottom: var(--29c-space-6); left: 50%; transform: translateX(-50%);
  background: var(--29c-color-ink-950); color: var(--29c-color-on-dark);
  border-radius: var(--29c-radius-pill); padding: var(--29c-space-3) var(--29c-space-6);
  font-size: var(--29c-text-sm); z-index: 100; display: none; box-shadow: var(--29c-shadow-float);
}
.toast.show { display: block; }

/* sync / share / history (W1) */
.sync-pill { cursor: pointer; }
.ver-row { display: flex; align-items: center; gap: var(--29c-space-2); padding: var(--29c-space-2) 0; border-bottom: 1px solid var(--29c-color-hairline); flex-wrap: wrap; }
.ver-label { flex: 1; min-width: 180px; font-variant-numeric: tabular-nums; font-size: var(--29c-text-sm); }
.fld { margin: var(--29c-space-3) 0; }
.fld label { display: block; font-weight: 600; font-size: var(--29c-text-sm); margin-bottom: var(--29c-space-1); }
.fld label.checkline { display: flex; align-items: center; gap: var(--29c-space-2); min-height: 44px; font-size: var(--29c-text-base); }
.fld label.checkline input { width: 22px; height: 22px; flex: none; }
.fld select.court-input { width: 100%; min-height: 44px; }
/* Platform29 helper surfaces (APPS 500 R13): the gate prompt and the
   resume bar. Text is the app ink on paper, links are ink and
   underlined, and the Finish button reuses the base button pair, so
   both schemes sample well above the At-Rest floor. */
.p29-gate, .p29-resume {
  display: flex; align-items: center; gap: var(--29c-space-3); flex-wrap: wrap;
  padding: var(--29c-space-3) var(--29c-space-4);
  background: var(--29c-color-paper); color: var(--29c-color-ink-950);
  border-bottom: 1px solid var(--29c-color-hairline);
  font-size: var(--29c-text-sm);
}
.p29-gate-text, .p29-resume-text { flex: 1; min-width: 200px; margin: 0; }
.p29-gate a, .p29-resume a { color: var(--29c-color-ink-950); font-weight: 700; text-decoration: underline; }
.modal .p29-gate, .modal .p29-resume { border: 1px solid var(--29c-color-hairline); border-radius: var(--29c-radius-md); margin-bottom: var(--29c-space-3); }
.share-h { margin: var(--29c-space-6) 0 var(--29c-space-2); font-size: var(--29c-text-lg); }
.share-h:first-child { margin-top: 0; }
.share-link-box { border: 1px solid var(--29c-color-primary-line); background: var(--29c-color-primary-soft); border-radius: var(--29c-radius-md); padding: var(--29c-space-3); display: flex; flex-direction: column; gap: var(--29c-space-2); margin: var(--29c-space-3) 0; }
.shared-owner { font-weight: 700; font-size: var(--29c-text-sm); margin: var(--29c-space-2) 0; color: var(--29c-color-ink-700); }

/* mobile */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .rightbar { display: none; }
  .rightbar.open { display: block; position: fixed; right: 0; top: 0; bottom: 0; z-index: 40; box-shadow: var(--29c-shadow-pop); }
}
@media (max-width: 700px) {
  .menu-btn { display: inline-flex; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; transform: translateX(-105%); transition: transform var(--29c-motion-base) var(--29c-motion-ease); box-shadow: var(--29c-shadow-pop); visibility: hidden; }
  .sidebar.open { transform: none; visibility: visible; }
  .topbar #graphBtn, .topbar #infoBtn, .topbar #rightbarBtn, .topbar #themeBtn { display: none; }
  /* The sync pill stays visible on phones: its three states are words a
     user must be able to read before trusting the notebook (W1 At-Rest).
     It may shrink, never push the bar off the screen: with the longest
     state showing, the bar measured 429px wide at a 390px viewport. */
  .sync-pill { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .pane.preview { padding: var(--29c-space-4); }
  .pane.editor textarea { padding: var(--29c-space-4); }
  .brand .name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* tracking controls: `-` checkboxes and `*` action buttons (Element UI 2.0) */
.preview li.task { margin: 6px 0; }
.preview li.task label { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
.preview li.task input { width: 22px; height: 22px; accent-color: var(--29c-color-primary); flex: 0 0 auto; cursor: pointer; }
.preview li.task span.done { text-decoration: line-through; opacity: .6; }
.preview li.actbtn { list-style: none; margin: 8px 0; }
.el-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; font-size: 15px; font-weight: 600; line-height: 1; color: var(--29c-color-ink-950); background: var(--29c-color-gold); border: 1px solid var(--29c-color-gold); border-radius: 4px; cursor: pointer; transition: filter var(--29c-motion-base) var(--29c-motion-ease); }
.el-btn:hover, .el-btn:focus-visible { filter: brightness(1.1); }
.el-btn:active { filter: brightness(.92); }
.el-btn.is-done { background: var(--29c-color-sea-soft); border-color: var(--29c-color-sea); color: var(--29c-color-sea-deep); }
.el-btn span.done { text-decoration: line-through; }

/* 29Court Notebook: theme system.
   NOTE: this file is intentionally exempt from the build.py "no hardcoded
   colors" check. Themes ARE color definitions: they override the --29c-*
   tokens with literal values. The app's own CSS (notebook.css) must still
   use tokens only. */

/* ---------------- built-in: light (explicit; matches the default tokens) ---------------- */
html[data-theme="light"] { color-scheme: light; }

/* ---------------- built-in: dark ---------------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --29c-color-paper: #211c14;
  --29c-color-sand-100: #2a2417;
  --29c-color-sand-200: #3a3020;
  --29c-color-ink-950: #f2ecdd;
  --29c-color-ink-700: #d6cbb2;
  --29c-color-ink-500: #a2977f;
  --29c-color-ink-300: #6d6350;
  --29c-color-hairline: #4a3f2b;
  --29c-color-primary: #5ea9ff;
  --29c-color-primary-strong: #82bcff;
  --29c-color-primary-soft: #27394f;
  --29c-color-primary-line: #3c5a82;
  --29c-color-on-primary: #0c1116;
  --29c-color-info: #6fb0ff;
  --29c-color-info-soft: #223349;
  --29c-color-sea: #4cc9a4;
  --29c-color-sea-deep: #7fdcbd;
  --29c-color-sea-soft: #1d3a30;
  --29c-color-success: #6fbf73;
  --29c-color-success-deep: #93d897;
  --29c-color-success-soft: #23402a;
  --29c-color-danger: #e07a7a;
  --29c-color-danger-deep: #ee9d9d;
  --29c-color-danger-soft: #4a2727;
  --29c-color-warning: #e8a94e;
  --29c-color-warning-deep: #f2c078;
  --29c-color-warning-soft: #4a3a1e;
  --29c-color-sunset: #ed8a5f;
  --29c-color-sunset-deep: #f4a982;
  --29c-color-sunset-soft: #4a2e20;
  --29c-color-gold: #d8a94e;
  --29c-color-gold-soft: #3d3220;
  --29c-color-blush: #e78fb0;
  --29c-color-blush-soft: #4a2a37;
  --29c-input-border: #4a3f2b;
  --29c-input-border-focus: #5ea9ff;
  --29c-ring: color-mix(in srgb, #5ea9ff 40%, transparent);
  --29c-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.35);
  --29c-shadow-float: 0 10px 30px rgba(0, 0, 0, 0.45);
  --29c-shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .preview pre { background: var(--29c-color-sand-200); color: var(--29c-color-ink-950); }
html[data-theme="dark"] .view-toggle button.on { background: var(--29c-color-primary); color: var(--29c-color-on-primary); }

/* ---------------- built-in: 29Court signature (ink and gold) ---------------- */
html[data-theme="court"] {
  color-scheme: dark;
  --29c-color-paper: #16120d;
  --29c-color-sand-100: #1e1811;
  --29c-color-sand-200: #2c2314;
  --29c-color-ink-950: #f4eedd;
  --29c-color-ink-700: #d9cdae;
  --29c-color-ink-500: #a39372;
  --29c-color-ink-300: #695d44;
  --29c-color-hairline: #3d3220;
  --29c-color-primary: #d8a94e;
  --29c-color-primary-strong: #e9c06e;
  --29c-color-primary-soft: #3a2d15;
  --29c-color-primary-line: #6f5627;
  --29c-color-on-primary: #191104;
  --29c-color-info: #d8a94e;
  --29c-color-info-soft: #3a2d15;
  --29c-color-sea: #58b98f;
  --29c-color-sea-deep: #83d3ae;
  --29c-color-sea-soft: #1c3327;
  --29c-color-success: #6fbf73;
  --29c-color-success-deep: #93d897;
  --29c-color-success-soft: #23402a;
  --29c-color-danger: #e07a7a;
  --29c-color-danger-deep: #ee9d9d;
  --29c-color-danger-soft: #4a2727;
  --29c-color-warning: #e8a94e;
  --29c-color-warning-deep: #f2c078;
  --29c-color-warning-soft: #4a3a1e;
  --29c-color-sunset: #ed8a5f;
  --29c-color-sunset-deep: #f4a982;
  --29c-color-sunset-soft: #4a2e20;
  --29c-color-gold: #d8a94e;
  --29c-color-gold-soft: #3a2d15;
  --29c-color-blush: #e78fb0;
  --29c-color-blush-soft: #4a2a37;
  --29c-input-border: #3d3220;
  --29c-input-border-focus: #d8a94e;
  --29c-ring: color-mix(in srgb, #d8a94e 40%, transparent);
  --29c-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.4);
  --29c-shadow-float: 0 10px 30px rgba(0, 0, 0, 0.5);
  --29c-shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
}
html[data-theme="court"] .preview pre { background: var(--29c-color-sand-200); color: var(--29c-color-ink-950); }
html[data-theme="court"] .view-toggle button.on { background: var(--29c-color-primary); color: var(--29c-color-on-primary); }

/* ---------------- Obsidian bridge ----------------
   Maps the Obsidian color system onto the 29C tokens. Applies to the
   bundled Retroma theme and to any user-imported Obsidian theme, whose
   variables are injected at runtime under html[data-theme="obsidian"]. */

/* Fallback accent. Obsidian's host app normally provides --interactive-accent
   (the accent color the user picks in Obsidian's settings). Real Obsidian
   themes read it, and their whole variable chain collapses without it.
   Element-level specificity loses to any :root rule a theme ships, so a
   theme that sets its own accent always wins. */
html { --interactive-accent: #c65d7b; }

html[data-theme="obsidian"] body {
  --29c-color-paper: var(--background-primary);
  --29c-color-sand-100: var(--background-secondary);
  --29c-color-sand-200: var(--background-modifier-hover, var(--background-secondary-alt, var(--background-secondary)));
  --29c-color-hairline: var(--background-modifier-border);
  --29c-color-ink-950: var(--text-normal);
  --29c-color-ink-700: var(--text-normal);
  --29c-color-ink-500: var(--text-muted);
  --29c-color-ink-300: var(--text-faint, var(--text-muted));
  --29c-color-primary: var(--interactive-accent);
  --29c-color-primary-strong: var(--interactive-accent-hover, var(--interactive-accent));
  --29c-color-primary-soft: var(--background-modifier-hover);
  --29c-color-primary-line: var(--background-modifier-border-hover, var(--background-modifier-border));
  --29c-color-on-primary: var(--text-on-accent);
  --29c-color-info: var(--text-accent, var(--interactive-accent));
  --29c-color-info-soft: var(--background-modifier-hover);
  --29c-color-sea-deep: var(--text-accent, var(--interactive-accent));
  --29c-color-sunset-deep: var(--text-accent, var(--interactive-accent));
  --29c-color-gold: var(--text-accent, var(--interactive-accent));
  --29c-color-danger-deep: var(--text-error);
  --29c-input-border: var(--background-modifier-border);
  --29c-input-border-focus: var(--background-modifier-border-focus, var(--interactive-accent));
}
html[data-theme="obsidian"].ob-dark { color-scheme: dark; }
html[data-theme="obsidian"].ob-light { color-scheme: light; }
html[data-theme="obsidian"] .preview pre {
  background: var(--code-background, var(--background-secondary));
  color: var(--code-normal, var(--text-normal));
}
html[data-theme="obsidian"] .view-toggle button.on {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}

/* ---------------- theme picker UI ---------------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--29c-space-2); padding: var(--29c-space-2) var(--29c-space-4); }
.theme-card {
  border: 1px solid var(--29c-color-hairline); border-radius: var(--29c-radius-lg);
  background: var(--29c-color-paper); padding: var(--29c-space-3); text-align: left;
  display: flex; flex-direction: column; gap: var(--29c-space-2); min-height: 44px;
  cursor: pointer;
}
.theme-card:focus-visible { outline: 2px solid var(--29c-color-primary); outline-offset: 2px; }
.theme-card:hover { border-color: var(--29c-color-primary-line); }
.theme-card.active { border-color: var(--29c-color-primary); box-shadow: 0 0 0 2px var(--29c-color-primary-soft); }
.theme-card .swatches { display: flex; gap: 4px; }
.theme-card .swatches span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--29c-color-hairline); }
.theme-card .t { font-weight: 700; font-size: var(--29c-text-base); color: var(--29c-color-ink-950); }
.theme-card .d { font-size: var(--29c-text-sm); color: var(--29c-color-ink-500); }
.theme-section { padding: var(--29c-space-2) var(--29c-space-4) 0; }
.theme-section h4 { margin: var(--29c-space-3) 0 var(--29c-space-1); font-size: var(--29c-text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--29c-color-ink-500); }
.theme-note { padding: var(--29c-space-2) var(--29c-space-4); color: var(--29c-color-ink-500); font-size: var(--29c-text-sm); }
.theme-import textarea {
  width: 100%; min-height: 110px; resize: vertical;
  font-family: var(--29c-font-mono); font-size: var(--29c-text-sm);
  border: 1px solid var(--29c-input-border); border-radius: var(--29c-radius-md);
  background: var(--29c-color-paper); color: var(--29c-color-ink-950);
  padding: var(--29c-space-2) var(--29c-space-3);
}
.theme-row { display: flex; gap: var(--29c-space-2); align-items: center; padding: var(--29c-space-2) var(--29c-space-4); flex-wrap: wrap; }
.theme-row input[type="text"] { flex: 1; min-width: 160px; }
.mode-toggle { display: inline-flex; border: 1px solid var(--29c-color-hairline); border-radius: var(--29c-radius-md); overflow: hidden; }
.mode-toggle button { border: 0; border-radius: 0; }
.mode-toggle button.on { background: var(--29c-color-ink-950); color: var(--29c-color-paper); }
.custom-theme-row { display: flex; align-items: center; gap: var(--29c-space-2); padding: var(--29c-space-2) var(--29c-space-4); }
.custom-theme-row .nm { flex: 1; font-weight: 600; color: var(--29c-color-ink-950); }