/* ============================================================
   ERP DESIGN SYSTEM — v1
   One file. Every component in the product is built from these
   classes. The coder never writes a new component; if something
   is missing, it gets added HERE first.
   ============================================================ */

/* ---- 1. TOKENS ------------------------------------------- */
:root{
  /* type */
  --font:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px;
  --t-16:16px; --t-20:20px; --t-26:26px;

  /* ink ladder — 4 steps, never more */
  --ink:#12161f;      /* headings, values, active text        */
  --ink-2:#4a5261;    /* body, labels                          */
  --ink-3:#818a99;    /* secondary, units, meta                */
  --ink-4:#aab1bd;    /* placeholder, disabled, decorative     */

  /* surfaces */
  --canvas:#f5f6f8;   /* page                                  */
  --white:#fff;       /* card                                  */
  --fill:#f4f5f7;     /* inert control fill, tag fill          */
  --fill-2:#eceef2;   /* hover on inert fill                   */
  --line:#e7e9ee;     /* hairline — the ONLY border colour     */
  --line-2:#f0f1f4;   /* inner divider, lighter                */

  /* brand */
  --brand:#4f46e5;
  --brand-hover:#443bd4;
  --brand-fill:#eef0fe;
  --brand-line:#d9d9fa;

  /* semantic — one fill + one ink each */
  --ok:#15803d;    --ok-fill:#e9f7ee;
  --warn:#b45309;  --warn-fill:#fdf3e4;
  --bad:#b91c1c;   --bad-fill:#fdecec;
  --info:#0369a1;  --info-fill:#e8f4fb;

  /* space — 4pt scale, use only these */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;

  /* radius — see the doctrine, section 2 */
  --r-xs:6px;    /* menu item, kbd, inner box inside a control */
  --r-ctl:8px;   /* ANYTHING THE CURSOR ENTERS                 */
  --r-card:10px; /* card, panel, table shell                   */
  --r-over:14px; /* modal, drawer, popover, toast              */
  --r-pill:999px;/* DATA LABELS ONLY — never a control shell   */

  /* elevation — 3 levels, that is all */
  --e0:none;                                              /* flat, on canvas: use --line */
  --e1:0 1px 2px rgba(18,22,31,.05), 0 4px 10px -6px rgba(18,22,31,.14);   /* raised card, sticky rail */
  --e2:0 6px 14px -6px rgba(18,22,31,.10), 0 24px 48px -20px rgba(18,22,31,.26); /* modal, popover, toast */
  --ring:0 0 0 3px rgba(79,70,229,.14);
  --ring-bad:0 0 0 3px rgba(185,28,28,.13);

  /* size — one control height, one dense height */
  --h:36px;   /* default control                              */
  --h-sm:28px;/* dense control: table toolbars, inline        */
  --h-lg:44px;/* only for a page's single primary CTA         */

  /* motion */
  --t:.16s cubic-bezier(.4,0,.2,1);
  --t-slow:.24s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);
  font-size:var(--t-14);line-height:1.45;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums lining-nums}

/* ---- 3. BUTTON -------------------------------------------
   ONE element. Variant sets colour, size sets height.
   .btn + .primary|.secondary|.ghost|.danger  +  .sm|.lg  +  .icon
   ----------------------------------------------------------- */
.btn{height:var(--h);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:0 14px;border:1px solid transparent;border-radius:var(--r-ctl);
  font:inherit;font-size:var(--t-13);font-weight:560;letter-spacing:-.002em;
  cursor:pointer;white-space:nowrap;position:relative;
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t)}
.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn:active{transform:translateY(.5px)}
.btn.sm{height:var(--h-sm);padding:0 10px;font-size:var(--t-12);gap:6px}
.btn.lg{height:var(--h-lg);padding:0 20px;font-size:var(--t-14)}
.btn.icon{width:var(--h);padding:0}
.btn.icon.sm{width:var(--h-sm)}
.btn.block{width:100%}

.btn.primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(79,70,229,.24)}
.btn.primary:hover{background:var(--brand-hover)}
.btn.secondary{background:var(--white);border-color:var(--line);color:var(--ink-2)}
.btn.secondary:hover{background:var(--fill);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink-3)}
.btn.ghost:hover{background:var(--fill);color:var(--ink)}
.btn.danger{background:var(--bad);color:#fff}
.btn.danger:hover{background:#a01818}
.btn.danger.secondary{background:var(--white);border-color:var(--line);color:var(--bad)}
.btn.danger.secondary:hover{background:var(--bad-fill)}
.btn[disabled],.btn.is-disabled{pointer-events:none;opacity:.45}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading .spin{position:absolute;inset:0;margin:auto;color:#fff}
.btn.secondary.is-loading .spin,.btn.ghost.is-loading .spin{color:var(--ink-3)}

/* ---- 4. FIELD + CONTROLS ---------------------------------
   .field  >  label.lbl  +  control  +  .hint | .err
   Every text-entry control is .ctl. No exceptions.
   ----------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;align-items:stretch}
/* only .ctl fills its column. Every other control is its own width and
   must not be stretched by the field, the row, or the grid. */
.field > .seg,.field > .step,.field > .btn,.field > .sw,.field > .chk,.field > .rad,
.field > .rowf,.field > .stack{align-self:flex-start}
.lbl{font-size:var(--t-12);font-weight:500;color:var(--ink-2)}
.lbl .opt{color:var(--ink-4);font-weight:400;margin-left:4px}
.hint{font-size:var(--t-12);color:var(--ink-3)}
.err{font-size:var(--t-12);color:var(--bad);display:flex;align-items:center;gap:5px}

.ctl{height:var(--h);width:100%;background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-ctl);padding:0 10px;
  font:inherit;font-size:var(--t-13);outline:0;
  transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.ctl::placeholder{color:var(--ink-4)}
.ctl:hover:not(:focus){border-color:#dadde3}
.ctl:focus{border-color:var(--brand);box-shadow:var(--ring)}
.ctl.sm{height:var(--h-sm);font-size:var(--t-12);padding:0 8px}
.ctl.mono{font-family:var(--mono);letter-spacing:.01em}
.ctl[readonly]{background:var(--fill);color:var(--ink-2);border-color:transparent}
.ctl[disabled]{background:var(--fill);color:var(--ink-4);border-color:transparent;cursor:not-allowed}
.is-error > .ctl,.ctl.is-error{border-color:var(--bad)}
.is-error > .ctl:focus,.ctl.is-error:focus{box-shadow:var(--ring-bad)}
textarea.ctl{height:auto;min-height:76px;padding:8px 10px;line-height:1.5;resize:vertical}

/* affix — units and currency live INSIDE the control, never as a second box */
.afx{position:relative;display:block}
.afx > .pre,.afx > .suf{position:absolute;top:0;height:100%;display:flex;align-items:center;
  color:var(--ink-3);font-size:var(--t-13);pointer-events:none}
.afx > .pre{left:10px}
.afx > .suf{right:10px;color:var(--ink-4);font-size:var(--t-12)}
.afx > .pre ~ .ctl{padding-left:24px}
.afx > .suf ~ .ctl{padding-right:32px}

/* select — a .ctl with a drawn chevron. Never a native arrow. */
.sel{position:relative;display:block}
.sel > select.ctl{appearance:none;padding-right:30px;cursor:pointer}
.sel > .chev{position:absolute;right:9px;top:50%;margin-top:-8px;color:var(--ink-3);pointer-events:none}

/* number stepper */
.step{display:flex;align-items:center;height:var(--h);border:1px solid var(--line);
  border-radius:var(--r-ctl);background:var(--white);overflow:hidden;width:fit-content}
.step button{width:32px;height:100%;border:0;background:transparent;color:var(--ink-3);
  cursor:pointer;display:grid;place-items:center;transition:background var(--t),color var(--t)}
.step button:hover{background:var(--fill);color:var(--ink)}
.step input{width:52px;height:100%;border:0;outline:0;text-align:center;font:inherit;
  font-size:var(--t-13);background:transparent;color:var(--ink)}

/* checkbox + radio — square box, round dot, both 16px */
.chk,.rad{display:inline-flex;align-items:flex-start;gap:var(--s2);cursor:pointer;user-select:none}
.chk input,.rad input{position:absolute;opacity:0;pointer-events:none}
.chk .box,.rad .box{flex:none;width:16px;height:16px;margin-top:1px;background:var(--white);
  border:1px solid #ccd1da;display:grid;place-items:center;color:#fff;
  transition:background var(--t),border-color var(--t)}
.chk .box{border-radius:5px}
.rad .box{border-radius:50%}
.chk .box svg,.rad .box i{opacity:0;transition:opacity var(--t)}
.rad .box i{width:6px;height:6px;border-radius:50%;background:#fff}
.chk input:checked + .box,.rad input:checked + .box{background:var(--brand);border-color:var(--brand)}
.chk input:checked + .box svg,.rad input:checked + .box i{opacity:1}
.chk input:focus-visible + .box,.rad input:focus-visible + .box{box-shadow:var(--ring)}
.chk input[disabled] + .box,.rad input[disabled] + .box{background:var(--fill);border-color:var(--line)}
.chk > span,.rad > span{font-size:var(--t-13);color:var(--ink-2);line-height:1.35}

/* switch — the ONLY pill-shaped control, because it IS a state, not a container */
.sw{display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;user-select:none}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw .tr{flex:none;width:32px;height:18px;border-radius:var(--r-pill);background:#ccd1da;padding:2px;
  transition:background var(--t)}
.sw .tr i{display:block;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(18,22,31,.28);transition:transform var(--t)}
.sw input:checked + .tr{background:var(--brand)}
.sw input:checked + .tr i{transform:translateX(14px)}
.sw input:focus-visible + .tr{box-shadow:var(--ring)}
.sw > span{font-size:var(--t-13);font-weight:500;color:var(--ink)}

/* segmented — a control, so it is SQUARE family (r-ctl), inner r-xs.
   NEVER stretches: it is as wide as its options. align-self stops a flex
   or grid parent from pulling it across the row. Use .fill only when you
   deliberately want it to span (a full-width view switcher). */
.seg{display:inline-flex;width:fit-content;align-self:flex-start;justify-self:start;
  height:var(--h);padding:3px;gap:2px;background:var(--fill);border-radius:var(--r-ctl)}
.seg.fill{width:100%}
.seg.fill button{flex:1}
.seg button{border:0;background:transparent;font:inherit;font-size:var(--t-13);font-weight:500;
  color:var(--ink-3);padding:0 12px;border-radius:var(--r-xs);cursor:pointer;
  transition:background var(--t),color var(--t),box-shadow var(--t)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--ink);
  box-shadow:0 1px 2px rgba(18,22,31,.10)}
.seg.sm{height:var(--h-sm);padding:2px}
.seg.sm button{padding:0 9px;font-size:var(--t-12)}

/* ---- 5. DATA LABELS — the pill family --------------------- */
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;
  border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);
  font-size:var(--t-12);white-space:nowrap;border:0}
.tag.removable{padding-right:4px}
.tag > button{border:0;background:transparent;padding:0;width:16px;height:16px;flex:none;
  display:grid;place-items:center;border-radius:50%;color:var(--ink-4);cursor:pointer;
  transition:background var(--t),color var(--t)}
.tag > button:hover{background:rgba(18,22,31,.08);color:var(--ink-2)}
.tag.brand{background:var(--brand-fill);color:var(--brand)}
.tag.mono{font-family:var(--mono);font-size:var(--t-12);font-weight:500}

.status{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;
  border-radius:var(--r-pill);font-size:var(--t-12);font-weight:500;white-space:nowrap}
.status i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.status.ok{background:var(--ok-fill);color:var(--ok)}
.status.warn{background:var(--warn-fill);color:var(--warn)}
.status.bad{background:var(--bad-fill);color:var(--bad)}
.status.info{background:var(--info-fill);color:var(--info)}
.status.idle{background:var(--fill);color:var(--ink-3)}

.count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--fill-2);color:var(--ink-2);
  font-size:var(--t-11);font-weight:600}
.count.brand{background:var(--brand);color:#fff}

.avatar{width:28px;height:28px;border-radius:50%;background:var(--brand-fill);color:var(--brand);
  display:grid;place-items:center;font-size:var(--t-12);font-weight:600;flex:none}

.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:var(--r-xs);background:var(--white);border:1px solid var(--line);
  box-shadow:0 1px 0 var(--line);font-family:var(--mono);font-size:var(--t-11);color:var(--ink-3)}

.mlabel{font-size:var(--t-11);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)}

/* ---- 6. SURFACES ------------------------------------------ */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card)}
.card.raised{border-color:transparent;box-shadow:var(--e1)}
.card > .head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--line-2)}
.card > .head h3{margin:0;font-size:var(--t-14);font-weight:600}
.card > .head .sp{flex:1}
.card > .pad{padding:var(--s5)}
.divider{height:1px;background:var(--line-2);border:0;margin:0}

.alert{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-ctl);
  font-size:var(--t-13);line-height:1.5}
.alert svg{flex:none;margin-top:1px}
.alert strong{font-weight:600}
.alert .sp{flex:1}
.alert.info{background:var(--info-fill);color:#0b4c73}
.alert.ok{background:var(--ok-fill);color:#145c31}
.alert.warn{background:var(--warn-fill);color:#7c3d09}
.alert.bad{background:var(--bad-fill);color:#8f1717}

/* ---- 7. TABLE --------------------------------------------- */
.table-shell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--t-13)}
.tbl th{text-align:left;font-size:var(--t-11);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding:9px 16px;background:var(--fill);
  border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 16px;border-bottom:1px solid var(--line-2);color:var(--ink-2);
  vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--t)}
.tbl tbody tr:hover{background:#fafbfc}
.tbl tbody tr[aria-selected="true"]{background:var(--brand-fill)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.tbl .primary-cell{color:var(--ink);font-weight:500}
.tbl th.sortable{cursor:pointer}
.tbl th.sortable:hover{color:var(--ink-2)}

.empty{padding:var(--s8) var(--s5);text-align:center}
.empty .ic{width:40px;height:40px;border-radius:var(--r-card);background:var(--fill);
  color:var(--ink-4);display:grid;place-items:center;margin:0 auto var(--s3)}
.empty h4{margin:0 0 4px;font-size:var(--t-14);font-weight:600}
.empty p{margin:0 0 var(--s4);font-size:var(--t-13);color:var(--ink-3)}

.pager{display:flex;align-items:center;gap:var(--s2);padding:10px 16px;
  border-top:1px solid var(--line-2);font-size:var(--t-12);color:var(--ink-3)}
.pager .sp{flex:1}
.pager .pg{min-width:28px;height:28px;padding:0 8px;border-radius:var(--r-xs);border:0;
  background:transparent;font:inherit;font-size:var(--t-12);color:var(--ink-2);cursor:pointer;
  transition:background var(--t)}
.pager .pg:hover{background:var(--fill)}
.pager .pg[aria-current="page"]{background:var(--brand-fill);color:var(--brand);font-weight:600}

/* ---- 8. NAVIGATION ---------------------------------------- */
.tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--line)}
.tabs button{border:0;background:transparent;font:inherit;font-size:var(--t-13);font-weight:500;
  color:var(--ink-3);padding:0 0 10px;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:6px;transition:color var(--t)}
.tabs button:hover{color:var(--ink-2)}
.tabs button[aria-selected="true"]{color:var(--brand)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--brand);border-radius:1px}

.crumb{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-13);color:var(--ink-3)}
.crumb a{color:var(--ink-3);text-decoration:none;transition:color var(--t)}
.crumb a:hover{color:var(--ink-2)}
.crumb .now{color:var(--ink);font-weight:560}

.railitem{width:40px;height:40px;border-radius:var(--r-ctl);display:grid;place-items:center;
  color:var(--ink-3);cursor:pointer;transition:background var(--t),color var(--t)}
.railitem:hover{background:var(--fill);color:var(--ink)}
.railitem[aria-current="page"]{background:var(--brand-fill);color:var(--brand)}

/* ---- 9. OVERLAYS ------------------------------------------ */
.menu{min-width:200px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-over);box-shadow:var(--e2);padding:5px}
.menu .mi{display:flex;align-items:center;gap:var(--s2);height:32px;padding:0 9px;
  border-radius:var(--r-xs);font-size:var(--t-13);color:var(--ink-2);cursor:pointer;
  transition:background var(--t),color var(--t)}
.menu .mi:hover{background:var(--fill);color:var(--ink)}
.menu .mi .sp{flex:1}
.menu .mi.bad{color:var(--bad)}
.menu .mi.bad:hover{background:var(--bad-fill)}
.menu .mi[aria-checked="true"]{color:var(--brand)}
.menu .sep{height:1px;background:var(--line-2);margin:5px -5px}
.menu .grp{font-size:var(--t-11);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);padding:7px 9px 4px}

.tip{background:var(--ink);color:#fff;font-size:var(--t-12);line-height:1.4;
  padding:6px 9px;border-radius:var(--r-xs);max-width:240px;box-shadow:var(--e2);
  position:relative}
.tip::after{content:"";position:absolute;width:8px;height:8px;background:var(--ink);
  left:50%;margin-left:-4px;bottom:-3px;transform:rotate(45deg);border-radius:1px}
.tip-anchor{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:var(--fill-2);color:var(--ink-3);font-size:10px;font-weight:700;cursor:help}

.modal{width:100%;max-width:440px;background:var(--white);border-radius:var(--r-over);
  box-shadow:var(--e2);overflow:hidden}
.modal .head{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s5) var(--s5) 0}
.modal .head h3{margin:0;font-size:var(--t-16);font-weight:600;letter-spacing:-.01em}
.modal .head .sp{flex:1}
.modal .body{padding:var(--s2) var(--s5) var(--s5);font-size:var(--t-13);color:var(--ink-2);
  line-height:1.55}
.modal .foot{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s3) var(--s5);
  background:var(--fill);border-top:1px solid var(--line-2)}

.toast{display:flex;align-items:flex-start;gap:var(--s3);width:340px;background:var(--white);
  border-radius:var(--r-over);box-shadow:var(--e2);padding:var(--s3) var(--s4);
  font-size:var(--t-13)}
.toast .ic{flex:none;margin-top:1px}
.toast .sp{flex:1;min-width:0}
.toast .ttl{display:block;font-weight:600;color:var(--ink)}
.toast .sub{display:block;color:var(--ink-3);font-size:var(--t-12);margin-top:1px}

.drawer{width:320px;background:var(--white);box-shadow:var(--e2);
  border-radius:var(--r-over) 0 0 var(--r-over);overflow:hidden}

/* ---- 10. LOADING ------------------------------------------ */
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;
  border-right-color:transparent;opacity:.9;animation:spin .7s linear infinite;display:inline-block}
.spin.lg{width:24px;height:24px;border-width:2.5px}
@keyframes spin{to{transform:rotate(360deg)}}

.skel{background:linear-gradient(90deg,var(--fill) 25%,var(--fill-2) 37%,var(--fill) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r-xs);
  height:12px}
.skel.line{height:12px}
.skel.title{height:16px;border-radius:var(--r-xs)}
.skel.circle{border-radius:50%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

.bar{height:4px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--brand);border-radius:var(--r-pill);
  transition:width var(--t-slow)}
.bar.indeterminate > i{width:40%;animation:slide 1.2s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

/* ---- 10b. FORM LAYOUT -------------------------------------
   A form is cards + a 12-col grid + ONE action bar. Field width
   comes from the DATA TYPE, never from the space left over.
   ----------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:var(--s4)}
.form .card > .pad{padding:var(--s5)}

/* width by data type — use these, not raw .c* , inside forms */
.w-money{grid-column:span 2}     /* 24.50           */
.w-dim{grid-column:span 2}       /* 4.1 in          */
.w-qty{grid-column:span 2}       /* 48              */
.w-date{grid-column:span 3}      /* 2026-07-30      */
.w-enum{grid-column:span 3}      /* a select        */
.w-code{grid-column:span 4}      /* 084165293047    */
.w-name{grid-column:span 5}      /* Maison Aria     */
.w-title{grid-column:span 8}     /* long product name */
.w-full{grid-column:span 12}     /* notes, tags     */

/* derived block: everything the system fills in, grouped, never inline
   between fields the user types into */
.derived{display:grid;border:1px solid var(--line-2);border-radius:var(--r-ctl);
  background:var(--fill);overflow:hidden}
.derived .d{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:9px 12px;font-size:var(--t-13)}
.derived .d + .d{border-top:1px solid var(--line-2)}
.derived .k{color:var(--ink-3);white-space:nowrap}
.derived .v{font-family:var(--mono);font-size:var(--t-12);color:var(--ink);
  display:flex;align-items:center;gap:var(--s1);white-space:nowrap}

/* one action bar per form, never per section */
.form-foot{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s5);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card)}
.form-foot .sp{flex:1}
.form-foot.sticky{position:sticky;bottom:var(--s4);box-shadow:var(--e1);border-color:transparent}

/* ---- 11. LAYOUT HELPERS ----------------------------------- */
.grid{display:grid;gap:var(--s4) var(--s4);grid-template-columns:repeat(12,1fr)}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}
.rowf{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.sp{flex:1}