@layer reset, base, layout, components, utilities;

@layer reset {
  html {
    box-sizing: border-box;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
    word-break: break-word;
  }

  img,
  svg,
  video {
    max-width: 100%;
    height: auto;
  }

  .hidden {
    display: none;
  }

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

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

@layer base {
  body {
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size);
    line-height: var(--line-height);
    background-color: var(--background);
    color: var(--foreground);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    text-size-adjust: 100%;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--accent);
    margin: var(--space-lg) 0 var(--space-sm) 0;
    line-height: var(--line-height-tight);
  }

  h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-lg);
  }

  h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-lg);
  }

  h3 {
    font-size: var(--text-xl);
  }

  h4, h5, h6 {
    font-size: var(--text-lg);
  }

  p {
    margin: 0 0 1.2rem 0;
    line-height: var(--line-height-relaxed);
  }

  a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: all 0.2s ease;
  }

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

  ul, ol {
    margin: var(--space-sm) 0;
    padding-left: var(--space-xl);
  }

  li {
    margin: var(--space-2xs) 0;
    line-height: var(--line-height-relaxed);
  }

  main {
    min-height: calc(100vh - 7.5rem);
    padding: var(--space-xl) 0;
  }

  article {
    width: var(--content-width);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-sm);
  }

  header {
    display: flex;
    justify-content: space-between;
    padding-left: var(--space-sm);
    min-height: 4rem;
    flex-direction: column;
  }

  form {
    margin: var(--space-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  fieldset {
    border: var(--border-thin) solid var(--accent);
    border-radius: var(--radius);
    padding: var(--space-lg);
    margin: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  legend {
    color: var(--accent);
    font-weight: bold;
    padding: 0 var(--space-2xs);
    background: var(--background);
  }

  label {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: var(--space-2xs);
    line-height: 1.4;
  }

  input,
  textarea,
  select {
    width: 100%;
    padding: var(--space-xs);
    font-family: inherit;
    font-size: var(--font-size);
    background: var(--background);
    border: var(--border-thin) solid var(--text-secondary);
    border-radius: var(--radius);
    color: var(--text-primary);
    transition: all 0.2s ease;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 var(--border-thick) var(--accent-light);
  }

  input:hover,
  textarea:hover,
  select:hover {
    border-color: var(--accent);
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: auto;
    padding: 0;
    border: none;
    flex-shrink: 0;
    transform: scale(1.2);
    accent-color: var(--accent);
  }

  input[type="file"] {
    padding: var(--space-2xs);
    background: var(--bg-primary);
    border-style: dashed;
  }

  input[type="file"]::-webkit-file-upload-button {
    background: var(--accent);
    color: var(--background);
    border: none;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius);
    margin-right: var(--space-sm);
    cursor: pointer;
    font-family: inherit;
  }

  input:disabled,
  textarea:disabled,
  select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-primary);
  }

  input[readonly],
  textarea[readonly],
  select[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-primary);
    pointer-events: none;
  }

  input:invalid,
  textarea:invalid,
  select:invalid {
    border-color: var(--error);
  }

  input:invalid:focus,
  textarea:invalid:focus,
  select:invalid:focus {
    box-shadow: 0 0 0 var(--border-thick) var(--error-light);
  }

  textarea {
    resize: vertical;
    min-height: 4rem;
  }

  select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eec35e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-xs) center;
    background-size: 1rem;
    padding-right: var(--space-2xl);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  option {
    background: var(--background);
    color: var(--text-primary);
  }

  optgroup {
    font-weight: bold;
    color: var(--accent);
    font-style: normal;
  }

  optgroup option {
    font-weight: normal;
    color: var(--text-primary);
    padding-left: var(--space-sm);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
    margin: var(--space-sm) 0 var(--space-lg) 0;
  }

  th,
  td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: var(--border-thin) solid var(--text-secondary);
    text-align: left;
    vertical-align: top;
  }

  th {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
  }

  tbody tr:nth-child(even) {
    background: var(--bg-primary);
  }

  td.rowspan-hidden {
    display: none;
  }

  td.table-state {
    text-align: center;
  }

  @media (max-width: 48em) {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
      display: block;
    }

    td.rowspan-hidden {
      display: flex;
    }

    thead {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    tr {
      margin-bottom: var(--space-sm);
      border: var(--border-thin) solid var(--text-secondary);
      border-radius: var(--radius);
      background: var(--bg-primary);
    }

    tbody tr:nth-child(even) {
      background: var(--bg-primary);
    }

    td {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-sm);
      padding: var(--space-xs) var(--space-sm);
      border-bottom: var(--border-thin) solid var(--text-secondary);
      text-align: right;
    }

    td:last-child {
      border-bottom: none;
    }

    td::before {
      content: attr(data-label);
      font-weight: 600;
      color: var(--accent);
      text-align: left;
      flex-shrink: 0;
    }

    td.table-state {
      display: block;
      text-align: center;
    }

    td.table-state::before {
      content: none;
    }
  }

  button,
  a.btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-lg);
    border: var(--border-thick) solid var(--accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-base);
    font-family: inherit;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    transition: all 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
    user-select: none;
    min-width: fit-content;
  }

  button:hover,
  a.btn:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover {
    background: var(--accent-light);
  }

  button:focus,
  a.btn:focus,
  input[type="submit"]:focus,
  input[type="button"]:focus,
  input[type="reset"]:focus {
    outline: none;
    box-shadow: 0 0 0 0.1875rem var(--accent-light);
  }

  button:focus-visible,
  a.btn:focus-visible {
    outline: var(--border-thick) solid var(--accent);
    outline-offset: var(--border-thick);
  }

  button:disabled,
  input[type="submit"]:disabled,
  input[type="button"]:disabled,
  input[type="reset"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: transparent;
    border-color: var(--gray);
    color: var(--gray);
  }

  button.secondary,
  a.btn.secondary {
    color: var(--foreground);
    border-color: var(--foreground);
  }

  button.secondary:hover,
  a.btn.secondary:hover {
    background: var(--bg-primary);
  }

  button.secondary:focus,
  a.btn.secondary:focus {
    box-shadow: 0 0 0 0.1875rem rgba(236, 234, 229, 0.3);
  }

  button.danger,
  a.btn.danger {
    color: var(--error);
    border-color: var(--error);
  }

  button.danger:hover,
  a.btn.danger:hover {
    background: var(--error-light);
  }

  button.danger:focus,
  a.btn.danger:focus {
    box-shadow: 0 0 0 0.1875rem var(--error-light);
  }

  button.small,
  a.btn.small {
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--text-sm);
    gap: var(--space-3xs);
  }

  button.large,
  a.btn.large {
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--text-body);
    gap: var(--space-xs);
  }

  button.icon-right,
  a.btn.icon-right {
    flex-direction: row-reverse;
  }

  button.loading {
    position: relative;
  }

  button.loading .btn-label {
    visibility: hidden;
  }

  button.loading::after {
    content: '';
    position: absolute;
    width: var(--control-spinner);
    height: var(--control-spinner);
    border: var(--border-thick) solid transparent;
    border-top: var(--border-thick) solid var(--accent);
    border-radius: 50%;
    animation: btn-spin 1s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @keyframes btn-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }

  @media (max-width: 48em) {
    main {
      padding: var(--space-sm) 0;
    }

    article {
      width: 100%;
      padding: 0 var(--space-3xs);
    }

    header {
      padding-left: 0;
    }

    button,
    a.btn,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
      padding: 0.65rem 1.25rem;
      font-size: var(--text-md);
    }

    button.small,
    a.btn.small {
      padding: 0.45rem 0.85rem;
      font-size: 0.75rem;
    }

    button.large,
    a.btn.large {
      padding: 0.85rem 1.75rem;
      font-size: 0.95rem;
    }
  }
}

@layer layout {
  .container {
    width: var(--content-width);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-sm);
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-sm));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-2xs));
  }

  .auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 18rem), 100%), 1fr));
    gap: var(--grid-gap, var(--space-lg));
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--field-min, 16rem), 100%), 1fr));
    gap: var(--space-lg);
    align-items: start;
  }

  .form-grid > alert-notification,
  .form-grid > .turnstile-container,
  .form-grid > .form-field:has(.turnstile-container),
  .form-grid > button[type="submit"],
  .form-grid > input[type="submit"] {
    grid-column: 1 / -1;
  }

  .form-grid > alert-notification {
    margin: 0;
  }

  .form-grid > button[type="submit"],
  .form-grid > input[type="submit"] {
    justify-self: start;
  }

  @media (max-width: 30em) {
    .form-grid > button[type="submit"],
    .form-grid > input[type="submit"] {
      justify-self: stretch;
    }
  }

  .centre-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
  }

  button-group {
    display: flex;
    margin: var(--space-sm) 0;
    transition: all 0.2s ease;
  }

  button-group.layout-flex {
    display: flex;
  }

  button-group.layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  }

  button-group.gap-small {
    gap: var(--space-2xs);
  }

  button-group.gap-medium {
    gap: var(--space-xs);
  }

  button-group.gap-large {
    gap: var(--space-sm);
  }

  button-group.wrap {
    flex-wrap: wrap;
  }

  button-group.justify-start {
    justify-content: flex-start;
  }

  button-group.justify-center {
    justify-content: center;
  }

  button-group.justify-end {
    justify-content: flex-end;
  }

  button-group.justify-space-between {
    justify-content: space-between;
  }

  button-group.direction-row {
    flex-direction: row;
  }

  button-group.direction-column {
    flex-direction: column;
  }

  button-group > .btn {
    min-width: 11.25rem;
    flex: 1;
  }

  @media (max-width: 48em) {
    button-group.layout-grid {
      grid-template-columns: 1fr;
    }

    button-group.direction-row {
      flex-direction: column;
    }

    button-group > .btn {
      min-width: auto;
      width: 100%;
    }
  }

  @media (max-width: 30em) {
    button-group {
      margin-bottom: var(--space-xs);
    }

    button-group.gap-medium {
      gap: var(--space-2xs);
    }

    button-group.gap-large {
      gap: var(--space-xs);
    }
  }
}

@layer components {
  .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .form-field label {
    margin-bottom: 0;
  }

  .form-field p {
    margin: 0;
  }

  .form-help {
    font-size: var(--text-base);
    color: var(--text-secondary);
  }

  .form-error {
    font-size: var(--text-base);
    color: var(--error);
  }

  .form-success {
    font-size: var(--text-base);
    color: var(--success);
  }

  .turnstile-container {
    position: relative;
    min-height: var(--turnstile-height);
  }

  .turnstile-mount {
    min-height: var(--turnstile-height);
  }

  .turnstile-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--bg-primary);
    border: var(--border-thin) solid var(--text-secondary);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: var(--text-base);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
  }

  .turnstile-container.is-ready .turnstile-placeholder {
    opacity: 0;
    visibility: hidden;
  }

  .turnstile-placeholder-spinner {
    width: var(--control-spinner);
    height: var(--control-spinner);
    border: var(--border-thick) solid transparent;
    border-top: var(--border-thick) solid currentColor;
    border-radius: 50%;
    animation: btn-spin 1s linear infinite;
    flex-shrink: 0;
  }

  .radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--bg-primary);
    border: var(--border-thin) solid var(--text-secondary);
    border-radius: var(--radius);
  }

  .radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-primary);
    border: var(--border-thin) solid var(--text-secondary);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0;
  }

  .checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    cursor: pointer;
  }

  .radio-option:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
  }

  .checkbox-option:hover {
    color: var(--accent);
  }

  .radio-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-light);
  }

  .checkbox-option:has(input:checked) {
    color: var(--accent);
  }

  .radio-option.recommended {
    border-color: var(--success);
  }

  .radio-option.recommended:has(input:checked) {
    background: var(--success-light);
    border-color: var(--success);
  }

  .radio-option input {
    margin-top: var(--space-3xs);
  }

  .radio-option > div {
    flex: 1;
  }

  .radio-option h4 {
    margin: 0 0 var(--space-2xs) 0;
    font-size: var(--text-body);
    color: var(--text-primary);
  }

  .radio-option h4 span {
    font-size: var(--text-sm);
    font-weight: normal;
    color: var(--accent);
    margin-left: var(--space-2xs);
  }

  .radio-option p {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
  }

  .radio-option ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: var(--text-md);
  }

  .radio-option li {
    margin: var(--space-3xs) 0;
    color: var(--text-secondary);
  }

  alert-notification {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius);
    margin: var(--space-sm) 0 var(--space-xl) 0;
    font-weight: 500;
    border: var(--border-thin) solid;
    position: relative;
    animation: alertSlideIn 0.3s ease-out;
  }

  alert-notification .alert-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    width: 100%;
  }

  alert-notification .alert-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1;
  }

  alert-notification .alert-message {
    flex: 1;
    line-height: 1.5;
  }

  alert-notification .alert-message p {
    margin: 0;
  }

  alert-notification .alert-dismiss {
    background: none;
    border: none;
    font-size: var(--text-lg);
    cursor: pointer;
    padding: 0;
    margin-left: var(--space-2xs);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    color: inherit;
    line-height: 1;
  }

  alert-notification .alert-dismiss:hover {
    opacity: 1;
  }

  alert-notification.alert-success {
    background: var(--success-light);
    border-color: var(--success);
    color: var(--success);
  }

  alert-notification.alert-error {
    background: var(--error-light);
    border-color: var(--error);
    color: var(--error);
  }

  alert-notification.alert-warning {
    background: var(--warning-light);
    border-color: var(--warning);
    color: var(--warning);
  }

  alert-notification.alert-info {
    background: var(--info-light);
    border-color: var(--info);
    color: var(--info);
  }

  @keyframes alertSlideIn {
    from {
      opacity: 0;
      transform: translateY(-0.625rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .card {
    border: var(--border-thin) solid var(--accent);
    border-radius: var(--radius);
    padding: var(--space-lg);
    transition: border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .card:hover {
    border-color: var(--accent);
  }

  .items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
  }

  .items-grid > * {
    flex: 1 1 18.75rem;
    min-width: 18.75rem;
  }

  list-panel {
    display: block;
    background: var(--background);
    border: var(--border-thin) solid var(--accent);
    border-radius: var(--radius);
    overflow: hidden;
  }

  list-panel header,
  summary-panel header {
    border-bottom: var(--border-thin) solid var(--accent);
  }

  .counter {
    padding: var(--space-3xs) var(--space-xs);
    background: var(--accent-light);
    color: var(--accent);
    border-radius: var(--radius);
    font-size: var(--text-md);
    font-weight: 500;
  }

  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem var(--space-xl);
    text-align: center;
    color: var(--foreground);
    opacity: 0.8;
  }

  .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
    opacity: 0.6;
  }

  .empty-message {
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
    color: var(--foreground);
    opacity: 0.9;
  }

  .item-card {
    border-bottom: var(--border-thin) solid var(--accent);
    transition: all 0.2s ease;
  }

  .item-card:last-child {
    border-bottom: none;
  }

  .item-card:hover {
    background: var(--accent-subtle);
  }

  .item-header {
    cursor: pointer;
  }

  .item-header[aria-disabled="true"] {
    pointer-events: none;
  }

  .item-summary {
    padding: var(--space-lg);
    transition: all 0.2s ease;
    border-left: 0.25rem solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item-summary:hover {
    background: var(--accent-light);
  }

  .item-summary.status-up {
    border-left-color: var(--success);
  }

  .item-summary.status-down {
    border-left-color: var(--error);
  }

  .item-summary.status-warning {
    border-left-color: var(--warning);
  }

  .item-summary.status-partial {
    border-left-color: var(--info);
  }

  .expand-icon {
    margin-left: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--foreground);
    opacity: 0.6;
    transition: transform 0.2s ease;
  }

  .summary-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    flex: 1;
  }

  .summary-title {
    flex: 1 1 12rem;
    min-width: min(12rem, 100%);
  }

  .summary-title h3 {
    margin: 0 0 var(--space-2xs) 0;
    font-size: 1.2rem;
    color: var(--foreground);
    font-weight: 600;
  }

  .summary-badges {
    display: flex;
    gap: var(--space-2xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-xs);
  }

  .summary-stats {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3xs);
  }

  .stat-label {
    font-size: 0.75rem;
    color: var(--foreground);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
  }

  .stat-value {
    font-size: var(--text-base);
    color: var(--foreground);
    font-weight: 600;
    font-family: monospace;
  }

  .item-details {
    background: var(--accent-subtle);
  }

  .detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--accent-light);
    border-bottom: var(--border-thin) solid var(--accent);
  }

  .detail-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
  }

  .detail-title {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
  }

  .detail-content {
    padding: var(--space-sm);
  }

  .detail-group {
    padding-top: var(--space-xs);
  }

  .detail-group-title {
    margin: 0 0 var(--space-2xs);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--foreground);
    opacity: 0.7;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-2xs) 0;
    border-bottom: var(--border-thin) solid var(--text-secondary);
    gap: var(--space-sm);
    font-size: var(--text-base);
  }

  .detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .detail-item:first-child {
    padding-top: 0;
  }

  .detail-label {
    color: var(--foreground);
    opacity: 0.8;
    font-weight: 500;
    flex-shrink: 0;
    min-width: 7.5rem;
  }

  .detail-value {
    color: var(--foreground);
    font-family: monospace;
    font-weight: 500;
    text-align: right;
    word-break: break-all;
    flex: 1;
  }

  @media (max-width: 48em) {
    .detail-item {
      flex-wrap: wrap;
      row-gap: var(--space-3xs);
    }

    .detail-label {
      flex-shrink: 1;
      overflow-wrap: anywhere;
    }

    .detail-value {
      flex: 1 1 auto;
    }
  }

  .secret-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
  }

  .secret-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.125rem var(--space-3xs);
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--accent);
    opacity: 0.8;
    transition: opacity 0.2s;
  }

  .secret-toggle:hover {
    opacity: 1;
    text-decoration: underline;
  }

  .detail-value.status-up {
    color: var(--success);
    font-weight: 600;
  }

  .detail-value.status-down {
    color: var(--error);
    font-weight: 600;
  }

  .detail-value.status-warning {
    color: var(--warning);
    font-weight: 600;
  }

  .detail-value.status-info {
    color: var(--info);
    font-weight: 600;
  }

  .bandwidth-chart {
    border-bottom: var(--border-thin) solid var(--accent);
  }

  .chart-header {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--accent-light);
    border-bottom: var(--border-thin) solid var(--accent);
  }

  .chart-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
  }

  .chart-title {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
  }

  .chart-note {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: right;
  }

  .chart-body {
    padding: var(--space-sm);
    overflow-x: auto;
  }

  .chart-status {
    margin: 0;
    color: var(--text-secondary);
  }

  .chart-panel + .chart-panel {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: var(--border-thin) solid var(--border-subtle);
  }

  .chart-panel-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    margin-bottom: var(--space-2xs);
  }

  .chart-panel-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--foreground);
  }

  .chart-panel-note {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .bandwidth-chart svg {
    display: block;
    width: 100%;
    min-width: 46rem;
    height: auto;
    font-family: var(--font-mono);
  }

  .bandwidth-chart .plot,
  .traffic-chart .plot {
    fill: rgba(236, 234, 229, 0.03);
    stroke: var(--border-subtle);
    stroke-width: 1;
  }

  .bandwidth-chart .grid,
  .traffic-chart .grid {
    stroke: rgba(236, 234, 229, 0.1);
    stroke-width: 1;
  }

  .bandwidth-chart .axis-tick,
  .traffic-chart .axis-tick {
    stroke: rgba(236, 234, 229, 0.45);
    stroke-width: 1;
  }

  .bandwidth-chart .axis {
    fill: rgba(236, 234, 229, 0.45);
    font-size: 12px;
  }

  .bandwidth-chart .bar-low,
  .traffic-chart .bar-low {
    fill: rgba(238, 195, 94, 0.7);
  }

  .bandwidth-chart .bar-high,
  .traffic-chart .bar-high {
    fill: rgba(238, 195, 94, 0.3);
  }

  .bandwidth-chart .bar-aside,
  .traffic-chart .bar-aside {
    fill: rgba(236, 234, 229, 0.34);
  }

  .bandwidth-chart .unmeasured,
  .traffic-chart .unmeasured {
    fill: rgba(236, 234, 229, 0.05);
  }

  .bandwidth-chart .unmeasured-label {
    fill: rgba(236, 234, 229, 0.62);
    font-size: 10.5px;
  }

  .bandwidth-chart .role-percentile,
  .traffic-chart .role-percentile {
    --mark-colour: var(--accent);
  }

  .bandwidth-chart .role-mean {
    --mark-colour: var(--info);
  }

  .bandwidth-chart .role-billed,
  .bandwidth-chart .role-charged {
    --mark-colour: var(--accent);
  }

  .bandwidth-chart .role-required {
    --mark-colour: var(--warning);
  }

  .bandwidth-chart .role-measured {
    --mark-colour: rgba(238, 195, 94, 0.6);
  }

  .bandwidth-chart .role-provisioned {
    --mark-colour: rgba(236, 234, 229, 0.3);
  }

  .bandwidth-chart .mark,
  .traffic-chart .mark {
    fill: none;
    stroke: var(--mark-colour);
    stroke-width: 1.8;
  }

  .bandwidth-chart .mark.role-percentile,
  .traffic-chart .mark.role-percentile {
    stroke-width: 2.4;
  }

  .bandwidth-chart .mark.role-mean {
    stroke-width: 2;
    stroke-dasharray: 5 3;
  }

  .bandwidth-chart .mark.role-billed,
  .bandwidth-chart .mark.role-charged {
    stroke-dasharray: 7 4;
  }

  .bandwidth-chart .mark.role-required {
    stroke-width: 1.9;
    stroke-dasharray: 7 4;
  }

  .bandwidth-chart .mark.role-measured {
    stroke-width: 1.3;
    stroke-dasharray: 3 3;
  }

  .bandwidth-chart .mark.role-provisioned {
    stroke-width: 1.4;
    stroke-dasharray: 2 3;
  }

  .bandwidth-chart .leader {
    fill: none;
    stroke: var(--mark-colour);
    stroke-width: 1;
    stroke-opacity: 0.7;
  }

  .bandwidth-chart .mark-label {
    fill: var(--mark-colour);
    font-size: 11.5px;
    font-weight: 600;
  }

  .bandwidth-chart .mark-detail {
    fill: rgba(236, 234, 229, 0.55);
    font-size: 11px;
  }

  .bandwidth-chart .ratio {
    fill: none;
    stroke: rgba(236, 234, 229, 0.6);
    stroke-width: 1.2;
  }

  .bandwidth-chart .ratio-chip {
    fill: #221e14;
    stroke: rgba(236, 234, 229, 0.28);
    stroke-width: 1;
  }

  .bandwidth-chart .ratio-label {
    fill: var(--foreground);
    font-size: 11.5px;
    font-weight: 600;
  }

  .bandwidth-chart .legend {
    fill: rgba(236, 234, 229, 0.72);
    font-size: 11.5px;
  }

  .detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    justify-content: center;
    padding: var(--space-sm);
    border-top: var(--border-thin) solid var(--foreground);
  }

  .detail-actions > button-group {
    display: contents;
  }

  .detail-actions > alert-notification,
  .detail-actions > .detail-group {
    order: 1;
    flex: 0 0 100%;
    margin: 0;
  }

  @media (max-width: 48em) {
    .detail-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .detail-actions > alert-notification,
    .detail-actions > .detail-group {
      flex: none;
    }
  }

  modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--background) 80%, transparent);
    backdrop-filter: blur(0.25rem);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-sm);
  }

  modal-overlay[data-open="true"] {
    display: flex;
  }

  modal-container {
    background: var(--background);
    border: var(--border-thin) solid var(--accent);
    border-radius: calc(var(--radius) * 2);
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-strong);
    animation: modal-enter 0.2s ease-out;
    display: flex;
    flex-direction: column;
  }

  @keyframes modal-enter {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(-0.625rem);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: var(--border-thin) solid var(--accent-light);
    background: var(--accent-subtle);
    flex-shrink: 0;
  }

  modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
  }

  modal-close:hover {
    background: var(--error-light);
    color: var(--error);
  }

  modal-close[disabled] {
    pointer-events: none;
    opacity: 0.6;
  }

  modal-content {
    padding: var(--space-lg);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  modal-footer {
    padding: var(--space-sm) var(--space-lg);
    border-top: var(--border-thin) solid var(--accent-light);
    background: var(--accent-subtle);
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-shrink: 0;
  }

  @media (max-width: 48em) {
    modal-container {
      max-width: 95vw;
      margin: var(--space-2xs);
    }

    modal-header,
    modal-content,
    modal-footer {
      padding: var(--space-sm);
    }

    modal-footer {
      flex-direction: column;
    }

    modal-footer button {
      width: 100%;
    }
  }

  summary-panel {
    display: flex;
    flex-direction: column;
    border: var(--border-thin) solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: var(--space-xl);
    overflow: hidden;
  }

  .header-buttons {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
  }

  .content {
    padding: var(--space-lg);
  }

  .cache-notice {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.875rem;
    color: var(--foreground);
    opacity: 0.8;
  }

  .cache-icon {
    font-size: 0.875rem;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  .loading-placeholder {
    display: inline-block;
    width: 2.5ch;
    height: 0.9em;
    vertical-align: baseline;
    background: var(--accent-light);
    border-radius: var(--radius);
    animation: loading-pulse 1.2s ease-in-out infinite;
  }

  @keyframes loading-pulse {
    0%, 100% {
      opacity: 0.35;
    }
    50% {
      opacity: 0.8;
    }
  }

  .stat-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    background: var(--background);
    border: var(--border-thin) solid var(--accent);
    border-radius: var(--radius);
    transition: all 0.2s ease;
    min-height: 5rem;
    max-width: 18.75rem;
    gap: var(--space-2xs);
  }

  .stat-card:hover {
    box-shadow: var(--shadow);
  }

  .stat-card.status-up {
    border-color: var(--success);
    background: linear-gradient(145deg, var(--background), var(--success-light));
  }

  .stat-card.status-down {
    border-color: var(--error);
    background: linear-gradient(145deg, var(--background), var(--error-light));
  }

  .stat-card.status-warning {
    border-color: var(--warning);
    background: linear-gradient(145deg, var(--background), var(--warning-light));
  }

  .stat-card.status-partial {
    border-color: var(--info);
    background: linear-gradient(145deg, var(--background), var(--info-light));
  }

  .stat-card .stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--foreground);
    text-align: center;
  }

  .stat-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    margin-top: auto;
  }

  .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
  }

  .stat-label {
    display: block;
    font-size: var(--text-md);
    color: var(--foreground);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    text-align: center;
  }

  @media (max-width: 48em) {
    .stats-grid {
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
      gap: var(--space-xs);
    }

    .stat-card {
      padding: var(--space-xs);
      min-height: 4.375rem;
    }

    .stat-icon {
      font-size: var(--text-body);
      width: 1.25rem;
      height: 1.25rem;
    }

    .stat-card .stat-value {
      font-size: 1.5rem;
    }

    .stat-label {
      font-size: 0.75rem;
    }
  }

  @media (max-width: 30em) {
    .stats-grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xs);
    }

    .stat-card {
      padding: var(--space-2xs);
      min-height: 3.75rem;
      gap: var(--space-3xs);
    }

    .stats-grid > .stat-card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      max-width: none;
    }

    .stat-icon {
      font-size: 0.875rem;
      width: 1rem;
      height: 1rem;
    }

    .stat-card .stat-value {
      font-size: 1.25rem;
    }

    .stat-label {
      font-size: var(--text-xs);
    }

    .header-buttons {
      align-self: stretch;
      justify-content: flex-end;
    }
  }

  .tabs-container {
    width: 100%;
  }

  .tab-buttons {
    display: flex;
    gap: var(--space-2xs);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
  }

  .tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-lg);
    border: var(--border-thick) solid var(--accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-base);
    font-family: inherit;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    transition: all 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
    user-select: none;
  }

  .tab-button:hover {
    background: var(--accent);
    color: var(--background);
  }

  .tab-button.active {
    background: var(--accent);
    color: var(--background);
  }

  .tab-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.1875rem var(--accent-light);
  }

  .tab-icon {
    font-size: 1.1em;
    line-height: 1;
  }

  .tab-label {
    font-weight: 600;
  }

  .tab-count {
    font-weight: normal;
    opacity: 0.9;
  }

  .tab-content {
    width: 100%;
  }

  .tab-panel {
    width: 100%;
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-lg);
  }

  .page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-lg);
    border: var(--border-thick) solid var(--accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-base);
    font-family: inherit;
    line-height: 1.4;
    transition: all 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
    user-select: none;
  }

  .page-button:hover:not(:disabled) {
    background: var(--accent);
    color: var(--background);
  }

  .page-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.1875rem var(--accent-light);
  }

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

  .page-gap {
    color: var(--text-secondary);
    font-size: var(--text-md);
  }

  @media (max-width: 48em) {
    .tab-button {
      padding: 0.65rem var(--space-md);
      font-size: var(--text-md);
      gap: var(--space-3xs);
    }

    .tab-buttons {
      gap: var(--space-3xs);
    }
  }

  .badge {
    display: inline-block;
    padding: var(--space-3xs) 0.6rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    border: var(--border-thin) solid;
    text-align: center;
    white-space: nowrap;
  }

  .badge-primary {
    background: var(--info-light);
    color: var(--info);
    border-color: var(--info);
  }

  .badge-secondary {
    background: var(--gray-light);
    color: var(--gray);
    border-color: var(--gray);
  }

  .badge-success {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success);
  }

  .badge-error {
    background: var(--error-light);
    color: var(--error);
    border-color: var(--error);
  }

  .badge-info {
    background: var(--info-light);
    color: var(--info);
    border-color: var(--info);
  }

  .badge-warning {
    background: var(--warning-light);
    color: var(--warning);
    border-color: var(--warning);
  }

  .badge-custom {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
  }

  .badge-purple {
    background: var(--purple-light);
    color: var(--purple);
    border-color: var(--purple);
  }

  .page-header {
    min-height: auto;
    margin-bottom: var(--space-lg);
  }

  .page-header h1 {
    margin: 0;
  }

  .page-description {
    max-width: 68rem;
    margin: var(--space-xs) 0 0;
    color: var(--text-secondary);
  }

  .section-description {
    max-width: 68rem;
    color: var(--text-secondary);
    font-size: var(--text-base);
  }

  .panel {
    border: var(--border-thin) solid var(--accent);
    border-radius: var(--radius);
    background:
      linear-gradient(180deg, var(--accent-subtle), color-mix(in srgb, var(--accent) 2%, transparent)),
      var(--background);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .panel-header {
    padding: var(--space-md) var(--space-lg) var(--space-sm);
    border-bottom: var(--border-thin) solid var(--accent);
  }

  .panel-header h2 {
    margin: 0;
  }

  .panel-header p {
    margin: 0.6rem 0 0;
    color: var(--text-secondary);
  }

  .panel-body {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }

  .panel-body > :first-child {
    margin-top: 0;
  }

  .panel-body > :last-child {
    margin-bottom: 0;
  }

  @media (max-width: 48em) {
    .panel-body {
      padding: var(--space-sm);
    }
  }

  .form-card {
    max-width: var(--form-card-max, 30rem);
    margin: 3rem auto;
  }

  .form-card.wide {
    --form-card-max: 37.5rem;
  }

  .form-card > header {
    text-align: center;
    margin-bottom: var(--space-xl);
  }

  .form-card > header h1 {
    margin-bottom: var(--space-2xs);
  }

  .form-card > header p {
    color: var(--text-secondary);
    margin: 0;
  }

  .form-card-panel {
    background: var(--bg-primary);
    padding: var(--space-xl);
    border: var(--border-thin) solid var(--text-secondary);
    border-radius: var(--radius);
  }

  .form-card-links {
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: var(--border-thin) solid var(--text-secondary);
  }

  .form-card-links p {
    margin: var(--space-2xs) 0;
    color: var(--text-secondary);
  }

  .action-row {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
  }

  .error-page .error-icon {
    font-size: 4rem;
    margin: 0;
  }

  .error-page .error-code {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 0;
  }

  .error-page .action-row {
    margin: var(--space-lg) 0;
  }

  .surface {
    padding: var(--space-md);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--bg-primary);
  }

  .callout {
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-thin) solid var(--callout-border, var(--accent));
    border-radius: var(--radius);
    background: var(--callout-bg, var(--accent-light));
    font-size: var(--text-base);
  }

  .callout p:last-child {
    margin-bottom: 0;
  }

  .callout-info {
    --callout-border: var(--info);
    --callout-bg: var(--info-light);
  }

  .callout-warning {
    --callout-border: var(--warning);
    --callout-bg: var(--warning-light);
  }

  .callout-success {
    --callout-border: var(--success);
    --callout-bg: var(--success-light);
  }

  .icon-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .icon-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    margin: 0;
    font-size: var(--text-base);
  }

  .icon-list-marker {
    font-size: var(--text-lg);
    flex-shrink: 0;
  }

  .disclosure summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
  }

  .disclosure p {
    margin: var(--space-2xs) 0 0 0;
    color: var(--text-secondary);
  }

  .step-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-primary);
    border-bottom: var(--border-thin) solid var(--border-subtle);
  }

  .step-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--text-secondary);
    font-size: var(--text-md);
    text-decoration: none;
    cursor: pointer;
  }

  .step-nav-item:hover {
    border-color: var(--accent);
    color: var(--text-primary);
  }

  .step-nav-line {
    flex: 1;
    height: var(--border-thick);
    background: var(--border-subtle);
    min-width: var(--space-sm);
  }

  @media (max-width: 48em) {
    .step-nav {
      flex-wrap: wrap;
      justify-content: center;
    }

    .step-nav-line,
    .step-nav-label {
      display: none;
    }
  }

  .step-marker {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-thick) solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    font-weight: 700;
    font-size: var(--text-base);
    flex-shrink: 0;
  }

  .step-nav-item .step-marker {
    width: 1.5rem;
    height: 1.5rem;
    border: var(--border-thin) solid currentColor;
    color: inherit;
    font-weight: 600;
    font-size: var(--text-sm);
  }

  .step-card {
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .step-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-primary);
    border-bottom: var(--border-thin) solid var(--border-subtle);
  }

  .step-card-header h2,
  .step-card-header h3 {
    margin: 0;
    font-size: var(--text-body);
  }

  .step-card-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .doc-sidebar {
    padding: var(--space-md);
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .doc-sidebar-section {
    padding-bottom: var(--space-sm);
    border-bottom: var(--border-thin) solid var(--border-subtle);
  }

  .doc-sidebar-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .doc-sidebar-section h3 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--text-base);
  }

  .cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: var(--border-thin) solid var(--accent-muted);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--accent-light), var(--bg-primary));
  }

  .cta-banner h2 {
    margin: 0 0 var(--space-2xs) 0;
  }

  .cta-banner p {
    margin: 0;
    color: var(--text-secondary);
  }

  @media (max-width: 48em) {
    .cta-banner {
      flex-direction: column;
      align-items: flex-start;
      padding: var(--space-sm);
    }
  }
}

@layer utilities {
  .text-small {
    font-size: var(--text-xs);
    font-weight: 400;
  }

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

  .text-success {
    color: var(--success);
  }

  .text-center {
    text-align: center;
  }

  .nowrap {
    white-space: nowrap;
  }

  .grow {
    flex-grow: 1;
  }
}