:root {
  --dashboard-header-height: var(--header-height);
  --open-close-duration: 0.3s;
  interpolate-size: allow-keywords;
}

.dashboard-main {
  display: block;
  min-height: calc(100vh - var(--dashboard-header-height));
}

.dashboard-shell {
  width: 100%;
}

.onboarding-shell {
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3.5rem);
}

.dashboard-header {
  display: block;
  max-width: 47rem;
  margin-bottom: 1rem;
}

.dashboard-header h1 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 2rem);
}

.dashboard-header p {
  color: var(--text-muted);
  font-size: 1.125rem;
}

.dashboard-layout {
  min-height: calc(100vh - var(--dashboard-header-height));
  display: flex;
  align-items: flex-start;
}

.dashboard-content {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(.5rem, 2vw, 3.5rem);
}

.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 14rem;
  flex: 0 1 17rem;
  position: sticky;
  top: var(--dashboard-header-height);
  height: calc(100vh - var(--dashboard-header-height));
  padding-block: 1.5rem;
  padding-left: env(safe-area-inset-left);
  border-right: 1px solid var(--surface-border);
  background: var(--surface-default);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  view-transition-name: sidebar;
  animation-name: compact-dashboard-sidebar;
  animation-duration: auto;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: scroll(root block);
  animation-range: 0 6rem;
  transition:
    min-width var(--open-close-duration),
    flex-basis var(--open-close-duration),
    padding var(--open-close-duration);

  &[data-collapsed="true"] {
    min-width: calc(3.5rem + env(safe-area-inset-left));
    flex-basis: calc(3.5rem + env(safe-area-inset-left));

    & .dashboard-sidebar-header {
      align-self: center;
      padding-inline: 0;
    }

    & small,
    & .dashboard-navigation {
      opacity: 0;
      transition: opacity var(--open-close-duration);
    }
  }
}

@keyframes compact-dashboard-sidebar {
  to {
    top: 4rem;
    height: calc(100vh - 4rem);
  }
}

.dashboard-sidebar-header {
  display: flex;
  align-items: center;
  /*justify-content: flex-end;*/
  align-self: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-inline: 1.5rem;

  & small {
    margin: 0;
  }
}

.dashboard-sidebar-toggle {
  width: 2.5rem;
  min-height: 2.5rem;
  flex: 0 0 2.5rem;
  padding: 0;
  border: 1px solid var(--surface-border);
  border-radius: var(--control-radius);
  background: var(--surface-default);
  color: var(--text-heading);
  cursor: pointer;

  & span {
    font-size: 1.5rem;
    line-height: 1;
  }

  &:hover {
    background: var(--surface-subtle);
  }
}

.dashboard-navigation {
  display: flex;
  flex-direction: column;
  min-width: calc(17rem - env(safe-area-inset-left));
  gap: 0.375rem;
  opacity: 1;
  transition: opacity var(--open-close-duration);
}

.dashboard-navigation-group,
.dashboard-navigation-submenu {
  display: flex;
  flex-direction: column;
}

.dashboard-navigation-label {
  padding: 0.75rem 0.875rem 0.375rem 1.875rem;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-navigation a {
  display: block;
  padding: 0.75rem 0.875rem 0.75rem 1.875rem;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-navigation a:hover {
  background: var(--surface-subtle);
  color: var(--text-heading);
}

.dashboard-navigation a[aria-current="page"] {
  background: var(--interactive-surface);
  color: var(--on-interactive);
}

.dashboard-navigation-submenu {
  gap: 0.125rem;

  & a {
    padding: 0.5rem 0.875rem 0.5rem 3.25rem;
    font-size: 0.875rem;
  }
}

.dashboard-card {
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--surface-border);
  border-radius: 0.875rem;
  background: var(--surface-default);
  box-shadow: 0 1rem 3.5rem rgba(7, 27, 74, 0.08);
}

.audit-history-card {
  padding-right: 0;
}

.dashboard-card h2 {
  margin-bottom: 1.25rem;
  color: var(--text-heading);
  font-size: clamp(1.5rem, 3vw, 1.75rem);
}

.account-deletion {
  border-color: var(--danger);

  & > small {
    color: var(--danger);
    font-weight: 800;
  }

  & > p {
    max-width: 48rem;
    color: var(--text-muted);
  }
}

.account-deletion-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 28rem;

  & input {
    width: 100%;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: var(--surface-default);
    color: var(--text-default);
    font: inherit;
  }
}

.danger-button {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--on-interactive);
}

.danger-button:hover {
  background: color-mix(in srgb, var(--danger) 85%, black);
}

.application-form :is(input, select),
.application-name-form input,
.audit-schedule-form :is(input:not([type="checkbox"]), select, textarea),
.audit-configuration-form :is(input:not([type="checkbox"]), select, textarea) {
  width: 100%;
  margin: 0;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--surface-default);
  color: var(--text-default);
  font: inherit;
}

.notification-description {
  max-width: 42rem;
  color: var(--text-muted);
}

.billing-status,
.billing-notice {
  color: var(--text-muted);
}

.billing-notice {
  padding: 0.875rem 1rem;
  border-left: 0.25rem solid var(--notice-warning);
  background: var(--notice-warning-background);

  &[data-status="error"] {
    border-left-color: var(--danger);
    background: var(--notice-error-background);
    color: var(--notice-error);
  }
}

.billing-actions {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--surface-border);

  & > div {
    min-width: min(100%, 18rem);
    display: flex;
    flex: 1 1 20rem;
    flex-direction: column;
    gap: 0.4rem;
  }

  & label {
    color: var(--text-heading);
    font-weight: 750;
  }

  & select {
    min-height: 3rem;
    padding: 0.75rem;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: var(--surface-default);
    color: var(--text-default);
    font: inherit;
  }

  & small {
    color: var(--text-muted);
  }

  & button {
    min-height: 3rem;
    flex: 0 0 auto;
  }
}

.billing-terms-consent {
  display: flex;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;

  & input {
    flex: 0 0 auto;
    margin-top: 0.25rem;
  }

  & a {
    color: var(--accent-text);
  }
}

.notification-setting,
.passkey-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--surface-border);
}

.notification-setting p,
.passkey-setting p {
  margin: 0;
  color: var(--text-muted);
}

.notification-setting button,
.passkey-setting button {
  min-height: 3rem;
  flex: 0 0 auto;
}

.notification-setting button {
  border: 1px solid var(--interactive-surface);
  font-weight: 700;
}

.plan-reminder-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-default);
  font-weight: 700;

  & input {
    inline-size: 3rem;
    block-size: 1.5rem;
    margin: 0;
    accent-color: var(--interactive-surface);
  }

  & input:not(:checked) + span::after {
    content: 'Off';
  }

  & input:checked + span {
    font-size: 0;

    &::after {
      content: 'On';
      font-size: 1rem;
    }
  }
}

.passkey-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;

  & li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    border-top: 1px solid var(--surface-border);
  }

  & li > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  & strong {
    color: var(--text-heading);
  }

  & span {
    color: var(--text-muted);
    font-size: 0.8125rem;
  }

  & button {
    min-height: 2.5rem;
    flex: 0 0 auto;
    border: 1px solid var(--interactive-surface);
    background: var(--surface-default);
    color: var(--text-heading);
  }
}

.application-description {
  max-width: 42rem;
  color: var(--text-muted);
}

.application-form {
  max-width: 60rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin-block: 1.5rem 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--surface-border);

  & > div {
    min-width: 12rem;
    min-height: 105px;
    flex: 0 1 17rem;
    display: flex;
    flex-direction: column;
  }

  & > div:first-child {
    flex: 1 1 22rem;
  }

  & input,
  & select {
    min-height: 3.25rem;
    padding-inline: 0.875rem;
  }

  & .field-help {
    margin: 0.4rem 0 0;
  }

  & button {
    flex: 0 0 auto;
    margin-block: auto;
  }
}

#applications-status {
  color: var(--text-muted);
}

.application-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;

  & > li {
    padding: 1.5rem;
    border: 1px solid var(--surface-border);
    border-radius: 0.625rem;
    background: var(--surface-subtle);
  }
}

.application-list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;

  & h3 {
    margin-bottom: 0.5rem;
    color: var(--text-heading);
    overflow-wrap: anywhere;
  }
}

.application-name-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  &[hidden] {
    display: none;
  }

  & h3 {
    margin: 0;
  }
}

.application-edit-button {
  min-height: 2rem;
  padding-inline: 0.75rem;
}

.application-name-form {
  max-width: 36rem;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.75rem;

  &[hidden] {
    display: none;
  }

  & input {
    min-height: 2.75rem;
    field-sizing: content;
    flex: 1 1 auto;
    padding-inline: 0.75rem;
  }

  & button {
    flex: 0 0 auto;
  }
}

.application-status {
  &.application-status--verified {
    background: var(--success-background);
    color: var(--success);
  }

  &.application-status--pending {
    background: var(--warning-background);
    color: var(--warning);
  }
}

.application-verification {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface-border);

  & p {
    color: var(--text-muted);
  }

  & pre {
    max-width: 100%;
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--surface-border);
    border-radius: var(--control-radius);
    background: var(--surface-default);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

.application-verification-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;

  & > div {
    min-width: 0;
    flex: 1 1 12rem;
    padding: 0.75rem;
    border-radius: var(--control-radius);
    background: var(--surface-default);
  }

  & dt {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  & dd {
    margin: 0.25rem 0 0;
    color: var(--text-heading);
    font-family: monospace;
    overflow-wrap: anywhere;
  }
}

.application-verified-message {
  margin-bottom: 0;
  color: var(--success);
  font-weight: 700;
}

.application-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;

}

.application-feedback {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-weight: 700;

  &:empty {
    display: none;
  }

  &[data-status="error"] {
    color: var(--danger);
  }
}

#passkey-password-dialog,
#replace-secret-dialog {
  width: min(calc(100% - 2rem), 30rem);
  padding: 0;
  border: 0;
  border-radius: 0.875rem;
  color: var(--text-default);
  box-shadow: 0 1.5rem 5rem var(--navy-shadow);

  &::backdrop {
    background: var(--navy-overlay);
  }

  & h2 {
    color: var(--text-heading);
  }

  & p {
    color: var(--text-muted);
  }
}

#passkey-password-dialog {
  & form {
    display: flex;
    flex-direction: column;
    padding: 2rem;
  }

  & form > div {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
  }
}

.credential-list {
  margin: 1.5rem 0 0;
}

.credential-list > div {
  padding-block: 1rem;
  border-top: 1px solid var(--surface-border);
}

.credential-list dt {
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credential-list dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
}

.credential-list code {
  min-width: 0;
  color: var(--text-default);
  font-size: 0.875rem;
}

.credential-list button {
  min-height: 2.5rem;
  flex: 0 0 auto;
  border: 1px solid var(--interactive-surface);
  background: var(--surface-default);
  color: var(--text-heading);
}

.credential-note {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

#credentials-status {
  color: var(--text-muted);
}

.secret-actions {
  margin-top: 1.5rem;
}

.secret-actions > button {
  border: 1px solid var(--interactive-surface);
  background: var(--interactive-surface);
}

.secret-replacement {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--surface-border);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}

.secret-replacement h3 {
  margin-bottom: 0.5rem;
}

.secret-replacement p {
  color: var(--text-muted);
}

.secret-replacement > div {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#replacement-status {
  min-height: 1.5rem;
  margin: 0.75rem 0 0;
}

.dashboard-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;

  & h2 {
    margin-bottom: 0;
  }
}

.dashboard-primary-action,
.dashboard-secondary-action,
.dashboard-danger-action,
.audit-management-actions button,
.audit-schedules-card > .dashboard-card-heading button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  border: 1px solid var(--interactive-surface);
  border-radius: var(--control-radius);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-primary-action,
.audit-management-actions button,
.audit-schedules-card > .dashboard-card-heading button {
  background: var(--interactive-surface);
  color: var(--on-interactive);
}

.dashboard-secondary-action {
  background: var(--surface-default);
  color: var(--text-heading);
}

.dashboard-danger-action {
  border-color: var(--danger);
  background: var(--surface-default);
  color: var(--danger);
}

.audit-management-list {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;

  & article {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    padding-block: 1.25rem;
    border-top: 1px solid var(--surface-border);
  }

  & article > div:first-child {
    min-width: 0;
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
  }

  & h3 {
    margin: 0;
    color: var(--text-heading);
  }

  & p {
    margin: 0.25rem 0 0;
    color: var(--text-default);
    overflow-wrap: anywhere;
  }

  & small {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
  }
}

#audit-configurations-status {
  &[data-status="error"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--danger);
    font-weight: 750;
  }

  & svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
}

.audit-management-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.audit-schedule-state {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--success-background);
  color: var(--success);
  font-size: 0.75rem;
  font-weight: 800;

  &[data-enabled="false"] {
    background: var(--surface-subtle);
    color: var(--text-muted);
  }
}

.audit-management-actions,
.audit-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  flex-wrap: wrap;

  button[type="submit"] {
    order: 2;
  }
}

.audit-management-actions {
  flex-wrap: nowrap;
}

.audit-management-actions .audit-icon-action {
  width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  flex: 0 0 1.75rem;
  padding: 0;
  background: transparent;
  color: var(--text-heading);
  border: 0;

  & .material-symbols-outlined {
    font-size: 2rem;
    line-height: 1;
    font-variation-settings:
      'FILL' 0,
      'wght' 300,
      'GRAD' 0,
      'opsz' 32;
  }
}

.audit-management-actions .audit-icon-action.dashboard-danger-action {
  background: transparent;
  color: var(--danger);
  border: 0;
}

.audit-management-actions .audit-icon-action--run .material-symbols-outlined {
  font-size: 2.5rem;
  font-variation-settings:
    'FILL' 1,
    'wght' 300,
    'GRAD' 0,
    'opsz' 32;
}

.audit-management-actions .audit-configuration-download {
  min-height: 1.75rem;
  padding: 0;
  background: transparent;
  color: var(--text-heading);
  border: 0;
  font-size: 0.75rem;
  text-decoration: underline;
}

.audit-schedule-form,
.audit-configuration-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  &[hidden] {
    display: none;
  }

  & label,
  & legend,
  & .audit-repeatable-label {
    color: var(--text-heading);
    font-weight: 750;
  }

  & input:not([type="checkbox"]),
  & select,
  & textarea {
    min-height: 3rem;
    padding: 0.75rem;
  }

  & textarea {
    resize: vertical;
  }

  & fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
}

.audit-schedule-form {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--surface-border);
}

.audit-configuration-form > section {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--surface-border);
}

.audit-form-grid {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;

  & > div,
  & > fieldset {
    min-width: 15rem;
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  & > :is(div, fieldset)[hidden] {
    display: none;
  }

  & > .audit-configuration-row {
    flex-basis: 100%;
  }
}

.audit-form-description,
.audit-form-note {
  max-width: 50rem;
  margin: -0.75rem 0 1.5rem;
  color: var(--text-muted);
}

.audit-form-note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
}

.audit-timeout-note {
  margin: 0 0 1rem;
}

.audit-choice-list,
.audit-check-choices {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;

  & label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 650;
  }
}

#audit-severity-choices {
  input[type="checkbox"] {
    min-height: 3rem;
  }
}


.audit-check-choice {
  width: 100%;
  flex: 1 1 100%;
  border: 1px solid var(--surface-border);
  border-radius: var(--control-radius);
  background: var(--surface-subtle);

  & > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem;
    font-weight: 650;
  }

  &:has(> label[data-unavailable="true"]) {
    cursor: not-allowed;
    opacity: 0.65;

    & > label input {
      cursor: not-allowed;
    }
  }

  & [data-check-advanced][inert] {
    opacity: 0.65;

    & summary {
      cursor: not-allowed;
    }
  }
}

.audit-rule-group {
  border-top: 1px solid var(--surface-border);

  & summary {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    color: var(--text-heading);
    font-weight: 800;
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      width: 0.45rem;
      height: 0.45rem;
      margin-right: 0.625rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      content: '';
      transform: rotate(-45deg);
      transition: transform 150ms ease;
    }
  }

  &[open] > summary::before {
    transform: rotate(45deg);
  }
}

.audit-rule-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0 1rem 1rem 2rem;

  & label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    flex: 1 1 16rem;
    max-width: 32.5%;

    &:has(input:disabled) {
      opacity: 0.5;
    }
  }
}

.audit-advanced-options {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 1rem 1.5rem;

  & > .audit-form-grid,
  & > .audit-rule-options,
  & > .audit-repeatable-field {
    flex: 1 1 100%;
  }

  & > [data-option-timeout-check] {
    min-width: 15rem;
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    input:only-of-type {
      max-width: 5rem;
    }
  }

  & .audit-form-grid {
    padding: 0;
  }

  & .audit-rule-options {
    padding: 0;
  }
}

.audit-rules-title {
  margin: 1.5rem 0 0.75rem;
  color: var(--text-heading);
  font-size: 1rem;
}

.audit-weekdays label {
  flex: 0 0 auto;
}

.audit-enabled-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-option-group,
.audit-source-group {
  border-top: 1px solid var(--surface-border);

  & summary {
    display: flex;
    align-items: center;
    padding-block: 1rem;
    color: var(--text-heading);
    font-weight: 800;
    cursor: pointer;

    &::before {
      width: 0.45rem;
      height: 0.45rem;
      margin-right: 0.625rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      content: '';
      transform: rotate(-45deg);
      transition: transform 150ms ease;
    }
  }



  & > .audit-form-grid {
    padding: 0 0 1.5rem;
  }
}

.audit-source-group {
  border-bottom: 1px solid var(--surface-border);
  border-top: none;
}

.audit-option-group {
  & summary {
    list-style: none;
    padding: 0.875rem 1rem;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      width: 0.45rem;
      height: 0.45rem;
      margin-right: 0.625rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      content: '';
      transform: rotate(-45deg);
      transition: transform 150ms ease;
    }
  }

  &[open] > summary::before {
    transform: rotate(45deg);
  }
}

div.single :is(input, select) {
  max-width: 32.5%;
}

.audit-source-group {
  & > .audit-form-grid {
    padding-top: 1rem;
  }
}

.audit-configuration-form .field-help {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.audit-repeatable-heading,
.audit-repeatable-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-repeatable-heading {
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.audit-repeatable-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.audit-repeatable-route-labels {
  display: flex;
  gap: 0.5rem;
  padding-right: 2.25rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;

  & span {
    min-width: 0;
    flex: 1 1 50%;
  }
}

.audit-repeatable-row input:not([type="checkbox"]) {
  width: auto;
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
}

.audit-repeatable-request-row {
  align-items: flex-start;

  & input,
  & textarea {
    width: auto;
    flex-grow: 1;
  }
}

.audit-configuration-form {
  & .audit-repeatable-request-row :is(select, textarea) {
    width: auto;
  }
}

/* makes sure an input doesn't stretch to the full width in a repeatable row when it is the only input in a row */
.audit-repeatable-field:not(:has(+ .audit-repeatable-field)):not(:last-of-type) .audit-repeatable-row input:not([type="checkbox"]):only-of-type {
  max-width: 32.5%;
}

.audit-repeatable-action {
  min-height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  & svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
}

.audit-repeatable-remove {
  background: var(--surface-default);
  color: var(--danger);
}

#audit-configuration-status,
#audit-schedule-form-status {
  min-height: 1.5rem;
  margin: 0;
  color: var(--text-muted);
}

.audit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.audit-table-wrapper[hidden] {
  display: none;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.audit-table th,
.audit-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--surface-border);
  vertical-align: middle;
}

.audit-table th {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.audit-table td {
  color: var(--text-default);
}

.audit-table td:first-child a {
  color: var(--text-heading);
  font-weight: 800;
}

.audit-table td:nth-child(2) {
  max-width: 22rem;
}

.audit-table th:nth-child(5),
.audit-table td:nth-child(5) {
  width: 165px;
  min-width: 165px;
  max-width: 165px;
}

.audit-table-row {
  cursor: pointer;
}

.audit-table-row:hover,
.audit-table-row:focus-within {
  background: var(--surface-subtle);
}

.audit-table-row:focus-within {
  outline: 0.2rem solid var(--focus-indicator);
  outline-offset: -0.2rem;
}

.audit-table-row a:focus-visible {
  outline: 0;
}

.audit-pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1rem;
  border-top: 1px solid var(--surface-border);
}

.audit-pagination[hidden] {
  display: none;
}

.audit-pagination--top {
  border-top: 0;
  border-bottom: 1px solid var(--surface-border);
}

.audit-pagination label {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.audit-pagination select,
.audit-pagination button {
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--surface-border);
  border-radius: 0.35rem;
  background: var(--surface-default);
  color: var(--text-heading);
  font: inherit;
}

.audit-pagination button {
  cursor: pointer;
  font-weight: 700;
}

.audit-pagination button:hover:not(:disabled),
.audit-pagination button[aria-current="page"] {
  background: var(--interactive-surface);
  color: var(--on-interactive);
}

.audit-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.audit-pagination-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.audit-page-numbers {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.application-status,
.quality-gate,
.audit-check-status {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.quality-gate--passed,
.audit-check-results [data-status="passed"] .audit-check-status {
  background: var(--success-background);
  color: var(--success);
}

.quality-gate--failed,
.audit-check-results [data-status="failed"] .audit-check-status,
.audit-check-results [data-status="error"] .audit-check-status {
  background: var(--failure-background);
  color: var(--failure);
}

.quality-gate--pending,
.quality-gate--in-progress,
.audit-check-results [data-status="warning"] .audit-check-status {
  background: var(--warning-background);
  color: var(--warning);
}

.quality-gate--in-progress::before {
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.4rem;
  border: 0.125rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin-quality-gate 0.8s linear infinite;
  content: '';
}

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

@media (prefers-reduced-motion: reduce) {
  .quality-gate--in-progress::before {
    animation: none;
  }
}

.audit-check-results [data-status="not-applicable"] .audit-check-status,
.audit-check-results [data-status="skipped"] .audit-check-status {
  background: var(--surface-subtle);
  color: var(--text-muted);
}

.audit-back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--text-heading);
  font-weight: 800;
}

.audit-url {
  display: block;
  margin-top: -0.75rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.audit-url:hover {
  color: var(--text-heading);
  text-decoration: underline;
}

.audit-id {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.8125rem;

  & > span {
    overflow-wrap: anywhere;
  }
}

.audit-id-copy-feedback {
  /*margin-left: auto;*/
}

.audit-id-copy {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: inherit;

  &:hover {
    background: var(--surface-subtle);
    color: var(--text-heading);
  }

  & .material-symbols-outlined {
    font-size: 1.125rem;
  }
}

.audit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.audit-summary > div {
  min-width: 8rem;
  flex: 1 1 8rem;
  padding: 0.75rem;
  border-radius: var(--control-radius);
  background: var(--surface-subtle);
}

.audit-summary dt,
.audit-check-detail dt {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audit-summary dd {
  margin: 0.25rem 0 0;
  color: var(--text-heading);
  font-weight: 800;
}

.audit-detail h3 {
  margin-bottom: 0.75rem;
  color: var(--text-heading);
}

.audit-check-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-check-results > li {
  min-width: 0;
  border-top: 1px solid var(--surface-border);
}

.audit-check-results details {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.audit-check-results summary {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
}

.audit-check-results summary::-webkit-details-marker {
  display: none;
}

.audit-check-results details {
  & .audit-check-chevron {
    width: 1rem;
    flex: 0 0 1rem;
    color: var(--text-default);
    font-size: 1.5rem;
    line-height: 1.2;
    text-align: center;
    transition: transform 150ms ease;
  }

  &[open] .audit-check-chevron {
    transform: rotate(90deg);
  }
}

.audit-check-results summary:focus-visible {
  outline: 0.2rem solid var(--focus-indicator);
  outline-offset: 0.2rem;
}

.audit-check-results summary > div {
  min-width: 0;
  flex: 1;
}

.audit-check-results h4 {
  margin: 0;
  color: var(--text-heading);
}

.audit-check-results summary p {
  margin: 0.25rem 0 0;
  color: var(--text-default);
}

.audit-check-outcome {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.25rem;
}

.audit-check-warning-count {
  color: var(--warning);
  font-size: 0.85rem;
  white-space: nowrap;
}

.audit-check-pwa-results {
  margin: 0 0 1rem 2.625rem;
  padding: 1rem;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);

  & > ul,
  & ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & > ul > li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
  }

  & > ul > li > span {
    flex: 0 0 1rem;
    color: var(--text-muted);
    font-weight: 900;
  }

  & > ul > li[data-status="passed"] > span {
    color: var(--success-indicator);
  }

  & > ul > li[data-status="warning"] > span,
  & > ul > li[data-status="failed"] > span,
  & > ul > li[data-status="error"] > span {
    color: var(--danger-indicator);
  }

  & p {
    margin: 0;
    color: var(--text-default);
  }

  & li ul {
    gap: 0.125rem;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.875rem;
  }

  & a {
    color: var(--interactive-text);
    text-decoration: underline;
  }
}

.audit-check-marker {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}

.audit-check-results [data-status="passed"] .audit-check-marker {
  color: var(--success-indicator);
}

.audit-check-results [data-status="warning"] .audit-check-marker,
.audit-check-results [data-status="failed"] .audit-check-marker,
.audit-check-results [data-status="error"] .audit-check-marker {
  color: var(--danger-indicator);
}

.audit-check-detail {
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 0;
  justify-content: flex-end;
  transition: height var(--open-close-duration);
  transition-behavior: allow-discrete;

  min-width: 0;
  margin: 0 0 1rem 2.625rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}

.audit-check-results details:not([open]) .audit-check-detail {
  content-visibility: hidden;
}

::details-content {
  display: block;
  height: 0;
  min-height: 0;
  overflow: hidden;
  content-visibility: visible;
  transition: height var(--open-close-duration), content-visibility var(--open-close-duration);
  transition-behavior: allow-discrete;
}

details[open] .audit-check-detail {
  height: auto;
}

[open]::details-content {
  height: auto;
}


.audit-check-detail dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.audit-check-detail dl > div {
  min-width: 0;
  flex: 1 1 10rem;
}

.audit-check-detail dd {
  margin: 0.25rem 0 0;
  color: var(--text-heading);
  overflow-wrap: anywhere;
}

.audit-evidence {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-border);

  & h5 {
    margin: 0;
    color: var(--text-heading);
    font-size: 0.875rem;
  }

  & > p {
    margin: 0.25rem 0 0;
    color: var(--text-default);
  }
}

.audit-evidence-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 0;

  & > div {
    min-width: 0;
    flex: 1 1 10rem;
  }
}

.audit-evidence-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;

  & li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--control-radius);
    background: var(--surface-default);
  }

  & strong {
    min-width: 0;
    color: var(--text-heading);
    overflow-wrap: anywhere;
  }

  & span {
    color: var(--text-muted);
  }
}

.audit-diagnostic-copy {
  align-self: flex-start;
  min-height: 2.5rem;
  margin-top: 1rem;
  border: 1px solid var(--interactive-surface);
  background: var(--surface-default);
  color: var(--text-heading);
}

.audit-check-detail pre {
  width: 100%;
  min-width: 0;
  max-height: 24rem;
  margin: 1rem 0 0;
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--surface-border);
  border-radius: var(--control-radius);
  background: var(--surface-default);
  color: var(--text-default);
  font-size: 0.8125rem;
  white-space: pre-wrap;
  content-visibility: auto;
  contain-intrinsic-block-size: 24rem;
}

.audit-check-empty {
  padding-block: 1rem;
  color: var(--text-muted);
}

#replace-secret-dialog form {
  padding: 2rem;
}

#replace-secret-dialog form > div {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (max-width: 48rem),
  (orientation: landscape) and (pointer: coarse) {
  .dashboard-layout {
    align-items: flex-start;
    position: relative;
    padding-left: 3.5rem;

    .dashboard-content {
      padding-left: calc(.5rem + env(safe-area-inset-left));
    }
  }

  .dashboard-sidebar {
    width: min(17rem, calc(100% - 0.75rem));
    min-width: 0;
    position: fixed;
    top: var(--dashboard-header-height);
    left: 0;
    z-index: 2;

    transition: width var(--open-close-duration);

    &[data-collapsed="true"] {
      width: 3.5rem;
    }
  }

  .notification-setting {
    align-items: stretch;
    flex-direction: column;
  }

  .application-form {
    align-items: stretch;
    flex-direction: column;

    & > div {
      width: 100%;
      min-width: 0;
      flex-basis: auto;
    }

    & button {
      align-self: flex-start;
    }
  }

  .credential-list dd {
    align-items: stretch;
    flex-direction: column;
  }

  .credential-list button {
    align-self: flex-start;
  }

  .audit-check-detail {
    margin-left: 0;
  }

  .audit-check-results summary {
    flex-wrap: wrap;
  }

  .audit-check-outcome {
    margin-left: 4.5rem;
    align-items: flex-start;
  }

  #replace-secret-dialog form > div {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-sidebar {
    animation: none;
  }
}

.audit-billing-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}