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

  html {
    min-width: 20rem;
    background: var(--canvas);
    font-family: var(--font-sans);
    font-size: 100%;
  }

  body {
    min-width: 20rem;
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
  }

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

  button,
  a,
  input,
  select,
  textarea {
    &:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--brand-700) 28%, transparent);
      outline-offset: 2px;
    }
  }
}

@layer components {
  .btn {
    display: inline-flex;
    min-height: var(--touch-target);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: var(--space-3) var(--space-4);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast);

    &:disabled {
      cursor: not-allowed;
      opacity: 0.52;
    }
  }

  .btn--primary {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: var(--surface-raised);

    &:hover:not(:disabled) {
      border-color: var(--brand-700);
      background: var(--brand-700);
    }

    &:active:not(:disabled) {
      background: color-mix(in srgb, var(--brand-700) 90%, var(--text));
    }
  }

  .btn--secondary {
    border-color: var(--border);
    background: var(--surface);
    color: var(--brand-700);

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--brand-700) 42%, var(--border));
      background: var(--brand-50);
    }
  }

  .btn--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);

    &:hover:not(:disabled) {
      background: var(--surface-muted);
      color: var(--text);
    }
  }

  .btn--icon {
    width: var(--touch-target);
    flex: 0 0 var(--touch-target);
    padding: 0;
  }

  .field {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
  }

  .field__label {
    color: var(--text);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
  }

  .field__control {
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-muted);
    color: var(--text);
    font-size: 1rem;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);

    &::placeholder {
      color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    }

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--brand-700) 40%, var(--border-strong));
    }

    &:focus {
      border-color: var(--brand-700);
      background: var(--surface);
      outline: 3px solid color-mix(in srgb, var(--brand-700) 18%, transparent);
      outline-offset: 1px;
    }
  }

  .surface {
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    background: var(--surface);
    box-shadow: var(--shadow-subtle);
  }

  .badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
  }

  .notice {
    width: min(var(--content-max), calc(100% - (var(--space-4) * 2)));
    margin: var(--space-3) auto 0;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-secondary-size);
    font-weight: var(--weight-medium);
  }

  #ui-message:empty {
    display: none;
  }

  .notice-success,
  .notice-session {
    border-color: color-mix(in srgb, var(--success) 20%, var(--border));
    background: var(--success-soft);
    color: var(--success);
  }

  .notice-error {
    border-color: color-mix(in srgb, var(--danger) 26%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
  }

  .notice-info {
    border-color: color-mix(in srgb, var(--brand-600) 22%, var(--border));
    background: var(--brand-50);
    color: var(--brand-700);
  }

  .brand-symbol,
  .icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }

  .phosphor-icon,
  .module-phosphor-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    fill: currentColor;
  }

  .brand-mark,
  .login-mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    background: var(--brand-600);
    color: var(--surface-raised);
    box-shadow: none;
  }

  .brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-control);
  }

  .login-mark {
    width: 3.75rem;
    height: 3.75rem;
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-surface);

    & .brand-symbol {
      width: 2rem;
      height: 2rem;
    }
  }

  .app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    min-height: 0;
    padding: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: none;
    backdrop-filter: blur(10px);
  }

  .app-header__inner {
    display: flex;
    width: min(100%, var(--content-max));
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-inline: auto;
    padding: var(--space-2) var(--space-4);
  }

  .brand-lockup {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
  }

  .brand-block {
    min-width: 0;

    & h1,
    & p {
      overflow: hidden;
      margin: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & h1 {
      color: var(--text);
      font-size: 1rem;
      font-weight: var(--weight-semibold);
      letter-spacing: -0.015em;
      line-height: 1.2;
    }
  }

  .brand-installation {
    color: var(--text);
    font-family: var(--font-product);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
    line-height: 1.2;
    text-transform: none;
  }

  .brand-context {
    color: var(--text-secondary);
    font-family: var(--font-product);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    letter-spacing: normal;
    line-height: 1.35;
  }

  .header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-1);

    & .btn {
      width: auto;
    }
  }

  .shell-icon-button {
    width: var(--touch-target);
    min-width: var(--touch-target);
    flex: 0 0 var(--touch-target);
    border-color: transparent;
    border-radius: var(--radius-pill);
    padding: 0;
    background: var(--brand-50);
    color: var(--brand-700);

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--brand-600) 18%, var(--border));
      background: var(--brand-100);
      color: var(--brand-700);
    }

    &:active:not(:disabled) {
      background: color-mix(in srgb, var(--brand-600) 16%, var(--surface));
    }
  }

  .global-logout {
    width: var(--touch-target);
    min-width: var(--touch-target);
    flex: 0 0 var(--touch-target);
    border-color: transparent;
    border-radius: var(--radius-pill);
    padding: 0;
    background: var(--surface-soft);
    color: var(--text-secondary);

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--text-secondary) 20%, var(--border));
      background: var(--surface-muted);
      color: var(--text);
    }

    &:active:not(:disabled) {
      background: color-mix(in srgb, var(--text-secondary) 12%, var(--surface));
    }
  }

  .login-panel {
    width: min(100%, var(--login-max));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-surface);
    padding: var(--space-6) var(--space-5);
    background: var(--surface);
    box-shadow: var(--shadow-subtle);
    font-family: var(--font-login);
  }

  .login-heading {
    margin-bottom: var(--space-5);
    text-align: center;

    & h2 {
      margin: 0;
      color: var(--text);
      font-size: var(--text-page-title);
      font-weight: var(--weight-semibold);
      letter-spacing: -0.025em;
      line-height: 1.15;
    }

    & > p:last-child {
      margin: var(--space-2) 0 0;
      color: var(--text-secondary);
      font-size: var(--text-secondary-size);
      line-height: 1.45;
    }
  }

  .login-brand {
    margin: 0 0 var(--space-1);
    color: var(--brand-700);
    font-size: var(--text-secondary-size);
    font-weight: var(--weight-medium);
    letter-spacing: 0;
  }

  .login-panel .login-mark { margin-inline: auto; }

  .login-field__input-wrap {
    display: block;
    position: relative;
    min-width: 0;

    & .field__control { padding-inline: calc(var(--space-4) + 1.5rem + var(--space-2)); }
    & .field__control:focus ~ .login-field__icon { color: var(--brand-600); }

    &:has(.login-password-toggle) .field__control {
      padding-right: calc(var(--space-2) + var(--touch-target));
    }
  }

  .login-field__icon {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color var(--transition-fast);
  }

  .login-password-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-1);
    display: inline-grid;
    width: var(--touch-target);
    height: var(--touch-target);
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--transition-fast), color var(--transition-fast);

    &:hover { background: var(--brand-50); color: var(--brand-700); }
    & .icon { width: 1.25rem; height: 1.25rem; }
    & .icon--hidden { display: none; }
    &[aria-pressed="true"] { & .icon--visible { display: none; } & .icon--hidden { display: block; } }
  }

  #login-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);

    & .field__control {
      color: var(--text);
      font-style: normal;
      font-weight: 400;
    }

    & .btn {
      width: 100%;
      min-height: var(--control-height);
      margin-top: var(--space-1);
    }

    & .login-submit {
      position: relative;
      & .login-submit__pending { display: none; align-items: center; gap: var(--space-2); }
      &.is-submitting { & .login-submit__label { display: none; } & .login-submit__pending { display: inline-flex; } }
    }
  }

  .login-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--surface-raised) 42%, transparent);
    border-top-color: var(--surface-raised);
    border-radius: var(--radius-pill);
    animation: login-spin 720ms linear infinite;
  }

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

  .login-panel > .btn--secondary {
    width: 100%;
    margin-top: var(--space-3);
  }

  .gate-device-onboarding {
    display: none;
    width: min(100%, var(--login-max));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-surface);
    padding: var(--space-6) var(--space-5);
    background: var(--surface);
    box-shadow: var(--shadow-subtle);
    font-family: var(--font-login);
  }

  .gate-device-heading {
    margin-bottom: var(--space-5);
    text-align: center;

    & .login-mark { margin-inline: auto; }
    & h2 { margin: 0; color: var(--text); font-size: var(--text-page-title); font-weight: var(--weight-semibold); letter-spacing: -0.025em; line-height: 1.15; }
    & > p:last-child { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-secondary-size); line-height: 1.45; }
  }

  .gate-device-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
    margin-bottom: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
    border-radius: var(--radius-control);
    padding: var(--space-3);
    background: var(--warning-soft);
    color: var(--warning);

    & .icon { width: 1.25rem; height: 1.25rem; }
    & p { margin: 0; color: var(--text); font-size: var(--text-secondary-size); line-height: 1.45; }
  }

  .gate-device-form {
    display: grid;
    gap: var(--space-4);

    & .field__control { text-align: center; }
    & .btn { width: 100%; min-height: var(--control-height); }
    & .gate-authorize-submit__pending { display: none; align-items: center; gap: var(--space-2); }
    & .gate-authorize-submit.is-submitting { & .gate-authorize-submit__label { display: none; } & .gate-authorize-submit__pending { display: inline-flex; } }
  }

  .gate-device-status {
    min-height: 1.5rem;
    margin: var(--space-3) 0 0;
    color: var(--danger);
    font-size: var(--text-secondary-size);
    text-align: left;
  }

  .gate-back-to-login { width: 100%; margin-top: var(--space-1); }

  #module-catalog {
    inset: auto 0 0;
    width: 100%;
    height: fit-content;
    max-width: none;
    max-height: 85vh;
    max-height: 85dvh;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    background: transparent;
    color: var(--text);

    &::backdrop {
      background: color-mix(in srgb, var(--text) 32%, transparent);
      backdrop-filter: none;
      opacity: 0;
      transition: opacity var(--transition-surface);
    }

    &[open]::backdrop {
      opacity: 1;
    }
  }

  .catalog-surface {
    display: flex;
    min-height: 0;
    max-height: inherit;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    padding: 0;
    background: var(--surface);
    box-shadow: var(--shadow-dialog);
    transform: translateY(100%);
    transition: transform var(--transition-surface);
  }

  #module-catalog[open] .catalog-surface {
    transform: translateY(0);
  }

  .catalog-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border);

    & h2 {
      margin: 0;
      color: var(--text);
      font-size: 1.125rem;
      font-weight: var(--weight-semibold);
      letter-spacing: normal;
    }
  }

  .catalog-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
  }

  .catalog-heading__icon {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    place-items: center;
    color: var(--brand-600);

    & svg { width: 1.25rem; height: 1.25rem; }
  }

  .catalog-header .btn--icon {
    border-color: transparent;
    background: var(--surface-muted);
    color: var(--text-secondary);
    box-shadow: none;

    &:hover:not(:disabled) {
      background: var(--brand-50);
      color: var(--brand-700);
    }
  }

  .eyebrow {
    margin: 0 0 var(--space-1);
    color: var(--brand-700);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .module-grid {
    --launcher-tile-min: 6.5rem;
    display: grid;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: repeat(auto-fit, minmax(max(var(--launcher-tile-min), calc((100% - (var(--space-3) * 2)) / 3)), 1fr));
    gap: var(--space-3);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: var(--space-5) var(--space-5) max(var(--space-8), env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .module-card {
    --module-accent: var(--brand-600);
    position: relative;
    display: grid;
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 7.5rem;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    padding: var(--space-4) var(--space-3);
    background: var(--surface);
    color: var(--text);
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);
    transform: none;

    &.active {
      border-color: color-mix(in srgb, var(--module-accent) 50%, var(--border));
      background: color-mix(in srgb, var(--surface) 96%, var(--module-accent));
      box-shadow: var(--shadow-subtle);
    }

    &.active {
      border-color: var(--module-accent);
    }

    &:disabled {
      border-style: dashed;
      background: var(--surface-muted);
      color: var(--text-secondary);
      cursor: not-allowed;
      opacity: 0.72;
    }

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--module-accent) 42%, var(--border));
      background: color-mix(in srgb, var(--surface) 97%, var(--module-accent));
      box-shadow: var(--shadow-subtle);
    }

    &.is-pressed:not(:disabled),
    &:active:not(:disabled) {
      border-color: color-mix(in srgb, var(--module-accent) 46%, var(--border));
      background: color-mix(in srgb, var(--surface) 94%, var(--module-accent));
      box-shadow: none;
      transform: translateY(1px);
    }
  }

  .module-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--module-accent) 10%, var(--surface));
    color: var(--module-accent);

    & .module-phosphor-icon {
      width: 1.75rem;
      height: 1.75rem;
    }
  }

  .module-card:disabled .module-icon {
    background: color-mix(in srgb, var(--border) 42%, var(--surface));
    color: var(--text-secondary);
  }

  .module-card:disabled .module-state {
    position: absolute;
    inset-inline: 0;
    bottom: var(--space-2);
  }

  .module-card--finance { --module-accent: var(--module-finance); }
  .module-card--balance { --module-accent: var(--module-balance); }
  .module-card--pergola { --module-accent: var(--module-pergola); }
  .module-card--access { --module-accent: var(--module-access); }
  .module-card--map { --module-accent: var(--module-map); }
  .module-card--tickets { --module-accent: var(--module-tickets); }
  .module-card--polls { --module-accent: var(--module-polls); }
  .module-card--gate { --module-accent: var(--module-gate); }
  .module-card--users { --module-accent: var(--module-users); }
  .module-card--permissions { --module-accent: var(--module-permissions); }
  .module-card--convivencia { --module-accent: var(--module-convivencia); }

  .module-card-copy {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-1);
    min-width: 0;
    text-align: center;

    & strong {
      color: var(--text);
      font-size: var(--text-label);
      font-weight: var(--weight-semibold);
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    & small {
      max-width: 18ch;
      color: var(--text-secondary);
      font-size: var(--text-caption);
      font-weight: 450;
      line-height: 1.35;
      text-align: center;
    }
  }

  .module-state {
    justify-self: center;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-1);
    background: color-mix(in srgb, var(--border) 44%, var(--surface));
    color: var(--text-secondary);
    font-size: 0.625rem;
    font-weight: var(--weight-semibold);
  }

  .catalog-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
}

@layer layout {
  body.catalog-open {
    overflow: hidden;
  }

  #app-shell {
    min-height: 100vh;
    min-height: 100dvh;
  }

  #module-stage {
    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding: var(--space-5) var(--space-4) var(--space-12);
  }

  .ui-module {
    display: none;
    margin: 0;
  }

  .ui-module.ui-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-surface), transform var(--transition-surface);
  }

  .ui-module.ui-module--task {
    width: min(100%, var(--content-task));
    margin-inline: auto;
  }

  .ui-module.ui-active.ui-surface-enter {
    opacity: 0;
    transform: translateY(5px);
  }

  .ui-home.ui-active {
    display: grid;
    gap: var(--space-5);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .screen-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);

    & h2 {
      margin: 0;
      color: var(--text);
      font-size: var(--text-page-title);
      font-weight: var(--weight-semibold);
      letter-spacing: -0.025em;
      line-height: 1.15;
    }

    & p:not(.eyebrow) {
      margin: var(--space-2) 0 0;
      color: var(--text-secondary);
    }
  }

  .session-context {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    background: color-mix(in srgb, var(--surface) 72%, var(--canvas));
  }

  .session-context__item {
    min-width: 0;
    padding: var(--space-4);

    &:nth-child(odd) {
      border-right: 1px solid var(--border);
    }

    &:nth-child(n + 3) {
      border-top: 1px solid var(--border);
    }

    & span,
    & strong {
      display: block;
      overflow-wrap: anywhere;
    }

    & span {
      color: var(--text-secondary);
      font-size: var(--text-caption);
    }

    & strong {
      margin-top: var(--space-1);
      color: var(--text);
      font-weight: var(--weight-medium);
    }
  }

  .unauthenticated {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--canvas);

    & .app-header,
    & .ui-home > .screen-heading,
    & #home-context,
    & #session-panel {
      display: none;
    }

    & #module-stage {
      display: grid;
      min-height: 100vh;
      min-height: 100dvh;
      align-content: center;
      place-items: center;
      gap: var(--space-3);
      padding: var(--space-6) var(--space-5);
    }

    & #ui-message {
      width: min(100%, var(--login-max));
      margin: 0;

      &:not(:empty) {
        display: block;
      }
    }

    & .ui-home.ui-active {
      display: block;
      width: min(100%, var(--login-max));
    }

    & #login-panel {
      display: block;
      margin: 0;
    }
  }

  .gate-onboarding {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--canvas);

    & .app-header,
    & #ui-message,
    & .ui-home {
      display: none !important;
    }

    & #module-stage {
      display: grid;
      min-height: 100vh;
      min-height: 100dvh;
      align-content: center;
      place-items: center;
      padding: var(--space-6) var(--space-5);
    }

    & #gate-panel.ui-active { display: block !important; width: min(100%, var(--login-max)); }
    & #gate-panel > :not(#gate-device-onboarding) { display: none !important; }
    & #gate-device-onboarding { display: block; }
  }

  #module-catalog.catalog-fallback-open {
    position: fixed;
    inset: var(--space-4);
    z-index: 40;
    display: block;
    margin: auto;
  }
}

@layer utilities {
  .ui-legacy-message,
  .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;
  }
}

@media (min-width: 48rem) {
  @layer components {
    .app-header__inner {
      min-height: 4.75rem;
      padding-inline: var(--space-6);
    }

    .brand-block h1 {
      font-size: 1.125rem;
    }

    .brand-context {
      font-size: var(--text-caption);
    }

    .header-actions {
      gap: var(--space-2);
    }

    #module-catalog {
      inset: 0;
      width: calc(100% - (var(--space-8) * 2));
      max-width: var(--launcher-max);
      max-height: calc(100vh - (var(--space-8) * 2));
      max-height: calc(100dvh - (var(--space-8) * 2));
      margin: auto;
      border-radius: var(--radius-launcher);

      & .catalog-surface {
        transform: translateY(2rem) scale(0.98);
      }

      &[open] .catalog-surface {
        transform: translateY(0) scale(1);
      }
    }

    .catalog-surface {
      border-radius: var(--radius-launcher);
    }

    .catalog-header {
      padding: var(--space-5) var(--space-8);
    }

    .module-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-5);
      padding: calc(var(--space-6) + var(--space-1)) var(--space-8) max(var(--space-8), env(safe-area-inset-bottom));
    }

    .module-card {
      min-height: 9rem;
      gap: var(--space-3);
      padding: var(--space-5) var(--space-4);
    }

    .module-icon {
      width: 3.5rem;
      height: 3.5rem;

      & .module-phosphor-icon {
        width: 2rem;
        height: 2rem;
      }
    }

  }

  @layer layout {
    #module-stage {
      padding: var(--space-8) var(--space-6) var(--space-12);
    }

    .ui-home.ui-active {
      max-width: 62rem;
      margin-inline: auto;
      gap: var(--space-6);
    }

    .unauthenticated #login-panel {
      border-radius: var(--radius-dialog);
      padding: var(--space-6);
      box-shadow: var(--shadow-surface);
    }

    .session-context {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .session-context__item {
      &:not(:last-child) {
        border-right: 1px solid var(--border);
      }

      &:nth-child(n) {
        border-top: 0;
      }
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  @layer components {
    .module-card:hover:not(:disabled) {
      box-shadow: var(--shadow-surface);
      transform: translateY(-3px);
    }

    .module-card.is-pressed:not(:disabled),
    .module-card:active:not(:disabled) {
      box-shadow: var(--shadow-subtle);
      transform: translateY(-1px);
    }
  }
}

@media (max-width: 35rem) {
  @layer components {
    .app-header__inner {
      align-items: flex-start;
      gap: var(--space-2);
      padding-inline: var(--space-2);
    }

    .brand-mark {
      display: none;
    }

    .brand-lockup {
      gap: var(--space-2);
    }

    .brand-context {
      max-width: clamp(7.5rem, 31vw, 10rem);
    }

    .header-actions {
      align-items: stretch;
      flex-direction: row;
      gap: var(--space-1);
    }

    .header-actions .btn {
      min-height: var(--touch-target);
      padding: var(--space-2) var(--space-3);
      font-size: var(--text-secondary-size);
    }

    .header-actions .shell-icon-button {
      width: var(--touch-target);
      min-width: var(--touch-target);
      padding: 0;
    }

    .global-logout {
      width: var(--touch-target) !important;
      min-width: var(--touch-target);
      flex: 0 0 var(--touch-target);
      min-height: var(--touch-target);
      padding: 0 !important;
    }

    #module-catalog.catalog-fallback-open {
      inset: auto 0 0;
    }
  }

  @layer layout {
    #module-stage {
      padding: var(--space-5) var(--space-3) var(--space-12);
    }

    .unauthenticated #module-stage {
      align-items: center;
      padding: var(--space-6) var(--space-5);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer base {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}