/* ============================================================================
   JKMG — Design Direction (Run A, v2)
   ----------------------------------------------------------------------------
   A visual layer over the working app. Establishes the token system (palette,
   type, rhythm, components) and renders the direction on a few real screens.
   Loaded AFTER the app's inline <style>, so equal-specificity rules here win.

   PALETTE: a warm-charcoal DARK scheme with a champagne accent and a coral
   live-dot — the product's real identity. (An earlier v1 wrongly used a cream
   marketing-site override and is superseded.)

   DIRECTION: keep the portal's dark identity, execute it as a MORE MODERN,
   cleaner premium deal tool — crisp components, strong hierarchy, smooth nav.
   Self-hosted fonts only (no external style/font origin); CSP stays tightened.
   ============================================================================ */

/* ----- self-hosted type (served same-origin from /fonts) ------------------ */
@font-face{font-family:'Schibsted Grotesk';src:url('/fonts/schibsted-var.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ============================================================================
   TOKENS — JKMG portal-dark is the default; override --jk-* per tenant.
   ============================================================================ */
:root{
  /* surfaces — warm charcoal, from the portal (#181716 ground) */
  --jk-bg:#181716;             /* page ground */
  --jk-surface:#211E1B;        /* cards, sidebar, panels */
  --jk-surface-2:#2A2723;      /* raised: inputs, row hover */
  --jk-surface-3:#34302B;      /* elevated: menus, active rows */
  /* ink */
  --jk-ink:#E5E2DC;            /* primary text */
  --jk-ink-2:#B4AEA4;          /* secondary text */
  --jk-muted:#908A82;          /* tertiary / labels */
  /* lines */
  --jk-border:rgba(213,207,196,.12);
  --jk-border-strong:rgba(213,207,196,.22);
  /* accent — champagne/greige (portal --gold #C5C0B8): the primary action */
  --jk-accent:#C5C0B8;
  --jk-accent-strong:#DAD5CC;
  --jk-accent-dim:rgba(197,192,184,.12);
  /* live — coral (portal nav-dot #E0524D): rare, "current / attention" only */
  --jk-live:#E0524D;
  --jk-live-dim:rgba(224,82,77,.16);
  /* semantic */
  --jk-success:#7FB89A; --jk-danger:#C97A7A; --jk-warn:#D6A461; --jk-info:#9FB2C4;

  /* type — modern editorial grotesque (display) + clean grotesque (UI) + mono */
  --jk-display:'Schibsted Grotesk', system-ui, sans-serif;
  --jk-body:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --jk-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* modular scale (base 13.5px, ~1.2) */
  --fs-micro:10.5px; --fs-sm:11.5px; --fs-cap:12.5px; --fs-base:13.5px;
  --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:34px;

  /* spacing rhythm (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* form — modern radii (crisp, not pillowy) + dark elevation (no glow) */
  --jk-r:8px; --jk-r-sm:6px; --jk-r-xs:4px; --jk-r-pill:999px;
  --jk-elev-1:0 1px 2px rgba(0,0,0,.30), 0 8px 24px -14px rgba(0,0,0,.55);
  --jk-elev-2:0 2px 4px rgba(0,0,0,.35), 0 24px 60px -24px rgba(0,0,0,.70);
  --jk-focus:0 0 0 3px rgba(197,192,184,.28);
}

/* ----- remap the app's primitives so the whole shell adopts the refinements.
   These are already the portal's hues; we mainly refine lines/hover. ------ */
:root{
  --gold:#C5C0B8; --gold-light:#DAD5CC; --gold-dim:rgba(197,192,184,.12);
  --dark:#181716; --dark2:#211E1B; --dark3:#2A2723;
  --border:rgba(213,207,196,.12); --text:#E5E2DC; --text-muted:#908A82;
  --sell:#7FB89A; --buy:#9FB2C4; --danger:#C97A7A;
}

/* ============================================================================
   GLOBAL — type + ground
   ============================================================================ */
body{
  font-family:var(--jk-body);
  background:var(--jk-bg); color:var(--jk-ink);
  font-size:var(--fs-base); line-height:1.5; letter-spacing:-.003em;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body::before{opacity:.18}                 /* near-kill the noise wash */

/* display face — modern, tight; used only at large sizes and key figures */
.page-title,.stat-value,.modal-title,.table-title,.login-logo,
.sidebar-logo .logo-text,.imp-title{
  font-family:var(--jk-display); font-weight:600; letter-spacing:-.015em;
  text-transform:none; color:var(--jk-ink);
}
/* mono data/utility face + tiny labels */
.jk-val,.mrd-index,.jk-stage,th,.stat-label,.nav-section-label,
.modal-step-label,.imp-eyebrow{ font-family:var(--jk-mono); }
th,.stat-label,.nav-section-label,.modal-step-label,.imp-eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:var(--fs-micro);
  color:var(--jk-muted); font-weight:500;
}

/* ============================================================================
   SHELL — sidebar + nav, modernized
   ============================================================================ */
.sidebar{background:var(--jk-surface);border-right:1px solid var(--jk-border)}
.sidebar-logo{border-bottom:1px solid var(--jk-border);padding:26px 22px 20px}
.sidebar-logo .logo-text{font-size:23px;letter-spacing:-.01em;color:var(--jk-ink)}
.sidebar-logo .logo-text::after{content:'.';color:var(--jk-live)}
.sidebar-logo .logo-sub{color:var(--jk-muted);letter-spacing:.16em;font-size:9px}
.sidebar-nav{padding:14px 12px}
.nav-section-label{padding:16px 12px 6px}
.nav-item{
  gap:11px;padding:9px 12px;margin:1px 0;border-radius:var(--jk-r-sm);
  border-left:0;color:var(--jk-ink-2);font-size:var(--fs-base);
  transition:background .13s,color .13s;
}
.nav-item:hover{color:var(--jk-ink);background:var(--jk-surface-2)}
.nav-item.active{
  color:var(--jk-ink);background:var(--jk-surface-3);
  box-shadow:inset 2px 0 0 var(--jk-accent);
}
.nav-item.active .nav-icon{color:var(--jk-accent)}
.nav-icon{color:var(--jk-muted);width:16px;font-size:13px}
.nav-badge{background:var(--jk-live);color:#fff;border-radius:var(--jk-r-pill);font-weight:600}
.nav-dot{background:var(--jk-live);box-shadow:0 0 0 3px var(--jk-live-dim)}
.user-role-pill{border-radius:var(--jk-r-xs);border-color:var(--jk-border-strong);color:var(--jk-ink-2);background:transparent}

.main{padding:var(--sp-8) var(--sp-8) 64px}
.page-header{margin-bottom:var(--sp-7);align-items:flex-start}
.page-title{font-size:var(--fs-3xl);line-height:1.05}
.page-subtitle{color:var(--jk-muted);font-size:var(--fs-cap);margin-top:5px}

/* cards — crisp, subtle elevation; drop the portal gradient hairlines */
.stat-card,.table-card,.admin-card,.make-card,.modal,.login-card{
  background:var(--jk-surface);border:1px solid var(--jk-border);
  border-radius:var(--jk-r);box-shadow:var(--jk-elev-1)
}
.stat-card::after,.modal::before,.login-card::before,.referral-banner::before,
.referral-banner::after,.stat-card::before{display:none!important;background:none!important}
.stat-card{padding:var(--sp-5) var(--sp-6)}
.stat-label{margin-bottom:10px}
.stat-value{font-size:var(--fs-2xl);color:var(--jk-ink)}
.stat-sub{color:var(--jk-muted);font-size:var(--fs-sm)}

/* buttons — champagne primary (dark text), ghost secondary; modern, not caps */
.action-btn,.csv-btn{
  font-family:var(--jk-body);font-size:var(--fs-cap);font-weight:500;
  text-transform:none;letter-spacing:0;padding:8px 14px;border-radius:var(--jk-r-sm);
  border:1px solid var(--jk-border-strong);background:transparent;color:var(--jk-ink-2);
  transition:background .13s,color .13s,border-color .13s;
}
.action-btn:hover,.csv-btn:hover{background:var(--jk-surface-2);color:var(--jk-ink);border-color:var(--jk-border-strong)}
.action-btn.primary{
  background:var(--jk-accent);color:#1b1a17;border-color:var(--jk-accent);font-weight:600;
}
.action-btn.primary:hover{background:var(--jk-accent-strong);color:#1b1a17}
.action-btn:focus-visible,.csv-btn:focus-visible,.filter-tab:focus-visible{outline:none;box-shadow:var(--jk-focus)}

/* filter tabs — segmented, modern */
.filter-tabs{background:var(--jk-surface-2);border:1px solid var(--jk-border);border-radius:var(--jk-r-sm);padding:2px;gap:2px}
.filter-tab{
  font-family:var(--jk-body);text-transform:none;letter-spacing:0;font-size:var(--fs-sm);
  color:var(--jk-muted);border:0;border-radius:var(--jk-r-xs);padding:6px 12px;
}
.filter-tab:hover{color:var(--jk-ink)}
.filter-tab.active{color:var(--jk-ink);background:var(--jk-surface-3);border:0}

/* ============================================================================
   TABLES — dense modern register
   ============================================================================ */
.table-header{border-bottom:1px solid var(--jk-border);padding:var(--sp-5) var(--sp-6)}
.table-title{font-size:var(--fs-lg)}
th{padding:11px var(--sp-6);border-bottom:1px solid var(--jk-border)}
td{padding:14px var(--sp-6);border-bottom:1px solid var(--jk-border);color:var(--jk-ink);font-size:var(--fs-base)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s}
tbody tr:hover td{background:var(--jk-surface-2)}
#page-deal-status td:first-child{font-weight:500}
.jk-val{font-family:var(--jk-mono);font-size:var(--fs-cap);color:var(--jk-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#page-deal-status .action-btn.view-deal{padding:5px 12px}

/* stage tag (Phase column) — square node + mono label */
.jk-stage{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--jk-ink-2);white-space:nowrap}
.jk-stage-dot{width:6px;height:6px;border-radius:1px;background:var(--jk-accent);flex-shrink:0}
.jk-stage.is-terminal{color:var(--jk-success)}
.jk-stage.is-terminal .jk-stage-dot{background:var(--jk-success)}

/* ============================================================================
   THE SIGNATURE — "The Meridian" (dark palette)
   N equal segments at fixed width → the current node aligns down the column
   into a portfolio readout. Champagne = travelled; one coral node = "here".
   ============================================================================ */
.mrd{display:flex;align-items:center;gap:var(--sp-3)}
.mrd-rail{display:grid;grid-template-columns:repeat(var(--n,9),1fr);align-items:center;width:152px;height:16px}
.mrd-seg{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.mrd-seg::before{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1.5px;transform:translateY(-50%);background:var(--jk-border-strong)}
.mrd-seg.is-done::before{background:var(--jk-accent)}
.mrd-seg.is-now::before{background:linear-gradient(90deg,var(--jk-accent) 50%,var(--jk-border-strong) 50%)}
.mrd-node{position:relative;z-index:1;width:5px;height:5px;border-radius:1px;background:var(--jk-muted)}
.mrd-seg.is-done .mrd-node{background:var(--jk-accent)}
.mrd-seg.is-now .mrd-node{width:9px;height:9px;background:var(--jk-live);box-shadow:0 0 0 2px var(--jk-surface),0 0 0 3px var(--jk-live)}
.mrd-index{font-family:var(--jk-mono);font-size:var(--fs-sm);letter-spacing:.02em;color:var(--jk-muted);font-variant-numeric:tabular-nums}
.mrd-index b{color:var(--jk-ink);font-weight:600}
tbody tr:hover .mrd-seg.is-todo .mrd-node{background:var(--jk-ink-2)}

/* ============================================================================
   FORMS + MODALS — modern dark
   ============================================================================ */
.modal{border-radius:var(--jk-r);box-shadow:var(--jk-elev-2);padding:28px}
.modal-title{font-size:var(--fs-xl)}
.modal-step-label{margin:18px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--jk-border)}
.modal-close{color:var(--jk-muted);border-radius:var(--jk-r-xs)}
.modal-close:hover{color:var(--jk-ink);background:var(--jk-surface-2)}
.form-field label{color:var(--jk-muted);text-transform:none;letter-spacing:0;font-size:var(--fs-sm);font-family:var(--jk-body);margin-bottom:6px}
.form-field input,.form-field select,.auth-field input{
  background:var(--jk-surface-2);border:1px solid var(--jk-border-strong);color:var(--jk-ink);
  font-family:var(--jk-body);font-size:var(--fs-base);border-radius:var(--jk-r-sm);padding:10px 12px;
  transition:border-color .13s,box-shadow .13s;
}
.form-field input:focus,.form-field select:focus,.auth-field input:focus{border-color:var(--jk-accent);box-shadow:var(--jk-focus);outline:none}
.form-field input::placeholder{color:var(--jk-muted);opacity:.7}
.detail-row{border-bottom:1px solid var(--jk-border)}
.dlabel{color:var(--jk-muted);text-transform:none;letter-spacing:0;font-size:var(--fs-cap)}
.dval{color:var(--jk-ink)}
.login-logo{font-size:40px}.login-btn{border-radius:var(--jk-r-sm);text-transform:none;letter-spacing:0;font-family:var(--jk-body);font-weight:600}

/* ============================================================================
   IMPORT / DATA — admin bulk-import concept mock (guided flow)
   ============================================================================ */
.imp-wrap{max-width:1040px}
.imp-eyebrow{display:block;margin-bottom:6px}
.imp-title{font-size:var(--fs-3xl);line-height:1.05;margin-bottom:5px}
.imp-sub{color:var(--jk-muted);font-size:var(--fs-cap);margin-bottom:var(--sp-6)}
/* stepper */
.imp-steps{display:flex;gap:0;margin-bottom:var(--sp-6);border:1px solid var(--jk-border);border-radius:var(--jk-r);overflow:hidden;background:var(--jk-surface)}
.imp-step{flex:1;display:flex;align-items:center;gap:10px;padding:14px 18px;border-right:1px solid var(--jk-border);color:var(--jk-muted)}
.imp-step:last-child{border-right:0}
.imp-step .n{width:22px;height:22px;border-radius:var(--jk-r-pill);border:1px solid var(--jk-border-strong);display:flex;align-items:center;justify-content:center;font-family:var(--jk-mono);font-size:11px;flex-shrink:0}
.imp-step .t{font-size:var(--fs-cap);font-weight:500}
.imp-step.done{color:var(--jk-ink-2)}
.imp-step.done .n{background:var(--jk-accent);border-color:var(--jk-accent);color:#1b1a17}
.imp-step.active{color:var(--jk-ink);background:var(--jk-surface-3)}
.imp-step.active .n{border-color:var(--jk-accent);color:var(--jk-accent)}
/* two-column body */
.imp-grid{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-5);align-items:start}
.imp-card{background:var(--jk-surface);border:1px solid var(--jk-border);border-radius:var(--jk-r);box-shadow:var(--jk-elev-1)}
.imp-card-h{padding:14px 18px;border-bottom:1px solid var(--jk-border);display:flex;align-items:center;justify-content:space-between}
.imp-card-h h3{font-family:var(--jk-display);font-size:var(--fs-md);font-weight:600;color:var(--jk-ink)}
.imp-card-b{padding:18px}
/* file chip */
.imp-file{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--jk-surface-2);border:1px solid var(--jk-border);border-radius:var(--jk-r-sm)}
.imp-file .ic{width:34px;height:34px;border-radius:var(--jk-r-xs);background:var(--jk-accent-dim);color:var(--jk-accent);display:flex;align-items:center;justify-content:center;font-family:var(--jk-mono);font-size:11px;font-weight:600;flex-shrink:0}
.imp-file .fn{font-weight:500;font-size:var(--fs-base)}
.imp-file .fm{font-family:var(--jk-mono);font-size:var(--fs-sm);color:var(--jk-muted)}
/* mapping rows */
.imp-map-row{display:grid;grid-template-columns:1fr 20px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--jk-border)}
.imp-map-row:last-child{border-bottom:0}
.imp-src{font-family:var(--jk-mono);font-size:var(--fs-cap);color:var(--jk-ink)}
.imp-arrow{color:var(--jk-muted);text-align:center}
.imp-tgt{background:var(--jk-surface-2);border:1px solid var(--jk-border-strong);border-radius:var(--jk-r-xs);padding:7px 10px;font-size:var(--fs-cap);color:var(--jk-ink);display:flex;align-items:center;justify-content:space-between;gap:8px}
.imp-tgt .chev{color:var(--jk-muted)}
.imp-auto{font-family:var(--jk-mono);font-size:var(--fs-sm);color:var(--jk-success)}
.imp-auto.warn{color:var(--jk-warn)}
/* summary sidebar */
.imp-sum .imp-card-b{display:flex;flex-direction:column;gap:14px}
.imp-metric{display:flex;align-items:baseline;justify-content:space-between}
.imp-metric .k{color:var(--jk-muted);font-size:var(--fs-cap)}
.imp-metric .v{font-family:var(--jk-mono);font-size:var(--fs-lg);font-weight:600;font-variant-numeric:tabular-nums;color:var(--jk-ink)}
.imp-metric .v.ok{color:var(--jk-success)} .imp-metric .v.err{color:var(--jk-live)} .imp-metric .v.warn{color:var(--jk-warn)}
.imp-bar{height:6px;border-radius:var(--jk-r-pill);background:var(--jk-surface-3);overflow:hidden;display:flex}
.imp-bar i{display:block;height:100%}
.imp-bar .ok{background:var(--jk-success)} .imp-bar .er{background:var(--jk-live)}
.imp-commit{width:100%;justify-content:center;text-align:center;padding:11px}
/* validation report */
.imp-report{width:100%;border-collapse:separate;border-spacing:0}
.imp-report th{padding:10px 14px}
.imp-report td{padding:11px 14px;font-size:var(--fs-cap);border-bottom:1px solid var(--jk-border);vertical-align:middle}
.imp-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--jk-mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:var(--jk-r-xs);border:1px solid transparent}
.imp-badge.ok{color:var(--jk-success);background:rgba(127,184,154,.12);border-color:rgba(127,184,154,.28)}
.imp-badge.err{color:var(--jk-live);background:var(--jk-live-dim);border-color:rgba(224,82,77,.32)}
.imp-badge.warn{color:var(--jk-warn);background:rgba(214,164,97,.12);border-color:rgba(214,164,97,.3)}
.imp-rownum{font-family:var(--jk-mono);color:var(--jk-muted);font-size:var(--fs-sm)}
.imp-msg{color:var(--jk-ink-2)}
.imp-msg code{font-family:var(--jk-mono);color:var(--jk-ink);background:var(--jk-surface-2);padding:1px 5px;border-radius:3px;font-size:.92em}

/* ============================================================================
   ACCESSIBILITY — WCAG 2.2 AA
   ----------------------------------------------------------------------------
   A visible keyboard focus style on every interactive element. Uses a real
   selector (not :where) so it beats component `outline:none`; :focus-visible so
   it shows for keyboard/AT users without ringing on mouse click.
   ============================================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.nav-item:focus-visible,
.filter-tab:focus-visible,.view-deal:focus-visible{
  outline:2px solid var(--jk-accent); outline-offset:2px; border-radius:var(--jk-r-xs);
}
/* focus ring must never be clipped by overflow on the row/table */
.nav-item:focus-visible{outline-offset:-2px}
.jk-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.jk-skip{position:absolute;left:8px;top:-40px;z-index:300;background:var(--jk-surface-3);color:var(--jk-ink);border:1px solid var(--jk-border-strong);border-radius:var(--jk-r-sm);padding:8px 14px;transition:top .12s}
.jk-skip:focus{top:8px}

/* ============================================================================
   MOTION — restrained, functional. Honor reduced-motion fully.
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}

/* ============================================================================
   UTILITY LAYER — tokenized classes that replace inline style="" attributes so
   style-src 'unsafe-inline' can be dropped. Semantic where possible.
   ============================================================================ */
/* text */
.u-muted{color:var(--jk-muted)} .u-ink2{color:var(--jk-ink-2)} .u-accent{color:var(--jk-accent)}
.u-danger{color:var(--jk-danger)} .u-success{color:var(--jk-success)} .u-warn{color:var(--jk-warn)}
.u-sm{font-size:var(--fs-cap)} .u-xs{font-size:var(--fs-sm)} .u-11{font-size:var(--fs-sm)}
.u-lh{line-height:1.55}
.u-eyebrow{font-family:var(--jk-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--jk-muted);font-weight:500}
.u-section-label{font-family:var(--jk-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--jk-muted);font-weight:500;margin:28px 0 18px}
/* layout */
.u-row{display:flex;align-items:center;justify-content:space-between}
.u-flex{display:flex;align-items:center;gap:var(--sp-2)}
.u-flex-12{display:flex;align-items:center;gap:var(--sp-3)}
.u-col{display:flex;flex-direction:column}
.u-hidden{display:none}
.u-mt-2{margin-top:var(--sp-2)} .u-mt-3{margin-top:var(--sp-3)} .u-mt-5{margin-top:var(--sp-5)} .u-mt-6{margin-top:var(--sp-6)}
.u-mb-3{margin-bottom:var(--sp-3)} .u-mb-5{margin-bottom:var(--sp-5)} .u-mb-6{margin-bottom:var(--sp-6)}
.u-p-5{padding:var(--sp-5)} .u-p-6{padding:var(--sp-6)}
.u-chart{position:relative;height:280px}
/* fields (textarea/inputs built in JS strings) */
.u-field{width:100%;background:var(--jk-surface-2);border:1px solid var(--jk-border-strong);color:var(--jk-ink);font-family:var(--jk-body);font-size:var(--fs-base);padding:10px 12px;border-radius:var(--jk-r-sm);box-sizing:border-box;transition:border-color .13s,box-shadow .13s}
.u-field:focus{border-color:var(--jk-accent);box-shadow:var(--jk-focus);outline:none}
.u-field-area{min-height:64px;resize:vertical;line-height:1.5}

/* ============================================================================
   v1.7.1 — GLOBAL form-control baseline (dark theme for EVERY control)
   Root cause fixed: v1.7.0 control-plane panels render many BARE inputs/selects/
   textareas (no .form-field / .u-field wrapper), so they inherited UA-default
   white surfaces. These element-level rules theme every control on the token
   palette; the class-scoped rules above (.form-field, .u-field, .auth-field)
   have higher specificity and keep their exact sizing, so this only fills in the
   previously-unstyled bare controls — no layout shift for existing fields.
   color-scheme:dark makes native <select> popups, <option>s, and scrollbars dark.
   ============================================================================ */
:root{color-scheme:dark}
input,select,textarea{
  background:var(--jk-surface-2);color:var(--jk-ink);border:1px solid var(--jk-border-strong);
  font-family:var(--jk-body);font-size:var(--fs-base);border-radius:var(--jk-r-sm);
  padding:10px 12px;box-sizing:border-box;transition:border-color .13s,box-shadow .13s}
input:focus,select:focus,textarea:focus{border-color:var(--jk-accent);box-shadow:var(--jk-focus);outline:none}
input::placeholder,textarea::placeholder{color:var(--jk-muted);opacity:.75}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed;color:var(--jk-muted)}
option,optgroup{background:var(--jk-surface);color:var(--jk-ink)}
input[type=file]{color:var(--jk-muted);padding:8px;border-style:dashed}
input[type=file]::file-selector-button{background:var(--jk-surface-3);color:var(--jk-ink);border:1px solid var(--jk-border-strong);border-radius:var(--jk-r-xs);padding:7px 12px;margin-right:10px;cursor:pointer;font-family:var(--jk-body);font-size:var(--fs-cap)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--jk-accent);cursor:pointer}
/* any button that ships without a component class still gets themed (no UA white) */
button:not([class]){background:var(--jk-surface-2);color:var(--jk-ink);border:1px solid var(--jk-border-strong);border-radius:var(--jk-r-sm);padding:8px 14px;font-family:var(--jk-body);cursor:pointer}
button:not([class]):hover{border-color:var(--jk-border-strong);background:var(--jk-surface-3)}

/* ============================================================================
   v1.7.1 — plain-language explainers (what it is, what changing it does, an
   example) + a CSP-safe details/summary for longer detail (no inline handlers).
   ============================================================================ */
.xpl{font-size:var(--fs-cap);color:var(--jk-ink-2);line-height:1.55;margin:0 0 6px}
.xpl-eg{font-size:var(--fs-cap);color:var(--jk-muted);line-height:1.5;margin:0 0 12px}
.xpl-eg::before{content:"Example: ";color:var(--jk-ink-2);font-weight:600}
details.xpl-more{margin:0 0 14px}
details.xpl-more>summary{cursor:pointer;color:var(--jk-accent);list-style:none;padding:2px 0;font-size:var(--fs-cap);user-select:none}
details.xpl-more>summary::-webkit-details-marker{display:none}
details.xpl-more>summary::before{content:"\25B8  ";color:var(--jk-muted)}
details.xpl-more[open]>summary::before{content:"\25BE  "}
details.xpl-more>div{padding:8px 0 4px;font-size:var(--fs-cap);color:var(--jk-ink-2);line-height:1.6;max-width:70ch}
.xpl-step{font-size:var(--fs-cap);color:var(--jk-muted);line-height:1.45;margin:4px 0 0}

/* ============================================================================
   STATES — loading (skeleton), empty (an invitation), error (in-voice)
   ============================================================================ */
.skel{background:linear-gradient(90deg,var(--jk-surface-2) 0%,var(--jk-surface-3) 50%,var(--jk-surface-2) 100%);background-size:200% 100%;border-radius:var(--jk-r-xs)}
.jk-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:56px 24px;color:var(--jk-muted)}
.jk-empty h4{font-family:var(--jk-display);font-size:var(--fs-lg);font-weight:600;color:var(--jk-ink)}
.jk-empty p{font-size:var(--fs-cap);max-width:38ch;line-height:1.55}
.jk-empty .action-btn{margin-top:6px}
.jk-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--jk-r-sm);font-size:var(--fs-cap);line-height:1.5}
.jk-note.err{color:var(--jk-danger);background:rgba(201,122,122,.10);border:1px solid rgba(201,122,122,.28)}
.jk-note.warn{color:var(--jk-warn);background:rgba(214,164,97,.10);border:1px solid rgba(214,164,97,.28)}