/* =============================================================================
   ShiftHosts Client Portal — design system
   Consumes the custom properties generated by ShiftHosts.Shared.Design
   (served from /css/theme.css). No colour, size or duration is written here as a
   literal: everything resolves to a token.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Reset and base
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-xl));
}

body {
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  font-weight: var(--text-body-md-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "cv11" 1, "ss01" 1;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

img, svg, video, canvas { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; padding: 0; cursor: pointer; }

a { color: var(--brand-text); text-decoration-color: rgb(var(--brand-rgb) / 0.35); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }

::selection { background: rgb(var(--brand-rgb) / 0.24); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Blazor moves focus to the page heading on navigation so screen readers announce
   the new page. That focus is programmatic, not a keyboard user tabbing to a
   control, so it must not paint a ring around the headline. */
h1:focus, h1:focus-visible, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible {
  outline: none;
}

/* A ring that reads on both the page ground and a brand-filled control. */
.ring-on-solid:focus-visible {
  outline: 2px solid var(--surface);
  box-shadow: 0 0 0 4px var(--focus);
}

.skip-link {
  position: absolute;
  left: var(--space-lg);
  top: calc(var(--space-lg) * -4);
  z-index: 100;
  padding: var(--space-sm) var(--space-lg);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-entrance);
}
.skip-link:focus-visible { top: var(--space-lg); }

/* -----------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { font-weight: 640; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }

.t-display-2xl { font-size: var(--text-display-2xl-size); line-height: var(--text-display-2xl-line); font-weight: var(--text-display-2xl-weight); letter-spacing: var(--text-display-2xl-tracking); }
.t-display-xl  { font-size: var(--text-display-xl-size);  line-height: var(--text-display-xl-line);  font-weight: var(--text-display-xl-weight);  letter-spacing: var(--text-display-xl-tracking); }
.t-display-lg  { font-size: var(--text-display-lg-size);  line-height: var(--text-display-lg-line);  font-weight: var(--text-display-lg-weight);  letter-spacing: var(--text-display-lg-tracking); }
.t-heading-xl  { font-size: var(--text-heading-xl-size);  line-height: var(--text-heading-xl-line);  font-weight: var(--text-heading-xl-weight);  letter-spacing: var(--text-heading-xl-tracking); }
.t-heading-lg  { font-size: var(--text-heading-lg-size);  line-height: var(--text-heading-lg-line);  font-weight: var(--text-heading-lg-weight);  letter-spacing: var(--text-heading-lg-tracking); }
.t-heading-md  { font-size: var(--text-heading-md-size);  line-height: var(--text-heading-md-line);  font-weight: var(--text-heading-md-weight);  letter-spacing: var(--text-heading-md-tracking); }
.t-heading-sm  { font-size: var(--text-heading-sm-size);  line-height: var(--text-heading-sm-line);  font-weight: var(--text-heading-sm-weight);  letter-spacing: var(--text-heading-sm-tracking); }
.t-body-lg     { font-size: var(--text-body-lg-size);     line-height: var(--text-body-lg-line); }
.t-body-md     { font-size: var(--text-body-md-size);     line-height: var(--text-body-md-line); }
.t-body-sm     { font-size: var(--text-body-sm-size);     line-height: var(--text-body-sm-line); }
.t-label-lg    { font-size: var(--text-label-lg-size);    line-height: var(--text-label-lg-line);    font-weight: var(--text-label-lg-weight); }
.t-label-md    { font-size: var(--text-label-md-size);    line-height: var(--text-label-md-line);    font-weight: var(--text-label-md-weight); }
.t-label-sm    { font-size: var(--text-label-sm-size);    line-height: var(--text-label-sm-line);    font-weight: var(--text-label-sm-weight); }

.t-overline {
  font-size: var(--text-overline-size);
  line-height: var(--text-overline-line);
  font-weight: var(--text-overline-weight);
  letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase;
}

.t-mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-ligatures: none; }

.t-muted { color: var(--text-muted); }
.t-secondary { color: var(--text-secondary); }
.t-brand { color: var(--brand-text); }
.t-danger { color: var(--danger-text); }
.t-success { color: var(--success-text); }
.t-warning { color: var(--warning-text); }

.prose { max-width: var(--prose-max); }
.prose p + p { margin-top: var(--space-lg); }

/* Money always uses lining tabular figures. A Naira column that does not align
   on the decimal is a column that gets misread. */
.money, .tabular, td.num, th.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.num { text-align: right; }

/* -----------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}
@media (max-width: 640px) { .container { padding-inline: var(--space-lg); } }

.container-narrow { max-width: 880px; }

.section { padding-block: var(--space-5xl); }
.section-sm { padding-block: var(--space-3xl); }
@media (max-width: 768px) { .section { padding-block: var(--space-4xl); } }

.stack { display: flex; flex-direction: column; }
.stack-xs  { gap: var(--space-xs); }
.stack-sm  { gap: var(--space-sm); }
.stack-md  { gap: var(--space-md); }
.stack-lg  { gap: var(--space-lg); }
.stack-xl  { gap: var(--space-xl); }
.stack-2xl { gap: var(--space-2xl); }
.stack-3xl { gap: var(--space-3xl); }

/* The size modifiers stand alone — `cluster-sm` on its own must lay out, not just
   set a gap it has no flex container to apply to. */
.cluster, .cluster-xs, .cluster-sm, .cluster-lg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.cluster { gap: var(--space-md); }
.cluster-sm { gap: var(--space-sm); }
.cluster-xs { gap: var(--space-xs); }
.cluster-lg { gap: var(--space-lg); }

.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }

.grid { display: grid; gap: var(--space-xl); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.divider { height: 1px; background: var(--border-subtle); border: 0; }

/* -----------------------------------------------------------------------------
   4. Surfaces
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.card-pad { padding: var(--space-xl); }
.card-pad-sm { padding: var(--space-lg); }
.card-pad-lg { padding: var(--space-2xl); }

.card-interactive { cursor: pointer; }
.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-lg);
  border-color: var(--brand-border);
}

.card-flush { box-shadow: none; }
.card-sunken { background: var(--surface-sunken); box-shadow: none; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.panel-head {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.panel-body { padding: var(--space-xl); }
.panel-foot {
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

/* -----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--target-min);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-label-md-size);
  font-weight: 580;
  letter-spacing: 0.002em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--elevation-xs); }
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); box-shadow: var(--elevation-sm); }
.btn-primary:active:not(:disabled) { background: var(--brand-active); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-sunken); border-color: var(--text-muted); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }

.btn-brand-ghost { background: var(--brand-subtle); color: var(--brand-text); border-color: var(--brand-border); }
.btn-brand-ghost:hover:not(:disabled) { background: var(--brand-subtle-hover); }

.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.94); }

.btn-lg { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-label-lg-size); border-radius: var(--radius-lg); }
.btn-sm { min-height: var(--target-compact); padding: 0 var(--space-md); font-size: var(--text-body-sm-size); }
.btn-block { width: 100%; }

.btn-icon { padding: 0; width: var(--target-min); min-height: var(--target-min); }
.btn-icon.btn-sm { width: var(--target-compact); min-height: var(--target-compact); }

/* -----------------------------------------------------------------------------
   6. Badges, pills and chips
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 3px var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--text-label-sm-size);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-neutral { background: var(--surface-sunken); color: var(--text-secondary); border-color: var(--border); }
.badge-brand   { background: var(--brand-subtle);   color: var(--brand-text);   border-color: var(--brand-border); }
.badge-accent  { background: var(--accent-subtle);  color: var(--accent-text);  border-color: var(--accent-border); }
.badge-success { background: var(--success-subtle); color: var(--success-text); border-color: var(--success-border); }
.badge-warning { background: var(--warning-subtle); color: var(--warning-text); border-color: var(--warning-border); }
.badge-danger  { background: var(--danger-subtle);  color: var(--danger-text);  border-color: var(--danger-border); }
.badge-info    { background: var(--info-subtle);    color: var(--info-text);    border-color: var(--info-border); }

.badge-solid-accent { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: var(--elevation-sm); }

/* Status dot — colour is never the only signal; it always sits beside a word. */
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot-pulse { position: relative; }
.dot-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.5;
  animation: pulse 2.4s var(--ease-standard) infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.7); opacity: 0.6; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-xs); }

.field-label { font-size: var(--text-label-md-size); font-weight: 560; color: var(--text-secondary); }
.field-hint  { font-size: var(--text-body-sm-size); color: var(--text-muted); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

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

.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.18);
}

.textarea { min-height: 120px; padding: var(--space-md); resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  padding-right: var(--space-2xl);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.checkbox-row:hover { border-color: var(--brand-border); background: var(--surface-sunken); }
.checkbox-row:has(input:checked) { border-color: var(--brand); background: var(--brand-subtle); }
.checkbox-row input { margin-top: 3px; accent-color: var(--brand); width: 17px; height: 17px; flex: none; }

/* The configurator slider — the primary interaction in the catalogue. */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  background: transparent;
  cursor: grab;
}
.range:active { cursor: grabbing; }

.range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right,
    var(--brand) 0 var(--range-progress, 50%),
    var(--surface-sunken) var(--range-progress, 50%) 100%);
  border: 1px solid var(--border);
}
.range::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}
.range::-moz-range-progress { height: 8px; border-radius: var(--radius-pill); background: var(--brand); }

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand);
  box-shadow: var(--elevation-md);
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand);
  box-shadow: var(--elevation-md);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgb(var(--brand-rgb) / 0.22); }
.range:focus-visible { outline: none; }

.range-ticks {
  display: flex;
  justify-content: space-between;
  padding-inline: 13px;
  font-size: var(--text-label-sm-size);
  color: var(--text-muted);
}

/* Segmented control — term switcher, filter toggles. */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.segmented button {
  padding: var(--space-sm) var(--space-lg);
  border-radius: calc(var(--radius-md) - 3px);
  font-size: var(--text-label-md-size);
  font-weight: 560;
  color: var(--text-muted);
  min-height: var(--target-compact);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elevation-xs);
}

/* -----------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-body-md-size); }

.table th {
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-label-sm-size);
  font-weight: 620;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface);
}

.table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.table-hover tbody tr:hover { background: var(--surface-sunken); }

.table-sticky th { position: sticky; top: 0; z-index: 2; }

.table tr[data-flagged="true"] { background: rgb(var(--danger-rgb) / 0.06); }
.table tr[data-flagged="true"]:hover { background: rgb(var(--danger-rgb) / 0.10); }

/* -----------------------------------------------------------------------------
   9. Public header and footer
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgb(var(--surface-rgb) / 0.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

.site-nav { display: flex; align-items: center; gap: var(--space-xs); }

.site-nav a {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-label-md-size);
  font-weight: 540;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.site-nav a:hover { background: var(--surface-sunken); color: var(--text); }
.site-nav a.active { color: var(--brand-text); background: var(--brand-subtle); }

@media (max-width: 860px) { .site-nav .nav-collapse { display: none; } }

.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  padding-block: var(--space-4xl) var(--space-2xl);
}

.footer-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-3xl); }
@media (max-width: 860px) { .footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }

.footer-cols h3 { font-size: var(--text-label-sm-size); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 640; }
.footer-cols ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-cols a { color: var(--text-secondary); text-decoration: none; font-size: var(--text-body-md-size); }
.footer-cols a:hover { color: var(--brand-text); }

/* -----------------------------------------------------------------------------
   10. Client-area shell
   -------------------------------------------------------------------------- */

.app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
}

.app-main { display: flex; flex-direction: column; min-width: 0; background: var(--canvas); }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-2xl);
  background: rgb(var(--canvas-rgb) / 0.85);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

.app-content { padding: var(--space-2xl); flex: 1; }
@media (max-width: 640px) { .app-content, .app-topbar { padding-inline: var(--space-lg); } }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-label {
  padding: var(--space-md) var(--space-md) var(--space-xs);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  min-height: var(--target-compact);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-label-md-size);
  font-weight: 540;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.nav-item:hover { background: var(--surface-sunken); color: var(--text); }
.nav-item.active { background: var(--brand-subtle); color: var(--brand-text); font-weight: 600; }
.nav-item.active svg { color: var(--brand); }
.nav-item .nav-count {
  margin-left: auto;
  font-size: var(--text-label-sm-size);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Off-canvas sidebar below the breakpoint. */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-standard);
    box-shadow: var(--elevation-xl);
  }
  .app-shell[data-sidebar="open"] .app-sidebar { transform: translateX(0); }
  .app-shell[data-sidebar="open"] .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgb(0 0 0 / 0.45);
    animation: fade-in var(--duration-fast) var(--ease-entrance);
  }
}
.sidebar-scrim { display: none; }
@media (min-width: 901px) { .sidebar-toggle { display: none; } }

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

/* -----------------------------------------------------------------------------
   11. Hero and marketing surfaces
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-5xl) var(--space-4xl);
  isolation: isolate;
}

/* Two offset radial washes plus a hairline grid. Pure CSS: no image request on
   the critical path, which matters on a Nigerian mobile connection (NFR-13). */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 720px;
  z-index: -2;
  background:
    radial-gradient(52% 46% at 22% 30%, rgb(var(--brand-rgb) / 0.20), transparent 70%),
    radial-gradient(44% 40% at 82% 18%, rgb(var(--accent-rgb) / 0.14), transparent 68%);
  filter: blur(6px);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgb(var(--text-rgb) / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--text-rgb) / 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 78%);
}

.eyebrow {
  display: inline-flex;
  align-self: flex-start;   /* inside a column stack it would otherwise span the row */
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--elevation-xs);
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
  text-decoration: none;
}
.eyebrow:hover { border-color: var(--brand-border); }
.eyebrow .eyebrow-tag {
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-label-sm-size);
  font-weight: 640;
}

.gradient-text {
  background: linear-gradient(120deg, var(--text) 22%, var(--brand-vivid) 62%, var(--accent-vivid) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -----------------------------------------------------------------------------
   12. Plan cards and specification rails
   -------------------------------------------------------------------------- */

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--elevation-lg); border-color: var(--brand-border); }

.plan[data-featured="true"] {
  border-color: var(--brand);
  box-shadow: var(--elevation-lg), 0 0 0 1px var(--brand);
}

.plan-badge {
  position: absolute;
  top: calc(var(--space-md) * -1);
  left: var(--space-xl);
}

.plan-price { display: flex; align-items: baseline; gap: var(--space-xs); }
.plan-price .amount {
  font-size: var(--text-display-lg-size);
  font-weight: 680;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.plan-price .period { color: var(--text-muted); font-size: var(--text-body-md-size); }

.spec-list { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; padding: 0; }
.spec-list li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-body-md-size); }
.spec-list svg { color: var(--brand); flex: none; }

/* The horizontal resource rail — vCPU · RAM · Storage · Bandwidth. */
/* Four across where there is room, 2×2 inside a plan card, never a single tall
   column — the four numbers are meant to be read as one row of comparison. */
.spec-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spec-rail > div { background: var(--surface); padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xxs); }
.spec-rail .spec-value {
  font-size: var(--text-heading-md-size);
  font-weight: 640;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.spec-rail .spec-label {
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   13. Stat tiles and meters
   -------------------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.stat-label {
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-value {
  font-size: var(--text-heading-xl-size);
  font-weight: 660;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums lining-nums;
}
.stat-meta { font-size: var(--text-body-sm-size); color: var(--text-muted); }

.meter { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width var(--duration-slow) var(--ease-standard); }
.meter[data-tone="warning"] > span { background: var(--warning); }
.meter[data-tone="danger"] > span { background: var(--danger); }

/* -----------------------------------------------------------------------------
   14. Callouts
   -------------------------------------------------------------------------- */

.callout {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: var(--text-body-md-size);
}
.callout svg { flex: none; margin-top: 1px; }
.callout-title { font-weight: 620; margin-bottom: var(--space-xxs); }

.callout-info    { background: var(--info-subtle);    border-color: var(--info-border);    color: var(--info-text); }
.callout-warning { background: var(--warning-subtle); border-color: var(--warning-border); color: var(--warning-text); }
.callout-danger  { background: var(--danger-subtle);  border-color: var(--danger-border);  color: var(--danger-text); }
.callout-success { background: var(--success-subtle); border-color: var(--success-border); color: var(--success-text); }
.callout-brand   { background: var(--brand-subtle);   border-color: var(--brand-border);   color: var(--brand-text); }

/* Region and residency disclosure — required on the card, the detail page and
   the order summary (FR-CAT-16, NFR-16). Styled to be noticed, not buried. */
.residency {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}
.residency .flag { font-size: 15px; line-height: 1; }

/* -----------------------------------------------------------------------------
   15. Comparison table
   -------------------------------------------------------------------------- */

.compare { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-subtle); text-align: left; }
.compare thead th { background: var(--surface); border-bottom: 1px solid var(--border); vertical-align: bottom; }
.compare tbody th {
  position: sticky;
  left: 0;
  background: var(--surface);
  font-weight: 560;
  color: var(--text-secondary);
  font-size: var(--text-body-md-size);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  z-index: 1;
}
.compare td[data-best="true"] { background: var(--brand-subtle); font-weight: 620; }
.compare .gap { color: var(--danger-text); font-style: italic; }

/* -----------------------------------------------------------------------------
   16. Timeline (service and ticket history)
   -------------------------------------------------------------------------- */

.timeline { list-style: none; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-xl); position: relative; }
.timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.timeline .tl-dot {
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  z-index: 1;
}
.timeline .tl-dot[data-tone="brand"]   { background: var(--brand-subtle);   border-color: var(--brand-border);   color: var(--brand-text); }
.timeline .tl-dot[data-tone="success"] { background: var(--success-subtle); border-color: var(--success-border); color: var(--success-text); }
.timeline .tl-dot[data-tone="danger"]  { background: var(--danger-subtle);  border-color: var(--danger-border);  color: var(--danger-text); }

/* -----------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */

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

.hide-sm { }
@media (max-width: 640px) { .hide-sm { display: none !important; } }
@media (max-width: 900px) { .hide-md { display: none !important; } }

/* Theme toggle: the glyph shows the theme you would switch *to*. Which one is
   visible is decided here rather than in component state, so the control is
   correct on a statically rendered page with no circuit attached. */
.theme-icon-dark { display: none; }
.theme-icon-light { display: inline-flex; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-dark { display: inline-flex; }
  :root:not([data-theme="light"]) .theme-icon-light { display: none; }
}

[data-theme="dark"] .theme-icon-dark { display: inline-flex; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-light { display: inline-flex; }

.mt-auto { margin-top: auto; }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }
.strike { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.reveal { animation: reveal var(--duration-slow) var(--ease-entrance) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* -----------------------------------------------------------------------------
   18. Motion preferences (NFR-12 / WCAG 2.3.3)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card-interactive:hover, .plan:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   19. Print — invoices and receipts leave the portal on paper
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .app-sidebar, .app-topbar, .site-footer, .btn, .no-print { display: none !important; }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-content { padding: 0; }
  body { background: #fff; color: #000; }
  .card, .panel { border-color: #ddd; box-shadow: none; }
}