/* ===========================================================================
   CreditSense — Ops Assistant design system
   Built from the official Branding Guidelines (July 2026):
     Primary   Blue #0000FD · Black #161616 · White #ffffff · Ghost Blue #F7F7FF
     Secondary Navy #1E3D59 · Caption #48749E · Sky Blue #DEEEFE · Off-blue #E8EBEF
               Deep Orange #CD4900 · Black #000000 · Dark Grey #A3A3A3 · Grey #E5E5E5
     Type      Onest (Light 300 for display, Regular/Medium for UI) · 0% tracking,
               150% leading below 24px, 130% for 24–55px, 110% above 72px
   Light is the brand-true default; dark is a selected second mode (not a flip).
   Chart palettes below were validated with the data-viz six checks in both modes.
   =========================================================================== */

/* ---------- Onest (self-hosted; no external CDN needed) ---------- */
@font-face{font-family:Onest;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/onest-latin-300-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/onest-cyrillic-300-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/onest-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/onest-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/onest-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/onest-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/onest-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/onest-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/onest-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/onest-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------- tokens: light (brand default) ---------- */
:root{
  color-scheme:light;
  /* raw brand */
  --cs-blue:#0000FD; --cs-black:#161616; --cs-white:#ffffff; --cs-ghost:#F7F7FF;
  --cs-navy:#1E3D59; --cs-caption:#48749E; --cs-sky:#DEEEFE; --cs-offblue:#E8EBEF;
  --cs-orange:#CD4900; --cs-grey:#E5E5E5; --cs-darkgrey:#A3A3A3;

  /* planes & surfaces */
  --plane:#F7F7FF;            /* page */
  --surface:#ffffff;          /* cards, messages, tables */
  --surface-2:#FBFBFF;        /* subtle inset */
  --surface-3:#E8EBEF;        /* table head, inputs on grey */
  --wash:#DEEEFE;             /* selected / accent wash */

  /* ink */
  --ink:#161616;
  --ink-2:#3D4A5C;
  --ink-3:#48749E;            /* brand Caption colour = secondary text */
  --ink-4:#7C8CA1;            /* muted / axis */
  --on-accent:#ffffff;

  /* lines */
  --line:#E3E7EF;
  --line-2:#CDD5E2;
  --hairline:rgba(22,22,22,.08);

  /* accent */
  --accent:#0000FD;
  --accent-hover:#0000D6;
  --accent-press:#0000B4;
  --accent-soft:#EDEDFF;
  --accent-ring:rgba(0,0,253,.28);
  --focus:#0000FD;

  /* status (icon+label always, never colour alone) */
  --good:#0E7C41; --good-soft:#E6F5EC;
  --warn:#8A5A00; --warn-soft:#FFF3DC;
  --crit:#B3261E; --crit-soft:#FDECEA;
  --info-soft:#DEEEFE;

  /* chart: validated light palette (surface #ffffff) */
  --series-1:#0000FD; --series-2:#CD4900; --series-3:#009068;
  --series-4:#8658e1; --series-5:#c38400;
  --grid:#EDF0F5; --axis:#CDD5E2;
  --seq-100:#E4E4FF; --seq-300:#9C9CFF; --seq-500:#4A4AFE; --seq-700:#0000C4;

  /* shape & motion */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(22,22,22,.05);
  --sh-2:0 2px 8px rgba(30,61,89,.07), 0 1px 2px rgba(22,22,22,.04);
  --sh-3:0 12px 32px rgba(30,61,89,.14), 0 2px 6px rgba(22,22,22,.06);
  --dur:.16s; --ease:cubic-bezier(.2,.6,.3,1);

  --font:Onest,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --sidebar-w:264px; --measure:900px;
}

/* ---------- tokens: dark (selected, not a flip) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --plane:#111114;
  --surface:#1C1C21;
  --surface-2:#23232A;
  --surface-3:#2A2A33;
  --wash:#182A4A;

  --ink:#F7F7FF;
  --ink-2:#C8CEDB;
  --ink-3:#93A6C0;
  --ink-4:#7C8CA1;
  --on-accent:#ffffff;

  --line:#2E2E38;
  --line-2:#3C3C48;
  --hairline:rgba(247,247,255,.10);

  --accent:#5A79FF;           /* brand blue lifted for legibility on dark */
  --accent-hover:#7690FF;
  --accent-press:#2F55F5;
  --accent-soft:#1B2350;
  --accent-ring:rgba(90,121,255,.36);
  --focus:#7690FF;

  --good:#3FBE74; --good-soft:#13301F;
  --warn:#E0A100; --warn-soft:#33270A;
  --crit:#F0736A; --crit-soft:#3A1714;
  --info-soft:#182A4A;

  /* chart: validated dark palette (surface #1c1c21) */
  --series-1:#3a73ff; --series-2:#e05000; --series-3:#009e72;
  --series-4:#945ff9; --series-5:#c38400;
  --grid:#2A2A33; --axis:#3C3C48;
  --seq-100:#1B2350; --seq-300:#2F55F5; --seq-500:#5A79FF; --seq-700:#A9B9FF;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 8px rgba(0,0,0,.45);
  --sh-3:0 14px 36px rgba(0,0,0,.55);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);background:var(--plane);color:var(--ink);
  font-size:15px;line-height:1.5;                 /* brandbook: 150% leading under 24px */
  letter-spacing:0;                               /* brandbook: 0% tracking */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.3}
h1{font-size:30px;font-weight:300;line-height:1.2}  /* Onest Light for display */
h2{font-size:19px}
h3{font-size:15px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre,.mono,.tnum{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--wash);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- brand furniture ---------- */
/* height drives the size; never let a flex/grid parent stretch the artwork */
.logo{height:26px;width:auto;max-width:100%;flex:0 0 auto;display:block;object-fit:contain}
.logo-white{display:none}
:root[data-theme="dark"] .logo-dark{display:none}
:root[data-theme="dark"] .logo-white{display:block}
.mark{height:20px;width:auto}
.mark-white{display:none}
:root[data-theme="dark"] .mark-dark{display:none}
:root[data-theme="dark"] .mark-white{display:inline-block}
.divider-v{width:1px;height:20px;background:var(--line);flex:0 0 auto}

/* ---------- app chrome ---------- */
.appbar{
  display:flex;align-items:center;gap:14px;padding:10px 18px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.appbar .logo{height:22px}      /* the wordmark is 11.5:1 — keep it modest in a bar */
.appbar .product{font-size:13px;color:var(--ink-3);font-weight:500;white-space:nowrap}
.appbar .spacer{flex:1}
.appbar .tools{display:flex;align-items:center;gap:8px}

/* ---------- controls ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:14px;font-weight:500;line-height:1;
  padding:10px 16px;border-radius:var(--r-md);border:1px solid transparent;
  background:var(--accent);color:var(--on-accent);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:hover{background:var(--accent-hover)}
.btn:active{background:var(--accent-press);transform:translateY(.5px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--ink-4)}
.btn-quiet{background:transparent;color:var(--ink-3);border-color:transparent;padding:8px 10px}
.btn-quiet:hover{background:var(--surface-3);color:var(--ink)}
.btn-danger{background:var(--crit);color:#fff}
.btn-danger:hover{filter:brightness(1.08);background:var(--crit)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:var(--r-sm)}
.btn-icon{padding:9px;width:38px;height:38px;border-radius:var(--r-md)}

.chipbtn{
  font:inherit;font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.chipbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chipbtn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

input[type=text],input[type=email],input:not([type]),select,textarea{
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:9px 11px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
select{cursor:pointer;padding-right:28px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
label{font-size:13px;color:var(--ink-3);font-weight:500}
input[type=checkbox],input[type=radio]{width:auto;padding:0;border-radius:4px;
  accent-color:var(--accent);box-shadow:none;vertical-align:-2px;cursor:pointer}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1)}
.card-flush{padding:0;overflow:hidden}
.section-title{display:flex;align-items:center;gap:10px;margin:26px 0 10px}
.section-title h2{font-size:17px;font-weight:500}
.section-title .hint{font-size:12.5px;color:var(--ink-4)}
.meta{font-size:12.5px;color:var(--ink-4);line-height:1.45}
.empty{color:var(--ink-4);font-size:13.5px;padding:14px 0}

/* ---------- badges & pills ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.badge-accent{background:var(--accent-soft);color:var(--accent)}
.badge-good{background:var(--good-soft);color:var(--good)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-crit{background:var(--crit-soft);color:var(--crit)}
.badge-info{background:var(--info-soft);color:var(--ink-3)}
.badge-outline{background:transparent;border:1px solid var(--line-2);color:var(--ink-3)}
.cost{font-family:var(--mono);font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* ---------- code & SQL ---------- */
pre,.codeblock{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;overflow:auto;font-size:13px;line-height:1.55;margin:0}
:root[data-theme="dark"] pre,:root[data-theme="dark"] .codeblock{background:#15151A}
code{font-size:.92em}
p code,li code,.seg-text code{background:var(--surface-3);padding:1.5px 5px;border-radius:4px}
.disclosure{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);overflow:hidden;margin:12px 0}
:root[data-theme="dark"] .disclosure{background:#15151A}
.disclosure>summary{cursor:pointer;padding:9px 13px;font-size:12.5px;color:var(--ink-3);
  display:flex;align-items:center;gap:8px;user-select:none;list-style:none}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary:hover{color:var(--ink)}
.disclosure>summary .caret{transition:transform var(--dur) var(--ease);font-size:10px;color:var(--ink-4)}
.disclosure[open]>summary .caret{transform:rotate(90deg)}
.disclosure>summary .grow{flex:1}
.disclosure pre{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
/* highlight.js tokens on brand ink (no external theme needed) */
.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:var(--accent);font-weight:500}
.hljs-string,.hljs-number{color:var(--series-3)}
.hljs-comment{color:var(--ink-4);font-style:italic}
.hljs-built_in,.hljs-type,.hljs-title{color:var(--series-4)}
.hljs-operator,.hljs-punctuation{color:var(--ink-2)}
:root[data-theme="dark"] .hljs-string,:root[data-theme="dark"] .hljs-number{color:#4ec9a0}

/* ---------- data tables (Grid.js skin) ---------- */
.gridjs-wrapper{border:1px solid var(--line)!important;border-radius:var(--r-md)!important;
  box-shadow:none!important;background:var(--surface)!important}
.gridjs-table{font-size:13px!important;width:100%}
th.gridjs-th{background:var(--surface-3)!important;color:var(--ink-3)!important;
  border-color:var(--line)!important;font-weight:600!important;font-size:11.5px!important;
  text-transform:uppercase;letter-spacing:.04em;padding:9px 12px!important;position:sticky;top:0;z-index:1}
th.gridjs-th-sort:hover{background:var(--line)!important}
td.gridjs-td{background:var(--surface)!important;color:var(--ink)!important;
  border-color:var(--line)!important;padding:8px 12px!important;font-variant-numeric:tabular-nums}
.gridjs-tr:hover td.gridjs-td{background:var(--surface-2)!important}
.gridjs-footer{background:var(--surface)!important;border-color:var(--line)!important;
  box-shadow:none!important;color:var(--ink-3)!important;border-radius:0 0 var(--r-md) var(--r-md)!important}
.gridjs-pagination{color:var(--ink-3)!important;font-size:12.5px}
.gridjs-pagination .gridjs-pages button{background:var(--surface)!important;color:var(--ink-2)!important;
  border-color:var(--line-2)!important;font-size:12.5px!important}
.gridjs-pagination .gridjs-pages button.gridjs-currentPage{background:var(--accent)!important;
  color:#fff!important;border-color:var(--accent)!important;font-weight:600!important}
.gridjs-sort{filter:none}
.gridjs-td.num,.num{text-align:right}

/* plain tables (admin) */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);font-weight:600;padding:8px 10px;background:var(--surface-3);
  border-bottom:1px solid var(--line);position:sticky;top:0}
table.data td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background:var(--surface-2)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--plane);font-size:13.5px;padding:11px 18px;border-radius:var(--r-md);
  box-shadow:var(--sh-3);z-index:60;max-width:min(560px,86vw);opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- utility ---------- */
.row{display:flex;gap:10px;align-items:center}
.row-wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.grow{flex:1;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
kbd{font-size:11px;font-family:var(--mono);background:var(--surface-3);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}