/* ============================================================================
   LAYOUT — Shell structures: NYC bar, breadcrumb, page grid, wizard, dashboard
   ============================================================================ */

/* ── NYC Top Bar ────────────────────────────────────────────────────────────── */
.nyc-bar {
  background: var(--nyc-dark);
  color: var(--text-inverse);
  font-family: var(--font-ui);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.nyc-bar__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-3xl);
  font-size: var(--font-size-sm);
}

.nyc-bar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-inverse);
  text-decoration: none;
}
/* Suppress the global a:hover rule (red color + underline) for the
   NYC top-bar logo link. The chrome bar is brand chrome, not a
   visited-link surface — hovering should leave it visually inert. */
.nyc-bar__logo:hover,
.nyc-bar__logo:hover .nyc-bar__tagline {
  color: var(--text-inverse);
  text-decoration: none;
}

.nyc-bar__logo-nyc {
  background: var(--text-inverse);
  color: var(--nyc-dark);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xs);
  padding: 2px 5px;
  letter-spacing: 0.05em;
}

.nyc-bar__tagline {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
}

.nyc-bar__lang {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-inverse);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--font-size-sm);
}

/* ── Header / Breadcrumb Bar ────────────────────────────────────────────────── */
.page-header {
  /* Deeper rose than the body gradient so the breadcrumb + profile bar
     reads as distinct chrome above the page rather than dissolving
     into the gradient start (#FDDFEA). Token defined in tokens.css. */
  background: var(--page-pink-deep);
}

.page-header__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-3xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
  min-height: 20px;
}

.breadcrumb a {
  color: var(--text-link);
}

.breadcrumb__separator {
  color: var(--text-muted);
  margin: 0 2px;
}

.breadcrumb__current {
  color: var(--text-primary);
}

/* ── User Navigation ────────────────────────────────────────────────────────── */
.user-nav {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  font-size: var(--font-size-sm);
  position: relative;
}

.user-nav a {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.user-nav__profile {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.user-nav__icon {
  /* No wrapper background — account_circle (filled) already draws its own
     outlined circle around the person silhouette. Adding another circle
     here produced a double-circle look. The icon renders in body black,
     which has enough contrast against the pink page header. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}
.user-nav__icon .material-symbols-outlined {
  font-size: 28px;
  color: var(--text-primary);
}

/* ── User Dropdown ──────────────────────────────────────────────────────────── */
.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--surface-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  min-width: 240px;
  padding: var(--space-sm) 0;
  z-index: var(--z-dropdown);
  display: none;
}

.user-dropdown.is-open {
  display: block;
}

.user-dropdown__item {
  display: block;
  padding: var(--space-md) var(--space-lg);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-weight: var(--font-weight-medium);
}

.user-dropdown__item:hover {
  background: var(--surface-hover);
  text-decoration: none;
}

.user-dropdown__divider {
  border-top: 1px dotted var(--border-medium);
  margin: var(--space-sm) 0;
}

/* ── Main Content Area ──────────────────────────────────────────────────────── */
.page-body {
  /* Pink → blue vertical gradient (see --page-gradient in tokens.css).
     Fixed background-attachment so the gradient spans the viewport
     regardless of scroll position — the body grows taller than the
     viewport on long dashboards and we don't want the gradient to
     repeat or restart per scroll. */
  background: var(--page-gradient);
  background-attachment: fixed;
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
}

/* Full-width layout */
.layout-full {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-3xl);
}

/* ── Dashboard Layout (3-column) ────────────────────────────────────────────── */
.layout-dashboard {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-3xl);
  display: grid;
  /* minmax(0, 1fr) — NOT a bare 1fr. Bare 1fr is shorthand for
     minmax(auto, 1fr), where the `auto` floor resolves to the column's
     min-content. If a child (e.g. a results-table row with long unwrappable
     content) has min-content wider than its fair share, the grid track
     grows past 1fr and pushes the whole layout past max-width — breaking
     alignment with the page-header above. minmax(0, 1fr) pins the floor
     to 0 so the column stays inside its fair share and inner overflow is
     handled by the child (e.g. .results-table-wrap's overflow-x: auto). */
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--right-cta-width);
  gap: var(--space-2xl);
}
.layout-dashboard.layout-dashboard--no-ctas {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.layout-dashboard__sidebar {
  /* left sidebar nav */
}

.layout-dashboard__main {
  /* center content */
}

.layout-dashboard__ctas {
  /* right column CTAs */
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ── Wizard Layout (2-column) ───────────────────────────────────────────────── */
.layout-wizard {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  /* No right padding: the stepper column already sits flush at the right
     edge of the max-width band. Reserving 40px of page padding past it
     just stole that space from the content column's width budget — which
     was being charged downstream on the doc-review Action cell. The grid
     gap (--space-2xl) between content card and stepper still provides the
     visual breathing room. Restored at ≤1024px where the stepper moves
     on top of the content. */
  padding: var(--space-2xl) 0 var(--space-2xl) var(--space-3xl);
  display: grid;
  /* minmax(0, 1fr) — see the equivalent comment on .layout-dashboard above.
     Critical on the doc-review step: when the user takes action on a
     flagged row, the Action cell content changes from "—" to "Different
     paystub uploaded / Change", widening the table's min-content. A bare
     1fr would let that widen the grid track past max-width, shifting the
     whole content card and breaking alignment with the breadcrumb above. */
  grid-template-columns: minmax(0, 1fr) var(--stepper-width);
  gap: var(--space-2xl);
}

.layout-wizard__content {
  background: var(--surface-white);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-3xl) var(--space-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}

/* Page-level button bar — anchored to the bottom of the wizard's
   content card AND guaranteed a generous gap above content. Two-part
   fix:
     1. .layout-wizard__content::after is a zero-content flex item
        with flex-grow: 1, which consumes any leftover vertical space
        in the column. On short pages, this absorbs the gap and pushes
        the bar to the bottom of the 60vh card. On long pages where
        content fills (or exceeds) 60vh, the spacer collapses to 0.
     2. The bar's own margin-top: var(--space-3xl) guarantees a
        minimum gap above the bar EVEN when the spacer collapses, so
        long pages never let the bar crowd the last content element.
   The spacer sits AFTER the bar in DOM order (CSS ::after pseudo is
   always last) but the bar's order: 1 makes it render last in flex
   layout, so the spacer effectively renders BETWEEN content and bar.
   Scoped to DIRECT children only — descendant-matching would catch
   any section-level button-bar inside content panels too. */
.layout-wizard__content::after {
  content: '';
  flex-grow: 1;
  min-height: 0;
  order: 0;
}
.layout-wizard__content > .button-bar {
  margin-top: var(--space-3xl);
  order: 1;
}

.layout-wizard__stepper {
  /* Sticky so the progress card and Back-to-tasks affordance stay
     visible while the user scrolls through a long step / hub. 40px
     viewport offset matches the spacing the breadcrumb wants above
     it. align-self: start is required for sticky to fire inside a
     CSS grid (otherwise the item stretches to fill the column and
     never crosses its sticky threshold). */
  position: sticky;
  top: var(--space-2xl);
  align-self: start;
  /* Padding-top removed — the rail's first child (the progress card
     in task-list mode, or the linear stepper itself) now starts at
     the same Y as the content card next to it. Both grid items
     share the wrapper's top edge so their visual tops align. */
}

/* ── Button Bar (wizard footer) ─────────────────────────────────────────────── */
/* Standard order: [ ← Previous ] [ Cancel ] ......... [ Save for Later ] [ Next → ]
   Arrow-bearing buttons (← Previous, Next →) sit on the extremes so the
   directional cues bracket the bar. Markup is centralized in
   js/components/button-bar.js — never write button-bar HTML inline in a page. */
.button-bar {
  display: flex;
  align-items: center;
  padding: var(--space-lg) 0 0;
  /* Generous breathing room above every button-bar — whether it's the
     wizard page footer or a section-level Cancel/Save inside a panel.
     The bar should never collide visually with the last form field
     before it. */
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--border-light);
  gap: var(--space-2xl);
}
/* Section variant — used inside content panels (e.g. the income-details
   Cancel/Save row). Same generous top margin as the wizard footer so
   the spacing convention is identical everywhere this component lands. */
.button-bar--section {
  padding-top: var(--space-lg);
}

/* Inner-group gap: --space-2xl (32px). Cancel and Save for Later use .btn--text
   with zero horizontal padding, so an extra-generous gap is needed to keep
   them from visually colliding with the outlined/filled neighbor. */
.button-bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.button-bar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface-muted);
  padding: var(--space-2xl) var(--space-2xl);
  border-top: 1px solid var(--border-light);
  font-family: var(--font-ui);
}

.site-footer__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-3xl);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
}

.site-footer__brand {
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xl);
}

.site-footer__copy {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.site-footer__links {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
}

.site-footer__links a {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* ============================================================================
   RESPONSIVE — Progressive layout degradation below 1736px
   ============================================================================ */

/* ── ≤1280px: tighten padding, reduce sidebar widths ────────────────────────── */
@media (max-width: 1280px) {
  .nyc-bar__inner,
  .page-header__inner {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }

  .layout-full,
  .layout-dashboard,
  .layout-wizard {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }

  /* Re-assert the wizard's zero right padding (the shared rule above sets
     it back to space-2xl). Same reasoning as the default rule. */
  .layout-wizard {
    padding-right: 0;
  }

  .layout-dashboard {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--right-cta-width);
    gap: var(--space-xl);
  }
}

/* ── ≤1024px: collapse dashboard CTA column, wizard stepper on top ──────────── */
@media (max-width: 1024px) {
  .layout-dashboard {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: var(--space-lg);
  }

  /* CTAs stack below main content */
  .layout-dashboard__ctas {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .layout-wizard {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    /* Stepper has moved on top of the content; symmetric padding is back
       to looking right around the (now single-column) content card. */
    padding-right: var(--space-2xl);
  }

  /* Stepper moves above content on tablet */
  .layout-wizard__stepper {
    order: -1;
    padding-top: 0;
  }

  .layout-wizard__stepper .stepper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
  }

  .layout-wizard__stepper .stepper__item {
    padding: var(--space-xs) 0;
  }

  /* Hide connector lines in horizontal mode */
  .layout-wizard__stepper .stepper__item::after {
    display: none;
  }

  .layout-wizard__content {
    min-height: 50vh;
  }
}

/* ── ≤768px: mobile — single column everything ──────────────────────────────── */
@media (max-width: 768px) {
  .nyc-bar__inner,
  .page-header__inner {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .layout-full,
  .layout-dashboard,
  .layout-wizard {
    padding: var(--space-lg);
  }

  .layout-dashboard {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  /* Hide sidebar nav on mobile — could be toggled via hamburger in future */
  .layout-dashboard__sidebar {
    display: none;
  }

  .layout-wizard__content {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    min-height: auto;
  }

  .site-footer__inner {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .site-footer__links {
    flex-direction: column;
    gap: var(--space-md);
  }

  .button-bar {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .button-bar__right {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── ≤480px: small mobile — compact spacing ─────────────────────────────────── */
@media (max-width: 480px) {
  .nyc-bar__inner,
  .page-header__inner {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .layout-full,
  .layout-dashboard,
  .layout-wizard {
    padding: var(--space-md);
  }

  .layout-wizard__content {
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }

  .page-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .user-nav {
    width: 100%;
    justify-content: flex-end;
  }
}