/* =============================================================================
   CREATORS hub: design system (restyle of 4 November: minimal, one sans family)
   -----------------------------------------------------------------------------
   One file: tokens, base, shell, components, responsive rules. Screen-specific
   extras go in assets/css/views/<view>.css (loaded automatically when present).

   Look       quiet greyscale page, white cards without borders or shadows, one
              black highlight card, CREATORS orange only as a small accent
              (the word "hub" in the logo, highlighted bar or value, focus ring,
              toast check). Initial tiles are monochrome.
              Hatched tracks for the empty part of bars and progress.
   Type       Inter for text; Inter Tight for headings and big numbers, regular
              or medium weight with tight tracking (--tracking-*).
              --serif is kept as an alias of --display, so older rules that say
              font-family: var(--serif) now get the heading sans.

   Tokens  (:root)    --page --surface --surface-2 --surface-3 --ink --ink-2 --muted
                      --line --line-strong --orange --orange-text --orange-soft
                      --green-* --amber-* --red-* --hatch --hatch-dark
                      --display (--serif) --sans --mono
                      --tracking-title (-0.02em) --tracking-page (-0.035em) --tracking-number (-0.045em)
                      --radius-card --radius-inner --radius-input --shadow-card --shadow-pill --shadow-pop
   Breakpoints        1180 (grid spans collapse), 960 (sidebar becomes top bar),
                      760 (span-6 full width), 600 (phone)

   Layout
     .page-head > div > .page-title + .page-sub ; .page-actions        page title and actions
     .grid > .span-3 | -4 | -5 | -6 | -7 | -8 | -12                    12 columns, 16 px gap
     .stack (20 px) .stack--sm (12 px)   vertical rhythm
     .row                                 flex row, wraps, 12 px gap; .row--between
   Cards
     .card                 white, 28 px radius, no border, no shadow
     .card--dark           the black highlight card (use once per screen)
     .card--column         flex column; .card__foot sticks to the bottom
     .card__head > .card__title (+ .card__icon) ; .card__sub ; actions right
     .card__corner         put an .arrow-btn in the top-right corner
     .hero                 big intro card (.hero__eyebrow .hero__title .hero__text .hero__stats > .hero__stat)
     .stat                 KPI card: .stat__icon(--alert|--dark|--ok|--warn) .stat__label .stat__value > .stat__of ; .stat__note
     .panel                light grey box inside a card (like the small stat boxes of reference 3)
   Buttons (all are pills; use <a> or <button>)
     .btn (light grey) .btn--primary (black) .btn--ghost (white + hairline) .btn--danger (red)
     .btn--light (white on dark cards) .btn--sm (36 px) .btn--block
     .icon-btn             40 px round icon button, needs aria-label; .icon-btn--dark (solid black) .icon-btn--sm (36 px)
     .arrow-btn            40 px round "open" button with hub_icon('arrow-up-right')
   Tags and chips
     .tag .tag--actief | --achter | --geen-contact | --stopgezet | --neutral | --orange    (or PHP hub_tag($key))
                           soft pastel pills with dark text; --stopgezet is solid black
     .chip (+ .chip__dot)   .kbd
     .dot .dot--ok | --warn | --alert | --muted    small 8 px status dot
   Tables
     .table-wrap > table.table     tr[data-href] makes a whole row clickable (hub.js)
     .site-cell > (hub_site_thumb()) + div > .site-cell__name + .site-cell__domain
     .col-hide-md (hidden < 960) .col-hide-sm (hidden < 600) .show-sm (only < 600) .num (right aligned, tabular)
   Lists
     .list > .list__item  (.list__body > .list__title + .list__meta)   rows with hairlines
     .feed > .feed__item  (.badge-icon, .feed__text, .feed__when)       timeline
     .badge-icon .badge-icon--ok|warn|alert|neutral|dark   round pastel icon
     .thumb .thumb--lg      initials tile, light grey with dark initials (PHP hub_site_thumb())
   Progress and charts
     .progress > .progress__bar style="--value: 66%"     hatched track, solid value; .progress__bar--accent = orange
   Roles (plugin inc/roles.php; theme inc/ui.php)
     .lock-note             small lock + "Alleen voor Beheerders" next to a disabled control (PHP hub_lock_note($action))
     disabled controls      .btn/.icon-btn/.arrow-btn/.tab/.input/.select/.textarea with disabled or aria-disabled="true"
                            (PHP hub_disabled($action) prints both); hub.js never opens a dialog from them
   Forms
     .field > .label + .input | .select | .textarea + .hint ; .field--error + .field__error
     .check (label wrapping a checkbox or radio) ; input.switch (role="switch") ; .choice (big radio card)
     .alert .alert--error | --info | --ok
   Tabs (filters)
     .tabs > button.tab[aria-pressed] > .tab__count       active tab is solid black
   Action list
     .action-list > li > button.action-list__item (--danger)   a column of actions, e.g. in a dialog
   Code
     .code-line > code + .btn     one copyable line (e.g. the wp-config define)
   Dialog and toast (see hub.js)
     dialog.dialog > .dialog__head (.dialog__title + .dialog__text) .dialog__body .dialog__foot
     #hub-toast (in the footer partial); call hub.toast('…')
   Utilities
     .subhead (small muted heading inside a card)
     .muted .small .serif (= display font, tight) .mono .nowrap .link .text-orange .visually-hidden
     .empty (centered placeholder card) .empty--page (big, for 404-like pages)
   ========================================================================== */

/* Fonts: Inter and Inter Tight, self-hosted (variable, latin and latin-ext; SIL OFL, assets/fonts/LICENSE.md). The CSP allows no
   third-party origin (spec 11.4). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-latin.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: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-tight-latin.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; }

/* Tokens ------------------------------------------------------------------- */

:root {
	--page: #efefed;
	--surface: #ffffff;
	--surface-2: #f5f5f3;
	--surface-3: #ebebe8;
	--ink: #141414;
	--ink-2: #3a3a38;
	--muted: #656562;
	--line: #ebebe8;
	--line-strong: #d6d6d2;

	--orange: #ff4d00;
	--orange-text: #c73c00;
	--orange-soft: #ffe6d9;

	--green-bg: #cdeed8;
	--green-ink: #0f4a26;
	--amber-bg: #fbe6a6;
	--amber-ink: #4d3500;
	--red: #b42318;
	--red-bg: #fbd9d4;
	--red-ink: #6e150c;

	--focus: #c73c00;

	/* diagonal stripes for the empty part of bars and progress */
	--hatch: repeating-linear-gradient(-45deg, #d4d4d0 0 1px, transparent 1px 7px);
	--hatch-dark: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 7px);

	--radius-card: 28px;
	--radius-inner: 18px;
	--radius-input: 14px;

	--shadow-card: none;
	--shadow-pill: 0 1px 2px rgba(20, 20, 20, 0.06);
	--shadow-pop: 0 2px 6px rgba(20, 20, 20, 0.06), 0 32px 64px -24px rgba(20, 20, 20, 0.28);

	--display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--serif: var(--display); /* kept for older rules; there is no serif any more */
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--tracking-title: -0.02em;
	--tracking-page: -0.035em;
	--tracking-number: -0.045em;

	--gutter: 24px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* old page tokens, kept as aliases */
	--page-warm: var(--page);
	--page-cool: var(--page);
}

/* Base --------------------------------------------------------------------- */

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

html {
	min-height: 100%;
	background: var(--page);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s var(--ease);
}

img, svg {
	display: block;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

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

::selection {
	background: #ffd4bd;
}

.icon {
	flex: none;
}

/* Running-text links keep a thin underline at rest; hover changes colour only. */
.link,
p a:not([class]),
li a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: currentColor;
}

.link:hover,
p a:not([class]):hover,
li a:not([class]):hover {
	color: var(--orange-text);
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -80px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-weight: 600;
}

.skip-link:focus {
	top: 16px;
}

/* Utilities ---------------------------------------------------------------- */

.muted { color: var(--muted); }
.small { font-size: 13px; }
.serif { font-family: var(--display); font-weight: 400; letter-spacing: var(--tracking-page); }
.mono { font-family: var(--mono); font-size: 0.92em; }
.nowrap { white-space: nowrap; }
.text-orange { color: var(--orange-text); }

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.stack { display: grid; gap: 20px; }
.stack--sm { gap: 12px; }

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.row--between { justify-content: space-between; }
.row--nowrap { flex-wrap: nowrap; }

/* a small muted heading inside a card, above a group of rows */
.subhead {
	margin: 18px 0 2px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted);
}

.card__head + .subhead {
	margin-top: 0;
}

.bullets {
	display: grid;
	gap: 4px;
	margin-top: 6px;
	padding-left: 18px;
	list-style: disc;
	font-size: 14px;
}

/* .show-sm: only below 600 px (the counterpart of .col-hide-sm) */
.show-sm {
	display: none !important; /* a utility: wins over component display rules */
}

.empty {
	padding: 48px 24px;
	text-align: center;
}

.empty p:not([class]) {
	color: var(--muted);
}

.card.empty--page {
	padding-block: 72px;
}

.empty--page > .badge-icon {
	margin: 0 auto 4px;
}

.empty--page .page-title {
	margin-top: 18px;
}

.empty--page .row {
	justify-content: center;
	margin-top: 28px;
}

/* Shell -------------------------------------------------------------------- */

.shell {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	gap: 16px;
	max-width: 1680px;
	margin: 0 auto;
	padding: 16px 24px 16px 16px;
}

.shell__main {
	min-width: 0;
	padding: 0 0 0 8px;
}

.main:focus {
	outline: none;
}

/* Sidebar */

.sidebar {
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 32px);
	padding: 20px 12px 12px;
	border-radius: var(--radius-card);
	background: var(--surface);
}

.sidebar__top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 6px 0 10px;
}

.sidebar .sidebar__toggle {
	display: none;
}

.sidebar__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	margin-top: 18px;
	overflow-y: auto;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

/* the CREATORS hub wordmark (partials/brand-mark.php); about 8.5 : 1 */
.brand__logo {
	width: auto;
	height: 19px;
}

.brand--accent .logo__hub {
	fill: var(--orange);
}

.login__brand .brand__logo {
	height: 22px;
}

/* .brand__word and .brand__hub: the old text logo, kept for older markup */
.brand__word {
	font-family: var(--display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.04em;
}

.brand__hub {
	margin-left: -5px;
	font-family: var(--display);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: var(--tracking-title);
	color: var(--muted);
}

.nav__label {
	margin: 18px 14px 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted);
}

.nav__list {
	display: grid;
	gap: 2px;
}

.nav__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-2);
	transition: color 0.15s var(--ease);
}

.nav__item .icon {
	color: var(--muted);
	transition: color 0.15s var(--ease);
}

.nav__item:hover,
.nav__item:hover .icon {
	color: var(--orange-text);
}

.nav__item.is-active,
.nav__item.is-active:hover {
	background: var(--ink);
	color: #fff;
}

.nav__item.is-active .icon {
	color: #fff;
}

.nav__count {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.nav__item.is-locked,
.nav__item.is-locked:hover,
.nav__item.is-locked .icon {
	color: #9b9b97;
	cursor: not-allowed;
}

.nav__item.is-active .nav__count {
	color: rgba(255, 255, 255, 0.72);
}

.sidebar__account {
	margin-top: auto;
	padding-top: 12px;
}

.user-card {
	padding: 8px;
	border-radius: 22px;
	background: var(--surface-2);
}

.user-card__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
}

.user-card__text {
	display: grid;
	min-width: 0;
	flex: 1;
	line-height: 1.3;
}

a.user-card__text:hover .user-card__name,
a.user-card__text:hover .user-card__mail {
	color: var(--orange-text);
}

.user-card__name {
	font-size: 14px;
	font-weight: 600;
}

.user-card__mail {
	overflow: hidden;
	font-size: 12.5px;
	color: var(--muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-card .icon-btn {
	background: var(--surface);
}

/* Top bar */

.topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
}

.search {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	max-width: 520px;
	height: 52px;
	padding: 0 8px 0 18px;
	border-radius: 999px;
	background: var(--surface);
	color: var(--muted);
}

.search:focus-within {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: 15px;
}

.search__input:focus {
	outline: none;
}

.search__input::placeholder {
	color: var(--muted);
}

.search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.kbd {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--ink-2);
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.topbar__end {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* Page head */

.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 24px;
}

.page-title {
	font-family: var(--display);
	font-size: 48px;
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: var(--tracking-page);
}

.page-sub {
	margin-top: 8px;
	font-size: 15.5px;
	color: var(--muted);
}

.page-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Grid */

.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }

/* Chips and tags ----------------------------------------------------------- */

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--surface);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
}

.chip__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
}

.tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
	vertical-align: middle;
}

.tag--actief { background: var(--green-bg); color: var(--green-ink); }
.tag--achter { background: var(--amber-bg); color: var(--amber-ink); }
.tag--geen-contact { background: var(--red-bg); color: var(--red-ink); }
.tag--stopgezet { background: var(--ink); color: #fff; }
.tag--neutral { background: var(--surface-3); color: var(--ink-2); }
.tag--orange { background: var(--orange-soft); color: #6b2300; }

.dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--muted);
}

.dot--ok { background: #2f9e5b; }
.dot--warn { background: #e09a1a; }
.dot--alert { background: var(--red); }
.dot--muted { background: var(--line-strong); }

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--surface-3);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition: color 0.15s var(--ease), background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.btn:hover {
	color: var(--orange-text);
}

.btn--primary {
	background: var(--ink);
	color: #fff;
}

.btn--primary:hover {
	background: #2e2e2c;
	color: #fff;
}

.btn--ghost {
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn--danger {
	background: var(--red);
	box-shadow: none;
	color: #fff;
}

.btn--danger:hover {
	background: #96190f;
	color: #fff;
}

.btn--light {
	background: #fff;
	box-shadow: none;
	color: var(--ink);
}

.btn--sm {
	min-height: 36px;
	padding: 0 14px;
	font-size: 13.5px;
}

.btn--block {
	width: 100%;
}

/* Disabled: an action the role may not do (inc/roles.php). Pair it with hub_lock_note(). */
.btn:disabled,
.btn[aria-disabled="true"],
.icon-btn:disabled,
.icon-btn[aria-disabled="true"],
.arrow-btn[aria-disabled="true"],
.tab:disabled,
.input:disabled,
.select:disabled,
.textarea:disabled {
	background: var(--surface-2);
	box-shadow: none;
	color: #9b9b97;
	cursor: not-allowed;
}

.btn[aria-disabled="true"],
.icon-btn[aria-disabled="true"],
.arrow-btn[aria-disabled="true"] {
	pointer-events: none;
}

input.switch:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* "Alleen voor Beheerders" next to a disabled control */
.lock-note {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted);
	white-space: nowrap;
}

.lock-note .icon {
	flex: none;
}

.icon-btn,
.arrow-btn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--ink);
	transition: color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.icon-btn:hover,
.arrow-btn:hover {
	color: var(--orange-text);
}

.icon-btn--dark,
.icon-btn--dark:hover {
	background: var(--ink);
	box-shadow: none;
	color: #fff;
}

.icon-btn--sm {
	width: 36px;
	height: 36px;
}

.arrow-btn .icon {
	width: 18px;
	height: 18px;
}

.card--dark .arrow-btn {
	background: #fff;
	color: var(--ink);
}

.card--dark .arrow-btn:hover {
	color: var(--orange-text);
}

/* Cards -------------------------------------------------------------------- */

.card {
	position: relative;
	min-width: 0;
	padding: 24px;
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}

.card--dark {
	background: var(--ink);
	color: #fff;
}

.card--dark .muted {
	color: rgba(255, 255, 255, 0.7);
}

.card--column {
	display: flex;
	flex-direction: column;
}

.card__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
}

.card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.card__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--display);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--tracking-title);
}

.card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--ink);
}

.card__sub {
	margin-top: 4px;
	font-size: 14px;
	color: var(--muted);
}

.card__corner {
	position: absolute;
	top: 20px;
	right: 20px;
}

.panel {
	padding: 12px 14px;
	border-radius: 16px;
	background: var(--surface-2);
}

/* Hero (calm intro card) */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 340px;
	padding: 24px 28px 24px;
	border-radius: var(--radius-card);
	background: var(--surface);
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 4px 14px 4px 4px;
	border-radius: 999px;
	background: var(--surface-2);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink-2);
}

.hero__eyebrow-icons {
	display: flex;
}

.hero__eyebrow-icons span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	box-shadow: 0 0 0 2px var(--surface-2);
}

.hero__eyebrow-icons span + span {
	margin-left: -6px;
}

.hero__title {
	margin-top: auto;
	padding-top: 32px;
	font-family: var(--display);
	font-size: 52px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--tracking-page);
}

.hero__title em {
	font-style: normal;
	color: var(--muted);
	white-space: nowrap;
}

.hero__text {
	max-width: 46ch;
	margin-top: 12px;
	font-size: 15px;
	color: var(--muted);
}

.hero__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 22px;
}

.hero__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px 12px;
	border-radius: 16px;
	background: var(--surface-2);
}

.hero__stat-label {
	font-size: 12.5px;
	color: var(--muted);
}

.hero__stat-value {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: var(--tracking-title);
}

/* KPI */

.stat {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 20px 22px;
}

.stat__icon,
.badge-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--ink);
}

.stat__icon--ok, .badge-icon--ok { background: var(--green-bg); color: var(--green-ink); }
.stat__icon--warn, .badge-icon--warn { background: var(--amber-bg); color: var(--amber-ink); }
.stat__icon--alert, .badge-icon--alert { background: var(--red-bg); color: var(--red-ink); }
.stat__icon--dark, .badge-icon--dark { background: var(--ink); color: #fff; }
.badge-icon--neutral { background: var(--surface-2); color: var(--ink-2); }

.stat__label {
	margin-top: 22px;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

.stat__value {
	margin-top: 2px;
	font-family: var(--display);
	font-size: 64px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--tracking-number);
}

.stat__of {
	margin-left: 6px;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--muted);
	letter-spacing: 0;
}

.stat__note {
	margin-top: 14px;
	padding: 9px 12px;
	border-radius: 14px;
	background: var(--surface-2);
	font-size: 13px;
	color: var(--ink-2);
}

/* Progress and bars */

.progress {
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--hatch), var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line);
}

.progress__bar {
	width: var(--value, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--ink);
}

.progress__bar--accent,
.card--dark .progress__bar {
	background: var(--orange);
}

.card--dark .progress {
	background: var(--hatch-dark);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Thumbs */

.thumb {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--surface-3);
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.thumb--lg {
	width: 56px;
	height: 56px;
	font-size: 17px;
}

/* Every tile looks the same: light grey with dark initials (David, 4 November). The .thumb--t0…t5 classes that
   hub_site_thumb() prints stay, but no longer change the look. */

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

.list__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}

.list__item:first-child {
	border-top: 0;
	padding-top: 2px;
}

.list__body {
	display: grid;
	flex: 1;
	min-width: 0;
	gap: 2px;
}

.list__title {
	font-size: 14.5px;
	font-weight: 600;
}

.list__meta {
	font-size: 13px;
	color: var(--muted);
}

.feed__item {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 14px;
	padding-bottom: 18px;
}

.feed__item:last-child {
	padding-bottom: 0;
}

.feed__item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 38px;
	bottom: 6px;
	left: 15.5px;
	width: 1px;
	background: var(--line);
}

.feed__item .badge-icon {
	width: 32px;
	height: 32px;
}

.feed__text {
	padding-top: 5px;
	font-size: 14px;
	line-height: 1.45;
}

.feed__text a:hover {
	color: var(--orange-text);
}

.feed__when {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--muted);
}

/* Logboek: icon + text in one cell */
.log-what {
	display: flex;
	align-items: center;
	gap: 12px;
}

.log-what .badge-icon {
	width: 32px;
	height: 32px;
}

.feed__who {
	font-weight: 500;
	color: var(--ink-2);
}

/* Tables ------------------------------------------------------------------- */

.table-wrap {
	overflow-x: auto;
	margin: 0 -8px;
	padding: 0 8px;
}

.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}

.table th {
	padding: 11px 16px;
	background: var(--surface-2);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted);
	text-align: left;
	white-space: nowrap;
}

.table th:first-child { border-radius: 999px 0 0 999px; }
.table th:last-child { border-radius: 0 999px 999px 0; }

.table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.table tbody tr:last-child td {
	border-bottom: 0;
}

.table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.table td:last-child,
.table th:last-child {
	width: 1%;
}

.table tr[data-href] {
	cursor: pointer;
}

.table tr[data-href]:hover .site-cell__name,
.table tr[data-href]:hover .arrow-btn {
	color: var(--orange-text);
}

.site-cell {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.site-cell__name {
	display: block;
	font-weight: 600;
	transition: color 0.15s var(--ease);
}

.site-cell__domain {
	display: block;
	font-size: 13px;
	color: var(--muted);
	overflow-wrap: break-word;
}

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

.field {
	display: grid;
	gap: 8px;
}

.label {
	font-size: 14px;
	font-weight: 500;
}

.label .muted {
	font-weight: 400;
}

.input,
.select,
.textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-input);
	background: var(--surface);
	font-size: 15px;
	color: var(--ink);
	transition: border-color 0.15s var(--ease);
}

.textarea {
	min-height: 120px;
	padding: 12px 16px;
	resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
	color: var(--muted);
}

.input:hover,
.select:hover,
.textarea:hover {
	border-color: #b4b4af;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
	border-color: var(--ink);
	outline-offset: 1px;
}

.select {
	padding-right: 44px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.hint {
	font-size: 13px;
	color: var(--muted);
}

.field--error .input,
.field--error .select,
.field--error .textarea {
	border-color: var(--red);
}

.field__error {
	font-size: 13px;
	font-weight: 500;
	color: var(--red);
}

.check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 14.5px;
	cursor: pointer;
}

.check input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ink);
}

input.switch {
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
	margin: 0;
	border-radius: 999px;
	background: var(--line-strong);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
}

input.switch::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(20, 20, 20, 0.25);
	transition: transform 0.2s var(--ease);
}

input.switch:checked {
	background: var(--ink);
}

input.switch:checked::before {
	transform: translateX(18px);
}

.choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-inner);
	cursor: pointer;
	transition: border-color 0.15s var(--ease);
}

.choice:hover {
	border-color: #b4b4af;
}

.choice:has(input:checked) {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

.choice input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--ink);
}

.alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius-input);
	font-size: 14px;
	line-height: 1.45;
}

.alert .icon {
	margin-top: 1px;
}

.alert--error { background: var(--red-bg); color: var(--red-ink); }
.alert--info { background: var(--surface-3); color: var(--ink-2); }
.alert--ok { background: var(--green-bg); color: var(--green-ink); }

/* Tabs --------------------------------------------------------------------- */

.tabs {
	display: inline-flex;
	gap: 6px;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--surface);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
	transition: color 0.15s var(--ease);
}

.card .tab {
	background: var(--surface-2);
}

.tab:hover {
	color: var(--orange-text);
}

.tab[aria-pressed="true"],
.tab.is-active,
.card .tab[aria-pressed="true"],
.card .tab.is-active {
	background: var(--ink);
	color: #fff;
}

.tab__count {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--surface-3);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.tab[aria-pressed="true"] .tab__count,
.tab.is-active .tab__count {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* Code line ---------------------------------------------------------------- */

.code-line {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 16px;
	border-radius: var(--radius-input);
	background: var(--surface-2);
}

.code-line code {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	font-family: var(--mono);
	font-size: 13px;
	white-space: nowrap;
	scrollbar-width: thin;
}

.code-line .btn {
	background: var(--surface);
}

/* Dialog ------------------------------------------------------------------- */

.dialog {
	width: min(520px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: var(--shadow-pop);
	color: var(--ink);
}

.dialog::backdrop {
	background: rgba(20, 20, 20, 0.32);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.dialog[open] {
	animation: hub-pop 0.22s var(--ease);
}

.dialog__head {
	padding: 28px 28px 0;
}

.dialog__title {
	font-family: var(--display);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: var(--tracking-page);
}

.dialog__text {
	margin-top: 10px;
	color: var(--muted);
}

.dialog__body {
	display: grid;
	gap: 16px;
	padding: 20px 28px;
}

.dialog__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	padding: 4px 28px 28px;
}

@keyframes hub-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* Action list (a column of actions inside a dialog or card) ----------------- */

.action-list {
	display: grid;
	gap: 4px;
}

.action-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--radius-input);
	background: var(--surface-2);
	font-size: 14.5px;
	font-weight: 500;
	text-align: left;
	transition: color 0.15s var(--ease);
}

.action-list__item:hover {
	color: var(--orange-text);
}

.action-list__item--danger {
	color: var(--red);
}

.action-list__item:disabled {
	color: #9b9b97;
	cursor: not-allowed;
}

.action-list__item .lock-note {
	margin-left: auto;
}

/* Toast -------------------------------------------------------------------- */

.toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 200;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 32px);
	padding: 12px 20px 12px 14px;
	border-radius: 999px;
	background: var(--ink);
	box-shadow: var(--shadow-pop);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.toast:empty {
	display: none;
}

.toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.toast .icon {
	padding: 3px;
	border-radius: 50%;
	background: var(--orange);
	color: #fff;
}

/* Dashboard ---------------------------------------------------------------- */

.hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 24px;
	flex: 1;
}

.hero__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.release {
	display: flex;
	flex-direction: column;
}

.release__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
}

.release__label .badge-icon {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.release__version {
	margin-top: 28px;
	font-family: var(--display);
	font-size: 80px;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: var(--tracking-number);
}

.release__meta {
	margin-top: 10px;
	font-size: 14px;
}

.release__rollout {
	margin-top: auto;
	padding-top: 24px;
}

.release__rollout-head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 14px;
}

.release__foot {
	margin-top: 20px;
}

/* Login -------------------------------------------------------------------- */

.login {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 16px;
	min-height: 100vh;
	padding: 16px;
}

.login__panel {
	min-height: calc(100vh - 32px);
	padding: 0;
	overflow: hidden;
}

/* The white logo, top left, above the network. */
.login__brand {
	position: absolute;
	top: 32px;
	left: 36px;
	z-index: 1;
	color: #fff;
}

/* The network animation (assets/js/views/login-network.js) fills the panel. */
.login-network {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.login__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
}

.login__form {
	display: grid;
	gap: 20px;
	width: min(400px, 100%);
}

.login__title {
	font-family: var(--display);
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--tracking-page);
}

.login__step {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
}

.input--code {
	font-family: var(--mono);
	font-size: 20px;
	letter-spacing: 0.2em;
	text-align: center;
}

.input--code::placeholder {
	letter-spacing: 0.2em;
}

.other-ways {
	padding-top: 16px;
	border-top: 1px solid var(--line-strong);
}

.other-ways__label {
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--muted);
}

.other-ways__list {
	display: grid;
}

.other-ways__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	font-size: 14.5px;
	font-weight: 500;
}

.other-ways__link:hover {
	color: var(--orange-text);
}

.other-ways__link[aria-disabled="true"] {
	color: #9b9b97;
	cursor: not-allowed;
}

.other-ways__link .lock-note {
	margin-left: auto;
}

/* The passkey companion's error box on the code step (spec 7.2): only visible once it has text */
.login__error:empty {
	display: none;
}

/* The QR code of a new app secret, drawn by hub.js into div.qr[data-qr] */
.qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* A POST form around one button (action lists, "Afmelden") adds no box of its own */
.action-list form,
.list__item > form,
.card__head > form,
.card__foot > form {
	display: contents;
}

.steps-mini {
	display: grid;
	gap: 20px;
	padding-left: 22px;
	list-style: decimal;
}

.steps-mini li::marker {
	font-weight: 600;
}

.steps-mini .hint {
	margin: 2px 0 10px;
}

.qr-box {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px;
	border-radius: var(--radius-inner);
	background: var(--surface);
}

.qr {
	flex: none;
	width: 132px;
	height: 132px;
	color: var(--ink);
}

.qr-box__key {
	display: grid;
	gap: 6px;
	justify-items: start;
}

.qr-box__secret {
	font-size: 15px;
	letter-spacing: 0.04em;
}

.backup-codes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 16px;
	font-size: 15px;
}

.backup-codes__actions {
	margin-top: 12px;
}

.login__intro {
	margin-top: 10px;
	color: var(--muted);
}

.login__foot {
	margin-top: 36px;
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1180px) {
	.span-4, .span-5, .span-7, .span-8 { grid-column: 1 / -1; }
	.span-3 { grid-column: span 6; }
}

@media (max-width: 960px) {
	.shell {
		display: block;
		padding: 12px 16px 32px;
	}

	.shell__main {
		padding: 0;
	}

	.sidebar {
		top: 12px;
		z-index: 50;
		height: auto;
		max-height: calc(100vh - 24px);
		padding: 8px;
		border-radius: 26px;
		box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 8px 24px -16px rgba(20, 20, 20, 0.25);
	}

	.sidebar__top {
		padding: 0 0 0 6px;
	}

	.sidebar .sidebar__toggle {
		display: inline-flex;
		margin-left: auto;
	}

	.sidebar__toggle {
		place-items: center;
	}

	.sidebar__toggle-close,
	.sidebar[data-open] .sidebar__toggle-open {
		display: none;
	}

	.sidebar[data-open] .sidebar__toggle-close {
		display: block;
	}

	.sidebar__body {
		display: none;
		margin-top: 8px;
		padding: 0 4px 6px;
	}

	.sidebar[data-open] .sidebar__body {
		display: flex;
	}

	.topbar {
		margin: 16px 0 24px;
	}

	.search {
		max-width: none;
	}

	.search__kbd,
	.topbar__end {
		display: none;
	}

	.col-hide-md {
		display: none;
	}

	.login {
		grid-template-columns: 1fr;
		align-content: start;
		gap: 8px;
		padding: 12px;
	}

	/* a short band above the form */
	.login__panel {
		height: 132px;
		min-height: 0;
	}

	.login__main {
		justify-content: flex-start;
		padding: 28px 12px 24px;
	}
}

@media (max-width: 760px) {
	.span-6 { grid-column: 1 / -1; }

	.hero__layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 600px) {
	body {
		font-size: 14.5px;
	}

	.shell {
		padding: 10px 12px 28px;
	}

	.grid {
		gap: 10px;
	}

	.page-title {
		font-size: 38px;
	}

	.brand {
		gap: 8px;
	}

	.brand__logo {
		height: 15px;
	}

	.login__brand {
		top: 18px;
		left: 20px;
	}

	.login__brand .brand__logo {
		height: 16px;
	}

	.brand__word {
		font-size: 14px;
		letter-spacing: 0.03em;
	}

	.brand__hub {
		font-size: 14px;
	}


	.card {
		padding: 20px;
		border-radius: 24px;
	}

	.card__title {
		font-size: 19px;
	}

	.hero {
		min-height: 0;
		padding: 20px;
		border-radius: 24px;
	}

	.hero__title {
		padding-top: 40px;
		font-size: 40px;
	}

	.hero__stat {
		padding: 9px 11px 10px;
		border-radius: 14px;
	}

	.hero__stat-value {
		font-size: 20px;
	}

	.hero__stat-label {
		font-size: 12px;
		line-height: 1.3;
	}

	.stat {
		padding: 16px;
	}

	.stat__label {
		margin-top: 14px;
		font-size: 13px;
	}

	.stat__value {
		font-size: 48px;
	}

	.stat__note {
		display: none;
	}

	.release__version {
		font-size: 64px;
	}

	.col-hide-sm {
		display: none;
	}

	.show-sm {
		display: revert !important;
	}

	.site-cell__domain.show-sm {
		display: block !important;
	}

	.site-cell__domain {
		overflow-wrap: anywhere;
	}

	.table th,
	.table td {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* hidden first or last columns would leave a square pill: plain labels on phones */
	.table th {
		background: none;
		border-bottom: 1px solid var(--line);
	}

	.dialog__head { padding: 24px 20px 0; }
	.dialog__body { padding: 16px 20px; }
	.dialog__foot { padding: 4px 20px 20px; }
	.dialog__foot .btn { flex: 1; }

}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}