h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- Sautira shared look (brand tokens: Sautira design system) ---- */
:root {
    --bg: #F4FAF9; --card: #FFFFFF; --tint: #E3F2F0; --ink: #0F3D3E; --muted: #4B6463;
    --accent: #0E7C73; --accent-ink: #FFFFFF; --brand: #19B3A6; --amber: #F5A524;
    --line: #CFE3E0; --line-strong: #6E9A97; --warn: #b3261e; --ok: #1f7a3f; --caution: #8a5300;
    --font-display: Outfit, "Helvetica Neue", Arial, sans-serif; --font-sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
}
@media (prefers-color-scheme: dark) { :root {
    --bg: #164C4D; --card: #0F3D3E; --tint: #1A5556; --ink: #FFFFFF; --muted: #B9D3D0;
    --accent: #19B3A6; --accent-ink: #0F3D3E; --line: #2A6264; --line-strong: #7FA9A6; --warn: #ff8a80; --ok: #6fcf97; --caution: #f5c46b;
} }

/* The banner across every portal page when the account needs attention (AccountBanner). */
.account-banner { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; border-bottom: 1px solid; }
.account-banner.urgent { background: color-mix(in srgb, var(--warn) 14%, var(--card)); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--warn); }
.account-banner.caution { background: color-mix(in srgb, var(--amber) 18%, var(--card)); border-color: color-mix(in srgb, var(--amber) 60%, var(--line)); color: var(--caution); }
.account-banner-icon { font-size: 1.3rem; line-height: 1; }
.account-banner-text { flex: 1; min-width: 0; }
.account-banner-text p { margin: .1rem 0; }
.account-banner-text strong { color: inherit; }
.account-banner a.button { flex-shrink: 0; font-weight: 600; }
.account-banner a.button.danger { background: var(--warn); border-color: var(--warn); color: #fff; }
@media (max-width: 640px) { .account-banner { flex-wrap: wrap; padding: .7rem 1rem; } .account-banner-icon { display: none; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--ink); line-height: 1.5; }
.topbar { display: flex; gap: 1rem; align-items: center; padding: .75rem 1.25rem; background: var(--card); border-bottom: 1px solid var(--line); }
.spacer { flex: 1; }
.page { max-width: 980px; margin: 0 auto; padding: 1.25rem 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.25rem; }
.card.narrow { max-width: 420px; margin: 3rem auto; }
.muted { color: var(--muted); }
.alert { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); padding: .6rem .8rem; border-radius: 6px; }
label { display: block; margin: .6rem 0; }
label.inline { display: flex; gap: .5rem; align-items: center; }
input, select, textarea { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); width: 100%; }
input[type=checkbox] { width: auto; }
button { font: inherit; font-weight: 500; padding: .45rem .9rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.danger { background: var(--warn); border-color: var(--warn); color: #fff; }
button.link { border: none; background: none; color: var(--accent); padding: .3rem 0; }
button:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: .5rem; align-items: center; margin: .4rem 0; }
.row input, .row select { width: auto; flex: 1; }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: .45rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---- Portal layout ---- */
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
a { color: var(--accent); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.notice { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); padding: .6rem .8rem; border-radius: 6px; }
.tabs { display: flex; gap: .25rem; padding: 0 1rem; background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: .75rem 1rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.page { max-width: 1200px; }
.page-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin-bottom: 1rem; }
.page-head h1 { margin: 0; font-size: 1.5rem; }
.toolbar { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar input { flex: 1; min-width: 200px; width: auto; }
.toolbar select { width: auto; }
.empty { text-align: center; padding: 2rem 1rem; }
.empty p { margin: .3rem 0; }
.narrow-left { max-width: 520px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: .8rem 0; padding: .4rem .8rem .8rem; }
legend { color: var(--muted); font-size: .85rem; padding: 0 .3rem; }
.danger-text { color: var(--warn); }
.more { display: block; margin: 1rem auto; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }
table.list th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; background: var(--card); }
table.list tr:last-child td { border-bottom: none; }
tr.clickable, .card.clickable { cursor: pointer; }
tr.clickable:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
tr.selected td, .card.selected { background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
.card.selected { border-color: var(--accent); }
.detail-row > td { background: var(--bg); }
.detail { padding: .5rem .25rem; }
.detail-grid { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .5rem; }
.detail-grid .muted { margin-right: .35rem; }

/* Badges */
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.badge.info { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.badge.live { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* List + detail side by side */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.split:has(.split-detail) { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); }
.split-detail { position: sticky; top: 1rem; }
.split-detail h2 { margin: 0; font-size: 1.2rem; }
@media (max-width: 860px) { .split:has(.split-detail) { grid-template-columns: minmax(0, 1fr); } .split-detail { position: static; order: -1; } }

/* Messages, profiles, numbers */
.message { margin: .5rem 0; padding: .6rem .9rem; border-left: 3px solid var(--accent); background: var(--card); border-radius: 4px; }
.message p { margin: 0 0 .3rem; }
.message footer { color: var(--muted); font-size: .85rem; }
.message-card .message-body { white-space: pre-wrap; margin: .5rem 0; }
.profile-card { margin-bottom: .75rem; }
.script-preview { font-style: italic; margin: .4rem 0 .6rem; }
.number-list { list-style: none; padding: 0; margin: 0; }
.number-list li { display: flex; gap: .75rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.timeline { list-style: none; padding: 0; margin: .5rem 0 0; }
.timeline li { padding: .5rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.timeline li > div { flex-basis: 100%; }

@media (max-width: 640px) { .hide-narrow { display: none; } .page { padding: 1rem; } }
.verified-toggle { align-items: flex-start; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; }
.verified-toggle input { margin-top: .2rem; }
.verified-toggle:has(input:checked) { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.field-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.field-row > label { margin-top: 0; }
.field-row .grow { flex: 1 1 10rem; }
.field-row .postcode { flex: 0 1 8.5rem; }
.field-row .postcode input { text-transform: uppercase; }

/* Tabs scroll sideways on narrow screens without showing a scrollbar */
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

/* ---- Call tracks ---- */
.intro { max-width: 60rem; margin-top: 0; }
.tracks-link { display: inline-block; margin-top: .5rem; font-size: .9rem; }
.track-card { margin-bottom: .75rem; }
.track-card .use-when { margin: .3rem 0 0; }
.step-chain { margin: .4rem 0 0; color: var(--ink); }
.add-track h3 { margin-top: 0; }
.track-editor h3 { margin: 1.25rem 0 .5rem; }
ol.steps { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.step-card { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .85rem; margin-bottom: .75rem; background: var(--bg); }
.step-card p { margin: .25rem 0; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 700; }
.integration-note { color: var(--accent); }
.step-more { margin-top: .5rem; }
.step-more summary { cursor: pointer; color: var(--muted); }
label.field > span:first-child { display: block; }
.req { color: var(--warn); }
.library summary { cursor: pointer; padding: .4rem 0; }
.library h4 { margin: .75rem 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; }
.library-item { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; white-space: normal; padding: .6rem .7rem; }
.library-item .badge { margin-top: .1rem; }
.save-row { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.track-outcome { list-style: none; padding: 0; margin: .3rem 0 .8rem; }
.track-outcome li { padding: .2rem 0; }
.outcome-icon { display: inline-block; width: 1.2rem; font-weight: 700; }
.outcome-completed .outcome-icon { color: var(--ok); }
.outcome-failed .outcome-icon { color: var(--warn); }
.outcome-skipped .outcome-icon, .outcome-pending .outcome-icon { color: var(--muted); }

.run-when { padding: .5rem .6rem; border: 1px dashed var(--line); border-radius: 6px; background: var(--card); }
.run-when select { margin-top: .25rem; }

/* ---- Profiles → profile → call track (multi-page editor) ---- */
a.button { display: inline-block; font: inherit; padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; white-space: nowrap; }
a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.crumbs { margin: 0 0 .5rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem; }
.section-title { margin: 0 0 .5rem; font-size: 1.15rem; }
h2.section-title { margin-top: .25rem; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
a.profile-card { display: flex; flex-direction: column; margin: 0; color: var(--ink); text-decoration: none; transition: border-color .15s; }
a.profile-card:hover, a.profile-card:focus-visible { border-color: var(--accent); }
a.profile-card .profile-name { font-size: 1.1rem; }
a.profile-card .badges { display: flex; flex-wrap: wrap; gap: .3rem; }
a.profile-card .open-link { margin-top: auto; padding-top: .75rem; color: var(--accent); }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.5rem; }
@media (min-width: 900px) { .settings-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.settings-grid > label { margin-top: 0; }
ol.track-list { list-style: none; margin: 0; padding: 0; }
.track-row { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: .6rem; background: var(--bg); }
.track-row:hover, .track-row:focus-within { border-color: var(--accent); }
.track-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; color: var(--ink); text-decoration: none; }
.track-main .row { margin: 0; flex-wrap: wrap; }
.track-main .step-chain { overflow-wrap: anywhere; }
.track-order { display: flex; flex-direction: column; padding-right: .6rem; min-width: 2.4rem; }
.track-order button { font-size: 1.05rem; padding: .1rem .3rem; }
.danger-zone { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.danger-zone p { margin: .2rem 0 0; }
.step-card.card { background: var(--card); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.step-head { flex-wrap: wrap; }
.step-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.75rem; margin-top: .4rem; }
@media (min-width: 900px) { .step-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .step-options { border-left: 1px solid var(--line); padding-left: 1.25rem; } }
.step-options label:first-child { margin-top: .6rem; }
.library h4:first-of-type { margin-top: .25rem; }
.save-bar { position: sticky; bottom: 0; z-index: 5; margin: 0 -1rem; padding: .6rem 1rem; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(4px); border-top: 1px solid var(--line); }
.save-bar-inner .alert, .save-bar-inner .notice { margin-bottom: .4rem; }
.save-bar .row { margin: 0; flex-wrap: wrap; }
label.field.inline { flex-wrap: wrap; align-items: flex-start; }
label.field.inline > input[type=checkbox] { margin-top: .2rem; }
label.field.inline > span:not(.muted) { flex: 1; }
label.field.inline > .muted.small { flex-basis: 100%; padding-left: 1.6rem; }

/* ---- Call track editor: toolbox + drag-and-drop steps ---- */
.track-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 900px) { .track-workspace { grid-template-columns: 15.5rem minmax(0, 1fr); } .toolbox { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } }
.toolbox { padding: 1rem; }
.toolbox h4 { margin: .9rem 0 .35rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.toolbox p { margin: 0 0 .25rem; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.tool { width: 100%; display: flex; align-items: center; gap: .45rem; text-align: left; padding: .45rem .55rem; background: var(--bg); cursor: grab; }
.tool:hover { border-color: var(--accent); }
.tool:active { cursor: grabbing; }
.tool-name { flex: 1; }
.tool-grip, .grip { color: var(--muted); letter-spacing: -.15em; user-select: none; }
.tool-integration { color: var(--accent); font-weight: 700; }
.steps-head { margin: .25rem 0 .25rem; flex-wrap: wrap; }
.steps-head .section-title { margin: 0; }

ol.dnd-steps { list-style: none; padding: 0; margin: 0 0 1rem; }
.grip { cursor: grab; padding: .2rem .15rem; font-size: 1.05rem; }
.grip:active { cursor: grabbing; }
.step-card.card { margin-bottom: 0; }
.step-head { margin: 0; flex-wrap: wrap; }
.step-toggle { display: inline-flex; align-items: baseline; gap: .4rem; border: none; background: none; padding: .2rem .1rem; color: var(--ink); text-align: left; }
.step-toggle:hover strong { color: var(--accent); }
.chevron { color: var(--muted); width: .8rem; }
.step-preview { margin: .3rem 0 0 4.1rem; cursor: pointer; overflow-wrap: anywhere; }
.step-card.dragged { opacity: .45; }

/* Gaps between steps: thin normally, drop targets while dragging */
.drop-slot { height: .6rem; border-radius: 8px; transition: height .12s, background .12s; display: flex; align-items: center; justify-content: center; }
.drop-slot .drop-line { display: none; }
.drop-slot.empty-slot { height: auto; min-height: 6rem; border: 2px dashed var(--line); color: var(--muted); padding: 1rem; text-align: center; }
.is-dragging .drop-slot { height: 1.4rem; }
.is-dragging .drop-slot.over { height: 3.2rem; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.is-dragging .drop-slot.over .drop-line { display: inline; color: var(--accent); font-size: .85rem; font-weight: 600; }
.is-dragging .drop-slot.empty-slot { border-color: var(--accent); }
.is-dragging .drop-slot * { pointer-events: none; }
/* While dragging, cards shrink to their header (a fixed height, so "top half / bottom half" can be worked out) */
.is-dragging .step-card { height: 3.5rem; overflow: hidden; padding-top: .7rem; padding-bottom: .7rem; }
.is-dragging .step-card > :not(.step-head) { display: none; }
.is-dragging .step-card * { pointer-events: none; }

/* ---- Confirmation popup ---- */
dialog.confirm-dialog { border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.4rem; width: min(26rem, calc(100vw - 2rem)); background: var(--card); color: var(--ink); box-shadow: 0 18px 50px rgb(0 0 0 / .25); }
dialog.confirm-dialog::backdrop { background: rgb(15 18 25 / .45); }
dialog.confirm-dialog h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
dialog.confirm-dialog p { margin: 0 0 1.25rem; color: var(--muted); line-height: 1.45; }
.confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.save-row .delete-action, .save-bar .delete-action { margin-left: .5rem; }
button.danger-outline { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: var(--card); }
button.danger-outline:hover:not(:disabled) { background: color-mix(in srgb, var(--warn) 10%, var(--card)); }

/* Drop a step here to remove it */
.trash-zone { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: .7rem 1rem; border: 2px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .9rem; transition: background .12s, border-color .12s, color .12s, padding .12s; }
.trash-zone * { pointer-events: none; }
.trash-zone.active { position: sticky; bottom: 4.75rem; z-index: 6; padding: 1.1rem 1rem; border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--card)); box-shadow: 0 6px 20px rgb(0 0 0 / .12); }
.trash-zone.over { background: color-mix(in srgb, var(--warn) 18%, var(--card)); font-weight: 600; }
.trash-icon { font-size: 1.15rem; }
.undo-bar { margin: 0 0 .4rem; padding: .45rem .8rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.undo-bar button.link { font-weight: 600; margin-left: .35rem; }
.step-actions { margin-left: auto; display: inline-flex; gap: .5rem; white-space: nowrap; }

/* Toolbox and step list scroll independently (wide screens; on narrow screens the page just scrolls) */
@media (min-width: 900px) {
  .track-workspace.fit { height: var(--fit-height, calc(100dvh - 16rem)); align-items: stretch; }
  .track-workspace.fit > .toolbox { position: static; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 0; }
  .track-workspace.fit > .track-main-col { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 .4rem 0 .1rem; scrollbar-gutter: stable; }
  .track-workspace.fit .trash-zone.active { bottom: .5rem; }
}

/* Choice options table and variable hints */
.table-field { display: block; margin: .6rem 0; }
.table-field > span:first-child { display: block; margin-bottom: .3rem; }
.table-field .table-wrap { background: var(--bg); }
table.options-table { min-width: 100%; }
table.options-table th { font-size: .8rem; font-weight: 600; color: var(--muted); padding: .4rem .45rem; white-space: nowrap; }
table.options-table td { padding: .3rem .3rem; border-bottom: none; }
table.options-table input { min-width: 7rem; }
table.options-table .actions { width: 2rem; text-align: center; }
.table-field > .muted.small { display: block; margin-top: .2rem; }
.variables-hint { margin: .8rem 0 0; padding: .55rem .7rem; border-radius: 8px; background: var(--bg); line-height: 1.9; }
.variables-hint code { display: inline-block; margin: 0 .15rem; padding: 0 .35rem; border-radius: 4px; border: 1px solid var(--line); font-size: .8rem; }
.variables-hint code:not(.muted) { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Form step: designer + preview ---- */
@media (min-width: 900px) {
  .step-body.stacked { grid-template-columns: minmax(0, 1fr); }
  .step-body.stacked .step-options { border-left: none; padding-left: 0; border-top: 1px solid var(--line); margin-top: .75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
}
.form-field { display: block; margin: .6rem 0; }
.form-field > span:first-child { display: block; margin-bottom: .35rem; }
.form-designer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 1250px) { .form-designer { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.fd-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.fd-empty { margin: .25rem 0 .5rem; }
ol.fd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.fd-field { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; background: var(--bg); }
.fd-field.is-heading { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.fd-field.dragged { opacity: .45; }
.fd-field.over { border-color: var(--accent); box-shadow: 0 -3px 0 var(--accent); }
.fd-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.fd-row input.fd-label { flex: 1 1 10rem; width: auto; min-width: 8rem; }
.fd-row select { width: auto; }
.fd-required { margin: 0; font-size: .85rem; white-space: nowrap; }
.fd-actions { margin-left: auto; display: inline-flex; gap: .4rem; white-space: nowrap; }
.fd-meta { margin: .3rem 0 0 1.5rem; display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.fd-meta code { color: var(--accent); }
.fd-sub { margin: .4rem 0 0 1.5rem; font-size: .9rem; }
.fd-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
.fd-more .fd-wide { grid-column: 1 / -1; }
.fd-drop-end { border: 2px dashed var(--line); border-radius: 8px; padding: .5rem; text-align: center; color: var(--muted); font-size: .85rem; }
.fd-drop-end.over { border-color: var(--accent); color: var(--accent); }
.fd-add { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .6rem; }
button.chip { padding: .2rem .55rem; font-size: .8rem; border-radius: 999px; background: var(--bg); }
button.chip:hover { border-color: var(--accent); color: var(--accent); }
.fd-preview-card { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; background: var(--card); }
/* The same grid the handler console uses */
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .1rem .75rem; }
.form-grid .form-heading { grid-column: 1 / -1; margin: .7rem 0 .1rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .2rem; }
.form-grid .form-heading:first-child { margin-top: 0; }
.form-cell { grid-column: span 6; margin: .3rem 0; min-width: 0; }
.form-cell.w-half { grid-column: span 3; }
.form-cell.w-third { grid-column: span 2; }
.form-cell .preview-label { display: block; font-size: .9rem; }
@media (max-width: 560px) { .form-cell.w-half, .form-cell.w-third { grid-column: span 6; } }

/* Choose an option: the variables are the table's columns */
.table-explainer { margin: 0 0 .5rem; padding: .5rem .7rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, var(--bg)); line-height: 1.5; }
.table-explainer code { color: var(--accent); }
table.options-table th.variable-col { vertical-align: bottom; min-width: 9rem; background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
table.options-table td.variable-col { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.variable-head { display: flex; align-items: center; gap: .3rem; }
.variable-head input.variable-name { min-width: 6rem; font-family: ui-monospace, monospace; font-size: .85rem; padding: .3rem .4rem; }
th.variable-col code { display: block; margin-top: .2rem; font-weight: 400; color: var(--accent); font-size: .78rem; }
th.variable-col code.invalid { color: var(--warn); }
th.add-col, td.add-col { white-space: nowrap; vertical-align: bottom; }

/* Variables you can drag into text boxes */
.toolbox-variables { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.var-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
code.var-chip { display: inline-block; padding: .1rem .45rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); background: var(--card); font-size: .8rem; cursor: grab; user-select: none; }
code.var-chip:hover { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
code.var-chip:active { cursor: grabbing; }
code.var-chip.builtin { color: var(--muted); border-color: var(--line); }
.variables-hint code.var-chip { margin: 0 .1rem; }
.builtins { margin-top: .5rem; }
.builtins summary { cursor: pointer; color: var(--muted); }
input.var-drop-target, textarea.var-drop-target { outline: 2px dashed var(--accent); outline-offset: 1px; background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }

/* Sign-in: a row of buttons */
.actions-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.auth-links { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin-top: .75rem; }

/* Billing */
.billing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; }
.billing-grid > .card { margin-bottom: 0; }
.billing-grid + .card { margin-top: 1.25rem; }
.balance { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: .1rem 0 .5rem; }
.negative { color: var(--warn); }
.warn-text { color: var(--warn); }
td.credit { color: var(--ok, #1f7a3f); }
th.num, td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .25rem 0 .6rem; }
button.chip { border-radius: 999px; padding: .25rem .8rem; }
button.chip.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
form.top-up { align-items: flex-end; gap: .75rem; }
form.top-up .grow { flex: 1; }
.test-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; margin-bottom: .5rem; }
button.test-card { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; padding: .6rem .75rem; }
.sim-note { padding: .5rem .7rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
h2.spaced { margin-top: 1.5rem; }
.auto-row { gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.auto-row > label > span { display: block; margin-bottom: .25rem; }
.auto-row > label input { width: 100%; }
.auto-row label { flex: 1 1 10rem; }
details.packages { margin-top: 1rem; }
details.packages summary { cursor: pointer; color: var(--accent); }
tr.breakdown td { background: var(--bg); }
tr.breakdown table { width: 100%; font-size: .9rem; }
tr.breakdown table td { padding: .15rem .5rem; border: none; background: transparent; }
.package-pick { display: block; margin-bottom: .75rem; }
form.top-up input { width: 100%; }

/* Confirm dialog: figures */
dl.confirm-details { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0 0 1rem; }
dl.confirm-details dt { color: var(--muted); font-size: .9rem; }
dl.confirm-details dd { margin: 0; }
dialog.confirm-dialog p.confirm-note { font-size: .88rem; padding: .5rem .7rem; border-radius: 8px; background: var(--bg); }
.alert p { margin: .2rem 0; }

/* ---- Sautira type and logo ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
h1 { letter-spacing: -0.015em; }
h2 { letter-spacing: -0.01em; }
.brand-logo { display: block; height: 30px; width: auto; }
.brand-logo.large { height: 40px; margin: 0 auto 1rem; }
.topbar { padding: .6rem 1.25rem; }
button.small-btn { border-radius: var(--radius-sm); }
.tabs a.active { color: var(--ink); border-bottom-color: var(--brand); }

/* ---- Staff contacts */
.badge.owner { color: var(--card); background: var(--ink); border-color: var(--ink); margin-left: .3rem; }

/* ---- Messages tabs, paging, call back */
.subtabs { display: flex; gap: .25rem; margin: 0 0 .9rem; border-bottom: 1px solid var(--line); }
.subtabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); padding: .5rem .9rem; }
.subtabs button.on { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.subtabs .count { display: inline-block; min-width: 1.4rem; padding: 0 .35rem; margin-left: .25rem; border-radius: 999px; background: var(--tint); color: var(--ink); font-size: .78rem; font-weight: 600; }
.message-actions { flex-wrap: wrap; }
.pager { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin: 1rem 0; }
.pager select { width: auto; padding: .25rem .4rem; }
.pager label.inline { margin: 0; gap: .4rem; }
td.actions { text-align: right; white-space: nowrap; }

/* ---- Statement */
.statement-head { flex-wrap: wrap; }
.statement-head h2 { margin: 0; }
.statement-head select { width: auto; padding: .25rem .4rem; }
.statement-head label.inline { margin: 0; gap: .4rem; display: inline-flex; align-items: center; }

/* ---- A call opened from a link */
.linked-call { border-color: var(--brand); }
.linked-call h2 { margin: 0; font-size: 1.15rem; }
.linked-call .row { flex-wrap: wrap; }

/* ---- Onboarding */
.welcome { max-width: 760px; margin: 1rem auto; }
.onboarding-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: .5rem 0 1.25rem; counter-reset: step; flex-wrap: wrap; }
.onboarding-steps li { counter-increment: step; display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9rem; }
.onboarding-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line-strong); font-weight: 600; }
.onboarding-steps li + li::after { content: none; }
.onboarding-steps li.current { color: var(--ink); font-weight: 600; }
.onboarding-steps li.current::before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.onboarding-steps li.done::before { content: "✓"; background: var(--tint); border-color: var(--brand); color: var(--ink); }
.test-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
button.chip.selected { border-color: var(--accent); color: var(--accent); }

/* ---- Call back progress (Calls, Messages) */
.callback-tracker { border-color: var(--accent); }
/* Floating over every portal page, in the same corner, wherever the call back was started. */
.callback-overlay { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; width: min(24rem, calc(100vw - 2rem)); margin: 0;
    box-shadow: 0 10px 30px rgba(15, 61, 62, .18), 0 2px 6px rgba(15, 61, 62, .12); max-height: calc(100vh - 2rem); overflow-y: auto; }
@media (max-width: 640px) { .callback-overlay { right: 1rem; left: 1rem; bottom: 1rem; width: auto; } }
.callback-tracker.finished { border-color: var(--line); }
.callback-tracker .row { flex-wrap: wrap; }
.callback-steps { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.callback-steps li { padding-left: 1.6rem; position: relative; color: var(--muted, inherit); opacity: .6; }
.callback-steps li::before { content: "○"; position: absolute; left: .2rem; }
.callback-steps li.done { opacity: 1; }
.callback-steps li.done::before { content: "✓"; color: var(--ok, var(--accent)); }
.callback-steps li.current { opacity: 1; font-weight: 600; }
.callback-steps li.current::before { content: "●"; color: var(--accent); animation: callback-pulse 1.2s ease-in-out infinite; }
.callback-steps li.stopped { opacity: 1; }
.callback-steps li.stopped::before { content: "✕"; color: var(--warn); }
@keyframes callback-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .callback-steps li.current::before { animation: none; } }

/* ---- Two-step sign-in */
.two-factor .qr svg { width: 180px; height: 180px; display: block; margin: .6rem 0; background: #fff; padding: 6px; border-radius: 8px; }
.two-factor .setup-steps { padding-left: 1.2rem; display: grid; gap: .8rem; }
.two-factor .setup-key { word-break: break-all; }
.two-factor .recovery-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .3rem .8rem; }
.two-factor .actions-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.notice-line { color: var(--accent); margin: .2rem 0 .6rem; }

/* ---- Track schedule (when it's offered) */
.schedule { display: grid; gap: .5rem; margin-top: .8rem; }
.schedule select { width: auto; max-width: 100%; }
.schedule-days { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.schedule-times { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.schedule-times input[type=time] { width: auto; }

/* ---- Verifying staff numbers */
.verify-numbers { display: grid; gap: .5rem; margin: .4rem 0 .8rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px; }
.verify-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.verify-row .code-input { width: 8rem; }

/* ---- On call scheduler */
.oncall-now { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.oncall-now > div { display: flex; flex-direction: column; }
.oncall-now select { width: auto; max-width: 100%; }
.week-nav { gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.oncall-palette { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 .7rem; }
.oncall-palette .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); }
.oncall-palette .chip.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); font-weight: 600; }
.swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); flex: none; }
.swatch.eraser { background: repeating-linear-gradient(45deg, var(--card) 0 3px, var(--line) 3px 6px); }
.oncall-grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.oncall-grid { --slot-h: 14px; display: grid; grid-template-columns: 3.4rem repeat(7, minmax(5.5rem, 1fr)); min-width: 44rem; user-select: none; }
.oncall-grid .corner, .oncall-grid .day-head { position: sticky; top: 0; background: var(--card); z-index: 1; }
.oncall-grid .day-head { grid-row: 1; padding: .4rem .3rem; font-weight: 600; text-align: center; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.oncall-grid .hour { grid-column: 1; font-size: .7rem; color: var(--muted); padding: 0 .3rem; border-top: 1px solid var(--line); line-height: 1; padding-top: 1px; }
.oncall-grid .cell { border-left: 1px solid var(--line); border-top: 1px solid var(--line); cursor: crosshair; position: relative; overflow: hidden; }
.oncall-grid .cell.half { border-top: 1px dotted color-mix(in srgb, var(--line) 60%, transparent); }
.oncall-grid .cell.now { box-shadow: inset 0 0 0 2px var(--amber); }
.oncall-grid .cell .who { position: absolute; left: 3px; top: 0; font-size: .68rem; font-weight: 600; white-space: nowrap; color: #0F3D3E; line-height: 13px; }
/* Eight colours for staff (light fills, dark names on them: the name, not the colour, says who it is) */
.c0 { background: #9FD8D1; } .c1 { background: #F7C98B; } .c2 { background: #B9C6F2; } .c3 { background: #F2B3C4; }
.c4 { background: #C5E3A1; } .c5 { background: #D9C2EE; } .c6 { background: #F4E39A; } .c7 { background: #B8D9EE; }
.oncall-grid .cell.c0, .oncall-grid .cell.c1, .oncall-grid .cell.c2, .oncall-grid .cell.c3, .oncall-grid .cell.c4, .oncall-grid .cell.c5,
.oncall-grid .cell.c6, .oncall-grid .cell.c7 { border-top-color: transparent; }

/* ---- Home: sections and optional features */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.feature-grid .card.feature { display: flex; flex-direction: column; gap: .35rem; margin: 0; text-decoration: none; color: var(--ink); }
a.card.feature:hover { border-color: var(--accent); }
.feature.optional.on { border-color: var(--accent); }
.feature.optional .row { gap: .6rem; align-items: center; }
.oncall-grid .cell.selecting { box-shadow: inset 0 0 0 2px var(--accent); background-color: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---- Working hours (Staff page) and the Staff Schedule */
.working-hours { display: grid; gap: .5rem; margin: .8rem 0; }
.working-hours select { width: auto; max-width: 100%; }
.custom-hours { display: grid; gap: .35rem; }
.custom-hours .day-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.custom-hours .day-row label { min-width: 4.2rem; margin: 0; }
.custom-hours input[type=time] { width: auto; }
.schedule-head { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; }
.schedule-head select { width: auto; }
.oncall-grid .cell.busy { background-image: repeating-linear-gradient(45deg, rgba(90, 99, 112, .35) 0 3px, transparent 3px 8px); }
.legend-busy { display: inline-block; width: 14px; height: 10px; vertical-align: middle; border: 1px solid #C9CED6; background: repeating-linear-gradient(45deg, rgba(90, 99, 112, .35) 0 3px, transparent 3px 8px); }
.calendar-link { margin-top: 1rem; }
.covers { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; padding-bottom: .25rem; }
.covers-col { flex: 1 0 10px; display: grid; grid-template-rows: 80px 1rem; cursor: default; }
.covers-col:hover .covers-track { background: #DCE3E8; }
.covers-track { display: flex; align-items: flex-end; background: #EEF2F4; border-radius: 4px 4px 0 0; }
.covers-fill { display: block; width: 100%; background: #2E8B7A; border-radius: 4px 4px 0 0; }
.covers-fill.busy { background: #D9952B; }
.covers-fill.full { background: #C2412D; }
.covers-label { font-size: .68rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.covers-gap { flex: 0 0 12px; }
.reservation-form { border: 1px solid var(--line); border-radius: 8px; padding: .75rem; margin: .5rem 0 1rem; }
.time-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
tr.cancelled td { text-decoration: line-through; }
tr.cancelled td.actions { text-decoration: none; }
.day-name { display: inline-block; width: 2.5rem; font-weight: 600; }
.oncall-grid .cell.booked { background: repeating-linear-gradient(135deg, #F7C98B 0 6px, #F2B97A 6px 12px); }

/* Account page: company details, with sign-in and security beside them */
.account-grid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 960px) { .account-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.account-grid .card { margin-bottom: 0; max-width: none; }
.account-side { display: grid; gap: 1.25rem; min-width: 0; }
fieldset.form-group { border: 0; border-top: 1px solid var(--line); margin: 1rem 0 0; padding: .75rem 0 0; min-width: 0; }
fieldset.form-group legend { padding: 0 .5rem 0 0; font-weight: 600; font-size: .95rem; }
.account-details .field-row > label { flex: 1 1 12rem; }
.form-actions { display: flex; gap: .75rem; border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* Test a call: the handler console's call and call-track panels, in the portal */
.test-banner { padding: .6rem .8rem; border: 1px dashed var(--line-strong); border-radius: 8px; background: color-mix(in srgb, var(--accent) 6%, var(--card)); margin: 0 0 1rem; }
.test-setup .verified-check { align-self: flex-end; margin-bottom: .55rem; }
.track-test-link { align-self: center; white-space: nowrap; }
.test-call .call-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.test-call .call-head h2 { margin: 0; }
.test-call .script { font-size: 1.35rem; padding: .9rem 1rem; border-left: 4px solid var(--accent); background: var(--bg); border-radius: 6px; margin: .75rem 0; }
.test-call .caller-card { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 8px; padding: .65rem .85rem; margin: .75rem 0; background: var(--bg); }
.test-call .caller-name { font-weight: 600; }
.test-call .instructions-text { white-space: pre-line; }
.test-call .track-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.test-call .track-tab { border-radius: 999px; padding: .35rem .9rem; }
.test-call .track-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.test-call .use-when { margin: .5rem 0 0; }
.test-call ol.track-steps { list-style: none; padding: 0; margin: 1rem 0 0; }
.test-call .track-step { border-left: 3px solid var(--line); padding: .35rem 0 .35rem .8rem; margin-bottom: .2rem; }
.test-call .track-step.current { border-left-color: var(--accent); }
.test-call .track-step.step-completed { border-left-color: var(--ok); }
.test-call .track-step.step-failed { border-left-color: var(--warn); }
.test-call .step-line { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.test-call .step-icon { width: 1.1rem; font-weight: 700; }
.test-call .step-completed .step-icon { color: var(--ok); }
.test-call .step-failed .step-icon { color: var(--warn); }
.test-call .current .step-icon { color: var(--accent); }
.test-call .step-summary { color: var(--muted); }
.test-call .console-step { margin: .5rem 0 .4rem 1.5rem; }
.test-call .console-step .instructions { font-size: 1.1rem; padding: .6rem .8rem; background: var(--bg); border-radius: 6px; margin: .3rem 0 .6rem; white-space: pre-line; }
.test-call .step-error { --n: var(--warn); padding: .6rem .8rem; border: 2px solid var(--n); border-radius: 8px; background: color-mix(in srgb, var(--n) 10%, var(--card)); margin-bottom: .6rem; color: var(--n); }
.test-call .step-error .guidance { color: var(--ink); font-size: 1.05rem; margin-top: .3rem; }
.test-call .track-done { margin: .8rem 0 0; color: var(--ok); }
.test-call .form-grid > .form-cell { grid-column: span 6; min-width: 0; }
.test-call .form-grid > .form-cell.w-half { grid-column: span 3; }
.test-call .form-grid > .form-cell.w-third { grid-column: span 2; }
@media (max-width: 640px) { .test-call .form-grid > .form-cell.w-half, .test-call .form-grid > .form-cell.w-third { grid-column: span 6; } .test-call .console-step { margin-left: 0; } }

/* Setting up an account: choosing a template */
.setup-account { max-width: 64rem; margin: 2rem auto; }
.setup-account h2 { margin-top: 1.5rem; }
.template-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin: .75rem 0 1.25rem; }
.template-choice { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); cursor: pointer; }
.template-choice:hover { border-color: var(--line-strong); }
.template-choice.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.template-choice input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.template-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Picking a day or a time at a glance (Book Appointment, reservations) */
.slot-field > span:first-child { display: block; margin-bottom: .3rem; }
.slot-picker { display: grid; gap: .5rem; max-height: 22rem; overflow-y: auto; padding: .1rem .2rem .2rem 0; }
.slot-group { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; align-items: start; }
@media (max-width: 640px) { .slot-group { grid-template-columns: 1fr; } }
.slot-group-name { font-size: .85rem; font-weight: 600; padding-top: .35rem; color: var(--muted); }
.slot-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
button.slot { display: inline-flex; flex-direction: column; align-items: center; gap: 0; min-width: 4.2rem; padding: .3rem .55rem; border-radius: 8px; line-height: 1.15; }
button.slot .slot-label { font-weight: 600; font-variant-numeric: tabular-nums; }
button.slot .slot-note { font-size: .72rem; color: var(--muted); }
button.slot:hover:not(:disabled) { border-color: var(--accent); }
button.slot.selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.slot.selected .slot-note { color: inherit; opacity: .85; }
button.slot.unavailable { opacity: 1; background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--line) 60%, transparent) 5px 7px); color: var(--muted); border-style: dashed; cursor: not-allowed; }
button.slot.unavailable .slot-label { text-decoration: line-through; font-weight: 500; }