/* PORTAL LAYOUT LAYER — docs/design/PORTAL-LAYOUT-LAYER.md. Layout and type
 * only: no token, no hex, no !important, no id, no element selector.
 * Every name here is absent from the twelve stylesheets index.html loads and
 * from every class literal in its 36 scripts, so nothing below can reach an
 * unconverted screen — test/base-css-isolation.test.js checks that. Loaded
 * FIRST, so a future collision resolves toward app.css and nothing moves. */

/* THE OPT-IN, and the only existing name touched. app.css:275 grids every
 * `.screen` at >=900px; 0,2,0 cancels it without editing it. `.hide` wins. */
.screen.composed { display: block; }

.stack { display: grid; gap: 14px; }

/* Screen header row; `.row` is the same shape inside a card. */
.top { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 24px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }

.grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 18px; }
.grid.equal { grid-template-columns: 1fr 1fr; }

/* A DECLARED count: `.ovtiles`'s auto-fit minmax(180px,1fr) gives 5 tiles at
 * >=956px and 4 at 762-955px, which is the widowed tile the owner reported. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* One named escape, replacing forty ad-hoc `grid-column: 1 / -1` rules. */
.span { grid-column: 1 / -1; }

/* Colour inherited, never set. `.small`/`.tiny`/`.muted` are deliberately
 * absent: all three already mean something else (app.css:2081, :3773, :707). */
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.title { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 4px 0 2px; }
.sub { font-size: 15px; line-height: 1.45; }
.sectiontitle { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.metric { font-size: 25px; font-weight: 800; }
.big { font-size: 38px; font-weight: 800; letter-spacing: -1.5px; }

/* A hairline table inside a card, not a stack of bordered pills; `.arow` is
 * untouched, and this is what a converted list moves to. */
.list { display: grid; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.itemleft { display: flex; align-items: center; gap: 11px; min-width: 0; }
.icon { flex: 0 0 auto; width: 39px; height: 39px; border-radius: 11px; background: var(--dusk2); display: grid; place-items: center; }

/* No fill, no state colour: `.banner.warn`/`.info`/`.err` already hold the
 * measured light-theme AA values and must not be duplicated. */
.notice { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; }
.field { display: grid; gap: 7px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }

/* `.fill`'s width AND colour are the caller's, so a meter can never imply an
 * acknowledgement this layer does not know about (UI-DIRECTION rule 1). */
.bar { height: 9px; border-radius: 99px; background: var(--track); overflow: hidden; }
.fill { height: 100%; border-radius: 99px; transition: width .35s ease; }

/* THE STRIP THAT DOES NOT EXIST TODAY. app.css:6315 built this container by
 * hand for `.screen > .subnav`; #deviceTabs, .account-tabs and .rs-tabs each
 * re-derived it from `.chip`. auto-flow, not repeat(5,…): 3, 4 and 3-6. */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; width: 100%; margin-bottom: 20px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--dusk); }
/* 44px is this product's touch floor, above the reference's own strip. A
 * <button> inherits no colour, so --haze/--cloud are stated — `.ghost`'s pair. */
.tab { min-height: 44px; padding: 11px 13px; border: 0; border-radius: 10px; background: transparent; color: var(--haze); font-weight: 700; text-align: center; white-space: nowrap; cursor: pointer; }
/* Keyed on the ARIA the modules already write, not a `.active` class. */
.tab[aria-selected="true"], .tab[aria-current="page"] { background: var(--dusk2); color: var(--cloud); box-shadow: inset 0 0 0 1px var(--track); }
/* No display rule: pane visibility stays with `.hide`/`.is-hidden`. */
.tabpane { min-width: 0; }
/* For a strip that genuinely cannot fit — six subnav entries on a phone. */
.tabs.scroll { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
.tabs.scroll .tab { flex: 1 0 auto; scroll-snap-align: start; }

/* 900, not the reference's 920: reflowing at 920 would disagree with the rail. */
@media (max-width: 899.98px) {
  .top { align-items: flex-start; }
  .grid, .grid.equal { grid-template-columns: 1fr; }
  .cards, .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The reference's own second stop. 12px not its 11px: these labels are
 * translated and es/fr run longer than en. */
@media (max-width: 600px) {
  .title { font-size: 28px; }
  .big { font-size: 32px; }
  .cards, .cards.four { grid-template-columns: 1fr; }
  .tabs { gap: 3px; padding: 4px; }
  .tab { padding: 10px 4px; font-size: 12px; }
}

/* A declared count still widows its remainder — the owner's "4+1 with a
 * widowed PROTECTED 0/3". app.css:7832 centres that card by hand, per mount. */
@media (min-width: 900px) {
  .cards:not(.four) > :last-child:nth-child(3n+1):not(:only-child) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 28px) / 3); }
  .cards.four > :last-child:nth-child(4n+1):not(:only-child) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 42px) / 4); }
}
@media (min-width: 600.02px) and (max-width: 899.98px) {
  .cards > :last-child:nth-child(2n+1):not(:only-child) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 14px) / 2); }
}