/*
 * MeinZuhause legacy shell for Hausverwaltung V2.
 *
 * The shell mirrors the original V2 mock-up while the existing React
 * application remains responsible for routing, authorization and API calls.
 */

/* ---------------------------------------------------------------------------
 * Brand typography.
 *
 * The brand is Plus Jakarta Sans for headings and Inter Tight for body, with
 * DM Mono reserved for uppercase taglines. The recovered SPA ships Bricolage
 * Grotesque and Hanken Grotesk and cannot be rebuilt, but it asks for its type
 * through `--font-display` / `--font-body`, and this stylesheet loads after it.
 * So the tokens below re-font every screen, including the frozen ones.
 *
 * The aliases exist because a few rules in the compiled bundle name the old
 * families literally rather than going through the tokens. Redeclaring those
 * names against the brand files means those rules land on brand type too. It
 * is deliberate: the name is now a role, not a typeface.
 * ------------------------------------------------------------------------- */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/plus-jakarta-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("/inter-tight-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("/dm-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Aliases: the compiled bundle's own family names now resolve to brand files. */
@font-face {
  font-family: "Bricolage Grotesque Variable";
  src: url("/plus-jakarta-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/plus-jakarta-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk Variable";
  src: url("/inter-tight-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/inter-tight-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-tagline: "DM Mono", ui-monospace, monospace;
}

:root {
  --legacy-blue: #1300ff;
  --legacy-blue-hover: #0f00cc;
  --legacy-blue-soft: #eceaff;
  --legacy-blue-light: #c9c2ff;
  --legacy-lime: #c6fa02; /* Neon Lime */
  --legacy-hotrod: #ff5c41; /* Hot-Rod, the sixth brand colour */
  --legacy-ink: #232323;
  --legacy-ink-soft: #6b6560;
  --legacy-ink-light: #6b6560;
  --legacy-line: #e7e4e0;
  --legacy-line-strong: #d8d4cf;
  --legacy-paper: #f6f4f1; /* Stone */
  --legacy-surface: #fcfcfd; /* brand White is deliberately off pure white */
  --legacy-success: #087a55;
  --legacy-warning: #855000;
  --legacy-radius-sm: 10px;
  --legacy-radius-md: 16px;
  --legacy-radius-lg: 22px;
  --legacy-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --legacy-shadow-sm:
    0 1px 2px rgb(35 35 35 / 6%), 0 1px 3px rgb(35 35 35 / 5%);
  --legacy-shadow-md:
    0 8px 24px -8px rgb(35 35 35 / 14%), 0 2px 6px rgb(35 35 35 / 5%);
  --legacy-shadow-lg:
    0 30px 60px -22px rgb(19 0 255 / 20%), 0 10px 24px -12px rgb(35 35 35 / 12%);

  --cobalt: var(--legacy-blue);
  --cobalt-strong: var(--legacy-blue-hover);
  --cobalt-soft: var(--legacy-blue-soft);
  --lime: var(--legacy-lime);
  --ink: var(--legacy-ink);
  --ink-muted: var(--legacy-ink-soft);
  --paper: var(--legacy-paper);
  --surface: var(--legacy-surface);
  --surface-raised: var(--legacy-surface);
  --surface-tint: #faf9f7;
  --line: var(--legacy-line);
  --line-strong: var(--legacy-line-strong);
  --radius-sm: var(--legacy-radius-sm);
  --radius-md: var(--legacy-radius-md);
  --radius-lg: var(--legacy-radius-lg);
  --shadow-sm: var(--legacy-shadow-sm);
  --shadow-lg: var(--legacy-shadow-lg);
  --content-max: 1152px;
  --topbar-height: 0px;
}

.legacy-root-page .text-success {
  color: var(--legacy-success) !important;
}

.legacy-root-page .text-warning {
  color: var(--legacy-warning) !important;
}

.legacy-root-page .text-ink-light {
  color: var(--legacy-ink-light) !important;
}

html[data-legacy-preview="true"] .legacy-route-notice {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warning, #a16207) 32%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--warning, #a16207) 8%, white);
  color: var(--ink-soft, #475569);
  font-size: 0.8125rem;
  line-height: 1.45;
}

html[data-legacy-preview="true"] .legacy-route-notice__title {
  color: var(--ink, #0f172a);
  white-space: nowrap;
}

html[data-legacy-preview="true"] .legacy-route-contract {
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line, #d9d9df);
  border-radius: 0.75rem;
  background: var(--surface, #fff);
}

html[data-legacy-preview="true"] .legacy-route-contract__heading {
  margin: 0;
}

html[data-legacy-preview="true"] .legacy-route-contract__job {
  margin: 0.35rem 0 0;
}

html[data-legacy-preview="true"] .legacy-route-contract--denied {
  border-color: #c52b2b;
}

/* The denial banner is prepended rather than replacing the container, because
   emptying a React-rendered container crashes the router.  Hide the screen
   underneath here instead: `display: none` also removes it from the
   accessibility tree, so a screen reader hears the refusal and nothing else. */
html[data-legacy-preview="true"]
  .main-content[data-legacy-route-denied="true"]
  > *:not([data-legacy-route-contract="forbidden"]) {
  display: none;
}

html[data-legacy-preview="true"] .legacy-route-contract__exit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.85rem;
  padding: 0 1.1rem;
  border: 1px solid var(--line, #d9d9df);
  border-radius: 0.6rem;
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  font-weight: 600;
  text-decoration: none;
}

html[data-legacy-preview="true"] .legacy-route-contract__exit:hover {
  border-color: var(--ink, #0f172a);
}

html[data-legacy-preview="true"] .legacy-route-contract__exit:focus-visible {
  outline: 2px solid var(--ink, #0f172a);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  html[data-legacy-preview="true"] .legacy-route-notice {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.125rem;
  }
}

html[data-theme="dark"] {
  --legacy-ink: #f4f2ec;
  --legacy-ink-soft: #b5b0a8;
  --legacy-ink-light: #8e8981;
  --legacy-line: #36343a;
  --legacy-line-strong: #514e56;
  --legacy-paper: #121217;
  --legacy-surface: #1b1a20;
  --legacy-blue-soft: #28235e;
  --legacy-shadow-sm: 0 1px 2px rgb(0 0 0 / 25%), 0 8px 24px rgb(0 0 0 / 18%);
  --legacy-shadow-md: 0 10px 28px -8px rgb(0 0 0 / 55%);
}

html[data-legacy-preview="true"] {
  scroll-behavior: auto;
}

/* The recovered SPA contains legacy legal/audit callouts. They are not part of
   the working interface; server-side guards and the dedicated legal pages stay
   intact. Hiding them here also prevents a flash before the enhancement layer
   removes them from the accessibility tree. */
html[data-legacy-preview="true"] .meeting-legal-note,
html[data-legacy-preview="true"] .meeting-truth-badge,
html[data-legacy-preview="true"] .communication-timeline__truth,
html[data-legacy-preview="true"] .inbound-review-guardrail,
html[data-legacy-preview="true"] .followup-provider-truth,
html[data-legacy-preview="true"] .followup-truth-badge,
html[data-legacy-preview="true"] #inbound-review-safety-note {
  display: none !important;
}

html[data-legacy-preview="true"],
html[data-legacy-preview="true"] body {
  overflow-x: hidden;
  max-width: 100%;
}

html[data-legacy-preview="true"] body {
  color: var(--legacy-ink);
  background: var(--legacy-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-legacy-preview="true"] h1,
html[data-legacy-preview="true"] h2,
html[data-legacy-preview="true"] h3,
html[data-legacy-preview="true"] h4 {
  letter-spacing: -0.025em;
}

html[data-legacy-preview="true"] ::selection {
  color: #384700;
  background: var(--legacy-lime);
}

html[data-legacy-preview="true"] :focus-visible {
  outline: 3px solid var(--legacy-blue);
  outline-offset: 2px;
}

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

.legacy-number {
  font-variant-numeric: tabular-nums;
}

.legacy-trustbar {
  position: relative;
  z-index: 70;
  color: #fff;
  background: #232323;
  font-size: 11px;
  font-weight: 600;
}

.legacy-trustbar__inner {
  display: flex;
  width: min(100% - 32px, 1152px);
  min-height: 31px;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.legacy-trustbar a {
  color: inherit;
  text-decoration: none;
}

.legacy-trustbar__phone,
.legacy-trustbar__links {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.legacy-trustbar__phone:hover,
.legacy-trustbar__links a:hover {
  color: var(--legacy-blue-light);
}

.legacy-trustbar__links {
  gap: 18px;
  color: #9a948b;
}

/* WCAG 2.2 SC 2.5.8 (Target Size Minimum, AA) — 24x24 CSS px.
   These are link *lists*, not links inside a sentence, so the inline exception
   does not apply. Measured at 375px they were 14-17px tall across 45 of the 47
   audited routes, which was the single most repeated accessibility defect in
   the product. Height only: the text size and the layout are unchanged. */
.legacy-trustbar__links a,
.legacy-trustbar__phone {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
}

/* Disclosure summaries inside the recovered screens carry no minimum of their
   own; give them one here rather than in the frozen bundle. */
html[data-legacy-preview="true"] .main-content summary {
  min-height: 24px;
}

.legacy-app-header {
  position: sticky;
  z-index: 60;
  inset-block-start: 0;
  min-height: 73px;
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  border-block-end: 1px solid var(--legacy-line);
}

.legacy-app-header__inner {
  display: flex;
  width: min(100% - 32px, 1152px);
  min-height: 73px;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.legacy-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  color: var(--legacy-ink);
  text-decoration: none;
}

.legacy-brand__mark,
.legacy-footer__mark {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Flat brand blue. The brand system is six flat colours with no gradients. */
  background: var(--legacy-blue);
  border-radius: 12px;
  box-shadow: 0 12px 26px -12px rgb(19 0 255 / 70%);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}

.legacy-brand__copy {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.legacy-brand__copy strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.legacy-brand__copy small {
  max-width: 255px;
  margin-block-start: 4px;
  overflow: hidden;
  color: var(--legacy-ink-soft);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-app-header__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.legacy-search {
  display: inline-flex;
  width: min(205px, 17vw);
  min-height: 40px;
  padding: 8px 9px 8px 12px;
  align-items: center;
  gap: 8px;
  color: var(--legacy-ink-soft);
  background: var(--legacy-paper);
  border: 1px solid var(--legacy-line);
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
}

.legacy-search span {
  flex: 1;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-search kbd {
  padding: 2px 5px;
  color: var(--legacy-ink-light);
  background: var(--legacy-surface);
  border: 1px solid var(--legacy-line);
  border-radius: 5px;
  font: inherit;
  font-size: 9px;
  white-space: nowrap;
}

.legacy-manager {
  display: inline-flex;
  padding-inline-end: 12px;
  align-items: center;
  gap: 8px;
  border-inline-end: 1px solid var(--legacy-line);
}

.legacy-manager[hidden] {
  display: none;
}

.legacy-manager__avatar {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--legacy-blue);
  background: var(--legacy-blue-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.legacy-manager > span:last-child {
  display: grid;
  font-size: 11px;
  line-height: 1.15;
}

.legacy-manager small {
  margin-block-start: 3px;
  color: var(--legacy-ink-soft);
}

.legacy-persona {
  display: flex;
  padding: 2px;
  align-items: center;
  color: var(--legacy-ink-soft);
  background: var(--legacy-paper);
  border: 1px solid var(--legacy-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.legacy-persona__button {
  min-height: 34px;
  padding: 5px 10px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: inherit;
}

.legacy-persona__button:hover {
  color: var(--legacy-blue);
}

.legacy-persona__button--active {
  color: #fff !important;
  background: var(--legacy-blue);
  box-shadow: 0 8px 16px -10px rgb(19 0 255 / 90%);
}

.legacy-language {
  min-width: 52px;
  min-height: 38px;
  padding: 0 20px 0 9px;
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  border: 1px solid var(--legacy-line);
  border-radius: 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.legacy-demo-reset {
  min-height: 38px;
  padding: 0 13px;
  color: var(--legacy-blue);
  background: var(--legacy-surface);
  border: 1px solid
    color-mix(in srgb, var(--legacy-blue) 24%, var(--legacy-line));
  border-radius: 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.legacy-demo-reset:hover {
  background: var(--legacy-blue-soft);
}

.legacy-user {
  position: relative;
}

.legacy-user__button {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--legacy-blue);
  background: var(--legacy-blue-soft);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.legacy-user__menu {
  position: absolute;
  z-index: 120;
  inset-block-start: calc(100% + 9px);
  inset-inline-end: 0;
  width: 190px;
  padding: 12px;
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  border: 1px solid var(--legacy-line);
  border-radius: 12px;
  box-shadow: var(--legacy-shadow-lg);
}

.legacy-user__menu[hidden] {
  display: none;
}

.legacy-user__name {
  display: block;
  padding: 3px 5px 10px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-user__reset,
.legacy-user__logout {
  width: 100%;
  min-height: 38px;
  color: var(--legacy-ink);
  background: var(--legacy-paper);
  border: 1px solid var(--legacy-line);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}

.legacy-user__reset {
  margin-block-end: 7px;
  color: var(--legacy-blue);
  background: var(--legacy-blue-soft);
}

html[data-legacy-preview="true"] .app-shell {
  position: relative;
  display: block;
  min-height: auto;
}

/* Native React paints its retired shell before this enhancement module has
   installed the Cockpit chrome. The bootstrap sets this narrowly-scoped guard
   before importing React; legacy-design.js removes it as soon as both the
   Cockpit shell and the actual route content are ready. */
html[data-mz-native-shell-pending="true"] #root {
  visibility: hidden;
}

html[data-legacy-preview="true"] .workspace {
  min-width: 0;
}

html[data-legacy-preview="true"] .sidebar,
html[data-legacy-preview="true"] .topbar {
  display: none !important;
}

html[data-legacy-preview="true"]
  .legacy-customer-mode
  [aria-hidden="true"][hidden] {
  display: none !important;
}

.legacy-category-nav {
  position: sticky;
  z-index: 55;
  inset-block-start: 73px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 100vw;
  height: 48px;
  padding-inline: max(16px, calc((100vw - 1152px) / 2));
  align-items: stretch;
  gap: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--legacy-surface);
  border-block-end: 1px solid var(--legacy-line);
  scrollbar-width: none;
}

.legacy-category-nav__items {
  display: flex;
  width: min(100%, 1152px);
  margin-inline: auto;
  align-items: stretch;
  gap: 1px;
}

.legacy-category-nav__mobile-select {
  display: none;
}

.legacy-category-nav::-webkit-scrollbar {
  display: none;
}

.legacy-category-nav__item {
  display: flex;
  flex: 0 0 auto;
}

.legacy-category-nav__button {
  position: relative;
  display: inline-flex;
  min-height: 47px;
  padding: 0 clamp(10px, 1.05vw, 14px);
  align-items: center;
  gap: 7px;
  color: var(--legacy-ink-soft);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.legacy-primary-nav__link {
  text-decoration: none;
}

.legacy-category-nav__button:hover,
.legacy-category-nav__button[aria-expanded="true"],
.legacy-category-nav__item--active .legacy-category-nav__button {
  color: var(--legacy-blue);
}

.legacy-category-nav__item--active .legacy-category-nav__button::after,
.legacy-category-nav__button[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  inset-block-end: -1px;
  height: 3px;
  background: var(--legacy-blue);
  border-radius: 3px 3px 0 0;
}

.legacy-root-nav__inner {
  display: flex;
  width: min(100%, 1152px);
  margin-inline: auto;
  align-items: stretch;
}

.legacy-root-nav .legacy-category-nav__items {
  width: 100%;
  margin-inline: 0;
}

.legacy-root-nav .legacy-category-nav__button[aria-current="page"] {
  color: var(--legacy-blue);
}

.legacy-root-nav .legacy-category-nav__button[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  inset-block-end: -1px;
  height: 3px;
  background: var(--legacy-blue);
  border-radius: 3px 3px 0 0;
}

.legacy-root-main {
  box-sizing: border-box;
  width: min(100%, 1200px);
  max-width: none;
  padding: 38px 24px 76px;
  margin-inline: auto;
}

.legacy-category-nav__chevron {
  font-size: 10px;
  transition: transform 0.16s var(--legacy-ease);
}

.legacy-category-nav__button[aria-expanded="true"]
  .legacy-category-nav__chevron {
  transform: rotate(180deg);
}

.legacy-nav-panels {
  position: sticky;
  z-index: 100;
  inset-block-start: 121px;
  height: 0;
}

.legacy-category-nav__panel {
  position: absolute;
  z-index: 100;
  inset-block-start: 0;
  inset-inline: 0;
  max-height: calc(100dvh - 152px);
  padding: 22px max(18px, calc((100vw - 1152px) / 2)) 26px;
  overflow-y: auto;
  background: var(--legacy-surface);
  border-block-end: 1px solid var(--legacy-line);
  box-shadow: var(--legacy-shadow-lg);
  contain: layout paint;
}

.legacy-category-nav__panel[hidden] {
  display: none;
}

.legacy-category-nav__panel-inner {
  display: grid;
  width: min(100%, 1152px);
  margin-inline: auto;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 30px;
}

.legacy-category-nav__heading {
  margin: 0;
  color: var(--legacy-ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 750;
}

.legacy-category-nav__hint {
  margin: 7px 0 0;
  color: var(--legacy-ink-soft);
  font-size: 13px;
}

.legacy-category-nav__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.legacy-category-nav__panel-inner--directory {
  grid-template-columns: 210px minmax(0, 1fr);
}

.legacy-tool-directory {
  display: grid;
  gap: 22px;
}

.legacy-tool-directory__group {
  min-width: 0;
}

.legacy-tool-directory__heading {
  margin: 0 0 8px;
  color: var(--legacy-ink-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legacy-category-nav__link {
  display: flex;
  min-height: 43px;
  padding: 9px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--legacy-ink);
  background: var(--legacy-paper);
  border: 1px solid transparent;
  border-radius: var(--legacy-radius-sm);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition:
    color 0.14s,
    border-color 0.14s;
}

.legacy-category-nav__link:hover,
.legacy-category-nav__link--active {
  color: var(--legacy-blue);
  border-color: color-mix(in srgb, var(--legacy-blue) 28%, var(--legacy-line));
}

.legacy-category-nav__provider {
  color: var(--legacy-blue);
  font-size: 10px;
}

.legacy-nav-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  background: rgb(35 35 35 / 28%);
  transition: opacity 0.12s;
}

html.legacy-nav-open .legacy-nav-backdrop {
  visibility: visible;
  opacity: 1;
}

.legacy-help {
  position: fixed;
  z-index: 50;
  inset-inline-end: 24px;
  inset-block-end: 24px;
  display: inline-flex;
  min-height: 44px;
  padding: 10px 15px;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: var(--legacy-blue);
  border-radius: 999px;
  box-shadow: 0 14px 30px -8px rgb(19 0 255 / 45%);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

html[data-legacy-preview="true"] .main-content {
  width: min(100%, 1200px);
  max-width: none;
  padding: 38px 24px 76px;
  margin-inline: auto;
}

html[data-legacy-preview="true"] .page-frame {
  animation: none !important;
}

html[data-legacy-preview="true"] .page-hero {
  margin-block-end: 32px;
}

html[data-legacy-preview="true"] .page-hero h1 {
  font-size: clamp(32px, 3vw, 36px);
  font-variation-settings:
    "wght" 720,
    "wdth" 96;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

html[data-legacy-preview="true"] .page-hero__description {
  max-width: 720px;
  color: var(--legacy-ink-soft);
  font-size: 16px;
}

html[data-legacy-preview="true"] .eyebrow {
  color: var(--legacy-blue);
  letter-spacing: 0.08em;
}

html[data-legacy-preview="true"] .workspace-view-switch {
  width: fit-content;
  padding: 3px;
  margin-block-end: 25px;
  background: var(--legacy-surface);
  border: 1px solid var(--legacy-line);
  border-radius: 999px;
  box-shadow: var(--legacy-shadow-sm);
}

html[data-legacy-preview="true"] .workspace-view-switch button {
  min-height: 38px;
  border-radius: 999px;
}

html[data-legacy-preview="true"] .workspace-mode,
html[data-legacy-preview="true"] .status-badge {
  border-radius: 999px;
}

html[data-legacy-preview="true"] .section-card,
html[data-legacy-preview="true"] .stat-card,
html[data-legacy-preview="true"] .operation-panel {
  background: var(--legacy-surface);
  border-color: var(--legacy-line);
  border-radius: var(--legacy-radius-md);
  box-shadow: var(--legacy-shadow-sm);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}

html[data-legacy-preview="true"] .section-card:hover,
html[data-legacy-preview="true"] .stat-card:hover {
  border-color: color-mix(in srgb, var(--legacy-blue) 25%, var(--legacy-line));
  box-shadow: var(--legacy-shadow-md);
}

html[data-legacy-preview="true"] .section-card__header {
  min-height: 72px;
  padding: 18px 20px 15px;
  border-color: var(--legacy-line);
}

html[data-legacy-preview="true"] .section-card__header h2 {
  font-size: 19px;
}

html[data-legacy-preview="true"] .stat-card {
  min-height: 132px;
  padding: 18px;
}

html[data-legacy-preview="true"] .button {
  min-height: 44px;
  padding: 9px 16px;
  border-radius: var(--legacy-radius-sm);
  transition:
    box-shadow 0.12s,
    background-color 0.12s;
}

html[data-legacy-preview="true"] .button--primary {
  box-shadow: 0 12px 24px -12px rgb(19 0 255 / 75%);
}

html[data-legacy-preview="true"] .button--secondary {
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  border-color: var(--legacy-line-strong);
}

html[data-legacy-preview="true"] input,
html[data-legacy-preview="true"] select,
html[data-legacy-preview="true"] textarea {
  border-radius: var(--legacy-radius-sm);
}

html[data-legacy-preview="true"] .data-table th {
  color: var(--legacy-ink-soft);
  background: #faf9f7;
  border-color: var(--legacy-line);
}

html[data-theme="dark"][data-legacy-preview="true"] .data-table th {
  background: #242329;
}

html[data-legacy-preview="true"] .data-table tbody tr:hover {
  background: color-mix(in srgb, var(--legacy-blue-soft) 48%, transparent);
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"] {
  --content-max: 1152px;
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .foundation-notice {
  /* Full border, not an edge stripe. */
  border: 1px solid var(--legacy-lime);
}

/* WCAG 2.1 SC 1.4.10 Reflow: no horizontal scrolling at a 320 CSS px viewport.
   Grid and flex items default to `min-width: auto`, so a card whose content has
   a wide min-content size refuses to shrink; on the tenant document tab that
   pushed the page to 341px against a 320px viewport. Let those items shrink and
   let dense button rows wrap. Scoped to narrow viewports so wider layouts keep
   the intrinsic sizing they were designed with.
   Two roots, because the portal shells differ: manager tool screens render into
   `.main-content` under `data-legacy-preview`, while the tenant and owner portal
   renders into `main.legacy-root-main` with no such attribute. */
@media (max-width: 420px) {
  .legacy-root-main .grid > *,
  .legacy-root-main .flex > *,
  html[data-legacy-preview="true"] .main-content .grid > *,
  html[data-legacy-preview="true"] .main-content .flex > * {
    min-width: 0;
  }

  .legacy-root-main .flex,
  html[data-legacy-preview="true"] .main-content .flex {
    flex-wrap: wrap;
  }
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .workbench-grid {
  gap: 22px;
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .compact-select,
html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .operation-panel__selector {
  min-width: min(100%, 320px);
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .compact-select
  select,
html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .operation-panel__selector
  select {
  min-height: 44px;
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  border: 1px solid var(--legacy-line-strong);
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .operation-panel {
  padding: 18px;
  background: var(--legacy-paper);
}

html[data-legacy-preview="true"] .legacy-technical-detail,
html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .raw-response {
  display: none !important;
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .endpoint-form__contract {
  padding-block-end: 14px;
  color: var(--legacy-blue);
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .endpoint-form__contract
  strong {
  font-family: var(--font-display);
  font-size: 18px;
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .endpoint-form__fields {
  gap: 14px;
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .endpoint-form__field
  label {
  color: var(--legacy-ink-soft);
  font-size: 12px;
  font-weight: 700;
}

html[data-legacy-preview="true"]
  .main-content[data-legacy-operation-page="true"]
  .endpoint-form__field
  :is(input, select, textarea) {
  min-height: 44px;
}

.legacy-footer {
  width: min(100% - 32px, 1152px);
  padding: 44px 0 32px;
  margin: 22px auto 0;
  color: var(--legacy-ink-soft);
  border-block-start: 1px solid var(--legacy-line);
  font-size: 12px;
}

.legacy-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(140px, 1fr));
  gap: 36px;
}

.legacy-footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--legacy-ink);
  font-family: var(--font-display);
  font-size: 19px;
}

.legacy-footer__mark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  font-size: 16px;
}

.legacy-footer__about p {
  max-width: 390px;
  margin: 13px 0 0;
  line-height: 1.55;
}

.legacy-footer__heading {
  display: block;
  margin-block-end: 11px;
  color: var(--legacy-ink-soft);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.legacy-footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.legacy-footer li + li {
  margin-block-start: 7px;
}

.legacy-footer a {
  display: inline-flex;
  align-items: center;
  /* SC 2.5.8 is 24x24, both axes. Short labels such as "AGB" measured 23px
     wide at 12px type, so the width needs the floor as much as the height. */
  min-height: 24px;
  min-width: 24px;
  color: var(--legacy-ink);
  text-decoration: none;
}

.legacy-footer a:hover {
  color: var(--legacy-blue);
}

.legacy-footer__bottom {
  display: flex;
  padding-block-start: 21px;
  margin-block-start: 32px;
  justify-content: space-between;
  gap: 20px;
  color: var(--legacy-ink-light);
  border-block-start: 1px solid var(--legacy-line);
}

@media (max-width: 1120px) {
  .legacy-search {
    width: 40px;
    padding: 0;
    justify-content: center;
    background: transparent;
    border-color: transparent;
  }

  .legacy-search span,
  .legacy-search kbd {
    display: none;
  }

  .legacy-brand__copy small {
    max-width: 180px;
  }

  .legacy-demo-reset {
    display: none;
  }
}

@media (max-width: 900px) {
  .legacy-manager,
  .legacy-language-wrap {
    display: none;
  }

  .legacy-category-nav__panel-inner {
    grid-template-columns: 165px minmax(0, 1fr);
    gap: 20px;
  }

  .legacy-category-nav__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-legacy-preview="true"] .main-content {
    padding: 30px 16px 64px;
  }
}

@media (max-width: 680px) {
  .legacy-trustbar__inner {
    width: min(100% - 24px, 640px);
  }

  .legacy-trustbar__hours,
  .legacy-trustbar__links a:last-child,
  .legacy-search {
    display: none;
  }

  .legacy-app-header {
    min-height: 62px;
  }

  .legacy-app-header__inner {
    width: min(100% - 24px, 640px);
    min-height: 62px;
    gap: 8px;
  }

  .legacy-brand {
    gap: 8px;
  }

  .legacy-brand__mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 16px;
  }

  .legacy-brand__copy strong {
    font-size: 16px;
  }

  .legacy-brand__copy small {
    display: none;
  }

  .legacy-app-header__actions {
    gap: 6px;
  }

  .legacy-persona__button {
    min-width: 44px;
    min-height: 44px;
    padding: 4px 7px;
    font-size: 10px;
  }

  .legacy-user__button {
    width: 44px;
    height: 44px;
    font-size: 10px;
  }

  .legacy-category-nav {
    inset-block-start: 62px;
    height: 61px;
    padding: 8px 12px;
    overflow: visible;
  }

  .legacy-category-nav__items {
    display: none;
  }

  .legacy-category-nav__mobile-select {
    display: block;
    width: min(100%, 640px);
    min-height: 44px;
    margin-inline: auto;
    padding: 0 38px 0 13px;
    color: var(--legacy-ink);
    background: var(--legacy-surface);
    border: 1px solid var(--legacy-line);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
  }

  .legacy-root-page .legacy-mobile-nav-select-wrap {
    display: block;
    width: 100%;
  }

  .legacy-root-page .legacy-category-nav__mobile-select {
    display: block;
  }

  .legacy-root-main {
    padding: 30px 16px 64px;
  }

  .legacy-nav-panels {
    inset-block-start: 123px;
  }

  .legacy-category-nav__panel {
    max-height: calc(100dvh - 154px);
    padding: 18px 14px 22px;
  }

  .legacy-category-nav__panel-inner {
    display: block;
  }

  .legacy-category-nav__intro {
    margin-block-end: 14px;
  }

  .legacy-category-nav__heading {
    font-size: 21px;
  }

  .legacy-category-nav__links {
    grid-template-columns: 1fr;
  }

  html[data-legacy-preview="true"] .page-hero h1 {
    font-size: 30px;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  html[data-legacy-preview="true"] .page-hero__description {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  html[data-legacy-preview="true"] .main-content,
  html[data-legacy-preview="true"] .page-frame,
  html[data-legacy-preview="true"] .page-hero,
  html[data-legacy-preview="true"] .page-hero > *,
  html[data-legacy-preview="true"] .workbench-grid,
  html[data-legacy-preview="true"] .foundation-notice,
  html[data-legacy-preview="true"] .section-card,
  html[data-legacy-preview="true"] .operation-panel {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  html[data-legacy-preview="true"] .page-hero {
    display: block;
  }

  html[data-legacy-preview="true"] .foundation-notice {
    width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .legacy-help {
    inset-inline-end: 14px;
    inset-block-end: 14px;
    padding-inline: 13px;
  }

  .legacy-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }

  .legacy-footer__about {
    grid-column: 1 / -1;
  }

  .legacy-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .legacy-trustbar__links {
    display: none;
  }

  .legacy-brand__copy {
    display: none;
  }

  .legacy-app-header__inner {
    width: calc(100% - 20px);
    gap: 6px;
  }

  .legacy-brand {
    flex: 0 0 40px;
  }

  .legacy-app-header__actions {
    flex: 1 1 auto;
    gap: 4px;
  }

  .legacy-persona {
    min-width: 0;
  }

  .legacy-persona__button {
    padding-inline: 5px;
    font-size: 9px;
  }

  .legacy-help span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-category-nav__chevron,
  .legacy-category-nav__link,
  .legacy-nav-backdrop,
  html[data-legacy-preview="true"] .button {
    transition: none;
  }
}

.legacy-completion {
  width: min(100%, 1152px);
  margin: 36px auto 0;
  padding: clamp(24px, 3vw, 38px);
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  border: 1px solid var(--legacy-line);
  border-radius: var(--legacy-radius-lg);
  box-shadow: var(--legacy-shadow-sm);
}

.legacy-completion__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-block-end: 28px;
}

.legacy-completion__heading h2 {
  margin: 5px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.08;
}

.legacy-completion__heading p {
  max-width: 720px;
  margin: 0;
  color: var(--legacy-ink-soft);
  line-height: 1.55;
}

.legacy-completion__eyebrow {
  color: var(--legacy-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legacy-completion__badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: var(--legacy-blue);
  background: var(--legacy-blue-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}

.legacy-completion__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.legacy-completion__form {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px;
  background: var(--legacy-paper);
  border: 1px solid var(--legacy-line);
  border-radius: var(--legacy-radius-md);
}

.legacy-completion__form--wide {
  grid-column: 1 / -1;
}

.legacy-completion__form h3 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 19px;
}

.legacy-completion__form label {
  display: grid;
  gap: 6px;
  color: var(--legacy-ink);
  font-size: 12px;
  font-weight: 750;
}

.legacy-completion__form label span {
  color: var(--legacy-ink-light);
  font-weight: 500;
}

.legacy-completion__form input,
.legacy-completion__form select,
.legacy-completion__form textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  border: 1px solid var(--legacy-line-strong);
  border-radius: var(--legacy-radius-sm);
  font: inherit;
  font-weight: 500;
}

.legacy-completion__form textarea {
  resize: vertical;
}

.legacy-completion__form input:focus,
.legacy-completion__form select:focus,
.legacy-completion__form textarea:focus {
  border-color: var(--legacy-blue);
  outline: 2px solid color-mix(in srgb, var(--legacy-blue) 18%, transparent);
}

.legacy-completion__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.legacy-completion__form .button {
  justify-self: start;
}

.legacy-completion__status {
  margin: 18px 0 0;
  padding: 12px 14px;
  color: var(--legacy-blue);
  background: var(--legacy-blue-soft);
  border-radius: var(--legacy-radius-sm);
  font-size: 13px;
  font-weight: 650;
}

.legacy-completion__status[data-tone="success"] {
  color: #067553;
  background: #d1fae5;
}

.legacy-completion__status[data-tone="error"] {
  color: #9a3412;
  background: #ffedd5;
}

.legacy-completion__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-block-start: 16px;
}

.legacy-completion__results:empty {
  display: none;
}

.legacy-completion__result-card {
  display: grid;
  gap: 5px;
  padding: 15px;
  background: var(--legacy-surface);
  border: 1px solid var(--legacy-line);
  border-radius: var(--legacy-radius-sm);
}

.legacy-completion__result-card span {
  color: var(--legacy-ink-soft);
  font-size: 12px;
}

.legacy-command-result {
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--legacy-line);
  border-radius: 12px;
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  text-align: left;
  cursor: pointer;
}

.legacy-command-result:hover,
.legacy-command-result:focus-visible {
  border-color: var(--legacy-primary);
  background: var(--legacy-primary-soft);
}

.legacy-command-result strong {
  font-size: 15px;
}

.legacy-command-result span {
  color: var(--legacy-ink-soft);
  font-size: 13px;
}

.legacy-command-result small {
  color: var(--legacy-primary);
  font-weight: 700;
}

.legacy-dialog-open {
  overflow: hidden;
}

.legacy-role-gate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(24 22 20 / 58%);
  backdrop-filter: blur(5px);
}

.legacy-role-gate__panel {
  width: min(100%, 430px);
  padding: 28px;
  border: 1px solid var(--legacy-line);
  border-radius: 20px;
  background: var(--legacy-surface);
  box-shadow: 0 24px 80px rgb(23 20 18 / 24%);
}

.legacy-role-gate__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 12px;
  color: #fff;
  background: var(--legacy-primary);
  font-size: 19px;
  font-weight: 800;
}

.legacy-role-gate__eyebrow {
  margin: 0 0 5px;
  color: var(--legacy-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legacy-role-gate h2 {
  margin: 0;
  color: var(--legacy-ink);
  font-size: clamp(24px, 4vw, 31px);
}

.legacy-role-gate__panel > p:not(.legacy-role-gate__eyebrow) {
  margin: 12px 0 20px;
  color: var(--legacy-ink-soft);
  line-height: 1.5;
}

.legacy-role-gate label,
.legacy-role-gate label span {
  display: block;
}

.legacy-role-gate label span {
  margin-bottom: 7px;
  color: var(--legacy-ink);
  font-size: 13px;
  font-weight: 750;
}

.legacy-role-gate input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--legacy-line);
  border-radius: 11px;
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  font: inherit;
}

.legacy-role-gate input:focus {
  border-color: var(--legacy-primary);
  outline: 3px solid var(--legacy-primary-soft);
}

.legacy-role-gate .legacy-role-gate__error {
  margin: 10px 0 0;
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
}

.legacy-role-gate__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.legacy-role-gate__actions button {
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--legacy-line);
  border-radius: 10px;
  color: var(--legacy-ink);
  background: var(--legacy-surface);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.legacy-role-gate__actions button[type="submit"] {
  border-color: var(--legacy-primary);
  color: #fff;
  background: var(--legacy-primary);
}

.legacy-role-gate__actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

@media (max-width: 760px) {
  .legacy-completion__heading {
    display: block;
  }

  .legacy-completion__badge {
    display: inline-block;
    margin-block-start: 14px;
  }

  .legacy-completion__grid,
  .legacy-completion__fields {
    grid-template-columns: 1fr;
  }
}

.legacy-workflow-highlight {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.legacy-workflow-highlight > div {
  min-width: 0;
}

.legacy-workflow-highlight__status {
  display: inline-flex;
  margin-block-end: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #423c37;
  background: #eeeae5;
  font-size: 12px;
  font-weight: 700;
}

.legacy-workflow-highlight__status--active {
  color: #2d237a;
  background: #eceaff;
}

.legacy-workflow-highlight__status--blocked {
  color: #7a4300;
  background: #fff0cf;
}

.legacy-workflow-highlight__status--completed {
  color: #185c3d;
  background: #dcf5e7;
}

.legacy-workflow-highlight__status--failed {
  color: #8a1c1c;
  background: #fbe4e4;
}

.legacy-workflow-highlight__status--cancelled {
  color: #545a68;
  background: #e6e7eb;
}

.legacy-workflow-highlight__action {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--accent, #1300ff);
  border-radius: 10px;
  color: var(--accent, #1300ff);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 520px) {
  .legacy-workflow-highlight {
    align-items: stretch;
    flex-direction: column;
  }

  .legacy-workflow-highlight__action {
    justify-content: center;
  }
}