/*
 * App shell for the portal and admin layouts (D-05, A-01):
 *   .app            page frame, 16px outer padding
 *   .rail           left navigation (layout/rail.css)
 *   .main           content column, padding 16px 28px 32px 44px, 28px vertical rhythm; on wide
 *                   screens capped per page at .main--wide (1560px) or .main--reading (1280px),
 *                   centered in the space right of the rail (LayoutHelper#main_width)
 *   .app-header     breadcrumbs left, search + Site pill / user block right
 *   .page-head      H1 + description + right-aligned actions (shared/_page_head)
 *   .mobile-header  < 768 only: logo + round buttons (M-01) or a page title (M-07)
 */
@layer layout {
  .app {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16px;
    background: var(--color-bg);
    color: var(--color-text);
  }

  .main {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: var(--main-padding);
  }

  .main--roomy { gap: 36px; }

  /* Wide screens (UI spec §5, ARCHITECTURE §9): the column stops growing at its tier's cap, padding
     included, and the auto margins center it in the space right of the rail. Wide is the default
     (dashboards, tables, libraries); reading is for detail, form and single-column pages. Up to
     1440px the column is narrower than either cap, so these rules change nothing there. */
  @media (min-width: 1441px) {
    .main { margin-inline: auto; }
    .main--wide { max-width: var(--main-width-wide); }
    .main--reading { max-width: var(--main-width-reading); }
  }

  /* Header row ------------------------------------------------------------------------------ */
  /* The row never scrolls sideways (768px and up). It is a size container: the header search takes
     its width from the row (components/search.css), leaving --header-crumbs-room for breadcrumbs
     next to the search and --header-end-room for the user block ("Elena Marsh · Riverside" +
     avatar). The breadcrumbs take whatever is left and shorten their titles with an ellipsis.
     Containment makes the row a stacking context, so it sits above the page for the user menu to
     overlap it. */
  .app-header {
    --header-end-room: 250px;
    --header-crumbs-room: 240px;
    position: relative;
    z-index: 10;
    container-type: inline-size;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 46px;
  }
  .app-header__end {
    margin-left: auto;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .header-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
  }
  /* Portal header (D-20, E-01): the block is a link to the profile. */
  a.header-user { border-radius: var(--radius-pill); text-decoration: none; }
  a.header-user:hover { color: inherit; }

  .header-user__name {
    min-width: 0;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-neutral-700);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-user__button {
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
  }

  /* Breadcrumbs ------------------------------------------------------------------------------ */
  /* The crumbs fill the header's free width (flex 1 1 0) and shorten with an ellipsis when titles
     do not fit. The section (first crumb) and the chevrons never shrink. Middle crumbs give way
     first, so a short current crumb ("Edit", "Assign") stays whole; a long current title is capped
     at 60% of the row. Without middle crumbs (Section › Title) the current title gives way. */
  .crumbs {
    flex: 1 1 0;
    container-type: inline-size;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13.5px;
    color: var(--color-neutral-700);
  }
  .crumbs > * { flex: none; }
  .crumbs > a,
  .crumbs__current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .crumbs > a:first-child { overflow: visible; }
  .crumbs > a:not(:first-child) { flex: 0 1 auto; min-width: 1.5em; }
  .crumbs__current { max-width: 60cqw; }
  .crumbs:not(:has(> a:not(:first-child))) > .crumbs__current { flex: 0 1 auto; min-width: 0; max-width: none; }
  .crumbs a { color: inherit; }
  .crumbs a:hover { color: var(--color-text); }
  .crumbs .icon { font-size: 14px; }
  .crumbs__current {
    font-weight: 700;
    color: var(--color-text);
  }

  /* Page head -------------------------------------------------------------------------------- */
  .page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }

  .page-head__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 720px;
    min-width: 0;
  }
  .page-head--detail .page-head__text { gap: 12px; max-width: none; }

  /* Breadcrumbs as an eyebrow (shared/_page_head crumbs:; A-25, A-28…A-30, D-23…D-25): a line
     across the page 8px above the H1, 13.5px/600, blue links and the current page in the crumbs'
     neutral. The line is as wide as the page (the head's actions sit below it), so a title that
     wraps beside the actions does not cut it; a title longer than the page shortens with an
     ellipsis as in the header row. Phones get a back button in the header row instead. */
  .page-head-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .page-head-group > .crumbs {
    flex: none;
    font-weight: 600;
  }
  .page-head-group > .crumbs a { color: var(--color-blue); }
  .page-head-group > .crumbs a:hover { color: var(--color-blue-deep); }
  .page-head-group > .crumbs .crumbs__current {
    font-weight: 600;
    color: inherit;
  }
  .page-head-group .page-head--detail .page-head__text { gap: 8px; }

  .page-head__title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
  }
  .page-head--detail .page-head__title { font-size: 38px; }
  .page-head--display .page-head__title { font-size: 54px; line-height: 1.05; }

  .page-head__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-neutral-800);
    text-wrap: pretty;
  }

  .page-head__meta { display: flex; flex-wrap: wrap; gap: 8px; }

  .page-head__actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
  }

  /* Section heading row (e.g. "Recent updates" + "View all") */
  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .section-head__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }

  /* Mobile header (hidden >= 768) ---------------------------------------------------------- */
  .mobile-header { display: none; }

  .mobile-header__logo img { width: auto; height: 34px; }

  /* Body line-height (1.55): a title-only row is 53px (M-06, M-07). */
  .mobile-header__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.55;
  }

  .mobile-header__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
  }

  /* Laptop 1024–1199: same layout, compressed whitespace. */
  @media (max-width: 1199px) {
    .app { --main-padding: 16px 20px 28px 28px; }
  }

  /* Tablet 768–1023: rail collapses to icons (layout/rail.css); the admin header keeps the avatar
     (the account menu) and drops the name, like the rail drops its labels. */
  @media (max-width: 1023px) {
    .app { --main-padding: 12px 8px 24px 20px; }
    .page-head { flex-wrap: wrap; }
    .app-header { --header-end-room: 70px; }
    .header-user__name { display: none; }
  }

  /* Mobile < 768: no rail; header row + content + bottom tab bar or action sheet. */
  @media (max-width: 767px) {
    .app {
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      --main-padding: 4px 18px 24px;
    }

    .main { gap: 16px; }

    .app-header { display: none; }

    /* Every M-xx / AM-xx header row: padding 6px 18px 10px — 50px with the logo alone, 60px with a
       44px round button — and the content 4px below it. */
    .mobile-header {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 50px;
      padding: max(6px, env(safe-area-inset-top)) 18px 10px;
    }

    .page-head { flex-direction: column; align-items: stretch; gap: 14px; }
    .page-head-group > .crumbs { display: none; }
    .page-head__title { font-size: 26px; line-height: 1.08; }
    .page-head--detail .page-head__title { font-size: 26px; }
    .page-head--display .page-head__title { font-size: 30px; line-height: 1.08; }
    .page-head__desc { font-size: 14px; }
    .page-head__actions { justify-content: flex-start; }

    .section-head__title { font-size: 19px; }
  }
}