/* VCAL Project — shared appearance layer.
 * Loaded after each page's own <style> block. Light mode remains untouched.
 * --ink serves two roles in legacy page CSS (foreground AND dark panels),
 * so explicit panel overrides below are essential when the token is light.
 */

/* The header Appearance button is created by theme.js on every page.
 * Keep the existing desktop navigation compact enough for the extra icon.
 * On mobile it appears immediately before the existing Menu button. */
.v-page .site-header .wrap { gap: 12px; }
.v-page .site-header .nav {
  margin-left: auto;
  gap: clamp(10px, 1.5vw, 24px);
}
.v-page .vcal-appearance {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  z-index: 2;
}
.v-page .vcal-appearance-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #64748B;
  border-radius: 0;
  background: transparent;
  color: #E2E8F0;
  font: inherit;
  cursor: pointer;
}
.v-page .vcal-appearance-button:hover,
.v-page .vcal-appearance-button[aria-expanded="true"] {
  background: #1E293B;
  border-color: #8BE3F2;
}
.v-page .vcal-appearance-button:focus-visible,
.v-page .vcal-appearance-choice:focus-visible {
  outline: 2px solid #8BE3F2;
  outline-offset: 3px;
}
.v-page .vcal-appearance-button svg { width: 19px; height: 19px; }
.v-page .vcal-appearance-button .vcal-theme-moon { display: none; }
:root[data-theme="dark"] .v-page .vcal-appearance-button .vcal-theme-sun { display: none; }
:root[data-theme="dark"] .v-page .vcal-appearance-button .vcal-theme-moon { display: block; }

.v-page .vcal-appearance-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 110;
  width: 230px;
  box-sizing: border-box;
  padding: 8px;
  background: #101B2B;
  border: 1px solid #64748B;
  box-shadow: 6px 6px 0 #0E7490;
  color: #E2E8F0;
}
.v-page .vcal-appearance-panel[hidden] { display: none !important; }
.v-page .vcal-appearance-heading {
  padding: 8px 10px 10px;
  border-bottom: 1px solid #334155;
  font: 600 11px/1.4 var(--mono, monospace);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8BE3F2;
}
.v-page .vcal-appearance-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #E2E8F0;
  font-family: var(--sans, sans-serif);
  text-align: left;
  cursor: pointer;
}
.v-page .vcal-appearance-choice:hover,
.v-page .vcal-appearance-choice[aria-pressed="true"] { background: #263B50; }
.v-page .vcal-appearance-choice-text {
  grid-column: 1;
  font-weight: 600;
  font-size: 14px;
}
.v-page .vcal-appearance-choice-hint {
  grid-column: 1;
  font-size: 12px;
  color: #B6C6D7;
}
.v-page .vcal-appearance-check {
  display: none;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #8BE3F2;
  font-weight: 700;
}
.v-page .vcal-appearance-choice[aria-pressed="true"] .vcal-appearance-check { display: block; }
@media (max-width: 960px) {
  .v-page .vcal-appearance { margin-left: auto; }
}

:root[data-theme="dark"] {
  --paper: #0B1220;
  --paper-2: #101B2B;
  --sheet: #152235;
  --rule: #334155;
  --rule-strong: #475569;
  --grid: #293B51;
  --ink: #E2E8F0;
  --ink-2: #26364D;
  --text: #CBD5E1;
  --muted: #B3C0D1;
  --teal: #67D1E3;
  --teal-tint: #163645;
  --cyan-on-ink: #8BE3F2;
  --on-ink: #CBD5E1;
}

/* Consistent dark surfaces and contrasts for ordinary content. */
:root[data-theme="dark"] body.v-page {
  background: var(--paper);
  color: var(--ink);
}
:root[data-theme="dark"] .v-page ::selection {
  background: #67D1E3;
  color: #0B1220;
}
:root[data-theme="dark"] .v-page :focus-visible { outline-color: #8BE3F2; }
:root[data-theme="dark"] .v-page .skip-link {
  background: #F8FAFC;
  color: #0F172A;
  border-color: #0E7490;
}

/* These components intentionally remain navy, not pale, despite --ink
 * becoming a light foreground token in dark mode. */
:root[data-theme="dark"] .v-page .site-header,
:root[data-theme="dark"] .v-page .site-footer,
:root[data-theme="dark"] .v-page .trace,
:root[data-theme="dark"] .v-page .term,
:root[data-theme="dark"] .v-page .company-sheet-head,
:root[data-theme="dark"] .v-page .approach,
:root[data-theme="dark"] .v-page .form-sheet-head,
:root[data-theme="dark"] .v-page .index-sheet-head,
:root[data-theme="dark"] .v-page .price-sheet-head,
:root[data-theme="dark"] .v-page .price-card.dark,
:root[data-theme="dark"] .v-page .bundle,
:root[data-theme="dark"] .v-page .chain,
:root[data-theme="dark"] .v-page .mask,
:root[data-theme="dark"] .v-page .verdict,
:root[data-theme="dark"] .v-page .lookup,
:root[data-theme="dark"] .v-page .card.dark,
:root[data-theme="dark"] .v-page .mcard.final,
:root[data-theme="dark"] .v-page .anode.core,
:root[data-theme="dark"] .v-page .step.final,
:root[data-theme="dark"] .v-page .pipe li.core,
:root[data-theme="dark"] .v-page .cta,
:root[data-theme="dark"] .v-page .calc-out,
:root[data-theme="dark"] .v-page .review-head,
:root[data-theme="dark"] .v-page .policy-head,
:root[data-theme="dark"] .v-page .equation-head,
:root[data-theme="dark"] .v-page .term-box.result,
:root[data-theme="dark"] .v-page .res.fail,
:root[data-theme="dark"] .v-page .done-mark,
:root[data-theme="dark"] .v-page .qs-steps .n,
:root[data-theme="dark"] .v-page .eval-steps .n,
:root[data-theme="dark"] .v-page .steps .n,
:root[data-theme="dark"] .v-page .filter[aria-pressed="true"],
:root[data-theme="dark"] .v-page .entry.is-vcal .entry-cat,
:root[data-theme="dark"] .v-page .path-chip .s,
:root[data-theme="dark"] .v-page .shot a,
:root[data-theme="dark"] .v-page .mobile-request-node.core {
  background-color: #0F172A;
}

/* Active navigation and illuminated controls must not use the pastel text
 * accent as a white-on-accent button background (insufficient contrast). */
:root[data-theme="dark"] .v-page .btn-primary,
:root[data-theme="dark"] .v-page .nav-cta,
:root[data-theme="dark"] .v-page .mode-switch .on,
:root[data-theme="dark"] .v-page .code-chip .tag {
  background: #0E7490;
  color: #FFFFFF !important;
}
:root[data-theme="dark"] .v-page .btn-primary:hover,
:root[data-theme="dark"] .v-page .nav-cta:hover { background: #0B5E75; }
:root[data-theme="dark"] .v-page .btn-outline:hover {
  background: #26364D;
  color: #FFFFFF !important;
}

/* Outline links have their own legacy color declaration which was tuned
 * for light pages; explicitly switch to readable foreground on dark paper. */
:root[data-theme="dark"] .v-page .btn-outline {
  color: #E2E8F0 !important;
}

/* White buttons and small cyan labels deliberately have dark ink. */
:root[data-theme="dark"] .v-page .btn-light,
:root[data-theme="dark"] .v-page .btn-outline-light:hover,
:root[data-theme="dark"] .v-page .cta .btn-outline:hover,
:root[data-theme="dark"] .v-page .mask .ph,
:root[data-theme="dark"] .v-page .lookup-foot .hit,
:root[data-theme="dark"] .v-page .verdict .block,
:root[data-theme="dark"] .v-page .verdict .warn {
  color: #0F172A !important;
}
:root[data-theme="dark"] .v-page .cta .btn-outline:hover {
  background-color: #F8FAFC;
}
:root[data-theme="dark"] .v-page .btn-light:hover { background-color: #E2E8F0; }

/* Inputs and dropdowns follow page colors; browser-native widgets also use
 * color-scheme: dark (set by theme.js on <html>). */
:root[data-theme="dark"] .v-page input,
:root[data-theme="dark"] .v-page select,
:root[data-theme="dark"] .v-page textarea {
  accent-color: #0E7490;
}
:root[data-theme="dark"] .v-page .field input::placeholder,
:root[data-theme="dark"] .v-page .field textarea::placeholder { color: #A8B7C9; }

/* Page-specific small surfaces that use non-token light colors. */
:root[data-theme="dark"] .v-page .verdict .zero,
:root[data-theme="dark"] .v-page .mask .rd,
:root[data-theme="dark"] .v-page .lookup-foot .hit {
  color: #0F172A;
}
:root[data-theme="dark"] .v-page .site-footer {
  border-top-color: #26364D;
}
:root[data-theme="dark"] .v-page .site-header :focus-visible,
:root[data-theme="dark"] .v-page .site-footer :focus-visible {
  outline-color: #8BE3F2;
}

/* Documentation hub: these panels are intentionally navy with pale text.
 * They use --ink for their background in the original light stylesheet. */
:root[data-theme="dark"] .v-page .domains-head,
:root[data-theme="dark"] .v-page .featured-side {
  background: #0F172A;
  color: #E2E8F0;
}
/* Keep call-to-action hover readable in the navy feature panel. */
:root[data-theme="dark"] .v-page .featured-side .btn-outline:hover {
  background: #F8FAFC;
  color: #0F172A !important;
}