/* K Group Companies recruiting portal: component styles copied from
   docs/mockup/recruiting-portal-mockup.html (approved mockup). Keep tokens and components as they are.
   Removed for phase 1: dark theme and theme button, open-question tags and list, 3D effects layer.
   Portal-specific additions live in app.css. */
:root {
  --kg-blue: #008FBE;      /* K Group Blue (PMS 313): fields, rules, focus, active nav, large text */
  --kg-black: #000000;     /* headlines, text on blue */
  --kg-charcoal: #333333;  /* body text, dark surfaces */
  --kg-white: #FFFFFF;
  --kg-orange: #FF7A1A;    /* accent only, ONE focal element per view, never text on white */
  --kg-blue-ink: #007AA3;  /* blue for small text and links */
  --kg-blue-mist: #E7F3F7; /* tinted surface, note callouts, row hover */
  --kg-blue-300: #7FC7DE;  /* hover fills, selected rows */
  --kg-slate: #595959;     /* secondary text */
  --kg-rule: #D9D9D9;      /* hairlines, table rules */
  --kg-paper: #F5F7F8;     /* quiet background band, skeletons */
  --kg-good: #4BAE4F;      /* status dot/fill only, never text */
  --kg-attention: var(--kg-orange);
  --kg-critical: #D40131;  /* errors; ok as text */
  --kg-on-color: #000000;  /* text on blue or orange fills, both themes */
  --kg-font: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --kg-font-display: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --kg-font-narrow: "Aptos Narrow", "Aptos", "Arial Narrow", "Segoe UI", sans-serif;

  --shadow-overlay: 0 8px 28px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08);
  --ease: cubic-bezier(.2,.7,.2,1);
  --t: 220ms;
  --maxw: 1360px;
  --gutter: 32px;
  --btn-h: 40px;
}
:root { color-scheme: light; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }

*, *::before, *::after { box-sizing: border-box; }
/* Keep the scrollbar's space reserved so pages don't shift sideways when content gets shorter than the window */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { font-family: var(--kg-font); font-size: 16px; line-height: 1.5; color: var(--kg-charcoal); font-variant-numeric: tabular-nums; margin: 0; background: var(--kg-white); min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4 { color: var(--kg-black); margin: 0; }
p { margin: 0 0 12px; }
a { color: var(--kg-blue-ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--kg-blue); outline-offset: 2px; }
/* Headings and main get focus only to move screen readers after navigation; they aren't controls */
h1[tabindex="-1"]:focus, main:focus, #err-summary:focus { outline: none; }
.blue-field :focus-visible { outline-color: var(--kg-black); }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--kg-black); color: var(--kg-white); padding: 8px 16px; border-radius: 4px; z-index: 100; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 8px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--kg-slate); }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }
.num { text-align: right; }
.stack-8 > * + * { margin-top: 8px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.spacer { flex: 1; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* ---------- Mockup strip + header ---------- */
.mock-strip { background: var(--kg-paper); border-bottom: 1px dashed var(--kg-slate); font-size: 14px; }
.mock-strip .wrap { display: flex; align-items: center; gap: 8px 16px; min-height: 48px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.pill-sample { border: 1.5px solid var(--kg-charcoal); color: var(--kg-charcoal); background: var(--kg-white); }
.preview-as { display: inline-flex; align-items: center; gap: 8px; border: 1.5px dashed var(--kg-charcoal); border-radius: 6px; padding: 3px 4px 3px 10px; background: var(--kg-white); }
.preview-as label { font-weight: 600; white-space: nowrap; }
.preview-as .mock-label { font-size: 12px; font-weight: 600; color: var(--kg-slate); text-transform: none; border-right: 1px solid var(--kg-rule); padding-right: 8px; }
.preview-as select { height: 36px; border: 1px solid var(--kg-slate); border-radius: 4px; padding: 0 8px; font: inherit; font-size: 14px; background: var(--kg-white); max-width: 260px; }
.app-header { background: var(--kg-white); border-bottom: 1px solid var(--kg-rule); position: relative; z-index: 20; }
.app-header .bar { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo-link { display: inline-flex; padding: 0 17px 0 0; margin: 0; line-height: 0; flex: none; }
.logo-link .kg-logo { display: block; }
.primary-nav { align-self: stretch; display: flex; flex: 1; min-width: 0; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: stretch; }
.primary-nav a { display: flex; align-items: center; height: 100%; padding: 0 12px; font-weight: 600; font-size: 15px; color: var(--kg-charcoal); text-decoration: none; position: relative; white-space: nowrap; }
.primary-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: transparent; transition: background var(--t) var(--ease); }
.primary-nav a:hover { color: var(--kg-black); }
.primary-nav a:hover::after { background: var(--kg-rule); }
.primary-nav a[aria-current="page"] { color: var(--kg-black); }
.primary-nav a[aria-current="page"]::after { background: var(--kg-blue); }
.user-chip { display: flex; align-items: center; gap: 10px; flex: none; text-align: left; border: 1px solid var(--kg-rule); border-radius: 6px; padding: 6px 12px 6px 6px; background: var(--kg-white); }
.avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--kg-charcoal); color: var(--kg-white); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.user-chip .who { line-height: 1.25; }
.user-chip .who strong { display: block; font-size: 15px; color: var(--kg-black); }
.user-chip .who span { font-size: 13px; color: var(--kg-slate); }
.user-chip .entra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-chip .signout { font-size: 13px; margin-left: 4px; }
.menu-btn { display: none; height: 44px; min-width: 44px; border: 1.5px solid var(--kg-black); border-radius: 4px; background: var(--kg-white); align-items: center; justify-content: center; gap: 6px; padding: 0 12px; font-weight: 600; cursor: pointer; }

/* ---------- Main + footer ---------- */
main { flex: 1; outline: none; }
.page { padding-top: 32px; padding-bottom: 64px; }
.app-footer { border-top: 1px solid var(--kg-rule); background: var(--kg-white); font-size: 14px; color: var(--kg-slate); }
.app-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding-top: 20px; padding-bottom: 20px; }
.app-footer strong { color: var(--kg-charcoal); }
.app-footer .links { margin-left: auto; display: flex; gap: 8px 20px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--kg-blue-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; min-height: 24px; }
.linkbtn:hover { text-decoration-thickness: 2px; }

/* ---------- Blue field ---------- */
.blue-field { background: var(--kg-blue); color: var(--kg-black); }
.blue-field .wrap { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; }
.blue-field h1 { font-family: var(--kg-font-display); font-weight: 700; font-size: 44px; line-height: 1.1; letter-spacing: -0.015em; max-width: 22ch; }
.blue-field .lede { font-size: 18px; margin: 12px 0 0; max-width: 60ch; color: var(--kg-black); }
.blue-field .btn-primary { background: var(--kg-white); color: var(--kg-black); border-color: var(--kg-white); }
.blue-field .btn-primary:hover { background: var(--kg-blue-mist); }
.page-title { font-family: var(--kg-font-display); font-weight: 700; font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; }

/* ---------- Section heading ---------- */
.section { margin-top: 40px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: 8px; border-bottom: 1.5px solid var(--kg-blue); margin-bottom: 20px; }
.section-head h2 { font: 700 21px/1.25 var(--kg-font); color: var(--kg-black); margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-head .controls { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; }
.section-head .count { font-weight: 600; color: var(--kg-slate); font-size: 16px; }
h3 { font-size: 17px; font-weight: 700; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); padding: 0 18px; border-radius: 4px; font: 600 16px/1 var(--kg-font); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.btn-primary { background: var(--kg-black); color: var(--kg-white); border-color: var(--kg-black); }
.btn-primary:hover { background: var(--kg-charcoal); border-color: var(--kg-charcoal); }
.btn-secondary { background: var(--kg-white); color: var(--kg-black); border-color: var(--kg-black); }
.btn-secondary:hover { background: var(--kg-blue-mist); }
.btn-danger { background: var(--kg-critical); color: var(--kg-white); border-color: var(--kg-critical); }
.btn-link { background: none; border: 0; color: var(--kg-blue-ink); padding: 0 4px; text-decoration: underline; text-underline-offset: 2px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 15px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--kg-paper); color: var(--kg-slate); border-color: var(--kg-rule); cursor: not-allowed; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .label, fieldset > legend { font: 600 14px/1.3 var(--kg-font); color: var(--kg-charcoal); }
.req-mark { color: var(--kg-critical); font-weight: 700; margin-left: 2px; }
.input, select.input, textarea.input { height: 40px; border: 1px solid var(--kg-slate); border-radius: 4px; padding: 0 12px; font: 16px var(--kg-font); color: var(--kg-charcoal); background: var(--kg-white); width: 100%; min-width: 0; }
textarea.input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
select.input { padding-right: 8px; }
.input[readonly] { background: var(--kg-paper); border-color: var(--kg-rule); }
.input[aria-invalid="true"] { border-color: var(--kg-critical); border-width: 1.5px; }
.helper { font-size: 14px; color: var(--kg-slate); margin: 0; }
.error-text { font-size: 14px; color: var(--kg-critical); font-weight: 600; margin: 0; }
.error-text:empty { display: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset > legend { padding: 0; margin-bottom: 6px; }
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; min-height: 40px; }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--kg-black); flex: none; }
.choice-list { display: flex; flex-direction: column; }
.choice-inline { display: flex; flex-wrap: wrap; gap: 0 24px; }
.money { position: relative; }
.money .prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--kg-slate); pointer-events: none; }
.money .input { padding-left: 26px; }
.readonly-box { border: 1px solid var(--kg-rule); border-radius: 4px; background: var(--kg-paper); padding: 10px 12px; }
.readonly-box strong { color: var(--kg-black); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.form-grid .span-2 { grid-column: 1 / -1; }

/* ---------- Note callout ---------- */
.note { background: var(--kg-blue-mist); border: 1.5px solid var(--kg-blue); border-radius: 6px; padding: 14px 16px; }
.note .note-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; color: var(--kg-blue-ink); margin-bottom: 4px; font-size: 15px; }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note ul { margin: 4px 0 0; padding-left: 20px; }
.note li + li { margin-top: 2px; }

/* ---------- Status dot ---------- */
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 999px; flex: none; display: inline-block; background: var(--kg-blue); }
.dot.good { background: var(--kg-good); }
.dot.critical { background: var(--kg-critical); }
.dot.closed { background: var(--kg-white); border: 2px solid var(--kg-slate); }
.dot.attention { background: var(--kg-orange); }
.dot.upcoming { background: var(--kg-white); border: 2px solid var(--kg-rule); }
.focal-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--kg-on-color); background: var(--kg-orange); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }


.tipbtn { position: relative; background: none; border: 0; padding: 4px 0; font: 600 14px var(--kg-font); color: var(--kg-blue-ink); text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; white-space: nowrap; min-height: 32px; }
.tipbtn:hover .oq-tip, .tipbtn:focus .oq-tip { display: block; }
.quote { margin: 8px 0 12px; padding-left: 12px; border-left: 3px solid var(--kg-rule); color: var(--kg-charcoal); }

/* ---------- Tables ---------- */
.table-wrap { position: relative; border: 1px solid var(--kg-rule); border-radius: 6px; overflow-x: auto; background: var(--kg-white); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { padding: 12px 14px; text-align: left; vertical-align: middle; }
table.data thead th { font-weight: 600; color: var(--kg-slate); border-bottom: 1.5px solid var(--kg-charcoal); white-space: nowrap; font-size: 14px; background: var(--kg-white); }
table.data tbody tr { border-top: 1px solid var(--kg-rule); transition: background var(--t) var(--ease); }
table.data tbody tr:first-child { border-top: 0; }
table.data tbody tr:hover { background: var(--kg-blue-mist); }
table.data td.num, table.data th.num { text-align: right; }
table.data .cell-main { font-weight: 600; color: var(--kg-black); }
table.data .cell-sub { display: block; font-size: 13px; color: var(--kg-slate); font-weight: 400; }
/* Pipeline columns are fixed so they don't resize as stage filters change the rows */
#pipe-table { table-layout: fixed; min-width: 1180px; }
#pipe-table col.c-cand { width: 10%; }
#pipe-table col.c-hm { width: 10.7%; }
#pipe-table col.c-held { width: 8.5%; }
#pipe-table col.c-stage { width: 224px; }
#pipe-table col.c-time { width: 140px; }
#pipe-table col.c-flags { width: 76px; }
#pipe-table col.c-sub { width: 120px; }
#pipe-table col.c-act { width: 144px; }
.sort-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
.sort-btn .icon { width: 14px; height: 14px; }
th[aria-sort="none"] .sort-btn .icon { opacity: .35; }
th[aria-sort="ascending"] .sort-btn .icon { transform: rotate(180deg); }
table.data tr.detail-row:hover { background: transparent; }
table.data tr.detail-row td { padding-top: 0; }
.expander { background: none; border: 0; padding: 4px; margin: -4px 4px -4px -4px; cursor: pointer; border-radius: 4px; display: inline-flex; min-width: 32px; min-height: 32px; align-items: center; justify-content: center; }
/* Keeps the expand arrow centered on the name next to it */
.name-line { display: inline-flex; align-items: center; }
.expander .icon { transition: transform var(--t) var(--ease); }
.expander[aria-expanded="true"] .icon { transform: rotate(90deg); }
.empty { padding: 32px 24px; text-align: left; border: 1px solid var(--kg-rule); border-radius: 6px; background: var(--kg-white); }
.empty strong { color: var(--kg-black); display: block; font-size: 17px; margin-bottom: 4px; }

/* queue rows (Waiting on you) */
.queue { border-top: 1px solid var(--kg-rule); }
.queue-row { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.7fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1.3fr) auto; gap: 8px 24px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--kg-rule); transition: background var(--t) var(--ease); }
.queue-row:hover { background: var(--kg-blue-mist); }
.queue-row .k { display: block; font-size: 13px; color: var(--kg-slate); }
.queue-row .cand { font-size: 19px; font-weight: 700; color: var(--kg-black); }

/* ---------- Stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--kg-rule); border-bottom: 1px solid var(--kg-rule); }
.stat { padding: 20px 20px 20px 0; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--kg-rule); }
.stat .fig { font-family: var(--kg-font-display); font-weight: 700; font-size: 44px; line-height: 1.05; color: var(--kg-black); letter-spacing: -0.015em; }
.stat .lbl { font-size: 15px; font-weight: 600; color: var(--kg-charcoal); margin-top: 4px; }
.stat .ctx { font-size: 14px; color: var(--kg-slate); margin-top: 2px; }

/* ---------- Segmented filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.seg { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--kg-rule); }
.seg button { background: none; border: 0; padding: 10px 12px; font: 600 15px var(--kg-font); color: var(--kg-slate); cursor: pointer; position: relative; min-height: 44px; white-space: nowrap; }
.seg button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: transparent; transform-origin: left center; transition: background var(--t) var(--ease); }
.seg button[aria-pressed="true"] { color: var(--kg-black); }
.seg button[aria-pressed="true"]::after { background: var(--kg-blue); }
.seg .n { font-weight: 400; color: var(--kg-slate); margin-left: 4px; }
.search { position: relative; min-width: 240px; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--kg-slate); }
.search .input { padding-left: 38px; }

/* ---------- Stepper (approval chain) ---------- */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.chain.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chain li { position: relative; padding: 0 16px 0 0; }
.chain .marker { display: flex; align-items: center; margin-bottom: 12px; }
.chain .circle { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 14px; border: 2px solid var(--kg-rule); background: var(--kg-white); color: var(--kg-slate); flex: none; position: relative; z-index: 1; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.chain .line { height: 2px; background: var(--kg-rule); flex: 1; margin-left: 8px; }
.chain li:last-child .line { display: none; }
.chain li.done .circle { background: var(--kg-black); border-color: var(--kg-black); color: var(--kg-white); }
.chain li.done .line { background: var(--kg-black); }
.chain li.current .circle { border-color: var(--kg-blue); background: var(--kg-blue); color: var(--kg-on-color); }
.chain li.current.overdue .circle { border-color: var(--kg-orange); background: var(--kg-orange); }
.chain li.skipped .circle { border-style: dashed; color: var(--kg-slate); }
.chain li.sentback .circle { border-color: var(--kg-critical); color: var(--kg-critical); }
.chain li.attention .circle { border-color: var(--kg-critical); color: var(--kg-critical); }
.chain .circle .icon { width: 16px; height: 16px; stroke-width: 3; }
.chain .st-title { font-weight: 700; color: var(--kg-black); font-size: 15px; line-height: 1.3; }
.chain .st-who { font-size: 14px; color: var(--kg-charcoal); margin-top: 2px; }
.chain .st-state { font-size: 14px; color: var(--kg-slate); margin-top: 4px; }
.chain .st-state strong { color: var(--kg-charcoal); }
.chain .st-comment { font-size: 14px; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--kg-rule); color: var(--kg-charcoal); }
.chain-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
.chain-mini li { display: flex; align-items: center; gap: 8px; }
.chain-mini .icon { width: 16px; height: 16px; stroke-width: 3; }

/* form stepper */
.form-steps { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 8px; counter-reset: fs; }
.form-steps li { display: flex; }
.form-steps button { background: var(--kg-white); font: inherit; cursor: pointer;  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--kg-rule); border-radius: 999px; text-decoration: none; color: var(--kg-charcoal); font-weight: 600; min-height: 44px; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.form-steps button .circle { width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--kg-rule); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--kg-slate); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.form-steps button.complete .circle { background: var(--kg-black); border-color: var(--kg-black); color: var(--kg-white); }
.form-steps button[aria-current="step"] { border-color: var(--kg-blue); color: var(--kg-black); }
.form-steps button[aria-current="step"] .circle { border-color: var(--kg-blue); background: var(--kg-blue); color: var(--kg-on-color); }
.form-steps button .circle .icon { width: 14px; height: 14px; stroke-width: 3; }

/* ---------- Layout grids ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 40px; align-items: start; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px 40px; align-items: start; }
.sticky-side { position: sticky; top: 16px; }
.top-strip { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-end; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--kg-rule); margin-bottom: 24px; }
.top-strip .meta { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; color: var(--kg-slate); margin-top: 8px; }
.top-strip .meta strong { color: var(--kg-charcoal); font-weight: 600; }
.crumb { font-size: 14px; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 4px; }
.panel { border: 1px solid var(--kg-rule); border-radius: 6px; padding: 20px; background: var(--kg-white); }
dl.details { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); margin: 0; font-size: 15px; border-top: 1px solid var(--kg-rule); }
dl.details dt, dl.details dd { padding: 10px 0; border-bottom: 1px solid var(--kg-rule); margin: 0; }
dl.details dt { color: var(--kg-slate); font-weight: 600; padding-right: 16px; }
dl.details dd { color: var(--kg-charcoal); overflow-wrap: anywhere; }
.lock { display: inline-flex; align-items: center; gap: 6px; }
.lock .icon { width: 15px; height: 15px; }
.removed { font-weight: 600; color: var(--kg-slate); }

/* ---------- Letter viewer ---------- */
.viewer { border: 1px solid var(--kg-rule); border-radius: 6px; background: var(--kg-paper); }
.viewer-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--kg-rule); background: var(--kg-white); border-radius: 6px 6px 0 0; }
.viewer-tabs button { background: none; border: 0; padding: 12px 12px; font: 600 15px var(--kg-font); color: var(--kg-slate); position: relative; cursor: pointer; min-height: 44px; }
.viewer-tabs button[aria-selected="true"] { color: var(--kg-black); }
.viewer-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--kg-blue); transform-origin: left center; }
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 12px; border-bottom: 1px solid var(--kg-rule); background: var(--kg-white); font-size: 14px; }
.icon-btn { width: 36px; height: 36px; border: 1px solid var(--kg-slate); border-radius: 4px; background: var(--kg-white); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.icon-btn[disabled] { opacity: .4; cursor: not-allowed; }
.viewer-stage { overflow: auto; padding: 24px; max-height: 920px; }
.sheet { --z: 1; width: calc(612px * var(--z)); min-height: calc(792px * var(--z)); margin: 0 auto; background: var(--kg-white); border: 1px solid var(--kg-rule); padding: calc(56px * var(--z)) calc(60px * var(--z)); font-size: calc(12.5px * var(--z)); line-height: 1.55; color: var(--kg-black); user-select: text; }
.sheet h4 { font-size: calc(13px * var(--z)); margin: calc(14px * var(--z)) 0 calc(4px * var(--z)); }
.sheet p { margin: 0 0 calc(10px * var(--z)); }
.sheet ul { margin: 0 0 calc(10px * var(--z)); padding-left: calc(20px * var(--z)); }
.sheet .lh { display: flex; justify-content: space-between; border-bottom: 1px solid var(--kg-charcoal); padding-bottom: calc(8px * var(--z)); margin-bottom: calc(22px * var(--z)); font-size: calc(11px * var(--z)); color: var(--kg-slate); }
.sheet .lh strong { color: var(--kg-black); font-size: calc(13px * var(--z)); }
.sheet .mf { background: var(--kg-blue-mist); border-bottom: 1px dotted var(--kg-blue-ink); padding: 0 2px; }
.sheet .pgno { text-align: center; font-size: calc(10px * var(--z)); color: var(--kg-slate); margin-top: calc(24px * var(--z)); }
.sheet .sig { margin-top: calc(28px * var(--z)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(24px * var(--z)); }
.sheet .sig div { border-top: 1px solid var(--kg-charcoal); padding-top: calc(4px * var(--z)); font-size: calc(11px * var(--z)); }
.viewer-caption { font-size: 14px; color: var(--kg-slate); padding: 10px 12px; border-top: 1px solid var(--kg-rule); background: var(--kg-white); border-radius: 0 0 6px 6px; display: flex; gap: 8px; align-items: center; }
.sample-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 14px; background: var(--kg-white); border-bottom: 1px dashed var(--kg-slate); color: var(--kg-charcoal); }
.rec-toolbar { border: 1.5px solid var(--kg-black); border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.rec-toolbar .who { font-size: 14px; color: var(--kg-slate); }
.rec-toolbar .rnote { flex-basis: 100%; font-size: 14px; color: var(--kg-charcoal); margin: 0; }

/* ---------- Decision panel ---------- */
.decision { border: 1.5px solid var(--kg-black); border-radius: 6px; padding: 20px; }
.decision h2 { font-size: 21px; margin-bottom: 8px; }
.decision-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.opt { position: relative; display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--kg-slate); border-radius: 6px; padding: 12px 14px; cursor: pointer; min-height: 56px; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.opt:hover { background: var(--kg-blue-mist); }
.opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--kg-black); flex: none; }
.opt strong { display: block; color: var(--kg-black); }
.opt span.d { font-size: 14px; color: var(--kg-slate); display: block; }
.opt:has(input:checked) { border-color: var(--kg-black); border-width: 2px; padding: 11px 13px; background: var(--kg-blue-mist); }
.opt:has(input:focus-visible) { outline: 3px solid var(--kg-blue); outline-offset: 2px; }

/* ---------- Phase indicator (Candidate Status) ---------- */
.phase { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.segs { display: inline-flex; gap: 3px; flex: none; }
.segs i { width: 22px; height: 6px; border-radius: 999px; background: var(--kg-rule); display: block; }
.segs i.on { background: var(--kg-blue); }
.segs i.done { background: var(--kg-charcoal); }

/* ---------- Toast, modal, drawer ---------- */
.toast-region { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--kg-charcoal); color: var(--kg-white); padding: 12px 16px; border-radius: 6px; box-shadow: var(--shadow-overlay); font-size: 15px; display: flex; gap: 10px; align-items: flex-start; width: 100%; pointer-events: auto; animation: toast-in var(--t) var(--ease); }
.toast .icon { color: var(--kg-good); margin-top: 2px; stroke-width: 3; }
.toast a, .toast .linkbtn { color: var(--kg-white); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 70; animation: fade var(--t) var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { position: fixed; z-index: 80; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--kg-white); border-radius: 6px; box-shadow: var(--shadow-overlay); }
.modal-head, .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1.5px solid var(--kg-blue); position: sticky; top: 0; background: var(--kg-white); z-index: 1; }
.modal-head h2, .drawer-head h2 { font-size: 21px; }
.close-btn { width: 44px; height: 44px; border: 1px solid var(--kg-rule); border-radius: 4px; background: var(--kg-white); display: grid; place-items: center; cursor: pointer; flex: none; }
.close-btn:hover { background: var(--kg-blue-mist); }
.modal-body { padding: 20px; }
.drawer { position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--kg-white); box-shadow: var(--shadow-overlay); overflow: auto; animation: slide-in 250ms var(--ease); }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
.drawer-body { padding: 20px; }

/* email preview */
.email-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.email { border: 1px solid var(--kg-rule); border-radius: 6px; overflow: hidden; }
.email-meta { background: var(--kg-paper); padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--kg-rule); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.email-meta dt { color: var(--kg-slate); font-weight: 600; margin: 0; }
.email-meta dd { margin: 0; color: var(--kg-charcoal); overflow-wrap: anywhere; }
.email-body { padding: 24px 20px; font-size: 15px; }
.email-body .ebtn { display: inline-block; background: var(--kg-black); color: var(--kg-white); padding: 10px 18px; border-radius: 4px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; margin: 8px 0 16px; min-height: 40px; font-size: 16px; }
.email-foot { border-top: 1px solid var(--kg-rule); padding: 12px 20px; font-size: 13px; color: var(--kg-slate); }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 40px; height: 22px; border-radius: 999px; background: var(--kg-rule); position: relative; transition: background var(--t) var(--ease); flex: none; }
.switch .track::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 999px; background: var(--kg-white); top: 3px; left: 3px; transition: transform var(--t) var(--ease); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.switch input:checked + .track { background: var(--kg-black); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 3px solid var(--kg-blue); outline-offset: 2px; }

/* sign in */
.signin { min-height: calc(100vh - 220px); display: grid; place-items: center; padding: 48px 16px; }
.signin-card { text-align: center; max-width: 420px; }
.signin-card .kg-logo { margin: 0 auto 32px; display: block; }
.signin-card h1 { font-family: var(--kg-font-display); font-size: 36px; letter-spacing: -0.01em; margin-bottom: 24px; }

details.closed-group { border: 1px solid var(--kg-rule); border-radius: 6px; margin-top: 24px; }
details.closed-group > summary { padding: 14px 16px; font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
details.closed-group > summary::-webkit-details-marker { display: none; }
details.closed-group > summary .icon { transition: transform var(--t) var(--ease); }
details.closed-group[open] > summary .icon { transform: rotate(90deg); }
details.closed-group .table-wrap { border: 0; border-top: 1px solid var(--kg-rule); border-radius: 0 0 6px 6px; }

.access-denied { max-width: 640px; }
.history td { vertical-align: top; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(4) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--kg-rule); }
  .user-chip .who span.role-sub { display: none; }
}
@media (max-width: 1100px) {
  .two-col, .form-layout { grid-template-columns: minmax(0, 1fr); }
  .sticky-side { position: static; }
  .email-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .menu-btn { display: inline-flex; }
  .app-header .bar { gap: 12px; }
  .primary-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--kg-white); border-bottom: 1px solid var(--kg-rule); box-shadow: var(--shadow-overlay); display: none; }
  .primary-nav.open { display: block; }
  .primary-nav ul { flex-direction: column; padding: 8px var(--gutter) 16px; }
  .primary-nav a { height: 48px; padding: 0 12px; }
  .primary-nav a::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .bar .spacer-m { flex: 1; }
  .user-chip .who { display: none; }
  .user-chip { padding: 4px; border: 0; }
  .chain { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chain li { padding: 0 0 20px 48px; }
  .chain .marker { position: absolute; left: 0; top: 0; bottom: 0; flex-direction: column; margin: 0; }
  .chain .line { width: 2px; height: auto; margin: 4px 0 0; flex: 1; }
  .queue-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .queue-row .q-role, .queue-row .q-action { grid-column: auto; }
  .queue-row .q-cand, .queue-row .q-role, .queue-row .q-stage { grid-column: 1 / -1; }
  .queue-row .q-action { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --btn-h: 44px; }
  .blue-field .wrap { padding-top: 28px; padding-bottom: 28px; }
  .blue-field h1 { font-size: 32px; }
  .page-title { font-size: 28px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 16px 12px 16px 0; }
  .stat + .stat { padding-left: 12px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--kg-rule); padding-left: 12px; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--kg-rule); }
  .stat .fig { font-size: 36px; }
  .decision-opts { grid-template-columns: minmax(0, 1fr); }
  .search { min-width: 0; width: 100%; }
  .seg { overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .viewer-stage { padding: 12px; }
  dl.details { grid-template-columns: minmax(0, 1fr); }
  dl.details dt { border-bottom: 0; padding-bottom: 0; }
  dl.details dd { padding-top: 2px; }
  .preview-as select { max-width: 190px; }
  .preview-as .mock-label { display: none; }
  .mock-strip .strip-note { display: none; }
  .logo-link .kg-logo { height: 36px !important; }
  .btn, .icon-btn, .preview-as select { min-height: 44px; }
  .icon-btn, .theme-btn { width: 44px; height: 44px; }
  .choice { min-height: 44px; }
  /* stacked table rows */
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tbody tr { padding: 12px 14px; }
  table.stack td { padding: 3px 0; text-align: left !important; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
  table.stack td::before { content: attr(data-label); font-size: 13px; font-weight: 600; color: var(--kg-slate); }
  table.stack td.no-label { display: block; }
  table.stack td.no-label::before { display: none; }
  table.stack tr.detail-row td { display: block; }
  table.stack tr.detail-row td::before { display: none; }
  .assign-row { flex-wrap: wrap !important; }
  .sticky-col { position: sticky; left: 0; background: var(--kg-white); z-index: 1; box-shadow: 1px 0 0 var(--kg-rule); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}