/* ==========================================================================
   Ideal Workforce — design foundation
   ==========================================================================
   Deliberately a thin token layer over Bootstrap 5.3, not a component library.
   Bootstrap already ships tested, accessible buttons, forms, tables, modals
   and a grid; re-implementing those would add maintenance with no gain. What
   Bootstrap does NOT give us is a consistent identity, an operational data
   density, or the empty/loading/error patterns this product needs everywhere.
   That is what this file is.

   Rule for anyone extending it: if Bootstrap does it well, use Bootstrap. Add
   here only when the product needs something Bootstrap has no opinion about.
   ========================================================================== */

:root {
  /* ---- Brand -------------------------------------------------------------
     A deep, desaturated blue. Payroll software is read for hours by people
     doing careful work; a saturated brand colour becomes tiring and competes
     with the status colours below, which are the ones that must stand out. */
  --iw-brand:            #1b3a5c;
  --iw-brand-strong:     #142c46;
  --iw-brand-soft:       #eef3f8;
  --iw-accent:           #2563a8;

  /* ---- Surfaces ---------------------------------------------------------- */
  --iw-bg:               #f5f6f8;
  --iw-surface:          #ffffff;
  --iw-surface-sunken:   #fafbfc;
  --iw-border:           #dfe3e8;
  --iw-border-strong:    #c4cad2;

  /* ---- Text -------------------------------------------------------------- */
  --iw-text:             #1c2430;
  --iw-text-muted:       #5b6675;
  --iw-text-subtle:      #8a93a0;
  --iw-text-inverse:     #ffffff;

  /* ---- Status -----------------------------------------------------------
     Reserved for state. Never decorative — if something is red here it means
     a real problem, which is the only way red stays meaningful. */
  --iw-success:          #1a7f4b;
  --iw-success-bg:       #e8f5ee;
  --iw-warning:          #9a6206;
  --iw-warning-bg:       #fdf3e2;
  --iw-danger:           #b3261e;
  --iw-danger-bg:        #fdecea;
  --iw-info:             #1a5f8a;
  --iw-info-bg:          #e8f2f8;
  --iw-neutral:          #5b6675;
  --iw-neutral-bg:       #eef0f3;

  /* ---- Spacing ----------------------------------------------------------- */
  --iw-space-1: 0.25rem;
  --iw-space-2: 0.5rem;
  --iw-space-3: 0.75rem;
  --iw-space-4: 1rem;
  --iw-space-5: 1.5rem;
  --iw-space-6: 2rem;

  /* ---- Type -------------------------------------------------------------- */
  --iw-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Tabular figures so columns of money line up digit-for-digit. Without this
     a payroll register is visibly ragged and much harder to scan. */
  --iw-font-mono: "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  --iw-radius:   8px;
  --iw-radius-sm: 6px;
  --iw-radius-lg: 12px;
  --iw-shadow:   0 1px 2px rgba(28, 36, 48, 0.06), 0 1px 3px rgba(28, 36, 48, 0.04);
  --iw-shadow-md: 0 4px 12px rgba(28, 36, 48, 0.10), 0 1px 3px rgba(28, 36, 48, 0.06);

  --iw-sidebar-width: 240px;
  --iw-topbar-height: 60px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background-color: var(--iw-bg);
  color: var(--iw-text);
  font-family: var(--iw-font);
  font-size: 0.9375rem;
  line-height: 1.5;
}

h1, .iw-page-title { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
h2, .iw-section-title { font-size: 1.0625rem; font-weight: 600; margin: 0 0 var(--iw-space-3); }
h3 { font-size: 0.9375rem; font-weight: 600; }

.iw-page-subtitle { font-size: 0.875rem; color: var(--iw-text-muted); margin-top: 0.125rem; }

/* Small uppercase kicker above a heading -- names the section's category
   before the heading names the section itself ("PEOPLE" over "Employees"). */
.iw-eyebrow {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--iw-accent); margin-bottom: var(--iw-space-1);
}

.iw-label {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--iw-text-subtle);
}
.iw-caption { font-size: 0.8125rem; color: var(--iw-text-muted); }

/* Money and identifiers. Tabular figures are the point. */
.iw-num, .ssn-masked, .acct-masked {
  font-family: var(--iw-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.iw-num { text-align: right; white-space: nowrap; }

/* ==========================================================================
   Application shell
   ========================================================================== */

.iw-shell { display: flex; min-height: 100vh; }

.iw-sidebar {
  width: var(--iw-sidebar-width);
  flex: 0 0 var(--iw-sidebar-width);
  background: linear-gradient(180deg, var(--iw-brand) 0%, var(--iw-brand-strong) 100%);
  color: var(--iw-text-inverse);
  display: flex;
  flex-direction: column;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.08);
}

.iw-brand {
  height: var(--iw-topbar-height);
  display: flex; align-items: center; gap: var(--iw-space-3);
  padding: 0 var(--iw-space-4);
  font-weight: 700; letter-spacing: -0.01em; font-size: 0.9375rem;
  color: var(--iw-text-inverse); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.iw-brand:hover { color: var(--iw-text-inverse); }
.iw-brand-mark {
  width: 28px; height: 28px; border-radius: var(--iw-radius-sm);
  background: var(--iw-text-inverse); color: var(--iw-brand);
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
  flex: 0 0 28px;
}
.iw-brand-tagline {
  display: block; font-size: 0.6875rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.55); letter-spacing: 0.01em;
}

.iw-nav { padding: var(--iw-space-4) var(--iw-space-3); flex: 1; overflow-y: auto; }
.iw-nav-group + .iw-nav-group { margin-top: var(--iw-space-5); }
.iw-nav-group-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: rgba(255, 255, 255, 0.48);
  padding: 0 var(--iw-space-3); margin-bottom: var(--iw-space-2);
}
.iw-nav-link {
  display: flex; align-items: center; gap: var(--iw-space-3);
  padding: 0.5rem var(--iw-space-3);
  border-radius: var(--iw-radius-sm);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none; font-size: 0.875rem;
  border-left: 3px solid transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.iw-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.iw-nav-link.active {
  background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600;
  border-left-color: #fff;
}
.iw-nav-icon {
  flex: 0 0 18px; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.8;
}
.iw-nav-link.active .iw-nav-icon, .iw-nav-link:hover .iw-nav-icon { opacity: 1; }
/* Keyboard focus must be obvious against a dark ground. */
.iw-nav-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.iw-sidebar-footer {
  padding: var(--iw-space-3) var(--iw-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  display: flex; align-items: center; gap: var(--iw-space-2);
}
.iw-sidebar-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.iw-sidebar-footer a:hover { color: #fff; text-decoration: underline; }
.iw-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}

.iw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.iw-topbar {
  /* min-height, not height: the company switcher wraps onto a second line on
     a narrow phone, and a fixed height would clip it rather than grow. */
  min-height: var(--iw-topbar-height);
  background: var(--iw-surface);
  border-bottom: 1px solid var(--iw-border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--iw-space-2) var(--iw-space-5); gap: var(--iw-space-3);
}

/* The company switcher. The select is allowed to shrink (min-width:0) so a
   long legal name cannot push the topbar wider than the viewport, and is
   capped so four short names do not leave a control the width of the screen. */
.iw-company-switch {
  display: flex; align-items: center; gap: var(--iw-space-2);
  min-width: 0; flex: 0 1 auto;
}
.iw-company-switch label { white-space: nowrap; }
.iw-company-switch select { min-width: 0; max-width: 16rem; }
@media (max-width: 575.98px) {
  /* On a phone the label is redundant next to a select whose selected option
     is the company name; it stays in the accessibility tree for the select's
     name and is only hidden visually. */
  .iw-company-switch label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .iw-company-switch select { max-width: 11rem; }
}
.iw-role-pill {
  display: inline-flex; align-items: center;
  padding: 0.1875rem 0.625rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  background: var(--iw-brand-soft); color: var(--iw-brand);
}

.iw-content { padding: var(--iw-space-5); flex: 1; }
.iw-content-inner { max-width: 1240px; }

.iw-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--iw-space-4); margin-bottom: var(--iw-space-5);
}

.iw-breadcrumb { font-size: 0.8125rem; color: var(--iw-text-muted); margin-bottom: var(--iw-space-1); }
.iw-breadcrumb a { color: var(--iw-text-muted); text-decoration: none; }
.iw-breadcrumb a:hover { color: var(--iw-accent); text-decoration: underline; }

/* ==========================================================================
   Surfaces
   ========================================================================== */

.iw-card {
  background: var(--iw-surface);
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius);
  box-shadow: var(--iw-shadow);
}
.iw-card-header {
  padding: var(--iw-space-3) var(--iw-space-4);
  border-bottom: 1px solid var(--iw-border);
  background: var(--iw-surface-sunken);
  border-radius: var(--iw-radius) var(--iw-radius) 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--iw-space-3);
}
.iw-card-body { padding: var(--iw-space-4); }
.iw-card-footer {
  padding: var(--iw-space-3) var(--iw-space-4);
  border-top: 1px solid var(--iw-border);
  background: var(--iw-surface-sunken);
  border-radius: 0 0 var(--iw-radius) var(--iw-radius);
}

/* Bootstrap's .card is used widely in existing templates; align it rather
   than rewriting every screen before the shell has proven itself. */
.card { border: 1px solid var(--iw-border); border-radius: var(--iw-radius); box-shadow: var(--iw-shadow); }

/* A card that leads to something (an empty-state CTA card, a clickable list
   row shaped like a card). Not applied to every .iw-card -- most are just
   containers for information the user isn't navigating away from. */
.iw-card--link { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.iw-card--link:hover { box-shadow: var(--iw-shadow-md); border-color: var(--iw-border-strong); }

/* ==========================================================================
   KPI cards -- the "at a glance" numbers at the top of a dashboard-shaped
   page. An icon carries the category so the eye can scan the row by shape
   before reading a single number.
   ========================================================================== */

.iw-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--iw-space-4); margin-bottom: var(--iw-space-4);
}
.iw-kpi {
  background: var(--iw-surface); border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius); box-shadow: var(--iw-shadow);
  padding: var(--iw-space-4); display: flex; gap: var(--iw-space-3); align-items: flex-start;
}
.iw-kpi-icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--iw-radius-sm);
  display: grid; place-items: center;
  background: var(--iw-brand-soft); color: var(--iw-brand);
}
.iw-kpi-icon-svg { width: 19px; height: 19px; }
.iw-kpi-icon--warning { background: var(--iw-warning-bg); color: var(--iw-warning); }
.iw-kpi-icon--success { background: var(--iw-success-bg); color: var(--iw-success); }
.iw-kpi-icon--info    { background: var(--iw-info-bg);    color: var(--iw-info); }
.iw-kpi-icon--neutral { background: var(--iw-neutral-bg); color: var(--iw-neutral); }
.iw-kpi-body { min-width: 0; }
.iw-kpi-label {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--iw-text-subtle);
}
.iw-kpi-value {
  font-family: var(--iw-font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--iw-text);
  line-height: 1.3;
}
.iw-kpi-meta { font-size: 0.8125rem; color: var(--iw-text-muted); }

/* ==========================================================================
   Checklist -- "here is the setup work for this record and what's left."
   Used on employee/contractor setup so the user is never left to guess
   whether name/pay/SSN is the whole job. Unlike .iw-steps (a single ordered
   trail for one payroll run) this is an unordered set of independent tasks,
   so each item states its own status rather than implying an order.
   ========================================================================== */

.iw-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--iw-space-3); }
.iw-checklist-item { display: flex; gap: var(--iw-space-3); align-items: flex-start; }
.iw-checklist-marker {
  width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px;
  border-radius: 50%; border: 2px solid var(--iw-border-strong);
  display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700;
  background: var(--iw-surface); color: transparent;
}
.iw-checklist-item--done .iw-checklist-marker {
  background: var(--iw-success); border-color: var(--iw-success); color: #fff;
}
.iw-checklist-item--done .iw-checklist-marker::after { content: "\2713"; }
.iw-checklist-title { font-weight: 600; color: var(--iw-text); font-size: 0.875rem; }
.iw-checklist-item--pending .iw-checklist-title { color: var(--iw-text-muted); }
.iw-checklist-body { font-size: 0.8125rem; color: var(--iw-text-muted); margin-top: 0.125rem; }
.iw-checklist-action { margin-top: var(--iw-space-2); }

/* ==========================================================================
   Tables — operational density
   ========================================================================== */

table.table { font-size: 0.875rem; margin-bottom: 0; }
table.table > thead > tr > th {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--iw-text-muted);
  background: var(--iw-surface-sunken);
  border-bottom: 1px solid var(--iw-border-strong);
  white-space: nowrap; padding: var(--iw-space-2) var(--iw-space-3);
}
table.table > tbody > tr > td { padding: var(--iw-space-3); vertical-align: middle; border-color: var(--iw-border); }
table.table > tbody > tr:hover { background: var(--iw-brand-soft); }

/* Wide tables scroll inside their own container; the page never scrolls
   sideways. Payroll registers are wide by nature. */
.iw-table-scroll { overflow-x: auto; }

/* ==========================================================================
   Status — one vocabulary, used everywhere
   ========================================================================== */

.iw-status {
  display: inline-flex; align-items: center; gap: var(--iw-space-2);
  padding: 0.125rem 0.5rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.iw-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.iw-status--success { color: var(--iw-success); background: var(--iw-success-bg); }
.iw-status--warning { color: var(--iw-warning); background: var(--iw-warning-bg); }
.iw-status--danger  { color: var(--iw-danger);  background: var(--iw-danger-bg); }
.iw-status--info    { color: var(--iw-info);    background: var(--iw-info-bg); }
.iw-status--neutral { color: var(--iw-neutral); background: var(--iw-neutral-bg); }

/* ==========================================================================
   Empty / loading / error — the states every screen forgets
   ========================================================================== */

.iw-empty { padding: var(--iw-space-6) var(--iw-space-4); text-align: center; color: var(--iw-text-muted); }
.iw-empty-icon {
  width: 44px; height: 44px; margin: 0 auto var(--iw-space-3);
  border-radius: 50%; background: var(--iw-surface-sunken); color: var(--iw-text-subtle);
  display: grid; place-items: center;
}
.iw-empty-icon-svg { width: 22px; height: 22px; }
.iw-empty-title { font-weight: 600; color: var(--iw-text); margin-bottom: var(--iw-space-2); }
.iw-empty-body { font-size: 0.875rem; max-width: 44ch; margin: 0 auto var(--iw-space-4); }

.iw-skeleton {
  background: linear-gradient(90deg, var(--iw-surface-sunken) 25%, #eef0f3 37%, var(--iw-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: iw-shimmer 1.4s ease infinite;
  border-radius: var(--iw-radius-sm); height: 1rem;
}
@keyframes iw-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* Respect users who ask for reduced motion. The shimmer is the only motion
   in the product and it is purely informational, so it simply stops. */
@media (prefers-reduced-motion: reduce) {
  .iw-skeleton { animation: none; }
}

/* ==========================================================================
   Honest status for capabilities that are not live
   ==========================================================================
   The product must never imply that filing, ACH or payment happened when the
   external authorisation does not exist. This is the visual vocabulary for
   saying so plainly instead of showing a button that lies. */

.iw-unavailable {
  border: 1px dashed var(--iw-border-strong);
  border-radius: var(--iw-radius);
  background: var(--iw-surface-sunken);
  padding: var(--iw-space-4);
  color: var(--iw-text-muted);
}
.iw-unavailable .iw-unavailable-title { font-weight: 600; color: var(--iw-text); margin-bottom: var(--iw-space-1); }

/* A single figure the user is expected to act on -- an amount to fund, a
   deadline. Emphasis comes from the left rule and sunken ground, NOT from
   colour, so it stays legible in both themes and never reads as an error. */
.iw-callout {
  border-left: 3px solid var(--iw-brand);
  background: var(--iw-surface-sunken);
  border-radius: var(--iw-radius-sm);
  padding: var(--iw-space-3) var(--iw-space-4);
}

/* A real gap the user can close right now, one click away -- see
   ui.action_needed() in _partials.html. Warning-toned (not danger: nothing
   is broken) with its own button, unlike .iw-unavailable which never offers
   one because there is nothing to click yet. */
.iw-action-banner {
  border: 1px solid var(--iw-warning);
  background: var(--iw-warning-bg);
  border-radius: var(--iw-radius);
  padding: var(--iw-space-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--iw-space-4); flex-wrap: wrap;
}
.iw-action-banner-title { font-weight: 600; color: var(--iw-text); margin-bottom: var(--iw-space-1); }

/* ==========================================================================
   Buttons — Bootstrap's, re-skinned to the brand. No new variants.
   ========================================================================== */

.btn { font-size: 0.875rem; border-radius: var(--iw-radius-sm); font-weight: 600; }
.btn-primary {
  background-color: var(--iw-brand); border-color: var(--iw-brand);
  box-shadow: 0 1px 2px rgba(27, 58, 92, 0.16);
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--iw-brand-strong); border-color: var(--iw-brand-strong); }
.btn-outline-primary { color: var(--iw-brand); border-color: var(--iw-border-strong); }
.btn-outline-primary:hover { background-color: var(--iw-brand); border-color: var(--iw-brand); }

.form-label { font-size: 0.8125rem; font-weight: 600; color: var(--iw-text); margin-bottom: var(--iw-space-1); }
.form-control, .form-select { font-size: 0.875rem; border-color: var(--iw-border-strong); border-radius: var(--iw-radius-sm); }
.form-control:focus, .form-select:focus {
  border-color: var(--iw-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.15);
}

/* Visible focus everywhere, for keyboard users. */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--iw-accent); outline-offset: 2px;
}

/* Skip link — first tab stop on every page. */
.iw-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1080;
  background: var(--iw-surface); color: var(--iw-text);
  padding: var(--iw-space-3) var(--iw-space-4); border-radius: 0 0 var(--iw-radius) 0;
}
.iw-skip:focus { left: 0; }

/* ==========================================================================
   Responsive
   ==========================================================================
   Desktop is the default because employer payroll administration is a
   desktop task. Below 992px the sidebar becomes an off-canvas drawer rather
   than disappearing, so navigation is never lost — only relocated. */

@media (max-width: 991.98px) {
  .iw-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1045;
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .iw-shell.iw-nav-open .iw-sidebar { transform: translateX(0); }
  .iw-shell.iw-nav-open .iw-nav-scrim {
    position: fixed; inset: 0; z-index: 1040; background: rgba(28, 36, 48, 0.45);
  }
  .iw-content { padding: var(--iw-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .iw-sidebar { transition: none; }
}

@media (min-width: 992px) {
  .iw-nav-toggle { display: none; }
}

@media (max-width: 991.98px) {
  /* Touch targets. `btn-sm` is 31px tall, which is fine for a mouse and mean
     for a thumb -- and on a phone these ARE the primary actions ("Run
     payroll", "Enter hours"). Raised to 44px on touch-sized viewports only,
     so desktop density is unchanged. The nav toggle gets the same treatment:
     it is the ONLY route to navigation once the sidebar goes off-canvas. */
  .iw-content .btn, .iw-nav-toggle {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .iw-nav-toggle { min-width: 44px; }

  /* Text fields and selects get the same treatment. The employee record is a
     nineteen-field form; at the desktop height of 35px it is a column of
     targets a thumb keeps missing, and a mistyped pay rate or SSN is not a
     harmless slip. Checkboxes and radios are excluded -- their labels are the
     hit area, and stretching the box itself just misaligns it. */
  .iw-content .form-control, .iw-content .form-select {
    min-height: 44px;
  }
  .iw-content .form-check-input { margin-top: 0.35rem; }
}

@media (max-width: 575.98px) {
  .iw-content { padding: var(--iw-space-3); }
  .iw-page-header { flex-direction: column; gap: var(--iw-space-3); }
  .iw-topbar { padding: 0 var(--iw-space-3); }
}

@media print {
  .iw-sidebar, .iw-topbar, .iw-nav-toggle { display: none !important; }
  .iw-content { padding: 0; }
}

/* ==========================================================================
   Payroll lifecycle steps

   An ordered list styled as a progress trail. Status is carried by the label,
   the marker AND the text alternative -- never by colour alone, because a
   payroll that looks complete when it is not is the exact failure this
   indicator exists to prevent.
   ========================================================================== */

.iw-steps {
  display: flex; flex-wrap: wrap; gap: var(--iw-space-1);
  list-style: none; margin: 0 0 var(--iw-space-4); padding: 0;
  counter-reset: iw-step;
}
.iw-step {
  counter-increment: iw-step;
  display: flex; align-items: center; gap: var(--iw-space-2);
  padding: var(--iw-space-2) var(--iw-space-3);
  font-size: 0.8125rem; font-weight: 500;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius-sm);
  background: var(--iw-surface);
  color: var(--iw-text-muted);
}
.iw-step::before {
  content: counter(iw-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%; font-size: 0.6875rem; font-weight: 700;
  background: var(--iw-surface-sunken); color: var(--iw-text-muted);
  border: 1px solid var(--iw-border-strong);
}
.iw-step--done { color: var(--iw-text); border-color: var(--iw-border-strong); }
.iw-step--done::before {
  content: "\2713";           /* check mark, not a colour change */
  background: var(--iw-brand); color: #fff; border-color: var(--iw-brand);
}
.iw-step--current {
  color: var(--iw-text); border-color: var(--iw-brand);
  box-shadow: inset 0 0 0 1px var(--iw-brand);
}
.iw-step--current::before { background: var(--iw-brand); color: #fff; border-color: var(--iw-brand); }

@media (max-width: 575.98px) {
  /* Stack rather than shrink: four steps squeezed onto a phone row become
     four unreadable stubs. */
  .iw-steps { flex-direction: column; }
  .iw-step { width: 100%; }
}