/* Kia University Action Planner — KRC-aligned design system */
:root {
  --kia-midnight: #05141F;
  --kia-navy-2: #0B1F2F;
  /* red is a DATA color only (late / needs action) — not a brand accent */
  --kia-red: #C4172C;
  --kia-red-dark: #9E1223;
  --accent: #05141F;
  --accent-hover: #1A2B36;
  --bg: #F5F6F7;
  --card: #FFFFFF;
  --line: #E3E6E8;
  --text: #05141F;
  --text-2: #5B6770;
  --ok: #1E7B44;
  --warn: #B57E10;
  --chip-dark: #05141F;
  --radius: 4px;
  --shadow: 0 1px 3px rgba(5, 20, 31, .08), 0 4px 14px rgba(5, 20, 31, .05);
  --font: "KiaSignature", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; }
a { color: inherit; }
button { font-family: inherit; }

/* ---------- header ---------- */
.hdr { background: var(--kia-midnight); color: #fff; position: sticky; top: 0; z-index: 40; }
.hdr-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center;
  gap: 28px; padding: 0 24px; height: 60px; }
.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; cursor: pointer; }
.brand .kia { font-weight: 800; letter-spacing: 4px; font-size: 19px; }
.brand .bar { color: #5B6770; font-weight: 300; }
.brand .app { font-weight: 300; font-size: 16px; color: #DEE3E6; letter-spacing: .5px; }
.nav { display: flex; gap: 4px; height: 100%; }
.nav a { display: flex; align-items: center; padding: 0 14px; color: #C7CDD1;
  text-decoration: none; font-size: 14px; border-bottom: 3px solid transparent;
  border-top: 3px solid transparent; }
.nav a.on { color: #fff; border-bottom-color: #fff; }
.nav a:hover { color: #fff; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.hdr-right .who { color: #C7CDD1; }
.hdr-right .who b { color: #fff; font-weight: 600; }
.role-chip { background: #33505F; color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.signout { background: none; border: 1px solid #3A4A56; color: #C7CDD1; padding: 6px 12px;
  border-radius: 4px; cursor: pointer; font-size: 12.5px; }
.signout:hover { border-color: #fff; color: #fff; }

/* ---------- layout ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 24px; }
.page-title { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title h1 { font-size: 24px; font-weight: 700; letter-spacing: -.2px; }
.page-title .sub { color: var(--text-2); font-size: 13.5px; }
.crumb { font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.crumb a { color: var(--text-2); text-decoration: none; }
.crumb a:hover { color: var(--kia-midnight); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 21px; margin-bottom: 21px; }
.card h2 { font-size: 15px; font-weight: 700; margin-bottom: 14px; letter-spacing: .2px;
  display: flex; align-items: center; gap: 8px; }
.card h2 .accent { width: 26px; height: 3px; background: var(--kia-midnight); display: inline-block; }

.grid { display: grid; gap: 13px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .g4, .g3 { grid-template-columns: repeat(2, 1fr); }
  .g2 { grid-template-columns: 1fr; } }

/* ---------- widgets ---------- */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); }
.stat .n { font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.stat .l { font-size: 12px; color: var(--text-2); text-transform: uppercase;
  letter-spacing: 1px; margin-top: 4px; }
.stat.red .n { color: var(--kia-red); }
.stat.green .n { color: var(--ok); }

/* ---------- forms ---------- */
label.f { display: block; font-size: 12px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px;
  font-family: inherit; font-size: 14px; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(5, 20, 31, .18);
  border-color: var(--kia-midnight); }
textarea { resize: vertical; min-height: 90px; }
.frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin-bottom: 14px; }
.hint { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.req::after { content: " *"; color: #8A949C; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer;
  border-radius: 4px; padding: 10px 18px; font-size: 13.5px; font-weight: 600;
  text-decoration: none; transition: background .15s; }
.btn-red { background: var(--accent); color: #fff; }
.btn-red:hover { background: var(--accent-hover); }
.btn-dark { background: var(--kia-midnight); color: #fff; }
.btn-dark:hover { background: var(--kia-navy-2); }
.btn-ghost { background: none; border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--kia-midnight); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { background: none; border: none; cursor: pointer; padding: 4px 6px;
  color: var(--text-2); font-size: 15px; border-radius: 4px; }
.icon-btn:hover { color: var(--kia-midnight); background: #F0F3F5; }

/* ---------- chips / status ---------- */
.chip { display: inline-block; padding: 4px 10px; border-radius: 3px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.chip.dark { background: var(--kia-midnight); color: #fff; }
.chip.outline { border: 1px solid var(--line); color: var(--text-2); background: #fff; }
.st-new { background: #E8EDF1; color: #33475B; }
.st-open { background: #DCE9F7; color: #1D4F91; }
.st-in_progress { background: #FFF2D9; color: #8A5B00; }
.st-late { background: #FBE2E5; color: var(--kia-red); }
.st-incomplete { background: #F1F1F1; color: #666; }
.st-approved { background: #E2F3E8; color: var(--ok); }
.st-not_approved { background: #FBE2E5; color: var(--kia-red); }
.st-closed { background: var(--kia-midnight); color: #fff; }

.areachip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 3px; font-size: 13px; cursor: pointer;
  background: #fff; user-select: none; }
.areachip.sel { background: var(--kia-midnight); color: #fff; border-color: var(--kia-midnight); }
.areachip.sel::after { content: "✕"; font-size: 10px; color: #9AA4AD; }
.areagroup { margin-bottom: 12px; }
.areagroup .gl { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--text-2);
  text-transform: uppercase; margin-bottom: 7px; }
.areawrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- progress ---------- */
.pbar { height: 8px; background: #EDF0F2; border-radius: 4px; overflow: hidden; min-width: 70px; }
.pbar i { display: block; height: 100%; background: var(--kia-midnight); border-radius: 4px; }
.pbar.done i { background: var(--ok); }

/* ---------- table ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--text-2); padding: 10px 12px; border-bottom: 2px solid var(--kia-midnight);
  white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: #FAFBFB; }
.tbl .title-link { font-weight: 600; color: var(--kia-midnight); text-decoration: none; }
.tbl .title-link:hover { text-decoration: underline; }
.tbl-scroll { overflow-x: auto; }
.empty { text-align: center; color: var(--text-2); padding: 36px 12px; font-size: 14px; }

/* ---------- login ---------- */
.login-bg { min-height: 100vh; background: linear-gradient(160deg, var(--kia-midnight) 0%,
  #0E2435 60%, #163243 100%); display: flex; align-items: center; justify-content: center;
  padding: 24px; }
.login-card { background: #fff; border-radius: 8px; padding: 42px; width: 420px;
  max-width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.login-card .brand2 { margin-bottom: 6px; font-size: 22px; font-weight: 800;
  letter-spacing: 4px; }
.login-card .brand2 span { color: #9AA4AD; }
.login-card .tag { color: var(--text-2); font-size: 14px; margin-bottom: 26px; }
.login-note { margin-top: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* ---------- comments ---------- */
.cmt { border-left: 3px solid var(--kia-midnight); background: #FAFBFB; padding: 10px 14px;
  margin-bottom: 10px; border-radius: 0 4px 4px 0; }
.cmt .meta { font-size: 11.5px; color: var(--text-2); margin-bottom: 3px; }
.cmt .meta b { color: var(--text); }
.cmt .body { font-size: 13.5px; white-space: pre-wrap; }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(5, 20, 31, .55); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
  overflow-y: auto; }
.modal { background: #fff; border-radius: 8px; width: 760px; max-width: 100%;
  padding: 26px; box-shadow: 0 24px 80px rgba(0, 0, 0, .4); }
.modal h3 { font-size: 17px; margin-bottom: 18px; }

/* ---------- misc ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--kia-midnight); color: #fff; padding: 12px 22px; border-radius: 6px;
  font-size: 13.5px; z-index: 100; box-shadow: var(--shadow); }
.toast.err { background: var(--kia-red); }
.loading { text-align: center; color: var(--text-2); padding: 40px; }
.spinner { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--line);
  border-top-color: var(--kia-midnight); border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.att { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 4px; margin-bottom: 6px; font-size: 13px; }
.att .sz { color: var(--text-2); font-size: 11.5px; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; }
.meta-grid .mi .k { font-size: 11px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--text-2); margin-bottom: 3px; }
.meta-grid .mi .v { font-size: 14px; font-weight: 600; }
.score-row { display: grid; grid-template-columns: 1fr 220px 1fr; gap: 12px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.score-row .nm { font-size: 13.5px; font-weight: 600; }
.score-row .cat { font-size: 11px; color: var(--text-2); }
.rate { display: flex; gap: 5px; }
.rate button { width: 34px; height: 30px; border: 1px solid var(--line); background: #fff;
  border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); }
.rate button.on { background: var(--kia-midnight); color: #fff; border-color: var(--kia-midnight); }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; align-items: end; }
.bars .bar-row { display: grid; grid-template-columns: 90px 1fr 34px; gap: 10px;
  align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.bars .bar-row .b { height: 14px; background: #EDF0F2; border-radius: 3px; overflow: hidden; }
.bars .bar-row .b i { display: block; height: 100%; background: var(--kia-midnight); }
.bars .bar-row.red .b i { background: var(--kia-red); }
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: 16px; }
.tabs button { background: none; border: none; padding: 10px 18px; font-size: 14px;
  cursor: pointer; color: var(--text-2); border-bottom: 3px solid transparent;
  margin-bottom: -2px; font-weight: 600; }
.tabs button.on { color: var(--text); border-bottom-color: var(--kia-midnight); }
.horizon-now { background: #FBE2E5; color: var(--kia-red); }
.horizon-near { background: #FFF2D9; color: #8A5B00; }
.horizon-far { background: #DCE9F7; color: #1D4F91; }

/* ---------- v6: action-first KPI hero cards ---------- */
.statshead { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.statshead .sh-t { font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--text-2); }
.statshead .seg { margin-left: auto; background: #fff; }
.statshead .seg button.on { background: var(--kia-midnight); color: #fff; }

.stat2 { border-radius: 10px; padding: 21px; cursor: default; position: relative;
  overflow: hidden; transition: transform .14s, box-shadow .14s; min-height: 118px;
  display: flex; flex-direction: column; justify-content: space-between; }
.stat2.click { cursor: pointer; }
.stat2.click:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(5, 20, 31, .18); }
.stat2 .s2-label { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.3px; display: flex; align-items: center; gap: 7px; }
.stat2 .s2-num { font-size: 42px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; }
.stat2 .s2-sub { font-size: 12px; line-height: 1.4; }
.stat2 .s2-go { position: absolute; top: 16px; right: 16px; font-size: 11.5px;
  font-weight: 700; opacity: .75; }
.stat2.click:hover .s2-go { opacity: 1; }

/* Glass cards: very light tinted panes, colored type carries the meaning */
.stat2 { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 4px 16px rgba(5, 20, 31, .07); }
.stat2 .s2-num .unit { font-size: 14px; font-weight: 600; letter-spacing: 0;
  margin-left: 10px; opacity: .8; }
.stat2 .s2-sub { color: var(--text-2); }
.stat2 .s2-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.stat2 .s2-chips span { border-radius: 10px; padding: 2px 9px; font-size: 11px;
  font-weight: 700; }

/* ALARM — blush glass; the only red pane on the page */
.stat2.alarm { background: linear-gradient(150deg, rgba(196, 23, 44, .085), rgba(196, 23, 44, .035)),
  rgba(255, 255, 255, .72); border: 1px solid rgba(196, 23, 44, .28); }
.stat2.alarm .s2-label, .stat2.alarm .s2-num, .stat2.alarm .s2-go { color: #A32638; }
.stat2.alarm .pulse { width: 9px; height: 9px; border-radius: 50%; background: #C4172C;
  animation: pulsedot 1.8s ease-out infinite; }
@keyframes pulsedot { 0% { box-shadow: 0 0 0 0 rgba(196, 23, 44, .45); }
  70% { box-shadow: 0 0 0 8px rgba(196, 23, 44, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 23, 44, 0); } }
/* all-clear: cool slate glass — quietly good */
.stat2.allclear { background: linear-gradient(150deg, rgba(51, 80, 95, .08), rgba(51, 80, 95, .03)),
  rgba(255, 255, 255, .72); border: 1px solid rgba(51, 80, 95, .22); }
.stat2.allclear .s2-label, .stat2.allclear .s2-num, .stat2.allclear .s2-go { color: #33505F; }

/* DUE SOON — pale gold glass */
.stat2.due { background: linear-gradient(150deg, rgba(178, 133, 32, .10), rgba(178, 133, 32, .04)),
  rgba(255, 255, 255, .72); border: 1px solid rgba(178, 133, 32, .30); }
.stat2.due .s2-label, .stat2.due .s2-num, .stat2.due .s2-go { color: #8A6413; }

/* WINS — pale mint glass */
.stat2.win { background: linear-gradient(150deg, rgba(30, 123, 68, .09), rgba(30, 123, 68, .035)),
  rgba(255, 255, 255, .72); border: 1px solid rgba(30, 123, 68, .26); }
.stat2.win .s2-label, .stat2.win .s2-num, .stat2.win .s2-go { color: #1E6B45; }
.stat2.win .s2-chips span { background: rgba(30, 107, 69, .10); color: #1E6B45; }
.stat2.alarm .s2-chips span { background: rgba(196, 23, 44, .10); color: #A32638; }
.stat2.due .s2-chips span { background: rgba(178, 133, 32, .12); color: #8A6413; }

/* IN FLIGHT — the quiet one: plain reference data */
.stat2.quiet { background: rgba(255, 255, 255, .85); border: 1px solid var(--line); }
.stat2.quiet .s2-label { color: var(--text-2); }
.stat2.quiet .s2-sub { color: var(--text-2); }

/* range bar: label + presets + custom dates */
.rangebar { margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px;
  color: var(--text-2); }
.rangebar > .ic { margin-left: 4px; }
.rangebar button.rb { border: none; background: none; padding: 6px 12px; border-radius: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.rangebar button.rb.on { background: var(--kia-midnight); color: #fff; }
.rangebar button.rb:hover:not(.on) { background: #F4F6F8; color: var(--text); }
.rangebar input[type=date] { width: 130px; padding: 5px 7px; font-size: 12px; }
.cf-banner { display: inline-flex; align-items: center; gap: 8px; background: var(--kia-midnight);
  color: #fff; border-radius: 14px; padding: 4px 6px 4px 13px; font-size: 12px;
  font-weight: 700; margin-left: 10px; }
.cf-banner button { background: rgba(255, 255, 255, .18); border: none; color: #fff;
  border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: 11px;
  line-height: 1; }
.cf-banner button:hover { background: #4A6274; }

/* ---------- v5: icon system, tooltips, modal design, WCAG action bar ---------- */
.ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: none; }
.icb { display: inline-flex; align-items: center; justify-content: center; width: 36px;
  height: 36px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
  color: var(--text-2); cursor: pointer; transition: all .12s; }
.icb:hover { color: var(--kia-midnight); border-color: var(--kia-midnight); background: #F4F6F8; }
.icb.danger:hover { background: var(--kia-red); color: #fff; }
.icb .ic { width: 17px; height: 17px; }

/* tooltips: rendered by the single fixed .tipbox on <body> (see app.js) — the old per-element
   ::after tooltip was removed in v10 because scroll containers (.tbl-scroll) clipped it. */

/* primary action: short readable button + consequence caption OUTSIDE it (WCAG) */
.pa-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.pa-cap { font-size: 11px; color: var(--text-2); font-weight: 600; letter-spacing: .3px;
  white-space: nowrap; }
.pa-cap.warn { color: var(--kia-red); }

/* modal redesign: dark header band, Fibonacci spacing scale (8/13/21/34/55) */
@keyframes modalin { from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: none; } }
.modal { animation: modalin .18s ease-out; padding: 0 0 21px; overflow: hidden; }
.modal > h3 { background: linear-gradient(120deg, var(--kia-midnight), #10283C);
  color: #fff; margin: 0 0 21px; padding: 21px 55px 21px 21px; font-size: 16.5px;
  position: relative; }
.modal > h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: #33505F; }
.modal > *:not(h3) { margin-left: 21px; margin-right: 21px; }
.modal-x { top: 13px; right: 13px; color: #B9C2C9; z-index: 5; }
.modal-x:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* status-colored chart bars + label tooltips */
.bars .bar-row .b i { background: var(--kia-midnight); }
.bars .bar-row .lblrow span[data-tip] { overflow: hidden; text-overflow: ellipsis; }

/* pre-work: how-it-works strip */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 800px) { .steps3 { grid-template-columns: 1fr; } }
.step3 { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display: flex; gap: 13px; align-items: flex-start;
  box-shadow: var(--shadow); border-top: 3px solid var(--kia-midnight); }
.step3 .num { width: 30px; height: 30px; border-radius: 50%; background: var(--kia-midnight);
  color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center;
  justify-content: center; flex: none; }
.step3 .t3 { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.step3 .d3 { font-size: 12px; color: var(--text-2); line-height: 1.45; }

/* assessment rating: color-coded scale + progress */
.rate button.sel-lo { background: var(--kia-red); border-color: var(--kia-red); color: #fff; }
.rate button.sel-mid { background: #E3A008; border-color: #E3A008; color: #fff; }
.rate button.sel-hi { background: var(--ok); border-color: var(--ok); color: #fff; }
.scale-legend { display: flex; justify-content: space-between; font-size: 11px;
  color: var(--text-2); margin: 4px 2px 12px; }
.progress-pill { background: var(--kia-midnight); color: #fff; border-radius: 14px;
  padding: 5px 14px; font-size: 12px; font-weight: 700; }
.progress-pill.done { background: var(--ok); }

/* new plan step number badges */
.stepnum { display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  background: var(--kia-midnight); color: #fff; font-size: 13px; font-weight: 800;
  align-items: center; justify-content: center; margin-right: 4px; }

/* login polish */
.login-card { animation: modalin .25s ease-out; }
.login-kbar { width: 44px; height: 4px; background: var(--kia-midnight); margin-bottom: 18px; }

/* ---------- v4 (Krug pass): action bar, segmented, richer widgets ---------- */
.actionbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-primary-action { background: var(--accent); color: #fff; padding: 12px 22px;
  font-size: 14px; box-shadow: 0 3px 10px rgba(5, 20, 31, .25); }
.btn-primary-action:hover { background: var(--accent-hover); }
.btn-primary-action .sub { display: block; font-size: 10.5px; font-weight: 500;
  opacity: .85; margin-top: 2px; letter-spacing: .3px; }
.moremenu { position: relative; display: inline-block; }
.moremenu .menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff;
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 10px 30px rgba(5, 20, 31, .18);
  min-width: 300px; z-index: 50; padding: 6px; display: none; }
.moremenu.open .menu { display: block; }
.moremenu .menu button { display: flex; width: 100%; align-items: center; gap: 10px;
  background: none; border: none; text-align: left; padding: 10px 12px; border-radius: 4px;
  cursor: pointer; font-size: 13.5px; }
.moremenu .menu button:hover { background: #F4F6F8; }
.moremenu .menu button .dir { margin-left: auto; font-size: 11.5px; color: var(--text-2);
  white-space: nowrap; }
.moremenu .menu button .dir.back { color: var(--kia-red); font-weight: 700; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.seg button { border: none; background: #fff; padding: 6px 14px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; color: var(--text-2); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: none; }
.seg button.on-yes { background: var(--ok); color: #fff; }
.seg button.on-no { background: var(--kia-red); color: #fff; }
.seg button.on-neutral { background: var(--kia-midnight); color: #fff; }

/* stat cards v2 — icon medallion + accent edge */
.stat { display: flex; align-items: center; gap: 14px; border-top: 3px solid var(--kia-midnight);
  padding: 18px; }
.stat.red { border-top-color: var(--kia-red); }
.stat.green { border-top-color: var(--ok); }
.stat .ico { width: 44px; height: 44px; border-radius: 50%; background: #F0F3F5; flex: none;
  display: flex; align-items: center; justify-content: center; }
.stat .ico svg { width: 22px; height: 22px; stroke: var(--kia-midnight); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat.red .ico { background: #FBE9EC; }
.stat.red .ico svg { stroke: var(--kia-red); }
.stat.green .ico { background: #E5F3EB; }
.stat.green .ico svg { stroke: var(--ok); }
.stat .n { font-size: 32px; }

/* bar charts v2 — thick rounded animated bars with value pills */
.bars .bar-row { grid-template-columns: 110px 1fr 46px; margin-bottom: 10px; }
.bars .bar-row .b { height: 18px; border-radius: 9px; background: #EFF2F4;
  box-shadow: inset 0 1px 2px rgba(5, 20, 31, .06); }
.bars .bar-row .b i { border-radius: 9px;
  background: linear-gradient(90deg, #0E2435, var(--kia-midnight));
  transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.bars .bar-row.red .b i { background: linear-gradient(90deg, var(--kia-red-dark), var(--kia-red)); }
.bars .bar-row.green .b i { background: linear-gradient(90deg, #14663A, var(--ok)); }
.bars .bar-row b { background: #F0F3F5; border-radius: 10px; text-align: center;
  font-size: 11.5px; padding: 2px 0; }
.bars .bar-row .lblrow { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bars .bar-row .lblrow .sdot2 { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.card h2 .subcap { font-weight: 400; font-size: 12px; color: var(--text-2);
  text-transform: none; letter-spacing: 0; margin-left: 6px; }
.rate button { width: 38px; height: 34px; font-size: 14px; }
.score-row:hover { background: #FAFBFC; }

/* ---------- v3 polish: journey band, back nav, focus, zebra ---------- */
.backbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 600; color: var(--text-2); text-decoration: none; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.backbtn:hover { color: var(--kia-midnight); border-color: var(--kia-midnight); }

/* hero progress band — dark, echoes the KRC header, distinct from other cards */
.stepper-band { background: linear-gradient(120deg, var(--kia-midnight) 0%, #0E2435 70%, #14293A 100%);
  border: none; border-radius: var(--radius); box-shadow: 0 6px 20px rgba(5, 20, 31, .25);
  padding: 24px 30px; margin-bottom: 18px; display: flex; align-items: center; gap: 34px;
  position: relative; overflow: hidden; }
.stepper-band::after { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: rgba(255, 255, 255, .25); }
.stepper-band .stepper { flex: 1; }
.stepper-band .step::before { background: #24384A; }
.stepper-band .step .dot { background: transparent; border-color: #37505F; color: #7A8B96; }
.stepper-band .step .lbl { color: #7A8B96; }
.stepper-band .step.done .dot { background: #fff; border-color: #fff; color: var(--kia-midnight); }
.stepper-band .step.done::before { background: rgba(255, 255, 255, .75); }
.stepper-band .step.done .lbl { color: #fff; }
.stepper-band .step.cur .dot { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .12); }
.stepper-band .step.cur .lbl { color: #fff; font-weight: 700; }
.stepper-band .step.warn .dot { background: var(--kia-red); border-color: #FF6B7E; color: #fff;
  box-shadow: 0 0 0 5px rgba(196, 23, 44, .35); }
.stepper-band .step.warn .lbl { color: #FF8B99; font-weight: 700; }
.pctbig { text-align: right; color: #fff; min-width: 110px; }
.pctbig .n2 { font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.pctbig .n2 small { font-size: 20px; font-weight: 600; color: #8FA0AC; }
.pctbig .pctlbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: #8FA0AC; margin-top: 5px; }
.pctbig .pctlbl.warn { color: #FF8B99; font-weight: 700; }

.nav a { transition: background .12s; }
.nav a:hover { background: rgba(255, 255, 255, .06); }
.stat { transition: transform .12s, box-shadow .12s; }
.stat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(5, 20, 31, .12); }
.tbl tbody tr:nth-child(even) td { background: #FBFCFC; }
.tbl tr:hover td { background: #F4F6F8 !important; }
:focus-visible { outline: 2px solid rgba(5, 20, 31, .45); outline-offset: 1px; }
.page-title h1 { letter-spacing: -.4px; }
.modal { position: relative; }
.modal-x { position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--text-2); cursor: pointer; padding: 4px 8px;
  border-radius: 4px; }
.modal-x:hover { color: var(--kia-midnight); background: #F0F3F5; }
@media print { .stepper-band { background: #fff !important; box-shadow: none;
  border: 1px solid #ccc; } .stepper-band .step .lbl, .pctbig, .pctbig .n2 { color: #05141F !important; } }

/* ---------- v2: stepper / board / cards / avatars / chips ---------- */
.av { display: inline-flex; align-items: center; justify-content: center; width: 26px;
  height: 26px; border-radius: 50%; background: var(--kia-midnight); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; flex: none; }
.av.lite { background: #E8EDF1; color: #33475B; }

.stepper { display: flex; align-items: flex-start; gap: 0; margin: 6px 0 2px; width: 100%; }
.step { flex: 1; text-align: center; position: relative; min-width: 0; }
.step .dot { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 5px;
  background: #fff; border: 2px solid var(--line); display: flex; align-items: center;
  justify-content: center; font-size: 11px; color: var(--text-2); position: relative; z-index: 2; }
.step .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%;
  height: 2px; background: var(--line); z-index: 1; }
.step:first-child::before { display: none; }
.step.done .dot { background: var(--kia-midnight); border-color: var(--kia-midnight); color: #fff; }
.step.done::before { background: var(--kia-midnight); }
.step.done .lbl { color: var(--text); font-weight: 600; }
.step.cur .dot { border-color: var(--kia-midnight); color: var(--kia-midnight); font-weight: 800;
  box-shadow: 0 0 0 4px rgba(5, 20, 31, .10); }
.step.cur .lbl { color: var(--kia-midnight); font-weight: 700; }
.step.warn .dot { background: var(--kia-red); border-color: var(--kia-red); color: #fff; }
.step.warn .lbl { color: var(--kia-red); font-weight: 700; }

.board { display: grid; gap: 12px; align-items: start; }
.board.cols5 { grid-template-columns: repeat(5, 1fr); }
.board.cols4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .board.cols5, .board.cols4 { grid-template-columns: repeat(2, 1fr); } }
.bcol { background: #EFF1F3; border-radius: 6px; padding: 10px; min-height: 90px; }
.bcol .bhead { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-2); margin: 2px 4px 10px; }
.bcol .bhead .cnt { margin-left: auto; background: #fff; border-radius: 10px; padding: 1px 8px;
  font-size: 11px; color: var(--text); }
.bcol .bhead .dot2 { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); }
.bcol.c-now .bhead .dot2 { background: var(--kia-red); }
.bcol.c-near .bhead .dot2 { background: #E3A008; }
.bcol.c-far .bhead .dot2 { background: #1D4F91; }
.bcol.c-warn .bhead .dot2 { background: var(--kia-red); }
.bcol.c-done .bhead .dot2 { background: var(--ok); }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 11px 12px;
  margin-bottom: 8px; cursor: pointer; box-shadow: 0 1px 2px rgba(5, 20, 31, .05);
  transition: box-shadow .12s, transform .12s; }
.pcard:hover { box-shadow: 0 4px 12px rgba(5, 20, 31, .12); transform: translateY(-1px); }
.pcard .t { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
.pcard .sub2 { font-size: 11.5px; color: var(--text-2); margin-bottom: 8px; }
.pcard .foot { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-2); }
.pcard .foot .due { margin-left: auto; }
.pcard .foot .due.over { color: var(--kia-red); font-weight: 700; }
.pcard .kchip { display: inline-block; background: #F1F3F5; border-radius: 3px; padding: 2px 7px;
  font-size: 10.5px; color: #33475B; margin: 0 4px 4px 0; }
.scorebar { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2);
  margin: 6px 0; }
.scorebar .sb { flex: 1; height: 5px; background: #EDF0F2; border-radius: 3px; overflow: hidden; }
.scorebar .sb i { display: block; height: 100%; background: var(--kia-midnight); }

.quickchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.qchip { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 6px 14px;
  font-size: 12.5px; cursor: pointer; color: var(--text-2); font-weight: 600; }
.qchip.on { background: var(--kia-midnight); color: #fff; border-color: var(--kia-midnight); }
.qchip:hover:not(.on) { border-color: var(--kia-midnight); color: var(--text); }

.viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.viewtoggle button { border: none; background: #fff; padding: 7px 14px; font-size: 12.5px;
  cursor: pointer; color: var(--text-2); font-weight: 600; }
.viewtoggle button.on { background: var(--kia-midnight); color: #fff; }

.statuspill { display: inline-flex; align-items: center; gap: 6px; }
.statuspill .sdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.empty2 { text-align: center; padding: 42px 16px; color: var(--text-2); }
.empty2 .big { font-size: 34px; margin-bottom: 8px; }
.empty2 .cta { margin-top: 14px; }

/* ---------- busy indicators ---------- */
#busybar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  display: none; background: linear-gradient(90deg, var(--kia-midnight), #4A6274, var(--kia-midnight));
  background-size: 200% 100%; animation: busyslide 1s linear infinite; }
@keyframes busyslide { to { background-position: -200% 0; } }
.btnspin { display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite; }
.btn-ghost .btnspin, .icon-btn .btnspin { border-color: var(--line); border-top-color: var(--kia-midnight); }

/* ---------- print ---------- */
@media print {
  .hdr, .no-print, .toast { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .wrap { max-width: 100%; padding: 0; }
}

/* ---------- v7 (Sept): chart panels — flat, clickable, range-scoped ---------- */
.bars .bar-row { grid-template-columns: 150px 1fr 74px; margin-bottom: 4px; padding: 7px 8px;
  border-radius: 4px; cursor: pointer; transition: background .12s; align-items: center; }
.bars .bar-row:hover { background: #F4F6F8; }
.bars .bar-row .b { height: 12px; border-radius: 2px; background: #EEF1F3; box-shadow: none; }
.bars .bar-row .b i { border-radius: 2px; }
.bars .bar-row b { background: none; border-radius: 0; text-align: right; font-size: 12px;
  color: var(--text-2); font-weight: 600; padding: 0; white-space: nowrap; }
.bars .bar-row b strong { color: var(--text); font-size: 13px; }
.bars .bar-row .lblrow { font-size: 12.5px; font-weight: 600; }
.bars .bar-row .lblrow .sdot2 { width: 9px; height: 9px; border-radius: 2px; }
.panel-foot { font-size: 11.5px; color: var(--text-2); margin-top: 10px; }


/* ================================================================== v8 (Sept 23): accent color, background, form grids, guidance ================================================================== */
:root {
  --accent: #1B7A9A;          /* teal accent — primary actions, selection, section markers */
  --accent-hover: #15627C;
  --accent-ink: #14586F;      /* accent used as text */
  --accent-soft: #E6F1F6;     /* accent tint for backgrounds */
  --accent-line: #B4D5E2;
  --accent-bright: #5FB9D6;   /* accent on dark surfaces */
  --radius: 8px;
  --line: #DFE4E8;
}
body { background: #F4F6F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3CradialGradient id='a' cx='12%' cy='-5%' r='70%'%3E %3Cstop offset='0' stop-color='%231B7A9A' stop-opacity='.13'/%3E %3Cstop offset='1' stop-color='%231B7A9A' stop-opacity='0'/%3E %3C/radialGradient%3E %3CradialGradient id='b' cx='100%' cy='105%' r='65%'%3E %3Cstop offset='0' stop-color='%2305141F' stop-opacity='.10'/%3E %3Cstop offset='1' stop-color='%2305141F' stop-opacity='0'/%3E %3C/radialGradient%3E %3ClinearGradient id='c' x1='0' y1='0' x2='1' y2='1'%3E %3Cstop offset='0' stop-color='%23F6F8F9'/%3E %3Cstop offset='1' stop-color='%23EEF2F4'/%3E %3C/linearGradient%3E %3C/defs%3E %3Crect width='1600' height='1000' fill='url(%23c)'/%3E %3Crect width='1600' height='1000' fill='url(%23a)'/%3E %3Crect width='1600' height='1000' fill='url(%23b)'/%3E %3Cg stroke='%2305141F' stroke-opacity='.045' stroke-width='1.2' fill='none'%3E %3Cpath d='M1180 0 L1600 420'/%3E%3Cpath d='M1240 0 L1600 360'/%3E%3Cpath d='M1300 0 L1600 300'/%3E %3Cpath d='M1360 0 L1600 240'/%3E%3Cpath d='M1420 0 L1600 180'/%3E%3Cpath d='M1480 0 L1600 120'/%3E %3C/g%3E %3Cg stroke='%231B7A9A' stroke-opacity='.10' stroke-width='2' fill='none'%3E %3Cpath d='M1120 0 L1600 480'/%3E %3C/g%3E %3Cg stroke='%2305141F' stroke-opacity='.04' stroke-width='1.2' fill='none'%3E %3Cpath d='M0 640 L360 1000'/%3E%3Cpath d='M0 700 L300 1000'/%3E%3Cpath d='M0 760 L240 1000'/%3E%3Cpath d='M0 820 L180 1000'/%3E %3C/g%3E %3Cg fill='%231B7A9A' fill-opacity='.06'%3E %3Ccircle cx='80' cy='120' r='3'/%3E%3Ccircle cx='140' cy='60' r='2'/%3E%3Ccircle cx='40' cy='220' r='2'/%3E %3C/g%3E %3C/svg%3E") center / cover no-repeat fixed; }
@media print { body { background: #fff; } }

/* header: teal underline on the active tab */
.nav a.on { border-bottom-color: var(--accent-bright); }
.role-chip { background: var(--accent); }

/* cards + headings */
.card { border-radius: var(--radius); border-color: rgba(5, 20, 31, .08); }
.card h2 { gap: 10px; }
.card h2 .accent { background: var(--accent); border-radius: 2px; }
.h2ic { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.h2ic .ic { width: 15px; height: 15px; }
.h2sub { font-weight: 400; font-size: 12.5px; color: var(--text-2); margin-left: 8px; letter-spacing: 0; }
.stepnum { background: var(--accent); width: 28px; height: 28px; margin-right: 6px; }

/* buttons: teal primary, midnight secondary, matched heights in the action bar */
.btn { border-radius: 6px; }
.btn-red, .btn-primary-action { background: var(--accent); }
.btn-red:hover, .btn-primary-action:hover { background: var(--accent-hover); }
.btn-primary-action { box-shadow: 0 3px 10px rgba(27, 122, 154, .28); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.actionbar { align-items: flex-start; }
.actionbar .btn-ghost { min-height: 42px; padding: 0 16px; font-size: 13.5px; background: #fff; }
.actionbar .icb { width: 42px; height: 42px; }
.moremenu .menu { border-radius: 8px; }
.icb:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.backbtn:hover { color: var(--accent-ink); border-color: var(--accent); }

/* links, tabs, chips, selection states */
.tbl .title-link { color: var(--accent-ink); }
.tabs button.on { border-bottom-color: var(--accent); color: var(--accent-ink); }
.qchip.on { background: var(--accent); border-color: var(--accent); }
.qchip:hover:not(.on) { border-color: var(--accent); color: var(--accent-ink); }
.progress-pill { background: var(--accent); }
.cf-banner { background: var(--accent); }
.step3 { border-top-color: var(--accent); }
.step3 .num { background: var(--accent); }
.cmt { border-left-color: var(--accent); }
.login-kbar { background: var(--accent); }
.scorebar .sb i, .pbar i { background: var(--accent); }
.pbar.done i { background: var(--ok); }
.bars .bar-row .b i { background: var(--kia-midnight); }
:focus-visible { outline-color: rgba(27, 122, 154, .55); }

/* forms: sentence-case labels with an icon, explicit grids instead of auto-fit */
label.f { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
label.f .ic { width: 14px; height: 14px; color: var(--accent-ink); }
.req::after { content: " *"; color: var(--kia-red); }
input[type=text], input[type=email], input[type=date], input[type=number], select, textarea {
  padding: 10px 12px; border-radius: 6px; border-color: #D3DAE0; transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: #AEB9C2; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 122, 154, .18); }
input:disabled { background: #F4F6F8; color: var(--text-2); }
.hint { margin-top: 5px; line-height: 1.4; }
.fg { display: grid; gap: 16px 20px; margin-bottom: 18px; align-items: start; }
.fg.c1 { grid-template-columns: 1fr; }
.fg.c2 { grid-template-columns: 1fr 1fr; }
.fg.c3 { grid-template-columns: repeat(3, 1fr); }
.fg.c4 { grid-template-columns: repeat(4, 1fr); }
.fg.c21 { grid-template-columns: 2fr 1fr; }
.fg.c211 { grid-template-columns: 2fr 1fr 1fr; }
.fg .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .fg.c2, .fg.c3, .fg.c4, .fg.c21, .fg.c211 { grid-template-columns: 1fr; } }
.fsec { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-2); margin: 4px 0 10px; }
.fsec .ic { color: var(--accent-ink); }
.optional-fields { margin-top: 4px; }
.optional-fields summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; list-style: none; }
.optional-fields summary::-webkit-details-marker { display: none; }
.optional-fields summary::before { content: "+"; font-weight: 800; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; }
.optional-fields[open] summary::before { content: "–"; }

/* opportunity-area chips: tidy grid, wraps long labels, check mark when selected */
.areawrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.areachip { border-radius: 6px; padding: 9px 12px; justify-content: space-between; white-space: normal;
  line-height: 1.3; transition: border-color .12s, background .12s; }
.areachip:hover { border-color: var(--accent); }
.areachip.sel { background: var(--accent); border-color: var(--accent); }
.areachip.sel::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 800; }
.areagroup { margin-bottom: 16px; }
.areagroup .gl { color: var(--accent-ink); margin-bottom: 8px; }

/* modal: a little wider for the three-column rows */
.modal { width: 820px; }
.modal > h3::after { background: var(--accent); }
.modal > h3 { padding: 21px 55px 21px 21px; }
.modal .fg:last-of-type { margin-bottom: 14px; }

/* plan page: next-step hint */
.nextstep { display: inline-flex; align-items: center; gap: 9px; background: var(--accent-soft);
  color: var(--accent-ink); border: 1px solid var(--accent-line); border-radius: 8px; padding: 9px 14px;
  font-size: 13px; margin-bottom: 16px; }
.nextstep b { font-weight: 800; }
.nextstep span { color: var(--text); }

/* dashboard: dismissible how-it-works strip */
.guide { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--accent-line); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 12px 16px; margin: 0 0 18px; box-shadow: var(--shadow); }
.guide .gs { display: flex; gap: 11px; align-items: center; text-decoration: none; color: inherit;
  padding: 6px 8px; border-radius: 6px; }
.guide .gs:hover { background: var(--accent-soft); }
.guide .gn { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.guide .gt { display: block; font-weight: 700; font-size: 13px; }
.guide .gd { display: block; font-size: 12px; color: var(--text-2); line-height: 1.35; }
.guide .gx { background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 13px;
  width: 28px; height: 28px; border-radius: 50%; }
.guide .gx:hover { background: #F0F3F5; color: var(--text); }
.guide-link { background: none; border: none; color: var(--accent-ink); font-weight: 600; font-size: 12.5px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0 0 12px; }
.guide-link:hover { text-decoration: underline; }
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; } }

/* board cards */
.pcard { border-radius: 8px; }
.pcard .sub2 { display: flex; align-items: center; gap: 5px; }
.pcard .sub2 .ic, .pcard .due .ic { width: 12px; height: 12px; color: var(--text-2); vertical-align: -2px; }
.bcol { background: rgba(239, 241, 243, .9); border-radius: 8px; }

/* misc polish */
.stat2 { border-radius: 10px; }
.rangebar { border-radius: 8px; }
.seg, .viewtoggle { border-radius: 6px; }
.filters { gap: 12px 14px; }
.att { border-radius: 6px; }
.chip { border-radius: 4px; }
.toast { border-radius: 8px; }
.hdr-right .who b { color: #fff; }

/* page-level form footers */
.formfoot { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; }
.formfoot .btn-ghost, .formfoot .btn-dark { min-height: 42px; padding: 0 18px; font-size: 13.5px; }
.formfoot .btn-ghost { background: #fff; }
.formfoot .pa-cap { text-align: center; }


/* ================================================================== v8.1: dark guidance surfaces ==================================================================
   Rule: dark background + light text is reserved for the surfaces that orient the user —
   the "how it works" strips (dashboard, Pre-Work) and the plan's progress band with its next step.
   Data cards, forms and tables stay light. */
.guide { background: linear-gradient(120deg, var(--kia-midnight) 0%, #0E2435 65%, #123444 100%);
  border: none; border-left: 4px solid var(--accent-bright); color: #fff; box-shadow: 0 8px 24px rgba(5, 20, 31, .22); }
.guide .gs:hover { background: rgba(255, 255, 255, .07); }
.guide .gn { background: var(--accent-bright); color: var(--kia-midnight); }
.guide .gt { color: #fff; }
.guide .gd { color: #B4C2CC; }
.guide .gx { color: #B4C2CC; }
.guide .gx:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.steps3 { gap: 12px; }
.step3 { background: linear-gradient(120deg, var(--kia-midnight) 0%, #0E2435 70%, #123444 100%);
  border: none; border-top: 3px solid var(--accent-bright); color: #fff; box-shadow: 0 6px 20px rgba(5, 20, 31, .2); }
.step3 .num { background: var(--accent-bright); color: var(--kia-midnight); }
.step3 .t3 { color: #fff; }
.step3 .d3 { color: #B4C2CC; }

.stepper-band { flex-wrap: wrap; row-gap: 16px; }
.stepper-band .nextstep { flex-basis: 100%; margin: 0; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.stepper-band .nextstep .ic { color: var(--accent-bright); }
.stepper-band .nextstep b { color: var(--accent-bright); }
.stepper-band .nextstep span { color: #E6ECF0; }
.stepper-band .step.cur .dot { border-color: var(--accent-bright); color: #fff;
  box-shadow: 0 0 0 5px rgba(95, 185, 214, .18); }
.stepper-band .step.cur .lbl { color: var(--accent-bright); }
@media print { .stepper-band .nextstep { display: none; } }

/* range bar gains a 60d stop; keep it from crowding */
.rangebar button.rb { padding: 6px 10px; }

/* chart labels: the new journey labels are long — give them room and let them wrap to two lines */
.bars .bar-row { grid-template-columns: minmax(180px, 42%) 1fr 74px; }
.bars .bar-row .lblrow { white-space: normal; line-height: 1.25; overflow: visible; }
.bars .bar-row .lblrow span[data-tip] { overflow: visible; text-overflow: clip; white-space: normal; }


/* ================================================================== v9 (Sept 30): design lift ==================================================================
   White KRC-style nav · full-bleed page header bands · saturated status colors · month-based horizons ·
   journey tabs · form progress tracker · scorecard polish. Red stays a data color. */
:root {
  --hz-now: #FF7A1A; --hz-near: #F5A800; --hz-far: #2563EB; --hz-none: #AEB9C2;
  --pop-red: #E0263A; --pop-amber: #F5A800; --pop-green: #1FA463; --pop-blue: #2563EB; --pop-slate: #3B5A77;
}
body { overflow-x: hidden; }

/* ---------- nav: white, black text, teal underline (matches the KRC site) ---------- */
.hdr { background: #fff; color: var(--kia-midnight); border-bottom: 1px solid #E6E8EB;
  box-shadow: 0 6px 20px rgba(5, 20, 31, .05); }
.hdr-inner { height: 66px; }
.brand { color: var(--kia-midnight); }
.brand .bar { color: #C7CDD1; }
.brand .app { color: #5B6770; font-weight: 500; }
.nav a { color: #1F2A33; font-weight: 600; font-size: 14.5px; padding: 0 16px; }
.nav a:hover { color: var(--kia-midnight); background: #F4F6F8; }
.nav a.on { color: var(--kia-midnight); border-bottom-color: var(--accent); }
.hdr-right .who { color: #5B6770; }
.hdr-right .who b { color: var(--kia-midnight); }
.signout { border-color: #D5DBE0; color: #1F2A33; background: #fff; }
.signout:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---------- full-bleed page header band ---------- */
.hero { width: 100vw; margin: -24px 0 24px calc(50% - 50vw); padding: 30px 24px 30px; color: #fff;
  background: radial-gradient(60% 140% at 100% 0%, rgba(95, 185, 214, .22), transparent 60%),
              linear-gradient(120deg, var(--kia-midnight) 0%, #0E2435 60%, #133A4A 100%); }
.hero-in { max-width: 1232px; margin: 0 auto; }
.hero .page-title { margin-bottom: 0; align-items: center; gap: 16px; }
.hero .page-title h1 { color: #fff; font-size: 28px; line-height: 1.15; letter-spacing: -.5px; }
.hero .page-title .sub { display: block; color: #B4C2CC; margin-top: 6px; font-size: 14px; }
.eyebrow { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-bright); font-weight: 800; margin-bottom: 7px; }
.hero .crumbrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.hero .crumb { color: #B4C2CC; }
.hero .backbtn { background: rgba(255, 255, 255, .08); color: #DCE4EA; border-color: rgba(255, 255, 255, .22); }
.hero .backbtn:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: #fff; }
.hero-actions { display: inline-flex; gap: 10px; align-items: center; }
.hero .btn-light { background: #fff; color: var(--kia-midnight); }
.hero .btn-light:hover { background: #E9F3F7; }
.hero .btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .28); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
.hero .icb { background: rgba(255, 255, 255, .08); color: #DCE4EA; border-color: rgba(255, 255, 255, .28); }
.hero .icb:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: #fff; }
.hero .icb.danger:hover { background: var(--pop-red); border-color: var(--pop-red); }
.hero .pa-cap { color: #B4C2CC; }
.hero .pa-cap.warn { color: #FF8B99; }
.hero .moremenu .menu { color: var(--text); }
.hero .guide { margin: 22px 0 0; background: rgba(255, 255, 255, .06); box-shadow: none; border-left-color: var(--accent-bright); }
.hero .guide-link { color: var(--accent-bright); padding: 14px 0 0; }
.hero .steps3 { margin: 22px 0 0; }
.hero .step3 { background: rgba(255, 255, 255, .06); box-shadow: none; }
.hero .stepper-band { background: transparent; box-shadow: none; border-radius: 0; margin: 22px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12); }
.hero .stepper-band::after { display: none; }
.hero .progress-pill { background: rgba(255, 255, 255, .14); }
.hero .progress-pill.done { background: var(--pop-green); }
.hero-done { background: radial-gradient(60% 140% at 100% 0%, rgba(255, 255, 255, .14), transparent 60%),
  linear-gradient(120deg, #0B3D2A 0%, #14663A 60%, #1E7B44 100%); }
.hero-warn { background: radial-gradient(60% 140% at 100% 0%, rgba(255, 255, 255, .10), transparent 60%),
  linear-gradient(120deg, #2A0A10 0%, #5A1220 60%, #7A1A2A 100%); }
.hero-done .eyebrow, .hero-warn .eyebrow { color: #fff; opacity: .85; }
@media print { .hero { background: #fff !important; color: var(--kia-midnight); margin: 0; width: auto; padding: 0 0 12px; }
  .hero .page-title h1, .hero .sub, .hero .crumb { color: var(--kia-midnight) !important; } }

/* ---------- "right now" tiles: solid, saturated, white type ---------- */
.stat2 { backdrop-filter: none; -webkit-backdrop-filter: none; border: none; color: #fff; min-height: 132px;
  box-shadow: 0 10px 24px rgba(5, 20, 31, .16); }
.stat2::after { content: ""; position: absolute; right: -22px; bottom: -22px; width: 104px; height: 104px;
  border-radius: 50%; background: rgba(255, 255, 255, .10); pointer-events: none; }
.stat2 .s2-label, .stat2 .s2-num, .stat2 .s2-go, .stat2 .s2-sub { color: #fff; }
.stat2 .s2-sub { opacity: .88; }
.stat2 .s2-num .unit { opacity: .9; }
.stat2 .s2-chips span { background: rgba(255, 255, 255, .2); color: #fff; }
.stat2.alarm { background: linear-gradient(135deg, #E63946 0%, #A8162A 100%); }
.stat2.alarm .s2-label, .stat2.alarm .s2-num, .stat2.alarm .s2-go { color: #fff; }
.stat2.alarm .pulse { background: #fff; }
@keyframes pulsedot { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.stat2.allclear { background: linear-gradient(135deg, #1FA463 0%, #14663A 100%); }
.stat2.allclear .s2-label, .stat2.allclear .s2-num, .stat2.allclear .s2-go { color: #fff; }
.stat2.due { background: linear-gradient(135deg, #FFB81C 0%, #F08A00 100%); color: #1A1200; }
.stat2.due .s2-label, .stat2.due .s2-num, .stat2.due .s2-go, .stat2.due .s2-sub { color: #1A1200; }
.stat2.due .s2-chips span { background: rgba(0, 0, 0, .12); color: #1A1200; }
.stat2.win { background: linear-gradient(135deg, #22B573 0%, #137A48 100%); }
.stat2.win .s2-label, .stat2.win .s2-num, .stat2.win .s2-go { color: #fff; }
.stat2.win .s2-chips span { background: rgba(255, 255, 255, .2); color: #fff; }
.stat2.quiet { background: linear-gradient(135deg, #1F4A63 0%, #0E2435 100%); border: none; }
.stat2.quiet .s2-label, .stat2.quiet .s2-sub { color: #DCE4EA; }
.stat2.click:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(5, 20, 31, .24); }
.statshead .sh-t { color: var(--kia-midnight); }

/* ---------- status + month chips that pop ---------- */
.chip { border-radius: 999px; padding: 4px 11px; }
.st-new { background: var(--pop-slate); color: #fff; }
.st-open { background: var(--pop-blue); color: #fff; }
.st-in_progress { background: var(--pop-amber); color: #1A1200; }
.st-late, .st-not_approved { background: var(--pop-red); color: #fff; }
.st-incomplete { background: #8A8F94; color: #fff; }
.st-approved { background: var(--pop-green); color: #fff; }
.st-closed { background: var(--kia-midnight); color: #fff; }
.horizon-now { background: var(--hz-now); color: #fff; }
.horizon-near { background: var(--hz-near); color: #1A1200; }
.horizon-far { background: var(--hz-far); color: #fff; }
.statuspill.st-in_progress { color: #B57E10; }
.statuspill.st-late, .statuspill.st-not_approved { color: var(--pop-red); }
.statuspill.st-open { color: var(--pop-blue); }
.statuspill.st-new { color: var(--pop-slate); }
.statuspill.st-approved { color: var(--pop-green); }
.statuspill.st-closed { color: var(--kia-midnight); }
.statuspill.st-incomplete { color: #8A8F94; }
.bcol.c-now .bhead .dot2 { background: var(--hz-now); }
.bcol.c-near .bhead .dot2 { background: var(--hz-near); }
.bcol.c-far .bhead .dot2 { background: var(--hz-far); }
.bcol.c-warn .bhead .dot2 { background: var(--pop-red); }
.bcol.c-done .bhead .dot2 { background: var(--pop-green); }
.bcol .bhead { color: var(--kia-midnight); }
.pcard { border-left: 4px solid var(--hz-none); }
.pcard.hz-now { border-left-color: var(--hz-now); }
.pcard.hz-near { border-left-color: var(--hz-near); }
.pcard.hz-far { border-left-color: var(--hz-far); }
.pcard.pst-new { border-left-color: var(--pop-slate); }
.pcard.pst-open { border-left-color: var(--pop-blue); }
.pcard.pst-in_progress { border-left-color: var(--pop-amber); }
.pcard.pst-late, .pcard.pst-not_approved { border-left-color: var(--pop-red); }
.pcard.pst-incomplete { border-left-color: #8A8F94; }
.pcard.pst-approved { border-left-color: var(--pop-green); }
.pcard.pst-closed { border-left-color: var(--kia-midnight); }
.pcard .foot .due.over { color: var(--pop-red); }
.cf-banner, .qchip.on { background: var(--accent); }
.seg button.on-yes { background: var(--pop-green); }
.seg button.on-no { background: var(--pop-red); }
.rate button.sel-lo { background: var(--pop-red); border-color: var(--pop-red); }
.rate button.sel-mid { background: var(--pop-amber); border-color: var(--pop-amber); color: #1A1200; }
.rate button.sel-hi { background: var(--pop-green); border-color: var(--pop-green); }

/* ---------- journey picker: one tab per department ---------- */
.jtabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.jtab { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 14px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-2); cursor: pointer;
  display: inline-flex; gap: 8px; align-items: center; transition: color .12s; }
.jtab:hover { color: var(--kia-midnight); }
.jtab.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.jtab .jcount { background: #EEF1F3; color: var(--text-2); border-radius: 999px; min-width: 22px; padding: 2px 7px;
  font-size: 11px; text-align: center; line-height: 1.3; }
.jtab.has .jcount { background: var(--accent); color: #fff; }
.jpanel { display: none; }
.jpanel.on { display: block; animation: fadein .18s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.areachip { transition: transform .12s, background .12s, border-color .12s, box-shadow .12s; }
.areachip:active { transform: scale(.97); }
.areachip.sel { box-shadow: 0 4px 12px rgba(27, 122, 154, .28); }
.modal .jtab { padding: 8px 12px; font-size: 13px; }

/* ---------- Add Action Plan: progress tracker in the header band ---------- */
.formtrack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.ft { display: flex; gap: 11px; align-items: center; color: #B4C2CC; padding: 11px 13px; border-radius: 8px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); transition: background .2s, border-color .2s; }
.ft .ftn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); position: relative;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; flex: none; }
.ft b { display: block; color: #fff; font-size: 13px; }
.ft small { display: block; font-size: 11.5px; color: #B4C2CC; margin-top: 1px; }
.ft.done { background: rgba(31, 164, 99, .2); border-color: rgba(31, 164, 99, .55); }
.ft.done .ftn { background: var(--pop-green); border-color: var(--pop-green); color: transparent; }
.ft.done .ftn::after { content: "✓"; color: #fff; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 13px; }
.ftbar { grid-column: 1 / -1; height: 6px; background: rgba(255, 255, 255, .14); border-radius: 3px; overflow: hidden; }
.ftbar i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-bright), var(--pop-green)); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 760px) { .formtrack { grid-template-columns: 1fr; } }

/* ---------- Pre-Work scorecard ---------- */
.ratebar { height: 8px; background: #EEF1F3; border-radius: 4px; overflow: hidden; margin: -6px 0 14px; }
.ratebar i { display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--pop-green)); transition: width .35s; }
.score-cat { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-soft); padding: 7px 11px; border-radius: 6px; margin: 18px 0 4px; }
.score-row { padding: 11px 0; }
.rate button { border-radius: 8px; width: 40px; height: 36px; font-weight: 700; transition: all .12s; }
.rate button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }

/* ---------- general polish ---------- */
.card { padding: 24px; box-shadow: 0 1px 2px rgba(5, 20, 31, .04), 0 10px 30px rgba(5, 20, 31, .05); }
.card h2 { font-size: 15.5px; }
.tbl th { color: var(--text-2); border-bottom: 2px solid #E3E6E8; }
.tbl td { padding: 13px 12px; }
.btn-red, .btn-primary-action { background: linear-gradient(135deg, #1F8AAD 0%, var(--accent) 60%, var(--accent-hover) 100%); }
.btn-red:hover, .btn-primary-action:hover { background: var(--accent-hover); }
.btn-dark { background: var(--kia-midnight); }
.page-title h1 { font-size: 26px; }
.stepper-band .step.done .dot { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--kia-midnight); }
.stepper-band .step.done::before { background: rgba(95, 185, 214, .7); }
.hero-done .stepper-band .step.done .dot { background: #fff; border-color: #fff; }
.hero-done .stepper-band .step.done::before { background: rgba(255, 255, 255, .7); }
.hero-done .stepper-band .nextstep { display: none; }
.hero-warn .stepper-band .nextstep .ic, .hero-warn .stepper-band .nextstep b { color: #FFB3BC; }
.hero-warn .stepper-band .step.warn .dot { background: #fff; color: var(--pop-red); border-color: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .2); }
.hero-warn .stepper-band .step.warn .lbl, .hero-warn .pctbig .pctlbl.warn { color: #fff; }
.login-bg { background: radial-gradient(60% 140% at 100% 0%, rgba(95, 185, 214, .22), transparent 60%),
  linear-gradient(160deg, var(--kia-midnight) 0%, #0E2435 60%, #133A4A 100%); }


/* ---------- v9.1: Plans by Status as a column chart ---------- */
.cols { display: flex; align-items: flex-end; gap: 8px; height: 236px; padding: 6px 2px 0; position: relative; }
.cols::after { content: ""; position: absolute; left: 0; right: 0; bottom: 38px; border-top: 1px solid var(--line); }
.col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  cursor: pointer; border-radius: 8px; padding: 0 3px; transition: background .12s; }
.col:hover { background: #F4F6F8; }
.col .v { font-size: 13px; font-weight: 800; margin-bottom: 5px; white-space: nowrap; }
.col .v small { font-weight: 600; color: var(--text-2); font-size: 10.5px; }
.col.zero .v { color: var(--text-2); font-weight: 600; }
.col .bar { width: 100%; max-width: 46px; border-radius: 6px 6px 2px 2px; transition: height .6s cubic-bezier(.2, .8, .2, 1);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.col.zero .bar { height: 3px !important; opacity: .35; }
.col .lbl { height: 38px; width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 9px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2);
  text-align: center; line-height: 1.2; }
.col:hover .lbl { color: var(--kia-midnight); }

/* v9.1.1: Plans by Status column chart + local-time date display fix */
/* v9.2: guided UX pass — see block at the end */


/* ---------- v9.2: guided UX pass ---------- */
/* column chart: bars live in their own flex area so they sit exactly on the baseline */
.col { padding: 0 3px; }
.col .barwrap { flex: 1; width: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; padding-top: 28px; box-sizing: border-box; }
.col .bar { position: relative; }
.col .bar .v { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin: 0 0 5px; }
.col.zero .bar .v { margin-bottom: 8px; }
.col .lbl { flex: none; }
.cols.instant .bar, .bars.instant .b i { transition: none !important; }

/* filter card */
.fcard h2 { align-items: center; }
.fcount { font-weight: 600; font-size: 11.5px; color: #fff; background: var(--accent); border-radius: 10px; padding: 2px 9px; margin-left: 10px; }
.fcount:empty { display: none; }
.flink { margin-left: auto; background: none; border: none; color: var(--accent-ink); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.flink:hover { background: var(--accent-soft); }
.fcard .quickchips { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.filters { display: block; }
.frow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.flab { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; min-width: 70px; }
.flab .ic { width: 13px; height: 13px; color: var(--accent-ink); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .12s; }
.pill i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pill:hover { border-color: var(--accent); color: var(--text); }
.pill.on { background: var(--kia-midnight); border-color: var(--kia-midnight); color: #fff; box-shadow: 0 2px 8px rgba(5, 20, 31, .2); }
.pill.on i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.fsel label.f { margin-bottom: 5px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
.fsel select, .fsel input { width: 100%; }
.fsearch { flex: 1; }
.fsearch input { font-size: 14px; padding: 11px 12px 11px 36px; }
.fsearch input { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6770' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") 10px center / 15px no-repeat; padding-left: 32px; }
.lockchip { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); border-radius: 6px; padding: 9px 12px; font-weight: 700; font-size: 13px; width: 100%; }
.lockchip small { font-weight: 600; color: var(--text-2); }
.lockchip .ic { width: 14px; height: 14px; }
.fmore { margin: 2px 0 10px; }
.fmore summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.fmore summary::-webkit-details-marker { display: none; }
.fmore summary::before { content: "+"; font-weight: 800; }
.fmore[open] summary::before { content: "–"; }
.fdates { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fdates span { color: var(--text-2); font-size: 12px; }
.factive { display: flex; gap: 6px; flex-wrap: wrap; }
.factive:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 6px; background: var(--kia-midnight); color: #fff; border-radius: 6px; padding: 4px 6px 4px 10px; font-size: 12px; font-weight: 600; }
.fchip button { background: rgba(255, 255, 255, .15); border: none; color: #fff; border-radius: 4px; width: 18px; height: 18px; cursor: pointer; font-size: 11px; line-height: 1; }
.fchip button:hover { background: var(--pop-red); }

/* coaching strips (details/summary so the page stays calm until asked) */
.coach { border: 1px solid var(--accent-line); background: linear-gradient(90deg, var(--accent-soft), #fff 70%); border-radius: 8px; margin: -2px 0 18px; }
.coach summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 13.5px; color: var(--text); }
.coach summary::-webkit-details-marker { display: none; }
.coach summary .ic { width: 16px; height: 16px; color: var(--accent-ink); flex: none; }
.coach summary b { font-weight: 700; }
.coach-more { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.coach[open] .coach-more { opacity: .55; }
.coach-body { padding: 2px 16px 14px 40px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.coach-body p { margin: 0 0 8px; }
.coach-src { font-size: 12px; color: var(--text-2); }
.lv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.lv { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; line-height: 1.4; border-top: 3px solid var(--accent-line); }
.lv b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; color: var(--text-2); }
.lv-0 { border-top-color: #9FB4C2; } .lv-1 { border-top-color: var(--accent); } .lv-2 { border-top-color: var(--pop-amber); }

/* Add Action Plan: full-width launch band */
.launch { width: 100vw; margin: 8px 0 -24px calc(50% - 50vw); padding: 44px 24px 48px; color: #fff;
  background: radial-gradient(70% 160% at 100% 0%, rgba(95, 185, 214, .28), transparent 60%),
    linear-gradient(135deg, #0B1623 0%, #0E2A3A 55%, var(--accent) 140%); }
.launch-in { max-width: 1232px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.launch .eyebrow { color: var(--accent-bright); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; }
.launch h2 { font-size: 26px; margin: 8px 0 10px; letter-spacing: -.4px; color: #fff; }
.launch-sum { color: #C7D3DC; font-size: 14px; line-height: 1.55; margin: 0 0 20px; min-height: 22px; }
.launch-sum b { color: #fff; } .launch-sum i { color: #FFD166; font-style: normal; }
.launch-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.launch .btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .3); min-height: 48px; padding: 0 20px; }
.launch .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.launch-go { min-height: 48px; padding: 0 24px; font-size: 15px; background: rgba(255, 255, 255, .14); box-shadow: none; border: 1px solid rgba(255, 255, 255, .25); }
.launch-go .ic { width: 16px; height: 16px; }
.launch-go.ready { background: var(--accent-bright); color: var(--kia-midnight); border-color: transparent; box-shadow: 0 6px 22px rgba(95, 185, 214, .45); }
.launch-go.ready:hover { background: #7CC9E0; }
.launch-next { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 40px; }
.nextlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.nextlist li { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; color: #C7D3DC; }
.nextlist li b { color: #fff; }
.nn { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
@media (max-width: 860px) { .launch-in { grid-template-columns: 1fr; gap: 28px; } .launch-next { border-left: none; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 24px; } }

/* modals: coaching column */
.modal.wide { width: 980px; }
.mgrid { display: grid; grid-template-columns: 272px 1fr; margin: -21px 0 0 !important; }
.mcoach { background: linear-gradient(170deg, #0B1623, #10283C); color: #DCE6EC; padding: 22px 20px 24px; margin-bottom: -21px; }
.mcoach h4 { color: #fff; font-size: 16px; margin: 6px 0 12px; line-height: 1.25; }
.mc-eyebrow { color: var(--accent-bright); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.mc-eyebrow .ic { width: 13px; height: 13px; }
.mc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; line-height: 1.5; }
.mc-list li { padding-left: 14px; position: relative; }
.mc-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }
.mc-list b { color: #fff; }
.mc-why { font-size: 12.5px; color: #B4C2CC; margin: 6px 0 10px; line-height: 1.45; }
.ideas { display: grid; gap: 6px; }
.idea { text-align: left; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; line-height: 1.35; cursor: pointer; transition: all .12s; }
.idea:hover { background: rgba(95, 185, 214, .22); border-color: var(--accent-bright); }
.idea.on { background: var(--accent-bright); color: var(--kia-midnight); border-color: var(--accent-bright); font-weight: 700; }
.mc-foot { margin-top: 14px; font-size: 11.5px; color: #9FB4C2; display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.mc-foot .ic { flex: none; margin-top: 2px; }
.mform { padding: 21px 21px 0; min-width: 0; }
.mfoot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.mfoot-note { margin-right: auto; font-size: 12px; color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; }
.tipline { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 9px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; display: flex; gap: 8px; align-items: flex-start; }
.tipline .ic { flex: none; margin-top: 3px; color: var(--accent-ink); }
@media (max-width: 900px) { .mgrid { grid-template-columns: 1fr; } .mcoach { margin-bottom: 0; } }
.tasks-empty b { color: var(--text); }

/* print: real margins, no full-bleed tricks */
@page { margin: 16mm 14mm; }
@media print {
  .wrap { padding: 0 2mm; max-width: 100%; }
  .hero { width: auto; margin: 0 0 16px; padding: 18px 20px; border-radius: 8px; }
  .hero-in { max-width: 100%; }
  .launch, .coach, .fcard { display: none !important; }
  .card { padding: 16px 18px; }
  .modal-bg { display: none !important; }
}


/* ---------- v9.3: guided empty states ---------- */
.estate { text-align: center; padding: 34px 18px; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.estate .es-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.estate .es-ic .ic { width: 22px; height: 22px; }
.estate .es-t { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -.2px; }
.estate .es-d { font-size: 13.5px; line-height: 1.5; max-width: 440px; }
.estate .es-cta { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.estate .es-cta .btn-sm { padding: 9px 16px; font-size: 13px; }
.bars { position: relative; }
.estate.overlay { position: absolute; inset: 0; justify-content: center; padding: 10px; }
.estate.overlay .es-ic { width: 44px; height: 44px; background: #fff; box-shadow: 0 2px 10px rgba(5, 20, 31, .12); }
.estate.overlay .es-t { font-size: 15px; }
.estate.overlay .es-d { font-size: 12.5px; max-width: 320px; }
.estate.overlay .es-cta { margin-top: 8px; }
.cols.ghost { opacity: .45; }
.cols.ghost .col { cursor: default; }
.cols.ghost .col:hover { background: none; }
.cols.ghost .col .lbl { color: var(--text-2); }
.ghostrows { opacity: .35; pointer-events: none; min-height: 200px; padding-top: 8px; }
.ghostrows .bar-row:hover { background: none; }
.ghostrows .gl { display: inline-block; width: 110px; height: 10px; border-radius: 5px; background: #D5DCE1; }
.ghostrows .sdot2 { background: #C8D1D8; }
.ghostrows .b i { background: #CBD3D9 !important; }
.ghostrows + .estate.overlay { inset: -6px 0 0; }
.empty.small { padding: 18px 12px; font-size: 13px; }


/* ---------- v9.4.1: starting points (copy fix) ---------- */
.modal.wide { width: 1020px; }
.mgrid { grid-template-columns: 312px 1fr; }
.idea { display: grid; gap: 3px; padding: 10px 12px; }
.idea-tag { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-bright); font-weight: 700; }
.idea-t { font-weight: 700; font-size: 13px; line-height: 1.3; color: #fff; }
.idea-d { font-size: 12px; line-height: 1.4; color: #B4C2CC; }
.idea.on .idea-tag, .idea.on .idea-d { color: #0B1623; opacity: .8; }
.idea.on .idea-t { color: #0B1623; }
.mc-focus { font-size: 12.5px; color: #DCE6EC; margin: 4px 0 2px; }
.mc-focus b { color: #fff; }
.btn-more { margin-top: 10px; width: 100%; background: none; border: 1px dashed rgba(255, 255, 255, .3); color: #DCE6EC; border-radius: 8px; padding: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-more:hover { border-color: var(--accent-bright); color: #fff; background: rgba(95, 185, 214, .12); }
@keyframes ideasin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ideas.flip { animation: ideasin .22s ease-out; }


/* ---------- v9.4.1: global tooltip + copy fix ---------- */
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip]:hover::before { content: none !important; }
.tipbox { position: fixed; z-index: 1000; background: var(--kia-midnight); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 5px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px);
  transition: opacity .12s, transform .12s; box-shadow: 0 4px 14px rgba(5, 20, 31, .3); max-width: calc(100vw - 16px); }
.tipbox.on { opacity: 1; transform: none; }
.tipbox::after { content: ""; position: absolute; left: var(--ax, 50%); top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--kia-midnight); }
.tipbox.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--kia-midnight); }
@media print { .tipbox { display: none !important; } }
.tbl td.nowrap { white-space: nowrap; }
@media (max-width: 1300px) { .tbl th, .tbl td { padding: 9px 8px; font-size: 12.5px; } }


/* ---------- v9.5: 'Other' opportunity area description ---------- */
.otherwrap { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--accent-line); border-radius: 8px; background: var(--accent-soft); max-width: 560px; animation: ideasin .2s ease-out; }
.otherwrap label.f { margin-bottom: 6px; }
.otherwrap input { background: #fff; }


/* ---------- v9.6: pre-work launch band ---------- */
.launch-note { margin-top: 14px; font-size: 12.5px; color: #9FB4C2; line-height: 1.5; }
.launch .launch-btns .btn-ghost#asave { background: rgba(255, 255, 255, .12); }
.launch-done { background: radial-gradient(70% 160% at 100% 0%, rgba(31, 164, 99, .35), transparent 60%),
  linear-gradient(135deg, #0B1623 0%, #0E2A3A 55%, #14663A 140%); }
.launch-done .eyebrow { color: #7DE0A8; }
.launch-done .launch-go.ready { background: var(--pop-green); color: #fff; box-shadow: 0 6px 22px rgba(31, 164, 99, .45); }
.launch-done .launch-go.ready:hover { background: #24B86F; }
.launch a.btn { text-decoration: none; }


/* ---------- v9.7 ---------- */
.kpiother { margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--accent-line); border-radius: 8px; background: var(--accent-soft); animation: ideasin .2s ease-out; }
.kpiother label.f { margin-bottom: 6px; }
.kpiother input { background: #fff; }
.tbl-grouped tr.grow td { background: #F4F6F8; padding: 8px 12px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-2); border-top: 1px solid var(--line); }
.tbl-grouped tr.grow td span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--text-2); vertical-align: 1px; }
.tbl-grouped tr.g-over td span::before { background: var(--pop-red); } .tbl-grouped tr.g-over td span { color: var(--pop-red); }
.tbl-grouped tr.g-week td span::before { background: var(--pop-amber); }
.tbl-grouped tr.g-later td span::before { background: var(--pop-blue); }
.tbl-grouped tr.g-ongoing td span::before { background: var(--pop-slate); }
.tbl-grouped tr.g-done td span::before { background: var(--pop-green); }
.tbl-grouped tr.grow td small { margin-left: 8px; font-weight: 700; color: var(--text-2); background: #fff; border-radius: 10px; padding: 1px 8px; border: 1px solid var(--line); }


/* ---------- v9.8 ---------- */
.launch .btn-ghost#asave { background: rgba(255, 255, 255, .12); }
.launch-done .launch-sum { max-width: 560px; }


/* ---------- v9.9 ---------- */


/* ---------- v10 ---------- */
/* v10: drafts, finalize band, the three-levels band, pre-work submit band, tooltip clearance.
   (Task templates / starting points and the KPI "Other" field were removed in v10.) */

/* draft chip — slate, with a lock: the plan is private to its creator until finalized */
.chip.draft { display: inline-flex; align-items: center; gap: 5px; background: #E8EDF2; color: var(--pop-slate); border: 1px dashed #9FB0C0;
  font-weight: 800; letter-spacing: .6px; text-transform: uppercase; vertical-align: 2px; }
.chip.draft .ic { width: 10px; height: 10px; }
.chip.draft.lg { font-size: 12.5px; padding: 6px 12px; }
.hero .chip.draft { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); }
.pcard.is-draft { border-style: dashed; border-color: #9FB0C0; background: #FAFBFC; }
.pcard .t .chip.draft { font-size: 9.5px; padding: 2px 7px; vertical-align: 1px; margin-left: 2px; }
.tbl .chip.draft { white-space: nowrap; font-size: 9.5px; padding: 2px 7px; margin-left: 4px; }

/* plan hero while the plan is a draft — quieter slate instead of the live midnight/teal */
.hero-draft { background: radial-gradient(60% 140% at 100% 0%, rgba(255, 255, 255, .08), transparent 60%),
  linear-gradient(120deg, #1C2A36 0%, #2A3B4A 60%, #3B5A77 100%); }
.hero-draft .eyebrow { color: #C7D3DC; }
.hero-draft .stepper-band .step .dot { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .5); }
.hero-draft .stepper-band .step.done .dot { background: rgba(255, 255, 255, .85); border-color: transparent; }
.hero-draft .stepper-band .nextstep .ic, .hero-draft .stepper-band .nextstep b { color: #FFD166; }

/* draft bar — the plain-language notice right under the hero */
.draftbar { display: flex; align-items: center; gap: 14px; background: #FFF6DF; border: 1px solid #F3D48A; border-left: 4px solid var(--pop-amber);
  border-radius: 0 8px 8px 0; padding: 13px 16px; margin: -6px 0 18px; font-size: 14px; line-height: 1.5; color: var(--text); }
.draftbar > .ic { flex: none; width: 18px; height: 18px; color: #9A6B00; }
.draftbar > div { flex: 1; }
.draftbar b { color: #7A5300; }
.draftbar a { color: var(--accent-ink); font-weight: 700; }
.draftbar .btn { flex: none; white-space: nowrap; }

/* finalize band — same family as the launch band, with the amber "nothing sent yet" signal */
.launch-final { margin-top: 0; margin-bottom: 28px; background: radial-gradient(70% 160% at 100% 0%, rgba(245, 168, 0, .18), transparent 60%),
  linear-gradient(135deg, #0B1623 0%, #10283C 55%, #1B4A5E 140%); }
.launch-final .eyebrow { color: #FFD166; }
.launch-go.big { min-height: 58px; padding: 0 30px; font-size: 16.5px; font-weight: 800; letter-spacing: -.1px; }
.launch-go.big .ic { width: 18px; height: 18px; }
.launch-go[disabled] { opacity: .55; cursor: not-allowed; }
.launch-final .launch-go.ready { background: var(--pop-amber); color: var(--kia-midnight); box-shadow: 0 8px 26px rgba(245, 168, 0, .45); }
.launch-final .launch-go.ready:hover { background: #FFC02E; }
.launch-note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: #9FB4C2; display: flex; gap: 7px; align-items: flex-start; max-width: 560px; }
.launch-note .ic { flex: none; margin-top: 3px; width: 13px; height: 13px; color: var(--accent-bright); }
.launch-note b { color: #fff; } .launch-note > span { flex: 1; min-width: 0; }
.launch-final .launch-note .ic { color: #FFD166; }
.wholist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.wholist li { display: flex; align-items: center; gap: 11px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: #C7D3DC; }
.wholist li b { color: #fff; display: block; line-height: 1.2; }
.wholist li small { display: block; font-size: 11.5px; color: #9FB4C2; margin-top: 2px; }
.wholist li .av { flex: none; }
.wholist li.me { border-style: dashed; }
.wholist li.me > .ic { flex: none; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--accent-bright); box-sizing: border-box; }
.wholist.dark li { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.wholist.dark li b { color: var(--text); } .wholist.dark li small { color: var(--text-2); }
.modal h3 .ic { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; color: var(--accent); }

/* the three levels — full-width dark band between step 2 and step 3 on Add Action Plan */
.levels { width: 100vw; margin: 4px 0 24px calc(50% - 50vw); padding: 52px 24px 46px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(60% 120% at 0% 100%, rgba(245, 168, 0, .16), transparent 60%),
    radial-gradient(70% 140% at 100% 0%, rgba(95, 185, 214, .26), transparent 60%),
    linear-gradient(135deg, #05141F 0%, #0B2233 55%, #0F3448 100%); }
.levels::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); }
.levels-in { max-width: 1232px; margin: 0 auto; position: relative; }
.levels-head { max-width: 860px; }
.levels .eyebrow { color: var(--accent-bright); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; }
.levels h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.6px; margin: 10px 0 14px; color: #fff; }
.levels h2 .lv-el { color: var(--accent-bright); } .levels h2 .lv-in { color: #FFD166; }
.levels-head p { color: #C7D3DC; font-size: 15px; line-height: 1.6; margin: 0; }
.levels-head p b { color: #fff; }
.levels-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.lvc { position: relative; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 22px 22px 20px; overflow: hidden;
  transition: transform .18s, background .18s, border-color .18s; }
.lvc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #8A9BA8; }
.lvc-1::before { background: var(--accent-bright); } .lvc-2::before { background: #FFD166; }
.lvc:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.lvc-n { position: absolute; right: 18px; top: 12px; font-size: 42px; font-weight: 800; letter-spacing: -2px; color: rgba(255, 255, 255, .07); line-height: 1; }
.lvc-t { font-size: 12px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: #C7D3DC; }
.lvc-1 .lvc-t { color: var(--accent-bright); } .lvc-2 .lvc-t { color: #FFD166; }
.lvc-d { font-size: 15.5px; font-weight: 600; line-height: 1.45; color: #fff; margin: 10px 0 16px; }
.lvc-ex { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #B4C2CC; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 14px; }
.lvc-ex .ic { flex: none; width: 13px; height: 13px; margin-top: 3px; color: #7DE0A8; }
.levels-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.lf-l { font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: #9FB4C2; margin-right: 6px; }
.lf-p { display: inline-flex; align-items: baseline; gap: 8px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 8px 16px; font-size: 13px; color: #C7D3DC; }
.lf-p b { color: #fff; font-size: 14px; }
@media (max-width: 900px) { .levels-cards { grid-template-columns: 1fr; } .levels { padding: 40px 20px 36px; } }

/* pre-work submit band — the Submit button is the one big thing; Save Draft / Cancel step back */
.launch-prework .launch-lead { font-size: 15px; color: #DCE6EC; max-width: 600px; }
.launch-prework .launch-lead b { color: #fff; }
.launch-prework .launch-go.ready { box-shadow: 0 8px 26px rgba(95, 185, 214, .5); }
.launch .btn-link { background: none; border: none; color: #B4C2CC; text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; min-height: 48px; }
.launch .btn-link:hover { color: #fff; }

/* tooltips: make sure nothing can clip the fixed .tipbox (modal/table stacking) and keep the
   hovered icon above its row so the tip's position is measured from the real element */
.tipbox { z-index: 10000; }
@media print { .levels, .draftbar, .launch-final { display: none !important; } }


/* ---------- v10.1 ---------- */
/* Find Action Plans: search + status pills up front, everything else behind "Advanced filters".
   Standalone "+ Add Task" buttons removed (tasks are added from inside a plan). */
.searchbox { position: relative; display: flex; align-items: center; margin: 2px 0 16px; }
.searchbox > .ic { position: absolute; left: 18px; width: 18px; height: 18px; color: var(--accent-ink); pointer-events: none; }
.searchbox input[type="search"] { width: 100%; height: 52px; border-radius: 999px; border: 1px solid #D5DDE3; padding: 0 96px 0 48px; font-size: 15px; color: var(--text);
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FA 100%); box-shadow: inset 0 1px 2px rgba(5, 20, 31, .05), 0 1px 0 #fff, 0 2px 10px rgba(5, 20, 31, .04);
  transition: box-shadow .16s, border-color .16s, background .16s; -webkit-appearance: none; appearance: none; }
.searchbox input[type="search"]::-webkit-search-cancel-button, .searchbox input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.searchbox input::placeholder { color: #8A99A6; }
.searchbox input:hover { border-color: #B9C6CF; }
.searchbox input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(27, 122, 154, .14), 0 8px 24px rgba(5, 20, 31, .10); }
.searchbox kbd { position: absolute; right: 18px; font: 700 11px/1 var(--font); color: var(--text-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 5px 8px; background: #fff; pointer-events: none; }
.searchbox .sx { position: absolute; right: 14px; width: 28px; height: 28px; border-radius: 50%; border: none; background: #E8EDF2; color: var(--text-2); cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.searchbox .sx:hover { background: var(--accent-soft); color: var(--accent-ink); }
.searchbox.has .sx { display: inline-flex; } .searchbox.has kbd { display: none; }
.fadv { margin: 6px 0 4px; border-top: 1px dashed var(--line); padding-top: 8px; }
.fadv summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); padding: 8px 12px 8px 10px; margin-left: -10px; border-radius: 8px; user-select: none; }
.fadv summary:hover { background: var(--accent-soft); }
.fadv summary::-webkit-details-marker { display: none; }
.fadv summary .ic:last-of-type { transition: transform .16s; color: var(--text-2); }
.fadv[open] summary .ic:last-of-type { transform: rotate(180deg); }
.fadv .fbadge { background: var(--accent); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 2px 8px; }
.fadv .fbadge:empty { display: none; }
.fadv .fstatusrow { margin: 12px 0 10px; }
.fadv .fgrid { margin-top: 0; padding: 14px 14px 12px; background: #F7F9FA; border: 1px solid var(--line); border-radius: 10px; }
.fsel-dates { grid-column: span 2; min-width: 300px; }
.fsel-dates .fdates { margin-top: 0; }
.fsel-dates .fdates input { flex: 1; min-width: 0; }
@media (max-width: 700px) { .searchbox input[type="search"] { height: 46px; font-size: 14px; padding-right: 56px; } .searchbox kbd { display: none; } }

/* ---------- v11 ---------- customer-journey labels v2: grouped Service panel (Time / Treatment / Transparency) + task moment chip */
.jgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.jgroup { background: #F7F9FA; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.jgroup.has { border-color: var(--accent-line, #B9DCE7); }
.jghead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.jgic { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--accent-line, #B9DCE7); background: #fff; color: var(--accent-ink, var(--accent)); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.jgic .ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jgt { display: flex; flex-direction: column; min-width: 0; }
.jgt b { font-size: 15px; color: var(--kia-midnight); }
.jgt small { font-size: 12px; color: var(--text-2); }
.jgcount { margin-left: auto; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.jgroup.has .jgcount i { font-style: normal; font-weight: 800; color: var(--accent-ink, var(--accent)); }
.jgroup .areawrap.one { grid-template-columns: 1fr; }
.jgroup .areachip { background: #fff; }
.jgroup .areachip.sel { background: var(--accent); }
.modal .jgroups { grid-template-columns: 1fr; gap: 10px; }
@media (max-width: 900px) { .jgroups { grid-template-columns: 1fr; } }
.chip.moment { background: var(--accent-soft, #EAF4F8); color: var(--accent-ink, var(--accent)); border: 1px solid var(--accent-line, #B9DCE7); display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 6px; max-width: 100%; white-space: normal; text-align: left; }
.chip.moment .ic { fill: none; stroke: currentColor; stroke-width: 2; flex: none; }