/* =====================================================================
   BLACKLIST — APP THEME (back of house + client delivery page)
   ---------------------------------------------------------------------
   The public site is editorial: hairlines, all-caps micro-labels,
   underline-only fields. That reads as a magazine, and it made the
   office hard to use — sections, buttons, fields and the calendar all
   blended into one another.

   This theme is for tools. Everything is scoped to <body class="app">,
   so the public pages are untouched. The rules it follows:
     · every section is a white card on a soft background
     · buttons are solid and obviously pressable, in normal case
     · fields are boxes, not lines
     · status is a coloured pill, not an outline
     · one dark primary action per area; everything else secondary
   ===================================================================== */

body.app {
  /* palette — light */
  --app-bg:      #f3f2ef;
  --app-card:    #ffffff;
  --app-card-2:  #f8f7f4;
  --app-line:    #e3e1db;
  --app-line-2:  #cfccc4;
  --app-ink:     #141412;
  --app-ink-2:   #4b4a44;
  --app-mute:    #7b7970;
  --app-primary: #141412;
  --app-on-primary: #ffffff;
  --app-ring:    rgba(20, 20, 18, .12);

  --ok-bg: #e2f1e4;   --ok-ink: #22622d;
  --warn-bg: #f7e8c6; --warn-ink: #7a5307;
  --bad-bg: #f8e0dd;  --bad-ink: #9a2b21;
  --info-bg: #e4ecf8; --info-ink: #1e4884;
  --vio-bg: #ece7f8;  --vio-ink: #4e3a8a;
  --grey-bg: #ebe9e4; --grey-ink: #54524b;

  --r-card: 16px;
  --r-ctl: 10px;
  --app-shadow: 0 1px 2px rgba(20, 20, 18, .04), 0 2px 10px -6px rgba(20, 20, 18, .08);

  /* the site's own tokens, remapped so every existing component and
     inline style picks up the app palette without being rewritten */
  --bg: var(--app-bg);
  --bg-2: var(--app-card);
  --bg-3: var(--app-card-2);
  --surface: var(--app-card);
  --ink: var(--app-ink);
  --ink-dim: var(--app-ink-2);
  --ink-mute: var(--app-mute);
  --line: var(--app-line);
  --line-soft: var(--app-line);
  --line-strong: var(--app-line-2);
  --accent: var(--app-primary);
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: var(--app-bg);
  color: var(--app-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  body.app {
    --app-bg:      #0f1012;
    --app-card:    #18191c;
    --app-card-2:  #1f2024;
    --app-line:    #2a2b30;
    --app-line-2:  #3b3c42;
    --app-ink:     #f2f1ed;
    --app-ink-2:   #c6c4bd;
    --app-mute:    #918f88;
    --app-primary: #f2f1ed;
    --app-on-primary: #121212;
    --app-ring:    rgba(242, 241, 237, .16);
    --ok-bg: #16301c;   --ok-ink: #92d39f;
    --warn-bg: #3a2c10; --warn-ink: #f1c76c;
    --bad-bg: #3b1714;  --bad-ink: #f3998f;
    --info-bg: #132741; --info-ink: #98bbec;
    --vio-bg: #251d3d;  --vio-ink: #c1b1f1;
    --grey-bg: #26272b; --grey-ink: #c0beb7;
    --app-shadow: none;
  }
}

/* ---------- type ---------- */
body.app h1, body.app h2, body.app h3, body.app h4 { font-family: inherit; letter-spacing: -0.01em; }

/* ---------- header: office pages ---------- */
body.app .of-head { background: var(--app-card); border-bottom: 1px solid var(--app-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.app .of-head__in { padding-top: .75rem; padding-bottom: .75rem; }
body.app .of-brand { font-family: inherit; font-weight: 700; letter-spacing: .22em; font-size: .8rem; }
body.app .of-nav { gap: .3rem; }
body.app .of-nav a {
  font-family: inherit; font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--app-ink-2); padding: .45rem .95rem; border-radius: 999px; border-bottom: 0;
}
@media (hover: hover) and (pointer: fine) { body.app .of-nav a:hover { background: var(--grey-bg); color: var(--app-ink); } }
body.app .of-nav a.on { background: var(--app-primary); color: var(--app-on-primary); }
body.app .of-side { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--app-mute); }
body.app .of-side a { color: var(--app-ink-2); padding: .35rem .7rem; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { body.app .of-side a:hover { background: var(--grey-bg); color: var(--app-ink); } }
body.app .of-mode { background: var(--grey-bg); color: var(--grey-ink); padding: .3rem .7rem; border-radius: 999px; font-size: .76rem; }
body.app .of-mode.live { background: var(--ok-bg); color: var(--ok-ink); }
body.app .of-mode.live::before { background: var(--ok-ink); }

/* ---------- header: photographer's page (keeps its own menu) ---------- */
body.app .site-header .nav { background: var(--app-card) !important; border: 1px solid var(--app-line) !important; box-shadow: var(--app-shadow) !important; }
body.app .nav-links a { font-size: .88rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--app-ink-2); padding: .4rem .8rem; border-radius: 999px; }
body.app .nav-links a::after { display: none; }
body.app .nav-links a.current { background: var(--grey-bg); color: var(--app-ink); }
@media (hover: hover) and (pointer: fine) { body.app .nav-links a:hover { background: var(--grey-bg); color: var(--app-ink); } }

/* ---------- page titles ---------- */
body.app .of-main { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
body.app .of-title h1 { font-weight: 650; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: -0.025em; }
body.app .of-title .of-when { text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--app-mute); }
body.app .of-sub { color: var(--app-ink-2); font-size: .95rem; margin-bottom: 1.4rem; }
body.app .page-hero { padding-top: clamp(5.5rem, 9vw, 6.5rem); padding-bottom: 1.2rem; }
body.app .page-hero .eyebrow { font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--app-mute); }
body.app .page-hero .display { font-weight: 650; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: -0.025em; margin-top: .4rem; line-height: 1.15; }
body.app .section { padding-top: 1rem; }

/* jump-to-section chips */
body.app .of-jump { gap: .45rem; margin-bottom: 1.4rem; }
body.app .of-jump a {
  font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 500;
  color: var(--app-ink-2); background: var(--app-card); border: 1px solid var(--app-line); padding: .42rem .85rem;
}
@media (hover: hover) and (pointer: fine) { body.app .of-jump a:hover { border-color: var(--app-line-2); color: var(--app-ink); } }

/* grouped section menu: full width, edge to edge with the cards below */
body.app .of-jump--groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; width: 100%; }
body.app .of-jump--groups > a.jg-one,
body.app .of-jump--groups .jg > summary {
  display: flex; align-items: center; justify-content: center; gap: .45rem; text-align: center;
  font-size: .86rem; font-weight: 550; color: var(--app-ink-2); background: var(--app-card);
  border: 1px solid var(--app-line); border-radius: 999px; padding: .6rem .9rem; cursor: pointer; text-decoration: none;
  white-space: nowrap; height: 2.6rem; box-sizing: border-box;
}
body.app .of-jump--groups .jg:last-child .jg-menu { left: auto; right: 0; }
body.app .of-jump--groups .jg { position: relative; }
body.app .of-jump--groups .jg > summary { list-style: none; }
body.app .of-jump--groups .jg > summary::-webkit-details-marker { display: none; }
body.app .of-jump--groups .jg > summary::after {
  content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translateY(-2px); transition: transform .18s; opacity: .7;
}
body.app .of-jump--groups .jg[open] > summary { border-color: var(--app-line-2); color: var(--app-ink); }
body.app .of-jump--groups .jg[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
@media (hover: hover) and (pointer: fine) { body.app .of-jump--groups > a.jg-one:hover, body.app .of-jump--groups .jg > summary:hover { border-color: var(--app-line-2); color: var(--app-ink); } }
body.app .of-jump--groups .jg-menu {
  position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; right: 0; min-width: 190px;
  background: var(--app-card); border: 1px solid var(--app-line); border-radius: 14px; padding: .35rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.12); display: grid;
}
body.app .of-jump--groups .jg-menu a {
  border: 0; background: none; border-radius: 9px; padding: .55rem .75rem; font-size: .88rem; justify-content: flex-start; text-align: left;
}
@media (hover: hover) and (pointer: fine) { body.app .of-jump--groups .jg-menu a:hover { background: var(--app-bg, rgba(0,0,0,.04)); } }

/* ---------- cards ---------- */
body.app .dash-panel {
  background: var(--app-card); border: 1px solid var(--app-line); border-radius: var(--r-card);
  padding: clamp(1.1rem, 2.2vw, 1.5rem); box-shadow: var(--app-shadow);
}
body.app .dash-panel h3 { font-weight: 650; font-size: 1.08rem; margin-bottom: 1rem; }
body.app .dash-panel > header { margin-bottom: 1rem; align-items: center; }
/* the header row centres its title; the h3's own gap would push it off-centre */
body.app .dash-panel > header > h3 { margin-bottom: 0; line-height: 1.3; }
body.app .dash-panel > header a, body.app .dash-panel > header button.link {
  font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 500;
  color: var(--app-ink-2); background: var(--grey-bg); padding: .38rem .8rem; border-radius: 999px;
}
@media (hover: hover) and (pointer: fine) { body.app .dash-panel > header a:hover, body.app .dash-panel > header button.link:hover { background: var(--app-line); color: var(--app-ink); } }
body.app .dash-panel > header .of-when, body.app .of-when {
  font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .84rem; color: var(--app-mute);
}
body.app .needs-action { border: 1px solid var(--app-line); }

/* column heading on Today */
body.app .of-side-h { border-bottom: 0; padding-bottom: 0; margin: 0 0 .8rem; }
body.app .of-side-h h2 { font-weight: 650; font-size: 1.3rem; }
body.app .of-side-h a {
  font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 500;
  color: var(--app-ink-2); background: var(--app-card); border: 1px solid var(--app-line); padding: .38rem .8rem; border-radius: 999px;
}

/* sub-headings inside a card */
body.app .of-sub-h, body.app #ed-list h4 {
  font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: .9rem !important; font-weight: 650 !important; color: var(--app-ink) !important; margin-top: 1.4rem !important;
}
body.app #ed-list h4 span { color: var(--app-mute); font-weight: 400; }

/* ---------- figures ---------- */
body.app .kpis { background: none; border: 0; gap: .75rem; margin: 0 0 1.4rem; }
body.app .kpi {
  background: var(--app-card); border: 1px solid var(--app-line); border-radius: 14px;
  padding: 1rem 1.1rem; box-shadow: var(--app-shadow); text-decoration: none; transition: border-color .2s, transform .2s;
}
@media (hover: hover) and (pointer: fine) { body.app a.kpi:hover { border-color: var(--app-line-2); transform: translateY(-1px); } }
body.app .kpi b { font-weight: 650; letter-spacing: -0.02em; }
body.app .kpi span { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--app-mute); margin-top: .45rem; }
body.app .kpi--owed { background: var(--warn-bg); border-color: transparent; }
body.app .kpi--owed b, body.app .kpi--owed span { color: var(--warn-ink); }
body.app .dash-panel .kpis .kpi { box-shadow: none; background: var(--app-card-2); }
body.app .dash-panel .kpis .kpi--owed { background: var(--warn-bg); }

/* ---------- list rows ---------- */
body.app .of-row { border-top: 1px solid var(--app-line); padding: .85rem 0; }
body.app .of-row:first-of-type { border-top: 0; }
body.app a.of-row { margin: 0 -.65rem; padding-left: .65rem; padding-right: .65rem; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { body.app a.of-row:hover { background: var(--app-card-2); } }
body.app .of-row__main b { font-family: inherit; font-weight: 600; font-size: .96rem; }
body.app .of-row__main span { font-size: .84rem; color: var(--app-mute); }
body.app .of-row__right { font-family: inherit; font-weight: 600; }
body.app .of-row__right small { text-transform: none; letter-spacing: 0; font-size: .76rem; font-weight: 400; }

/* ---------- status pills ---------- */
body.app .chip {
  border: 0; border-radius: 999px; font-family: inherit; text-transform: none; letter-spacing: 0;
  font-size: .78rem; font-weight: 600; padding: .28rem .7rem; background: var(--grey-bg); color: var(--grey-ink);
}
body.app .chip--go   { background: var(--ok-bg);   color: var(--ok-ink); }
body.app .chip--wait { background: var(--warn-bg); color: var(--warn-ink); }
body.app .chip--done { background: var(--grey-bg); color: var(--grey-ink); }

/* ---------- needs you ---------- */
body.app .needs-item { padding: .75rem .55rem; margin: 0 -.55rem; border-top: 1px solid var(--app-line); border-radius: 10px; align-items: center; }
body.app .needs-item:first-child { border-top: 0; }
@media (hover: hover) and (pointer: fine) { body.app a.needs-item:hover { background: var(--app-card-2); } }
body.app .needs-tag {
  font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .76rem; font-weight: 600;
  border-radius: 999px; padding: .25rem .7rem; background: var(--grey-bg); color: var(--grey-ink); min-width: 4.6rem; text-align: center;
}
body.app .needs-tag.t-deal    { background: var(--info-bg); color: var(--info-ink); }
body.app .needs-tag.t-edit    { background: var(--warn-bg); color: var(--warn-ink); }
body.app .needs-tag.t-shoot   { background: var(--warn-bg); color: var(--warn-ink); }
body.app .needs-tag.t-deliver { background: var(--ok-bg);   color: var(--ok-ink); }
body.app .needs-tag.t-invoice { background: var(--vio-bg);  color: var(--vio-ink); }
body.app .needs-d { font-size: .94rem; color: var(--app-ink); }
body.app .needs-clear, body.app .book-empty { color: var(--app-mute); font-size: .92rem; }

/* ---------- buttons ---------- */
body.app .btn {
  font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 600;
  padding: .7rem 1.15rem; border-radius: var(--r-ctl); gap: .5rem; overflow: visible;
  background: var(--app-card); color: var(--app-ink); border: 1px solid var(--app-line-2);
  transition: background .15s, border-color .15s, opacity .15s;
}
body.app .btn::after { display: none; }
@media (hover: hover) and (pointer: fine) { body.app .btn:hover { background: var(--app-card-2); border-color: var(--app-mute); color: var(--app-ink); } }
body.app .btn--solid { background: var(--app-primary); color: var(--app-on-primary); border-color: var(--app-primary); }
@media (hover: hover) and (pointer: fine) { body.app .btn--solid:hover { background: var(--app-primary); color: var(--app-on-primary); border-color: var(--app-primary); opacity: .86; } }
body.app .btn.danger { color: var(--bad-ink); border-color: transparent; background: var(--bad-bg); }
@media (hover: hover) and (pointer: fine) { body.app .btn.danger:hover { background: var(--bad-bg); opacity: .8; } }
body.app .btn:disabled { opacity: .45; cursor: not-allowed; }
body.app .btn .arr { transition: none; }
/* small buttons that were sized inline get one consistent small size */
body.app .btn[style*="font-size"], body.app .of-row .btn {
  font-size: .82rem !important; padding: .42rem .8rem !important; letter-spacing: 0 !important; border-radius: 8px !important;
}
body.app .dash-panel .btn { padding: .7rem 1.15rem; letter-spacing: 0; font-size: .9rem; }

/* ---------- fields ---------- */
body.app .form { gap: 1.1rem; }
body.app .form-grid-2 { gap: 1rem; }
body.app .field { gap: .4rem; }
body.app .field label {
  font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 600; color: var(--app-ink-2);
}
body.app .field input, body.app .field select, body.app .field textarea {
  background-color: var(--app-card); border: 1px solid var(--app-line-2); border-radius: var(--r-ctl);
  padding: .68rem .85rem; font-size: .95rem; font-weight: 400; color: var(--app-ink); min-height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
body.app .field input:focus, body.app .field select:focus, body.app .field textarea:focus {
  outline: none; border-color: var(--app-primary); box-shadow: 0 0 0 3px var(--app-ring);
}
body.app .field input::placeholder, body.app .field textarea::placeholder { color: var(--app-mute); opacity: .8; }
body.app .field select { padding-right: 2.2rem; background-position: right .85rem center; }
/* loose inputs and selects outside a .field (dates, stage pickers in rows) */
body.app select:not(.field select), body.app input[type="date"]:not(.field input), body.app input[type="url"]:not(.field input) {
  font-family: inherit; font-size: .86rem !important; color: var(--app-ink);
  background-color: var(--app-card); border: 1px solid var(--app-line-2); border-radius: 8px;
  padding: .45rem .65rem !important;
}
body.app input[type="checkbox"] { accent-color: var(--app-primary); width: 18px; height: 18px; }
body.app .form-note { font-size: .84rem; color: var(--app-mute); }
body.app .form-note a { color: var(--app-ink); }
body.app .form-status { font-size: .88rem; font-weight: 500; letter-spacing: 0; }
body.app .form-status.ok  { color: var(--ok-ink); }
body.app .form-status.err { color: var(--bad-ink); }

/* custom checkboxes */
body.app .check .box { border: 1.5px solid var(--app-line-2); border-radius: 5px; background: var(--app-card); }
body.app .check .box::after {
  width: 5px; height: 9px; background: none; border: solid var(--app-on-primary); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); margin-top: -2px;
}
body.app .check input:checked + .box { background: var(--app-primary); border-color: var(--app-primary); }
body.app .check input:checked + .box::after { transform: rotate(45deg) scale(1); }
body.app .check input:disabled + .box { opacity: .6; }
body.app .check .txt { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--app-ink); }

/* segmented control: grey track, the chosen option a white pill */
body.app .seg { background: var(--grey-bg); border: 0; padding: 3px; gap: 2px; }
body.app .seg button {
  font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 500;
  color: var(--app-ink-2); border-radius: 999px; padding: .4rem .9rem;
}
body.app .seg button.on { background: var(--app-card); color: var(--app-ink); box-shadow: 0 1px 2px rgba(0,0,0,.14); }

/* ---------- quick actions ---------- */
body.app .of-acts { background: none; border: 0; gap: .75rem; }
body.app .of-acts a {
  background: var(--app-card-2); border: 1px solid var(--app-line); border-radius: 14px; padding: 1rem 1.1rem;
}
@media (hover: hover) and (pointer: fine) { body.app .of-acts a:hover { border-color: var(--app-line-2); background: var(--app-card); } }
body.app .of-acts b { font-family: inherit; font-weight: 650; font-size: .98rem; }
body.app .of-acts span { font-size: .84rem; color: var(--app-mute); }

/* ---------- inline send panel ---------- */
body.app .send-panel { background: var(--app-card-2); border: 1px solid var(--app-line-2); border-radius: 14px; }

/* ---------- calendar ---------- */
body.app .cal__head { margin-bottom: .9rem; }
body.app .cal__title { font-family: inherit; font-weight: 650; font-size: 1.15rem; }
body.app .cal__nav { border-radius: 10px; border: 1px solid var(--app-line-2); background: var(--app-card); }
@media (hover: hover) and (pointer: fine) { body.app .cal__nav:hover:not(:disabled) { background: var(--app-primary); color: var(--app-on-primary); } }
body.app .cal__dows span { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .76rem; font-weight: 600; }
body.app .cal__grid { gap: 5px; }
body.app .cal__cell { border: 0; border-radius: 10px; background: transparent; font-family: inherit; font-weight: 500; }
body.app .cal__cell--empty { background: none; }
body.app .cal__cell.is-closed, body.app .cal__cell:disabled { color: var(--app-mute); opacity: .55; background: transparent; }
body.app .cal__cell.is-open { background: var(--ok-bg); color: var(--ok-ink); font-weight: 650; opacity: 1; }
@media (hover: hover) and (pointer: fine) { body.app .cal__cell.is-open:hover { background: var(--ok-ink); color: var(--app-card); } }
body.app .cal__cell.is-selected { background: var(--app-primary); color: var(--app-on-primary); }
@media (hover: hover) and (pointer: fine) { body.app .cal__cell.is-selected:hover { background: var(--app-primary); color: var(--app-on-primary); } }
body.app .cal__cell.is-today { background: transparent; box-shadow: inset 0 0 0 2px var(--app-primary); }
body.app .cal__cell.is-today .cal__num { color: var(--app-ink); font-family: inherit; letter-spacing: 0; text-transform: none; font-size: .7rem; font-weight: 700; }
body.app .cal__cell.is-today.is-open { background: var(--ok-bg); }
body.app .cal__cell.is-today .cal__badge { color: var(--app-ink); }
body.app .cal__cell.is-blocked { background: var(--bad-bg); color: var(--bad-ink); opacity: .8; }
body.app .cal__badge { font-family: inherit; letter-spacing: 0; text-transform: none; }

/* ---------- invoice builder: vehicle picker ---------- */
body.app .pick { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { body.app .pick:hover { border-color: var(--app-line-2); } }
body.app .pick b { font-family: inherit; font-weight: 600; }
body.app .pick .tag { text-transform: none; letter-spacing: 0; font-size: .74rem; font-weight: 600; border: 0; background: var(--grey-bg); color: var(--grey-ink); }

/* earnings strip */
body.app .mth i { background: var(--app-primary); border-top: 0; border-radius: 4px 4px 0 0; }
body.app .mth span { text-transform: none; letter-spacing: 0; font-size: .74rem; }
body.app .mth b { font-family: inherit; font-weight: 600; }

/* old pages' connection tag */
body.app .mode-tag { border: 0; border-radius: 999px; background: var(--grey-bg); color: var(--grey-ink); text-transform: none; letter-spacing: 0; font-size: .78rem; }

/* ---------- client delivery page ---------- */
body.app .dl-mark { font-family: inherit; font-weight: 700; letter-spacing: .2em; }
body.app .dl h1 { font-weight: 650; letter-spacing: -0.025em; font-size: clamp(1.8rem, 7vw, 2.4rem); }
body.app .dl-status { color: var(--app-ink-2); }
body.app .dl-sec > h2 { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 600; color: var(--app-ink-2); }
body.app .dl-chips button { font-family: inherit; letter-spacing: 0; font-size: .88rem; font-weight: 500; border: 1px solid var(--app-line-2); background: var(--app-card); color: var(--app-ink); }
body.app .dl-chips button.on { background: var(--app-primary); color: var(--app-on-primary); border-color: var(--app-primary); }
body.app .card { background: var(--app-card); border: 1px solid var(--app-line); border-radius: var(--r-card); box-shadow: var(--app-shadow); padding: 1.05rem 1.15rem; }
body.app .card--quiet { box-shadow: none; background: var(--app-card-2); }
body.app .card__title { font-family: inherit; font-weight: 650; }
body.app .card .btn { border-radius: 12px; padding: .9rem 1rem; font-size: .95rem; }
body.app .left { border: 0; font-family: inherit; font-weight: 600; font-size: .78rem; letter-spacing: 0; padding: .3rem .75rem; }
body.app .left--ok   { background: var(--ok-bg);   color: var(--ok-ink); }
body.app .left--warn { background: var(--warn-bg); color: var(--warn-ink); }
body.app .left--dead { background: var(--grey-bg); color: var(--grey-ink); }
body.app .car { font-size: .94rem; }
body.app .car b { font-weight: 500; }
body.app .bk-lab { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 600; color: var(--app-ink-2); }
body.app .plan-box { background: var(--app-card); border: 1px solid var(--app-line); border-radius: var(--r-card); }
body.app .dl-none { border: 1px dashed var(--app-line-2); border-radius: 12px; background: var(--app-card); }

/* tool pages now use the in-flow office header, so the title no longer
   needs to clear a floating one (the photographer's page still does) */
body.app .of-head ~ .page-hero { padding-top: clamp(1.4rem, 3vw, 2.2rem); }
body.app .of-head ~ .page-hero .container { max-width: 1240px; }
body.app .dash-panel .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr)); }
body.app .send-panel .of-sub-h { margin-top: 0 !important; font-size: 1rem !important; }


/* ---------- photographer's page ---------- */
/* his floating header, in the app style */
body.app .ph-head { background: var(--app-card); border: 1px solid var(--app-line); box-shadow: var(--app-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.app .ph-head > a.brand { font-family: inherit; font-weight: 700; letter-spacing: .22em; font-size: .82rem; }
body.app .ph-head nav { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .9rem; gap: .3rem; }
body.app .ph-head nav a { font-weight: 500; color: var(--app-ink-2); padding: .4rem .85rem; border-radius: 999px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { body.app .ph-head nav a:hover { background: var(--grey-bg); color: var(--app-ink); } }
/* each of his sections becomes a card, so shoots, balance and calendar
   are clearly separate blocks */
body.app #shoots-sec > .container, body.app #balance-sec > .container, body.app #cal-sec > .container {
  background: var(--app-card); border: 1px solid var(--app-line); border-radius: var(--r-card);
  box-shadow: var(--app-shadow); padding: clamp(1.2rem, 3vw, 1.8rem);
}
body.app #balance-sec, body.app .section--hair { background: transparent; border: 0; }
body.app #shoots-sec, body.app #balance-sec, body.app #cal-sec { padding-top: .6rem; padding-bottom: .6rem; }
body.app .h-md { font-family: inherit; font-weight: 650; font-size: 1.35rem; letter-spacing: -0.015em; }

/* ---------- small tidy-ups ---------- */
body.app .eyebrow { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 500; color: var(--app-mute); }
body.app .eyebrow::before { display: none; }
body.app .pick b { color: var(--app-ink); }
body.app .pick span { color: var(--app-mute); }
body.app #shoots-sec > .container, body.app #balance-sec > .container, body.app #cal-sec > .container {
  box-sizing: border-box; max-width: min(820px, calc(100% - 2rem)); margin-inline: auto;
}

body.app .bk-card { border-color: var(--app-line); box-shadow: var(--app-shadow); }
body.app .bk-lab { margin-bottom: .4rem; display: block; }

/* announce-on-WhatsApp box after a delivery is sent */
body.app .announce { background: var(--ok-bg); border-radius: 14px; padding: 1rem 1.1rem; margin: .4rem 0 1rem; }
body.app .announce__lead { font-weight: 600; color: var(--ok-ink); margin: 0 0 .7rem; font-size: .92rem; }
body.app .announce__msg { white-space: pre-wrap; font-family: inherit; font-size: .88rem; line-height: 1.5; color: var(--app-ink);
  background: var(--app-card); border: 1px solid var(--app-line); border-radius: 10px; padding: .75rem .9rem; margin: 0 0 .8rem; }
body.app .announce__acts { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- delivery uploads (office) and gallery (client page) ---------- */
body.app .up { display: grid; gap: .7rem; }
body.app .up-car { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 12px; padding: .8rem .9rem; }
body.app .up-car__top { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
body.app .up-car__top b { font-weight: 600; font-size: .92rem; }
body.app .up-car__top span { font-size: .8rem; color: var(--app-mute); }
body.app .up-drop { margin-top: .6rem; border: 1.5px dashed var(--app-line-2); border-radius: 10px; padding: .9rem; display: flex;
  flex-wrap: wrap; gap: .5rem .8rem; align-items: center; justify-content: center; text-align: center; font-size: .86rem; color: var(--app-ink-2);
  transition: background .15s, border-color .15s; }
body.app .up-drop.is-over { background: var(--info-bg); border-color: var(--info-ink); }
body.app .up-pick { cursor: pointer; font-weight: 600; color: var(--app-ink); background: var(--app-card-2); border: 1px solid var(--app-line-2);
  border-radius: 999px; padding: .35rem .85rem; font-size: .8rem; }
@media (hover: hover) and (pointer: fine) { body.app .up-pick:hover { background: var(--grey-bg); } }
body.app .up-clear { background: none; border: 0; color: var(--app-mute); text-decoration: underline; cursor: pointer; font: inherit; font-size: .8rem; }
body.app .up-bar { height: 6px; background: var(--grey-bg); border-radius: 99px; overflow: hidden; margin-top: .6rem; }
body.app .up-bar i { display: block; height: 100%; width: 0; background: var(--app-primary); border-radius: 99px; transition: width .35s linear; }
body.app .up-bar--all { height: 8px; }
body.app .up-all p { margin: .5rem 0 0; font-size: .86rem; color: var(--app-ink-2); }
body.app .up-all .up-note { color: var(--app-mute); font-size: .8rem; }
body.app .up-all .up-err { color: var(--bad-ink); font-weight: 600; }
body.app .up-all .up-ok { color: var(--ok-ink); font-weight: 600; }

body.app .gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; margin-top: .8rem; }
body.app .gal button { all: unset; cursor: pointer; aspect-ratio: 1; background: var(--grey-bg) center/cover no-repeat; border-radius: 6px;
  position: relative; overflow: hidden; display: grid; place-items: center; font-size: .66rem; color: var(--app-ink-2); text-align: center; padding: 4px; box-sizing: border-box; }
body.app .gal button:focus-visible { outline: 2px solid var(--app-ink); outline-offset: 1px; }
body.app .gal .vid::after { content: "▶"; position: absolute; top: 6px; right: 7px; font-size: .7rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
body.app .dl-car { border-top: 1px solid var(--app-line); padding: .8rem 0 .2rem; }
body.app .dl-car:first-of-type { border-top: 0; }
body.app .dl-car__top { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
body.app .dl-car__top b { font-weight: 600; font-size: .92rem; }
body.app .dl-car__top span { font-size: .8rem; color: var(--app-mute); white-space: nowrap; }
body.app .dl-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
body.app .card .dl-acts .btn { width: auto; flex: 1 1 10rem; margin-top: 0; padding: .7rem .9rem; }
body.app .dl-prog { font-size: .82rem; color: var(--app-ink-2); margin-top: .5rem; }
body.app .lb { position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,9,.94); display: grid; grid-template-rows: auto 1fr auto; color: #fff; }
body.app .lb[hidden] { display: none !important; }
body.app .lb__top, body.app .lb__bot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .8rem 1rem; font-size: .84rem; }
body.app .lb__img { display: grid; place-items: center; min-height: 0; padding: 0 .6rem; }
body.app .lb__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
body.app .lb button, body.app .lb a { all: unset; cursor: pointer; padding: .55rem .9rem; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-weight: 600; font-size: .84rem; }
body.app .lb a.lb__dl { background: #fff; color: #111; }


/* ---------- overview + subpages ---------- */
body.app .of-back { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.2rem; }
body.app .of-back a { font-size: .86rem; color: var(--app-mute); text-decoration: none; width: max-content; }
@media (hover: hover) and (pointer: fine) { body.app .of-back a:hover { color: var(--app-ink); } }
body.app .of-back h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 650; letter-spacing: -.02em; margin: 0; }
body.app .of-main.is-sub section.dash-panel { margin-top: 0 !important; }
body.app .of-main.is-sub section.dash-panel + section.dash-panel { margin-top: 1.4rem !important; }
body.app .of-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; margin-top: 1.4rem; }
body.app .of-tile {
  position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem 1.15rem;
  background: var(--app-card); border: 1px solid var(--app-line); border-radius: var(--r-card, 18px);
  text-decoration: none; color: var(--app-ink); transition: border-color .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) { body.app .of-tile:hover { border-color: var(--app-line-2); transform: translateY(-1px); } }
body.app .of-tile span { font-size: .84rem; font-weight: 600; color: var(--app-ink-2); }
body.app .of-tile b { font-size: 1.55rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
body.app .of-tile small { font-size: .8rem; color: var(--app-mute); line-height: 1.4; }
body.app .of-tile i { position: absolute; top: 1rem; right: 1.1rem; font-style: normal; color: var(--app-mute); }
body.app .of-tile--warn { border-color: rgba(201,150,40,.45); }
body.app .of-tile--warn b { color: var(--warn, #a7741b); }
body.app .of-jump--groups .is-on { border-color: var(--app-ink) !important; color: var(--app-ink) !important; }

/* confirmation box */
.of-ask { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem;
  background: rgba(10,10,12,.45); animation: of-ask-in .15s ease-out; }
.of-ask__box { width: min(420px, 100%); background: var(--app-card, #fff); color: var(--app-ink, #111); border-radius: 18px;
  padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.of-ask__box h3 { font-size: 1.1rem; font-weight: 650; margin: 0 0 .6rem; line-height: 1.3; }
.of-ask__box p { font-size: .9rem; color: var(--app-mute, #666); line-height: 1.5; margin: 0; }
.of-ask__btns { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }
body.app .of-ask__danger { background: #b4372b !important; border-color: #b4372b !important; color: #fff !important; }
@keyframes of-ask-in { from { opacity: 0; } }
body.app .of-main.is-single section.dash-panel > header > h3 { display: none; }
body.app .of-main.is-single section.dash-panel > header { justify-content: flex-end; }
body.app .of-main.is-single section.dash-panel > header:not(:has(> :not(h3))) { display: none; }

/* section menus drop in rather than snap */
body.app .of-jump--groups .jg[open] .jg-menu { animation: jg-in .18s cubic-bezier(.2,.7,.2,1); transform-origin: top center; }
@keyframes jg-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
body.app .of-drop__sum::after, body.app .of-jump--groups .jg > summary::after { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { body.app .of-jump--groups .jg[open] .jg-menu { animation: none; } }

/* ---------- tab bar: sliding pill ---------- */
body.app .of-nav.has-pill { position: relative; }
body.app .of-nav.has-pill a { position: relative; z-index: 1; transition: color .25s ease; }
body.app .of-nav.has-pill a.on { background: transparent; }
body.app .of-pill {
  position: absolute; left: 0; z-index: 0; border-radius: 999px; background: var(--app-primary);
  pointer-events: none; view-transition-name: of-pill;
}
body.app .of-pill.is-moving { transition: transform .32s cubic-bezier(.3,.8,.2,1), width .32s cubic-bezier(.3,.8,.2,1); }
body.app .of-head { view-transition-name: of-head; }
::view-transition-group(of-head) { animation-duration: 0s; }
::view-transition-group(of-pill) { animation-duration: .01s; }
@media (prefers-reduced-motion: reduce) { body.app .of-pill.is-moving { transition: none; } }
@media (hover: hover) and (pointer: fine) { body.app .of-nav.has-pill a.on:hover { background: transparent; color: var(--app-on-primary); } }

/* press feedback in the office theme */
body.app .btn { transition: background .15s, border-color .15s, opacity .15s, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
body.app .btn:active:not(:disabled) { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { body.app .btn:active:not(:disabled) { transform: none; } }

/* =====================================================================
   Office overviews (Studio, Brokerage, Today): one shared look.
   1 Needs you · 2 Where things stand · 3 Groups of rows.
   ===================================================================== */
body.app .ov-h { font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--app-mute); margin:0 0 .7rem; display:flex; align-items:center; gap:.5rem; }
body.app .ov-badge { display:inline-grid; place-items:center; min-width:1.35rem; height:1.35rem; padding:0 .35rem; border-radius:999px; background:var(--app-ink); color:var(--app-bg); font-size:.68rem; letter-spacing:0; }
body.app .ov-box { background:var(--app-card); border:1px solid var(--app-line); border-radius:var(--r-card); padding:1rem 1.1rem 1.05rem; margin-bottom:1rem; }
body.app .ov-alert { display:flex; align-items:center; gap:.8rem; padding:.75rem 0; border-top:1px solid var(--app-line); color:var(--app-ink); text-decoration:none; font-size:.95rem; }
body.app .ov-alert:first-of-type { border-top:0; }
body.app .ov-alert i { flex:none; width:.6rem; height:.6rem; border-radius:50%; background:var(--app-mute); }
body.app .ov-alert span { flex:1; min-width:0; }
body.app .ov-alert b { flex:none; font-size:.8rem; font-weight:600; color:var(--app-ink-2); }
body.app .ov-clear { margin:0; color:var(--app-mute); font-size:.92rem; }
/* tones: red = do this first, yellow = money going out, green = money coming in,
   amber = to do, blue = for your information */
body.app .t-red i,    body.app .ov-step.t-red b    { background:#c8372d; border-color:#c8372d; color:#fff; }
body.app .t-yellow i, body.app .ov-step.t-yellow b { background:#e0b020; border-color:#e0b020; color:#1b1a14; }
body.app .t-green i,  body.app .ov-step.t-green b  { background:#2f8a47; border-color:#2f8a47; color:#fff; }
body.app .t-amber i,  body.app .ov-step.t-amber b  { background:#c8902a; border-color:#c8902a; color:#fff; }
body.app .t-blue i,   body.app .ov-step.t-blue b   { background:#3f6fb5; border-color:#3f6fb5; color:#fff; }
body.app .ov-cap { margin:-.35rem 0 .9rem; font-size:.84rem; color:var(--app-mute); }
body.app .ov-phases { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.6rem; }
body.app .ov-phase { position:relative; background:var(--app-card-2); border-radius:12px; padding:.75rem .8rem .5rem; }
body.app .ov-phase h3 { margin:0 0 .45rem; font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--app-ink-2); }
body.app .ov-phase h3 em { font-style:normal; color:var(--app-mute); margin-right:.35rem; }
body.app .ov-phase + .ov-phase::before { content:"\2192"; position:absolute; left:-.55rem; top:.7rem; transform:translateX(-50%); color:var(--app-mute); font-size:.8rem; }
body.app .ov-step { display:flex; align-items:center; gap:.6rem; padding:.4rem 0; text-decoration:none; color:var(--app-mute); font-size:.86rem; }
body.app .ov-step b { flex:none; display:grid; place-items:center; min-width:1.75rem; height:1.75rem; padding:0 .3rem; border-radius:999px; border:1.5px solid var(--app-line-2); background:transparent; color:var(--app-mute); font-size:.82rem; font-weight:650; font-variant-numeric:tabular-nums; }
body.app .ov-step.on { color:var(--app-ink); }
body.app .ov-step.on b { background:var(--app-ink); border-color:var(--app-ink); color:var(--app-bg); }
body.app .ov-groups { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; align-items:start; }
body.app .ov-groups--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
body.app .ov-group { background:var(--app-card); border:1px solid var(--app-line); border-radius:var(--r-card); padding:1rem 1.1rem .4rem; }
body.app .ov-row { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-top:1px solid var(--app-line); text-decoration:none; color:var(--app-ink); }
body.app .ov-row:first-of-type { border-top:0; }
body.app .ov-row span { flex:1; min-width:0; font-weight:600; font-size:.92rem; }
body.app .ov-row small { display:block; font-weight:400; font-size:.78rem; color:var(--app-mute); margin-top:.1rem; }
body.app .ov-row b { flex:none; font-size:.95rem; font-weight:650; font-variant-numeric:tabular-nums; }
body.app .ov-row i { flex:none; font-style:normal; color:var(--app-mute); font-size:.85rem; }
@media (hover: hover) and (pointer: fine) {
  body.app .ov-row:hover span, body.app .ov-alert:hover span, body.app .ov-step:hover span { text-decoration:underline; text-underline-offset:3px; }
}
@media (max-width: 900px) { body.app .ov-groups, body.app .ov-groups--2 { grid-template-columns:1fr; } }
@media (max-width: 760px) {
  body.app .ov-phases { grid-template-columns:repeat(2, minmax(0,1fr)); }
  body.app .ov-phase:nth-child(odd)::before { display:none; }
}
body.app .ov-steps { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 1rem; }
body.app .ov-steps .ov-step b { min-width:1.75rem; width:auto; }
@media (max-width: 520px) { body.app .ov-steps { grid-template-columns:1fr; } }
/* tone KPIs: red = do first, yellow = owed out, green = coming in */
body.app .kpi--red, body.app .kpi--yellow, body.app .kpi--green { border-left: 3px solid var(--t); }
body.app .kpi--red { --t: #c8372d; } body.app .kpi--yellow { --t: #e0b020; } body.app .kpi--green { --t: #2f8a47; }
body.app .kpi--red b, body.app .kpi--yellow b, body.app .kpi--green b { color: var(--t); }
body.app .kpi--yellow b { color: #b88a00; }
@media (prefers-color-scheme: dark) { body.app .kpi--yellow b { color: #e0b020; } }

/* ---------- the flow box, opened in place ---------- */
body.app .of-main.is-open #fig .ov-flow { display: none; }
body.app .ov-stage__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
body.app .ov-stage__head .ov-h { margin: 0; }
body.app .ov-stage__close { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--app-mute); text-decoration: none;
  padding: .45rem .8rem; border: 1px solid var(--app-line); border-radius: 999px; }
body.app .ov-stage__close span { font-size: 1.1rem; line-height: 1; }
@media (hover: hover) and (pointer: fine) { body.app .ov-stage__close:hover { color: var(--app-ink); border-color: var(--app-line-2); } }
body.app .ov-stage__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
/* the steps, folded into tabs */
body.app .ov-rail { display: grid; gap: .3rem; position: sticky; top: calc(var(--of-head-h, 64px) + 12px); }
body.app .ov-rail a { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 12px; text-decoration: none;
  color: var(--app-mute); font-size: .92rem; font-weight: 550; transition: background-color .25s ease, color .25s ease; }
body.app .ov-rail a em { font-style: normal; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; flex: none; border-radius: 50%;
  border: 1px solid var(--app-line-2); font-size: .72rem; font-weight: 600; transition: inherit; }
body.app .ov-rail a span { flex: 1; }
body.app .ov-rail a.on { background: var(--app-card-2, rgba(127,127,127,.12)); color: var(--app-ink); }
body.app .ov-rail a.on em { background: var(--app-ink); color: var(--app-bg); border-color: var(--app-ink); }
@media (hover: hover) and (pointer: fine) { body.app .ov-rail a:not(.on):hover { color: var(--app-ink); } }
body.app .ov-rail__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: none; }
body.app .ov-rail__dot[class*="t-"] { display: block; background: var(--t); }
body.app .ov-rail__dot.t-red { --t: #c8372d; } body.app .ov-rail__dot.t-amber { --t: #c8902a; } body.app .ov-rail__dot.t-green { --t: #2f8a47; }
body.app .ov-rail__dot.t-yellow { --t: #e0b020; } body.app .ov-rail__dot.t-blue { --t: #3f6fb5; }
/* the area on show */
body.app .ov-subtabs { display: flex; gap: 1.3rem; border-bottom: 1px solid var(--app-line); margin-bottom: 1.2rem; overflow-x: auto; scrollbar-width: none; }
body.app .ov-subtabs::-webkit-scrollbar { display: none; }
body.app .ov-subtabs a { padding: .35rem 0 .7rem; font-size: .9rem; color: var(--app-mute); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .25s; }
body.app .ov-subtabs a.on { color: var(--app-ink); border-bottom-color: var(--app-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { body.app .ov-subtabs a:not(.on):hover { color: var(--app-ink); } }
body.app .ov-pane__in > section.dash-panel { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  margin: 0 !important; scroll-margin-top: calc(var(--of-head-h, 64px) + 16px); }
body.app .ov-pane__in > section.dash-panel:not([hidden]) ~ section.dash-panel:not([hidden]) { margin-top: 2rem !important; padding-top: 2rem !important; border-top: 1px solid var(--app-line) !important; }
/* phone: tabs run along the top */
@media (max-width: 760px) {
  body.app .ov-stage__body { grid-template-columns: 1fr; gap: 1rem; }
  body.app .ov-rail { position: static; display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.2rem; padding: 0 .2rem; }
  body.app .ov-rail::-webkit-scrollbar { display: none; }
  body.app .ov-rail a { flex: none; padding: .55rem .8rem; border-radius: 999px; }
  body.app .ov-rail a span { flex: none; }
}
/* motion: open grows from the flow, tabs slide in; switching slides the detail */
@media (prefers-reduced-motion: no-preference) {
  body.app .ov-stage.in .ov-rail a { animation: ov-rail-in .45s cubic-bezier(.32,.72,0,1) both; }
  body.app .ov-stage.in .ov-rail a:nth-child(2) { animation-delay: .04s; }
  body.app .ov-stage.in .ov-rail a:nth-child(3) { animation-delay: .08s; }
  body.app .ov-stage.in .ov-rail a:nth-child(n+4) { animation-delay: .12s; }
  body.app .ov-stage.in .ov-pane { animation: ov-pane-in .5s cubic-bezier(.32,.72,0,1) .1s both; }
  body.app .ov-stage.sw-r .ov-pane__in { animation: ov-sw-r .4s cubic-bezier(.32,.72,0,1) both; }
  body.app .ov-stage.sw-l .ov-pane__in { animation: ov-sw-l .4s cubic-bezier(.32,.72,0,1) both; }
  body.app .ov-stage.out .ov-stage__body { animation: ov-out .25s ease both; }
  body.app #fig .ov-flow.ov-back-in .ov-phase { animation: ov-pane-in .45s cubic-bezier(.32,.72,0,1) both; }
}
@keyframes ov-rail-in { from { opacity: 0; transform: translateX(-12px); } }
@keyframes ov-pane-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes ov-sw-r { from { opacity: 0; transform: translateX(22px); } }
@keyframes ov-sw-l { from { opacity: 0; transform: translateX(-22px); } }
@keyframes ov-out { to { opacity: 0; } }
/* numbers line up: counts, money, badges */
body.app .ov-step b, body.app .ov-row b, body.app .ov-badge, body.app .kpi b, body.app .of-row__right,
body.app .ov-steps .ov-step b, body.app .amt, body.app td { font-variant-numeric: tabular-nums; }
body.app h1, body.app h2, body.app h3 { text-wrap: balance; }

/* ---------- Spacing under the floating header (Oct 2026) ----------
   Pages without a top photo already get room for the floating header
   (body.pad-top). The page title used to add its own large top padding on
   top of that, leaving a big empty band. One allowance, not two. */
body.app.pad-top .page-hero { padding-top: clamp(.8rem, 2vw, 1.4rem); padding-bottom: .4rem; }
body.app.pad-top .page-hero .display { margin-top: .3rem; }
body.app .page-hero .mode-tag { margin-top: 0; }
body.app.pad-top .page-hero p:has(> .mode-tag) { margin-top: .7rem !important; }