/* =====================================================================
   kaizen-style v2 — Kaizen Logic house style, served at style.kaizenlogic.com
   Source of truth for ALL Kaizen hosted apps. Tokens + themes extracted
   from SIMPL Bench. Edit HERE; every app that links this file updates.
   Adoption (2 tags):
     <link rel="stylesheet" href="https://style.kaizenlogic.com/kaizen.css">
     <script src="https://style.kaizenlogic.com/kaizen.js" defer></script>
   ===================================================================== */

/* ---------- tokens: Nightman (default, dark) ---------- */
:root{
  --bg:#0a0a0b; --panel:#101012; --panel2:#161618; --line:#26262a;
  --ink:#f4f4f5; --mut:#8a8a92; --dim:#5a5a62;
  --stripe:#ffffff; --ok:#3ad29f; --bad:#ff5a5f; --warn:#f5b14c; --trace:#9aa0ff;
  /* text/ink placed ON an accent fill (buttons, status chips). Dark reads AA
     on every theme's accents; overridable per-theme if an accent ever darkens. */
  --on-accent:#000000;
}
/* ---------- themes (ids stable — they live in users' localStorage) ---------- */
[data-theme="daylight"]{--bg:#f5f7fa;--panel:#ffffff;--panel2:#eef2f7;--line:#d9e0e8;--ink:#1b2733;--mut:#586675;--dim:#93a1b0;--stripe:#2f6df6;--trace:#2f6df6;--ok:#0f9d68;--warn:#b8690a;--bad:#d8384f;}
[data-theme="synthwave"]{--bg:#190b2e;--panel:#241141;--panel2:#2d1850;--line:#3d2470;--ink:#f4e9ff;--mut:#a98fd0;--dim:#6b549a;--stripe:#ff5dcd;--trace:#36e0ff;--ok:#36e0ff;--warn:#ffd24a;--bad:#ff5d8f;}
[data-theme="matrix"]{--bg:#020a04;--panel:#06180c;--panel2:#0a2613;--line:#11401d;--ink:#b6ffb6;--mut:#4f9f5f;--dim:#2f7040;--stripe:#39ff14;--trace:#39ff14;--ok:#39ff14;--warn:#c8ff4a;--bad:#ff6a6f;}
[data-theme="plumber"]{--bg:#5c94fc;--panel:#ffffff;--panel2:#eaf1ff;--line:#b3c9ee;--ink:#15233f;--mut:#33507e;--dim:#294573;--stripe:#e52521;--trace:#1f9e3a;--ok:#1f9e3a;--warn:#e09100;--bad:#e52521;}
[data-theme="dk"]{--bg:#3a9a5c;--panel:#ffffff;--panel2:#e7f2e7;--line:#bcd9bc;--ink:#16280f;--mut:#3c5a30;--dim:#2e4824;--stripe:#d8541f;--trace:#7a4a1f;--ok:#2f9e3a;--warn:#c07a00;--bad:#d8541f;}
[data-theme="brawler"]{--bg:#2b2f3a;--panel:#363b48;--panel2:#424857;--line:#525a6b;--ink:#eef1f6;--mut:#aab2c2;--dim:#7b8496;--stripe:#e8403a;--trace:#ffb02e;--ok:#43c07a;--warn:#ffb02e;--bad:#e8403a;}
html[data-theme="plumber"]{background:#3cb043}
html[data-theme="dk"]{background:#5a3a1a}

/* ---------- base ---------- */
.kz-body, body.kz{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;}
.kz code,.kz .mono,.kz pre{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
.kz ::selection{background:var(--ink);color:var(--bg)}
.kz a{color:var(--ink)}

/* ---------- header chrome (brand lockup is theme-INDEPENDENT / locked) ---------- */
.kz-header{border-bottom:1px solid var(--line);padding:22px 28px 0;position:relative;background:var(--bg)}
.kz-brand{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.kz-lockup{line-height:.9;text-decoration:none;display:block;text-align:center}
.kz-lockup .logo{display:block;font-weight:800;letter-spacing:-.03em;font-size:24px;line-height:.94;color:#e9e9ee}
.kz-lockup .logo.light{font-weight:300;color:#8a8a93}
[data-theme="daylight"] .kz-lockup .logo{color:#1b2733}
[data-theme="daylight"] .kz-lockup .logo.light{color:#586675}
[data-theme="plumber"] .kz-lockup .logo{color:#15233f}
[data-theme="plumber"] .kz-lockup .logo.light{color:#33507e}
[data-theme="dk"] .kz-lockup .logo{color:#16280f}
[data-theme="dk"] .kz-lockup .logo.light{color:#3c5a30}
.kz-vdiv{width:1px;height:30px;background:var(--line)}
.kz-tagline{color:var(--mut);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.kz-beta{color:var(--stripe);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--stripe);border-radius:4px;padding:1px 5px;margin-left:7px;vertical-align:middle}
.kz-stripe{height:3px;background:var(--stripe);width:46px;margin:14px 0 0;position:relative;overflow:hidden}
.kz-stripe::after{content:"";position:absolute;inset:0;left:-46px;width:46px;background:var(--bg);
  animation:kz-sweep 3.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes kz-sweep{0%{left:-46px}55%,100%{left:46px}}

/* ---------- theme picker ---------- */
.kz-themewrap{position:relative;margin-left:auto}
.kz-themebtn{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);color:var(--mut);border:1px solid var(--line);border-radius:8px;font:inherit;font-size:12px;padding:6px 10px;cursor:pointer;transition:color .13s ease,border-color .13s ease}
.kz-themebtn:hover{color:var(--ink);border-color:var(--dim)}
.kz-themebtn .tlbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-right:2px}
.kz-themebtn .tcar{font-size:9px;opacity:.7;margin-left:1px}
.kz-thememenu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px;min-width:186px;box-shadow:0 12px 34px rgba(0,0,0,.45);max-height:min(70vh,440px);overflow:auto}
.kz-thememenu[hidden]{display:none}
.kz-thememenu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--mut);font:inherit;font-size:13px;text-align:left;padding:7px 9px;border-radius:7px;cursor:pointer}
.kz-thememenu button:hover{background:var(--panel2);color:var(--ink)}
.kz-thememenu button[aria-checked="true"]{color:var(--ink)}
.kz-thememenu button[aria-checked="true"]::after{content:"\2713";margin-left:auto;color:var(--stripe);font-size:12px}

/* ---------- footer ---------- */
.kz-footer{position:relative;border-top:1px solid var(--line);color:var(--mut);font-size:11px;padding:18px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg)}
.kz-footer .cta{color:var(--mut)}
.kz-footer .cta a{color:var(--ink);text-decoration:none;border-bottom:1px solid #4f8ef7}
.kz-sigdots{display:inline-flex;gap:4px;margin-right:9px;vertical-align:middle}
.kz-sigdots i{width:6px;height:6px;border-radius:2px;display:inline-block}
.kz-sigdots i:nth-child(1){background:#4f8ef7}.kz-sigdots i:nth-child(2){background:#ef4444}.kz-sigdots i:nth-child(3){background:#cfcfd4}
[data-theme="plumber"] .kz-footer{background:#3cb043;border-top:4px solid #2a7d2f;color:#0c2a08}
[data-theme="plumber"] .kz-footer .cta,[data-theme="plumber"] .kz-footer .cta a{color:#0c2a08;border-bottom-color:#0c2a08}
[data-theme="dk"] .kz-footer{background:#5a3a1a;border-top:4px solid #3a2410;color:#f3e9d8}
[data-theme="dk"] .kz-footer .cta,[data-theme="dk"] .kz-footer .cta a{color:#f3e9d8;border-bottom-color:#f3e9d8}

/* on-colored-bg taglines: plumber/dk backgrounds need darker text than --mut (WCAG AA) */
[data-theme="plumber"] .kz-tagline{color:#15233f}
[data-theme="dk"] .kz-tagline{color:#0d2012}
[data-theme="brawler"] .kz-themebtn{color:#b8c0cf}

/* =====================================================================
   kaizen-style v2 — kz- component kit (2026-07-03)
   Additive: every rule above still applies. New kz- components are the
   forward standard; new properties assemble ENTIRELY from these parts.
   Tokens below are the single source for type + spacing across the suite.
   ===================================================================== */

/* ---------- type scale (tuned for arm's-length tablet reading) ---------- */
:root{
  /* font sizes — body is 16px minimum where a non-technical user reads */
  --kz-fs-display:clamp(28px,5vw,42px);  /* hero */
  --kz-fs-h2:22px;                        /* view / panel heading */
  --kz-fs-h3:17px;                        /* card title / subhead */
  --kz-fs-lg:16px;                        /* emphasised body */
  --kz-fs-body:16px;                      /* default body (was 14px per-app) */
  --kz-fs-sm:14px;                        /* dense body / table */
  --kz-fs-hint:13px;                      /* helper / meta text */
  --kz-fs-label:12px;                     /* uppercase kicker / section label */
  /* weights */
  --kz-fw-normal:400;
  --kz-fw-medium:500;
  --kz-fw-semibold:600;
  --kz-fw-bold:700;
  --kz-fw-black:800;
  /* line heights */
  --kz-lh-tight:1.15;
  --kz-lh-snug:1.35;
  --kz-lh-body:1.55;
  /* tracking */
  --kz-tr-tight:-.02em;
  --kz-tr-label:.14em;
}

/* ---------- spacing scale (one rhythm everywhere) ---------- */
:root{
  --kz-space-1:4px;
  --kz-space-2:8px;
  --kz-space-3:12px;
  --kz-space-4:16px;
  --kz-space-5:22px;
  --kz-space-6:32px;
  --kz-space-7:44px;
  --kz-gap:14px;        /* default grid/flex gap */
  --kz-pad:18px;        /* default card/panel padding */
  --kz-radius:10px;     /* default corner */
  --kz-radius-sm:8px;
  --kz-col:880px;       /* standard content column */
  --kz-tap:44px;        /* minimum tap target (Fisher-Price) */
}

/* ---------- kz-appbar: the shared cross-nav bar (injected by kaizen.js) ---------- */
.kz-appbar{display:flex;align-items:center;gap:var(--kz-space-4);flex-wrap:wrap;
  padding:10px 28px;border-bottom:1px solid var(--line);background:var(--bg);position:relative}
.kz-appbar .kz-appbrand{display:flex;align-items:center;gap:8px;text-decoration:none;line-height:.9;white-space:nowrap}
.kz-appbar .kz-appbrand .logo{font-weight:var(--kz-fw-black);letter-spacing:var(--kz-tr-tight);font-size:18px;color:#e9e9ee}
.kz-appbar .kz-appbrand .logo.light{font-weight:300;color:#8a8a93}
[data-theme="daylight"] .kz-appbar .kz-appbrand .logo{color:#1b2733}
[data-theme="daylight"] .kz-appbar .kz-appbrand .logo.light{color:#586675}
[data-theme="plumber"] .kz-appbar .kz-appbrand .logo{color:#15233f}
[data-theme="plumber"] .kz-appbar .kz-appbrand .logo.light{color:#33507e}
[data-theme="dk"] .kz-appbar .kz-appbrand .logo{color:#16280f}
[data-theme="dk"] .kz-appbar .kz-appbrand .logo.light{color:#3c5a30}
/* app switcher: dead-simple horizontal-scroll link row, touchpanel-grade */
.kz-appswitch{display:flex;align-items:center;gap:var(--kz-space-1);overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;flex:1 1 auto;min-width:0}
.kz-appswitch::-webkit-scrollbar{display:none}
.kz-appswitch a{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:var(--kz-radius-sm);
  color:var(--mut);text-decoration:none;font-size:var(--kz-fs-sm);font-weight:var(--kz-fw-medium);white-space:nowrap;
  transition:color .13s ease,background .13s ease}
.kz-appswitch a:hover{color:var(--ink);background:var(--panel2)}
.kz-appswitch a[aria-current="page"]{color:var(--ink);background:var(--panel2);font-weight:var(--kz-fw-semibold)}
.kz-appswitch a[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--stripe);margin-right:7px}
/* hamburger toggle — only shown on narrow viewports */
.kz-appmenu-btn{display:none;align-items:center;justify-content:center;width:var(--kz-tap);height:var(--kz-tap);
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--kz-radius-sm);color:var(--ink);
  font-size:18px;cursor:pointer;flex:0 0 auto}
/* beta pill folded into the single bar (right side, before the theme toggle) */
.kz-appbar .kz-beta{flex:0 0 auto;margin-left:0;align-self:center;line-height:1}
.kz-appbar .kz-themewrap{margin-left:auto}
@media(max-width:640px){
  .kz-appmenu-btn{display:inline-flex}
  .kz-appswitch{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;overflow:visible;gap:2px;
    max-height:0;overflow:hidden;transition:max-height .2s ease}
  .kz-appbar[data-open="1"] .kz-appswitch{max-height:400px;margin-top:6px}
  .kz-appswitch a{min-height:var(--kz-tap)}
}
[data-theme="plumber"] .kz-appbar,[data-theme="dk"] .kz-appbar{border-bottom-width:2px}

/* ---------- kz-card ---------- */
.kz-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--kz-radius);
  padding:var(--kz-pad);color:var(--ink);font-size:var(--kz-fs-body);line-height:var(--kz-lh-body)}
.kz-card > h3,.kz-card-title{margin:0 0 var(--kz-space-2);font-size:var(--kz-fs-h3);font-weight:var(--kz-fw-bold);
  line-height:var(--kz-lh-snug);color:var(--ink)}
.kz-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--kz-gap)}

/* ---------- kz-btn (primary / secondary / ghost) ---------- */
.kz-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--kz-space-2);
  min-height:var(--kz-tap);padding:10px 18px;border-radius:var(--kz-radius-sm);border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:inherit;font-size:var(--kz-fs-body);font-weight:var(--kz-fw-semibold);
  line-height:1;cursor:pointer;text-decoration:none;transition:transform .1s ease,background .13s ease,border-color .13s ease,box-shadow .13s ease}
.kz-btn:hover{transform:translateY(-1px)}
.kz-btn:focus-visible{outline:2px solid var(--stripe);outline-offset:2px}
.kz-btn:disabled,.kz-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
/* primary — one per view; the accented action */
.kz-btn-primary{background:var(--stripe);border-color:var(--stripe);color:var(--on-accent)}
.kz-btn-primary:hover{box-shadow:0 4px 14px rgba(0,0,0,.28)}
/* secondary — outlined, neutral */
.kz-btn-secondary{background:var(--panel2);border-color:var(--dim);color:var(--ink)}
.kz-btn-secondary:hover{border-color:var(--ink)}
/* ghost — minimal, for dense toolbars */
.kz-btn-ghost{background:transparent;border-color:transparent;color:var(--mut)}
.kz-btn-ghost:hover{background:var(--panel2);color:var(--ink)}

/* ---------- kz-toolbar (groups action buttons; one primary highlighted) ---------- */
.kz-toolbar{display:flex;align-items:center;gap:var(--kz-space-2);flex-wrap:wrap;
  padding:var(--kz-space-3) 0;border-bottom:1px solid var(--line)}
.kz-toolbar .kz-toolbar-spacer{flex:1 1 auto}
.kz-toolbar .kz-toolbar-group{display:flex;align-items:center;gap:var(--kz-space-2);flex-wrap:wrap}

/* ---------- kz-tabs ---------- */
.kz-tabs{display:flex;align-items:stretch;gap:var(--kz-space-1);overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line)}
.kz-tabs::-webkit-scrollbar{display:none}
.kz-tab{display:inline-flex;align-items:center;min-height:var(--kz-tap);padding:8px 16px;border:0;
  background:transparent;color:var(--mut);font:inherit;font-size:var(--kz-fs-body);font-weight:var(--kz-fw-medium);
  cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .13s ease}
.kz-tab:hover{color:var(--ink)}
.kz-tab[aria-selected="true"],.kz-tab.is-active{color:var(--ink);font-weight:var(--kz-fw-semibold);border-bottom-color:var(--stripe)}
.kz-tab:focus-visible{outline:2px solid var(--stripe);outline-offset:-2px}

/* ---------- kz-details (styled disclosure) ---------- */
.kz-details{border:1px solid var(--line);border-radius:var(--kz-radius);background:var(--panel);overflow:hidden}
.kz-details > summary{list-style:none;cursor:pointer;padding:var(--kz-space-3) var(--kz-pad);
  font-size:var(--kz-fs-body);font-weight:var(--kz-fw-semibold);color:var(--ink);
  display:flex;align-items:center;gap:var(--kz-space-2);min-height:var(--kz-tap)}
.kz-details > summary::-webkit-details-marker{display:none}
.kz-details > summary::after{content:"▾";margin-left:auto;color:var(--mut);font-size:12px;transition:transform .15s ease}
.kz-details[open] > summary::after{transform:rotate(180deg)}
.kz-details > summary:focus-visible{outline:2px solid var(--stripe);outline-offset:-2px}
.kz-details .kz-details-body{padding:0 var(--kz-pad) var(--kz-space-3);color:var(--ink);
  font-size:var(--kz-fs-body);line-height:var(--kz-lh-body)}

/* ---------- kz-hint (small helper text) ---------- */
.kz-hint{color:var(--mut);font-size:var(--kz-fs-hint);line-height:var(--kz-lh-snug)}
[data-theme="plumber"] .kz-hint{color:#15233f}
[data-theme="dk"] .kz-hint{color:#0d2012}

/* ---------- AA on colored backgrounds: plumber/dk have colored --bg, so appbar/tabs
     text-on-bg needs darker ink than --mut/--ink (same rule as .kz-tagline above) ---------- */
[data-theme="plumber"] .kz-appbrand .logo{color:#15233f}
[data-theme="plumber"] .kz-appswitch a{color:#15233f}
[data-theme="plumber"] .kz-tab{color:#15233f}
[data-theme="dk"] .kz-appswitch a{color:#0d2012}
[data-theme="dk"] .kz-tab{color:#0d2012}
/* active/current states sit on --panel2 (light inset) — --ink reads AA there in both themes */
[data-theme="plumber"] .kz-appswitch a[aria-current="page"],[data-theme="plumber"] .kz-tab[aria-selected="true"],[data-theme="plumber"] .kz-tab.is-active{color:var(--ink)}
[data-theme="dk"] .kz-appswitch a[aria-current="page"]{color:var(--ink)}
[data-theme="dk"] .kz-tab[aria-selected="true"],[data-theme="dk"] .kz-tab.is-active{color:#0d2012}