/* Booked's one design language: warm paper, white panels and ink, with colour kept for status only.
   body.light and body.dark fix the appearance (a person's choice; booking pages are always light).
   Geologica for headings, Onest for text. Tokens first; public booking pages swap --brand for the
   client's colour, and everything derived from it follows. Fonts are served from here: no
   third-party requests. Spacing: 16px between boxes, 20px inside them, 28px above a section. */
@font-face{font-family:"Geologica";font-style:normal;font-weight:100 900;font-display:swap;src:url(/app/assets/fonts/geologica-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geologica";font-style:normal;font-weight:100 900;font-display:swap;src:url(/app/assets/fonts/geologica-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(/app/assets/fonts/onest-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(/app/assets/fonts/onest-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--bg:#f7f4ee;--panel:#fff;--ink:#1f1d1a;--muted:#6b665e;--line:#e7e2d8;--field:#8f887b;--brand:#1f1d1a;--brand-ink:#fff;--mid:#efeae0;--mid-ink:#1f1d1a;--mid-muted:#6b665e;--accent:#b9ad98;
  --warn:#7a4d0b;--warn-bg:#fbf0d9;--bad:#a3261f;--bad-bg:#fbe9e7;--ok:#1d6b4f;--ok-bg:#e3f1ea;--danger:#b42318;
  --brand-soft:color-mix(in srgb,var(--brand) 8%,var(--bg));--brand-strong:color-mix(in srgb,var(--brand) 84%,#000);--brand-hover:color-mix(in srgb,var(--brand) 84%,var(--panel));--focus:var(--brand-strong);
  --radius:14px;--radius-sm:9px;--control-h:42px;--gutter:20px;--shadow:0 18px 40px -28px rgba(31,29,26,.3);--raised:var(--panel);--raised-line:var(--line);--bar-shadow:0 12px 32px -14px rgba(31,29,26,.35);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236b665e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --font-display:"Geologica",system-ui,-apple-system,"Segoe UI",sans-serif;--font-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font:16px/1.55 var(--font-body);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not(:has(body.light)){--bg:#161513;--panel:#201f1c;--ink:#f1eee8;--muted:#aca79d;--line:#36342f;--field:#7d776c;--brand:#f1eee8;--brand-ink:#161513;--mid:#100f0e;--mid-ink:#f1eee8;--mid-muted:#aca79d;--accent:#7a7264;
  --warn:#f0c987;--warn-bg:#3a2c12;--bad:#ffa39b;--bad-bg:#3a1a1c;--ok:#86d9b6;--ok-bg:#14302a;--danger:#d9382b;
  --brand-soft:color-mix(in srgb,var(--brand) 12%,var(--bg));--brand-strong:color-mix(in srgb,var(--brand) 82%,#fff);--shadow:0 18px 40px -28px rgba(0,0,0,.7);--raised:color-mix(in srgb,var(--panel) 88%,var(--ink));--raised-line:var(--field);--bar-shadow:0 -14px 28px -12px rgba(0,0,0,.8);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23aca79d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dot-ring:65%;color-scheme:dark}}
:root:has(body.dark){--bg:#161513;--panel:#201f1c;--ink:#f1eee8;--muted:#aca79d;--line:#36342f;--field:#7d776c;--brand:#f1eee8;--brand-ink:#161513;--mid:#100f0e;--mid-ink:#f1eee8;--mid-muted:#aca79d;--accent:#7a7264;
  --warn:#f0c987;--warn-bg:#3a2c12;--bad:#ffa39b;--bad-bg:#3a1a1c;--ok:#86d9b6;--ok-bg:#14302a;--danger:#d9382b;
  --brand-soft:color-mix(in srgb,var(--brand) 12%,var(--bg));--brand-strong:color-mix(in srgb,var(--brand) 82%,#fff);--shadow:0 18px 40px -28px rgba(0,0,0,.7);--raised:color-mix(in srgb,var(--panel) 88%,var(--ink));--raised-line:var(--field);--bar-shadow:0 -14px 28px -12px rgba(0,0,0,.8);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23aca79d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dot-ring:65%;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-wrap:break-word}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.012em;line-height:1.2;color:var(--ink)}
h1{font-size:28px;margin:0 0 20px}h2{font-size:19px;margin:28px 0 12px}h2.group{font-size:22px;margin-top:34px}h3{font-size:16px;margin:20px 0 8px}h4{font-size:14.5px;margin:16px 0 6px}
:is(h1,h2,h3) :is(.small,.muted){font-family:var(--font-body);font-size:14px;font-weight:400;letter-spacing:0;margin-left:6px}
:is(h1,h2,h3) .badge{margin-left:6px}h1:has(>.badge){display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}h1>.badge{margin-left:0}
p{margin:0 0 12px}ul,ol{margin:0 0 12px;padding-left:20px}
a{color:var(--brand);text-underline-offset:2px}a:hover{color:var(--brand-strong)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px 12px;border-radius:var(--radius-sm);z-index:30}
.back{margin:0 0 10px;font-size:14.5px}.back a{color:var(--muted);font-weight:500;text-decoration:none}.back a:hover{color:var(--ink)}

/* Header: brand and account on the first row, navigation on the second (one row; it scrolls sideways when it must). */
header.top{background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{max-width:1160px;margin:0 auto;padding:12px var(--gutter) 0;display:flex;gap:16px;align-items:center}
header.top .bar:last-child{padding-bottom:12px}
.brand{display:inline-flex;align-items:center;gap:9px;min-width:0;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand:hover{color:var(--ink)}.brand b{font-weight:700}.brand .by{font-weight:400;font-size:.8em;letter-spacing:0;color:var(--muted)}.brand .org-sm{display:none}
.org-name{min-width:0;padding-left:16px;border-left:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-mark{width:28px;height:28px;flex:none;border-radius:8px;background:var(--brand);display:grid;place-items:center}
.logo-mark svg{width:17px;height:17px;display:block;fill:none;stroke:var(--brand-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
header.top a.small,header.top button.link{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap}
header.top a.small:hover,header.top button.link:hover{color:var(--ink)}
.navrow{max-width:1160px;margin:0 auto;padding:8px var(--gutter) 10px}
nav.main{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
nav.main::-webkit-scrollbar{display:none}
nav.main a{flex:none;padding:7px 12px;border-radius:var(--radius-sm);text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:500;white-space:nowrap}
nav.main a:hover{color:var(--ink);background:var(--brand-soft)}
nav.main a[aria-current=page]{background:var(--brand-soft);color:var(--ink);font-weight:600}
@media (min-width:641px){html[lang|=fr] nav.main{gap:0}html[lang|=fr] nav.main a{padding-left:9px;padding-right:9px;font-size:14px}}
.spacer{flex:1}.who{color:var(--muted);font-size:14px;white-space:nowrap}
main{max-width:1160px;margin:0 auto;padding:28px var(--gutter) 72px}
main>:first-child{margin-top:0}

/* Surfaces. A panel's padding is the only space at its top and bottom. */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 16px}
.panel>:first-child,.panel>form:first-child>:first-child{margin-top:0}
.panel>:nth-child(1 of :not(input[type=hidden],.hp)){margin-top:0}
.panel>form:first-child>:nth-child(1 of :not(input[type=hidden],.hp)){margin-top:0}
.panel>:last-child,.panel>:is(form,fieldset,details,div):last-child>:last-child{margin-bottom:0}
.panel>details:last-child:not([open])>summary{margin-bottom:0}
.panel>p,.panel>form>p:not(.actions){max-width:640px}
.panel h3{margin-top:24px}
a.panel{display:block;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}a.panel:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--field)}
:is(div,section,form).sub{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.sub>:first-child{margin-top:0}.grid>:is(div,section,form).sub{border-top:0;margin-top:0;padding-top:0}
.grid{display:grid;gap:16px;margin:0 0 16px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid>*{min-width:0;margin-bottom:0}.grid.top{align-items:start}.grid.wide{grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr))}
.panel>.grid{margin-top:16px}.panel>.grid:first-child{margin-top:0}

/* Tables. On the page a table is its own box; inside a panel the panel is the frame. */
table{width:100%;margin:0 0 16px;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:color-mix(in srgb,var(--bg) 60%,var(--panel))}
tr:last-child td,tbody tr:last-child th{border-bottom:0}
td code{overflow-wrap:anywhere}
td.num,th.num{white-space:nowrap}
td.actions-cell{text-align:right;white-space:nowrap}td.actions-cell .row{justify-content:flex-end;flex-wrap:nowrap}
td>form.inline+form.inline,td>a+form.inline,td>form.inline+a{margin-left:12px}
:is(input,select,textarea,fieldset,.row)+table{margin-top:14px}
table+p{margin-top:12px}
table:has(td :is(input:not([type=hidden]),select,button:not(.link))) td{vertical-align:middle}
td label.check{margin:0}td select{max-width:320px}
label.tap{display:inline-flex;align-items:center;min-width:44px;min-height:44px;margin:-10px 0;vertical-align:top;cursor:pointer}
:where(.panel) table{border:0;border-radius:0;background:none;overflow:visible}
:where(.panel) th{background:none}
:where(.panel) :is(th,td):first-child{padding-left:0}:where(.panel) :is(th,td):last-child{padding-right:0}
.scroll-x{overflow-x:auto;margin:0 0 16px}.scroll-x>table{margin-bottom:0}
table.stats th:not(:first-child),table.stats td:not(:first-child){text-align:right;white-space:nowrap}
table.timeline td{vertical-align:baseline}table.timeline td:first-child{width:1%;white-space:nowrap;color:var(--muted);padding-right:28px}table.timeline td:nth-child(2){width:1%;white-space:nowrap;padding-right:28px}
table.hours,table.daysoff{max-width:520px}
table.hours td,table.daysoff td{padding-top:8px;padding-bottom:8px;vertical-align:middle}
/* The hours grid ends where the fields above it end: fixed columns, and the two times fill theirs. */
table.hours{table-layout:fixed}table.hours :is(th,td){padding-right:0}table.hours th:first-child{width:32%}table.hours th:nth-child(2){width:16%}
table.hours input[type=time]{width:100%;min-width:0}
table.dns code{overflow-wrap:anywhere}.wrap{overflow-wrap:anywhere}.nowrap{white-space:nowrap}.balance{text-wrap:balance}

.tabs{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap}
.tabs a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--muted);background:var(--panel);font-weight:500;font-size:14.5px;white-space:nowrap}
.tabs a:hover,ol.steps a:hover{border-color:var(--field);color:var(--ink)}
.tabs a[aria-current=page]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);font-weight:600}
.count{display:inline-block;min-width:1.6em;padding:0 6px;border-radius:999px;background:var(--bg);color:var(--ink);font-size:12.5px;text-align:center}
.tabs a[aria-current=page] .count{background:var(--brand-ink);color:var(--brand)}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:0;line-height:1.5;background:var(--bg);border:1px solid var(--line);color:var(--muted);vertical-align:middle;white-space:nowrap}
.badge.pending,.badge.awaiting_payment,.badge.test{background:var(--warn-bg);color:var(--warn);border-color:transparent}.badge.confirmed,.badge.ok,.badge.active,.badge.accepted{background:var(--ok-bg);color:var(--ok);border-color:transparent}.badge.declined,.badge.cancelled,.badge.revoked,.badge.error,.badge.expired,.badge.suspended{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin:0 0 16px;border:1px solid;font-weight:500}.alert.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)}.alert.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}.alert.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn)}
.alert ul{margin:6px 0 0;padding-left:18px;font-weight:400}.alert a{color:inherit}

/* Forms. Every control is one height; a form's buttons sit in .actions, 16px clear of the field above. */
label{display:block;font-weight:600;font-size:14.5px;margin:14px 0 6px}
.hint{color:var(--muted);font-size:14px;margin:2px 0 6px;font-weight:400;max-width:640px}
:is(input,select,textarea)+.hint{margin-top:6px}.hint+.alert{margin-top:12px}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=time],input[type=date],input[type=password],input[type=search],select,textarea{display:block;width:100%;max-width:520px;height:var(--control-h);margin:0;padding:0 12px;border:1px solid var(--field);border-radius:var(--radius-sm);background-color:var(--panel);color:var(--ink);font:inherit;line-height:1.4;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}
input:hover,select:hover,textarea:hover{border-color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
input[type=number]{max-width:200px;-moz-appearance:textfield}
/* Safari draws its stepper all the time (Chrome only on hover); the arrow keys still step the number. */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Dates and times: Safari lays these out as a flex row, so the row has to be kept for the value to sit mid-box;
   equal-width digits stop it leaving a gap after a narrow hour ("17 :00"). */
input[type=date],input[type=time]{display:flex;align-items:center;min-width:7.5em;font-variant-numeric:tabular-nums}input::-webkit-date-and-time-value{text-align:left}
input::-webkit-datetime-edit,input::-webkit-datetime-edit-fields-wrapper{padding:0}
input:required:invalid::-webkit-datetime-edit-text{color:var(--muted);opacity:.6}
select{padding-right:36px;background-image:var(--chev);background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px;text-overflow:ellipsis;cursor:pointer}
textarea{height:auto;min-height:96px;max-height:340px;padding:10px 12px;line-height:1.5;resize:vertical;field-sizing:content}
textarea.prose{min-height:120px}textarea.prose.short,textarea.short{min-height:72px}
textarea.code{font:13.5px/1.5 ui-monospace,Menlo,monospace;min-height:48px}
input[type=color]{width:64px;height:var(--control-h);padding:3px;border:1px solid var(--field);border-radius:var(--radius-sm);background:var(--panel)}
/* Accent colour: a few swatches and the browser's own picker, never a typed code. */
.tones{display:flex;flex-wrap:wrap;gap:8px}
label.tone{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-weight:500;font-size:14.5px;cursor:pointer}
label.tone:hover{border-color:var(--field)}
label.tone:has(input[type=radio]:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
label.tone:has(input[type=radio]:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.tone-dot,label.tone input[type=color]{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) var(--dot-ring,25%),transparent)}
label.tone input[type=color]{-webkit-appearance:none;appearance:none;padding:0;background:none;overflow:hidden;cursor:pointer}
label.tone input[type=color]::-webkit-color-swatch-wrapper{padding:0}label.tone input[type=color]::-webkit-color-swatch{border:0}label.tone input[type=color]::-moz-color-swatch{border:0}
/* Until a custom colour is chosen its dot is a colour wheel, so it reads as "pick any". */
label.tone:not(:has(input[type=radio]:checked)) input[type=color]::-webkit-color-swatch{background-image:conic-gradient(#e5484d,#f5d90a,#46a758,#05a2c2,#3e63dd,#d6409f,#e5484d)}
label.tone:not(:has(input[type=radio]:checked)) input[type=color]::-moz-color-swatch{background-image:conic-gradient(#e5484d,#f5d90a,#46a758,#05a2c2,#3e63dd,#d6409f,#e5484d)}
.tone-dot.t-ink{background:#1f1d1a}.tone-dot.t-slate{background:#475569}.tone-dot.t-navy{background:#1e3a5f}.tone-dot.t-blue{background:#1d4ed8}.tone-dot.t-teal{background:#0f766e}.tone-dot.t-green{background:#166534}.tone-dot.t-burgundy{background:#8a1c2b}.tone-dot.t-terracotta{background:#b4451f}
@supports not selector(:has(a)){label.tone input[type=radio]:checked+*{outline:2px solid var(--ink);outline-offset:2px}label.tone:focus-within{outline:3px solid var(--focus);outline-offset:2px}}
@media (forced-colors:active){.tone-dot,label.tone input[type=color]{forced-color-adjust:none}label.tone:has(input[type=radio]:checked){border-color:Highlight;border-width:3px;padding:4px 12px 4px 4px}}
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;position:relative;display:inline-block;width:18px;height:18px;margin:0;vertical-align:-4px;border:1.5px solid var(--field);border-radius:5px;background:var(--panel);cursor:pointer}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--brand)}
input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}
input[type=checkbox]:checked::before{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid var(--brand-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=radio]:checked{border:5.5px solid var(--brand);background:var(--brand-ink)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
input[readonly]{background-color:var(--bg);border-color:var(--line);color:var(--muted)}
label.hint input{margin-right:6px}
label.tone input[type=radio]{position:absolute;opacity:0;pointer-events:none}
progress{-webkit-appearance:none;appearance:none;height:8px;border:0;border-radius:999px;background:var(--line);overflow:hidden}
progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--brand);border-radius:999px}progress::-moz-progress-bar{background:var(--brand);border-radius:999px}
fieldset{border:0;padding:0;margin:0;min-width:0}fieldset:has(>legend:not(.visually-hidden)){margin-top:16px}
legend{font-weight:600;font-size:14.5px;padding:0;margin:0 0 6px}legend h2{margin:0 0 6px}legend+label.check{margin-top:4px}
label.check{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:16px;margin:8px 0}label.check>input{margin-top:3px}
label.check.small{font-size:14px;color:var(--muted);margin:8px 0 0}label.check.small>input{margin-top:2px}
label.check .hint{margin:0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>label{margin:0}
.row>:is(input:not([type=checkbox],[type=radio],[type=hidden],[type=color]),select){width:auto;flex:1 1 200px;min-width:0}
.row>input[type=date],.row>input[type=time],.row>input[type=number]{flex:0 0 auto}
.loc-row .own-link,.loc-row .for-zoom{display:none}.loc-row:has(option[value=link]:checked) .own-link{display:block}.loc-row:has(option[value=zoom]:checked) .for-zoom{display:block;flex-basis:100%;margin:0}
form.row>:is(input,select){max-width:360px}
:where(table,fieldset,.row,textarea,input,select,p,dl,.q-grid)+.row{margin-top:12px}.row+p:not(.actions){margin-top:12px}
.row.flags{gap:10px 28px;margin:12px 0 6px}
.fields{display:flex;flex-wrap:wrap;gap:0 12px;align-items:flex-end;max-width:520px}.fields>*{flex:1 1 120px;min-width:0}.fields input{max-width:none}.fields+label.check{margin-top:16px}
.grow{flex:1 1 220px;margin:0}
button,.button{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-h);margin:0;padding:8px 18px;border-radius:var(--radius-sm);border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);font:inherit;font-weight:600;font-size:14.5px;line-height:1.3;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
button:hover,.button:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--brand-ink)}
button.secondary,.button.secondary{background:var(--panel);color:var(--ink);border-color:var(--field)}button.secondary:hover,.button.secondary:hover{background:var(--brand-soft);border-color:var(--ink);color:var(--ink)}
button.danger,.button.danger{background:var(--danger);border-color:var(--danger);color:#fff}button.danger:hover,.button.danger:hover{background:color-mix(in srgb,var(--danger) 85%,#000);border-color:color-mix(in srgb,var(--danger) 85%,#000);color:#fff}
button.link{min-height:0;background:none;border:0;border-radius:4px;color:var(--brand);padding:6px 0;font-size:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px}button.link:hover{background:none;color:var(--brand-strong)}
button.danger-link,button.link.danger-link{color:var(--bad)}button.danger-link:hover{color:var(--bad)}
td button.link{margin:-6px 0}td>a,.row>a:not(.button){font-weight:500}
form.inline{display:inline}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 0}.actions:first-child{margin-top:0}
form p:has(>button){margin:16px 0 0}
.actions+:is(p,.hint){margin-top:12px}.actions+details{margin-top:16px}
.sticky-save{position:sticky;bottom:12px;z-index:10;margin-top:16px;padding:12px 20px;background:var(--raised);border:1px solid var(--raised-line);border-radius:var(--radius);box-shadow:var(--bar-shadow)}
html:has(.sticky-save){scroll-padding-bottom:104px}

dl.kv{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr);gap:8px 18px;margin:0}dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
dl.kv.qa{grid-template-columns:minmax(0,1fr);gap:2px 0}dl.kv.qa dt{font-size:14px}dl.kv.qa dd+dt{margin-top:10px}
dl.kv+:is(p,.hint){margin-top:14px}
.setting{border-top:1px solid var(--line);padding:16px 0}.setting:first-of-type{border-top:0;padding-top:4px}.setting:last-of-type,.panel>.setting:last-child{padding-bottom:0}
.setting-text>label{margin-top:0}.setting-text>.hint{max-width:62ch}
.setting-control label.check{margin:0 0 10px}.source button.link{padding:0;margin-left:4px;font-size:inherit}.setting-control label.sub{margin:10px 0 5px;font-weight:500;color:var(--muted)}
.source{font-size:13px;color:var(--muted);margin:6px 0 0}.source:empty{display:none}
.muted{color:var(--muted)}.warn-text{color:var(--warn)}.small{font-size:14px}
.empty{color:var(--muted);padding:36px 24px;margin:0 0 16px;text-align:center;background:var(--panel);border:1px dashed var(--field);border-radius:var(--radius)}
.panel .empty{border:0;padding:20px 0;background:none}
pre.code{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin:6px 0 14px;overflow-x:auto;font:13px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
code{font:.92em ui-monospace,Menlo,monospace;background:var(--bg);border-radius:5px;padding:1px 5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
details>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-weight:600;color:var(--ink);margin:8px 0}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";flex:none;width:12px;height:12px;background:var(--chev) center/12px 12px no-repeat;transform:rotate(-90deg)}details[open]>summary::before{transform:none}
details>summary:hover{color:var(--brand-strong)}
details[open]>summary{margin-bottom:12px}

/* Sign-in: the form on white, a quiet paper panel beside it. */
body.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--panel)}
.auth-side{background:var(--mid);color:var(--mid-ink);padding:44px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;border-right:1px solid var(--line)}
.auth-side .brand{color:var(--mid-ink);font-size:21px}.auth-side .brand:hover{color:var(--mid-ink)}.auth-side .brand .by{color:var(--mid-muted)}
.auth-side h2{font-size:clamp(26px,2.6vw,36px);font-weight:700;line-height:1.12;color:var(--mid-ink);margin:0 0 12px;max-width:16ch}
.auth-side p{color:var(--mid-muted);max-width:42ch;margin:0}
.slot-card{align-self:flex-start;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:18px;width:min(100%,330px);box-shadow:var(--shadow)}
.slot-card .when{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:600;font-size:14.5px}
.slot-card .dot{width:34px;height:34px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;font-family:var(--font-display);font-weight:700}
.slot-card .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.slot-card .slots span{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 0;text-align:center;font-size:13px;font-weight:600;color:var(--muted)}
.slot-card .slots .sel{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.slot-card .tz{margin:12px 0 0;font-size:12.5px;color:var(--muted)}.slot-card .tz b{color:var(--ok)}
body.auth .auth-main{max-width:none;margin:0;display:flex;flex-direction:column;justify-content:center;padding:44px clamp(20px,6vw,80px);background:var(--panel)}
.login{width:100%;max-width:400px;margin:0 auto}.login.panel{border:0;padding:0;background:none}
.eyebrow{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.login h1{font-size:30px;margin-bottom:6px}.login .lead{color:var(--muted);margin-bottom:22px}
.login label{margin-top:0}.login input[type=email]{max-width:none}.login button,.login .button{width:100%}.login form p{margin:16px 0 0}
.login .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:22px 0 14px}.login .or::before,.login .or::after{content:"";flex:1;height:1px;background:var(--line)}
.login .providers{display:grid;gap:10px}.login .providers p{margin:0}.login details{margin-top:18px}
.not-you{margin-top:30px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);font-size:14.5px}
.not-you h2{font-size:16px;margin:0 0 6px}.not-you p{margin:0 0 8px;color:var(--muted)}.not-you ul{margin:0 0 10px;padding-left:18px}.not-you li{margin:3px 0}.not-you p.small{margin:0;font-size:13.5px}
.login .alert{margin-bottom:18px}
.auth-main .mobile-brand{display:none;margin-bottom:28px}
/* A single message or button (sign-in link, invitation, connection result, approve/decline). */
body.simple{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,6vh,64px) 20px clamp(40px,18vh,200px)}
body.simple .brand{margin-bottom:22px}
.simple-card{width:100%;max-width:480px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.simple-card h1{font-size:24px;margin-bottom:12px}.simple-card>:last-child,.simple-card>form:last-child>:last-child{margin-bottom:0}
.simple-card textarea,.simple-card input{max-width:none}.simple-card form{margin-top:16px}.simple-card>form>button:only-child,.simple-card>form>input[type=hidden]:first-child+button:last-child{width:100%}
.simple-card dl.kv{margin:0 0 16px}

/* Pages of text to read: the privacy notice and the terms. */
body.doc{background:var(--panel)}
.doc-top{max-width:1160px;margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.doc-top nav{display:flex;gap:18px;font-size:14.5px}.doc-top nav a{color:var(--muted);font-weight:500;text-decoration:none}.doc-top nav a:hover{color:var(--ink)}
main.doc-main{max-width:760px;padding-top:28px;line-height:1.65}
.doc-main h1{font-size:clamp(28px,4.4vw,38px);margin-bottom:6px}.doc-main h1+p{margin-bottom:28px}
.doc-main h2{font-size:22px;margin:40px 0 12px;padding-top:8px}.doc-main h3{font-size:17px;margin:26px 0 8px}
.doc-main p,.doc-main li{max-width:none}.doc-main li{margin:5px 0}.doc-main ul,.doc-main ol{margin:0 0 14px}
.doc-main table{margin:6px 0 18px}.doc-main th,.doc-main td{font-size:15px;line-height:1.5}.doc-main th{white-space:normal}
.doc-main .lead{font-size:17.5px;color:var(--ink)}.doc-main mark{background:var(--warn-bg);color:var(--warn);padding:1px 4px;border-radius:4px}
.doc-main .callout{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;margin:0 0 18px}.doc-main .callout>:last-child{margin-bottom:0}
.doc-main nav.toc{margin:0 0 8px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius-sm)}.doc-main nav.toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}.doc-main nav.toc li{break-inside:avoid}

/* The public home page: one calm column on paper, under the same header as the pages of text. */
body.home .doc-top,main.home-main,body.home>.foot{max-width:760px}
main.home-main{padding-top:36px;padding-bottom:40px}
.home-main h1{font-size:clamp(30px,5.2vw,40px);line-height:1.12;margin-bottom:14px}
.home-main .lead{font-size:17.5px;line-height:1.6;margin:0}
.home-main>.actions{margin:24px 0 36px}
.home-main .panel>:is(p,ul){max-width:none}.home-main .panel li{margin:6px 0}.home-main .panel li:last-child{margin-bottom:0}
.home-main>p:last-child{margin:28px 0 0}
body.home>.foot{margin:0 auto;padding:0 var(--gutter) 32px}body.home>.foot span{margin-left:auto}

/* The privacy notice and terms at the foot of every page: small and out of the way. In the dashboard
   they follow the page, at the bottom of the window when the page is short; the space they take comes
   out of the page's own, so nothing moves and a sticky Save bar (which stays inside the page) never meets them. */
.foot{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;line-height:1.5;color:var(--muted)}
.foot a{color:var(--muted);text-decoration:none}.foot a:hover{color:var(--ink);text-decoration:underline}
body:has(>.page-foot){min-height:100vh;display:flex;flex-direction:column}
main:has(+.page-foot){flex:1 0 auto;width:100%;padding-bottom:28px}
.page-foot{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--gutter) 24px}
body.auth .auth-main::before{content:"";flex:1 1 0}
.auth-main>.foot{flex:1 1 0;align-items:flex-end;align-content:flex-end;width:100%;max-width:400px;margin:0 auto;padding-top:28px}
body.simple>.foot{margin-top:22px;justify-content:center}
:is(.login,.simple-card) :is(form,.providers)+.hint{margin-top:16px}

/* What a calendar connection lets Booked see, do and keep: before the button that opens the provider's consent screen. */
.consent{max-width:640px;margin:14px 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);font-size:14.5px}
.consent p{margin:0}.consent dl+p{margin-top:12px}

/* Connections: a short card for each service, with its name, state and one line on the left and its buttons on the right. */
.conns{max-width:840px}.conns>h2{margin-bottom:4px}.conns>h2+.hint{margin-bottom:14px}.conns>.consent{max-width:none;margin:0 0 10px}.conns>.conn+.hint{margin-top:12px}
.conns .hint{max-width:none}
.conn{margin-bottom:10px}.conn h3{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 2px}.conn h3 .badge{margin-left:0}
.conn-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.conn-head>div:first-child{flex:1 1 300px;min-width:0}.conn-head .hint,.conn-head .actions{margin:0}.conn-head .small{margin:6px 0 0}.conn-head button.link{font-size:14.5px}
.conn-head+*{margin-top:12px}
ul.includes{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0;padding:0;font-size:14px;color:var(--muted)}ul.includes li::before{content:"–";display:inline-block;width:1.1em;font-weight:700}ul.includes li.on{color:var(--ink)}ul.includes li.on::before{content:"✓";color:var(--ok)}

/* Setup wizard and checklist */
.checklist progress{width:100%;margin:6px 0 2px}.checklist h2{margin:0}.checklist .row{align-items:baseline}
ul.checks{list-style:none;padding:0;margin:10px 0;columns:300px 2;column-gap:40px}ul.checks li{padding:4px 0;display:flex;gap:9px;align-items:baseline;break-inside:avoid}
ul.checks .tick{display:grid;place-items:center;align-self:flex-start;width:18px;height:18px;margin-top:3px;border:1.5px solid var(--field);border-radius:50%;font-size:11px;line-height:1;flex:none}
ul.checks li.done .tick{background:var(--ok);border-color:var(--ok);color:var(--panel)}ul.checks li.done{color:var(--muted)}
ol.steps{list-style:none;padding:0;margin:0 0 16px;display:flex;gap:6px;flex-wrap:wrap}
ol.steps a{display:flex;gap:8px;align-items:center;padding:6px 14px 6px 7px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);text-decoration:none;font-weight:500;font-size:14.5px;white-space:nowrap}
ol.steps .num{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--bg);font-size:13px;line-height:1;font-weight:700;color:var(--ink)}
ol.steps li.done .num{background:var(--ok);color:var(--panel)}ol.steps a[aria-current=step]{border-color:var(--brand);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--brand)}
.wizard{max-width:840px}.wizard :is(input[type=text],input[type=url],input[type=email],input[type=tel],select,textarea){max-width:640px}
label.choice{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);margin:8px 0;max-width:640px;cursor:pointer;background:var(--panel)}
label.choice:hover{border-color:var(--field)}
label.choice:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-soft)}label.choice input{margin-top:3px}label.choice.disabled{opacity:.75;cursor:not-allowed}
label.choice .hint{display:block;margin:2px 0 0;line-height:1.5}
.choice-extra{margin:0 0 14px;padding-left:45px;max-width:640px}.choice-extra label{margin-top:4px}.choice-extra input{max-width:none}
.wizard-nav{margin-top:20px}.wizard-nav.sticky-save{margin-top:16px}.wizard-nav>a:not(.button){font-size:14.5px;font-weight:600;line-height:1.3;padding:10px 4px}
td progress{width:140px;vertical-align:middle}table.usage td:first-child{white-space:nowrap}

/* Editors: question, place and rule cards */
ol.rows{list-style:none;padding:0;margin:0 0 12px;max-width:760px}ol.rows>li{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin:8px 0;background:var(--panel)}
ol.rows>li>:first-child,ol.rows>li>fieldset:first-child>:nth-child(1 of :not(legend)){margin-top:0}ol.rows>li>:last-child{margin-bottom:0}
ol.rows :is(input,select,textarea){max-width:100%}
ol.rows>li>.row>:is(input,select){width:auto;flex:1 1 200px}
.q-grid{display:grid;gap:10px 12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.q-grid label{margin-top:0}.loc-row .row{margin-top:6px}
.drag-handle{position:absolute;top:10px;right:10px;cursor:grab;font-size:20px;line-height:1;color:var(--muted);padding:0 4px;user-select:none;-webkit-user-select:none}li.dragging{opacity:.5}
.week .ev[draggable=true]{cursor:grab}
fieldset.dest{display:grid;grid-template-columns:max-content minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;max-width:760px;margin:0}li>fieldset.dest{margin-bottom:8px}
fieldset.dest legend{margin:0 0 5px;padding:12px 0 0}fieldset.dest .row{display:contents}fieldset.dest label.check{margin:0}
fieldset.dest :is(select,input[type=url],input[type=text]){min-width:0;max-width:none}fieldset.dest :is(input[type=url],input[type=text]){grid-column:2/-1}
.limit-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px) minmax(0,130px);gap:8px 12px;align-items:center;max-width:760px;padding:8px 0;border-top:1px solid var(--line)}.limit-row>label{margin:0}.limit-row>input,.limit-row>select{max-width:none}.limit-row>:nth-child(2):last-child{grid-column:2/-1}
.limit-row+fieldset{margin-top:8px}
.editor-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));align-items:start}
iframe.email-preview{display:block;width:100%;height:560px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;margin:10px 0}
.chips{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}.chips code{white-space:nowrap}

/* Week calendar */
.week-nav{margin:0 0 16px}.week-hint{margin:0 0 12px}
.key{display:inline-block;padding:1px 8px;border-radius:5px;margin-left:6px;font-size:12.5px;white-space:nowrap}.keys{display:inline-flex;flex-wrap:wrap;gap:6px}.keys>.key{margin-left:0}
.key.confirmed,.ev.confirmed,.ev.completed{background:var(--ok-bg);border-left:3px solid var(--ok);color:var(--ink)}
.key.pending,.ev.pending{border-left:3px solid transparent;background:repeating-linear-gradient(180deg,var(--warn) 0 4px,transparent 4px 7px) 0 0/3px 100% no-repeat border-box,var(--warn-bg);color:var(--ink)}
.week{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.week-head,.week-body{display:grid;grid-template-columns:3.5em repeat(7,minmax(0,1fr))}
.week-head span{padding:9px 4px;font-size:13px;font-weight:600;border-bottom:1px solid var(--line);text-align:center;color:var(--muted)}.week-head .today{color:var(--ink)}
.week .times,.week .day{display:grid;grid-auto-rows:16px}.week .times span{font-size:11px;color:var(--muted);text-align:right;padding-right:6px}
.week .day{border-left:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 64px;column-gap:2px;padding:0 2px}
.week .day.today{background-color:var(--brand-soft)}
.ev{display:block;overflow:hidden;font-size:12.5px;line-height:1.3;padding:2px 5px;border-radius:5px;text-decoration:none;margin:1px 0}
.ev .what{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filler{visibility:hidden}
.week .ev{white-space:nowrap;text-overflow:ellipsis}.week .ev .name{display:inline}.week .ev.s-1 .what,.week .ev.s-2 .what{display:none}.week .ev.s-1{padding-top:0;padding-bottom:0;line-height:14px}
.ev .name,.ev .who{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;color:inherit;font-size:inherit}
.week-list{display:none;margin-bottom:24px}.week-list ul{list-style:none;padding:0;margin:0}.week-list li{margin:6px 0}.week-list .ev{font-size:15px;padding:9px 12px}.week-list h2.today{color:var(--ink)}
.week .r-1{grid-row-start:1}.week .s-1{grid-row-end:span 1}.week .r-2{grid-row-start:2}.week .s-2{grid-row-end:span 2}.week .r-3{grid-row-start:3}.week .s-3{grid-row-end:span 3}.week .r-4{grid-row-start:4}.week .s-4{grid-row-end:span 4}.week .r-5{grid-row-start:5}.week .s-5{grid-row-end:span 5}.week .r-6{grid-row-start:6}.week .s-6{grid-row-end:span 6}.week .r-7{grid-row-start:7}.week .s-7{grid-row-end:span 7}.week .r-8{grid-row-start:8}.week .s-8{grid-row-end:span 8}.week .r-9{grid-row-start:9}.week .s-9{grid-row-end:span 9}.week .r-10{grid-row-start:10}.week .s-10{grid-row-end:span 10}.week .r-11{grid-row-start:11}.week .s-11{grid-row-end:span 11}.week .r-12{grid-row-start:12}.week .s-12{grid-row-end:span 12}.week .r-13{grid-row-start:13}.week .s-13{grid-row-end:span 13}.week .r-14{grid-row-start:14}.week .s-14{grid-row-end:span 14}.week .r-15{grid-row-start:15}.week .s-15{grid-row-end:span 15}.week .r-16{grid-row-start:16}.week .s-16{grid-row-end:span 16}.week .r-17{grid-row-start:17}.week .s-17{grid-row-end:span 17}.week .r-18{grid-row-start:18}.week .s-18{grid-row-end:span 18}.week .r-19{grid-row-start:19}.week .s-19{grid-row-end:span 19}.week .r-20{grid-row-start:20}.week .s-20{grid-row-end:span 20}.week .r-21{grid-row-start:21}.week .s-21{grid-row-end:span 21}.week .r-22{grid-row-start:22}.week .s-22{grid-row-end:span 22}.week .r-23{grid-row-start:23}.week .s-23{grid-row-end:span 23}.week .r-24{grid-row-start:24}.week .s-24{grid-row-end:span 24}.week .r-25{grid-row-start:25}.week .s-25{grid-row-end:span 25}.week .r-26{grid-row-start:26}.week .s-26{grid-row-end:span 26}.week .r-27{grid-row-start:27}.week .s-27{grid-row-end:span 27}.week .r-28{grid-row-start:28}.week .s-28{grid-row-end:span 28}.week .r-29{grid-row-start:29}.week .s-29{grid-row-end:span 29}.week .r-30{grid-row-start:30}.week .s-30{grid-row-end:span 30}.week .r-31{grid-row-start:31}.week .s-31{grid-row-end:span 31}.week .r-32{grid-row-start:32}.week .s-32{grid-row-end:span 32}.week .r-33{grid-row-start:33}.week .s-33{grid-row-end:span 33}.week .r-34{grid-row-start:34}.week .s-34{grid-row-end:span 34}.week .r-35{grid-row-start:35}.week .s-35{grid-row-end:span 35}.week .r-36{grid-row-start:36}.week .s-36{grid-row-end:span 36}.week .r-37{grid-row-start:37}.week .s-37{grid-row-end:span 37}.week .r-38{grid-row-start:38}.week .s-38{grid-row-end:span 38}.week .r-39{grid-row-start:39}.week .s-39{grid-row-end:span 39}.week .r-40{grid-row-start:40}.week .s-40{grid-row-end:span 40}.week .r-41{grid-row-start:41}.week .s-41{grid-row-end:span 41}.week .r-42{grid-row-start:42}.week .s-42{grid-row-end:span 42}.week .r-43{grid-row-start:43}.week .s-43{grid-row-end:span 43}.week .r-44{grid-row-start:44}.week .s-44{grid-row-end:span 44}.week .r-45{grid-row-start:45}.week .s-45{grid-row-end:span 45}.week .r-46{grid-row-start:46}.week .s-46{grid-row-end:span 46}.week .r-47{grid-row-start:47}.week .s-47{grid-row-end:span 47}.week .r-48{grid-row-start:48}.week .s-48{grid-row-end:span 48}.week .r-49{grid-row-start:49}.week .s-49{grid-row-end:span 49}.week .r-50{grid-row-start:50}.week .s-50{grid-row-end:span 50}.week .r-51{grid-row-start:51}.week .s-51{grid-row-end:span 51}.week .r-52{grid-row-start:52}.week .s-52{grid-row-end:span 52}.week .r-53{grid-row-start:53}.week .s-53{grid-row-end:span 53}.week .r-54{grid-row-start:54}.week .s-54{grid-row-end:span 54}.week .r-55{grid-row-start:55}.week .s-55{grid-row-end:span 55}.week .r-56{grid-row-start:56}.week .s-56{grid-row-end:span 56}.week .r-57{grid-row-start:57}.week .s-57{grid-row-end:span 57}.week .r-58{grid-row-start:58}.week .s-58{grid-row-end:span 58}.week .r-59{grid-row-start:59}.week .s-59{grid-row-end:span 59}.week .r-60{grid-row-start:60}.week .s-60{grid-row-end:span 60}.week .r-61{grid-row-start:61}.week .s-61{grid-row-end:span 61}.week .r-62{grid-row-start:62}.week .s-62{grid-row-end:span 62}.week .r-63{grid-row-start:63}.week .s-63{grid-row-end:span 63}.week .r-64{grid-row-start:64}.week .s-64{grid-row-end:span 64}.week .r-65{grid-row-start:65}.week .s-65{grid-row-end:span 65}.week .r-66{grid-row-start:66}.week .s-66{grid-row-end:span 66}.week .r-67{grid-row-start:67}.week .s-67{grid-row-end:span 67}.week .r-68{grid-row-start:68}.week .s-68{grid-row-end:span 68}.week .r-69{grid-row-start:69}.week .s-69{grid-row-end:span 69}.week .r-70{grid-row-start:70}.week .s-70{grid-row-end:span 70}.week .r-71{grid-row-start:71}.week .s-71{grid-row-end:span 71}.week .r-72{grid-row-start:72}.week .s-72{grid-row-end:span 72}.week .r-73{grid-row-start:73}.week .s-73{grid-row-end:span 73}.week .r-74{grid-row-start:74}.week .s-74{grid-row-end:span 74}.week .r-75{grid-row-start:75}.week .s-75{grid-row-end:span 75}.week .r-76{grid-row-start:76}.week .s-76{grid-row-end:span 76}.week .r-77{grid-row-start:77}.week .s-77{grid-row-end:span 77}.week .r-78{grid-row-start:78}.week .s-78{grid-row-end:span 78}.week .r-79{grid-row-start:79}.week .s-79{grid-row-end:span 79}.week .r-80{grid-row-start:80}.week .s-80{grid-row-end:span 80}.week .r-81{grid-row-start:81}.week .s-81{grid-row-end:span 81}.week .r-82{grid-row-start:82}.week .s-82{grid-row-end:span 82}.week .r-83{grid-row-start:83}.week .s-83{grid-row-end:span 83}.week .r-84{grid-row-start:84}.week .s-84{grid-row-end:span 84}.week .r-85{grid-row-start:85}.week .s-85{grid-row-end:span 85}.week .r-86{grid-row-start:86}.week .s-86{grid-row-end:span 86}.week .r-87{grid-row-start:87}.week .s-87{grid-row-end:span 87}.week .r-88{grid-row-start:88}.week .s-88{grid-row-end:span 88}.week .r-89{grid-row-start:89}.week .s-89{grid-row-end:span 89}.week .r-90{grid-row-start:90}.week .s-90{grid-row-end:span 90}.week .r-91{grid-row-start:91}.week .s-91{grid-row-end:span 91}.week .r-92{grid-row-start:92}.week .s-92{grid-row-end:span 92}.week .r-93{grid-row-start:93}.week .s-93{grid-row-end:span 93}.week .r-94{grid-row-start:94}.week .s-94{grid-row-end:span 94}.week .r-95{grid-row-start:95}.week .s-95{grid-row-end:span 95}.week .r-96{grid-row-start:96}.week .s-96{grid-row-end:span 96}.week .lane-1{grid-column:1}.week .lanes-1{grid-template-columns:repeat(1,minmax(0,1fr))}.week .lane-2{grid-column:2}.week .lanes-2{grid-template-columns:repeat(2,minmax(0,1fr))}.week .lane-3{grid-column:3}.week .lanes-3{grid-template-columns:repeat(3,minmax(0,1fr))}.week .lane-4{grid-column:4}.week .lanes-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.week .lane-all{grid-column:1/-1}

/* Insights */
.cards{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 16px}.card{flex:1 1 170px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.card .label{margin:0;color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.card .big{margin:6px 0 0;font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink);white-space:nowrap}.card .hint{margin:2px 0 0}
.filters{margin:0 0 16px}.filters select{width:auto}.row.filters>select{flex:0 1 auto;max-width:100%}
svg.chart{width:100%;height:clamp(140px,22vw,220px);display:block;border-bottom:1px solid var(--line)}svg.chart .bar{fill:var(--brand)}svg.chart .bar.cancelled{fill:var(--accent)}svg.chart .axis{fill:var(--muted);font-size:11px}svg.chart .base{stroke:var(--line)}
.chart-axis{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);list-style:none;padding:0;margin:6px 0 10px;font-size:12.5px;line-height:1.3;color:var(--muted);white-space:nowrap}.chart-axis .end{display:flex;justify-content:flex-end}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--brand);margin:0 5px 0 12px}.swatch:first-child{margin-left:0}.swatch.cancelled{background:var(--accent)}
table.heatmap{table-layout:fixed}table.heatmap th,table.heatmap td{padding:5px 4px;text-align:center;font-size:12px;text-transform:none;letter-spacing:0}
table.heatmap thead th:first-child,table.heatmap th[scope=row]{width:44px;padding-left:0;text-align:left}
td.heat.h1{background:color-mix(in srgb,var(--brand) 14%,transparent)}td.heat.h2{background:color-mix(in srgb,var(--brand) 34%,transparent)}td.heat.h3{background:color-mix(in srgb,var(--brand) 62%,transparent);color:var(--brand-ink)}td.heat.h4{background:var(--brand);color:var(--brand-ink)}
ol.funnel{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 12px}ol.funnel li{flex:1 1 140px;background:var(--bg);border-radius:var(--radius-sm);padding:12px 14px}ol.funnel li strong{display:block;font-family:var(--font-display);font-size:24px;color:var(--ink)}

/* Narrower screens. These come last so they win over the rules above. */
@media (max-width:1000px){.card{flex-basis:30%}}
@media (min-width:641px){.brand{flex:none}.wrap-any{overflow-wrap:anywhere}table.emails{table-layout:fixed}table.emails th:first-child{width:42%}table.emails th:last-child{width:130px}
  table.bookings{table-layout:fixed}table.bookings th:nth-child(1){width:24%}table.bookings th:nth-child(2){width:30%}table.bookings th:nth-child(3){width:24%}}
@media (max-width:960px){ol.steps{flex-wrap:nowrap;align-items:center}ol.steps li{flex:none}ol.steps li:has(a[aria-current=step]){flex:0 1 auto;min-width:0}
  ol.steps a{padding:6px 7px}ol.steps a[aria-current=step]{padding-right:14px}
  ol.steps .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  ol.steps a:not([aria-current=step]) .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (max-width:900px){.who{display:none}.week{display:none}.week-list{display:block}.week-hint{display:none}}
@media (min-width:900px){.setting:has(>.setting-control){display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,440px);column-gap:32px;align-items:start}.setting-control :is(input,select,textarea){max-width:none}.setting-control input[type=number]{max-width:200px}}
@media (max-width:860px){body.auth{grid-template-columns:1fr}.auth-side{display:none}body.auth .auth-main{justify-content:flex-start;padding-top:36px}body.auth .auth-main::before{display:none}.auth-main .mobile-brand{display:flex;max-width:400px;width:100%;margin:0 auto 28px}}
@media (max-width:720px){dl.kv{grid-template-columns:minmax(0,1fr);gap:2px 0}dl.kv dt{font-size:14px}dl.kv dd+dt{margin-top:10px}
  fieldset.dest{grid-template-columns:minmax(0,1fr)}fieldset.dest :is(input[type=url],input[type=text]){grid-column:auto}
  .limit-row{grid-template-columns:minmax(0,1fr)}.limit-row>:nth-child(2):last-child{grid-column:auto}}
@media (max-width:640px){:root{--control-h:44px;--gutter:16px}
  h1{font-size:24px;margin-bottom:16px}h2{margin-top:24px}h2.group{font-size:21px}.org-name{display:none}
  main{padding-top:20px;padding-bottom:56px}.panel{padding:16px}
  nav.main a{padding:11px 12px}.navrow{padding-top:2px;padding-bottom:4px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gutter)) 16px;padding:0 var(--gutter)}.tabs::-webkit-scrollbar{display:none}.tabs{gap:4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}.tabs a{flex:none;padding:10px}
  .back a,header.top a.small,header.top button.link,button.link{display:inline-flex;align-items:center;min-height:44px}.back{margin-bottom:2px}td button.link{margin:0}table.list td button.link{margin:-11px 0}table.list td select{max-width:none}
  .week-nav{flex-wrap:nowrap}.week-nav .button{flex:1 1 auto;padding-left:8px;padding-right:8px}
  th,td{padding:9px 10px}th.hide-sm,td.hide-sm{display:none}
  td.actions-cell{text-align:left;white-space:normal}table.daysoff td.actions-cell{text-align:right}td.actions-cell .row{justify-content:flex-start;flex-wrap:wrap}
  table.list{display:block;border:0;background:none;overflow:visible;margin-bottom:6px}table.list thead{display:none}table.list tbody{display:block}
  table.list tr{display:block;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;padding:10px 0}
  table.list td{display:block;border:0;padding:3px 16px;overflow-wrap:anywhere}table.list td.hide-sm{display:none}
  table.list td[data-label]{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:0 16px}table.list td[data-label]::before{content:attr(data-label);margin-right:auto;color:var(--muted);font-size:14px}
  table.list td:first-child>a{font-weight:600}table.list td:first-child>a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
  table.list td:not(:first-child) :is(a,button,select,input){position:relative;z-index:1}
  .panel table.list tr{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;margin:0}.panel table.list tr:last-child{border-bottom:0}.panel table.list td{padding:3px 0}
  table.hours{display:block}table.hours thead{display:none}table.hours tbody{display:block}
  table.hours tr{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}table.hours tr:last-child{border-bottom:0}
  table.hours td{display:block;padding:0;border:0}table.hours td:first-child{grid-column:2/4;font-weight:600}table.hours td:nth-child(2){grid-area:1/1}table.hours td:nth-child(3){grid-column:2}
  table.hours input[type=time]{width:100%;min-width:0}
  table.timeline td:first-child,table.timeline td:nth-child(2){width:auto;white-space:normal;padding-right:10px}
  table.heatmap th,table.heatmap td{padding:5px 0;font-size:11px}table.heatmap thead th:first-child,table.heatmap th[scope=row]{width:38px}
  .scroll-x th,.scroll-x td{padding:9px 8px}.scroll-x th{letter-spacing:0;white-space:normal}
  form.row>label{flex-basis:100%}.row.filters>select{flex:1 1 200px;max-width:none}
  .wizard-nav>.spacer~button:not(.link),.wizard-nav>.spacer~.button{order:-1;flex:1 0 100%}
  .choice-extra{padding-left:0}
  .card{flex-basis:40%;padding:14px 16px}.card .big{font-size:28px}
  ol.funnel{flex-direction:column;gap:8px}ol.funnel li{flex:none;display:flex;align-items:baseline;gap:10px;padding:10px 14px}ol.funnel li strong{min-width:2em}
  .chart-axis .wide{visibility:hidden}
  table.dns td[data-label]{display:block}table.dns td[data-label]::before{display:block;margin-bottom:2px}
  iframe.email-preview{height:700px}
  header.top .bar{gap:12px}header.top .wordmark{display:flex;flex-direction:column;min-width:0;line-height:1.15}header.top .brand .by,header.top .brand .org-sm{font-size:12.5px;overflow:hidden;text-overflow:ellipsis}header.top .has-org .by{display:none}header.top .brand .org-sm{display:block;font-weight:400;letter-spacing:0;color:var(--muted)}
  ol.steps{gap:4px}ol.steps a{padding:6px;border-radius:22px}ol.steps a[aria-current=step]{gap:6px;padding-right:10px;font-size:14px}ol.steps .lbl{white-space:normal;line-height:1.15}
  table.list.stats td:first-child{font-weight:600}table.list.stats td[data-label]{text-align:left}
  .row>.small:first-child{flex-basis:100%}ol.rows>li>.row:last-child,ol.rows>li>fieldset>.row:last-child{margin-bottom:-8px}.panel>table.list:last-child tr:last-child{padding-bottom:0}
  label.tone{min-height:44px}label.tone input[type=color],label.tone .tone-dot{width:28px;height:28px}header.top a.switch{display:none}
  .doc-main nav.toc ol{columns:1}.doc-main table{display:block;overflow-x:auto}
  main.home-main{padding-top:20px;padding-bottom:28px}.home-main>.actions{margin-bottom:28px}.home-main>.actions>*{flex:1 1 auto}
  .foot{gap:0 22px}.foot a,.foot span{display:inline-flex;align-items:center;min-height:44px}
  main:has(+.page-foot){padding-bottom:16px}.page-foot,body.home>.foot{padding-bottom:12px}body.simple>.foot{margin-top:10px}
  .sticky-save{bottom:8px;padding:12px 16px}}
@media (max-width:480px){.simple-card{padding:22px 20px}.simple-card .actions>*{flex:1 1 0}}