/* Plain and calm, in Escape Velocity's brand (18 October 2026). Bookings (7 November 2026): the office screens of a
   company that takes bookings, read on a computer, a tablet or a phone. Body text 17px, nothing under 15px. Sentence
   case, no letter-spacing. Targets at least 56px. One accent element per screen at rest: the current screen's mark.

   Two kinds of variable. The --ev-* ones are the brand's own tokens and never change: they draw the "Powered by
   Escape Velocity" badge, the sign-in screen and the brand's own pieces. The working ones below them draw the screens,
   and a company's own colours replace four of them (/look.css, from core/look.js): --main, --main-ink, --main-hover
   and --accent. The status and message colours (ok, danger, alert) are working colours and stay. */

:root {
  --ev-ink: #020612;
  --ev-slate: #4B5068;
  --ev-mist: #D5D9E6;
  --ev-haze: #ECEEF6;
  --ev-paper: #F6F7FB;
  --ev-violet: #772DF6;
  --ev-blue: #2C6DFC;
  --ev-silver: #E8E8EA;
  --ev-font-display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ink: #020612;
  --ink-soft: #4B5068;
  --paper: #F6F7FB;
  --card: #ffffff;
  --wash: #ECEEF6;
  --line: #D5D9E6;
  --line-strong: #5b6370;
  --main: #020612;
  --main-ink: #F6F7FB;
  --main-hover: #2A2E38;
  --accent: #772DF6;
  --danger: #a3191c;
  --ok-wash: #e2f1e5;
  --ok-ink: #12512b;
  --alert-wash: #fbe6e6;
  --alert-ink: #7a1113;
  --focus: var(--accent);
  --target: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2 { font-family: var(--ev-font-display); font-weight: 600; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 16px; }
h2 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; }
h3 { font-size: 19px; margin: 16px 0 8px; }
.h-big { font-size: 34px; }
p { margin: 0 0 16px; }
a { color: var(--main); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
strong { font-weight: 700; }

:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

[hidden] { display: none !important; }

.quiet { color: var(--ink-soft); font-size: 16px; }
.subhead { font-size: 19px; }
/* "Not on the list? Add a new ..., then carry on here." under a picker (partials/add-new.ejs). */
.add-new { margin: 4px 0 8px; color: var(--ink-soft); font-size: 16px; }
.invite-message { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--line); background: var(--card); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- The bar at the top: the company, the search, who is signed in, and Powered by Escape Velocity ---- */

.bar { background: var(--ev-ink); color: var(--ev-silver); }
.bar-light { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.bar-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  min-height: 72px; max-width: 1100px; margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  padding-top: max(8px, env(safe-area-inset-top));
}
.bar-brand { display: inline-flex; align-items: center; gap: 12px; min-height: var(--target); min-width: 0; color: inherit; text-decoration: none; }
/* The logo and name are the way home. On hover, and on keyboard focus, a ring in the highlight colour draws round the
   logo (a round logo gets a round ring); a name in words is underlined. The ring is a shadow, so nothing moves. */
a.bar-brand:hover { color: inherit; text-decoration: none; }
a.bar-brand:hover .bar-name, a.bar-brand:focus-visible .bar-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bar-brand .bar-logo, .look-logo-box .bar-logo { box-sizing: content-box; padding: 5px; margin: -5px; border-radius: 12px; transition: box-shadow 0.15s ease, background-color 0.15s ease; }
a.bar-brand:hover .bar-logo, a.bar-brand:focus-visible .bar-logo, .look-logo-box:hover .bar-logo { box-shadow: 0 0 0 2px var(--accent); background-color: rgba(255, 255, 255, 0.08); }
.bar-light a.bar-brand:hover .bar-logo, .bar-light a.bar-brand:focus-visible .bar-logo, .look-logo-box.on-light:hover .bar-logo { background-color: var(--wash); }
.bar-name { font-size: 19px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
/* A logo is drawn at the size its own shape gives it (core/look.js logoBox(), the width and height on the picture),
   shrinking with the screen on a phone; one whose size is not known is 36 tall. */
.bar-logo { display: block; height: auto; max-width: min(60vw, 280px); object-fit: contain; }
.bar-logo:not([width]) { height: 36px; width: auto; }
.bar-lockup { max-width: min(70vw, 280px); }
.bar-who { display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: auto; }
.bar-who form { margin: 0; }
.bar-person { display: inline-flex; align-items: center; min-height: var(--target); font-size: 19px; font-weight: 700; line-height: 1.2; text-align: right; overflow-wrap: anywhere; color: inherit; text-decoration: none; }
a.bar-person:hover { color: inherit; text-decoration: underline; text-decoration-color: currentColor; }
/* Powered by Escape Velocity: the brand's own mark and colours, whatever the company's scheme. Stacked (T, 2026-11-01)
   and set like the lockup (T, 2026-11-03): the mark on the left; "Powered by" small and centred over the name; the name
   in the brand's silver, starting 0.9 of its cap height after the mark's reach at the name's height, its ring level
   with the name's capitals. The numbers come from the mark (viewBox 20.11 19.75 473.64 337.33, the ring at 172.94
   204.24 with radius 142.84; the name's band reaches the mark at x 364.07) and from Sora (cap height 0.73 of the size,
   ascent 0.97, descent 0.29): a ring 24px across is a scale of 0.0840, so the image is 39.79 by 28.34 and its reach 28.9
   from the left (the first column; the image overflows it); the name at 14px has a cap of 10.22, so it starts 9.2
   after the reach, and its cap's centre sits 8.75 above its row's foot against the ring's centre 12.84 above the
   image's, so the image drops 4.09. The badge is a mark, not screen text: its rules alone go under the 15px floor
   (test/structure.test.js). The block sits at the far right, reaching into the space right of the bar's content as far
   as the screen allows. */
.powered { display: grid; grid-template-columns: 28.9px max-content; grid-template-rows: auto auto; justify-content: end; align-items: end; flex: 1 1 100%; margin-right: calc(-1 * min(42px, 10px + max(0px, (100vw - 1100px) / 2))); font-size: 11px; font-weight: 400; line-height: 1.2; color: var(--ev-mist); white-space: nowrap; }
.powered img { grid-row: 1 / 3; grid-column: 1; justify-self: start; align-self: end; display: block; width: 39.79px; height: 28.34px; margin-bottom: -4.09px; }
.powered-by { grid-row: 1; grid-column: 2; margin-left: 9.2px; text-align: center; }
.powered-name { grid-row: 2; grid-column: 2; margin-left: 9.2px; font-size: 14px; font-weight: 600; color: var(--ev-silver); }
.bar-light .powered { color: var(--ev-slate); }
.bar-light .powered-name { color: var(--ev-ink); }

/* Inside a demo company opened from the operator's Companies: a line above the bar saying so, with the way back. Warm,
   like a warning tag, so the demo is never taken for a real company. */
.visit-line { background: #fff3d6; color: #4a3300; border-bottom: 2px solid #e0b24a; }
.visit-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  max-width: 1100px; margin: 0 auto;
  padding: max(6px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
}
.visit-in p { margin: 0; font-weight: 700; }
.visit-in form { margin: 0; }
.btn-visit { background: #fff; border-color: #6b4a00; color: #4a3300; }
.btn-visit:hover { background: #4a3300; border-color: #4a3300; color: #fff; }
@media (max-width: 699px) { .visit-name { display: none; } }

/* Where a row slides (Settings' tabs on a phone), the edge with more off screen fades softly into the row's own colour
   (app.js sets more-left and more-right as it is slid). */
[data-slide].more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
[data-slide].more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); }
[data-slide].more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }

/* Search in the bar (core/search.js): a box after the company's name on every office screen, a magnifying glass
   opening Search on a phone. The suggestions drop down under it, and under the Search page's box, as you type (app.js). */
.bar-search { position: relative; display: flex; align-items: center; flex: 0 1 360px; min-width: 180px; margin: 0 0 0 12px; }
.bar-search .ic { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--ev-mist); pointer-events: none; }
.bar-search input[type="search"] { padding: 6px 14px 6px 40px; border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.08); color: inherit; font-size: 17px; }
.bar-search input[type="search"]::placeholder { color: var(--ev-mist); opacity: 1; }
.bar-search input[type="search"]:focus { background: var(--card); color: var(--ink); border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
.bar-search input[type="search"]:focus::placeholder { color: var(--ink-soft); }
.bar-light .bar-search .ic { color: var(--ink-soft); }
.bar-light .bar-search input[type="search"] { border-color: var(--line-strong); background: var(--card); }
.bar-light .bar-search input[type="search"]::placeholder { color: var(--ink-soft); }
.bar-search-link { display: none; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); border-radius: 8px; color: inherit; }
.bar-search-link .ic { width: 24px; height: 24px; }
.bar-search-link:hover { color: inherit; background: rgba(255, 255, 255, 0.1); }
.bar-search-link[aria-current="page"] { background: rgba(255, 255, 255, 0.14); }
.bar-light .bar-search-link:hover, .bar-light .bar-search-link[aria-current="page"] { background: var(--wash); }
.search-box { position: relative; flex: 1 1 auto; min-width: 0; }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: max(100%, 440px); max-width: min(580px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--ink); box-shadow: 0 18px 36px -14px rgba(2, 6, 18, 0.4); text-align: left; }
.suggest-head { padding: 10px 14px 4px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.suggest-option { display: flex; align-items: center; gap: 12px; min-height: var(--target); padding: 6px 14px; cursor: pointer; }
.suggest-option:hover { background: var(--wash); }
.suggest-option.is-active { background: var(--wash); box-shadow: inset 4px 0 0 var(--accent); }
.suggest-text { display: block; flex: 1 1 auto; min-width: 0; }
.suggest-main { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.suggest-sub { display: block; overflow: hidden; font-size: 15px; line-height: 1.3; color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.suggest-end { flex: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.suggest-option.is-off .suggest-main { font-weight: 400; color: var(--ink-soft); }
.suggest-all { position: sticky; bottom: -6px; margin: 4px 0 -6px; border-top: 1px solid var(--line); background: var(--card); font-size: 17px; font-weight: 600; }
.suggest-all.is-active, .suggest-all:hover { background: var(--wash); }
.suggest-none { padding: 10px 14px; font-size: 17px; color: var(--ink-soft); }
@media (max-width: 699px) {
  .bar-search { display: none; }
  .bar-search-link { display: inline-flex; }
}

/* The top stays put while the page scrolls: the bar, at every width; the menu is on the left (below) and its button on
   the bar. --top-h (set by app.js) is how much stays, so a field reached by Tab is never hidden under it. */
.top { position: sticky; top: 0; z-index: 40; box-shadow: 0 8px 14px -12px rgba(2, 6, 18, 0.45); }
html { scroll-padding-top: calc(var(--top-h, 0px) + 12px); scroll-padding-bottom: var(--bar-h, 0px); }

/* ---- The menu on the left (Office's menu the pattern) ----
   On a computer or a tablet the bar runs across the top and the menu down the left, both staying while the page
   scrolls. The menu is wide (an icon and the name) or narrow (icons only, the name beside an icon on hover and on Tab,
   and read out to a screen reader), as each person keeps it (head.ejs, menu-early.js); until they choose, narrow below
   1200px. Each item is a full 56px tall; a narrow one keeps 44px across. Below 700px wide, or a screen too short for
   the menu, only the bar stays and the menu is a drawer over the page, behind the button at the bar's left. */
:root { --side-w: 232px; --side-narrow-w: 57px; }
/* The menu's icons: one set on a 24px grid in one stroke (core/public/icons/menu.svg). */
.ic { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Seen only by someone using the keyboard, so Tab does not walk every menu item first. */
.skip { position: absolute; left: 12px; top: -90px; z-index: 70; display: inline-flex; align-items: center; min-height: var(--target); padding: 0 16px; border-radius: 8px; background: var(--card); color: var(--ink); font-weight: 700; }
.skip:focus { top: 8px; }

/* The bar beside the menu: one row across the whole screen. */
[data-menu] .top .bar-in { flex-wrap: nowrap; gap: 0 12px; max-width: none; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
[data-menu] .top .bar-who { flex: 0 1 auto; min-width: 0; gap: 16px; }
[data-menu] .top .powered { flex: 0 0 auto; margin: 0 0 0 8px; }
/* The search box takes the room the rest leave, 180 to 360px; a name too long for the bar is then cut with an
   ellipsis, never squeezed a letter to a line. */
[data-menu] .top .bar-search { flex: 1 1 0; min-width: 180px; max-width: 360px; }
[data-menu] .top .bar-brand { flex: 0 1 auto; }
[data-menu] .top .bar-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-menu] .top .bar-person { display: block; min-width: 0; max-width: 14em; font-size: 17px; line-height: var(--target); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A tablet held upright, or a small computer: the search box becomes the magnifying glass (opening Search), so the
   company, the person, Help and Sign out keep their room. */
@media (min-width: 700px) and (max-width: 999px) {
  [data-menu] .top .bar-search { display: none; }
  [data-menu] .top .bar-search-link { display: inline-flex; }
  [data-menu] .top .bar-in { gap: 0 8px; }
  [data-menu] .top .bar-who { gap: 8px; }
  [data-menu] .top .powered { margin-left: 0; }
}
/* Help: opens on the help for the screen you are on. */
.bar-help { display: inline-flex; align-items: center; min-height: var(--target); font-size: 17px; font-weight: 600; color: inherit; text-decoration: none; }
a.bar-help:hover { color: inherit; text-decoration: underline; text-decoration-color: currentColor; }
.bar-help[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
/* The button that opens the menu, only where the menu is a drawer; it says what it does. */
.menu-button { display: none; flex: none; align-items: center; justify-content: center; width: var(--target); height: var(--target); margin-left: -8px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-button .ic { width: 26px; height: 26px; }
.menu-button:hover { background: rgba(255, 255, 255, 0.1); }
.bar-light .menu-button:hover { background: var(--wash); }
.menu-button .ic-close, .menu-button[aria-expanded="true"] .ic-open { display: none; }
.menu-button[aria-expanded="true"] .ic-close { display: block; }

/* The menu and the page beside it. The menu's column is painted the whole page down, so a picture of a long page
   shows it as the screen does (the menu itself stays in view while the page scrolls). */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); align-items: start; --col: var(--side-w); background: linear-gradient(to right, var(--card) calc(var(--col) - 1px), var(--line) calc(var(--col) - 1px), var(--line) var(--col), transparent var(--col)); }
.shell-main { min-width: 0; }
.side {
  position: sticky; top: var(--top-h, 72px); z-index: 20;
  height: calc(100vh - var(--top-h, 72px)); height: calc(100dvh - var(--top-h, 72px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border-right: 1px solid var(--line);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.side-in { display: flex; flex-direction: column; min-height: 100%; padding: 12px 6px 10px; }
.side-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.side a, .side button {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--target); padding: 0 11px;
  border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 17px; font-weight: 500; line-height: 1.25; text-align: left;
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.side .ic { color: var(--ink-soft); }
.side a:hover, .side button:hover { background: var(--wash); color: var(--ink); }
.side a:hover .ic, .side button:hover .ic { color: var(--ink); }
.side a:focus-visible, .side button:focus-visible { outline-offset: -4px; }
/* Where you are: the highlight colour beside it. */
.side a[aria-current="page"] { background: var(--wash); font-weight: 700; }
.side a[aria-current="page"] .ic { color: var(--ink); }
.side a[aria-current="page"]::before { content: ""; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 3px 3px 0; background: var(--accent); }
/* Settings at the foot of the menu, the switch for its width under it. */
.side-foot { margin-top: auto; padding-top: 20px; }
.side-tools { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.side-tools button { width: 44px; justify-content: center; padding: 0; color: var(--ink-soft); }
.side-tools .ic-widen, .side-narrow .side-tools .ic-narrow { display: none; }
.side-narrow .side-tools .ic-widen { display: block; }
/* The person, Help and Sign out are in the bar on a computer and at the drawer's foot on a phone. */
.side-account { display: none; }

/* Narrow: icons only, on a computer or a tablet. */
@media (min-width: 700px) and (min-height: 561px) {
  .side-narrow .shell { grid-template-columns: var(--side-narrow-w) minmax(0, 1fr); --col: var(--side-narrow-w); }
  .side-narrow .side { scrollbar-width: none; }
  .side-narrow .side-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .side-narrow .side a, .side-narrow .side button { justify-content: center; padding: 0; }
}
/* The name beside a narrow menu's icon (app.js places it). */
.side-tip { position: fixed; z-index: 60; padding: 8px 12px; border-radius: 6px; background: var(--ev-ink); color: var(--ev-paper); font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; transform: translateY(-50%); box-shadow: 0 8px 18px -8px rgba(2, 6, 18, 0.5); }

/* A phone, or a screen too short for the menu: only the bar stays, the menu is a drawer behind its button. */
@media (max-width: 699px), (max-height: 560px) {
  [data-menu] .menu-button { display: inline-flex; }
  [data-menu] .top .bar-in { gap: 0 6px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  [data-menu] .top .bar-name { font-size: 17px; }
  [data-menu] .top .bar-who { gap: 2px; }
  [data-menu] .top .bar-person, [data-menu] .top .bar-help, [data-menu] .top #sign-out { display: none; }

  .shell { display: block; background: none; }
  .side {
    position: fixed; top: var(--top-h, 72px); bottom: 0; left: 0; z-index: 35;
    width: min(86vw, 320px); height: auto; border-right: 0;
    box-shadow: 16px 0 28px -16px rgba(2, 6, 18, 0.45);
    transform: translateX(-100%); visibility: hidden;
  }
  .drawer-open .side { transform: none; visibility: visible; }
  /* It slides only as its button opens or closes it (app.js adds drawer-moves for that moment). */
  .drawer-moves .side { transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.24s; }
  .drawer-moves.drawer-open .side { transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
  .side-in { padding: 10px 8px calc(16px + env(safe-area-inset-bottom)); }
  .side a[aria-current="page"]::before { left: -8px; }
  .side-foot { padding-top: 10px; }
  .side-tools { display: none; }
  .side-account { display: grid; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .side-account form { margin: 0; }
  .scrim {
    position: fixed; top: var(--top-h, 72px); right: 0; bottom: 0; left: 0; z-index: 34;
    background: rgba(2, 6, 18, 0.45); opacity: 0; visibility: hidden;
  }
  .drawer-open .scrim { opacity: 1; visibility: visible; }
  .drawer-moves .scrim { transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  .drawer-moves.drawer-open .scrim { transition: opacity 0.2s ease, visibility 0s; }
  .drawer-open, .drawer-open body { overflow: hidden; }
}
/* A phone: the badge keeps a row of its own at the right; beside the button, the name and the magnifying glass it has
   no room. --top-h follows the taller bar (app.js). */
@media (max-width: 699px) {
  [data-menu] .top .bar-in { flex-wrap: wrap; min-height: 64px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  [data-menu] .top .bar-brand { flex: 1 1 0; }
  [data-menu] .top .bar-name { line-height: 1.15; white-space: normal; overflow: visible; overflow-wrap: break-word; }
  [data-menu] .top .bar-logo { max-width: min(120px, 32vw); }
  [data-menu] .top .bar-who { flex: none; margin-left: 0; }
  [data-menu] .top .powered { flex: 1 1 100%; margin: -6px 0 2px; }
}
@media (min-width: 700px) and (min-height: 561px) { .scrim { display: none; } }

/* The page lines up with the bar above it; text keeps to a readable width. */
.page {
  max-width: 1100px; margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.page:not(.page-wide) > * { max-width: 760px; }
.page > .narrow { max-width: 560px; }
.back { margin-bottom: 8px; }
.back a, .link-big { display: inline-flex; align-items: center; min-height: var(--target); }
.aside { margin-top: 24px; }
.aside .link-big { display: flex; }

.title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.title-row h1 { margin: 0; }
.title-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); padding: 8px 20px;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { background: var(--wash); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-main { background: var(--main); border-color: var(--main); color: var(--main-ink); }
.btn-main:hover { background: var(--main-hover); border-color: var(--main-hover); color: var(--main-ink); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--alert-wash); color: var(--danger); }
/* "Delete this ..." at the foot of a record's page, under its history: small, out of the way, still a full target. */
.delete-link { margin: 32px 0 0; }
.delete-link a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--danger); font-size: 16px; }
/* Your look: the pictures kept. */
.pictures { list-style: none; margin: 0; padding: 0; }
.pictures > li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.pictures img { width: 72px; height: 72px; object-fit: contain; background: var(--wash); border-radius: 8px; }
.pictures .picture-text { flex: 1 1 200px; }
.pictures .delete-link { margin: 0; }
.btn-bar { background: transparent; border-color: currentColor; color: inherit; white-space: nowrap; }
.bar .btn-bar:hover { background: var(--ev-paper); border-color: var(--ev-paper); color: var(--ev-ink); }
.bar-light .btn-bar:hover { background: var(--wash); border-color: var(--ink); color: var(--ink); }
.btn-quiet { border-color: var(--line-strong); font-weight: 600; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions form { margin: 0; }

/* ---- Forms ---- */

.form { display: block; }
.form label, .filter label { display: block; font-weight: 700; margin: 16px 0 6px; }
.form > label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"],
input[type="number"], input[type="date"], input[type="file"], select, textarea {
  display: block; width: 100%; min-height: var(--target); padding: 8px 14px;
  border: 2px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 19px;
}
select { appearance: auto; }
textarea { resize: vertical; line-height: 1.4; }
input[type="search"] { appearance: none; -webkit-appearance: none; }
input[type="file"] { padding: 12px 14px; }
input[type="file"]::file-selector-button {
  min-height: 40px; margin-right: 12px; padding: 0 14px;
  border: 2px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
input[disabled], select[disabled], textarea[disabled] { background: var(--wash); color: var(--ink-soft); }
/* Show password: a button at the right end of every password box (app.js). It fills the box's height, 56 pixels,
   inside the box's border: its own border is clear, so the box's border shows through it. A thin divider on its left.
   Edge's own eye is hidden, so there is one button, not two. */
.pw { position: relative; display: block; }
.pw input { padding-right: 96px; }
.pw input::-ms-reveal { display: none; }
.pw-toggle {
  position: absolute; top: 0; right: 0; bottom: 0; min-width: 80px; min-height: var(--target); padding: 0 16px;
  border: 2px solid transparent; border-left: 0; border-radius: 0 8px 8px 0; background-clip: padding-box;
  background-color: transparent; background-image: linear-gradient(var(--line-strong), var(--line-strong));
  background-position: left center; background-size: 1px 60%; background-repeat: no-repeat;
  color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pw-toggle:hover { background-color: var(--wash); }
.pw-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.input-short { max-width: 9em; }
.input-medium { max-width: 16em; }
.input-date { max-width: 14em; }
input[type="date"] { -webkit-appearance: none; appearance: none; }
.form-narrow { max-width: 560px; }
.block-first { margin-top: 24px; padding-top: 0; border-top: 0; }
.form .btn-main, .form-inline .btn { margin-top: 20px; }
/* Save and Cancel float at the bottom of a form taller than the screen, until the form's own end comes into view
   (app.js gathers the buttons into the bar and adds Cancel). */
.form-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 2px solid var(--line); box-shadow: 0 -8px 12px -8px rgba(2, 6, 18, 0.12); }
.form .form-bar .btn, .form .form-bar .btn-main { margin-top: 0; }

fieldset.choices { border: 0; padding: 0; margin: 20px 0 4px; }
fieldset.choices legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.choice {
  display: flex !important; align-items: flex-start; gap: 14px;
  min-height: var(--target); padding: 12px 14px; margin: 0 0 8px !important;
  border: 2px solid var(--line-strong); border-radius: 8px; background: var(--card); font-weight: 400 !important; cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--main); background: var(--wash); box-shadow: inset 0 0 0 1px var(--main); }
.choice input { width: 26px; height: 26px; margin: 2px 0 0; flex: none; accent-color: var(--main); }
.form label.choice-check { margin-top: 20px; }
/* Whether a person may delete: under "Works as" on their page, and the tick on Add a person. */
.form .may-delete { margin: 16px 0 0; }
.choice-small { min-height: var(--target); padding: 10px 14px; margin-bottom: 6px !important; align-items: center; }
.form label.choice-small { margin-top: 0; }
fieldset.choices-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
fieldset.choices-inline legend { width: 100%; }
fieldset.choices-inline .choice { margin: 0 !important; align-items: center; }

/* The booking page's address (Settings, Booking page): the fixed part before the box, the short name typed into it. */
.address-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.address-stem { font-size: 17px; color: var(--ink-soft); overflow-wrap: anywhere; }
.address-line input { flex: 1 1 14em; width: auto; max-width: 20em; }
.page-address { margin: 12px 0 0; overflow-wrap: anywhere; }

/* ---- Search ---- */

.find-box { margin: 0 0 24px; }
.find-box label { display: block; font-weight: 700; margin: 0 0 6px; }
.find-row { display: flex; gap: 10px; }
.find-row input { flex: 1 1 auto; min-width: 0; }
.find-row .btn { flex: none; }
.find-group { margin-top: 24px; }
.count { font-weight: 400; color: var(--ink-soft); font-size: 17px; }
.row-end { margin-left: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tag {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 6px; vertical-align: 2px;
  background: var(--wash); border: 1px solid var(--line); color: var(--ink-soft); font-size: 15px; font-weight: 600; line-height: 1.5;
}
.tag-warn { background: #fff3d6; border-color: #e0b24a; color: #6b4a00; }
.tag-bad { background: var(--alert-wash); border-color: var(--danger); color: var(--alert-ink); }
.tag-ok { background: var(--ok-wash); border-color: #7fb98f; color: var(--ok-ink); }
.tag-demo { background: #fff3d6; border-color: #e0b24a; color: #4a3300; }

/* ---- Facts, cards and tables ---- */

.facts { margin: 0 0 16px; }
.facts div { display: flex; flex-wrap: wrap; gap: 0 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.facts dt { flex: 0 0 9em; color: var(--ink-soft); }
.facts dd { flex: 1 1 12em; margin: 0; overflow-wrap: anywhere; }
.facts-list { padding-left: 1.3em; margin: 0 0 20px; }
.facts-list > li { margin: 6px 0; }
.cards { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.card { padding: 20px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.card p { margin-bottom: 16px; }
.table-scroll { overflow-x: auto; margin: 0 0 20px; border: 2px solid var(--line); border-radius: 8px; max-width: 100%; background: var(--card); }
.table { border-collapse: collapse; min-width: 100%; font-size: 16px; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 18em; overflow: hidden; text-overflow: ellipsis; }
.table th { background: var(--wash); font-weight: 700; }
.table tr:last-child td { border-bottom: 0; }

.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.filter label { margin: 0 0 6px; flex-basis: 100%; }
.filter select { flex: 1 1 220px; width: auto; max-width: 360px; }

/* An address in its parts, by country, and a phone with its country code beside it (partials/address-fields.ejs and
   phone-field.ejs). The fieldset reads as part of the form, no box: its legend is a label. The town, the county and
   the postcode share a row where there is room. The phone takes its own row: the code and the number side by side. */
fieldset.address { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
fieldset.address legend { padding: 0; margin: 0 0 6px; font-weight: 700; font-size: 19px; }
.form fieldset.address > label:first-of-type { margin-top: 4px; }
.form fieldset.address + label { margin-top: 16px; }
.address-last { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.notice-check { padding: 14px 16px; border-radius: 8px; border-left: 8px solid #e0b24a; background: #fff3d6; color: #6b4a00; font-weight: 600; }
.phone-field { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 8px; }
.phone-field select { font-size: 17px; padding-right: 8px; }

/* ---- Messages ---- */

.alert, .notice { padding: 14px 16px; border-radius: 8px; border-left: 8px solid; font-weight: 600; }
.alert { background: var(--alert-wash); border-color: var(--danger); color: var(--alert-ink); }
.notice { background: var(--ok-wash); border-color: var(--ok-ink); color: var(--ok-ink); }
/* After a save that comes back to the same spot, the green line shows at the bottom of the screen for a few seconds
   (app.js), just above the Save bar when one shows there (--toast-at). An error is never a toast: it opens at the top, in red. */
.toast { position: fixed; left: 50%; bottom: var(--toast-at, 20px); z-index: 50; width: max-content; max-width: calc(100% - 32px); margin: 0; transform: translateX(-50%); box-shadow: 0 6px 20px rgba(2, 6, 18, 0.18); }

/* ---- Lists ---- */

.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.rows > li { border-bottom: 2px solid var(--line); }
.row { display: block; padding: 14px 8px; min-height: 64px; color: var(--ink); text-decoration: none; }
a.row:hover { background: var(--wash); color: var(--ink); }
.row-text { display: block; min-width: 0; flex: 1 1 260px; }
.row-main { display: block; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
/* The pause page (core/views/paused.ejs). */
.paused .actions { margin: 0 0 16px; }
/* Plan and billing: the invoices from Escape Velocity, a block each (core/views/settings-plan.ejs). */
.bill-list { list-style: none; margin: 0 0 16px; padding: 0; }
.bill-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.bill-item p { margin: 0; }
.bill-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.bill-item .bill-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 6px; }
.row-sub { display: block; color: var(--ink-soft); font-size: 16px; overflow-wrap: anywhere; }
.row-off .row-main { font-weight: 400; color: var(--ink-soft); }

.block { margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--line); }

.log { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.log li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.log-who { display: block; font-weight: 700; }
.log-what { display: block; overflow-wrap: anywhere; }
.log-meta { display: block; color: var(--ink-soft); font-size: 16px; }

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 44px; font-weight: 700; line-height: 1.2;
  padding: 20px 16px; margin: 0 0 20px; text-align: center;
  border: 3px solid var(--ink); border-radius: 8px; background: var(--wash);
}
/* An invite link: long, so smaller than a code, and broken anywhere rather than overflowing. */
.code-link { font-size: 17px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; word-break: break-all; padding: 14px 16px; }
.narrow-form { max-width: 40em; }

/* Tabs: Settings' and Help's. */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 2px solid var(--line); }
.tabs a {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 14px; margin-bottom: -2px;
  color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 4px solid transparent;
}
.tabs a .count { margin-left: 6px; }
.tabs a:hover { background: var(--wash); }
.tabs a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); }
/* Settings: the operator's own tabs on a line of their own, after the company's (partials/settings-tabs.ejs). */
.tabs .tabs-break { flex-basis: 100%; height: 0; }
/* Settings' tabs: the page's whole width, not its reading width, and a little closer, so they take one line on a
   computer; on a phone one row that slides (below). */
.page > .tabs.tabs-settings { max-width: none; }
.tabs-settings a { padding: 0 10px; }
@media (max-width: 699px) {
  .tabs-settings { flex-wrap: nowrap; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--line); }
  .tabs-settings::-webkit-scrollbar { display: none; }
  .tabs-settings a { flex: none; margin-bottom: 0; white-space: nowrap; }
  .tabs-settings .tabs-break { display: none; }
  .tabs-settings .tabs-gap { margin-left: 14px; }
}
.tabs-sub { margin-top: -6px; border-bottom-width: 1px; }

/* ---- Your look ---- */

.two { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
.look-sample { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; margin: 8px 0 20px; background: var(--card); }
.look-sample .bar-in { min-height: 64px; padding: 6px 16px; }
.look-sample .powered { margin-right: 0; }
.look-sample-body { padding: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.look-sample-body .btn { margin: 0; }
/* The sample's link is only a picture of one (a real link here would be a target under 56px). */
.sample-link { color: var(--main); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.look-sample-body .sample-current { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 12px; font-weight: 600; border-bottom: 4px solid var(--accent); }
.look-logo-box { display: flex; align-items: center; min-height: 72px; padding: 16px; border-radius: 8px; margin: 0 0 8px; }
.look-logo-box.on-dark { background: var(--ev-ink); }
.look-logo-box.on-light { background: var(--paper); border: 1px solid var(--line); }
.look-logo-box img { max-width: 100%; }
.look-logo-box.on-dark .bar-name { color: var(--ev-silver); }
.look-logo-box.on-light .bar-name { color: var(--ink); }
/* A round logo stays round, and its hover ring is round too. */
.bar-brand .bar-logo.bar-logo-round, .look-logo-box .bar-logo.bar-logo-round, .bar-logo.bar-logo-round { border-radius: 50%; }
/* The logo's framing: drag in the frame, zoom with the slider; the frame is the logo's own shape, a square or a circle. */
.logo-framing { margin: 20px 0 8px; }
.logo-framing h3 { margin: 0 0 12px; font-size: 19px; }
.logo-framing-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; margin: 0 0 8px; }
.logo-frame { --ratio: 1; position: relative; flex: none; width: min(100%, 360px, calc(220px * var(--ratio))); aspect-ratio: var(--ratio); overflow: hidden; border-radius: 8px; cursor: grab; touch-action: none; }
.logo-frame:active { cursor: grabbing; }
.logo-frame.on-dark { background: var(--ev-ink); }
.logo-frame.on-light { background: var(--paper); outline: 1px solid var(--line-strong); }
.logo-frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.logo-frame[data-shape="circle"] { border-radius: 50%; }
.logo-frame img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.logo-framing-controls { flex: 1; min-width: 240px; }
.logo-framing-controls input[type="range"] { display: block; width: 100%; max-width: 320px; min-height: var(--target); margin: 0 0 12px; padding: 0; border: 0; background: none; accent-color: var(--accent); }
.file-drop { padding: 8px 12px 12px; margin: 0 -12px; border: 2px dashed transparent; border-radius: 12px; }
.file-drop.over { border-color: var(--accent); background: var(--wash); }
/* A file dragged over a page with nowhere to put it: the page says so, and the drop is ignored. */
.drop-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 18, 0.55); pointer-events: none; }
.drop-overlay[hidden] { display: none !important; }
.drop-overlay p { max-width: 28em; padding: 24px 28px; margin: 0; border: 3px dashed var(--accent); border-radius: 16px; background: var(--card); color: var(--ink); font-size: 20px; font-weight: 700; text-align: center; }
.colour-row { display: flex; gap: 10px; align-items: stretch; }
.colour-row input[type="text"] { max-width: 10em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.colour-row input[type="color"] { width: 72px; min-height: var(--target); padding: 4px; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--card); cursor: pointer; }
.contrast { margin: 6px 0 0; font-size: 16px; color: var(--ink-soft); }
.contrast strong { color: var(--ink); }
.contrast-bad, .contrast-bad strong { color: var(--danger); }
.form-inline { margin-top: 8px; }

/* ---- Dark pages: sign in and the invite, before any company is known ---- */

.page-dark { background: var(--ev-ink); color: var(--ev-silver); }
.page-dark .bar { border-bottom: 0; }
/* The dark pages fill the screen, with the foot's Terms link (Sign in) at its bottom edge. */
.page-dark { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.page-dark .page { flex: 1 0 auto; width: 100%; }
.page-dark .page > .narrow { margin: 20px auto 0; max-width: 460px; }
.page-dark h1, .page-dark h2 { color: var(--ev-paper); }
/* "Bookings by Escape Velocity" above the heading on Sign in and the invite page. */
.product-line { margin: 0 0 8px; font-family: var(--ev-font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--ev-mist); }
.page-dark .form label { color: var(--ev-paper); }
.page-dark .quiet { color: var(--ev-mist); }
.page-dark a { color: var(--ev-silver); text-decoration-color: var(--ev-blue); }
.page-dark a:hover { color: var(--ev-paper); text-decoration-color: var(--ev-paper); }
.page-dark input[type="text"], .page-dark input[type="email"], .page-dark input[type="password"] { background: #fff; border-color: var(--ev-mist); color: var(--ev-ink); }
.page-dark :focus-visible { outline-color: var(--ev-blue); }
/* Show on a dark page: the box is white there, so the button keeps the brand's ink on white. */
.page-dark .pw-toggle { color: var(--ev-ink); background-image: linear-gradient(var(--ev-slate), var(--ev-slate)); }
.page-dark .pw-toggle:hover { background-color: var(--ev-haze); }
.page-dark .pw-toggle:focus-visible { outline-color: var(--ev-blue); }
.page-dark .btn-main { background: var(--ev-paper); border-color: var(--ev-paper); color: var(--ev-ink); }
.page-dark .btn-main:hover { background: #fff; border-color: #fff; color: var(--ev-ink); }

/* ---- The service around the product: the foot, the terms, About, Plan and billing ---- */

/* A quiet line at the foot of every screen (Something wrong with this page?, About Bookings, Terms), and Terms alone on Sign in. */
.foot { display: flex; flex-wrap: wrap; gap: 0 24px; max-width: 1100px; margin: 24px auto 0; padding: 8px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); font-size: 15px; }
.foot a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--ink-soft); text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; }
.foot a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.page-dark .foot { width: 100%; border-top-color: #1C2238; }
.page-dark .foot a { color: var(--ev-mist); text-decoration-color: var(--ev-slate); }
.page-dark .foot a:hover { color: var(--ev-paper); text-decoration-color: var(--ev-paper); }

.page:not(.page-wide) > .terms { max-width: 800px; }
.terms-version { margin: 0 0 6px; font-weight: 700; }
.terms-changed { padding: 12px 16px; margin: 0 0 20px; border-radius: 8px; background: var(--wash); }
.terms-text h2 { margin-top: 28px; }
.terms-text h3 { margin-top: 20px; }
.terms-text ul { margin: 0 0 16px; padding-left: 1.4em; }
.terms-text li { margin-bottom: 6px; }
.terms-text hr { border: 0; border-top: 2px solid var(--line); margin: 20px 0; }
.terms-text p, .terms-text li { overflow-wrap: anywhere; }
.terms-table { border-collapse: collapse; min-width: 100%; font-size: 16px; }
.terms-table th, .terms-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 9em; }
.terms-table th { background: var(--wash); font-weight: 700; }
.terms-table tr:last-child td { border-bottom: 0; }
.terms-text code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; }
.terms-versions { padding-left: 1.4em; }
.terms-versions a, .about-links a { display: inline-flex; align-items: center; min-height: var(--target); }
.terms-accept { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--line); }
.terms-out { margin: 12px 0 0; }

/* About: the lockup in the brand's own colours, as on Sign in, with "Bookings by Escape Velocity". */
.about-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px; margin: 0 0 20px; border-radius: 12px; background: var(--ev-ink); color: var(--ev-silver); text-align: center; }
.about-brand img { display: block; width: min(280px, 100%); height: auto; }
.about-product { margin: 0; font-family: var(--ev-font-display); font-size: 19px; font-weight: 600; color: var(--ev-mist); }
.about-version { margin-bottom: 4px; font-weight: 700; }
.about-released { margin-top: 0; }
.about-links { list-style: none; margin: 0 0 8px; padding: 0; }
.about-maker { margin-bottom: 0; }
.about-write { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; }
.about-write .link-big { overflow-wrap: anywhere; }
.release h3 { margin: 20px 0 6px; font-size: 18px; }
.release ul { margin: 0; padding-left: 1.4em; }
.release li { margin-bottom: 6px; }
.plan-block h2 { margin-bottom: 8px; }
.plan-block p { margin: 0 0 8px; }
.company-name a { display: inline-flex; align-items: center; min-height: var(--target); color: inherit; }

/* Help (core/help.js): the page, with every page beside it on a wide screen and under it on a narrow one; On this page;
   the section for the screen Help was opened from, marked in the page's quiet wash, never the accent. */
.help { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1000px) { .help { grid-template-columns: minmax(0, 760px) 220px; gap: 40px; } }
.help-text { min-width: 0; }
.help-text h2 { margin-top: 28px; }
.help-text ul, .help-text ol { padding-left: 1.4em; }
.help-text li { margin-bottom: 6px; }
.help-section { scroll-margin-top: calc(var(--top-h, 0px) + 12px); }
.help-here { margin: 12px -12px 0; padding: 2px 12px 6px; border-left: 4px solid var(--line-strong); border-radius: 0 8px 8px 0; background: var(--wash); }
.help-here h2 { margin-top: 12px; }
.help-toc { margin: 4px 0 8px; padding: 8px 16px; border: 2px solid var(--line); border-radius: 12px; }
.help-toc p, .help-pages p { margin: 8px 0 0; }
.help-toc ul, .help-pages ul { list-style: none; margin: 0; padding: 0; }
.help-toc a, .help-pages a { display: inline-flex; align-items: center; min-height: var(--target); }
.help-toc a[aria-current="location"], .help-pages a[aria-current="page"] { font-weight: 700; color: var(--ink); }
.help-pages { align-self: start; }
@media (max-width: 999px) { .help-pages { padding-top: 8px; border-top: 2px solid var(--line); } }

/* Feedback: the two doors, Yours with Escape Velocity's replies, and a trial's question on Home. */
.doors { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.door { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 96px; padding: 16px 20px; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; }
.door:hover { background: var(--wash); color: var(--ink); }
.door-name { font-size: 19px; font-weight: 700; }
.door-sub { color: var(--ink-soft); font-size: 16px; }
.fb-unreached { color: var(--ink-soft); }
.fb-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.fb-item { padding: 14px 0 6px; border-bottom: 2px solid var(--line); }
.fb-line { margin: 0 0 2px; font-size: 19px; overflow-wrap: anywhere; }
.fb-line .tag { vertical-align: 1px; }
.fb-item .row-sub { margin: 0; }
.fb-reply { margin: 12px 0 0; padding: 10px 16px; border-left: 4px solid var(--ok-ink); border-radius: 0 8px 8px 0; background: var(--ok-wash); }
.fb-reply-head { margin: 0 0 4px; font-weight: 700; }
.fb-reply p:last-child { margin-bottom: 0; }
.fb-words summary { display: inline-flex; align-items: center; min-height: var(--target); cursor: pointer; color: var(--ink-soft); list-style: none; }
.fb-words summary::-webkit-details-marker { display: none; }
.fb-words summary::before { content: "▸"; margin-right: 10px; }
.fb-words[open] summary::before { content: "▾"; }
.fb-words p { overflow-wrap: anywhere; }
.fb-expected { margin: 8px 0 0; font-weight: 700; }
.ask { margin: 0 0 24px; }
.ask h2 { margin-bottom: 4px; }
.ask-later { margin: 8px 0 0; }

/* ---- Companies (the operator's screen) ---- */

.company-cards { margin-top: 24px; }
@media (min-width: 900px) { .company-cards { grid-template-columns: 1fr 1fr; } }
.company-name { margin-bottom: 12px; overflow-wrap: anywhere; }
.company-name .tag { margin-left: 4px; }
.company-card .actions { margin-top: 4px; }
.company-card .actions .btn { margin: 0; }
.company-ended { background: var(--wash); }
.card-made { margin: 24px 0; border-color: var(--ok-ink); }

/* ---- Getting started (partials/getting-started.ejs, core/getting-started.js): first on a company's Home until the
   owner hides it. A line is one step or a heading over several, folded unless needed with a step to do; every link and
   button a full target. One column, two side by side where the page is wide enough. ---- */
.getting-started { margin: 8px 0 24px; }
.getting-started h2 { margin-bottom: 4px; }
.getting-started > .subhead { margin: 0 0 4px; font-size: 17px; color: var(--ink-soft); }
.steps-groups { display: grid; gap: 0 32px; grid-template-columns: 1fr; }
.steps-groups h3 { margin: 16px 0 0; font-size: 19px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: start; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; grid-column: 1; }
.step-name { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; }
.step .step-why { grid-column: 1; margin: 0; }
.step-skip { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
.step-group { grid-column: 1; min-width: 0; }
.step-group ~ .step-skip { grid-row: 1; align-self: start; }
/* The heading: the marker in its own column, the name and its tag beside it (wrapping there), the why under them. */
.step-group > summary { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; min-height: var(--target); cursor: pointer; list-style: none; }
.step-group > summary::-webkit-details-marker { display: none; }
.step-group > summary::before { content: "▸"; font-size: 22px; line-height: 1; color: var(--ink-soft); }
.step-group[open] > summary::before { content: "▾"; }
.step-title { padding: 14px 0 2px; }
.step-title .tag { margin-left: 0; }
.step-group > summary .step-why { grid-column: 2; margin: 0; }
.step-group > summary:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.substeps { list-style: none; margin: 8px 0 0; padding: 0 0 0 22px; }
.substep { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 10px; border-top: 1px solid var(--line); }
/* The step's name and its few words are one target, wrapping at the body's own line height; only the name is underlined. */
.substep-link { display: flex; align-items: center; min-width: 0; min-height: var(--target); padding: 6px 0; text-decoration: none; color: var(--ink); }
.substep-name { font-weight: 600; color: var(--main); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.substep-link:hover .substep-name { color: var(--ink); text-decoration-color: var(--ink); }
.substep-done .substep-name { font-weight: 500; }
.step-hide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; }
@media (min-width: 900px) { .steps-groups { grid-template-columns: 1fr 1fr; } }
/* Settings, Plan and billing: Show Getting started again, apart at the tab's foot. */
.quiet-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---- The day's list on Home (the bookings part): the day's bookings, one row each, once there are any (part 4). ---- */
.day-list h2 { margin-bottom: 8px; }

/* ---- Products, prices, questions, things (the brief of 2026-11-06, part 2) ---- */

/* A product in the list: its picture (framed three by two), its name and a line under it. */
.row-product { display: flex; align-items: center; gap: 14px; }
.thumb { flex: none; width: 84px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--wash); }
.thumb-none { flex: none; width: 84px; height: 56px; border-radius: 8px; background: var(--wash); border: 1px dashed var(--line-strong); }
.row-product .row-text { flex: 1 1 auto; }

/* A product's picture on its page, and the frame to crop it in: three wide by two tall, as the booking page shows it. */
.product-pic { display: block; width: min(100%, 480px); aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--wash); margin: 0 0 12px; }
.picture-frame { --ratio: 1.5; position: relative; width: min(100%, 480px); aspect-ratio: var(--ratio); overflow: hidden; border-radius: 12px; background: var(--wash); outline: 1px solid var(--line-strong); cursor: grab; touch-action: none; }
.picture-frame:active { cursor: grabbing; }
.picture-frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.picture-frame img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.picture-framing .logo-framing-controls { min-width: 200px; }

/* Order by dragging (S7): a handle to drag by, shown only with the script; arrows that work without it. */
.reorder { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.reorder-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.reorder-handle { display: none; }
.reorder-on .reorder-item { grid-template-columns: auto minmax(0, 1fr) auto; }
.reorder-on .reorder-handle { display: flex; align-items: center; justify-content: center; width: 36px; min-height: var(--target); margin-left: -6px; border-radius: 8px; color: var(--ink-soft); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.reorder-on .reorder-handle:hover { background: var(--wash); color: var(--ink); }
.reorder-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; margin: 0; padding: 10px 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.reorder-sub { color: var(--ink-soft); font-size: 16px; }
.reorder-edit { min-width: 0; }
.reorder-edit > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--target); cursor: pointer; list-style: none; }
.reorder-edit > summary::-webkit-details-marker { display: none; }
.reorder-edit > summary .reorder-title { padding: 0; }
.reorder-edit .when-open, .reorder-edit[open] .when-shut { display: none; }
.reorder-edit[open] .when-open { display: inline; }
.reorder-edit > form.form { margin: 4px 0 8px; }
.reorder-moves { display: flex; gap: 8px; align-self: center; }
.reorder-moves form { margin: 0; }
.reorder-item.is-dragging { position: relative; z-index: 5; border-color: var(--accent); box-shadow: 0 10px 28px rgba(2, 6, 18, 0.2); }
.reorder-item.is-dragging .reorder-handle { cursor: grabbing; background: var(--wash); color: var(--ink); }
.reorder.is-reordering { cursor: grabbing; user-select: none; -webkit-user-select: none; }
/* On a phone a line stacks: the handle and the record, the arrows under them at the right; the picture smaller. */
@media (max-width: 699px) {
  .reorder-item, .reorder-on .reorder-item { grid-template-columns: auto minmax(0, 1fr); }
  .reorder-item > .reorder-moves { grid-column: 1 / -1; justify-content: flex-end; }
  .thumb, .thumb-none { width: 60px; height: 40px; }
}
.btn-icon { min-width: var(--target); padding: 8px 12px; }
.btn-small { min-height: 44px; padding: 4px 14px; font-size: 16px; }
.btn-small.btn-quiet { min-height: var(--target); }
/* A form inside a section of a record's page (a new price, a new question): its Save stays with it, no floating bar. */
.sub-form { margin-top: 8px; }
.sub-form .btn { margin-top: 16px; }
.sub-form .field-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.form .field-row label:first-of-type { margin-top: 16px; }

/* A search box over a picker that could get long (S6; app.js adds it to select[data-search]). */
.picker-search { margin: 0 0 6px; }
.picker-none { margin: 6px 0 0; color: var(--ink-soft); }

/* A list to tick from (Change many times, the crew on a time): each line a full target. */
.ticks { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--line); }
.ticks > li { border-bottom: 1px solid var(--line); }
.tick { display: flex; align-items: center; gap: 14px; min-height: var(--target); padding: 8px 4px; cursor: pointer; }
.tick input { width: 26px; height: 26px; flex: none; accent-color: var(--main); }
.tick .row-text { flex: 1 1 auto; }
.tick-all { margin: 0 0 8px; }
.form .ticks label.tick { margin: 0; font-weight: 400; }

/* ---- The calendar: a month as a grid of days on a computer, a list of days on a phone; a week as its days ---- */
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.cal-nav h2 { margin: 0; flex: 1 1 auto; font-size: 24px; }
.cal-nav .btn { margin: 0; }
.cal-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 16px; }
.cal-filter label { margin: 0 0 6px; }
.cal-filter select { width: auto; min-width: 14em; max-width: 100%; }
.cal-filter .btn { margin: 0; }
.cal-figures { margin: 0 0 16px; color: var(--ink-soft); }
.cal-figures strong { color: var(--ink); }
.cal-grid { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.cal-weekdays { display: none; }
.cal-day { padding: 8px 10px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); min-width: 0; }
.cal-day.is-past { background: var(--paper); }
.cal-day.is-today { border-color: var(--accent); }
.cal-day.is-lead, .cal-day.is-quiet { display: none; }
.cal-day-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin: 0 0 4px; }
.cal-day-head a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; text-decoration: none; color: var(--ink); }
.cal-day-head a:hover { text-decoration: underline; }
.cal-day-sum { color: var(--ink-soft); font-size: 15px; white-space: nowrap; }
.cal-times { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cal-time { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: baseline; min-height: var(--target); padding: 6px 8px; border-radius: 8px; background: var(--wash); color: var(--ink); text-decoration: none; font-size: 16px; }
.cal-time:hover { background: var(--line); color: var(--ink); }
.cal-time-start { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-time-name { font-weight: 600; overflow-wrap: anywhere; }
.cal-time-sub { grid-column: 2; color: var(--ink-soft); font-size: 15px; }
.cal-time.is-full .cal-time-sub, .cal-time.is-closed .cal-time-sub { color: var(--alert-ink); }
.cal-time.is-past { opacity: 0.7; }
.cal-time.is-cancelled { opacity: 0.7; text-decoration: line-through; }
.cal-time.is-cancelled .cal-time-sub { color: var(--alert-ink); }
.cal-add { display: inline-flex; align-items: center; min-height: var(--target); margin-top: 2px; font-size: 15px; }
.cal-week { list-style: none; margin: 0 0 24px; padding: 0; }
.cal-week > li { margin: 0 0 16px; }
.cal-week h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 6px; }
.cal-week h3 .cal-day-sum { font-weight: 400; }
.cal-week .row-grid { display: grid; grid-template-columns: 5em minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.cal-week .row-grid .row-sub { grid-column: 2 / span 2; }
@media (min-width: 900px) {
  .cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; color: var(--ink-soft); font-size: 15px; font-weight: 600; }
  .cal-weekdays li { padding: 0 10px; }
  .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-day.is-quiet { display: block; }
  .cal-day.is-lead { display: block; visibility: hidden; border: 0; background: none; }
  .cal-day-head { flex-direction: column; align-items: flex-start; gap: 0; }
  .cal-time { grid-template-columns: minmax(0, 1fr); }
  .cal-time-sub { grid-column: 1; }
}
.page-wide .cal-grid, .page-wide .cal-weekdays, .page-wide .cal-week { max-width: none; }

/* A time's page: the facts, then the form. A link among the facts, in the sharing lines or on a thing a product uses is a full target. */
.time-facts { margin: 0 0 20px; }
.facts dd a, .time-shared a, .reorder-title a { display: inline-flex; align-items: center; min-height: var(--target); }
.time-shared { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--line-strong); background: var(--card); border-radius: 0 8px 8px 0; }
.time-shared p { margin: 0 0 4px; }

/* ---- The day's view of a thing: a table of half hours, a lane per overlapping use, no script ---- */
.timeline-scroll { overflow-x: auto; margin: 0 0 20px; border: 2px solid var(--line); border-radius: 8px; background: var(--card); }
.timeline { border-collapse: collapse; min-width: 100%; font-size: 15px; }
.timeline th, .timeline td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--wash); padding: 0; height: var(--target); vertical-align: middle; }
/* An hour's heading spans two half hours and is at least 4.6em wide, so every half hour keeps 2.3em; the table then grows past the screen and slides. */
.timeline thead th { height: 40px; min-width: 4.6em; padding: 0 6px; text-align: left; background: var(--wash); font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.timeline th.tl-thing { min-width: 11em; width: 11em; padding: 8px 10px; text-align: left; background: var(--card); font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.timeline thead th.tl-thing { position: sticky; left: 0; z-index: 2; }
.timeline tbody th.tl-thing { position: sticky; left: 0; z-index: 1; }
.timeline td.tl-use { padding: 0 2px; }
.timeline td.tl-use a { display: flex; align-items: center; min-height: var(--target); padding: 4px 8px; border-radius: 6px; background: var(--main); color: var(--main-ink); font-weight: 600; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.timeline td.tl-use a:hover { background: var(--main-hover); color: var(--main-ink); }
.timeline tr.tl-lane-more th.tl-thing { color: var(--ink-soft); font-weight: 400; }
.timeline tbody tr:last-child th, .timeline tbody tr:last-child td { border-bottom: 0; }

/* ---- Wider screens ---- */

@media (min-width: 700px) {
  .two { grid-template-columns: 1fr 1fr; }
  .sub-form .field-row { grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); }
  .address-last { grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); }
  h1 { font-size: 32px; }
  .h-big { font-size: 40px; }
  .page { padding-top: 32px; }
  .log-wide li { display: grid; grid-template-columns: 11em 1fr; column-gap: 20px; }
  .log-wide .log-who { grid-row: span 2; }
  .cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  /* At the far right whether or not someone is signed in. */
  .powered { flex: 0 0 auto; margin-left: auto; margin-right: calc(-1 * min(50px, 10px + max(0px, (100vw - 1100px) / 2))); }
  .bar-who + .powered { margin-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .bar-logo { transition: none; }
  .drawer-moves .side, .drawer-moves .scrim, .drawer-moves.drawer-open .side, .drawer-moves.drawer-open .scrim { transition: none; }
}

@media print {
  .top { position: static; box-shadow: none; }
  .shell { display: block; }
  .side, .scrim, .menu-button, .skip, .form-bar, .toast { display: none !important; }
}

/* Settings, Booking page: the link, its QR code and the Book button's line side by side where there is room, each with
   its Copy (settings-page.ejs). The code box is read-only, in the system's own monospace. */
.share-row { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.qr { width: 240px; height: 240px; max-width: 100%; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.share-text label { display: block; font-weight: 700; margin: 0 0 6px; }
.share-text label + .copy-row + label { margin-top: 16px; }
.share-text p a { display: inline-flex; align-items: center; min-height: var(--target); }
.copy-row { display: flex; gap: 8px; align-items: stretch; }
.copy-row input, .copy-row textarea { flex: 1 1 auto; min-width: 0; min-height: var(--target); padding: 10px 14px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; }
.copy-row textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; resize: vertical; }
.copy-row .btn { flex: none; margin: 0; }
@media (min-width: 700px) { .share-row { grid-template-columns: 240px 1fr; } }

/* Part 4. Bookings' search and filters, the office's booking forms, a booking's actions and money, check-in, the
   day's list on Home (sections per time, a tinted total closing each, the day's band last), the cancel screens, Print. */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 20px; }
.filters label { display: block; font-weight: 700; margin: 0 0 6px; }
.filters select, .filters input { min-height: var(--target); }
.filter-search { flex: 1 1 16em; }
.filter-search input { width: 100%; }
.filter-go { display: flex; align-items: center; gap: 12px; }
.day-nav { display: flex; align-items: center; gap: 8px; }
.day-nav .btn { margin: 0; min-width: var(--target); font-size: 22px; }
.day-columns { margin: 0 0 16px; }
.day-columns summary { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; cursor: pointer; }
.day-columns form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px 0; }
.day-columns .choice { margin: 0 !important; }
.day-time, .day-line, .check-in { scroll-margin-top: 96px; }
.day-time { border: 2px solid var(--line); border-radius: 12px; margin: 0 0 20px; overflow: hidden; background: var(--card); }
.day-time.is-cancelled { opacity: 0.75; }
.day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 12px 16px; background: var(--wash); border-bottom: 1px solid var(--line); }
.day-head h3 { margin: 0; flex: 1 1 auto; font-size: 19px; }
.day-head .btn { margin: 0; }
.day-start { font-variant-numeric: tabular-nums; margin-right: 6px; }
.day-facts { margin: 0; flex: 1 1 100%; color: var(--ink-soft); }
.day-time > .empty { padding: 0 16px; }
.day-lines { list-style: none; margin: 0; padding: 0; }
.day-line { display: grid; grid-template-columns: 1fr; gap: 6px 16px; padding: 12px 16px 12px 28px; border-bottom: 1px solid var(--line); align-items: center; }
.day-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.day-name { font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; min-height: var(--target); }
.day-phone { display: inline-flex; align-items: center; min-height: var(--target); }
.day-head h3 a { display: inline-flex; align-items: center; min-height: var(--target); }
.day-what { display: flex; flex-direction: column; gap: 2px; }
.day-answers, .day-note { color: var(--ink-soft); }
.day-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.day-check form { margin: 0; }
.day-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 10px 16px; background: var(--wash); font-weight: 700; }
.day-band { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 16px; border-radius: 12px; background: var(--ev-ink); color: #fff; font-weight: 700; margin: 0 0 20px; }
.money-in { color: var(--ok-ink); }
.money-out { color: var(--danger); }
.money-owed { color: var(--danger); }
.day-band .money-in, .day-band .money-owed { color: inherit; }
.btn-check { min-width: 7em; margin: 0; }
.btn-check.is-on { background: var(--ok-wash); border-color: var(--ok-ink); color: var(--ok-ink); }
.check-in { margin: 0 0 16px; }
.check-count { font-size: 19px; margin: 0 0 8px; }
.check-all { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.check-all form { margin: 0; }
.check-places { list-style: none; margin: 0; padding: 0; }
.check-place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.check-place form { margin: 0; flex: 1 1 0; }
.check-place form .btn { width: 100%; }
.check-place-name { flex: 1 1 100%; font-weight: 600; }
@media (min-width: 600px) { .check-place-name { flex: 1 1 8em; } .check-place form { flex: 0 0 auto; } .check-place form .btn { width: auto; } }
.booking-actions { margin: 0 0 20px; }
.time-actions { margin: 0 0 16px; }
.counts .count-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.counts .count-line label { margin: 0; flex: 1 1 12em; }
.place-box { border: 2px solid var(--line); border-radius: 10px; padding: 8px 14px 12px; }
.place-box legend { padding: 0 6px; }
.field-one { margin: 8px 0; }
.field-one label { display: block; font-weight: 700; margin: 0 0 6px; }
.choice-more { margin: 0 0 12px 40px; }
.plan h2 { font-size: 19px; margin: 16px 0 6px; }
.plan-line { font-weight: 600; }
.mail-sample { white-space: pre-wrap; font: inherit; padding: 14px 16px; border: 2px solid var(--line); border-radius: 10px; background: var(--wash); overflow-wrap: anywhere; }
/* Part 5: Other steps under a record (opened in place), the "Email the customer" tick on a change's form, the email
   on Settings, Email whose test just went. */
.other-steps { margin: 24px 0; }
.other-steps > summary { display: inline-flex; align-items: center; min-height: var(--target); cursor: pointer; font-weight: 600; list-style: none; }
.other-steps > summary::-webkit-details-marker { display: none; }
.other-steps > summary::before { content: "▸"; margin-right: 10px; color: var(--ink-soft); }
.other-steps[open] > summary::before { content: "▾"; }
.email-tick { margin: 16px 0; }
.email-kind.is-tested { border-left: 6px solid var(--ok-ink); padding-left: 14px; }
.customer-facts a { font-weight: 600; }
.policy-read { margin-top: 16px; }
.policy-sentence { font-weight: 600; }
.pay-link { margin-top: 16px; }
@media (min-width: 900px) {
  .day-line { grid-template-columns: minmax(12em, 1.2fr) minmax(12em, 2fr) auto auto; }
}
@media print {
  .no-print, .filters, .day-columns, .delete-link, form.form { display: none !important; }
  .day-time { break-inside: avoid; border-color: #999; }
  .day-band { background: none; color: #000; border: 2px solid #000; }
  .day-line { grid-template-columns: 1.2fr 2fr auto; padding-left: 16px; }
}
.form > h2, .form > h3 { margin: 28px 0 8px; }

/* ---- Bring in (part 6): a list folded under its summary, opened in place ---- */
details.block > summary, details.sub-form > summary { display: flex; align-items: center; gap: 6px; min-height: var(--target); cursor: pointer; font-weight: 700; }
details.sub-form { margin-top: 18px; }

/* ---- Reports (part 7): the period, the tiles, the charts, the tables read as sections, the Download row. Money in
   green, money out red, the result blue (the playbook, R3), whatever the company's own look is. ---- */
.report-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; max-width: none; margin: 0 0 16px; }
.report-period .field-row { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0; }
.report-period .field-row > div { flex: 1 1 150px; max-width: 220px; }
.report-period .field-row label { display: block; }
.report-period .field-row select, .report-period .field-row input { width: 100%; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; list-style: none; margin: 0 0 24px; padding: 0; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.tile-label { color: var(--ink-soft); }
.tile-figure { font-size: 28px; font-weight: 700; color: var(--ink); min-height: var(--target); display: inline-flex; align-items: center; }
.tile-words { font-weight: 700; min-height: var(--target); display: inline-flex; align-items: center; }
.tile.tone-in .tile-figure { color: #1E7A43; }
.tile.tone-out .tile-figure { color: #B3261E; }
.tile.tone-result .tile-words { color: #2C6DFC; }
.chart { margin: 0 0 24px; padding: 16px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.chart figcaption { font-weight: 700; margin: 0 0 8px; }
.chart-svg { display: block; width: 100%; height: auto; }
.report-table td.num, .report-table th.num { text-align: right; }
.report-table td a, .report-table th a { display: inline-flex; align-items: center; min-height: var(--target); }
.report-table .row-head th { background: var(--card); font-weight: 700; padding-top: 14px; }
.report-table .row-head.tone-in th { color: #1E7A43; }
.report-table .row-head.tone-out th { color: #B3261E; }
.report-table .row-under th { padding-left: 28px; font-weight: 400; }
.report-table .row-total th, .report-table .row-total td { background: #EEF2F6; font-weight: 700; }
.report-table .row-result th, .report-table .row-result td { background: #E8F0FA; font-weight: 700; color: #1F4FB8; }
.report-table .row-result td a, .report-table .row-result th a { color: #1F4FB8; }
.report-block h2 { margin-bottom: 8px; }
/* Time across: the row names stay at the left and the Total at the right while the periods scroll between them. */
.report-table th[scope="row"], .report-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.report-table thead th:first-child { background: var(--wash); }
.report-table td:last-child, .report-table thead th:last-child { position: sticky; right: 0; z-index: 1; background: var(--card); border-left: 1px solid var(--line); }
.report-table thead th:last-child { background: var(--wash); }
.report-table .row-total th, .report-table .row-total td:last-child { background: #EEF2F6; }
.report-table .row-result th, .report-table .row-result td:last-child { background: #E8F0FA; }
.downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0; }
.downloads-label { font-weight: 700; margin-right: 4px; }
@media print { .downloads, .report-period { display: none; } }
.table-note { color: var(--ink-soft); margin: -8px 0 16px; }
.page-wide .chart, .page-wide .tiles, .page-wide .report-period, .page-wide > .tabs, .page-wide > .subhead { max-width: 1000px; }

/* ---- Part 8: a row with its own buttons beside it (a time's waitlist), the gift voucher's code ---- */
.row-with-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.row-with-actions > .row { flex: 1 1 18em; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px 12px; }
.row-actions form { margin: 0; }
.voucher-code { font-size: 28px; font-weight: 700; margin: 0 0 8px; }

/* The day's list: those staying on under a stay's night, and those leaving (part 9). */
.day-sub { margin: 16px 0 6px; font-size: 17px; }
.day-lines-quiet .day-line { opacity: 0.9; }

/* Settings, Booking page: the company's own address and its records (part 9). */
.own-problem { max-width: 60ch; }
.own-records input { min-width: 14ch; }