/* ─── The staff app: DESIGN.md's look (25 Sep 2026) ──────────────
   A white canvas, near-black ink, one coral accent for the one main action (Bootstrap's .btn-primary and the + at the foot),
   soft rounded shapes, flat surfaces with 1px hairlines, one shadow (sheets, dropdowns, the floating +). Every class name of
   the old look is kept; the page stylesheets (home.css, entry.css, stay*.css, stays.css, programme.css) read these tokens. */

/* ─── Font ───────────────────────────────────────────────────── */
/* Inter is served locally by assets/vendor/inter/inter.css, linked before this file. */

/* ─── CSS Custom Properties ──────────────────────────────────── */
:root {
  /* DESIGN.md's tokens (contrast on white in the comments) */
  --canvas:      #FFFFFF;
  --soft:        #F7F7F7;
  --strong:      #F2F2F2;
  --ink:         #222222;   /* 15.9:1 */
  --body-ink:    #3F3F3F;   /* 10.5:1 */
  --line:        #DDDDDD;
  --line-soft:   #EBEBEB;
  --line-strong: #C1C1C1;
  --coral:       #FF385C;   /* fills without text only */
  --coral-press: #E00B41;   /* every labelled main action: white on it 4.9:1 */
  --coral-down:  #C00A38;   /* pressed: 6.3:1 */
  --coral-off:   #FFD1DA;   /* disabled, with ink text */
  --ok-tint:     #E8F3EC;
  --ok-edge:     #C6E0CF;
  --ok-ink:      #0E4A2A;
  --warn-tint:   #FBF3E4;
  --warn-edge:   #EBD8B2;
  --warn-ink:    #5E3C03;
  --error-tint:  #FBEDE9;
  --error-edge:  #EFCABF;
  --float:       rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.04) 0 2px 6px 0, rgba(0,0,0,.1) 0 4px 8px 0;
  --no-shadow:   0 0 0 0 transparent;

  /* The old names, on the new values (every page stylesheet reads them) */
  --brand:       var(--ink);
  --brand-mid:   var(--body-ink);
  --brand-light: #6A6A6A;
  --accent:      var(--ink);
  --accent-soft: var(--strong);
  --income:      #14663A;   /* 7.0:1 */
  --expense:     #C13515;   /* 5.5:1 */
  --deposit:     #8C5A05;   /* 5.9:1 */
  --bg:          var(--soft);      /* fills: placeholders; the page floor is --canvas */
  --card-bg:     var(--canvas);
  --surface-hover: var(--soft);
  --text:        var(--ink);
  --muted:       #6A6A6A;   /* 5.4:1 on white, 5.1:1 on --soft */
  --border:      var(--line);
  --radius:      14px;
  --radius-sm:   8px;
  --radius-lg:   20px;
  --shadow:      var(--no-shadow);   /* flat by default */
  --shadow-md:   var(--float);
  --shadow-lg:   var(--float);
  --shadow-bar:  var(--no-shadow);
  --nav-h:       66px;

  /* The villa's gold and navy are gone from the chrome; their names stay, on the palette */
  --gold:        var(--deposit);
  --gold-bright: var(--ink);
  --gold-line:   var(--warn-edge);
  --ivory:       var(--warn-tint);
  --on-ink:      #FFFFFF;           /* text on an ink or coral fill */
  --on-navy:     var(--on-ink);
  --on-navy-hover: var(--soft);
  --on-navy-line:  var(--line);
  --scrim:       #000000;

  /* The top bar (back since the owner's 27 Sep 2026: the logo, the search, the bell), the phone's safe areas, touch targets, motion */
  --topbar-h:   56px;
  --safe-top:   env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-total: calc(var(--topbar-h) + var(--safe-top));
  --tap:        44px;
  --dur:        .2s;
  --ease:       cubic-bezier(.16, 1, .3, 1);

  /* One type scale: 12 / 14 / 16 / 18 / 20 / 24 px */
  --fs-xs:  .75rem;
  --fs-sm:  .875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;

  /* Bootstrap's theme, on the palette */
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 34, 34, 34;
  --bs-body-bg: var(--canvas);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: #6A6A6A;
  --bs-tertiary-bg: var(--soft);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius-sm);
  --bs-link-color: var(--ink);
  --bs-link-color-rgb: 34, 34, 34;
  --bs-link-hover-color: #000000;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-primary: var(--ink);
  --bs-primary-rgb: 34, 34, 34;
  --bs-secondary: #6A6A6A;
  --bs-secondary-rgb: 106, 106, 106;
  --bs-success: #14663A;
  --bs-success-rgb: 20, 102, 58;
  --bs-danger: #C13515;
  --bs-danger-rgb: 193, 53, 21;
  --bs-warning: #EBD8B2;
  --bs-warning-rgb: 235, 216, 178;
  --bs-info: #0B6B73;
  --bs-info-rgb: 11, 107, 115;
  --bs-dark: var(--ink);
  --bs-dark-rgb: 34, 34, 34;
  --bs-light: var(--soft);
  --bs-light-rgb: 247, 247, 247;
  --bs-focus-ring-color: rgba(34, 34, 34, .25);
}

/* ─── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  background: var(--canvas);
  color: var(--text);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--coral-press);
}
::selection { background: var(--coral-off); color: var(--ink); }
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* ─── Top bar (includes/partials/app_topbar.php) ───────────────── */
/* The owner, 27 Sep 2026: "activate the top menu with the logo, but include the notification icon at the right and in the middle a search bar,
   where you can access quick functions and search clients as well as stays". He had taken the bar of the logo alone off on 25 Sep 2026; this
   one is DESIGN.md's top bar: white, a hairline beneath, the villa left, the search in the middle, the bell right. It sticks to the top while the
   page scrolls and covers the phone's status bar with its own white (its padding is the safe area), so nothing slides under the clock of the
   installed app. Whatever sits under it adds its height (--topbar-total): an anchor lands 8px below it, the sticky filter bar sits under it,
   the page fills the window between it and the bottom bar. On a phone the villa is the emblem's ink tile; from 768 px the logo (on an ink plate
   when it is light, as the villa's gold wordmark is: gold on white would be 2.2:1). */
html { scroll-padding-top: calc(var(--topbar-total) + 8px); }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;   /* the bottom bar's: over a sticky filter bar; under the sheets, their scrim and the + dial's scrim */
  padding-top: var(--safe-top);
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.app-topbar__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--topbar-h);
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
.app-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: var(--tap);
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}
.app-topbar__brand:hover { color: var(--ink); }
.app-topbar__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--ink);
}
.app-topbar__mark img { display: block; width: 19px; height: 27px; }
.app-topbar__plate,
.app-topbar__name { display: none; }
.app-topbar__plate {
  align-items: center;
  height: 40px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
}
.app-topbar__plate--ink { padding: 0 14px; background: var(--ink); }
.app-topbar__logo { display: block; height: 28px; width: auto; max-width: 200px; object-fit: contain; }
.app-topbar__name { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
@media (min-width: 768px) {
  .app-topbar__inner { gap: 16px; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
  .app-topbar__plate { display: inline-flex; }
  .app-topbar__name { display: inline; }
  .app-topbar__brand--logo .app-topbar__mark { display: none; }
}

/* The bell: DESIGN.md's icon button (a 44 px circle on surface-strong), the number unread on a coral marker (white on coral-press, 4.9:1). */
.app-topbar__bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--strong);
  color: var(--ink);
  font-size: 1.2rem;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.app-topbar__bell:hover { color: var(--ink); }
.app-topbar__bell:active,
.app-topbar__bell.is-current { background: var(--line-soft); }
.app-topbar__count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--coral-press);
  color: var(--on-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--canvas);
}
.app-topbar__brand:focus-visible,
.app-topbar__bell:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The search: a fully rounded field (DESIGN.md's search pill, flat in the bar), 44 px, 16 px text (iOS does not zoom). Its list drops down under it
   on a computer, with the one shadow; on a phone it covers the page under the bar (.is-open), the villa and the bell giving their room to the
   field and a Cancel. The rows are the Menu's: 48 px, an icon, a name, a muted line under it; the one the arrows reach is grey. */
.app-search { position: relative; flex: 1 1 auto; min-width: 0; margin: 0; }
.app-search__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
}
.app-search__input {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px 0 40px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--soft);
  color: var(--ink);
  font-size: var(--fs-md);
  text-overflow: ellipsis;   /* the placeholder on a narrow phone ends in … rather than a cut word */
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.app-search__input::placeholder { color: var(--muted); opacity: 1; }
.app-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.app-search__input:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); background: var(--canvas); }
.app-search__key {
  display: none;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--canvas);
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: none;
}
.app-search__cancel {
  display: none;
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 0 4px 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 500;
}
.app-search__cancel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-sm); }
.app-search__panel {
  position: fixed;
  top: var(--topbar-total);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;   /* over the bottom bar, under the sheets */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 8px calc(24px + var(--safe-bottom));
  background: var(--canvas);
  animation: app-search-in var(--dur) var(--ease);
}
.app-search__panel[hidden] { display: none; }
@keyframes app-search-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.app-search__ask { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; }
.app-search__ask[hidden] { display: none; }
.app-search__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--strong);
  color: var(--ink);
  font-size: 1.1rem;
}
.app-search__back:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.app-search__ask-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); min-width: 0; }
.app-search__group[hidden] { display: none; }
.app-search__group + .app-search__group:not([hidden]),
[data-search-results] > .app-search__group:not(:first-child) { margin-top: 4px; padding-top: 2px; border-top: 1px solid var(--line-soft); }
.app-search__heading { margin: 12px 12px 4px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.29; color: var(--muted); }
.app-search__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.app-search__item:hover { color: var(--ink); }
.app-search__item > .bi { width: 22px; flex-shrink: 0; text-align: center; font-size: 1.15rem; color: var(--muted); }
.app-search__item.is-active { background: var(--strong); }
.app-search__item.is-active > .bi { color: var(--ink); }
.app-search__item:active { background: var(--strong); }
.app-search__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.app-search__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-search__label mark { padding: 0; background: transparent; color: inherit; font-weight: 700; }
.app-search__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.app-search__go { flex-shrink: 0; color: var(--muted); font-size: .9rem; }
.app-search__status { margin: 0; padding: 6px 12px 0; color: var(--muted); font-size: var(--fs-sm); }
.app-search__status:empty { display: none; }
.app-search__status.is-note { padding: 20px 12px; font-size: var(--fs-md); text-align: center; }
/* A phone: the search open covers the page under the bar; the villa and the bell give their room; the page under it does not scroll. */
@media (max-width: 767.98px) {
  .app-topbar.is-open .app-topbar__brand,
  .app-topbar.is-open .app-topbar__bell { display: none; }
  .app-topbar.is-open .app-search { display: flex; align-items: center; }
  .app-topbar.is-open .app-search__cancel { display: inline-flex; align-items: center; }
  .app-topbar.is-open .app-search__input { flex: 1 1 auto; }
  .app-topbar.is-open { z-index: 1036; }   /* its list over the bottom bar (the bar is the list's stacking context); still under the sheets */
  html.app-search-lock, html.app-search-lock body { overflow: hidden; }
}
/* A computer: the list drops down under the field, the field in the middle of the bar, "/" shown in it until it has the cursor. */
@media (min-width: 768px) {
  .app-search { max-width: 560px; margin: 0 auto; }
  .app-search__key { display: block; }
  .app-search__input:focus ~ .app-search__key,
  .app-search__input:not(:placeholder-shown) ~ .app-search__key { display: none; }
  .app-search__panel {
    position: absolute;
    top: calc(100% + 8px);
    bottom: auto;
    max-height: min(70vh, 560px);
    padding: 4px 8px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--float);
  }
}

/* ─── Menu (includes/partials/app_menu.php) ───────────────────── */
/* The owner, 25 Sep 2026: "merge the MORE on the bottom, with the burger … leave only at the bottom". The Menu is a bottom sheet opened by the
   bottom bar's Menu tab (the legacy screens, whose bar has no tab, a floating Menu button); the top bar holds no way into it. */
.app-menu__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--strong);
  color: var(--ink);
  font-size: 1.1rem;
  transition: background-color var(--dur) var(--ease);
}
.app-menu__close:active { background: var(--line-soft); }
.app-menu__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The legacy screens' Menu (their bar, kept byte for byte, has no tab): a white pill floating above the right end of that bar, where the new
   bar has its Menu tab, with the one shadow; under the legacy + menu's scrim and under the sheet's. */
.app-menu-fab {
  position: fixed;
  right: max(16px, calc(env(safe-area-inset-right) + 12px));
  bottom: calc(var(--nav-h) + 12px);
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px 0 14px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--float);
  transition: background-color var(--dur) var(--ease);
}
.app-menu-fab .bi { font-size: 1.1rem; }
.app-menu-fab:active { background: var(--strong); }
.app-menu-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (min-width: 768px) {
  .app-menu-fab { right: calc(50% - min(25%, 330px) + 16px); }   /* the bar's right end: it is half the window wide, at most 660px, in the middle */
}

/* What waits for this person: a coral marker (white on it 4.9:1), on the Menu tab (and the legacy screens' Menu button). */
.app-menu-badge {
  position: absolute;
  top: 1px;
  left: calc(50% + 4px);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--coral-press);
  color: var(--on-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--canvas);
}
.app-menu-fab .app-menu-badge { top: -8px; left: auto; right: -6px; }

/* The Menu: a Bootstrap bottom sheet (its scrim, Escape and focus trap), full height on a phone under a grabber; more.php shows the same
   groups as a page (.app-menu--page). */
.offcanvas-backdrop { --bs-backdrop-bg: var(--scrim); --bs-backdrop-opacity: .5; }
.offcanvas.app-menu {
  --bs-offcanvas-height: calc(100% - var(--safe-top) - 12px);
  --bs-offcanvas-bg: var(--canvas);
  --bs-offcanvas-color: var(--ink);
  --bs-offcanvas-transition: transform .3s var(--ease);
  border-top: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--float);
  overflow: hidden;
}
.offcanvas.app-menu.is-dragging { transition: none; }
/* A short Menu (a treasurer's few rows, no search) is as tall as its rows. */
.offcanvas.app-menu--fit { --bs-offcanvas-height: auto; max-height: calc(100% - var(--safe-top) - 12px); }
.app-menu__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  padding: 18px 12px 6px 20px;
  touch-action: none;
}
.app-menu__grabber {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 9999px;
  background: var(--line-strong);
}
.app-menu__title,
.app-menu__page-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.app-menu__page-title { margin-bottom: 12px; }
.app-menu__search { position: relative; flex-shrink: 0; padding: 6px 16px 10px; }
.app-menu--page .app-menu__search { padding: 0 0 8px; }
.app-menu__search-icon {
  position: absolute;
  top: 50%;
  left: 30px;
  margin-top: -2px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
}
.app-menu--page .app-menu__search-icon { left: 14px; margin-top: -4px; }
.app-menu__find {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0 16px 0 40px;
  border: 1px solid var(--line-strong);
  border-radius: 9999px;
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--fs-md);   /* 16px: iOS does not zoom into the field */
  -webkit-appearance: none;
  appearance: none;
}
.app-menu__find::placeholder { color: var(--muted); opacity: 1; }
.app-menu__find:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.app-menu__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px calc(16px + var(--safe-bottom));
}
.app-menu--page .app-menu__body { padding: 0 0 16px; }
/* A hairline between groups: between the ones a search leaves, never above the first. */
.app-menu__group:not([hidden]) ~ .app-menu__group:not([hidden]) { margin-top: 6px; padding-top: 2px; border-top: 1px solid var(--line-soft); }
.app-menu__heading {
  margin: 14px 12px 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.29;
  color: var(--muted);
}
.app-menu__list { list-style: none; margin: 0; padding: 0; }
.app-menu__form { margin: 0; }
.app-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.app-menu__item > .bi { width: 22px; flex-shrink: 0; text-align: center; font-size: 1.15rem; color: var(--muted); transition: color var(--dur) var(--ease); }
.app-menu__item:active { background: var(--strong); }
.app-menu__item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.app-menu__item.is-current { background: var(--strong); color: var(--ink); font-weight: 600; }
.app-menu__item.is-current > .bi { color: var(--ink); }
.app-menu__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-menu__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 9999px;
  background: var(--coral-press);
  color: var(--on-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.app-menu__item--logout,
.app-menu__item--logout > .bi { color: var(--expense); }
/* The first row, above the groups: Notifications, with "3 new" in a quiet chip (news; the coral count is what waits). */
.app-menu__list--top { padding: 4px 0 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line-soft); }
.app-menu__item--news > .bi { color: var(--ink); }
.app-menu__news {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--strong);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.app-menu__who { display: flex; align-items: center; gap: 12px; padding: 4px 12px 6px; }
.app-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}
.app-menu__person { display: flex; flex-direction: column; min-width: 0; }
.app-menu__name { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-menu__role { font-size: var(--fs-sm); color: var(--muted); }
.app-menu__status { margin: 0; }
.app-menu__status.is-empty { padding: 20px 12px; color: var(--muted); font-size: var(--fs-md); text-align: center; }
@media (min-width: 768px) {
  .offcanvas.app-menu { max-width: 660px; margin: 0 auto; }
  .offcanvas.app-menu:not(.app-menu--fit) { --bs-offcanvas-height: min(85%, 820px); }
}

/* Install the app (includes/partials/app_install.php; the owner, 26 Sep 2026: "I don't see the install app anywhere"). Me's row is an
   ordinary row of the Menu, ink like the others (not coral: it is no page's main action); the login page's link is a quiet muted text
   button under the form; the steps are a short bottom sheet like the Menu, as tall as its content, each step a numbered pictogram tile
   (surface-strong, 44 px) and its words, the note on a soft panel. The sheet slides as the Menu does, not at all with reduced motion. */
.offcanvas.app-install {
  --bs-offcanvas-height: auto;
  --bs-offcanvas-bg: var(--canvas);
  --bs-offcanvas-color: var(--ink);
  --bs-offcanvas-transition: transform .3s var(--ease);
  max-height: calc(100% - var(--safe-top) - 12px);
  border-top: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--float);
}
.app-install__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; padding: 16px 12px 4px 20px; }
.app-install__title { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.app-install__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px calc(16px + var(--safe-bottom));
}
.app-install__lead { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.43; }
.app-install__way:not([hidden]) ~ .app-install__way:not([hidden]) { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.app-install__where { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.29; color: var(--muted); }
.app-install__where:focus { outline: none; }
.app-install__where:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.app-install__steps { list-style: none; margin: 0; padding: 0; counter-reset: install-step; }
.app-install__step { counter-increment: install-step; display: flex; align-items: center; gap: 14px; padding: 8px 0; color: var(--ink); font-size: var(--fs-md); line-height: 1.4; }
.app-install__step strong { font-weight: 600; }
.app-install__pic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  margin: 6px 0 0 6px;   /* room for the step's number on its corner */
  border-radius: var(--radius-sm);
  background: var(--strong);
  color: var(--ink);
  font-size: 1.35rem;
}
.app-install__pic::after {
  content: counter(install-step);
  position: absolute;
  top: -7px;
  left: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--canvas);
}
.app-install__note { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--soft); color: var(--body-ink); font-size: var(--fs-sm); line-height: 1.43; }
.app-install__note strong { font-weight: 600; color: var(--ink); }
.app-install__more {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.app-install__done { min-height: 48px; margin-top: 12px; font-weight: 500; }
.login-install { margin: 12px 0 0; text-align: center; }
.login-install__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--dur) var(--ease);
}
.login-install__link:active { color: var(--ink); }
.app-install-toast { bottom: calc(var(--nav-h) + 16px + var(--safe-bottom)); }
.login-body .app-install-toast { bottom: calc(24px + var(--safe-bottom)); }
@media (min-width: 768px) {
  .offcanvas.app-install { max-width: 560px; margin: 0 auto; }
}

/* ─── Bottom Navigation ──────────────────────────────────────── */
.bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--canvas);
  border-top: 1px solid var(--line);
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1030;
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 500;
  padding: 3px 4px;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease);
  min-width: var(--tap);
  min-height: var(--tap);
  justify-content: center;
}
.bottom-nav-item i { font-size: 1.35rem; }
button.bottom-nav-item { border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
.bottom-nav-item { position: relative; }
.bottom-nav-item.active { color: var(--ink); font-weight: 600; }
.bottom-nav-item:active:not(.bottom-nav-fab) { color: var(--ink); }

/* The + at the foot: the app's one main action, the one coral circle. */
.bottom-nav-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--coral-press);
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: var(--float);
  transition: transform .18s var(--ease), background-color .18s var(--ease);
  margin-top: -22px;
}
.bottom-nav-fab:hover { color: #FFFFFF; }
.bottom-nav-fab:active { transform: scale(.96); background: var(--coral-down); }

/* ─── Main content ───────────────────────────────────────────── */
.app-main { min-height: calc(100vh - var(--topbar-total) - var(--nav-h)); }

/* ─── Section titles ─────────────────────────────────────────── */
.section-title {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ─── Balance cards: white, a hairline, the figure in ink ─────── */
.balance-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.balance-scroll::-webkit-scrollbar { display: none; }
.balance-card {
  min-width: 170px;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.balance-card--negative .balance-card__amount { color: var(--expense); }
.balance-card--negative { border-color: var(--error-edge); background: var(--error-tint); }
.balance-card__currency {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.balance-card__amount {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 2px 0 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.balance-card__label {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 500;
}

/* ─── Summary cards ──────────────────────────────────────────── */
.summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--canvas);
  border: 1px solid var(--line);
}
.summary-card__icon {
  font-size: 1.5rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.summary-card--income  .summary-card__icon { color: var(--income); background: var(--ok-tint); }
.summary-card--expense .summary-card__icon { color: var(--expense); background: var(--error-tint); }
.summary-card__label  { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.summary-card__amount { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; }

/* ─── Activity list: rows with a hairline; the amount's colour says the kind ─ */
.activity-list { display: flex; flex-direction: column; gap: 8px; }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--canvas);
  border-radius: var(--radius);
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  border: 1px solid var(--line);
}
.activity-item:active { background: var(--soft); }
.activity-item--highlight { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.activity-item__dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
}
.activity-item__body  { flex: 1; min-width: 0; }
.activity-item__top   { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.activity-item__cat   { font-weight: 600; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-item__amount { font-size: .9375rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.activity-item__amount--income  { color: var(--income); }
.activity-item__amount--expense { color: var(--expense); }
.activity-item__amount--deposit { color: var(--deposit); }
.activity-item__bottom { display: flex; justify-content: space-between; margin-top: 3px; }
.activity-item__vendor { font-size: .8125rem; color: var(--muted); font-weight: 500; }
.activity-item__date   { font-size: var(--fs-xs); color: var(--muted); }
.activity-item__desc   { font-size: .8125rem; color: var(--muted); margin-top: 3px; }
.activity-item__photo  {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--strong);
}
.activity-item__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Quick action buttons: flat, in their kind's colour ─────── */
.quick-actions { display: flex; gap: 10px; }
.quick-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  min-height: var(--tap);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: transform .15s var(--ease), filter .15s var(--ease);
  border: none;
}
.quick-btn i { font-size: 1.4rem; }
.quick-btn:active { transform: scale(.97); }
.quick-btn--income  { background: var(--income); color: #FFFFFF; }
.quick-btn--expense { background: var(--expense); color: #FFFFFF; }
.quick-btn--deposit { background: var(--deposit); color: #FFFFFF; }
.quick-btn--income:hover, .quick-btn--expense:hover, .quick-btn--deposit:hover { color: #FFFFFF; }

/* ─── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
  position: sticky;
  top: var(--topbar-total);   /* under the top bar (back since the owner's 27 Sep 2026) */
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  z-index: 100;
  padding: 10px 12px;
}
.filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  transition: border-color .15s, background .15s, color .15s;
}
.filter-chip:focus { outline: none; border-color: var(--ink); }
.filter-chip:focus-visible { box-shadow: 0 0 0 1px var(--ink); }
.filter-chip--clear { color: var(--expense); border-color: var(--error-edge); background: var(--error-tint); text-decoration: none; }

/* ─── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);   /* 16px: iOS does not zoom into the field */
  padding: .5rem .75rem;
  min-height: var(--tap);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.form-control-sm, .form-select-sm { min-height: 36px; font-size: var(--fs-sm); }
/* The padding above drops Bootstrap's room for the select's arrow: a long choice ("MAIN-ALL (Administrator) · 180,000 L") ran under it at 390 px
   (1 Oct 2026). The arrow sits .75rem from the right and is 16px wide, so 2.25rem as Bootstrap has it; a longer one ends in "…". */
.form-select { padding-right: 2.25rem; text-overflow: ellipsis; }
.form-control::placeholder { color: var(--muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--expense); }
.form-check-input { border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-input:focus { border-color: var(--ink); box-shadow: 0 0 0 .2rem rgba(34,34,34,.15); }
.form-label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); margin-bottom: 6px; }

.type-toggle {
  display: flex;
  gap: 8px;
  background: var(--strong);
  padding: 5px;
  border-radius: var(--radius);
}
.type-btn {
  flex: 1;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600;
  padding: 10px;
  min-height: var(--tap);
  font-size: var(--fs-md);
  transition: background .15s, color .15s;
  background: transparent;
  color: var(--muted);
}
.btn-check:checked + .type-btn--income  { background: var(--income); color: #FFFFFF; }
.btn-check:checked + .type-btn--expense { background: var(--expense); color: #FFFFFF; }

.bill-upload-area {
  border: 1px dashed var(--muted);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--soft);
  transition: border-color .15s, background .15s;
}

/* ─── Login page ─────────────────────────────────────────────── */
.login-body {
  background: var(--soft);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-wrapper { width: 100%; max-width: 420px; }
.login-card { border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--float); background: var(--canvas); }
.login-header {
  background: var(--canvas);
  color: var(--ink);
  padding: 32px 28px 4px;
}
.login-logo { font-size: 3rem; line-height: 1; margin-bottom: 12px; }
.login-title   { font-size: 1.75rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.login-subtitle { color: var(--muted); font-size: var(--fs-md); margin: 6px 0 0; font-weight: 400; }
.login-card .card-body { padding: 24px 28px 28px; }

/* ─── Tables ─────────────────────────────────────────────────── */
.table {
  --bs-table-color: var(--ink);
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--soft);
  --bs-table-striped-bg: var(--soft);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.table th {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: .6rem .75rem;
}
.table td { padding: .6rem .75rem; vertical-align: middle; border-color: var(--line-soft); }
.table tbody tr:hover { background: var(--soft); }
.table-light, .table > thead.table-light { --bs-table-bg: var(--soft); --bs-table-color: var(--ink); }
.table-card {
  background: var(--canvas);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* ─── Badges: pills in words ─────────────────────────────────── */
.badge { font-size: var(--fs-xs); font-weight: 600; padding: 4px 9px; border-radius: 9999px; }
.badge.bg-warning, .badge.text-bg-warning { color: var(--warn-ink) !important; }
.badge.bg-light, .badge.text-bg-light { color: var(--ink) !important; border: 1px solid var(--line); }
.badge.bg-info, .badge.text-bg-info { color: #FFFFFF !important; }   /* white on teal 6.2:1, over a .text-dark */
/* --bs-warning is the pale amber of fills and borders; warning TEXT is the amber state (5.9:1). */
.text-warning { color: var(--deposit) !important; }

/* Pagination and switches: ink, not Bootstrap's blue; pages are 44px targets. */
.pagination {
  --bs-pagination-color: var(--ink);
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-hover-bg: var(--soft);
  --bs-pagination-focus-color: var(--ink);
  --bs-pagination-focus-bg: var(--soft);
  --bs-pagination-focus-box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink);
  --bs-pagination-active-bg: var(--ink);
  --bs-pagination-active-border-color: var(--ink);
  --bs-pagination-border-color: var(--line);
}
.page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23222222'/%3e%3c/svg%3e"); }

/* ─── Cards (generic) ────────────────────────────────────────── */
.card {
  --bs-card-border-color: var(--line);
  --bs-card-cap-bg: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.card-header {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

/* ─── Buttons: coral for the main action, ink, outlines and states for the rest ─ */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-focus-box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);
  font-weight: 500;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-sm { min-height: 36px; font-size: var(--fs-sm); }
.btn-lg { min-height: 52px; }
.btn-link { min-height: 0; }
.btn-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--coral-press);
  --bs-btn-border-color: var(--coral-press);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--coral-down);
  --bs-btn-hover-border-color: var(--coral-down);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--coral-down);
  --bs-btn-active-border-color: var(--coral-down);
  --bs-btn-disabled-color: var(--ink);
  --bs-btn-disabled-bg: var(--coral-off);
  --bs-btn-disabled-border-color: var(--coral-off);
}
.btn-outline-primary, .btn-outline-dark {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--soft);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-border-color: var(--ink);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-border-color: var(--line);
}
.btn-outline-secondary, .btn-outline-light {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--soft);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-border-color: var(--ink);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-border-color: var(--line);
}
.btn-secondary, .btn-light {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--strong);
  --bs-btn-border-color: var(--strong);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--line);
  --bs-btn-hover-border-color: var(--line);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--line);
  --bs-btn-active-border-color: var(--line);
}
.btn-dark {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #000000;
  --bs-btn-hover-border-color: #000000;
}
.btn-success {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--income);
  --bs-btn-border-color: var(--income);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #0E4A2A;
  --bs-btn-hover-border-color: #0E4A2A;
  --bs-btn-active-bg: #0E4A2A;
  --bs-btn-active-border-color: #0E4A2A;
}
.btn-danger {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--expense);
  --bs-btn-border-color: var(--expense);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #B32505;
  --bs-btn-hover-border-color: #B32505;
  --bs-btn-active-bg: #B32505;
  --bs-btn-active-border-color: #B32505;
}
.btn-warning {
  --bs-btn-color: var(--warn-ink);
  --bs-btn-bg: var(--warn-edge);
  --bs-btn-border-color: var(--warn-edge);
  --bs-btn-hover-color: var(--warn-ink);
  --bs-btn-hover-bg: #E2C791;
  --bs-btn-hover-border-color: #E2C791;
  --bs-btn-active-bg: #E2C791;
  --bs-btn-active-border-color: #E2C791;
}
.btn-outline-success {
  --bs-btn-color: var(--income);
  --bs-btn-border-color: var(--ok-edge);
  --bs-btn-hover-color: var(--income);
  --bs-btn-hover-bg: var(--ok-tint);
  --bs-btn-hover-border-color: var(--income);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--income);
  --bs-btn-active-border-color: var(--income);
}
.btn-outline-danger {
  --bs-btn-color: var(--expense);
  --bs-btn-border-color: var(--error-edge);
  --bs-btn-hover-color: var(--expense);
  --bs-btn-hover-bg: var(--error-tint);
  --bs-btn-hover-border-color: var(--expense);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--expense);
  --bs-btn-active-border-color: var(--expense);
}
.btn-outline-warning {
  --bs-btn-color: var(--warn-ink);
  --bs-btn-border-color: var(--warn-edge);
  --bs-btn-hover-color: var(--warn-ink);
  --bs-btn-hover-bg: var(--warn-tint);
  --bs-btn-hover-border-color: var(--deposit);
  --bs-btn-active-color: var(--warn-ink);
  --bs-btn-active-bg: var(--warn-edge);
  --bs-btn-active-border-color: var(--deposit);
}
.btn-outline-info {
  --bs-btn-color: #0B6B73;
  --bs-btn-border-color: #C3E1E4;
  --bs-btn-hover-color: #0B6B73;
  --bs-btn-hover-bg: #EEF7F8;
  --bs-btn-hover-border-color: #0B6B73;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #0B6B73;
  --bs-btn-active-border-color: #0B6B73;
}

/* ─── Category dot ───────────────────────────────────────────── */
.cat-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* ─── User avatar ────────────────────────────────────────────── */
.user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 1rem;
  flex-shrink: 0;
}

/* ─── Reports table ──────────────────────────────────────────── */
.report-table { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.report-table td, .report-table th { vertical-align: middle; padding: .45rem .6rem; }

/* ─── Empty state ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.empty-state i {
  font-size: 2.75rem;
  display: block;
  margin-bottom: 12px;
  color: var(--line-strong);
}
.empty-state p { margin: 0; font-size: var(--fs-md); font-weight: 500; }

/* ─── Page header band ───────────────────────────────────────── */
.page-header {
  background: var(--canvas);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 20px 16px 18px;
  margin-bottom: 0;
}
.page-header h5 { font-weight: 700; font-size: var(--fs-xl); letter-spacing: -.01em; margin: 0; }
.page-header p  { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0 0; }

/* ─── Offcanvas / Modals ─────────────────────────────────────── */
.offcanvas-bottom { border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--float); }
.offcanvas-header { border-bottom: 1px solid var(--line); }
.modal-content { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--float); }
.modal-backdrop { --bs-backdrop-bg: #000000; --bs-backdrop-opacity: .5; }
.dropdown-menu { --bs-dropdown-border-color: var(--line); --bs-dropdown-link-active-bg: var(--ink); border-radius: var(--radius-sm); box-shadow: var(--float); }

/* ─── Alerts: the state tints ────────────────────────────────── */
.alert { border-radius: var(--radius-sm); font-size: .9375rem; font-weight: 500; border: 1px solid transparent; }
.alert-success { background: var(--ok-tint); color: var(--ok-ink); border-color: var(--ok-edge); }
.alert-danger  { background: var(--error-tint); color: #8E2710; border-color: var(--error-edge); }
.alert-warning { background: var(--warn-tint); color: var(--warn-ink); border-color: var(--warn-edge); }
.alert-info    { background: var(--soft); color: var(--ink); border-color: var(--line); }
.alert .alert-link { color: inherit; }

/* ─── Utility ────────────────────────────────────────────────── */
.font-monospace { font-family: 'SFMono-Regular', Menlo, monospace; }
pre { white-space: pre-wrap; word-break: break-word; }
.text-income  { color: var(--income) !important; }
.text-expense { color: var(--expense) !important; }
.text-deposit { color: var(--deposit) !important; }
.fw-800 { font-weight: 700 !important; }
.fw-900 { font-weight: 700 !important; }
.text-muted { color: var(--muted) !important; }

/* ─── Desktop adjustments ────────────────────────────────────── */
@media (min-width: 768px) {
  .app-main { max-width: 660px; margin: 0 auto; }
  .bottom-nav { max-width: 660px; left: 50%; transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ─── Print styles ───────────────────────────────────────────── */
@media print {
  .app-topbar, .app-menu-fab, .app-menu, .push-banner, .bottom-nav, .filter-bar, nav, button, .btn { display: none !important; }
  .app-main { padding-top: 0 !important; }
  body { background: white; }
}

/* ─── Void button ────────────────────────────────────────────── */
.void-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--line-strong);
  font-size: 1.1rem;
  padding: 4px 2px;
  min-width: var(--tap);
  min-height: var(--tap);
  cursor: pointer;
  transition: color .15s;
  align-self: center;
}
.void-btn:active { color: var(--expense); }

/* ─── Speed-dial FAB ─────────────────────────────────────────── */
.fab-speed-dial {
  position: fixed;
  bottom: calc(var(--nav-h) + 14px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 1050;
  /* Hidden by default — toggled with .open class */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.fab-speed-dial.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.fab-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.fab-action-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: var(--float);
  flex-shrink: 0;
}
.fab-action-label {
  background: var(--canvas);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--float);
  white-space: nowrap;
  color: var(--ink);
}
.bottom-nav-fab.fab-open {
  transform: rotate(45deg);
  background: var(--ink);
}
@media (min-width: 768px) {
  .fab-speed-dial { left: calc(50% + 210px); transform: none; }
}

/* ─── Catalogue, today's menu and contacts (Phase 1) ─────────── */
a.filter-chip { text-decoration: none; }
.filter-chip--active,
.filter-chip--active:focus { border-color: var(--ink); background: var(--ink); color: #FFFFFF; }
.filter-bar .form-control { min-height: 40px; }
.filter-bar--flow { position: static; }   /* search + chip rows: too tall to stay pinned on a phone */

.product-thumb {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1.4rem;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.activity-item--link { color: inherit; text-decoration: none; align-items: center; }
.activity-item--link:hover { color: inherit; }
.activity-item--muted { opacity: .65; }
.activity-item__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.badge-soft { background: var(--strong); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.badge-soft--warn { background: var(--warn-tint); color: var(--warn-ink); border-color: var(--warn-edge); }

/* Whether the guest's kiosk shows a product (the owner, 26 Sep 2026; PRODUCT_KIOSK_STATES in includes/lib/catalog_pages.php): words
   with an icon, calm — ink on white when it is on the kiosk, muted on soft grey when it is not, with why ("Hidden on kiosk"). */
.kiosk-mark {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.18;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 9999px;
  background: var(--canvas); color: var(--ink);
}
.kiosk-mark--off { background: var(--soft); color: var(--muted); border-color: var(--line-soft); }

/* Sort into categories (product_sort.php, the owner, 26 Sep 2026): a row per product without a category — a 44 px tick, the name and
   its price, why the suggestion (small, grey), the category select — and Apply in a bar that stays above the bottom bar. */
.sort-form__count { color: var(--muted); font-weight: 500; }
.sort-list { border-top: 1px solid var(--line-soft); margin-top: 8px; }
.sort-row { display: flex; gap: 8px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.sort-row__tick {
  flex: 0 0 var(--tap); width: var(--tap); min-height: var(--tap);
  display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer;
}
.sort-row__tick .form-check-input { width: 22px; height: 22px; margin: 0; cursor: pointer; }
.sort-row__body { flex: 1; min-width: 0; padding-top: 10px; }   /* the name's first line level with the tick */
.sort-row__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sort-row__name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; cursor: pointer; margin: 0; }
.sort-row__price { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sort-row__why { color: var(--muted); font-size: var(--fs-sm); line-height: 1.3; margin: 2px 0 8px; overflow-wrap: anywhere; }
.sort-row__note { color: var(--deposit); font-size: var(--fs-sm); line-height: 1.3; margin-top: 6px; }   /* amber: a consequence, not an error */
.sort-row__note:empty { display: none; }
.sort-bar {
  position: sticky; bottom: var(--nav-h); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -16px; padding: 12px 16px; background: var(--canvas); border-top: 1px solid var(--line);
}
.sort-bar__note { color: var(--muted); font-size: var(--fs-sm); }
.sort-bar .btn { min-width: 140px; }
body:has(.app-menu-fab) .sort-bar { padding-right: 136px; }   /* the legacy screens' floating Menu button sits at the bar's right end */

.photo-card { display: flex; gap: 14px; align-items: center; }
.photo-card__img {
  width: 120px; height: 120px; flex-shrink: 0; border-radius: var(--radius);
  background: var(--strong); overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 2.4rem;
}
.photo-card__img img { width: 100%; height: 100%; object-fit: cover; }
.photo-input { display: none; }

.menu-day { display: flex; align-items: center; gap: 8px; }
.menu-item { cursor: default; flex-direction: column; align-items: stretch; gap: 8px; }
.menu-item:hover, .menu-item:active { transform: none; background: var(--canvas); }
.menu-item__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avail-toggle { display: flex; gap: 6px; width: 100%; }
.avail-toggle .filter-chip { flex: 1; justify-content: center; margin: 0; border-radius: 9999px !important; min-height: var(--tap); }
.btn-check:checked + .avail-chip--available { background: var(--income); border-color: var(--income); color: #fff; }
.btn-check:checked + .avail-chip--sold_out  { background: var(--expense); border-color: var(--expense); color: #fff; }
.btn-check:checked + .avail-chip--hidden    { background: var(--muted); border-color: var(--muted); color: #fff; }
.btn-check:focus-visible + .filter-chip { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink); }
.avail-toggle.is-saving { opacity: .7; }

.app-toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); transform: translateX(-50%);
  z-index: 1100; max-width: 320px; width: max-content;
  background: var(--ink); color: #fff; border-radius: var(--radius-sm); padding: 10px 16px;
  font-size: var(--fs-sm); text-align: center; box-shadow: var(--float);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.app-toast.show { opacity: 1; }
.min-w-0 { min-width: 0; }

/* ─── Manager screens: stays, a stay, cash, entries (Phase 3, W3b) ─────────── */
.mgr-card { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.mgr-margin { color: var(--income) !important; font-variant-numeric: tabular-nums; }
.mgr-margin--negative { color: var(--expense) !important; }
.mgr-details > summary, summary.mgr-settle { cursor: pointer; list-style: none; }
.mgr-details > summary::-webkit-details-marker, summary.mgr-settle::-webkit-details-marker { display: none; }
.mgr-dashed { border-style: dashed; }

.mgr-stay-head h3 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
.mgr-stay-head__meta { font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.mgr-totals, .mgr-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mgr-totals { margin-top: 12px; }
.mgr-totals > div { background: var(--soft); border-radius: var(--radius-sm); padding: 8px 10px; }
.mgr-totals small, .mgr-figs small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.mgr-totals b { font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mgr-figs { margin-top: 8px; font-size: var(--fs-xs); }
.mgr-figs b { font-variant-numeric: tabular-nums; }
/* A figure EUR first, its ALL under it, smaller and grey (the owner, 28 Sep 2026: "show margins first in euro, then in ALL (smaller/grey)");
   managerPageEurFirstHtml() of includes/partials/manager_page.php. The ALL keeps its grey inside a green or red margin. */
.eur-all { display: block; font-size: var(--fs-xs); font-weight: 500; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mgr-totals small.eur-all { font-weight: 500; }
.mgr-totals > div, .mgr-figs > div { min-width: 0; overflow-wrap: anywhere; }
.activity-item__amount--stack, .mgr-addon__fig { display: inline-flex; flex: none; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
/* Before check-in charges the rent: the expected figures' line (stayExpectedFigures()). */
.results-expected { color: var(--warn-ink); font-weight: 500; }
.mgr-expected { margin: 12px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-tint); color: var(--warn-ink); font-size: .8125rem; font-weight: 500; }

.mgr-addon { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.mgr-addon + .mgr-addon { margin-top: 8px; }
.mgr-addon--itself { background: var(--soft); }
.mgr-addon--cancelled { opacity: .65; }
.mgr-addon__top { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: .9375rem; }
.mgr-acts { display: flex; gap: 6px; margin-top: 10px; }
.mgr-acts .btn { flex: 1; font-weight: 600; border-radius: var(--radius-sm); }
.btn-mgr-cost { color: var(--expense); border: 1px solid var(--error-edge); background: var(--error-tint); }
.btn-mgr-cost:hover, .btn-mgr-cost:active { color: var(--expense); background: #F7DDD6; border-color: var(--expense); }
.btn-mgr-income { color: var(--income); border: 1px solid var(--ok-edge); background: var(--ok-tint); }
.btn-mgr-income:hover, .btn-mgr-income:active { color: var(--income); background: #D8EBDF; border-color: var(--income); }
.mgr-settle { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.btn-check:checked + .mgr-choice { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-check:disabled + .mgr-choice { opacity: .5; }

a.balance-card, a.balance-card:hover { color: var(--ink); text-decoration: none; }
.mgr-box-card { min-width: 72%; }
.mgr-box-card--current { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.mgr-box-card__transit { font-size: var(--fs-xs); font-weight: 500; margin-top: 4px; color: var(--muted); }
.mgr-waiting { background: var(--ok-tint); border-color: var(--ok-edge); }
.mgr-waiting__amount { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mgr-received { font-weight: 600; padding: 12px; }

.activity-item--voided .activity-item__cat, .activity-item--voided .activity-item__amount { text-decoration: line-through; }
.mgr-entry { flex-direction: column; align-items: stretch; gap: 0; cursor: default; }
.mgr-entry:hover, .mgr-entry:active { transform: none; background: var(--canvas); }
.mgr-entry__link, .mgr-entry__link:hover { display: block; color: inherit; text-decoration: none; }
.mgr-entry__actions { margin-top: 6px; }
.mgr-clock { color: var(--deposit); font-weight: 600; }
.mgr-photo img { max-width: 100%; max-height: 220px; border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* ─── The UI pass of 23 Sep 2026: page titles, focus, the notifications banner, reduced motion ─── */
/* Page titles on the type scale: every page's h5 title at --fs-xl, the same weight and rhythm. */
.app-main h5.fw-bold { font-size: var(--fs-xl); font-weight: 700 !important; line-height: 1.3; letter-spacing: -.01em; }

/* A visible focus ring for keyboard users wherever a component brings none of its own. */
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The notifications banner (includes/footer.php): a quiet soft card under the bar. */
.push-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 12px 4px;
  padding: 6px 4px 6px 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--fs-sm);
}
.push-banner__icon { flex-shrink: 0; font-size: 1.1rem; color: var(--ink); }
.push-banner__icon--ok { color: var(--income); }
.push-banner__text { flex: 1 1 auto; min-width: 0; }
.push-banner__enable { flex-shrink: 0; min-height: var(--tap); padding: 0 14px; white-space: nowrap; }
/* How? opens Install the app's steps (includes/partials/app_install.php): a text button, 44 px tall. */
.push-banner__how {
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  white-space: nowrap;
}
.push-banner__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ─── Hover, where a pointer hovers (a tapped button on a phone would keep it) ─ */
@media (hover: hover) {
  .app-menu-fab:hover { background: var(--soft); }
  .app-menu__close:hover { background: var(--line-soft); }
  .app-menu__item:hover { background: var(--soft); color: var(--ink); }
  .app-menu__item:hover > .bi { color: var(--ink); }
  .app-menu__item.is-current:hover { background: var(--strong); }
  .app-menu__item--logout:hover, .app-menu__item--logout:hover > .bi { color: var(--expense); }
  .bottom-nav-item:hover:not(.bottom-nav-fab) { color: var(--ink); }
  .bottom-nav-fab:hover { background: var(--coral-down); }
  .bottom-nav-fab.fab-open:hover { background: #000000; }
  .activity-item:hover { border-color: var(--line-strong); }
  .activity-item--highlight:hover { border-color: var(--ink); }
  .quick-btn:hover { filter: brightness(.92); }
  .filter-chip:hover { border-color: var(--ink); }
  .filter-chip--clear:hover { border-color: var(--expense); }
  .bill-upload-area:hover { border-color: var(--ink); background: var(--strong); }
  .void-btn:hover { color: var(--expense); }
  .push-banner__close:hover { background: var(--strong); color: var(--ink); }
  .login-install__link:hover { color: var(--ink); }
  .app-topbar__bell:hover { background: var(--line-soft); }
  .app-search__input:hover:not(:focus) { border-color: var(--line-strong); }
  .app-search__item:hover { background: var(--soft); }
  .app-search__back:hover { background: var(--line-soft); }
  .app-install__more:hover, .push-banner__how:hover { text-decoration-thickness: 2px; }
  .menu-item:hover, .mgr-entry:hover { border-color: var(--line); }
}

/* Less motion when the phone asks for it: no slides, lifts or spins. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .quick-btn:active, .bottom-nav-fab:active { transform: none; }
  .app-search__panel { animation: none; }
}

/* ─── The opening animation, "Gold shine" (the owner, 10 Oct 2026) ─────────────────────────────────────────────
   includes/lib/app_intro.php prints the overlay right after <body>, hidden; appIntro (the script) shows it on the first page of the
   installed app's session. Over the launch colour, the emblem fades in (0.5 s), the lettering of the logo follows, a skewed band of light
   sweeps across the emblem's box only (overflow hidden, mix-blend-mode overlay: on white strokes it lights the gold between them, on gold
   strokes the strokes), and from 1.25 s the whole overlay fades into the page: 1.6 s. A page opened from the Home Screen (.is-launch) shows
   it from its first frame in the installed app; the fade-out ends it even without the script. Less motion: a plain fade in and out, no band.
   On top of everything (the screen saver, the sheets), and never on paper. */
.app-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(5vmin, 36px);
  background: #FFFFFF;
  pointer-events: auto;
  animation: app-intro-out .35s ease-in 1.25s both;
}
.app-intro--white { background: #CCA151; }
.app-intro[hidden] { display: none !important; }
.app-intro.is-on { display: flex !important; }
@media (display-mode: standalone), (display-mode: fullscreen) {
  .app-intro.is-launch[hidden] { display: flex !important; }
}
.app-intro__box {
  position: relative;
  overflow: hidden;
  width: min(30vmin, 280px);
  aspect-ratio: 294.28 / 413.59;
  animation: app-intro-in .5s ease-out both;
}
.app-intro__emblem { display: block; width: 100%; height: 100%; }
.app-intro__shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -70%;
  width: 40%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  mix-blend-mode: overlay;
  animation: app-intro-sweep .8s ease-in-out .45s both;
}
.app-intro__wordmark {
  display: block;
  width: min(39vmin, 364px);
  height: auto;
  animation: app-intro-word .45s ease-out .3s both;
}
@keyframes app-intro-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-intro-word { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes app-intro-sweep { from { left: -70%; } to { left: 130%; } }
@keyframes app-intro-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .app-intro { animation: app-intro-out .4s ease-in .8s both !important; }
  .app-intro .app-intro__box, .app-intro .app-intro__wordmark { animation: app-intro-in .4s ease-out both !important; }
  .app-intro .app-intro__shine { display: none; animation: none !important; }
}
@media print {
  .app-intro, .app-intro.is-on, .app-intro.is-launch[hidden] { display: none !important; }
}