/* ============================================================
   FREESIDE COMPONENT LIBRARY
   ------------------------------------------------------------
   Extends freeside.css (tokens + core). Load AFTER it:
     <link rel="stylesheet" href="freeside.css">
     <link rel="stylesheet" href="freeside-components.css">

   Everything here is framework-agnostic CSS + markup patterns, so the
   shell, Seldon and Case can all use it whatever they're built in.
   All pairings meet WCAG AA — see DESIGN_SYSTEM.md §10.
   ============================================================ */

/* ── Additional tokens ──────────────────────────────────────── */
:root{
  --fs-z-base:1; --fs-z-sticky:100; --fs-z-drawer:200; --fs-z-modal:300;
  --fs-z-popover:400; --fs-z-toast:500; --fs-z-tooltip:600;
  --fs-scrim: rgba(11,37,66,0.42);
  --fs-field-h-sm:32px; --fs-field-h:40px; --fs-field-h-lg:48px;
}
:root[data-theme="dark"]{ --fs-scrim: rgba(0,0,0,0.62); }

/* ═══════════════════════════════════════════════════════════
   1 · FORM FIELDS
   Anatomy:  label (+required) → control → hint | error
   Sizes:    .fs-f--sm / default / .fs-f--lg
   States:   :hover :focus-visible [disabled] [readonly]
             .is-error .is-success .is-warn  (set aria-invalid too)
   ═══════════════════════════════════════════════════════════ */

.fs-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
/* Specificity note: freeside.css has a legacy `.fs-field label` (mono/uppercase)
   rule for the original inline-label pattern. This must out-rank it. */
.fs-field .fs-field__label, label.fs-field__label{
  font-family:var(--fs-sans); font-size:13px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--fs-ink); display:flex; align-items:center; gap:6px; }
/* Required is marked in TEXT, never colour alone (a11y). */
.fs-field__req{ font-family:var(--fs-mono); font-size:10px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; color:var(--fs-ink3); }
.fs-field__optional{ font-size:12px; font-weight:400; color:var(--fs-ink3); }
.fs-field__hint{ font-size:12.5px; color:var(--fs-ink3); line-height:1.45; }
.fs-field__msg{ font-size:12.5px; display:flex; align-items:flex-start; gap:6px; line-height:1.45; }
.fs-field__msg svg{ width:14px; height:14px; flex:none; margin-top:1px; }
.fs-field__msg--error{ color:var(--fs-danger-text); }
.fs-field__msg--success{ color:var(--fs-forecast); }
.fs-field__msg--warn{ color:var(--fs-warn-text); }
.fs-field__count{ font-family:var(--fs-mono); font-size:11px; color:var(--fs-ink3); margin-left:auto; }
.fs-field__row{ display:flex; align-items:baseline; gap:8px; }

/* Base control — shared by input / select / textarea */
.fs-control{
  width:100%; min-width:0; height:var(--fs-field-h); padding:0 12px;
  font-family:var(--fs-sans); font-size:14px; color:var(--fs-ink);
  background:var(--fs-paper); border:1px solid var(--fs-line); border-radius:var(--fs-rad-md);
  box-shadow:inset 0 1px 2px rgba(11,37,66,0.05); outline:none;
  transition:border-color 120ms var(--fs-ease), box-shadow 120ms var(--fs-ease), background 120ms var(--fs-ease);
}
.fs-control::placeholder{ color:var(--fs-ink3); }
.fs-control:hover:not(:disabled):not([readonly]){ border-color:var(--fs-neutral); }
.fs-control:focus-visible{ border-color:var(--fs-net); box-shadow:var(--fs-focus); }
.fs-control:disabled{ background:var(--fs-surface); color:var(--fs-ink3); cursor:not-allowed; box-shadow:none; }
.fs-control[readonly]{ background:var(--fs-surface); box-shadow:none; }
.fs-control.is-error, .fs-control[aria-invalid="true"]{ border-color:var(--fs-danger); }
.fs-control.is-error:focus-visible, .fs-control[aria-invalid="true"]:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb,var(--fs-danger) 28%,transparent); }
.fs-control.is-success{ border-color:var(--fs-forecast); }
.fs-control.is-warn{ border-color:var(--fs-warn); }
.fs-f--sm .fs-control, .fs-control--sm{ height:var(--fs-field-h-sm); font-size:13px; padding:0 10px; }
.fs-f--lg .fs-control, .fs-control--lg{ height:var(--fs-field-h-lg); font-size:15px; padding:0 14px; }

textarea.fs-control{ height:auto; min-height:96px; padding:10px 12px; line-height:1.55; resize:vertical; }
.fs-control--mono{ font-family:var(--fs-mono); font-size:13px; }

/* Select — native, restyled with our own chevron */
select.fs-control{
  appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646E7A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
select.fs-control[multiple]{ height:auto; padding:8px; background-image:none; }
:root[data-theme="dark"] select.fs-control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238593A5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Input group — icon / prefix / suffix / attached button */
.fs-inputgroup{ position:relative; display:flex; align-items:stretch; width:100%; }
.fs-inputgroup .fs-control{ border-radius:var(--fs-rad-md); }
.fs-inputgroup--icon .fs-control{ padding-left:36px; }
.fs-inputgroup--icon-r .fs-control{ padding-right:36px; }
.fs-inputgroup__icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--fs-ink3); pointer-events:none; }
.fs-inputgroup__icon--r{ left:auto; right:11px; }
.fs-inputgroup__btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:0; background:transparent; border-radius:var(--fs-rad-sm);
  color:var(--fs-ink3); cursor:pointer; display:grid; place-items:center; }
.fs-inputgroup__btn:hover{ background:var(--fs-surface); color:var(--fs-ink); }
.fs-inputgroup__btn svg{ width:15px; height:15px; }
.fs-addon{ display:inline-flex; align-items:center; padding:0 12px; font-size:13px; color:var(--fs-ink2);
  background:var(--fs-surface); border:1px solid var(--fs-line); }
.fs-inputgroup--attached .fs-addon:first-child{ border-radius:var(--fs-rad-md) 0 0 var(--fs-rad-md); border-right:0; }
.fs-inputgroup--attached .fs-addon:last-child{ border-radius:0 var(--fs-rad-md) var(--fs-rad-md) 0; border-left:0; }
.fs-inputgroup--attached .fs-control:not(:first-child){ border-top-left-radius:0; border-bottom-left-radius:0; }
.fs-inputgroup--attached .fs-control:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; }

/* Search field (EA pill lineage) */
.fs-search .fs-control{ border-radius:var(--fs-rad-pill); background:var(--fs-surface); border-color:transparent; padding-left:38px; }
.fs-search .fs-control:focus-visible{ background:var(--fs-paper); border-color:var(--fs-net); }

/* Number stepper */
.fs-stepper{ display:inline-flex; align-items:stretch; border:1px solid var(--fs-line);
  border-radius:var(--fs-rad-md); overflow:hidden; background:var(--fs-paper); }
.fs-stepper button{ width:34px; border:0; background:transparent; color:var(--fs-ink2); cursor:pointer;
  display:grid; place-items:center; }
.fs-stepper button:hover{ background:var(--fs-surface); color:var(--fs-ink); }
.fs-stepper button svg{ width:15px; height:15px; }
.fs-stepper input{ width:64px; text-align:center; border:0; border-left:1px solid var(--fs-line);
  border-right:1px solid var(--fs-line); background:transparent; font-family:var(--fs-mono);
  font-size:14px; color:var(--fs-ink); outline:none; -moz-appearance:textfield; }
.fs-stepper input::-webkit-outer-spin-button,.fs-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Checkbox & radio — custom control, native input kept for a11y */
.fs-check{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:14px; color:var(--fs-ink2); }
.fs-check input{ appearance:none; width:18px; height:18px; flex:none; margin:1px 0 0;
  border:1.5px solid var(--fs-neutral); background:var(--fs-paper); border-radius:5px;
  cursor:pointer; display:grid; place-content:center; transition:all 120ms var(--fs-ease); }
.fs-check input[type="radio"]{ border-radius:50%; }
.fs-check input::before{ content:""; width:10px; height:10px; transform:scale(0);
  transition:transform 120ms var(--fs-ease); background:var(--fs-on-primary);
  clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,38% 70%); }
.fs-check input[type="radio"]::before{ border-radius:50%; clip-path:none; width:8px; height:8px; }
.fs-check input:checked{ background:var(--fs-net); border-color:var(--fs-net); }
.fs-check input:checked::before{ transform:scale(1); }
.fs-check input:indeterminate{ background:var(--fs-net); border-color:var(--fs-net); }
.fs-check input:indeterminate::before{ transform:scale(1); clip-path:none; width:10px; height:2px; }
.fs-check input:focus-visible{ outline:3px solid var(--fs-net); outline-offset:2px; }
.fs-check input:disabled{ background:var(--fs-surface); border-color:var(--fs-line); cursor:not-allowed; }
.fs-check__text b{ display:block; color:var(--fs-ink); font-weight:600; font-size:14px; }
.fs-check__text span{ display:block; color:var(--fs-ink3); font-size:12.5px; line-height:1.45; }
/* Boxed variant — a selectable card */
.fs-check--boxed{ padding:12px 14px; border:1px solid var(--fs-line); border-radius:var(--fs-rad-md);
  background:var(--fs-paper); transition:all 120ms var(--fs-ease); }
.fs-check--boxed:hover{ border-color:var(--fs-net); }
.fs-check--boxed:has(input:checked){ border-color:var(--fs-net); background:var(--fs-net-soft); }

/* Switch */
.fs-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--fs-ink2); }
.fs-switch input{ appearance:none; width:40px; height:22px; border-radius:999px; background:var(--fs-neutral);
  position:relative; cursor:pointer; transition:background 140ms var(--fs-ease); flex:none; }
.fs-switch input::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(11,37,66,.35);
  transition:transform 140ms var(--fs-ease); }
.fs-switch input:checked{ background:var(--fs-net); }
.fs-switch input:checked::after{ transform:translateX(18px); }
.fs-switch input:focus-visible{ outline:3px solid var(--fs-net); outline-offset:2px; }
.fs-switch input:disabled{ opacity:.5; cursor:not-allowed; }

/* Segmented control */
.fs-segmented{ display:inline-flex; padding:3px; gap:2px; background:var(--fs-surface);
  border-radius:var(--fs-rad-md); border:1px solid var(--fs-line); }
.fs-segmented button{ border:0; background:transparent; padding:6px 14px; border-radius:7px;
  font-family:var(--fs-sans); font-size:13px; font-weight:500; color:var(--fs-ink2); cursor:pointer;
  transition:all 120ms var(--fs-ease); }
.fs-segmented button:hover{ color:var(--fs-ink); }
.fs-segmented button[aria-pressed="true"], .fs-segmented button.is-active{
  background:var(--fs-paper); color:var(--fs-ink); font-weight:600; box-shadow:var(--fs-sh-xs); }

/* Range slider */
.fs-range{ width:100%; appearance:none; height:20px; background:transparent; cursor:pointer; }
.fs-range::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background:var(--fs-surface);
  box-shadow:var(--fs-sh-inset); }
.fs-range::-webkit-slider-thumb{ appearance:none; width:18px; height:18px; margin-top:-6px; border-radius:50%;
  background:var(--fs-net); border:2px solid var(--fs-paper); box-shadow:0 1px 4px rgba(11,37,66,.35); }
.fs-range::-moz-range-track{ height:6px; border-radius:999px; background:var(--fs-surface); }
.fs-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--fs-net);
  border:2px solid var(--fs-paper); }
.fs-range:focus-visible{ outline:3px solid var(--fs-net); outline-offset:4px; border-radius:999px; }

/* Token / tag input */
.fs-tokens{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:var(--fs-field-h);
  padding:5px 8px; background:var(--fs-paper); border:1px solid var(--fs-line);
  border-radius:var(--fs-rad-md); box-shadow:inset 0 1px 2px rgba(11,37,66,.05); }
.fs-tokens:focus-within{ border-color:var(--fs-net); box-shadow:var(--fs-focus); }
.fs-tokens input{ flex:1; min-width:80px; border:0; outline:none; background:transparent;
  font-family:var(--fs-sans); font-size:14px; color:var(--fs-ink); height:26px; }
.fs-token{ display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 10px; border-radius:var(--fs-rad-pill);
  background:var(--fs-net-soft); color:var(--fs-net-ink); font-size:12.5px; font-weight:500; }
.fs-token button{ border:0; background:transparent; color:inherit; cursor:pointer; padding:0;
  width:16px; height:16px; display:grid; place-items:center; border-radius:50%; opacity:.75; }
.fs-token button:hover{ opacity:1; background:rgba(11,37,66,.12); }
.fs-token button svg{ width:11px; height:11px; }

/* File upload / dropzone */
.fs-dropzone{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 20px;
  text-align:center; border:1.5px dashed var(--fs-neutral); border-radius:var(--fs-rad-lg);
  background:var(--fs-surface); color:var(--fs-ink2); transition:all 140ms var(--fs-ease); }
.fs-dropzone:hover, .fs-dropzone.is-dragover{ border-color:var(--fs-net); background:var(--fs-net-soft); }
.fs-dropzone svg{ width:26px; height:26px; color:var(--fs-ink3); }
.fs-dropzone b{ color:var(--fs-ink); font-weight:600; font-size:14px; }
.fs-dropzone small{ color:var(--fs-ink3); font-size:12.5px; }
.fs-file{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--fs-line);
  border-radius:var(--fs-rad-md); background:var(--fs-paper); font-size:13.5px; }
.fs-file svg{ width:16px; height:16px; color:var(--fs-ink3); flex:none; }
.fs-file .nm{ flex:1; color:var(--fs-ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-file .sz{ font-family:var(--fs-mono); font-size:11px; color:var(--fs-ink3); }

/* Fieldset */
.fs-fieldset{ border:1px solid var(--fs-line); border-radius:var(--fs-rad-lg); padding:18px 20px; margin:0; }
.fs-fieldset legend{ font-size:13px; font-weight:600; color:var(--fs-ink); padding:0 8px; }
.fs-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.fs-form-actions{ display:flex; gap:10px; flex-wrap:wrap; padding-top:16px; margin-top:4px;
  border-top:1px solid var(--fs-line); }

/* ═══════════════════════════════════════════════════════════
   2 · BUTTONS & ACTIONS   (core variants live in freeside.css)
   ═══════════════════════════════════════════════════════════ */
.fs-btn--subtle{ background:var(--fs-surface); color:var(--fs-ink); border-color:transparent; }
.fs-btn--subtle:hover{ background:var(--fs-net-soft); color:var(--fs-net-ink); }
.fs-btn--link{ background:transparent; border-color:transparent; color:var(--fs-net); padding:0 4px; height:auto; box-shadow:none; }
.fs-btn--link:hover{ text-decoration:underline; transform:none; }
.fs-btn--lg{ height:48px; padding:0 26px; font-size:14px; }
.fs-btn--block{ width:100%; justify-content:center; }
.fs-btn--icon{ width:40px; padding:0; justify-content:center; }
.fs-btn--icon.fs-btn--sm{ width:32px; }
.fs-btn:disabled, .fs-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.fs-btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.fs-btn.is-loading::after{ content:""; position:absolute; inset:0; margin:auto; width:15px; height:15px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  color:var(--fs-on-primary); animation:fs-spin .7s linear infinite; }
@keyframes fs-spin{ to{ transform:rotate(360deg); } }

.fs-btngroup{ display:inline-flex; }
.fs-btngroup .fs-btn{ border-radius:0; border:1px solid var(--fs-line); margin-left:-1px; background:var(--fs-paper); color:var(--fs-ink); box-shadow:none; }
.fs-btngroup .fs-btn:first-child{ border-radius:var(--fs-rad-md) 0 0 var(--fs-rad-md); margin-left:0; }
.fs-btngroup .fs-btn:last-child{ border-radius:0 var(--fs-rad-md) var(--fs-rad-md) 0; }
.fs-btngroup .fs-btn:hover{ transform:none; background:var(--fs-surface); z-index:1; }
.fs-btngroup .fs-btn[aria-pressed="true"]{ background:var(--fs-net-soft); color:var(--fs-net-ink); border-color:var(--fs-net); z-index:2; }

.fs-toolbar{ display:flex; align-items:center; gap:6px; padding:6px; background:var(--fs-paper);
  border:1px solid var(--fs-line); border-radius:var(--fs-rad-md); box-shadow:var(--fs-sh-xs); }
.fs-toolbar__sep{ width:1px; align-self:stretch; background:var(--fs-line); margin:2px 4px; }
/* Icon-only control — ALWAYS give it an aria-label */
.fs-iconbtn{ width:34px; height:34px; min-width:24px; min-height:24px; border:0; background:transparent;
  border-radius:var(--fs-rad-md); color:var(--fs-ink2); cursor:pointer; display:grid; place-items:center;
  transition:all 120ms var(--fs-ease); }
.fs-iconbtn:hover{ background:var(--fs-surface); color:var(--fs-ink); }
.fs-iconbtn[aria-pressed="true"]{ background:var(--fs-net-soft); color:var(--fs-net-ink); }
.fs-iconbtn svg{ width:18px; height:18px; }

/* ═══════════════════════════════════════════════════════════
   3 · NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.fs-skip{ position:absolute; left:8px; top:8px; z-index:var(--fs-z-tooltip); }
/* Navigation links are affordances, not prose links — no underline until hover. */
.fs-sidenav a, .fs-crumbs a, .fs-tabs a, .fs-channel, .fs-listrow a{ text-decoration:none; }
.fs-crumbs a:hover{ text-decoration:underline; }

/* Tabs — underline (default) and pill */
.fs-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--fs-line); overflow-x:auto; }
.fs-tabs button, .fs-tabs a{ position:relative; border:0; background:transparent; padding:11px 16px;
  font-family:var(--fs-sans); font-size:14px; font-weight:500; color:var(--fs-ink2); cursor:pointer;
  white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.fs-tabs svg{ width:16px; height:16px; }
.fs-tabs button:hover, .fs-tabs a:hover{ color:var(--fs-ink); }
.fs-tabs [aria-selected="true"], .fs-tabs .is-active{ color:var(--fs-net); font-weight:600; }
.fs-tabs [aria-selected="true"]::after, .fs-tabs .is-active::after{ content:""; position:absolute;
  left:8px; right:8px; bottom:-1px; height:2px; background:var(--fs-net); border-radius:2px 2px 0 0; }
.fs-tabs--pill{ border-bottom:0; gap:6px; }
.fs-tabs--pill button, .fs-tabs--pill a{ border-radius:var(--fs-rad-pill); padding:7px 15px; }
.fs-tabs--pill [aria-selected="true"]{ background:var(--fs-net); color:var(--fs-on-primary); }
.fs-tabs--pill [aria-selected="true"]::after{ display:none; }

/* Breadcrumbs */
.fs-crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-family:var(--fs-mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--fs-ink3); }
.fs-crumbs a{ color:var(--fs-ink3); } .fs-crumbs a:hover{ color:var(--fs-net); }
.fs-crumbs [aria-current="page"]{ color:var(--fs-ink); font-weight:600; }
.fs-crumbs__sep{ color:var(--fs-neutral); }

/* Sidebar nav + collapsed rail */
.fs-sidenav{ display:flex; flex-direction:column; gap:2px; padding:12px; min-width:210px; }
.fs-sidenav__group{ font-family:var(--fs-mono); font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--fs-ink3); padding:14px 10px 6px; }
.fs-sidenav a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--fs-rad-md);
  color:var(--fs-ink2); font-size:14px; font-weight:500; transition:all 120ms var(--fs-ease); }
.fs-sidenav a:hover{ background:var(--fs-surface); color:var(--fs-ink); }
.fs-sidenav a[aria-current="page"], .fs-sidenav a.is-active{ background:var(--fs-net-soft);
  color:var(--fs-net-ink); font-weight:600; }
.fs-sidenav svg{ width:18px; height:18px; flex:none; }
.fs-sidenav__badge{ margin-left:auto; }
.fs-sidenav--rail{ min-width:0; align-items:center; }
.fs-sidenav--rail a{ width:40px; height:40px; padding:0; justify-content:center; }
.fs-sidenav--rail a span{ display:none; }

/* Dropdown / context menu */
.fs-menu{ min-width:200px; padding:6px; background:var(--fs-paper); border:1px solid var(--fs-line);
  border-radius:var(--fs-rad-md); box-shadow:var(--fs-sh-pop); z-index:var(--fs-z-popover); }
.fs-menu__label{ font-family:var(--fs-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:var(--fs-ink3); padding:8px 10px 4px; }
.fs-menu__item{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0;
  background:transparent; border-radius:var(--fs-rad-sm); font-family:var(--fs-sans); font-size:13.5px;
  color:var(--fs-ink2); cursor:pointer; text-align:left; }
.fs-menu__item:hover{ background:var(--fs-surface); color:var(--fs-ink); }
.fs-menu__item svg{ width:16px; height:16px; color:var(--fs-ink3); flex:none; }
.fs-menu__item:hover svg{ color:var(--fs-ink2); }
.fs-menu__item--danger{ color:var(--fs-danger-text); } .fs-menu__item--danger svg{ color:currentColor; }
.fs-menu__item--danger:hover{ background:var(--fs-danger-soft); color:var(--fs-danger-ink); }
.fs-menu__item[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.fs-menu__kbd{ margin-left:auto; font-family:var(--fs-mono); font-size:10.5px; color:var(--fs-ink3); }
.fs-menu__sep{ height:1px; background:var(--fs-line); margin:5px 2px; }

/* Pagination */
.fs-pager{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fs-pager__info{ font-family:var(--fs-mono); font-size:11px; color:var(--fs-ink3); margin-right:auto; }
.fs-pg{ min-width:32px; height:32px; padding:0 9px; border:1px solid var(--fs-line); background:transparent;
  border-radius:var(--fs-rad-sm); font-family:var(--fs-mono); font-size:12px; color:var(--fs-ink2); cursor:pointer; }
.fs-pg:hover:not(:disabled){ border-color:var(--fs-net); color:var(--fs-net); }
.fs-pg[aria-current="page"]{ background:var(--fs-net); color:var(--fs-on-primary); border-color:var(--fs-net); font-weight:600; }
.fs-pg:disabled{ opacity:.4; cursor:not-allowed; }

/* Stepper / wizard */
.fs-steps{ display:flex; align-items:flex-start; gap:0; }
.fs-steps__item{ display:flex; align-items:flex-start; gap:10px; flex:1; position:relative; padding-right:12px; }
.fs-steps__item:not(:last-child)::after{ content:""; position:absolute; left:32px; right:8px; top:14px;
  height:2px; background:var(--fs-line); }
.fs-steps__n{ width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--fs-mono); font-size:12px; font-weight:600; background:var(--fs-surface);
  color:var(--fs-ink3); border:1px solid var(--fs-line); z-index:1; }
.fs-steps__item.is-done .fs-steps__n{ background:var(--fs-forecast); color:#fff; border-color:var(--fs-forecast); }
.fs-steps__item.is-current .fs-steps__n{ background:var(--fs-net); color:var(--fs-on-primary); border-color:var(--fs-net); }
.fs-steps__t{ font-size:13px; font-weight:600; color:var(--fs-ink); padding-top:4px; }
.fs-steps__d{ font-size:12px; color:var(--fs-ink3); }

/* ═══════════════════════════════════════════════════════════
   4 · STATUS, FEEDBACK & OVERLAYS
   Status is NEVER colour alone — always icon + text too.
   ═══════════════════════════════════════════════════════════ */

/* Alert / banner */
.fs-alert{ display:flex; gap:12px; padding:14px 16px; border-radius:var(--fs-rad-md);
  border:1px solid transparent; font-size:14px; }
.fs-alert__icon{ width:18px; height:18px; flex:none; margin-top:1px; }
.fs-alert__body{ flex:1; min-width:0; }
.fs-alert__title{ font-weight:600; color:var(--fs-ink); margin-bottom:2px; }
.fs-alert__actions{ display:flex; gap:8px; margin-top:10px; }
.fs-alert--info{ background:var(--fs-net-soft); border-color:color-mix(in srgb,var(--fs-net) 30%,transparent); color:var(--fs-net-ink); }
.fs-alert--success{ background:var(--fs-forecast-soft); border-color:color-mix(in srgb,var(--fs-forecast) 30%,transparent); color:var(--fs-forecast-ink); }
.fs-alert--warn{ background:var(--fs-warn-soft); border-color:color-mix(in srgb,var(--fs-warn) 35%,transparent); color:var(--fs-warn-ink); }
.fs-alert--danger{ background:var(--fs-danger-soft); border-color:color-mix(in srgb,var(--fs-danger) 30%,transparent); color:var(--fs-danger-ink); }
.fs-alert--agent{ background:var(--fs-agent-soft); border-color:color-mix(in srgb,var(--fs-agent) 35%,transparent); color:var(--fs-agent-ink); }
.fs-alert--info .fs-alert__title{ color:var(--fs-net-ink); }
.fs-alert--success .fs-alert__title{ color:var(--fs-forecast-ink); }
.fs-alert--warn .fs-alert__title{ color:var(--fs-warn-ink); }
.fs-alert--danger .fs-alert__title{ color:var(--fs-danger-ink); }
.fs-alert--agent .fs-alert__title{ color:var(--fs-agent-ink); }

/* Status box — a bordered state panel (health / run outcome) */
.fs-statusbox{ display:flex; gap:14px; padding:16px 18px; border-radius:var(--fs-rad-lg);
  background:var(--fs-paper); border:1px solid var(--fs-line); box-shadow:var(--fs-sh-card);
  border-left-width:3px; }
.fs-statusbox--ok{ border-left-color:var(--fs-forecast); }
.fs-statusbox--info{ border-left-color:var(--fs-net); }
.fs-statusbox--warn{ border-left-color:var(--fs-warn); }
.fs-statusbox--danger{ border-left-color:var(--fs-danger); }
.fs-statusbox--agent{ border-left-color:var(--fs-agent); }
.fs-statusbox__ic{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; }
.fs-statusbox__ic svg{ width:18px; height:18px; }
.fs-statusbox--ok .fs-statusbox__ic{ background:var(--fs-forecast-soft); color:var(--fs-forecast-ink); }
.fs-statusbox--info .fs-statusbox__ic{ background:var(--fs-net-soft); color:var(--fs-net-ink); }
.fs-statusbox--warn .fs-statusbox__ic{ background:var(--fs-warn-soft); color:var(--fs-warn-ink); }
.fs-statusbox--danger .fs-statusbox__ic{ background:var(--fs-danger-soft); color:var(--fs-danger-ink); }
.fs-statusbox--agent .fs-statusbox__ic{ background:var(--fs-agent-soft); color:var(--fs-agent-ink); }
.fs-statusbox__t{ font-weight:600; color:var(--fs-ink); font-size:14.5px; }
.fs-statusbox__d{ font-size:13px; color:var(--fs-ink2); margin-top:3px; line-height:1.5; }
.fs-statusbox__meta{ font-family:var(--fs-mono); font-size:11px; color:var(--fs-ink3); margin-top:8px; }

/* Toast */
.fs-toastwrap{ position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:10px;
  z-index:var(--fs-z-toast); max-width:380px; }
.fs-toast{ display:flex; gap:12px; padding:13px 15px; border-radius:var(--fs-rad-md);
  background:var(--fs-paper); border:1px solid var(--fs-line); box-shadow:var(--fs-sh-pop); font-size:13.5px; }
.fs-toast svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.fs-toast--ok svg{ color:var(--fs-forecast); } .fs-toast--danger svg{ color:var(--fs-danger); }
.fs-toast--info svg{ color:var(--fs-net); }
.fs-toast b{ display:block; color:var(--fs-ink); }

/* Tooltip (CSS-only; for rich content use a popover) */
.fs-tip{ position:relative; }
.fs-tip__bubble{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  padding:6px 10px; background:var(--fs-ink); color:var(--fs-canvas); font-size:12px; border-radius:var(--fs-rad-sm);
  white-space:nowrap; box-shadow:var(--fs-sh-pop); z-index:var(--fs-z-tooltip); pointer-events:none;
  opacity:0; transition:opacity 120ms var(--fs-ease); }
.fs-tip:hover .fs-tip__bubble, .fs-tip:focus-within .fs-tip__bubble{ opacity:1; }

/* Modal + drawer */
.fs-scrim{ position:fixed; inset:0; background:var(--fs-scrim); z-index:var(--fs-z-modal); }
.fs-modal{ position:relative; width:min(560px,calc(100vw - 40px)); margin:8vh auto; background:var(--fs-paper);
  border-radius:var(--fs-rad-xl); box-shadow:var(--fs-sh-hero); overflow:hidden; }
.fs-modal__head{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px 0; }
.fs-modal__title{ font-size:18px; font-weight:600; color:var(--fs-ink); letter-spacing:-.3px; flex:1; }
.fs-modal__body{ padding:14px 22px; font-size:14px; color:var(--fs-ink2); line-height:1.6; }
.fs-modal__foot{ display:flex; gap:10px; justify-content:flex-end; padding:16px 22px;
  border-top:1px solid var(--fs-line); background:var(--fs-surface); }
/* Static variant — for embedding a dialog in docs/previews (never a real overlay).
   Opts out of the mobile bottom-sheet behaviour. */
.fs-modal--static{ position:static; margin:0; width:min(560px,100%); max-height:none; }
.fs-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(440px,100vw); background:var(--fs-paper);
  box-shadow:var(--fs-sh-hero); z-index:var(--fs-z-drawer); display:flex; flex-direction:column; }
.fs-drawer__head{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--fs-line); }
.fs-drawer__body{ flex:1; overflow:auto; padding:20px; }

/* Progress, meter, skeleton, spinner */
.fs-progress{ height:8px; border-radius:999px; background:var(--fs-surface); overflow:hidden; box-shadow:var(--fs-sh-inset); }
.fs-progress>i{ display:block; height:100%; border-radius:999px; background:var(--fs-net); transition:width 240ms var(--fs-ease); }
.fs-progress--ok>i{ background:var(--fs-forecast); } .fs-progress--warn>i{ background:var(--fs-warn); }
.fs-progress--danger>i{ background:var(--fs-danger); }
.fs-progress--indeterminate>i{ width:35% !important; animation:fs-indet 1.3s var(--fs-ease) infinite; }
@keyframes fs-indet{ 0%{ margin-left:-35%; } 100%{ margin-left:100%; } }
.fs-skeleton{ background:linear-gradient(90deg,var(--fs-surface) 25%,var(--fs-line2) 37%,var(--fs-surface) 63%);
  background-size:400% 100%; animation:fs-shimmer 1.4s ease infinite; border-radius:var(--fs-rad-sm); height:12px; }
@keyframes fs-shimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.fs-spinner{ width:18px; height:18px; border:2px solid var(--fs-line); border-top-color:var(--fs-net);
  border-radius:50%; animation:fs-spin .7s linear infinite; display:inline-block; }

/* Empty state */
.fs-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:48px 24px; color:var(--fs-ink2); }
.fs-empty__ic{ width:46px; height:46px; border-radius:50%; background:var(--fs-surface);
  display:grid; place-items:center; color:var(--fs-ink3); }
.fs-empty__ic svg{ width:22px; height:22px; }
.fs-empty h4{ margin:4px 0 0; font-size:16px; font-weight:600; color:var(--fs-ink); }
.fs-empty p{ margin:0; font-size:13.5px; color:var(--fs-ink3); max-width:42ch; }

/* ═══════════════════════════════════════════════════════════
   5 · DATA DISPLAY
   ═══════════════════════════════════════════════════════════ */
.fs-table-wrap{ overflow-x:auto; border-radius:var(--fs-rad-lg); border:1px solid var(--fs-line);
  background:var(--fs-paper); box-shadow:var(--fs-sh-card); }
.fs-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.fs-table caption{ text-align:left; padding:14px 16px; font-size:14px; font-weight:600; color:var(--fs-ink); }
.fs-table th{ text-align:left; font-family:var(--fs-mono); font-size:10.5px; font-weight:600; letter-spacing:.8px;
  text-transform:uppercase; color:var(--fs-ink3); background:var(--fs-surface); padding:10px 14px;
  border-bottom:1px solid var(--fs-line); white-space:nowrap; }
.fs-table td{ padding:11px 14px; border-bottom:1px solid var(--fs-line2); color:var(--fs-ink2); vertical-align:middle; }
.fs-table tbody tr:last-child td{ border-bottom:0; }
.fs-table tbody tr:hover{ background:var(--fs-line2); }
.fs-table--zebra tbody tr:nth-child(even){ background:color-mix(in srgb,var(--fs-surface) 45%,transparent); }
.fs-table--dense td{ padding:7px 12px; } .fs-table--dense th{ padding:7px 12px; }
.fs-table__num{ text-align:right; font-family:var(--fs-mono); font-feature-settings:"tnum"; color:var(--fs-ink); }
.fs-table__sort{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0;
  font:inherit; color:inherit; cursor:pointer; text-transform:inherit; letter-spacing:inherit; }
.fs-table__sort svg{ width:12px; height:12px; opacity:.5; }
.fs-table__sort[aria-sort]:not([aria-sort="none"]){ color:var(--fs-net); }
.fs-table__sort[aria-sort]:not([aria-sort="none"]) svg{ opacity:1; }
.fs-table th.is-sticky, .fs-table--sticky thead th{ position:sticky; top:0; z-index:2; }
.fs-table tr[aria-selected="true"]{ background:var(--fs-net-soft); }

/* Definition / key-value list */
.fs-kv{ display:grid; grid-template-columns:auto 1fr; gap:10px 20px; margin:0; font-size:13.5px; }
.fs-kv dt{ font-family:var(--fs-mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--fs-ink3); }
.fs-kv dd{ margin:0; color:var(--fs-ink); }

/* Avatars */
.fs-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--fs-surface);
  display:inline-grid; place-items:center; font-size:13px; font-weight:600; color:var(--fs-ink2);
  border:1px solid var(--fs-line); flex:none; }
.fs-avatar--sm{ width:26px; height:26px; font-size:11px; }
.fs-avatar--lg{ width:56px; height:56px; font-size:18px; }
.fs-avatars{ display:flex; } .fs-avatars .fs-avatar{ margin-left:-8px; border:2px solid var(--fs-paper); }
.fs-avatars .fs-avatar:first-child{ margin-left:0; }

/* Accordion */
.fs-accordion{ border:1px solid var(--fs-line); border-radius:var(--fs-rad-lg); overflow:hidden; background:var(--fs-paper); }
.fs-accordion details{ border-bottom:1px solid var(--fs-line); }
.fs-accordion details:last-child{ border-bottom:0; }
.fs-accordion summary{ display:flex; align-items:center; gap:10px; padding:13px 16px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--fs-ink); list-style:none; }
.fs-accordion summary::-webkit-details-marker{ display:none; }
.fs-accordion summary::after{ content:""; margin-left:auto; width:9px; height:9px; border-right:2px solid var(--fs-ink3);
  border-bottom:2px solid var(--fs-ink3); transform:rotate(45deg); transition:transform 140ms var(--fs-ease); }
.fs-accordion details[open] summary::after{ transform:rotate(-135deg); }
.fs-accordion__body{ padding:0 16px 16px; font-size:13.5px; color:var(--fs-ink2); line-height:1.6; }

/* Timeline / audit trail */
.fs-timeline{ display:flex; flex-direction:column; position:relative; padding-left:6px; }
.fs-timeline::before{ content:""; position:absolute; left:12px; top:10px; bottom:10px; width:1px; background:var(--fs-line); }
.fs-timeline__item{ display:flex; gap:14px; padding:10px 0; position:relative; }
.fs-timeline__dot{ width:13px; height:13px; border-radius:50%; background:var(--fs-paper);
  border:2px solid var(--fs-neutral); flex:none; margin-top:3px; z-index:1; }
.fs-timeline__item--net .fs-timeline__dot{ border-color:var(--fs-net); }
.fs-timeline__item--agent .fs-timeline__dot{ border-color:var(--fs-agent); }
.fs-timeline__item--ok .fs-timeline__dot{ border-color:var(--fs-forecast); }
.fs-timeline__t{ font-size:13.5px; color:var(--fs-ink2); }
.fs-timeline__t b{ color:var(--fs-ink); font-weight:600; }
.fs-timeline__time{ font-family:var(--fs-mono); font-size:10.5px; color:var(--fs-ink3); margin-top:2px; letter-spacing:.3px; }

/* Meta / list row */
.fs-listrow{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--fs-line2); }
.fs-listrow:last-child{ border-bottom:0; }
.fs-listrow:hover{ background:var(--fs-line2); }
.fs-listrow__main{ flex:1; min-width:0; }
.fs-listrow__t{ font-weight:600; color:var(--fs-ink); font-size:14px; }
.fs-listrow__d{ font-family:var(--fs-mono); font-size:11px; color:var(--fs-ink3); }

/* Icon sizing helper */
.fs-icon{ width:18px; height:18px; flex:none; }
.fs-icon--sm{ width:15px; height:15px; } .fs-icon--lg{ width:22px; height:22px; }
.fs-icon--xl{ width:28px; height:28px; }

/* ═══════════════════════════════════════════════════════════
   6 · RESPONSIVE & MOBILE WEB
   Freeside is a cockpit, but it gets read on a phone between
   meetings. Mobile-first: build the small layout, then enhance.
   Rules: DESIGN_SYSTEM.md §13.
   Breakpoints — sm 480 · md 768 · lg 1024 · xl 1280.
   ═══════════════════════════════════════════════════════════ */

/* Base hygiene that only bites on mobile */
html{ -webkit-text-size-adjust:100%; }           /* don't let iOS re-flow our type */
body{ overflow-x:hidden; overscroll-behavior-y:contain; }
img,svg,video,canvas,table{ max-width:100%; }
.fs-app{ min-height:100dvh; }                     /* dvh, never vh — mobile chrome moves */
/* Tap, don't hover: give every control a real pressed state */
@media (hover:none){
  .fs-btn:active, .fs-iconbtn:active, .fs-chip:active, .fs-menu__item:active,
  .fs-listrow:active, .fs-channel:active{ filter:brightness(.94); transform:none; }
  .fs-card--hover:hover{ transform:none; box-shadow:var(--fs-sh-card); }
  .fs-tip__bubble{ display:none; }                /* hover tooltips don't exist on touch */
}

/* Touch targets: 44px on coarse pointers (WCAG 2.5.8 floor is 24 — 44 is the usable size) */
@media (pointer:coarse){
  .fs-btn{ min-height:44px; }
  .fs-btn--sm{ min-height:38px; }
  .fs-iconbtn, .fs-pg, .fs-stepper button{ min-width:44px; min-height:44px; }
  .fs-check input, .fs-switch input{ transform:scale(1.1); transform-origin:left center; }
  .fs-check, .fs-switch{ padding:4px 0; }         /* hit-slop, not bigger boxes */
  .fs-menu__item{ padding:12px 12px; }
  .fs-tabs button, .fs-tabs a{ padding:14px 16px; }
}

/* Inputs: 16px minimum on mobile or iOS zooms the whole page on focus. */
@media (max-width:768px){
  .fs-control, .fs-tokens input{ font-size:16px; }
  .fs-f--sm .fs-control, .fs-control--sm{ font-size:16px; height:var(--fs-field-h); }
}

/* Layout collapse */
@media (max-width:768px){
  .fs-form-grid{ grid-template-columns:1fr; gap:16px; }
  .fs-form-actions{ flex-direction:column-reverse; }
  .fs-form-actions .fs-btn{ width:100%; justify-content:center; }
  .fs-inputgroup--attached{ flex-wrap:wrap; }
  .fs-steps{ flex-direction:column; gap:14px; }
  .fs-steps__item::after{ display:none; }
  .fs-fieldset{ padding:14px; }
  .fs-figure{ padding:14px; }
  .fs-figure__head{ flex-direction:column; }
  .fs-figure__tools{ margin-left:0; width:100%; }
}

/* Modal → bottom sheet; drawer → full width */
@media (max-width:600px){
  .fs-modal:not(.fs-modal--static){ margin:0; position:fixed; left:0; right:0; bottom:0; width:100%;
    border-radius:var(--fs-rad-xl) var(--fs-rad-xl) 0 0; max-height:88dvh; overflow:auto;
    padding-bottom:env(safe-area-inset-bottom); }
  .fs-modal__foot{ flex-direction:column-reverse; }
  .fs-modal__foot .fs-btn{ width:100%; justify-content:center; }
  .fs-drawer{ width:100%; }
  .fs-toastwrap{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); max-width:none; }
}

/* Tables: pick ONE — scroll with an affordance, or stack into cards.
   .fs-table-wrap already scrolls; add .fs-scroll-hint for the cue. */
.fs-scroll-hint{ position:relative; }
.fs-scroll-hint::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:26px;
  background:linear-gradient(to right,transparent,var(--fs-paper)); pointer-events:none; }
@media (max-width:768px){
  /* Card table: <td data-label="Header"> becomes a labelled row */
  .fs-table--cards thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .fs-table--cards tr{ display:block; padding:12px 14px; border-bottom:1px solid var(--fs-line); }
  .fs-table--cards td{ display:flex; gap:12px; padding:5px 0; border:0; align-items:baseline; }
  .fs-table--cards td::before{ content:attr(data-label); flex:none; width:38%;
    font-family:var(--fs-mono); font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--fs-ink3); }
  .fs-table--cards .fs-table__num{ text-align:left; }
}

/* Primary nav on small screens: off-canvas rail, or a bottom bar (≤5 items) */
@media (max-width:900px){ .fs-sidenav--offcanvas{ display:none; } .fs-sidenav--offcanvas.is-open{ display:flex; } }
.fs-bottombar{ position:fixed; left:0; right:0; bottom:0; z-index:var(--fs-z-sticky);
  display:none; background:var(--fs-paper); border-top:1px solid var(--fs-line);
  box-shadow:0 -2px 10px rgba(11,37,66,.08); padding-bottom:env(safe-area-inset-bottom); }
.fs-bottombar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px; min-height:52px; color:var(--fs-ink3); font-size:10.5px; text-decoration:none; }
.fs-bottombar a svg{ width:21px; height:21px; }
.fs-bottombar a[aria-current="page"]{ color:var(--fs-net); font-weight:600; }
@media (max-width:768px){ .fs-bottombar{ display:flex; } .fs-has-bottombar{ padding-bottom:76px; } }
/* Sticky action bar — keeps the primary action reachable with one thumb */
.fs-actionbar{ position:sticky; bottom:0; display:flex; gap:10px; padding:12px;
  background:var(--fs-paper); border-top:1px solid var(--fs-line);
  padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.fs-actionbar .fs-btn{ flex:1; justify-content:center; }

/* Responsive utilities */
.fs-only-mobile{ display:none; }
@media (max-width:768px){
  .fs-only-mobile{ display:initial; }
  .fs-hide-mobile{ display:none !important; }
  .fs-stack-mobile{ flex-direction:column !important; align-items:stretch !important; }
  .fs-full-mobile{ width:100% !important; }
}
@media (min-width:769px){ .fs-only-desktop{ display:initial; } }
.fs-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.fs-scroll-x::-webkit-scrollbar{ height:6px; }
.fs-scroll-x::-webkit-scrollbar-thumb{ background:var(--fs-neutral); border-radius:3px; }

/* Landscape/short viewports: don't let a sheet eat the screen */
@media (max-height:520px){ .fs-modal{ max-height:96dvh; } }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }