/* Design: see DESIGN.md. Modeled on the Cloudflare dashboard: neutral greys, one brand accent, 1px borders, no
   shadows, color reserved for status. The tokens started from MailCheck's. */

/* Self-hosted Inter (github.com/rsms/inter, SIL Open Font License, see fonts/Inter-LICENSE.txt).
   The ?v= version busts browser caches when the font is updated. */
@font-face {
  font-family: InterVariable; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/InterVariable.woff2?v=4.1") format("woff2");
}
@font-face {
  font-family: InterVariable; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2?v=4.1") format("woff2");
}

:root {
  color-scheme: light dark;
  --sans: InterVariable, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* --page is behind everything; cards sit on it. In light mode the page is a light grey and cards are white, so
     cards and the active menu item stand out; --bg (white) is for inputs. */
  --page: #f5f5f5; --bg: #fff; --card: #fff; --fg: #525252; --title: #171717; --muted: #6b6b6b; --border: #e3e3e3;
  /* Brand red: the closest shades to the logo's #ed1c24 that meet WCAG AA (4.5:1) as text on light
     backgrounds and behind white button text. */
  --accent: #e3121a; --accent-hover: #c61017; --link: #e3121a; --link-hover: #c61017;
  --ok: #1a7f37; --warn: #9a6700; --bad: #cf222e; --code: #ececec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #030303; --bg: #030303; --card: #0a0a0a; --fg: #cdcccc; --title: #fff; --muted: #8a8a8a; --border: #2a2a2a;
    /* Full-strength red glows on dark backgrounds, so buttons use a deeper shade that lightens on hover, and
       links a lighter tint. No single red reaches 4.5:1 on both white and dark backgrounds. */
    --accent: #b42228; --accent-hover: #c5262c; --link: #e25a5f; --link-hover: #e77479;
    --ok: #3fb950; --warn: #d29922; --bad: #f85149; --code: #1f1f1f;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the inline-flex buttons below would otherwise override it */
body { margin: 0; font: 15px/1.45 var(--sans); font-feature-settings: "liga" 1, "calt" 1; background: var(--page); color: var(--fg); }
/* Left-aligned under the breadcrumb, at the same 24px inset as the top bar (16px on phones), so the content's edge
   lines up with the title above it however wide the window or however the sidebar is set. */
main { max-width: 1248px; margin: 0; padding: 24px 24px 64px; }
h1, h2, h3 { color: var(--title); }
h2 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 8px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
/* Links in data (tables) are names, not calls to action: title-colored, underlined on hover, so a table of
   them doesn't read as a table of red errors. Links in sentences keep the accent. */
td a { color: var(--title); }
td a:hover { color: var(--title); text-decoration: underline; text-underline-offset: 2px; }
/* Focus is neutral grey, not the accent: red around an empty field reads as "this is wrong". Fields show it on
   any focus; buttons, links and disclosures on keyboard focus. */
input:not([type=checkbox], [type=radio], [type=file]):focus, select:focus, textarea:focus { outline: 2px solid var(--muted); outline-offset: -1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; border-radius: 4px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input:not([type=checkbox], [type=radio], [type=file]), select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--fg); }
input.grow { flex: 1 1 280px; font-size: 1.05rem; }
textarea { width: 100%; resize: vertical; }
::placeholder { color: var(--muted); opacity: .6; }
textarea.mono, input.mono { font-family: var(--mono); font-size: .85rem; }

/* Buttons. a.button gives a link the same look, for navigation that should read as an action. */
button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; padding: 8px 14px; border-radius: 7px; border: 1px solid var(--border); background: var(--card); color: var(--fg); cursor: pointer; }
button:hover:not(:disabled), a.button:hover { border-color: var(--muted); color: var(--fg); }
button.primary, a.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled), a.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
button:disabled { opacity: .6; cursor: default; }
button.link { border: none; background: none; color: var(--link); padding: 4px 6px; }
button.link:hover { color: var(--link-hover); }
button.danger { color: var(--bad); }
button.danger:not(.link):hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
/* A row of what an action does on the left and its button on the right, lines between rows: the Danger Zone
   (the last card on a page, holding its destructive actions, each with what it loses). */
.card.danger-zone { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.action-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.action-row > div { flex: 1 1 260px; }
.action-row strong { color: var(--title); }
.action-row .hint { margin-top: 2px; }
.action-row form { margin: 0; }
.action-row + .action-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
button svg, a.button svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
form.inline { display: inline; margin: 0; }

.label, label.label { display: block; font-size: .85rem; color: var(--muted); margin: 14px 0 6px; }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field .label { margin-top: 0; }
.field input:not([type=checkbox], [type=radio]), .field select { width: 100%; max-width: 480px; }
/* Two short fields side by side, stacking when there isn't room. */
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 760px; margin-bottom: 14px; }
.field-pair .field { margin-bottom: 0; }
.field-pair .field input:not([type=checkbox], [type=radio]) { max-width: none; }
.hint { font-size: .8rem; color: var(--muted); margin: 4px 0 0; }
.badge { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); } .muted { color: var(--muted); }
.badge.key { text-transform: none; letter-spacing: 0; }   /* badges that hold a value, keeping its case */
.qname { font-family: var(--mono); font-size: .82rem; color: var(--muted); margin: 4px 0 10px; word-break: break-all; }
pre, code { font-family: var(--mono); font-size: .85rem; }
pre, code, .qname, textarea.mono, input.mono { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
pre { background: var(--code); padding: 10px 12px; border-radius: 7px; margin: 6px 0; white-space: pre-wrap; word-break: break-all; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
td code { word-break: break-all; }
td.num, th.num { text-align: right; }
td.num + td, th.num + th { padding-left: 24px; }   /* room between a right-aligned number and the next column */
td.nowrap { white-space: nowrap; }
/* Name and value tables (Configuration): the name column only as wide as the longest name. */
table.settings th { width: 1%; }
table.settings th code { color: var(--title); font-weight: 400; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar > .row { margin-left: auto; }   /* stay right-aligned when the toolbar wraps */
.count { font-weight: 400; font-size: .9rem; }
.card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-head > .row { margin-left: auto; }
/* Single-record pages (adding, editing or viewing one thing): one centered column the width of a form, so every
   card on the page, notices and Danger Zone included, lines up at the same width. Its fields take the full width. */
main.narrow { max-width: 608px; }   /* 560px of content, plus main's padding */
main.narrow .field input:not([type=checkbox], [type=radio]), main.narrow .field select, main.narrow .with-button,
main.narrow .field-pair { max-width: none; }
.form-actions { margin-top: 16px; }
/* Dialogs, opened by app.js from links that also work as plain pages. Escape, Cancel, the close button or a
   click outside closes them. */
dialog.modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--fg); box-shadow: 0 24px 60px rgb(0 0 0 / .3); }
dialog.modal::backdrop { background: rgb(0 0 0 / .5); }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { flex: 1; }
.modal-head button.link { color: var(--muted); padding: 6px; }
.modal-head button.link:hover { color: var(--title); }
.modal-body { padding: 18px 20px 20px; }
.modal-body .field input:not([type=checkbox], [type=radio]), .modal-body .field select { max-width: none; }
/* A dialog's buttons sit in a footer at the bottom right, Cancel then the main button, as in the Cloudflare
   dashboard's dialogs. Reversed in CSS only, so the main button stays first for keyboards. */
.modal-body .form-actions { flex-direction: row-reverse; justify-content: flex-start; margin: 20px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--border); }
details.tree { margin: 8px 0 4px; font-size: .9rem; }
details.tree summary { cursor: pointer; color: var(--muted); }
details.tree summary:hover { color: var(--title); }
/* Small disclosures (the audit log's All details) have a chevron after their label. */
details.tree > summary { list-style: none; }
details.tree > summary::-webkit-details-marker { display: none; }
details.tree > summary::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 2px 2px 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
details.tree[open] > summary::after { transform: rotate(45deg); margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { details.tree > summary::after { transition: none; } }
.empty { color: var(--muted); margin: 0; }
/* An empty list with something to do about it: an icon, one sentence and the action (the list's Add button
   only shows once there's something in it). */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px 32px; text-align: center; color: var(--muted); }
.empty-state > svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty-state p { margin: 0; max-width: 420px; }
/* A notice: a box with an icon, the text in the normal color and the status only on the icon. Used for the
   result of an action (the flash), things that can't be done and why, and where you are. */
.notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: .9rem; color: var(--fg); }
.notice svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notice-ok svg { stroke: var(--ok); } .notice-warn svg { stroke: var(--warn); } .notice-bad svg { stroke: var(--bad); }
.signin .notice { text-align: left; margin-bottom: 16px; }

/* Footer, after dash.cloudflare.com: one row of links split by thin dividers, then the copyright. */
/* 48px like the top bar, and like the sidebar's collapse toggle, so their top borders line up at the bottom of the page. */
footer { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 6px; min-height: 48px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: .8rem; }
footer nav { display: flex; flex-wrap: wrap; row-gap: 6px; }
footer nav a, .copyright { padding: 0 12px; line-height: 1.1; }
footer nav a { color: var(--title); }
footer nav a:hover { color: var(--link-hover); }
footer nav a + a, footer nav + .copyright { border-left: 1px solid var(--border); }
.copyright { color: var(--muted); }

/* Layout: sidebar and top bar, after dash.cloudflare.com */
body { display: flex; min-height: 100vh; }
/* Clipped sideways and kept to one line per item, so the width animation when collapsing or expanding
   reveals the labels instead of overflowing (which would flash scrollbars). */
.sidebar { flex: none; width: 220px; position: sticky; top: 0; height: 100vh; overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--border); }
.brand, .sidebar nav a, .sidebar nav .group, .sidebar-toggle button, .nav-signout button { white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--title); font-size: .875rem; font-weight: 600; }
.brand:hover { color: var(--title); }
.brand img { display: block; }
.badge.beta { color: var(--muted); }
.brand .beta { margin-left: -4px; font-size: .62rem; padding: 1px 6px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.sidebar nav .group { font-size: .75rem; color: var(--muted); padding: 12px 10px 4px; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; color: var(--title); font-size: .875rem; font-weight: 500; }
.sidebar nav a:hover { background: color-mix(in srgb, var(--code) 60%, transparent); color: var(--title); }
.sidebar nav a.active { background: var(--code); }
.sidebar nav svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.sidebar nav a:hover svg, .sidebar nav a.active svg { color: var(--title); }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 48px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.topbar h1 { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 600; margin: 0; min-width: 0; }
/* The page's title leads with its menu item's icon, as in the sidebar. */
.topbar h1 > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.topbar h1 .title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Who's signed in: their initials at the right of the top bar, in a neutral circle (color is kept for meaning). */
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.who form { margin: 0; }
.who .on-phone { display: none; }
.avatar-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; border-radius: 999px; cursor: pointer; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 999px; background: var(--code); color: var(--title); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.avatar-button:hover .avatar { border-color: var(--muted); }
.crumb { color: var(--muted); font-weight: 400; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--title); }
main { width: 100%; }
/* The page's content, centered in the space beside the sidebar. */
.page-row { flex: 1 0 auto; display: flex; flex-direction: column; }
.page-row > main { flex: 1; min-width: 0; margin: 0 auto; }

/* The sidebar's collapse toggle sits at the bottom. */
.sidebar { display: flex; flex-direction: column; }
.sidebar-toggle { display: flex; align-items: center; height: 48px; flex: none; margin: auto 0 0; padding: 0 8px; border-top: 1px solid var(--border); }
.sidebar-toggle button { display: flex; width: 100%; justify-content: flex-start; padding: 6px 10px; border-radius: 6px; color: var(--muted); font-size: .875rem; font-weight: 500; }
.sidebar-toggle button:hover { color: var(--title); background: color-mix(in srgb, var(--code) 60%, transparent); }
.sidebar-toggle button > span { display: inline-flex; align-items: center; gap: 10px; }
.sidebar-toggle svg { width: 16px; height: 16px; stroke-width: 1.75; }
.when-collapsed { display: none !important; }

/* The account area: who's signed in and Sign out, at the bottom of the menu under a line (above Collapse Sidebar
   on wider screens, at the foot of the drawer on phones). The menu stretches so it sits at the bottom. */
.sidebar nav { flex: 1 0 auto; }
.nav-account { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: auto 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); }
/* Clicking the initials in the top bar flashes the account area in grey (the active menu item's fill), after the
   sidebar or drawer has slid open if it had to, to show where it is: a quick blink, then a flash that holds and
   fades. Only its color changes, nothing moves. It's a
   layer behind the area (isolation keeps it there), inset below the line. */
.nav-account.hint::before { content: ""; position: absolute; inset: 5px -4px -2px; z-index: -1; border-radius: 8px; background: var(--code); animation: account-hint 1.6s ease-out .2s both; }
@keyframes account-hint { 0%, 14%, 100% { opacity: 0; } 6%, 24%, 55% { opacity: 1; } }
.nav-account .name { padding: 0 10px; color: var(--title); font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account .email { padding: 0 10px; font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-signout { margin: 0; }
.nav-signout button.link { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px 10px; border-radius: 6px; color: var(--title); font-size: .875rem; font-weight: 500; }
.nav-signout button.link:hover { background: color-mix(in srgb, var(--code) 60%, transparent); color: var(--title); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Collapsed (desktop only), after the Cloudflare dashboard: icons only, names as tooltips and for screen
   readers, group headings as thin dividers. */
@media (min-width: 761px) {
  .sidebar { transition: width .15s ease; }
  .sidebar-collapsed .sidebar { width: 57px; }
  .sidebar-collapsed .brand { justify-content: center; padding: 0; }
  .sidebar-collapsed .brand span { display: none; }
  .sidebar-collapsed .sidebar nav a, .sidebar-collapsed .sidebar-toggle button { justify-content: center; padding: 8px; }
  .sidebar-collapsed .sidebar nav a > span, .sidebar-collapsed .sidebar-toggle button > span > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* The account area keeps the expanded sidebar's width (220px less the menu's padding) whatever the sidebar's
     width, so while the width animates its line, address and Sign out don't wrap or re-shorten: the sidebar's
     edge reveals them, as it does the menu labels. Collapsed, it fades out (and, hidden, can't be tabbed to), so a
     click meant for Expand Sidebar can never sign anyone out. */
  .nav-account { width: 204px; transition: opacity .15s ease, visibility .15s; }
  .sidebar-collapsed .nav-account { visibility: hidden; opacity: 0; }
  .sidebar-collapsed .sidebar nav .group { height: 0; margin: 8px 6px; padding: 0; overflow: hidden; border-top: 1px solid var(--border); }
  .sidebar-collapsed .when-expanded { display: none !important; }
  .sidebar-collapsed .when-collapsed { display: inline-flex !important; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .sidebar, .nav-account { transition: none; }
}

/* The narrow-screen menu (below) is hidden on wider screens. */
.nav-open, .nav-toggle, .nav-backdrop { display: none; }

/* Narrow screens, after the Cloudflare dashboard: a top bar with a menu button that slides the sidebar in
   as a drawer over the page, with a backdrop that closes it when tapped. */
@media (max-width: 760px) {
  body { flex-direction: column; }
  body:has(.nav-open:checked) { overflow: hidden; }   /* the page behind doesn't scroll while the menu is open */
  /* The checkbox holding the open/closed state stays focusable, for keyboards. */
  .nav-open { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .sidebar { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: row; align-items: center; width: auto; height: 48px;
    overflow: visible; border-right: none; border-bottom: 1px solid var(--border); background: var(--page); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; color: var(--title); cursor: pointer; }
  .nav-toggle span { display: inline-flex; }
  .nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .nav-toggle .close-icon, .nav-open:checked ~ .sidebar .nav-toggle .open-icon { display: none; }
  .nav-open:checked ~ .sidebar .nav-toggle .close-icon { display: inline-flex; }
  .nav-open:focus-visible ~ .sidebar .nav-toggle { outline: 2px solid var(--muted); outline-offset: -8px; border-radius: 12px; }
  .brand { height: 48px; padding-left: 0; border-bottom: none; }
  /* The drawer: the whole sidebar menu, group headings included. Hidden (not just moved)
     when closed, so its links can't be tabbed to. */
  .sidebar nav { position: fixed; top: 48px; bottom: 0; left: 0; z-index: 20; width: min(280px, 85vw); padding: 8px;
    overflow-y: auto; background: var(--page); border-right: 1px solid var(--border);
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .nav-open:checked ~ .sidebar nav { transform: none; visibility: visible; }
  .sidebar nav a { padding: 10px 12px; font-size: .95rem; }   /* bigger tap targets */
  .nav-signout button.link { min-height: 44px; font-size: .95rem; }
  .nav-open:checked ~ .nav-backdrop { display: block; position: fixed; inset: 48px 0 0 0; z-index: 15; background: rgba(0, 0, 0, .45); }
  .topbar { padding: 0 16px; }
  main { padding-left: 16px; padding-right: 16px; }
  .sidebar-toggle { display: none; }   /* the drawer always shows the full menu */
  /* On a phone the initials open the drawer, with a full-size tap target; the Admin marker is in the drawer. */
  .who .on-desktop { display: none; }
  .who .on-phone { display: inline-flex; width: 44px; height: 44px; margin-right: -8px; }
  /* Tables keep their key columns; the rest wait for a wider screen. */
  .wide-only { display: none; }
  .table-wrap > table th, .table-wrap > table td { padding-left: 6px; padding-right: 6px; }
  .table-wrap > table th:first-child, .table-wrap > table td:first-child { padding-left: 12px; }
  .table-wrap > table th:last-child, .table-wrap > table td:last-child { padding-right: 12px; }
  /* When the last columns are hidden (wide-only), the last one showing gets the edge's padding instead. */
  .table-wrap > table :is(th, td):not(.wide-only):has(+ .wide-only:last-child) { padding-right: 12px; }
  .badge { letter-spacing: 0; padding: 2px 6px; }
  th { white-space: normal; }
  table { font-size: .85rem; }
  /* Phone-first entry. iOS zooms the page into any field under 16px, so fields are 16px here; fields and
     buttons are at least 44px tall, a comfortable thumb target. */
  input:not([type=checkbox], [type=radio], [type=file]), select, textarea { font-size: 16px; min-height: 44px; }
  button:not(.link, .copy), a.button { min-height: 44px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .sidebar nav { transition: none; }
}

/* A card's intro: one muted style, under its heading. .hint is only for help under a field. */
.intro { margin: 0 0 12px; color: var(--muted); }
/* Sentences about the thing above (who changed it and when): sans, muted. .qname is for the names and values
   themselves. */
.meta { margin: 4px 0 10px; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.card > h2 { margin-bottom: 12px; }
.card > .intro:last-child { margin-bottom: 0; }
.table-wrap > h2 { margin-bottom: 0; }
h3.form-section { margin: 22px 0 6px; font-size: 1rem; }
.fine-print { margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.field-error { margin-top: 10px; }
.table-wrap { padding: 0; overflow-x: auto; }
.table-wrap > h2, .table-wrap > .card-head { padding: 14px 16px 6px; }
.table-wrap > table th:first-child, .table-wrap > table td:first-child { padding-left: 16px; }
.table-wrap > table th:last-child, .table-wrap > table td:last-child { padding-right: 16px; }
.table-wrap > table tr:last-child td { border-bottom: none; }
.table-wrap > .empty, .table-wrap > .intro { padding: 0 16px 14px; }
/* A list's Add button makes its head taller than a plain title: give the intro under it some room. */
.table-wrap > .card-head + .intro { margin-top: 8px; }

/* The sign-in page: no sidebar, one centered column. */
body.plain { flex-direction: column; }
body.plain main { margin: 0 auto; }
body.plain .topbar { padding: 0 16px; }
body.plain .topbar .brand { border: none; padding: 0; height: auto; }
.signin { max-width: 420px; margin: 64px auto 0; text-align: center; }
.signin h2 { display: block; margin-bottom: 8px; }
.signin p { margin: 0 0 16px; }
.signin .fine-print { margin: 14px 0 0; }
.signin .bad { margin-bottom: 16px; }
.signin-dev { justify-content: center; }   /* the two developer sign-in buttons */

/* Trips (My Trips, the trip form). Phone first: see DESIGN.md. */
.on-site h2 { margin-bottom: 10px; }
.on-site .action-row strong { font-size: 1rem; }
.month-nav { display: inline-flex; gap: 4px; }
.month-nav .button { padding: 6px 8px; }
.t-route .badge { margin-left: 4px; }
.t-route .hint { margin-top: 2px; }
tr.retired td { color: var(--muted); }
dl.defs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
dl.defs dt { color: var(--title); font-weight: 600; }
dl.defs dd { margin: 0; overflow-wrap: anywhere; }
/* A field with a small action beside it: Now on a time, Use my location on the destination. */
.with-button { display: flex; align-items: center; gap: 8px; max-width: 480px; }
.with-button input { flex: 1; min-width: 0; }
.field .with-button input:not([type=checkbox], [type=radio]) { max-width: none; }
.with-button button.link { flex: none; white-space: nowrap; }
/* A form's heading names the thing being edited, with a line about it underneath. */
main.narrow .card > h2:has(+ .meta) { margin-bottom: 4px; }
main.narrow .card > h2 + .meta { margin-bottom: 16px; }
[data-distance]:empty, [data-located]:empty { display: none; }
label.check { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; color: var(--fg); cursor: pointer; }
label.check input { width: 18px; height: 18px; margin: 0; flex: none; }
/* The return trip folds away under a line, with the same chevron as other small disclosures. */
details.return-block { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
details.return-block > summary { cursor: pointer; font-weight: 600; color: var(--title); list-style: none; }
details.return-block > summary::-webkit-details-marker { display: none; }
details.return-block > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 3px 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
details.return-block[open] > summary::after { transform: rotate(45deg); margin-bottom: 5px; }
@media (prefers-reduced-motion: reduce) { details.return-block > summary::after { transition: none; } }
/* Admin lists: a row per item, named by a link to its page; purposes have arrows to reorder them. */
.list-table td { vertical-align: middle; }
.list-table td .badge { margin-left: 6px; }
.list-table .order button.link { padding: 2px 8px; color: var(--title); }
.list-table .order button.link:disabled { color: var(--muted); opacity: .4; }
a.button.fab { display: none; }   /* a.button would otherwise show it */

@media (max-width: 760px) {
  /* My Trips: each trip a card of date and miles, the route, then times and purpose. */
  table.trips thead { display: none; }
  table.trips, table.trips tbody { display: block; }
  table.trips tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "date miles" "route route" "time purpose"; gap: 2px 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  table.trips tr:last-child { border-bottom: none; }
  .table-wrap > table.trips > tbody > tr > td { padding: 0; border: none; }
  .t-date { grid-area: date; color: var(--muted); font-size: .85rem; }
  .t-miles { grid-area: miles; color: var(--title); font-weight: 600; }
  .t-route { grid-area: route; }
  .t-time { grid-area: time; color: var(--muted); font-size: .85rem; }
  .t-purpose { grid-area: purpose; text-align: right; color: var(--muted); font-size: .85rem; }
  /* Add trip floats at the bottom, where a thumb reaches, instead of sitting in the card's head. */
  a.button.add-head { display: none; }
  a.button.fab { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 10; }
  main:has(.fab) { padding-bottom: 88px; }
  main.narrow .form-actions .primary { flex: 1; }
  dl.defs { grid-template-columns: 1fr; gap: 0; }
  dl.defs dd { margin-bottom: 8px; }
}
/* A site's short names, under its name in the list. */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--code); font-family: var(--mono); font-size: .78rem; font-variant-ligatures: none; }
/* All Mileage: a row per person, muted when they logged nothing that month, and the month's total under a line. */
table.people tr.none td, table.people tr.none td a { color: var(--muted); }
table.people tfoot th { color: var(--title); border-bottom: none; border-top: 1px solid var(--border); padding-top: 8px; padding-bottom: 8px; }
.table-wrap > table.people tfoot th:first-child { padding-left: 16px; }
.table-wrap > table.people tfoot th:last-child { padding-right: 16px; }