@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* =========================================================================
   GIGA-GLOSSARY — "KOSMIC" THEME
   Drop-in. Every selector is scoped to :is([data-theme="kosmic"],[data-theme="prismatic"]) so nothing
   leaks into the other themes or into a surrounding WordPress theme.
   Requires no changes to app.js — it styles the existing badge-path markup.
   Install: load this file after styles.css, add
   <option value="kosmic">Kosmic</option> to #themeSelect.
   ========================================================================= */

[data-theme="kosmic"] {
  --bg: #08090c;
  --ink: #05070a;
  --panel: #0c0f14;
  --panel-2: #12141a;
  --panel-3: #0a0c11;
  --panel-4: #0b0d12;
  --panel-5: #12151c;
  --panel-6: #1a1d24;
  --panel-7: #0f1217;
  --field: #15181f;
  --skel: #1e222b;
  --band-off: #161a21;
  --line: #23262f;
  --line-soft: #1c2028;
  --line-2: #1f232c;
  --line-3: #262a34;
  --line-4: #2b303c;
  --line-5: #272b35;
  --line-6: #2f3440;
  --line-7: #333947;
  --grey-1: #3a4050;
  --grey-2: #4a5162;
  --grey-3: #4d515f;
  --grey-4: #7c8093;
  --grey-5: #8b8fa0;
  --ghost: #5d616f;
  --faint: #6f7285;
  --dim: #8d90a3;
  --label: #9ea1b2;
  --muted: #a5a7b8;
  --text: #e9e7f0;
  --text-2: #cfd0dc;
  --text-3: #c8c9d6;
  --text-4: #e2e0ea;
  --text-5: #f2f0f7;
  --text-6: #d8d5e4;
  --text-7: #b9b6c8;
  --text-hi: #f4f2f9;
  --accent: #9be3dd;
  --accent-hi: #c9f2ee;
  --sel-fg: #ffffff;
  --warn-fg: #e8a094;
  --warn-bd: #6e3b34;
  --warn-tx: #c8b3ae;
  --scrim: 8, 9, 12;

  --bg: #08090c;
  --panel: #0e1015;
  --panel2: #12141a;
  --text: #e9e7f0;
  --muted: #a5a7b8;
  --accent: #9be3dd;
  --ok: #5fb87a;
  --warning: #d9a13b;
  --error: #e0483c;
  --r: 14px;

  --line: #23262f;
  --line-soft: #1c1f27;
  --ink-dim: #6f7285;
  --ink-faint: #4d515f;

  --font-family: 'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --shadow: 0 10px 30px -18px #000;
  --shadow-lg: 0 18px 44px -22px #000;
  --animation-speed: .22s;
  --card-padding: 22px;
}

/* ===== GROUND ===== */
:is([data-theme="kosmic"],[data-theme="prismatic"]) body {
  background: var(--bg);
  font-family: var(--font-family);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(70% 50% at 12% 0%, rgba(155, 227, 221, .055), transparent 70%),
    radial-gradient(60% 50% at 92% 8%, rgba(124, 108, 224, .05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* keep the header above the ground layer without losing base stickiness */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .app-header { z-index: 60; }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .layout { position: relative; z-index: 1; }

/* ===== HEADER ===== */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .app-header {
  background: #0c0e13;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .brand {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .01em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
  white-space: nowrap;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .input-wrap input {
  background: var(--field);
  border: 1px solid var(--line-3);
  border-radius: 10px;
  box-shadow: none;
  padding: 13px 16px;
  font-family: var(--font-family);
  font-size: 15px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .input-wrap input::placeholder { color: var(--ghost); }

:is([data-theme="kosmic"],[data-theme="prismatic"]) .input-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(155, 227, 221, .1);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .theme-label,
:is([data-theme="kosmic"],[data-theme="prismatic"]) .toggle-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .toggle-text { font-size: 12.5px; color: var(--muted); }

:is([data-theme="kosmic"],[data-theme="prismatic"]) #themeSelect {
  background: var(--field);
  border: 1px solid var(--line-3);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) #modeIndicator {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border-color: var(--line);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .toggle-slider {
  background: var(--line-soft);
  border-color: var(--line-4);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .toggle-input:checked + .toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .toggle-input:checked + .toggle-slider::before { background: var(--bg); }

/* ===== BUTTONS ===== */
:is([data-theme="kosmic"],[data-theme="prismatic"]) button.primary {
  background: var(--accent);
  color: var(--bg);
  border-radius: 9px;
  padding: 13px 20px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  box-shadow: none;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) button.primary:hover {
  transform: none;
  background: #b4ece7;
  box-shadow: none;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) button.ghost {
  background: var(--field);
  border: 1px solid var(--line-5);
  border-radius: 9px;
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  padding: 10px 15px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) button.ghost:hover {
  background: var(--line-soft);
  border-color: #3a3f4b;
  color: var(--text);
}

/* ===== CARDS =====
   .address is pulled above .card-head so the altitude rule and coordinates
   sit at the top of the card, with the title beneath — no markup change. */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card {
  display: flex;
  flex-direction: column;
  background: var(--panel2);
  border: 1px solid var(--line-soft);
  border-radius: 4px 4px var(--r) var(--r);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:hover {
  transform: none;
  border-color: var(--line-4);
  box-shadow: var(--shadow-lg);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .address {
  order: -1;
  background: transparent;
  border-left: none;
  border-bottom: 1px solid var(--line-soft);
  border-top: 3px solid var(--alt, var(--accent));
  padding: 18px var(--card-padding) 16px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .card-head {
  border-bottom: none;
  background: transparent;
  padding: 18px var(--card-padding) 0;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .context-title {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--text-5);
  text-wrap: pretty;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .coordinate-layout { gap: 18px; align-items: flex-start; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) .coordinate-sentence {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 19px;
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: pretty;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .coordinate-visual { gap: 6px; flex-wrap: wrap; }

/* --- coordinate chips (badge path) --- */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .altitude-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid var(--alt, var(--accent));
  background: var(--alt, var(--accent));
  color: var(--bg);
  min-width: 0;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .perspective-indicator,
:is([data-theme="kosmic"],[data-theme="prismatic"]) .intelligence-badge,
:is([data-theme="kosmic"],[data-theme="prismatic"]) .state-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
  padding: 6px 10px;
  border-radius: 5px;
  background: #191d24;
  border: 1px solid var(--line-5);
  color: var(--muted);
  min-width: 0;
  box-shadow: none;
  text-shadow: none;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .intelligence-badge { max-width: 150px; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) .state-badge.state-Nondual,
:is([data-theme="kosmic"],[data-theme="prismatic"]) .state-badge.state-Witness {
  border-color: rgba(155, 227, 221, .45);
  color: var(--accent);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .quad-grid {
  --size: 24px;
  border: 1px solid var(--line-5);
  border-radius: 5px;
  background: #191d24;
  padding: 3px;
  gap: 2px;
  grid-template-columns: repeat(2, 8px);
  grid-template-rows: repeat(2, 8px);
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  place-content: center;
  box-shadow: none;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .quad-cell {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 1px;
  background: var(--line-4);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .quad-cell.active {
  background: var(--alt, var(--accent));
  box-shadow: none;
}

/* --- body: Summary / Experience --- */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card-body {
  padding: 20px var(--card-padding);
  gap: 18px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text-3);
  text-wrap: pretty;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .section-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 9px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section {
  padding: 16px 18px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
  border-left: 2px solid var(--alt, var(--accent));
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section > summary {
  color: var(--alt, var(--accent));
  margin-bottom: 0;
  cursor: pointer;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section[open] > summary { margin-bottom: 10px; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section > div {
  font-family: var(--font-display);
  font-size: 19.5px;
  line-height: 1.58;
  color: var(--text-4);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .card-actions {
  border-top: 1px solid var(--line-soft);
  background: transparent;
  padding: 15px var(--card-padding);
  gap: 9px;
}

/* ===== ALTITUDE RAMP =====
   The altitude class lives on .address, but the rule, badge, quad cell and
   Experience accent all need the colour — so :has() lifts one --alt variable
   to the card and everything inside inherits it.

   The colours themselves are NOT defined here. They are tokens on the theme
   root in giga-kosmic-chorus.css, which is the single source of truth: the same
   ten values used to be duplicated across five maps split over two files and an
   ownership boundary, so a palette change had to be made five times and would
   eventually have been made in four.

   There are deliberately no fallback literals here. They existed while the
   token block was still in flight, with a test asserting every fallback equalled
   its token; the tokens have landed, the test confirmed zero drift, and a
   fallback that is never used is just a second copy waiting to disagree. */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card { --alt: var(--accent); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-infrared) { --alt: var(--alt-infrared); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-magenta) { --alt: var(--alt-magenta); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-red) { --alt: var(--alt-red); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-amber) { --alt: var(--alt-amber); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-umber) { --alt: var(--alt-umber); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-orange) { --alt: var(--alt-orange); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-green) { --alt: var(--alt-green); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-teal) { --alt: var(--alt-teal); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-turquoise) { --alt: var(--alt-turquoise); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .card:has(.alt-indigo) { --alt: var(--alt-indigo); }

/* fallback for browsers without :has() — rule + badge still get their colour */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-infrared { --alt: var(--alt-infrared); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-magenta { --alt: var(--alt-magenta); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-red { --alt: var(--alt-red); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-amber { --alt: var(--alt-amber); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-umber { --alt: var(--alt-umber); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-orange { --alt: var(--alt-orange); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-green { --alt: var(--alt-green); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-teal { --alt: var(--alt-teal); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-turquoise { --alt: var(--alt-turquoise); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .address.alt-indigo { --alt: var(--alt-indigo); }

/* ===== REGENERATING THE HERO IMAGE =====
   The loop says "there is nothing here yet". Once a referent has a picture,
   a regeneration — a theme whose style has no image yet, or Refresh — keeps
   showing it and pulses instead, so the visitor is told work is happening
   without having the thing they are looking at taken away.

   Deliberately close to the tuner's rd-pulse in giga-radio.css: same idea,
   same rhythm, shallower because this is a whole image rather than a dial
   marker. Claude Design owns the tuner's version; if the two should be one
   animation, theirs is the one to keep. */
@keyframes giga-regenerating {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
:is([data-theme="kosmic"],[data-theme="prismatic"]) #heroImg.is-regenerating {
  animation: giga-regenerating 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  :is([data-theme="kosmic"],[data-theme="prismatic"]) #heroImg.is-regenerating {
    animation: none;
    opacity: .7;   /* still says "working", without the movement */
  }
}

/* ===== STARTER / CHIPS ===== */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .starter {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: none;
  padding: 22px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .starter h2 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .chips { gap: 7px; margin-bottom: 14px; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) .chip {
  background: var(--field);
  border: 1px solid var(--line-3);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 13px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .chip:hover {
  background: var(--line-soft);
  border-color: var(--accent);
  color: var(--text);
  transform: none;
  box-shadow: none;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .coord-tools #presetChips .chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: none;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .hint { font-size: 12.5px; color: var(--dim); }

:is([data-theme="kosmic"],[data-theme="prismatic"]) .hint code {
  background: var(--field);
  border: 1px solid var(--line-3);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
}

/* ===== PANELS / SIDEBAR ===== */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .panel {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: none;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .panel summary,
:is([data-theme="kosmic"],[data-theme="prismatic"]) .panel h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .panel h4 { margin: 0 0 10px; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) .quickstart { font-size: 13.5px; line-height: 1.7; color: var(--muted); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .quickstart strong { color: var(--accent); font-weight: 600; }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .quickstart em { color: var(--dim); font-style: italic; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) .coord-tools { background: var(--panel); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .coord-tools .right-col { border-left-color: var(--line-soft); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .coord-tools .row .label,
:is([data-theme="kosmic"],[data-theme="prismatic"]) .coord-tools > details > summary {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
:is([data-theme="kosmic"],[data-theme="prismatic"]) .coord-tools .right-col .list .item {
  border-color: var(--line-soft);
  background: var(--field);
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ===== HERO / META-DEFINITION ===== */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .hero {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: none;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .hero-img-wrap { background: var(--panel-4); }
:is([data-theme="kosmic"],[data-theme="prismatic"]) .hero-meta { padding: 20px; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) .hero-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-5);
  margin-bottom: 4px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .meta-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--ink-dim);
  opacity: 1;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .meta-description {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-4);
  text-wrap: pretty;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .meta-hint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .meta-hint::before { content: none; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) .meta-debug {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
}

@keyframes kosmic-meta-fresh {
  0% { opacity: .5; }
  100% { opacity: 1; }
}
:is([data-theme="kosmic"],[data-theme="prismatic"]) .meta-description.fresh { animation: kosmic-meta-fresh 1.2s ease-out; }

/* ===== STATUS / LOADING ===== */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .status {
  background: #0c0e13;
  border-bottom: 1px solid var(--line);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) #statusMsg {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .spinner {
  border-color: var(--line-4);
  border-top-color: var(--accent);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .loading-spinner,
:is([data-theme="kosmic"],[data-theme="prismatic"]) .loading-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .skel-line {
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--field) 0%, var(--line-soft) 50%, var(--field) 100%);
  background-size: 300% 100%;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .error-card {
  border-color: rgba(224, 72, 60, .5);
  background: rgba(224, 72, 60, .06);
}
:is([data-theme="kosmic"],[data-theme="prismatic"]) .error-card .section-title { color: var(--error); }

/* ===== LINKS ===== */
:is([data-theme="kosmic"],[data-theme="prismatic"]) a { color: var(--accent); text-decoration: none; }
:is([data-theme="kosmic"],[data-theme="prismatic"]) a:hover { color: #c2f0ec; }

/* =========================================================================
   REFINEMENTS — measure, disclosure widgets, focus rings
   ========================================================================= */

/* 1. READING MEASURE
   Real API summaries run long, and the results column is ~1800px on a wide
   screen. Cap the text, not the card — the chips and rule still span full
   width, so the card keeps its architecture while prose stays readable. */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .section > div,
:is([data-theme="kosmic"],[data-theme="prismatic"]) .coordinate-sentence {
  max-width: 78ch;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section > div { max-width: 68ch; }

/* 2. EXPERIENCE DISCLOSURE
   Kill the default triangle, replace with a mono chevron that rotates, and
   collapse the padding when shut so it reads as a closed drawer rather than
   an empty panel. */
:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section > summary::-webkit-details-marker { display: none; }
:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section > summary::marker { content: ''; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section > summary::before {
  content: '+';
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--alt, var(--accent));
  opacity: .75;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section[open] > summary::before { content: '−'; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section:not([open]) {
  padding: 12px 18px;
  background: rgba(255, 255, 255, .02);
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) details.section:not([open]) > summary:hover { color: var(--text); }

/* 3. FOCUS RINGS
   The Perspective selector summary was picking up the browser default blue
   box. Replace with the theme accent, and only on keyboard focus. */
:is([data-theme="kosmic"],[data-theme="prismatic"]) summary:focus { outline: none; }

:is([data-theme="kosmic"],[data-theme="prismatic"]) summary:focus-visible,
:is([data-theme="kosmic"],[data-theme="prismatic"]) button:focus-visible,
:is([data-theme="kosmic"],[data-theme="prismatic"]) .chip:focus-visible,
:is([data-theme="kosmic"],[data-theme="prismatic"]) select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .coord-tools > details > summary {
  background: var(--field);
  border: 1px solid var(--line-3);
  border-radius: 7px;
  padding: 7px 12px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .coord-tools > details > summary:hover {
  border-color: #3a3f4b;
  color: var(--muted);
}

/* 4. QUADRANT GRID — a touch larger; it was illegible beside 10px chips */
:is([data-theme="kosmic"],[data-theme="prismatic"]) .quad-grid {
  grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(2, 9px);
  width: 26px;
  height: 26px;
}

:is([data-theme="kosmic"],[data-theme="prismatic"]) .quad-cell { width: 9px; height: 9px; }

/* 5. LIVE MODE indicator was too faint to read */
:is([data-theme="kosmic"],[data-theme="prismatic"]) #modeIndicator { color: var(--muted); }