/* JunaKey design tokens, matched to the junakey.com brand
   Geist + Geist Mono, Instrument Serif for display headings and the
   wordmark, ink neutrals and a single harbour-blue accent.

   Token hierarchy (light theme; dark theme overrides where needed):
     surfaces  bg / bg-alt / bg-sunken / bg-elev / overlay
     ink       fg / fg-muted / fg-subtle
     edges     border / border-strong
     accent    accent / accent-hover / accent-bg / on-accent
     semantic  success / warn / danger        (+ -bg, -on)
     states    focus-ring / shadow-sm/md/lg/xl
     imp       imp-bg / imp-bg-nested / imp-fg / imp-pill-bg / imp-pill-init-*

   All values are oklch so contrast/lightness are predictable across hues.
   .jh-paper is a separate surface that does NOT theme — it stays paper-white
   for PO previews, completion reports and other "print" surfaces. */

.jh-scope {
  /* === Type === */
  --jh-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --jh-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
  --jh-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* === Brand (fixed in both themes) === */
  --jh-brand-sky: #5FB3DE;
  --jh-brand-iris: #9C8CF0;
  --jh-brand-coral: #F08F7A;
  --jh-brand-gold: #F2C46B;

  /* === Radius === */
  --jh-radius-xs: 4px;
  --jh-radius-sm: 6px;
  --jh-radius-md: 10px;
  --jh-radius-lg: 14px;
  --jh-radius-xl: 20px;
  --jh-radius-pill: 999px;

  /* === Light theme (default) === */
  /* Surfaces */
  --jh-bg: #FCFCFB;
  --jh-bg-alt: #F6F7F7;
  --jh-bg-elev: #ffffff;
  --jh-bg-sunken: #F1F3F4;
  --jh-overlay: rgb(14 26 36 / 0.6);
  /* Ink: --ink, --body, --muted from the brand */
  --jh-fg: #0E1A24;
  --jh-fg-body: #3C4952;
  --jh-fg-muted: #5A6670;
  --jh-fg-subtle: #8D979E;
  /* Edges */
  --jh-border: #ECECEC;
  --jh-border-strong: #D6DADD;

  /* Accent: harbour blue (white text 5.6:1) */
  --jh-accent: #13709E;
  --jh-accent-hover: #0D4F72;
  --jh-accent-bg: #EAF4FA;
  --jh-on-accent: #ffffff;

  /* Semantic — paired triplets (color, bg, on) so callers don't reach
     for "#fff" when putting white text on a danger button. */
  --jh-success:    oklch(0.55 0.13 155);
  --jh-success-bg: oklch(0.96 0.03 155);
  --jh-on-success: #ffffff;
  --jh-warn:       oklch(0.6 0.15 65);   /* darker than before for legible badge text */
  --jh-warn-bg:    oklch(0.97 0.04 80);
  --jh-on-warn:    #ffffff;
  --jh-danger:     oklch(0.58 0.18 25);
  --jh-danger-bg:  oklch(0.97 0.04 25);
  --jh-on-danger:  #ffffff;
  --jh-info-bg:    #EEF6FB;

  /* States */
  --jh-focus-ring: color-mix(in oklch, var(--jh-accent) 22%, transparent);

  /* Shadows — single ramp, used across cards, popovers, dropdowns. */
  --jh-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
  --jh-shadow-md: 0 1px 3px oklch(0 0 0 / 0.06), 0 4px 12px oklch(0 0 0 / 0.05);
  --jh-shadow-lg: 0 2px 6px oklch(0 0 0 / 0.05), 0 12px 32px oklch(0 0 0 / 0.08);
  --jh-shadow-xl: 0 8px 24px oklch(0 0 0 / 0.10), 0 28px 64px oklch(0 0 0 / 0.14);

  /* Impersonation banner — reuses semantic warn family. Nested = darker
     tone of the same hue (no new color introduced). */

  /* Density-driven spacing */
  --jh-row-h: 44px;
  --jh-pad-x: 16px;
  --jh-pad-y: 14px;
  --jh-gap: 12px;
}

.jh-scope[data-theme="dark"] {
  /* Surfaces */
  --jh-bg: #0B141C;
  --jh-bg-alt: #111D27;
  --jh-bg-elev: #15222D;
  --jh-bg-sunken: #08111A;
  --jh-overlay: rgb(0 0 0 / 0.7);
  /* Ink */
  --jh-fg: #EEF2F5;
  --jh-fg-body: #D3DBE1;
  --jh-fg-muted: #9AA6AF;
  --jh-fg-subtle: #6C7983;
  /* Edges */
  --jh-border: #24323D;
  --jh-border-strong: #34444F;

  /* Accent: sky on dark (8:1 on the page), ink text on it */
  --jh-accent: #5FB3DE;
  --jh-accent-hover: #8CC9E8;
  --jh-accent-bg: #12344A;
  --jh-on-accent: #0E1A24;

  /* Semantic ink in dark mode — brighter to keep legibility against
     dark backgrounds and the lifted *-bg surfaces. */
  --jh-success: oklch(0.78 0.14 155);
  --jh-success-bg: oklch(0.32 0.06 155);
  --jh-warn: oklch(0.82 0.14 80);
  --jh-warn-bg: oklch(0.32 0.07 80);
  --jh-danger: oklch(0.74 0.16 25);
  --jh-danger-bg: oklch(0.32 0.07 25);
  --jh-info-bg: #132C3D;

  --jh-focus-ring: color-mix(in oklch, var(--jh-accent) 30%, transparent);

  /* Shadows in dark mode — slightly heavier alphas because dark surfaces
     swallow light shadows. */
  --jh-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --jh-shadow-md: 0 1px 3px oklch(0 0 0 / 0.5), 0 4px 12px oklch(0 0 0 / 0.4);
  --jh-shadow-lg: 0 2px 6px oklch(0 0 0 / 0.4), 0 12px 32px oklch(0 0 0 / 0.45);
  --jh-shadow-xl: 0 8px 24px oklch(0 0 0 / 0.5), 0 28px 64px oklch(0 0 0 / 0.55);

  /* Impersonation — same amber, slightly more luminous in dark mode */
}

.jh-scope[data-density="compact"] {
  --jh-row-h: 36px;
  --jh-pad-x: 12px;
  --jh-pad-y: 10px;
  --jh-gap: 8px;
}

.jh-scope[data-radius="sharp"] {
  --jh-radius-xs: 0px;
  --jh-radius-sm: 2px;
  --jh-radius-md: 3px;
  --jh-radius-lg: 4px;
  --jh-radius-xl: 6px;
}

.jh-scope[data-radius="soft"] {
  --jh-radius-xs: 6px;
  --jh-radius-sm: 10px;
  --jh-radius-md: 14px;
  --jh-radius-lg: 18px;
  --jh-radius-xl: 24px;
}

/* === Base scope styles === */
.jh-scope {
  font-family: var(--jh-font-sans);
  color: var(--jh-fg);
  background: var(--jh-bg);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

.jh-scope * { box-sizing: border-box; }
.jh-scope button { font-family: inherit; }

/* === Typography === */
.jh-h1 { font-family: var(--jh-font-display); font-size: 34px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; color: var(--jh-fg); }
.jh-h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--jh-fg); }
.jh-h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--jh-fg); }
.jh-eyebrow { font-family: var(--jh-font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jh-fg-muted); }
.jh-body { font-size: 14px; line-height: 1.5; color: var(--jh-fg-body); }
.jh-small { font-size: 12.5px; line-height: 1.45; color: var(--jh-fg-muted); }
.jh-mono { font-family: var(--jh-font-mono); }

/* === Brand mark ===
   The gradient tile with the white key, and the serif wordmark beside it. */
.jh-logo { display: block; flex: none; border-radius: 25%; }
.jh-wordmark { font-family: var(--jh-font-display); font-size: 23px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--jh-fg); }

/* === Buttons ===
   All buttons center their content. The button is inline-flex by default —
   centering is a no-op until a caller sizes it (flex: 1, width: 100%,
   .jh-btn--block, etc.), at which point the label and any icon sit in the
   middle. This eliminates the per-call `justifyContent: 'center'` patch. */
.jh-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: var(--jh-radius-sm);
  border: 1px solid var(--jh-border);
  background: var(--jh-bg-elev);
  color: var(--jh-fg);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 80ms, border-color 80ms, box-shadow 80ms;
  white-space: nowrap;
}
.jh-btn:hover { background: var(--jh-bg-alt); border-color: var(--jh-border-strong); }
.jh-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jh-focus-ring); border-color: var(--jh-accent); }
.jh-btn--primary { background: var(--jh-accent); color: var(--jh-on-accent); border-color: var(--jh-accent); }
.jh-btn--primary:hover { background: var(--jh-accent-hover); border-color: var(--jh-accent-hover); }
.jh-btn--ghost { background: transparent; border-color: transparent; color: var(--jh-fg-muted); }
.jh-btn--ghost:hover { background: var(--jh-bg-alt); color: var(--jh-fg); }
.jh-btn--danger { color: var(--jh-danger); border-color: var(--jh-border); }
.jh-btn--danger:hover { background: var(--jh-danger-bg); border-color: color-mix(in oklch, var(--jh-danger) 35%, var(--jh-border)); }
.jh-btn--danger.jh-btn--solid { background: var(--jh-danger); color: var(--jh-on-danger); border-color: var(--jh-danger); }
.jh-btn--danger.jh-btn--solid:hover { background: color-mix(in oklch, var(--jh-danger) 88%, black); border-color: color-mix(in oklch, var(--jh-danger) 88%, black); }
.jh-btn--lg { height: 40px; padding: 0 18px; font-size: 14px; }
.jh-btn--sm { height: 26px; padding: 0 10px; font-size: 12px; }
.jh-btn--block { width: 100%; }
.jh-btn--icon { width: 32px; padding: 0; }
.jh-btn--icon.jh-btn--lg { width: 40px; }
.jh-btn--icon.jh-btn--sm { width: 26px; }
.jh-btn[disabled], .jh-btn:disabled { opacity: 0.45; pointer-events: none; }
/* Touch target: every button keeps its drawn size but takes taps across at
   least 44 by 44px, centred on it. Leave 4px or more between stacked small
   buttons so neighbouring hit areas don't swallow each other. */
.jh-btn { position: relative; }
.jh-btn::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* === Card === */
.jh-card {
  background: var(--jh-bg-elev);
  border: 1px solid var(--jh-border);
  border-radius: var(--jh-radius-md);
}

/* === Input === */
.jh-input {
  height: 34px; padding: 0 12px;
  border: 1px solid var(--jh-border);
  background: var(--jh-bg-elev);
  border-radius: var(--jh-radius-sm);
  font-family: inherit; font-size: 13px;
  color: var(--jh-fg);
  width: 100%;
  outline: none;
}
.jh-input:focus { border-color: var(--jh-accent); box-shadow: 0 0 0 3px var(--jh-focus-ring); }
.jh-textarea { padding: 10px 12px; min-height: 80px; line-height: 1.5; height: auto; resize: none; }
.jh-label { display: block; font-size: 12px; font-weight: 500; color: var(--jh-fg-muted); margin-bottom: 6px; }

/* === Badge === */
.jh-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  border-radius: var(--jh-radius-pill);
  font-size: 11px; font-weight: 500;
  background: var(--jh-bg-alt);
  color: var(--jh-fg-muted);
  border: 1px solid var(--jh-border);
  font-family: var(--jh-font-mono);
  letter-spacing: 0.01em;
  /* Badges are atomic — never wrap to two lines. If a parent is too narrow,
     the badge truncates with ellipsis rather than breaking. */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jh-badge--accent { background: var(--jh-accent-bg); color: var(--jh-accent); border-color: transparent; }
.jh-badge--success { background: var(--jh-success-bg); color: var(--jh-success); border-color: transparent; }
.jh-badge--warn { background: var(--jh-warn-bg); color: var(--jh-warn); border-color: transparent; }
.jh-badge--danger { background: var(--jh-danger-bg); color: var(--jh-danger); border-color: transparent; }
.jh-badge--dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

/* === Avatar === */
.jh-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--jh-bg-alt);
  color: var(--jh-fg-muted);
  font-size: 11px; font-weight: 600;
  font-family: var(--jh-font-mono);
  border: 1px solid var(--jh-border);
}
.jh-avatar--lg { width: 40px; height: 40px; font-size: 13px; }
.jh-avatar--sm { width: 22px; height: 22px; font-size: 9.5px; }

/* === Divider === */
.jh-hr { height: 1px; background: var(--jh-border); border: 0; margin: 0; }
.jh-vr { width: 1px; background: var(--jh-border); align-self: stretch; }

/* === Table === */
.jh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jh-table th {
  text-align: left; padding: 10px 14px;
  font-weight: 500; font-size: 11.5px;
  color: var(--jh-fg-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--jh-border);
  font-family: var(--jh-font-mono);
}
.jh-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--jh-border);
  color: var(--jh-fg);
  vertical-align: middle;
}
.jh-table tr:last-child td { border-bottom: none; }
.jh-table tr:hover td { background: var(--jh-bg-alt); }

/* === Sidebar nav === */
.jh-nav-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 10px;
  border-radius: var(--jh-radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--jh-fg-muted);
  cursor: pointer; user-select: none;
}
.jh-nav-item:hover { background: var(--jh-bg-alt); color: var(--jh-fg); }
.jh-nav-item--active { background: var(--jh-bg-alt); color: var(--jh-fg); }
.jh-nav-item--active .jh-nav-dot { background: var(--jh-accent); }
.jh-nav-section { padding: 14px 10px 6px; }

/* === Util === */
.jh-row { display: flex; align-items: center; gap: 12px; }
.jh-col { display: flex; flex-direction: column; }
.jh-grow { flex: 1; min-width: 0; }
.jh-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jh-muted { color: var(--jh-fg-muted); }
.jh-subtle { color: var(--jh-fg-subtle); }
.jh-num { font-variant-numeric: tabular-nums; }

/* Striped SVG placeholder */
.jh-photo {
  background: var(--jh-bg-sunken);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 8px,
    color-mix(in oklch, var(--jh-border) 70%, transparent) 8px,
    color-mix(in oklch, var(--jh-border) 70%, transparent) 9px
  );
  border: 1px solid var(--jh-border);
  border-radius: var(--jh-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--jh-font-mono);
  font-size: 10px;
  color: var(--jh-fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

/* === Paper surface ===
   For PO previews, Job Completion Reports, and other surfaces that should
   look like printed paper regardless of theme. Pins ALL surface + ink
   tokens within its subtree so themed children (cards, panels, dividers)
   also read as printed paper. */
.jh-paper {
  --jh-bg-elev: #ffffff;
  --jh-bg-alt: oklch(0.965 0.003 250);
  --jh-bg-sunken: oklch(0.95 0.003 250);
  --jh-border: oklch(0.88 0.005 250);
  --jh-border-strong: oklch(0.80 0.008 250);
  --jh-fg: oklch(0.20 0.008 250);
  --jh-fg-muted: oklch(0.48 0.008 250);
  --jh-fg-subtle: oklch(0.62 0.008 250);
  background: #ffffff;
  color: oklch(0.20 0.008 250);
}
.jh-paper-muted  { color: oklch(0.48 0.008 250); }
.jh-paper-subtle { color: oklch(0.62 0.008 250); }
.jh-paper-strong { color: oklch(0.12 0.008 250); }
.jh-paper-hr     { border: 0; border-top: 1px solid oklch(0.88 0.005 250); }

/* === Impersonation banner ===
   Uses the standard warn combo (warn-bg behind warn text) — same recipe as
   the warn badge. Nested = slightly darker warn-bg, never a different hue. */
.jh-imp-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--jh-warn-bg);
  color: var(--jh-warn);
  border-bottom: 1px solid color-mix(in oklch, var(--jh-warn) 25%, transparent);
  font-size: 12.5px;
  font-weight: 500;
}
.jh-imp-banner + .jh-imp-banner {
  background: color-mix(in oklch, var(--jh-warn-bg) 80%, var(--jh-warn));
}
.jh-imp-banner .jh-imp-you {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 2px 8px 2px 2px;
  background: color-mix(in oklch, var(--jh-warn) 12%, transparent);
  border-radius: var(--jh-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
}
.jh-imp-banner .jh-imp-you-init {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--jh-warn);
  color: var(--jh-on-warn);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
  font-family: var(--jh-font-mono);
}
.jh-imp-banner .jh-imp-sep  { opacity: 0.5; }
.jh-imp-banner .jh-imp-as   { opacity: 1; }
.jh-imp-banner .jh-imp-tail { opacity: 0.7; font-size: 11px; }
.jh-imp-banner .jh-imp-x {
  margin-left: auto;
  height: 24px; padding: 0 10px;
  border-radius: var(--jh-radius-xs);
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--jh-warn) 30%, transparent);
  color: var(--jh-warn);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}
.jh-imp-banner .jh-imp-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: max(100%, 44px); height: 44px;
  transform: translate(-50%, -50%);
}
.jh-imp-banner .jh-imp-x:hover {
  background: color-mix(in oklch, var(--jh-warn) 14%, transparent);
}

/* Common box utilities */
.jh-p-md { padding: 16px; }
.jh-p-lg { padding: 24px; }
.jh-p-xl { padding: 32px; }
.jh-gap-xs { gap: 6px; }
.jh-gap-sm { gap: 10px; }
.jh-gap-md { gap: 16px; }
.jh-gap-lg { gap: 24px; }