@layer components {
  .sites-dashboard__head {
    margin-bottom: 1.5rem;
  }

  .sites-dashboard__lead {
    color: #5b6870;
    margin-top: 0.25rem;
  }

  .site-card {
    margin-bottom: 1.25rem;
  }

  .site-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .site-card__name {
    margin: 0;
    font-size: 1.15rem;
  }

  .site-card__meta {
    margin: 0.2rem 0 0;
    color: #5b6870;
    font-size: 0.9rem;
  }

  .site-card__empty {
    color: #5b6870;
  }

  .pages-table {
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
  }

  .pages-table th,
  .pages-table td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
  }

  .pages-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
  }

  .pages-table tr:last-child td {
    border-bottom: 0;
  }

  .pages-table__actions {
    text-align: right;
    white-space: nowrap;
  }

  .pages-table__link {
    margin-left: 0.75rem;
    font-weight: 600;
    text-decoration: none;
  }

  .badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: capitalize;
    background: #eef1f0;
    color: #5b6870;
  }

  .badge--published { background: #e1f3e6; color: #2d6f42; }
  .badge--draft { background: #fff0cd; color: #9a6400; }
  .badge--hidden { background: #e2eef8; color: #245d8f; }
  .badge--archived { background: #ffe5e2; color: #a93a32; }

  /* --- Admin management pages --- */
  .admin-page--narrow { max-width: 38rem; }

  .admin-page__back {
    margin-bottom: 0.5rem;
  }

  .admin-page__back a {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.9rem;
  }

  .button {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    border-radius: 8px;
    background: #0d766d;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 0;
  }

  .button:hover { background: #094f49; }

  .button--danger { background: #a93a32; }
  .button--danger:hover { background: #7a1f19; }

  .sites-table__name { font-weight: 700; }

  /* Content rendered inside a Blitz dialog */
  .dialog-content { min-width: min(34rem, 80vw); }
  .dialog-content h2 { margin-top: 0; }

  .sites-dashboard__head,
  .site-show__head,
  .panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .site-show__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: #5b6870;
  }

  .site-show__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .site-show__title h1 {
    margin: 0;
  }

  .site-show__locale {
    color: #3f4d48;
    font-weight: 700;
  }

  .site-show__locale.is-default {
    color: #0d766d;
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }

  .site-show__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .site-pages {
    margin-top: 1.5rem;
  }

  .site-pages__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0 0 1rem;
  }

  .panel {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
  }

  .panel__lead { color: #5b6870; }

  .panel__note {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.9rem;
  }

  .panel__note--warn {
    background: #fff0cd;
    color: #7a5200;
    border: 1px solid #e9cf8a;
  }

  .panel__head { margin-bottom: 0.75rem; }

  .site-access__grid {
    display: grid;
    grid-template-columns: minmax(16rem, 0.85fr) minmax(24rem, 1.15fr);
    gap: 1rem;
  }

  .site-access__group h3 {
    margin: 0 0 0.35rem;
    color: #6b7280;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .site-access__links,
  .site-access__domains {
    display: grid;
    gap: 0.35rem;
  }

  .site-access__domains {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-access__domains li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .site-access__add-domain {
    display: inline-block;
    margin-top: 0.55rem;
    color: #5b6870;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
  }

  .site-access__add-domain:hover {
    color: #0d766d;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .site-access__link {
    font-weight: 700;
    text-decoration: none;
  }

  .site-access__meta,
  .site-access__routing {
    color: #5b6870;
    font-size: 0.86rem;
  }

  .site-access__meta {
    margin-left: 0.4rem;
  }

  .site-access__domain-actions {
    display: flex;
    align-items: baseline;
    flex: 0 0 auto;
    gap: 0.6rem;
    white-space: nowrap;
  }

  .site-details {
    padding: 0.85rem 1.25rem;
  }

  .site-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    font-weight: 800;
  }

  .site-details__count {
    color: #5b6870;
    font-size: 0.86rem;
    font-weight: 700;
  }

  .icon-action {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #4b5d57;
    cursor: pointer;
    text-decoration: none;
    --icon-size: 1.15rem;
  }

  .icon-action:hover,
  .icon-action:focus-visible {
    background: #eef3f1;
    color: #0d766d;
    outline: none;
  }

  .icon-action--danger {
    color: #a93a32;
  }

  .button_to:has(.icon-action) {
    display: inline-grid;
  }

  .page-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid #e5e7eb;
  }

  .page-type-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: -1px;
    padding: 0.55rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #5b6870;
    font-weight: 700;
    text-decoration: none;
  }

  .page-type-tabs__tab:hover {
    color: #0d766d;
    background: #f4f7f6;
  }

  .page-type-tabs__tab.is-active {
    border-color: #e5e7eb;
    border-bottom-color: #fff;
    background: #fff;
    color: #102a27;
  }

  .page-type-tabs__count {
    min-width: 1.45rem;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: #eef1f0;
    color: #5b6870;
    font-size: 0.76rem;
    line-height: 1.35;
    text-align: center;
  }

  /* File-guidance checklist */
  .file-list { list-style: none; margin: 0.75rem 0 0; padding: 0; }

  .file-list__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f0f3f2;
  }

  .file-list__status {
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 800;
  }

  .is-present .file-list__status { background: #e1f3e6; color: #2d6f42; }
  .is-missing .file-list__status { background: #ffe5e2; color: #a93a32; }

  .file-list__label { min-width: 9rem; font-weight: 600; }

  .file-list__path {
    color: #5b6870;
    font-size: 0.85rem;
    word-break: break-all;
  }

  .is-missing .file-list__path { color: #a93a32; }

  /* Per-page partial indicator inside the pages table */
  .page-file {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #5b6870;
  }

  .page-file.is-missing { color: #a93a32; }
  .page-file.is-present .page-file__status { color: #2d6f42; }
  .page-file__status { font-weight: 800; }

  /* Drag-and-drop reordering of pages */
  .pages-table__row[draggable="true"] { cursor: grab; }
  .pages-table__row.is-dragging { opacity: 0.5; cursor: grabbing; }

  .pages-table__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
  }

  .pages-table__path {
    color: #5b6870;
    font-size: 0.85rem;
    font-weight: 400;
  }

  .drag-handle {
    color: #aeb9b4;
    cursor: grab;
    user-select: none;
    font-size: 1rem;
    line-height: 1;
  }

  .domain-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
  }

  .domain-form input[type="text"],
  .domain-form select {
    padding: 0.35rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
  }

  /* Admin forms */
  .admin-form { margin-top: 1rem; }

  /* Hints sit right under their field — pull up to cancel the field's 1rem
     bottom margin. */
  .form-hint {
    margin: -0.65rem 0 0.85rem;
    color: #6b7280;
    font-size: 0.85rem;
  }

  .form-hint + .form-hint {
    margin-top: -0.6rem;
  }

  .form-hint--warn { color: #9a6400; }

  .locales-field {
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  .locales-field__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .locale-check {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }

  .admin-danger {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #f0d4d0;
  }

  .admin-danger__button,
  .pages-table__link--danger {
    background: none;
    border: 0;
    color: #a93a32;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
  }

  .pages-table__link--danger { margin-left: 0.75rem; }

  @media (max-width: 900px) {
    .site-access__grid {
      grid-template-columns: 1fr;
    }

    .site-access__domains li {
      align-items: flex-start;
      flex-direction: column;
      gap: 0.35rem;
    }
  }
}