/* 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; }
/* The hidden attribute wins over utility classes that set display (wa-cluster, wa-stack…). */
[hidden] { display: none !important; }

/* 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/palettes.py);
   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; }
wa-page > main:focus { outline: none; }  /* the skip link's target: focus lands there without a ring around the page */
/* Hidden until it has focus (.wa-visually-hidden stops applying then); first stop of the Tab order. */
.skip-link:focus { position: fixed; top: var(--wa-space-s); left: var(--wa-space-s); z-index: 1000;
  padding: var(--wa-space-xs) var(--wa-space-m); background: var(--lv-paper); color: var(--lv-ink);
  border: var(--wa-border-width-s) solid var(--lv-ink); border-radius: var(--wa-border-radius-m); }
wa-page::part(skip-to-content) { display: none; } /* ours above is the one stop; wa-page's would be a second */

.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); }
.header-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.drawer-nav { padding: var(--wa-space-m); }

/* padding 0: wa-page pads a slotted footer by 3xl; the .wrap inside sets the gutter, as it does in main. */
.site-footer { background: var(--wa-color-surface-lowered); border-top: var(--wa-border-width-s) solid var(--lv-rule); padding: 0; }
.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; }
table.records td:first-child { overflow-wrap: normal; }
table.receipt th { white-space: nowrap; padding-right: var(--wa-space-m); text-align: left; vertical-align: top; }
table.receipt td { overflow-wrap: anywhere; }
table.payments td { overflow-wrap: anywhere; }
table.payments td:first-child { white-space: nowrap; }

/* 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); }
  /* Phone: Compose and the folders on one row, the folders scrolling sideways, so the mail starts on the first screen. */
  #sidebar { flex-direction: row; align-items: center; gap: var(--wa-space-xs); }
  #sidebar > .wa-button { flex: none; }
  #sidebar .folders { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: var(--wa-space-3xs);
    scrollbar-width: thin; min-width: 0; }
  #sidebar .folders a { flex: none; white-space: nowrap; gap: var(--wa-space-2xs); padding-inline: var(--wa-space-s); }
}
.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); }
.folders .d1, .mail .d1 { padding-inline-start: var(--wa-space-l); }
.folders .d2, .mail .d2 { padding-inline-start: var(--wa-space-2xl); }
.folders .d3, .folders .d4, .mail .d3, .mail .d4 { padding-inline-start: var(--wa-space-3xl); }
/* Folders page: [name Rename] … [count Delete] on one line, wrapping on a phone with the count kept right. */
.folder-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs) var(--wa-space-s); }
.folder-name { display: flex; align-items: center; gap: var(--wa-space-xs); flex: 1 1 16rem; min-width: 0; }
.folder-name input { flex: 1; min-width: 0; }
.folder-row > small { margin-inline-start: auto; }
/* Buttons that only make sense side by side (← Today →) wrap as one group. */
.together { display: inline-flex; flex-wrap: nowrap; gap: var(--wa-space-xs); }
.folders .cut, .msglist .cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msglist .row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--wa-space-xs);
  padding-inline-start: var(--wa-space-s); border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.msglist .row:hover { background: var(--wa-color-surface-lowered); }
.msglist .row.unread { box-shadow: inset 3px 0 0 var(--wa-color-brand-fill-loud); }
.msglist .row.unread .from, .msglist .row.unread .subject { 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) var(--wa-space-xs) 0; color: inherit; text-decoration: none; }
.bulkbar select, .joined select { max-width: 10rem; }
.joined { flex-wrap: nowrap; }
.search-options { --min-column-size: 10rem; }
.conversation { padding: var(--wa-space-s) 0; }
.conversation a { color: inherit; text-decoration: none; padding: var(--wa-space-3xs) 0; }
.spam-notes ul { margin: var(--wa-space-xs) 0 0; padding-left: 1.25em; }
.activity td:first-child { width: 1%; }  /* the time column as narrow as its text (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; }
.plans wa-card { height: 100%; } /* equal-height cards in a row */
.plans wa-card::part(body) { flex: 1 1 auto; } /* the buttons in the footers line up */
.schema { --min-column-size: 17rem; }
.storage meter { width: 100%; height: 0.75rem; }
/* A checkbox before a label that wraps: the text wraps beside it, not under it. */
label.check { display: flex; align-items: baseline; gap: var(--wa-space-xs); }
label.check > input { flex: none; }
.settings { --min-column-size: 26rem; }
.settings .wa-stack > button, .self-start { 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; }
form.inline { display: inline; }
.member-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--wa-space-xs) var(--wa-space-m); padding-block: var(--wa-space-xs); border-bottom: var(--wa-border-width-s) solid var(--lv-rule); }
.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)); }
/* Icon and label apart. Buttons are flex: gap separates the icon from the label's text (an anonymous flex item) and
   adds nothing to an icon-only button. (:not(:only-child) never matched: a text node is not a child element.) */
button, .wa-button { gap: var(--wa-space-2xs); }

/* Contacts */
.people a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 8rem); gap: var(--wa-space-s);
  padding: var(--wa-space-xs) var(--wa-space-2xs); color: inherit; text-decoration: none;
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.people a:hover { background: var(--wa-color-surface-lowered); }
.people .cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 48rem) { .people a { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.notes { white-space: pre-wrap; }

/* Compose: address suggestions (public_assets/suggest.js) */
.suggest-host { position: relative; }
.suggest { position: absolute; inset-inline: 0; top: 100%; z-index: 10; margin: 0; padding: 0; list-style: none;
  max-height: 16rem; overflow-y: auto; background: var(--wa-color-surface-default);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m);
  box-shadow: var(--wa-shadow-m); }
.suggest li { display: flex; flex-wrap: wrap; gap: 0 var(--wa-space-s); padding: var(--wa-space-2xs) var(--wa-space-s); cursor: pointer;
  overflow-wrap: anywhere; }
.suggest li small { color: var(--wa-color-text-quiet); }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--wa-color-brand-fill-quiet); }

/* Calendar agenda */
.agenda .row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 12rem); gap: var(--wa-space-s);
  padding: var(--wa-space-xs) var(--wa-space-2xs); border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.agenda .row:last-child { border-bottom: 0; }
@media (max-width: 48rem) { .agenda .row { grid-template-columns: 1fr; gap: 0; } }

/* Calendar month grid */
.month { width: 100%; table-layout: fixed; border-collapse: collapse; }
.month th { padding: var(--wa-space-2xs); font-weight: 600; text-align: left; color: var(--wa-color-text-quiet);
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.month td { padding: 0; vertical-align: top; border: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.month td a { display: block; box-sizing: border-box; min-height: 6.5rem; padding: var(--wa-space-2xs); color: inherit; text-decoration: none; overflow: hidden; }
.month td a:hover { background: var(--wa-color-surface-lowered); }
.month td.out { background: var(--wa-color-surface-lowered); color: var(--wa-color-text-quiet); }
.month .num { display: inline-block; min-width: 1.5rem; padding-inline: var(--wa-space-3xs); text-align: center; font-weight: 600; border-radius: var(--wa-border-radius-m); }
.month td.today .num { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
.month .item, .month .more { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--wa-font-size-s); }
.month .more { color: var(--wa-color-text-quiet); }
.month .count { display: none; }
@media (max-width: 48rem) {
  .month td a { min-height: 3.5rem; padding: var(--wa-space-3xs); }
  .month .item, .month .more { display: none; }
  .month .count { display: block; margin-top: var(--wa-space-3xs); font-size: var(--wa-font-size-s); color: var(--wa-color-brand-on-quiet);
    background: var(--wa-color-brand-fill-quiet); border-radius: var(--wa-border-radius-m); text-align: center; }
}

/* Settings on a phone: the five tabs as icons, their names still read out (all five fit in 390 px). */
@media (max-width: 30rem) {
  .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #settings-tabs wa-tab::part(base) { padding-inline: var(--wa-space-m); }
}

/* The message's More menu: a disclosure inside the action form, so its buttons send it without script. */
details.more { position: relative; border: 0; background: none; padding: 0; overflow: visible;  /* not a panel */
  align-self: stretch; display: flex; }  /* as tall as the buttons beside it */
details.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; align-self: stretch;
  gap: var(--wa-space-2xs); padding: var(--wa-space-2xs) var(--wa-space-s); font-size: var(--wa-font-size-s);
  border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud); border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-neutral-on-quiet); }
details.more > summary::after { display: none; }  /* native.css's chevron: the button has its own icon */
.more-menu button { justify-content: flex-start; }
.more-menu { position: absolute; z-index: 10; inset-inline-end: 0; margin-top: var(--wa-space-2xs); min-width: 14rem;
  padding: var(--wa-space-s); background: var(--wa-color-surface-default); border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m); box-shadow: var(--wa-shadow-m); }
@media (max-width: 48rem) { .more-menu { inset-inline-end: auto; inset-inline-start: 0; } }  /* opens to the right */
.more-menu a { color: var(--wa-color-text-normal); text-decoration: none; }
.more-menu a:hover { text-decoration: underline; }

/* Print page (webmail/print.html): only the message. */
.print-page pre { white-space: pre-wrap; font: inherit; }
@media print { .site-header, .site-footer, .no-print, wa-page::part(navigation) { display: none !important; } }