@import url("./tokens.css");
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-md); line-height: 1.45; }
a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Layout */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.nav { background: var(--surface); border-right: 1px solid var(--border); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { font-weight: 700; font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) var(--s4); }
.brand .logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--accent-1), var(--accent-4)); display: inline-block; }
.nav a.item { display: flex; align-items: center; gap: var(--s3); padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm); }
.nav a.item:hover { background: var(--surface-2); text-decoration: none; }
.nav a.item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav .section { font-size: var(--fs-xs); color: var(--subtle); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--s3) 10px 2px; }
.nav .spacer { flex: 1; }
.nav .user { font-size: var(--fs-xs); color: var(--muted); padding: var(--s2) 10px; border-top: 1px solid var(--border); }
.main { padding: var(--s5) var(--s6); max-width: 1320px; width: 100%; min-width: 0; }
.app > * { min-width: 0; }
.stack { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
.grid > *, .card { min-width: 0; } .main { overflow-wrap: break-word; }
@media (max-width: 600px) { .chip { white-space: normal; } }
.topbar { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .nav { position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform 0.2s; z-index: 30; }
  .nav.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.3); }
  .topbar { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
  .main { padding: var(--s4); }
}
/* Page header */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
h1 { font-size: var(--fs-xxl); margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-lg); margin: 0 0 var(--s3); font-weight: 650; }
h3 { font-size: var(--fs-md); margin: 0 0 var(--s2); font-weight: 650; }
.subtitle { color: var(--muted); margin: 2px 0 0; font-size: var(--fs-sm); }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
/* Cards and grids */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow); }
.card + .card, .grid + .card, .card + .grid, .grid + .grid, .table-wrap + .card { margin-top: var(--s4); }
.grid { display: grid; gap: var(--s4); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 900px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3) var(--s4); box-shadow: var(--shadow); min-width: 0; }
.tile .label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tile .value { font-size: var(--fs-xl); font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile .change { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.tile.ok { border-left: 4px solid var(--ok); } .tile.warn { border-left: 4px solid var(--warn); } .tile.bad { border-left: 4px solid var(--bad); } .tile.info { border-left: 4px solid var(--info); } .tile.grey { border-left: 4px solid var(--draft); }
/* Chips */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.warn { background: var(--warn-soft); color: var(--warn); } .chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.info { background: var(--info-soft); color: var(--info); } .chip.grey { background: var(--draft-soft); color: var(--draft); } .chip.outline { border-color: var(--border); color: var(--muted); }
/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; }
.btn:hover { background: var(--surface-2); } .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .btn.primary:hover { filter: brightness(1.05); }
.btn.danger { color: var(--bad); border-color: var(--bad); } .btn.sm { padding: 4px 8px; font-size: var(--fs-xs); } .btn.link { border: none; background: none; color: var(--primary); padding: 0; }
/* Tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
th { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; background: var(--surface-2); position: sticky; top: 0; }
tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; max-width: 420px; min-width: 220px; }
.table-foot { display: flex; justify-content: space-between; align-items: center; padding: var(--s2) var(--s3); font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--border); }
/* Forms */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s3); }
.field label { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); width: 100%; }
.field textarea { min-height: 90px; resize: vertical; } .field .help { font-size: var(--fs-xs); color: var(--subtle); } .field .error { font-size: var(--fs-xs); color: var(--bad); }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.inline-form { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; }
/* Misc */
.muted { color: var(--muted); } .subtle { color: var(--subtle); } .small { font-size: var(--fs-xs); } .mono { font-family: var(--mono); font-size: var(--fs-xs); }
.list { list-style: none; margin: 0; padding: 0; } .list li { padding: var(--s2) 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: var(--s3); align-items: center; } .list li:last-child { border-bottom: none; }
.banner { padding: var(--s3) var(--s4); border-radius: var(--radius); border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.banner.warn { background: var(--warn-soft); border-color: var(--warn); } .banner.info { background: var(--info-soft); border-color: var(--info); } .banner.ok { background: var(--ok-soft); border-color: var(--ok); } .banner.bad { background: var(--bad-soft); border-color: var(--bad); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--s4); overflow-x: auto; }
.tabs button { background: none; border: none; padding: 8px 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--primary); }
.bar.ok > span { background: var(--ok); } .bar.warn > span { background: var(--warn); } .bar.bad > span { background: var(--bad); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: var(--fs-sm); } .kv dt { color: var(--muted); } .kv dd { margin: 0; }
.toast-wrap { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--info); padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: var(--fs-sm); max-width: 360px; }
.toast.bad { border-left-color: var(--bad); } .toast.ok { border-left-color: var(--ok); }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; }
.modal { background: var(--surface); border-radius: var(--radius); padding: var(--s5); width: min(640px, 100%); max-height: 90vh; overflow: auto; border: 1px solid var(--border); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--surface); border-left: 1px solid var(--border); padding: var(--s5); overflow: auto; z-index: 40; box-shadow: -8px 0 24px rgba(0,0,0,0.15); }
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow: auto; padding: var(--s3); background: var(--surface-2); border-radius: var(--radius); }
.msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: var(--fs-sm); } .msg.theo { background: var(--surface); border: 1px solid var(--border); align-self: flex-start; } .msg.rep { background: var(--primary); color: var(--primary-contrast); align-self: flex-end; }
.msg .who { font-size: 10px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s2); }
.score { padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.score .n { font-size: var(--fs-lg); font-weight: 700; }
.empty { padding: var(--s5); text-align: center; color: var(--muted); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s2); }
.badge { text-align: center; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); } .badge.locked { opacity: 0.45; } .badge .icon { font-size: 22px; }
.step { display: grid; grid-template-columns: 28px 1fr; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px dashed var(--border); } .step .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
svg text { font-family: var(--font); }
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s4); }
.login .card { width: min(400px, 100%); }
.center { text-align: center; }
details summary { cursor: pointer; color: var(--primary); font-size: var(--fs-sm); }
pre.json { background: var(--surface-2); padding: var(--s3); border-radius: var(--radius-sm); overflow: auto; font-size: var(--fs-xs); max-height: 320px; }
.info-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: 10px; cursor: help; margin-left: 4px; }
.checklist li { display: flex; gap: var(--s2); align-items: center; }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--radius-sm); height: 80px; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Demo role switcher (demo tenants outside production only) */
.role-switch { position: sticky; top: 0; z-index: 25; display: flex; justify-content: flex-end; align-items: flex-start; padding: var(--s3) var(--s6) 0; pointer-events: none; }
.role-switch > * { pointer-events: auto; }
.role-btn { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px 12px 6px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; text-align: left; max-width: 320px; }
.role-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.role-btn[aria-expanded="true"] { border-color: var(--primary); }
.role-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--primary-contrast); font-weight: 700; font-size: var(--fs-xs); flex: none; letter-spacing: 0.02em; }
.role-avatar.sm { width: 26px; height: 26px; background: var(--surface-2); color: var(--text); }
.role-item.current .role-avatar.sm { background: var(--primary); color: var(--primary-contrast); }
.role-who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.role-eyebrow { font-size: 10px; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.role-label { font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-person { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-caret { color: var(--muted); font-size: var(--fs-sm); margin-left: 2px; }
.role-menu { position: absolute; right: var(--s6); top: calc(100% + 6px); width: 300px; max-width: calc(100vw - 2 * var(--s4)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16); padding: var(--s2); display: grid; gap: 2px; }
.role-menu[hidden] { display: none; }
.role-menu-head { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s2) var(--s2); font-weight: 650; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); margin-bottom: var(--s1); }
.role-menu-head .small { font-weight: 400; }
.role-item { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 8px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: left; color: var(--text); }
.role-item:hover:not(:disabled), .role-item:focus-visible { background: var(--surface-2); }
.role-item.current { background: var(--primary-soft); cursor: default; }
.role-item:disabled:not(.current) { opacity: 0.5; cursor: progress; }
.role-check { margin-left: auto; color: var(--primary); font-weight: 700; }
.role-item.back { border-bottom: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: var(--s1); }
.role-item.back .role-avatar.sm { background: var(--primary-soft); color: var(--primary); }
@media (max-width: 900px) { .role-switch { padding: var(--s3) var(--s4) 0; } .role-menu { right: var(--s4); } .role-btn .role-person { display: none; } }
@media (max-width: 420px) { .role-btn .role-eyebrow { display: none; } }

/* Theo identity and the associate home */
.theo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-4), var(--accent-1)); color: #fff; font-weight: 800; font-size: 13px; flex: none; }
.theo.lg { width: 44px; height: 44px; font-size: 20px; }
.theo-card { border: 1px solid var(--border); border-left: 4px solid var(--accent-4); border-radius: var(--radius); padding: var(--s4); background: var(--surface); box-shadow: var(--shadow); }
.theo-card .who { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--s2); }
.theo-bubble { background: var(--primary-soft); border-radius: 14px 14px 14px 4px; padding: var(--s3) var(--s4); font-size: var(--fs-md); line-height: 1.5; }
.hero { border-radius: 16px; padding: var(--s5); color: #fff; background: linear-gradient(120deg, #1e3a8a 0%, #1d4ed8 55%, #6d28d9 100%); box-shadow: var(--shadow); display: grid; gap: var(--s4); grid-template-columns: 1.3fr 1fr; align-items: center; }
.hero .big { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero .label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.hero .sub { opacity: 0.9; font-size: var(--fs-sm); margin-top: var(--s2); }
.hero .pill { display: inline-flex; gap: 6px; align-items: center; background: rgba(255,255,255,0.16); border-radius: 999px; padding: 4px 10px; font-size: var(--fs-xs); font-weight: 600; }
.hero .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.hero .mini > div { background: rgba(255,255,255,0.12); border-radius: 10px; padding: var(--s2) var(--s3); }
.hero .mini .v { font-size: var(--fs-lg); font-weight: 700; }
.hero .bar { background: rgba(255,255,255,0.2); } .hero .bar > span { background: #fff; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero .big { font-size: 32px; } }
.stat-strip { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 4px; }
.stat { min-width: 150px; flex: 1; border-radius: 12px; padding: var(--s3); border: 1px solid var(--border); background: var(--surface); }
.stat.ok { background: var(--ok-soft); border-color: transparent; } .stat.bad { background: var(--bad-soft); border-color: transparent; } .stat.warn { background: var(--warn-soft); border-color: transparent; }
.stat .label { font-size: var(--fs-xs); color: var(--muted); } .stat .v { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; } .stat .d { font-size: var(--fs-xs); color: var(--muted); }
.ring { position: relative; width: 88px; height: 88px; } .ring svg { transform: rotate(-90deg); } .ring .txt { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-md); }
.proposal { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); background: var(--surface); box-shadow: var(--shadow); }
.proposal .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.proposal .steps > div { border: 1px solid var(--border); border-radius: 10px; padding: var(--s2) var(--s3); font-size: var(--fs-sm); }
.proposal .steps .k { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.thread { display: flex; flex-direction: column; gap: var(--s2); }
.note { border-radius: 12px; padding: var(--s3) var(--s4); background: var(--surface-2); max-width: 90%; font-size: var(--fs-sm); }
.note.from-rep { align-self: flex-end; background: var(--primary-soft); }
.note .meta { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 2px; }
.todo { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px dashed var(--border); } .todo:last-child { border-bottom: none; }
.todo .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; flex: none; }
.todo.done .ic { background: var(--ok-soft); color: var(--ok); }
.roster-status { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; } .roster-status.red { background: var(--bad); } .roster-status.amber { background: var(--warn); } .roster-status.green { background: var(--ok); }
.wizard { display: grid; grid-template-columns: 220px 1fr; gap: var(--s4); } @media (max-width: 900px) { .wizard { grid-template-columns: 1fr; } }
.wizard .stepnav { display: flex; flex-direction: column; gap: 4px; } .wizard .stepnav button { text-align: left; }
.module { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--border); border-radius: 10px; margin-bottom: var(--s2); background: var(--surface); }
.module.picked { border-color: var(--primary); background: var(--primary-soft); }

/* Coaching conversation: briefing, live session, debrief, module page, training report */
.session-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 280px; gap: var(--s4); align-items: start; }
@media (max-width: 1100px) { .session-grid { grid-template-columns: 1fr; } }
.chat.tall { max-height: 56vh; min-height: 260px; }
.msg .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tag { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.msg.rep .tag { background: rgba(255,255,255,0.18); color: #fff; border-color: transparent; }
.tag.good { background: var(--ok-soft); color: var(--ok); } .tag.fix { background: var(--bad-soft); color: var(--bad); } .tag.cp { background: var(--info-soft); color: var(--info); }
.msg.rep .tag.good, .msg.rep .tag.fix, .msg.rep .tag.cp { background: rgba(255,255,255,0.22); color: #fff; }
.stage-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stage-track li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s2); align-items: center; font-size: var(--fs-xs); color: var(--muted); padding: 3px 0; }
.stage-track .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.stage-track li.done .n { background: var(--ok-soft); color: var(--ok); } .stage-track li.current { color: var(--text); font-weight: 600; } .stage-track li.current .n { background: var(--primary); color: var(--primary-contrast); }
.stage-track li.missed .n { background: var(--bad-soft); color: var(--bad); } .stage-track li.partial .n { background: var(--warn-soft); color: var(--warn); } .stage-track li.skip { opacity: 0.55; }
.checkpoints { list-style: none; margin: 0; padding: 0; } .checkpoints li { display: flex; gap: var(--s2); align-items: flex-start; padding: 4px 0; font-size: var(--fs-xs); }
.checkpoints .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 10px; flex: none; margin-top: 1px; }
.checkpoints li.done .box { background: var(--ok); border-color: var(--ok); color: #fff; } .checkpoints li.done { color: var(--muted); text-decoration: line-through; }
.trust { font-size: var(--fs-xs); color: var(--muted); } .trust .bar { height: 10px; margin-top: 4px; } .trust .bar > span { transition: width 0.4s; }
.trust.low .bar > span { background: var(--bad); } .trust.mid .bar > span { background: var(--warn); } .trust.high .bar > span { background: var(--ok); }
.whisper { border-radius: var(--radius); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-left: 4px solid var(--accent-4); background: var(--surface); }
.whisper.fix { border-left-color: var(--bad); background: var(--bad-soft); } .whisper.next { border-left-color: var(--info); background: var(--info-soft); } .whisper.good { border-left-color: var(--ok); background: var(--ok-soft); }
.whisper .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: flex; align-items: center; gap: var(--s2); margin-bottom: 4px; }
.whisper .try { margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: 10px; background: var(--surface); border: 1px dashed var(--border); font-size: var(--fs-sm); font-style: italic; }
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); cursor: pointer; }
.debrief-head { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center; }
.debrief-head .score { font-size: 44px; font-weight: 800; line-height: 1; border: none; padding: 0; font-variant-numeric: tabular-nums; }
.debrief-head .score small { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.turn-review .line { border-left: 4px solid var(--border); padding: var(--s2) var(--s3); margin-bottom: var(--s2); border-radius: 0 10px 10px 0; background: var(--surface-2); font-size: var(--fs-sm); }
.turn-review .line.good { border-left-color: var(--ok); } .turn-review .line.fix { border-left-color: var(--bad); } .turn-review .line.best { background: var(--ok-soft); } .turn-review .line .meta { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: 2px; }
.rewrite { border-radius: 12px; padding: var(--s3) var(--s4); background: var(--primary-soft); border: 1px solid var(--border); }
.rewrite .was { font-size: var(--fs-xs); color: var(--muted); text-decoration: line-through; margin-bottom: 4px; }
.stage-review { list-style: none; margin: 0; padding: 0; } .stage-review li { display: grid; grid-template-columns: 110px 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); align-items: start; }
.stage-review li:last-child { border-bottom: none; } .stage-review .note { background: none; padding: 0; max-width: none; color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 600px) { .stage-review li { grid-template-columns: 1fr; } }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.flow > div { border: 1px solid var(--border); border-radius: 12px; padding: var(--s3); background: var(--surface); position: relative; }
.flow > div.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); } .flow > div.done { background: var(--ok-soft); border-color: transparent; }
.flow .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .flow .v { font-weight: 700; margin-top: 2px; } .flow .d { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.attempts { list-style: none; margin: 0; padding: 0; } .attempts li { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); }
.attempts li:last-child { border-bottom: none; } .attempts .sc { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; } .attempts .sc.ok { color: var(--ok); } .attempts .sc.warn { color: var(--warn); } .attempts .sc.bad { color: var(--bad); }
.before-after { display: grid; grid-template-columns: 1fr; gap: 6px; } .before-after .row2 { display: grid; grid-template-columns: 150px 1fr 48px; gap: var(--s2); align-items: center; font-size: var(--fs-xs); }
.before-after .bars { display: grid; gap: 3px; } .before-after .bars .bar { height: 7px; } .before-after .bar.before > span { background: var(--draft); } .before-after .bar.since > span { background: var(--primary); }
.before-after .row2.focus { font-weight: 700; } .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
@media (max-width: 600px) { .before-after .row2 { grid-template-columns: 1fr; } }
.verdict { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); }
.verdict.complete { background: var(--ok-soft); color: var(--ok); } .verdict.extend { background: var(--warn-soft); color: var(--warn); } .verdict.escalate { background: var(--bad-soft); color: var(--bad); } .verdict.early { background: var(--info-soft); color: var(--info); }

/* Voice input, level meter, ladder loop */
.voice textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); resize: vertical; min-height: 54px; }
.btn.mic { gap: 8px; } .btn.mic .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); display: inline-block; }
.btn.mic.on { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); } .btn.mic.on .dot { animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
.mono.over { color: var(--bad); font-weight: 700; }
.level-meter .segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: 4px; }
.level-meter .seg { height: 12px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); }
.level-meter .seg.on { background: var(--primary); border-color: var(--primary); } .level-meter .seg.gap { background: var(--primary-soft); } .level-meter .seg.target { box-shadow: 0 0 0 2px var(--warn); border-color: var(--warn); }
.level-meter.compact .seg { height: 8px; } .level-meter.compact .segs { margin-bottom: 0; }
.loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); } @media (max-width: 800px) { .loop { grid-template-columns: repeat(2, 1fr); } }
.loop > div { border: 1px solid var(--border); border-radius: 12px; padding: var(--s3); background: var(--surface); } .loop > div.done { background: var(--ok-soft); border-color: transparent; } .loop > div.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.loop .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .loop .v { font-weight: 700; margin-top: 2px; } .loop .d { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.issue { display: grid; grid-template-columns: 90px 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); } .issue:last-child { border-bottom: none; }
.ladder-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.ladder-row:last-child { border-bottom: none; } @media (max-width: 700px) { .ladder-row { grid-template-columns: 1fr; } }
.test-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); } @media (max-width: 800px) { .test-strip { grid-template-columns: 1fr; } }
.test-strip .card.done { border-left: 4px solid var(--ok); } .test-strip .card.next { border-left: 4px solid var(--primary); }
.levels li { display: grid; grid-template-columns: 120px 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); } .levels li.current { background: var(--primary-soft); border-radius: 8px; padding: var(--s2); } .levels li.target { outline: 1px dashed var(--warn); border-radius: 8px; padding: var(--s2); }
.levels { list-style: none; margin: 0; padding: 0; }
.clarity-bars { display: grid; gap: 4px; } .clarity-bars .row2 { display: grid; grid-template-columns: 90px 1fr 36px; gap: var(--s2); align-items: center; font-size: var(--fs-xs); }
.testbar { border-radius: var(--radius); padding: var(--s3) var(--s4); background: var(--warn-soft); border: 1px solid var(--warn); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }

/* Training core: level dots, signposts, the practice run, statements, rating grids */
.level-dots .segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 4px; }
.level-dots .seg { height: 12px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); position: relative; overflow: hidden; }
.level-dots .seg.on { background: var(--primary); border-color: var(--primary); } .level-dots .seg.part::after { content: ""; position: absolute; inset: 0; width: var(--fill, 50%); background: var(--primary); }
.level-dots .seg.gap { background: var(--primary-soft); } .level-dots .seg.target { box-shadow: 0 0 0 2px var(--warn); border-color: var(--warn); }
.level-dots.compact .seg { height: 8px; } .level-dots.compact .segs { margin-bottom: 0; }
.signposts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.signpost { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: var(--fs-sm); border: 1px solid transparent; }
.signpost:hover { text-decoration: none; border-color: var(--primary); } .signpost .n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--primary); color: var(--primary-contrast); font-size: var(--fs-xs); padding: 0 6px; }
.signpost.bad { background: var(--bad-soft); color: var(--bad); } .signpost.bad .n { background: var(--bad); color: #fff; }
.start-run { border-radius: 16px; padding: var(--s5); color: #fff; background: linear-gradient(120deg, #0f766e 0%, #1d4ed8 60%, #6d28d9 100%); box-shadow: var(--shadow); }
.start-run h2 { color: #fff; margin: 0 0 4px; font-size: var(--fs-xl); } .start-run .sub { opacity: 0.9; font-size: var(--fs-sm); }
.start-run .btn.primary { background: #fff; color: #1d4ed8; border-color: #fff; } .start-run .btn { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.4); }
.dealer-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.dealer-pick .dealer { border: 1px solid var(--border); border-radius: 12px; padding: var(--s3); background: var(--surface); cursor: pointer; text-align: left; display: grid; gap: 2px; }
.dealer-pick .dealer:hover, .dealer-pick .dealer.picked { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.dealer-pick .dealer .nm { font-weight: 700; } .dealer-pick .dealer .mt { font-size: var(--fs-xs); color: var(--muted); }
.rubric { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rubric li { display: grid; grid-template-columns: 110px 1fr; gap: var(--s2); font-size: var(--fs-xs); padding: 4px 0; border-bottom: 1px dashed var(--border); align-items: start; }
.rubric li .k { font-weight: 700; color: var(--text); } .rubric li.done .k { color: var(--ok); } .rubric li.current .k { color: var(--primary); }
.run-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr) 280px; gap: var(--s4); align-items: start; } @media (max-width: 1100px) { .run-grid { grid-template-columns: 1fr; } }
.warmth .bar { height: 10px; margin-top: 4px; } .warmth.low .bar > span { background: var(--bad); } .warmth.mid .bar > span { background: var(--warn); } .warmth.high .bar > span { background: var(--ok); }
.stage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s2); }
.stage-card { border: 1px solid var(--border); border-radius: 12px; padding: var(--s3); background: var(--surface); border-left: 4px solid var(--border); }
.stage-card.strong { border-left-color: var(--ok); } .stage-card.partial { border-left-color: var(--warn); } .stage-card.missed { border-left-color: var(--bad); }
.stage-card .sc { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; } .stage-card .four { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; } .stage-card .you { font-size: var(--fs-xs); margin-top: 4px; }
.dim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); }
.dim-card { border: 1px solid var(--border); border-radius: 12px; padding: var(--s3); background: var(--surface); } .dim-card .nm { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }
.statement { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .statement .row3 { display: grid; grid-template-columns: 1.3fr 1.6fr 0.8fr; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); align-items: center; }
.statement .row3:last-child { border-bottom: none; } .statement .row3.head { background: var(--surface-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .statement .row3 .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.statement .row3.total { background: var(--primary-soft); font-weight: 700; } @media (max-width: 600px) { .statement .row3 { grid-template-columns: 1fr; } .statement .row3 .amt { text-align: left; } }
.rating-grid { display: grid; gap: var(--s2); } .rating-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) 100px 100px 180px minmax(160px, 1.5fr); gap: var(--s2); align-items: center; padding: var(--s2) 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); }
.rating-row .nm { font-weight: 600; } .rating-row select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } @media (max-width: 900px) { .rating-row { grid-template-columns: 1fr 1fr; } }
.note-card { border: 1px solid var(--border); border-radius: 12px; padding: var(--s3) var(--s4); background: var(--surface); border-left: 4px solid var(--border); cursor: pointer; }
.note-card.ai { border-left-color: var(--accent-4); } .note-card.manager { border-left-color: var(--primary); } .note-card.unread { background: var(--primary-soft); } .note-card .ttl { font-weight: 600; } .note-card .meta { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.date-head { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--subtle); margin: var(--s3) 0 var(--s2); }
.quiz-q { border: 1px solid var(--border); border-radius: 12px; padding: var(--s3) var(--s4); margin-bottom: var(--s2); } .quiz-q .opt { display: flex; gap: var(--s2); align-items: center; padding: 4px 0; font-size: var(--fs-sm); } .quiz-q.right { border-color: var(--ok); } .quiz-q.wrong { border-color: var(--bad); }
.section-body { white-space: pre-wrap; line-height: 1.55; }
.matrix { display: grid; gap: 2px; font-size: var(--fs-xs); } .matrix .mrow { display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(5, 1fr); gap: 2px; align-items: center; } .matrix .cell { padding: 6px; border-radius: 6px; background: var(--surface-2); text-align: center; } .matrix .cell.has { background: var(--primary-soft); color: var(--primary); font-weight: 600; } .matrix .cell.head { background: none; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.recall { border: 1px solid var(--border); border-radius: 12px; padding: var(--s3) var(--s4); margin-bottom: var(--s2); } .recall .opt { display: flex; gap: var(--s2); align-items: center; padding: 3px 0; font-size: var(--fs-sm); }