/* ==========================================================================
   carbon.css — IBM Carbon Design System, hand-authored.

   Faithful to Carbon v11 geometry, type scale, spacing, motion and component
   anatomy, with the brand palette substituted for Carbon's default blue.

   Carbon signatures implemented here:
     · square corners (radius 0) everywhere except tags
     · IBM Plex Sans with the real Carbon type scale
     · fields are a grey fill with a single bottom rule
     · button labels are left-aligned with the icon pinned right
     · focus is a 2px inset outline, never a glow
     · modal footers are full-bleed 50/50 buttons
   ========================================================================== */

/* ==========================================================================
   IBM Plex Sans

   Carbon is IBM Plex. Drop the woff2 files into assets/fonts/ and these rules
   pick them up; without them the stack falls back to the closest system faces
   so nothing breaks. See README "Typeface".
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

:root {

  /* ------------------------------------------------------------------ *
   * Brand palette — the five specified colours
   * ------------------------------------------------------------------ */

  --indigo-10: #EEF2FF;
  --indigo-20: #E0E7FF;
  --indigo-40: #818CF8;
  --indigo-60: #4338CA;   /* Rich Indigo — the interactive colour */
  --indigo-70: #3730A3;
  --indigo-80: #312E81;

  --rose-10:   #FFF1F2;
  --rose-20:   #FFE4E6;
  --rose-60:   #E11D48;   /* Rose — attention, used sparingly */
  --rose-70:   #BE123C;

  --teal-10:   #F0FDFA;
  --teal-20:   #CCFBF1;
  --teal-60:   #0D9488;   /* Deep Sage — positive state */
  --teal-70:   #0F766E;   /* text-safe variant (4.8:1 on white) */

  --amber-10:  #FFFBEB;
  --amber-20:  #FEF3C7;
  --amber-60:  #B45309;

  /* Slate neutrals, filling the role of Carbon's Gray 10 ramp */
  --n-0:   #FFFFFF;
  --n-50:  #F8FAFC;       /* Ice White — the canvas */
  --n-100: #F1F5F9;
  --n-200: #E2E8F0;
  --n-300: #CBD5E1;
  --n-400: #94A3B8;
  --n-500: #64748B;
  --n-600: #475569;
  --n-700: #334155;
  --n-800: #1E293B;       /* Ink Slate — primary text */
  --n-900: #0F172A;

  /* ------------------------------------------------------------------ *
   * Carbon theme tokens
   * Named after Carbon's white-theme roles so the mapping is legible.
   * ------------------------------------------------------------------ */

  --background:            var(--n-50);
  --background-hover:      rgba(71, 85, 105, .08);
  --background-active:     rgba(71, 85, 105, .16);
  --background-selected:   rgba(67, 56, 202, .10);
  --background-inverse:    var(--n-800);
  --background-brand:      var(--indigo-60);

  --layer-01:              var(--n-0);
  --layer-02:              var(--n-50);
  --layer-hover:           var(--n-50);
  --layer-accent:          var(--n-100);

  --field-01:              var(--n-100);
  --field-hover:           var(--n-200);

  --border-subtle:         var(--n-200);
  --border-strong:         var(--n-400);
  --border-interactive:    var(--indigo-60);
  --border-inverse:        var(--n-800);

  --text-primary:          var(--n-800);
  --text-secondary:        var(--n-600);
  --text-helper:           var(--n-500);
  --text-placeholder:      var(--n-400);
  --text-on-color:         var(--n-0);
  --text-inverse:          var(--n-0);
  --text-disabled:         rgba(30, 41, 59, .35);
  --text-error:            var(--rose-70);
  --text-success:          var(--teal-70);
  --link-primary:          var(--indigo-60);
  --link-primary-hover:    var(--indigo-70);

  --icon-primary:          var(--n-800);
  --icon-secondary:        var(--n-600);
  --icon-on-color:         var(--n-0);

  --interactive:           var(--indigo-60);
  --focus:                 var(--indigo-60);
  --focus-inset:           var(--n-0);

  --support-error:         var(--rose-60);
  --support-success:       var(--teal-60);
  --support-warning:       var(--amber-60);
  --support-info:          var(--indigo-60);

  --notification-error-bg:   var(--rose-10);
  --notification-success-bg: var(--teal-10);
  --notification-warning-bg: var(--amber-10);
  --notification-info-bg:    var(--indigo-10);

  --button-primary:         var(--indigo-60);
  --button-primary-hover:   var(--indigo-70);
  --button-primary-active:  var(--indigo-80);
  --button-danger:          var(--rose-60);
  --button-danger-hover:    var(--rose-70);
  --button-separator:       var(--n-200);

  --overlay:                rgba(15, 23, 42, .55);
  --skeleton-background:    var(--n-100);
  --skeleton-element:       var(--n-200);

  /* ------------------------------------------------------------------ *
   * Spacing — Carbon's 13-step scale, verbatim
   * ------------------------------------------------------------------ */

  --sp-01: 0.125rem;   /*   2px */
  --sp-02: 0.25rem;    /*   4px */
  --sp-03: 0.5rem;     /*   8px */
  --sp-04: 0.75rem;    /*  12px */
  --sp-05: 1rem;       /*  16px */
  --sp-06: 1.5rem;     /*  24px */
  --sp-07: 2rem;       /*  32px */
  --sp-08: 2.5rem;     /*  40px */
  --sp-09: 3rem;       /*  48px */
  --sp-10: 4rem;       /*  64px */
  --sp-11: 5rem;       /*  80px */
  --sp-12: 6rem;       /*  96px */
  --sp-13: 10rem;      /* 160px */

  /* ------------------------------------------------------------------ *
   * Carbon field / key heights
   * ------------------------------------------------------------------ */

  --size-xs: 1.5rem;   /* 24px */
  --size-sm: 2rem;     /* 32px */
  --size-md: 2.5rem;   /* 40px */
  --size-lg: 3rem;     /* 48px — Carbon's default field & button height */
  --size-xl: 4rem;     /* 64px */

  /* ------------------------------------------------------------------ *
   * Radius — Carbon is square. Tags are the one rounded element.
   * ------------------------------------------------------------------ */

  --r-none: 0;
  --r-sm:   0;
  --r-md:   0;
  --r-lg:   0;
  --r-xl:   0;
  --r-pill: 0.9375rem;   /* Carbon tag radius */

  /* ------------------------------------------------------------------ *
   * Elevation — Carbon is flat; shadow is reserved for true overlays
   * ------------------------------------------------------------------ */

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 2px 6px rgba(15, 23, 42, .20);
  --shadow-lg: 0 4px 16px rgba(15, 23, 42, .28);

  /* ------------------------------------------------------------------ *
   * Motion — @carbon/motion durations and productive easing curves
   * ------------------------------------------------------------------ */

  --dur-fast-01:     70ms;
  --dur-fast-02:    110ms;
  --dur-moderate-01: 150ms;
  --dur-moderate-02: 240ms;
  --dur-slow-01:     400ms;

  /* aliases used throughout the app layer */
  --dur-fast: var(--dur-fast-02);
  --dur:      var(--dur-moderate-01);
  --dur-slow: var(--dur-moderate-02);

  --ease:          cubic-bezier(0.2, 0, 0.38, 0.9);   /* standard, productive */
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);     /* entrance, productive */
  --ease-exit:     cubic-bezier(0.2, 0, 1, 0.9);      /* exit, productive     */

  /* ------------------------------------------------------------------ *
   * Layout — Carbon 2x Grid breakpoints
   * ------------------------------------------------------------------ */

  --bp-sm:  20rem;     /*  320px */
  --bp-md:  42rem;     /*  672px */
  --bp-lg:  66rem;     /* 1056px */
  --bp-xlg: 82rem;     /* 1312px */
  --bp-max: 99rem;     /* 1584px */

  --grid-gutter: var(--sp-07);   /* 32px */
  --rail-w:      16rem;          /* Carbon SideNav width */
  --header-h:    3rem;           /* Carbon UI Shell header height */
  --content-max: 82rem;

  /* ------------------------------------------------------------------ *
   * Type
   * ------------------------------------------------------------------ */

  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --z-header:   8000;
  --z-rail:     8000;
  --z-overlay:  9000;
  --z-toast:    9500;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-primary);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--sp-06) 0; }

a { color: var(--link-primary); text-decoration: none; }
a:hover { color: var(--link-primary-hover); text-decoration: underline; }

/**
 * The hidden attribute must win over any component display rule.
 * Without this, `display: flex` on a drawer or `display: grid` on a modal
 * overlay silently defeats [hidden] and the element can never be dismissed.
 */
[hidden] { display: none !important; }

/* Carbon focus: a 2px solid inset ring. Never removed, never a soft glow. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--indigo-20); color: var(--n-900); }

/* ==========================================================================
   Type scale — @carbon/type tokens
   ========================================================================== */

/* caption-01 */
.t-caption  { font-size: 0.75rem;   line-height: 1.33333; letter-spacing: 0.32px; font-weight: 400; }
/* label-01 */
.t-label    { font-size: 0.75rem;   line-height: 1.33333; letter-spacing: 0.32px; font-weight: 400; }
/* body-compact-01 */
.t-small    { font-size: 0.875rem;  line-height: 1.28572; letter-spacing: 0.16px; font-weight: 400; }
/* body-01 */
.t-body     { font-size: 0.875rem;  line-height: 1.42857; letter-spacing: 0.16px; font-weight: 400; }
/* body-02 */
.t-body-lg  { font-size: 1rem;      line-height: 1.5;     letter-spacing: 0;      font-weight: 400; }
/* heading-compact-01 */
.t-subhead  { font-size: 0.875rem;  line-height: 1.28572; letter-spacing: 0.16px; font-weight: 600; }
/* heading-02 */
.t-heading  { font-size: 1rem;      line-height: 1.375;   letter-spacing: 0;      font-weight: 600; }
/* heading-03 */
.t-title    { font-size: 1.25rem;   line-height: 1.4;     letter-spacing: 0;      font-weight: 400; }
/* heading-04 */
.t-display  { font-size: 1.75rem;   line-height: 1.28572; letter-spacing: 0;      font-weight: 400; }

/* Carbon uses a quiet all-caps label to open a section. */
.t-eyebrow {
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.t-muted     { color: var(--text-helper); }
.t-secondary { color: var(--text-secondary); }
.t-critical  { color: var(--text-error); }
.t-positive  { color: var(--text-success); }
.t-numeric   { font-variant-numeric: tabular-nums; }
.t-mono      { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0; }

.t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Button — Carbon anatomy
   Label left-aligned, icon pinned to the right, 48px tall, square, and a
   70ms transition on colour only.
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-bd: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 20rem;
  min-height: var(--size-lg);
  margin: 0;
  padding: 0 var(--sp-10) 0 15px;
  border: 1px solid var(--btn-bd);
  border-radius: 0;
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  text-align: left;
  text-decoration: none;
  vertical-align: top;
  cursor: pointer;
  transition:
    background-color var(--dur-fast-01) var(--ease),
    border-color var(--dur-fast-01) var(--ease),
    color var(--dur-fast-01) var(--ease),
    outline var(--dur-fast-01) var(--ease);
}

.btn:hover { text-decoration: none; }

.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-color: var(--focus);
}

/* Carbon pins the glyph to the right edge of the button. Doing it with
   absolute positioning keeps the markup order free. */
.btn > svg {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  flex: none;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  background-color: var(--n-200);
  border-color: transparent;
  color: var(--text-disabled);
  cursor: not-allowed;
  outline: none;
}

/* --- kinds ---------------------------------------------------------------- */

.btn--primary {
  --btn-bg: var(--button-primary);
  --btn-fg: var(--text-on-color);
  --btn-bd: var(--button-primary);
}
.btn--primary:hover:not(:disabled) { --btn-bg: var(--button-primary-hover); --btn-bd: var(--button-primary-hover); }
.btn--primary:active:not(:disabled) { --btn-bg: var(--button-primary-active); }

/* Carbon secondary is a solid dark button, not an outline. */
.btn--secondary {
  --btn-bg: var(--n-600);
  --btn-fg: var(--text-on-color);
  --btn-bd: var(--n-600);
}
.btn--secondary:hover:not(:disabled) { --btn-bg: var(--n-700); --btn-bd: var(--n-700); }
.btn--secondary:active:not(:disabled) { --btn-bg: var(--n-800); }

/* Carbon tertiary is the outline button. */
.btn--tertiary {
  --btn-bg: transparent;
  --btn-fg: var(--interactive);
  --btn-bd: var(--interactive);
}
.btn--tertiary:hover:not(:disabled) { --btn-bg: var(--button-primary-hover); --btn-fg: var(--text-on-color); }
.btn--tertiary:active:not(:disabled) { --btn-bg: var(--button-primary-active); --btn-fg: var(--text-on-color); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--interactive);
  --btn-bd: transparent;
}
.btn--ghost:hover:not(:disabled) { --btn-bg: var(--background-hover); }
.btn--ghost:active:not(:disabled) { --btn-bg: var(--background-active); }

.btn--positive {
  --btn-bg: var(--support-success);
  --btn-fg: var(--text-on-color);
  --btn-bd: var(--support-success);
}
.btn--positive:hover:not(:disabled) { --btn-bg: var(--teal-70); --btn-bd: var(--teal-70); }

.btn--danger {
  --btn-bg: var(--button-danger);
  --btn-fg: var(--text-on-color);
  --btn-bd: var(--button-danger);
}
.btn--danger:hover:not(:disabled) { --btn-bg: var(--button-danger-hover); --btn-bd: var(--button-danger-hover); }

/* danger--tertiary */
.btn--critical {
  --btn-bg: transparent;
  --btn-fg: var(--button-danger);
  --btn-bd: var(--button-danger);
}
.btn--critical:hover:not(:disabled) { --btn-bg: var(--button-danger); --btn-fg: var(--text-on-color); }

/* --- sizes ---------------------------------------------------------------- */

.btn--sm { min-height: var(--size-sm); padding: 0 var(--sp-09) 0 15px; }
.btn--md { min-height: var(--size-md); }
.btn--lg { min-height: var(--size-lg); }
.btn--xl { min-height: var(--size-xl); align-items: flex-start; padding-top: var(--sp-05); }

.btn--block { display: flex; width: 100%; max-width: none; }

/* Icon-only: square, centred, no asymmetric padding. */
.btn--icon {
  justify-content: center;
  width: var(--size-lg);
  min-width: var(--size-lg);
  padding: 0;
}
.btn--icon > svg { position: static; transform: none; right: auto; }
.btn--icon.btn--sm { width: var(--size-sm); min-width: var(--size-sm); }

/* Compact buttons inside table rows and list items stay centred. */
.btn--compact {
  justify-content: center;
  padding: 0 var(--sp-05);
  text-align: center;
}
.btn--compact > svg { position: static; transform: none; right: auto; margin-right: var(--sp-03); }

/* Busy state — set by app.js so a slow save never looks frozen. */
.btn.is-busy { pointer-events: none; color: transparent !important; }
.btn.is-busy > svg { opacity: 0; }
.btn.is-busy::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--btn-fg);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 690ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Carbon's button set: adjacent buttons are separated by a 1px rule, not a gap. */
.btn-set { display: flex; }
.btn-set .btn { flex: 1 1 0; max-width: none; }
.btn-set .btn + .btn { box-shadow: inset 1px 0 0 0 var(--button-separator); }

/* ==========================================================================
   Form fields — Carbon's grey fill with a single bottom rule
   ========================================================================== */

.field { margin-bottom: var(--sp-06); }

.field__label {
  display: block;
  margin-bottom: var(--sp-03);
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  font-weight: 400;
  color: var(--text-secondary);
}

.field__label .req { color: var(--support-error); margin-left: 2px; }

.field__hint {
  margin-top: var(--sp-02);
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-helper);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-02);
  margin-top: var(--sp-02);
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-error);
}

.field__error::before {
  content: '';
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--icon-error) center / contain no-repeat;
  mask: var(--icon-error) center / contain no-repeat;
}

:root {
  --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  height: var(--size-lg);
  padding: 0 var(--sp-05);
  border: none;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background-color: var(--field-01);
  color: var(--text-primary);
  font-size: 0.875rem;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  appearance: none;
  transition: background-color var(--dur-fast-01) var(--ease),
              outline var(--dur-fast-01) var(--ease);
}

.input::placeholder, .textarea::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

.input:hover, .select:hover, .textarea:hover { background-color: var(--field-hover); }

.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.input:disabled, .select:disabled, .textarea:disabled {
  background-color: var(--field-01);
  border-bottom-color: transparent;
  color: var(--text-disabled);
  cursor: not-allowed;
}

.textarea {
  height: auto;
  min-height: 5rem;
  padding: var(--sp-04) var(--sp-05);
  line-height: 1.42857;
  resize: vertical;
}

.select {
  padding-right: var(--sp-08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231E293B' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-05) center;
}

/* Carbon marks an invalid field with a persistent 2px error outline. */
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  outline: 2px solid var(--support-error);
  outline-offset: -2px;
  border-bottom-color: transparent;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 var(--sp-06);
}

/* --- checkbox / radio ----------------------------------------------------- */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-04);
  min-height: var(--size-md);
  padding: var(--sp-03) 0;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.28572;
  letter-spacing: 0.16px;
}

.check input[type='checkbox'],
.check input[type='radio'] {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 1px 0 0;
  accent-color: var(--interactive);
  cursor: pointer;
}

.check__text { line-height: 1.4; }
.check__hint { display: block; font-size: 0.75rem; letter-spacing: 0.32px; color: var(--text-helper); margin-top: 2px; }

/* --- toggle --------------------------------------------------------------- */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-06);
  min-height: var(--size-lg);
  padding: var(--sp-04) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.toggle-row:last-child { border-bottom: 0; }

.switch { position: relative; flex: none; width: 3rem; height: 1.5rem; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.switch__track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  background-color: var(--n-500);
  transition: background-color var(--dur-fast-02) var(--ease);
  pointer-events: none;
}

.switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: var(--n-0);
  transition: transform var(--dur-fast-02) var(--ease);
}

.switch input:checked + .switch__track { background-color: var(--support-success); }
.switch input:checked + .switch__track::after { transform: translateX(1.5rem); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ==========================================================================
   Tile / card — Carbon tiles are square and flat
   ========================================================================== */

.card {
  background-color: var(--layer-01);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-05);
  padding: var(--sp-05) var(--sp-06);
  border-bottom: 1px solid var(--border-subtle);
}

.card__body { padding: var(--sp-06); }
.card__body--tight { padding: var(--sp-05); }

.card__footer {
  padding: var(--sp-05) var(--sp-06);
  border-top: 1px solid var(--border-subtle);
  background-color: var(--layer-02);
}

.card--interactive {
  transition: background-color var(--dur-fast-01) var(--ease),
              border-color var(--dur-fast-01) var(--ease);
}
.card--interactive:hover { background-color: var(--layer-hover); border-color: var(--border-strong); }

/* ==========================================================================
   Tag — the one rounded element in Carbon
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-02);
  height: 1.5rem;
  max-width: 100%;
  padding: 0 var(--sp-04);
  border: none;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  font-weight: 400;
  white-space: nowrap;
}

.badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: currentColor; flex: none; }

.badge--neutral  { background-color: var(--n-200);     color: var(--n-700); }
.badge--info     { background-color: var(--indigo-20); color: var(--indigo-80); }
.badge--active   { background-color: var(--amber-20);  color: var(--amber-60); }
.badge--positive { background-color: var(--teal-20);   color: var(--teal-70); }
.badge--warning  { background-color: var(--amber-20);  color: var(--amber-60); }
.badge--critical { background-color: var(--rose-20);   color: var(--rose-70); }

.badge--priority {
  background-color: var(--support-error);
  color: var(--text-on-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 0.6875rem;
}

.badge--lg { height: 2rem; padding: 0 var(--sp-05); font-size: 0.875rem; letter-spacing: 0.16px; }

/* Waiting timer. Overdue is never signalled by colour alone — the row also
   carries an "Overdue" tag and the icon changes. */
.timer {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-02);
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.timer--overdue { color: var(--text-error); }

/* ==========================================================================
   Avatar
   ========================================================================== */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--size-md);
  height: var(--size-md);
  border-radius: 0;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.32px;
  user-select: none;
}

.avatar--sm { width: var(--size-sm); height: var(--size-sm); font-size: 0.6875rem; }
.avatar--lg { width: var(--size-lg); height: var(--size-lg); font-size: 1rem; }

.avatar--t1 { background-color: var(--indigo-20); color: var(--indigo-80); }
.avatar--t2 { background-color: var(--teal-20);   color: var(--teal-70); }
.avatar--t3 { background-color: var(--amber-20);  color: var(--amber-60); }
.avatar--t4 { background-color: var(--rose-20);   color: var(--rose-70); }
.avatar--t5 { background-color: var(--n-200);     color: var(--n-700); }
.avatar--t6 { background-color: #D1FAE5;          color: #065F46; }

/* ==========================================================================
   Data table — Carbon geometry
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  background-color: var(--layer-01);
}

.table { font-size: 0.875rem; letter-spacing: 0.16px; }

.table thead th {
  height: var(--size-lg);
  padding: 0 var(--sp-05);
  background-color: var(--layer-accent);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.875rem;
  line-height: 1.28572;
  font-weight: 600;
  text-align: left;
  color: var(--text-primary);
  white-space: nowrap;
}

.table tbody td {
  height: var(--size-lg);
  padding: var(--sp-04) var(--sp-05);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--dur-fast-01) var(--ease); }
.table tbody tr:hover { background-color: var(--layer-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tabs — Carbon underline tabs
   ========================================================================== */

.tabs {
  display: flex;
  gap: 0;
  box-shadow: inset 0 -1px 0 0 var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  height: var(--size-md);
  padding: 0 var(--sp-05);
  box-shadow: inset 0 -2px 0 0 transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  white-space: nowrap;
  transition: color var(--dur-fast-01) var(--ease),
              box-shadow var(--dur-fast-01) var(--ease),
              background-color var(--dur-fast-01) var(--ease);
}
.tab:hover { color: var(--text-primary); background-color: var(--background-hover); text-decoration: none; }
.tab.is-active {
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--interactive);
}

.tab__count {
  margin-left: var(--sp-03);
  padding: 0 var(--sp-03);
  border-radius: var(--r-pill);
  background-color: var(--n-200);
  font-size: 0.75rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.tab.is-active .tab__count { background-color: var(--indigo-20); color: var(--indigo-80); }

/* ==========================================================================
   Modal — Carbon: square, full-bleed split footer buttons
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--sp-05);
  background-color: var(--overlay);
  animation: overlay-in var(--dur-moderate-01) var(--ease-entrance);
}

@keyframes overlay-in { from { opacity: 0; } }

.modal {
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - var(--sp-09));
  display: flex;
  flex-direction: column;
  background-color: var(--layer-01);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--dur-moderate-02) var(--ease-entrance);
}

.modal--wide { max-width: 42rem; }

@keyframes modal-in { from { opacity: 0; transform: translateY(-1rem); } }

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-05);
  padding: var(--sp-05) var(--sp-05) var(--sp-04) var(--sp-05);
}

.modal__title {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--text-primary);
}

.modal__sub {
  margin-top: var(--sp-03);
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-secondary);
}

/* Carbon leaves a wide right gutter in modal bodies for readability. */
.modal__body {
  padding: 0 20% var(--sp-09) var(--sp-05);
  overflow-y: auto;
}

/* The signature Carbon footer: buttons are full-bleed, 64px, split evenly. */
.modal__footer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  padding: 0;
  margin-top: auto;
}

.modal__footer .btn {
  min-height: var(--size-xl);
  max-width: none;
  align-items: flex-start;
  padding-top: var(--sp-05);
}

.modal__footer .btn + .btn { box-shadow: inset 1px 0 0 0 var(--button-separator); }

.modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--size-lg);
  height: var(--size-lg);
  margin: calc(-1 * var(--sp-05)) calc(-1 * var(--sp-05)) 0 0;
  color: var(--icon-primary);
  transition: background-color var(--dur-fast-01) var(--ease);
}
.modal__close:hover { background-color: var(--background-hover); }

/* --- drawer (notification panel) ------------------------------------------ */

.drawer {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  background-color: var(--layer-01);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  animation: drawer-in var(--dur-moderate-02) var(--ease-entrance);
}

@keyframes drawer-in { from { transform: translateX(1rem); opacity: 0; } }

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-04);
  padding: var(--sp-05);
  border-bottom: 1px solid var(--border-subtle);
}

.drawer__body { flex: 1; overflow-y: auto; }

.drawer__footer {
  padding: var(--sp-04) var(--sp-05);
  border-top: 1px solid var(--border-subtle);
  background-color: var(--layer-02);
}

/* ==========================================================================
   Notifications — Carbon toast & inline
   ========================================================================== */

.toasts {
  position: fixed;
  right: var(--sp-05);
  bottom: var(--sp-05);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-03);
  width: min(22rem, calc(100vw - var(--sp-08)));
  pointer-events: none;
}

.toast {
  display: flex;
  gap: var(--sp-05);
  padding: var(--sp-05);
  border: 1px solid transparent;
  border-left: 3px solid var(--n-500);
  border-radius: 0;
  background-color: var(--layer-01);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toast-in var(--dur-moderate-02) var(--ease-entrance);
}

.toast.is-leaving { animation: toast-out var(--dur-moderate-01) var(--ease-exit) forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateX(1rem); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(0.5rem); } }

.toast--success { border-left-color: var(--support-success); background-color: var(--notification-success-bg); border-color: var(--teal-20); }
.toast--error   { border-left-color: var(--support-error);   background-color: var(--notification-error-bg);   border-color: var(--rose-20); }
.toast--warning { border-left-color: var(--support-warning); background-color: var(--notification-warning-bg); border-color: var(--amber-20); }
.toast--info    { border-left-color: var(--support-info);    background-color: var(--notification-info-bg);    border-color: var(--indigo-20); }

.toast__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 1px; }
.toast--success .toast__icon { color: var(--text-success); }
.toast--error   .toast__icon { color: var(--text-error); }
.toast--warning .toast__icon { color: var(--support-warning); }
.toast--info    .toast__icon { color: var(--interactive); }

.toast__content { flex: 1; min-width: 0; }
.toast__title { font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; font-weight: 600; }
.toast__body  { margin-top: var(--sp-02); font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.16px; color: var(--text-secondary); }

.toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.25rem 0 0;
  color: var(--icon-primary);
}
.toast__close:hover { background-color: var(--background-hover); }

/* --- inline notification -------------------------------------------------- */

.alert {
  display: flex;
  gap: var(--sp-05);
  padding: var(--sp-05);
  border: 1px solid transparent;
  border-left: 3px solid var(--n-500);
  border-radius: 0;
  background-color: var(--layer-01);
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  margin-bottom: var(--sp-05);
}

.alert--error    { border-left-color: var(--support-error);   background-color: var(--notification-error-bg);   border-color: var(--rose-20);   color: var(--text-primary); }
.alert--success  { border-left-color: var(--support-success); background-color: var(--notification-success-bg); border-color: var(--teal-20);   color: var(--text-primary); }
.alert--warning  { border-left-color: var(--support-warning); background-color: var(--notification-warning-bg); border-color: var(--amber-20);  color: var(--text-primary); }
.alert--info     { border-left-color: var(--support-info);    background-color: var(--notification-info-bg);    border-color: var(--indigo-20); color: var(--text-primary); }

.alert svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 1px; }
.alert--error svg   { color: var(--text-error); }
.alert--success svg { color: var(--text-success); }
.alert--warning svg { color: var(--support-warning); }
.alert--info svg    { color: var(--interactive); }

/* ==========================================================================
   Empty & loading states
   ========================================================================== */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-04);
  padding: var(--sp-10) var(--sp-06);
  text-align: center;
}

.empty--page { min-height: 60vh; }

.empty__icon {
  display: grid;
  place-items: center;
  width: var(--size-lg);
  height: var(--size-lg);
  margin-bottom: var(--sp-02);
  background-color: var(--layer-accent);
  color: var(--icon-secondary);
}

.empty__title { font-size: 1rem; line-height: 1.375; font-weight: 600; color: var(--text-primary); }
.empty__body  { max-width: 44ch; font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.16px; color: var(--text-secondary); }
.empty__body + .btn { margin-top: var(--sp-04); }

.skeleton {
  background-color: var(--skeleton-background);
  position: relative;
  overflow: hidden;
}

.skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--skeleton-element);
  transform-origin: left;
  animation: skeleton 3000ms cubic-bezier(0.2, 0, 0.38, 0.9) infinite;
}

@keyframes skeleton {
  0%   { transform: scaleX(0); }
  40%  { transform: scaleX(1); transform-origin: left; }
  60%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.skeleton--text { height: 0.75rem; margin-bottom: var(--sp-03); }
.skeleton--row  { height: 4rem; margin-bottom: var(--sp-03); }

/* ==========================================================================
   Search field — Carbon search
   ========================================================================== */

.search { position: relative; display: flex; align-items: center; }

.search__icon {
  position: absolute;
  left: var(--sp-05);
  width: 1rem;
  height: 1rem;
  color: var(--icon-secondary);
  pointer-events: none;
  z-index: 1;
}

.search .input { padding-left: var(--sp-09); }

.search__clear {
  position: absolute;
  right: 0;
  width: var(--size-lg);
  height: var(--size-lg);
  display: grid;
  place-items: center;
  color: var(--icon-primary);
}
.search__clear:hover { background-color: var(--background-hover); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.stack     { display: flex; flex-direction: column; }
.stack-02  { gap: var(--sp-02); }
.stack-03  { gap: var(--sp-03); }
.stack-04  { gap: var(--sp-04); }
.stack-05  { gap: var(--sp-05); }
.stack-06  { gap: var(--sp-06); }
.stack-07  { gap: var(--sp-07); }

.row       { display: flex; align-items: center; }
.row-02    { gap: var(--sp-02); }
.row-03    { gap: var(--sp-03); }
.row-04    { gap: var(--sp-04); }
.row-05    { gap: var(--sp-05); }
.row--wrap { flex-wrap: wrap; }
.row--top  { align-items: flex-start; }
.row--between { justify-content: space-between; }
.row--end  { justify-content: flex-end; }

.grow { flex: 1; min-width: 0; }
.hide { display: none !important; }

.mt-03 { margin-top: var(--sp-03); }
.mt-04 { margin-top: var(--sp-04); }
.mt-05 { margin-top: var(--sp-05); }
.mt-06 { margin-top: var(--sp-06); }
.mb-04 { margin-bottom: var(--sp-04); }
.mb-05 { margin-bottom: var(--sp-05); }
.mb-06 { margin-bottom: var(--sp-06); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until a keyboard user tabs to it, then fully visible. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: calc(var(--z-toast) + 1);
  padding: var(--sp-04) var(--sp-05);
  background-color: var(--interactive);
  color: var(--text-on-color);
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(-101%);
  transition: transform var(--dur-fast-02) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  text-decoration: none;
  outline: 2px solid var(--focus-inset);
  outline-offset: -4px;
}

/* ==========================================================================
   Reduced motion — accessibility outranks effect
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton::before { animation: none; transform: none; opacity: .5; }
}

@media print {
  .app-rail, .shell-header, .mobile-nav, .toasts, .drawer, .btn { display: none !important; }
  body { background: #fff; }
  .card { border-color: #ccc; }
}