/* Cabby OS site theme: the app's own colours and faces (11 Nov 2026). One stylesheet over the kit,
   site.css, scenes.css and pages.css, on every page (index.html links it; tools/build-pages.py gives it
   to each generated page). No kit or film file changes. Every value below is the app's:
     page ground  #FAF9F7                         (fresh-cabby src/index.css --background)
     gold         #8B6914                         (--primary, --sidebar-primary)
     side bar     180deg #2A2318, #1E1B16 40%, #202123   (FlowLayout, SettingsLayout)
     top bar      90deg, the same three stops     (SigningRoomLayout header)
   Loaded last, so it wins on order, not on specificity. */

:root {
  --p-bg: #faf9f7;            /* the app's page ground */
  --p-surface: #ffffff;       /* cards, frames and the alternate band sit white on it */
  --p-inv-bg: #1e1b16;
  --p-inv-surface: #2a2318;
  --p-inv-muted: #b9b0a0;
  --app-sand: #f0ebe1;        /* the hero band: one step deeper than the page */
  --app-tint: #f3f0ea;        /* an inner fill on a white card */
  --app-gold-lit: #d9b65a;    /* gold as text on the dark chrome (8:1 on #1E1B16) */
  --app-side: linear-gradient(180deg, #2a2318 0%, #1e1b16 40%, #202123 100%);
  --app-top: linear-gradient(90deg, #2a2318 0%, #1e1b16 40%, #202123 100%);
  /* depth: two warm layers, never a grey one; a bigger surface casts a deeper shadow */
  --lift-1: 0 1px 2px rgb(42 35 24 / .05), 0 8px 24px -12px rgb(42 35 24 / .14);
  --lift-2: 0 1px 2px rgb(42 35 24 / .06), 0 28px 56px -28px rgb(42 35 24 / .28);
  --ground-bg: var(--app-tint);
  --ground-surface: var(--app-tint);
}

/* ---------------------------------------------------------------- the top bar: the app's chrome */
/* the kit's tokens are re-scoped on the bar, so the bar, its panel and the phone menu all follow */
.nav {
  --bg: #1e1b16; --surface: #2a2318; --card: #2a2318; --ink: #ffffff; --muted: #b9b0a0;
  --line: rgb(217 182 90 / .18); --line-strong: rgb(255 255 255 / .28);
  background: var(--app-top); border-bottom-color: var(--line);
}
.nav__link { color: #f1ede6; }
.nav__link:hover, .nav__item:hover > .nav__link, .nav__item:focus-within > .nav__link { color: #fff; }
.nav__link::before, .nav__link[aria-current="page"]::after { background: var(--app-gold-lit); }
.nav__toggle { color: #fff; border-color: rgb(255 255 255 / .28); background: transparent; }
.nav :focus-visible { outline-color: var(--app-gold-lit); }
.nav__menu { background: var(--app-side); border-top-color: rgb(255 255 255 / .08); border-bottom: 0;
  box-shadow: 0 32px 64px -32px rgb(20 16 10 / .55); transform-origin: 50% 0; }
.menu-col > .t-label { color: var(--app-gold-lit); }
.menu-col a { color: #fff; }
.menu-col a:hover { color: var(--app-gold-lit); }
.menu-col a:hover span { color: #d8d0c2; }
.menu-card .t-card { color: #fff; }
@media (max-width: 1023px) {
  .nav.is-open .nav__links { background: var(--app-side); }
}

/* ---------------------------------------------------------------- the hero: a band of its own */
.hero--app { background: linear-gradient(180deg, var(--app-sand) 0%, var(--app-sand) 46%, var(--p-bg) 100%); }
.hero--app .film { box-shadow: var(--lift-2); border-radius: var(--r-lg); }

/* ---------------------------------------------------------------- white surfaces on the warm page */
.frame:not(.frame--photo, .frame--cta, .frame--lit), .card, .app-window { box-shadow: var(--lift-1); }
.frame.frame--hero:not(.frame--photo), .film--tab > .frame { box-shadow: var(--lift-2); }
.ground-inverse .frame, .ground-inverse .card { box-shadow: none; }

/* ---------------------------------------------------------------- the dark bands: the side bar's gradient */
.ground-inverse:not(.people) { background: var(--app-side); }
.people__box { background: var(--app-side); box-shadow: 0 24px 48px -24px rgb(0 0 0 / .5); }
.footer--dark { border-top: 1px solid rgb(217 182 90 / .18); }

/* ---------------------------------------------------------------- touch: feedback on the press */
.btn:active { transform: scale(.97); transition-duration: 100ms; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
@media (prefers-contrast: more) {
  .nav { background: #1e1b16; --line: rgb(255 255 255 / .6); }
  .nav__menu { background: #1e1b16; }
}

/* ---------------------------------------------------------------- rhythm: paper and white take turns */
/* hero sand · people dark · job paper · quotes white · stages paper · tools sand · team paper ·
   works white (the kit's own .ground-surface) · questions paper · close dark */
#quotes {
  --bg: var(--p-surface); --surface: var(--p-bg); --card: var(--p-bg);
  background: var(--bg);
}
.menu-card { align-content: start; }

/* ---------------------------------------------------------------- type: the app's faces */
/* Poppins for headings, Inter for text (fresh-cabby tailwind.config.ts). Poppins runs wider than the
   face the kit's scale was set in, so display sizes step down a little and track tighter as they grow. */
h1, .t-h1 { font-size: calc(var(--t-h1) * .9); letter-spacing: -0.03em; }
h2, .t-h2 { font-size: calc(var(--t-h2) * .92); letter-spacing: -0.025em; }
h3, .t-card, .footer__lede { letter-spacing: -0.015em; }
.nav__logo { font-weight: 600; letter-spacing: -0.02em; }
body { font-feature-settings: "cv11", "ss03"; }   /* Inter: single-storey a off, round quotes */

/* ---------------------------------------------------------------- the top bar lifts once the page moves */
@supports (animation-timeline: scroll()) {
  .nav { animation: nav-lift linear both; animation-timeline: scroll(root); animation-range: 0 96px; }
  @keyframes nav-lift { to { box-shadow: 0 16px 36px -20px rgb(20 16 10 / .6); } }
}

/* ---------------------------------------------------------------- the eight tools: white cards on sand */
#tools { background: var(--app-sand); }
.tiles > .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-4) var(--s-4); box-shadow: var(--lift-1); }
.tiles .panel { --p-h: 196px; box-shadow: none; }
@media (max-width: 639px) { .tiles > .card { padding: var(--s-3); } }

/* ---------------------------------------------------------------- tabs and the hero's steps: the app's active tab */
/* the app marks the tab you are on with a gold wash and a gold rule (film.css .dl__tabs .is-active) */
.tab[aria-selected="true"], .tabs.m-has-ind .tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"] { background: rgb(139 105 20 / .12); border-color: rgb(139 105 20 / .45); }
.m-tab-ind { background: rgb(139 105 20 / .12); box-shadow: inset 0 -2px 0 var(--accent), inset 0 0 0 1px rgb(139 105 20 / .3); }
.hero-steps { background: #fff; box-shadow: var(--lift-1); }
.hero-step[aria-pressed="true"] { color: var(--ink); background: rgb(139 105 20 / .12); }
.hero-step[aria-pressed="true"] .hero-step__n { color: #6f5410; }
.hero-step__bar::after { background: var(--accent); }

/* ---------------------------------------------------------------- the close: the words left, one button right */
@media (min-width: 1024px) {
  .closing__cta.close--type { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-8); }
  .closing__cta.close--type > .close__btn { width: auto; min-width: 260px; align-self: end; }
}