/* screens.css -- screen compositions (mobile). Tokens only; geometry from the canvas references.
   Desktop breakpoints belong in app.css, not here. */

/* type */
/* Instrument Serif at the canvas's leading normal: 48 on 62, 40 on 52, 32 on 42, 24 on 31, 18 on 23. */
.ap-h1 { margin: 0; font-family: var(--ap-font-display); font-weight: 400; font-size: 48px; line-height: 1.3; color: var(--atoura-color-text-primary); }
.ap-h1-40 { margin: 0; font-family: var(--ap-font-display); font-weight: 400; font-size: 40px; line-height: 1.3; color: var(--atoura-color-text-primary); }
.ap-h2 { margin: 0; font-family: var(--ap-font-display); font-weight: 400; font-size: 32px; line-height: 1.3; color: var(--atoura-color-text-primary); }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.ap-h3 { margin: 0; font-family: var(--ap-font-display); font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--atoura-color-text-primary); }
.ap-date { font-family: var(--ap-font-display); font-size: 24px; line-height: 1.3; color: var(--atoura-color-text-secondary); white-space: nowrap; }
.ap-p { margin: 0; font-size: var(--atoura-type-size-sm); line-height: 1.3; }

/* screen hooks (no geometry of their own; desktop layouts may target them in app.css) */
.ap-queue, .ap-queue--overlay, .ap-decision, .ap-stage { }
/* the decision options radio group holds the Recommendation and More Options groups at the section gap */
.ap-radiogroup { display: flex; flex-direction: column; gap: var(--atoura-spacing-24); width: 100%; }
.ap-queue-panel { display: flex; flex-direction: column; gap: var(--atoura-spacing-40); width: 100%; }
.ap-menu-row__mark { font-size: var(--atoura-type-size-xs); color: var(--atoura-color-text-secondary); }

/* body variants */
.ap-body { padding-bottom: var(--atoura-spacing-24); }
.ap-body--gap-24 { gap: var(--atoura-spacing-24); padding-bottom: var(--atoura-spacing-24); }
.ap-body--gap-32 { gap: var(--atoura-spacing-32); padding-bottom: var(--atoura-spacing-32); }
.ap-body--gap-40 { gap: var(--atoura-spacing-40); padding-bottom: var(--atoura-spacing-40); }
.ap-body--gap-48 { gap: var(--atoura-spacing-48); padding-bottom: var(--atoura-spacing-48); }
.ap-block { display: flex; flex-direction: column; width: 100%; }
.ap-block--gap-8 { gap: var(--atoura-spacing-8); }
.ap-block--gap-12 { gap: var(--atoura-spacing-12); }
.ap-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--atoura-spacing-16); width: 100%; }
/* Title left, count and subtitle right, no gap between them (drawn as a spaced-between row at gap 0). */
.ap-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0; width: 100%; }
.ap-section-header .ap-h2 { flex: 0 1 auto; min-width: 0; }
.ap-section-header__side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: 1 1 auto; min-width: 0; }
.ap-side-1 { font-size: var(--atoura-type-size-sm); font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-secondary); }
.ap-side-2 { font-size: var(--atoura-type-size-xs); color: var(--atoura-color-text-muted); }

/* raised cards (briefing, posture) and revenue rows */
.ap-card { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; padding: var(--atoura-spacing-16); background: var(--atoura-color-surface-raised); border-radius: var(--atoura-rounded-card); box-shadow: 0 2px 2px 0 var(--atoura-color-neutral-200); }
.ap-card--shadow-strong { box-shadow: 0 2px 2px 0 var(--atoura-color-neutral-400); }
.ap-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--atoura-spacing-8); }
.ap-briefing { margin: 0; font-size: var(--atoura-type-size-sm); line-height: 1.3; }
.ap-refresh { margin: 0; font-size: var(--atoura-type-size-xs); color: var(--atoura-color-text-muted); text-align: right; }
.ap-revenue-row { display: flex; align-items: flex-start; gap: var(--atoura-spacing-12); width: 100%; padding: var(--atoura-spacing-12); background: var(--atoura-color-surface-raised); border-radius: var(--atoura-rounded-control); box-shadow: 0 2px 2px 0 var(--atoura-color-neutral-200); }
.ap-revenue-row__text { display: flex; flex-direction: column; gap: var(--atoura-spacing-2); flex: 1 1 0; min-width: 0; font-size: var(--atoura-type-size-sm); }
.ap-revenue-row__merchant { font-weight: var(--atoura-type-weight-medium); }
.ap-revenue-row__line { color: var(--atoura-color-text-secondary); }
/* Card lists: one column on phones at the list's gap; styles/app.css gives them two columns from 1024 px. */
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.ap-grid--8 { gap: var(--atoura-spacing-8); }
.ap-grid--12 { gap: var(--atoura-spacing-12); }
/* Stage runs of cards and of buttons keep the section's own gap on phones. */
.ap-cards, .ap-actions { display: flex; flex-direction: column; gap: inherit; width: 100%; }
/* Portfolio Posture: a two-column grid of disabled inputs, 12 between rows and columns (H-CCO). */
.ap-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--atoura-spacing-12); width: 100%; }
.ap-tile { min-width: 0; }

/* queue */
.ap-queue-header { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; position: relative; }
.ap-queue-title { display: flex; flex-direction: column; gap: var(--atoura-spacing-8); align-items: flex-start; width: 100%; }
.ap-queue-selects { display: flex; gap: var(--atoura-spacing-16); width: 100%; }
/* The menu layer covers the header box without taking part in its gap, so the panel hangs 4 below the selects as drawn. */
.ap-menu-layer { position: absolute; inset: 0; pointer-events: none; }
.ap-menu-layer > * { pointer-events: auto; }
.ap-queue-header .ap-menu-scrim { position: fixed; inset: 0; z-index: 24; background: rgba(0, 0, 0, 0.01); /* literal-ok: the canvas scrim is 1% black, a click catcher only */ }
.ap-menu-panel { position: absolute; z-index: 25; top: calc(100% + var(--atoura-spacing-4)); display: flex; flex-direction: column; gap: var(--atoura-spacing-2); padding: 6px; /* literal-ok: drawn menu padding 6 */ background: var(--atoura-color-surface-raised); border: 1px solid var(--atoura-color-neutral-300); border-radius: 6px; /* literal-ok: drawn menu radius 6 */ box-shadow: var(--atoura-elevation-md); }
.ap-menu-panel:focus { outline: none; }
.ap-menu-panel--type { right: 0; width: 168px; }
.ap-menu-panel--partners { left: 0; width: 216px; max-height: 70vh; overflow-y: auto; }
.ap-menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--atoura-spacing-8); padding: var(--atoura-spacing-8) 10px; line-height: 18px; border-radius: var(--atoura-rounded-control); font-size: var(--atoura-type-size-sm); font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-primary); text-decoration: none; }
.ap-menu-panel--partners .ap-menu-row { padding: 5px 10px; }
.ap-menu-row--active { background: var(--atoura-color-surface-sunken); }
.ap-menu-row--inert { cursor: default; }
.ap-menu-group { padding: var(--atoura-spacing-8) var(--atoura-spacing-12) var(--atoura-spacing-2); font-size: var(--atoura-type-size-xs); font-weight: var(--atoura-type-weight-semibold); color: var(--atoura-color-text-secondary); }

/* decision surface and stages */
.ap-alert-header { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; }
.ap-alert-header__title { display: flex; flex-direction: column; gap: var(--atoura-spacing-4); width: 100%; }
.ap-alert-header__top { display: flex; align-items: center; justify-content: space-between; gap: var(--atoura-spacing-8); }
.ap-alert-of { font-family: var(--ap-font-display); font-size: 18px; line-height: 1.3; color: var(--atoura-color-text-secondary); }
.ap-tldr { margin: 0; font-size: var(--atoura-type-size-sm); line-height: 1.3; }
.ap-chips { display: flex; flex-wrap: wrap; gap: var(--atoura-spacing-8); width: 100%; }
.ap-implications { gap: var(--atoura-spacing-16); }
.ap-email { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; }
.ap-email__block { display: flex; flex-direction: column; gap: var(--atoura-spacing-8); width: 100%; }
.ap-record { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; }
.ap-recorded { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; }
.ap-check-head { display: flex; align-items: center; justify-content: space-between; gap: var(--atoura-spacing-8); }

/* Portfolio (mobile_portfolio-health): body gap 40, 128 below the last section as drawn; header of title,
   view tabs (gap 8) and the Visibility select (gap 16). */
.ap-portfolio { padding-bottom: calc(var(--atoura-spacing-64) * 2); }
.ap-portfolio__header { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; }
.ap-portfolio__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--atoura-spacing-8); width: 100%; min-width: 0; }
.ap-portfolio__filters { display: flex; gap: var(--atoura-spacing-16); width: 100%; }

/* Sign-in (Authentication and Sign-In file, page Demo Login, sign-in-A01..A05): the bar, a centred column of
   logo + wordmark, the password field and the full-width Sign In, the footer at the bottom. Column width is
   272 to 320 as drawn; the logo is the M export under 768 px and the L export from 768 px. */
.ap-sign-in { }
.ap-sign-in__body { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--atoura-spacing-24); padding: var(--atoura-spacing-24); }
.ap-sign-in__header, .ap-sign-in__form { display: flex; flex-direction: column; gap: var(--atoura-spacing-8); width: 100%; max-width: 320px; min-width: 272px; }
.ap-sign-in__header { align-items: center; }
.ap-sign-in__logo { display: block; }
.ap-sign-in__logo--l { display: none; }
.ap-sign-in__title { margin: 0; font-family: var(--ap-font-display); font-weight: 400; font-size: 32px; line-height: 1.3; text-align: center; color: var(--atoura-color-text-primary); }
.ap-sign-in__form .atoura-field { gap: var(--atoura-spacing-4); }
.ap-sign-in__form .atoura-field__box { cursor: text; }
.ap-sign-in__error { margin: 0; font-size: var(--atoura-type-size-xs, 12px); line-height: 16px; color: var(--atoura-color-feedback-danger-fg); }
.ap-sign-in__actions { display: flex; flex-direction: column; gap: var(--atoura-spacing-8); margin-top: var(--atoura-spacing-16); }
.ap-sign-in__actions .atoura-button[data-loading] { cursor: progress; }
@media (min-width: 768px) {
  .ap-sign-in__logo--m { display: none; }
  .ap-sign-in__logo--l { display: block; }
  .ap-sign-in__title { font-size: 40px; }
}