/* App additions on top of Kerel's prototype.css (which is copied, never edited).
   Brand colours are the prototype's `brands` map, one block per theme. Before sign-in the
   page is Cardea; after sign-in app.js sets data-brand from the member's mastercode. */

[data-brand="cardea"]  { --primary:#0c3675; --accent:#ed1c24; --soft:#eaf0f8; --tint:#f2f5fa; --on-primary:#d9e5f7; }
[data-brand="trinre"]  { --primary:#b91c23; --accent:#ef2028; --soft:#fceced; --tint:#fff5f5; --on-primary:#ffe0e1; }
[data-brand="premier"] { --primary:#a72e29; --accent:#dfc746; --soft:#f9eeeb; --tint:#fdf7f4; --on-primary:#f6ded9; }
[data-brand="beacon"]  { --primary:#007d98; --accent:#ffc629; --soft:#e3f5f9; --tint:#f0fbfd; --on-primary:#d4f2f8; }
[data-brand="eb"]      { --primary:#592184; --accent:#8a4eb0; --soft:#f1eaf7; --tint:#f8f3fc; --on-primary:#ecddf6; }

/* The prototype set these with inline style attributes; the CSP here forbids those. */
.on-primary { color: var(--on-primary); }
.auth-box .submit { margin-top: 16px; }
.auth-box .notice { margin-top: 4px; }
/* The prototype's aside headline was a second h1; it is an h2 here (one h1 per screen)
   with the prototype's .auth-aside h1 sizes. */
.auth-aside .aside-title { font-size: 3rem; font-weight: 800; letter-spacing: -2px; max-width: 470px; line-height: 1.15; margin: 30px 0 20px; }
/* The prototype's .auth-box>p and .auth min-height assume its markup: here the form sits
   one level deeper, and there is no 38px demo bar above the page. */
.auth { min-height: 100dvh; }
.auth-box [data-slot="form"] > p:not(.notice) { color: var(--muted); margin: 10px 0 27px; font-size: .875rem; }
/* Headings take focus on each new screen so screen readers start there; that is not a
   control, so no focus ring. */
h1[tabindex="-1"]:focus { outline: none; }
.boot { padding: 40px 24px; text-align: center; color: var(--muted); }

/* Review item F1 (15 Sept): two inputs in a 1fr 1fr grid would not shrink below their
   intrinsic width and pushed the form to 420px on a 375px phone. */
.field-grid > * { min-width: 0; }

/* A busy button keeps its size and says what it is doing. */
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Home: the prototype's top bar and content, without its sidebar. */
.home-top { border-top: 3px solid var(--accent); }
.home-brand { display: flex; align-items: center; }
.home-brand .brand-art { width: 117px; height: 61px; }
.home-brand .brand-trinre { width: 132px; height: 61px; }
.home-brand .brand-beacon { width: 120px; height: 60px; }
.home-brand .brand-eb { width: 96px; height: 54px; }
.home-brand .brand-premier { width: 139px; height: 45px; }
.home .content { max-width: 760px; }
.home .welcome-card { min-height: 0; }
.home .welcome-card h2 { margin-top: 12px; }
@media (max-width: 650px) {
  .home-top { padding: 0 18px; }
  .home .content { padding: 25px 18px 60px; }
}