@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--archived { background: #ffe5e2; color: #a93a32; }

  .page-status-menu {
    display: inline-block;
  }

  .page-status-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    cursor: pointer;
  }

  .page-status-menu__icon {
    --icon-size: 0.85rem;
  }

  .page-status-menu__item.selected {
    position: relative;
    background-color: var(--dropdown-menu-selected-color);
    font-weight: 700;
  }

  .page-status-menu__item.selected::after {
    position: absolute;
    top: 5px;
    right: 5px;
    content: "\2713";
  }

  .page-navigation-switch {
    display: inline-flex;
    align-items: center;
    margin: 0;
  }

  .pages-table__not-applicable {
    color: #9ca3af;
  }

  .pages-table__publication-date {
    white-space: nowrap;
  }

  .pages-table__muted {
    color: #9ca3af;
  }

  /* --- 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); }
  /* The turbo-frame wrapping dialog content is inline by default, which
     stops a width on the inner div from propagating up to the <dialog>
     element. Size the dialog directly when it contains a page-settings
     form so it isn't shrink-wrapped to text width. */
  dialog:has(.dialog-content--page-settings) {
    width: min(56rem, 92vw);
  }
  .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__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .site-show__title h1 {
    margin: 0;
  }

  .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;
  }

  .editor-list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #eef1f0;
  }

  .editor-list__item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid #eef1f0;
    transition: background-color 120ms ease;
  }

  .editor-list__item:hover {
    background: #f7faf9;
  }

  .editor-list__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .editor-list__name {
    font-weight: 700;
    color: #102a27;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .editor-list__email {
    color: #5b6870;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .editor-list__scope {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
  }

  .editor-scope {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .editor-scope--all {
    background: #e1f0ee;
    color: #0d766d;
    --icon-size: 0.95rem;
  }

  .editor-scope--locale {
    background: #eef1f0;
    color: #4b5d57;
    letter-spacing: 0.04em;
  }

  .editor-list__actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
  }

  .editor-list__add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.5rem 0.85rem;
    border: 1px dashed #cdd6d2;
    border-radius: 8px;
    color: #4b5d57;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    --icon-size: 1.05rem;
  }

  .editor-list__add:hover,
  .editor-list__add:focus-visible {
    border-color: #0d766d;
    border-style: solid;
    color: #0d766d;
    background: #f7faf9;
    outline: none;
  }

  .editor-form__all-locales-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    width: auto;
    height: auto;
    min-height: var(--switch-height);
    margin: 0.2rem 0 0.85rem;
  }

  .editor-form__all-locales-switch .switch-control__track {
    position: relative;
    flex: 0 0 auto;
    width: var(--switch-width);
    height: var(--switch-height);
  }

  .editor-form__all-locales-switch .switch-control__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    color: #34423e;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .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;
  }

  .icon-action--publish {
    color: #0d766d;
  }

  .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: flex-start;
    gap: 0.5rem;
    font-weight: 600;
  }

  .pages-table__title-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .pages-table__title-link {
    color: inherit;
    text-decoration: none;
  }

  .pages-table__title-link:hover {
    color: var(--primary);
    text-decoration: none;
  }

  .pages-table__path {
    display: inline-block;
    margin-top: 0.2rem;
    color: #5b6870;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .page-locale-statuses {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .page-locale {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
  }

  .page-locale:hover,
  .page-locale:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .page-locale--published { background: #2f8b57; }
  .page-locale--draft { background: #b57910; }
  .page-locale--missing { background: #b84b43; }

  .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; }

  .path-suggestion-action {
    display: flex;
    justify-content: flex-end;
    margin: -0.45rem 0 0.75rem;
  }

  .path-suggestion-action .btn {
    gap: 0.35rem;
    white-space: nowrap;
  }

  .seo-suggestion-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: -0.45rem 0 0.75rem;
  }

  .seo-suggestion-action .btn {
    gap: 0.35rem;
    white-space: nowrap;
  }

  .seo-suggestion-status {
    margin: 0;
    min-height: 1.1rem;
  }

  .locales-field__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .locales-field__header legend {
    margin: 0;
  }

  .locale-settings-group {
    padding-top: 0.75rem;
    border-top: 1px solid #eef1f0;
  }

  .locale-settings-group:first-of-type {
    padding-top: 0;
    border-top: 0;
  }

  .locale-settings-group h3 {
    margin: 0 0 0.5rem;
    color: #5b6870;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* 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;
    }

    .editor-list__item {
      grid-template-columns: auto 1fr auto;
      grid-template-areas:
        "avatar info actions"
        "avatar scope actions";
      row-gap: 0.2rem;
    }

    .editor-list__item > .blitz-avatar { grid-area: avatar; }
    .editor-list__info { grid-area: info; }
    .editor-list__scope { grid-area: scope; justify-content: flex-start; }
    .editor-list__actions { grid-area: actions; }
  }
}