/* ============================================================================
   CKN design tokens — the shared vocabulary.

   SHARED FILE — kept byte-identical in ckn.solutions.integration,
   ckn.solutions.innobiz and ckn.solutions.identity. Edit it in one repo and copy
   it to the other two; never fork the values.

   This is deliberately SMALLER than the shell. A console loads tokens + shell;
   a page with no shell — identity's sign-in, consent and MFA screens, which are
   centred cards and must stay that way — loads only this. That is what makes the
   three products share a typeface, a scale and a palette without forcing an app
   menu onto a login box.

   Renaming any custom property breaks the other two consoles, so treat the names
   as the contract and change only values.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#fafafa;--s1:#ffffff;--s2:#f7f7f8;--s3:#f0f0f1;
  --border:#e5e7eb;--border-hi:#d9dbe0;
  --t1:#171717;--t2:#555b63;--t3:#9aa0a6;
  --accent:#991b1b;--adim:#fef2f2;
  --ac:#991b1b;--ac-dark:#7f1d1d;--ac-soft:#fef2f2;
  --sidebar:#f7f7f8;--rail:#eef0f2;
  --sb-ink:#171717;--sb-muted:#6b7280;--sb-border:#e5e7eb;
  --hh:52px;                                        /* topbar height */
  --sw-default:232px;                               /* sidebar width, factory setting */
  --sw-min:180px;--sw-max:420px;                    /* drag-resize clamp (mirrored in ckn-shell.js) */
  --sw-rail:64px;                                   /* icon-rail width (tablet) */
  --ok:#2e7d32;--run:#b26a00;--fail:#c62828;--pend:#9aa0a6;--dl:#6a1b9a;--info:#3949ab;
  --ctl-h:34px;--ctl-h-sm:28px;--row-py:11px;--fs:12.5px;--fs-sm:11.5px;--radius:7px;
}
html,body{height:100%}
body{font-family:'Prompt','IBM Plex Sans Thai','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
     background:var(--bg);color:var(--t1);height:100vh;overflow:hidden;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}

/* Density — auto on handheld, forced anywhere via [data-density="touch"|"compact"]. */
@media(max-width:767px){:root{--ctl-h:44px;--ctl-h-sm:36px;--row-py:14px;--fs:13.5px;--fs-sm:12.5px}}
[data-density="touch"]{--ctl-h:44px;--ctl-h-sm:36px;--row-py:14px;--fs:13.5px;--fs-sm:12.5px}
[data-density="compact"]{--ctl-h:34px;--ctl-h-sm:28px;--row-py:11px;--fs:12.5px;--fs-sm:11.5px}