/* ==========================================================================
   Kalexnovia — Documentation Portal
   Palette and typography are taken verbatim from the product design system
   (tailwind.config.ts): Quebec Blue / Navy / Cyan / Gold, typeface Inter.
   ========================================================================== */

:root {
  /* Quebec Blue — brand primary */
  --q50:#e8f2fc; --q100:#c6dff8; --q200:#9dc9f3; --q300:#74b3ed; --q400:#4a9de8;
  --q500:#2f7fe0; --q600:#1a6bb5; --q700:#0e4f8b; --q800:#0b3d6b; --q900:#0a2540; --q950:#051a2e;
  /* Navy — anchor */
  --n50:#eef4fb; --n100:#d3e2f3; --n200:#a6c3e4; --n300:#6f9bce; --n400:#3f6ea8;
  --n500:#1f4f85; --n600:#123d6b; --n700:#0e2f52; --n800:#0a2540; --n900:#071a2e; --n950:#04101d;
  /* Cyan — accent */
  --c300:#67e8f9; --c400:#38bdf8; --c500:#22d3ee; --c600:#0891b2; --c700:#0e7490;
  /* Gold — value */
  --g100:#faecc8; --g300:#f0c456; --g400:#e8a020; --g500:#c89b2a; --g700:#7a5c19;

  --bg:#ffffff; --bg-alt:#f6f9fd; --surface:#ffffff; --surface-2:var(--q50);
  --text:var(--n900); --text-2:#41556b; --text-3:#6b7f95;
  --border:#dbe6f2; --border-2:#c6d7e8;
  --brand:var(--q700); --brand-ink:#ffffff;
  --ok:#0f7a4d; --warn:#a16207; --danger:#b42318;
  --shadow-sm:0 1px 2px rgba(10,37,64,.06), 0 1px 3px rgba(10,37,64,.08);
  --shadow-md:0 6px 16px rgba(10,37,64,.10), 0 2px 6px rgba(10,37,64,.06);
  --shadow-lg:0 24px 60px rgba(10,37,64,.22);
  --r:10px; --r-lg:16px;
  --sidebar-w:290px; --topbar-h:60px;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  --bg:#071a2e; --bg-alt:#04101d; --surface:#0a2540; --surface-2:#0e2f52;
  --text:#e9f2fb; --text-2:#a9c1d8; --text-3:#7f9ab4;
  --border:#123d6b; --border-2:#1f4f85;
  --brand:var(--c400); --brand-ink:#04101d;
  --ok:#4ade80; --warn:#fbbf24; --danger:#fca5a5;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.5);
  --shadow-lg:0 24px 60px rgba(0,0,0,.65);
}

*,*::before,*::after{box-sizing:border-box}
/* The HTML `hidden` attribute must win over any component `display` rule.
   Without this, .gate / .boot / .modal (display:grid) stay painted on top of
   the application even once JS sets hidden — the auth panel then covers every
   page permanently. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--q600);text-underline-offset:2px}
html[data-theme="dark"] a{color:var(--c400)}
:focus-visible{outline:3px solid var(--c500);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--brand-ink);
  padding:.7rem 1.1rem;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.muted{color:var(--text-3)}

/* ── Boot ───────────────────────────────────────────────────────────────── */
.boot{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:1rem;color:var(--text-3)}
.boot-spin{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--brand);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.boot-spin{animation-duration:2.4s}}

/* ── Auth gate ──────────────────────────────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:1.25rem;
  background:linear-gradient(150deg,var(--q900) 0%,var(--q700) 55%,var(--c700) 130%)}
.gate-panel{width:min(520px,100%);background:var(--surface);border-radius:var(--r-lg);
  padding:2.4rem 2.2rem;box-shadow:var(--shadow-lg);text-align:left}
.gate-brand{display:flex;align-items:center;gap:.85rem;margin-bottom:1.6rem}
.gate-brand strong{display:block;font-size:1.15rem;letter-spacing:-.01em}
.gate-brand span{display:block;font-size:.85rem;color:var(--text-3)}
.gate-panel h1{margin:0 0 .6rem;font-size:1.5rem;letter-spacing:-.02em}
.gate-panel p{margin:0 0 1.6rem;color:var(--text-2)}
.gate-error{background:#fef2f2;border:1px solid #fecaca;color:var(--danger);
  padding:.7rem .9rem;border-radius:var(--r);font-size:.9rem;margin-top:1rem}
html[data-theme="dark"] .gate-error{background:#3f1d1d;border-color:#7f1d1d}
.gate-lang{display:flex;gap:.5rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--border)}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:600;border-radius:var(--r);border:1px solid transparent;
  padding:.6rem 1.05rem;cursor:pointer;background:var(--surface-2);color:var(--text);
  transition:background .15s,border-color .15s,transform .06s}
.btn:hover{border-color:var(--border-2)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn-primary:hover{background:var(--q800)}
html[data-theme="dark"] .btn-primary:hover{background:var(--c300)}
.btn-lg{width:100%;padding:.85rem 1.2rem;font-size:1.02rem}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r);
  border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.lang-btn{font:inherit;font-size:.82rem;font-weight:600;padding:.3rem .62rem;border-radius:7px;
  border:1px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer}
.lang-btn[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}

/* ── Top bar ────────────────────────────────────────────────────────────── */
.app{min-height:100dvh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:60;height:var(--topbar-h);display:flex;align-items:center;
  gap:.85rem;padding:0 .9rem;background:var(--surface);border-bottom:1px solid var(--border)}
#nav-toggle{display:none}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);flex:none}
.brand-txt{font-weight:700;letter-spacing:-.015em;line-height:1.15;font-size:.98rem}
.brand-txt em{display:block;font-style:normal;font-weight:500;font-size:.72rem;color:var(--text-3)}
.search-wrap{position:relative;flex:1;max-width:520px;margin:0 auto}
#search{width:100%;font:inherit;font-size:.92rem;padding:.5rem 3.4rem .5rem .9rem;border-radius:var(--r);
  border:1px solid var(--border);background:var(--bg-alt);color:var(--text)}
#search::placeholder{color:var(--text-3)}
.search-wrap kbd{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font:inherit;
  font-size:.68rem;font-weight:600;color:var(--text-3);border:1px solid var(--border);
  border-radius:5px;padding:.1rem .35rem;background:var(--surface);pointer-events:none}
.search-results{position:absolute;top:calc(100% + .4rem);left:0;right:0;max-height:min(60vh,440px);
  overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-md);padding:.35rem;z-index:70}
.search-results a{display:block;padding:.5rem .65rem;border-radius:7px;text-decoration:none;color:var(--text)}
.search-results a:hover,.search-results a.sel{background:var(--surface-2)}
.search-results .sr-sec{display:block;font-size:.72rem;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.04em;padding:.5rem .65rem .2rem}
.search-results .sr-t{display:block;font-weight:600;font-size:.9rem;line-height:1.3}
.search-results .sr-x{display:block;font-size:.78rem;color:var(--text-3);line-height:1.3;margin-top:.1rem}
.topbar-actions{display:flex;align-items:center;gap:.5rem;flex:none}
.lang-switch{display:flex;gap:.25rem}
html[data-theme="light"] .ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}
.user-chip{display:flex;align-items:center;gap:.55rem;padding-left:.6rem;border-left:1px solid var(--border)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:.78rem;flex:none}
.user-meta{line-height:1.2;min-width:0}
.user-meta strong{display:block;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.user-meta small{display:block;font-size:.72rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.body{flex:1;display:flex;min-height:0}
.sidebar{width:var(--sidebar-w);flex:none;border-right:1px solid var(--border);background:var(--bg-alt);
  padding:1.1rem .75rem 2.5rem;overflow-y:auto;height:calc(100dvh - var(--topbar-h));
  position:sticky;top:var(--topbar-h)}
.scrim{display:none}
.main{flex:1;min-width:0;padding:2rem 2.4rem 4.5rem;max-width:1180px}

/* ── Sidebar: three levels — section > group > item ─────────────────────── */
.nav-sec{margin-bottom:2px;border-radius:10px}
.nav-sec[data-open="true"]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.nav-sec>button{width:100%;display:flex;align-items:center;gap:.5rem;
  font:inherit;font-weight:700;font-size:.735rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);background:transparent;border:0;padding:.62rem .7rem;cursor:pointer;
  text-align:left;border-radius:10px}
.nav-sec>button:hover{color:var(--text)}
.nav-sec[data-open="true"]>button{color:var(--q700)}
html[data-theme="dark"] .nav-sec[data-open="true"]>button{color:var(--c400)}
.nav-sec-t{flex:1;min-width:0}
.nav-sec-n{font-size:.66rem;font-weight:700;letter-spacing:0;color:var(--text-3);
  background:var(--surface-2);border-radius:999px;padding:.05rem .38rem;font-variant-numeric:tabular-nums}
.nav-sec[data-open="true"] .nav-sec-n{background:var(--q50);color:var(--q600)}
html[data-theme="dark"] .nav-sec[data-open="true"] .nav-sec-n{background:var(--n700);color:var(--c300)}
.nav-sec>button svg{transition:transform .18s;flex:none;opacity:.7}
.nav-sec[data-open="false"]>button svg{transform:rotate(-90deg)}
.nav-sec[data-open="false"] .nav-body{display:none}
.nav-body{padding:0 .4rem .5rem}

/* Level 2 — group label, with a rule that ties its items together */
.nav-grp{margin-top:.35rem}
.nav-grp:first-child{margin-top:0}
.nav-grp-t{margin:0 0 .2rem;padding:.3rem .6rem .15rem;font-size:.7rem;font-weight:700;
  letter-spacing:.02em;color:var(--text-3)}
.nav-grp .nav-items{border-left:2px solid var(--border);margin-left:.68rem;padding-left:.42rem}

/* Level 3 — the links */
.nav-items{display:flex;flex-direction:column;gap:1px}
.nav-items a{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-radius:7px;
  text-decoration:none;color:var(--text-2);font-size:.855rem;line-height:1.35}
.nav-items a:hover{background:var(--surface-2);color:var(--text)}
.nav-items a.active{background:var(--brand);color:var(--brand-ink);font-weight:600}
.nav-grp .nav-items a.active{box-shadow:-0.42rem 0 0 -1px var(--brand)}

/* ── Content ────────────────────────────────────────────────────────────── */
.main h1{font-size:2.05rem;letter-spacing:-.03em;margin:0 0 .5rem;line-height:1.18}
.main h2{font-size:1.4rem;letter-spacing:-.02em;margin:2.6rem 0 .8rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--border)}
.main h3{font-size:1.09rem;margin:1.9rem 0 .55rem}
.main h4{font-size:.96rem;margin:1.4rem 0 .4rem;color:var(--text-2)}
.main p{margin:0 0 1rem;color:var(--text-2)}
.main ul,.main ol{margin:0 0 1rem;padding-left:1.35rem;color:var(--text-2)}
.main li{margin-bottom:.3rem}
.main strong{color:var(--text)}
.lede{font-size:1.09rem;color:var(--text-2);margin-bottom:1.8rem;max-width:74ch}
.page-kicker{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--q600);margin:0 0 .5rem}
html[data-theme="dark"] .page-kicker{color:var(--c400)}

.main table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.885rem;display:block;
  overflow-x:auto;white-space:nowrap}
.main table thead th{background:var(--surface-2);text-align:left;font-weight:700;font-size:.78rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--text-2);padding:.6rem .75rem;
  border-bottom:2px solid var(--border-2);position:sticky;top:0}
.main table td{padding:.55rem .75rem;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-2)}
.main table tbody tr:hover td{background:var(--bg-alt)}

.main code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);
  padding:.12em .38em;border-radius:5px;color:var(--q700);white-space:nowrap}
html[data-theme="dark"] .main code{color:var(--c300)}
.main pre{background:var(--n900);color:#e9f2fb;padding:1rem 1.1rem;border-radius:var(--r);
  overflow-x:auto;font-family:var(--mono);font-size:.83rem;line-height:1.55;margin:0 0 1.3rem}
.main pre code{background:none;padding:0;color:inherit;white-space:pre}
.main blockquote{margin:0 0 1.3rem;padding:.85rem 1.1rem;border-left:4px solid var(--q400);
  background:var(--surface-2);border-radius:0 var(--r) var(--r) 0;color:var(--text-2)}
.main blockquote p:last-child{margin-bottom:0}
.main hr{border:0;border-top:1px solid var(--border);margin:2.4rem 0}

/* ── Cards & grids ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:1rem;margin-bottom:1.8rem}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.15rem 1.25rem;box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 .4rem;font-size:1rem}
.card p{margin:0;font-size:.885rem;color:var(--text-2)}
button.card{text-align:left;width:100%;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .1s}
button.card:hover{border-color:var(--q300);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.card-more{font-size:.79rem;font-weight:600;color:var(--q600);margin-top:.7rem;display:block}
html[data-theme="dark"] .card-more{color:var(--c400)}

.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.05rem 1.15rem}
.stat .v{font-size:1.9rem;font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--q700)}
html[data-theme="dark"] .stat .v{color:var(--c400)}
.stat .k{font-size:.79rem;color:var(--text-3);margin-top:.28rem}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:700;
  letter-spacing:.035em;text-transform:uppercase;padding:.17rem .5rem;border-radius:999px;
  border:1px solid var(--border);color:var(--text-2);background:var(--surface-2);white-space:nowrap}
.badge.ok{color:var(--ok);border-color:currentColor;background:transparent}
.badge.wip{color:var(--warn);border-color:currentColor;background:transparent}
.badge.plan{color:var(--text-3);border-color:currentColor;background:transparent}
.badge.off{color:var(--danger);border-color:currentColor;background:transparent}
.badge.pro{color:var(--g700);border-color:var(--g300);background:var(--g100)}
html[data-theme="dark"] .badge.pro{color:var(--g300);background:transparent}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem;
  overflow-x:auto;padding-bottom:1px}
.tab{font:inherit;font-size:.885rem;font-weight:600;color:var(--text-3);background:transparent;
  border:0;border-bottom:2px solid transparent;padding:.6rem .85rem;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}

/* ── Data states ────────────────────────────────────────────────────────── */
.notice{display:flex;gap:.7rem;padding:.85rem 1rem;border-radius:var(--r);font-size:.885rem;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);margin-bottom:1.3rem}
.notice.warn{border-color:var(--g300);background:var(--g100);color:var(--g700)}
html[data-theme="dark"] .notice.warn{background:transparent;color:var(--g300)}
.notice.err{border-color:#fecaca;background:#fef2f2;color:var(--danger)}
html[data-theme="dark"] .notice.err{background:transparent;border-color:#7f1d1d}
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:7px;height:1rem;margin-bottom:.5rem}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* ── Mermaid & figures ──────────────────────────────────────────────────── */
.mermaid-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1rem;margin:0 0 1.4rem}
.mermaid-render{overflow-x:auto;text-align:center}
.mermaid-render svg{max-width:100%;height:auto}
.mermaid-box pre{background:var(--n950);margin:0;font-size:.78rem;text-align:left}
/* Once rendered, the source block is hidden behind the "Source" toggle. */
.mermaid-box[data-rendered="true"] .mermaid-render pre{display:none}
.mermaid-box .mermaid-code{display:none;margin:.8rem 0 0}
.mermaid-box[data-show-source="true"] .mermaid-code{display:block}
.mermaid-cap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.78rem;color:var(--text-3);margin:.6rem 0 0;padding-top:.5rem;border-top:1px solid var(--border)}
.mermaid-box[data-rendered="failed"] .mermaid-state{color:var(--warn);font-weight:600}
.mermaid-src{font:inherit;font-size:.75rem;font-weight:600;color:var(--text-3);background:transparent;
  border:1px solid var(--border);border-radius:6px;padding:.15rem .5rem;cursor:pointer}
.mermaid-src:hover{color:var(--text);border-color:var(--border-2)}
.mermaid-src[aria-expanded="true"]{background:var(--surface-2);color:var(--text)}
.svg-figure{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1rem;margin:0 0 1.4rem;overflow-x:auto;text-align:center}
.media-slot{border:2px dashed var(--border-2);border-radius:var(--r-lg);padding:2.2rem 1.2rem;
  text-align:center;color:var(--text-3);font-size:.885rem;margin-bottom:1.4rem;background:var(--bg-alt)}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.2rem}
.modal-backdrop{position:absolute;inset:0;background:rgba(7,26,46,.62);backdrop-filter:blur(3px)}
.modal-panel{position:relative;width:min(880px,100%);max-height:88dvh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.3rem 1.5rem;border-bottom:1px solid var(--border);flex:none}
.modal-head h2{margin:0;font-size:1.25rem;letter-spacing:-.02em}
.modal-kicker{margin:0 0 .25rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--q600)}
html[data-theme="dark"] .modal-kicker{color:var(--c400)}
.modal-body{padding:1.4rem 1.5rem 1.8rem;overflow-y:auto}
.modal-body h3{margin-top:1.5rem}
.modal-body h3:first-child{margin-top:0}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .main{padding:1.6rem 1.5rem 4rem}
}
@media (max-width:900px){
  #nav-toggle{display:inline-grid}
  .sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;z-index:80;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg)}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .scrim{display:block;position:fixed;inset:var(--topbar-h) 0 0;z-index:75;
    background:rgba(7,26,46,.45)}
  .user-meta{display:none}
  .search-wrap kbd{display:none}
}
@media (max-width:620px){
  body{font-size:15px}
  .main{padding:1.2rem 1rem 3.5rem}
  .main h1{font-size:1.62rem}
  .brand-txt em{display:none}
  .lang-switch{display:none}
  .modal{padding:0}
  .modal-panel{max-height:100dvh;height:100dvh;border-radius:0}
}

@media print{
  .topbar,.sidebar,.footer,.modal,.gate{display:none!important}
  .main{padding:0;max-width:none}
  body{font-size:11pt}
}