/* styles.css — Prompt Tracker
   "Extreme yet Elegant" visual direction (2026-08-15, third iteration --
   the first two, "Warm & Personal" and "Refined Neutral," were both
   adaptive light/dark and read as too restrained). Mose asked for
   something bolder. Research grounding (see the workstream LL doc for
   full citations): Linear, Raycast, and Arc all converge on the same
   formula for "premium tool" aesthetics -- a deliberately COMMITTED
   near-black canvas (not a light/dark toggle: one confident look is
   what makes it read as considered rather than generic), layered
   darkness for depth (panels sit on a visibly lighter dark surface than
   the page floor, never flat black-on-black), exactly one vivid
   chromatic accent used sparingly rather than color scattered
   everywhere (Linear's own lavender-blue is the direct model for the
   accent hue below), and compressed, negative-tracked display
   typography for headers. Mose explicitly confirmed dropping light-mode
   support entirely for this -- no @media (prefers-color-scheme) block,
   by design, not an oversight.

   Colors are defined in OKLCH (oklch(L% C H)) -- stepping the L
   (lightness) channel by a fixed amount produces a consistent perceived
   brightness step regardless of hue, which is what makes deriving
   hover/active states from one accent hue a formula rather than
   hand-picked values per state. Browser support (Chrome 111+, Safari
   15.4+, Firefox 113+) covers ~93-95% of users as of 2026 -- no hex
   fallback, matching this app's own personal-use-only scope (Deployment
   Protection already restricts access to Mose's own account). */

:root {
  /* Deliberately NOT "color-scheme: light dark" -- this app now commits
     to exactly one appearance regardless of the visitor's OS setting. */
  color-scheme: dark;

  /* Layered darkness, not flat black: --bg is the page floor, --surface
     is one lightness step up (panels), --surface-hover another small
     step up still (row hover, focus states) -- each layer is a real,
     visible depth cue on its own, before any shadow is even added. All
     three share the same faint violet cast (H=264) as the accent, so
     the whole canvas reads as one cohesive hue family rather than a
     neutral gray with an unrelated colored accent dropped on top. */
  --bg: oklch(9% 0.012 264);
  --surface: oklch(14% 0.015 264);
  --surface-hover: oklch(19% 0.017 264);
  --fg: oklch(94% 0.006 264);
  --muted: oklch(62% 0.012 264);
  --border: oklch(24% 0.014 264);

  /* One vivid lavender-violet accent (directly modeled on Linear's own
     "#5e6ad2" brand accent, reproduced here in OKLCH), used sparingly --
     the search focus ring, the primary Copy button, the copy-success
     pulse, and nothing else. Hover/active go BRIGHTER, not darker --
     correct for a dark canvas, where "pressed" should intensify/glow
     rather than recede toward the near-black floor (the opposite of a
     light-theme button, where pressed conventionally darkens). */
  --accent: oklch(62% 0.19 275);
  --accent-hover: oklch(68% 0.18 275);
  --accent-active: oklch(74% 0.17 275);
  /* Dark text ON the accent fill -- the accent itself is bright enough
     against the near-black canvas that white-on-accent would be a much
     smaller contrast jump than dark-violet-on-accent. */
  --accent-fg: oklch(12% 0.02 275);
  --accent-ring: oklch(62% 0.19 275 / 0.35);
  /* Soft outer glow for the primary button -- the "subtle glow" cue
     that reads as premium/lit-up rather than a flat filled rectangle,
     used only on the one primary accent button, not everywhere. */
  --accent-glow: 0 0 0 1px oklch(62% 0.19 275 / 0.4), 0 4px 20px oklch(62% 0.19 275 / 0.3);

  --warn-bg: oklch(24% 0.05 90);
  --warn-fg: oklch(85% 0.06 85);

  /* Panel shadow stays subtle -- on a near-black canvas there's very
     little ambient light for a shadow to plausibly block, so the real
     depth cue is the --surface/--bg lightness step above; this shadow
     is a light reinforcement, not the primary signal. */
  --panel-shadow: 0 1px 3px oklch(0% 0 0 / 0.4), 0 4px 16px oklch(0% 0 0 / 0.3);

  --success-pulse: oklch(78% 0.16 275);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

header {
  padding: 1.75rem 1.5rem 1.1rem;
  max-width: 720px;
  margin: 0 auto;
}

/* Compressed, negative-tracked display header -- the single most
   distinctive typographic move in the Linear/Raycast pattern: a bigger,
   heavier, tighter headline reads as considered rather than a default
   browser heading, without needing a second display typeface. */
header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}

#search {
  width: 100%;
  padding: 0.75rem 1.05rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

#active-panel,
#create-panel {
  margin: 1.25rem 0;
  padding: 1.25rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
}

#active-panel pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 0.85rem;
  max-height: 40vh;
  overflow-y: auto;
}

#active-panel code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}

button {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
  cursor: pointer;
  /* The primary-button glow -- see --accent-glow's own comment above. */
  box-shadow: var(--accent-glow);
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.08s ease;
}

button:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

button:active:not(:disabled) {
  background: var(--accent-active);
  border-color: var(--accent-active);
  transform: scale(0.97);
}

button:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
  transform: none;
}

#create-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--accent);
  border-style: dashed;
  /* No glow on the secondary create-action -- reserved for the one
     primary button, per "used sparingly." */
  box-shadow: none;
}

#create-btn:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

/* Copy-success feedback: a brief brighter-violet glow pulse on the
   button that was just clicked, color-only (no icon) -- both the fill
   and the glow shadow intensify together and ease back to resting,
   giving positive feedback that matches the button's own always-on
   glow rather than fighting it. Applied/removed via a small JS hook
   (index.html doCopy()) only on a genuinely successful copy; a tracking
   failure or clipboard failure never triggers it. Self-cleaning via the
   animationend listener -- doesn't depend on or interact with the
   unrelated 1500ms status-text timeout already in doCopy(). */
@keyframes copy-success-pulse {
  0% {
    background-color: var(--success-pulse);
    border-color: var(--success-pulse);
    box-shadow: 0 0 0 1px oklch(78% 0.16 275 / 0.5), 0 4px 28px oklch(78% 0.16 275 / 0.45);
  }
  100% {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: var(--accent-glow);
  }
}

button.pulse-success {
  animation: copy-success-pulse 0.6s ease-out;
}

.copy-status {
  margin-left: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.warning {
  background: var(--warn-bg);
  color: var(--warn-fg);
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

#library {
  margin-top: 1.75rem;
}

#library-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#library-list li {
  border-bottom: 1px solid var(--border);
}

#library-list li:last-child {
  border-bottom: none;
}

/* Real <button>, styled to look like a plain row -- a clickable library
   row is the fix for a real UX gap (the library view only ever showed
   a 60-char preview with no way to select/copy a prompt directly).
   Button-reset properties (background/border/font/width/text-align)
   keep it row-like; hover uses the same layered --surface-hover step
   as everywhere else on this page, not a one-off color. */
#library-list .library-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.7rem 0.6rem;
  background: none;
  border: none;
  font: inherit;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: none;
  transition: background-color 0.12s ease;
}

#library-list .library-row:hover,
#library-list .library-row:focus-visible {
  background: var(--surface-hover);
}

#library-list .library-row:active {
  transform: none; /* row press-feedback stays as a background change, not a scale -- scaling a full-width row looks like a layout jump, unlike a compact button */
}

#library-list .preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}

#library-list .count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  /* A touch of positive tracking on secondary/numeric text -- the
     "airy" counterweight to the header's tight negative tracking,
     borrowed directly from Raycast's own typographic pattern. */
  letter-spacing: 0.02em;
  flex-shrink: 0;
}