/*
 * App layout rules for the shells and partials (E01-S05, E01-S06).
 *
 * FN-STD-DS-1.0 R-DS-GATE-1(d): "Layout inline styles seen in the reference
 * screens become token-based app CSS." Each rule below replaces an inline
 * style of a vendored reference screen (named in its comment) with the
 * nearest spacing token, or sets a layout length. No colour, font size,
 * font family, radius or shadow value is written here; colours are tokens.
 * Breakpoints are the design system's container widths only (600/760/900).
 */

/* The page: .fn-screen is the scroll container the sticky bars stick in
   (the reference frames give it a height), filling the viewport. */
html, body { margin: 0; background: var(--ground); }
.fn-screen { height: 100vh; height: 100dvh; }

/* WCAG 2.4.11: the sticky top bar, tab bar and sticky CTA never cover the
   focused element (E01-S06 AC5). */
.fn-screen { scroll-padding-block: calc(var(--space-16) + var(--space-8)); }

/* Citizen Portal below 900px (E03, found by the rendered target gate): the
   page scrolls in .fn-content, above the floating tab bar, so the pill
   never covers a control (axe target-size: a button or checkbox scrolled
   under the bar is "partially obscured" and cannot be tapped). The tab
   bar keeps its floating pill look over the ground. The focus walk's
   scroll padding moves to the new scroll container. */
@container screen (max-width: 899.98px) {
  [data-layout="portal"] > .fn-app { height: 100%; grid-template-rows: minmax(0, 1fr); }
  [data-layout="portal"] .fn-main:has(> .fn-tabbar) { height: 100%; }
  [data-layout="portal"] .fn-main:has(> .fn-tabbar) > .fn-content { flex: 1; min-height: 0; overflow-y: auto; scroll-padding-block: calc(var(--space-16) + var(--space-4)); }
  [data-layout="portal"] .fn-main > .fn-tabbar { flex: none; }
}

/* The avatar menu link (a .fn-icon-btn <a>) shows initials, never an
   underline (MemberHome draws the avatar as a plain disc). */
a.fn-icon-btn { text-decoration: none; }
/* A card that is a link (.fn-card--link: the help categories, E11) keeps
   the card's text colour; its hover lift and focus ring say it is a link. */
a.fn-card--link { color: inherit; text-decoration: none; }

/* Sidebar wordmark row: style="padding:0 12px" (MemberHome, AdminOverview). */
.fn-side > :first-child { padding: 0 var(--space-3); }
/* The admin sidebar's wordmark row: the reference sets the wordmark at 18px
   inline (no token), so the bundle's 20px wordmark and the "Admin" badge
   do not fit the 232px sidebar on one line; the badge wraps under it. */
.fn-side > .fn-row { flex-wrap: wrap; row-gap: var(--space-2); }

/* Top bar actions: style="margin-left:auto;gap:4px" (MemberHome). */
.fn-top > .fn-row { margin-left: auto; gap: var(--space-1); }

/* Stat delta arrow: style="transform:rotate(-45deg)", and rotate(45deg)
   on a bad change (AdminOverview). */
.fn-delta .fn-i { transform: rotate(-45deg); }
.fn-delta--down .fn-i { transform: rotate(45deg); }

/* A bad stat's value: style="color:var(--danger)" (Stat, AdminOverview). */
.fn-stat:has(> .fn-delta--down) > b { color: var(--danger); }

/* Field error hint: style="color:var(--danger)" (Field). */
.fn-input--error + small { color: var(--danger); }

/* A textarea is a .fn-input that grows (Field README: 46px is the
   single-line height). */
textarea.fn-input { height: auto; min-height: 120px; padding-block: var(--space-3); }

/* DataTable card: style="padding:8px" (DataTable, AdminMembers); the phone
   list inside it: style="padding:0 8px"; the progress cell:
   style="width:140px" / "width:120px". */
.fn-card:has(> .fn-table) { padding: var(--space-2); }
.fn-card > .fn-list.fn-show-sm { padding: 0 var(--space-2); }
.fn-table td:has(> .fn-progress) { width: 120px; }
.fn-table th a { color: inherit; text-decoration: none; }

/* List row body: style="flex:1;min-width:0" (AdminMembers, MemberHome). */
.fn-list > div > div { flex: 1; min-width: 0; }

/* The current step's action: style="margin-top:8px" (MemberHome). */
.fn-steps .is-now .fn-btn { margin-top: var(--space-2); }

/* Course card bar: style="margin-top:6px" (MemberLearn), nearest token. */
.fn-parcel__body > .fn-progress { margin-top: var(--space-1); }
.fn-parcel__body .fn-h3 a { display: block; color: inherit; text-decoration: none; }

/* Labelled bar: style="gap:6px" (AdminOverview pipeline), nearest token. */
.fn-stack:has(> .fn-between + .fn-progress) { gap: var(--space-2); }

/* The unread count on the Chat tab, sized like the sidebar's count badge
   (.fn-nav .fn-badge). */
.fn-tabbar a { position: relative; }
.fn-tabbar a > .fn-badge { position: absolute; top: 0; left: calc(50% + var(--space-2)); height: 20px; padding: 0 var(--space-2); }

/* Footer: the legal links and the theme control, with 44px targets. */
.fn-footer nav, .fn-footer form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.fn-footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: inherit; }

/* ── The reference screens (E01-S10) ── */

/* Bold words in a muted line read in ink: style="color:var(--ink)"
   (MemberLearn goal; WebsiteParcel breadcrumb). */
.fn-muted > b { color: var(--ink); }

/* Website hero art, floating cards: style="left:16px;bottom:16px" and
   "right:16px;top:16px" (WebsiteHome); after the plat badge,
   style="right:14px;bottom:14px" (WebsiteParcel), nearest token. */
.fn-hero-art > .fn-float { left: var(--space-4); bottom: var(--space-4); }
.fn-hero-art > .fn-float + .fn-float { left: auto; bottom: auto; right: var(--space-4); top: var(--space-4); }
.fn-hero-art > .fn-badge + .fn-float { left: auto; right: var(--space-4); }
/* The pin on the lot's floating card: style="color:var(--clay)" (WebsiteParcel). */
.fn-float > .fn-i { color: var(--clay); }
/* The plat badge on the lot's art: style="position:absolute;top:14px;
   left:14px;background:var(--surface);color:var(--ink)" (WebsiteParcel),
   nearest token. */
.fn-hero-art > .fn-badge { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--surface); color: var(--ink); }

/* "How it works" right after the hero: style="background:var(--surface);
   border-block:1px solid var(--line)"; its heading block:
   style="max-width:640px;margin-bottom:var(--space-8)"; a section's
   heading row: style="margin-bottom:var(--space-6)" (WebsiteHome). */
.fn-hero + .fn-section { background: var(--surface); border-block: 1px solid var(--line); }
.fn-section > .fn-stack:first-child { max-width: 640px; margin-bottom: var(--space-8); }
.fn-section > .fn-between:first-child { margin-bottom: var(--space-6); }
/* The band's wrapper: style="padding:0 var(--space-4) var(--space-12)";
   the note under its action: style="text-align:center" (WebsiteHome). */
main > section:has(> .fn-band) { padding: 0 var(--space-4) var(--space-12); }
.fn-band .fn-stack > .fn-small { text-align: center; }

/* The lot page: style="padding:var(--space-4)"; its breadcrumb:
   style="margin-bottom:var(--space-3)"; the columns:
   style="align-items:start"; the art: style="min-height:300px;
   background:var(--pine-soft);color:var(--pine)" (WebsiteParcel). The
   citizens list's columns: style="align-items:start" (AdminMembers). */
main > section:has(> .fn-split) { padding: var(--space-4); }
main > section > .fn-small.fn-muted:first-child { margin-bottom: var(--space-3); }
.fn-split:has(> .fn-aside) { align-items: start; }
.fn-split .fn-hero-art { min-height: 300px; background: var(--pine-soft); color: var(--pine); }

/* The ownership card: the ring row, style="gap:var(--space-6);
   align-items:center;flex-wrap:wrap"; the lot's lines beside it,
   style="gap:4px;flex:1;min-width:180px"; the paid line,
   style="margin-top:8px" (MemberHome). */
.fn-card--pine > .fn-row { gap: var(--space-6); }
.fn-card--pine > .fn-row > .fn-stack { gap: var(--space-1); flex: 1; min-width: 180px; }
.fn-card--pine > .fn-row > .fn-stack > .fn-num { margin-top: var(--space-2); }
/* The greeting: style="gap:6px" (MemberHome, MemberLearn), and
   style="gap:4px" (AdminOverview), nearest tokens. */
.fn-content > .fn-stack:first-child, .fn-content > .fn-between > .fn-stack { gap: var(--space-2); }
.fn-content > .fn-between > .fn-stack:has(> .fn-h2:last-child) { gap: var(--space-1); }
/* The next payment's actions sit at the card's foot:
   style="margin-top:auto" (MemberHome). */
.fn-card > .fn-row.fn-wrap:has(> .fn-btn--clay) { margin-top: auto; }
/* The pipeline's bars: style="gap:14px" (AdminOverview), nearest token. */
.fn-card > .fn-stack:has(> .fn-stack > .fn-progress) { gap: var(--space-4); }

/* The selected citizen: two sunk stats side by side,
   style="grid-template-columns:1fr 1fr;gap:12px", each
   style="padding:14px" (AdminMembers), nearest token. */
.fn-aside > .fn-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.fn-aside > .fn-grid > .fn-stat { padding: var(--space-3); }
.fn-aside > .fn-stack { gap: var(--space-2); }

/* The range input: the browser gives it its own field colours (background
   "field", text "fieldtext"), which are not tokens. A range paints neither
   (its track and thumb are drawn by accent-color); these keep the computed
   values on tokens with no visual change (R-DS-GATE-2f). */
.fn-range { background-color: transparent; color: var(--ink); }

/* Chart grid lines: a <line> has no inside, so its fill is never painted;
   the browser's default fill is black, which is not a token (R-DS-GATE-2f). */
.fn-chart line { fill: none; }

/* The lot's plan control fills its card, each choice an equal share:
   style="width:100%" and style="flex:1" (WebsiteParcel). */
.fn-aside .fn-seg { width: 100%; }
.fn-aside .fn-seg > button { flex: 1; }

/* A long unbroken word in a sunk card's paragraphs (a signing link in an
   email preview's plain-text version, E06) wraps instead of pushing the
   page sideways (R-DS-GATE-2c). break-word leaves min-content sizing
   alone, so nothing that fits moves. */
.fn-card--sunk > p { overflow-wrap: break-word; }
/* Small text in a sunk card wraps a word too long for the line (a URL
   written out in an email's plain-text preview, /ds/email/<key>) rather
   than widening the page (R-DS-LAY: no sideways scroll). */
.fn-card--sunk > p.fn-small { overflow-wrap: anywhere; }