/* Montserrat (SIL OFL 1.1, see assets/montserrat-LICENSE.txt) stands in for the corporate site's licensed Gotham. */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('assets/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  /* Exact brand colors from https://www.rensafiltration.com/ (public stylesheets). */
  --brand-navy: #1f2a44;
  --brand-slate: #464e7e;
  --brand-blue: #4b5fab;
  --brand-periwinkle: #b8c5f1;
  --brand-wash: #f4f6ff;
  --brand-black: #000;
  --font-display: 'Montserrat', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Text and rules on the corporate frame's black, and the sign-in pages' input borders. */
  --on-dark-text: rgb(255 255 255 / 80%);
  --on-dark-rule: rgb(255 255 255 / 28%);
  --field-line: color-mix(in srgb, var(--brand-periwinkle) 45%, var(--line));
  --development-banner-height: 38px;
  --topbar-height: 56px;
  /* Topbar, content, and footer share one gutter so their edges line up. It is also the content's top and bottom
     padding and the gap between tiles and panels, so every gap on a page matches. The content fills the pane up
     to --content-max, then centers on very wide monitors. */
  --gutter: clamp(12px, 1.5vw, 24px);
  --content-max: 1760px;
  --pane-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --text-muted: #626b80;
  --surface-tint: #edf0fb;
  --row-stripe: color-mix(in srgb, var(--brand-wash) 35%, #fff);
  --ink: var(--brand-navy);
  --paper: #f8f9fd;
  /* The page behind the wells, a shade darker than --paper so the white wells stand out without heavy borders.
     Surfaces inside wells, such as table headers, keep --paper. */
  --page-paper: #e4e9f8;
  --line: #dfe4f2;
  /* Warnings (attention needed) and dangers (errors, overdue, nothing left) keep distinct meanings. Urgent, between
     them, is for sales orders open a long while (NetSuite's orange Days Open) and invoices not long past due.
     Success marks good standing on the Dashboard only; everything else stays on the blue brand palette. */
  --warning-wash: #fff7dc;
  --warning-line: #ecd79b;
  --warning-ink: #6f5214;
  --urgent-wash: #fff0e3;
  --urgent-line: #f3c49c;
  --urgent-ink: #9a4210;
  --danger-wash: #fef1f1;
  --danger-line: #f4c4c4;
  --danger-ink: #b42318;
  --success-wash: #edf9f1;
  --success-line: #bde3ca;
  --success-ink: #1d6f43;
  /* The tiles' bars: where the money sits, in the same good / warning / danger meanings. */
  --band-good: color-mix(in srgb, var(--success-ink) 35%, var(--success-line));
  --band-payment: var(--success-line);
  --band-warning: color-mix(in srgb, var(--warning-ink) 15%, var(--warning-line));
  --band-urgent: color-mix(in srgb, var(--urgent-ink) 35%, var(--urgent-line));
  --band-danger: color-mix(in srgb, var(--danger-ink) 50%, var(--danger-line));
  --band-track: var(--line);
  /* The edge of the customer pages' sidebar, topbar, and footer. */
  --well-line: color-mix(in srgb, var(--brand-blue) 30%, var(--brand-periwinkle));
  /* Keep Basecoat controls on the same palette as the portal components. */
  --background: var(--paper);
  --foreground: var(--ink);
  --card: #fff;
  --card-foreground: var(--ink);
  --popover: #fff;
  --popover-foreground: var(--ink);
  --primary: var(--brand-slate);
  --primary-foreground: #fff;
  --secondary: var(--brand-wash);
  --secondary-foreground: var(--brand-slate);
  --muted: var(--brand-wash);
  --muted-foreground: var(--text-muted);
  --accent: var(--surface-tint);
  --accent-foreground: var(--brand-navy);
  --border: var(--line);
  --input: var(--line);
  --ring: var(--brand-blue);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  color: var(--brand-navy);
  background: var(--page-paper);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--page-paper);
  color: var(--ink);
}
a {
  text-decoration: none;
}
button,
a,
input,
select {
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
button,
a {
  touch-action: manipulation;
}
svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
h1,
h2,
p {
  margin: 0;
}
h1 {
  font-size: 36px;
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: -1.2px;
}
h2 {
  font-size: 20px;
  font-weight: 550;
  letter-spacing: -0.4px;
}
p {
  line-height: 1.65;
}
small {
  font-size: 11px;
}
label {
  font-size: 13px;
  font-weight: 550;
}
.muted {
  color: var(--text-muted);
  font-size: 13px;
}
.eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 650;
  color: var(--brand-slate);
  margin-bottom: 10px;
}
.btn {
  gap: 8px;
  cursor: pointer;
}
.btn-primary {
  background: var(--brand-slate);
  color: #fff;
  border-color: var(--brand-slate);
}
.btn-primary:hover {
  background: var(--brand-navy);
}
.btn-outline {
  color: var(--brand-slate);
  background: white;
  border: 1px solid var(--line);
}
/* Confirms an action that discards something, in a confirmation dialog (portal.js data-confirm). */
.btn-danger {
  background: var(--danger-ink);
  color: #fff;
  border: 1px solid var(--danger-ink);
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--danger-ink) 85%, #000);
}
.card {
  display: block;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line);
  box-shadow: 0 2px 3px rgb(31 42 68 / 2%);
  border-radius: 12px;
  background: white;
}
/* The sidebar's brand follows the sign-in page's bar: the R mark, a hairline, and the portal's name in spaced
   capitals. Its row is as tall as the top bar, so the two share a center line. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-height);
}
.brand-mark {
  display: block;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 8px;
}
.brand-label {
  padding-left: 10px; /* matches .brand's gap, so the hairline sits midway between the mark and the name */
  border-left: 3px solid var(--line);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.portal-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 258px;
  padding: 0 18px 14px;
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 5;
}
.portal-sidebar > .brand {
  margin-bottom: var(--gutter);
}
.workspace-breadcrumb {
  flex: 1;
  min-width: 0;
}
.workspace-breadcrumb > strong {
  min-width: 0;
}
.workspace-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 280px;
  min-width: 0;
  max-width: 280px;
}
.workspace-picker > svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--brand-slate);
}
.workspace-picker .select {
  appearance: auto;
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  text-overflow: ellipsis;
  background-color: #fff;
  box-shadow: 0 1px 2px rgb(31 42 68 / 10%);
}
nav {
  display: grid;
  gap: 5px;
}
nav a {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  color: var(--brand-slate);
  font-size: 14px;
  border-radius: 7px;
}
nav a:hover,
nav a:focus-visible {
  background: var(--brand-wash);
  color: var(--brand-slate);
}
.portal-sidebar nav a[aria-current='page'] {
  background: var(--brand-periwinkle);
  color: var(--brand-navy);
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 20px;
}
.help-card {
  border-radius: 9px;
  background: var(--brand-wash);
  padding: 14px;
  margin-bottom: 14px;
}
.help-card > svg {
  color: var(--brand-slate);
  margin-bottom: 8px;
}
.help-card strong {
  font-size: 13px;
  display: block;
}
.help-card p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 6px;
}
.security-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brand-slate);
  padding: 8px 0;
}
/* In the sidebar, My Account is shaped and highlighted like the nav links above it. */
.sidebar-bottom .security-link {
  padding: 8px 10px;
  border-radius: 7px;
}
.sidebar-bottom .security-link:hover,
.sidebar-bottom .security-link:focus-visible {
  background: var(--brand-wash);
}
.account-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}
.account-row > div {
  min-width: 0;
  flex: 1;
}
.account-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.account-row small {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.5px;
}
.avatar {
  border-radius: 50%;
  flex-shrink: 0;
  height: 32px;
  width: 32px;
  background: var(--surface-tint);
  color: var(--brand-slate);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
  border: 0;
}
.icon-button:hover {
  background: var(--brand-wash);
}
.icon-button svg {
  height: 16px;
  width: 16px;
}
.main-shell {
  margin-left: 258px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  height: var(--topbar-height);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--pane-inline);
  gap: 16px;
  background: #fff;
}
.breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.breadcrumb strong {
  font-weight: 500;
  color: var(--brand-navy);
}
.content {
  width: 100%;
  padding: var(--gutter) var(--pane-inline);
  flex: 1;
  container-type: inline-size;
}
/* Customer pages only; the admin console keeps its navy sidebar and header. The sidebar, topbar, and footer stay
   white, edged in brand blue. */
.portal-body .portal-sidebar {
  border-right-color: var(--well-line);
}
.portal-body .topbar {
  border-bottom-color: var(--well-line);
}
/* Wells float a little above the page, inside a quiet border, since the page's shade already sets them apart; the
   tiles keep their own shadow and border. */
.portal-body .content .card:not(.stat-card) {
  border-color: color-mix(in srgb, var(--brand-periwinkle) 35%, var(--line));
  box-shadow: 0 10px 28px -16px rgb(31 42 68 / 22%);
}
.notice {
  background: var(--brand-wash);
  border: 1px solid var(--line);
  color: var(--text-muted);
  padding: 11px 12px;
  border-radius: 7px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  line-height: 1.6;
}
.notice svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* A leading icon sits on the first line when the message wraps. */
.notice:has(> svg:first-child) {
  align-items: flex-start;
}
.notice > svg:first-child {
  margin-top: 3.5px;
}
/* The countdown in the inactivity warning (portal.js) keeps its width as it ticks. */
.confirm-dialog > div {
  max-width: 440px;
}
.session-warning strong {
  font-variant-numeric: tabular-nums;
}
.danger {
  background: var(--danger-wash);
  border-color: var(--danger-line);
  color: var(--danger-ink);
}
.notice.warning {
  background: var(--warning-wash);
  border-color: var(--warning-line);
  color: var(--warning-ink);
}
.notice.success {
  background: var(--success-wash);
  border-color: var(--success-line);
  color: var(--success-ink);
}
.page-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  /* The last line's baseline sits about 4.5px above the box bottom, so 9.5px here leaves a visible
     14px from the baseline to the first element. Re-measure if the title or description size changes. */
  margin: 0 0 9.5px;
}
.content > .page-heading + * {
  margin-top: 0;
}
/* Page titles are smaller than the global h1, which the sign-in and MFA cards still use. */
.page-heading h1 {
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.8px;
}
/* Page, panel, and tile titles are set in small caps. */
.page-heading h1,
.section-heading h2,
.admin-section > h2,
.pending-header h2,
.stat-label {
  font-variant-caps: small-caps;
}
/* The page description sits on the title's baseline and wraps beneath it only when space runs out. */
.page-heading > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  min-width: 0;
}
/* A list page's primary action shares the title row. The small (32px) button rises 5px above the
   27px title box and ends flush with its bottom, so the row height and the gap below don't change. */
.page-heading .page-action {
  margin-block: -5px 0;
  /* Without this, the global transition fades the button in from transparent on every page load. */
  transition: none;
}
.page-heading .page-action:hover {
  transition: background-color 0.15s;
}
.content > .text-link + .page-heading {
  margin-top: 12px;
}
.page-heading p {
  font-size: 14px;
  line-height: 1.4;
}
/* Dashboard: count tiles, then highlight and document wells. */
.dashboard {
  display: grid;
  gap: var(--gutter);
}
.dashboard > .highlights {
  margin-top: 0;
}
/* Every open item is listed, so long lists scroll inside their well under a pinned header. */
.dashboard .table-wrap {
  max-height: 460px;
}
.dashboard .table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* A collapsed table's borders belong to the table, so they scroll away from a pinned header. Pinned headers draw
   their rule as an inset shadow instead, with padding in its place so the row keeps its height. */
.dashboard .table-wrap thead th,
.mapping-table thead th {
  padding-bottom: 10px;
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 var(--field-line);
}
/* Each tile spans four rows of the grid and shares them (subgrid), so headers, amounts, bars, and footers line up
   across a row even when one label wraps. Inside a tile, the tile's own gap spaces those parts; the grid's gap
   is only between tiles. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
/* A large icon beside the label and the amount beneath it, the count chip on the label's line, a bar showing where
   that money sits, and the tile's standing in a footer strip.
   Each tile colors itself from the --tile-* variables: blue by default, then green, amber, or red by standing.
   The icon is as tall as the label line, the gap, and the amount together, so those three sizes are set here. */
.stat-card {
  --tile-wash: var(--brand-wash);
  --tile-line: color-mix(in srgb, var(--brand-periwinkle) 55%, var(--line));
  --tile-glow: color-mix(in srgb, var(--brand-periwinkle) 60%, transparent);
  --tile-ink: var(--brand-blue);
  --stat-label-line: 22px;
  --stat-value-size: clamp(20px, 1.9cqi, 28px);
  --stat-label-gap: 4px;
  display: grid;
  grid-row: span 4;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: subgrid;
  grid-template-areas:
    'icon label count'
    'icon value count'
    'bar bar bar'
    'foot foot foot';
  align-items: center;
  /* .card zeroes the gap, and a subgrid uses its own. The label and amount sit close; the bar and footer add their
     own space above. */
  gap: var(--stat-label-gap) 12px;
  padding: 14px 16px 0;
  color: inherit;
  border-color: var(--tile-line);
  background:
    radial-gradient(circle at 100% 100%, var(--tile-glow), transparent 70%),
    linear-gradient(135deg, var(--card), var(--tile-wash) 60%);
  /* Border color isn't transitioned: it would fade in from the text color as the page loads. */
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}
.stat-good {
  --tile-wash: var(--success-wash);
  --tile-line: var(--success-line);
  --tile-glow: color-mix(in srgb, var(--success-line) 70%, transparent);
  --tile-ink: var(--success-ink);
}
.stat-warning {
  --tile-wash: var(--warning-wash);
  --tile-line: var(--warning-line);
  --tile-glow: color-mix(in srgb, var(--warning-line) 75%, transparent);
  --tile-ink: var(--warning-ink);
}
.stat-urgent {
  --tile-wash: var(--urgent-wash);
  --tile-line: var(--urgent-line);
  --tile-glow: color-mix(in srgb, var(--urgent-line) 75%, transparent);
  --tile-ink: var(--urgent-ink);
}
.stat-danger {
  --tile-wash: var(--danger-wash);
  --tile-line: var(--danger-line);
  --tile-glow: color-mix(in srgb, var(--danger-line) 75%, transparent);
  --tile-ink: var(--danger-ink);
}
.stat-card:hover,
.stat-card:focus-visible {
  border-color: var(--tile-ink);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand-navy) 45%, transparent);
  transform: translateY(-2px);
}
.stat-icon {
  grid-area: icon;
  align-self: stretch;
  display: flex;
  width: calc(var(--stat-label-line) + var(--stat-label-gap) + var(--stat-value-size));
  color: var(--tile-ink);
}
/* Lucide draws inside a 2px margin of its 24px box, so scale the glyph most of the way to the box's edges, with a
   lighter stroke at this size. */
.stat-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.25;
  transform: scale(1.1);
}
/* Four tiles share a row, so values scale with the content pane. */
.stat-value {
  grid-area: value;
  align-self: start;
  font-size: var(--stat-value-size);
  white-space: nowrap;
  line-height: 1;
  font-weight: 550;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: var(--brand-navy);
}
.stat-label {
  grid-area: label;
  font-size: 16px;
  line-height: var(--stat-label-line);
  font-weight: 600;
  color: var(--brand-slate);
}
.stat-chip {
  grid-area: count;
  align-self: start;
  min-width: 45px;
  padding: 3px 13px;
  /* Taller than the label line, so it spans the label and amount rows rather than pushing them apart. */
  line-height: 24px;
  border: 1px solid var(--tile-line);
  border-radius: 999px;
  background: var(--card);
  color: var(--tile-ink);
  font-size: 21px;
  /* Lighter than the amount beside it, so the amount reads first. */
  font-weight: 550;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stat-bar {
  grid-area: bar;
  align-self: start;
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.stat-bar svg {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--band-track);
}
.stat-bar svg + .stat-legend + svg {
  margin-top: 4px;
}
.stat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 14px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* A band's legend, key, and bold amount take the darker ink of its hue (the footer's color on a tile of the same
   standing), which reads better than the bar's softer band color on the tile's wash. */
.stat-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--band-ink);
}
.stat-key {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: currentColor;
}
.stat-legend strong {
  font-weight: 700;
}
.band-good {
  --band: var(--band-good);
  --band-ink: var(--success-ink);
}
.band-payment {
  --band: var(--band-payment);
  --band-ink: var(--success-ink);
}
.band-warning {
  --band: var(--band-warning);
  --band-ink: var(--warning-ink);
}
.band-urgent {
  --band: var(--band-urgent);
  --band-ink: var(--urgent-ink);
}
.band-danger {
  --band: var(--band-danger);
  --band-ink: var(--danger-ink);
}
/* Each band's color comes from its gradient stops' class. */
.stat-bar stop {
  stop-color: var(--band);
}
/* The footer bleeds to the tile's edges, like a status bar. */
.stat-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -16px;
  padding: 7px 16px;
  border-top: 1px solid var(--tile-line);
  background: color-mix(in srgb, var(--tile-wash) 70%, var(--card));
  color: var(--tile-ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-foot svg {
  width: 13px;
  height: 13px;
}
.stat-foot > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The statement page's tiles: two across, above its table. Neither is a link there. With a Pay tile, it takes a
   narrower third column. */
.stats-grid.statement-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--gutter);
}
.stats-grid.statement-tiles.has-pay {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(220px, 1fr);
}
/* The statement's legends name every band, so space them further apart. */
.statement-tiles .stat-legend {
  gap: 2px 18px;
}
/* The Pay tile: a deeper blue than the default tile, with its button where the other tiles have their bar. The
   whole tile is the link, so the button darkens with the tile's hover. */
.pay-tile {
  --tile-wash: color-mix(in srgb, var(--brand-periwinkle) 45%, var(--brand-wash));
  --tile-glow: color-mix(in srgb, var(--brand-periwinkle) 85%, transparent);
}
.pay-action {
  grid-area: bar;
  align-self: start;
  margin-top: 10px;
}
.pay-tile:hover .pay-action,
.pay-tile:focus-visible .pay-action {
  background: var(--brand-navy);
}
.stat-static:hover {
  border-color: var(--tile-line);
  box-shadow: none;
  transform: none;
}
.stat-foot-go {
  margin-left: auto;
  transition: transform 0.15s;
}
.stat-card:hover .stat-foot-go {
  transform: translateX(3px);
}
/* The note drops under the badge when the table runs short of room, rather than scrolling it sideways. */
.status-cell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
}
.row-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
}
.row-alert.warning {
  color: var(--warning-ink);
}
.row-alert.urgent {
  color: var(--urgent-ink);
}
.row-alert.danger {
  color: var(--danger-ink);
}
.row-alert svg {
  width: 13px;
  height: 13px;
}
/* An aging order's Open For cell keeps the table's text size; only the color and icon flag it. */
.row-alert.age-alert {
  font-size: inherit;
}
.documents-card {
  overflow: hidden;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
}
.section-heading h2 {
  font-size: 16px;
}
/* A Dashboard well's heading stays white, ruled off from the table's column headings, which are the well's only
   tinted band, with the page's icon before the title. */
.documents-card > .section-heading:first-child {
  border-bottom: 1px solid var(--line);
}
.documents-card > .section-heading:first-child h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.documents-card > .section-heading:first-child ~ * .table th {
  border-top: 0;
}
/* Customer pages rule column headings off with a thin line; the admin console keeps its heavier one. */
.portal-body .table th {
  border-bottom-width: 1px;
}
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--brand-blue);
}
.section-icon svg {
  width: 24px;
  height: 24px;
}
.section-heading > .text-link {
  flex-shrink: 0;
  white-space: nowrap;
}
/* A well's action (Pay Invoices) sits just left of its View All link. The small (32px) button overhangs the 28px
   title row by 2px each way, so the heading's height doesn't change. */
.section-heading > .section-action {
  flex-shrink: 0;
  margin-block: -2px;
  margin-left: auto;
  transition: none;
}
.section-heading > .section-action:hover {
  transition: background-color 0.15s;
}
/* The icon, title, and any chips share one center line, as the heading's link does. */
.section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
}
.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--brand-slate);
  font-size: 13px;
  font-weight: 550;
}
.text-link svg {
  height: 13px;
  width: 13px;
}
.table-wrap {
  overflow: auto;
  /* Contains absolutely positioned screen-reader text, which would otherwise widen the page from the last column. */
  position: relative;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
/* Compact rows: 8px above and below each cell. */
.table th {
  padding: 8px 4px;
  color: var(--text-muted);
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
  border-top: 1px solid var(--line);
  border-bottom: 2px solid var(--field-line);
  white-space: nowrap;
}
.table td {
  padding: 4px 8px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table tr:last-child td {
  border-bottom: 0;
}
/* Stripes count only visible rows, so they stay even while a table is filtered. Rows set the
   --row-fill variable rather than a background, so hover always wins over stripes and selection. */
.table tbody tr {
  background: var(--row-fill, transparent);
  /* Basecoat fades row colors, which would fade every stripe and alert tint in on each page load. */
  transition: none;
}
.table tbody tr:nth-child(even of :not([hidden])) {
  --row-fill: var(--row-stripe);
}
/* Document and stock rows that need attention, wherever they appear: tinted through --row-fill, so hover still wins.
   These come after the stripes and match their specificity, so a flagged row is tinted whether it falls on a striped
   row or not. */
.table tbody tr[data-alert='warning']:nth-child(n) {
  --row-fill: color-mix(in srgb, var(--warning-wash) 75%, var(--card));
}
.table tbody tr[data-alert='urgent']:nth-child(n) {
  --row-fill: color-mix(in srgb, var(--urgent-wash) 80%, var(--card));
}
.table tbody tr[data-alert='danger']:nth-child(n) {
  --row-fill: color-mix(in srgb, var(--danger-wash) 85%, var(--card));
}
/* On the statement, open credits (which reduce the balance) get a light green hue. */
.table tbody tr[data-alert='credit']:nth-child(n) {
  --row-fill: color-mix(in srgb, var(--success-wash) 80%, var(--card));
}
.table tbody tr:hover {
  background: var(--surface-tint);
}
/* Numeric and currency columns: the header and its values share a right edge, with even digit widths. */
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* A credit's closing parenthesis takes no width, so it hangs into the cell's padding and the digits line up. */
.table .num .hang {
  display: inline-block;
  width: 0;
}
/* Columns as narrow as their content (a stock badge, a short count), so a full-width table's spare room goes to the
   text columns. Put it on the column's th. */
.table th.fit {
  width: 1%;
  white-space: nowrap;
}
.table .center {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Links in tables and detail grids are underlined at rest so they read as links without hovering. */
.record-link,
.document-link span {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-blue) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.record-link:hover,
.document-link:hover span {
  color: var(--brand-slate);
  text-decoration-color: currentColor;
}
.document-link {
  display: flex;
  align-items: center;
  gap: 9px;
}
.document-link svg {
  width: 15px;
  color: var(--brand-blue);
}
.status-badge {
  display: inline-block;
  background: var(--brand-wash);
  border: 1px solid var(--line);
  color: var(--brand-blue);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
}
.status-badge.closed {
  background: var(--brand-wash);
  border-color: var(--line);
  color: var(--text-muted);
}
/* A document's status badge colors (Document.tone()); muted is .closed above. */
.status-badge.good {
  background: var(--success-wash);
  border-color: var(--success-line);
  color: var(--success-ink);
}
.status-badge.warning {
  background: var(--warning-wash);
  border-color: var(--warning-line);
  color: var(--warning-ink);
}
.status-badge.urgent {
  background: var(--urgent-wash);
  border-color: var(--urgent-line);
  color: var(--urgent-ink);
}
.status-badge.danger {
  background: var(--danger-wash);
  border-color: var(--danger-line);
  color: var(--danger-ink);
}
.topbar-updated {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.topbar-updated svg {
  width: 13px;
  height: 13px;
}
/* Dashboard highlights (inventory): counts in the heading, above the items that need attention. */
.highlights {
  margin-top: var(--gutter);
}
/* A linked count beside a heading's title, tinted when it needs attention. */
.stock-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.stock-chip strong {
  color: var(--ink);
  font-weight: 650;
}
.stock-chip:hover,
.stock-chip:focus-visible {
  border-color: var(--brand-periwinkle);
  background: var(--brand-wash);
}
.stock-chip.stock-out {
  background: var(--danger-wash);
  border-color: var(--danger-line);
  color: var(--danger-ink);
}
.stock-chip.stock-low {
  background: var(--warning-wash);
  border-color: var(--warning-line);
  color: var(--warning-ink);
}
.stock-chip.stock-out strong,
.stock-chip.stock-low strong {
  color: inherit;
}
.stock-chip.stock-out:hover,
.stock-chip.stock-out:focus-visible {
  border-color: var(--danger-ink);
}
.stock-chip.stock-low:hover,
.stock-chip.stock-low:focus-visible {
  border-color: var(--warning-ink);
}
.highlight-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 13px;
}
.highlight-clear svg {
  width: 14px;
  height: 14px;
}
.status-badge.stock-out {
  background: var(--danger-wash);
  border-color: var(--danger-line);
  color: var(--danger-ink);
}
.status-badge.stock-low {
  background: var(--warning-wash);
  border-color: var(--warning-line);
  color: var(--warning-ink);
}
/* A square icon badge in the stock's colors. */
.status-badge.stock-icon {
  display: inline-grid;
  place-items: center;
  padding: 3px;
  vertical-align: middle;
}
.status-badge.stock-icon svg {
  width: 15px;
  height: 15px;
}
/* Available, the quantity left to sell, stands out from the other quantities in every inventory table. */
.table td.strong-quantity {
  font-weight: 600;
  color: var(--ink);
}
/* Inventory tables lead each item with its stock icon, in place of a Stock column. */
.stock-item .stock-icon {
  margin-right: 8px;
}
.footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--well-line);
  padding: 14px var(--pane-inline);
  font-size: 11px;
  color: var(--text-muted);
}
.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
/* Plain links, not the sidebar's padded navigation items. */
.footer nav a {
  display: inline;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}
.footer nav a:is(:hover, :focus-visible) {
  background: none;
  color: var(--brand-slate);
}
.empty-state {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(32px, 8vh, 96px) 0;
}
.empty-state h2 {
  margin: 16px 0 10px;
}
.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 12px;
}
.empty-state .empty-action {
  margin-top: 20px;
}
.empty-icon {
  display: inline-flex;
  border-radius: 16px;
  background: var(--surface-tint);
  padding: 16px;
  color: var(--brand-blue);
}
.empty-icon svg {
  width: 30px;
  height: 30px;
}
/* The dashboard offers one card per workspace until the user picks one. */
.workspace-choices-intro {
  margin-bottom: 12px;
}
.workspace-choices-intro h2 {
  font-size: 17px;
}
.workspace-choices-intro p {
  max-width: 72ch;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.workspace-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}
.workspace-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  box-shadow: 0 2px 3px rgb(31 42 68 / 2%);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Without this, the global button transition fades the cards in from the browser's grey button style. */
  transition: none;
}
.workspace-choice:hover {
  border-color: var(--brand-periwinkle);
  background: var(--row-stripe);
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.workspace-choice:focus-visible {
  outline: 2px solid var(--brand-periwinkle);
  outline-offset: 2px;
}
.workspace-choice-icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: 10px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--brand-blue);
}
.workspace-choice-icon svg {
  width: 20px;
  height: 20px;
}
.workspace-choice-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.workspace-choice-text strong {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.workspace-choice-text small {
  font-size: 13px;
}
.workspace-choice > svg:last-child {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.workspace-choice:hover > svg:last-child {
  color: var(--brand-blue);
  transform: translateX(2px);
}
#workspace-choices .admin-empty {
  margin-top: 12px;
}
.workspace-current {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-slate);
}
/* The workspace's primary subsidiary, beside its name or picker. */
.workspace-brand {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A single workspace is a name, not a picker, so it takes only the width it needs. */
.workspace-picker.workspace-current {
  flex: 0 1 auto;
  max-width: none;
}
.workspace-current > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The All view's pages, under its table at the right. */
.pagination {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.pagination .btn {
  font-size: 13px;
}
.empty-table {
  text-align: center;
  padding: 32px !important;
}
/* Long text such as item descriptions wraps, so wide tables still fit without scrolling. */
.table td.wrap-cell {
  white-space: normal;
  min-width: 180px;
}
/* Report pages: the Open | All switch, then the open view's filters, inside the table card. */
.report-card > .admin-toolbar {
  margin: 0;
  padding: 12px 16px;
}
.report-card > .admin-empty {
  margin: 12px 16px;
}
/* As tall as the toolbar's inputs, so the toggle doesn't shrink on a view without filters (All, or nothing open). */
.segmented {
  display: inline-flex;
  align-self: stretch;
  min-height: 43px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.segmented a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-muted);
}
.segmented a:hover {
  color: var(--brand-navy);
}
.segmented a[aria-current='page'] {
  background: var(--card);
  color: var(--brand-navy);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-navy) 12%, transparent);
}
/* Customer and subsidiary names wrap before a table scrolls sideways. */
.table td.name-cell {
  white-space: normal;
  min-width: 140px;
}
/*
 * Document tables carry many columns (the statement's are Document through PDF), so their names give up a little more
 * room before the table outgrows its card, and short location names wrap at their longest word.
 */
.report-card .table td.name-cell {
  min-width: 120px;
}
.table td.location-cell {
  white-space: normal;
}
/* Inventory: the toolbar and empty states sit inside the table card. */
.inventory-card .table th,
.inventory-card .table td {
  padding-inline: 14px;
}
.inventory-card > .admin-toolbar {
  margin: 0;
  padding: 12px 16px;
}
.inventory-card > .admin-empty {
  margin: 12px 16px;
}
.inventory-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.inventory-location svg {
  width: 14px;
  height: 14px;
}
.location-form {
  align-items: center;
  margin: 12px 0 0;
}
.location-form .select {
  flex: 0 1 420px;
  min-width: 0;
}
.detail-card {
  padding: 24px;
  max-width: 720px;
}
.detail-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 14px;
}
.detail-card dt {
  color: var(--text-muted);
}
.detail-card dd {
  text-align: right;
  margin: 0;
}
.auth-card {
  width: 100%;
  max-width: 425px;
}
.auth-card h1 {
  font-size: 30px;
  margin: 12px 0;
}
.auth-card h2 {
  font-size: 28px;
  margin-bottom: 10px;
}
.auth-card > p {
  color: var(--text-muted);
  font-size: 13px;
}
.auth-card > svg {
  height: 30px;
  width: 30px;
  color: var(--brand-blue);
}
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}
.form-stack label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--brand-slate);
}
.input,
.select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 43px;
  font-size: 13px;
  width: 100%;
}
.input:focus,
.select:focus {
  outline: 2px solid var(--brand-periwinkle);
  outline-offset: 2px;
}
/* A table filter that is set: a blue border and tinted fill (portal.js toggles the class), so it reads as on. Only the
   fill color changes, so a select keeps its chevron. */
.input.filter-active,
.select.filter-active {
  border-color: var(--brand-blue);
  box-shadow: inset 0 0 0 1px var(--brand-blue);
  background-color: color-mix(in srgb, var(--brand-periwinkle) 22%, #fff);
  color: var(--brand-navy);
  font-weight: 600;
}
/* Each filter's clear button (added by portal.js) sits inside its right edge while the filter is set. On a select it
   takes the chevron's place, so the select keeps its width; a search box keeps room for it, and its native clear
   button is hidden so there's only one X. */
.filter-wrap {
  position: relative;
  display: block;
}
.filter-wrap .input[type='search'] {
  padding-right: 36px;
}
.filter-wrap .input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
.filter-wrap select.select.filter-active {
  background-image: none;
}
.filter-clear {
  display: none;
  position: absolute;
  top: 50%;
  right: 6px;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-blue);
  cursor: pointer;
  transform: translateY(-50%);
}
.filter-active + .filter-clear {
  display: grid;
}
.filter-clear:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--brand-periwinkle) 55%, transparent);
  color: var(--brand-navy);
}
.filter-clear svg {
  width: 14px;
  height: 14px;
}
.filter-clear-all[hidden] {
  display: none;
}
.form-stack .btn {
  margin-top: 12px;
  min-height: 43px;
}
/* Local development only: one-click Sign In As on the sign-in page. */
.local-sign-in {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--brand-periwinkle);
}
.local-sign-in h3 {
  font-size: 13px;
  font-weight: 600;
}
.local-sign-in p {
  font-size: 11px;
  margin: 2px 0 8px;
}
.local-accounts {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.local-accounts button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  font-size: 12px;
  text-align: left;
  color: var(--ink);
  background: var(--card);
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.local-accounts button:first-child {
  border-top: 0;
}
.local-accounts button:hover,
.local-accounts button:focus-visible {
  background: var(--surface-tint);
}
.local-accounts button span {
  overflow-wrap: anywhere;
}
.local-accounts button small {
  flex: none;
  color: var(--text-muted);
}
/* Sign-in and account pages wear the corporate site's frame: a black site bar and footer, Montserrat headings,
   square inputs, and uppercase calls to action with a trailing arrow. */
.site-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--brand-wash);
}
.site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 76px;
  padding: 0 40px;
  background: var(--brand-black);
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.site-brand img {
  display: block;
  width: 150px;
  height: auto;
}
.site-brand span {
  padding-left: 16px;
  border-left: 1px solid var(--on-dark-rule);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--brand-periwinkle);
}
.site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.site-link:hover {
  color: var(--brand-periwinkle);
}
.site-link svg {
  width: 14px;
  height: 14px;
}
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 40px;
  background: var(--brand-black);
  border-top: 4px solid var(--brand-slate);
  color: var(--on-dark-text);
  font-size: 12px;
}
.site-footer > div,
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
.site-footer img {
  width: 96px;
  height: auto;
}
/* Plain links, not the sidebar's padded navigation items. */
.site-footer nav a {
  display: inline;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}
.site-footer nav a:is(:hover, :focus-visible) {
  background: none;
  color: var(--brand-periwinkle);
}
.site-page .eyebrow {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-page .auth-card h1,
.site-page .auth-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-navy);
}
.site-page .auth-card h2 {
  font-size: 27px;
}
.site-page .form-stack label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-navy);
}
.site-page .input {
  height: 48px;
  padding: 0 14px;
  font-size: 14px;
  border-color: var(--field-line);
  border-radius: 2px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.site-page .input:focus {
  outline: none;
  border-color: var(--brand-slate);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-periwinkle) 55%, transparent);
}
.site-page .auth-card .btn:not(.btn-ghost) {
  min-height: 48px;
  padding-inline: 24px;
  border: 2px solid var(--brand-slate);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-page .auth-card .btn-primary:hover {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}
.site-page .auth-card .btn-outline:hover {
  background: var(--brand-wash);
}
.site-page .auth-card p + .btn {
  margin-top: 16px;
}
.site-page .form-stack .btn:not(.btn-ghost) {
  min-height: 52px;
  margin-top: 16px;
}
.site-page .auth-card .btn svg {
  transition: transform 0.2s;
}
.site-page .auth-card .btn:hover svg {
  transform: translateX(4px);
}
.site-page .notice {
  margin: 14px 0 0;
  border-radius: 2px;
}
.site-page .text-link {
  text-decoration: underline;
  text-decoration-color: var(--brand-periwinkle);
  text-underline-offset: 4px;
}

/* The sign-in page: a hero band with the corporate header's navy trapezoid, slate stripe, and converging lines
   over black, and the sign-in card overlapping it beside three feature tiles. */
.login-hero {
  position: relative;
  overflow: hidden;
  height: 360px;
  background: url('assets/lines.svg') right center / cover no-repeat var(--brand-black);
}
.login-hero::before,
.login-hero::after {
  content: '';
  position: absolute;
  inset: 0;
}
.login-hero::before {
  background: url('assets/lines.svg') right center / cover no-repeat var(--brand-navy);
  clip-path: polygon(0 0, 62% 0, 48.4% 100%, 0 100%);
}
.login-hero::after {
  background: var(--brand-slate);
  clip-path: polygon(64.4% 0, 66.4% 0, 52.8% 100%, 50.8% 100%);
}
.login-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 32px 0;
  color: #fff;
}
.login-hero .eyebrow {
  color: var(--brand-periwinkle);
}
.login-hero h1 {
  max-width: 560px;
  margin: 14px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.login-hero p {
  max-width: 460px;
  color: var(--on-dark-text);
  font-size: 15px;
  line-height: 1.6;
}
.login-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px 64px;
}
.login-card {
  position: relative;
  z-index: 2;
  max-width: none;
  margin-top: -300px;
  align-self: start;
  padding: 36px 36px 30px;
  background: #fff;
  border-top: 4px solid var(--brand-slate);
  box-shadow: 0 28px 56px -24px rgb(31 42 68 / 40%);
}
.login-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-content: start;
  padding-top: 44px;
}
.login-features h3 {
  margin: 14px 0 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}
.login-features p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
/* The corporate industry tiles' line icon in a light blue circle. */
.icon-disc {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-periwinkle) 55%, #fff);
  color: var(--brand-navy);
}
.icon-disc svg {
  width: 22px;
  height: 22px;
}
/* The card centers in the space between the bar and footer, at least 48px from each. */
.centered-page > main {
  margin: auto;
  width: calc(100% - 32px);
}
.centered-page > .site-bar {
  margin-bottom: 48px;
}
.centered-page > .site-footer {
  margin-top: 48px;
}
.centered-page .auth-card {
  padding: 32px;
  border-radius: 2px;
  border-top: 4px solid var(--brand-slate);
}
.secret-key {
  display: block;
  padding: 12px;
  background: var(--brand-wash);
  font-size: 14px;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
  margin: 12px 0;
}
/* The QR code sits on white in a thin frame so it scans against any background; the setup key folds away beneath
   it for phones that can't scan their own screen. */
.authenticator-setup {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 12px 0;
}
.setup-qr {
  display: block;
  width: 168px;
  height: 168px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.setup-key {
  width: 100%;
  font-size: 13px;
}
.setup-key summary {
  cursor: pointer;
  color: var(--brand-slate);
  font-weight: 600;
}
.setup-key[open] summary {
  margin-bottom: 4px;
}
.setup-key .secret-key {
  margin: 6px 0;
}
.otp-input {
  font-size: 23px;
  letter-spacing: 8px;
  text-align: center;
}
/* Navy Command is scoped to administration; customer pages retain their existing theme. */
.admin-console {
  --brand-navy: #1f2a44;
  --brand-slate: #464e7e;
  --brand-blue: #4b5fab;
  --brand-periwinkle: #b8c5f1;
  --brand-wash: #f4f6ff;
  --text-muted: #626b80;
  --surface-tint: #edf0fb;
  --row-stripe: color-mix(in srgb, var(--brand-wash) 35%, #fff);
  --ink: #1f2a44;
  --paper: #f4f6fb;
  --page-paper: var(--paper);
  --line: #dce1ed;
  --background: var(--paper);
  --foreground: var(--ink);
  --card-foreground: var(--ink);
  --popover-foreground: var(--ink);
  --primary: var(--brand-slate);
  --secondary: var(--brand-wash);
  --secondary-foreground: var(--brand-slate);
  --muted: var(--brand-wash);
  --muted-foreground: var(--text-muted);
  --accent: var(--surface-tint);
  --accent-foreground: var(--ink);
  --border: var(--line);
  --input: var(--line);
  --ring: var(--brand-blue);
}
.admin-console .admin-header {
  background: var(--brand-navy);
  color: #fff;
  border-bottom-color: var(--brand-periwinkle);
}
.admin-header .breadcrumb {
  color: #c8d0ea;
}
.admin-header .breadcrumb strong {
  color: #fff;
}
.admin-sidebar {
  --text-muted: #c8d0ea;
  --line: rgb(255 255 255 / 18%);
  --surface-tint: var(--brand-slate);
  background: var(--brand-navy);
  color: var(--brand-wash);
}
.admin-sidebar nav a,
.admin-sidebar .security-link,
.admin-sidebar .icon-button {
  color: var(--brand-wash);
}
.admin-sidebar nav a:hover,
.admin-sidebar nav a:focus-visible,
.admin-sidebar .security-link:hover,
.admin-sidebar .security-link:focus-visible,
.admin-sidebar .icon-button:hover {
  background: var(--brand-slate);
  color: #fff;
}
.admin-sidebar nav .badge {
  margin-left: auto;
}
.admin-sidebar nav a[aria-current='page'] .badge {
  background: var(--brand-navy);
  color: #fff;
}
.admin-sidebar .help-card {
  background: var(--brand-slate);
}
.admin-sidebar .help-card > svg {
  color: var(--brand-periwinkle);
}
.admin-sidebar .avatar {
  color: #fff;
}
.admin-console .admin-sidebar :focus-visible {
  outline-color: var(--brand-periwinkle);
}
.admin-console [hidden] {
  display: none !important;
}
.admin-sidebar .brand-label {
  border-left-color: var(--on-dark-rule);
  color: var(--brand-periwinkle);
}
.admin-console .admin-return {
  background: transparent;
  border-color: #c8d0ea;
  color: #fff;
  font-size: 12px;
}
.admin-console .admin-return:hover {
  background: var(--brand-slate);
}
.admin-console :focus-visible {
  outline: 2px solid var(--brand-slate);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .admin-header .breadcrumb {
    flex-wrap: wrap;
    gap: 4px;
  }
  .admin-console .admin-return {
    font-size: 11px;
    padding: 6px 8px;
    flex-shrink: 0;
  }
}
.admin-section {
  margin: 12px 0;
  padding: 16px;
}
.admin-section > h2 {
  font-size: 17px;
  margin-bottom: 12px;
}
/* A section title with a marker beside it, such as Admins Only. */
.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 12px;
}
.section-header h2 {
  font-size: 17px;
  font-variant-caps: small-caps;
}
.status-badge.admin-only {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.status-badge.admin-only svg {
  width: 13px;
  height: 13px;
}
.inline-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.inline-form > div {
  flex: 1;
}
.inline-form label {
  display: block;
  margin-bottom: 8px;
}
.badge {
  font-size: 10px;
}
.recovery-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-family: monospace;
  margin: 16px 0;
}
@media (max-width: 1100px) {
  .portal-sidebar {
    width: 220px;
    padding: 0 12px 20px;
  }
  .main-shell {
    margin-left: 220px;
  }
}
@media (max-width: 760px) {
  h1 {
    font-size: 29px;
  }
  .page-heading h1 {
    font-size: 24px;
  }
  .portal-sidebar {
    position: relative;
    width: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px;
  }
  .portal-sidebar .brand {
    height: 42px;
    margin-bottom: 16px;
  }
  .workspace-breadcrumb {
    gap: 8px;
  }
  .workspace-picker {
    flex: 1;
    gap: 8px;
  }
  .workspace-breadcrumb > strong {
    max-width: 40%;
  }
  .workspace-brand {
    display: none;
  }
  .topbar:has(.workspace-breadcrumb) {
    height: auto;
    min-height: 55px;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-block: 9px;
  }
  .portal-sidebar nav {
    display: flex;
    overflow-x: auto;
    gap: 4px;
  }
  .portal-sidebar nav a {
    white-space: nowrap;
    padding: 10px;
    font-size: 13px;
  }
  .portal-sidebar nav svg {
    width: 14px;
  }
  .help-card {
    display: none;
  }
  .sidebar-bottom {
    padding-top: 5px;
  }
  .portal-sidebar .account-row {
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 0;
    margin: 0;
    border: 0;
  }
  .portal-sidebar .account-row > div,
  .portal-sidebar .account-row > .avatar {
    display: none;
  }
  .security-link {
    font-size: 12px;
  }
  .main-shell {
    margin-left: 0;
  }
  .topbar {
    height: 55px;
  }
  .page-heading {
    align-items: flex-start;
  }
  /* Wrapped under the title, the action needs its full height. */
  .page-heading .page-action {
    margin-block: 0;
  }
  .section-heading {
    padding: 14px;
    flex-wrap: wrap;
  }
  .footer {
    flex-wrap: wrap;
    gap: 6px 18px;
  }
  .site-bar {
    height: 64px;
    padding: 0 20px;
  }
  .site-brand img {
    width: 120px;
  }
  .site-brand span {
    padding-left: 12px;
    font-size: 10px;
  }
  .site-link span {
    display: none;
  }
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .login-hero {
    height: 290px;
  }
  .login-hero-inner {
    padding: 28px 20px 0;
  }
  .login-hero .eyebrow,
  .login-hero p {
    display: none;
  }
  .login-hero h1 {
    margin: 0;
    font-size: 26px;
  }
  .login-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 16px 40px;
  }
  .login-card {
    order: -1;
    margin-top: -120px;
    padding: 28px 22px 22px;
  }
  .login-features {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 0;
  }
  .centered-page > .site-bar {
    margin-bottom: 24px;
  }
  .centered-page > .site-footer {
    margin-top: 24px;
  }
  .centered-page .auth-card {
    padding: 24px 20px;
  }
  .admin-section {
    padding: 12px;
  }
  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }
}
/* The content pane's width depends on the sidebar, so size the stats against the pane, not the window. */
@container (max-width: 1100px) {
  .stats-grid,
  .stats-grid.statement-tiles.has-pay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The Pay tile becomes a strip across the full width, under the other two, with its button at the right. */
  .pay-tile {
    grid-column: 1 / -1;
    grid-row: span 3;
    grid-template-areas:
      'icon label action'
      'icon value action'
      'foot foot foot';
  }
  .pay-action {
    grid-area: action;
    align-self: center;
    margin-top: 0;
  }
}
@container (max-width: 620px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid.statement-tiles,
  .stats-grid.statement-tiles.has-pay {
    grid-template-columns: 1fr;
  }
  /* One tile per row: the same layout, tightened. */
  .stat-card {
    --stat-value-size: 24px;
    padding-top: 12px;
  }
}

.main-shell,
.content,
.documents-card {
  min-width: 0;
}
.portal-sidebar nav {
  position: static;
  width: auto;
  height: auto;
}
.centered-page .auth-card {
  background: #fff;
}

.account-row strong {
  white-space: nowrap;
}

.local-mfa-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--development-banner-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 12px;
  line-height: 18px;
  text-align: center;
  background: #fff0c2;
  color: #674a13;
  border-bottom: 1px solid #dfc47e;
  font-size: 12px;
  font-weight: 600;
}
.development-data-notice {
  border-left: 1px solid #dfc47e;
  padding-left: 12px;
}
body:has(.local-mfa-warning) {
  padding-top: var(--development-banner-height);
}
body:has(.local-mfa-warning) .main-shell {
  min-height: calc(100dvh - var(--development-banner-height));
}
body:has(.local-mfa-warning) .topbar {
  top: var(--development-banner-height);
}
body:has(.local-mfa-warning) .portal-sidebar {
  top: var(--development-banner-height);
}
@media (max-width: 760px) {
  :root {
    --development-banner-height: 56px;
  }
  .local-mfa-warning {
    flex-direction: column;
    gap: 0;
    font-size: 11px;
  }
  .development-data-notice {
    border-left: 0;
    padding-left: 0;
  }
  body:has(.local-mfa-warning) .portal-sidebar {
    top: auto;
  }
}

.admin-section {
  scroll-margin-top: 46px;
}
.invitation-form {
  display: grid;
  gap: 12px;
}
.invitation-form .inline-form {
  margin: 0;
}
.invitation-form > .btn {
  justify-self: start;
}
.customer-mapping-fields {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.admin-empty {
  border: 1px dashed var(--line);
  background: var(--brand-wash);
  padding: 14px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.admin-table-wrap + .admin-empty {
  margin-top: 12px;
}

.workspace-lookup-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.workspace-lookup-form > div {
  flex: 1 1 240px;
  max-width: 360px;
}
.workspace-lookup-form + .notice {
  margin: 12px 0 0;
}
.workspace-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--brand-wash);
  border: 1px solid var(--brand-periwinkle);
  border-radius: 9px;
  padding: 16px;
  margin: 12px 0 0;
}
/* A customer that's already registered recedes, so the ones left to register stand out. */
.workspace-preview.registered {
  background: var(--card);
  border-color: var(--line);
}
.workspace-preview.registered strong,
.workspace-preview.registered .eyebrow {
  color: var(--text-muted);
}
.workspace-preview + .workspace-preview {
  margin-top: 8px;
}
.workspace-preview > div:first-child {
  flex: 1;
}
.workspace-preview strong {
  font-size: 16px;
}
.workspace-preview .eyebrow {
  margin-bottom: 8px;
}
.section-note {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 8px;
}
/* In the admin console, a well's caveats and a form's guidance are amber callouts, so they get read. */
.notice.section-note {
  margin: 12px 0 0;
  padding: 11px 12px;
  border-top-color: var(--warning-line);
}
.invitation-form > .notice {
  margin: 0;
}
/* Pending invitations wait on someone, so their well carries a yellow edge above the accounts table. */
.content .card.pending-panel {
  border-left: 4px solid var(--warning-line);
  background: linear-gradient(to bottom, var(--warning-wash), transparent 64px), var(--card);
}
.pending-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.pending-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
}
.pending-header h2 svg {
  width: 18px;
  height: 18px;
  color: var(--warning-ink);
}
/* The panel's caveat sits in its header in yellow text, right-aligned beside the title, or under it when space runs
   out. */
.pending-note {
  flex: 0 1 auto;
  max-width: 820px;
  margin-left: auto;
  text-align: right;
  color: var(--warning-ink);
  font-size: 12.5px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .pending-note {
    margin-left: 0;
    text-align: left;
  }
}
.pending-note svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}
/* Long addresses wrap anywhere, so the row's actions stay in view. */
.pending-invitation td.wrap-cell {
  overflow-wrap: anywhere;
}
.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
/* Row actions are icon-only, square buttons; each has a title and an aria-label naming its row. */
.row-actions .btn {
  width: 32px;
  padding: 0;
  justify-content: center;
}
@media (max-width: 760px) {
  .workspace-lookup-form,
  .workspace-preview {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Admin tables: one row per record, filtered and sorted in the browser; each record has its own page. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.admin-toolbar .select {
  min-width: 150px;
}
.admin-search {
  flex: 1 1 260px;
  max-width: 420px;
}
.admin-toolbar-actions {
  display: flex;
  gap: 8px;
}
/* The row count sits at the toolbar's right edge. */
.admin-toolbar-end {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.admin-count {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}
.admin-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
}
.admin-table th:first-child,
.admin-table td:first-child {
  padding-left: 16px;
}
.admin-table thead th {
  border-top: 0;
}
/* A sortable heading stays on one line, like every table heading. Its arrow always leads the label, inline and close
   to it. */
.sort-button {
  display: inline-block;
  color: inherit;
  font: inherit;
  text-align: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sort-button:hover {
  color: var(--brand-navy);
}
/* The arrows are Lucide's chevrons-up-down, arrow-up, and arrow-down, drawn in the text color through a mask. */
.sort-button::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: 0.4;
}
/* In centered columns the arrow hangs outside the label, so the label centers over the values. */
.center .sort-button {
  position: relative;
}
.center .sort-button::before {
  position: absolute;
  right: 100%;
  top: 50%;
  translate: 0 -50%;
}
/* The sorted column stands out from the rest: its label and arrow are navy and bolder. */
th[aria-sort] .sort-button {
  color: var(--brand-navy);
  font-weight: 600;
}
th[aria-sort] .sort-button::before {
  opacity: 1;
}
th[aria-sort='ascending'] .sort-button::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5m-7 7 7-7 7 7'/%3E%3C/svg%3E");
}
th[aria-sort='descending'] .sort-button::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m7-7-7 7-7-7'/%3E%3C/svg%3E");
}
.workspace-summary {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-chip {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 7px;
  margin-right: 4px;
  color: var(--brand-slate);
  font-size: 12px;
}
.audit-action {
  font-size: 12px;
  color: var(--brand-slate);
}
.admin-table td.audit-subject {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 220px;
}
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  font-size: 12px;
}
.pager > div {
  display: flex;
  gap: 8px;
}

/* Record pages */
.admin-header .breadcrumb {
  min-width: 0;
}
.admin-header .breadcrumb a {
  color: inherit;
}
.admin-header .breadcrumb strong {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-header .breadcrumb a:hover {
  text-decoration: underline;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  margin: 0 0 12px;
}
.detail-grid:last-child {
  margin-bottom: 0;
}
.detail-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.detail-grid dt {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.detail-grid dd {
  margin: 0;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.detail-grid dd small {
  display: block;
  font-weight: 400;
  margin-top: 4px;
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.temporary-password-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.temporary-password-form .input {
  width: 220px;
  height: 36px;
}
.admin-console .notice {
  margin-bottom: 12px;
}
.admin-section > h2,
.admin-console .page-heading h1 {
  overflow-wrap: anywhere;
}

/* Mapping editor: a scrollable, filterable table of workspaces with the current selection first. */
.mapping-table-wrap {
  max-height: 420px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.mapping-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-top: 0;
}
.mapping-table th:first-child,
.mapping-table td:first-child {
  width: 1%;
  padding-right: 0;
}
.mapping-table tbody tr:has(input:checked) {
  --row-fill: var(--brand-wash);
}
.mapping-table tr:has(input:disabled) {
  opacity: 0.65;
}
.mapping-name {
  color: var(--brand-navy);
  font-weight: 550;
  cursor: pointer;
}
.customer-mapping-fields:disabled .mapping-name {
  cursor: default;
}
.mapping-form > .btn {
  margin-top: 12px;
}
/* Subsidiary picker: NetSuite's subsidiary tree, indented by depth (CSP forbids inline styles). */
.subsidiary-fields {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.subsidiary-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.subsidiary-tree li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
}
.subsidiary-tree li + li {
  border-top: 1px solid var(--line);
}
.subsidiary-tree li[data-depth='1'] {
  padding-inline-start: 36px;
}
.subsidiary-tree li[data-depth='2'] {
  padding-inline-start: 60px;
}
.subsidiary-tree li[data-depth='3'] {
  padding-inline-start: 84px;
}
.subsidiary-tree li:has(input:checked) {
  background: var(--brand-wash);
}
.subsidiary-tree label {
  margin: 0;
  color: var(--brand-navy);
  font-weight: 550;
  cursor: pointer;
}
.subsidiary-fields:disabled label {
  cursor: default;
}
/* A child of a checked subsidiary is included through its parent: checked, greyed, and not clickable (portal.js). */
.subsidiary-tree li[data-covered] label {
  color: var(--text-muted);
  font-weight: 450;
  cursor: default;
}
.subsidiary-tree li[data-covered] input {
  opacity: 0.55;
}
.field-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 550;
}
.limit-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.limit-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.mapping-limit td {
  vertical-align: top;
}
@media (max-width: 760px) {
  .col-secondary {
    display: none;
  }
  .admin-search {
    max-width: none;
  }
  .admin-toolbar > div {
    flex: 1 1 100%;
  }
  .admin-toolbar-end {
    justify-content: space-between;
  }
  .detail-actions .btn {
    flex: 1 1 auto;
  }
  .temporary-password-form,
  .temporary-password-form .input {
    flex: 1 1 100%;
    width: 100%;
  }
}
/* Error page actions: Try Again or Go Back, then Return to Portal. */
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
/* The page-loading indicator (portal.js): a bar across the top and a status line naming what the next page waits for. */
.page-loading-bar,
.page-loading-status {
  position: fixed;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.page-loading-bar {
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  background: var(--brand-periwinkle);
}
.page-loading-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--brand-slate);
  animation: page-loading-slide 1.2s ease-in-out infinite;
}
.page-loading-status {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--brand-navy);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-navy) 30%, transparent);
}
.page-loading-status small {
  grid-column: 2;
  color: var(--brand-periwinkle);
  font-size: 12px;
  line-height: 16px;
}
.page-loading-status small:empty {
  display: none;
}
.page-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--brand-periwinkle) 40%, transparent);
  border-top-color: var(--brand-periwinkle);
  border-radius: 50%;
  animation: page-loading-spin 0.8s linear infinite;
}
.page-loading-bar::after,
.page-loading-spinner {
  animation-play-state: paused;
}
.page-is-loading .page-loading-bar,
.page-is-loading .page-loading-status {
  opacity: 1;
}
.page-is-loading .page-loading-bar::after,
.page-is-loading .page-loading-spinner {
  animation-play-state: running;
}
/* The current page stays readable but recedes while the next one loads. */
.page-is-loading body > :not(.page-loading, .local-mfa-warning) {
  opacity: 0.6;
  transition: opacity 0.2s;
}
@keyframes page-loading-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}
@keyframes page-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-loading-bar::after {
    width: 100%;
    animation: none;
  }
  .page-loading-spinner {
    animation-duration: 2.4s;
  }
}
/* Page shells (shell.html): the page's layout with placeholders while portal.js loads its content. */
.skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-tint) 25%, var(--brand-wash) 50%, var(--surface-tint) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-crumb {
  width: 180px;
  height: 14px;
}
.shell-heading {
  display: grid;
  gap: 10px;
}
.skeleton-title {
  width: min(320px, 70vw);
  height: 30px;
}
.skeleton-line {
  width: min(460px, 80vw);
  height: 14px;
}
.shell-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.shell-status {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  color: var(--text-muted);
  font-size: 14px;
}
.shell-status small {
  grid-column: 2;
  font-size: 12px;
}
.shell-status small:empty {
  display: none;
}
.shell-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--brand-periwinkle);
  border-top-color: var(--brand-slate);
  border-radius: 50%;
  animation: page-loading-spin 0.8s linear infinite;
}
.shell-rows {
  display: grid;
  gap: 10px;
}
.skeleton-row {
  height: 36px;
}
.shell-failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.shell-failure[hidden] {
  display: none;
}
@keyframes skeleton-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
  .shell-spinner {
    animation-duration: 2.4s;
  }
}

/* My Account: a profile card, the sign-in and security tiles (the Dashboard's tiles, opening dialogs), and recent
   activity. */
.account-content {
  display: grid;
  align-content: start;
  gap: var(--gutter);
}
.account-content > .notice {
  margin: 0;
}
.account-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  /* The pending-change notice takes an implicit row, so without it no empty row adds a gap at the bottom. */
  grid-template-areas: 'avatar identity signin actions';
  align-items: center;
  gap: 12px 28px;
  padding: 18px 20px;
}
.account-avatar {
  grid-area: avatar;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-periwinkle);
  color: var(--brand-navy);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}
.account-identity {
  grid-area: identity;
  min-width: 0;
}
.account-identity h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-navy);
  overflow-wrap: anywhere;
}
.account-identity p {
  margin: 2px 0 0;
}
.account-signin {
  grid-area: signin;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.account-signin span {
  font-size: 12px;
}
.account-signin strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.account-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.account-pending {
  grid-column: 1 / -1;
  margin: 0;
}
.account-pending form {
  margin-left: auto;
}
/* A tile that opens a dialog is a button, laid out like the Dashboard's link tiles. Its detail line takes the bar's
   row. */
button.stat-card {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stat-detail {
  grid-area: bar;
  align-self: start;
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
}
.account-empty {
  margin: 0;
  padding: 16px;
}
/* The activity table and its note line up with the panel's heading. */
.account-activity .table :is(th, td):first-child {
  padding-left: 16px;
}
.account-activity .section-note {
  margin: 0;
  padding: 12px 16px;
}
.account-dialog .form-stack {
  margin: 0;
}
.account-dialog .form-stack label:first-child {
  margin-top: 0;
}
.account-dialog section > .notice {
  margin: 0 0 12px;
}
.account-dialog footer .btn {
  min-height: 40px;
}
/* A My Account step after a dialog (new recovery codes, a new authenticator): one well, with its actions below. */
.account-back {
  justify-self: start;
}
.account-step {
  width: 100%;
  max-width: 720px;
  padding: 0;
  overflow: hidden;
}
.account-step > .section-heading {
  border-bottom: 1px solid color-mix(in srgb, var(--brand-periwinkle) 70%, var(--line));
  background: linear-gradient(135deg, var(--card), var(--brand-wash) 60%);
}
.account-step h1 {
  margin: 0;
  font-size: 17px;
}
.account-step-body {
  padding: 16px 20px 4px;
}
.account-step-body > p {
  margin: 0 0 4px;
}
.account-step-body .recovery-codes {
  max-width: 420px;
}
/* Numbered steps, each number in a small disc beside its step. */
.account-steps {
  display: grid;
  gap: 20px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.account-steps li {
  position: relative;
  display: grid;
  gap: 6px;
  padding-left: 36px;
  counter-increment: step;
}
.account-steps li::before {
  content: counter(step);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-periwinkle);
  color: var(--brand-navy);
  font-size: 12px;
  font-weight: 700;
}
.account-steps .secret-key,
.account-steps .form-stack {
  margin: 4px 0 0;
  max-width: 420px;
}
.account-steps .security-link {
  justify-self: start;
  padding: 0;
}
.account-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}
/* Without this, the global transition fades the buttons in from the browser's grey button style on every page load. */
.account-step-actions .btn {
  transition: none;
}
.account-step-actions .btn:hover {
  transition: background-color 0.15s;
}
@media (max-width: 900px) {
  .account-profile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'avatar identity'
      'signin signin'
      'actions actions';
  }
}
.invite-addresses {
  min-height: 64px;
  resize: vertical;
}
/*
 * A customer's contacts: on the workspace page, and in the invitation form's picker (portal.js), one table per checked
 * workspace, named only when there are several. On narrow screens each email moves under the name.
 */
.contact-picker,
.contact-groups {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.contact-picker .field-label,
.contact-picker .field-help,
.contact-picker .notice,
#workspace-contacts .notice.danger {
  margin: 0;
}
.contact-picker .admin-empty,
.contact-status {
  display: flex;
  gap: 8px;
  align-items: center;
}
.contact-picker .admin-empty svg,
.contact-status svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.contact-group-name {
  display: none;
  margin: 4px 0 6px;
  font-size: 13px;
  font-weight: 550;
  color: var(--brand-navy);
}
.contact-groups:has(.contact-group + .contact-group) .contact-group-name {
  display: block;
}
.contact-email {
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.stacked-email {
  display: none;
}
.status-cell {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}
@media (max-width: 760px) {
  .contact-table .col-email {
    display: none;
  }
  .contact-table .stacked-email {
    display: block;
    font-size: 12px;
  }
}
.field-help {
  display: block;
  margin-top: 6px;
}
.check-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin: 0;
}