/* ==========================================================================
   nguma-core.css
   --------------------------------------------------------------------------
   Global stylesheet for the Nguma prototypes.

   Structure
   ---------
   1.  Design tokens         (:root custom properties)
   2.  Base / reset          (element-level defaults)
   3.  App shell             (.c-app-* — header, main, footer)
   4.  Components            (.c-* — buttons, pills, tables, etc.)
   5.  State helpers         (.is-* / .has-* — used in combination with components)
   6.  Utilities             (.u-* — single-purpose helpers)
   7.  Animations            (@keyframes)
   8.  Responsive overrides  (@media)

   Naming
   ------
   .c-name              component
   .c-name__part        component sub-element (BEM)
   .c-name--variant     component variant (BEM)
   .is-state            stateful modifier (toggleable, e.g. is-active)
   .has-state           stateful modifier indicating presence (e.g. has-error)
   .u-name              utility class (single-purpose, never has children)
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Brand colours --------------------------------------------------------- */
  --nguma-navy:               #023366;
  --nguma-navy-deep:          #011F42;
  --nguma-gold:               #C04511;
  --nguma-gold-hover:         #A53A0E;
  --nguma-teal:               #A9C9B6;
  --nguma-teal-deep:          #3F7A6B;
  --nguma-teal-stronger:      #2F5F52;
  --nguma-amber:              #B45309;
  --nguma-amber-soft:         #FEF3C7;
  --nguma-red:                #B02626;
  --nguma-red-soft:           #FEE2E2;

  /* Confidence indicators — used by .c-confidence-bar and the matching
     legend swatches. Deliberately distinct from the general --nguma-amber
     and --nguma-red tokens: medium is a bright golden-yellow and low is a
     saturated true red, picked to be far apart in both hue and luminance
     so the three confidence levels read at a glance. */
  --nguma-confidence-medium:  #F59E0B;
  --nguma-confidence-low:     #DC2626;

  /* Neutral / surface ----------------------------------------------------- */
  --nguma-white:              #FFFFFF;
  --nguma-cream:              #F4F4F4;
  --nguma-border:             #E5E7EB;
  --nguma-border-soft:        #EEF1F4;
  --nguma-ink:                #0D1E35;
  --nguma-ink-mid:            #374151;
  --nguma-ink-light:          #6B7280;

  /* Tints (translucent navy, used for hovers and quiet backgrounds) ------- */
  --nguma-navy-tint-faint:    rgba(2, 51, 102, 0.02);
  --nguma-navy-tint-hover:    rgba(2, 51, 102, 0.04);
  --nguma-navy-tint-medium:   rgba(2, 51, 102, 0.06);

  /* On-dark text ---------------------------------------------------------- */
  --nguma-on-dark-text:       rgba(255, 255, 255, 0.75);
  --nguma-on-dark-text-muted: rgba(255, 255, 255, 0.55);
  --nguma-on-dark-divider:    rgba(255, 255, 255, 0.06);

  /* Focus ring ------------------------------------------------------------ */
  --nguma-focus-ring:         rgba(192, 69, 17, 0.35);

  /* Typography ------------------------------------------------------------ */
  --nguma-font-body:          'DM Sans', system-ui, sans-serif;
  --nguma-font-display:       'Lora', Georgia, serif;
  --nguma-font-mono:          ui-monospace, SFMono-Regular, Menlo, monospace;

  --nguma-text-xs:            11px;
  --nguma-text-caption:       12px;
  --nguma-text-sm:            13px;
  --nguma-text-base:          14px;
  --nguma-text-md:            16px;
  --nguma-text-lg:            18px;
  --nguma-text-xl:            20px;
  --nguma-text-display-sm:    26px;
  --nguma-tracking-uppercase: 0.10em;

  /* Radius ---------------------------------------------------------------- */
  --nguma-radius-sm:          6px;
  --nguma-radius-md:          12px;
  --nguma-radius-lg:          20px;
  --nguma-radius-pill:        999px;

  /* Shadow ---------------------------------------------------------------- */
  --nguma-shadow-sm:          0 1px 2px var(--nguma-navy-tint-medium);
  --nguma-shadow-md:          0 4px 16px rgba(2, 51, 102, 0.08);
  --nguma-shadow-lg:          0 12px 40px rgba(2, 51, 102, 0.12);

  /* Layout ---------------------------------------------------------------- */
  --nguma-header-height:      80px;
  --nguma-sidebar-width:      280px;
  --nguma-app-max-width:      1480px;
  --nguma-wizard-progress-height: 94px;

  /* Motion ---------------------------------------------------------------- */
  --nguma-transition:         0.22s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2. Base / reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  font-size: var(--nguma-text-md);
}

body {
  background: var(--nguma-cream);
  color: var(--nguma-ink);
  display: flex;
  flex-direction: column;
  font-family: var(--nguma-font-body);
  line-height: 1.6;
  min-height: 100vh;
}

/* The HTML hidden attribute means "do not render". Some components set their
   own display value (e.g. flex), which can defeat the user-agent default of
   [hidden] { display: none }. This rule forces hidden to win in all cases. */
[hidden] {
  display: none !important;
}


/* ==========================================================================
   3. App shell
   --------------------------------------------------------------------------
   The app skeleton: sticky top header, main content area, footer at the
   bottom. The c-app-main can optionally be width-constrained with --centered.
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */

.c-app-header {
  align-items: center;
  background: var(--nguma-white);
  border-bottom: 2px solid var(--nguma-navy);
  display: flex;
  gap: 32px;
  height: var(--nguma-header-height);
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.c-app-header__logo {
  align-items: center;
  display: inline-flex;
  text-decoration: none;
}

.c-app-header__logo img {
  display: block;
  height: 48px;
  width: auto;
}

.c-app-header__nav {
  align-items: center;
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.c-app-header__nav-item {
  border: 1.5px solid transparent;
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-ink-mid);
  font-family: var(--nguma-font-body);
  font-size: var(--nguma-text-base);
  font-weight: 600;
  padding: 10px 18px;
  text-decoration: none;
  transition: all var(--nguma-transition);
  white-space: nowrap;
}

.c-app-header__nav-item:hover {
  background: var(--nguma-navy-tint-hover);
  color: var(--nguma-navy);
}

.c-app-header__nav-item.is-active {
  background: var(--nguma-navy);
  border-color: var(--nguma-navy);
  color: var(--nguma-white);
}

/* --- Body (two-column with sidebar) -------------------------------------- */
/* Wraps the sidebar + main when a page uses the standard side-nav layout. */

.c-app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* --- Sidebar -------------------------------------------------------------- */

.c-app-sidebar {
  align-self: flex-start;
  background: var(--nguma-white);
  border-right: 1px solid var(--nguma-border);
  flex-shrink: 0;
  height: calc(100vh - var(--nguma-header-height));
  overflow-y: auto;
  padding: 24px 0;
  position: sticky;
  top: var(--nguma-header-height);
  width: var(--nguma-sidebar-width);
}

/* When the Add Job wizard is active, the full-width progress strip sits
   between the header and the body. The sidebar's sticky position needs
   to clear it so the wizard strip remains visible above the sidebar
   content. The body-level .is-wizard-active class is applied by the
   wizard init code on pages where the wizard is running. */
body.is-wizard-active .c-app-sidebar {
  height: calc(100vh - var(--nguma-header-height) - var(--nguma-wizard-progress-height));
  top: calc(var(--nguma-header-height) + var(--nguma-wizard-progress-height));
}

.c-app-sidebar__back {
  align-items: center;
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-ink-light);
  display: inline-flex;
  font-size: var(--nguma-text-sm);
  font-weight: 500;
  gap: 6px;
  margin: 0 24px 14px;
  padding: 6px 10px 6px 6px;
  text-decoration: none;
  transition: color var(--nguma-transition), background var(--nguma-transition);
}

.c-app-sidebar__back svg {
  flex-shrink: 0;
  height: 14px;
  width: 14px;
}

.c-app-sidebar__back:hover {
  background: var(--nguma-cream);
  color: var(--nguma-navy);
}

.c-app-sidebar__breadcrumb {
  border-bottom: 1px solid var(--nguma-border-soft);
  margin-bottom: 16px;
  padding: 0 24px 18px;
}

.c-app-sidebar__breadcrumb-label {
  margin-bottom: 6px;
}

/* The breadcrumb title uses .c-card-title for visual consistency with other
   18px navy display headings across the app — no separate rule needed. */

.c-app-sidebar__breadcrumb-meta {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-caption);
  margin-top: 4px;
}

.c-app-sidebar__section-label {
  margin-bottom: 12px;
  padding: 0 24px;
}

/* --- Main ----------------------------------------------------------------- */

.c-app-main {
  flex: 1;
  min-width: 0;
  padding: 32px 40px 56px;
}

.c-app-main--centered {
  margin: 0 auto;
  max-width: var(--nguma-app-max-width);
  width: 100%;
}

/* --- Footer --------------------------------------------------------------- */

.c-app-footer {
  align-items: center;
  background: var(--nguma-navy-deep);
  border-top: 1px solid var(--nguma-on-dark-divider);
  color: var(--nguma-on-dark-text);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  padding: 28px 40px;
}

.c-app-footer__copyright {
  color: var(--nguma-on-dark-text-muted);
  font-size: var(--nguma-text-sm);
}

.c-app-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.c-app-footer__links a {
  color: var(--nguma-on-dark-text);
  font-size: var(--nguma-text-sm);
  text-decoration: none;
  transition: color var(--nguma-transition);
}

.c-app-footer__links a:hover {
  color: var(--nguma-white);
  text-decoration: underline;
}


/* ==========================================================================
   4. Components
   --------------------------------------------------------------------------
   Each component is self-contained. Components are listed alphabetically.
   ========================================================================== */

/* --- c-avatar ------------------------------------------------------------- */

.c-avatar {
  align-items: center;
  background: var(--nguma-navy);
  border-radius: 50%;
  color: var(--nguma-white);
  display: flex;
  flex-shrink: 0;
  font-size: var(--nguma-text-sm);
  font-weight: 700;
  height: 38px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 38px;
}

.c-avatar--sm {
  font-size: var(--nguma-text-xs);
  height: 28px;
  width: 28px;
}

.c-avatar--lg {
  font-size: var(--nguma-text-lg);
  height: 56px;
  width: 56px;
}

/* --- c-banner ------------------------------------------------------------- */
/* Inline alert/notice banner. Sits within page or modal flow to draw attention
   to a condition the user should resolve. The default flavour is amber (warning);
   future variants can add --info, --error, etc.

     <div class="c-banner">
       <svg>…</svg>
       <span>One or more files couldn't be classified.</span>
     </div>
*/

.c-banner {
  align-items: flex-start;
  background: var(--nguma-amber-soft);
  border: 1px solid #FCD34D;
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-amber);
  display: flex;
  font-size: var(--nguma-text-sm);
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
}

.c-banner svg {
  flex-shrink: 0;
  height: 18px;
  margin-top: 1px;
  width: 18px;
}

/* --- c-button ------------------------------------------------------------- */

.c-button {
  align-items: center;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--nguma-radius-sm);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--nguma-font-body);
  font-size: var(--nguma-text-base);
  font-weight: 600;
  gap: 8px;
  padding: 10px 18px;
  text-decoration: none;
  transition: all var(--nguma-transition);
  white-space: nowrap;
}

.c-button svg {
  height: 16px;
  width: 16px;
}

.c-button:focus-visible {
  box-shadow: 0 0 0 3px var(--nguma-focus-ring);
  outline: none;
}

.c-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Variants. Each variant defines its idle and (non-disabled) hover state. */

.c-button--primary {
  background: var(--nguma-gold);
  border-color: var(--nguma-gold);
  color: var(--nguma-white);
}
.c-button--primary:hover:not(:disabled) {
  background: var(--nguma-gold-hover);
  border-color: var(--nguma-gold-hover);
}

.c-button--secondary {
  background: var(--nguma-white);
  border-color: rgba(2, 51, 102, 0.20);
  color: var(--nguma-navy);
}
.c-button--secondary:hover:not(:disabled) {
  background: var(--nguma-navy-tint-hover);
  border-color: var(--nguma-navy);
}

.c-button--ghost {
  color: var(--nguma-ink-mid);
}
.c-button--ghost:hover:not(:disabled) {
  background: var(--nguma-cream);
  color: var(--nguma-navy);
}

.c-button--danger {
  background: var(--nguma-white);
  border-color: rgba(176, 38, 38, 0.30);
  color: var(--nguma-red);
}
.c-button--danger:hover:not(:disabled) {
  background: var(--nguma-red);
  border-color: var(--nguma-red);
  color: var(--nguma-white);
}

/* Size modifier (combine with any variant) */
.c-button--sm {
  font-size: var(--nguma-text-sm);
  padding: 7px 12px;
}
.c-button--sm svg {
  height: 14px;
  width: 14px;
}

/* --- c-button-group ------------------------------------------------------- */
/* A horizontal row of buttons that should sit together as a coherent action
   set. Wraps to multiple lines on narrow viewports. Use inside cards,
   modal sections, or inline content where multiple actions belong with the
   same content block.

     <div class="c-button-group">
       <button class="c-button c-button--secondary">…</button>
       <button class="c-button c-button--secondary">…</button>
     </div>
*/

.c-button-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- c-checkbox-list ------------------------------------------------------ */
/* A vertically-stacked list of items, each toggleable via an in-line
   checkbox. Use for multi-select scenarios where a native <select multiple>
   would feel heavy or where the list is short enough to benefit from
   discoverable click-anywhere-on-the-row affordance.

     <ul class="c-checkbox-list">
       <li class="c-checkbox-list__item">
         <label class="c-checkbox-list__label">
           <input type="checkbox" class="c-checkbox-list__input" value="…" checked>
           <span class="c-checkbox-list__name">Davo Admin</span>
           <span class="c-checkbox-list__meta">Chair</span>
         </label>
       </li>
       …
     </ul>

   The whole row is clickable (label wraps the checkbox). Selected rows
   pick up a soft navy tint to make multi-selection state easy to scan. */

.c-checkbox-list {
  background: var(--nguma-white);
  border: 1px solid var(--nguma-border);
  border-radius: var(--nguma-radius-sm);
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.c-checkbox-list__item {
  border-top: 1px solid var(--nguma-border-soft);
}

.c-checkbox-list__item:first-child {
  border-top: 0;
}

.c-checkbox-list__label {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  transition: background var(--nguma-transition);
}

.c-checkbox-list__label:hover {
  background: var(--nguma-navy-tint-faint);
}

.c-checkbox-list__item:has(.c-checkbox-list__input:checked) .c-checkbox-list__label {
  background: var(--nguma-navy-tint-medium);
}

.c-checkbox-list__input {
  accent-color: var(--nguma-navy);
  cursor: pointer;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.c-checkbox-list__name {
  color: var(--nguma-ink);
  flex: 1;
  font-size: var(--nguma-text-sm);
  font-weight: 500;
}

.c-checkbox-list__item:has(.c-checkbox-list__input:checked) .c-checkbox-list__name {
  color: var(--nguma-navy);
  font-weight: 600;
}

.c-checkbox-list__meta {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-xs);
  font-weight: 500;
}

/* --- c-switch ------------------------------------------------------------- */
/* On/off toggle switch. Used for binary settings where the visible state
   needs to be more arresting than a Yes/No dropdown — feature toggles,
   opt-in flags, etc. Built around a real <input type="checkbox"> so
   keyboard, screen-reader, and form behaviours are native; the visible
   pill + thumb are styled siblings of the hidden checkbox.

     <label class="c-switch">
       <input type="checkbox" class="c-switch__input" id="js-thing">
       <span class="c-switch__track"></span>
     </label>

   For the typical layout inside a c-field-block (eyebrow label on top,
   switch + on/off text on the same row, hint below), see the
   c-switch-row helper below. */

.c-switch {
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
}

/* The native input is hidden but kept in the DOM for accessibility and
   form participation. Sized to overlap the track so click events still
   land on it. */
.c-switch__input {
  cursor: pointer;
  height: 100%;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.c-switch__track {
  background: var(--nguma-border);
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  height: 24px;
  position: relative;
  transition: background var(--nguma-transition);
  width: 44px;
}

/* The thumb is an absolutely-positioned circle on the track. Slides
   right when checked. */
.c-switch__track::after {
  background: var(--nguma-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
  content: '';
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform var(--nguma-transition);
  width: 18px;
}

.c-switch__input:checked + .c-switch__track {
  background: var(--nguma-teal-deep);
}

.c-switch__input:checked + .c-switch__track::after {
  transform: translateX(20px);
}

/* Focus ring — appears when navigating with the keyboard. */
.c-switch__input:focus-visible + .c-switch__track {
  outline: 2px solid var(--nguma-teal-deep);
  outline-offset: 2px;
}

/* Disabled state — muted track, dim thumb, no pointer cursor. */
.c-switch__input:disabled + .c-switch__track {
  cursor: not-allowed;
  opacity: 0.5;
}

/* --- c-switch-row --------------------------------------------------------- */
/* Composition helper for the most common switch layout: switch on the left,
   on/off text label on the right, both on a single row. Pair this with a
   c-eyebrow label above and a c-field-block__hint below for the full
   pattern.

     <div class="c-field-block">
       <label class="c-eyebrow c-field-label" for="js-thing">My setting</label>
       <div class="c-switch-row">
         <label class="c-switch">
           <input type="checkbox" class="c-switch__input" id="js-thing">
           <span class="c-switch__track"></span>
         </label>
         <span class="c-switch-row__state" data-switch-state>Off</span>
       </div>
       <span class="c-field-block__hint">Help text…</span>
     </div>

   The data-switch-state attribute is updated by JS on input change; the
   component itself doesn't manage that text — consumers wire up a one-line
   listener that flips "Off" / "On". */

.c-switch-row {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 4px 0;
}

.c-switch-row__state {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-sm);
  font-weight: 500;
}

/* When the row's switch is checked, surface the on-state colour on the
   inline text too. :has() lets us read the descendant's checked state
   without JS. Falls back gracefully on browsers without :has() — the
   text just stays muted, which is still readable. */
.c-switch-row:has(.c-switch__input:checked) .c-switch-row__state {
  color: var(--nguma-teal-deep);
}

.c-card {
  background: var(--nguma-white);
  border-radius: var(--nguma-radius-lg);
  box-shadow: var(--nguma-shadow-md);
  margin-bottom: 24px;
  overflow: hidden;
}

/* Card header. Lays children out as flex row, so a heading + count (e.g.
   "Source documents" / "2 files") sit on opposite sides naturally. For
   the simpler stacked title + subtitle pattern, just put both inside a
   single child <div>. */
.c-card__header {
  align-items: flex-start;
  border-bottom: 1px solid var(--nguma-border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 20px 24px;
}

/* Card body — padded content area below the header. Provides the standard
   inset for descriptive text, lists, and other content. Use when the card
   has a header (or footer) so the content doesn't butt up against the edges. */
.c-card__body {
  padding: 16px 24px 24px;
}

/* When a body follows a flex header, the body's top padding is the gap
   between header border and content. The header has its own padding;
   the body contributes the gap on its side. */

/* Card title — navy display-font heading inside a card. Used by .c-card,
   .c-edit-zone, and .c-empty-state (via composition). */
.c-card__title,
.c-card-title {
  color: var(--nguma-navy);
  font-family: var(--nguma-font-display);
  font-size: var(--nguma-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

/* Card subtitle — small grey caption below a card title. */
.c-card__subtitle,
.c-card-subtitle {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-sm);
}

/* Card footer — muted bar at the bottom of a card. Used for table-row
   counts, audit metadata, and similar low-emphasis trailing content. */
.c-card__footer {
  align-items: center;
  background: var(--nguma-navy-tint-faint);
  border-top: 1px solid var(--nguma-border-soft);
  color: var(--nguma-ink-light);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--nguma-text-caption);
  gap: 12px;
  justify-content: space-between;
  padding: 12px 20px;
}

/* --- c-report-card -------------------------------------------------------- */
/* A card representing a generated report (or other named deliverable
   artefact). Has a leading icon-or-avatar slot, a header text block
   (eyebrow + title + status pills), an optional metadata row, optional
   body content, and an actions row at the bottom. The default size is
   used for individual candidate reports; the --lg modifier is used for
   prominent "primary" reports such as the overall Selection Report.

     <div class="c-report-card c-report-card--lg">
       <div class="c-report-card__icon">…SVG…</div>
       <div class="c-report-card__main">
         <header class="c-report-card__header">
           <div class="c-report-card__header-text">
             <div class="c-eyebrow">Overall Selection Report</div>
             <h2 class="c-report-card__title">APS 6 / Senior Program Officer — Selection Report</h2>
           </div>
           <div class="c-report-card__pills">
             <span class="c-pill c-pill--draft">Draft</span>
           </div>
         </header>
         <div class="c-report-card__meta">
           <span>Last updated: 5 May 2026, 4:42 PM</span>
           <span class="c-report-card__meta-dot"></span>
           <span>Generated by: Nguma AI</span>
         </div>
         <div class="c-report-card__body">…optional content…</div>
         <div class="c-report-card__actions">…buttons…</div>
       </div>
     </div>
*/

.c-report-card {
  background: var(--nguma-white);
  border: 1px solid var(--nguma-border-soft);
  border-radius: var(--nguma-radius-lg);
  display: grid;
  gap: 16px;
  grid-template-columns: 48px 1fr;
  margin-bottom: 12px;
  padding: 18px 20px;
  transition: border-color var(--nguma-transition), box-shadow var(--nguma-transition);
}

.c-report-card:hover {
  border-color: var(--nguma-border);
}

.c-report-card--lg {
  background: linear-gradient(180deg, var(--nguma-cream) 0%, var(--nguma-white) 80px);
  border-width: 1.5px;
  box-shadow: var(--nguma-shadow-md);
  gap: 20px;
  grid-template-columns: 64px 1fr;
  margin-bottom: 28px;
  padding: 24px 28px;
}

.c-report-card--lg.is-finalised {
  background: linear-gradient(180deg, rgba(63, 122, 107, 0.08) 0%, var(--nguma-white) 80px);
  border-color: rgba(63, 122, 107, 0.25);
}

.c-report-card__icon {
  align-items: center;
  background: var(--nguma-navy-tint-faint);
  border-radius: var(--nguma-radius-md);
  color: var(--nguma-navy);
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.c-report-card__icon svg {
  height: 24px;
  width: 24px;
}

.c-report-card--lg .c-report-card__icon {
  height: 64px;
  width: 64px;
}

.c-report-card--lg .c-report-card__icon svg {
  height: 32px;
  width: 32px;
}

.c-report-card--lg.is-finalised .c-report-card__icon {
  background: rgba(63, 122, 107, 0.12);
  color: var(--nguma-teal-stronger);
}

.c-report-card__main {
  min-width: 0;
}

.c-report-card__header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.c-report-card__header-text {
  flex: 1;
  min-width: 0;
}

.c-report-card__title {
  color: var(--nguma-navy);
  font-family: var(--nguma-font-display);
  font-size: var(--nguma-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 2px 0 0;
}

.c-report-card--lg .c-report-card__title {
  font-size: var(--nguma-text-xl);
}

.c-report-card__pills {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.c-report-card__meta {
  align-items: center;
  color: var(--nguma-ink-light);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--nguma-text-caption);
  gap: 6px 10px;
  margin-bottom: 12px;
}

.c-report-card__meta-dot {
  background: var(--nguma-ink-light);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 3px;
  opacity: 0.6;
  width: 3px;
}

.c-report-card__body {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-sm);
  line-height: 1.55;
  margin-bottom: 14px;
}

.c-report-card__body:last-child {
  margin-bottom: 0;
}

.c-report-card__actions {
  align-items: center;
  border-top: 1px solid var(--nguma-border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
}

/* The --lg variant uses a stronger separator before its actions row to
   reinforce that the actions are a distinct affordance band. */
.c-report-card--lg .c-report-card__actions {
  border-top-color: var(--nguma-border);
  padding-top: 16px;
}

/* Right-aligned action group inside the actions row — typically used to
   place a primary action (e.g. "Finalise") on the right while download
   actions sit on the left. */
.c-report-card__actions-spacer {
  flex: 1;
}

/* --- c-cell-avatar -------------------------------------------------------- */
/* A table-cell layout that pairs a leading avatar with text content
   (typically a .c-cell-stack). Used in lists where each row identifies a
   person (panel members, interview shortlist, etc.).

     <div class="c-cell-avatar">
       <span class="c-avatar">SC</span>
       <div class="c-cell-stack">
         <div class="c-cell-stack__primary">Steve Cheshire</div>
       </div>
     </div>
*/

.c-cell-avatar {
  align-items: center;
  display: flex;
  gap: 12px;
}

/* --- c-cell-actions ------------------------------------------------------- */
/* A row of icon-buttons rendered inside a table cell, typically for
   row-scoped actions (download, open in new tab, etc.). Lays the buttons
   out horizontally with a small gap. The cell click should not bubble to
   the row's onRowClick — the click handlers on the buttons themselves are
   responsible for stopPropagation. */

.c-cell-actions {
  display: flex;
  gap: 4px;
}

/* --- c-cell-stack --------------------------------------------------------- */
/* Two-line cell: bold primary on top, quiet secondary below.
   Used inside table cells for "title + ID", "org + dept", "name + email", etc. */

.c-cell-stack__primary {
  color: var(--nguma-ink);
  font-size: var(--nguma-text-base);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1px;
}

.c-cell-stack__secondary {
  color: var(--nguma-ink-light);
  font-family: var(--nguma-font-mono);
  font-size: var(--nguma-text-caption);
}

/* Use prose font (not mono) for the secondary line, e.g. for a department
   name rather than an ID. */
.c-cell-stack__secondary--prose {
  font-family: var(--nguma-font-body);
}

/* Tertiary line — even quieter than secondary. Used when an entry needs a
   third line of context (e.g. dates below role + organisation). */
.c-cell-stack__tertiary {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-caption);
  margin-top: 2px;
}

/* --- c-confidence-legend -------------------------------------------------- */
/* Three-swatch horizontal legend explaining the confidence colour-coding
   shown on form fields. Each item pairs a coloured rectangle (matching the
   bar that appears on each field) with a short label.

     <div class="c-confidence-legend">
       <div class="c-confidence-legend__item">
         <span class="c-confidence-legend__swatch c-confidence-legend__swatch--high"></span>
         <span><strong>High</strong> — Nguma is confident in the value</span>
       </div>
       <div class="c-confidence-legend__item">…medium…</div>
       <div class="c-confidence-legend__item">…low…</div>
     </div>
*/

.c-confidence-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  max-width: 440px;
  text-align: left;
}

.c-confidence-legend__item {
  align-items: center;
  color: var(--nguma-ink-mid);
  display: flex;
  font-size: var(--nguma-text-sm);
  gap: 12px;
  line-height: 1.4;
}

.c-confidence-legend__item strong {
  color: var(--nguma-ink);
  font-weight: 700;
}

.c-confidence-legend__swatch {
  border-radius: 2px;
  flex-shrink: 0;
  height: 18px;
  width: 6px;
}

.c-confidence-legend__swatch--high   { background: var(--nguma-teal-deep); }
.c-confidence-legend__swatch--medium { background: var(--nguma-confidence-medium); }
.c-confidence-legend__swatch--low    { background: var(--nguma-confidence-low); }

/* --- c-confidence-bar ----------------------------------------------------- */
/* Strong left-edge indicator showing confidence in an extracted field value.
   Inserted into a .c-field-row (or .c-field-block) by wizard JS when the
   draft has a confidence map. Three variants: high (teal), medium (amber),
   low (red). The host gets c-field-row--has-confidence (or
   c-field-block--has-confidence) which adds left padding to make room.

   Optional .is-tinted-{level} on the host adds a faint background wash —
   amplifies presence for "this whole row needs your attention" reading.

     <div class="c-field-row c-field-row--has-confidence">
       <span class="c-confidence-bar c-confidence-bar--high"
             aria-label="High confidence — extracted reliably"></span>
       <label class="c-field-label">…</label>
       <input class="c-field-input">
     </div>
*/

.c-field-row--has-confidence,
.c-field-block--has-confidence {
  padding-left: 18px;
  position: relative;
}

.c-confidence-bar {
  border-radius: 2px;
  bottom: 16px;
  left: 0;
  position: absolute;
  top: 16px;
  width: 6px;
}

.c-confidence-bar--high   { background: var(--nguma-teal-deep); }
.c-confidence-bar--medium { background: var(--nguma-confidence-medium); }
.c-confidence-bar--low    { background: var(--nguma-confidence-low); }

/* Soft red wash on low-confidence rows — fades to the right behind the
   label and input. Reserved for low only: high and medium fields read as
   "you can scan past this" with the bar alone, while low is "look here". */
.c-field-row--has-confidence.is-tinted-low,
.c-field-block--has-confidence.is-tinted-low {
  background: linear-gradient(to right, rgba(220, 38, 38, 0.10), transparent 40%);
}

/* --- c-dot ---------------------------------------------------------------- */
/* Universal small status dot. 8px circle. Use inside pills, save bars, status
   lines, anywhere a coloured indicator is needed. The colour comes from a
   modifier (--active, --paused, etc.) or from a parent (e.g. .c-pill--active
   .c-dot). */

.c-dot {
  background: var(--nguma-ink-light);
  border-radius: 50%;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}

.c-dot--active   { background: var(--nguma-teal-deep); }
.c-dot--paused   { background: var(--nguma-amber); }
.c-dot--draft    { background: var(--nguma-ink-light); }
.c-dot--closed   { background: var(--nguma-navy); }
.c-dot--idle     { background: var(--nguma-ink-light); }
.c-dot--unsaved  { background: var(--nguma-gold); }
.c-dot--error    { background: var(--nguma-red); }

/* --- c-dropzone ----------------------------------------------------------- */
/* Drag-and-drop file zone. Use as a button-shaped target with a dashed
   border that highlights on hover or while a file is being dragged over it.
   The zone also accepts click-to-browse via a hidden <input type="file">.

     <div class="c-dropzone" id="…" tabindex="0" role="button">
       <svg class="c-dropzone__icon">…</svg>
       <div class="c-card-title">Drop files here</div>
       <div class="c-dropzone__subtitle">or browse</div>
       <div class="c-dropzone__formats">PDF, DOCX • up to 25 MB each</div>
       <input type="file" hidden>
     </div>
*/

.c-dropzone {
  background: var(--nguma-cream);
  border: 2px dashed var(--nguma-border);
  border-radius: var(--nguma-radius-md);
  cursor: pointer;
  padding: 40px 24px;
  text-align: center;
  transition: all var(--nguma-transition);
}

.c-dropzone:hover,
.c-dropzone.is-dragging {
  background: var(--nguma-navy-tint-hover);
  border-color: var(--nguma-navy);
}

.c-dropzone__icon {
  color: var(--nguma-navy);
  height: 48px;
  margin: 0 auto 12px;
  opacity: 0.7;
  width: 48px;
}

.c-dropzone__subtitle {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-sm);
  margin-bottom: 14px;
}

.c-dropzone__formats {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-xs);
  margin-top: 12px;
}

/* Inline link affordance — used inside the subtitle to indicate "click here"
   (e.g. "or browse to upload"). Gold underline that picks up the hover state
   of the parent dropzone implicitly. */
.c-dropzone__link {
  color: var(--nguma-gold);
  font-weight: 600;
  text-decoration: underline;
}

/* Row modifier — converts the dropzone to a horizontal action button.
   Used as a click-to-add row (e.g. "Add new criterion", "Add new file").
   The default vertical layout becomes a single-line flex row with an icon
   on the left, and the hover accent shifts from navy (drop-target affordance)
   to gold (action affordance). Children are simpler: wrap the icon in an
   .c-dropzone__row-icon span and put the label text inline. */

.c-dropzone--row {
  align-items: center;
  background: var(--nguma-white);
  border-style: dashed;
  color: var(--nguma-ink-light);
  display: flex;
  flex-direction: row;
  font-family: var(--nguma-font-body);
  font-size: var(--nguma-text-base);
  font-weight: 600;
  gap: 14px;
  padding: 18px 28px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.c-dropzone--row:hover,
.c-dropzone--row:focus-visible {
  background: rgba(192, 69, 17, 0.025);
  border-color: var(--nguma-gold);
  box-shadow: 0 0 0 3px var(--nguma-focus-ring);
  color: var(--nguma-gold);
  outline: none;
}

.c-dropzone__row-icon {
  align-items: center;
  background: var(--nguma-cream);
  border-radius: 50%;
  color: var(--nguma-ink-light);
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  transition: all var(--nguma-transition);
  width: 32px;
}

.c-dropzone--row:hover .c-dropzone__row-icon,
.c-dropzone--row:focus-visible .c-dropzone__row-icon {
  background: var(--nguma-gold);
  color: var(--nguma-white);
}

.c-dropzone__row-icon svg {
  height: 16px;
  width: 16px;
}

/* --- c-edit-zone ---------------------------------------------------------- */
/* A helper class that any element can carry to mark itself as a region whose
   contents toggle between display mode and edit mode. Adding .is-display or
   .is-edit shows or hides children marked with .c-edit-zone__display /
   .c-edit-zone__edit. Any number of edit-zones can coexist on a page; toggle
   them independently or together as needed.

     <section class="c-card c-edit-zone is-display">
       <div class="c-edit-zone__display">…read-only view…</div>
       <div class="c-edit-zone__edit">…form inputs…</div>
     </section>

   The .c-field-row pattern composes with this: .c-field-row__display and
   .c-field-row__edit are conventional aliases for this behaviour at the
   row level, so existing field-row markup continues to work unchanged.

   For pages with a single page-wide edit session (e.g. selection criteria),
   the edit-zone can be on the <main> or <form> element so that out-of-card
   chrome (toolbars, summary bars) participates in the same toggle. */

.c-edit-zone.is-display .c-edit-zone__edit,
.c-edit-zone.is-display .c-field-row__edit    { display: none; }

.c-edit-zone.is-edit    .c-edit-zone__display,
.c-edit-zone.is-edit    .c-field-row__display { display: none; }

/* --- c-empty-state -------------------------------------------------------- */
/* Used inside table cards when there are no rows to show, and on standalone
   pages with no content. Includes optional icon + title + body. */

.c-empty-state {
  padding: 56px 24px;
  text-align: center;
}

.c-empty-state__icon {
  align-items: center;
  background: var(--nguma-navy-tint-medium);
  border-radius: 50%;
  color: var(--nguma-navy);
  display: flex;
  height: 56px;
  justify-content: center;
  margin: 0 auto 16px;
  width: 56px;
}

.c-empty-state__icon svg {
  height: 26px;
  width: 26px;
}

/* The title (.c-card-title) and body text below sit directly inside the
   .c-empty-state container; the body uses .c-empty-state__body for its
   centred max-width treatment. */

.c-empty-state__body {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-base);
  line-height: 1.5;
  margin: 0 auto 20px;
  max-width: 420px;
}

/* --- c-extract-done ------------------------------------------------------- */
/* "Extraction complete" success state shown at the end of an upload-and-
   extract sequence. Centred layout with a teal success icon, a heading,
   a subtitle, and a numeric summary strip showing what was extracted /
   suggested / blank. Used by the Source Files upload modal and the Add
   Job ATS / Upload flows. */

.c-extract-done {
  padding: 32px 20px;
  text-align: center;
}

.c-extract-done__icon {
  align-items: center;
  background: var(--nguma-teal-deep);
  border-radius: 50%;
  color: var(--nguma-white);
  display: flex;
  height: 56px;
  justify-content: center;
  margin: 0 auto 16px;
  width: 56px;
}

.c-extract-done__icon svg {
  height: 28px;
  width: 28px;
}

.c-extract-done__subtitle {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-sm);
  margin: 0 auto 20px;
  max-width: 420px;
}

.c-extract-done__summary {
  background: var(--nguma-cream);
  border-radius: var(--nguma-radius-sm);
  display: inline-flex;
  gap: 24px;
  margin-top: 8px;
  padding: 14px 22px;
}

.c-extract-done__summary-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.c-extract-done__summary-label {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- c-extracting --------------------------------------------------------- */
/* "Extracting…" loading state used during an upload-and-extract sequence.
   Shows a current-step caption, a progress bar, and a list of named steps
   that turn from grey to gold (active) to teal (done) as work progresses. */

.c-extracting {
  padding: 40px 20px;
  text-align: center;
}

.c-extracting__progress {
  margin: 20px auto;
  max-width: 400px;
}

.c-extracting__step {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c-extracting__steps-list {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin-top: 24px;
  text-align: left;
}

.c-extracting__step-item {
  align-items: center;
  color: var(--nguma-ink-light);
  display: flex;
  font-size: var(--nguma-text-sm);
  gap: 10px;
}

.c-extracting__step-item--done   { color: var(--nguma-ink-mid); }
.c-extracting__step-item--active { color: var(--nguma-navy); font-weight: 600; }

/* Reserve the bold-weight width on every label so the row's overall width
   is identical regardless of which step is active. Without this, the list's
   inline-flex width changes as different items become bold, causing the
   centred block to jitter horizontally each step. The ::before holds the
   bold version invisibly above and provides the layout width; the actual
   text sits below at the same width. */
.c-extracting__step-label {
  display: inline-block;
  position: relative;
}

.c-extracting__step-label::before {
  content: attr(data-label);
  display: block;
  font-weight: 600;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.c-extracting__step-icon {
  align-items: center;
  background: var(--nguma-border);
  border-radius: 50%;
  color: var(--nguma-white);
  display: flex;
  flex-shrink: 0;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.c-extracting__step-item--done .c-extracting__step-icon {
  background: var(--nguma-teal-deep);
}

.c-extracting__step-item--active .c-extracting__step-icon {
  animation: nguma-pulse 1.4s ease-in-out infinite;
  background: var(--nguma-gold);
}

.c-extracting__step-icon svg {
  height: 11px;
  width: 11px;
}

/* --- c-eyebrow ------------------------------------------------------------ */
/* Small uppercase label that sits above a heading. Used standalone, and
   extended by .c-field-label for form-field labels. */

.c-eyebrow {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-xs);
  font-weight: 700;
  letter-spacing: var(--nguma-tracking-uppercase);
  text-transform: uppercase;
}

/* When an eyebrow precedes content, give a small visible gap. Form contexts
   (.c-field-label) opt out — those rely on container flex gap instead. */
.c-eyebrow:not(.c-field-label) + * {
  margin-top: 4px;
}

/* --- c-field-block ------------------------------------------------------- */
/* A compact label+content pair, used inside cards/wizards/modals where forms
   need a tighter layout than the full .c-field-row pattern. The label sits
   flush above the content with a small gap; no separator borders, no inset
   padding. Content can be an input (edit mode) or a static value (display
   mode) — the same component handles both.

   Edit mode:
     <div class="c-field-block">
       <label class="c-eyebrow c-field-label">Name</label>
       <input class="c-field-input">
     </div>

   Display mode:
     <div class="c-field-block">
       <span class="c-eyebrow c-field-label">Name</span>
       <span class="c-field-block__value">Davo Admin</span>
     </div>

   Field-blocks can be laid out side-by-side in a .c-field-stack--cols-2
   (two-column) or .c-field-stack--12col (twelve-column) grid; the
   --span-6 / --span-12 modifiers control width within the 12-col grid. */

.c-field-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Static value displayed in place of an input (read-only contexts). */
.c-field-block__value {
  color: var(--nguma-ink);
  font-size: var(--nguma-text-md);
  line-height: 1.5;
  min-height: 24px;
  word-wrap: break-word;
}

/* Muted treatment for empty/unprovided values (e.g. "Not provided"). */
.c-field-block__value--muted {
  color: var(--nguma-ink-light);
  font-style: italic;
}

/* Helper text below an input — small grey caption. */
.c-field-block__hint {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-xs);
  line-height: 1.4;
  margin-top: 2px;
}

/* Width modifiers for use inside a .c-field-stack--12col grid. */
.c-field-block--span-4  { grid-column: span 4; }
.c-field-block--span-6  { grid-column: span 6; }
.c-field-block--span-12 { grid-column: span 12; }

@media (max-width: 640px) {
  .c-field-block--span-4,
  .c-field-block--span-6,
  .c-field-block--span-12 { grid-column: span 12; }
}

/* --- c-field-label -------------------------------------------------------- */
/* Eyebrow-styled label for form fields. Extends .c-eyebrow and adds flex
   alignment so the optional required-asterisk sits inline with the label
   text. Apply both classes: <label class="c-eyebrow c-field-label"> */

.c-field-label {
  align-items: center;
  display: flex;
  gap: 6px;
}

.c-field-label--required::after {
  color: var(--nguma-gold);
  content: ' *';
}

/* --- c-field-input / c-field-select / c-field-textarea -------------------- */
/* Form inputs. All three share border, padding, focus ring, and error state.
   The select adds a custom chevron via a data-URL background image; the
   textarea overrides font-size and adds resize + min-height. */

.c-field-input,
.c-field-select,
.c-field-textarea {
  background: var(--nguma-white);
  border: 1.5px solid var(--nguma-border);
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-ink);
  font-family: var(--nguma-font-body);
  font-size: 15px;
  padding: 9px 12px;
  transition:
    border-color var(--nguma-transition),
    box-shadow var(--nguma-transition);
  width: 100%;
}

.c-field-input:focus,
.c-field-select:focus,
.c-field-textarea:focus {
  border-color: var(--nguma-navy);
  box-shadow: 0 0 0 3px rgba(2, 51, 102, 0.12);
  outline: none;
}

.c-field-textarea {
  font-size: var(--nguma-text-base);
  line-height: 1.5;
  min-height: 90px;
  resize: vertical;
}

.c-field-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 36px;
}

/* Multi-select variant — strips the dropdown chevron and removes the
   right-padding the chevron reserved, since multi-selects render as a
   visible list box rather than a dropdown. Each option gets vertical
   padding so check states are clearly tappable. */
.c-field-select--multi {
  background-image: none;
  padding: 6px 12px;
}

.c-field-select--multi option {
  padding: 6px 8px;
}

.c-field-select--multi option:checked {
  background: var(--nguma-navy-tint-medium) linear-gradient(0deg, var(--nguma-navy-tint-medium), var(--nguma-navy-tint-medium));
  color: var(--nguma-navy);
  font-weight: 600;
}

/* Error state. Apply .has-error directly to the input, or to a wrapping
   element that contains the input — both selectors below cover that. */

.c-field-input.has-error,
.c-field-select.has-error,
.c-field-textarea.has-error,
.has-error .c-field-input,
.has-error .c-field-select,
.has-error .c-field-textarea {
  border-color: var(--nguma-red);
  box-shadow: 0 0 0 3px rgba(176, 38, 38, 0.12);
}

/* --- c-field-error -------------------------------------------------------- */
/* Inline error message that pairs with a form field. Hidden by default;
   becomes visible when an ancestor with .has-error is present. */

.c-field-error {
  color: var(--nguma-red);
  display: none;
  font-size: var(--nguma-text-caption);
  margin-top: 4px;
}

.has-error > .c-field-error,
.has-error .c-field-error {
  display: block;
}

/* --- c-field-row / c-fields-grid ----------------------------------------- */
/* A row inside a card that pairs a label with a value (in display mode)
   or an input (in edit mode). The row's own structure handles the spacing;
   the label, display, edit, error elements are conventional names that the
   .c-edit-zone mode-toggle relies on.

     <div class="c-fields-grid">
       <div class="c-field-row">
         <label class="c-eyebrow c-field-label">…</label>
         <div   class="c-field-row__display c-field-row__value">…</div>
         <input class="c-field-row__edit    c-field-input">
         <div   class="c-field-error">…</div>
       </div>
     </div>

   Required-field marking and error styling come from .c-field-label--required
   and .has-error respectively (both already global). */

.c-fields-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

/* Two-column variant — used as a sub-grid for paired related fields (e.g.
   Gazette ID + Date Posted on the job-details page). The horizontal gap
   provides breathing room between the two cells. The per-cell bottom
   border is suppressed and a single grid-level border replaces it, so the
   row separator spans the full width and visually matches surrounding
   single-column rows. Below 640px both cells stack vertically. */
.c-fields-grid--cols-2 {
  border-bottom: 1px solid var(--nguma-border-soft);
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

.c-fields-grid--cols-2 > .c-field-row {
  border-bottom: 0;
}

.c-fields-grid--cols-2:last-child {
  border-bottom: 0;
}

@media (max-width: 640px) {
  .c-fields-grid--cols-2 {
    grid-template-columns: 1fr;
  }
  /* When stacked, restore per-row borders so each gets its own separator,
     except the last to avoid doubling with the grid-level border. */
  .c-fields-grid--cols-2 > .c-field-row {
    border-bottom: 1px solid var(--nguma-border-soft);
  }
  .c-fields-grid--cols-2 > .c-field-row:last-child {
    border-bottom: 0;
  }
}

.c-field-row {
  border-bottom: 1px solid var(--nguma-border-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 24px;
}

.c-field-row:last-child {
  border-bottom: none;
}

.c-field-row__value {
  color: var(--nguma-ink);
  font-size: var(--nguma-text-md);
  line-height: 1.5;
  min-height: 24px;
  word-wrap: break-word;
}

/* Prose values use the body text size (14px) and preserve line breaks.
   The smaller size matches what the original prototype used for long-form
   text — keeps multi-line descriptions visually quieter than terse single
   values. */
.c-field-row__value--prose {
  font-size: var(--nguma-text-base);
  white-space: pre-wrap;
}

/* Body-size variant without whitespace preservation. Use when long-form
   values should keep the quieter size but still collapse extra whitespace. */
.c-field-row__value--body {
  font-size: var(--nguma-text-base);
}

/* --- c-field-stack -------------------------------------------------------- */
/* A vertical stack of .c-field-block items with comfortable spacing between
   them. Use inside cards or wizards for forms that don't need the
   border-separated row treatment of .c-fields-grid. The --cols-2 modifier
   lays out two field-blocks side by side (one row); useful for paired
   inputs like "Weight" + "Max score".

     <div class="c-field-stack">
       <div class="c-field-block">…</div>
       <div class="c-field-block">…</div>
       <div class="c-field-stack c-field-stack--cols-2">
         <div class="c-field-block">…</div>
         <div class="c-field-block">…</div>
       </div>
     </div>
*/

.c-field-stack {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.c-field-stack--cols-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Twelve-column variant. Pairs with c-field-block--span-6 / --span-12 modifiers
   on each child block to control width within the grid. Below 640px, all
   blocks collapse to span-12 (one per row) — this is built into the span
   modifiers themselves rather than overridden here. */
.c-field-stack--12col {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px 16px;
}

/* --- c-file-icon ---------------------------------------------------------- */
/* Document-shape file-type icon with a coloured tag across the bottom showing
   the format (PDF, DOCX, etc.). The shape is an inline <svg> in markup; the
   colour family is set via .c-file-icon--<ext> on the wrapper. The default
   tag and stroke colour are the neutral ink-light; specific extensions get
   their own colours.

     <div class="c-file-icon c-file-icon--pdf">
       <svg class="c-file-icon__shape" viewBox="0 0 40 48">…</svg>
       <span class="c-file-icon__tag">PDF</span>
     </div>
*/

.c-file-icon {
  align-items: flex-end;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  padding-bottom: 6px;
  position: relative;
  width: 40px;
}

.c-file-icon__shape {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.c-file-icon__shape path {
  fill: var(--nguma-white);
  stroke: var(--nguma-ink-light);
  stroke-width: 1.4;
}

.c-file-icon__shape .corner-fold {
  fill: var(--nguma-cream);
  stroke: var(--nguma-ink-light);
}

.c-file-icon__tag {
  background: var(--nguma-ink-light);
  border-radius: 2px;
  color: var(--nguma-white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 2px 6px;
  position: relative;
  z-index: 1;
}

/* Colour families per file type. Each variant tints both the tag background
   and the document outline so the icon reads as that file type at a glance. */
.c-file-icon--pdf  .c-file-icon__tag { background: #B91C1C; }
.c-file-icon--pdf  .c-file-icon__shape path,
.c-file-icon--pdf  .c-file-icon__shape .corner-fold { stroke: rgba(185, 28, 28, 0.50); }

.c-file-icon--docx .c-file-icon__tag,
.c-file-icon--doc  .c-file-icon__tag { background: #1E40AF; }
.c-file-icon--docx .c-file-icon__shape path,
.c-file-icon--doc  .c-file-icon__shape path,
.c-file-icon--docx .c-file-icon__shape .corner-fold,
.c-file-icon--doc  .c-file-icon__shape .corner-fold { stroke: rgba(30, 64, 175, 0.50); }

.c-file-icon--xlsx .c-file-icon__tag,
.c-file-icon--xls  .c-file-icon__tag,
.c-file-icon--csv  .c-file-icon__tag { background: #166534; }
.c-file-icon--xlsx .c-file-icon__shape path,
.c-file-icon--xls  .c-file-icon__shape path,
.c-file-icon--csv  .c-file-icon__shape path,
.c-file-icon--xlsx .c-file-icon__shape .corner-fold,
.c-file-icon--xls  .c-file-icon__shape .corner-fold,
.c-file-icon--csv  .c-file-icon__shape .corner-fold { stroke: rgba(22, 101, 52, 0.50); }

.c-file-icon--pptx .c-file-icon__tag,
.c-file-icon--ppt  .c-file-icon__tag { background: #C2410C; }
.c-file-icon--pptx .c-file-icon__shape path,
.c-file-icon--ppt  .c-file-icon__shape path,
.c-file-icon--pptx .c-file-icon__shape .corner-fold,
.c-file-icon--ppt  .c-file-icon__shape .corner-fold { stroke: rgba(194, 65, 12, 0.50); }

.c-file-icon--txt  .c-file-icon__tag { background: var(--nguma-ink-mid); }

/* Audio formats. Soft purple distinguishes audio media from documents at a
   glance — useful for transcript files, recordings, and similar. */
.c-file-icon--mp3  .c-file-icon__tag,
.c-file-icon--m4a  .c-file-icon__tag,
.c-file-icon--wav  .c-file-icon__tag { background: #6D28D9; }
.c-file-icon--mp3  .c-file-icon__shape path,
.c-file-icon--m4a  .c-file-icon__shape path,
.c-file-icon--wav  .c-file-icon__shape path,
.c-file-icon--mp3  .c-file-icon__shape .corner-fold,
.c-file-icon--m4a  .c-file-icon__shape .corner-fold,
.c-file-icon--wav  .c-file-icon__shape .corner-fold { stroke: rgba(109, 40, 217, 0.50); }

/* Smaller variant — used inside compact lists like the wizard's staged-row. */
.c-file-icon--sm {
  height: 38px;
  padding-bottom: 5px;
  width: 32px;
}

.c-file-icon--sm .c-file-icon__tag {
  font-size: 8px;
  padding: 1.5px 5px;
}

/* --- c-file-row ----------------------------------------------------------- */
/* A row in a list of files. Default is a flat row with a bottom separator;
   the --boxed modifier wraps each row in its own bordered card (used inside
   wizards where rows are discrete pending items, not yet committed to a list).

     <ul class="c-file-list">
       <li class="c-file-row">
         <div class="c-file-icon c-file-icon--pdf">…</div>
         <div class="c-file-row__main">
           <div class="c-file-row__name">file.pdf</div>
           <div class="c-file-row__meta">…meta items…</div>
         </div>
         <div class="c-file-row__actions">…buttons…</div>
       </li>
     </ul>
*/

.c-file-list {
  list-style: none;
}

.c-file-row {
  align-items: center;
  border-bottom: 1px solid var(--nguma-border);
  display: grid;
  gap: 16px;
  grid-template-columns: auto 1fr auto auto;
  padding: 18px 0;
}

.c-file-row:last-child {
  /* border-bottom: none; */
}

/* Boxed variant. Each row becomes its own bordered card with rounded corners
   and a small bottom margin, suitable for staged/pending items inside wizards. */
.c-file-row--boxed {
  background: var(--nguma-white);
  border: 1px solid var(--nguma-border-soft);
  border-radius: var(--nguma-radius-sm);
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 14px;
}

.c-file-row__main {
  min-width: 0;
}

.c-file-row__name {
  color: var(--nguma-ink);
  font-size: var(--nguma-text-base);
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-all;
}

.c-file-row--boxed .c-file-row__name {
  font-size: var(--nguma-text-sm);
  margin-bottom: 2px;
}

.c-file-row__meta {
  align-items: center;
  color: var(--nguma-ink-light);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--nguma-text-caption);
  gap: 12px;
}

.c-file-row__meta-item {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

/* Tiny separator dot between meta items */
.c-file-row__meta-dot {
  background: var(--nguma-ink-light);
  border-radius: 50%;
  display: inline-block;
  height: 3px;
  width: 3px;
}

.c-file-row__used-for {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-xs);
  margin-top: 4px;
}

.c-file-row__used-for-label {
  color: var(--nguma-ink-mid);
  font-weight: 600;
}

.c-file-row__actions {
  align-items: center;
  display: flex;
  gap: 4px;
}

/* --- c-filter-chip / c-filter-chips -------------------------------------- */

.c-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c-filter-chip {
  align-items: center;
  background: var(--nguma-cream);
  border: 1.5px solid transparent;
  border-radius: var(--nguma-radius-pill);
  color: var(--nguma-ink-mid);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--nguma-font-body);
  font-size: var(--nguma-text-sm);
  font-weight: 500;
  gap: 6px;
  padding: 6px 12px;
  transition: all var(--nguma-transition);
}

.c-filter-chip:hover {
  border-color: rgba(2, 51, 102, 0.20);
  color: var(--nguma-navy);
}

.c-filter-chip.is-active {
  background: var(--nguma-navy);
  border-color: var(--nguma-navy);
  color: var(--nguma-white);
}

.c-filter-chip__count {
  background: var(--nguma-white);
  border-radius: var(--nguma-radius-pill);
  color: var(--nguma-navy);
  font-size: var(--nguma-text-xs);
  font-weight: 700;
  padding: 1px 7px;
}

.c-filter-chip.is-active .c-filter-chip__count {
  background: rgba(255, 255, 255, 0.20);
  color: var(--nguma-white);
}

/* --- c-heading-xl --------------------------------------------------------- */
/* Display-style heading. Used for modal titles and other prominent headings
   inside a card or panel. */

.c-heading-xl {
  color: var(--nguma-navy);
  font-family: var(--nguma-font-display);
  font-size: var(--nguma-text-xl);
  font-weight: 700;
  line-height: 1.25;
  word-wrap: break-word;
}

/* --- c-icon-button -------------------------------------------------------- */
/* Borderless square button used for icon-only actions inside rows, headers,
   and overflow menus. Renders at 32×32 by default; the --sm modifier shrinks
   it to 28×28 for compact contexts. The internal icon picks up currentColor.

     <button class="c-icon-button" aria-label="…">
       <svg>…</svg>
     </button>
*/

.c-icon-button {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-ink-light);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  transition: all var(--nguma-transition);
  width: 32px;
}

.c-icon-button svg {
  height: 16px;
  width: 16px;
}

.c-icon-button:hover {
  background: var(--nguma-cream);
  color: var(--nguma-navy);
}

.c-icon-button:focus-visible {
  box-shadow: 0 0 0 2px var(--nguma-focus-ring);
  outline: none;
}

/* Smaller variant — used inside compact rows like staged-row remove buttons. */
.c-icon-button--sm {
  height: 28px;
  width: 28px;
}

.c-icon-button--sm svg {
  height: 14px;
  width: 14px;
}

/* --- c-input-suffix ------------------------------------------------------- */
/* Wrapper around a .c-field-input that adds a trailing unit label inside
   the input's right edge (e.g. "%", "kg", "$"). The input itself gets
   right-padding so the value never overlaps the suffix.

     <div class="c-input-suffix">
       <input class="c-field-input" type="number" value="11">
       <span class="c-input-suffix__unit">%</span>
     </div>
*/

.c-input-suffix {
  align-items: center;
  display: flex;
  position: relative;
}

.c-input-suffix .c-field-input {
  padding-right: 36px;
}

.c-input-suffix__unit {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-sm);
  font-weight: 500;
  pointer-events: none;
  position: absolute;
  right: 14px;
}

/* --- c-menu-list ---------------------------------------------------------- */
/* Vertical navigation list with optional expandable sub-lists.
   Used inside .c-app-sidebar but free-standing — could be used in any
   navigation context. Active items get a gold accent strip on the left edge
   via the ::before pseudo-element. */

.c-menu-list {
  list-style: none;
}

.c-menu-item {
  align-items: center;
  border-bottom: 1px solid var(--nguma-border-soft);
  color: var(--nguma-ink-mid);
  display: flex;
  font-size: var(--nguma-text-base);
  font-weight: 500;
  gap: 12px;
  padding: 14px 24px;
  position: relative;
  text-decoration: none;
  transition: background var(--nguma-transition), color var(--nguma-transition);
}

.c-menu-item:hover {
  background: var(--nguma-cream);
  color: var(--nguma-navy);
}

/* Left-edge accent. Hidden by default (zero-width); revealed on active. */
.c-menu-item::before {
  background: var(--nguma-gold);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  top: 0;
  transition: width var(--nguma-transition);
  width: 0;
}

.c-menu-item.is-active {
  background: var(--nguma-navy-tint-hover);
  color: var(--nguma-navy);
  font-weight: 600;
}

.c-menu-item.is-active::before {
  width: 3px;
}

.c-menu-list > li.is-expanded > .c-menu-item .c-menu-item__chevron {
  transform: rotate(90deg);
}

.c-menu-item__icon {
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}

.c-menu-item__label {
  flex: 1;
}

.c-menu-item__chevron {
  color: var(--nguma-ink-light);
  flex-shrink: 0;
  height: 14px;
  transition: transform var(--nguma-transition);
  width: 14px;
}

/* Sub-list (expandable section under a c-menu-item). Hidden by default;
   the parent <li> gets .is-expanded to reveal the sublist. */
.c-menu-sublist {
  background: var(--nguma-navy-tint-faint);
  border-bottom: 1px solid var(--nguma-border-soft);
  display: none;
  list-style: none;
}

.c-menu-list > li.is-expanded > .c-menu-sublist {
  display: block;
}

.c-menu-subitem {
  align-items: center;
  color: var(--nguma-ink-mid);
  display: flex;
  font-size: var(--nguma-text-sm);
  font-weight: 500;
  gap: 8px;
  padding: 10px 24px 10px 56px;
  position: relative;
  text-decoration: none;
  transition: background var(--nguma-transition), color var(--nguma-transition);
}

.c-menu-subitem::before {
  background: var(--nguma-ink-light);
  border-radius: 50%;
  content: '';
  height: 4px;
  left: 36px;
  opacity: 0.4;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all var(--nguma-transition);
  width: 4px;
}

.c-menu-subitem:hover {
  background: var(--nguma-navy-tint-hover);
  color: var(--nguma-navy);
}

.c-menu-subitem:hover::before {
  opacity: 0.8;
}

.c-menu-subitem.is-active {
  background: var(--nguma-navy-tint-medium);
  color: var(--nguma-navy);
  font-weight: 600;
}

.c-menu-subitem.is-active::before {
  background: var(--nguma-gold);
  height: 6px;
  opacity: 1;
  width: 6px;
}

/* --- c-modal -------------------------------------------------------------- */
/* Overlay-anchored dialog. Three size modifiers; substructure (header, body,
   footer) is optional for simple modals that just want title + body + actions. */

.c-modal-overlay {
  align-items: center;
  backdrop-filter: blur(2px);
  background: rgba(2, 31, 66, 0.45);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 200;
}

.c-modal-overlay.is-open {
  animation: nguma-fade-in 0.18s ease;
  display: flex;
}

/* When a modal opens on top of another modal (e.g. a confirm dialog
   triggered from inside the templates modal), apply this modifier so its
   overlay sits above the parent modal's stacking context and accepts
   pointer events. The parent modal's content would otherwise intercept
   clicks because both overlays sit at the default z-index. */
.c-modal-overlay--stacked {
  z-index: 210;
}

.c-modal {
  animation: nguma-modal-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--nguma-white);
  border-radius: var(--nguma-radius-md);
  box-shadow: var(--nguma-shadow-lg);
  max-width: 480px;
  padding: 32px;
  position: relative;
  width: 100%;
}

/* Size modifiers. Larger sizes also flip to flex-column with internal scroll
   so __header / __body / __footer can stack with a scrollable body. */

.c-modal--lg,
.c-modal--xl,
.c-modal--xxl {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  padding: 0;
}

.c-modal--lg > form,
.c-modal--xl > form,
.c-modal--xxl > form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.c-modal--lg  { max-width: 680px; }
.c-modal--xl  { max-width: 720px; }
.c-modal--xxl { max-width: 1024px; }

/* Substructure (used by the larger sizes; optional) */

.c-modal__header {
  align-items: center;
  border-bottom: 1px solid var(--nguma-border-soft);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 22px 28px 18px;
}

/* Text block inside the header — the flex-grow container that holds the
   eyebrow + title. Pairs with a leading avatar/icon and trailing close button. */
.c-modal__header-text {
  flex: 1;
  min-width: 0;
}

.c-modal__body {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-base);
  line-height: 1.6;
  margin-bottom: 24px;
}

.c-modal--lg .c-modal__body,
.c-modal--xl .c-modal__body,
.c-modal--xxl .c-modal__body {
  flex: 1;
  margin-bottom: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px;
}

/* Centred-content modifier — used in success / completion states where the
   modal body is a vertical stack of icon, title, and supporting text. */
.c-modal__body--centered {
  text-align: center;
}

.c-modal__body--centered > * + * {
  margin-top: 16px;
}

.c-modal__footer {
  align-items: center;
  background: var(--nguma-navy-tint-faint);
  border-top: 1px solid var(--nguma-border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 28px;
}

/* Muted-text caption inside a modal footer (e.g. "Last updated …" or
   "No files added yet"). Sits on the left side of the footer's flex row. */
.c-modal__footer-status {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-sm);
}

/* Container for action buttons on the right side of a modal footer. Lays
   children out as flex-row with gap. Multiple groups can sit side-by-side
   (e.g. for view-mode vs edit-mode action sets toggled by .c-edit-zone). */
.c-modal__footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.c-modal__title {
  margin-bottom: 12px;
}

.c-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* When .c-modal__actions is used inside an lg/xl modal (which has padding:0
   on the modal itself), it needs explicit padding so buttons aren't flush
   against the modal edges. The footer-style border separates it from the
   body for visual continuity with .c-modal__footer. */
.c-modal--lg .c-modal__actions,
.c-modal--xl .c-modal__actions,
.c-modal--xxl .c-modal__actions {
  border-top: 1px solid var(--nguma-border-soft);
  margin-top: 0;
  padding: 16px 28px;
}

.c-modal__close {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-ink-light);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  transition: all var(--nguma-transition);
  width: 36px;
}

.c-modal__close svg {
  height: 18px;
  width: 18px;
}

.c-modal__close:hover {
  background: var(--nguma-cream);
  color: var(--nguma-navy);
}

/* Multi-stage modal content. A modal can host several mutually-exclusive
   stages (e.g. an upload-and-extract sequence: choose source → extract →
   done). Only the .is-active stage is visible at a time, and switching
   triggers a fade-in animation.

     <div class="c-modal__body">
       <div class="c-modal__stage is-active" data-stage="select">…</div>
       <div class="c-modal__stage" data-stage="extracting">…</div>
       <div class="c-modal__stage" data-stage="done">…</div>
     </div>

   Toggle by adding/removing the .is-active class via JS. */

.c-modal__stage { display: none; }

.c-modal__stage.is-active {
  animation: nguma-fade-in 0.2s ease;
  display: block;
}

/* --- c-page-header -------------------------------------------------------- */

.c-page-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.c-page-header__title-block {
  flex: 1;
  min-width: 0;
}

.c-page-header__eyebrow {
  margin-bottom: 6px;
}

.c-page-header__title {
  color: var(--nguma-navy);
  font-family: var(--nguma-font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.c-page-header__subtitle {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-base);
  margin-top: 8px;
  max-width: 720px;
}

.c-page-header__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- c-pill --------------------------------------------------------------- */
/* Single component covering both neutral pills and status pills.
   Status variants set background and text colour; the optional .c-dot child
   inherits its colour from the matching .c-pill--<status> rule. */

.c-pill {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--nguma-radius-pill);
  display: inline-flex;
  font-size: var(--nguma-text-caption);
  font-weight: 600;
  gap: 6px;
  letter-spacing: 0.01em;
  line-height: 1.4;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Status variants. Background + text colour pair. Dot colour is inherited
   from the c-dot itself when used with a c-dot--<status> modifier. */

.c-pill--active {
  background: rgba(63, 122, 107, 0.12);
  color: var(--nguma-teal-stronger);
}

.c-pill--paused {
  background: rgba(180, 83, 9, 0.10);
  color: var(--nguma-amber);
}

.c-pill--draft {
  background: rgba(107, 114, 128, 0.10);
  color: var(--nguma-ink-mid);
}

.c-pill--closed {
  background: rgba(2, 51, 102, 0.08);
  color: var(--nguma-navy);
}

/* Neutral / informational variant — quieter navy tint. Used for "category"
   labels like document types where the pill is descriptive rather than a
   status. */
.c-pill--neutral {
  background: var(--nguma-navy-tint-medium);
  color: var(--nguma-navy);
}

/* Amber-soft variant. Used for in-progress states (e.g. "Identifying type…"
   on staged files while a classifier is running). */
.c-pill--amber-soft {
  background: var(--nguma-amber-soft);
  color: var(--nguma-amber);
}

/* Hue-named variants for categorical pills (panel roles, tags, etc.). The
   colour is the visual identity, not the meaning — consumers pick whichever
   hue fits their categorisation scheme. */
.c-pill--brown {
  background: rgba(139, 90, 60, 0.10);
  color: #8B5A3C;
}

.c-pill--purple {
  background: rgba(90, 79, 207, 0.10);
  color: #5A4FCF;
}

.c-pill--cream {
  background: var(--nguma-cream);
  color: var(--nguma-ink-mid);
}

/* Square modifier. Switches the rounded-pill border-radius for a softer 4px
   corner — used where the pill behaves more like a category label than a
   status indicator. */
.c-pill--square {
  border-radius: 4px;
}

/* Pulsing dot. Used inside a pill (or anywhere) to indicate activity in
   progress. The colour is inherited from the pill's own colour, so it picks
   up the variant context automatically. */
.c-pill__pulse {
  animation: nguma-pulse 1.4s ease-in-out infinite;
  background: currentColor;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

/* --- c-pill-select -------------------------------------------------------- */
/* A native <select> styled to look like a c-pill. Used where a status pill
   should also be editable inline — clicking opens the native option list,
   choosing fires a change event. The hue modifiers mirror c-pill's set so
   the visual treatment matches a static pill of the same status.

     <select class="c-pill-select c-pill-select--active" data-…>
       <option value="…" selected>Interview booked</option>
       <option value="…">Shortlisted</option>
       …
     </select>

   The chevron is included as a small SVG background image so the affordance
   for "this is editable" is visible without needing a separate icon. */

.c-pill-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 6px center;
  background-repeat: no-repeat;
  background-size: 12px;
  border: 1px solid transparent;
  border-radius: var(--nguma-radius-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--nguma-text-caption);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  padding: 4px 22px 4px 10px;
  transition: background-color var(--nguma-transition), border-color var(--nguma-transition);
  white-space: nowrap;
}

.c-pill-select:hover {
  filter: brightness(0.96);
}

.c-pill-select:focus-visible {
  outline: 2px solid var(--nguma-navy);
  outline-offset: 2px;
}

/* Hue variants — match c-pill's palette. */
.c-pill-select--active {
  background-color: rgba(63, 122, 107, 0.12);
  color: var(--nguma-teal-stronger);
}

.c-pill-select--paused {
  background-color: rgba(180, 83, 9, 0.10);
  color: var(--nguma-amber);
}

.c-pill-select--draft {
  background-color: rgba(107, 114, 128, 0.10);
  color: var(--nguma-ink-mid);
}

.c-pill-select--closed {
  background-color: rgba(2, 51, 102, 0.08);
  color: var(--nguma-navy);
}

.c-pill-select--neutral {
  background-color: var(--nguma-navy-tint-medium);
  color: var(--nguma-navy);
}

.c-pill-select--amber-soft {
  background-color: var(--nguma-amber-soft);
  color: var(--nguma-amber);
}

.c-pill-select--cream {
  background-color: var(--nguma-cream);
  color: var(--nguma-ink-mid);
}

/* --- c-progress-bar ------------------------------------------------------- */
/* Linear progress indicator. The track is a soft grey rounded bar; the fill
   is gold by default and can switch to teal (success) or amber (warning) via
   modifiers on the fill. The fill animates its width from 0–100%.

     <div class="c-progress-bar">
       <div class="c-progress-bar__fill" style="width: 45%;"></div>
     </div>

   The container (c-progress-bar) also accepts an .is-over state for the
   "over the target" treatment (light amber track to draw attention). */

.c-progress-bar {
  background: var(--nguma-border-soft);
  border-radius: var(--nguma-radius-pill);
  height: 6px;
  overflow: hidden;
  transition: background var(--nguma-transition);
  width: 100%;
}

.c-progress-bar.is-over {
  background: var(--nguma-amber-soft);
}

.c-progress-bar__fill {
  background: var(--nguma-gold);
  border-radius: var(--nguma-radius-pill);
  height: 100%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background var(--nguma-transition);
  width: 0%;
}

.c-progress-bar__fill--success { background: var(--nguma-teal-deep); }
.c-progress-bar__fill--warning { background: var(--nguma-amber); }

/* --- c-progress-summary --------------------------------------------------- */
/* A horizontal info bar that wraps a .c-progress-bar with surrounding chrome:
   a label, a value text, an optional action button, and an optional hint.
   Used wherever a "progress towards a target" state needs to sit prominently
   on the page (e.g. weight totals, allocation status).

     <div class="c-progress-summary">
       <span class="c-eyebrow c-progress-summary__label">Total weight</span>
       <div class="c-progress-bar c-progress-summary__bar">
         <div class="c-progress-bar__fill"></div>
       </div>
       <span class="c-progress-summary__value">99%</span>
       <button class="c-progress-summary__action">Distribute remainder</button>
       <span class="c-progress-summary__hint">1% short of 100%</span>
     </div>
*/

.c-progress-summary {
  align-items: center;
  background: var(--nguma-white);
  border: 1px solid var(--nguma-border);
  border-radius: var(--nguma-radius-md);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--nguma-text-sm);
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 20px;
}

.c-progress-summary__label {
  margin-right: auto;
}

/* The progress bar inside a summary is capped so it doesn't span the full
   width on wide screens — the label and value need room to breathe. */
.c-progress-summary__bar {
  flex: 1;
  max-width: 360px;
}

.c-progress-summary__value {
  color: var(--nguma-navy);
  font-family: var(--nguma-font-display);
  font-size: var(--nguma-text-lg);
  font-weight: 700;
  min-width: 80px;
  text-align: right;
}

.c-progress-summary__value--success { color: var(--nguma-teal-deep); }
.c-progress-summary__value--warning { color: var(--nguma-amber); }

.c-progress-summary__action {
  background: transparent;
  border: 1.5px solid rgba(192, 69, 17, 0.30);
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-gold);
  cursor: pointer;
  font-size: var(--nguma-text-caption);
  font-weight: 600;
  padding: 5px 10px;
  transition: all var(--nguma-transition);
  white-space: nowrap;
}

.c-progress-summary__action:hover:not(:disabled) {
  background: var(--nguma-gold);
  border-color: var(--nguma-gold);
  color: var(--nguma-white);
}

.c-progress-summary__action:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.c-progress-summary__hint {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-caption);
  white-space: nowrap;
}

.c-progress-summary__hint--warning {
  color: var(--nguma-amber);
  font-weight: 500;
}

/* --- c-save-bar ----------------------------------------------------------- */
/* A fixed-position bar anchored to the bottom of the viewport, used during
   edit-mode interactions to host save/discard actions and a status line.
   Hidden by default (zero opacity, slid down 100%, no pointer events). When
   .is-visible is added, it slides up and fades in. The fixed positioning
   means the bar is never present during view mode regardless of scroll
   position — it's not in document flow at all.

     <div class="c-save-bar" id="…">
       <div class="c-save-bar__status">
         <span class="c-dot c-dot--idle"></span>
         <span>Editing…</span>
       </div>
       <div class="c-save-bar__actions">
         <button class="c-button c-button--secondary">Discard</button>
         <button class="c-button c-button--primary">Save changes</button>
       </div>
     </div>
*/

.c-save-bar {
  align-items: center;
  background: var(--nguma-white);
  border-top: 1px solid var(--nguma-border);
  bottom: 0;
  box-shadow: 0 -4px 16px var(--nguma-navy-tint-medium);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  left: 0;
  opacity: 0;
  padding: 14px 24px;
  pointer-events: none;
  position: fixed;
  right: 0;
  transform: translateY(100%);
  transition:
    opacity var(--nguma-transition),
    transform var(--nguma-transition);
  z-index: 50;
}

.c-save-bar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.c-save-bar__status,
.c-status-line {
  align-items: center;
  display: flex;
  gap: 8px;
}

/* Save-bar's status caption defaults to ink-mid for the bar context. The
   generic .c-status-line inherits text colour and size from its parent
   (e.g. .c-modal__footer-status defines ink-light, sm). */
.c-save-bar__status {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-sm);
}

.c-save-bar__actions {
  display: flex;
  gap: 10px;
}

/* --- c-stat-bar ----------------------------------------------------------- */
/* Horizontal strip of summary stats. Each cell shows an eyebrow label, a
   prominent value, and a sub-caption. Used at the top of dashboard-style
   pages (e.g. Schedule).

     <div class="c-stat-bar">
       <div class="c-stat-bar__cell">
         <div class="c-eyebrow c-stat-bar__label">Open slots</div>
         <div class="c-stat-bar__value">12</div>
         <div class="c-stat-bar__sub">Available for booking</div>
       </div>
       …
     </div>
*/

.c-stat-bar {
  background: var(--nguma-white);
  border: 1px solid var(--nguma-border);
  border-radius: var(--nguma-radius-md);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 16px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .c-stat-bar { grid-template-columns: repeat(2, 1fr); }
}

.c-stat-bar__cell {
  border-left: 1px solid var(--nguma-border);
  padding: 16px 20px;
}

.c-stat-bar__cell:first-child {
  border-left: 0;
}

.c-stat-bar__label {
  margin-bottom: 6px;
}

.c-stat-bar__value {
  color: var(--nguma-navy);
  font-family: var(--nguma-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
}

.c-stat-bar__value--small {
  font-size: var(--nguma-text-md);
  font-weight: 700;
}

.c-stat-bar__sub {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-xs);
  margin-top: 4px;
}

/* --- c-help-banner -------------------------------------------------------- */
/* Small inline banner used to teach the user about a non-obvious interaction
   on a page (e.g. drag-to-create on the calendar). Quiet visual treatment:
   navy-tint background, info icon, instructional text. */

.c-help-banner {
  align-items: flex-start;
  background: var(--nguma-navy-tint-faint);
  border: 1px solid var(--nguma-border-soft);
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-ink-mid);
  display: flex;
  font-size: var(--nguma-text-sm);
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
}

.c-help-banner__icon {
  color: var(--nguma-navy);
  flex-shrink: 0;
  height: 18px;
  margin-top: 1px;
  width: 18px;
}

/* --- c-section ----------------------------------------------------------- */
/* A grouping inside a card or modal. Provides a sub-heading and gives the
   content below it a clear visual boundary. Multiple sections stack with
   comfortable space between them.

     <section class="c-section">
       <h3 class="c-section__title">Contact</h3>
       …group content…
     </section>
*/

.c-section {
  margin-bottom: 28px;
}

.c-section:last-child {
  margin-bottom: 0;
}

.c-section__title {
  color: var(--nguma-navy);
  font-family: var(--nguma-font-display);
  font-size: var(--nguma-text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

/* Optional explanatory paragraph that sits between a section title and the
   section's content. Quieter weight than body copy to keep the visual focus
   on the data below.

     <h3 class="c-section__title">Recording consent</h3>
     <p class="c-section__intro">Each participant must consent…</p>
     <ul …>
*/
.c-section__intro {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-sm);
  line-height: 1.5;
  margin: -6px 0 14px;
}

/* --- c-source-option ------------------------------------------------------ */
/* A large clickable option card used when the user is picking between
   several ways of starting a task (e.g. "Add Job" — choose source: ATS /
   upload / manual). Each option has an icon, a title, a body, and a
   trailing chevron suggesting forward navigation.

   The --primary variant uses navy accents for prominent first-class options.
   The default styling is quieter for secondary options (e.g. "Add manually"
   in the Add Job picker).

     <div class="c-source-option-list">
       <button type="button" class="c-source-option c-source-option--primary">
         <span class="c-source-option__icon"><svg>…</svg></span>
         <span class="c-source-option__text">
           <span class="c-source-option__title">Select from ATS</span>
           <span class="c-source-option__body">Pull job details from your ATS.</span>
         </span>
         <span class="c-source-option__chevron"><svg>…</svg></span>
       </button>
     </div>
*/

.c-source-option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-source-option {
  align-items: center;
  background: var(--nguma-white);
  border: 1.5px solid var(--nguma-border);
  border-radius: var(--nguma-radius-md);
  color: var(--nguma-ink);
  cursor: pointer;
  display: flex;
  font-family: var(--nguma-font-body);
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  text-decoration: none;
  transition: all var(--nguma-transition);
  width: 100%;
}

.c-source-option:hover,
.c-source-option:focus-visible {
  border-color: var(--nguma-gold);
  box-shadow: 0 0 0 3px var(--nguma-focus-ring);
  outline: none;
}

.c-source-option__icon {
  align-items: center;
  background: var(--nguma-cream);
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-navy);
  display: flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  transition: all var(--nguma-transition);
  width: 44px;
}

.c-source-option__icon svg {
  height: 22px;
  width: 22px;
}

.c-source-option__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.c-source-option__title {
  color: var(--nguma-navy);
  font-family: var(--nguma-font-display);
  font-size: var(--nguma-text-md);
  font-weight: 700;
}

.c-source-option__body {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-sm);
  line-height: 1.5;
}

.c-source-option__chevron {
  color: var(--nguma-ink-light);
  flex-shrink: 0;
  transition: color var(--nguma-transition);
}

.c-source-option__chevron svg {
  height: 20px;
  width: 20px;
}

.c-source-option:hover .c-source-option__chevron,
.c-source-option:focus-visible .c-source-option__chevron {
  color: var(--nguma-gold);
}

/* Primary variant — used for the most prominent options (e.g. ATS / Upload).
   Adds a subtle gold tint to the icon background on hover. */
.c-source-option--primary:hover .c-source-option__icon,
.c-source-option--primary:focus-visible .c-source-option__icon {
  background: rgba(192, 69, 17, 0.08);
  color: var(--nguma-gold);
}

/* Secondary variant — quieter visual treatment for "less primary" options
   (e.g. "Add manually" when ATS / Upload are the headline choices). */
.c-source-option--secondary {
  background: transparent;
  border-style: dashed;
  padding: 14px 18px;
}

.c-source-option--secondary .c-source-option__title {
  font-family: var(--nguma-font-body);
  font-size: var(--nguma-text-base);
  font-weight: 600;
}

.c-source-option--secondary .c-source-option__icon {
  background: transparent;
  border: 1.5px dashed var(--nguma-border);
  height: 36px;
  width: 36px;
}

.c-source-option--secondary .c-source-option__icon svg {
  height: 18px;
  width: 18px;
}

/* --- c-step-number -------------------------------------------------------- */
/* A circular numbered indicator. Used as a step counter in numbered lists
   (e.g. selection criteria, multi-step wizards) where each item carries
   a visible position. 32px circle, cream background, navy display-font
   numeral.

     <div class="c-step-number">3</div>
*/

.c-step-number {
  align-items: center;
  background: var(--nguma-cream);
  border-radius: 50%;
  color: var(--nguma-navy);
  display: flex;
  flex-shrink: 0;
  font-family: var(--nguma-font-display);
  font-size: var(--nguma-text-base);
  font-weight: 700;
  height: 32px;
  justify-content: center;
  width: 32px;
}

/* --- c-table -------------------------------------------------------------- */
/* Single table component used for jobs, candidates, panel, shortlist, etc.
   Wrap a .c-table inside a .c-card to get the rounded white surface, and
   inside a .c-table-wrap if you need horizontal overflow on small screens. */

.c-table-wrap {
  overflow-x: auto;
}

.c-table {
  border-collapse: collapse;
  font-size: var(--nguma-text-base);
  width: 100%;
}

.c-table thead {
  background: var(--nguma-cream);
}

.c-table th {
  border-bottom: 1px solid var(--nguma-border);
  color: var(--nguma-ink-light);
  cursor: pointer;
  font-size: var(--nguma-text-xs);
  font-weight: 700;
  letter-spacing: var(--nguma-tracking-uppercase);
  padding: 14px 16px;
  text-align: left;
  text-transform: uppercase;
  transition: color var(--nguma-transition), background var(--nguma-transition);
  user-select: none;
  white-space: nowrap;
}

.c-table th:hover {
  background: var(--nguma-navy-tint-hover);
  color: var(--nguma-navy);
}

.c-table th[data-sortable="false"] {
  cursor: default;
}

.c-table th[data-sortable="false"]:hover {
  background: transparent;
  color: var(--nguma-ink-light);
}

.c-table th:first-child,
.c-table td:first-child { padding-left: 22px; }

.c-table th:last-child,
.c-table td:last-child  { padding-right: 22px; }

.c-table th.is-numeric,
.c-table td.is-numeric  { text-align: right; }

.c-table td.is-numeric  { font-variant-numeric: tabular-nums; }

.c-table td {
  padding: 14px 16px;
  vertical-align: middle;
}

.c-table tbody tr {
  border-bottom: 1px solid var(--nguma-border-soft);
  cursor: pointer;
  transition: background var(--nguma-transition);
}

.c-table tbody tr:last-child {
  border-bottom: none;
}

.c-table tbody tr:hover {
  background: var(--nguma-navy-tint-faint);
}

.c-table tbody tr:focus-visible {
  background: var(--nguma-navy-tint-hover);
  box-shadow: inset 3px 0 0 var(--nguma-gold);
  outline: none;
}

/* Muted state for rows in a terminal/settled state (e.g. withdrawn,
   not-progressing, archived). De-emphasises the row visually until the
   user hovers, which restores full opacity. */
.c-table tbody tr.is-muted {
  opacity: 0.65;
}

.c-table tbody tr.is-muted:hover,
.c-table tbody tr.is-muted:focus-visible {
  opacity: 1;
}

/* Sort indicator. The two arrows are stacked; visibility of each arrow is
   driven by the th's is-sorted-asc / is-sorted-desc state. */

.c-table__th-content {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.c-table__sort-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0.4;
  transition: opacity var(--nguma-transition);
}

.c-table__sort-stack svg {
  color: var(--nguma-ink-light);
  display: block;
  height: 5px;
  width: 8px;
}

.c-table th:hover                 .c-table__sort-stack { opacity: 0.7; }
.c-table th.is-sorted             .c-table__sort-stack { opacity: 1; }
.c-table th.is-sorted             .c-table__sort-stack svg { color: var(--nguma-gold); }

/* When sorted ascending, hide the down arrow (and vice versa). When not
   sorted, both arrows are visible at reduced opacity. */
.c-table th.is-sorted-asc  .c-table__sort-stack--down,
.c-table th.is-sorted-desc .c-table__sort-stack--up { visibility: hidden; }

.c-table th:not(.is-sorted) .c-table__sort-stack--up,
.c-table th:not(.is-sorted) .c-table__sort-stack--down { opacity: 0.55; }

/* Row chevron — small chevron in the rightmost cell of a clickable row. */

.c-table__row-chevron {
  color: var(--nguma-ink-light);
  height: 14px;
  width: 14px;
}

/* --- c-toast -------------------------------------------------------------- */
/* Transient notification anchored to the bottom-centre of the viewport.
   Toggle visibility by adding/removing .is-visible. */

.c-toast {
  align-items: center;
  background: var(--nguma-navy-deep);
  border-radius: var(--nguma-radius-md);
  bottom: 24px;
  box-shadow: var(--nguma-shadow-lg);
  color: var(--nguma-white);
  display: flex;
  font-size: var(--nguma-text-base);
  font-weight: 500;
  gap: 10px;
  left: 50%;
  opacity: 0;
  padding: 12px 20px;
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%) translateY(100px);
  transition:
    opacity 0.25s,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 300;
}

.c-toast svg {
  color: var(--nguma-teal);
  height: 18px;
  width: 18px;
}

.c-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* --- c-toolbar ------------------------------------------------------------ */
/* White card sitting above a table card, hosting search + filter chips. */

.c-toolbar {
  align-items: center;
  background: var(--nguma-white);
  border-radius: var(--nguma-radius-lg);
  box-shadow: var(--nguma-shadow-md);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px 20px;
}

.c-toolbar__search {
  flex: 1;
  min-width: 240px;
  position: relative;
}

.c-toolbar__search input {
  background: var(--nguma-cream);
  border: 1.5px solid transparent;
  border-radius: var(--nguma-radius-sm);
  color: var(--nguma-ink);
  font-family: var(--nguma-font-body);
  font-size: var(--nguma-text-base);
  padding: 9px 12px 9px 38px;
  transition: all var(--nguma-transition);
  width: 100%;
}

.c-toolbar__search input:focus {
  background: var(--nguma-white);
  border-color: var(--nguma-navy);
  box-shadow: 0 0 0 3px rgba(2, 51, 102, 0.10);
  outline: none;
}

.c-toolbar__search svg {
  color: var(--nguma-ink-light);
  height: 16px;
  left: 12px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
}

/* --- c-upload-modal ------------------------------------------------------- */
/* Small bits specific to the upload-and-extract modal pattern (the dropzone,
   staged file list, and type-picker that appears when classification fails).
   The modal itself is a regular .c-modal--lg / .c-edit-zone-style container;
   these classes handle the upload-specific internals. */

/* List of files staged for upload but not yet sent. Hide when empty so the
   dropzone above doesn't have an awkward gap below it. */
.c-upload-modal__staged-list {
  list-style: none;
  margin-top: 20px;
}

.c-upload-modal__staged-list:empty {
  display: none;
}

/* Inline document-type picker shown on staged rows when classification
   couldn't determine the type automatically. Capped width so it doesn't
   dominate the file row. */
.c-upload-modal__type-picker {
  max-width: 220px;
}

/* --- c-user-roundel ------------------------------------------------------- */
/* Circular initials button in the app header. */

.c-user-roundel {
  align-items: center;
  background: var(--nguma-navy);
  border: 2px solid var(--nguma-navy);
  border-radius: 50%;
  color: var(--nguma-white);
  cursor: pointer;
  display: flex;
  font-size: var(--nguma-text-base);
  font-weight: 700;
  height: 44px;
  justify-content: center;
  letter-spacing: 0.02em;
  margin-left: 16px;
  overflow: hidden;
  transition: transform var(--nguma-transition), box-shadow var(--nguma-transition);
  width: 44px;
}

.c-user-roundel:hover {
  box-shadow: 0 0 0 4px rgba(2, 51, 102, 0.10);
}

.c-user-roundel:focus-visible {
  box-shadow: 0 0 0 4px var(--nguma-focus-ring);
  outline: none;
}

/* --- c-user-menu ---------------------------------------------------------- */
/* Wraps a c-user-roundel trigger and its dropdown panel. The trigger toggles
   .is-open on the wrapper; the panel is positioned absolutely below it. */

.c-user-menu {
  position: relative;
}

.c-user-menu__panel {
  background: var(--nguma-white);
  border: 1px solid var(--nguma-border);
  border-radius: var(--nguma-radius-md);
  box-shadow: var(--nguma-shadow-lg);
  display: none;
  list-style: none;
  margin: 0;
  min-width: 200px;
  overflow: hidden;
  padding: 6px 0;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 110;
}

.c-user-menu.is-open .c-user-menu__panel {
  animation: nguma-fade-in 0.14s ease;
  display: block;
}

.c-user-menu__item {
  background: transparent;
  border: none;
  color: var(--nguma-ink-mid);
  cursor: pointer;
  display: block;
  font-family: var(--nguma-font-body);
  font-size: var(--nguma-text-base);
  font-weight: 500;
  padding: 10px 16px;
  text-align: left;
  text-decoration: none;
  transition: background var(--nguma-transition), color var(--nguma-transition);
  width: 100%;
}

.c-user-menu__item:hover,
.c-user-menu__item:focus-visible {
  background: var(--nguma-cream);
  color: var(--nguma-navy);
  outline: none;
}

/* Danger modifier — for destructive items (e.g. "Delete"). The colour
   shows on hover/focus rather than always-on, so the menu doesn't read
   as a sea of red. */
.c-user-menu__item--danger:hover,
.c-user-menu__item--danger:focus-visible {
  background: var(--nguma-red-soft);
  color: var(--nguma-red);
}

.c-user-menu__divider {
  background: var(--nguma-border-soft);
  border: 0;
  height: 1px;
  margin: 6px 0;
}

/* --- c-wizard-progress ---------------------------------------------------- */
/* Sticky horizontal stepper used by the multi-page Add Job wizard. Sits
   directly below the app header. Each step shows a numbered circle (or
   checkmark when complete) and a label, with connecting lines between
   consecutive steps. The current step is gold; completed steps are teal
   and clickable; upcoming steps are grey.

     <nav class="c-wizard-progress" aria-label="Wizard progress">
       <ol class="c-wizard-progress__list">
         <li class="c-wizard-progress__step is-complete">
           <button class="c-wizard-progress__step-marker">
             <svg>…check…</svg>
           </button>
           <span class="c-wizard-progress__step-label">Job details</span>
         </li>
         <li class="c-wizard-progress__connector is-complete"></li>
         <li class="c-wizard-progress__step is-current">…</li>
         <li class="c-wizard-progress__connector"></li>
         <li class="c-wizard-progress__step">…</li>
         …
       </ol>
     </nav>

   Mount with Nguma.WizardProgress.mount() to build the markup automatically
   from a steps array. */

/* The wrapper that hosts the wizard progress strip is the sticky element.
   It sits between the app header and the c-app-body. The inner nav has
   no positioning of its own — it just paints the styled bar. */
.c-wizard-progress-host {
  position: sticky;
  top: var(--nguma-header-height);
  z-index: 20;
}

.c-wizard-progress {
  background: var(--nguma-white);
  border-bottom: 1px solid var(--nguma-border-soft);
  padding: 18px 32px;
}

.c-wizard-progress__list {
  align-items: center;
  display: flex;
  gap: 0;
  justify-content: center;
  list-style: none;
  margin: 0 auto;
  max-width: 720px;
  padding: 0;
}

.c-wizard-progress__step {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  text-align: center;
}

.c-wizard-progress__step-marker {
  align-items: center;
  background: var(--nguma-cream);
  border: 1.5px solid var(--nguma-border);
  border-radius: 50%;
  color: var(--nguma-ink-light);
  cursor: not-allowed;
  display: flex;
  flex-shrink: 0;
  font-family: var(--nguma-font-display);
  font-size: var(--nguma-text-base);
  font-weight: 700;
  height: 32px;
  justify-content: center;
  padding: 0;
  transition: all var(--nguma-transition);
  width: 32px;
}

.c-wizard-progress__step-marker svg {
  height: 16px;
  width: 16px;
}

.c-wizard-progress__step-label {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Current step: gold accent on the marker, navy label. */
.c-wizard-progress__step.is-current .c-wizard-progress__step-marker {
  background: var(--nguma-gold);
  border-color: var(--nguma-gold);
  color: var(--nguma-white);
}

.c-wizard-progress__step.is-current .c-wizard-progress__step-label {
  color: var(--nguma-navy);
}

/* Completed step: teal marker (clickable to jump back), navy label. */
.c-wizard-progress__step.is-complete .c-wizard-progress__step-marker {
  background: var(--nguma-teal-deep);
  border-color: var(--nguma-teal-deep);
  color: var(--nguma-white);
  cursor: pointer;
}

.c-wizard-progress__step.is-complete .c-wizard-progress__step-marker:hover,
.c-wizard-progress__step.is-complete .c-wizard-progress__step-marker:focus-visible {
  box-shadow: 0 0 0 3px rgba(63, 122, 107, 0.20);
  outline: none;
}

.c-wizard-progress__step.is-complete .c-wizard-progress__step-label {
  color: var(--nguma-navy);
}

/* Connector — horizontal line between consecutive steps. */
.c-wizard-progress__connector {
  background: var(--nguma-border);
  flex: 1;
  height: 2px;
  margin: 0 12px;
  max-width: 80px;
  /* Align the connector with the centre of the step markers (markers are
     32px tall; label sits below; connector is 2px). The step markers are
     centred at y=16px from the top of each step item; the connector itself
     is positioned 11px above the bottom of the list to approximate that
     centre when label-row is present. The simple approach: shift up by
     11px so it visually meets the markers. */
  margin-bottom: 22px;
}

.c-wizard-progress__connector.is-complete {
  background: var(--nguma-teal-deep);
}

/* Status caption beneath/beside the steps — e.g. "Step 2 of 4 — Selection
   criteria". Useful for screen readers and small screens. */
.c-wizard-progress__caption {
  color: var(--nguma-ink-light);
  font-size: var(--nguma-text-caption);
  margin-top: 8px;
  text-align: center;
}

/* Sidebar disabling — when wizard mode is active, sidebar items not part
   of the wizard get visually muted and pointer-disabled. The wizard JS
   adds .is-wizard-disabled to the relevant <li> elements. */
.c-menu-item.is-wizard-disabled,
.c-menu-list li.is-wizard-disabled .c-menu-item {
  color: var(--nguma-ink-light);
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 768px) {
  .c-wizard-progress {
    padding: 14px 16px;
  }
  .c-wizard-progress__step-label {
    display: none;
  }
  .c-wizard-progress__connector {
    margin-bottom: 0;
  }
}


/* ==========================================================================
   5. State helpers
   --------------------------------------------------------------------------
   These exist on the component definitions above. Keep them declared with
   their owning component for grep-ability; this section is a placeholder
   reminder rather than a duplication of state rules.
   ========================================================================== */


/* ==========================================================================
   6. Utilities
   --------------------------------------------------------------------------
   Single-purpose helpers. Use sparingly — prefer a component when a pattern
   recurs.
   ========================================================================== */

.u-cluster {
  align-items: center;
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.u-text-mid {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-sm);
  font-weight: 500;
}

/* "Value not set" presentation. Italic + muted grey. Used in display-mode
   field values, table cells, and anywhere a missing-value placeholder is
   shown in italics. */
.u-empty-text {
  color: var(--nguma-ink-light);
  font-style: italic;
}

/* --- c-callout ------------------------------------------------------------ */
/* A bordered status block, larger than a pill, used to summarise the current
   state of an entity at the top of a detail modal. Sits above the section
   list and gives the user an instant read on "where are we with this?".
   Variants by hue map roughly to the c-pill hue family but with their own
   softer treatment so the callout doesn't dominate the modal.

     <div class="c-callout c-callout--success">
       <span class="c-callout__icon" aria-hidden="true"><svg…/></span>
       <div class="c-callout__text">
         <div class="c-callout__primary">Confirmed booking</div>
         <div class="c-callout__secondary">Aanya chose this slot…</div>
       </div>
     </div>
*/

.c-callout {
  align-items: center;
  border: 1px solid;
  border-radius: var(--nguma-radius-md);
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
  padding: 14px 16px;
}

.c-callout__icon {
  align-items: center;
  background: var(--nguma-white);
  border: 1px solid var(--nguma-border);
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.c-callout__icon svg {
  height: 18px;
  width: 18px;
}

.c-callout__text {
  flex: 1;
  min-width: 0;
}

.c-callout__primary {
  color: var(--nguma-ink);
  font-size: var(--nguma-text-base);
  font-weight: 600;
  margin-bottom: 2px;
}

.c-callout__secondary {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-caption);
  line-height: 1.5;
}

/* Variants. Each pairs a soft tinted background with a matching border. The
   icon picks up the variant's accent colour. */
.c-callout--success {
  background: rgba(63, 122, 107, 0.08);
  border-color: rgba(63, 122, 107, 0.20);
}

.c-callout--success .c-callout__icon {
  border-color: rgba(63, 122, 107, 0.30);
  color: var(--nguma-teal-stronger);
}

.c-callout--info {
  background: rgba(2, 51, 102, 0.05);
  border-color: rgba(2, 51, 102, 0.18);
}

.c-callout--info .c-callout__icon {
  border-color: rgba(2, 51, 102, 0.20);
  color: var(--nguma-navy);
}

.c-callout--warn {
  background: rgba(180, 83, 9, 0.06);
  border-color: rgba(180, 83, 9, 0.20);
}

.c-callout--warn .c-callout__icon {
  border-color: rgba(180, 83, 9, 0.30);
  color: var(--nguma-amber);
}

.c-callout--alert {
  background: rgba(192, 69, 17, 0.06);
  border-color: rgba(192, 69, 17, 0.20);
}

.c-callout--alert .c-callout__icon {
  border-color: rgba(192, 69, 17, 0.30);
  color: var(--nguma-gold);
}

.c-callout--neutral {
  background: rgba(107, 114, 128, 0.06);
  border-color: rgba(107, 114, 128, 0.18);
}

.c-callout--neutral .c-callout__icon {
  color: var(--nguma-ink-mid);
}

/* --- c-timeline ----------------------------------------------------------- */
/* Vertical event list with dot indicators. Used for invitation/booking
   activity streams, audit trails, and any chronological event log. Each
   event has a primary label and a secondary line. Variants colour the dot
   to indicate the event kind.

     <div class="c-timeline">
       <div class="c-timeline__event c-timeline__event--success">
         <span class="c-timeline__dot"><svg…/></span>
         <div class="c-timeline__primary">Slot chosen</div>
         <div class="c-timeline__secondary">21 Apr 2026, 11:24 AM · Tuesday 5 May…</div>
       </div>
       …
     </div>
*/

.c-timeline {
  margin: 0;
  padding: 0;
  position: relative;
}

.c-timeline__event {
  display: grid;
  gap: 4px 14px;
  grid-template-columns: 28px 1fr;
  padding-bottom: 18px;
  position: relative;
}

.c-timeline__event:last-child {
  padding-bottom: 0;
}

/* Vertical line connecting the dots — drawn from each event's dot down to
   the next, omitted on the last event. */
.c-timeline__event:not(:last-child)::before {
  background: var(--nguma-border);
  bottom: 0;
  content: "";
  left: 13px;
  position: absolute;
  top: 28px;
  width: 2px;
}

.c-timeline__dot {
  align-items: center;
  background: var(--nguma-white);
  border: 2px solid var(--nguma-border);
  border-radius: 50%;
  color: var(--nguma-ink-mid);
  display: flex;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.c-timeline__dot svg {
  height: 14px;
  width: 14px;
}

.c-timeline__primary {
  color: var(--nguma-ink);
  font-size: var(--nguma-text-sm);
  font-weight: 600;
  grid-column: 2;
}

.c-timeline__secondary {
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-caption);
  grid-column: 2;
  line-height: 1.5;
}

/* Event kind variants — colour the dot border and icon. */
.c-timeline__event--success .c-timeline__dot {
  border-color: var(--nguma-teal-deep);
  color: var(--nguma-teal-stronger);
}

.c-timeline__event--warn .c-timeline__dot {
  border-color: var(--nguma-amber);
  color: var(--nguma-amber);
}

.c-timeline__event--alert .c-timeline__dot {
  border-color: var(--nguma-gold);
  color: var(--nguma-gold);
}

/* --- c-tab-rail / c-tab-rail-layout -------------------------------------- */
/* Vertical tab list, designed for inside modals where horizontal tabs would
   either wrap or force shortened labels. The c-tab-rail-layout parent is
   a two-column grid: rail on the left, content pane on the right.

     <div class="c-tab-rail-layout">
       <div class="c-tab-rail" role="tablist">
         <button class="c-tab-rail__tab is-active" role="tab">
           <span class="c-tab-rail__label">Initial invite</span>
           <span class="c-tab-rail__badge">Customised</span>
         </button>
         …
       </div>
       <div class="c-tab-rail-layout__content">…active tab content…</div>
     </div>
*/

.c-tab-rail-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 220px 1fr;
}

.c-tab-rail-layout__content {
  min-width: 0;
}

.c-tab-rail {
  border-right: 1px solid var(--nguma-border-soft);
  display: flex;
  flex-direction: column;
  padding-right: 12px;
}

.c-tab-rail__tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--nguma-ink-mid);
  cursor: pointer;
  display: flex;
  font-family: var(--nguma-font-body);
  font-size: var(--nguma-text-sm);
  font-weight: 500;
  gap: 8px;
  justify-content: space-between;
  padding: 10px 12px 10px 13px;
  text-align: left;
  transition: all var(--nguma-transition);
}

.c-tab-rail__tab:hover:not(.is-active) {
  background: var(--nguma-navy-tint-faint);
  color: var(--nguma-navy);
}

.c-tab-rail__tab.is-active {
  background: var(--nguma-navy-tint-faint);
  border-left-color: var(--nguma-navy);
  color: var(--nguma-navy);
  font-weight: 600;
}

.c-tab-rail__tab:focus-visible {
  outline: 2px solid var(--nguma-navy);
  outline-offset: -2px;
}

.c-tab-rail__label {
  flex: 1;
  min-width: 0;
}

.c-tab-rail__badge {
  background: var(--nguma-cream);
  border-radius: var(--nguma-radius-pill);
  color: var(--nguma-ink-mid);
  font-size: var(--nguma-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 2px 8px;
}

.c-tab-rail__tab.is-active .c-tab-rail__badge {
  background: var(--nguma-white);
  color: var(--nguma-navy);
}

/* --- c-bulk-action-bar --------------------------------------------------- */
/* Horizontal bar that appears above a table when one or more rows are
   selected. Hosts a "N selected" label and a row of bulk-action buttons.
   Hidden by default; the consuming page toggles is-visible based on the
   current selection.

     <div class="c-bulk-action-bar" id="…">
       <div class="c-bulk-action-bar__count">
         <strong>3</strong> candidates selected
       </div>
       <div class="c-bulk-action-bar__actions">
         <button class="c-button c-button--secondary c-button--sm">…</button>
       </div>
     </div>
*/

.c-bulk-action-bar {
  align-items: center;
  background: var(--nguma-navy-tint-faint);
  border: 1px solid var(--nguma-border-soft);
  border-radius: var(--nguma-radius-md);
  display: none;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
}

.c-bulk-action-bar.is-visible {
  display: flex;
}

.c-bulk-action-bar__count {
  color: var(--nguma-ink);
  flex: 1;
  font-size: var(--nguma-text-sm);
  min-width: 200px;
}

.c-bulk-action-bar__count strong {
  color: var(--nguma-navy);
  font-weight: 700;
}

.c-bulk-action-bar__actions {
  align-items: center;
  display: flex;
  gap: 8px;
}


/* ==========================================================================
   7. Animations
   ========================================================================== */

@keyframes nguma-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nguma-modal-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nguma-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}


/* ==========================================================================
   8. Responsive overrides
   ========================================================================== */

@media (max-width: 768px) {
  .c-app-header {
    gap: 16px;
    padding: 0 20px;
  }
  .c-app-main {
    padding: 24px 20px 40px;
  }
  .c-app-footer {
    padding: 24px 20px;
  }
  .c-field-row {
    padding: 12px 16px;
  }
  .c-save-bar {
    padding: 12px 16px;
  }
}