/* =============================================================
   Cliff — "Cyberdeck" design system
   Dark navy + multi-neon. Built for calm operators, not hackers.
   Glow is restraint: only on accents, never on body text.
   ============================================================= */

:root {
  /* surfaces */
  --cd-bg:        #0B101B;
  --cd-bg2:       #0E1422;
  --cd-bg3:       #0D1322;
  --cd-card:      #131A2A;
  --cd-card-hi:   #1B2438;
  --cd-card-hov:  #161E32;
  --cd-rule:      #27324E;
  --cd-rule-2:    #34405E;

  /* text */
  --cd-ink:       #D6E0F4;   /* primary body */
  --cd-ink-hi:    #F2F6FE;   /* hover / focus */
  --cd-ink-2:     #9BACCC;   /* secondary */
  --cd-ink-3:     #6473A0;   /* tertiary / meta */
  --cd-ink-4:     #44507A;   /* hint / disabled */

  /* primary accent — sage mint (softer than original neon) */
  --cd-green:     #6FE3B5;
  --cd-green-hi:  #9FECC9;
  --cd-green-glow: rgba(111, 227, 181, 0.40);
  --cd-green-soft: rgba(111, 227, 181, 0.08);
  --cd-green-line: rgba(111, 227, 181, 0.30);

  /* secondary neons (used sparingly) */
  --cd-cyan:      #7FC8DC;   /* paths, code, links */
  --cd-cyan-soft: rgba(127, 200, 220, 0.10);
  --cd-cyan-line: rgba(127, 200, 220, 0.28);

  --cd-magenta:   #E78AC4;   /* secrets, identity-related */
  --cd-magenta-soft: rgba(231, 138, 196, 0.10);

  /* signal */
  --cd-amber:     #F0BF7E;
  --cd-amber-soft: rgba(240, 191, 126, 0.10);
  --cd-red:       #E97A8E;
  --cd-red-soft:  rgba(233, 122, 142, 0.12);
  --cd-red-glow:  rgba(233, 122, 142, 0.35);

  /* type */
  --cd-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --cd-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --cd-display: 'Manrope', 'Inter', system-ui, sans-serif;

  /* radii */
  --cd-r-1: 2px;
  --cd-r-2: 4px;
  --cd-r-3: 6px;

  /* motion */
  --cd-fast: 120ms;
  --cd-base: 180ms;
}

html, body {
  margin: 0;
  background: var(--cd-bg);
  color: var(--cd-ink);
  font-family: var(--cd-sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss03';
}

* { box-sizing: border-box; }

/* fonts */
.font-mono { font-family: var(--cd-mono); }
.font-display { font-family: var(--cd-display); }

/* subtle global scanline overlay — applied to .cd-app */
.cd-app {
  position: relative;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(111, 227, 181, 0.012) 0 1px,
      transparent 1px 3px
    ),
    var(--cd-bg);
  min-height: 100vh;
  isolation: isolate;
}

/* faint vignette + corner accents for the app frame */
.cd-app::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(111, 227, 181, 0.025) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(127, 200, 220, 0.018) 0%,
      transparent 40%
    );
  pointer-events: none;
  z-index: 0;
}

/* keyboard glyph */
.cd-key {
  font-family: var(--cd-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cd-ink-2);
  border: 1px solid var(--cd-rule);
  border-radius: 3px;
  letter-spacing: 0.04em;
}

/* corner brackets — wrap any element to give it the tactical frame */
.cd-frame { position: relative; }
.cd-frame::before,
.cd-frame::after,
.cd-frame > .cd-frame-br::before,
.cd-frame > .cd-frame-br::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--cd-green);
  opacity: 0.55;
  transition: opacity var(--cd-base);
}
.cd-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.cd-frame::after  { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.cd-frame > .cd-frame-br {
  position: absolute; inset: 0; pointer-events: none;
}
.cd-frame > .cd-frame-br::before {
  bottom: -1px; left: -1px; border-right: none; border-top: none;
}
.cd-frame > .cd-frame-br::after {
  bottom: -1px; right: -1px; border-left: none; border-top: none;
}
.cd-frame:hover::before,
.cd-frame:hover::after,
.cd-frame:hover > .cd-frame-br::before,
.cd-frame:hover > .cd-frame-br::after {
  opacity: 1;
}

/* === Buttons ============================================================ */

.cd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--cd-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cd-ink-2);
  cursor: pointer;
  transition: all var(--cd-fast) ease;
  position: relative;
  border-radius: var(--cd-r-1);
  user-select: none;
}
.cd-btn:focus-visible { outline: 1px solid var(--cd-green); outline-offset: 2px; }

/* primary — filled green with glow that intensifies on hover */
.cd-btn--primary {
  background: var(--cd-green);
  color: var(--cd-bg);
  box-shadow: 0 0 12px var(--cd-green-glow);
}
.cd-btn--primary:hover {
  background: var(--cd-green-hi);
  box-shadow: 0 0 22px var(--cd-green-glow), inset 0 0 12px rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.cd-btn--primary:active { transform: translateY(0); }

/* outline — neon-edged, fills on hover */
.cd-btn--outline {
  border-color: var(--cd-green-line);
  color: var(--cd-green);
}
.cd-btn--outline:hover {
  background: var(--cd-green-soft);
  border-color: var(--cd-green);
  color: var(--cd-green-hi);
  box-shadow: 0 0 12px var(--cd-green-glow);
}

/* ghost — muted, brightens on hover */
.cd-btn--ghost {
  border-color: var(--cd-rule);
  color: var(--cd-ink-2);
}
.cd-btn--ghost:hover {
  background: var(--cd-card-hov);
  border-color: var(--cd-rule-2);
  color: var(--cd-ink-hi);
}

/* destructive */
.cd-btn--danger {
  border-color: rgba(233, 122, 142, 0.4);
  color: var(--cd-red);
}
.cd-btn--danger:hover {
  background: var(--cd-red-soft);
  border-color: var(--cd-red);
  box-shadow: 0 0 12px var(--cd-red-glow);
}

.cd-btn--sm { padding: 5px 10px; font-size: 10px; }

/* === Chips / tags ======================================================= */

.cd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--cd-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--cd-rule);
  color: var(--cd-ink-2);
  border-radius: var(--cd-r-1);
}
.cd-chip--green { color: var(--cd-green); border-color: var(--cd-green-line); }
.cd-chip--cyan  { color: var(--cd-cyan);  border-color: var(--cd-cyan-line); }
.cd-chip--amber { color: var(--cd-amber); border-color: rgba(240, 191, 126, 0.35); }
.cd-chip--red   { color: var(--cd-red);   border-color: rgba(233, 122, 142, 0.4);
                  box-shadow: 0 0 8px rgba(233, 122, 142, 0.25); }
.cd-chip--magenta { color: var(--cd-magenta); border-color: rgba(231, 138, 196, 0.4); }

/* === Cards ============================================================== */

.cd-card {
  background: var(--cd-card);
  border: 1px solid var(--cd-rule);
  position: relative;
  transition: border-color var(--cd-base), background var(--cd-base);
}
.cd-card:hover { border-color: var(--cd-rule-2); }

/* === Inputs ============================================================= */

.cd-input {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--cd-mono);
  font-size: 12px;
  background: var(--cd-bg2);
  border: 1px solid var(--cd-rule);
  color: var(--cd-ink);
  border-radius: var(--cd-r-1);
  transition: border-color var(--cd-fast), box-shadow var(--cd-fast);
}
.cd-input::placeholder { color: var(--cd-ink-4); }
.cd-input:focus {
  outline: none;
  border-color: var(--cd-green-line);
  box-shadow: 0 0 0 1px var(--cd-green-line), 0 0 14px rgba(111, 227, 181, 0.18);
}

/* === Pulse dot — THE Cliff trademark loading state ====================
   Use .cd-loader for ANY in-flight state. One dot, one cadence, one color
   everywhere. Variants: --inline (in copy), --xs/sm/md/lg sizes, --row
   (3 staggered dots for "thinking"). Severity color overrides via --c. */

@keyframes cd-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.4; transform: scale(0.92); }
}

.cd-pulse,
.cd-loader {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c, var(--cd-green));
  box-shadow: 0 0 8px var(--c, var(--cd-green));
  animation: cd-pulse 1.6s ease-in-out infinite;
  vertical-align: middle;
}

.cd-loader--xs { width: 5px;  height: 5px;  box-shadow: 0 0 5px var(--c, var(--cd-green)); }
.cd-loader--sm { width: 6px;  height: 6px;  box-shadow: 0 0 6px var(--c, var(--cd-green)); }
.cd-loader--md { width: 8px;  height: 8px; }
.cd-loader--lg { width: 12px; height: 12px; box-shadow: 0 0 14px var(--c, var(--cd-green)); }

.cd-loader--inline { margin: 0 6px; }

/* Severity overrides — set --c on the parent or the loader itself */
.cd-loader--cyan    { --c: var(--cd-cyan);    }
.cd-loader--amber   { --c: var(--cd-amber);   }
.cd-loader--red     { --c: var(--cd-red);     }
.cd-loader--magenta { --c: var(--cd-magenta); }
.cd-loader--ink     { --c: var(--cd-ink-3); box-shadow: none; }

/* === Scrollbar =========================================================== */
.cd-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cd-scroll::-webkit-scrollbar-track { background: transparent; }
.cd-scroll::-webkit-scrollbar-thumb {
  background: var(--cd-rule);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.cd-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--cd-rule-2); background-clip: padding-box; }

/* === Row hover (lists) =================================================== */
.cd-row {
  transition: background var(--cd-fast), border-left-color var(--cd-fast);
  border-left: 2px solid transparent;
  cursor: pointer;
}
.cd-row:hover {
  background: var(--cd-card-hov);
  border-left-color: var(--cd-green-line);
}
.cd-row--focus {
  background: var(--cd-card-hi);
  border-left-color: var(--cd-green);
}

/* === Nav link =========================================================== */
.cd-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-family: var(--cd-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-ink-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--cd-fast);
  cursor: pointer;
}
.cd-nav:hover {
  color: var(--cd-ink-hi);
  background: rgba(111, 227, 181, 0.04);
}
.cd-nav--active {
  color: var(--cd-green);
  background: linear-gradient(90deg, rgba(111, 227, 181, 0.08), transparent);
  border-left-color: var(--cd-green);
  text-shadow: 0 0 8px var(--cd-green-glow);
}

/* === Section heading ==================================================== */
.cd-section-label {
  font-family: var(--cd-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cd-green);
  text-shadow: 0 0 8px var(--cd-green-glow);
}

/* === Hairline rule with label ============================================ */
.cd-hairline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cd-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cd-ink-3);
  padding: 8px 0;
}
.cd-hairline::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cd-rule);
}

/* === Material symbols default =========================================== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;
  vertical-align: middle;
}