/*
 * PRISM public shell
 * Shared navigation + appearance UI for public pages.
 * Page-specific content belongs in the PHP component configuration, not here.
 */

:root {
  --public-nav-max-width: 1180px;
  --public-nav-top: 14px;
  --public-nav-height: 64px;
  --public-nav-radius: 24px;
  --public-nav-compact-width: 760px;
  --public-shell-surface: color-mix(in srgb, var(--paper-strong, #fff) 84%, transparent);
  --public-shell-surface-strong: color-mix(in srgb, var(--paper-strong, #fff) 96%, transparent);
  --public-shell-line: color-mix(in srgb, var(--ink, #111) 12%, transparent);
  --public-shell-line-strong: color-mix(in srgb, var(--ink, #111) 18%, transparent);
  --public-shell-shadow: 0 18px 56px color-mix(in srgb, var(--ink, #111) 10%, transparent);
  --public-shell-control: color-mix(in srgb, var(--ink, #111) 5%, var(--paper-strong, #fff));
  --public-shell-ease: cubic-bezier(.16, 1, .3, 1);

  /* Theme transition. These are intentionally central and easy to tune. */
  --theme-transition-duration: 340ms;
  --theme-transition-easing: cubic-bezier(.22, .78, .24, 1);
  --theme-transition-x: 82vw;
  --theme-transition-y: 54px;
  --theme-transition-radius: 140vmax;
}

.public-nav {
  position: fixed;
  z-index: 1200;
  top: var(--public-nav-top);
  left: 50%;
  width: min(calc(100% - 28px), var(--public-nav-max-width));
  transform: translateX(-50%);
  pointer-events: none;
  transition:
    width 360ms var(--public-shell-ease),
    top 360ms var(--public-shell-ease);
}

.public-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--public-nav-top));
  left: 50%;
  width: 100vw;
  height: calc(var(--public-nav-height) + var(--public-nav-top) + 18px);
  transform: translateX(-50%);
  background: transparent;
  pointer-events: none;
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

html[data-nav-state="compact"] .public-nav[data-compact-on-scroll="true"]::before {
  background: color-mix(in srgb, var(--page, #fff) 96%, transparent);
  box-shadow: 0 1px 0 var(--public-shell-line);
}

.public-nav__inner {
  min-height: var(--public-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 9px 10px 9px 12px;
  border: 1px solid var(--public-shell-line);
  border-radius: var(--public-nav-radius);
  background: var(--public-shell-surface);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--ink, #111) 5%, transparent);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  pointer-events: auto;
  transition:
    border-radius 360ms var(--public-shell-ease),
    padding 360ms var(--public-shell-ease),
    box-shadow 360ms var(--public-shell-ease),
    background-color 220ms ease;
}

@supports (corner-shape: squircle) {
  .public-nav__inner,
  .public-nav__mark,
  .public-nav__appearance-button,
  .public-nav__action,
  .appearance-popover,
  .appearance-modes,
  .appearance-selection,
  .theme-preset,
  .theme-preset-selection,
  .motion-setting,
  .motion-setting__icon,
  .motion-setting__switch {
    corner-shape: squircle;
  }
}

html[data-nav-state="compact"] .public-nav[data-compact-on-scroll="true"] {
  width: min(calc(100% - 28px), var(--public-nav-compact-width));
  top: 10px;
}

html[data-nav-state="compact"] .public-nav[data-compact-on-scroll="true"] .public-nav__inner {
  padding-inline: 9px;
  border-radius: 21px;
  box-shadow: var(--public-shell-shadow);
}

.public-nav__brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink, #111);
  text-decoration: none;
}

.public-nav__mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--public-shell-line);
  border-radius: 15px;
  background: transparent;
  transition: width 320ms var(--public-shell-ease), height 320ms var(--public-shell-ease), flex-basis 320ms var(--public-shell-ease);
}

.public-nav__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-nav__brand-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.public-nav__brand-copy strong {
  font: 780 13px/1.1 var(--font, system-ui, sans-serif);
  letter-spacing: -.025em;
}

.public-nav__brand-copy small {
  max-width: 180px;
  overflow: hidden;
  color: var(--muted, #777);
  font: 650 8px/1.2 var(--mono, monospace);
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 320ms var(--public-shell-ease), opacity 220ms ease, transform 320ms var(--public-shell-ease);
}

html[data-nav-state="compact"] .public-nav[data-compact-on-scroll="true"] .public-nav__mark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

html[data-nav-state="compact"] .public-nav[data-compact-on-scroll="true"] .public-nav__brand-copy small {
  max-width: 0;
  opacity: 0;
  transform: translateY(-3px);
}

.public-nav__actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.public-nav__appearance-button,
.public-nav__action {
  min-height: 42px;
  border-radius: 15px;
}

.public-nav__appearance-button {
  position: relative;
  width: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  color: var(--ink, #111);
  background: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 180ms var(--public-shell-ease);
}

.public-nav__appearance-button:hover,
.public-nav__appearance-button[aria-expanded="true"] {
  border-color: var(--public-shell-line);
  background: var(--public-shell-control);
}

.public-nav__appearance-button:active { transform: scale(.96); }
.public-nav__appearance-button svg { width: 20px; height: 20px; }

.public-nav__motion-indicator {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 5px;
  height: 5px;
  border: 1.5px solid var(--public-shell-surface-strong);
  border-radius: 999px;
  background: var(--ui-accent, #705cff);
  opacity: 0;
  transform: scale(.55);
  transition: opacity 160ms ease, transform 220ms var(--public-shell-ease);
}

html[data-motion="reduce"] .public-nav__motion-indicator {
  opacity: 1;
  transform: scale(1);
}

.public-nav__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--public-shell-line);
  color: var(--ink, #111);
  background: var(--public-shell-surface-strong);
  font: 720 10px/1 var(--font, system-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms var(--public-shell-ease), border-color 160ms ease, background-color 160ms ease;
}

.public-nav__action:hover {
  transform: translateY(-1px);
  border-color: var(--public-shell-line-strong);
}

.public-nav__action--ghost { background: transparent; }
.public-nav__action--primary {
  border-color: color-mix(in srgb, var(--ui-accent, #705cff) 28%, transparent);
  color: var(--ui-accent-contrast, #fff);
  background: var(--ui-accent, #705cff);
}

/* Appearance popover ------------------------------------------------------ */
.appearance-popover {
  position: fixed;
  z-index: 1210;
  top: 88px;
  right: max(14px, calc((100vw - var(--public-nav-max-width)) / 2));
  width: min(372px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 104px));
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--public-shell-line);
  border-radius: 26px;
  color: var(--ink, #111);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ui-accent, #705cff) 8%, transparent), transparent 13rem),
    var(--public-shell-surface-strong);
  box-shadow: 0 26px 80px color-mix(in srgb, var(--ink, #111) 14%, transparent);
  backdrop-filter: blur(26px) saturate(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(1.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px) scale(.985);
  transform-origin: calc(100% - 26px) 0;
  pointer-events: none;
  transition:
    opacity 150ms ease,
    visibility 150ms ease,
    transform 220ms var(--public-shell-ease),
    background-color 180ms ease;
}

.appearance-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

html[data-nav-state="compact"] .appearance-popover { top: 78px; }

.appearance-popover__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 5px 5px 12px 7px;
}

.appearance-popover__head > span { min-width: 0; display: grid; gap: 4px; }
.appearance-popover__head strong { font: 760 14px/1.2 var(--font, system-ui, sans-serif); letter-spacing: -.025em; }
.appearance-popover__head small { color: var(--muted, #777); font: 600 9px/1.45 var(--mono, monospace); }

.appearance-popover__close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: var(--muted, #777);
  background: transparent;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.appearance-popover__close:hover { color: var(--ink, #111); background: var(--public-shell-control); }
.appearance-popover__close svg { width: 18px; height: 18px; }

.appearance-modes {
  --mode-x: 4px;
  --mode-width: calc((100% - 8px) / 3);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 4px;
  border: 1px solid var(--public-shell-line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--ink, #111) 3%, transparent);
  isolation: isolate;
}

.appearance-selection {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  width: var(--mode-width);
  height: calc(100% - 8px);
  border: 1px solid var(--public-shell-line);
  border-radius: 13px;
  background: var(--paper-strong, #fff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink, #111) 6%, transparent);
  transform: translateX(var(--mode-x));
  transition: transform 250ms var(--public-shell-ease), width 250ms var(--public-shell-ease), background-color 180ms ease;
}

.appearance-mode {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  color: var(--muted, #777);
  background: transparent;
  font: 680 9px/1 var(--font, system-ui, sans-serif);
  cursor: pointer;
  transition: color 160ms ease;
}

.appearance-mode[aria-pressed="true"] { color: var(--ink, #111); }
.appearance-mode svg { width: 16px; height: 16px; flex: 0 0 16px; }

.appearance-popover__section {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--public-shell-line);
}

.appearance-popover__label {
  display: block;
  margin: 0 4px 8px;
  color: var(--muted, #777);
  font: 700 8px/1 var(--mono, monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.theme-presets {
  --accent-x: 4px;
  --preset-width: calc(100% - 8px);
  position: relative;
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--public-shell-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink, #111) 2.5%, transparent);
  isolation: isolate;
}

.theme-preset-selection {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: var(--preset-height, 56px);
  border: 1px solid var(--public-shell-line);
  border-radius: 14px;
  background: var(--paper-strong, #fff);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--ink, #111) 5%, transparent);
  transform: translateY(var(--accent-y, 0px));
  transition: transform 270ms var(--public-shell-ease), height 270ms var(--public-shell-ease), background-color 180ms ease;
}

.theme-preset {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  border: 0;
  border-radius: 14px;
  color: var(--ink, #111);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.theme-preset__preview {
  height: 40px;
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 3px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--preset-ink) 13%, transparent);
  border-radius: 11px;
  background: var(--preset-page);
}

.theme-preset__preview i { display: block; border-radius: 7px; }
.theme-preset__preview i:nth-child(1) { background: var(--preset-ink); opacity: .9; }
.theme-preset__preview i:nth-child(2) { background: var(--preset-primary); }
.theme-preset__preview i:nth-child(3) { background: var(--preset-accent); }
.theme-preset > span:last-child { min-width: 0; display: grid; gap: 3px; }
.theme-preset strong { font: 710 10px/1.1 var(--font, system-ui, sans-serif); }
.theme-preset small { color: var(--muted, #777); font: 590 8px/1.25 var(--mono, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.motion-setting {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 11px;
  padding: 9px;
  border: 1px solid var(--public-shell-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink, #111) 2.5%, transparent);
}

.motion-setting__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-accent, #705cff) 18%, var(--public-shell-line));
  border-radius: 14px;
  color: var(--ui-accent, #705cff);
  background: color-mix(in srgb, var(--ui-accent, #705cff) 7%, var(--paper-strong, #fff));
}

.motion-setting__icon svg { width: 23px; height: 23px; }
.motion-setting__copy { min-width: 0; display: grid; gap: 3px; }
.motion-setting__copy strong { font: 700 10px/1.15 var(--font, system-ui, sans-serif); }
.motion-setting__copy small { color: var(--muted, #777); font: 590 8px/1.3 var(--mono, monospace); }

.motion-setting__switch {
  position: relative;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--public-shell-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #111) 8%, var(--paper-strong, #fff));
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.motion-setting__switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--paper-strong, #fff);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--ink, #111) 16%, transparent);
  transition: transform 220ms var(--public-shell-ease), background-color 180ms ease;
}

.motion-setting__switch[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--ui-accent, #705cff) 40%, transparent);
  background: var(--ui-accent, #705cff);
}

.motion-setting__switch[aria-pressed="true"] span { transform: translateX(18px); }

/* Theme change: a calm reveal from the appearance button, no liquid overlay. */
@keyframes prism-theme-view-reveal {
  from { clip-path: circle(0 at var(--theme-transition-x) var(--theme-transition-y)); }
  to { clip-path: circle(var(--theme-transition-radius) at var(--theme-transition-x) var(--theme-transition-y)); }
}

@keyframes prism-theme-fallback {
  from { opacity: .94; }
  to { opacity: 1; }
}

::view-transition-old(root) {
  animation: none;
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
  animation: prism-theme-view-reveal var(--theme-transition-duration) var(--theme-transition-easing) both;
}

html.is-theme-transition-fallback body {
  animation: prism-theme-fallback 180ms ease-out both;
}

html[data-motion="reduce"] ::view-transition-old(root),
html[data-motion="reduce"] ::view-transition-new(root) {
  animation: none !important;
}

@media (max-width: 720px) {
  :root { --public-nav-top: 7px; }
  .public-nav { width: calc(100% - 12px); }
  html[data-nav-state="compact"] .public-nav[data-compact-on-scroll="true"] { width: calc(100% - 12px); top: 6px; }
  .public-nav__inner { min-height: 58px; padding: 7px 8px 7px 9px; border-radius: 21px; }
  .public-nav__brand-copy small { display: none; }
  .public-nav__action--ghost { display: none; }
  .public-nav__action { min-height: 40px; padding-inline: 13px; }
  .public-nav__appearance-button { width: 40px; min-height: 40px; flex-basis: 40px; }
  .appearance-popover,
  html[data-nav-state="compact"] .appearance-popover {
    top: 73px;
    right: 6px;
    width: calc(100vw - 12px);
    max-height: calc(100vh - 82px);
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-nav,
  .public-nav__inner,
  .public-nav__mark,
  .public-nav__brand-copy small,
  .appearance-popover,
  .appearance-selection,
  .theme-preset-selection,
  .motion-setting__switch,
  .motion-setting__switch span {
    transition-duration: 0.01ms !important;
  }
}