/* Liverado: layout glue on top of Web Awesome (theme, native element styles, utilities). Hand-written, no build.
   Use --wa-* tokens and wa-* utilities first; add a rule here only when they cannot express it. */

html, body { min-height: 100%; margin: 0; padding: 0; }

/* Formal look, light only. One accent drives Web Awesome's brand scale (unlayered CSS beats its layers), so the
   homepage lab can swap palettes live. Palettes: html[data-palette] (keys: pages/home_variants.PALETTES);
   custom = a hue from the lab slider. */
:root {
  --lv-ink: #1b2430;
  --lv-graphite: #5b6472;
  --lv-rule: #e3e1dc;
  --lv-paper: #ffffff;
  --lv-gold: #b08d3c;
  --lv-accent: var(--lv-ink);
  --wa-color-brand-95: color-mix(in oklab, var(--lv-accent) 4%, white);
  --wa-color-brand-90: color-mix(in oklab, var(--lv-accent) 9%, white);
  --wa-color-brand-80: color-mix(in oklab, var(--lv-accent) 20%, white);
  --wa-color-brand-70: color-mix(in oklab, var(--lv-accent) 36%, white);
  --wa-color-brand-60: color-mix(in oklab, var(--lv-accent) 54%, white);
  --wa-color-brand-50: color-mix(in oklab, var(--lv-accent) 72%, white);
  --wa-color-brand-40: color-mix(in oklab, var(--lv-accent) 88%, white);
  --wa-color-brand-30: var(--lv-accent);
  --wa-color-brand-20: color-mix(in oklab, var(--lv-accent) 80%, black);
  --wa-color-brand-10: color-mix(in oklab, var(--lv-accent) 60%, black);
  --wa-color-brand-05: color-mix(in oklab, var(--lv-accent) 45%, black);
  --wa-color-brand: var(--lv-accent);
  --wa-color-brand-on: white;
  --wa-color-brand-fill-loud: var(--lv-accent);
  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
  --wa-color-brand-border-loud: var(--lv-accent);
  --wa-color-brand-border-normal: var(--wa-color-brand-70);
  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
  --wa-color-brand-on-loud: white;
  --wa-color-brand-on-normal: var(--lv-accent);
  --wa-color-brand-on-quiet: var(--lv-accent);
  --wa-color-text-link: var(--lv-accent);
}
html[data-palette="navy"] { --lv-accent: #22385c; }
html[data-palette="lapis"] { --lv-accent: #24439a; }
html[data-palette="bordeaux"] { --lv-accent: #6e1f2c; }
html[data-palette="rose"] { --lv-accent: #8e3a55; }
html[data-palette="forest"] { --lv-accent: #1f4a3a; }
html[data-palette="bronze"] { --lv-accent: #6f5326; }
html[data-palette="cognac"] { --lv-accent: #6b4329; }
html[data-palette="plum"] { --lv-accent: #4a2d5c; }
html[data-palette="noir"] { --lv-accent: #000000; }
html[data-palette="signal"] { --lv-accent: #c4161c; }
html[data-palette="custom"] { --lv-accent: oklch(0.4 0.11 var(--lv-hue, 250)); }
body { background: var(--lv-paper); color: var(--lv-ink); }

/* wa-page header/drawer recipe: links in the header on desktop, in the drawer on mobile, no sidebar. */
wa-page[view='mobile'] .header-nav { display: none; }
wa-page[view='desktop']::part(navigation) { display: none; }
wa-page > main { padding: 0; }

.wrap { box-sizing: border-box; width: 100%; max-width: 72rem; margin-inline: auto; padding: var(--wa-space-xl) var(--wa-space-l); }
.narrow { max-width: 30rem; }
.reading { max-width: 46rem; }

.site-header { padding: var(--wa-space-s) var(--wa-space-l); background: var(--lv-paper);
  border-bottom: var(--wa-border-width-s) solid var(--lv-rule); }
.brand { color: inherit; text-decoration: none; font-weight: var(--wa-font-weight-bold); font-size: var(--wa-font-size-l); }
.header-nav a:not(.wa-button), .drawer-nav a:not(.wa-button) { color: var(--wa-color-text-normal); text-decoration: none; }
.header-nav a[aria-current], .drawer-nav a[aria-current] { color: var(--wa-color-brand-on-quiet); font-weight: var(--wa-font-weight-semibold); }
.drawer-nav { padding: var(--wa-space-m); }

.site-footer { background: #f7f7f5; border-top: var(--wa-border-width-s) solid var(--lv-rule); }
.site-footer a { color: var(--wa-color-text-quiet); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }

.hero { text-align: center; padding-block: var(--wa-space-3xl); }
.hero h1 { font-size: var(--wa-font-size-4xl); margin-block-end: var(--wa-space-m); }
.hero .lead { max-width: 40rem; margin-inline: auto; }

.muted { color: var(--wa-color-text-quiet); }
.mono { font-family: var(--wa-font-family-code); }
.lead { font-size: var(--wa-font-size-l); color: var(--wa-color-text-quiet); }
.price { font-size: var(--wa-font-size-2xl); font-weight: var(--wa-font-weight-semibold); }
.plan-pick::part(base) { outline: 2px solid var(--wa-color-brand-fill-loud); }
.break { overflow-wrap: anywhere; }
table.records td { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-xs); overflow-wrap: anywhere; }

/* Mail */
.mail { display: grid; gap: var(--wa-space-l); grid-template-columns: 13rem minmax(0, 1fr); }
@media (max-width: 48rem) { .mail { grid-template-columns: minmax(0, 1fr); } }
.folders a { display: flex; justify-content: space-between; padding: var(--wa-space-2xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-m); color: var(--wa-color-text-normal); text-decoration: none; }
.folders a[aria-current] { background: var(--wa-color-brand-fill-quiet); font-weight: var(--wa-font-weight-semibold); }
.msglist a { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: var(--wa-space-s);
  padding: var(--wa-space-xs) var(--wa-space-s); color: inherit; text-decoration: none;
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.msglist a:hover { background: var(--wa-color-surface-lowered); }
.msglist a.unread { font-weight: var(--wa-font-weight-semibold); }
.msglist .cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 48rem) { .msglist a { grid-template-columns: minmax(0, 1fr) auto; } .msglist .from { grid-column: 1 / -1; } }
iframe.mailbody { display: block; width: 100%; min-height: 60vh; border: 0; background: #fff; }

/* Small helpers used by templates (no inline styles: CSP blocks them) */
.plans { --min-column-size: 18rem; }
.settings { --min-column-size: 26rem; }
.settings form.wa-stack > button { align-self: flex-start; }
.site-footer .wa-grid { --min-column-size: 9rem; }
.span-all { grid-column: 1 / -1; }
.grow { flex: 1 1 12rem; }
.nowrap { white-space: nowrap; }
.full { width: 100%; }
.error { color: var(--wa-color-danger-on-quiet); }
.feature-icon { font-size: var(--wa-font-size-2xl); color: var(--wa-color-brand-on-quiet); }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link wa-card { height: 100%; }
.card-link:hover wa-card::part(base) { border-color: var(--wa-color-brand-border-normal, var(--wa-color-surface-border)); }
button > wa-icon:first-child:not(:only-child), .wa-button > wa-icon:first-child:not(:only-child) { margin-inline-end: var(--wa-space-2xs); }