/* The panel's look. BUILT from `static/design/redesign.css` by
   `combyn/design_publish.py` when somebody presses Publish in the design lab
   -- do not edit this file: the next publish replaces it. Change the lab file
   instead. Loaded by `base.html` after `combyn.css`. */

/* The redesign layer.

   Loaded by the design lab (/design) and by no other page, after the live
   stylesheet, so anything written here overrides `combyn.css` on the lab only.
   Compare with `?layer=off`. When a design is agreed, the master console ports
   it into `combyn/static/css/combyn.css`.

   Version 1 (2026-10-15): calmer surfaces, one strong accent, rounder shapes,
   soft depth instead of borders, and a dark mode that follows the phone.

   Version 2 (2026-10-15): glass top bar, gradient-edged cards that lift and
   glow, a slow aurora behind the page, cards that rise in on load, press
   feedback on every button, and table rows that become cards on a phone.
   All motion stops under `prefers-reduced-motion`.

   Version 3 (2026-10-15): after MaterialM (WrapPixel's Bootstrap 5 admin
   template), tokens taken from its own SCSS: sky-blue primary #00a1ff, violet
   secondary, 24px borderless cards on #f8fafd with a faint shadow, pill
   buttons, tinted badges, 7px transparent inputs, Inter where installed. Its
   pastel text on pastel tint is too faint to read, so tinted text is
   darkened here. Its left sidebar is not copied: that is `base.html`, which
   every live page shares. v2 is in git (3e38b4f).

   Version 4 (2026-10-15): iOS. Apple's system colours and the system font
   (SF on Apple devices), the grouped grey background with white inset
   groups, hairline separators, a frosted bar, a 34px bold large title, the
   segmented control for tabs, filled grey fields, a switch for the checkbox,
   and press-to-dim instead of hover. Dark mode is iOS's true black. v3
   (MaterialM) is the commit before this one.

   Version 5 (2026-10-15): the iOS structure, not only its colours. A section
   is a bold header *above* a white inset group; a form is rows with the label
   on the left and the value on the right, hairlines inset 16px; a stacked
   table row reads "Date ...... 12 Oct" like a Wallet detail; dashboard tiles
   are home-screen widgets. Checked in headless Chromium at 390px and 1280px. */

/* --- tokens ---------------------------------------------------------------- */
:root {
  --font:          -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;

  /* iOS semantic colours: systemGroupedBackground, label, secondaryLabel ... */
  --bg:            #f2f2f7;
  --bg-raised:     #ffffff;
  --bg-sunken:     rgba(118, 118, 128, .12);   /* tertiarySystemFill: fields, segment track */
  --bg-hover:      #e5e5ea;
  --bg-bar:        rgba(249, 249, 249, .78);

  /* Brand colours (Christoph, 2026-10-15): serious blue for text,
     competence blue for the accent. */
  --text:          #192d50;
  --text-muted:    rgba(25, 45, 80, .62);
  --text-faint:    rgba(25, 45, 80, .32);

  --border:        rgba(60, 60, 67, .29);      /* separator */
  --border-strong: #c6c6c8;                    /* opaqueSeparator */

  /* Calmer and pastel (2026-10-15): the brand blue's hue, toned down; dusty
     mid-tones still dark enough for white text (4.5:1), pale tints behind. */
  --accent:        #2a74b8;
  --accent-hover:  #23649f;
  --accent-soft:   #e2edf8;
  --accent-text:   #ffffff;
  --accent-2:      #8a7bbf;
  --accent-2-soft: #ece8f6;

  --danger:        #b35a5a;
  --danger-soft:   #f6e4e4;
  --success:       #5f9e7a;
  --success-soft:  #e1f0e6;
  --warning:       #c99350;
  --warning-soft:  #f8ecdb;
  --accent-mid:    #b3cbe6;   /* the "less certain" step in meters and plan bars */
  --danger-mid:    #e2b4b4;
  --warning-mid:   #ecd3ac;

  --radius:    12px;
  --radius-sm: 10px;
  --radius-lg: 16px;

  --shadow-sm: none;
  --shadow:    0 4px 16px rgba(0, 0, 0, .08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, .18);

  --hair:      .5px;
  --ease:      cubic-bezier(.25, .1, .25, 1);
  --spring:    cubic-bezier(.34, 1.36, .64, 1);
  --tap:       44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;   /* native pickers and the date icon follow */
    --bg:            #000000;
    --bg-raised:     #1c1c1e;
    --bg-sunken:     rgba(118, 118, 128, .24);
    --bg-hover:      #2c2c2e;
    --bg-bar:        rgba(22, 22, 23, .78);
    --text:          #ffffff;
    --text-muted:    rgba(235, 235, 245, .6);
    --text-faint:    rgba(235, 235, 245, .3);
    --border:        rgba(84, 84, 88, .65);
    --border-strong: #38383a;
    /* On black the pastels are light, so a filled button takes dark text. */
    --accent:        #93b8e2;
    --accent-hover:  #aac8ea;
    --accent-soft:   rgba(147, 184, 226, .18);
    --accent-text:   #0f1d33;
    --accent-2:      #b7aae6;
    --accent-2-soft: rgba(183, 170, 230, .18);
    --danger:        #e3a0a0;
    --danger-soft:   rgba(227, 160, 160, .18);
    --success:       #94c9a8;
    --success-soft:  rgba(148, 201, 168, .18);
    --warning:       #e6c08c;
    --warning-soft:  rgba(230, 192, 140, .18);
    --accent-mid:    #3c5a80;
    --danger-mid:    #7a4848;
    --warning-mid:   #7a6038;
    --shadow:    0 4px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .6);
  }
}
/* The same, for somebody who chose dark in their account. */
  :root[data-theme="dark"] {
    color-scheme: dark;   /* native pickers and the date icon follow */
    --bg:            #000000;
    --bg-raised:     #1c1c1e;
    --bg-sunken:     rgba(118, 118, 128, .24);
    --bg-hover:      #2c2c2e;
    --bg-bar:        rgba(22, 22, 23, .78);
    --text:          #ffffff;
    --text-muted:    rgba(235, 235, 245, .6);
    --text-faint:    rgba(235, 235, 245, .3);
    --border:        rgba(84, 84, 88, .65);
    --border-strong: #38383a;
    /* On black the pastels are light, so a filled button takes dark text. */
    --accent:        #93b8e2;
    --accent-hover:  #aac8ea;
    --accent-soft:   rgba(147, 184, 226, .18);
    --accent-text:   #0f1d33;
    --accent-2:      #b7aae6;
    --accent-2-soft: rgba(183, 170, 230, .18);
    --danger:        #e3a0a0;
    --danger-soft:   rgba(227, 160, 160, .18);
    --success:       #94c9a8;
    --success-soft:  rgba(148, 201, 168, .18);
    --warning:       #e6c08c;
    --warning-soft:  rgba(230, 192, 140, .18);
    --accent-mid:    #3c5a80;
    --danger-mid:    #7a4848;
    --warning-mid:   #7a6038;
    --shadow:    0 4px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .6);
  }


/* --- page ------------------------------------------------------------------ */
body {
  background: var(--bg); font-size: 17px; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* The large title: 34px bold, tight, as at the top of every iOS list. */
h1 { font-size: 34px; line-height: 41px; letter-spacing: .01em; font-weight: 700; color: var(--text); }
h2 { font-size: 20px; letter-spacing: .02em; font-weight: 600; color: var(--text); }
.muted { color: var(--text-muted); }
a { color: var(--accent); }

/* The frosted navigation bar with its hairline. */
.topbar {
  background: var(--bg-bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--hair) solid var(--border);
  box-shadow: none;
}
/* The real logo instead of the "C" mark and the word: the link keeps its
   text for screen readers, at font-size 0. */
.brand {
  font-size: 0; width: 112px; height: 26px;
  background: url("combyn-logo.png") left center / contain no-repeat;
}
.brand-mark { display: none; }
.auth-head .brand { font-size: 0; }   /* combyn.css sizes the text here; the logo replaces it */
.nav a { border-radius: 8px; font-weight: 500; color: var(--text-muted); transition: color .2s, opacity .2s; }
.nav a:hover { background: transparent; color: var(--text); }
.nav a.active { background: transparent; color: var(--accent); font-weight: 600; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; border-radius: 8px; }

/* --- cards ----------------------------------------------------------------- */
/* An inset grouped list: white on grey, no border, no shadow. */
.card {
  border: 0; border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: none;
  transition: transform .35s var(--spring), opacity .15s;
  animation: rise .5s var(--ease) backwards;
}
.stack-l > :nth-child(2) { animation-delay: .05s; }
.stack-l > :nth-child(3) { animation-delay: .1s; }
.stack-l > :nth-child(4) { animation-delay: .15s; }
.stack-l > :nth-child(5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* iOS has no hover: a tapped cell greys, a tapped tile shrinks a touch. */
a.card:hover { text-decoration: none; }
a.card:active { transform: scale(.97); transition-duration: .1s; }
/* The disclosure chevron, grey and quiet, the way a navigable cell ends. */
a.card.brief .brief-go { color: var(--text-faint); font-weight: 600; font-size: 1.1rem; }
.card-head, .card-body { padding-left: 16px; padding-right: 16px; }
.card-head { border-bottom: none; padding-top: 14px; padding-bottom: 4px; }
.card-head h2 { font-size: 17px; font-weight: 600; }
.card-body { padding-bottom: 16px; }
/* Dashboard tiles are widgets: 22px corners, a small coloured title, the
   content large. A widget in trouble turns its title red. */
.dash-tile > .card { border-radius: 22px; padding-block: 2px 4px; }
.dash-tile .card-head h2 { font-size: 15px; font-weight: 600; color: var(--accent); }
.dash-tile .card.is-bad .card-head h2 { color: var(--danger); }
.brief.is-bad { border-left: 0; }
/* The arrow in the markup becomes iOS's disclosure chevron. */
a.card.brief .brief-go { font-size: 0; }
a.card.brief .brief-go::after { content: "\203A"; font-size: 26px; line-height: 1; font-weight: 400; }
.brieflist > li { border-bottom: var(--hair) solid var(--border); font-size: 17px; padding-block: 8px; }
.brieflist > li:last-child { border-bottom: 0; }

/* A section is a grouped list: the header sits above the white group on the
   grey page, and only the body is the group. */
section.card { background: transparent; border-radius: 0; overflow: visible; }
section.card > .card-head { padding: 0 4px 8px; align-items: center; }
section.card > .card-head h2 { font-size: 22px; font-weight: 700; letter-spacing: .01em; }
section.card > .card-body,
section.card > .table-wrap { background: var(--bg-raised); border-radius: var(--radius); }
section.card > .card-body { padding: 16px; }
/* A header action is a plain blue word, as "Edit" is in a nav bar. */
section.card > .card-head .btn,
section.card > .card-head .btn:hover {
  background: transparent; padding: 0; min-height: 0; border-radius: 0;
  font-size: 17px; font-weight: 400; color: var(--accent);
}

/* --- buttons --------------------------------------------------------------- */
/* UIButton's configurations: filled (primary), tinted (default), plain
   (ghost). Pressed, a button dims rather than moves. */
.btn {
  border-radius: 12px; padding: 11px 20px; font-size: 17px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border: 0; box-shadow: none;
  transition: opacity .15s, background .15s;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); box-shadow: none; }
.btn:active { opacity: .55; transition-duration: 0s; }
.btn-primary, .btn-primary:hover { background: var(--accent); color: var(--accent-text); }
.btn-ghost, .btn-ghost:hover { background: transparent; color: var(--accent); font-weight: 400; }
.btn-danger, .btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-sm { padding: 6px 14px; font-size: 15px; border-radius: 999px; }   /* the small capsule */
.btn:disabled { opacity: .35; }

/* --- badges and alerts ----------------------------------------------------- */
/* Tinted capsules. iOS green and orange are too light to read as text on
   their own tint, so the text is a darker `-ink` shade of the same colour. */
:root {
  --accent-ink:  color-mix(in srgb, var(--accent) 80%, #000);
  --success-ink: color-mix(in srgb, var(--success) 62%, #000);
  --warning-ink: color-mix(in srgb, var(--warning) 55%, #000);
  --danger-ink:  color-mix(in srgb, var(--danger) 70%, #000);
  --accent-2-ink: color-mix(in srgb, var(--accent-2) 70%, #000);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-ink:  var(--accent);  --success-ink: var(--success);
    --warning-ink: var(--warning); --danger-ink:  var(--danger);
    --accent-2-ink: var(--accent-2);
  }
}
/* The same, for somebody who chose dark in their account. */
  :root[data-theme="dark"] {
    --accent-ink:  var(--accent);  --success-ink: var(--success);
    --warning-ink: var(--warning); --danger-ink:  var(--danger);
    --accent-2-ink: var(--accent-2);
  }

.badge, .task-state { border-radius: 999px; padding: 3px 10px; font-weight: 600; font-size: 13px; border: none; }
.badge { background: var(--bg-sunken); color: var(--text-muted); }
.card-head .badge:not([class*="badge-"]) { background: var(--danger); color: #fff; min-width: 22px; text-align: center; }
.badge-accent  { background: var(--accent-soft);  color: var(--accent-ink); }
.badge-success { background: var(--success-soft); color: var(--success-ink); }
.badge-warning { background: var(--warning-soft); color: var(--warning-ink); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger-ink); }
.task-state.st-doing { background: var(--accent-2-soft); color: var(--accent-2-ink); }
.task-state.st-done  { background: var(--success-soft);  color: var(--success-ink); }
.alert { border: none; border-radius: var(--radius); padding: 12px 16px; font-size: 15px; font-weight: 500; }
.alert-success { color: var(--success-ink); }
.alert-error   { color: var(--danger-ink); }

/* --- forms ----------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-radius: var(--radius-sm); border: 0;
  background: var(--bg-sunken); color: var(--text); padding: 10px 14px; min-height: 44px;
  font-size: 17px; transition: box-shadow .15s;
}
/* The open list takes the select's colours, and `--bg-sunken` is translucent:
   Chrome draws that over white, so dark mode got pale text on white. */
option, optgroup { background: var(--bg-raised); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; box-shadow: 0 0 0 2px var(--accent);
}
/* The checkbox is a UISwitch: 51 x 31, green when on, a white knob that
   slides. `appearance: none` keeps it a real checkbox for forms and readers. */
.perm input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0 10px 0 0;
  width: 51px; height: 31px; border-radius: 999px; vertical-align: middle;
  background: rgba(120, 120, 128, .16); position: relative; cursor: pointer;
  transition: background .25s var(--ease);
}
.perm input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06);
  transition: transform .3s var(--spring);
}
.perm input[type="checkbox"]:checked { background: var(--success); }
.perm input[type="checkbox"]:checked::after { transform: translateX(20px); }
.perm { display: flex; align-items: center; }
input[type="checkbox"] { accent-color: var(--accent); }
.field > label { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); padding-left: 4px; }
.hint { color: var(--text-muted); font-size: 13px; padding-left: 4px; }

/* A form is a grouped list of rows: label left, value right, a hairline
   between rows that starts at the text, not at the edge. */
section.card > form.card-body { background: transparent; padding: 0; max-width: 42rem; }   /* an iPad form sheet's width */
form.card-body > .grid { background: var(--bg-raised); border-radius: var(--radius); gap: 0; grid-template-columns: minmax(0, 1fr); }
form.card-body .field {
  display: grid; grid-template-columns: minmax(6rem, 28%) minmax(0, 1fr);
  align-items: center; column-gap: 12px; margin: 0; padding: 0 16px;
  min-height: 48px; position: relative;
}
form.card-body .field + .field::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0;
  border-top: var(--hair) solid var(--border);
}
form.card-body .field > label {
  font-size: 17px; text-transform: none; letter-spacing: 0;
  color: var(--text); padding: 0; margin: 0;
}
form.card-body .field:focus-within > label { color: var(--accent); }
form.card-body .field :is(input, select, textarea) {
  background: transparent; box-shadow: none; border-radius: 0; padding: 12px 0; width: 100%;
}
form.card-body .field :is(select, input[type="date"]) { text-align: right; text-align-last: right; color: var(--text-muted); }
form.card-body .field textarea { resize: none; }
form.card-body .field .hint { grid-column: 2; margin: -8px 0 10px; padding: 0; }
form.card-body > .perm,
form.card-body > .perm:hover,
form.card-body > .perm:has(input:checked) {
  background: var(--bg-raised); border: 0; border-radius: var(--radius);
  padding: 8px 16px; min-height: 48px; font-size: 17px;
  flex-direction: row-reverse; justify-content: space-between;
}
form.card-body > .perm input[type="checkbox"] { margin: 0; }

/* --- tables ---------------------------------------------------------------- */
table.data thead th {
  font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .02em;
  color: var(--text-muted); background: transparent;
}
table.data td, table.data th { padding-top: 12px; padding-bottom: 12px; font-size: 17px; }
table.data td { color: var(--text-muted); }
table.data tbody th, table.data th[scope="row"] {
  background: transparent; text-transform: none; letter-spacing: 0;
  color: var(--text); font-weight: 400;
}
table.data td, table.data th { border-bottom: var(--hair) solid var(--border); }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data tbody tr { transition: background .3s; }
table.data tbody tr:hover { background: transparent; }
table.data tbody tr:active { background: var(--bg-hover); transition-duration: 0s; }
table.data .num { font-variant-numeric: tabular-nums; }

/* --- tabs ------------------------------------------------------------------ */
/* UISegmentedControl: a grey track, the chosen segment a white raised chip. */
.subnav { background: var(--bg-sunken); padding: 2px; gap: 0; display: inline-flex; border: none; border-radius: 9px; }
/* combyn.css gives these two a bottom padding of their own, which outranks the
   2px above and drops the active pill off centre. */
.fin-tabs > .subnav, .year-pick .subnav { padding: 2px; }
.subnav a {
  border-radius: 7px; padding: 6px 18px; border: none; font-size: 13px; font-weight: 500;
  color: var(--text); transition: background .2s, box-shadow .2s;
}
.subnav a:hover { background: transparent; color: var(--text); text-decoration: none; }
.subnav a.active {
  background: var(--bg-raised); color: var(--text); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .subnav a.active { background: #636366; } }
/* The same, for somebody who chose dark in their account. */
 :root[data-theme="dark"] .subnav a.active { background: #636366; } 


/* --- menus ----------------------------------------------------------------- */
/* UIMenu: frosted, rounded 14, springing open from where it was tapped. */
details[open] > .form-drop { animation: pop .3s var(--spring) both; transform-origin: top left; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }
.form-drop, .navdrop-panel {
  border-radius: 14px; box-shadow: var(--shadow-lg); border: 0;
  background: color-mix(in srgb, var(--bg-raised) 97%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
}
.navdrop-links a { border-radius: 0; border-bottom: var(--hair) solid var(--border); }
/* The phone's menu button is a plain blue bar-button item, not a box. */
.navdrop-toggle { border: 0; background: transparent; color: var(--accent); font-weight: 400; font-size: 17px; }
.navdrop-icon i { background: var(--accent); }
.navdrop[open] .navdrop-toggle { background: transparent; }
/* The section picker on a phone: one white row with its chevron. */
.subnav-pick > summary { border: 0; border-radius: var(--radius); background: var(--bg-raised); min-height: 44px; font-size: 17px; }
.subnav-pick[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
.subnav-pick-list { border: 0; border-top: var(--hair) solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }

.empty { border: 0; border-radius: var(--radius); background: var(--bg-raised); color: var(--text-muted); }
.empty-title { color: var(--text); font-weight: 600; font-size: 20px; }

/* --- task row --------------------------------------------------------------
   The state reads up the left edge, the title takes the width, the owner sits
   under it by first name, the date stays top right. One layout at every width:
   no column sits beside the title, so none can be squeezed to a letter per
   line. `a.` outweighs the live container and phone rules that hide the who. */
a.task-row {
  position: relative;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  grid-template-areas: "state title when" "state who when";
  column-gap: 14px; row-gap: 6px;
  align-items: start;
  padding: 14px 16px 14px 22px;
  border: var(--hair) solid var(--border); border-radius: var(--radius);
  background: var(--bg-raised);
}
a.task-row + a.task-row { margin-top: 8px; }
/* Late is a straight bar inside the tile, not a border: a border on a rounded
   tile bends with the corner and pushes the content out of line. */
a.task-row.is-late { border-left: var(--hair) solid var(--border); }
a.task-row.is-late::before {
  content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 2px; background: var(--danger);
}
a.task-row .task-state {
  grid-area: state; align-self: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: none; padding: 0; font-size: 13px; white-space: nowrap;
}
a.task-row .task-title { grid-area: title; font-size: 17px; line-height: 1.35; }
a.task-row .task-who { grid-area: who; display: block; font-size: 15px; }
a.task-row .task-when { grid-area: when; font-size: 13px; white-space: nowrap; }

/* --- tablet and phone, last ------------------------------------------------ */
@media (max-width: 1000px) {
  .card-head, .card-body { padding-left: 16px; padding-right: 16px; }
  form .row > .btn { flex: 1; }
}

@media (max-width: 720px) {
  .page-head.row-between { gap: 12px; }
  .page-head .row { width: 100%; }
  .page-head .row > .btn { flex: 1; }

  /* Thumb-sized: every control reaches the 44px Apple and Google ask for. */
  .btn, input:not([type="checkbox"]):not([type="radio"]), select { min-height: var(--tap); }
  .btn-sm { min-height: 36px; }
  input, select, textarea { font-size: 16px; }   /* below 16px iOS zooms on focus */

  /* A stacked row is a list cell: hairline below, inset from the left edge
     as iOS separators are, the last one without. */
  table.data.stack-mobile tr {
    border: 0; padding: 12px 16px 12px 0; margin-left: 16px;
    border-bottom: var(--hair) solid var(--border);
  }
  table.data.stack-mobile tbody tr:last-child { border-bottom: 0; }
  table.data.stack-mobile th[scope="row"] { font-size: 17px; font-weight: 600; padding: 0 0 6px; }
  /* Label left, value right, one line each: a Wallet pass's details. Not
     for a `terse` table (the invoice list), whose cells flow as one block. */
  table.data.stack-mobile:not(.terse) td[data-label] {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    text-align: right; font-size: 15px; color: var(--text);
  }
  table.data.stack-mobile td + td { margin-top: 4px; }
  table.data.stack-mobile:not(.terse) td[data-label]::before {
    margin: 0; font-size: 15px; font-weight: 400; text-transform: none;
    letter-spacing: 0; color: var(--text-muted); text-align: left;
  }

  section.card > .card-head h2 { font-size: 20px; }
  form.card-body .field { grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr); }

  /* Edge to edge on a phone the cards would touch the screen; iOS insets
     its groups 16px with a 10px corner. */
  .card { border-radius: 10px; }
  h1 { font-size: 30px; line-height: 36px; }
}

/* Finance only: the budget's four totals are full amounts ("2,000,000.00"),
   too long for four columns on a phone -- they broke mid-number. Two per row,
   and a number never wraps. */
@media (max-width: 720px) {
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally-number { white-space: nowrap; font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card, details[open] > .form-drop { animation: none; }
  .card, .btn, .perm input[type="checkbox"], .perm input[type="checkbox"]::after { transition: none; }
  a.card:active { transform: none; }
}