/* ============================================================================
   KIMO DESIGN SYSTEM — base.css   (reset + shared component library)
   Requires tokens.css (link tokens.css FIRST). Every class here reads design
   values from custom properties — no hardcoded colors/px. Add APP-SPECIFIC
   components in the app's own stylesheet, not here.
   ============================================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);background:var(--bg-0);color:var(--tx-0);
  font-size:var(--t-base);line-height:1.45;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;display:flex;min-height:100%;
}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;animation-iteration-count:1!important}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
a{color:var(--accent-text)}

/* ============================ SIDEBAR RAIL ============================ */
.rail{
  width:var(--rail-w);flex-shrink:0;background:var(--rail);
  display:flex;flex-direction:column;height:100vh;position:sticky;top:0;
  border-right:1px solid color-mix(in srgb,var(--rail-3) 70%,transparent);
}
.rail-top{padding:var(--s4) var(--s4) var(--s3)}
.rail-hub{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);
  color:var(--rail-text);text-decoration:none;letter-spacing:.02em;
  padding:4px 6px;margin:-4px -6px var(--s3);border-radius:var(--r-sm);
  min-height:28px;transition:color var(--dur),background var(--dur);
}
.rail-hub:hover{color:var(--rail-text-strong);background:var(--rail-2)}
.rail-hub svg{width:13px;height:13px}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{
  width:30px;height:30px;border-radius:var(--r-md);background:var(--accent);
  display:grid;place-items:center;color:#fff;font-family:var(--font-display);
  font-style:italic;font-weight:600;font-size:17px;box-shadow:var(--shadow);
}
.brand h1{color:var(--rail-text-strong);font-family:var(--font-display);font-size:var(--t-md);font-weight:600;letter-spacing:-.01em}
.brand p{color:var(--rail-text);font-size:var(--t-xs);margin-top:1px}

.rail-nav{flex:1;padding:var(--s2) var(--s3);overflow-y:auto}
.rail-sec{
  color:var(--rail-text);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:var(--s4) 8px var(--s2);
}
.ni{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-md);
  cursor:pointer;color:var(--rail-text);font-size:var(--t-sm);font-weight:500;
  width:100%;text-align:left;background:none;border:1px solid transparent;
  min-height:34px;transition:background var(--dur),color var(--dur);font-family:inherit;
  position:relative;
}
.ni:hover{background:var(--rail-2);color:var(--rail-text-strong)}
.ni.active{background:var(--rail-3);color:var(--rail-text-strong)}
.ni.active::before{
  content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:0 2px 2px 0;background:var(--accent);
}
.ni svg{width:16px;height:16px;flex-shrink:0;opacity:.85}
.ni .ni-kbd{
  margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--rail-text);
  background:var(--rail-2);border:1px solid color-mix(in srgb,var(--rail-3) 80%,transparent);
  border-radius:4px;padding:0 5px;line-height:16px;opacity:.7;
}
.ni:focus-visible{outline-offset:-2px}

.rail-foot{
  padding:var(--s3) var(--s4);border-top:1px solid color-mix(in srgb,var(--rail-3) 70%,transparent);
  display:flex;align-items:center;gap:9px;
}
.ava{
  width:28px;height:28px;border-radius:var(--r-md);background:var(--rail-3);
  display:grid;place-items:center;font-size:var(--t-xs);font-weight:650;
  color:var(--accent);font-family:var(--mono);flex-shrink:0;
}
.rail-foot p{color:var(--rail-text-strong);font-size:var(--t-sm);font-weight:550;line-height:1.2}
.rail-foot span{color:var(--rail-text);font-size:var(--t-xs)}
.theme-btn{
  margin-left:auto;width:30px;height:30px;border-radius:var(--r-md);
  background:var(--rail-2);border:1px solid color-mix(in srgb,var(--rail-3) 80%,transparent);
  color:var(--rail-text);display:grid;place-items:center;cursor:pointer;
  transition:color var(--dur),background var(--dur);
}
.theme-btn:hover{color:var(--rail-text-strong);background:var(--rail-3)}
.theme-btn svg{width:15px;height:15px}
.theme-btn .ico-moon{display:none}
html[data-theme="dark"] .theme-btn .ico-sun,
.theme-btn .ico-sun{display:block}
html[data-theme="dark"] .theme-btn .ico-sun{display:none}
html[data-theme="dark"] .theme-btn .ico-moon{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .theme-btn .ico-sun{display:none}
  html:not([data-theme="light"]) .theme-btn .ico-moon{display:block}
}

/* ============================ MAIN + PAGE HEADER ============================ */
.main{flex:1;min-width:0;overflow-y:auto;height:100vh}
.page{display:none}
.page.active{display:block;animation:fade var(--dur) ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

.ph{
  position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg-0) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--bd);
  padding:var(--s4) clamp(var(--s4),3vw,var(--s6));
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
}
.ph h2{font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.ph .sub{color:var(--tx-2);font-size:var(--t-sm)}
.ph .sub .em{color:var(--tx-1);font-weight:550}
.pc{padding:var(--s4) clamp(var(--s4),3vw,var(--s6)) var(--s6);max-width:1180px}

/* ============================ MOBILE TOPBAR ============================ */
.topbar{
  display:none;align-items:center;gap:var(--s3);padding:0 var(--s4);height:50px;
  background:var(--rail);position:sticky;top:0;z-index:60;flex-shrink:0;
  border-bottom:1px solid var(--rail-3);
}
.ham{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:var(--r-sm)}
.ham span{display:block;width:18px;height:2px;background:var(--rail-text-strong);border-radius:2px;transition:transform var(--dur),opacity var(--dur)}
.ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.topbar-title{color:var(--rail-text-strong);font-size:var(--t-md);font-weight:600;flex:1}
.rail-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90}
.rail-scrim.show{display:block}

/* ============================ PRIMITIVES ============================ */
.chip-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.fbtn{
  padding:5px 11px;border:1px solid var(--bd);border-radius:var(--r-md);
  background:var(--bg-1);font-size:var(--t-sm);font-weight:500;cursor:pointer;
  color:var(--tx-1);transition:border-color var(--dur),background var(--dur),color var(--dur);
  min-height:30px;display:inline-flex;align-items:center;gap:5px;font-family:inherit;white-space:nowrap;
}
.fbtn:hover{border-color:var(--bd-strong);color:var(--tx-0)}
.fbtn[aria-pressed="true"]{background:var(--accent-weak);border-color:var(--accent-line);color:var(--accent-text);font-weight:600}
.fdiv{width:1px;align-self:stretch;background:var(--bd);margin:2px 0}

.btn{
  padding:8px 14px;border:1px solid transparent;border-radius:var(--r-md);font-size:var(--t-sm);
  font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;
  min-height:36px;transition:background var(--dur),border-color var(--dur),color var(--dur);
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-strong)}
.btn-ghost{background:var(--bg-1);border-color:var(--bd);color:var(--tx-1)}
.btn-ghost:hover{border-color:var(--bd-strong);color:var(--tx-0);background:var(--bg-2)}

.empty{text-align:center;padding:var(--s6) var(--s4);color:var(--tx-2);border:1px dashed var(--bd);border-radius:var(--r-lg);background:var(--bg-1)}
.empty svg{width:34px;height:34px;margin:0 auto var(--s3);display:block;opacity:.4}
.empty p{font-size:var(--t-base)}

.tag{
  font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;
  background:var(--bg-2);color:var(--tx-1);border:1px solid var(--bd);white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;
}
.tag .mono{font-size:10px}

/* ============================ STAT STRIP ============================ */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin-bottom:var(--s5);
  border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-1);box-shadow:var(--shadow);
}
.stat{padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:3px;border-left:1px solid var(--bd)}
.stat:first-child{border-left:none}
.stat-l{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-2);display:flex;align-items:center;gap:6px}
.stat-l svg{width:13px;height:13px;opacity:.7}
.stat-v{font-size:var(--t-lg);font-weight:650;letter-spacing:-.02em;line-height:1.1}
.stat-v.amber{color:var(--amber)}
.stat-v.red{color:var(--red)}
.stat-meta{font-size:var(--t-xs);color:var(--tx-2)}

/* ============================ SEARCH ============================ */
.search{position:relative;margin-bottom:var(--s3)}
.search>svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--tx-2);pointer-events:none}
.search input{
  width:100%;padding:9px 36px 9px 34px;border:1px solid var(--bd);border-radius:var(--r-md);
  font-size:var(--t-base);background:var(--bg-1);color:var(--tx-0);outline:none;font-family:inherit;
  transition:border-color var(--dur),box-shadow var(--dur);min-height:38px;
}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.search input::placeholder{color:var(--tx-2)}
.search .kbd{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;
  color:var(--tx-2);border:1px solid var(--bd);border-radius:4px;padding:1px 5px;background:var(--bg-2);
}
.filters{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}

/* ============================ CARD GRID + CARD ============================ */
.pgroup{margin-bottom:var(--s5)}
.pgroup-head{display:flex;align-items:center;gap:8px;margin-bottom:var(--s3);padding-bottom:6px;border-bottom:1px solid var(--bd)}
.pgroup-head .gi{font-size:13px;line-height:1}
.pgroup-head .gl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-1)}
.pgroup-head .gc{font-size:10px;font-family:var(--mono);color:var(--tx-2);background:var(--bg-2);border:1px solid var(--bd);border-radius:4px;padding:0 6px;line-height:16px}
.pgroup-head .gsum{margin-left:auto;font-size:var(--t-xs);color:var(--tx-2)}

.pgrid{container-type:inline-size;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3)}
.pcard{
  background:var(--bg-1);border:1px solid var(--bd);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);cursor:pointer;text-align:left;width:100%;font-family:inherit;
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:start;box-shadow:var(--shadow);
  transition:border-color var(--dur),background var(--dur),box-shadow var(--dur);color:inherit;
}
.pcard:hover{border-color:var(--bd-strong);background:var(--bg-1);box-shadow:var(--shadow-pop)}
.pcard:hover .pcard-go{opacity:1;transform:translateX(0)}
.pcard-ic{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;font-size:16px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--bd)}
.pcard-main{min-width:0}
.pcard-title{font-size:var(--t-base);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pcard-insurer{font-size:var(--t-xs);color:var(--tx-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px}
.pcard-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.pcard-prem{font-size:var(--t-base);font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.pcard-per{font-size:10px;color:var(--tx-2);text-transform:uppercase;letter-spacing:.04em}
.pcard-go{width:14px;height:14px;color:var(--tx-2);opacity:0;transform:translateX(-3px);transition:opacity var(--dur),transform var(--dur);margin-top:2px}
.deadline{font-size:10px;font-weight:650;padding:2px 7px;border-radius:4px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;border:1px solid transparent}
.deadline.amber{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}
.deadline.red{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
@container (max-width: 340px){
  .pcard{grid-template-columns:auto 1fr}
  .pcard-right{grid-column:2;align-items:flex-start;text-align:left;flex-direction:row;gap:6px;margin-top:2px}
  .pcard-go{display:none}
}

/* ============================ DETAIL OVERLAY ============================ */
.overlay{position:fixed;inset:0;background:var(--bg-0);z-index:120;overflow-y:auto;display:none}
.overlay.open{display:block;animation:slideup var(--dur) ease}
@keyframes slideup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ovl-head{
  position:sticky;top:0;background:color-mix(in srgb,var(--bg-0) 88%,transparent);backdrop-filter:saturate(1.4) blur(8px);
  display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);min-height:50px;border-bottom:1px solid var(--bd);z-index:5;
}
.back{
  background:var(--bg-1);border:1px solid var(--bd);color:var(--tx-1);cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-sm);font-weight:550;padding:6px 11px 6px 8px;border-radius:var(--r-md);min-height:34px;font-family:inherit;
  transition:border-color var(--dur),color var(--dur),background var(--dur);
}
.back:hover{border-color:var(--bd-strong);color:var(--tx-0);background:var(--bg-2)}
.back svg{width:15px;height:15px}
.ovl-title{font-size:var(--t-base);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx-1)}
.ovl-body{max-width:820px;margin:0 auto;padding:var(--s5) var(--s4) var(--s6)}
.dhero{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s5)}
.dhero .dh-ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;font-size:20px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--bd)}
.dhero h2{font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;letter-spacing:-.025em;line-height:1.12}
.dhero .dsub{font-size:var(--t-sm);color:var(--tx-2);margin-top:3px}

.sec{background:var(--bg-1);border:1px solid var(--bd);border-radius:var(--r-lg);margin-bottom:var(--s3);overflow:hidden;box-shadow:var(--shadow)}
.sec-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tx-2);padding:var(--s3) var(--s4);background:var(--bg-2);border-bottom:1px solid var(--bd)}
.sec-b{padding:var(--s2) var(--s4)}
.frow{display:flex;justify-content:space-between;gap:var(--s4);padding:8px 0;border-bottom:1px solid var(--bd);font-size:var(--t-base);align-items:baseline}
.frow:last-child{border-bottom:none}
.flabel{color:var(--tx-2);flex-shrink:0;font-size:var(--t-sm)}
.fvalue{font-weight:550;text-align:right}
.fvalue a{color:var(--accent-text);text-decoration:none}
.fvalue a:hover{text-decoration:underline}

.cov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);padding:var(--s3) var(--s4) var(--s4)}
.cov-col h4{font-size:11px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px;letter-spacing:.03em}
.cov-col.covered h4{color:var(--green-ok)}
.cov-col.excluded h4{color:var(--red)}
.cov-item{padding:7px 10px;border-radius:var(--r-sm);margin-bottom:5px;border:1px solid var(--bd);border-left-width:3px;background:var(--bg-1)}
.cov-item.covered{border-left-color:var(--green-ok)}
.cov-item.excluded{border-left-color:var(--red)}
.cov-item .cl{font-weight:600;font-size:var(--t-sm);display:block}
.cov-item .cv{color:var(--tx-2);font-size:var(--t-xs);margin-top:1px}

.docs{padding:var(--s3) var(--s4) var(--s4);display:grid;gap:6px}
.doc{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--bd);border-radius:var(--r-md);text-decoration:none;color:var(--tx-0);font-size:var(--t-sm);font-weight:550;transition:border-color var(--dur),background var(--dur);min-height:40px}
.doc:hover{border-color:var(--accent-line);background:var(--accent-weak)}
.doc svg{width:15px;height:15px;color:var(--red);flex-shrink:0}
.doc .dt{margin-left:auto;font-size:10px;color:var(--tx-2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}
.notes-p{font-size:var(--t-base);line-height:1.6;padding:var(--s3) var(--s4) var(--s4);white-space:pre-wrap;color:var(--tx-1)}

/* ============================ ACCORDION (benefits) ============================ */
.ben-intro{font-size:var(--t-sm);color:var(--tx-2);margin-bottom:var(--s4);line-height:1.5;max-width:62ch}
.ben-tabs{display:flex;gap:var(--s2);margin-bottom:var(--s5);flex-wrap:wrap;border-bottom:1px solid var(--bd);padding-bottom:0}
.ben-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:none;background:none;font-size:var(--t-sm);font-weight:550;color:var(--tx-1);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;min-height:36px;transition:color var(--dur),border-color var(--dur)}
.ben-tab:hover{color:var(--tx-0)}
.ben-tab[aria-selected="true"]{color:var(--accent-text);border-bottom-color:var(--accent);font-weight:650}
.ben-tab .bt-c{font-family:var(--mono);font-size:10px;color:var(--tx-2);background:var(--bg-2);border:1px solid var(--bd);border-radius:4px;padding:0 5px;line-height:16px}
.ben-tab[aria-selected="true"] .bt-c{color:var(--accent-text);border-color:var(--accent-line);background:var(--accent-weak)}
.ben-cat{margin-bottom:var(--s4)}
.ben-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ben-cat-ic{font-size:13px}
.ben-cat-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx-1)}
.ben-cat-c{font-size:10px;font-family:var(--mono);color:var(--tx-2);background:var(--bg-2);border:1px solid var(--bd);border-radius:4px;padding:0 6px;line-height:16px}
.ben-list{background:var(--bg-1);border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden}
.ben-row{border-bottom:1px solid var(--bd)}
.ben-row:last-child{border-bottom:none}
.ben-row-btn{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);width:100%;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;color:inherit;transition:background var(--dur);min-height:46px}
.ben-row-btn:hover{background:var(--bg-2)}
.ben-row-main{flex:1;min-width:0}
.ben-name{font-size:var(--t-base);font-weight:600;line-height:1.3}
.ben-reimb{font-size:var(--t-sm);color:var(--tx-2);margin-top:2px}
.ben-limit{font-size:11px;font-weight:600;color:var(--accent-text);background:var(--accent-weak);border:1px solid var(--accent-line);padding:2px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.ben-chev{width:15px;height:15px;color:var(--tx-2);flex-shrink:0;transition:transform var(--dur)}
.ben-row-btn[aria-expanded="true"] .ben-chev{transform:rotate(180deg)}
.ben-detail{display:none;padding:0 var(--s4) var(--s3) var(--s4);font-size:var(--t-sm);line-height:1.55;border-top:1px dashed var(--bd)}
.ben-detail.show{display:block;padding-top:var(--s3)}
.ben-detail .dl{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-text);margin:9px 0 1px}
.ben-detail .dl:first-child{margin-top:0}
.ben-detail .dv{color:var(--tx-1)}

/* ============================ SEVERITY CARDS (gaps) ============================ */
.gap-sev{margin-bottom:var(--s5)}
.gap-sev-head{display:flex;align-items:center;gap:8px;margin-bottom:var(--s3);padding-bottom:6px;border-bottom:1px solid var(--bd)}
.gap-sev-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.gap-sev-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx-1)}
.gap-sev-c{font-size:10px;font-family:var(--mono);color:var(--tx-2);background:var(--bg-2);border:1px solid var(--bd);border-radius:4px;padding:0 6px;line-height:16px}
.gaps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--s3)}
.gcard{background:var(--bg-1);border:1px solid var(--bd);border-left:3px solid var(--bd-strong);border-radius:var(--r-md);padding:var(--s4);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.gcard.sev-high{border-left-color:var(--red)}
.gcard.sev-medium{border-left-color:var(--amber)}
.gcard.sev-low{border-left-color:var(--slate)}
.gcard.sev-info{border-left-color:var(--grey)}
.gcard.resolved{opacity:.6}
.gap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.gap-title{font-size:var(--t-base);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.gpill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;border:1px solid transparent}
.gpill.sev-high{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.gpill.sev-medium{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}
.gpill.sev-low{background:var(--slate-bg);color:var(--slate)}
.gpill.sev-info{background:var(--grey-bg);color:var(--grey)}
.gap-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.gap-finding{font-size:var(--t-sm);color:var(--tx-1);line-height:1.55;margin-top:10px}
.gap-action{font-size:var(--t-sm);line-height:1.55;margin-top:10px;background:var(--bg-2);border:1px solid var(--bd);border-radius:var(--r-md);padding:9px 11px;color:var(--tx-1)}
.gap-action .al{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-text);display:block;margin-bottom:3px}
.gap-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:var(--s3);flex-wrap:wrap}
.gap-cost{font-size:var(--t-sm);font-weight:600;color:var(--accent-text);background:var(--accent-weak);border:1px solid var(--accent-line);padding:3px 9px;border-radius:4px;font-variant-numeric:tabular-nums}

/* ============================ SELECT + TOGGLE ============================ */
.sel-wrap{position:relative;display:inline-flex}
.sel-wrap::after{content:"";position:absolute;right:10px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--tx-2);border-bottom:1.5px solid var(--tx-2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
select.kimo-select,.gap-status{
  font-size:var(--t-sm);font-weight:550;padding:6px 28px 6px 10px;border:1px solid var(--bd);border-radius:var(--r-md);
  background:var(--bg-1);color:var(--tx-0);cursor:pointer;font-family:inherit;outline:none;min-height:34px;appearance:none;-webkit-appearance:none;transition:border-color var(--dur);
}
select.kimo-select:hover,.gap-status:hover{border-color:var(--bd-strong)}
select.kimo-select:focus-visible,.gap-status:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.resolved-toggle{width:100%;text-align:left;padding:10px 13px;background:var(--bg-1);border:1px dashed var(--bd);border-radius:var(--r-md);font-size:var(--t-sm);color:var(--tx-1);cursor:pointer;font-weight:550;margin-top:var(--s2);font-family:inherit;min-height:42px;display:flex;align-items:center;gap:8px;transition:border-color var(--dur),color var(--dur)}
.resolved-toggle:hover{border-color:var(--bd-strong);color:var(--tx-0)}
.resolved-toggle .rt-chev{width:13px;height:13px;transition:transform var(--dur)}
.resolved-toggle[aria-expanded="true"] .rt-chev{transform:rotate(90deg)}

/* ============================ TOAST ============================ */
.toast{
  position:fixed;bottom:var(--s5);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--rail);color:var(--rail-text-strong);padding:9px 16px;border-radius:var(--r-md);
  font-size:var(--t-sm);font-weight:550;opacity:0;transition:opacity var(--dur),transform var(--dur);
  z-index:200;pointer-events:none;border:1px solid var(--rail-3);box-shadow:var(--shadow-pop);
  display:inline-flex;align-items:center;gap:7px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:14px;height:14px;color:var(--accent)}

/* ============================ BOTTOM TAB BAR ============================ */
/* Reusable mobile bottom nav. Hidden by default; apps opt in via their own
   media query (e.g. `@media(max-width:860px){.tabbar{display:grid}}`) or by
   adding `.show`. Sits above page content but below the off-canvas scrim (90)
   and drawer (100). */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--bg-1);border-top:1px solid var(--bd);
  grid-auto-flow:column;grid-auto-columns:1fr;
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar.show{display:grid}
.tabitem{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;background:none;border:none;cursor:pointer;color:var(--tx-2);
  font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.02em;
  transition:color var(--dur);
}
.tabitem svg{width:20px;height:20px}
.tabitem.active{color:var(--accent-text)}
.tabitem:focus-visible{outline-offset:-2px}

/* ============================ RESPONSIVE SHELL ============================ */
@media (max-width:860px){
  body{flex-direction:column}
  .topbar{display:flex}
  .rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);max-width:84vw;transform:translateX(-105%);z-index:100;transition:transform var(--dur) ease;height:100vh;border-right:1px solid var(--rail-3)}
  .rail.open{transform:none}
  .main{height:auto;min-height:calc(100vh - 50px);width:100%}
  .ph{position:static;backdrop-filter:none;background:var(--bg-0)}
  .pgrid,.gaps-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.rail{transition:none}}