/* 1DS Portal shell — Apple-dark OS-Design language (Phase 3 pass).
   Applies to the portal's own chrome ONLY (landing, gate, viewer, shared,
   review, admin). Client deliverables and decks keep the 1DS presentation
   identity (PRESENTATION_SPEC.md) and never load this file.
   Token source of truth: ~/OS Design/Apple Dark DESIGN.md + the ops --ck-*
   set in Ops-Brain/web/app/globals.css. */

:root {
  --ck-canvas: #000000;
  --ck-deep: #161617;
  --ck-graphite: #1d1d1f;
  --ck-elevated: #26262a;
  --ck-smoke: #333336;
  --ck-pearl: #f5f5f7;
  --ck-fog: #86868b;
  --ck-fog-2: #9a9aa0;      /* muted on graphite: holds 4.5:1 */
  --ck-platinum: #c7c7cc;
  --ck-slate: #6e6e73;      /* never for small text */
  --ck-magenta: #e709f0;
  --ck-magenta-bright: #f04dff;
  --ck-magenta-dim: #b507bd;
  --ck-lime: #c8ff00;
  --ck-amber: #f59e0b;
  --ck-blue: #2997ff;
  --ck-red: #ef4444;
  --ck-rose: #e0607e;
  --ck-magenta-glow: rgba(231, 9, 240, 0.14);
  --ck-hair: rgba(255, 255, 255, 0.07);
  --ck-hair-2: rgba(255, 255, 255, 0.12);
  --ck-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ck-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.ck-shell {
  background: var(--ck-canvas);
  color: var(--ck-pearl);
  font-family: var(--ck-font);
  letter-spacing: -0.014em;
  -webkit-font-smoothing: antialiased;
}

/* The one lit object: a soft magenta bloom behind the focal element. */
.ck-bloom {
  position: fixed;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 70vw;
  height: 70vh;
  background: radial-gradient(ellipse, rgba(231, 9, 240, 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Surfaces */
.ck-card {
  position: relative;
  z-index: 2;
  background: var(--ck-graphite);
  border: 1px solid var(--ck-hair);
  border-radius: 28px;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.ck-tile {
  background: var(--ck-deep);
  border: 1px solid var(--ck-hair);
  border-radius: 10px;
}

/* Type */
.ck-eyebrow {
  font-family: var(--ck-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-fog);
}

.ck-h1 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ck-pearl);
}

.ck-sub {
  font-size: 14px;
  color: var(--ck-fog);
}

/* Muted text sitting ON a graphite card needs the brighter step to hold
   4.5:1 (#86868b passes on black, not on #1d1d1f). */
.ck-card .ck-eyebrow,
.ck-card .ck-sub {
  color: var(--ck-fog-2);
}

/* Controls */
.ck-input {
  width: 100%;
  padding: 0.8rem 1.1rem;
  background: var(--ck-deep);
  border: 1px solid var(--ck-hair-2);
  border-radius: 999px;
  color: var(--ck-pearl);
  font-family: var(--ck-font);
  font-size: 15px;
  letter-spacing: -0.014em;
  outline: none;
  transition: border-color 0.15s;
}
.ck-input::placeholder { color: var(--ck-fog); }
.ck-input:focus-visible {
  border-color: var(--ck-blue);
  box-shadow: 0 0 0 1px var(--ck-blue);
}

.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  background: var(--ck-magenta);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--ck-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.014em;
  cursor: pointer;
  transition: opacity 0.15s;
  box-shadow: 0 0 22px var(--ck-magenta-glow);
}
.ck-btn:hover { opacity: 0.92; }
.ck-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ck-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ck-canvas), 0 0 0 4px var(--ck-blue);
}

.ck-btn-ghost {
  background: var(--ck-graphite);
  color: var(--ck-pearl);
  border: 1px solid var(--ck-hair-2);
  box-shadow: none;
}
.ck-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.2); opacity: 1; }

a.ck-link {
  color: var(--ck-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.ck-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ck-blue);
  border-radius: 10px;
}

/* Error surface (matches the ops rose spec; always pair with role="alert") */
.ck-error {
  color: var(--ck-rose);
  font-size: 13px;
}
.ck-error-card {
  border: 1px solid rgba(224, 96, 126, 0.4);
  background: rgba(224, 96, 126, 0.06);
  color: var(--ck-rose);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  font-size: 13px;
}

/* Generic focus ring for any interactive element that has no custom one. */
.ck-shell button:focus-visible,
.ck-shell [tabindex]:focus-visible {
  outline: 2px solid var(--ck-blue);
  outline-offset: 2px;
}