/* ============================================================
   Kai dashboards — base layer
   Reset, type system, application shell, page chrome, responsive.

   Brand reset (2026-08-04): grounded in the live Dental AI Solutions site.
   The canvas is cool pale blue with the site's fixed radial atmosphere;
   surfaces are clean white carried on a blue inset ring rather than a grey
   border. Playfair is reserved for the PAGE TITLE — on the site it only
   ever sets large section/hero titles, always in navy. Section headings,
   cards, labels and controls are all Outfit.
   ============================================================ */

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
body{
  font-family:var(--font-ui);
  background:var(--paper);
  color:var(--ink);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* The site's fixed atmosphere layer, verbatim from complete.html body::after.
   This is what makes the ground read luminous rather than flat. */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 55% at 82% 0%, rgba(147,197,253,.16) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 5% 55%, rgba(96,165,250,.09) 0%, transparent 50%);
}
a{ color:var(--cobalt) }
button{ font:inherit; cursor:pointer; color:inherit }
input,select,textarea{ font:inherit; color:var(--ink) }
:focus-visible{ outline:2px solid var(--cobalt); outline-offset:3px; border-radius:4px }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important }
}

/* ============================================================
   Type system
   ============================================================ */
/* Playfair, navy, large — the site never uses the display face small or
   in a neutral colour. Reach for this on a page title, not a card heading. */
.display{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  color:var(--ink-display); text-wrap:balance;
}
/* Italic Playfair in cobalt: the site's accent for indices and standfirsts
   (.point .idx, .hero .prop). Small, rare, never a workhorse. */
.display-accent{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  color:var(--cobalt);
}

/* Site eyebrow: .eyebrow { .72rem / 600 / .2em / uppercase / blue } */
.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cobalt);
}
.field-label{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4 }
.num{ font-variant-numeric:tabular-nums lining-nums }

/* ============================================================
   Application shell
   ============================================================ */
.shell{ display:flex; min-height:100vh }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--line);
  padding:28px 20px 20px;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.brand{ padding:0 8px 6px }

/* ---- the Kai wordmark lockup ----
   Geometry copied from the site's .nav-logo: the SVG is sized off a single
   --wm-letter variable, nudged down 0.05482em to sit on the baseline, with
   the endorsement line aligned to the mark's foot. Do not substitute a font. */
.wordmark{
  display:inline-flex; align-items:flex-start; gap:8px;
  line-height:0; text-decoration:none; --wm-letter:27px;
}
/* Sidebar lockup carries the mark at brand presence. The endorsement line
   drops beneath it here rather than sitting alongside, so the mark can grow
   without the lockup outrunning a 244px rail. */
.brand .wordmark{ --wm-letter:38px; flex-wrap:wrap; row-gap:5px }
.brand .wordmark svg{ flex:none }
.brand .wordmark .endorse{ margin-top:0; flex-basis:100%; font-size:11.5px }
.wordmark svg{
  height:calc(var(--wm-letter) * 1.18390); width:auto; display:block;
  overflow:visible; color:var(--navy);
  transform:translateY(calc(var(--wm-letter) * .05482));
}
.wordmark svg path{ fill:currentColor }
.wordmark .endorse{
  font-family:var(--font-ui); font-size:11px; font-weight:500; line-height:1;
  color:var(--ink-2); white-space:nowrap;
  margin-top:calc(var(--wm-letter) * 1.05482 - 9.5px);
}
.brand .practice{
  margin-top:12px; font-size:13.5px; font-weight:500; color:var(--ink-2);
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.nav{ display:flex; flex-direction:column; gap:2px; margin-top:18px }
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px 9px 12px; border:none; background:none; width:100%;
  text-align:left; font-weight:500; font-size:15px; color:var(--ink-2);
  border-left:2px solid transparent; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.nav-item svg{ flex-shrink:0; opacity:.75 }
.nav-item:hover{ color:var(--ink); background:var(--blue-50) }
.nav-item.active{
  color:var(--cobalt); font-weight:600;
  border-left-color:var(--cobalt); background:var(--blue-50);
}
.nav-item.active svg{ opacity:1 }
.nav-item .badge{
  margin-left:auto; font-size:11.5px; font-weight:600; color:var(--urgent);
  background:var(--urgent-wash); border-radius:var(--r-pill); padding:1px 8px;
  font-variant-numeric:tabular-nums;
}
.side-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line) }
.side-user{ display:flex; align-items:center; gap:10px; padding:4px 6px; min-width:0 }
.side-user > div{ min-width:0 }
.side-user .avatar{
  width:34px; height:34px; border-radius:var(--r-pill);
  background:var(--cobalt); color:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
}
.side-user .nm{ font-size:14px; font-weight:600; line-height:1.25 }
.side-user .em{ font-size:12px; color:var(--ink-3); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.side-signout{
  margin:12px 6px 0; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-pill); padding:7px 16px;
  font-size:13.5px; font-weight:600; color:var(--ink-2);
}
.side-signout:hover{ color:var(--urgent); border-color:var(--urgent) }
.build-tag{ margin:14px 6px 0; font-size:10px; color:var(--ink-3); opacity:.65; letter-spacing:.02em }

.main{ flex:1; min-width:0; padding:36px 44px 72px; max-width:1120px }

/* ============================================================
   Compact rail — 761px to 1023px

   The full 244px sidebar squeezes the content column on a tablet, so
   between the phone breakpoint and the desktop one the rail collapses to
   icons over short labels. Same destinations, same order, no hidden nav.
   ============================================================ */
@media (min-width:761px) and (max-width:1023px){
  :root{ --sidebar-w:88px }
  .sidebar{ padding:22px 8px 16px; align-items:center }
  .brand{ padding:0 0 4px; width:100% }
  .brand .wordmark{ --wm-letter:24px; justify-content:center; row-gap:0 }
  .brand .wordmark .endorse{ display:none }
  .brand .practice{ display:none }

  .nav{ margin-top:16px; width:100%; gap:4px }
  .nav-item{
    flex-direction:column; align-items:center; gap:5px;
    padding:10px 4px; border-left:none; border-radius:var(--r-md);
    text-align:center; font-size:11px; line-height:1.2;
  }
  .nav-item.active{ border-left:none; background:var(--blue-50) }
  .nav-item .nav-label{ display:block }
  .nav-item .badge{ margin:0; position:absolute; transform:translate(18px,-14px) }
  .nav-item{ position:relative }

  .side-foot{ width:100%; text-align:center }
  .side-user{ justify-content:center; padding:4px 0 }
  .side-user .nm, .side-user .em{ display:none }
  .side-signout{ margin:12px auto 0; padding:7px 10px; font-size:11px }

  .main{ padding:30px 28px 64px }
}

/* --- mobile shell: slim header + bottom tab bar --- */
.m-header{ display:none }
.tabbar{ display:none }
@media (max-width:760px){
  .sidebar{ display:none }
  .m-header{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:30;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:13px 18px 11px;
  }
  .m-header .wordmark{ --wm-letter:26px }
  .m-header .wordmark .endorse{ display:none }
  .m-header .practice{ font-size:12px; color:var(--ink-2); font-weight:500 }
  /* Bottom padding clears the fixed tab bar plus the device safe area, so
     the last card is never hidden behind it. */
  .main{ padding:22px 18px calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom)) }
  .tabbar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:30;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -1px 3px rgba(15,23,42,.04);
  }
  .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; padding:8px 0 5px; border-radius:var(--r-md);
    font-size:11px; font-weight:600; color:var(--ink-3);
  }
  .tab.active{ background:var(--blue-50) }
  .tab.active{ color:var(--cobalt) }
  .tab svg{ opacity:.8 } .tab.active svg{ opacity:1 }
}

/* ============================================================
   Page chrome
   ============================================================ */
.page{ display:none }
.page.active{ display:block }

.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:26px }
/* The one place the display face belongs in the app. */
.page-head h1{
  font-family:var(--font-display); font-weight:600; font-size:42px;
  letter-spacing:-.02em; line-height:1.1; margin-top:10px; text-wrap:balance;
  color:var(--ink-display);
}
.page-head .lede{ color:var(--ink-2); font-size:18px; line-height:1.55; margin-top:12px; max-width:62ch }
.page-head .lede strong{ color:var(--ink); font-weight:600 }
.head-side{ display:flex; align-items:center; gap:14px; padding-bottom:4px }
.updated{
  font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:10px;
}
.updated button{
  background:none; border:none; padding:0; font-size:12.5px; font-weight:600;
  color:var(--cobalt); display:inline-flex; align-items:center; gap:5px;
}
.updated button:hover{ color:var(--cobalt-hover); text-decoration:underline }
@media (max-width:760px){
  .page-head h1{ font-size:30px }
  .page-head .lede{ font-size:16.5px }
  .page-head{ margin-bottom:22px }
}

.back-link{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; padding:0; margin-bottom:14px;
  font-size:14px; font-weight:600; color:var(--ink-3);
}
.back-link:hover{ color:var(--cobalt) }