/* QLIQQI Booking admin. Colours from the QLIQQI brand guide: Deep Navy, QLIQQI Teal and
   Bright Teal. Teal is too light for text on white (2.3:1), so text and links on white use
   --teal-ink (5.2:1), and teal fills carry navy text (8.1:1). */

:root {
  color-scheme: light;
  --navy: #07111f;
  --navy-2: #131b29;  /* qliqqi.com's cards: the sidebar */
  --navy-3: #222d3e;
  --on-navy-muted: #aeb8c6;
  --teal: #10bfa5;
  --teal-bright: #35e6d0;
  --teal-ink: #0b7a6b;
  --teal-wash: #e7f6f3;
  --text: #1b2330;
  --muted: #55606e;
  --line: #d9dee5;
  --field: #6b7684;
  --page: #f3f5f7;
  --card: #fff;
  --error: #b00020;
  --error-wash: #fdeeee;
  --ok: #2e7d32;
  --ok-wash: #eef6ee;
  --warn: #7a5a00;
  --warn-wash: #fff8e1;
  --radius: 8px;
  --sidebar: 16rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       color: var(--text); background: var(--page); }
img { max-width: 100%; }
a { color: var(--teal-ink); text-underline-offset: 0.15em; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
p { margin: 0.5rem 0; }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 1.25rem; color: var(--navy); }
h2 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
code { font-size: 0.9rem; overflow-wrap: anywhere; word-break: break-all; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 10; padding: 0.5rem 1rem;
             background: var(--card); color: var(--navy); border-radius: var(--radius); }
.skip-link:focus { top: 0.5rem; }

/* Top bar: logo, which area this is, and the account menu. */
.topbar { display: flex; align-items: center; gap: 0.75rem 1.25rem; flex-wrap: wrap;
          min-height: 3.5rem; padding: 0.5rem 1.5rem; background: var(--navy); color: #fff; }
.topbar :focus-visible { outline-color: var(--teal-bright); }
.topbar .brand { display: flex; align-items: center; }
.topbar .brand img { display: block; height: 30px; width: auto; }
.topbar .area { font-weight: 600; color: #c7d2de; }
.topbar .area-platform { color: var(--navy); background: var(--teal); padding: 0.1rem 0.6rem;
                         border-radius: 999px; font-size: 0.9rem; }
.account { margin-left: auto; position: relative; }
.account > summary { cursor: pointer; list-style: none; padding: 0.35rem 0.75rem;
                     border: 1px solid var(--navy-3); border-radius: var(--radius);
                     max-width: 18rem; overflow: hidden; text-overflow: ellipsis;
                     white-space: nowrap; }
.account > summary::-webkit-details-marker { display: none; }
.account > summary::after { content: " ▾"; color: var(--teal); }
.account > summary:hover { border-color: var(--teal); }
.account .menu { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 5;
                 min-width: 16rem; max-width: calc(100vw - 2rem); padding: 0.5rem 0;
                 background: var(--card); color: var(--text); border: 1px solid var(--line);
                 border-radius: var(--radius); box-shadow: 0 8px 24px rgb(7 17 31 / 0.18); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a, .menu .menu-button { display: block; width: 100%; padding: 0.45rem 1rem;
                                 text-align: left; color: var(--text); text-decoration: none;
                                 background: none; border: 0; font: inherit; cursor: pointer; }
.menu li a:hover, .menu .menu-button:hover { background: var(--page); color: var(--text); }
.menu .menu-label { margin: 0.25rem 1rem; font-size: 0.85rem; color: var(--muted); }
.menu .menu-who { margin: 0.25rem 1rem 0.5rem; font-size: 0.9rem; color: var(--muted);
                  overflow-wrap: anywhere; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 0.4rem 0; }
.menu form { margin: 0; }

/* The sidebar and the content beside it. */
/* The sidebar's column is painted on the shell, so it runs to the foot of a long page while
   the sidebar itself stays in view (sticky, scrolling on its own if the window is short). */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr);
         min-height: calc(100vh - 3.5rem);
         background: linear-gradient(to right, var(--navy-2) calc(var(--sidebar) - 1px),
                                     var(--navy-3) calc(var(--sidebar) - 1px) var(--sidebar),
                                     transparent var(--sidebar)); }
.shell.no-sidebar { grid-template-columns: minmax(0, 1fr); background: none; }
.content { width: 100%; max-width: 90rem; padding: 2rem 2.5rem 4rem; }
.no-sidebar .content { max-width: 64rem; margin: 0 auto; }
.content.narrow { max-width: 30rem; }

/* The sidebar matches qliqqi.com: a card navy panel, white text, the current page in bright
   teal with a teal bar. Business and platform areas alike; the top bar's "Platform" label
   tells them apart. */
.sidebar { background: var(--navy-2); color: #fff; border-right: 1px solid var(--navy-3);
           padding: 1.5rem 0; position: sticky; top: 0; align-self: start;
           max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.sidebar :focus-visible { outline-color: var(--teal-bright); }
.sidebar > summary { display: none; }
.sidebar > summary::-webkit-details-marker { display: none; }
.sidebar .sidebar-title { padding: 0 1.25rem; margin: 0 0 1.25rem; }
.sidebar .sidebar-title strong { display: block; font-size: 1.1rem; line-height: 1.3;
                                 overflow-wrap: anywhere; }
.sidebar .sidebar-title span { display: block; font-size: 0.85rem; color: var(--on-navy-muted);
                               overflow-wrap: anywhere; }
.sidebar h2 { margin: 1.25rem 1.25rem 0.35rem; font-size: 0.8rem; font-weight: 600;
              letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-navy-muted); }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar a { display: block; padding: 0.45rem 1.25rem; color: #fff;
             text-decoration: none; border-left: 4px solid transparent; }
.sidebar a:hover { background: var(--navy-3); color: #fff; }
.sidebar a[aria-current="page"] { background: var(--navy-3); border-left-color: var(--teal);
                                  font-weight: 600; color: var(--teal-bright); }

/* Page heading. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
             gap: 0.5rem 1.5rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; }
.page-head .eyebrow { margin: 0 0 0.25rem; color: var(--muted); }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lead { max-width: 75ch; margin: -0.75rem 0 1.5rem; color: var(--muted); }

/* Cards, and grids of cards. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
             gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.card-head h2 { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
         gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; }
.cards > .card { margin-bottom: 0; }
.cards .span-all { grid-column: 1 / -1; }
.card.danger-zone { border-color: #e3a3ad; }
.card.danger-zone h2 { color: var(--error); }

/* Forms: fields in a grid, so short fields share a row. */
form { margin: 0; }
label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
          gap: 1rem 1.5rem; align-items: start; margin: 0 0 1rem; }
.fields > * { margin: 0; min-width: 0; }
.fields .span-all, .fields fieldset { grid-column: 1 / -1; }
.fields .span-2 { grid-column: span 2; }
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"], input[type="time"], select, textarea {
  font: inherit; color: var(--text); background: #fff; padding: 0.45rem 0.6rem;
  border: 1px solid var(--field); border-radius: 6px; width: 100%; max-width: 36rem; }
input[type="number"] { max-width: 12rem; }
input[type="date"], input[type="time"] { width: auto; max-width: 100%; }
.fields input, .fields select, .fields textarea { max-width: 100%; }
.fields input[type="number"] { max-width: 12rem; }
.fields.pairs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
fieldset > p > select { max-width: 24rem; }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0 0.4rem 0 0;
                                              vertical-align: -0.15em; accent-color: var(--teal-ink); }
input[type="checkbox"] + label, input[type="radio"] + label { display: inline; font-weight: normal; }
input[type="color"] { width: 4rem; height: 2.5rem; padding: 0.15rem; border: 1px solid var(--field);
                      border-radius: 6px; background: #fff; }
input[type="file"] { max-width: 100%; }
textarea { font: inherit; }
.hint { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem;
        max-width: 70ch; }
.field-error { display: block; color: var(--error); font-weight: 600; margin-top: 0.25rem; }
[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1rem 1rem;
           margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 600; padding: 0 0.35rem; }
fieldset p { margin: 0.35rem 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
           gap: 0.25rem 1.5rem; }
.choices p { margin: 0.2rem 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
                margin-top: 1.25rem; }
.cards + .form-actions, .card + .form-actions { margin: 0 0 1.5rem; }
form.inline { display: inline; margin-left: 0.5rem; }
/* "More options": rarely used settings, closed until needed; the summary says what they are. */
details.more { margin: 0 0 1rem; }
details.card.more { margin-bottom: 0; }
details.more > summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; padding: 0.25rem 0; }
details.more > summary .hint { font-weight: normal; font-size: 0.9rem; margin-left: 1.4rem; }
details.more[open] > summary { margin-bottom: 0.75rem; }
details.more[open] > summary .hint { display: none; }
form.card details.more { border-top: 1px solid var(--line); padding-top: 0.75rem; }
/* Numbered setup steps on the Get started page. */
ol.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
ol.steps > li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr auto;
                gap: 0.25rem 0.9rem; align-items: start; padding: 0.9rem 1rem;
                border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
ol.steps > li::before { content: counter(step); display: grid; place-items: center; width: 2.25rem;
                        height: 2.25rem; border-radius: 50%; background: var(--teal-wash);
                        color: var(--teal-ink); font-weight: 700; }
ol.steps > li.done::before { content: "✓"; background: var(--teal); color: var(--navy); }
ol.steps h3 { margin: 0.35rem 0 0.25rem; font-size: 1.05rem; }
ol.steps p, ol.steps ul { margin: 0.25rem 0 0; }
ol.steps .step-action { align-self: center; }
.facts-line { color: var(--muted); margin: -0.5rem 0 1.5rem; }
.facts-line span + span::before { content: " · "; }
/* A number with its unit, such as "2 hours". */
.with-unit { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.with-unit input { width: 8rem; }
.with-unit select { width: auto; }
.section-gap { margin-top: 1.5rem; }

/* Buttons: one main (teal) per form, secondary outlined, destructive red. */
button, .button { display: inline-block; font: inherit; font-weight: 600; line-height: 1.3;
                  padding: 0.5rem 1.1rem; border: 1px solid var(--teal); border-radius: 6px;
                  background: var(--teal); color: var(--navy); cursor: pointer;
                  text-decoration: none; text-align: center; }
button:hover, .button:hover { background: var(--teal-bright); border-color: var(--teal-bright);
                              color: var(--navy); }
button.secondary, .button.secondary, td button {
  background: #fff; color: var(--navy); border-color: var(--field); font-weight: 500; }
button.secondary:hover, .button.secondary:hover, td button:hover {
  background: var(--page); border-color: var(--navy); }
button.danger, .button.danger { background: #fff; color: var(--error); border-color: var(--error);
                                font-weight: 500; }
button.danger:hover, .button.danger:hover { background: var(--error-wash); color: var(--error); }
button.danger-solid { background: var(--error); color: #fff; border-color: var(--error); }
button.danger-solid:hover { background: #8c0019; border-color: #8c0019; color: #fff; }
button.small, .button.small { padding: 0.3rem 0.7rem; font-size: 0.9rem; }

/* Tables: full width, with their actions on the row. */
.table-card { padding: 0; overflow: hidden; }
.table-card > .card-head { padding: 1rem 1.25rem 0; }
.table-card > .card-empty { margin: 0; padding: 0.5rem 1.25rem 1rem; }
.table-card > .card-empty + table { margin-top: 0.25rem; }
.table-card > .cancel-list { margin: 0; padding: 0.25rem 1.25rem 1rem 2.75rem; }
.table-card > .cancel-list li + li { margin-top: 0.35rem; }
.table-card > .field-error { display: block; padding: 0 1.25rem 1rem; }
table { border-collapse: collapse; width: 100%; background: var(--card); }
caption { text-align: left; color: var(--muted); padding: 0.75rem 1.25rem; caption-side: top; }
th, td { text-align: left; padding: 0.65rem 1.25rem; border-top: 1px solid var(--line);
         vertical-align: top; }
thead th { background: var(--page); font-size: 0.9rem; color: var(--muted); font-weight: 600; }
td ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
td form { display: inline-block; margin: 0 0.25rem 0.25rem 0; }
td.row-actions, th.row-actions { text-align: right; }
td.row-actions a, td.row-actions button { white-space: nowrap; }
td.row-actions a { margin-left: 1rem; }
td.row-actions a:first-child { margin-left: 0; }
/* Sortable headings (admin.js): the heading's text is a button. */
th button.sort { all: unset; cursor: pointer; display: inline-flex; gap: 0.35rem; align-items: center; }
th button.sort:hover { color: var(--text); text-decoration: underline; }
th button.sort:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; border-radius: 2px; }
th .sort-mark { font-size: 0.7rem; min-width: 0.7rem; }
th[aria-sort] { color: var(--text); }
th:not([aria-sort]) .sort-mark { opacity: 0.55; }

/* Messages. */
[role="status"], .notice { background: var(--ok-wash); border-left: 4px solid var(--ok);
                           padding: 0.6rem 1rem; border-radius: 4px; margin: 0 0 1.25rem; }
[role="alert"] { background: var(--error-wash); border-left: 4px solid var(--error);
                 padding: 0.6rem 1rem; border-radius: 4px; margin: 0 0 1.25rem; }
.warning { background: var(--warn-wash); border-left: 4px solid var(--warn); padding: 0.6rem 1rem;
           border-radius: 4px; margin: 0 0 1rem; }
[role="status"] ul, [role="alert"] ul, .warning ul { margin: 0.25rem 0; }
/* After a save that kept your place (admin.js), the notice shows at the bottom of the screen. */
[role="status"].floating { position: fixed; z-index: 20; bottom: 1rem; right: 1rem; left: auto; margin: 0;
                           max-width: min(32rem, calc(100vw - 2rem)); box-shadow: 0 4px 16px rgb(7 17 31 / 0.18);
                           display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; }
.pill { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.85rem;
        font-weight: 600; background: var(--ok-wash); color: var(--ok); }
.pill.off { background: var(--error-wash); color: var(--error); }
.pill.muted { background: var(--page); color: var(--muted); }
.pill.wait { background: var(--warn-wash); color: var(--warn); }
/* A booking whose time, services, party or table was changed after it was made. */
.pill.changed { background: var(--card); color: var(--navy); box-shadow: inset 0 0 0 1px var(--teal-ink); }
.changed-note { margin: 0.75rem 0 0; }
.changes { margin: 0; padding-left: 1.25rem; }
.changes li + li { margin-top: 0.4rem; }

/* A one-time link with its copy button. */
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.copy-row code { background: #fff; border: 1px solid var(--line); border-radius: 6px;
                 padding: 0.35rem 0.6rem; }

/* Code to paste into a website ("On your website"), and the preview of the booking box on
   a page that stands in for the business's own website. */
pre.code { margin: 0 0 0.5rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--line);
           border-radius: 6px; }
/* Long lines wrap rather than scroll, so the code is readable on a phone and needs no
   scroll bar to reach by keyboard; Copy takes the text as it is. */
pre.code code { white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; }
.embed-preview { padding: 1rem; background: var(--page); border: 1px dashed var(--line);
                 border-radius: var(--radius); }
/* As wide as the pasted code makes it (app/embed.py). */
.embed-preview > div { max-width: 760px; margin: 0 auto; }

/* Key facts as a definition list. */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* Branding preview (business colours, not QLIQQI's). */
.swatch { display: inline-block; width: 1em; height: 1em; vertical-align: middle;
          border: 1px solid var(--line); }
.logo-preview { max-width: 100%; height: auto; border: 1px solid var(--line); padding: 0.5rem;
                background: #fff; }
.photo-preview { display: block; width: 100%; max-height: 12rem; object-fit: cover;
                 border: 1px solid var(--line); }
/* The fonts' own names in the font they stand for (public/fonts.css). */
.font-sample { font-size: 1.1rem; }
.font-clean { font-family: "QB Clean", system-ui, sans-serif; }
.font-classic { font-family: "QB Classic", Georgia, serif; }
.font-soft { font-family: "QB Soft", system-ui, sans-serif; }
.style-layout { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .style-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.style-layout h3 { margin-top: 0; }
/* A small booking page in the business's colours, font and corners: the variables are set
   on the element by the page, and by admin.js as the form changes. */
.brand-preview { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
                 background: #f5f5f4; color: #1c1b1d; font-family: var(--bp-font); }
.bp-header { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem;
             background: var(--bp-header); color: var(--bp-header-text);
             border-bottom: 1px solid #e3e1e2; }
.bp-header img { border-radius: var(--bp-radius-small); }
.bp-body { padding: 0.75rem 1rem 1rem; }
.bp-photo { display: block; width: 100%; height: 5rem; object-fit: cover;
            border-radius: var(--bp-radius); }
.bp-title { font-size: 1.35rem; font-weight: 700; margin: 0.75rem 0 0.5rem; }
.bp-card { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
           justify-content: space-between; background: #fff; border: 1px solid #e3e1e2;
           border-radius: var(--bp-radius); padding: 0.75rem 1rem; }
.bp-muted { color: #4f4b51; font-size: 0.9rem; }
.bp-button { display: inline-block; padding: 0.5rem 1rem; border-radius: var(--bp-radius-small);
             background: var(--bp-primary); color: var(--bp-primary-text); font-weight: 600; }
.bp-times { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
.bp-times span { min-width: 4.5rem; padding: 0.5rem 0; text-align: center; font-weight: 700;
                 border: 1.5px solid var(--bp-link); color: var(--bp-link); background: #fff;
                 border-radius: var(--bp-radius-small); }
.bp-link { color: var(--bp-link); text-decoration: underline; }

/* Opening hours: a row per day. A time range wraps inside its cell when space is short. */
table.hours th, table.hours td { padding: 0.6rem 0.5rem 0.6rem 0.75rem; }
table.hours th[scope="row"] { width: 7rem; padding-top: 1.05rem; }
table.hours input[type="time"] { width: 7.875rem; padding-left: 0.4rem; padding-right: 0.4rem; }
.day { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.day button.remove { background: none; border: 1px solid transparent; color: var(--muted);
                     padding: 0.2rem 0.45rem; font-weight: 600; }
.day button.remove:hover { color: var(--error); border-color: var(--error); background: #fff; }
.day .range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.day .day-open { margin: 0; }
.day .closed { color: var(--muted); }
.hours-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
button.link { background: none; border: none; color: var(--teal-ink); text-decoration: underline;
              padding: 0.25rem; font-weight: 500; }
button.link:hover { background: none; color: var(--navy); }

/* Tabs on a page (Bookings): links, the current one underlined. */
.tabs { display: flex; flex-wrap: wrap; gap: 0 0.25rem; margin: 0 0 1.25rem;
        border-bottom: 1px solid var(--line); }
.tabs a { padding: 0.6rem 1rem; margin-bottom: -1px; font-weight: 600; color: var(--muted);
          text-decoration: none; border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--navy); border-bottom-color: var(--line); }
.tabs a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--teal-ink); }

/* Previous and Next under a long table. */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
         padding: 0.75rem 1.25rem 1rem; border-top: 1px solid var(--line); }

/* The Bookings calendar (docs/m6-plan.md, design call 3). Blocks are placed by the
   percentages the page gives each one (--top, --height, ...); on a phone the day becomes a
   list per table or person, and calendar-print.css fits the day on one page. */
.calendar-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
                margin: 0 0 1rem; }
.segmented { display: inline-flex; border: 1px solid var(--field); border-radius: 6px;
             overflow: hidden; background: var(--card); }
.segmented a { padding: 0.4rem 0.9rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.segmented a + a { border-left: 1px solid var(--field); }
.segmented a[aria-current="page"] { background: var(--teal); color: var(--navy); }
.calendar-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.calendar-steps span { font-weight: 600; }
/* The service filter and Go to: a row of their own under the views and dates. */
.calendar-date { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
                 flex-basis: 100%; }
.calendar-field { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 0.5rem;
                  max-width: 100%; }
.calendar-date label { margin: 0; }
.calendar-date .field-error { flex-basis: 100%; }
.calendar-date select { max-width: 14rem; min-width: 0; }
/* Day, Week, Previous, Next and Show land here, with the controls in view. */
#calendar { scroll-margin-top: 1rem; }
.calendar-heading { margin: 0 0 0.75rem; }
.calendar-filter { font-weight: 400; color: var(--muted); }
.calendar-closures { margin: 0 0 1rem; padding: 0.5rem 1rem 0.5rem 2rem; border-radius: var(--radius);
                     background: var(--warn-wash); color: var(--warn); }
.day-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line);
              border-radius: var(--radius); }
/* 5rem an hour: a 45-minute booking shows its time, name and services in full. */
.day-grid { --hour: 5rem; display: grid;
            grid-template-columns: 3.75rem repeat(var(--columns), minmax(9.5rem, 1fr)); }
.day-column { min-width: 0; border-left: 1px solid var(--line); }
/* A column's name gets two lines ("Cooking Instructor" whole); a longer one is cut after the
   second line, with the full name on hover (title). */
/* A column's head: its name on up to two lines, then what it is (table, staff) in small
   muted type, so a staff member's name isn't read as a service. */
.day-head { height: 4.1rem; margin: 0; padding: 0.4rem 0.5rem; font-size: 0.9rem;
            line-height: 1.2; border-bottom: 1px solid var(--line); overflow: hidden; }
.day-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
            line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.day-kind { display: block; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 400;
            color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-track { position: relative; height: calc(var(--hours) * var(--hour));
             background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
             background-size: 100% var(--hour); }
.day-axis .day-track { background: none; }
.day-axis span { position: absolute; top: var(--top); right: 0.5rem; transform: translateY(-50%);
                 font-size: 0.8rem; color: var(--muted); }
.day-axis span:first-child { transform: none; }
.day-closed { position: absolute; left: 0; right: 0; top: var(--top); height: var(--height);
              background: repeating-linear-gradient(135deg, #eceff3 0 6px, #e1e5ea 6px 12px); }
.day-blocks { list-style: none; margin: 0; padding: 0; }
.day-block { position: absolute; top: var(--top); height: var(--height);
             left: calc(var(--left) + 2px); width: calc(var(--width) - 4px); border-radius: 4px;
             background: repeating-linear-gradient(135deg, #cdebe6 0 4px, #eaf7f4 4px 8px); }
.day-block:hover, .day-block:focus-within { z-index: 2; }
.day-booked { position: absolute; left: 0; right: 0; top: var(--in-top); height: var(--in-height);
              overflow: hidden; display: flex; flex-direction: column; padding: 0.15rem 0.4rem;
              font-size: 0.8rem; line-height: 1.25; color: var(--text); text-decoration: none;
              background: var(--teal-wash); border-left: 4px solid var(--teal-ink); border-radius: 4px; }
.day-booked:hover, .day-booked:focus-visible { height: auto; min-height: var(--in-height);
                                               color: var(--text); box-shadow: 0 2px 10px rgb(7 17 31 / 0.25); }
.day-block.pending .day-booked { background: var(--warn-wash); border-left-color: var(--warn); }
.day-booked .pill { align-self: flex-start; font-size: 0.75rem; padding: 0 0.4rem; }
.day-time { font-weight: 600; }
/* A space booked by number of guests: an hour at a time, its guests, a bar for how full it
   is, and "4 bookings", which opens the hour's bookings in a popup (admin.js). */
.day-hours { list-style: none; margin: 0; padding: 0; }
.day-hour { position: absolute; top: var(--top); height: var(--height); left: 2px; right: 2px;
            overflow-y: auto; padding: 0.3rem 0.6rem; font-size: 0.85rem; line-height: 1.3;
            background: var(--teal-wash); border-left: 4px solid var(--teal-ink); border-radius: 4px;
            border-bottom: 1px solid var(--card); }
.day-guests { margin: 0; font-size: 1rem; font-weight: 600; }
.day-fill { position: relative; display: block; max-width: 14rem; height: 0.45rem; margin: 0.3rem 0;
            overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 1rem; }
.day-fill::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill);
                    background: var(--teal-ink); }
.day-more > summary { display: inline-block; cursor: pointer; color: var(--teal-ink);
                      text-decoration: underline; text-underline-offset: 0.15em; }
.day-more > summary:hover { color: var(--navy); }
.day-more > summary::-webkit-details-marker { display: none; }
.day-hour ul, .hour-dialog ul { list-style: none; margin: 0; padding: 0; }
.day-hour li { padding: 0.1rem 0; }
.day-hour li + li { border-top: 1px solid var(--line); }
.day-hour a, .hour-dialog a { color: var(--text); }
.day-hour li.pending a, .hour-dialog li.pending a { color: var(--warn); }
.day-hour .pill { font-size: 0.75rem; padding: 0 0.4rem; }
/* The popup: no padding on the dialog itself, so a click on the dimmed page closes it. */
.hour-dialog { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); padding: 0;
               border: 0; border-radius: var(--radius); color: var(--text); background: var(--card);
               box-shadow: 0 8px 30px rgb(7 17 31 / 0.3); }
.hour-dialog::backdrop { background: rgb(7 17 31 / 0.45); }
.hour-dialog-body { padding: 1rem 1.25rem 1.25rem; }
.hour-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.hour-dialog-head h2 { margin: 0; font-size: 1.15rem; }
.hour-dialog-head form { margin: 0; }
.hour-dialog .hint { margin: 0.2rem 0 0.75rem; }
.hour-dialog li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
                  padding: 0.6rem 0; border-top: 1px solid var(--line); }
.hour-dialog li a { flex: 1 1 16rem; padding: 0.15rem 0; }
.hour-dialog .pill { font-size: 0.8rem; }
.day-grid .day-none { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip-path: inset(50%); white-space: nowrap; }
.calendar-key { margin-top: 0.75rem; }
.calendar-key .key { display: inline-block; width: 1rem; height: 0.8rem; margin: 0 0.25rem 0 0.75rem;
                     border-radius: 2px; vertical-align: -0.1em; }
.calendar-key .key:first-child { margin-left: 0; }
.key-booked { background: var(--teal-wash); border-left: 3px solid var(--teal-ink); }
.key-pending { background: var(--warn-wash); border-left: 3px solid var(--warn); }
.key-buffer { background: repeating-linear-gradient(135deg, #cdebe6 0 3px, #eaf7f4 3px 6px); }
.key-closed { background: repeating-linear-gradient(135deg, #eceff3 0 3px, #d5dae0 3px 6px); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.week-day { min-width: 0; padding: 0.6rem 0.6rem 0.75rem; background: var(--card);
            border: 1px solid var(--line); border-radius: var(--radius); }
.week-day h3 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.week-day ol { list-style: none; margin: 0; padding: 0; }
.week-day li { margin: 0 0 0.4rem; padding: 0.3rem 0 0.3rem 0.5rem; font-size: 0.85rem; line-height: 1.3;
               border-left: 3px solid var(--teal-ink); overflow-wrap: anywhere; }
.week-day li.pending { border-left-color: var(--warn); }
.week-day li a { display: block; }
.week-day .pill { font-size: 0.75rem; }
.week-detail { display: block; color: var(--muted); }

/* Reports: quick periods, numbers to the right, a bar beside the count it repeats. */
.quick { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.quick a[aria-current="page"] { color: var(--text); font-weight: 600; text-decoration: none; }
.report-period { margin: 0; }
.report-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
              gap: 0.5rem 1rem; margin: 0 0 1rem; }
.report-tools { margin: 0; }
/* A report section is closed until opened: its title and main number on one line. */
details.report { margin-bottom: 0.75rem; }
details.report > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem;
                           padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
details.report > summary::-webkit-details-marker { display: none; }
details.report > summary::before { content: "▸"; color: var(--teal-ink); width: 1rem;
                                   font-size: 1.15rem; line-height: 1; }
details.report[open] > summary::before { content: "▾"; }
details.report > summary:hover h2 { text-decoration: underline; }
details.report > summary h2 { margin: 0; font-size: 1.15rem; }
details.report > summary .glance { color: var(--muted); }
details.report[open] > summary { border-bottom: 1px solid var(--line); }
details.report > .report-lead { padding: 0.75rem 1.25rem 0; margin: 0; }
details.report > .report-lead .hint { margin: 0; flex: 1 1 24rem; }
/* A row of filters with its button at the end (the bookings list). */
.filter-card .card-head { margin-bottom: 0.5rem; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.filters > p { margin: 0; flex: 1 1 9.5rem; min-width: 0; }
.filters > .filter-date { flex: 0 1 10rem; }
.filters > .filter-go { flex: 0 0 auto; }
.filters label { font-size: 0.9rem; }
.filters input, .filters select { width: 100%; }
.filters .field-error { display: block; }
/* Where a search form lands after Show: its results, with a little room above. */
#list-heading, #times-heading, #report-period { scroll-margin-top: 1.5rem; }
.report-scroll { overflow-x: auto; }
.report .nowrap { white-space: nowrap; }
.report th.num, .report td.num { text-align: right; white-space: nowrap; }
.report tbody th, .report tfoot th { font-weight: 400; white-space: nowrap; }
.report tfoot th, .report tfoot td { font-weight: 600; border-top: 2px solid var(--line); }
.report .bar { display: inline-block; width: 8rem; height: 0.7rem; margin-right: 0.75rem;
               background: var(--page); border-radius: 2px; vertical-align: -0.05em; }
.report .bar > span { display: block; height: 100%; background: var(--teal-ink); border-radius: 2px; }

/* Narrow screens: the sidebar folds into a Menu button, tables stack. */
@media (max-width: 60rem) {
  .week { grid-template-columns: minmax(0, 1fr); }
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--navy-3); padding: 0;
             position: static; max-height: none; overflow: visible; }
  .sidebar > summary { display: block; cursor: pointer; padding: 0.75rem 1rem; font-weight: 600;
                       list-style: none; }
  .sidebar > summary::before { content: "☰ "; }
  .sidebar[open] > summary::before { content: "✕ "; }
  .sidebar[open] > summary { border-bottom: 1px solid var(--navy-3); }
  .sidebar .sidebar-body { padding: 0.75rem 0 1rem; }
  .content { padding: 1.25rem 1rem 3rem; }
  .topbar { padding: 0.5rem 1rem; }
}
@media (max-width: 40rem) {
  .day-scroll { overflow: visible; background: none; border: 0; }
  .day-grid { display: block; }
  .day-axis, .day-closed, .calendar-key { display: none; }
  .day-column { margin-bottom: 1rem; background: var(--card); border: 1px solid var(--line);
                border-radius: var(--radius); }
  .day-head { height: auto; }
  .day-name { display: block; -webkit-line-clamp: none; line-clamp: none; }
  .day-track { height: auto; background: none; }
  .day-block { position: static; width: auto; background: none; border-radius: 0; }
  .day-block + .day-block { border-top: 1px solid var(--line); }
  .day-hour { position: static; overflow: visible; padding: 0.6rem 0.75rem; font-size: 0.95rem;
              border-radius: 0; }
  .day-booked { position: static; height: auto; padding: 0.6rem 0.75rem; font-size: 0.95rem;
                border-radius: 0; }
  .day-booked:hover, .day-booked:focus-visible { box-shadow: none; }
  .day-grid .day-none { position: static; width: auto; height: auto; clip-path: none;
                        margin: 0; padding: 0.6rem 0.75rem; color: var(--muted); white-space: normal; }
  .calendar-date { margin-left: 0; }
  ol.steps > li { grid-template-columns: 2.25rem 1fr; }
  ol.steps .step-action { grid-column: 2; justify-self: start; }
  h1 { font-size: 1.45rem; }
  .card { padding: 1rem; }
  .table-card { padding: 0; }
  .topbar .area { display: none; }
  .account > summary { max-width: 11rem; }
  .fields .span-2 { grid-column: 1 / -1; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip-path: inset(50%); }
  table.stack thead button.sort { visibility: hidden; } /* not focusable while hidden */
  table.stack, table.stack caption, table.stack tbody, table.stack tr, table.stack th,
  table.stack td { display: block; }
  table.stack tr { border-top: 1px solid var(--line); padding: 0.5rem 0; }
  table.stack th, table.stack td { border: 0; padding: 0.25rem 1rem; }
  table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
  /* Every column on the screen: smaller type, tight cells, headings and names wrap. */
  .report table { font-size: 0.8rem; }
  .report th, .report td { padding: 0.5rem 0.25rem; }
  .report th:first-child, .report td:first-child { padding-left: 0.6rem; }
  .report th:last-child, .report td:last-child { padding-right: 0.6rem; }
  .report thead th, .report thead th.num, .report tbody th, .report tfoot th { white-space: normal; }
  .report thead th { font-size: 0.75rem; }
  .report .bar { display: none; }
  table.stack td.row-actions { text-align: left; }
}

/* The second login step (admin/two_factor_*.html). */
ol.two-step { padding-left: 1.25rem; }
ol.two-step > li + li { margin-top: 0.75rem; }
.qr { margin: 0.75rem 0; }
.qr svg { display: block; width: 200px; height: auto; }
code.secret { display: block; margin-top: 0.25rem; font-size: 1rem; letter-spacing: 0.05em;
              word-break: normal; overflow-wrap: normal; }
input.code-input { max-width: 12rem; font-size: 1.25rem; letter-spacing: 0.1em; }
ul.recovery-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, max-content);
                    gap: 0.5rem 2rem; }
ul.recovery-codes code { font-size: 1.1rem; }
button.link-button { background: none; border: none; padding: 0; color: var(--teal-ink); font: inherit;
                     text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
button.link-button:hover { color: var(--navy); background: none; }