/* Ghost design tokens -- "Nachtraum".
 *
 * One dark system, built from light rather than from lines: near-black navy
 * ground, surfaces that are lit from above (a soft top highlight instead of a
 * visible border), and a small cyan/blue light palette for state and focus.
 * Violet appears only as a rim tint on the orb. Every colour a component uses
 * comes from here -- no raw hex in components.
 *
 * Contrast (verified, WCAG): ink-1 17:1, ink-2 10:1, ink-3 >= 5.9:1 on every
 * ground below; cyan/ok/warn/error >= 7.8:1. Text never drops under AA.
 */

:root {
  color-scheme: dark;

  /* Ground: four depths of the same navy. Never pure #000 (OLED smear). */
  --night-0: #02060d;
  --night-1: #050b17;
  --night-2: #08111f;
  --night-3: #0d1a30;

  /* Ink */
  --ink-1: #eef4ff;
  --ink-2: #b4c3de;
  --ink-3: #8497b8;
  --ink-on-light: #04101f;

  /* Light: the only saturated colours in the product */
  --light-cyan: #5fd4ff;
  --light-blue: #3d8bff;
  --light-indigo: #6f7dff;
  --light-violet: #9a8bff;
  --light-cyan-rgb: 95, 212, 255;
  --light-blue-rgb: 61, 139, 255;
  --light-violet-rgb: 154, 139, 255;

  /* Semantic state colours, always paired with an icon or text.
     As signals (Daily-Driver polish, 2026-09-23) each has one meaning:
     --warn  amber: a decision waits for the owner (approvals only)
     --light-cyan: a person wrote (contacts, relays)
     --error rosé: Ghost or a source has a problem (unreachable, degraded)
     Everything else -- context, source status, background -- stays ink. */
  --ok: #62e3b4;
  --warn: #f4c26b;
  --error: #ff8d9a;
  --ok-rgb: 98, 227, 180;
  --warn-rgb: 244, 194, 107;
  --error-rgb: 255, 141, 154;

  /* Material: surfaces are lit, not outlined */
  --surface-1: rgba(112, 164, 255, 0.055);
  --surface-2: rgba(112, 164, 255, 0.10);
  --surface-3: rgba(112, 164, 255, 0.16);
  --hairline: rgba(150, 190, 255, 0.10);
  --hairline-strong: rgba(150, 190, 255, 0.20);
  --highlight-top: rgba(200, 225, 255, 0.13);
  --scrim: rgba(2, 6, 13, 0.72);

  /* Surface elevation ("base -> elevated", dark-mode.md: in dark mode a layer
     that advances toward the viewer is a touch brighter and more opaque than the
     ground it sits on). One documented scale instead of per-component rgba, so a
     section reads as its own layer through subtle brightness + a crisp hairline,
     never a heavy line or a loud fill. Standard material, never glass (the
     floating dock/sheet keep the only blur -- materials.md).
       level 0  app ground .................. --night-1        (body)
       level 1  workspace / rail column ..... --night-1/-2     (implicit)
       level 2  section container .......... --surface-section (Tagesüberblick, Freigaben)
       level 3  nested card / source tile ... --surface-card   (a brief source, a proposal)
       level 4  focused / selected .......... --surface-card-hover / active state */
  --surface-section: linear-gradient(180deg, rgba(112, 164, 255, 0.07), rgba(112, 164, 255, 0.035)), var(--night-2);
  --surface-card: rgba(120, 170, 255, 0.05);
  --surface-card-hover: rgba(120, 170, 255, 0.09);
  --edge-section: var(--hairline-strong);
  --edge-card: var(--hairline);

  /* Glass: a controlled translucency -- blur, a lift in saturation, a lit
     specular edge that takes the character's current light. Used on the few
     layers that float over the scene (dock, sheet, rail); never decoratively. */
  --glass-fill: linear-gradient(180deg, rgba(120, 170, 255, 0.10), rgba(120, 170, 255, 0.035));
  --glass-blur: blur(22px) saturate(1.5);
  --glass-edge: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.05) 36%,
    color-mix(in srgb, var(--orb-color, #3d8bff) 20%, transparent) 64%,
    rgba(255, 255, 255, 0.14)
  );

  /* Elevation: one scale, three steps */
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.5), 0 10px 24px -14px rgba(0, 0, 0, 0.8);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.5), 0 22px 44px -22px rgba(0, 0, 0, 0.9);
  --shadow-3: 0 30px 80px -30px rgba(0, 0, 0, 0.95);

  /* Glow: three intensities of the same blue */
  --glow-1: 0 0 22px rgba(var(--light-blue-rgb), 0.18);
  --glow-2: 0 0 34px rgba(var(--light-blue-rgb), 0.32);
  --glow-3: 0 0 60px rgba(var(--light-cyan-rgb), 0.38);

  /* Type */
  /* The platform's own system face: on Apple devices it brings optical sizing
     (Text/Display) and its tracking tables for free -- no web font, no download. */
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  /* Final polish (D66): the two small steps were the everyday size (143 of 178 uses) -- 13 and 14 px now. */
  --fs-caption: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-title: 1.375rem;
  --fs-display: 2.5rem;
  --lh-tight: 1.15;
  --lh-body: 1.5;

  /* Space: 4pt rhythm */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  /* Final polish (D66): every panel and card shares one radius; controls are pills; --r-sm stays for fields. */
  --r-lg: var(--r-md);
  --r-xl: var(--r-md);
  --r-pill: 999px;

  /* Motion: one easing family, three durations. Ambient loops are slow. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Ambient loops (breathing, drifting) need a soft curve, not a snappy one. */
  --ease-ambient: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  /* Springs (Apple's motion physics) as CSS linear(): computed from the damped
     spring equation, not eyeballed. snappy: zeta .86, 0.5% overshoot -- UI
     selection, sheets. soft: zeta .72, 3.8% overshoot -- the dock lens, the
     send button appearing. */
  --spring-snappy: linear(0, 0.0128 2.8%, 0.0465 5.6%, 0.0951 8.3%, 0.1536 11.1%, 0.2181 13.9%, 0.2856 16.7%, 0.3535 19.4%, 0.4203 22.2%, 0.4844 25%, 0.5451 27.8%, 0.6016 30.6%, 0.6537 33.3%, 0.7012 36.1%, 0.7441 38.9%, 0.7825 41.7%, 0.8166 44.4%, 0.8466 47.2%, 0.8728 50%, 0.8955 52.8%, 0.9151 55.6%, 0.9319 58.3%, 0.9461 61.1%, 0.9581 63.9%, 0.9681 66.7%, 0.9763 69.4%, 0.9831 72.2%, 0.9886 75%, 0.993 77.8%, 0.9964 80.6%, 0.9991 83.3%, 1.0011 86.1%, 1.0026 88.9%, 1.0037 91.7%, 1.0044 94.4%, 1.0048 97.2%, 1 100%);
  --spring-soft: linear(0, 0.0183 2.8%, 0.0661 5.6%, 0.1345 8.3%, 0.2159 11.1%, 0.3042 13.9%, 0.3946 16.7%, 0.4834 19.4%, 0.5679 22.2%, 0.6462 25%, 0.7173 27.8%, 0.7803 30.6%, 0.8352 33.3%, 0.8821 36.1%, 0.9213 38.9%, 0.9534 41.7%, 0.9791 44.4%, 0.999 47.2%, 1.014 50%, 1.0248 52.8%, 1.0319 55.6%, 1.0362 58.3%, 1.0382 61.1%, 1.0383 63.9%, 1.037 66.7%, 1.0348 69.4%, 1.0319 72.2%, 1.0287 75%, 1.0252 77.8%, 1.0218 80.6%, 1.0184 83.3%, 1.0153 86.1%, 1.0124 88.9%, 1.0098 91.7%, 1.0075 94.4%, 1.0055 97.2%, 1 100%);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;

  /* Stacking scale */
  --z-base: 0;
  --z-raised: 10;
  --z-nav: 20;
  --z-backdrop: 30;
  --z-sheet: 40;

  /* Safe areas (iPhone notch / home indicator) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Layout */
  --touch: 44px;
  --sidebar-width: 15.5rem;
  --rail-width: 22.5rem;
  /* The dock does not follow Dynamic Type: like the system tab bar its labels and
     targets stay at a fixed size (the content above it does scale). */
  --nav-height: 88px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-snappy: var(--ease-drawer);
    --spring-soft: var(--ease-drawer);
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-1);
  background: var(--night-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

h1, h2, h3, p, dl, dd, ul, ol {
  margin: 0;
}

h1, h2, h3 {
  text-wrap: balance;
  font-weight: 500;
}

p {
  text-wrap: pretty;
}

ul, ol {
  padding: 0;
}

a {
  color: var(--light-cyan);
  text-underline-offset: 0.2em;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

::selection {
  background: rgba(var(--light-blue-rgb), 0.4);
}

/* Focus: always visible, always the same light. */
:focus-visible {
  outline: 2px solid var(--light-cyan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tabular figures for anything that is a time or a count. */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* Icons: one sprite, one stroke weight, tinted by currentColor. */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--lit {
  color: var(--light-cyan);
  filter: drop-shadow(0 0 6px rgba(var(--light-cyan-rgb), 0.45));
}

/* Brand lockup: the owner-approved "GhOSt Logo Typo.png" master (the Ghost
   character/sphere woven through the O, "AI Personal Assistant" baked in) --
   a placed image, never redrawn in CSS/SVG. Per-placement caps live in
   style.css (header#topbar .brand__logo / .side-brand__logo); this file
   anchors the one shared rule every placement needs: intrinsic width/height
   (both auto) plus object-fit: contain, so a narrower max-width only ever
   scales the whole lockup down proportionally -- never stretched, squeezed,
   or reassembled. See app/public/brand/ghost-logo-lockup.png. */
.brand__logo,
.side-brand__logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* System feel: interface chrome is not selectable text and never drags or
   long-press-callouts; content (messages, proposals, brief text) stays selectable. */
:is(button, nav, header, .orb, .hero, .chat-head, .side-brand, .voice-cta, .nav-item) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

:is(#messages, .proposal-details, .proposal-description, .proposal-facts, .today, textarea, input) {
  -webkit-user-select: text;
  user-select: text;
}

img {
  -webkit-user-drag: none;
}

/* Quiet scrollbars: thin, tinted, only as wide as they must be. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 190, 255, 0.28) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(150, 190, 255, 0.28) padding-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

:is(#stage, #messages, .rail, .conversations, .approvals-body, #sidebar) {
  overscroll-behavior: contain;
}

/* Dynamic Type: on touch devices the root size follows the person's system text
   size (typography.md, accessibility.md: "Support larger text sizes"). All sizes
   are rem, so the whole interface scales with it. Desktop keeps its own scale. */
@media (pointer: coarse) {
  @supports (font: -apple-system-body) {
    html {
      font: -apple-system-body;
    }
  }
}

/* Increase Contrast: stronger fills, hairlines and secondary ink. */
@media (prefers-contrast: more) {
  :root {
    --ink-2: #d2ddf1;
    --ink-3: #b3c2dc;
    --surface-1: rgba(112, 164, 255, 0.12);
    --surface-2: rgba(112, 164, 255, 0.2);
    --surface-3: rgba(112, 164, 255, 0.3);
    --hairline: rgba(170, 205, 255, 0.4);
    --hairline-strong: rgba(190, 220, 255, 0.6);
    --surface-card: rgba(120, 170, 255, 0.12);
    --surface-card-hover: rgba(120, 170, 255, 0.2);
  }
}

/* Reduced motion means fewer and gentler, not none: looping and travelling
   motion stops, short opacity/colour changes stay because they aid comprehension. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: var(--dur-1) !important;
    scroll-behavior: auto !important;
  }
}