/* Home ERP design system - ERP additions on the ds-tokens.css tokens: the states the Figma does
   not draw (hover, loading, error) and the staff dashboard parts it has no frame for. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/vendor/inter/inter-latin-wght-normal.woff2) format('woff2-variations');
}

/* ---------- States ---------- */
.ds-root a, .ds-root button, .ds-root .ds-sidebar__item, .ds-root .ds-tabs__tab {
  transition: background-color 150ms, color 150ms, opacity 150ms; }
.ds-btn--primary:enabled:hover, .ds-btn--accent:enabled:hover, a.ds-btn--primary:hover,
a.ds-btn--accent:hover, .ds-icon-btn--brand:hover { background: var(--brand-band-bottom); }
.ds-btn--outline:enabled:hover, .ds-btn--secondary:enabled:hover { border-color: var(--brand); }
.ds-sidebar__item:hover { background: var(--brand-raised); }
.ds-tabs__tab:hover:not([aria-selected="true"]):not([aria-current="page"]) { background: var(--surface-muted); }
.ds-table tbody tr:hover td { background: var(--tone-blue); }
/* An empty or failed table prints its state on the card, where its muted and danger text reach AA. */
.ds-table tbody td.ds-table__state, .ds-table tbody tr:hover td.ds-table__state { background: var(--surface-card); }
.ds-link { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ds-link:hover { color: var(--brand); }
.ds-state { display: grid; justify-items: center; gap: var(--space-8); padding: var(--space-32) var(--space-24);
  text-align: center; color: var(--ink-muted); font: 400 15px/22px var(--font-sans); }
.ds-state__title { font: 600 16px/24px var(--font-sans); color: var(--ink); }
.ds-state--error .ds-state__title { color: var(--danger); }
.ds-skeleton { display: block; height: 16px; border-radius: var(--radius-sm); background: var(--surface-muted);
  animation: ds-pulse 1.2s ease-in-out infinite; }
.ds-skeleton--value { width: 40%; height: 32px; }
@keyframes ds-pulse { 50% { opacity: .5; } }

/* ---------- Status tag ---------- */
/* The neutral tone as a modifier, so a tone map can name it beside the other tones. */
.ds-tag--neutral { background: var(--tone-neutral); color: var(--tone-neutral-ink); }

/* ---------- Page header and card shell ---------- */
.ds-page-head__title { margin: 0; font: 700 32px/40px var(--font-sans); }
.ds-page-head__period { color: var(--ink-muted); font: 500 15px/20px var(--font-sans); }
.ds-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  margin-bottom: var(--space-16); }

/* ---------- KPI card ---------- */
.ds-kpi { display: grid; gap: var(--space-8); padding: var(--space-20); border: 1px solid var(--border);
  border-radius: var(--radius-panel); background: var(--surface-card); color: inherit; text-decoration: none; }
a.ds-kpi:hover { border-color: var(--brand); }
.ds-kpi__label { font: 500 15px/20px var(--font-sans); color: var(--ink-muted); }
.ds-kpi__value { font: 600 32px/40px var(--font-sans); font-variant-numeric: tabular-nums; }
.ds-kpi__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font: 400 13px/18px var(--font-sans); }
.ds-kpi__delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-kpi__delta--good { color: var(--tone-green-ink); }
.ds-kpi__delta--bad { color: var(--tone-red-ink); }

/* ---------- Bullet bar ---------- */
.ds-bullet { display: grid; gap: var(--space-4); }
.ds-bullet__track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--chart-grid); }
.ds-bullet__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--chart-1); }
.ds-bullet__target { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--chart-target); }
.ds-bullet__legend { display: flex; justify-content: space-between; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* ---------- Filter bar ---------- */
.ds-filterbar { display: grid; gap: var(--space-12); padding: var(--space-16) var(--space-20);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card); }
.ds-filterbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.ds-filterbar__actions { margin-left: auto; display: flex; gap: var(--space-8); }
.ds-filterbar__dataline { margin: 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.ds-filterbar__form, .ds-filterbar__range, .ds-filterbar__summary { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-8); }
.ds-filterbar__field { display: grid; gap: var(--space-4); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
fieldset.ds-filterbar__field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.ds-filterbar__field > legend { padding: 0 0 var(--space-4); }
/* The bar's segmented control: options edge to edge, each a 44px target. A bar narrower than
   its options wraps them onto a second row rather than squeezing a label under its text; the
   1px gap over the field colour draws the dividers on either row. */
.ds-seg--bar { flex-wrap: wrap; max-width: 100%; gap: 1px; padding: 0; overflow: hidden;
  border-radius: var(--radius-md); background: var(--border-field); }
.ds-seg--bar .ds-seg__opt { flex: 1 0 auto; min-height: var(--size-tap); min-width: 0; padding: 0 var(--space-12);
  border-radius: 0; background: var(--surface-card); font: 500 14px/20px var(--font-sans); }
.ds-seg--bar .ds-seg__opt[aria-pressed="true"] { background: var(--brand); }
.ds-seg--bar .ds-seg__opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.ds-filterbar__date { min-height: var(--size-control-xs); padding: 0 var(--space-12); border: 1px solid var(--border-field);
  border-radius: var(--radius-md); background: var(--surface-card); color: var(--ink); font: 400 14px/20px var(--font-sans); }
.ds-filterbar__actions { flex-wrap: wrap; align-items: center; }
.ds-filterbar__error { color: var(--danger); font: 400 14px/20px var(--font-sans); }
.ds-filterbar__menu { position: relative; }
.ds-filterbar__menu > summary { list-style: none; cursor: pointer; }
.ds-filterbar__menu > summary::-webkit-details-marker { display: none; }
.ds-filterbar__menu-list { position: absolute; right: 0; z-index: 30; display: grid; gap: var(--space-8); min-width: 260px;
  margin-top: var(--space-4); padding: var(--space-12) var(--space-16); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-modal); }
/* Stays in reach while a long view scrolls under it; above the cards, below the menus. */
.ds-filterbar--sticky { position: sticky; top: 0; z-index: 20; padding-block: var(--space-8); background: var(--surface-page); }

/* ---------- Supervisor dashboard views ---------- */
.ds-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.ds-view:focus { outline: none; }
.ds-sidebar__item .ds-count { margin-left: auto; }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
@media (max-width: 1100px) { .ds-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ds-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.ds-attention { display: flex; flex-wrap: wrap; gap: var(--space-12); margin: 0; padding: 0; list-style: none; }
.ds-attention__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.ds-attention__basis { color: var(--ink-muted); font: 400 13px/18px var(--font-sans); }
.ds-card__live { margin: var(--space-12) 0 0; }
/* The judged measures within their band, drawn as the share of a ring with its count. */
.ds-ring { display: inline-flex; align-items: center; gap: var(--space-12); color: inherit; text-decoration: none; }
.ds-ring__dial { width: 48px; height: 48px; transform: rotate(-90deg); }
.ds-ring__track, .ds-ring__fill { fill: none; stroke-width: 3.5; }
.ds-ring__track { stroke: var(--chart-grid); }
.ds-ring__fill { stroke: var(--tone-green-ink); stroke-linecap: round; }
.ds-ring__count { transform: rotate(90deg); transform-origin: 18px 18px; fill: var(--ink); font: 600 11px/1 var(--font-sans); }
.ds-ring__label { font: 600 15px/20px var(--font-sans); }
/* A secondary panel, drawn closed behind its heading until it is opened. */
.ds-collapsed { padding-block: var(--space-16); }
.ds-collapsed__summary { cursor: pointer; font: 600 16px/24px var(--font-sans); }
.ds-collapsed[open] > .ds-collapsed__summary { margin-bottom: var(--space-16); }
/* A panel table can carry more columns than a view at tablet width holds. */
.ds-view th, .ds-view td { padding-left: var(--space-12); padding-right: var(--space-12); }
.ds-view td:first-child { white-space: normal; }
.ds-view .overflow-x-auto, .ds-view .overflow-hidden { max-width: 100%; }
/* A label on an open-ended column set reads bottom to top, so the column is only as wide as
   its figures. */
.ds-vertical-label { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 8rem; text-align: left; }

/* ---------- Drawer ---------- */
.ds-drawer { margin: 0 0 0 auto; width: min(480px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh;
  padding: 0; border: 0; background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-modal); }
.ds-drawer::backdrop { background: var(--scrim); backdrop-filter: blur(8px); }
.ds-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-20) var(--space-24); border-bottom: 1px solid var(--border); }
.ds-drawer__body { display: grid; gap: var(--space-16); padding: var(--space-24); }

/* ---------- Charts ---------- */
.ds-chart { display: grid; gap: var(--space-12); margin: 0; }
.ds-chart__canvas { position: relative; height: 280px; }
.ds-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-16); margin: 0; padding: 0; list-style: none;
  font: 400 13px/18px var(--font-sans); }
.ds-chart__key { display: inline-flex; align-items: center; gap: var(--space-8); }
.ds-chart__swatch { width: 12px; height: 12px; border-radius: 3px; }
.ds-chart__table summary { min-height: var(--size-tap); padding: var(--space-12) 0; cursor: pointer; color: var(--link);
  font: 500 14px/20px var(--font-sans); }
.ds-series-1 { --series: var(--chart-1); } .ds-series-2 { --series: var(--chart-2); }
.ds-series-3 { --series: var(--chart-3); } .ds-series-4 { --series: var(--chart-4); }
.ds-series-5 { --series: var(--chart-5); } .ds-series-6 { --series: var(--chart-6); }
.ds-chart__swatch[class*="ds-series-"] { background: var(--series); }

/* ---------- Sign-in and entry pages ---------- */
/* Every sign-in, recovery and entry page of the three portals (`layouts/sign_in.html` and the
   family layouts beside it). Plain CSS on the tokens rather than Tailwind utilities, so the page
   is laid out with JavaScript off.

   One composition on one centred axis. From 641px the whole page is the stage: a navy field lit
   from behind the card, the authority's name as the headline over it and the card as the one lit
   object; on a screen taller than the page, the free height is shared evenly above the name and
   below the card, so the two sit on the optical centre. On a phone the field becomes a band across
   the top with the card lifted over it, so the address field stays on the first screen.

   Every word off the card is drawn for the navy (`--on-brand`), and so is the focus ring there:
   the accent outline all but vanishes on it. The art is a clipped layer of its own, so 200
   percent text or a spacing override never cuts the bar or the name. The name and the card are
   on screen from the first paint and arrive by transform alone; motion stops under reduced
   motion. */
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-display: optional;
  font-weight: 700;
  src: url(/static/vendor/inter/inter-display-latin-700-normal.woff2) format('woff2');
  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;
}
/* The same Inter file as the sign-in pages' body face, never swapped in late: a first visit that
   misses its first 100 ms stays on the fallback below for that page, so no line rewraps and
   nothing on the stage moves after the first paint. The next page has it from the cache. */
@font-face {
  font-family: "Inter Stage";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(/static/vendor/inter/inter-latin-wght-normal.woff2) format('woff2-variations');
}
/* Arial set to Inter's measure, so text drawn before Inter arrives takes the room Inter will take
   and nothing moves when it swaps in. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}
/* Alpine hides x-cloak elements only if a stylesheet says so, and this one is on every sign-in page. */
[x-cloak] { display: none !important; }

/* The document of a sign-in page links no Tailwind: this block is all of its layout, so the
   page draws the same with JavaScript on and off, and the first paint waits on these sheets
   alone. What the utility sheet would have given the shared pieces drawn inside it is here,
   at no specificity where it is a reset. */
.ds-login-page { --font-sans: "Inter Stage", "Inter Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  margin: 0; background: var(--brand-deep); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
:where(.ds-login-page) :where(h1, h2, h3, p, ul, ol, figure, fieldset) { margin: 0; }
:where(.ds-login-page) :where(button, input, select) { font: inherit; color: inherit; }
:where(.ds-login-page) :where(img, svg) { display: block; }
:where(.ds-login-page) :where(a) { color: inherit; }
.ds-login-page .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* The skip link of `components/applicant_a11y.html`: above the viewport until it is focused, and
   ringed in white, the ring that shows on the navy it slides in over. */
.ds-login-page > a[href="#main-content"] { --focus-ring: var(--on-brand); position: fixed; top: var(--space-8); left: var(--space-8); z-index: 10000;
  display: inline-flex; align-items: center; min-height: var(--size-tap); padding: 0 var(--space-16);
  border-radius: var(--radius-md); background: var(--surface-card); color: var(--accent); font: 600 16px/24px var(--font-sans);
  text-decoration: underline; box-shadow: 0 0 0 2px var(--accent); transform: translateY(-200%); }
.ds-login-page > a[href="#main-content"]:focus { transform: none; }
/* The landlord portal's staff view-as notice, when a staff member is looking at it. */
.ds-login-page [data-view-as-banner] { border-bottom: 1px solid var(--notice-warn-edge); background: var(--notice-warn);
  color: var(--ink); }
.ds-login-page [data-view-as-banner] > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-12); padding: var(--space-12) var(--space-16); }
.ds-login-page [data-view-as-banner] p { font: 500 18px/26px var(--font-sans); }
.ds-login-page [data-view-as-banner] button { min-height: var(--size-tap); padding: 0 var(--space-16); border: 0;
  border-radius: var(--radius-md); background: var(--ink); color: var(--on-brand); font: 600 16px/24px var(--font-sans); }
/* `components/error_summary.html` (the landlord refusal box) drawn as the block's error notice. */
.ds-login [data-refusal] { margin-top: var(--space-20); padding: var(--space-16); border: 1px solid var(--danger);
  border-radius: var(--radius-lg); background: var(--tone-red); color: var(--ink); font: 400 18px/28px var(--font-sans); }
.ds-login [data-refusal] > div { display: flex; gap: var(--space-12); }
.ds-login [data-refusal] > div > div:first-child { flex: none; color: var(--danger); }
.ds-login [data-refusal] > div > div:first-child svg { width: 24px; height: 24px; margin-top: 2px; }
.ds-login [data-refusal] > div > div + div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ds-login [data-refusal] ul { margin: var(--space-4) 0 0; padding-left: var(--space-20); list-style: disc; }
.ds-login [data-refusal] a, .ds-login__prompt a { display: inline-flex; align-items: center; min-height: var(--size-tap);
  color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ds-login [data-refusal] a { color: var(--ink); }

.ds-login { --login-frame: none; --login-card: none; --login-gutter: var(--space-12); --login-pad: var(--space-20);
  --login-org: 300 30px/36px; --login-title: 28px; --login-title-lh: 34px; --login-plate: 44px;
  --login-name-max: 100%;
  /* A phone sets its titles in the body face it already has: the display cut is used from 641px
     only and never preloaded, so a phone never fetches it, and no late face reflows a title. */
  --login-title-font: var(--font-sans); --focus-ring: var(--on-brand);
  --stage-min: 0px;
  /* Rows: the bar, the space over the stage, the name, the card and its lines, the floor's space,
     the footer. The two spaces share the screen's free height evenly, so the name and the card are
     centred between the bar and the footer. */
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(var(--stage-min), 1fr) auto auto minmax(var(--space-24), 1fr) auto;
  min-height: 100vh; min-height: 100svh;
  background: var(--brand-deep); color: var(--on-brand); }
/* The 8AI night field, a stage rather than an empty dark: a vignette at its edges, the azure light
   behind the card and the accent around it, a sheen from above and a floor that sinks into the
   deep navy. Sized to the first screen, so on a long page the rest is the floor colour; its last
   part fades into it, so a page taller than the field shows no edge where the field ends. */
.ds-login__field { position: absolute; inset: 0 0 auto 0; z-index: -2; height: max(100vh, 900px); overflow: hidden;
  pointer-events: none; mask-image: linear-gradient(180deg, black 85%, transparent);
  background:
    radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, color-mix(in srgb, var(--brand-deep) 75%, transparent) 100%),
    radial-gradient(ellipse 26% 22% at 50% 40%, color-mix(in srgb, var(--brand-glow) 42%, transparent), transparent 72%),
    radial-gradient(ellipse 50% 48% at 50% 52%, color-mix(in srgb, var(--accent) 72%, transparent), transparent 74%),
    radial-gradient(ellipse 80% 42% at 50% -8%, color-mix(in srgb, var(--brand) 95%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 40%, var(--brand-deep)) 0%, var(--brand-deep) 70%); }
/* A pool of light on the page's floor, under the footer, however long the page runs. */
.ds-login::before { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 200px; pointer-events: none;
  background: radial-gradient(ellipse 34% 45% at 50% 99%, color-mix(in srgb, var(--brand-glow) 22%, transparent), transparent 72%); }
/* Grain, so a gradient this wide does not band on a large monitor: one static tile. */
.ds-login__field::after, .ds-login__sky::after { content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* The 8AI rings, centred on the card and fading outward: they frame the form and never cross a
   word. Each circle carries its own opacity in the markup. */
.ds-login__rings { position: absolute; left: 50%; top: 50%; width: 2800px; height: 2800px; margin: -1400px 0 0 -1400px;
  color: var(--brand-sky); }
.ds-login__rings circle { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

.ds-login__band { --focus-ring: var(--on-brand); position: relative; grid-row: 1; grid-column: 1; }
.ds-login__sky { display: none; }
/* The name and the card are the page's main content, laid on the shell's rows (a subgrid), so the
   name sits in the stage's row and the card in the next. */
.ds-login__main { position: relative; grid-row: 3 / 5; grid-column: 1; display: flex; flex-direction: column;
  min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .ds-login__main { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
}
.ds-login__footer { grid-row: 6; grid-column: 1; }
.ds-login__bar, .ds-login__hero { box-sizing: content-box; width: calc(100% - 2 * var(--login-gutter));
  max-width: var(--login-frame); margin-inline: auto; padding-inline: var(--login-gutter); }
/* The authority's name is the page's headline, wider than the frame and the card. */
.ds-login__hero { max-width: var(--login-name-max); }
.ds-login__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-12); padding-top: var(--space-16); }
.ds-login__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-left: auto; }
.ds-login__tools form { margin-left: 0; }
/* The 8AI mark in a white disc ringed in the brand's azure - its shield-in-a-ring, at every width. */
.ds-login .ds-brand-plate { display: grid; place-items: center; width: var(--login-plate); height: var(--login-plate);
  padding: 0; border-radius: 50%; background: var(--surface-card);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-deep) 60%, transparent),
    0 0 0 5px color-mix(in srgb, var(--brand-glow) 55%, transparent),
    0 8px 24px -8px color-mix(in srgb, var(--brand-deep) 80%, transparent); }
.ds-login .ds-brand-plate img { display: block; width: auto; height: calc(var(--login-plate) - 14px); }
.ds-login__hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* The authority's name is the page's identity: its largest words, set light, so the card's title
   in the display cut stays the task. Never clamped - a long name takes another line. Over it the
   portal's name as an eyebrow in white: the card's light and halo reach up behind it over a short
   card, where any azure falls under 4.5:1. */
.ds-login__org { margin: 0; max-width: 100%; min-width: 0; color: var(--on-brand);
  font: var(--login-org) var(--font-sans); letter-spacing: -.024em;
  overflow-wrap: anywhere; text-wrap: balance; }
/* On a page whose heading is the name itself, the words that lead into it, on their own line. */
.ds-login__kicker { display: block; font: 400 20px/28px var(--font-sans); letter-spacing: normal;
  color: color-mix(in srgb, var(--on-brand) 85%, transparent); }
.ds-login__pill { order: -1; margin: 0 0 var(--space-4); font: 600 16px/24px var(--font-sans); letter-spacing: .16em; text-wrap: balance;
  text-transform: uppercase; color: var(--on-brand); }
.ds-login__mark { order: -2; }
.ds-login__mark:empty { display: none; }

/* The shared language switch, drawn as a segmented control on glass with the chosen language a
   white segment; the logout control and a band link take the same glass. Three classes or
   attributes and an element deep, so the rules outrank the components' own utilities. */
.ds-login .ds-login__tools [role="group"] { display: inline-flex; min-height: 0; padding: 3px; border-radius: 15px;
  background: color-mix(in srgb, var(--on-brand) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-brand) 22%, transparent); }
.ds-login .ds-login__tools [role="group"] > a { display: inline-flex; align-items: center; min-height: var(--size-tap);
  padding: 0 18px; border: 0; border-radius: 12px; background: transparent; color: var(--on-brand);
  font: 500 16px/24px var(--font-sans); text-decoration: none; }
.ds-login .ds-login__tools [role="group"] > a:hover { background: color-mix(in srgb, var(--on-brand) 12%, transparent); }
.ds-login .ds-login__tools [role="group"] > a[aria-current="true"],
.ds-login .ds-login__tools [role="group"] > a[aria-current="true"]:hover { background: var(--surface-card); color: var(--brand);
  font-weight: 600; box-shadow: 0 1px 3px color-mix(in srgb, var(--brand-band-bottom) 35%, transparent); }
.ds-login .ds-login__tools > form button[type="submit"], .ds-login .ds-login__toollink { display: inline-flex;
  align-items: center; gap: var(--space-8); min-height: var(--size-tap); padding: 0 18px; border: 0; border-radius: 15px;
  background: color-mix(in srgb, var(--on-brand) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-brand) 22%, transparent); color: var(--on-brand);
  font: 500 16px/24px var(--font-sans); text-decoration: none; cursor: pointer; }
.ds-login .ds-login__tools > form button[type="submit"]:hover, .ds-login .ds-login__toollink:hover {
  background: color-mix(in srgb, var(--on-brand) 18%, transparent); }
/* A staff session's name in the bar, opening onto a white menu: the organization switch for a
   super admin, and Logout. A disclosure, so it opens without script. */
.ds-login__account { position: relative; }
.ds-login__account > summary { list-style: none; }
.ds-login__account > summary::-webkit-details-marker { display: none; }
.ds-login__badge { padding: 0 var(--space-8); border-radius: var(--radius-pill); background: var(--surface-card);
  color: var(--brand); font: 600 16px/24px var(--font-sans); }
.ds-login__menu { --focus-ring: var(--accent); position: absolute; top: calc(100% + var(--space-8)); right: 0; z-index: 30;
  display: grid; gap: var(--space-12); width: min(320px, calc(100vw - 2 * var(--login-gutter))); padding: var(--space-16);
  border-radius: var(--radius-xl); background: var(--surface-card); color: var(--ink); text-align: left;
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--brand-deep) 60%, transparent); }
.ds-login__menu form { display: grid; gap: var(--space-8); }
.ds-login__menu-title { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--ink); }
.ds-login__menu .ds-input { min-height: var(--size-tap); }

/* ---------- The card: the one lit object ---------- */
.ds-login__column { box-sizing: content-box; width: calc(100% - 2 * var(--login-gutter)); max-width: var(--login-card);
  margin-inline: auto; padding-inline: var(--login-gutter); }
.ds-login__card { --focus-ring: var(--accent); position: relative; min-width: 0; margin-top: var(--space-32);
  padding: var(--login-pad); border-radius: var(--radius-card); background: var(--surface-card); color: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-band-bottom) 6%, transparent),
    0 2px 4px color-mix(in srgb, var(--brand-band-bottom) 14%, transparent),
    0 16px 32px -8px color-mix(in srgb, var(--brand-band-bottom) 32%, transparent),
    0 56px 112px -24px color-mix(in srgb, var(--brand-band-bottom) 62%, transparent); }
/* The card's azure rim and aura: on a layer of its own behind it, so its arrival is an opacity
   change alone. */
.ds-login__card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-glow) 22%, transparent),
    0 0 140px 12px color-mix(in srgb, var(--brand-glow) 24%, transparent); }
.ds-login__footer { margin: 0; border: 0; background: transparent; }
.ds-login .ds-login__footer > div { padding: var(--space-24) var(--space-16) 28px; }
/* 80 percent white: under a short card on a full HD screen the line sits in the floor's pool of
   light, where 62 percent read 4.0:1. */
.ds-login .ds-login__footer p { margin: 0; text-align: center; font: 400 16px/24px var(--font-sans);
  color: color-mix(in srgb, var(--on-brand) 80%, transparent); }
/* The release and its separator travel together; on a phone the release takes a line of its own
   (below), so the "|" never ends a line alone. */
.ds-login .ds-login__footer .product-footer__release { white-space: nowrap; }
/* Off the card, on the navy: the line under it, a way back, a note. The line is not balanced: its
   link is one unbreakable box, so filling the first line keeps the question whole and puts the
   link alone under it, where balancing would split the question. */
.ds-login__alt { margin: 28px 0 0; text-align: center; font: 400 17px/26px var(--font-sans); text-wrap: pretty;
  color: color-mix(in srgb, var(--on-brand) 86%, transparent); }
.ds-login__alt a, .ds-login__back a { color: var(--on-brand); font-weight: 600; text-decoration: underline;
  text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--on-brand) 50%, transparent); }
.ds-login__alt .ds-login__link--target { min-height: var(--size-tap); }
.ds-login__back { display: flex; justify-content: center; margin-top: var(--space-16); }
.ds-login__back a { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--size-tap);
  font: 600 16px/24px var(--font-sans); }
.ds-login__aside { margin: var(--space-16) auto 0; max-width: 34em; text-align: center; font: 400 16px/24px var(--font-sans);
  color: color-mix(in srgb, var(--on-brand) 86%, transparent); }

/* Inside the card. On a phone the chip sits beside the title, which keeps the field on the first
   screen. From 641px the chip stands over the title, both on the axis, so a title that wraps
   stays centred over its lede; the sign-in steps, whose titles hold one line, keep the row
   (`--row`), which keeps the whole first step on the first screen of a monitor. */
.ds-login__head { display: flex; align-items: center; gap: var(--space-12); }
.ds-login__chip { display: inline-grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(180deg, var(--tile-blue), var(--tone-blue)); color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); }
.ds-login__chip .ds-icon { width: 24px; height: 24px; }
.ds-login__chip--success { background: var(--tone-green); color: var(--tone-green-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-green-ink) 12%, transparent); }
.ds-login__title { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: break-word; text-wrap: balance;
  font: 700 var(--login-title)/var(--login-title-lh) var(--login-title-font); letter-spacing: -.026em; }
.ds-login__lede { margin: var(--space-4) 0 0; font: 400 18px/28px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.ds-login__text { margin: var(--space-16) 0 0; font: 400 18px/28px var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.ds-login__muted { margin: var(--space-12) 0 0; font: 400 16px/24px var(--font-sans); color: var(--ink-muted);
  overflow-wrap: anywhere; }
.ds-login__section { margin: var(--space-32) 0 0; font: 600 20px/28px var(--font-sans); color: var(--ink); }
.ds-login__subsection { margin: var(--space-24) 0 0; font: 600 18px/26px var(--font-sans); color: var(--ink); }
/* A notice's text column is a flex child: without `min-width: 0` a long address in it holds the
   column at its own width and pushes the page sideways on a phone. */
.ds-login__notice { display: flex; gap: var(--space-12); margin-top: var(--space-20); padding: var(--space-16);
  border: 1px solid var(--border); border-radius: var(--radius-lg); font: 400 18px/28px var(--font-sans); color: var(--ink); }
/* A notice the page's script reveals stays out of sight until it does: the flex box above would
   otherwise outrank the `hidden` attribute. */
.ds-login__notice[hidden] { display: none; }
/* After a refused submit the page's script focuses the refusal itself when it names no field: the
   ring goes round the whole notice, not the sentence inside it. */
.ds-login-page [data-refusal]:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@supports selector(:has(*)) {
  .ds-login__notice:has([role="alert"]:focus) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .ds-login__notice [role="alert"]:focus { outline: none; }
}
.ds-login__notice > div, .ds-login__notice > p { flex: 1; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.ds-login__notice p { margin: 0; }
.ds-login__notice p + p { margin-top: var(--space-8); }
.ds-login__notice a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ds-login__notice-icon { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.ds-login__notice--error { background: var(--tone-red); border-color: var(--danger); }
.ds-login__notice--error .ds-login__notice-icon { color: var(--danger); }
.ds-login__notice--info { background: var(--notice-info); border-color: var(--notice-info-edge); }
.ds-login__notice--info .ds-login__notice-icon { color: var(--accent); }
.ds-login__notice--success { background: var(--tone-green); border-color: var(--success); }
.ds-login__notice--success .ds-login__notice-icon { color: var(--tone-green-ink); }
.ds-login__notice--warn { background: var(--notice-warn); border-color: var(--notice-warn-edge); }
/* `minmax(0, 1fr)` and `min-width: 0` all the way down: a grid item will not shrink below its
   content's width, which runs a text input out of the card on a phone. */
.ds-login__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-20); }
.ds-login .ds-field { grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.ds-login .ds-input-wrap { min-width: 0; }
.ds-login .ds-field__label, .ds-login__legend { font: 600 18px/26px var(--font-sans); color: var(--ink); }
.ds-login .ds-field__hint { margin: 0; font: 400 16px/24px var(--font-sans); color: var(--ink-muted); }
.ds-login__field-error { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--tone-red-ink); }
/* An editable field is white with a 3:1 edge, so it never reads like the gray, read-only identity
   row; focus adds the accent edge and a soft halo to the 2px outline every control keeps. */
.ds-login .ds-input { width: 100%; min-width: 0; min-height: var(--size-control); padding: 0 var(--space-16);
  border: 1.5px solid var(--control-ring); border-radius: var(--radius-xl); background: var(--surface-card);
  color: var(--ink); font: 400 18px/26px var(--font-sans); }
.ds-login .ds-input-wrap .ds-input { padding-left: 40px; padding-right: var(--space-8); }
.ds-login .ds-input:focus { border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); }
.ds-login .ds-input[aria-invalid="true"] { border-color: var(--danger); }
.ds-login .ds-input::placeholder { color: var(--placeholder); opacity: 1; font-size: 16px; }
.ds-login .ds-input--code { font-variant-numeric: tabular-nums; letter-spacing: .2em; }
/* The digits typed are tracked; the example in the empty field is a sentence and reads as one. */
.ds-login .ds-input--code::placeholder { letter-spacing: normal; }
.ds-login .ds-input-wrap .ds-input--toggle { padding-right: 56px; }
.ds-login .ds-input-wrap__icon { display: grid; left: var(--space-12); width: 20px; height: 20px; color: var(--ink-subtle); }
.ds-login .ds-input-wrap__icon .ds-icon { width: 20px; height: 20px; }
.ds-login__fieldset { display: grid; gap: var(--space-8); min-width: 0; margin: 0; padding: 0; border: 0; }
.ds-login__legend { padding: 0; margin-bottom: var(--space-4); }
.ds-login__choice { display: flex; align-items: center; gap: var(--space-12); min-height: var(--size-tap);
  font: 400 18px/26px var(--font-sans); color: var(--ink); cursor: pointer; }
.ds-login__choice input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.ds-login__toggle { position: absolute; top: 50%; right: var(--space-8); display: grid; place-items: center;
  width: var(--size-tap); height: var(--size-tap); transform: translateY(-50%); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--ink-subtle); cursor: pointer; }
.ds-login__toggle[aria-pressed="true"] { background: var(--tone-blue); color: var(--accent); }
.ds-login__identity { display: flex; align-items: center; gap: var(--space-12); min-height: var(--size-control);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); border: 1px solid var(--border);
  border-radius: var(--radius-xl); background: var(--surface-field); color: var(--ink); }
.ds-login__identity .ds-icon { flex: none; color: var(--ink-subtle); }
.ds-login__identity-value { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 500 18px/26px var(--font-sans); }
.ds-login__found { display: flex; align-items: center; gap: var(--space-8); margin: calc(-1 * var(--space-8)) 0 0;
  font: 500 16px/24px var(--font-sans); color: var(--tone-green-ink); }
.ds-login__link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ds-login__link:hover { color: var(--brand); }
.ds-login__link--target { display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-tap);
  min-height: var(--size-tap); }
.ds-login__forgot { justify-self: end; margin-top: calc(-1 * var(--space-12)); font: 600 16px/24px var(--font-sans); }
/* The one filled control of a page: lit from above like the card, its shadow the accent's own. */
.ds-login__submit { gap: 10px; min-height: var(--size-control); border: 0; border-radius: var(--radius-xl);
  white-space: normal; text-align: center;
  font: 600 18px/26px var(--font-sans); letter-spacing: -.005em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, var(--on-brand)), var(--accent) 60%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-brand) 22%, transparent),
    0 1px 2px color-mix(in srgb, var(--brand-band-bottom) 35%, transparent),
    0 12px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.ds-login__submit:hover { background: var(--brand); }
.ds-login__spinner { display: none; }
.ds-login__submit[aria-busy="true"] .ds-login__spinner { display: block; }
.ds-login__submit[aria-busy="true"] .ds-login__go { display: none; }
.ds-login__hint { margin: 0; text-align: center; font: 400 16px/24px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.ds-login .ds-field__hint { text-wrap: pretty; }
/* A second action beside or under the one filled button: outlined, never filled. */
.ds-login__secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: var(--size-tap); padding: 0 var(--space-16); border: 1.5px solid var(--control-ring);
  border-radius: var(--radius-lg); background: var(--surface-card); color: var(--accent); font: 600 16px/24px var(--font-sans);
  text-align: center; text-decoration: none; cursor: pointer; }
.ds-login__secondary:hover { background: var(--tone-blue); }
.ds-login__secondary:disabled { color: var(--ink-muted); border-color: var(--border); background: var(--surface-page);
  cursor: not-allowed; }
.ds-login__secondary--block { width: 100%; min-height: var(--size-control); border-radius: var(--radius-xl); font-size: 18px; }
.ds-login__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); }
.ds-login__actions > * { flex: 1 1 200px; min-width: 0; }
/* One action under the other: the filled one, then a quiet way back centred under it. */
.ds-login__actions--stack { flex-direction: column; align-items: stretch; gap: var(--space-8); }
.ds-login__actions--stack > * { flex: none; }
.ds-login__actions--stack > .ds-login__link { align-self: center; }
.ds-login__steps { display: grid; gap: var(--space-12); margin: var(--space-16) 0 0; padding: 0; list-style: none;
  counter-reset: login-step; }
.ds-login__steps > li { display: flex; align-items: flex-start; gap: var(--space-12); counter-increment: login-step;
  font: 400 18px/28px var(--font-sans); color: var(--ink); }
.ds-login__steps > li::before { content: counter(login-step); display: grid; flex: none; place-items: center; width: 28px;
  height: 28px; border-radius: var(--radius-pill); background: var(--tone-blue); color: var(--accent);
  font: 600 16px/24px var(--font-sans); }
/* A quiet bulleted note after a step's button (a password's requirements, why a link failed). */
.ds-login__bullets { margin: var(--space-8) 0 0; padding-left: var(--space-20); list-style: disc;
  font: 400 16px/24px var(--font-sans); color: var(--ink-muted); }
.ds-login__bullets > li + li { margin-top: var(--space-4); }
/* "(optional)" after a field's label: the label's words stay the strong ones. */
.ds-login__optional { font-weight: 400; color: var(--ink-muted); }
/* The same list as a quiet note under a step's button: muted words, the numbers in a hairline ring. */
.ds-login__steps--quiet > li { font: 400 16px/24px var(--font-sans); color: var(--ink-muted); }
.ds-login__steps--quiet strong { font-weight: 600; color: var(--ink); }
.ds-login__steps--quiet > li::before { width: 24px; height: 24px; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--border); color: var(--ink-subtle); }
/* Every other way in, after the button: a grouped list on the page tint, monochrome glyphs and no
   underlines, so the button stays the only coloured thing in the card. Each row is one link and
   its chevron says so. */
.ds-login__help { margin-top: 28px; }
.ds-login__help-title { margin: 0 0 var(--space-8); font: 600 16px/24px var(--font-sans); color: var(--ink); }
.ds-login__list { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--surface-page) 70%, var(--surface-card)); }
.ds-login__list > li { position: relative; }
.ds-login__list > li + li::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px;
  background: var(--border); }
.ds-login__row { display: flex; align-items: center; gap: var(--space-16); min-height: 60px;
  padding: var(--space-8) 18px; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; }
.ds-login__row::-webkit-details-marker { display: none; }
.ds-login__row:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface-page)); }
.ds-login__row:focus-visible { outline-offset: -3px; }
.ds-login__row-chip { display: grid; flex: none; place-items: center; width: 22px; height: 22px; color: var(--ink-subtle); }
.ds-login__row-chip .ds-icon { width: 22px; height: 22px; }
.ds-login__row-text { display: grid; flex: 1; min-width: 0; }
.ds-login__row-title { font: 500 16px/24px var(--font-sans); color: var(--ink); }
.ds-login__row-action { font: 400 16px/24px var(--font-sans); color: var(--ink-muted); }
.ds-login__row-chevron { flex: none; width: 18px; height: 18px; color: var(--ink-faint); }
.ds-login__more[open] .ds-login__row-chevron { transform: rotate(90deg); }
/* The resend links wrap and shrink rather than run under the list's rounded clip, whatever the
   reader's text spacing. */
.ds-login__resend { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: 0 18px var(--space-16) 56px; }
.ds-login__resend > a { flex: 1 1 auto; min-width: 0; padding-block: var(--space-8); overflow-wrap: anywhere; }
/* The choices of a wide card: the landing's ways in, each one tap target across its tile (the
   action's `::after` stretches over it), and the staff role chooser's rows. */
.ds-login__tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-24); }
.ds-login__tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12);
  min-width: 0; padding: var(--space-20); border-radius: var(--radius-panel); background: var(--surface-page); }
.ds-login__tile:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface-page)); }
.ds-login__tile-action { display: inline-flex; align-items: center; justify-content: center; width: 100%;
  margin-top: auto; text-wrap: balance; }
.ds-login__tile-action::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* A transform would make the action the box its stretched `::after` fills, shrinking the
   tile's click area to the button while the pointer is on it. */
.ds-login .ds-login__tile-action:hover, .ds-login .ds-login__tile-action:active { transform: none; }
.ds-login__tile-who { margin: 0; font: 400 18px/28px var(--font-sans); color: var(--ink); }
.ds-login__tile-next { margin: 0; font: 400 16px/24px var(--font-sans); color: var(--ink-muted); }
.ds-login__tile-who a { position: relative; z-index: 1; color: var(--accent); font-weight: 600; text-decoration: underline;
  text-underline-offset: 4px; }
.ds-login__choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); margin: var(--space-24) 0 0;
  padding: 0; list-style: none; }
.ds-login__choices .ds-login__row { border-radius: var(--radius-panel); background: var(--surface-page); }
/* The registration forms (applicant and landlord): one calm column of fields in groups, 20px
   between the fields of a group and 32px between groups; a pair of short fields side by side
   wherever both fit; the two radio choices as tiles. No query here: each piece lays itself out
   from the room it has, so the card's widths alone decide it. */
.ds-login__form.ds-login__form--long { gap: var(--space-32); }
.ds-login__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-20); min-width: 0; }
.ds-login__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-20); min-width: 0; }
/* A tile is the whole label of its radio. Two sit side by side only while both labels fit one
   line - each grows from nothing but never below its words - and the chosen one is drawn from
   `:checked`, so it shows with scripting off; the radio stays visible inside it, so the choice is
   never told by colour alone. */
.ds-login__options { display: flex; flex-wrap: wrap; gap: var(--space-12); min-width: 0; }
.ds-login__option { display: flex; flex: 1 1 0; align-items: center; gap: var(--space-12);
  min-width: min(100%, max-content); min-height: 64px; padding: var(--space-16) var(--space-20);
  border: 1.5px solid transparent; border-radius: var(--radius-xl); background: var(--surface-page);
  font: 400 18px/26px var(--font-sans); color: var(--ink); cursor: pointer; }
.ds-login__option input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.ds-login__option .ds-icon { flex: none; width: 22px; height: 22px; color: var(--ink-subtle); }
.ds-login__option:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface-page)); }
.ds-login__option:has(:checked) { border-color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--tone-blue) 60%, var(--surface-card)); }
.ds-login__option:has([aria-invalid="true"]) { border-color: var(--danger); }
.ds-login__option:has(:focus-visible) { border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); }
/* A password's rules under its field, as quiet as the help list: a faint tick, muted words. */
.ds-login__rules { display: grid; gap: var(--space-4); margin: var(--space-8) 0 0; padding: 0; list-style: none;
  font: 400 16px/24px var(--font-sans); color: var(--ink-muted); }
.ds-login__rules > li { display: flex; align-items: flex-start; gap: var(--space-8); }
.ds-login__rules .ds-icon { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--ink-faint); }
/* A field's live error line is always in the page, so a screen reader hears it change; empty, it
   takes no room. */
.ds-login__field-error:empty { display: none; }
.ds-login .ds-input--error { border-color: var(--danger); }
/* An address a mailed link proved: posted with the form, but drawn like the identity row it is,
   with the edge every field has (3:1 on the card), and the refusal's edge when it is refused. */
.ds-login .ds-input[readonly] { border: 1.5px solid var(--control-ring); background: var(--surface-field); font-weight: 500; }
.ds-login .ds-input[readonly][aria-invalid="true"] { border-color: var(--danger); }
/* What an invitation is for, read before anything is asked: label over value, on the page tint,
   with the time it still holds under them. */
.ds-login__facts { margin-top: var(--space-20); padding: var(--space-16) var(--space-20); border-radius: var(--radius-panel);
  background: var(--surface-page); }
.ds-login__facts dl { margin: 0; }
.ds-login__facts dt { font: 400 16px/24px var(--font-sans); color: var(--ink-muted); }
.ds-login__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font: 600 18px/26px var(--font-sans); color: var(--ink); }
.ds-login__facts-note { display: flex; align-items: flex-start; gap: var(--space-8); margin: var(--space-12) 0 0;
  font: 600 16px/24px var(--font-sans); color: var(--ink); }
.ds-login__facts-note .ds-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ink-subtle); }

/* Motion: once, on arrival, and only by transform for what is on screen from the first paint;
   nothing still moves a second after load, and nothing moves under reduced motion. No text
   arrives from opacity 0: a page's largest text block may be any of them, and a fade holds back
   the moment it counts as painted. */
@keyframes ds-rise { from { transform: translateY(8px); } to { transform: none; } }
@keyframes ds-rise-short { from { transform: translateY(6px); } to { transform: none; } }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-lights-on { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .ds-rise { animation: ds-rise 360ms cubic-bezier(.16, 1, .3, 1) both; }
  .ds-login__card.ds-rise { animation-delay: 40ms; }
  /* The card's light comes on once it has landed, and is still by 1350ms. */
  .ds-login__card::before { animation: ds-lights-on 900ms ease-out 450ms both; }
  .ds-login__help, .ds-login__alt, .ds-login__back, .ds-login__aside {
    animation: ds-rise-short 300ms cubic-bezier(.16, 1, .3, 1) 140ms both; }
  .ds-login__spinner { animation: ds-spin 900ms linear infinite; }
  .ds-login__submit, .ds-login__secondary, .ds-login__row, .ds-login__tile { transition: transform 160ms ease-out,
    box-shadow 160ms ease-out, background-color 160ms ease-out; }
  .ds-login__submit:hover { transform: translateY(-1px); }
  .ds-login__submit:active { transform: scale(.99); }
  .ds-login__row-chevron { transition: transform 160ms ease-out; }
  .ds-login__row:hover .ds-login__row-chevron { transform: translateX(2px); }
}

/* A phone: the night field as a band across the top, and the card as a sheet drawn up over it
   on the white page, its top edge lit by the field's azure. The sheet runs edge to edge, which
   is the room the field's whole example needs on a 360px phone. */
@media (max-width: 640px) {
  /* No shared spaces on a phone: the band, the sheet and its lines from the top, the footer right
     after them, and whatever height is left under the footer. */
  .ds-login { --focus-ring: var(--accent); background: var(--surface-card); color: var(--ink);
    grid-template-rows: auto 0 auto auto 0 auto; align-content: start; }
  .ds-login__field, .ds-login::before { display: none; }
  /* The band runs from the bar to 56px under the name, where the sheet is drawn up over it: across
     the name's row where the shell's rows reach into main, and behind the bar alone where they
     cannot, with the name's own block night then. */
  .ds-login__sky { display: block; position: relative; grid-row: 1; grid-column: 1; z-index: -1; overflow: hidden;
    pointer-events: none;
    background:
      radial-gradient(ellipse 60% 55% at 50% 100%, color-mix(in srgb, var(--brand-glow) 50%, transparent), transparent 75%),
      radial-gradient(ellipse 95% 85% at 50% 100%, color-mix(in srgb, var(--accent) 75%, transparent), transparent 75%),
      linear-gradient(180deg, color-mix(in srgb, var(--brand) 35%, var(--brand-deep)), var(--brand-deep) 70%); }
  .ds-login__sky .ds-login__rings { top: calc(100% - 40px); width: 980px; height: 980px; margin: -490px 0 0 -490px; }
  .ds-login__hero { padding-top: var(--space-16); padding-bottom: 56px; background: var(--brand-deep); }
  @supports (grid-template-rows: subgrid) {
    .ds-login__sky { grid-row: 1 / 4; }
    .ds-login__hero { background: none; }
  }
  .ds-login__column { width: 100%; padding-inline: 0; }
  .ds-login__card { margin-top: -40px; padding-inline: var(--space-24); border-radius: 28px 28px 0 0;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--brand-glow) 35%, transparent),
      0 -18px 44px -14px color-mix(in srgb, var(--brand-glow) 70%, transparent); }
  .ds-login__card::before { display: none; }
  .ds-login__alt, .ds-login__back, .ds-login__aside { padding-inline: var(--space-16); }
  /* The bar's controls keep one row beside the plate, the Spanish sign-in link included. */
  .ds-login .ds-login__tools [role="group"] > a, .ds-login .ds-login__tools > form button[type="submit"],
  .ds-login .ds-login__toollink { padding-inline: var(--space-12); }
  /* The band's large name takes 16px more than a smaller one did; the card's own rhythm pays
     for it, so the step's button stays where it was. */
  .ds-login__notice { margin-top: var(--space-12); padding: var(--space-12); }
  .ds-login__form { gap: var(--space-12); }
  .ds-login__alt, .ds-login__aside { color: var(--ink); }
  .ds-login__alt a, .ds-login__back a { color: var(--accent); text-decoration-color: currentColor; }
  .ds-login .ds-login__footer p { color: var(--ink-subtle); }
  .ds-login .ds-login__footer .product-footer__release { display: block; }
  .ds-login .ds-login__footer .product-footer__sep { display: none; }
}
/* A narrow phone keeps the field's whole example in view - the room the leading glyph takes is
   the room "your@email.com or (123) 456-7890" needs at 360px - and the card's title on one line,
   which the head chip beside it would break in Spanish. */
@media (max-width: 380px) {
  .ds-login__hero { padding-top: var(--space-12); }
  .ds-login__pill { margin-bottom: var(--space-4); }
  .ds-login { --login-org: 300 28px/34px; }
  .ds-login__card { padding: var(--space-16) var(--space-20); }
  .ds-login__head .ds-login__chip { display: none; }
  .ds-login__lede, .ds-login__notice { font-size: 16px; line-height: 24px; }
  .ds-login .ds-input-wrap__icon { display: none; }
  .ds-login .ds-input-wrap .ds-input { padding-left: var(--space-16); }
  .ds-login__resend { padding-left: var(--space-12); }
  .ds-login__row { gap: var(--space-12); padding-inline: var(--space-12); }
  .ds-login__list > li + li::before { left: 44px; }
}
/* From 641px the stage: the name and the pill centred on the axis the light and the rings
   radiate from, the bar's plate and tools on the frame's edges. */
@media (min-width: 641px) {
  .ds-login { --login-frame: 880px; --login-card: 520px; --login-gutter: var(--space-24); --login-pad: 40px;
    --login-org: 300 40px/48px; --login-title: 32px; --login-title-lh: 40px; --login-plate: 48px;
    --login-name-max: min(1400px, 100% - 2 * var(--login-gutter));
    --login-title-font: "Inter Display", var(--font-sans); --stage-min: var(--space-24); }
  .ds-login--wide { --login-card: 880px; }
  .ds-login__bar { padding-top: var(--space-24); }
  .ds-login__hero { align-items: center; margin-top: 0; text-align: center; }
  .ds-login__kicker { font-size: 24px; line-height: 32px; }
  /* The 8AI cue the white eyebrow no longer carries in its colour: a short azure rule either side,
     as the brand's own strapline draws it. Decoration only - empty generated content. */
  .ds-login__pill { display: flex; align-items: center; justify-content: center; gap: var(--space-12);
    margin-bottom: 6px; }
  .ds-login__pill::before, .ds-login__pill::after { content: ""; flex: none; width: 24px; height: 1.5px;
    background: var(--brand-glow); }
  .ds-login__card { margin-top: var(--space-24); }
  .ds-login__chip { width: 52px; height: 52px; border-radius: 15px; }
  .ds-login__chip .ds-icon { width: 26px; height: 26px; }
  .ds-login__head { flex-direction: column; justify-content: center; gap: var(--space-16); text-align: center; }
  .ds-login__head--row { flex-direction: row; }
  .ds-login__lede { text-align: center; }
  .ds-login__notice { margin-top: var(--space-16); padding: var(--space-12) var(--space-16); }
  .ds-login__form { gap: 14px; margin-top: var(--space-24); }
  .ds-login__forgot { margin-top: -14px; }
  .ds-login .ds-input, .ds-login__submit, .ds-login__secondary--block, .ds-login__tile-action { min-height: 72px; }
  .ds-login .ds-input { font-size: 19px; }
  .ds-login .ds-input-wrap .ds-input { padding-left: 54px; padding-right: var(--space-16); }
  .ds-login .ds-input-wrap .ds-input--toggle { padding-right: 56px; }
  .ds-login .ds-input-wrap__icon { left: 18px; width: 22px; height: 22px; }
  .ds-login .ds-input-wrap__icon .ds-icon { width: 22px; height: 22px; }
  .ds-login__submit { font-size: 19px; }
}
@media (min-width: 1101px) {
  .ds-login { --login-frame: 1040px; --login-card: 560px; --login-pad: var(--space-48);
    --login-org: 300 48px/56px; --login-title: 40px; --login-title-lh: 48px; }
  .ds-login--wide { --login-card: 880px; }
  .ds-login__kicker { font-size: 28px; line-height: 36px; }
  .ds-login__chip { width: 56px; height: 56px; border-radius: 16px; }
  .ds-login__chip .ds-icon { width: 28px; height: 28px; }
  .ds-login__tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-login__tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-login--wide .ds-login__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A large monitor: the card and its type grow, and up to 2200px its rhythm tightens, so the first
   step and the line under it still end on a 1920 x 1080 screen. */
@media (min-width: 1601px) {
  .ds-login { --login-frame: 1120px; --login-card: 640px; --login-pad: 40px; --login-title: 44px; --login-title-lh: 52px;
    --login-org: 300 56px/60px; --stage-min: var(--space-12); }
  .ds-login__pill { margin-bottom: var(--space-4); }
  .ds-login__bar { padding-top: var(--space-20); }
  .ds-login__card { margin-top: 28px; }
  .ds-login--wide { --login-card: 960px; }
  .ds-login .ds-input, .ds-login__submit { font-size: 20px; }
  .ds-login__form, .ds-login__help, .ds-login__alt { margin-top: var(--space-20); }
  .ds-login__row { min-height: 56px; padding-block: 6px; }
}
@media (min-width: 2201px) {
  .ds-login { --login-frame: 1240px; --login-pad: 56px; --login-org: 300 72px/80px;
    --login-name-max: min(1800px, 100% - 96px); --stage-min: var(--space-24); }
  .ds-login__bar { padding-top: var(--space-24); }
  .ds-login--wide { --login-card: 1040px; }
  .ds-login__form { margin-top: var(--space-24); }
  .ds-login__help, .ds-login__alt { margin-top: 28px; }
  .ds-login__row { min-height: 60px; padding-block: var(--space-8); }
}