/* Reset, page typography and the app shell: the navbar, account menu, phone tab bar
   and the main container. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Visibility is toggled by setting the hidden attribute (JS: el.hidden = true),
   never by writing an inline style.display — that leaves each call site guessing
   which display value the element's own class actually wants (flex? inline-flex?
   block?), and the two disagreed more than once. The !important guarantees this
   wins over any class's own display declaration regardless of source order,
   which a same-specificity attribute selector otherwise cannot promise. */
[hidden] {
  display: none !important;
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.47059;
}

/* Grayscale smoothing thins every stroke. That suits light text on a dark ground,
   which would otherwise look heavier than it is, but on a light ground it takes
   weight from text that needs it, so day mode keeps the system default. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

:root[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Visually hidden, but read out. Every confirmation above is colour and motion,
   neither of which a screen reader receives. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* App Header & Navbar (Apple Translucent Frosted Glass Bar) */
/* The navbar is sticky, so anything scrolled to the top of the viewport lands underneath
   it. scroll-padding-top holds every scroll short by its height plus a little air —
   declared here rather than as a scroll-margin on each target so the balance sheet's and
   the transaction list's own scrolls get it too, without each having to remember. */
html {
  scroll-padding-top: calc(3.75rem + 1.25rem);
}

/* Set while any dialog is open — see uiMethods.watchModalScrollLock. The padding replaces
   the scrollbar's own width so the page does not jump sideways as it is hidden. */
html.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

.navbar {
  background: var(--bg-frost);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 50;
}

.navbar-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.75rem;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* A fixed-height bar cannot absorb a wrapped control, so the three groups have to
     shrink rather than reflow. min-width:0 is what lets them: a flex item defaults to
     min-width:auto and refuses to shrink below its content, which is what pushed the
     account pill off the right edge on a narrow desktop window. */
  gap: 0.75rem;
  min-width: 0;
}

.navbar-container > * {
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.brand-highlight {
  color: var(--accent-blue);
  font-weight: 500;
  margin-left: 1px;
}

.brand-logo-svg {
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand:hover .brand-logo-svg {
  transform: scale(1.05);
}

/* Apple Segmented Navigation Pill */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--bg-track);
  padding: 0.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-hairline);
}

.nav-link {
  white-space: nowrap;
  padding: 0.3rem 0.95rem;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  border: 1px solid var(--border-hairline);
  background: var(--bg-pill-idle);
}

.nav-link:hover:not(.active) {
  color: var(--text-primary);
  background: var(--bg-frost);
  border-color: var(--border-hairline);
}

.nav-link.active {
  color: var(--text-on-accent);
  background: var(--accent-fill);
  border-color: transparent;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-fill) 35%, transparent);
  font-weight: 600;
}

/* A count on a tab: amber (badge-alert) for what needs the person, Review's Needs you as
   its rows are marked and accounts with a problem; grey for a count that doesn't. */
.badge-counter {
  background: var(--ink-2);
  color: var(--surface);
  font-size: var(--fs-label);
  font-weight: 700;
  padding: 0.12rem 0.48rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease;
}

.nav-link:hover .badge-counter {
  transform: scale(1.08);
}

.badge-counter.badge-alert {
  background: var(--solid-warn-bg);
  color: var(--text-on-accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Beside the tab strip the bar is three columns, the outer two equal where there is room,
   so the tabs hold the middle whatever the sync status says: a longer status takes its
   room from its own side. Just over 768px, where the logo's side has room to spare and
   the controls' side has not, the controls' side keeps what the status, Settings and the
   account pill need, and the tabs sit a little left of the middle. */
@media (min-width: 769px) {
  .navbar-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(15rem, 1fr);
  }

  .navbar-container > .brand {
    justify-self: start;
  }

  .navbar-container > .nav-actions {
    justify-self: stretch;
    justify-content: flex-end;
    container: nav-actions / inline-size;
  }

}

.nav-actions:has(.sync-problems-link:not([hidden])) .sync-problems-link {
  flex-shrink: 0;
}

/* Short of room, the email address gives way first (the account menu has it whole),
   down to the pill's avatar and caret, and only then the sync status, cut short with an
   ellipsis. The pill's floor is set here because an address has no narrower width of its
   own to fall back to. */
@media (min-width: 1201px) {
  .nav-actions .account-menu-wrap {
    flex-shrink: 1000;
    min-width: 4.5rem;
  }

  .nav-actions .tenant-badge {
    min-width: 0;
    max-width: 100%;
  }

  .tenant-badge > :not(#tenant-email) {
    flex-shrink: 0;
  }

  #tenant-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* The last sync's status, or the one running: a dot and words, as a connection's health
   reads in Settings (.conn-state), rather than a button. Green once something has synced,
   grey before, a spinner in the dot's place while a sync runs. It leads to Connections,
   where Sync now is. */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease-out;
}

.sync-pill:hover {
  color: var(--ink);
}

.sync-pill[hidden] {
  display: none;
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.sync-pill.is-never .sync-dot {
  background: var(--ink-3);
}

.sync-pill .btn-spinner {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
  flex: 0 0 auto;
}

.sync-pill-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Settings, a round button between the sync status and the account pill, lit while
   Settings or a page it leads to shows. */
.nav-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.nav-settings svg {
  width: 1.15rem;
  height: 1.15rem;
}

.nav-settings:hover {
  border-color: var(--border-strong);
  background: var(--bg-frost);
  color: var(--text-primary);
}

.nav-settings.is-current {
  border-color: var(--accent-fill);
  color: var(--text-primary);
}

.sync-problems-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--attn);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-problems-link::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--attn);
  flex: 0 0 auto;
}

.sync-problems-link[hidden] {
  display: none;
}

.sync-problems-link:hover {
  text-decoration: underline;
}

.sync-problems-short {
  display: none;
}

/* A phone's bar has room for the short words only, and for them beside the mark alone,
   as it does below 360pt anyway. */
@media (max-width: 480px) {
  .sync-problems-long {
    display: none;
  }

  .sync-problems-short {
    display: inline;
  }
}

/* "Last sync had problems" is never cut short: where its side of the desktop bar has no
   room for those words beside Settings and the account pill, it says "Sync problems". Above 1200px the email address beside them gives way instead. */
@container nav-actions (width < 290px) {
  .sync-problems-long {
    display: none;
  }

  .sync-problems-short {
    display: inline;
  }
}

/* What a sync brought in, just under the header that reports it (the Review toast's
   look, transactions.css). */
.review-toast.sync-toast {
  top: calc(3.75rem + var(--space-3) + env(safe-area-inset-top, 0px));
  bottom: auto;
  padding: var(--space-2) var(--space-4);
  animation-name: toastDrop;
}

/* As tall as the buttons beside it, which a finger needs. */
@media (pointer: coarse), (max-width: 600px) {
  .sync-problems-link {
    min-height: 44px;
  }
}

.tenant-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  background: var(--bg-card);
  padding: 0.25rem 0.75rem 0.25rem 0.45rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.account-menu-wrap {
  position: relative;
}

button.tenant-badge {
  position: relative;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

button.tenant-badge:hover,
button.tenant-badge[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--bg-frost);
}

.account-menu-caret {
  width: 0.85rem;
  height: 0.85rem;
  margin-left: -0.1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 70;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: popoverSlide var(--dur) var(--ease-out);
}

.account-menu-label {
  font-size: var(--fs-label);
  color: var(--text-muted);
  padding: 0 0.45rem;
}

.account-menu-email {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.1rem 0.45rem 0.5rem;
  overflow-wrap: anywhere;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.45rem;
  border-top: 1px solid var(--border-hairline);
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

button.account-menu-item {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: var(--bg-track);
}

.account-menu-item[aria-current="page"] {
  color: var(--accent-blue);
  font-weight: 600;
}

.account-menu-item[aria-current="page"] svg {
  color: currentColor;
}

.account-menu-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-secondary);
}

.user-avatar-initial {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--bg-track);
  color: var(--text-primary);
  font-size: var(--fs-label);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Main Container */
.main-container {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.75rem;
  flex: 1;
}

.view-section {
  display: none;
  --enter-rise: var(--tab-enter-rise);
  animation: fadeIn var(--tab-enter-dur) var(--ease-out);
}

.view-section.active {
  display: block;
}

/* A phone slides from one tab to the next (phonemotion.js). The tab leaving stays in the
   page, scrolled where it was; the tabs coming in, and any passed on the way, are held
   fixed where they will be once it has gone, at their tops, out of reach of a finger
   until they land. Nothing slides sideways past the screen's edge into a scrollbar. An
   account's page and the list it opens from slide the same way, the one leaving held
   fixed. */
.main-container.is-sliding {
  overflow-x: clip;
}

.view-section.tab-slide-origin {
  display: block;
  /* A tab that slid in last time had its entrance held back (tab-slid); leaving, it loses
     that, and its entrance would play again as it slides out. */
  animation: none;
}

.view-section.tab-slide-pane,
.page-departing {
  position: fixed;
  top: var(--slide-top);
  left: var(--slide-left);
  width: var(--slide-width);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.view-section.tab-slide-pane {
  display: block;
  bottom: 0;
  overflow: clip;
  animation: none;
}

/* Already on screen as it landed: its entrance would play it in a second time. */
.view-section.tab-slid {
  animation: none;
}

/* The sign-in overlay fades in on the same keyframes, at the rise it has always had. */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(var(--enter-rise, 8px)); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   Currency and figures

   Every number that lines up in a column gets tabular figures, so digits keep a
   constant width instead of shifting as values change.
   ============================================================================ */
body {
  font-variant-numeric: tabular-nums;
}

/* With viewport-fit=cover (see index.html) a phone held sideways runs the page under its
   notch and rounded corners; the insets keep the content clear of them. Zero everywhere
   else. */
body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* ============================================================================
   Focus

   One visible ring for every keyboard path through the app. :focus-visible so a
   mouse click doesn't leave a ring behind. The ring follows each control's own corners,
   so a pill stays a pill; only links and other focusable boxes, which have no corners of
   their own, are rounded for it.
   ============================================================================ */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

a:focus-visible,
[tabindex]:not(button, select, input, textarea):focus-visible {
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 0.6rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Focused by the skip link only, as where reading starts, not as a control. */
#app-main:focus {
  outline: none;
}

/* ============================================================================
   Theme control: System / Light / Dark in the account menu
   ============================================================================ */
.account-menu-theme {
  border-top: 1px solid var(--border-hairline);
  padding: 0.5rem 0 0.6rem;
}

.account-menu-theme .account-menu-label {
  padding-bottom: 0.35rem;
}

.theme-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem;
  padding: 0.2rem;
  background: var(--bg-track);
  border-radius: var(--radius-sm);
}

.theme-choice-item {
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.theme-choice-item:hover {
  color: var(--text-primary);
}

.theme-choice-item:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
}

/* The chosen theme in ink, like the selected tab: a lighter grey on a grey track was
   too faint to find, most of all in dark mode. */
.theme-choice-item[aria-checked="true"] {
  background: var(--ink);
  border-color: transparent;
  color: var(--text-on-accent);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .theme-choice-item { transition: none; }
}

/* Between the phone breakpoint and a full desktop window the navbar had nothing to
   give: every control stayed at full size until 768px, where the tab strip suddenly
   moved to the bottom bar. In between — a half-width browser window on a laptop, which
   is an ordinary way to use this app — the labels wrapped inside a fixed-height bar and
   the account pill was pushed off the right edge.
   
   So the bar now sheds what it can afford to lose, in order of how little it is missed:
   the email address first (the avatar initial still identifies the account, and the
   account menu shows the address in full), then the wordmark. The last-sync status
   stays at every width, even on a phone, where the account pill is the avatar alone. */
/* 1279, not 1280: a 1280-wide window is an ordinary desktop size that fits the full
   bar with room to spare, and max-width is inclusive — rounding it down to 1280 hid the
   sync chip on exactly the size the rest of the suite treats as standard desktop. */
@media (max-width: 1279px) {
  .navbar-container {
    padding: 0 1rem;
  }

  .nav-link {
    padding: 0.3rem 0.7rem;
  }
}

@media (max-width: 1200px) {
  /* The avatar initial still identifies the signed-in account, and the account menu
     shows the address in full. The pill is the avatar alone, a round button like
     Settings beside it. */
  #tenant-email,
  .account-menu-caret {
    display: none;
  }

  button.tenant-badge {
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.25rem;
  }

  .nav-actions {
    gap: 0.5rem;
  }

  .nav-link {
    padding: 0.34rem 0.6rem;
    font-size: var(--fs-meta);
  }
}

@media (max-width: 960px) {
  /* Last to go before the tab strip moves to the bottom bar at 768px: the wordmark.
     The mark alone identifies the app, and the three tabs are what the bar is for. */
  .brand-title {
    display: none;
  }

  .navbar-container {
    padding: 0 0.9rem;
    gap: 0.5rem;
  }

  .nav-link {
    padding: 0.32rem 0.5rem;
  }
}

/* Below 360pt only the mark fits beside the bar's controls. */
@media (max-width: 359px) {
  .brand-title {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .navbar-container {
    padding: 0 0.75rem;
    gap: 0.25rem;
  }

  /* The tab strip moves to a fixed bottom bar on phones (see .mobile-tabbar),
     so the inline version is hidden here rather than leaving no navigation. */
  .nav-links {
    display: none;
  }

  /* Back on a phone, where the tabs have gone to the bottom bar: "Finance" stacked over
     "Tracker", as tall as the mark and narrow enough to sit beside the bar's controls
     from 360pt up. */
  .brand-title {
    display: flex;
    flex-direction: column;
    font-size: 17px;
    font-weight: 800;
    line-height: 0.98;
  }

  .brand-title .brand-highlight {
    font-weight: inherit;
    margin-left: 0;
  }

  .nav-actions {
    gap: 0.25rem;
    min-width: 0;
  }

  .sync-pill {
    padding-inline: 2px;
  }
}

@media (max-width: 768px) {
  /* Leave room for the fixed tab bar, which is taller by the home indicator's inset. */
  .main-container {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* From 600pt Review and Accounts split into two columns. Below a tablet's width (the
   iPhone Duo open, 626pt) the desktop's 28pt margins left them 570pt between them;
   16pt margins give that room back to the columns. */
@media (min-width: 601px) and (max-width: 767px) {
  .main-container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ----------------------------------------------------------------------------
   Fixed bottom tab bar (phones)

   Three destinations is exactly what a tab bar is for: every screen stays one
   thumb-reach away rather than hidden with the inline nav.
   ---------------------------------------------------------------------------- */
.mobile-tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--bg-frost-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border-color);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* One column per tab. */
.mobile-tabbar-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.mobile-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0.25rem 0.55rem;
  min-height: 3.25rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease;
}

.mobile-tab svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.mobile-tab.active {
  color: var(--accent-blue);
  font-weight: 600;
}

.mobile-tab .mobile-tab-badge {
  position: absolute;
  top: 0.3rem;
  left: 50%;
  margin-left: 0.28rem;
  background: var(--ink-2);
  color: var(--surface);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.32rem;
  border-radius: var(--radius-full);
  min-width: 1rem;
  text-align: center;
}

.mobile-tab .mobile-tab-badge.badge-alert {
  background: var(--solid-warn-bg);
  color: var(--text-on-accent);
}

@media (max-width: 768px) {
  .mobile-tabbar {
    display: block;
  }
}

/* ============================================================================
   Motion preferences

   Everything above may animate; nothing does when the viewer has asked the
   system for less motion.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch screens: every control in the bar is at least 44pt, the size a finger needs,
   wherever the bar shows them, including the tab strip on an iPad or an iPhone Duo held
   sideways. The bar is 3.75rem tall, so they fit without it growing. */
@media (pointer: coarse) {
  .brand {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  button.tenant-badge,
  .nav-link,
  .account-menu-item,
  .sync-pill {
    min-height: 44px;
  }

  .nav-settings,
  button.tenant-badge {
    min-width: 44px;
  }

  .nav-settings {
    height: 44px;
  }
}

/* Phones. Every nested box adds its padding again on both sides, and four of them left
   the balance sheet's account names starting about 78px in from a 430px screen. Here
   each screen has one box: a narrow page gutter, then the card, then the content. */
@media (max-width: 600px) {
  .main-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}