/* klar.inspect brand layer
 * The underlying product UI remains intact. This layer translates the approved
 * brand system into the real application without copying conceptual mockups.
 */
:root{
  --ki-canvas:#f6f5f1;
  --ki-surface:#fff;
  --ki-surface-muted:#f0eef5;
  --ki-ink:#18171d;
  --ki-deep:#281f55;
  --ki-focus:#6e56cf;
  --ki-focus-soft:#eae6f8;
  --ki-track:#d9d6e1;
  --ki-muted:#6f6b79;
  --ki-pass:#2e9d70;
  --ki-pass-soft:#ddf1e9;
  --ki-warning:#d99a35;
  --ki-warning-soft:#f8ecd5;
  --ki-blocker:#e36f5a;
  --ki-blocker-soft:#f9e1db;
  --ki-evidence:#54788a;
  --ki-evidence-soft:#e2edf1;
  --ki-control-radius:8px;
  --ki-card-radius:14px;
  --ki-panel-radius:20px;
  --ki-font:Geist,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ki-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --violet:var(--ki-focus);
  --violet-dark:var(--ki-deep);
  --violet-soft:var(--ki-focus-soft);
  --mint:var(--ki-pass);
  --mint-soft:var(--ki-pass-soft);
  --amber:var(--ki-warning);
  --rose:var(--ki-blocker);
  --ink:var(--ki-ink);
  --line:var(--ki-track);
  color:var(--ki-ink);
  background:var(--ki-canvas);
  font-family:var(--ki-font);
}

body{background:var(--ki-canvas);color:var(--ki-ink)}
body>header{min-height:68px;padding:0 28px;gap:28px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--ki-track);box-shadow:none;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;min-width:198px;color:var(--ki-ink)}
.brand:before{content:none!important}
.brand img{display:block;width:142px;height:auto}
.brand .brand-tagline{max-width:78px;margin:0;padding-left:10px;border-left:1px solid var(--ki-track);color:var(--ki-muted);font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.045em;text-transform:uppercase;white-space:normal}

.main-nav>a,.nav-menu>summary{color:var(--ki-muted);border-radius:var(--ki-control-radius)}
.main-nav>a:hover,.nav-menu>summary:hover,.nav-menu[open]>summary,.main-nav>a.active{background:var(--ki-focus-soft);color:var(--ki-deep)}
.main-nav>a.active{box-shadow:inset 0 -2px 0 var(--ki-focus)}
.nav-pop{background:var(--ki-surface);border-color:var(--ki-track);border-radius:var(--ki-card-radius);box-shadow:0 18px 40px rgba(40,31,85,.13)}
.nav-pop a{color:var(--ki-muted)}
.nav-pop a:hover{background:var(--ki-focus-soft);color:var(--ki-deep)}

.project-bar{top:68px;min-height:54px;padding:8px 28px;background:var(--ki-surface);border-color:var(--ki-track);box-shadow:none}
.project-identity{gap:9px}
.project-kicker{color:var(--ki-muted);font-weight:800;letter-spacing:.09em}
.project-identity>strong{color:var(--ki-deep)}
.project-env{background:var(--ki-surface-muted);color:var(--ki-muted)}
.project-nav>a,.project-nav>.nav-menu>summary{position:relative;color:var(--ki-muted);border-radius:var(--ki-control-radius)}
.project-nav>a:hover,.project-nav>a.active,.project-nav>.nav-menu>summary:hover,.project-nav>.nav-menu[open]>summary{background:var(--ki-focus-soft);color:var(--ki-deep)}
.project-nav>a.active:not(.project-run-button):after{content:"";position:absolute;right:9px;bottom:2px;left:9px;height:2px;border-radius:2px;background:var(--ki-focus)}
.project-run-button,.cockpit-start{margin-left:8px!important;padding:8px 13px!important;background:var(--ki-deep)!important;color:#fff!important;border:1px solid var(--ki-deep)!important;box-shadow:none!important}
.project-run-button:hover,.cockpit-start:hover{background:var(--ki-focus)!important;border-color:var(--ki-focus)!important}
.project-live{max-width:1440px;background:var(--ki-deep);border:1px solid rgba(255,255,255,.12);border-radius:var(--ki-card-radius);box-shadow:none}
.live-dot{background:var(--ki-focus);box-shadow:0 0 0 6px rgba(110,86,207,.2);animation:kiLivePulse 1.7s infinite}
@keyframes kiLivePulse{50%{box-shadow:0 0 0 10px rgba(110,86,207,.06)}}

main{max-width:1500px;padding:30px 30px 52px}
h1,h2,h3,strong{color:inherit}
.shell-hero p,.cockpit-top p,.section-head p,.muted{color:var(--ki-muted)}
.eyebrow{color:var(--ki-focus)}
.card,.quality-card,.product-area,.flow-card,.performance-list,.issue-card,.cockpit-panel,.portfolio-card,.story-step,.visual-compare-card,.handoff-status-card{background:var(--ki-surface);border-color:var(--ki-track);box-shadow:0 8px 26px rgba(40,31,85,.045)}
.card,.quality-card,.product-area,.flow-card,.performance-list,.issue-card,.portfolio-card{border-radius:var(--ki-card-radius)}
.cockpit-panel,.story-step{border-radius:var(--ki-panel-radius)}

.btn,button{border:1px solid var(--ki-deep);border-radius:var(--ki-control-radius);background:var(--ki-deep);color:#fff;box-shadow:none}
.btn:hover,button:hover{background:var(--ki-focus);border-color:var(--ki-focus);color:#fff}
.secondary{border-color:var(--ki-track)!important;background:var(--ki-surface)!important;color:var(--ki-deep)!important;box-shadow:none!important}
.secondary:hover{border-color:var(--ki-focus)!important;background:var(--ki-focus-soft)!important;color:var(--ki-deep)!important}
input,textarea,select{border-color:var(--ki-track);border-radius:var(--ki-control-radius);color:var(--ki-ink);background:var(--ki-surface)}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(110,86,207,.24);outline-offset:2px;border-color:var(--ki-focus)}

.notice{background:var(--ki-evidence-soft);color:var(--ki-ink)}
.notice.error{background:var(--ki-blocker-soft);border-left:4px solid var(--ki-blocker)}
.code{font-family:var(--ki-mono);background:var(--ki-deep);color:#f7f5ff}
code,.nav-email,.performance-row small,.timing small{font-family:var(--ki-mono)}

.badge,.badge.ok,.status-pill.passed,.status-pill.confirmed,.status-pill.verified,.story-status.ok{background:var(--ki-pass-soft);color:#176c4b}
.badge.bad,.status-pill.failed,.story-status.bad{background:var(--ki-blocker-soft);color:#9a3829}
.badge.warn,.status-pill.queued,.status-pill.untested,.story-status.open{background:var(--ki-warning-soft);color:#81570f}
.status-pill.running,.status-pill.ready,.status-pill.sent{background:var(--ki-focus-soft);color:var(--ki-deep)}
.status-pill.implemented{background:var(--ki-evidence-soft);color:#365d6e}
.status-pill.reopened{background:var(--ki-blocker-soft);color:#9a3829}
.status-dot,.node-status{background:var(--ki-pass);color:var(--ki-pass)}
.state-indicator.tested{background:var(--ki-evidence)}
.state-indicator.problem,.state-indicator.critical,.state-indicator.major{background:var(--ki-blocker)}
.state-indicator.new,.state-indicator.minor{background:var(--ki-warning)}

.pui-progress{background:var(--ki-track)}
.pui-progress span{background:var(--ki-focus)}
.map-summary{background:var(--ki-deep)}
.map-summary .pui-progress{background:rgba(255,255,255,.18)}
.map-summary .pui-progress span{background:var(--ki-focus)}
.area-icon,.tree-icon,.panel-title>span,.story-number,.story-arrow,.flow-preview-step>b,.film-step>b{background:var(--ki-focus-soft);color:var(--ki-deep);box-shadow:none}
.flow-step{background:var(--ki-focus-soft);color:var(--ki-deep);border-color:#d7cff3}
.page-tabs a.active{background:var(--ki-deep);color:#fff}
.score-ring{background:conic-gradient(var(--ki-focus) calc(var(--score)*1%),var(--ki-track) 0)}
.score-label{color:var(--ki-deep)}
.cockpit-flow,.builder-canvas,.story-explainer{background:var(--ki-surface);border-color:var(--ki-track)}
.cockpit-node{background:var(--ki-evidence-soft);border-color:#acc5cf;box-shadow:none}
.cockpit-node:nth-of-type(3n){background:#f8f6fc;border-color:#c9bced}
.next-step,.cockpit-brief,.handoff-status-card{background:var(--ki-surface)}
.flow-editor-entry,.story-step>header{background:var(--ki-surface)}
.builder-node,.builder-node.active{box-shadow:none}
.handoff-pipeline .active span{box-shadow:0 0 0 4px rgba(110,86,207,.18)}
.notice .inline-action button{box-shadow:none}
.performance-score{background:var(--ki-deep);box-shadow:none}
.performance-score.good,.performance-score.watch,.performance-score.regression{background:var(--ki-surface);color:var(--ki-ink);border:1px solid var(--ki-track)}
.performance-score.good{border-left:4px solid var(--ki-pass)}
.performance-score.watch{border-left:4px solid var(--ki-warning)}
.performance-score.regression{border-left:4px solid var(--ki-blocker)}
.performance-score.good small,.performance-score.watch small,.performance-score.regression small{color:var(--ki-muted)}
.chart-column>i,.chart-column>i.watch,.chart-column>i.slow{background:currentColor}
.chart-column>i{color:var(--ki-pass)}
.chart-column>i.watch{color:var(--ki-warning)}
.chart-column>i.slow{color:var(--ki-blocker)}

/* The visual trace marks what the tester acted on. It is focus, not an error. */
.story-target{border-color:var(--ki-focus);background:rgba(110,86,207,.13);box-shadow:0 0 0 5px rgba(110,86,207,.10),0 5px 16px rgba(40,31,85,.25)}
.story-target i{background:var(--ki-focus);color:#fff}
.filmstrip-card.visual .story-target,.flow-preview .story-target{box-shadow:0 0 0 3px rgba(110,86,207,.14)}
.issue-story .story-step{border-left-color:var(--ki-blocker)}
.danger-button{background:var(--ki-blocker)!important;border-color:var(--ki-blocker)!important}

.auth-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,460px);gap:64px;align-items:center;min-height:calc(100vh - 190px);max-width:1040px;margin:0 auto}
.auth-intro{padding:28px 0}
.auth-intro h1{max-width:660px;margin:10px 0 14px;color:var(--ki-deep);font-size:clamp(38px,5vw,62px);line-height:.98;letter-spacing:-.055em}
.auth-intro>p{max-width:610px;color:var(--ki-muted);font-size:17px;line-height:1.65}
.auth-points{display:grid;gap:11px;margin-top:26px}
.auth-points span{display:flex;align-items:center;gap:10px;color:var(--ki-deep);font-weight:700}
.auth-points span:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ki-focus);box-shadow:0 0 0 5px var(--ki-focus-soft)}
.auth-card{margin:0;padding:30px;border-radius:var(--ki-panel-radius)}
.auth-card h2{margin:0 0 7px;font-size:27px;letter-spacing:-.035em}
.auth-card>p{margin:0 0 22px;color:var(--ki-muted)}
.auth-card button{width:100%;margin-top:4px}

@media(max-width:1080px){
  .brand{min-width:auto}.brand .brand-tagline{display:none}
  .project-bar{padding-right:18px;padding-left:18px}
}
@media(max-width:800px){
  body>header{padding:12px 15px}.brand img{width:132px}
  .project-bar{top:auto}.project-run-button{margin-left:0!important}
  .auth-layout{grid-template-columns:1fr;gap:12px;min-height:auto}.auth-intro{padding-bottom:8px}.auth-intro h1{font-size:40px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}