/* The BusyBooking brand (dark ink, safety orange, Barlow Condensed and Work Sans) for the BusyBooking apps' web pages
   (the Portal, Admin). The sign-in pages use the Winsmith brand instead (winsmith.css, the same class names).
   Design reference: brand/busybooking/guidelines.html and the app look of brand/shared/base.css and
   brand/busybooking/brand.css (second cut, 2026-10-20: smooth corners, desk density, hairlines instead of boxes,
   sentence-case titles); change it here and every BusyBooking app follows.
   Fonts are served from our own site (fonts/, SIL Open Font License), never from a CDN, to keep the strict CSP. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/work-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/work-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/work-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); }

:root {
	/* Dark until the person chooses light (D56): the layout sets data-theme on <html> from their account. Each colour is
	   light-dark(light, dark); the values are brand/busybooking/brand.css (--ink is its --bg, --card its --surface,
	   --ink-raised its --surface-2). */
	color-scheme: dark;
	--ink: light-dark(#F5F3EE, #101418);
	--ink-raised: light-dark(#ECE9E2, #222932);
	--card: light-dark(#FFFFFF, #1A2027);
	--surface-3: light-dark(#E2DED5, #2B333C);
	--line-soft: light-dark(#E7E3DB, #1F262D);
	--line: light-dark(#DDD8CE, #2A3139);
	--line-strong: light-dark(#C4BDB0, #3A4149);
	--overlay: rgb(8 10 14 / .6);
	--field-bg: light-dark(#FFFFFF, #101418);
	--field-line: light-dark(#B9B2A5, #46505A);
	--text: light-dark(#101418, #F3F1EC);
	--text-muted: light-dark(#4B5158, #C9CDD2);
	--text-faint: light-dark(#666C73, #9AA1A9);
	--accent: #FF8A3D;
	--accent-hover: light-dark(#F27A2B, #FFB07A);
	--on-accent: #101418;
	--accent-strong: light-dark(#A94600, #FF9F5E);
	--accent-soft: light-dark(#FFE9DA, #3A2516);
	--accent-ring: color-mix(in oklab, var(--accent), transparent 60%);
	/* Orange is too pale for text on a light page, so links and focus rings take a darker shade there. */
	--link: light-dark(#A94600, #FF9F5E);
	--link-hover: light-dark(#7A3200, #FFC197);
	--focus: light-dark(#A94600, #FFB07A);
	/* Status, and what each means in this product: a screen says "urgent", "callback" or "handled", never "danger". */
	--success: light-dark(#1E7F4F, #7EE2A8); --success-soft: light-dark(#E2F3E9, #12291D); --success-strong: light-dark(#166640, #9DEBBE);
	--warning: light-dark(#9A6400, #FFC23D); --warning-soft: light-dark(#FFF1D6, #32270D); --warning-strong: light-dark(#7A4F00, #FFD574);
	--danger: light-dark(#C2352B, #FF7B72); --danger-soft: light-dark(#FBE5E3, #3A1715); --danger-strong: light-dark(#9E2A22, #FFA29B);
	--info: light-dark(#1F6FA8, #6CC3FF); --info-soft: light-dark(#E2EFF8, #10263A); --info-strong: light-dark(#18598A, #9AD5FF);
	--urgent: var(--danger); --urgent-soft: var(--danger-soft); --urgent-strong: var(--danger-strong);
	--callback: var(--warning); --callback-soft: var(--warning-soft); --callback-strong: var(--warning-strong);
	--handled: var(--success); --handled-soft: var(--success-soft); --handled-strong: var(--success-strong);
	--error: var(--danger);
	--ok: var(--success);
	--danger-text: light-dark(#FFFFFF, #101418);
	/* Corners: the brand's sharp variation (brand/README.md; the owner, 2026-10-24: "I want to use it"), every corner and
	   circle square, native radio buttons and the Portal's ⓘ excepted. The tokens stay so the rounded look is one change
	   away. */
	--radius-s: 0px;
	--radius-m: 0px;
	--radius-l: 0px;
	--radius-control: 0px;
	--radius-field: 0px;
	/* A row of controls side by side takes one height (the owner, 2026-10-24); a card's head, a smaller one for all of
	   its controls together (--control-height there). */
	--control-height-head: 30px;
	--shadow-1: 0 1px 0 rgb(255 255 255 / .03) inset, 0 2px 8px rgb(0 0 0 / .25);
	--shadow-2: 0 12px 32px rgb(0 0 0 / .4);
	--shadow-3: 0 30px 80px rgb(0 0 0 / .55);
	--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
	/* Controls: 44 px is the smallest thing a thumb taps; 56 px for a screen's one main action. */
	--control-height: 44px;
	--control-height-lg: 56px;
	/* The app shell: one sidebar width, one sub-menu width, one top bar height. */
	--sidebar-width: 264px;
	--subnav-width: 232px;
	--topbar-height: 60px;
	--page-padding: 16px;
}
:root[data-theme="light"] { color-scheme: light; }

/* Desk density: from 980 px (the sidebar layout) text sits at 15 px and controls at 36 px; phones keep 16 px and 44 px
   so a thumb never misses. */
@media (min-width: 980px) {
	:root { --control-height: 36px; --control-height-lg: 48px; --page-padding: 48px; }
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--text);
	background: var(--ink);
	accent-color: var(--accent);
}
@media (min-width: 980px) { body { font-size: 15px; } }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

/* App titles in sentence case (the condensed capitals stay for marketing and the guidelines): the page title 30 px, a
   card's or section's 20 px. */
h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
h1 { font-size: 30px; line-height: 1.1; margin: 0 0 8px; }
h2 { font-size: 20px; line-height: 1.2; margin: 0 0 12px; }
h3 { font-size: 17px; line-height: 1.2; margin: 0 0 8px; }
p { text-wrap: pretty; }

code { background: var(--ink-raised); color: var(--text); padding: 1px 6px; border-radius: var(--radius-s); }

/* Lockup: the "next job" tile, the name in condensed capitals, and "by winsmith" in Winsmith's font (decision D56;
   drawn in brand). */
.wordmark {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 30px;
	line-height: .9;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text);
	text-decoration: none;
}
.wordmark:hover { color: var(--text); }
.wordmark .dot { color: var(--accent); }

.product-by {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--text);
}

/* The app shell (brand/busybooking/sample-portal.html): a side column with the logo, the business, its sections and the
   account; beside it a top bar with the search, then the page. A section with pages of its own (Settings) adds a
   sub-menu between the side column and the page. Under 980 px the column folds into a short bar at the top, the
   sections become a tab bar fixed to the bottom of the screen, in reach of a thumb, and the sub-menu a row of chips. */
.shell { display: grid; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); align-content: start; }
.side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 12px 16px;
	background: color-mix(in oklab, var(--card), var(--ink) 40%);
	border-bottom: 1px solid var(--line);
}
.brand-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-lockup img { display: block; height: 40px; width: auto; }
.brand-lockup .wordmark { font-size: 26px; }
.brand-lockup .lockup-text { display: flex; flex-direction: column; gap: 3px; }
/* The business the page belongs to: its initials in an orange tile, its name and the channel. */
.side .business { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-m); background: var(--ink-raised); min-width: 0; }
.side .business > span:not(.avatar) { display: flex; flex-direction: column; min-width: 0; }
.side .business strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.side .business small { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-s); background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-s); color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.sidenav a svg { width: 18px; height: 18px; flex: none; }
.sidenav a:hover { background: var(--ink-raised); color: var(--text); }
.sidenav a[aria-current="page"] { background: var(--ink-raised); color: var(--text); font-weight: 600; }
.sidenav a[aria-current="page"] svg { color: var(--accent); }
/* How many wait behind a section (the open leads beside Leads), as the brand's sample marks Calls. */
.sidenav .count { margin-inline-start: auto; min-width: 20px; padding: 1px 6px; border-radius: var(--radius-s); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1.6; text-align: center; }
.shell-main { display: flex; flex-direction: column; min-width: 0; }
/* A long email wraps rather than pushing the page sideways on a phone. */
.account-nav, .content { overflow-wrap: anywhere; }
.account-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; }
.account-nav a { color: var(--text-muted); }
.account-nav a:hover { color: var(--text); }

/* The top bar above the page: the search, and on a page with a sub-menu the button that brings it back. Frosted, it
   stays at the top while the page scrolls under it on wide screens. */
.topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--topbar-height);
	padding: 8px var(--page-padding);
	background: color-mix(in oklab, var(--ink), transparent 18%);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}
@media (min-width: 980px) {
	.topbar { position: sticky; top: 0; z-index: 5; padding-block: 0; }
}

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding: 24px var(--page-padding);
	border-top: 1px solid var(--line-soft);
	font-size: 14px;
	color: var(--text-faint);
}

/* The page: it stretches to the window at a desk. The bottom padding keeps the phone's tab bar from covering the end of
   it. */
.content { flex: 1; width: 100%; padding: 24px var(--page-padding) 104px; }
.container-narrow { max-width: 520px; }
.muted { color: var(--text-muted); }

/* Panels: the surface on the page with a hairline, never a shadow (shadows are for things that float). */
.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 24px;
	margin-bottom: 16px;
}

/* Forms: the fields of brand/shared/base.css (.field, .input, .select, .textarea) drawn on the plain elements, so every
   page takes them without a class of its own. */
label { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.field { margin-bottom: 16px; }
input:is([type="email"], [type="password"], [type="text"], [type="search"], [type="number"], [type="tel"], [type="time"], [type="url"], [type="date"]),
select,
textarea {
	width: 100%;
	max-width: 420px;
	min-height: var(--control-height);
	padding: 10px 14px;
	font: inherit;
	color: var(--text);
	background: var(--field-bg);
	border: 1px solid var(--field-line);
	border-radius: var(--radius-field);
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* A one-line field is exactly a control's height, so it lines up with the buttons and choices beside it (the owner,
   2026-10-24: controls side by side are one height); a textarea grows. */
input:is([type="email"], [type="password"], [type="text"], [type="search"], [type="number"], [type="tel"], [type="time"], [type="url"], [type="date"]),
select { height: var(--control-height); padding-block: 0; }
:is(input, textarea)::placeholder { color: var(--text-faint); }
:is(input, select, textarea):hover { border-color: var(--line-strong); }
:is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
:is(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; background: var(--ink-raised); }
/* Only after the person has used the field, so an empty required one doesn't shout when the page opens. */
:is(input, select, textarea):user-invalid { border-color: var(--danger); }
/* The brand's arrow (a file: the CSP takes no data: images). */
select {
	appearance: none;
	padding-right: 40px;
	background-image: url("../images/select-chevron.svg");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
}
select[multiple], select[size] { padding-right: 14px; background-image: none; }
a:focus-visible, button:focus-visible, :is([type="checkbox"], [type="radio"]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.checkbox { display: flex; align-items: flex-start; gap: 12px; }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.checkbox label { display: inline; margin: 0; font-weight: 400; color: var(--text-muted); cursor: pointer; }

/* Buttons: base.css's .btn, the plain button as its primary (dark text on orange: white on orange fails contrast). */
button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--control-height);
	margin-top: 6px;
	padding: 0 24px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--on-accent);
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* .btn-secondary: outlined, the page behind it. */
.button-outline { color: var(--text); background: transparent; border-color: var(--line-strong); }
.button-outline:hover { color: var(--text); background: color-mix(in oklab, var(--ink), var(--text) 8%); border-color: var(--line-strong); }
/* .btn-ghost: no box until it is pointed at. */
.button-ghost { color: var(--text); background: transparent; border-color: transparent; }
.button-ghost:hover { color: var(--text); background: var(--ink-raised); border-color: transparent; }
.inline-form { display: inline; margin: 0; }
/* .btn-link: an action that reads as a link (remove, cancel, hide). */
.link-button {
	display: inline;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	text-align: inherit;
	color: var(--link);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.link-button:hover { color: var(--link-hover); background: none; text-decoration-thickness: 2px; }
fieldset:disabled { opacity: .55; }

/* Messages */
.field-error { display: block; color: var(--danger-strong); font-size: 14px; margin-top: 4px; }
.field-error ul { margin: 0 0 12px; padding-left: 18px; }
.success { color: var(--success-strong); }
.result { margin-top: 8px; padding: 10px 12px; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius-m); }

/* The Portal's screens: the controls of brand/shared/base.css, drawn from this file's tokens. */
.stack { display: flex; flex-direction: column; gap: 16px; }
/* A button in a stack keeps its own width beside the fields (a column stretches it across the card); on phones it
   still spans the screen. */
@media (min-width: 641px) {
	.stack > button, .stack > .button { align-self: flex-start; }
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.faint { color: var(--text-faint); font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

input[type="number"], input[type="time"] { max-width: 160px; font-variant-numeric: tabular-nums; }
/* Grows with what is typed where the browser can, up to a point. */
textarea { max-width: 640px; min-height: 96px; max-height: 320px; field-sizing: content; resize: vertical; }
input[readonly], textarea[readonly] { color: var(--text-faint); background: var(--ink-raised); }
.field .hint { display: block; font-size: 14px; color: var(--text-muted); margin-top: 4px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 24px 24px; margin: 0 0 16px; min-width: 0; }
fieldset.plain { border: 0; padding: 0; }
legend { font-weight: 600; padding: 0 8px; }
fieldset.plain legend { padding: 0; margin-bottom: 12px; }
/* A tooltip (the brand's, brand/shared/base.css): a popover in ink on the page's colour. A script places it beside what
   opened it (fixed, so the browser's centring is undone). */
.tooltip[popover] { position: fixed; inset: auto; margin: 0; padding: 8px 12px; border: 0; border-radius: var(--radius-s); background: var(--text); color: var(--ink); font-size: 14px; font-weight: 400; line-height: 1.45; max-width: min(320px, calc(100vw - 16px)); box-shadow: var(--shadow-2); }
.choices { display: flex; flex-direction: column; gap: 10px; }
/* A link that looks like the primary button. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); margin-top: 6px; padding: 0 24px; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-control); text-decoration: none; text-align: center; }
.button:hover { color: var(--on-accent); background: var(--accent-hover); border-color: var(--accent-hover); }
/* .btn-sm: a quieter action (smaller words, less padding) at the height of the controls beside it (the owner,
   2026-10-24), so a row's field and its Save line up; the screen's main action never is one. */
.button-small, button.button-small { min-height: var(--control-height); margin-top: 0; padding: 0 12px; font-size: 13px; }
/* The file picker's button, drawn as an outlined button at a control's height (the browser's own is small and rounded). */
input[type="file"]::file-selector-button { height: var(--control-height); margin-inline-end: 12px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-control); cursor: pointer; }
/* Square bullets: the sharp variation has no circles. */
ul { list-style-type: square; }
/* In a row, a button sits on the row's line: the space above it is for a button under a form's fields. */
:is(.row, .toolbar, .page-head-actions, .inline-fields, summary, li) > :is(button, .button) { margin-top: 0; }/* .btn-danger */
.button-danger { color: var(--danger-text); background: var(--danger); border-color: var(--danger); }
.button-danger:hover { background: color-mix(in oklab, var(--danger), #000000 15%); border-color: color-mix(in oklab, var(--danger), #000000 15%); }

/* Where a value comes from, an outcome or a flag: sentence case, 12 px, a dot in its colour; words always, never colour
   alone (brand/README.md). */
.badge { --tone: var(--text-faint); --tone-soft: var(--ink-raised); --tone-strong: var(--text); display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: var(--radius-s); background: var(--tone-soft); color: var(--tone-strong); font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 0; background: var(--tone); }
.badge-accent { --tone: var(--accent); --tone-soft: var(--accent-soft); --tone-strong: var(--accent-strong); }
.badge-success { --tone: var(--success); --tone-soft: var(--success-soft); --tone-strong: var(--success-strong); }
.badge-warning { --tone: var(--warning); --tone-soft: var(--warning-soft); --tone-strong: var(--warning-strong); }
.badge-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); --tone-strong: var(--danger-strong); }
.badge-info { --tone: var(--info); --tone-soft: var(--info-soft); --tone-strong: var(--info-strong); }

/* An alert: a tinted panel with a bar in its colour (info by default). */
.alert { --tone: var(--info); --tone-soft: var(--info-soft); padding: 14px 16px; border-radius: var(--radius-m); background: var(--tone-soft); border: 1px solid color-mix(in oklab, var(--tone), transparent 60%); border-left: 4px solid var(--tone); margin-bottom: 16px; }
.alert-info { --tone: var(--info); --tone-soft: var(--info-soft); }
.alert-success { --tone: var(--success); --tone-soft: var(--success-soft); }
.alert-warning { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.alert-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.empty { padding: 48px 24px; text-align: center; color: var(--text-muted); border: 2px dashed var(--line); border-radius: var(--radius-l); }

/* A flow's steps (brand/shared/base.css, .steps): numbered discs joined by a line, the step done ticked in orange and
   the current one named in full colour. On an <ol>, with aria-current="step" on the current item. */
.steps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; gap: 8px; counter-reset: step; flex-wrap: wrap; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; font-size: 14px; flex: 1 1 140px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-s); border: 2px solid var(--line-strong); flex: none; }
.steps li::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps li.done::before { content: "✓"; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.steps li[aria-current="step"] { color: var(--text); }
.steps li[aria-current="step"]::before { border-color: var(--accent); color: var(--accent-strong); }

/* Where a page sits (business, channel, section) and the business's sections. */
.breadcrumbs ol { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-faint); }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* Lists of things to pick or open (businesses, channels, members): rows in one panel, hairlines between. */
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.item-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 56px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.item-list > li:last-child { border-bottom: 0; }
.item-list .item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.item-list .item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.item-list .item-actions select { width: auto; padding: 6px 36px 6px 10px; }
.item-list .item-actions button { margin-top: 0; }
.item-list .item-actions .row { gap: 8px; flex-wrap: nowrap; }
.item-list .left-out { color: var(--text-faint); text-decoration: line-through; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--card); }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { color: var(--text-faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in oklab, var(--card), var(--text) 3%); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

dl.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; }
dl.details dt { color: var(--text-muted); }
dl.details dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }

@media (max-width: 640px) {
	dl.details { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	dl.details dd { margin-bottom: 8px; }
	/* A table becomes one card per row: each cell labelled by its column (data-label). */
	.table-wrap.cards { border: 0; background: none; }
	.table.cards thead { display: none; }
	.table.cards tr { display: block; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--card); }
	.table.cards td { display: block; border-bottom: 0; padding: 6px 14px; }
	.table.cards td.num { text-align: left; }
	.table.cards td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
	.button { width: 100%; }
	.button-small { width: auto; }
	.account-nav { width: 100%; }
	button { width: 100%; }
	.link-button { width: auto; }
}

/* From 980 px the side column is a sticky column the height of the window, with the account at its foot. */
@media (min-width: 980px) {
	.shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); align-content: stretch; }
	.side { position: sticky; top: 0; height: 100dvh; overflow-y: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; padding: 16px 12px; border-bottom: 0; border-inline-end: 1px solid var(--line); }
	.side .brand-lockup { padding: 0 8px; }
	.side .business { order: 0; flex: none; background: none; }
	.content { padding-top: 32px; padding-bottom: 96px; }
}

/* Under 980 px the sections are a tab bar fixed to the bottom: an icon above each name, scrolling sideways inside the
   bar itself if the names don't fit. The current one is in the accent. */
@media (max-width: 979px) {
	.side .sidenav {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 5;
		flex-direction: row;
		gap: 0;
		min-height: 64px;
		padding: 4px 8px max(4px, env(safe-area-inset-bottom));
		overflow-x: auto;
		background: var(--card);
		border-top: 1px solid var(--line);
	}
	/* Each at least as wide as its name (never shrunk into the next one's), sharing what is left over. */
	.side .sidenav a { flex: 1 0 auto; min-width: 48px; min-height: 56px; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 4px; font-size: 11px; font-weight: 600; color: var(--text-faint); white-space: nowrap; }
	.side .sidenav a svg { width: 24px; height: 24px; }
	.side .sidenav a:hover { background: none; color: var(--text); }
	.side .sidenav a[aria-current="page"] { background: none; color: var(--accent-strong); }
	.side .sidenav a[aria-current="page"] svg { color: inherit; }
	/* On the tab bar the count sits on its icon's corner. */
	.side .sidenav a { position: relative; }
	.side .sidenav .count { position: absolute; top: 2px; left: 50%; margin: 0 0 0 4px; }
}