/* CHIKARA Navigator 1.12.0: adapter for the CHIKARA Theme Kit (css/themes.css).
   themes.css holds the five themes and two accents. This file only says WHICH Navigator parts use them, plus Navigator-only fix-ups.
   Loaded last and un-layered, so it wins over the @layer rules in navigator.css without !important.
   To reuse the kit in another app, copy themes.css and write a file like this one (the three mapping rules at the top are the whole job). ASCII only. */

/* ── texture follows Navigator's Grain switch (html.gz-on) ── */
html[data-theme]:not(.gz-on) { --gz-tile: none; }   /* beats any theme block, wherever it sits in themes.css */
/* the plaster is the texture, so the old paper-grain overlay (a full-screen blend layer) is not stacked on top */
html[data-theme].gz-on body::after { display: none; }

/* ── mapping 1: chrome (top bar, dock, sheets) = deeper plaster, no blur ── */
html[data-theme] :is(.statusbar, .dock, .overlay__panel, .tour-card) { background: var(--ck-bar); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme] .statusbar { border-bottom-color: var(--hair); box-shadow: 0 6px 18px rgba(0, 0, 0, .26); }
html[data-theme] .dock { border-top-color: var(--hair); box-shadow: 0 -6px 18px rgba(0, 0, 0, .22); }
html[data-theme] .overlay__panel { border-color: var(--hair); }

/* ── mapping 2: panels = lit top edge ── */
html[data-theme] :is(.app-card, .widget, .inbox-row, .scam, .gallery__item) { box-shadow: var(--ck-panel-shadow); }

/* ── mapping 3: large display type = embossed metal in the accent (letterpress on light themes) ── */
html[data-theme] :is(.home-hero__title, .view-header h1) {
  background: var(--metal); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; filter: var(--metal-filter);
}

/* ── dark themes: counterparts of the obsidian-only rules in navigator.css / motion.css ── */
html[data-family="dark"] .detail-caps span.is-live { color: var(--teal-hi); }
html[data-family="dark"] :is(.home-restore button, .detail-links a, .detail-links button) { color: var(--teal-hi); }
html[data-family="dark"] .gframe {
  background: linear-gradient(155deg, var(--gf-a), var(--gf-b)) padding-box, var(--gold-band) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .28), inset 0 -2px 4px rgba(0, 0, 0, .5), 0 7px 12px -7px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .35);
}
html[data-family="dark"] .gframe::before { background: linear-gradient(135deg, rgba(255, 240, 200, .26) 0, rgba(255, 240, 200, 0) 34%); }
html[data-family="dark"] .wait-chip { background: linear-gradient(155deg, var(--gf-a), var(--gf-b)); color: #F2EDE2; }
html[data-family="dark"] .scam--bad strong { color: #ffb4ab; }
html[data-family="dark"] .widget__tools button[data-rm] { color: #ff9a9a; }

/* ── light themes: the accent is dark (bronze or umber), so things that sat on gold with dark text need light text ── */
html[data-family="light"] #notifyCount { color: #fff4d6; }
html[data-family="light"] .gold-shimmer--inline { background-image: linear-gradient(100deg, var(--gold-hi) 0%, var(--gold) 30%, var(--gold-deep) 55%, var(--gold) 80%, var(--gold-hi) 100%); }
html[data-family="light"] .scam--bad strong { color: #7a1510; }

/* ── champagne: the clock and date shimmer follow the accent ── */
html[data-accent="champagne"] .gold-shimmer:not(.gold-shimmer--inline) {
  background-image: linear-gradient(100deg, #b9ab8a 0%, #d9ccaa 18%, #fffaf0 34%, #d9ccaa 50%, #b9ab8a 66%, #c2b595 82%, #d9ccaa 100%);
}
html[data-accent="champagne"][data-family="dark"] .gold-shimmer--inline {
  background-image: linear-gradient(100deg, #b9ab8a 0%, #d9ccaa 18%, #fffaf0 34%, #d9ccaa 50%, #b9ab8a 66%, #c2b595 82%, #d9ccaa 100%);
}

/* ── Settings: theme and accent pickers ── */
.theme-dot { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--sw, var(--gold)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 2px rgba(0, 0, 0, .28); }
.segmented--themes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; border-radius: 20px; }
.segmented--themes button { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .1rem .5rem; font-size: .68rem; border-radius: 16px; white-space: nowrap; }
.segmented--accents button { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; }
.segmented--accents .theme-dot { width: 14px; height: 14px; }