/* =====================================================================
   base.css - reset, body type, focus rings, type roles, no native scrollbars,
   reduced motion. Tokens only. Ported from FEDIS-BRANDBOOK-V2.html lines 406-446
   (book base), 1210 and 1539 (app: no browser bold, no outline on text fields).
   ===================================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--space-6); height:100%; overflow:hidden;}
body{margin:var(--space-0); height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--fw-body);
  -webkit-font-smoothing:antialiased; transition:background-color var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard);}
#root{height:100%;}
[data-theme]{color:var(--text);}
::selection{background:var(--selection-bg); color:var(--selection-fg);}
b,strong{font-weight:var(--fw-medium); color:var(--text);}
p{margin:var(--space-0);}
h1, h2, h3, h4{margin:var(--space-0);}
a{color:var(--text-link); text-underline-offset:var(--underline-offset);}
button, input, select, textarea{font-family:inherit;}
:focus-visible{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
.ic{width:var(--icon-size); height:var(--icon-size); fill:none; stroke:currentColor; stroke-width:var(--icon-stroke);
  stroke-linecap:round; stroke-linejoin:round; flex:none; display:block;}
.ic path{vector-effect:non-scaling-stroke;}
.ic .f{fill:currentColor; stroke:none;}
.ic.sm{width:var(--icon-size-sm); height:var(--icon-size-sm);}
.ic.lg{width:var(--icon-size-lg); height:var(--icon-size-lg);}
.icon-wrap.mirrored{display:inline-flex; transform:scaleX(-1);}
.sr{position:absolute; width:var(--bw-hair); height:var(--bw-hair); overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
/* BOS avatar: shared size, gradient tokens and an unframed circular profile control. */
.c-avatar{display:inline-grid; place-items:center; flex:none; width:var(--avatar-m); height:var(--avatar-m); border:none; border-radius:var(--radius-pill); padding:var(--space-0); font:inherit; font-weight:var(--fw-medium); cursor:pointer;}
.c-avatar.grad{background:linear-gradient(135deg,var(--logo-minute-1),var(--logo-minute-2),var(--logo-minute-3)); color:var(--fedisgray3);}
.c-avatar:hover{background:var(--surface-2); color:var(--text);}
/* a measuring probe: laid out at its real size, never seen, never hit (Brandbook renderTnum 9478-9486) */
.dna-probe{position:absolute; left:var(--space-0); top:var(--space-0); visibility:hidden; white-space:nowrap; pointer-events:none;}

/* no native scrollbars anywhere: every scrolling area draws the dot (components/scroll.css) */
*{scrollbar-width:none;}
::-webkit-scrollbar{display:none;}

/* ---- type roles (one class per token set) ---- */
.t-display{font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); font-weight:var(--fw-display);}
.t-h1{font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); font-weight:var(--fw-h1);}
.t-h2{font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); font-weight:var(--fw-h2);}
.t-h3{font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); font-weight:var(--fw-h3);}
.t-h4{font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); font-weight:var(--fw-h4);}
.t-body-l{font-size:var(--fs-body-l); line-height:var(--lh-body-l); letter-spacing:var(--ls-body-l); font-weight:var(--fw-body-l);}
.t-body{font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body); font-weight:var(--fw-body);}
.t-small{font-size:var(--fs-small); line-height:var(--lh-small); letter-spacing:var(--ls-small); font-weight:var(--fw-small);}
.t-caption{font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caption); font-weight:var(--fw-caption);}
.t-label{font-size:var(--fs-label); line-height:var(--lh-label); letter-spacing:var(--ls-label); font-weight:var(--fw-label); text-transform:var(--tt-label);}
.t-num{font-size:var(--fs-num); line-height:var(--lh-num); letter-spacing:var(--ls-num); font-weight:var(--fw-num); font-variant-numeric:var(--figures-tabular);}
.t-mono{font-family:var(--font-mono); font-size:var(--fs-mono); line-height:var(--lh-mono); letter-spacing:var(--ls-mono); font-weight:var(--fw-mono); font-variant-numeric:var(--figures-tabular);}
.tab{font-variant-numeric:var(--figures-tabular);}
.dim{color:var(--text-3);}
.mt1{margin-top:var(--space-1);} .mt4{margin-top:var(--space-4);} .mt5{margin-top:var(--space-5);} .mt6{margin-top:var(--space-6);}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);}

/* ---- inside the app: no browser bold anywhere; text fields show focus by their line, not a box ---- */
:where(.dna-app) :is(h1, h2, h3, h4, b, strong, th){font-weight:var(--fw-regular);}
.dna-app input:not([type="checkbox"]):not([type="radio"]):focus-visible, .dna-app textarea:focus-visible, .dna-app .csel-btn:focus-visible{outline:none;}

/* ---- reduced motion: the duration tokens already collapse to 0 (tokens.css); this is the one !important of the
   codebase, so transitions that do not come from our tokens (third-party parts) stop too ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{transition-duration:var(--dur-instant) !important;}
}

/* c-btn, spin, the delete X, the round agent button, tags.
   Base: FEDIS-BRANDBOOK-V2.html 766-795. App standard (.app -> .dna-app, .app-panel -> .dna-page):
   1246-1259, 1431-1436, 1442, 1465-1483, 1522-1523, 1566-1575, 2155-2163, 2181. Dock and agent button: 1395-1407, 2172.
   Tags: 1193-1198, 1372, 1481-1482, 1526. */

/* One shared target and neutral hover for every button variant. */
.dna-app button:not(.c-switch), .dna-page button:not(.c-switch), .c-seg button:not(.c-switch) {height:var(--tap); min-height:var(--tap);}
.c-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:var(--tap); min-height:var(--tap); min-width:var(--tap); padding:var(--space-0) var(--space-2); flex-shrink:0;
  border:none; border-radius:var(--radius-md); background:transparent; color:var(--text-2); text-decoration:none;
  font:inherit; font-size:var(--fs-label); font-weight:var(--fw-regular); line-height:var(--lh-num);
  letter-spacing:var(--ls-label); text-transform:var(--tt-label); white-space:nowrap; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);}
.c-btn:not(.icon){max-width:100%; white-space:normal; flex-shrink:1;}
.c-btn .ic{width:var(--icon-size-sm); height:var(--icon-size-sm);}
.c-btn.icon{width:var(--tap); padding:var(--space-0); letter-spacing:var(--ls-body);}
.c-btn.s, .c-table td .actions .c-btn{height:var(--control-h-s); min-height:var(--control-h-s); min-width:var(--control-h-s);}
.c-btn.s.icon, .c-table td .actions .c-btn.icon{width:var(--control-h-s);}
@media (pointer:coarse){
  .c-btn.s, .c-table td .actions .c-btn{height:var(--tap); min-height:var(--tap); min-width:var(--tap);}
  .c-btn.s.icon, .c-table td .actions .c-btn.icon{width:var(--tap);}
  .c-check, .c-radio, .check-row{min-height:var(--tap);}
}
.c-btn.icon .ic{width:var(--icon-size); height:var(--icon-size);}
.c-btn:hover, .c-btn.is-hover{background:var(--surface-2); color:var(--text);}
.c-btn.primary{color:var(--text);}
.c-btn:active, .c-btn.is-active{transform:translateY(var(--press-shift));}
.c-btn:focus-visible, .c-btn.is-focus{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
.c-btn:disabled, .c-btn.is-disabled{opacity:var(--opacity-disabled); cursor:not-allowed; transform:none;}
.c-btn.loading{pointer-events:none;}
.dna-app .c-btn.icon.del, .dna-app .tag button.del{color:var(--delete);}
.dna-app .c-btn.icon.del:hover, .dna-app .tag button.del:hover{color:var(--delete-hover); background:var(--surface-2);}
.dna-app .c-btn.icon.del:disabled, .dna-app .c-btn.icon.del[aria-disabled="true"]{color:var(--delete-off); background:transparent; opacity:var(--opacity-full);}
.spin{width:var(--spinner); height:var(--spinner); border-radius:var(--radius-pill); border:var(--bw-strong) solid currentColor; border-right-color:transparent; animation:spin var(--dur-spin) var(--ease-linear) infinite; flex:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- the round agent button (the one round button) and the dock buttons it sits with ---- */
.dock-btn{position:relative; width:var(--dock-item); height:var(--dock-item); flex:none; display:grid; place-items:center; border:none; border-radius:var(--radius-md);
  background:transparent; color:var(--rail-icon); cursor:pointer; padding:var(--space-0);
  transition:background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);}
.dock-btn:hover{color:var(--rail-icon-active);}
.dock-btn:focus-visible, .dock-btn.is-focus{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
.dock-btn.is-hover{color:var(--rail-icon-active);}
.dock-btn.del{color:var(--frame-delete);}
.dock-btn.del:hover, .dock-btn.del.is-hover{color:var(--frame-delete-hover);}
.agent-btn{border-radius:var(--radius-pill); border:var(--bw-strong) solid transparent; color:var(--rail-icon-active);
  background:linear-gradient(var(--frame), var(--frame)) padding-box, linear-gradient(135deg, var(--glow-from), var(--glow-to)) border-box;}
.agent-btn:hover, .agent-btn.is-hover, .agent-btn[aria-expanded="true"]{background:linear-gradient(var(--frame), var(--frame)) padding-box, linear-gradient(135deg, var(--glow-from), var(--glow-to)) border-box;
  box-shadow:0 0 var(--glow-blur) color-mix(in srgb, var(--glow-from) 45%, transparent);}
.dock-btn::before{content:""; position:absolute; inset:calc((var(--dock-item) - var(--tap)) / 2);}
.dna-dockdemo{display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2); background:var(--frame); border-radius:var(--radius-xl);}

/* ---- tags with a delete X ---- */
.tags{display:flex; flex-wrap:wrap; gap:var(--space-2);}
.tag{display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-0) var(--space-1) var(--space-0) var(--space-3); height:calc(var(--space-6) - var(--space-1));
  border-radius:var(--radius-pill); background:var(--surface-2); color:var(--text-2); font-size:var(--fs-caption); border:var(--bw-hair) solid var(--border);}
.tag button{position:relative; display:grid; place-items:center; width:var(--space-5); height:var(--space-5); border:none; border-radius:var(--radius-pill); background:transparent; color:var(--text-3); cursor:pointer; padding:var(--space-0);}
.tag button::before{content:""; position:absolute; inset:calc((var(--space-5) - var(--tap)) / 2);}
.tag button:hover{background:var(--surface-2); color:var(--text);}
.tag button .ic{width:var(--space-3); height:var(--space-3);}
.dna-app .tag{background:none; border-color:var(--border-strong); letter-spacing:var(--ls-caption);}
.dna-app .tag, .dna-app .tag button{border-radius:var(--radius-xs);}

/* icon buttons inside a modal (the row modal of the Brandbook, 1872-1877): rounded squares, delete in purple */
.dna-app .c-modal .c-btn.icon{border:none; border-radius:var(--radius-sm); background:transparent; color:var(--text-2);}
.dna-app .c-modal .c-btn.icon:hover, .dna-app .c-modal .c-btn.icon.is-hover, .dna-app .c-modal .c-btn.icon[aria-pressed="true"]{border:none; background:var(--surface-2); color:var(--text);}
.dna-app .c-modal .c-btn.icon:disabled{opacity:var(--opacity-disabled); background:transparent;}
.dna-app .c-modal .c-btn.icon.del{color:var(--delete);}
.dna-app .c-modal .c-btn.icon.del:hover, .dna-app .c-modal .c-btn.icon.del.is-hover{color:var(--delete-hover);}
.dna-app .lm .c-btn.icon{border:none; border-radius:var(--radius-sm); background:transparent; color:var(--text-2);}
.dna-app .lm .c-btn.icon:hover, .dna-app .lm .c-btn.icon.is-hover, .dna-app .lm .c-btn.icon[aria-pressed="true"]{border:none; background:var(--surface-2); color:var(--text);}
.dna-app .lm .c-btn.icon:disabled{opacity:var(--opacity-disabled); background:transparent;}
.dna-app .lm .c-btn.icon.del{color:var(--delete);}
.dna-app .lm .c-btn.icon.del:hover, .dna-app .lm .c-btn.icon.del.is-hover{color:var(--delete-hover);}

.dna-app .tag button.del.is-hover{color:var(--delete-hover); background:var(--surface-2);}
.tag button.is-focus{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}

/* c-field, c-label, c-input, c-help, dotfill, c-inwrap, c-select + the app's own dropdown (csel) and calendar (cal).
   Base: FEDIS-BRANDBOOK-V2.html 604-609 (dotfill), 831-860. App standard (.app -> .dna-app): 1239-1243, 1262-1273,
   1525, 1539-1561 (text fields, dropdowns), 1587-1605 (date fields), 2164-2165, 2173-2174. */

.c-field{display:grid; gap:var(--space-2); min-width:var(--space-0);}
.c-field > label, .c-label{font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--text); letter-spacing:var(--ls-caption);}
.c-input{width:100%; height:var(--control-h-m); padding:var(--space-0) var(--space-3); font:inherit; font-size:var(--fs-small); color:var(--text); background:var(--input-bg);
  border:var(--bw-hair) solid var(--border-strong); border-radius:var(--radius-md); outline:none;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);}
textarea.c-input{height:auto; min-height:calc(var(--control-h-l) * 2); padding:var(--space-3); resize:vertical; line-height:var(--lh-small);}
.c-input::placeholder{color:var(--text-3); opacity:var(--opacity-full);}
.c-input:hover, .c-input.is-hover{border-color:var(--text-3);}
.c-input:focus, .c-input.is-focus{border-color:var(--focus-ring); box-shadow:0 0 0 var(--bw-focus) var(--focus-ring);}
.c-input:disabled, .c-input.is-disabled{opacity:var(--opacity-disabled); cursor:not-allowed; background:var(--surface-2);}
.c-input[readonly]{background:transparent; border-style:dashed;}
.c-field.error .c-input{border-color:var(--accent-brand);}
.c-field.warning .c-input{border-color:var(--border-alert);}
.c-field.success .c-input{border-color:var(--border-positive);}
.c-help{display:flex; gap:var(--space-2); align-items:center; font-size:var(--fs-caption); color:var(--text-3);}
.c-help .dotfill{width:var(--icon-size-sm); height:var(--icon-size-sm);}
.c-help .dotfill .ic{width:calc(var(--icon-size-sm) - var(--space-1)); height:calc(var(--icon-size-sm) - var(--space-1));}
.c-field.error .c-help{color:var(--accent-brand);}
.c-field.warning .c-help{color:var(--text-alert);}
.c-field.success .c-help{color:var(--text-positive);}
.c-inwrap{position:relative; display:flex; align-items:center;}
.c-inwrap .lead-ic{position:absolute; left:var(--space-3); color:var(--text-3); pointer-events:none;}
.c-inwrap .lead-ic + .c-input{padding-left:calc(var(--space-3) * 2 + var(--icon-size-sm));}
.c-inwrap .trail{position:absolute; right:var(--space-1);}
.c-inwrap .trail .c-btn{padding:var(--space-0);}
.dna-app .c-inwrap .trail .password-toggle{color:var(--text-3); opacity:var(--opacity-muted);}
.dna-app .c-inwrap .trail .password-toggle:hover{color:var(--text); opacity:var(--opacity-full); background:var(--surface-2);}
.c-inwrap .trail + .c-input, .c-inwrap .c-input.has-trail{padding-right:var(--control-h-m);}
.c-select{position:relative;}
.c-select .chev{position:absolute; right:var(--space-3); top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-3);}
.c-input.num{text-align:right; font-variant-numeric:var(--figures-tabular);}

.dotfill{flex:none; width:var(--chip); height:var(--chip); border-radius:var(--radius-pill); display:grid; place-items:center;}
.dotfill.pos{background:var(--accent-positive); color:var(--on-positive);}
.dotfill.alert{background:var(--accent-alert); color:var(--on-alert);}
.dotfill.neg{background:var(--accent-negative); color:var(--on-negative);}
.dotfill.neu{background:var(--surface-2); color:var(--text-2);}
.dotfill .ic{width:var(--icon-size-sm); height:var(--icon-size-sm); stroke-width:var(--bw-strong);}

/* ---- the app standard ---- */
.dna-app .dotfill{width:var(--app-dot); height:var(--app-dot); background:var(--text-3); align-self:center; border-radius:var(--radius-2xs);}
.dna-app .dotfill .ic{display:none;}
.dna-app .dotfill.pos{background:var(--accent-positive);}
.dna-app .dotfill.alert{background:var(--accent-alert);}
.dna-app .dotfill.neg{background:var(--border-negative);}

/* inputs: a single underline; on focus the line turns the text colour */
.dna-app .c-field > label, .dna-app .c-label{font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--text-3); font-weight:var(--fw-regular);}
.dna-app .c-input{background:transparent; border:none; border-bottom:var(--bw-hair) solid var(--border-strong); border-radius:var(--space-0); padding-left:var(--space-0); padding-right:var(--space-0); font-weight:var(--fw-light);}
.dna-app .c-input:hover, .dna-app .c-input.is-hover{border-bottom-color:var(--text-3);}
.dna-app .c-input[readonly]{border-bottom-style:dashed;}
.dna-app .c-inwrap .lead-ic{left:var(--space-0);}
.dna-app .c-inwrap .lead-ic + .c-input{padding-left:calc(var(--icon-size-sm) + var(--space-3));}
.dna-app .c-select .chev{right:var(--space-0);}
.dna-app .c-help{letter-spacing:var(--ls-caption);}
.dna-app .c-input:focus, .dna-app .c-input.is-focus, .dna-app .csel-btn:focus, .dna-app .csel-btn.is-focus, .dna-app .csel-btn[aria-expanded="true"]{box-shadow:inset 0 calc(var(--bw-hair) * -1) 0 0 var(--text); border-bottom-color:var(--text);}
.dna-app textarea.c-input{border:none; border-bottom:var(--bw-hair) solid var(--border-strong); border-radius:var(--space-0); padding:var(--space-3) var(--space-0); resize:none;}
.dna-app textarea.c-input:focus, .dna-app textarea.c-input.is-focus{border-bottom-color:var(--text); box-shadow:inset 0 calc(var(--bw-hair) * -1) 0 0 var(--text);}
.dna-app .c-field.error .c-input{border-bottom-color:var(--accent-brand);}
/* A field the user must fix uses the theme colour, never the alert colours, and stays marked while focused. */
.c-input[aria-invalid="true"], .dna-app .c-input[aria-invalid="true"], .dna-app .fm-select:has(select[aria-invalid="true"]) .csel-btn, .dna-app textarea.c-input[aria-invalid="true"]{border-color:var(--accent-brand); border-bottom-color:var(--accent-brand); box-shadow:inset 0 calc(var(--bw-strong) * -1) 0 0 var(--accent-brand); background:color-mix(in srgb, var(--accent-brand) 12%, transparent);}
.c-field:has([aria-invalid="true"]) > .c-label, .c-field:has([aria-invalid="true"]) > label{color:var(--accent-brand);}
.dna-app .c-field.warning .c-input{border-bottom-color:var(--border-alert);}
.dna-app .c-field.success .c-input{border-bottom-color:var(--border-positive);}

/* ---- dropdowns: the app's own list instead of the system one; the chosen option carries a dot ---- */
.csel-btn{display:flex; align-items:center; gap:var(--space-2); text-align:left; cursor:pointer; min-width:var(--space-0); border-top-width:var(--space-0); border-left-width:var(--space-0); border-right-width:var(--space-0);}
.csel-btn .v{flex:1; min-width:var(--space-0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.csel-btn .v.ph{color:var(--text-3);}
.csel-btn .ic{flex:none; color:var(--text-3);}
.c-select .csel-btn{padding-right:var(--space-6);}
.csel-pop{position:fixed; left:calc(var(--pop-x, 0) * var(--px)); top:calc(var(--pop-y, 0) * var(--px)); min-width:calc(var(--pop-w, 0) * var(--px));
  z-index:var(--z-overlay); display:none; padding:var(--space-1); background:var(--panel); border:var(--bw-hair) solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-2); max-height:calc(var(--control-h-m) * 6); overflow-y:auto;}
.csel-pop.open{display:block;}
.csel-opt{display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:var(--control-h-m); padding:var(--space-2) var(--space-3); border:none; border-radius:var(--radius-sm); background:transparent;
  font:inherit; font-size:var(--fs-small); font-weight:var(--fw-light); color:var(--text-2); text-align:left; cursor:pointer; white-space:nowrap;}
.csel-opt span{flex:1;}
.csel-dot{flex:none; width:var(--app-dot); height:var(--app-dot); border-radius:var(--radius-2xs); background:var(--text); opacity:0;}
.csel-opt:hover, .csel-opt:focus-visible, .csel-opt.is-hover, .csel-opt.active{background:var(--surface-2); color:var(--text); outline:none;}
.csel-opt[aria-selected="true"]{color:var(--text);}
.csel-opt[aria-selected="true"] .csel-dot{opacity:var(--opacity-full);}
.csel-btn:disabled{opacity:var(--opacity-disabled); cursor:not-allowed;}

/* ---- date fields: a calendar in the app's style, Monday first; today a small dot, the chosen day a line ---- */
.cdate-btn .ic{margin-left:auto;}
.cal-pop{position:fixed; left:calc(var(--pop-x, 0) * var(--px)); top:calc(var(--pop-y, 0) * var(--px)); z-index:var(--z-overlay); display:none; padding:var(--space-3); background:var(--panel); border:var(--bw-hair) solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-2);}
.cal-pop.open{display:grid; gap:var(--space-2);}
.cal-body{display:grid; gap:var(--space-2);}
.cal-row{display:contents;}
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);}
.cal-t{font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--text); font-weight:var(--fw-regular);}
.cal-nav, .cal-d{height:var(--tap); min-height:var(--tap); border:none; background:transparent; font:inherit; cursor:pointer; padding:var(--space-0); border-radius:var(--radius-sm);
  transition:background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);}
.cal-nav{width:var(--tap); display:grid; place-items:center; color:var(--text-2);}
.cal-grid{display:grid; grid-template-columns:repeat(7, var(--tap));}
.cal-wd{height:var(--control-h-s); display:grid; place-items:center; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--text-3);}
.cal-d{position:relative; font-size:var(--fs-small); font-weight:var(--fw-light); color:var(--text-2);}
.cal-d.out{color:var(--text-3);}
.cal-nav:hover, .cal-nav:focus-visible, .cal-d:hover, .cal-d:focus-visible, .cal-d.is-hover{background:var(--surface-2); color:var(--text); outline:none;}
.cal-d:focus-visible{box-shadow:inset 0 0 0 var(--bw-hair) var(--focus-ring);}
/* today: the small dot sits at the top right of the day number itself, as in the Brandbook's 32 px cell (1602), so it stays
   with its day in the 44 px cells (control finding U-15) */
.cal-d .cal-n{position:relative; display:inline-block;}
.cal-d[aria-current="date"] .cal-n::before{content:""; position:absolute; top:var(--space-0); left:calc(100% + var(--bw-hair)); width:var(--space-1); height:var(--space-1); border-radius:var(--radius-2xs); background:var(--text-3);}
.cal-d[aria-selected="true"]{color:var(--text); font-weight:var(--fw-regular);}
.cal-d[aria-selected="true"]::after{content:""; position:absolute; left:var(--space-2); right:var(--space-2); bottom:var(--space-1); height:var(--bw-hair); background:var(--text);}
.cal-foot{display:flex; justify-content:flex-end; border-top:var(--bw-hair) solid var(--border); padding-top:var(--space-2);}

/* a popup drawn in place for the gallery (not floating) */
.csel-pop.static, .cal-pop.static{position:relative; left:auto; top:auto; display:block; width:max-content; max-width:100%; z-index:var(--z-base);}
.cal-pop.static{display:grid;}

/* helper words stay in the text colour; the state is the dot alone (components.fields "Errors: a purple dot and plain words";
   Brandbook 2726/2734: green and gold as a fill, the words in the text colour; control finding U-03) */
.dna-app .c-field.error .c-help, .dna-app .c-field.warning .c-help, .dna-app .c-field.success .c-help{color:var(--text-2);}

/* List options use the shared tap height; dropdown and date buttons get an invisible tap hit area. */
.csel-opt{min-height:var(--tap);}
.csel-btn{position:relative;}
.csel-btn::before{content:""; position:absolute; left:var(--space-0); right:var(--space-0); top:calc((var(--control-h-m) - var(--tap)) / 2 - var(--bw-hair)); bottom:calc((var(--control-h-m) - var(--tap)) / 2 - var(--bw-hair));}
/* the focused option, drawn on purpose for the gallery (the same look as keyboard focus) */
.csel-opt.is-focus{background:var(--surface-2); color:var(--text); outline:none;}

/* c-switch, c-row, c-check, c-radio, c-seg.
   Base: FEDIS-BRANDBOOK-V2.html 797-829. App standard (.app -> .dna-app): 1276-1291, 1488, 1527, 1534-1536, 2163-2166. */

.c-switch{position:relative; width:var(--switch-w); height:var(--switch-h); min-width:var(--switch-w); min-height:var(--switch-h); flex:none; border:var(--bw-hair) solid var(--border-strong); border-radius:var(--radius-pill); background:var(--switch-off); cursor:pointer; padding:var(--space-0);
  transition:background-color var(--dur-base) var(--ease-standard);}
.c-switch::after{content:""; position:absolute; top:calc((var(--switch-h) - var(--switch-knob)) / 2 - var(--bw-hair)); left:calc((var(--switch-h) - var(--switch-knob)) / 2 - var(--bw-hair));
  width:var(--switch-knob); height:var(--switch-knob); border-radius:var(--radius-pill); background:var(--switch-knob-color); box-shadow:var(--shadow-1);
  transition:transform var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);}
.c-switch[aria-checked="true"]{background:var(--accent-positive);}
.c-switch[aria-checked="true"]::after{transform:translateX(calc(var(--switch-w) - var(--switch-h))); background:var(--on-positive);}
.c-switch:hover, .c-switch.is-hover{box-shadow:0 0 0 var(--space-1) var(--surface-2);}
.c-switch:focus-visible, .c-switch.is-focus{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
.c-switch:disabled, .c-switch.is-disabled{opacity:var(--opacity-disabled); cursor:not-allowed; box-shadow:none;}
/* 44 px target around the small switch (FedisDNA, UI contract 7) */
.c-switch::before{content:""; position:absolute; left:calc((var(--switch-w) - var(--tap)) / 2 - var(--bw-hair)); right:calc((var(--switch-w) - var(--tap)) / 2 - var(--bw-hair)); top:calc((var(--switch-h) - var(--tap)) / 2 - var(--bw-hair)); bottom:calc((var(--switch-h) - var(--tap)) / 2 - var(--bw-hair));}
.c-row{display:flex; align-items:center; gap:var(--space-3); color:var(--text); font-size:var(--fs-small);}
.c-row.between{justify-content:space-between;}

.c-check, .c-radio{display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer; color:var(--text); font-size:var(--fs-small); position:relative;}
.c-check input, .c-radio input{position:absolute; opacity:0; margin:var(--space-0); cursor:pointer;}
input[type="checkbox"], input[type="radio"], .c-check .box, .c-radio .box{width:var(--check); height:var(--check); min-width:var(--check); min-height:var(--check); max-width:var(--check); max-height:var(--check); flex:none; aspect-ratio:1;}
.check-row{display:flex; gap:var(--space-2); align-items:center;}
.c-check, .c-radio, .check-row{line-height:var(--lh-tight);}
.check-row input{appearance:none; margin:var(--space-0); border:var(--bw-hair) solid var(--border-strong); border-radius:var(--radius-xs); background:var(--input-bg); cursor:pointer;}
.check-row input:checked{background:var(--text); border-color:var(--text); color:var(--panel);}
.check-row input[type="radio"]{border-radius:var(--radius-pill);}
.check-row input[type="radio"]:checked{box-shadow:inset 0 0 0 calc(var(--check) / 4) var(--panel);}
.check-row input:hover{border-color:var(--text-3);}
.roles{margin:var(--space-0); padding:var(--space-0); border:none; display:grid; gap:var(--space-2);}
.roles legend{padding:var(--space-0) var(--space-0) var(--space-2); color:var(--text-3);}
.c-check .box, .c-radio .box{width:var(--check); height:var(--check); flex:none; display:grid; place-items:center; border:var(--bw-hair) solid var(--border-strong); background:var(--input-bg); color:transparent;
  transition:background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);}
.c-check .box{border-radius:var(--radius-xs);}
.c-radio .box{border-radius:var(--radius-pill);}
.c-check .box .ic{width:var(--icon-size-sm); height:var(--icon-size-sm); stroke-width:var(--bw-strong);}
.c-check input:checked + .box{background:var(--accent-positive); border-color:var(--border-positive); color:var(--on-positive);}
.c-radio input:checked + .box{border-color:var(--border-positive); box-shadow:inset 0 0 0 calc(var(--check) / 4) var(--accent-positive);}
.c-check:hover .box, .c-radio:hover .box, .c-check.is-hover .box, .c-radio.is-hover .box{border-color:var(--text-3);}
.c-check input:focus-visible + .box, .c-radio input:focus-visible + .box, .c-check.is-focus .box, .c-radio.is-focus .box{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
.c-check input:disabled + .box, .c-radio input:disabled + .box{opacity:var(--opacity-disabled);}
.c-check.is-disabled, .c-radio.is-disabled{opacity:var(--opacity-disabled); cursor:not-allowed;}

.c-seg{display:inline-flex; padding:var(--space-1); gap:var(--space-1); border-radius:var(--radius-md); background:var(--surface-2); border:var(--bw-hair) solid var(--border);}
.c-seg button{border:none; background:transparent; color:var(--text-2); font:inherit; font-size:var(--fs-caption); font-weight:var(--fw-medium); height:var(--tap);
  padding:var(--space-0) var(--space-3); border-radius:var(--radius-sm); cursor:pointer; transition:background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);}
.c-seg button:hover{color:var(--text);}
.c-seg button[aria-pressed="true"]{background:var(--seg-active); color:var(--text); box-shadow:var(--shadow-1);}
.c-seg button:focus-visible{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:calc(var(--focus-offset) * -1);}

/* ---- the app standard ---- */
/* Compact switch geometry and neutral colors from the app standard. */
.dna-app .c-switch{width:var(--app-switch-w); height:var(--app-switch-h); min-width:var(--app-switch-w); min-height:var(--app-switch-h); background:transparent; border:var(--bw-hair) solid var(--border-strong);}
.dna-app .c-switch::before{left:calc((var(--app-switch-w) - var(--tap)) / 2 - var(--bw-hair)); right:calc((var(--app-switch-w) - var(--tap)) / 2 - var(--bw-hair)); top:calc((var(--app-switch-h) - var(--tap)) / 2 - var(--bw-hair)); bottom:calc((var(--app-switch-h) - var(--tap)) / 2 - var(--bw-hair));}
.dna-app .c-switch::after{width:var(--app-switch-knob); height:var(--app-switch-knob); top:calc((var(--app-switch-h) - var(--app-switch-knob)) / 2 - var(--bw-hair)); left:calc((var(--app-switch-h) - var(--app-switch-knob)) / 2 - var(--bw-hair)); background:var(--text-3); box-shadow:none;}
.dna-app .c-switch[aria-checked="true"]{background:var(--text-3); border-color:var(--text-3);}
.dna-app .c-switch[aria-checked="true"]::after{transform:translateX(calc(var(--app-switch-w) - var(--app-switch-h))); background:var(--panel);}
.dna-app .c-switch:hover, .dna-app .c-switch.is-hover{box-shadow:none; border-color:var(--text-3);}
.dna-app .c-switch[aria-checked="true"]:hover{background:var(--text-2); border-color:var(--text-2);}

/* no round shapes: the radio box is a soft square */
.dna-app .c-radio .box{border-radius:var(--radius-2xs);}

/* option groups: plain tracked words; hover = surface-2 block; selected = a thin line under the words, not green */
.dna-app .c-seg{background:none; border:none; padding:var(--space-0); gap:var(--space-5); border-radius:var(--space-0);}
.dna-app .c-seg button{padding:var(--space-1) var(--space-0); border-radius:var(--space-0); background:none; box-shadow:none; border-bottom:var(--bw-hair) solid transparent;
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--text-3); font-weight:var(--fw-regular);}
.dna-app .c-seg button:hover{color:var(--text);}
.dna-app .c-seg button[aria-pressed="true"]{background:transparent; box-shadow:none; color:var(--text);}
.dna-app .c-seg{gap:var(--space-2); margin-inline:calc(var(--space-2) * -1);}
.dna-app .c-seg button{padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); border-bottom:none;}
.dna-app .c-seg button:hover{background:var(--surface-2);}
.dna-app .c-seg button{position:relative;}
.dna-app .c-seg button::before{content:""; position:absolute; left:var(--space-0); right:var(--space-0); top:calc(50% - var(--tap) / 2); height:var(--tap);}   /* 44 px target (FedisDNA) */
.dna-app .c-seg button[aria-pressed="true"]::after{content:""; position:absolute; left:var(--space-2); right:var(--space-2); bottom:var(--space-0); height:var(--bw-hair); background:var(--text);}
.dna-app .c-seg button[aria-pressed="true"]:hover{background:var(--surface-2);}
.dna-app .c-seg button.is-hover{background:var(--surface-2); color:var(--text);}
.dna-app .c-seg button.is-focus{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
.dna-app .c-seg button:disabled{opacity:var(--opacity-disabled); cursor:not-allowed;}

/* checkboxes and radios carry no colour: delete is the only coloured control (DATA.standard 32, components.delete; control
   finding U-02). Checked = the box filled in the text colour, no tick mark (owner point 49); the radio = a soft square
   filled in the text colour inside a page-colour ring. No green, in every theme. */
.dna-app .c-check input:checked + .box{background:var(--text); border-color:var(--text); color:transparent;}
.dna-app .c-radio input:checked + .box{background:var(--text); border-color:var(--text); box-shadow:inset 0 0 0 calc(var(--check) / 4) var(--panel);}

/* c-table. Base: FEDIS-BRANDBOOK-V2.html 980-993. App standard (.app -> .dna-app): 1297-1299, 1578-1585, 2105, 2178.
   The selected row: the Brandbook gallery marks it with class "sel" (12057, 2178) and the base with "is-selected" (992). */

.c-table{width:100%; border-collapse:collapse; font-size:var(--fs-small);}
.c-table th{text-align:left; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); font-weight:var(--fw-label); color:var(--text-3);
  padding:var(--space-3); border-bottom:var(--bw-hair) solid var(--border-strong); white-space:nowrap;}
.c-table th button{border:none; background:transparent; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-0);}
.c-table th button:hover{color:var(--text);}
.c-table th button .ic{width:var(--icon-size-sm); height:var(--icon-size-sm); opacity:var(--opacity-muted);}
.c-table th[aria-sort="ascending"] button, .c-table th[aria-sort="descending"] button{color:var(--text);}
.c-table td{padding:var(--space-3); border-bottom:var(--bw-hair) solid var(--border); color:var(--text-2); white-space:nowrap;}
.c-table td.main{width:100%; white-space:normal; overflow-wrap:anywhere; color:var(--text); font-weight:var(--fw-regular);}
.c-table th.main{width:100%;}
.c-table :is(th, td):not(.main){width:var(--space-0);}
.c-table td .actions{flex-wrap:nowrap;}
.c-table .num{text-align:right; font-variant-numeric:var(--figures-tabular);}
.c-table th.num button{flex-direction:row-reverse;}
.c-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard); cursor:pointer;}
.c-table tbody tr:hover, .c-table tbody tr.is-hover{background:var(--surface-2);}
.c-table tbody tr.is-selected{background:var(--surface-2); box-shadow:inset var(--bw-strong) 0 0 var(--accent-brand);}
.c-table tbody tr:focus-visible, .c-table tbody tr.is-focus{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:calc(var(--focus-offset) * -1);}
.c-table.wrap td, .c-table.wrap th{white-space:normal;}

/* ---- the app standard: the hover is a rounded block drawn behind the row, the row's own line stays ---- */
.dna-app .c-table th{padding-bottom:var(--space-3); border-bottom:var(--bw-hair) solid var(--border);}
.dna-app .c-table td{padding:var(--space-2) var(--space-3);}
.dna-app .c-table td.main{font-weight:var(--fw-light);}
.dna-app .c-table tbody tr{position:relative; isolation:isolate;}
.dna-app .c-table tbody tr > td:first-child::before{content:""; position:absolute; z-index:var(--z-behind); inset:var(--bw-hair) var(--space-0);
  border-radius:var(--radius-sm); background:transparent; pointer-events:none; transition:background-color var(--dur-fast) var(--ease-standard);}
.dna-app .c-table tbody tr:hover{background:transparent;}
.dna-app .c-table tbody tr:hover > td:first-child::before, .dna-app .c-table tbody tr.is-hover > td:first-child::before,
.dna-app .c-table tbody tr.sel > td:first-child::before{background:var(--surface-2);}
.dna-app .c-table tbody tr.is-hover{background:transparent;}

/* sortable headers: a 44 px target (prompt 5.7; control finding U-06); the header cell keeps its height */
.c-table th button{position:relative; min-height:var(--tap); min-width:var(--tap);}
.c-table th:has(> button){padding-top:var(--space-0); padding-bottom:var(--space-0);}
.dna-app .c-table th:has(> button){padding-bottom:var(--space-0);}

/* ---- the row handle: six small squares with softened corners, grey at rest (the scroll dot's grey), dark on hover, focus
   or drag; a 44 px hit area around it (FEDIS-BRANDBOOK-V2.html 1843-1853, UI.grip 9813; DATA.standard 43, components.table) ---- */
.grip{position:relative; display:grid; grid-template-columns:repeat(2, var(--grip-dot)); gap:var(--grip-gap); padding:var(--space-1); border:none; border-radius:var(--radius-xs); background:transparent;
  color:var(--scrollbar-thumb-hover); cursor:grab; touch-action:none; transition:color var(--dur-fast) var(--ease-standard);}
.grip i{width:var(--grip-dot); height:var(--grip-dot); border-radius:calc(var(--radius-2xs) / 2); background:currentColor;}
.grip::before{content:""; position:absolute; left:calc(50% - var(--grip-hit) / 2); top:calc(50% - var(--grip-hit) / 2); width:var(--grip-hit); height:var(--grip-hit);}
.grip:hover, .grip.is-hover, .g-table tbody tr.dragging .grip{color:var(--text);}
.grip:focus-visible, .grip.is-focus{outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--space-0); color:var(--text);}
/* the drop line: where a dragged row lands */
.g-table{border-collapse:collapse; font-size:var(--fs-small); color:var(--text-2);}
.g-table td{padding:var(--space-3) var(--space-3);}
.dna-app .g-table tbody tr.drop-before td{box-shadow:inset 0 var(--bw-strong) 0 0 var(--text);}
.dna-app .g-table tbody tr.drop-after td{box-shadow:inset 0 calc(var(--bw-strong) * -1) 0 0 var(--text);}
.dna-app .g-table tbody tr.dragging{opacity:var(--opacity-muted);}

/* c-overlay, c-modal, c-toasts, c-toast, tip-pop (the Brandbook c-tipdemo of 935-938 is replaced by the real tooltip).
   Base: FEDIS-BRANDBOOK-V2.html 951-967. Tooltip: 1438-1441, 2149. Toast demo: 2115-2116. */

.c-overlay{position:fixed; inset:var(--space-0); z-index:var(--z-overlay); background:var(--overlay); display:grid; place-items:center; padding:var(--space-4);
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-standard); background-color:var(--overlay);}
.c-overlay.open{opacity:var(--opacity-full); pointer-events:auto;}
.c-modal{width:min(100%, var(--modal-w)); background:var(--surface); border:var(--bw-hair) solid var(--border); border-radius:var(--radius-xl); padding:var(--modal-pad); box-shadow:var(--shadow-3); color:var(--text);
  transform:translateY(var(--motion-shift)); transition:transform var(--dur-base) var(--ease-out);}
.c-overlay.open .c-modal{transform:none;}
.c-modal h4{margin:var(--space-0) var(--space-0) var(--space-2); font-size:var(--fs-h4); font-weight:var(--fw-medium);}
.c-modal p{color:var(--text-2); font-size:var(--fs-small);}
.c-modal .acts{display:flex; justify-content:flex-end; gap:var(--space-3); margin-top:var(--space-6);}
.c-modal.l{width:min(100%, var(--modal-w-l));}
/* a modal drawn in place for the gallery: the overlay becomes a framed stage */
.c-overlay.static{position:relative; inset:auto; z-index:var(--z-base); opacity:var(--opacity-full); pointer-events:auto; border-radius:var(--radius-xl); padding:var(--modal-pad);}
.c-overlay.static .c-modal{transform:none;}

.c-toasts{position:fixed; right:var(--space-5); bottom:var(--space-5); z-index:var(--z-toast); display:grid; gap:var(--space-2); width:min(calc(100% - var(--space-6)), var(--toast-w));}
.c-toast{display:flex; gap:var(--space-3); align-items:flex-start; background:var(--surface); color:var(--text); border:var(--bw-hair) solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4); box-shadow:var(--shadow-3); font-size:var(--fs-small); animation:toastin var(--dur-base) var(--ease-out);}
.c-toast .tt{flex:1; min-width:var(--space-0);}
.c-toast .tt b{display:block; font-weight:var(--fw-medium);}
.c-toast .tt span{color:var(--text-2);}
.c-toast .tt .t-why{display:block; margin-top:var(--space-1); font-size:var(--fs-caption);}
.c-toast .dotfill{margin-top:var(--space-2);}
@keyframes toastin{from{opacity:0; transform:translateY(var(--space-2));}}
.c-toasts.static{position:relative; right:auto; bottom:auto; z-index:var(--z-base); width:min(100%, var(--toast-w));}
.c-toasts.static .c-toast{animation:none;}

/* the name of an icon button: one floating label on top of everything, so rows, tables and panes never hide or cut it */
.tip-pop{position:fixed; top:var(--space-0); left:var(--space-0); z-index:var(--z-tooltip); background:var(--tooltip-bg); color:var(--tooltip-fg); font-size:var(--fs-caption); letter-spacing:var(--ls-caption);
  font-weight:var(--fw-regular); padding:var(--space-1) var(--space-3); border-radius:var(--radius-sm); white-space:normal; overflow-wrap:anywhere; max-width:calc(100vw - var(--space-8)); box-shadow:var(--shadow-2); opacity:0; pointer-events:none;
  transform:translate(calc(var(--tip-x, 0) * var(--px)), calc(var(--tip-y, 0) * var(--px)));
  visibility:hidden; transition:opacity var(--dur-fast) var(--ease-standard), visibility var(--dur-fast) var(--ease-standard);}
/* hidden once faded out: its last words are no longer on the page */
.tip-pop.on{opacity:var(--opacity-full); visibility:visible; transition:opacity var(--dur-fast) var(--ease-standard);}
.tip-pop.static{position:relative; display:inline-block; transform:none; opacity:var(--opacity-full); z-index:var(--z-base);}
.dna-tipwrap{display:inline-flex; align-items:center; gap:var(--space-2);}


/* ---- the row modal: the Brandbook's order-line modal (FEDIS-BRANDBOOK-V2.html 1856-1877, page head 1047-1049 and 1213-1216) ----
   in the page's shading, "2 of 6" after a plain dot, previous and next, the row's fields in two columns, a live total and
   the icon actions above one hairline */
.lm{width:min(100%, var(--line-modal-w)); max-height:calc(100% - var(--space-6)); overflow:hidden; display:flex; flex-direction:column; gap:var(--space-5); padding:var(--modal-pad);
  background:var(--panel-sheen); border-radius:var(--radius-xl); box-shadow:var(--shadow-3); color:var(--text);
  transform:translateY(var(--space-3)); transition:transform var(--dur-base) var(--ease-out);}
.c-overlay.open .lm, .lm.static{transform:none;}
.lm-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);}
.lm-head, .lm-foot{flex:none;}
.lm-head .modal-close{align-self:flex-start;}
.lm-nav{display:flex; gap:var(--space-1);}
.lm > .lm-body{flex:1 1 auto; min-height:var(--space-0); overflow:auto;}
.lm-grid{display:grid; grid-template-columns:minmax(var(--space-0), 1fr); gap:var(--space-4) var(--space-5); align-content:start; min-height:var(--space-0); overflow-y:auto;}   /* only the fields scroll */
.lm > .lm-grid, .lm-content > .lm-grid{flex:1; min-height:var(--space-0); overflow:auto;}
.lm .form-grid.lm-content{display:flex; flex-direction:column; flex:1; min-height:var(--space-0); overflow:hidden;}
.lm-content > .actions{flex:none;}
.lm .form-grid{grid-template-columns:repeat(2,minmax(var(--space-0),1fr)); gap:var(--space-4) var(--space-5);}
.lm .form-grid > :not(.c-field){grid-column:1 / -1;}
.lm .form-grid > .actions{border-top:var(--bw-hair) solid var(--border); padding-top:var(--space-3); justify-content:flex-end;}
.card, .pane, .welcome-card{padding:var(--card-pad); border-radius:var(--radius-xl); background:var(--panel-sheen); border:var(--bw-hair) solid var(--border); min-width:var(--space-0);}
:is(.card, .pane, .welcome-card, .c-modal, .lm) > :first-child{margin-top:var(--space-0);}
:is(.card, .pane, .welcome-card, .c-modal, .lm) > :last-child{margin-bottom:var(--space-0);}
@media (max-width:45em){.lm .form-grid{grid-template-columns:minmax(var(--space-0),1fr);}}
.lm-grid textarea.c-input{min-height:var(--control-h-l);}
.lm-grid .wide{grid-column:1 / -1;}
.lm-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-top:var(--space-4); border-top:var(--bw-hair) solid var(--border);}
.lm-tot{display:flex; align-items:baseline; gap:var(--space-4);}
.lm-tot .tl{font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--text-3);}
.lm-tot .tv{font-size:var(--fs-app-total); font-weight:var(--fw-light); color:var(--text); letter-spacing:var(--ls-num);}
.lm-acts{display:flex; gap:var(--space-2);}
.lm.static{max-width:100%; max-height:none;}   /* in place: its height is its content (a percentage of the gallery cell would cut it) */

/* c-badge, c-count, has-count, c-progress.
   Base: FEDIS-BRANDBOOK-V2.html 916-924, 969-974. App standard (.app -> .dna-app): 1234-1238, 1316-1319, 1526, 1528-1529. */

.c-badge{display:inline-flex; align-items:center; gap:var(--space-1); height:calc(var(--space-5) - var(--space-1)); padding:var(--space-0) var(--space-2); border-radius:var(--radius-pill);
  font-size:var(--fs-label); font-weight:var(--fw-medium); letter-spacing:var(--ls-caption); white-space:nowrap; background:var(--surface-2); color:var(--text-2);}
.c-badge::before{content:""; width:calc(var(--dot) - var(--space-1) / 2); height:calc(var(--dot) - var(--space-1) / 2); border-radius:var(--radius-pill); background:currentColor; opacity:var(--opacity-muted);}
.c-badge.pos{background:var(--accent-positive); color:var(--on-positive);}
.c-badge.alert{background:var(--accent-alert); color:var(--on-alert);}
.c-badge.neg{background:var(--accent-negative); color:var(--on-negative);}
.c-count{position:absolute; top:calc(var(--space-1) * -1); right:calc(var(--space-1) * -1); min-width:var(--badge-count); height:var(--badge-count); padding:var(--space-0) var(--space-1);
  border-radius:var(--radius-pill); background:var(--badge-count-bg); color:var(--badge-count-fg); font-size:var(--fs-label); font-weight:var(--fw-semibold); line-height:var(--badge-count); text-align:center; font-variant-numeric:var(--figures-tabular); pointer-events:none;}
.has-count{position:relative; display:inline-grid;}

.c-progress{height:var(--progress-h); border-radius:var(--radius-pill); background:var(--surface-2); overflow:hidden; border:var(--bw-hair) solid var(--border);}
.c-progress i{display:block; height:100%; width:var(--v, 40%); background:var(--accent-positive); border-radius:var(--radius-pill); transition:width var(--dur-slow) var(--ease-standard);}
.c-progress.alert i{background:var(--accent-alert);}
.c-progress.neg i{background:var(--accent-negative);}
.c-progress.indet i{width:30%; animation:indet var(--dur-loop) var(--ease-in-out) infinite;}
@keyframes indet{from{transform:translateX(-100%);} to{transform:translateX(340%);}}

/* ---- the app standard: status is a small square dot and a tracked word; progress bars are thin with square ends ---- */
.dna-app .c-badge{background:none; color:var(--text-2); height:auto; padding:var(--space-0); gap:var(--space-2); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); font-weight:var(--fw-regular); border-radius:var(--space-0);}
.dna-app .c-badge::before{width:var(--app-dot); height:var(--app-dot); opacity:var(--opacity-full); background:var(--text-3); border-radius:var(--radius-2xs);}
.dna-app .c-badge.pos::before{background:var(--accent-positive);}
.dna-app .c-badge.alert::before{background:var(--accent-alert);}
.dna-app .c-badge.neg::before{background:var(--border-negative);}
.dna-app .c-count{border-radius:var(--radius-xs);}
.dna-app .c-progress{height:var(--bw-strong); border:none; background:var(--border); border-radius:var(--space-0);}
.dna-app .c-progress i{background:var(--text-2); border-radius:var(--space-0);}
.dna-app .c-progress.alert i{background:var(--accent-alert);}
.dna-app .c-progress.neg i{background:var(--border-negative);}

/* the count badge is black with white figures in every theme (prompt 5.7 "count badges black", DATA.standard 5 "a black
   count"); on the dark panels a hairline ring keeps its edge visible (control finding U-05, DECISIONS.md) */
.dna-app .c-count{background:var(--app-count-bg); color:var(--app-count-fg); box-shadow:0 0 0 var(--bw-hair) var(--app-count-ring);}

/* c-scroll and the scroll dot (no native scrollbars anywhere).
   Base: FEDIS-BRANDBOOK-V2.html 862-867. The dot: 1509-1518, 1609, 1615-1616, 2152, 2176; its geometry is
   computed by components/Scroll.tsx (port of dotsScan/dotMake/dotPaint, lines 11470-11538). */

.c-scroll{max-height:var(--scroll-card-h); overflow-y:auto; padding-right:var(--space-2);}
.c-scroll p{color:var(--text-2); font-size:var(--fs-small);}
.c-scroll p + p{margin-top:var(--space-3);}

/* the scroll host: the dot is positioned inside the box it scrolls */
.sdot-host{position:relative; display:flex; flex-direction:column; min-height:var(--space-0); min-width:var(--space-0);}
.sdot-host > .sdot-on{flex:1 1 auto; min-height:var(--space-0);}
.sdot-on{overflow-x:hidden; overflow-y:auto; scrollbar-width:none;}
.sdot-on::-webkit-scrollbar{display:none;}
.sdot-on.sdot-x{overflow-x:auto;}
/* the lane: while the box scrolls, the dot gets its own strip on the right, never over the content */
.sdot-on.lane{padding-right:calc(var(--sdot-pr, 0) * var(--px) + var(--scroll-gutter));}
.sdot-on.sdot-x.lane-y{margin-right:var(--scroll-gutter);}
.sdot-on.sdot-x.lane-x{margin-bottom:var(--scroll-gutter);}

.sdot{position:absolute; top:var(--space-0); left:var(--space-0); width:var(--scroll-thumb-w); height:var(--scroll-thumb-len); border-radius:var(--radius-pill);
  background:var(--scrollbar-thumb-hover); z-index:var(--z-raised); cursor:pointer;
  transform:translate(calc(var(--dot-x, 0) * var(--px)), calc(var(--dot-y, 0) * var(--px)));
  transition:background-color var(--dur-fast) var(--ease-standard), width var(--dur-fast) var(--ease-standard), margin var(--dur-fast) var(--ease-standard);}
.sdot::before{content:""; position:absolute; inset:calc(var(--space-2) * -1);}
.sdot:hover, .sdot.drag, .sdot.is-hover{background:var(--text-2); width:var(--scroll-thumb-w-hover); margin-left:calc(var(--scroll-thumb-w) - var(--scroll-thumb-w-hover));}
.sdot[hidden]{display:none;}
.sdot.sdot-h{width:var(--scroll-thumb-len); height:var(--scroll-thumb-w); transition:background-color var(--dur-fast) var(--ease-standard), height var(--dur-fast) var(--ease-standard), margin var(--dur-fast) var(--ease-standard);}
.sdot.sdot-h:hover, .sdot.sdot-h.drag, .sdot.sdot-h.is-hover{width:var(--scroll-thumb-len); height:var(--scroll-thumb-w-hover); margin-left:var(--space-0); margin-top:calc(var(--scroll-thumb-w) - var(--scroll-thumb-w-hover));}
.sdot.static{position:relative; display:inline-block; transform:none;}
.dna-dots{position:relative; display:flex; align-items:center; gap:var(--space-5); min-height:var(--space-6);}