/*
 * Site styles for domains.molnify.se. Every colour, type size and space is a token from tokens.css.
 */

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--mui-font-sans);
  font-size: var(--mui-text-base);
  line-height: var(--mui-line-base);
  color: var(--mui-color-text);
  background: var(--mui-color-bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  color: var(--mui-color-heading);
}

h1 {
  font-size: var(--mui-text-2xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: var(--mui-text-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--mui-text-base);
  font-weight: 600;
  line-height: var(--mui-line-base);
}

strong,
b {
  font-weight: 600;
}

button,
input {
  margin: 0;
  font: inherit;
}

/* Shared rules */

[hidden] {
  display: none !important;
}

.auth-pending main,
.auth-pending .session {
  visibility: hidden;
}

/* Without JavaScript auth-pending never clears, and the callout that says so is inside main. */
.auth-pending .login-main .mui-callout {
  visibility: visible;
}

/* The wordmark keeps the browser's own ring, as it does in the SPA header. */
:focus-visible:not(.mui-header__logo) {
  outline: 2px solid var(--mui-color-focus);
  outline-offset: 2px;
}

a:not([class]) {
  color: var(--mui-color-brand-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:not([class]):hover {
  text-decoration-thickness: 2px;
}

.skip {
  position: absolute;
  top: var(--mui-space-2);
  left: var(--mui-space-2);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--mui-space-4);
  background: var(--mui-color-surface);
  color: var(--mui-color-heading);
  border: 1px solid var(--mui-color-heading);
  border-radius: var(--mui-radius-sm);
  font-size: var(--mui-text-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--mui-space-2)));
}

.skip:focus {
  transform: none;
}

.lede {
  max-width: 40rem;
  font-size: var(--mui-text-md);
}

.rule {
  margin: 0;
  border: 0;
  border-top: 3px double var(--mui-color-heading);
}

.plate__label {
  font-size: var(--mui-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mui-color-text-muted);
}

.pending {
  display: flex;
  align-items: center;
  gap: var(--mui-space-3);
}

.btn[aria-busy="true"]::before,
.btn__label--pending::before,
.mauth-btn-federated[aria-busy="true"]::before,
.pending::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--mui-color-border);
  border-top-color: var(--mui-color-brand-strong);
  border-radius: 50%;
  animation: turn 800ms linear infinite;
}

.pending::before {
  width: 20px;
  height: 20px;
}

/* Top bar: Header.css and ThemeToggle.css from the SPAs, plus this site's links and session. */

.mui-header {
  background: var(--mui-color-header-bg);
  flex-shrink: 0;
}

.mui-header__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 var(--mui-space-5);
}

.mui-header__logo {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

.mui-header__logo img {
  display: block;
}

.mui-header__logo::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}

.mui-header__title {
  color: var(--mui-color-header-text);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.masthead-nav ul {
  display: flex;
}

.masthead-nav a {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 var(--mui-space-3);
  color: var(--mui-color-header-text);
  font-size: var(--mui-text-sm);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease-out;
}

.masthead-nav a:hover {
  color: var(--mui-color-text-inverse);
}

.masthead-nav a[aria-current="page"] {
  color: var(--mui-color-text-inverse);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--mui-color-brand);
}

.masthead-nav a:focus-visible {
  outline-offset: -2px;
}

.masthead-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin-left: auto;
  padding: 0 var(--mui-space-3);
  color: var(--mui-color-header-text);
  font-size: var(--mui-text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease-out;
}

.masthead-link:hover {
  color: var(--mui-color-text-inverse);
  text-decoration: underline;
}

/* A zero base keeps the block on row 1 when the bar wraps; the email then truncates inside it. */
.session {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 54px;
}

.session__email {
  flex: 0 1 auto;
  min-width: 4rem;
  max-width: 14rem;
  overflow: hidden;
  color: var(--mui-color-header-text);
  font-size: var(--mui-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session__signout {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 36px;
  padding: 0 var(--mui-space-3);
  color: var(--mui-color-header-text);
  background: transparent;
  border: 1px solid var(--mui-color-header-border);
  border-radius: 4px;
  font-size: var(--mui-text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

/* Insets are measured from the padding box, inside the 1px border. */
.session__signout::after {
  content: "";
  position: absolute;
  inset: -5px -1px;
}

.session__signout:hover {
  color: var(--mui-color-text-inverse);
  border-color: var(--mui-color-header-border-hover);
}

.session__signout[aria-disabled="true"] {
  color: var(--mui-color-header-text);
  border-color: var(--mui-color-header-border);
  cursor: not-allowed;
}

.mui-theme-toggle {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 30px;
  padding: 0;
  color: var(--mui-color-header-text);
  background: none;
  border: 1px solid var(--mui-color-header-border);
  border-radius: 4px;
  cursor: pointer;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

.masthead-link ~ .mui-theme-toggle,
.session ~ .mui-theme-toggle {
  margin-left: 0;
}

.mui-theme-toggle::after {
  content: "";
  position: absolute;
  inset: -8px -7px;
}

.mui-theme-toggle:hover {
  color: var(--mui-color-text-inverse);
  border-color: var(--mui-color-header-border-hover);
}

.mui-theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

.mui-theme-toggle .icon-sun,
:root[data-theme="dark"] .mui-theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .mui-theme-toggle .icon-sun {
  display: block;
}

/* Buttons and text actions */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mui-space-2) var(--mui-space-5);
}

.btn,
.textbtn,
.link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--mui-radius-sm);
  font-family: inherit;
  font-size: var(--mui-text-sm);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

.btn {
  padding: 0 var(--mui-space-5);
  color: var(--mui-color-text-inverse);
  background: var(--mui-color-brand);
  border: 1px solid var(--mui-color-brand);
  text-decoration: none;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}

.btn:hover,
.btn:active {
  background: var(--mui-color-brand-strong);
  border-color: var(--mui-color-brand-strong);
}

.btn--secondary,
.btn--secondary:hover,
.btn--secondary:active {
  color: var(--mui-color-brand-strong);
  background: var(--mui-color-surface);
}

.btn--secondary {
  border-color: var(--mui-color-brand);
}

.btn--neutral,
.btn--neutral:hover,
.btn--neutral:active {
  color: var(--mui-color-text);
  background: var(--mui-color-surface-selected);
}

.btn--neutral {
  border-color: var(--mui-color-surface-selected);
}

.btn--neutral:hover,
.btn--neutral:active {
  border-color: var(--mui-color-text-muted);
}

.btn--block {
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  color: var(--mui-color-text-subtle);
  background: var(--mui-color-surface-alt);
  border-color: var(--mui-color-border);
  cursor: not-allowed;
}

.btn[aria-busy="true"]::before {
  margin-right: var(--mui-space-2);
}

/* The negative margin puts the label, not the padded box, on the column's edge. */
.textbtn,
.link {
  margin-inline: calc(var(--mui-space-1) * -1);
  padding: 0 var(--mui-space-1);
  color: var(--mui-color-brand-strong);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.textbtn:hover,
.link:hover {
  text-decoration-thickness: 2px;
}

.textbtn:disabled,
.textbtn[aria-disabled="true"],
.link[aria-disabled="true"] {
  color: var(--mui-color-text-muted);
  text-decoration: none;
  cursor: not-allowed;
}

/* Every label the button can show sits in one cell, so the widest sets a width that never changes. */
.btn__labels,
.login-headline {
  display: grid;
}

.btn__labels > *,
.login-headline > * {
  grid-column: 1;
  grid-row: 1;
}

/* login-init.js stamps the mode on <html> before the first paint; with no script there is no
   stamp and the page is in create mode. Only "hidden" is ever set, so nothing here can show
   through main while it is hidden. */
:root[data-login-mode="signin"] [data-headline="create"],
:root:not([data-login-mode="signin"]) [data-headline="signin"],
:root[data-login-mode="signin"] [data-label^="create"],
:root:not([data-login-mode="signin"]) [data-label^="signin"],
[aria-busy="true"] > .btn__labels > :not(.btn__label--pending),
:not([aria-busy="true"]) > .btn__labels > .btn__label--pending {
  visibility: hidden;
}

.btn__labels > * {
  display: flex;
  align-items: center;
  gap: var(--mui-space-2);
}

/* The ring is part of the pending label, where its space is reserved. */
.btn--labels[aria-busy="true"]::before {
  content: none;
}

/* The federated button of Molnify's sign-in page: .mauth-btn and .mauth-btn-federated in
   web/src/main/webapp/assets/css/auth.css. Its height comes from the padding, so no min-height. */
.mauth-btn {
  display: flex;
  align-items: center;
  gap: var(--mui-space-3);
  width: 100%;
  padding: var(--mui-space-3) var(--mui-space-4);
  font-family: var(--mui-font-sans);
  font-size: var(--mui-text-sm);
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--mui-radius-sm);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}

.mauth-btn-federated {
  background: var(--mui-color-surface);
  color: var(--mui-color-text);
  border: 1px solid var(--mui-color-border-strong);
  text-align: left;
}

.mauth-btn-federated:hover,
.mauth-btn-federated:focus {
  background: var(--mui-color-surface-hover);
  border-color: var(--mui-color-brand);
  color: var(--mui-color-text);
}

.mauth-btn-federated:disabled,
.mauth-btn-federated[aria-disabled="true"] {
  color: var(--mui-color-text-subtle);
  background: var(--mui-color-surface-alt);
  border-color: var(--mui-color-border);
  cursor: not-allowed;
}

.mauth-btn .mauth-mark {
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
}

/* Google's own colours for its mark, the one place a colour is not a token. */
.glg-b {
  fill: #4285F4;
}

.glg-g {
  fill: #34A853;
}

.glg-y {
  fill: #FBBC04;
}

.glg-r {
  fill: #EA4335;
}

/* Form fields */

.form {
  display: grid;
  gap: var(--mui-space-4);
}

.field {
  display: grid;
  gap: var(--mui-space-1);
}

.field label {
  color: var(--mui-color-text);
  font-size: var(--mui-text-sm);
  font-weight: 600;
}

.field input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--mui-space-3);
  color: var(--mui-color-text);
  background: var(--mui-color-surface);
  border: 1px solid var(--mui-color-border-strong);
  border-radius: var(--mui-radius-sm);
  font-size: var(--mui-text-base);
  transition: border-color 200ms ease-out;
}

.field input:hover {
  border-color: var(--mui-color-text-muted);
}

.field input[aria-invalid="true"] {
  border-color: var(--mui-color-danger);
  box-shadow: inset 0 0 0 1px var(--mui-color-danger);
}

.field input:focus {
  outline: 2px solid var(--mui-color-focus);
  outline-offset: -1px;
  border-color: var(--mui-color-focus);
  box-shadow: none;
}

.field__message {
  display: flex;
  align-items: center;
  gap: var(--mui-space-2);
  color: var(--mui-color-danger);
  font-size: var(--mui-text-sm);
  line-height: 1.5;
}

.field__message::before,
.notice::before,
.app-state--error h2::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--mui-color-danger);
  -webkit-mask: url("/assets/img/icon-alert.svg") center / contain no-repeat;
  mask: url("/assets/img/icon-alert.svg") center / contain no-repeat;
}

.field__message::before {
  width: 16px;
  height: 16px;
}

.modes {
  display: inline-flex;
  justify-self: start;
  gap: var(--mui-space-2);
}

.modes button {
  min-height: 44px;
  padding: 0 var(--mui-space-4);
  color: var(--mui-color-text-secondary);
  background: var(--mui-color-surface);
  border: 1px solid var(--mui-color-border-strong);
  border-radius: var(--mui-radius-sm);
  font-size: var(--mui-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

.modes button:hover {
  color: var(--mui-color-text);
  border-color: var(--mui-color-text-muted);
}

.modes button[aria-pressed="true"] {
  color: var(--mui-color-text);
  background: var(--mui-color-brand-tint);
  border-color: var(--mui-color-brand-strong);
  box-shadow: inset 0 -2px 0 var(--mui-color-brand-strong);
}

.field input:disabled,
.modes button:disabled {
  color: var(--mui-color-text-subtle);
  background: var(--mui-color-surface-alt);
  border-color: var(--mui-color-border);
  box-shadow: none;
  cursor: not-allowed;
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--mui-space-3);
  color: var(--mui-color-text-muted);
  font-size: var(--mui-text-sm);
}

.divider::before,
.divider::after {
  content: "";
  border-top: 1px solid var(--mui-color-border);
}

.divider::before {
  flex: none;
  width: var(--mui-space-5);
}

.divider::after {
  flex: 1;
}

/* Notices and callouts */

.notice {
  display: flex;
  gap: var(--mui-space-3);
  padding: var(--mui-space-3) var(--mui-space-4);
  color: var(--mui-color-text);
  background: var(--mui-color-danger-bg);
  border: 1px solid var(--mui-color-danger);
  border-radius: var(--mui-radius);
  font-size: var(--mui-text-sm);
  animation: fade 200ms ease-out both;
}

.notice[data-kind="info"] {
  background: var(--mui-color-success-bg);
  border-color: var(--mui-color-success-strong);
}

.notice[data-kind="info"]::before {
  background: var(--mui-color-success-strong);
  -webkit-mask-image: url("/assets/img/icon-check.svg");
  mask-image: url("/assets/img/icon-check.svg");
}

/* Callout: the SPAs' rules from packages/ui/src/styles.css, unchanged. */
.mui-callout {
  --callout-accent: var(--mui-color-info);
  display: flex;
  gap: var(--mui-space-3);
  margin: var(--mui-space-5) 0;
  padding: var(--mui-space-4);
  background: color-mix(in srgb, var(--callout-accent) 6%, var(--mui-color-surface));
  border: 1px solid color-mix(in srgb, var(--callout-accent) 18%, var(--mui-color-surface));
  border-radius: var(--mui-radius);
}

.mui-callout--tip {
  --callout-accent: var(--mui-color-tip);
}

.mui-callout--warning {
  --callout-accent: var(--mui-color-warning);
}

.mui-callout__icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--callout-accent);
}

.mui-callout__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mui-callout__content {
  min-width: 0;
}

.mui-callout__title {
  margin: 0 0 var(--mui-space-1);
  font-weight: 600;
  color: var(--mui-color-heading);
}

.mui-callout__body > :last-child {
  margin-bottom: 0;
}

/* The callout's own margin is for running text; these blocks space their children themselves. */
.login-main .mui-callout,
.noscript .mui-callout,
.stage > .mui-callout {
  margin: 0;
}

/* A sequence inside a callout is an ordinary numbered list, not the step component. */
.mui-callout__body ol {
  padding-left: var(--mui-space-5);
  list-style: decimal;
}

.mui-callout__body li + li {
  margin-top: var(--mui-space-2);
}

.noscript {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--mui-space-5) var(--mui-space-5) 0;
}

.noscript .mui-callout {
  max-width: 40rem;
}

/* Step list */

.steps {
  counter-reset: step;
}

.steps > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: var(--mui-space-4);
  border-top: 1px solid var(--mui-color-border);
}

.steps > li:last-child {
  border-bottom: 1px solid var(--mui-color-border);
}

.steps > li::before {
  counter-increment: step;
  content: counter(step);
  content: counter(step) / "";
  color: var(--mui-color-heading);
  font-size: var(--mui-text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.steps > li > * {
  min-width: 0;
  max-width: 40rem;
}

.steps > li > div {
  display: grid;
  gap: var(--mui-space-3);
}

.steps h4 {
  margin: var(--mui-space-3) 0 0;
  color: var(--mui-color-heading);
  font-size: var(--mui-text-base);
  font-weight: 600;
  line-height: var(--mui-line-base);
}

.steps strong {
  color: var(--mui-color-heading);
}

.steps ul {
  display: grid;
  gap: var(--mui-space-1);
  padding-left: var(--mui-space-5);
  list-style: disc;
}

.settings {
  width: 100%;
  border-collapse: collapse;
  border-block: 1px solid var(--mui-color-border);
}

.settings th,
.settings td {
  padding: var(--mui-space-2) var(--mui-space-3) var(--mui-space-2) 0;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.settings tr + tr > * {
  border-top: 1px solid var(--mui-color-border);
}

/* Code: the SPAs' inline code and fenced block (packages/ui/src/styles.css), without the copy
   button. */

.mui-code {
  padding: 0.12em 0.4em;
  color: var(--mui-color-code-text);
  background: var(--mui-color-code-bg);
  border-radius: var(--mui-radius-sm);
  font-family: var(--mui-font-mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.mui-codeblock__pre {
  margin: 0;
  padding: var(--mui-space-4);
  overflow-x: auto;
  color: var(--mui-color-codeblock-text);
  background: var(--mui-color-codeblock-bg);
  border-radius: var(--mui-radius);
  font-family: var(--mui-font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* The container around the app */

/* content-box: the space reserved for the consent prompt is added below the page, not taken
   out of the height the frame fills. */
.app-page {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-page .noscript {
  max-width: 1440px;
}

.app-page main {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.app-bar {
  display: flex;
  align-items: center;
  gap: var(--mui-space-3) var(--mui-space-5);
  padding: var(--mui-space-5) var(--mui-space-5) var(--mui-space-4);
}

.app-bar .btn {
  margin-left: auto;
}

.app-bar__served {
  color: var(--mui-color-text-secondary);
}

.app-bar__served strong {
  color: var(--mui-color-heading);
}

.app-region {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 32rem;
  margin: 0 var(--mui-space-5) var(--mui-space-5);
  background: var(--mui-color-surface);
  border: 1px solid var(--mui-color-border-strong);
  border-radius: var(--mui-radius);
  overflow: hidden;
}

.app-frame {
  display: block;
  flex: 1;
  width: 100%;
  border: 0;
}

.app-state {
  padding: var(--mui-space-6);
}

.app-state > * {
  max-width: 40rem;
}

.app-state--error h2 {
  display: flex;
  align-items: flex-start;
  gap: var(--mui-space-3);
}

.app-state--error h2::before {
  margin-top: var(--mui-space-1);
}

/* Account facts */

/* The page's double rule is the list's own top edge, so no hairline sits under it. */
.facts {
  border-top: 3px double var(--mui-color-heading);
  border-bottom: 1px solid var(--mui-color-border);
}

.facts > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--mui-space-5);
  padding-block: var(--mui-space-3);
}

.facts > div + div {
  border-top: 1px solid var(--mui-color-border);
}

.facts dt {
  color: var(--mui-color-text-muted);
  font-size: var(--mui-text-sm);
  font-weight: 600;
}

.facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--mui-space-2);
  color: var(--mui-color-text);
  overflow-wrap: anywhere;
}

.facts__line {
  flex: 0 0 100%;
}

/* One line high here, so a row with an action is as tall as the others. The 44px target is the
   ::after, as for the top bar's controls. */
.facts .textbtn,
.facts .link {
  position: relative;
  min-height: 0;
}

.facts .textbtn::after,
.facts .link::after {
  content: "";
  position: absolute;
  inset: -11.5px 0;
}

/* Consent prompt */

.consent {
  position: fixed;
  z-index: 20;
  left: var(--mui-space-5);
  bottom: var(--mui-space-5);
  width: min(26rem, 100% - 2 * var(--mui-space-5));
  max-height: calc(100dvh - 2 * var(--mui-space-5));
  padding: var(--mui-space-5);
  overflow-y: auto;
  background: var(--mui-color-surface);
  border: 1px solid var(--mui-color-border-strong);
  border-radius: var(--mui-radius);
  box-shadow: var(--mui-shadow-lg);
  animation: fade 250ms ease-out both;
}

.consent:focus {
  outline: 2px solid var(--mui-color-focus);
  outline-offset: 2px;
}

.consent__title {
  margin-bottom: var(--mui-space-2);
  font-size: var(--mui-text-md);
}

.consent__text {
  color: var(--mui-color-text-secondary);
  font-size: var(--mui-text-sm);
  line-height: 1.5;
}

.consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mui-space-3);
  margin-top: var(--mui-space-4);
}

html:has(.consent:not([hidden])) {
  scroll-padding-bottom: 15rem;
}

body:has(.consent:not([hidden])) {
  padding-bottom: 15rem;
}

/* Footer */

.colophon {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--mui-space-5);
}

/* content-box so the 44px is the row of text and controls, not the row plus its padding. */
.colophon__row {
  box-sizing: content-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mui-space-2) var(--mui-space-5);
  min-height: 44px;
  padding-block: var(--mui-space-5) var(--mui-space-7);
  color: var(--mui-color-text-muted);
  border-top: 1px solid var(--mui-color-border);
  font-size: var(--mui-text-sm);
}

/* Stage and page layouts */

.stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--mui-space-5);
  row-gap: var(--mui-space-7);
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--mui-space-7) var(--mui-space-5);
}

.stage > * {
  grid-column: 1 / -1;
}

.intro,
.login-aside,
.login-main,
.panel,
.overview-intro,
.overview-setup,
.account,
.app-state {
  display: grid;
  gap: var(--mui-space-5);
  align-content: start;
}

.panel,
.app-state {
  gap: var(--mui-space-4);
}

.intro,
.login-aside {
  grid-column: 1 / 6;
}

.login-main {
  grid-column: 7 / 13;
}

.login-main > * {
  max-width: 26rem;
}

.overview-setup,
.overview-trail {
  max-width: 44rem;
}

.overview-setup {
  grid-column: 1 / 8;
}

/* One grid column is left empty between the steps and the box. start: the box is as tall as its
   content, not as tall as the steps beside it. */
.overview-trail {
  grid-column: 9 / 13;
  align-self: start;
}

/* The title is a heading here; the callout's own title style assumes body-sized text. */
.overview-trail .mui-callout__title {
  font-size: var(--mui-text-base);
  line-height: var(--mui-line-base);
  letter-spacing: 0;
}

.account {
  max-width: 44rem;
}

.panel strong {
  overflow-wrap: anywhere;
}

/* Landing */

.act {
  display: grid;
  gap: var(--mui-space-3);
}

.example {
  color: var(--mui-color-text-muted);
  font-size: var(--mui-text-sm);
  line-height: 1.5;
}

.collision {
  grid-column: 6 / 13;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-content: start;
  margin-top: var(--mui-space-5);
  padding-top: clamp(4.5rem, 11vw, 9rem);
}

.glyph {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--mui-color-brand);
  font-size: clamp(9rem, 24vw, 19rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.plate {
  position: relative;
  display: grid;
  gap: var(--mui-space-1);
  min-width: 0;
  padding: var(--mui-space-4) var(--mui-space-5);
  border-radius: var(--mui-radius);
}

.plate__address {
  font-family: var(--mui-font-mono);
  overflow-wrap: anywhere;
}

.plate--before {
  grid-column: 2 / 7;
  color: var(--mui-color-text-secondary);
  background: var(--mui-color-surface-alt);
  border: 1px solid var(--mui-color-border-strong);
  box-shadow: var(--mui-shadow-sm);
  font-size: var(--mui-text-sm);
  animation: settle 450ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

/* Pull-up plus the After label's frame plus clear space under the address. Two classes, so the
   narrower plate padding below does not undo it. */
.collision .plate--before {
  padding-bottom: calc(var(--mui-space-4) + var(--mui-space-3));
}

.plate--after {
  grid-column: 3 / 8;
  z-index: 1;
  margin-top: calc(var(--mui-space-4) * -1);
  background: var(--mui-color-surface);
  border: 1px solid var(--mui-color-heading);
  box-shadow: 0 0 0 3px var(--mui-color-surface), 0 0 0 4px var(--mui-color-heading), var(--mui-shadow-md);
  animation: settle 500ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

.plate--after .plate__address {
  color: var(--mui-color-heading);
  font-size: var(--mui-text-md);
  font-weight: 600;
  transform-origin: center top;
  animation: hinge 500ms cubic-bezier(0.16, 1, 0.3, 1) 750ms both;
}

.changes {
  display: grid;
  gap: var(--mui-space-5);
  padding-top: var(--mui-space-5);
  border-top: 3px double var(--mui-color-heading);
}

.changes ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mui-space-5);
}

.changes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--mui-space-3);
  row-gap: var(--mui-space-1);
  align-content: start;
}

.changes li::before {
  content: "/";
  content: "/" / "";
  grid-row: 1 / 3;
  color: var(--mui-color-brand);
  font-size: var(--mui-text-2xl);
  font-weight: 700;
  line-height: 1;
}

.changes strong,
.changes li span {
  grid-column: 2;
}

.changes strong {
  color: var(--mui-color-heading);
}

.changes li span {
  color: var(--mui-color-text-secondary);
}

/* Motion */

@keyframes settle {
  from {
    opacity: 0;
    transform: translate(calc(var(--mui-space-5) * -1), calc(var(--mui-space-4) * -1));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hinge {
  from {
    opacity: 0;
    transform: perspective(40rem) rotateX(-90deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes turn {
  to {
    transform: rotate(1turn);
  }
}

/* Breakpoints */

@media (max-width: 1100px) {
  .collision {
    padding-top: max(7.5rem, 20vw);
  }

  .plate--before {
    grid-column: 1 / 7;
  }

  .plate--after {
    grid-column: 2 / 8;
  }

  .overview-setup,
  .overview-trail {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1000px) {
  .mui-header--nav .mui-header__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .masthead-nav {
    order: 3;
    flex: 0 0 calc(100% + 2 * var(--mui-space-5));
    margin-inline: calc(var(--mui-space-5) * -1);
    padding-inline: var(--mui-space-3);
    border-top: 1px solid var(--mui-color-header-border);
  }

  .masthead-nav a {
    height: 44px;
  }
}

@media (max-width: 900px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--mui-space-6);
    padding-block: var(--mui-space-6);
  }

  .stage > * {
    grid-column: 1 / -1;
  }

  .collision {
    margin-top: 0;
  }

  .plate {
    padding: var(--mui-space-3) var(--mui-space-4);
  }

  .plate--after .plate__address {
    font-size: var(--mui-text-sm);
  }
}

@media (max-width: 720px) {
  .changes ul {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mui-space-4);
  }

  .facts > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-bar .btn {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .mui-header__inner,
  .session {
    gap: var(--mui-space-2);
  }

  .mui-header__inner {
    padding: 0 var(--mui-space-4);
  }

  .masthead-nav {
    flex-basis: calc(100% + 2 * var(--mui-space-4));
    margin-inline: calc(var(--mui-space-4) * -1);
    padding-inline: var(--mui-space-1);
  }

  .stage,
  .colophon,
  .noscript {
    padding-inline: var(--mui-space-4);
  }

  .actions--fill .btn {
    width: 100%;
  }

  .app-bar {
    padding-inline: var(--mui-space-4);
  }

  .app-region {
    margin: 0;
    border-inline: 0;
    border-radius: 0;
  }

  .app-state {
    padding: var(--mui-space-5);
  }

  .consent {
    left: var(--mui-space-4);
    right: var(--mui-space-4);
    bottom: var(--mui-space-4);
    width: auto;
    max-height: calc(100dvh - 2 * var(--mui-space-4));
    padding: var(--mui-space-4);
  }

  .consent__actions {
    margin-top: var(--mui-space-3);
  }
}

@media (max-width: 560px) {
  .mui-header__title {
    display: none;
  }
}

@media (max-width: 380px) {
  .session__email {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}