/* app.css -- layout layer only: viewport, the fixed chrome, scroll behaviour and the one desktop breakpoint
   (1024 px, at the end of the file) live here. Values come from the vendored --atoura-* tokens;
   prototype-local properties are --ap-* (see fonts.css). */

/* The design-system components set display on their own classes, so the hidden attribute needs to win. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--atoura-color-surface-page);
  /* The Figma viewer shifts content when a block above the viewport changes height; keep every engine the same. */
  overflow-anchor: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--atoura-color-surface-page);
  color: var(--atoura-color-text-primary);
  font-family: var(--atoura-font-sans);
  font-size: var(--atoura-type-size-sm, 14px);
  line-height: 1.3; /* literal-ok: the canvas sets IBM Plex at leading normal (14 on 18, 12 on 16) */
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Screen shell: the menu-bar stays at the top while the body scrolls, as the fixed bar in the Figma frames. */
.ap-screen { display: flex; flex-direction: column; min-height: 100vh; }
/* The bar sits above the in-page menu scrims (24) and panels (25) so its menu icon stays reachable while a
   menu is open (the canvas keeps the fixed bar above the scrim); the drawer overlay (30) covers it. */
.ap-bar { position: sticky; top: 0; z-index: 26; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); background: var(--atoura-color-surface-page); }
/* Body gap and the space before the footer come from the screen's variant (screens.css): 24, 32, 40 or 48 as drawn. */
.ap-body { display: flex; flex-direction: column; padding-top: var(--atoura-spacing-24); padding-right: calc(var(--atoura-spacing-24) + env(safe-area-inset-right, 0px)); padding-left: calc(var(--atoura-spacing-24) + env(safe-area-inset-left, 0px)); flex: 1 0 auto; } /* padding-bottom: the screen variant */
/* Every scroll into view (Continue, focus moves, keyboard Tab) stops below the sticky bar. */
html { scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
.ap-screen > .atoura-page-footer { padding-bottom: calc(var(--atoura-spacing-16) + env(safe-area-inset-bottom, 0px)); height: auto; min-height: 48px; }

/* Overlays (drawer, type menu, partners list) sit above the screen; the body is never scroll-locked. */
#overlay { position: fixed; inset: 0; z-index: 30; }
.ap-scrim { position: absolute; inset: 0; touch-action: none; }
.ap-overlay-panel { position: absolute; overscroll-behavior: contain; }

/* Launcher (demo harness, not part of the canon journey). */
.ap-launcher { padding: 48px 24px; max-width: 520px; }
.ap-launcher h1 { font-family: var(--ap-font-display); font-weight: 400; font-size: 40px; margin: 0 0 8px; }
.ap-launcher p { margin: 0 0 24px; color: var(--atoura-color-text-secondary); }
.ap-launcher ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ap-launcher ul a { display: block; padding: 16px; border-radius: var(--atoura-rounded-card); background: var(--atoura-color-surface-raised); border: 1px solid var(--atoura-color-border-default); color: inherit; text-decoration: none; }
.ap-launcher ul a strong { display: block; font-size: 16px; }
.ap-launcher ul a span { color: var(--atoura-color-text-secondary); font-size: 12px; }
.ap-launcher .ap-note { font-size: 12px; color: var(--atoura-color-text-muted); margin-top: 32px; }
.ap-launcher .ap-note a { color: inherit; }

/* Desktop, from 1024 px (Figma "Framework - Desktop", 1094:17072; every screen follows it, drawn or not): the bar
   across the top; below it the navigation sidebar (226 wide, 24 from the left edge, sticky 24 below the bar)
   and the body column (fluid, 24 from the sidebar and from the right edge); the footer across the bottom, 24
   below the body. Every body sets its sections 32 apart with 64 below the last. The hamburger and the drawer
   stay, as drawn. Layout only: the content and behaviour are the mobile ones. */
@media (min-width: 1024px) {
  .ap-screen--nav { display: grid; grid-template-columns: calc(var(--atoura-spacing-24) + 226px) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--atoura-spacing-24); align-items: start; }
  .ap-screen--nav > .ap-bar { grid-column: 1 / -1; }
  /* The sidebar scrolls itself when the window is shorter than the list; 4 px of padding (taken from the
     margins around it) keep the focus ring whole inside the scroller. Items start at 24 below the bar. */
  .ap-screen--nav > .atoura-nav-sidebar { display: flex; grid-column: 1; grid-row: 2; position: sticky; top: calc(56px + env(safe-area-inset-top, 0px) + var(--atoura-spacing-24) - var(--atoura-spacing-4)); max-height: calc(100vh - 56px - env(safe-area-inset-top, 0px) - var(--atoura-spacing-48) + var(--atoura-spacing-4)); margin: calc(var(--atoura-spacing-24) - var(--atoura-spacing-4)) calc(-1 * var(--atoura-spacing-4)) 0 0; padding: var(--atoura-spacing-4) var(--atoura-spacing-4) var(--atoura-spacing-4) calc(var(--atoura-spacing-24) + env(safe-area-inset-left, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  .ap-screen--nav > .ap-body { grid-column: 2; grid-row: 2; gap: var(--atoura-spacing-32); padding: var(--atoura-spacing-24) calc(var(--atoura-spacing-24) + env(safe-area-inset-right, 0px)) var(--atoura-spacing-64) 0; }
  .ap-screen--nav > .atoura-page-footer { grid-column: 1 / -1; margin-top: var(--atoura-spacing-24); }

  /* Buttons hug their label (View Full Queue, Save Decision, Execute Decision as drawn). */
  .ap-screen--nav .atoura-button--full { display: inline-flex; width: auto; align-self: flex-start; }
  /* Card lists in two columns (Priorities, Critical and Approval Needed at 12; Revenue, Trends, ISO and
     Opportunities at 8); the queue keeps one column, as drawn. */
  .ap-screen--nav .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Decision surface: each Facts card sets its rows in two columns under its title; Context is two columns
     at 16, the SLA card across, Related Policies left of Similar Cases. */
  .ap-decision [data-section="facts"] .atoura-inner-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ap-decision [data-section="facts"] .atoura-inner-card > .atoura-inner-card__title { grid-column: 1 / -1; }
  .ap-decision [data-section="context"] > .atoura-section__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ap-decision [data-section="context"] > .atoura-section__content > :nth-child(1) { grid-column: 1 / -1; }
  .ap-decision [data-section="context"] > .atoura-section__content > :nth-child(2) { grid-column: 2; grid-row: 2; }
  .ap-decision [data-section="context"] > .atoura-section__content > :nth-child(3) { grid-column: 1; grid-row: 2; }
  /* alert cards keep the chip and Review row under the text at any card width (the desktop queue frame) */
  .ap-screen--nav .atoura-banner__main, .ap-screen--nav .atoura-banner__actions { flex-basis: 100%; }
  /* a card title's chip (the SLA cards) sits at the card's right edge on desktop, beside the title on phones */
  .ap-screen--nav .atoura-inner-card__head { justify-content: space-between; }
  /* CCO stages (not drawn on desktop; the same rules): a section's cards in two columns at 16, a card that
     holds an alert across both; its buttons in a row. */
  .ap-stage .ap-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--atoura-spacing-16); align-items: start; }
  .ap-stage .ap-cards > .ap-span { grid-column: 1 / -1; }
  .ap-stage .ap-actions { flex-direction: row; flex-wrap: wrap; gap: var(--atoura-spacing-16); }
}