/*
 * M1 Director Home (D-05, S-01, M-01, M-09) and Recent updates "View all".
 *   .home              page column (36px rhythm; 16px on phones, 14px for M-09)
 *   .home-hero         greeting + hero search (two columns)
 *   .home-actions      Required actions: 4 cards (2 on phones); #required-actions:target shows all
 *   .home-caught-up    S-01 "You're all caught up" (.home--caught-up: one-line greeting, no hero
 *                      search or Quick access, 28px rhythm; M-09 also hides the Site pill)
 *   .home-update       Recent updates row (date disc, title, summary, scope)
 *   .home-quick        Quick access tiles
 *   .home-updates__error  the S-08 notice when Recent updates cannot load (m1_updates_frame_controller)
 */
@layer pages {
  .home {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  /* Hero ------------------------------------------------------------------------------------- */
  .home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
    padding-top: 20px;
  }

  .home-hero__greeting {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .home-hero__context {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .home-hero__date {
    color: var(--color-neutral-700);
    font-size: 13.5px;
    font-weight: 600;
  }

  .home-hero__title {
    margin: 0;
    font-size: 54px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  /* Required actions ------------------------------------------------------------------------- */
  .home-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-margin-top: 16px;
  }

  .home-actions__head {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .home-actions__title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .home-actions__hint {
    color: var(--color-neutral-700);
    font-size: 13.5px;
  }

  .home-actions__all { margin-left: auto; }

  .home-actions__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .home-action {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 252px;
    padding: 20px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    --action-tone: var(--color-neutral-800);
  }
  .home-action--overdue { background: var(--color-err-soft); --action-tone: var(--color-err-text); }
  .home-action--due_soon { --action-tone: var(--color-warn-text); }
  .home-action--pending { --action-tone: var(--color-accent-800); }
  /* Change request 7: the Director's own credentials (an expired one reads like an overdue item). */
  .home-action--expired { background: var(--color-err-soft); --action-tone: var(--color-err-text); }
  .home-action--missing { --action-tone: var(--color-err-text); }
  .home-action--expiring { --action-tone: var(--color-warn-text); }

  .home-action__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .home-action__icon {
    display: flex;
    flex: none;
    color: var(--action-tone);
    font-size: 20px;
  }

  .home-action__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .home-action__kind {
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }

  .home-action__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  .home-action__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--color-neutral-800);
    font-size: 13px;
  }

  .home-action__due {
    color: var(--action-tone);
    font-weight: 700;
  }

  .home-action__cta {
    display: flex;
    margin-top: auto;
  }
  .home-action__cta .btn { flex: 1; }

  /* More than four (two on phones) wait behind "View all" / "See N more". */
  @media (min-width: 768px) {
    .home-action--extra { display: none; }
  }

  .home-actions:target .home-action { display: flex; }
  .home-actions:target .home-actions__all,
  .home-actions:target .home-actions__more { display: none !important; }

  /* S-01 all caught up */
  .home--caught-up { gap: 28px; }
  .home--caught-up .home-hero { grid-template-columns: minmax(0, 1fr); }
  .home--caught-up .home-hero__title { line-height: 1.08; }
  .home--caught-up .home-columns { grid-template-columns: minmax(0, 1fr); }

  .home-caught-up {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    border-radius: var(--radius-card);
    background: var(--color-accent-2-100);
  }

  .home-caught-up__icon {
    width: 64px;
    height: 64px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-2-700);
    color: var(--color-bg);
    font-size: 30px;
  }

  .home-caught-up__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .home-caught-up__title {
    color: var(--color-accent-2-900);
    font-size: 22px;
    font-weight: 700;
  }

  .home-caught-up__body {
    color: var(--color-accent-2-800);
    font-size: 15px;
  }

  /* Recent updates + Quick access ------------------------------------------------------------ */
  .home-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }

  .home-updates turbo-frame,
  .home-updates__loading,
  .home-updates__error {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .home-updates__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .home-updates__title,
  .home-quick__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .home-updates__empty {
    color: var(--color-neutral-700);
    font-size: 15px;
    line-height: 1.55;
  }

  .home-updates__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .home-update {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-radius: var(--radius-row);
    color: var(--color-text);
    text-decoration: none;
  }
  a.home-update:hover { color: var(--color-text); }
  a.home-update:hover .home-update__title { text-decoration: underline; }

  .home-update__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .home-update__title {
    font-size: 15px;
    font-weight: 700;
  }

  .home-update__meta {
    color: var(--color-neutral-700);
    font-size: 13px;
  }

  /* The full list ("View all") sits in surface capsules like other portal lists. */
  .home-updates__list--page { gap: 6px; }
  .home-updates__list--page .home-update {
    padding: 10px 20px 10px 10px;
    background: var(--color-surface);
  }
  .home-updates__list--page .scope-badge:not(.scope-badge--site) { background: var(--color-bg); }

  /* Loading (M-09): flower + "Loading…" over fading skeleton rows */
  .home-updates__loading .loader__label {
    color: var(--color-neutral-700);
    font-size: 14px;
    font-weight: 600;
  }

  .home-skeletons {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .home-skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-row);
    background: var(--color-surface);
  }
  .home-skeleton:nth-child(2) { opacity: 0.7; }
  .home-skeleton:nth-child(3) { opacity: 0.45; }

  .home-skeleton__disc {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--color-neutral-300);
  }

  .home-skeleton__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .home-skeleton__lines .skeleton { width: 75%; height: 12px; }
  .home-skeleton__lines .skeleton--meta { width: 45%; height: 10px; }

  .home-quick {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .home-quick__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .home-quick__item {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 64px;
    padding: 0 20px 0 12px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
  }
  .home-quick__item:hover { background: var(--color-neutral-300); color: var(--color-text); }

  .home-quick__icon { font-size: 19px; }

  .home-quick__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .home-quick__label {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
  }

  .home-quick__hint {
    color: var(--color-neutral-700);
    font-size: 12.5px;
    line-height: 1.5;
  }

  .home-quick__arrow {
    display: flex;
    flex: none;
    color: var(--color-neutral-700);
    font-size: 18px;
  }

  /* Laptop / tablet ------------------------------------------------------------------------- */
  /* The hero search sits under the greeting below 1200px (beside it, the placeholder would clip). */
  @media (max-width: 1199px) {
    .home-hero {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
    }
    .home-hero__title { font-size: 46px; }
    .home-actions__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-action { min-height: 220px; }
    .home-columns { gap: 28px; }
  }

  @media (max-width: 1023px) {
    .home-columns { grid-template-columns: minmax(0, 1fr); }
  }

  /* Phones (M-01, M-09) --------------------------------------------------------------------- */
  @media (max-width: 767px) {
    .home { gap: 16px; }
    .home--caught-up { gap: 14px; } /* M-09 (M-01 keeps 16px) */

    .home-hero {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      padding-top: 2px; /* M-01: the Site pill sits 6px under the header (the shell gives 4px) */
    }
    .home-hero__greeting { gap: 6px; }
    .home--caught-up .home-hero { padding-top: 0; } /* M-09: 4px */
    .home--caught-up .home-hero__context { display: none; } /* M-09 */
    .home-hero .site-pill {
      height: 28px;
      padding: 0 10px;
      font-size: 12px;
    }
    .home-hero .site-pill .icon { font-size: 13px; }
    .home-hero__title {
      font-size: 30px;
      line-height: 1.08;
    }

    .home-actions { gap: 16px; }
    .home-actions__head { gap: 10px; margin-top: 4px; }
    .home-actions__title { font-size: 19px; }
    .home-actions__head .count-badge {
      min-width: 24px;
      height: 24px;
      padding: 0 8px;
      font-size: 12px;
    }

    .home-actions__cards {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    .home-action {
      min-height: 0;
      gap: 10px;
      padding: 16px 18px;
      border-radius: 24px;
    }
    .home-action__top { justify-content: flex-start; }
    .home-action__kind { font-size: 11px; }
    .home-action__title { font-size: 17px; letter-spacing: 0; }
    .home-action__due--short { font-size: 13px; }
    .home-action__cta { margin-top: 0; }
    .home-action--extra-mobile { display: none; }

    /* 44px hit targets with the text where it was */
    .home-actions__more,
    .home-updates__all {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 8px;
    }
    .home-actions__more { align-self: center; margin: -11px 0; }
    .home-updates__head { align-items: center; }
    .home-updates__all { margin: -12px -8px; }

    .home-caught-up {
      gap: 14px;
      padding: 20px;
      border-radius: 24px;
    }
    .home-caught-up__icon {
      width: 48px;
      height: 48px;
      font-size: 22px;
    }
    .home-caught-up__text { gap: 2px; }
    .home-caught-up__title { font-size: 17px; }
    .home-caught-up__body { font-size: 13px; }

    .home-columns { gap: 16px; }
    .home-updates turbo-frame,
    .home-updates__loading,
    .home-updates__error { gap: 14px; }
    .home-updates__loading .loader { padding: 0; }
    .home-updates__title { font-size: 19px; }
    .home-update { gap: 12px; }
    .home-update .scope-badge { display: none; }
    .home-updates__list--page .home-update { padding: 10px 14px 10px 10px; }

    /* Recent updates "View all": the mobile header carries the title. */
    .updates-head { display: none; }
  }
}