/* ═══════════════════════════════════════════════════════════════════
   holo.css — Holo, the design language of PalaceMind (Liquid LLM).
   1:1 with liquid-llm/GlassDesignSystem.swift.

   One pane of holographic glass. After dark it floats in deep space;
   in light it is a sheet of opal ice in morning air. The foreground
   stays monochrome; all color lives in the aurora behind the glass.
   A single accent marks only the *live* edge of the machine.

   Swift → CSS:
     Holo.accent            var(--accent)          rgb(var(--accent-rgb) / a)
     Holo.ink/Soft/Faint/Ghost  var(--ink) …
     Holo.wash(a)           JS Holo.wash(a)  → rgb(var(--wash-rgb) / a·k)
     Holo.veil(a)           JS Holo.veil(a)
     Holo.dimmer(a)         JS Holo.dimmer(a)
     .holoWhisper(r)        .holo-whisper   (--r)
     .holoInset(r)          .holo-inset     (--r)
     HoloGlassPanel         .holo-panel
     glassEffect(.regular)  .lg  (+ .lg-interactive, --lg-tint)
     .ultraThinMaterial     .mat-ultrathin
   ═══════════════════════════════════════════════════════════════════ */

.pm-app {
  /* ── Dark: the native look (AppAppearance.dark is the default) ── */
  --accent-rgb: 107 219 255;          /* (0.42, 0.86, 1.00) */
  --danger-rgb: 255 102 107;          /* (1.00, 0.40, 0.42) */
  --ink-rgb: 255 255 255;
  --ink2-rgb: 255 255 255;
  --ink-a: 0.94;
  --ink-soft-a: 0.60;
  --ink-faint-a: 0.34;
  --ink-ghost-a: 0.16;
  --on-accent: rgb(5 15 26);          /* (0.02, 0.06, 0.10) */
  --system-blue-rgb: 10 132 255;      /* UIColor.systemBlue: the default tint (the app ships no AccentColor) */
  --glass-tint-rgb: 255 255 255;
  --wash-rgb: 255 255 255;  --wash-k: 1;
  --veil-lo-rgb: 0 0 0;     --veil-lo-k: 1;
  --veil-hi-rgb: 0 0 0;     --veil-hi-base: 0;  --veil-hi-k: 1;
  --dim-rgb: 0 0 0;         --dim-k: 1;         --dim-max: 1;
  --void: rgb(4 5 9);                 /* MTLClearColor (0.015, 0.018, 0.035) */
  --orange-rgb: 255 159 10;           /* SwiftUI .orange (dark) */
  --green-rgb: 48 209 88;
  --yellow-rgb: 255 214 10;
  --red-rgb: 255 69 58;
  --label2: rgb(235 235 245 / 0.6);   /* .secondary */
  --label3: rgb(235 235 245 / 0.3);
  --separator: rgb(84 84 88 / 0.6);

  /* Materials (UIBlurEffect approximations) */
  --mat-ultrathin-bg: rgb(22 24 32 / 0.30);
  --mat-thin-bg: rgb(26 28 36 / 0.46);
  --mat-regular-bg: rgb(30 32 40 / 0.62);
  --mat-thick-bg: rgb(28 30 38 / 0.80);
  --mat-blur: 22px;
  --mat-sat: 1.7;

  /* Liquid Glass (glassEffect .regular) */
  --lg-fill: rgb(255 255 255 / 0.035);
  --lg-blur: 10px;
  --lg-sat: 1.65;
  --lg-bright: 1.06;
  --lg-rim-hi: rgb(255 255 255 / 0.42);
  --lg-rim-lo: rgb(255 255 255 / 0.06);
  --lg-inner-top: rgb(255 255 255 / 0.16);
  --lg-inner-bottom: rgb(255 255 255 / 0.05);
  --lg-drop: 0 10px 28px -8px rgb(0 0 0 / 0.42), 0 2px 6px -2px rgb(0 0 0 / 0.25);
  --lg-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 42%);

  /* Holo inset (reversed elevation) */
  --inset-fill: rgb(0 0 0 / 0.16);
  --inset-shadow: rgb(0 0 0 / 0.55);
  --inset-stroke: linear-gradient(180deg, rgb(0 0 0 / 0.35), rgb(255 255 255 / 0.03) 50%, rgb(255 255 255 / 0.18));

  /* Glass panel edge (HoloGlassPanel) */
  --panel-edge: linear-gradient(135deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.06) 50%, rgb(107 219 255 / 0.22));
  --panel-shadow: 0 18px 68px rgb(0 0 0 / 0.48); /* .shadow(black .48, radius 34, y 18) */

  --code-bg: rgb(255 255 255 / 0.045);
  --scrollbar: rgb(255 255 255 / 0.14);
  color-scheme: dark;
}

.pm-app[data-appearance="light"] {
  /* ── Light: the same glass language over morning ice ── */
  --accent-rgb: 0 117 168;            /* (0.00, 0.46, 0.66) */
  --danger-rgb: 199 46 61;            /* (0.78, 0.18, 0.24) */
  --ink-rgb: 26 31 46;                /* (0.10, 0.12, 0.18) */
  --ink2-rgb: 41 46 66;               /* (0.16, 0.18, 0.26) */
  --ink-a: 0.92;
  --ink-soft-a: 0.68;
  --ink-faint-a: 0.46;
  --ink-ghost-a: 0.26;
  --on-accent: rgb(250 252 255 / 0.96);
  --system-blue-rgb: 0 122 255;
  --glass-tint-rgb: 36 46 66;         /* (0.14, 0.18, 0.26) */
  --wash-rgb: 20 26 41;     --wash-k: 0.78;
  --veil-lo-rgb: 20 26 41;  --veil-lo-k: 0.42;
  --veil-hi-rgb: 237 242 250; --veil-hi-base: 0.72; --veil-hi-k: 0.25;
  --dim-rgb: 46 56 77;      --dim-k: 0.72;       --dim-max: 0.36;
  --void: rgb(219 230 245);           /* (0.86, 0.90, 0.96) */
  --orange-rgb: 255 149 0;
  --green-rgb: 52 199 89;
  --yellow-rgb: 255 204 0;
  --red-rgb: 255 59 48;
  --label2: rgb(60 60 67 / 0.6);
  --label3: rgb(60 60 67 / 0.3);
  --separator: rgb(60 60 67 / 0.29);

  --mat-ultrathin-bg: rgb(248 250 253 / 0.34);
  --mat-thin-bg: rgb(248 250 253 / 0.52);
  --mat-regular-bg: rgb(246 248 252 / 0.70);
  --mat-thick-bg: rgb(244 246 250 / 0.84);
  --mat-sat: 1.8;

  --lg-fill: rgb(255 255 255 / 0.30);
  --lg-blur: 12px;
  --lg-sat: 1.8;
  --lg-bright: 1.04;
  --lg-rim-hi: rgb(255 255 255 / 0.95);
  --lg-rim-lo: rgb(255 255 255 / 0.35);
  --lg-inner-top: rgb(255 255 255 / 0.85);
  --lg-inner-bottom: rgb(255 255 255 / 0.30);
  --lg-drop: 0 10px 26px -10px rgb(40 52 80 / 0.28), 0 2px 6px -2px rgb(40 52 80 / 0.14);
  --lg-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.30), rgb(255 255 255 / 0) 46%);

  --inset-fill: rgb(0 0 0 / 0.06);
  --inset-shadow: rgb(0 0 0 / 0.16);
  --inset-stroke: linear-gradient(180deg, rgb(0 0 0 / 0.16), rgb(255 255 255 / 0.18) 50%, rgb(255 255 255 / 0.62));

  --panel-edge: linear-gradient(135deg, rgb(20 26 41 / 0.17), rgb(20 26 41 / 0.06) 50%, rgb(0 117 168 / 0.18));
  --panel-shadow: 0 18px 68px rgb(0 0 0 / 0.18);

  --code-bg: rgb(20 26 41 / 0.045);
  --scrollbar: rgb(20 26 41 / 0.18);
  color-scheme: light;
}

.pm-app {
  --accent: rgb(var(--accent-rgb));
  --danger: rgb(var(--danger-rgb));
  --ink: rgb(var(--ink-rgb) / var(--ink-a));
  --ink-soft: rgb(var(--ink2-rgb) / var(--ink-soft-a));
  --ink-faint: rgb(var(--ink2-rgb) / var(--ink-faint-a));
  --ink-ghost: rgb(var(--ink2-rgb) / var(--ink-ghost-a));
  --orange: rgb(var(--orange-rgb));
  --green: rgb(var(--green-rgb));

  /* Typography: SF Pro / SF Mono natively, Inter / Geist Mono elsewhere. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, "Geist Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-rounded: ui-rounded, "SF Pro Rounded", "Nunito", var(--font-sans);

  --pane-radius: 34px;               /* Holo.paneRadius */
  position: relative;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
:where(.pm-app) *, :where(.pm-app) *::before, :where(.pm-app) *::after { box-sizing: border-box; }
:where(.pm-app) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(.pm-app) button:disabled { cursor: default; }
:where(.pm-app) :is(input, textarea) { font: inherit; color: inherit; background: none; border: 0; outline: none; margin: 0; padding: 0; }
:where(.pm-app) :is(input, textarea)::placeholder { color: var(--ink-faint); opacity: 1; }
.pm-app :focus-visible { outline: 2px solid rgb(var(--accent-rgb) / 0.7); outline-offset: 2px; }
.pm-app :is(input, textarea):focus-visible { outline: none; }
.pm-app .selectable, .pm-app input, .pm-app textarea { user-select: text; -webkit-user-select: text; }
.pm-app ::selection { background: rgb(var(--accent-rgb) / 0.32); }
.pm-app *::-webkit-scrollbar { width: 0; height: 0; }
.pm-app * { scrollbar-width: none; }

/* SwiftUI text styles (iOS default Dynamic Type "Large") */
.t-largeTitle { font: 400 34px/41px var(--font-display); letter-spacing: 0.37px; }
.t-title  { font: 400 28px/34px var(--font-display); letter-spacing: 0.36px; }
.t-title2 { font: 400 22px/28px var(--font-display); letter-spacing: 0.35px; }
.t-title3 { font: 400 20px/25px var(--font-display); letter-spacing: 0.38px; }
.t-headline { font: 600 17px/22px var(--font-sans); letter-spacing: -0.41px; }
.t-body { font: 400 17px/22px var(--font-sans); letter-spacing: -0.41px; }
.t-callout { font: 400 16px/21px var(--font-sans); letter-spacing: -0.32px; }
.t-subheadline { font: 400 15px/20px var(--font-sans); letter-spacing: -0.24px; }
.t-footnote { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; }
.t-caption { font: 400 12px/16px var(--font-sans); letter-spacing: 0; }
.t-caption2 { font: 400 11px/13px var(--font-sans); letter-spacing: 0.07px; }

/* ── MonoLabel: the instrument-readout voice ── */
.mono-label {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* ── .holoWhisper(r): barely-there held glass ── */
.holo-whisper {
  position: relative;
  border-radius: var(--r, 18px);
  background: rgb(var(--glass-tint-rgb) / 0.06);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  box-shadow:
    inset 0 0 0 0.5px rgb(var(--wash-rgb) / calc(0.08 * var(--wash-k))),
    inset 0 1px 0 var(--lg-inner-top),
    inset 0 -0.5px 0 var(--lg-inner-bottom),
    var(--lg-drop);
}
.holo-whisper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-sheen);
  pointer-events: none;
}

/* ── .holoInset(r): a well pressed into the glass ── */
.holo-inset {
  position: relative;
  border-radius: var(--r, 20px);
  background: var(--inset-fill);
  box-shadow: inset 0 3px 12px -1px var(--inset-shadow);
}
.holo-inset::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--inset-stroke);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* ── Liquid Glass (.glassEffect(.regular)) ── */
.lg {
  position: relative;
  border-radius: var(--r, 999px);
  background: var(--lg-tint, var(--lg-fill));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  box-shadow:
    inset 0 1px 0.5px var(--lg-inner-top),
    inset 0 -1px 0.5px var(--lg-inner-bottom),
    var(--lg-drop);
  isolation: isolate;
}
.lg::before {
  /* specular sheen */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-sheen);
  pointer-events: none;
  z-index: -1;
}
.lg::after {
  /* the lensing rim: bright where light enters (top-left) and exits (bottom-right) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--lg-rim-hi), var(--lg-rim-lo) 28%, transparent 50%, var(--lg-rim-lo) 72%, var(--lg-rim-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.7;
  pointer-events: none;
}
.lg-interactive { transition: transform var(--dur-settle) var(--ease-settle), filter 0.2s ease; }
.lg-interactive:active { transform: scale(1.035); filter: brightness(1.12); }
.lg-interactive .lg-glint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  mix-blend-mode: plus-lighter;
}
.lg-interactive:hover .lg-glint { opacity: 0.55; }
.lg-interactive:active .lg-glint { opacity: 1; }

/* ── Materials ── */
.mat-ultrathin, .mat-thin, .mat-regular, .mat-thick {
  -webkit-backdrop-filter: blur(var(--mat-blur)) saturate(var(--mat-sat));
  backdrop-filter: blur(var(--mat-blur)) saturate(var(--mat-sat));
}
.mat-ultrathin { background-color: var(--mat-ultrathin-bg); }
.mat-thin { background-color: var(--mat-thin-bg); }
.mat-regular { background-color: var(--mat-regular-bg); }
.mat-thick { background-color: var(--mat-thick-bg); }

/* ── HoloGlassPanel: material + veil + hairline edge ── */
.holo-panel {
  position: relative;
  border-radius: var(--r, 24px);
  overflow: hidden;
  -webkit-backdrop-filter: blur(var(--mat-blur)) saturate(var(--mat-sat));
  backdrop-filter: blur(var(--mat-blur)) saturate(var(--mat-sat));
  background-color: var(--mat-ultrathin-bg);
  background-image: linear-gradient(var(--veil), var(--veil));
  box-shadow: var(--panel-shadow);
}
.holo-panel.no-shadow { box-shadow: none; }
.holo-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.9px;
  background: var(--panel-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* ── Hairline ── */
.hairline { height: 0.5px; background: rgb(var(--wash-rgb) / calc(0.07 * var(--wash-k))); flex: none; }

/* Pressed-state for plain buttons (SwiftUI .plain dims on press). */
.pm-app .press { transition: opacity 0.12s ease; }
.pm-app .press:active { opacity: 0.55; }

/* Reduce Motion: honour it everywhere. */
.pm-app[data-reduce-motion="true"] *, .pm-app[data-reduce-motion="true"] *::before, .pm-app[data-reduce-motion="true"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}