/* Kaca design tokens — Perpustakaan Negara Malaysia
   Source: Claude Design project "Library Room Booking Framework".
   Token names follow design_handoff_e_dokumen/tokens/kaca.tokens.json in that project.
   Load this file once per page. Set dark mode with
   document.documentElement.setAttribute('data-theme','dark').

   The file holds three layers:
     1. Tokens      every colour, size, radius and shadow the style uses
     2. Reset       box model, links, focus ring, scrollbars, keyframes
     3. Components  the `k-` classes that module markup reuses */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */

:root{
/* Colour */
--bg:#E9EFF6; --ink:#0B1F3A; --ink-2:#33445F; --ink-3:#5E6B82; --ink-4:#6B7488;
--accent:#1D4FD7; --accent-deep:#0B3E9C; --accent-soft:rgba(29,79,215,.12); --accent-ring:rgba(29,79,215,.20);
--accent-2:#0F766E; --accent-2-deep:#0B5A54; --accent-2-soft:rgba(15,118,110,.12);
--panel:rgba(255,255,255,.95);
--glass:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.72); --glass-3:rgba(255,255,255,.75);
--solid:#FFFFFF; --field:#FFFFFF; --hairline:rgba(255,255,255,.85); --divider:rgba(11,31,58,.08);
/* The one colour that does not follow the theme. Artwork supplied as black line
   work — the Jata Negara — has to sit on white in dark mode too, or it vanishes. */
--plate:#FFFFFF;
--blur:blur(28px) saturate(160%); --blur-lg:blur(32px) saturate(170%); --blur-xl:blur(46px) saturate(190%);
--shadow:0 24px 60px -30px rgba(11,31,58,.3); --shadow-lg:0 40px 80px -36px rgba(11,31,58,.45); --shadow-sm:0 4px 14px -6px rgba(11,31,58,.3);
--ok:#15803D; --ok-ink:#14532D; --ok-soft:rgba(21,128,61,.10);
--warn:#B45309; --warn-ink:#7A4A06; --warn-soft:rgba(232,163,61,.20);
--danger:#9B1C13; --danger-ink:#9B1C13; --danger-soft:rgba(200,55,45,.12);
--btn:#0B1F3A; --btn-fg:#FFFFFF;
--blob-1:#9DBCF3; --blob-2:#C9D8F0; --blob-o1:.7; --blob-o2:.9;
--track:rgba(11,31,58,.08);

/* Text that sits on a filled accent, success or danger shape */
--on-accent:#FFFFFF; --on-ok:#FFFFFF; --on-danger:#FFFFFF;

/* Approval stage colours. e-Dokumen routes a paper through eight stages. */
--stage-tp:#1D4FD7; --stage-pengarah:#7C3AED; --stage-tkp:#B45309; --stage-kp:#15803D;

/* Module colours. The platform dashboard gives each module one colour. */
--mod-ibilik:#1D4FD7; --mod-ibilik-soft:rgba(29,79,215,.12);
--mod-repo:#7C3AED; --mod-repo-soft:rgba(124,58,237,.12);
--mod-dana:#0F766E; --mod-dana-soft:rgba(15,118,110,.12);
--mod-edok:#B45309; --mod-edok-soft:rgba(232,163,61,.20);
--mod-kata:#0369A1; --mod-kata-soft:rgba(3,105,161,.12);

/* Type */
--font:Poppins,'Segoe UI',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
--fs-mark:8px;      /* the [Logo] and [Jata] placeholder circles */
--fs-chip:10px;     /* file type chip, notification count */
--fs-code:11px;     /* role code, stage number */
--fs-micro:11.5px;  /* meta line, eyebrow, caption */
--fs-label:12px;    /* form label, small pill */
--fs-meta:12.5px;   /* table cell, reference number */
--fs-ui:13px;       /* button, list row */
--fs-body:13.5px;   /* paragraph, input value */
--fs-strong:14px;   /* nav item, row title */
--fs-card:14.5px;   /* module card title */
--fs-h4:15px;       /* panel heading */
--fs-h3:16px;
--fs-h2:18px;
--fs-doc:19px;      /* certificate title */
--fs-doc-title:20px;/* paper title on the sheet */
--fs-stat-xs:20px;  /* the number on a module card */
--fs-stat-sm:24px;  /* the number on a summary strip */
--fs-h1:26px;
--fs-section:28px;
--fs-stat:34px;
--fs-display-sm:38px;
--fs-display:40px;
--lh-prose:1.75; --lh-note:1.6; --lh-tight:1.5;
--tracking-tight:-0.03em; --tracking-display:-0.035em; --tracking-eyebrow:0.06em;

/* Radius. Three drifted values fold into the scale: 12->14, 20->18, 24->26. */
--r-sm:10px; --r-md:14px; --r-lg:16px; --r-xl:18px;
--r-2xl:22px; --r-3xl:26px; --r-4xl:28px; --r-5xl:30px; --r-pill:999px;

/* Spacing, on a 2px grid */
--sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px; --sp-6:12px;
--sp-7:14px; --sp-8:16px; --sp-9:18px; --sp-10:20px; --sp-11:22px; --sp-12:24px;

/* Control size. 44px is the smallest hit target the style allows. */
--h-tap:44px; --h-input:42px; --h-btn-sm:36px; --h-btn:44px; --h-btn-lg:48px;
--icon-stroke:1.7;

/* Layout */
--frame-w:1440px; --frame-h:900px; --side-w:240px; --gap:16px;
}

[data-theme="dark"]{
--bg:#070D18; --ink:#EAF0FA; --ink-2:#A9B6CC; --ink-3:#8593AC; --ink-4:#76839A;
--accent:#6D9BFF; --accent-deep:#BBD0FF; --accent-soft:rgba(109,155,255,.16); --accent-ring:rgba(109,155,255,.32);
--accent-2:#5EEAD4; --accent-2-deep:#A7F3E4; --accent-2-soft:rgba(94,234,212,.16);
--panel:rgba(20,28,46,.96);
--glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.085); --glass-3:rgba(255,255,255,.075);
--solid:rgba(255,255,255,.10); --field:rgba(255,255,255,.08); --hairline:rgba(255,255,255,.12); --divider:rgba(255,255,255,.10);
--plate:#FFFFFF;
--shadow:0 24px 60px -30px rgba(0,0,0,.85); --shadow-lg:0 40px 80px -36px rgba(0,0,0,.9); --shadow-sm:0 4px 14px -6px rgba(0,0,0,.6);
--ok:#5BE39A; --ok-ink:#BBF7D0; --ok-soft:rgba(91,227,154,.14);
--warn:#FBBF24; --warn-ink:#FDE68A; --warn-soft:rgba(251,191,36,.16);
--danger:#FCA5A5; --danger-ink:#FECACA; --danger-soft:rgba(252,165,165,.14);
--btn:#EAF0FA; --btn-fg:#07142E;
--blob-1:#1B3C7A; --blob-2:#10203F; --blob-o1:.55; --blob-o2:.7;
--track:rgba(255,255,255,.10);
/* The dark accent is light, so text on it turns dark. */
--on-accent:#07142E; --on-ok:#07142E; --on-danger:#07142E;
--stage-tp:#6D9BFF; --stage-pengarah:#B79BFF; --stage-tkp:#FBBF24; --stage-kp:#5BE39A;
--mod-ibilik:#6D9BFF; --mod-ibilik-soft:rgba(109,155,255,.16);
--mod-repo:#B79BFF; --mod-repo-soft:rgba(183,155,255,.16);
--mod-dana:#5EEAD4; --mod-dana-soft:rgba(94,234,212,.16);
--mod-edok:#FBBF24; --mod-edok-soft:rgba(251,191,36,.16);
--mod-kata:#7DD3FC; --mod-kata-soft:rgba(125,211,252,.16);
}

/* ── 2. Reset ────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:96px}
@media (max-width: 1120px){
[data-shell]{grid-template-columns:minmax(0,1fr) !important;gap:18px !important;padding-left:18px !important;padding-right:18px !important}
[data-sidenav]{position:static !important;max-height:none !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important;gap:6px !important}
[data-sidenav] span{flex:0 0 100% !important;padding:8px 8px 0 !important}
[data-sidenav] a{padding:8px 12px !important}
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--track);border-radius:99px}
@keyframes kacaShimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes kacaFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kacaRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes kacaDot{0%,70%,100%{opacity:.28;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){[data-dot]{animation:none !important;opacity:.5 !important}}

/* Control-flow tags. Neither may add a box of its own. */
sc-if,sc-for{display:contents}

/* The `hidden` attribute, made to actually work.
 *
 * ADR-5 puts every layout rule in an inline `style` attribute, and an inline
 * `display: flex` outranks the user agent's `[hidden]{display:none}`. So setting
 * `el.hidden = true` on a Kaca element does nothing visible: the element stays on
 * screen while `hidden` quietly removes it from the accessibility tree — the worst of
 * both, and silent. The four-step form on /dana-penulis/mohon shipped exactly that way,
 * showing all four sections under the words "Langkah 1 daripada 4".
 *
 * `!important` is the only weight a stylesheet has against an inline declaration, so
 * here it is deliberate rather than a shortcut. Keep `hidden` as the single switch:
 * scripts set the attribute, this rule makes it mean something.
 */
[hidden]{display:none !important}

/* ── 3. Components ───────────────────────────────────────────────────────── */
/* Every class below reads tokens only. Copy the markup, keep the class, and the
   component carries its own light and dark theme. Add a layout style inline. */

/* Surfaces */
.k-panel{display:flex;flex-direction:column;padding:var(--sp-9);border-radius:var(--r-4xl);
  background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--hairline);box-shadow:var(--shadow)}
.k-panel-sm{display:flex;flex-direction:column;padding:var(--sp-9);border-radius:var(--r-3xl);
  background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--hairline);box-shadow:var(--shadow)}
.k-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-9);border-radius:var(--r-2xl);
  background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--hairline);box-shadow:var(--shadow)}
.k-sheet{border-radius:var(--r-lg);background:var(--field);box-shadow:var(--shadow-sm);overflow:hidden}
.k-tile{border-radius:var(--r-lg);background:var(--solid);box-shadow:var(--shadow-sm)}
/* A panel or card that is itself a link. */
.k-card-link{color:var(--ink);text-decoration:none}
.k-card-link:hover{background:var(--glass-2);text-decoration:none}
/* A 34px rounded square that holds one icon. */
.k-icon-tile{display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:var(--r-sm);background:var(--solid)}
/* One waiting item on a queue list. */
.k-queue-row{display:flex;align-items:center;gap:var(--sp-7);flex-wrap:wrap;
  padding:var(--sp-7) var(--sp-8);border-radius:var(--r-xl);background:var(--glass-3)}
/* A horizontal bar. Set the width and the colour on the inner element. */
.k-meter{height:7px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.k-meter > div{height:100%;border-radius:var(--r-pill)}

/* The 1440x900 screen frame and its two blurred blobs */
.k-frame{width:var(--frame-w);min-height:var(--frame-h);padding:var(--gap);gap:var(--gap);
  background:var(--bg);position:relative;overflow:hidden}
.k-blob{position:absolute;border-radius:50%;pointer-events:none}
.k-blob-1{background:var(--blob-1);filter:blur(130px);opacity:var(--blob-o1);width:720px;height:720px;top:-240px}
.k-blob-2{background:var(--blob-2);filter:blur(120px);opacity:var(--blob-o2);width:760px;height:760px;right:-220px;bottom:-280px}

/* Buttons. Every variant keeps the 44px hit target unless a size class lowers it. */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);
  height:var(--h-btn);padding:0 var(--sp-8);border:none;border-radius:var(--r-pill);
  font:inherit;font-size:var(--fs-ui);font-weight:600;cursor:pointer;
  background:var(--glass-3);color:var(--ink)}
.k-btn-primary{background:var(--btn);color:var(--btn-fg)}
.k-btn-outline{background:var(--glass-3);border:1px solid var(--hairline)}
.k-btn-warn{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn-ink)}
.k-btn-block{width:100%;border-radius:var(--r-lg)}
.k-btn-sm{height:var(--h-btn-sm);padding:0 var(--sp-7);font-size:var(--fs-meta)}
.k-btn-lg{height:var(--h-btn-lg);font-size:var(--fs-strong)}
.k-btn-dashed{background:transparent;border:1.5px dashed var(--ink-3);color:var(--ink-2)}
/* A dashed danger button marks a decision PNM has not confirmed. */
.k-btn-danger-pending{background:var(--danger-soft);border:1.5px dashed var(--danger);color:var(--danger-ink)}
.k-icon-btn{display:flex;align-items:center;justify-content:center;flex:none;
  width:var(--h-btn);height:var(--h-btn);padding:0;border:1px solid var(--hairline);border-radius:50%;
  background:var(--glass-3);backdrop-filter:var(--blur);color:var(--ink);font:inherit;cursor:pointer;position:relative}

/* Pills */
.k-pill{display:inline-flex;align-items:center;width:fit-content;
  padding:var(--sp-2) var(--sp-5);border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:600;background:var(--track);color:var(--ink-2)}
.k-pill-accent{background:var(--accent-soft);color:var(--accent-deep)}
.k-pill-ok{background:var(--ok-soft);color:var(--ok-ink)}
.k-pill-warn{background:var(--warn-soft);color:var(--warn-ink)}

/* Segmented control */
.k-seg{display:flex;gap:var(--sp-1);padding:var(--sp-2);border-radius:var(--r-pill);
  background:var(--track);width:fit-content}
.k-seg-item{border:none;font:inherit;font-size:var(--fs-ui);font-weight:500;
  padding:var(--sp-5) var(--sp-8);border-radius:var(--r-pill);
  background:transparent;color:var(--ink-2);cursor:pointer}
.k-seg-item.is-active{background:var(--solid);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}

/* Side navigation. Every internal page uses this panel.

   It collapses to icons. The page script sets these custom properties on the
   root element, and the panel reads them:
     --navw          panel width, 264px open and 76px closed
     --nav-label     `none` closes every label, empty string opens them
     --nav-op        opacity, for the cross fade between the two widths
     --nav-auto      margin-left of the collapse button
     --nav-btnw      width of the account menu button
     --nav-card-bg   --nav-card-pad   --nav-gap   the account card
   Every property carries a fallback, so the panel is correct with no script. */
.k-sidenav{position:relative;flex:none;display:flex;flex-direction:column;gap:5px;
  width:var(--navw,var(--side-w));padding:var(--sp-10) var(--sp-7);
  border-radius:var(--r-4xl);background:var(--glass);backdrop-filter:var(--blur);
  border:1px solid var(--hairline);box-shadow:var(--shadow);
  opacity:var(--nav-op,1);transition:opacity .18s ease}
/* A live shell pins the panel to the viewport. A screen mockup does not. */
.k-sidenav-app{position:sticky;top:var(--gap);align-self:stretch;height:calc(100vh - 32px)}
.k-sidenav-brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-5);padding:0 var(--sp-3) var(--sp-9)}
.k-sidenav-body{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-height:0}
/* Anything that disappears when the panel collapses. */
.k-nav-label{display:var(--nav-label,inline);white-space:nowrap}
.k-nav-group{display:var(--nav-label,block);padding:0 var(--sp-7) var(--sp-3);
  font-size:var(--fs-code);font-weight:600;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--ink-3)}
.k-sidenav-toggle{display:var(--nav-toggle,flex);align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;margin-left:var(--nav-auto,auto);padding:0;
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--glass-3);color:var(--ink);cursor:pointer}

.k-nav-item{display:flex;align-items:center;gap:var(--sp-6);height:var(--h-tap);
  padding:0 var(--sp-7);border-radius:var(--r-md);
  font-size:var(--fs-strong);font-weight:500;color:var(--ink-2);text-decoration:none}
.k-nav-item:hover{background:var(--glass-3);color:var(--ink);text-decoration:none}
.k-nav-item.is-active{background:var(--solid);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.k-nav-count{display:var(--nav-label,flex);margin-left:auto;font-size:var(--fs-micro);
  font-weight:600;padding:var(--sp-1) var(--sp-4);border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent-deep)}

/* The account card at the foot of the panel, and its menu. */
.k-account{position:relative;display:flex;align-items:center;justify-content:center;
  gap:var(--nav-gap,var(--sp-5));margin-top:var(--sp-5);
  padding:var(--nav-card-pad,var(--sp-5));border-radius:var(--r-xl);
  background:var(--nav-card-bg,var(--solid))}
.k-account-name{display:var(--nav-label,flex);flex-grow:1;flex-direction:column;
  gap:1px;min-width:0;padding-top:1px}
.k-account-btn{display:var(--nav-label,flex);visibility:var(--nav-vis,visible);
  align-items:center;justify-content:center;width:var(--nav-btnw,36px);height:36px;
  flex:none;padding:0;overflow:hidden;border:none;border-radius:var(--r-sm);
  background:transparent;cursor:pointer;transition:width .3s cubic-bezier(.22,.7,.3,1)}
.k-account-btn:hover{background:var(--glass-3)}
.k-menu{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:calc(100% + var(--sp-4));
  z-index:40;display:flex;flex-direction:column;gap:var(--sp-1);min-width:190px;
  padding:var(--sp-3);border-radius:var(--r-lg);background:var(--glass-2);
  backdrop-filter:var(--blur-lg);border:1px solid var(--hairline);
  box-shadow:var(--shadow-lg);animation:kacaFade .18s ease both}
.k-menu-item{display:flex;align-items:center;gap:var(--sp-5);height:40px;
  padding:0 var(--sp-6);border-radius:var(--r-sm);font-size:var(--fs-body);
  font-weight:500;color:var(--ink);text-decoration:none}
.k-menu-item:hover{background:var(--solid);text-decoration:none}
.k-menu-item-danger{color:var(--danger-ink)}
.k-menu-item-danger:hover{background:var(--danger-soft)}

/* Table rows. The row is a link, so the hover ring belongs to CSS, not to script.
   Set the column track once on the table wrapper: style="--cols: 1fr 150px 120px". */
.k-table{--cols:minmax(0,1fr)}
.k-head{display:grid;grid-template-columns:var(--cols);gap:var(--sp-6);padding:0 var(--sp-7);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--ink-3)}
.k-row{display:grid;grid-template-columns:var(--cols);gap:var(--sp-6);align-items:center;padding:var(--sp-7);
  border-radius:var(--r-xl);background:var(--solid);box-shadow:var(--shadow-sm);
  color:var(--ink);text-decoration:none}
.k-row-quiet{background:var(--glass-3);box-shadow:none}
a.k-row:hover{box-shadow:0 0 0 2px var(--accent);text-decoration:none}

/* Form control */
.k-label{display:flex;flex-direction:column;gap:var(--sp-3);
  font-size:var(--fs-label);font-weight:600;color:var(--ink-2)}
.k-field{height:var(--h-input);padding:0 var(--sp-6);border:1px solid var(--hairline);
  border-radius:var(--r-md);background:var(--field);font:inherit;font-size:var(--fs-body);color:var(--ink)}
textarea.k-field{height:auto;padding:var(--sp-6);border-radius:var(--r-lg);resize:vertical}

/* Text roles */
.k-mono{font-family:var(--font-mono)}
.k-eyebrow{font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--accent-deep)}
.k-truncate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Round markers: avatar, stage dot, placeholder circle */
.k-avatar{display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:50%;background:var(--btn);color:var(--btn-fg);
  font-size:var(--fs-meta);font-weight:600}
.k-dot{display:flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;border-radius:50%;background:var(--track);color:var(--ink-3);
  font-size:var(--fs-code);font-weight:700}
.k-dot-lg{width:26px;height:26px;font-size:var(--fs-label)}
.k-dot-accent{background:var(--accent);color:var(--on-accent)}
.k-dot-ok{background:var(--ok);color:var(--on-ok)}
.k-mark{display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:50%;border:1px dashed var(--ink-3);
  font-size:var(--fs-mark);color:var(--ink-2)}

/* The Jata Negara, the federal coat of arms. This is the real brand mark; .k-mark above
   is the dashed placeholder it replaces, still used by the gallery pages.

   A background image rather than <img>: the shell pages are generated by
   scripts/port_kaca.py and the Laravel module bundles its assets through Vite, and a
   url() relative to this stylesheet is the one form that resolves correctly in both —
   /packages/design-kaca/jata-negara.png when the browser loads kaca.css directly, and a
   hashed build asset when Vite does. An absolute path would break one of the two, and
   GitLab Pages serves the site from a subpath where it would break both.

   The white plate is not decoration. The emblem is drawn in black outline with black
   tiger bodies, and dark mode sets --bg to #070D18, which erases most of it. The plate
   keeps it legible in both themes, which is also how it is presented on print stationery.
   It must never be recoloured, outlined or distorted: the proportions here are the
   official artwork scaled, nothing else. */
.k-jata{flex:none;width:48px;height:36px;border-radius:999px;
  background-color:var(--plate);
  background-image:url('jata-negara.png');
  background-size:40px auto;background-repeat:no-repeat;background-position:center;
  border:1px solid var(--divider)}

/* A dashed accent box marks a decision PNM has not confirmed. Design note, not UI. */
.k-note-pnm{padding:var(--sp-6);border-radius:var(--r-lg);
  border:1.5px dashed var(--accent);background:var(--accent-soft)}
.k-note-pnm > span{font-size:var(--fs-micro);font-weight:600;color:var(--accent-deep)}
.k-note-pnm > p{margin:var(--sp-2) 0 0;font-size:var(--fs-micro);
  line-height:var(--lh-tight);color:var(--ink-2)}

/* AI output carries this label until a person confirms it. */
.k-ai-note{padding:var(--sp-7) var(--sp-8);border-radius:var(--r-lg);
  background:var(--warn-soft);border:1px dashed var(--warn)}
.k-ai-note > span{font-size:var(--fs-micro);font-weight:700;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--warn-ink)}
.k-ai-note > p{margin:var(--sp-3) 0 0;font-size:var(--fs-ui);
  line-height:1.7;color:var(--ink-2)}