/* ============================================================================
   Fidelen Product UI — component class layer.
   Component anatomy is R-050 APPROVED — v1.0 (DEC-01…DEC-08; R-041 §16
   delegates component mechanics downstream). Every COLOUR, TYPE SIZE, MOTION DURATION
   and ICON RULE below resolves to an R-041-locked token.
   Rules enforced here:
     · Orange fill always carries Deep Plum text/icon — white on Orange is
       prohibited for normal text (R-041 §8).
     · All-caps is never the hierarchy mechanism (R-041 §11).
     · Arabic letterspacing is zero (enforced globally in tokens/typography.css).
     · Status never relies on colour alone — every status class pairs tone with
       text, and adds a border so the boundary clears 3:1 (R-041 §9, §J).
   ========================================================================= */

/* ------------------------------- Button ---------------------------------- */
.fid-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6-sub);height:var(--control-h-md);padding:0 var(--control-pad-x);border:var(--border-w) solid transparent;border-radius:var(--radius-control);font:var(--type-ui-medium);cursor:pointer;white-space:nowrap;transition:var(--transition-control);text-decoration:none}
.fid-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--border-focus)}
.fid-btn--sm{height:var(--control-h-sm);padding:0 var(--space-8);font-size:var(--text-caption)}
.fid-btn--lg{height:var(--control-h-lg);padding:0 var(--space-16);font-size:var(--text-body)}
.fid-btn--block{width:100%}
.fid-btn--primary{background:var(--action-primary);color:var(--text-on-brand)}
.fid-btn--primary:hover{background:var(--action-primary-hover)}
.fid-btn--primary:active{background:var(--action-primary-active)}
.fid-btn--secondary{background:var(--surface-card);color:var(--text-default);border-color:var(--border-default)}
.fid-btn--secondary:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.fid-btn--secondary:active{background:var(--surface-active)}
.fid-btn--ghost{background:transparent;color:var(--text-default)}
.fid-btn--ghost:hover{background:var(--surface-hover)}
.fid-btn--ghost:active{background:var(--surface-active)}
/* Exception: Orange fill with Deep Plum text/icon. R-041 approved treatment. */
.fid-btn--exception{background:var(--action-exception);color:var(--text-on-orange)}
.fid-btn--exception:hover{background:var(--action-exception-hover)}
.fid-btn--exception:active{background:var(--action-exception-active)}
.fid-btn--critical{background:var(--surface-card);color:var(--sem-critical-text);border-color:var(--sem-critical)}
.fid-btn--critical:hover{background:var(--sem-critical-surface)}
.fid-btn[disabled],.fid-btn[aria-disabled="true"]{background:var(--surface-disabled);color:var(--text-disabled);border-color:var(--border-default);cursor:not-allowed}
.fid-btn__spinner{width:var(--icon-sm);height:var(--icon-sm);border:1.5px solid currentColor;border-top-color:transparent;border-radius:var(--radius-pill);animation:fid-spin 900ms linear infinite}
@keyframes fid-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fid-btn__spinner{animation:none;border-top-color:currentColor;opacity:.5}}

/* ----------------------------- Icon button -------------------------------- */
.fid-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-md);height:var(--control-h-md);border:var(--border-w) solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--icon-default);cursor:pointer;transition:var(--transition-control)}
.fid-iconbtn:hover{background:var(--surface-hover)}
.fid-iconbtn:active{background:var(--surface-active)}
.fid-iconbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--border-focus);color:var(--icon-active)}
.fid-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.fid-iconbtn--bordered{border-color:var(--border-default);background:var(--surface-card)}
.fid-iconbtn--on-shell{color:var(--icon-on-shell)}
.fid-iconbtn--on-shell:hover{background:var(--surface-shell-hover);color:var(--icon-on-dark)}
.fid-iconbtn[disabled]{color:var(--text-disabled);cursor:not-allowed;background:transparent}

/* -------------------------------- Icon ------------------------------------ */
/* R-041 §13: outline, 24px base grid, 1.75px stroke (1.5px at 16px where
   optical clarity requires), rounded caps and joins. Default colour is
   Fidelen Plum on light surfaces, White on dark, Focus Violet when active. */
.fid-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;line-height:0;color:var(--icon-default)}
.fid-icon svg{width:100%;height:100%;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.fid-icon--sm svg{stroke-width:var(--icon-stroke-small)}
.fid-icon--inherit{color:inherit}
.fid-icon--muted{color:var(--icon-muted)}
.fid-icon--active{color:var(--icon-active)}
.fid-icon--on-dark{color:var(--icon-on-dark)}

/* ------------------------------- Inputs ----------------------------------- */
.fid-input,.fid-select,.fid-textarea{width:100%;height:var(--control-h-md);padding:0 var(--space-12);background:var(--surface-card);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-control);color:var(--text-default);font:var(--type-ui);transition:var(--transition-control)}
.fid-textarea{height:auto;min-height:80px;padding:var(--space-8) var(--space-12);line-height:var(--leading-small);resize:vertical}
.fid-input::placeholder,.fid-textarea::placeholder{color:var(--text-muted)}
.fid-input:hover,.fid-select:hover,.fid-textarea:hover{border-color:var(--border-strong)}
.fid-input:focus,.fid-select:focus,.fid-textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.fid-input[disabled],.fid-select[disabled],.fid-textarea[disabled]{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
.fid-input--invalid,.fid-select--invalid,.fid-textarea--invalid{border-color:var(--sem-critical)}
.fid-input--sm{height:var(--control-h-sm);font-size:var(--text-caption)}
.fid-select{appearance:none;padding-inline-end:var(--space-32);background-image:linear-gradient(45deg,transparent 50%,var(--fid-plum) 50%),linear-gradient(135deg,var(--fid-plum) 50%,transparent 50%);background-position:calc(100% - 17px) 16px,calc(100% - 12px) 16px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
[dir="rtl"] .fid-select{background-position:17px 16px,12px 16px}

.fid-inputwrap{position:relative;display:flex;align-items:center}
.fid-inputwrap .fid-input{padding-inline-start:var(--space-40)}
.fid-inputwrap__icon{position:absolute;inset-inline-start:var(--space-12);color:var(--icon-default);pointer-events:none;display:flex}

/* ------------------------------ Form field -------------------------------- */
.fid-field{display:flex;flex-direction:column;gap:var(--space-6-sub)}
.fid-field__label{font:var(--type-label);color:var(--text-default);display:flex;gap:var(--space-4);align-items:center}
/* Required marker pairs the Orange glyph with an explicit text cue so the
   requirement never depends on colour alone. */
.fid-field__req{color:var(--sem-exception-text);font-weight:var(--weight-semibold)}
.fid-field__hint{font:var(--type-meta);color:var(--text-muted)}
.fid-field__error{display:flex;align-items:center;gap:var(--space-4);font:var(--type-meta);color:var(--sem-critical-text);font-weight:var(--weight-medium)}

/* ------------------------- Checkbox / Radio / Switch ---------------------- */
.fid-choice{display:inline-flex;align-items:center;gap:var(--space-8);font:var(--type-ui);color:var(--text-default);cursor:pointer;min-height:var(--hit-min)}
.fid-choice input{appearance:none;margin:0;width:16px;height:16px;flex:none;border:var(--border-w-strong) solid var(--border-strong);background:var(--surface-card);cursor:pointer;transition:var(--transition-control)}
.fid-choice--check input{border-radius:var(--radius-xs)}
.fid-choice--radio input{border-radius:var(--radius-pill)}
.fid-choice input:hover{border-color:var(--fid-plum-400)}
.fid-choice input:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.fid-choice--check input:checked{background:var(--action-primary);border-color:var(--action-primary);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5l3 3 6-6'/></svg>");background-size:100% 100%}
.fid-choice--radio input:checked{border-color:var(--action-primary);border-width:5px}
.fid-choice input[disabled]{background:var(--surface-disabled);border-color:var(--border-default);cursor:not-allowed}
.fid-choice input[disabled]+span{color:var(--text-disabled)}

.fid-switch{display:inline-flex;align-items:center;gap:var(--space-8);cursor:pointer;font:var(--type-ui);color:var(--text-default);min-height:var(--hit-min)}
.fid-switch__track{position:relative;width:34px;height:20px;flex:none;border-radius:var(--radius-pill);background:var(--fid-grey-400);transition:background-color var(--duration-fast) var(--ease-standard)}
.fid-switch__knob{position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:var(--radius-pill);background:var(--fid-white);box-shadow:var(--shadow-xs);transition:transform var(--duration-fast) var(--ease-standard)}
.fid-switch[data-on="true"] .fid-switch__track{background:var(--action-primary)}
.fid-switch[data-on="true"] .fid-switch__knob{transform:translateX(14px)}
[dir="rtl"] .fid-switch[data-on="true"] .fid-switch__knob{transform:translateX(-14px)}
.fid-switch[data-disabled="true"]{cursor:not-allowed}
.fid-switch[data-disabled="true"] .fid-switch__track{background:var(--fid-grey-300)}
.fid-switch[data-disabled="true"] span{color:var(--text-disabled)}

/* ------------------------------- Badge / Tag ------------------------------ */
/* Sentence case, 12px Caption, no tracking, no uppercase — all-caps is not the
   hierarchy mechanism (R-041 §11) and uppercase would letterspace Arabic. */
.fid-badge{display:inline-flex;align-items:center;gap:var(--space-6-sub);min-height:22px;padding:1px var(--space-8);border:var(--border-w) solid transparent;border-radius:var(--radius-sm);font:var(--type-label);white-space:nowrap}
.fid-badge__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none}
.fid-badge--draft{background:var(--status-draft-bg);color:var(--status-draft-fg);border-color:var(--status-draft-bd)}
.fid-badge--submitted{background:var(--status-submitted-bg);color:var(--status-submitted-fg);border-color:var(--status-submitted-bd)}
.fid-badge--underreview{background:var(--status-underreview-bg);color:var(--status-underreview-fg);border-color:var(--status-underreview-bd)}
.fid-badge--approved{background:var(--status-approved-bg);color:var(--status-approved-fg);border-color:var(--status-approved-bd)}
.fid-badge--rejected{background:var(--status-rejected-bg);color:var(--status-rejected-fg);border-color:var(--status-rejected-bd)}
.fid-badge--cancelled{background:var(--status-cancelled-bg);color:var(--status-cancelled-fg);border-color:var(--status-cancelled-bd)}
.fid-badge--completed{background:var(--status-completed-bg);color:var(--status-completed-fg);border-color:var(--status-completed-bd)}
.fid-badge--exception{background:var(--status-exception-bg);color:var(--status-exception-fg);border-color:var(--status-exception-bd)}
.fid-badge--warning{background:var(--status-warning-bg);color:var(--status-warning-fg);border-color:var(--status-warning-bd)}
/* Numeric count. Orange fill carries Deep Plum text per R-041 §8. */
.fid-badge--count{background:var(--action-exception);color:var(--text-on-orange);min-width:20px;min-height:20px;padding:0 var(--space-4);border-radius:var(--radius-pill);justify-content:center;font-weight:var(--weight-semibold)}

.fid-tag{display:inline-flex;align-items:center;gap:var(--space-6-sub);min-height:24px;padding:0 var(--space-8);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-muted);font:var(--type-meta)}
.fid-tag__x{display:flex;color:var(--icon-muted);cursor:pointer;border:0;background:none;padding:0}
.fid-tag__x:hover{color:var(--text-default)}

/* --------------------------------- Card ---------------------------------- */
.fid-card{background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-xs)}
.fid-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-12) var(--space-16)}
.fid-card__head--divided{border-bottom:var(--border-w) solid var(--border-subtle)}
.fid-card__title{font:var(--type-card-title);color:var(--text-heading)}
.fid-card__sub{font:var(--type-meta);color:var(--text-muted);margin-top:var(--space-2-sub)}
.fid-card__body{padding:var(--space-16)}
.fid-card__body--flush{padding:0}
.fid-card__foot{padding:var(--space-12) var(--space-16);border-top:var(--border-w) solid var(--border-subtle);background:var(--fid-grey-050);border-radius:0 0 var(--radius-card) var(--radius-card)}

/* ------------------------------- Metric tile ------------------------------ */
.fid-metric{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-16);background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-card)}
.fid-metric__label{font:var(--type-label);color:var(--text-muted)}
.fid-metric__value{font:var(--type-metric);color:var(--text-heading)}
.fid-metric__meta{display:flex;align-items:center;gap:var(--space-6-sub);font:var(--type-meta);color:var(--text-muted)}
/* Exception = human action required. Warning = advisory / threshold. Both pair
   the colour with an icon and a text figure, never colour alone. */
.fid-metric--exception .fid-metric__value{color:var(--sem-exception-text)}
.fid-metric--exception .fid-metric__meta{color:var(--sem-exception-text)}
.fid-metric--warning .fid-metric__value{color:var(--sem-warning-text)}
.fid-metric--warning .fid-metric__meta{color:var(--sem-warning-text)}

/* --------------------------------- Table --------------------------------- */
.fid-tablewrap{overflow:auto;border-radius:var(--radius-card)}
.fid-table{width:100%;border-collapse:separate;border-spacing:0;font:var(--type-ui)}
/* Sentence-case header, not uppercase (R-041 §11). */
.fid-table th{position:sticky;top:0;z-index:var(--z-sticky);text-align:start;padding:var(--space-8) var(--space-16);background:var(--fid-grey-050);border-bottom:var(--border-w) solid var(--border-default);font:var(--type-table-header);color:var(--text-muted);white-space:nowrap}
.fid-table td{padding:var(--space-8) var(--space-16);border-bottom:var(--border-w) solid var(--border-subtle);color:var(--text-default);vertical-align:middle;height:var(--row-h)}
.fid-table tbody tr{transition:background-color var(--duration-fast) var(--ease-standard)}
.fid-table tbody tr:hover{background:var(--fid-grey-050)}
.fid-table tbody tr[aria-selected="true"]{background:var(--surface-selected)}
.fid-table tbody tr:last-child td{border-bottom:0}
.fid-table--compact td{padding:var(--space-4) var(--space-16);height:var(--row-h-compact)}
/* Tabular figures for financial and comparable numeric columns (R-041 §11). */
.fid-table__num{text-align:end;font-variant-numeric:var(--numeric-figures)}
.fid-table__id{font-weight:var(--weight-medium);color:var(--text-brand)}
.fid-table__primary{font-weight:var(--weight-medium);color:var(--text-heading)}

/* ------------------------------ Key / value ------------------------------ */
.fid-kv{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:var(--space-12) var(--space-16);margin:0}
.fid-kv dt{font:var(--type-meta);color:var(--text-muted)}
.fid-kv dd{margin:0;color:var(--text-default);font-weight:var(--weight-medium)}
.fid-kv--stacked{grid-template-columns:1fr;gap:var(--space-2-sub)}

/* --------------------------------- Tabs ---------------------------------- */
.fid-tabs{display:flex;gap:var(--space-20);border-bottom:var(--border-w) solid var(--border-subtle)}
.fid-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--space-6-sub);padding:var(--space-12) 0;border:0;background:none;color:var(--text-muted);font:var(--type-ui-medium);cursor:pointer;transition:color var(--duration-fast) var(--ease-standard)}
.fid-tabs__tab:hover{color:var(--text-default)}
.fid-tabs__tab[aria-selected="true"]{color:var(--text-brand)}
.fid-tabs__tab[aria-selected="true"]::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--fid-plum)}
.fid-tabs__tab:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}

/* ------------------------------- Page header ----------------------------- */
.fid-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-16);padding:var(--space-20) var(--layout-page-pad-x) var(--space-16)}
.fid-pagehead__title{font:var(--type-page-title);color:var(--text-heading)}
.fid-pagehead__sub{margin-top:var(--space-4);font:var(--type-meta);color:var(--text-muted)}
.fid-pagehead__actions{display:flex;align-items:center;gap:var(--space-8)}

/* ------------------------------ Breadcrumbs ------------------------------ */
.fid-crumbs{display:flex;align-items:center;gap:var(--space-6-sub);font:var(--type-meta);color:var(--text-muted)}
.fid-crumbs a{color:var(--text-muted)}
.fid-crumbs a:hover{color:var(--text-brand);text-decoration:none}
.fid-crumbs__sep{color:var(--fid-grey-400)}
.fid-crumbs__current{color:var(--text-default);font-weight:var(--weight-medium)}

/* --------------------------------- Shell --------------------------------- */
/* Deep Plum is approved for global navigation, shell surfaces, authentication
   moments and selected high-level areas (R-041 §16). It must not dominate
   dense operational work — the working area stays White / Soft Neutral. */
.fid-sidebar{display:flex;flex-direction:column;width:var(--layout-sidebar-w);flex:none;background:var(--surface-shell);color:var(--text-on-shell)}
.fid-sidebar--collapsed{width:var(--layout-sidebar-collapsed-w)}
/* Wordmark renders at the minimum approved size; the master asset's own
   transparent padding satisfies the 1X clear-space rule (R-041 §6). */
.fid-sidebar__brand{display:flex;align-items:center;gap:var(--space-12);height:var(--layout-topbar-h);padding:0 var(--space-16);border-bottom:var(--border-w) solid var(--border-on-shell)}
.fid-sidebar__brand img{width:var(--logo-wordmark-min-render);height:auto;display:block}
.fid-sidebar--collapsed .fid-sidebar__brand{justify-content:center;padding:0 var(--space-8)}
.fid-sidebar--collapsed .fid-sidebar__brand img{width:auto;height:var(--logo-symbol-min)}
.fid-sidebar__group{padding:var(--space-16) var(--space-8) var(--space-4)}
.fid-sidebar__grouplabel{padding:0 var(--space-8) var(--space-8);font:var(--type-label);color:var(--text-on-shell-muted)}
.fid-sidebar__item{display:flex;align-items:center;gap:var(--space-12);width:100%;padding:var(--space-8);border:0;border-radius:var(--radius-control);background:none;color:var(--text-on-shell);font:var(--type-ui-medium);text-align:start;cursor:pointer;transition:var(--transition-control)}
.fid-sidebar__item .fid-icon{color:var(--icon-on-shell)}
.fid-sidebar__item:hover{background:var(--surface-shell-hover)}
.fid-sidebar__item[aria-current="page"]{background:var(--surface-shell-active);color:var(--fid-white);font-weight:var(--weight-semibold)}
.fid-sidebar__item[aria-current="page"] .fid-icon{color:var(--icon-active)}
.fid-sidebar__item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus-ring)}
.fid-sidebar__count{margin-inline-start:auto;font:var(--type-label);font-weight:var(--weight-semibold);color:var(--text-on-orange);background:var(--action-exception);border-radius:var(--radius-pill);min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-4)}
.fid-sidebar__foot{margin-top:auto;padding:var(--space-12) var(--space-16);border-top:var(--border-w) solid var(--border-on-shell);display:flex;align-items:center;gap:var(--space-12)}

.fid-topbar{display:flex;align-items:center;gap:var(--space-16);height:var(--layout-topbar-h);flex:none;padding:0 var(--layout-page-pad-x);background:var(--surface-card);border-bottom:var(--border-w) solid var(--border-subtle)}
.fid-topbar__search{flex:1;max-width:440px}
.fid-topbar__spacer{flex:1}
.fid-topbar__right{display:flex;align-items:center;gap:var(--space-8)}
.fid-topbar__divider{width:1px;height:20px;background:var(--border-default)}

/* -------------------------------- Avatar --------------------------------- */
.fid-avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:var(--radius-pill);background:var(--fid-plum-100);color:var(--fid-plum);font:var(--type-label);font-weight:var(--weight-semibold)}
.fid-avatar--sm{width:24px;height:24px;font-size:var(--text-caption)}
.fid-avatar--lg{width:36px;height:36px}
.fid-avatar--on-shell{background:var(--fid-plum);color:var(--fid-white)}
.fid-avatarstack{display:inline-flex}
.fid-avatarstack .fid-avatar{box-shadow:0 0 0 2px var(--surface-card)}
.fid-avatarstack .fid-avatar+.fid-avatar{margin-inline-start:-6px}

/* --------------------------- Inline alert -------------------------------- */
/* Tones map 1:1 onto the R-041 semantic system. "exception" (Orange) means a
   human must intervene; "warning" (amber) is advisory or threshold attention. */
.fid-alert{display:flex;gap:var(--space-12);padding:var(--space-12) var(--space-16);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-card);font:var(--type-ui)}
.fid-alert__body{display:flex;flex-direction:column;gap:var(--space-2-sub);min-width:0}
.fid-alert__title{font-weight:var(--weight-semibold);color:var(--text-heading)}
.fid-alert__text{color:var(--text-muted);line-height:var(--leading-small)}
.fid-alert--exception{background:var(--sem-exception-surface);border-color:var(--sem-exception-border)}
.fid-alert--exception .fid-alert__title,.fid-alert--exception .fid-alert__text,.fid-alert--exception .fid-icon{color:var(--sem-exception-text)}
.fid-alert--warning{background:var(--sem-warning-surface);border-color:var(--sem-warning-border)}
.fid-alert--warning .fid-alert__title,.fid-alert--warning .fid-alert__text,.fid-alert--warning .fid-icon{color:var(--sem-warning-text)}
.fid-alert--info{background:var(--sem-info-surface);border-color:var(--sem-info-border)}
.fid-alert--info .fid-alert__title,.fid-alert--info .fid-alert__text,.fid-alert--info .fid-icon{color:var(--sem-info-text)}
.fid-alert--critical{background:var(--sem-critical-surface);border-color:var(--sem-critical-border)}
.fid-alert--critical .fid-alert__title,.fid-alert--critical .fid-alert__text,.fid-alert--critical .fid-icon{color:var(--sem-critical-text)}
.fid-alert--success{background:var(--sem-success-surface);border-color:var(--sem-success-border)}
.fid-alert--success .fid-alert__title,.fid-alert--success .fid-alert__text,.fid-alert--success .fid-icon{color:var(--sem-success-text)}

/* ---------------------------- Dialog / Drawer ---------------------------- */
.fid-scrim{position:absolute;inset:0;background:var(--overlay-scrim);display:flex;align-items:center;justify-content:center;padding:var(--space-32);z-index:var(--z-drawer-scrim);animation:fid-fade var(--duration-base) var(--ease-out)}
.fid-scrim--top,.fid-scrim:has(.fid-dialog){z-index:var(--z-dialog-scrim)}
.fid-dialog{position:relative;z-index:var(--z-dialog);width:100%;max-width:480px;background:var(--surface-card);border-radius:var(--radius-surface);box-shadow:var(--shadow-lg);overflow:hidden;animation:fid-rise var(--duration-base) var(--ease-out)}
.fid-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12);padding:var(--space-20) var(--space-20) var(--space-12)}
.fid-dialog__title{font:var(--type-section-title);color:var(--text-heading)}
.fid-dialog__body{padding:0 var(--space-20) var(--space-20);color:var(--text-muted);font:var(--type-ui)}
.fid-dialog__foot{display:flex;justify-content:flex-end;gap:var(--space-8);padding:var(--space-12) var(--space-20);background:var(--fid-grey-050);border-top:var(--border-w) solid var(--border-subtle)}
.fid-drawer{position:absolute;inset-block:0;inset-inline-end:0;width:var(--layout-drawer-w);max-width:100%;display:flex;flex-direction:column;background:var(--surface-card);box-shadow:var(--shadow-lg);z-index:var(--z-drawer);animation:fid-slide var(--duration-panel) var(--ease-out)}
.fid-drawer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12);padding:var(--space-16) var(--space-20);border-bottom:var(--border-w) solid var(--border-subtle)}
.fid-drawer__body{flex:1;overflow:auto;padding:var(--space-20)}
.fid-drawer__foot{display:flex;justify-content:flex-end;gap:var(--space-8);padding:var(--space-12) var(--space-20);border-top:var(--border-w) solid var(--border-subtle);background:var(--fid-grey-050)}
@keyframes fid-fade{from{opacity:0}to{opacity:1}}
@keyframes fid-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fid-slide{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}}

/* --------------------------------- Toast --------------------------------- */
.fid-toast{display:flex;align-items:flex-start;gap:var(--space-12);min-width:300px;max-width:400px;padding:var(--space-12) var(--space-16);background:var(--fid-plum-deep);color:var(--fid-white);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);font:var(--type-ui);animation:fid-rise var(--duration-base) var(--ease-out)}
.fid-toast .fid-icon{color:var(--icon-on-dark)}
.fid-toast__title{font-weight:var(--weight-semibold)}
.fid-toast__text{color:var(--fid-plum-200);margin-top:var(--space-2-sub)}
.fid-toast__close{margin-inline-start:auto;border:0;background:none;cursor:pointer;padding:0;display:flex}
.fid-toast__close .fid-icon{color:var(--fid-plum-200)}
.fid-toast__close:hover .fid-icon{color:var(--fid-white)}
.fid-toast--exception{border-inline-start:3px solid var(--action-exception)}

/* -------------------------------- Tooltip -------------------------------- */
.fid-tooltipwrap{position:relative;display:inline-flex}
.fid-tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:var(--space-4) var(--space-8);background:var(--fid-plum-deep);color:var(--fid-white);border-radius:var(--radius-sm);font:var(--type-meta);white-space:nowrap;box-shadow:var(--shadow-md);z-index:var(--z-popover);pointer-events:none}

/* ------------------------------- Timeline -------------------------------- */
.fid-timeline{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.fid-timeline__item{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--space-12);padding-bottom:var(--space-16)}
.fid-timeline__rail{position:relative;display:flex;justify-content:center}
.fid-timeline__rail::before{content:"";position:absolute;top:18px;bottom:-14px;width:1px;background:var(--border-default)}
.fid-timeline__item:last-child{padding-bottom:0}
.fid-timeline__item:last-child .fid-timeline__rail::before{display:none}
.fid-timeline__node{width:16px;height:16px;border-radius:var(--radius-pill);background:var(--surface-card);border:var(--border-w-strong) solid var(--border-strong);z-index:1}
.fid-timeline__item[data-state="done"] .fid-timeline__node{background:var(--sem-success);border-color:var(--sem-success)}
.fid-timeline__item[data-state="current"] .fid-timeline__node{background:var(--sem-inprogress);border-color:var(--sem-inprogress)}
.fid-timeline__item[data-state="action"] .fid-timeline__node{background:var(--sem-exception);border-color:var(--sem-exception)}
.fid-timeline__item[data-state="rejected"] .fid-timeline__node{background:var(--sem-critical);border-color:var(--sem-critical)}
.fid-timeline__title{font:var(--type-ui-medium);color:var(--text-heading)}
.fid-timeline__meta{font:var(--type-meta);color:var(--text-muted);margin-top:var(--space-2-sub)}
.fid-timeline__note{margin-top:var(--space-8);padding:var(--space-8) var(--space-12);background:var(--fid-grey-050);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-sm);font:var(--type-meta);color:var(--text-default)}

/* -------------------------------- Progress ------------------------------- */
.fid-progress{display:flex;flex-direction:column;gap:var(--space-4)}
.fid-progress__head{display:flex;justify-content:space-between;gap:var(--space-8);font:var(--type-meta);color:var(--text-muted)}
.fid-progress__track{height:8px;border-radius:var(--radius-pill);background:var(--fid-grey-200);overflow:hidden}
.fid-progress__fill{height:100%;border-radius:var(--radius-pill);background:var(--fid-plum);transition:width var(--duration-slow) var(--ease-out)}
/* Approaching or past a threshold is advisory — amber Warning, not Orange. */
.fid-progress--warning .fid-progress__fill{background:var(--sem-warning)}
.fid-progress--critical .fid-progress__fill{background:var(--sem-critical)}

/* ------------------------------- Empty state ----------------------------- */
.fid-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);padding:var(--space-48) var(--space-24);text-align:center}
.fid-empty__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-lg);background:var(--fid-grey-100);color:var(--icon-default)}
.fid-empty__title{font:var(--type-card-title);color:var(--text-heading)}
.fid-empty__text{font:var(--type-meta);color:var(--text-muted);max-width:46ch}

/* ------------------------------- Pagination ------------------------------ */
.fid-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);padding:var(--space-12) var(--space-16);border-top:var(--border-w) solid var(--border-subtle);font:var(--type-meta);color:var(--text-muted)}
.fid-pager__pages{display:flex;align-items:center;gap:var(--space-4)}
.fid-pager__page{min-width:var(--control-h-sm);height:var(--control-h-sm);padding:0 var(--space-6-sub);border:var(--border-w) solid transparent;border-radius:var(--radius-sm);background:none;color:var(--text-default);font:var(--type-meta);cursor:pointer;transition:var(--transition-control)}
.fid-pager__page:hover{background:var(--surface-hover)}
.fid-pager__page[aria-current="true"]{background:var(--fid-plum);color:var(--fid-white);font-weight:var(--weight-semibold)}
.fid-pager__page[disabled]{color:var(--text-disabled);cursor:not-allowed;background:none}

/* -------------------------------- Toolbar -------------------------------- */
.fid-toolbar{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-12) var(--space-16);border-bottom:var(--border-w) solid var(--border-subtle);background:var(--surface-card);flex-wrap:wrap}
.fid-toolbar__spacer{flex:1}

/* ------------------------------ Chart legend ----------------------------- */
/* R-041 §10: colour can never be the only analytical carrier — the legend and
   the bars both carry a direct label and a value. */
.fid-chartbars{display:flex;flex-direction:column;gap:var(--space-8)}
.fid-chartbar{display:flex;align-items:center;gap:var(--space-12)}
.fid-chartbar__label{width:160px;flex:none;font:var(--type-meta);color:var(--text-default)}
.fid-chartbar__track{flex:1;height:12px;background:var(--fid-grey-100);border-radius:var(--radius-xs);overflow:hidden}
.fid-chartbar__fill{display:block;height:100%;border-radius:var(--radius-xs)}
.fid-chartbar__value{width:96px;flex:none;text-align:end;font:var(--type-meta);font-weight:var(--weight-medium);font-variant-numeric:var(--numeric-figures);color:var(--text-default)}