:root {
  /* A card's padding above and below; lists that run to its edges
     reach out by as much. Compact mode makes it smaller. */
  --card-pad-y: 1.25rem;
  /* Colours are given as light-dark(light, dark). The scheme follows the
     system unless the user picked one in their account settings, which
     sets data-theme on <html>. Light is Nordsee: slate and cool greys
     with a lighthouse red for what waits; dark is its night watch. */
  color-scheme: light dark;

  --bg: light-dark(#edf0f2, #0f151b);
  --surface: light-dark(#ffffff, #161e26);
  --surface-2: light-dark(#f5f7f8, #1a232c);
  --hover: light-dark(#eef1f3, #1e2832);
  --text: light-dark(#17222c, #e4e9ee);
  --text-2: light-dark(#36444f, #b6c0c9);
  --muted: light-dark(#64717c, #84909b);
  --border: light-dark(#d3dae0, #26323e);
  --accent: light-dark(#2d5875, #7fb0d6);
  --accent-hover: light-dark(#1f4259, #a4c8e4);
  --accent-soft: light-dark(#e0e9ef, #1b2c3a);
  --accent-text: light-dark(#ffffff, #0f151b);
  --gold: light-dark(#b7791f, #d9a845);
  --level-track: var(--border);
  --danger: light-dark(#b42318, #f08a8a);
  --danger-bg: light-dark(#fde7e4, #3a1a1e);
  --success: light-dark(#067647, #5fcf9c);
  --success-bg: light-dark(#dcf5e7, #12302a);
  --warning: light-dark(#93500a, #eebd62);
  --warning-bg: light-dark(#fdefd8, #382b14);
  --neutral-bg: light-dark(#e5e9ec, #1f2933);
  --sidebar: light-dark(#ffffff, #121a21);
  /* The band across the top of each page, with a red rule beneath; red
     also marks what waits. */
  --band:
    repeating-linear-gradient(176deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, light-dark(#273644, #0b1117) 0%, light-dark(#3f5568, #1b2632) 100%);
  --band-muted: light-dark(#b6c4cf, #93a3b2);
  /* The area of work in the sidebar: the current entry and the heading
     of its group. Recruiting keeps the slate; sales has its own colours
     below. */
  --area: var(--accent);
  --area-soft: var(--accent-soft);
  --area-mark: var(--area);
  --signal: #c8102e;
  --signal-hover: #a70d26;
  /* The main action of a page or form, everywhere the same: the red of
     the rule beneath the band. */
  --primary: var(--signal);
  --primary-hover: var(--signal-hover);
  --primary-text: #ffffff;
  /* The logo: a little band, a step lighter in the dark so that it stands
     apart from the sidebar. */
  --logo: light-dark(#273644, #3f5568);
  --logo-rule: var(--signal);
  /* Fields of work, apart from the colours of status. */
  --field-industrial: light-dark(#4a5bd4, #8d9bf5);
  --field-commercial: light-dark(#0b7f7a, #45c4bb);
  --field-technical: light-dark(#7b46c8, #b18ef2);
  --field-care: light-dark(#b0337e, #ee86c2);
  --field-other: var(--muted);
  /* Employers in the job market, in the list and on the map. */
  --status-new: var(--accent);
  --status-lead: var(--warning);
  --status-customer: var(--success);
  --status-declined: var(--muted);
  --status-refuses: var(--danger);
  /* The practice firm and its tours: violet, apart from everything
     that is real. */
  --coach: light-dark(#6b46e5, #8466f7);
  --coach-strong: light-dark(#5631d6, #9a82ff);
  --coach-soft: light-dark(#f2eeff, #231c3b);
  --coach-text: #ffffff;
  --radius: 4px;
  --radius-sm: 6px;
  /* Cards and buttons stand apart by their borders. */
  --shadow: none;
  --shadow-color: light-dark(rgb(16 24 40 / 4%), transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Sales: petrol, in the band and the sidebar, so that a change between
   sales and recruiting shows at a glance. The red rule and the main
   actions stay alike everywhere. */
[data-area="sales"] {
  --band:
    repeating-linear-gradient(176deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, light-dark(#163b3b, #081413) 0%, light-dark(#2a5c59, #14302e) 100%);
  --band-muted: light-dark(#b0cbc8, #8fb0ac);
  --area: light-dark(#1b6b65, #6cc4b9);
  --area-soft: light-dark(#dcecea, #142a29);
  --area-mark: var(--area);
}

/* Contrast: ink on paper, with thick lines, hard offset shadows and yellow
   for what needs attention. Its component rules are at the end. */
:root[data-theme="contrast"] {
  color-scheme: light;

  --ink: #14142b;
  --bg: #eceef3;
  --surface: #ffffff;
  --surface-2: #f3f3fa;
  --hover: #fff3b0;
  --text: var(--ink);
  --text-2: #2c2c4a;
  --muted: #4a4a68;
  --border: var(--ink);
  --accent: var(--ink);
  --accent-hover: #000000;
  --accent-soft: #ffd84d;
  --gold: #7a4f00;
  --level-track: #d6d6e2;
  --accent-text: #ffffff;
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-text: var(--accent-text);
  --danger: #a1132c;
  --danger-bg: #ffd6dc;
  --success: #0f6630;
  --success-bg: #c9f5d6;
  --warning: var(--ink);
  --warning-bg: #ffd84d;
  --neutral-bg: var(--bg);
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 3px 3px 0 var(--ink);
  --sidebar: var(--surface);
  --logo: var(--ink);
  --logo-rule: #ffd84d;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
  --display: "Space Grotesk", var(--font);
  /* Accent and warning are ink here, so the statuses get colours of
     their own that stand apart on white and on the map. */
  --status-new: #2f54eb;
  --status-lead: #f08c00;
  --status-customer: #12a150;
  --status-declined: #9a9ab0;
  --status-refuses: #e03150;
  --coach: #5b2ee0;
  --coach-strong: #4a1fd0;
  --coach-soft: #e6dcff;
}

/* Compact mode keeps the type as it is and takes space out where it adds
   up: the padding of cards, rows of tables and lists, the gaps between
   cards and above the page. */
:root[data-density="compact"] { --card-pad-y: .875rem; }
:root[data-density="compact"] body { line-height: 1.4; }
:root[data-density="compact"] .content { padding-top: 1rem; }
:root[data-density="compact"] .page-header { margin-bottom: .875rem; }
:root[data-density="compact"] h1 { font-size: 1.4375rem; }
:root[data-density="compact"] .table th,
:root[data-density="compact"] .table td { padding-block: .375rem; }
:root[data-density="compact"] :is(.task, .recent li) { padding-block: .5rem; }
:root[data-density="compact"] .matches > li { padding-block: .5rem; }
:root[data-density="compact"] .tabs { margin-bottom: .75rem; }
:root[data-density="compact"] .tabs a { padding-block: .375rem .5rem; }
:root[data-density="compact"] :is(.stack, .detail-grid) { gap: .75rem; }
:root[data-density="compact"] .detail-grid + .card { margin-top: .75rem; }
:root[data-density="compact"] .detail-section + .detail-section { margin-top: 1.5rem; }
:root[data-density="compact"] .facts { row-gap: .375rem; }
:root[data-density="compact"] .field { margin-bottom: .75rem; }
:root[data-density="compact"] .card > .field-row:last-child { margin-bottom: -.75rem; }
:root[data-density="compact"] .mainnav a { height: 1.875rem; }
:root[data-density="compact"] :is(.stat, .stage-counts a) { gap: .125rem; padding-block: .5rem; }
:root[data-density="compact"] :is(.stat-value, .stage-count-value) { font-size: 1.5rem; }
:root[data-density="compact"] :is(.dashboard-side, .dashboard-grid) { gap: .75rem; }
:root[data-density="compact"] .stage-counts-card { margin-bottom: .75rem; }

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

/* Keeps the layout from shifting between pages with and without scrollbar. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: .875rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: .9375rem; font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

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

.logo {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.logo-mark { width: 1.75rem; height: 1.75rem; flex: none; }
.logo-ground { fill: var(--logo); }
.logo-rule { fill: var(--logo-rule); }
.logo-bubble { fill: #ffffff; }

/* Layout */

/* Sign-in and other pages without navigation: a card in the middle. */
.center {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: radial-gradient(75rem 37.5rem at 50% -12.5rem, var(--accent-soft), transparent), var(--bg);
}

.center > .card, .center > .stack > .card { padding: 1.75rem; }
.center .logo { justify-content: center; width: 100%; margin-bottom: 1.25rem; }
.center h2 { font-size: 1.25rem; }

/* Development only: users to sign in as with one click. */
.dev-logins h2 { font-size: .9375rem; }
.dev-logins h3 { margin: 1rem 0 .375rem; font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dev-logins form + form { margin-top: .25rem; }
.dev-logins button {
  display: grid;
  justify-content: stretch;
  justify-items: start;
  width: 100%;
  height: auto;
  padding: .375rem .75rem;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}
.dev-logins button:hover { background: var(--hover); color: var(--text); border-color: var(--border); }
.dev-logins button .muted { font-size: .75rem; font-weight: 400; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--card-pad-y) 1.25rem;
}

.card h2 { font-size: .9375rem; }
.card > * + h2 { margin-top: 1.5rem; }
/* Fields below a heading keep the distance they have below a legend. */
.card h2:has(+ :is(.field, .field-row, .plain-fieldset)) { margin-bottom: 1rem; }
.card h2 + .hint { margin: -.25rem 0 1rem; }
.card h2 + .hint + .hint { margin-bottom: 1rem; }
.card h2 + .hint:last-child { margin-bottom: 0; }
/* The card's padding is enough below its last field. A row's fields keep
   their margin to stay apart when they wrap. */
.card > .field:last-child { margin-bottom: 0; }
.card > .field-row:last-child { margin-bottom: -1rem; }
.facts + .hint { margin-top: .75rem; }
.facts + .field, .facts + .alert { margin-top: 1.25rem; }

.narrow { width: 100%; max-width: 25rem; }

/* Forms */
.field { display: grid; gap: .375rem; align-content: start; margin-bottom: 1rem; min-width: 0; }
.field input, .field select, .field textarea { width: 100%; }
label { font-weight: 600; font-size: .8125rem; color: var(--text-2); }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .625rem;
  box-shadow: inset 0 1px 1px var(--shadow-color);
}

input:not([type="checkbox"], [type="radio"], [type="file"]), select { height: 2.25rem; padding-block: 0; }

/* Selects draw their own arrow instead of the browser's, which sits at the
   very edge. The combobox toggle uses the same one. Two half-filled
   squares form the chevron, so it follows the colour scheme. */
select, .combobox-toggle {
  --chevron:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 1.0625rem) 50% / .3125rem .3125rem no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - .75rem) 50% / .3125rem .3125rem no-repeat;
}

/* Selects are filled rather than framed, their chevron in a small square
   of the accent, so that they read as a choice rather than a field to
   type in. Long ones open a list of their own (.pick). */
select, .pick-button {
  --chevron-soft:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%) calc(100% - 1.0625rem) 50% / .3125rem .3125rem no-repeat,
    linear-gradient(135deg, var(--accent) 50%, transparent 50%) calc(100% - .75rem) 50% / .3125rem .3125rem no-repeat,
    linear-gradient(var(--accent-soft), var(--accent-soft)) calc(100% - .25rem) 50% / 1.75rem 1.75rem no-repeat;
  appearance: none;
  padding-right: 2.5rem;
  border-color: transparent;
  background: var(--chevron-soft), var(--surface-2);
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow .15s;
}
select:hover, .pick-button:hover { box-shadow: inset 0 0 0 1px var(--border); }
input[type="file"] { padding: .375rem; }

input:focus-visible, select:focus-visible, textarea:focus-visible, .pick-button[aria-expanded="true"] {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1rem; height: 1rem; margin: 0; box-shadow: none; }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  height: 2.25rem;
  padding: 0 .875rem;
  text-decoration: none;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--primary);
  color: var(--primary-text);
  box-shadow: var(--shadow);
}

button:hover, .button:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text); }

button.secondary, .button.secondary {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
}

button.secondary:hover, .button.secondary:hover { background: var(--hover); color: var(--text); border-color: var(--border); }
/* A button that cannot be used yet is grey, also in the band, so that it
   does not look like one that merely waits for a click. */
button:disabled:not([aria-current]), button:disabled:not([aria-current]):hover {
  cursor: not-allowed;
  background: var(--neutral-bg);
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none;
}
button:disabled .icon { width: .875rem; height: .875rem; }

.full { width: 100%; }
.form-footer { margin: 1rem 0 0; text-align: center; font-size: .8125rem; }
.or-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--muted); font-size: .8125rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
:root[data-theme="contrast"] .or-divider::before, :root[data-theme="contrast"] .or-divider::after { height: 2px; background: var(--ink); }
/* Shown by passkey.js once the browser turns out to support passkeys. */
:is([data-passkey-only], [data-passkey-none], [data-passkey-error])[hidden] { display: none; }

.alert {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}

.alert p { margin: 0 0 .25rem; }
.alert ul { margin: .25rem 0; padding-left: 1.25rem; }
.alert a { color: inherit; text-decoration: underline; }
.alert:focus { outline: none; }
.alert.error { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.alert.success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); }
.alert.warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent); }

/* App shell */
.shell {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem .75rem;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .25rem .5rem;
  color: var(--text);
  text-decoration: none;
}

.brand:hover { color: var(--text); }
.brand-name { display: grid; min-width: 0; line-height: 1.2; }
.brand-name span:first-child { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.brand-name .muted { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.content {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.75rem 2rem 4rem;
}

.icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mainnav { display: flex; flex-direction: column; gap: 1px; flex: 1; }

.mainnav a {
  display: flex;
  align-items: center;
  gap: .625rem;
  height: 2rem;
  color: var(--text-2);
  font-weight: 500;
  text-decoration: none;
  padding: 0 .5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.mainnav a:hover { color: var(--text); background: var(--hover); }
.mainnav a[aria-current="page"] { color: var(--area); background: var(--area-soft); }
.mainnav a[aria-current="page"]::after {
  content: "";
  width: .375rem;
  height: .375rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--area-mark);
}
.nav-divider { height: 1px; background: var(--border); margin: .75rem .5rem; }
.nav-group { margin: .875rem .5rem .25rem; font-size: .75rem; font-weight: 600; color: var(--muted); }
[data-area="sales"] .nav-group[data-area="sales"],
[data-area="recruiting"] .nav-group[data-area="recruiting"] { color: var(--area-mark); }

.account {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem .25rem 0;
  border-top: 1px solid var(--border);
}

.account form { margin: 0; }

.account-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
  padding: .25rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.account-link:hover, .account-link[aria-current="page"] { background: var(--hover); color: var(--text); }
.account-name { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.account-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name .muted { font-size: .75rem; font-weight: 400; }

/* Level: a quiet gold, apart from the colours of status and area */
.level-progress {
  appearance: none;
  display: block;
  width: 100%;
  height: .375rem;
  border: 0;
  border-radius: 999px;
  background: var(--level-track);
  overflow: hidden;
}
.level-progress::-webkit-progress-bar { background: var(--level-track); }
.level-progress::-webkit-progress-value { background: var(--gold); border-radius: 999px; min-width: .375rem; }
.level-progress::-moz-progress-bar { background: var(--gold); border-radius: 999px; min-width: .375rem; }
.level-star { color: var(--gold); }
/* In the sidebar: a gold ring around the photo, the level under the name */
.level-avatar { position: relative; display: grid; place-items: center; flex: none; width: 2.375rem; height: 2.375rem; }
.level-avatar > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.level-avatar > svg circle { fill: none; stroke-width: 3; }
.level-avatar-track { stroke: color-mix(in srgb, var(--gold) 28%, var(--sidebar)); }
.level-avatar-fill { stroke: var(--gold); stroke-linecap: round; }
.level-avatar .avatar { position: relative; }
.account:has(.level-link) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.account:has(.level-link) .account-link { grid-area: 1 / 1; }
.account:has(.level-link) form { grid-area: 1 / 2; }
/* Over the name's second line, its text in line with the name */
.level-link {
  grid-area: 1 / 1; align-self: end; justify-self: start; max-width: calc(100% - 2.875rem);
  margin: 0 0 .25rem 2.875rem; padding: 0 .25rem; border-radius: 4px;
  overflow: hidden; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums;
  text-decoration: none; text-overflow: ellipsis; white-space: nowrap;
}
.level-link strong { color: var(--gold); font-weight: 600; }
.level-link:hover { background: var(--hover); color: var(--text); }
/* The level on the account page: a ring, its title and what comes next */
.level-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center;
  padding: 1.5rem 1.75rem;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); border-radius: var(--radius);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 18%, var(--surface)), var(--surface) 60%);
}
.level-hero h2 { margin: 0; font-size: 1.5rem; }
.level-hero .hint { margin: .25rem 0 0; }
.level-title { margin: 0; color: var(--gold); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.level-next {
  display: inline-flex; gap: .375rem; align-items: center; margin-top: .75rem; padding: .25rem .625rem;
  border-radius: 999px; background: color-mix(in srgb, var(--gold) 14%, transparent); font-size: .8125rem;
}
.level-ring { position: relative; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; }
.level-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.level-ring > svg circle { fill: none; stroke-width: 8; }
.level-ring-track { stroke: var(--level-track); }
.level-ring-fill { stroke: var(--gold); stroke-linecap: round; }
.level-ring-inner { position: relative; display: grid; justify-items: center; line-height: 1; color: var(--gold); }
.level-ring-inner .achievement-icon { width: 1.5rem; height: 1.5rem; }
.level-ring-inner .achievement-icon .icon { width: 1.5rem; height: 1.5rem; }
.level-ring-inner b { font-size: 2.25rem; font-weight: 700; }
.level-ring-inner small { color: var(--muted); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 40rem) {
  .level-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1.25rem; }
}

/* Points by kind as tiles */
.point-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.point-tile { display: grid; gap: .25rem; padding: .875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.point-tile-head { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .8125rem; }
.point-tile-head .icon { width: 1.25rem; height: 1.25rem; color: var(--c); fill: color-mix(in srgb, currentColor 30%, transparent); stroke-width: 1.6; }
.point-tile b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.point-tile small { color: var(--muted); }

/* Achievements as badges, earned ones in their colour */
.achievements-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.achievements-head h2, .achievements-head .hint { margin: 0; }
.achievements-head .hint { margin-top: .25rem; }
.achievements-count { display: grid; gap: .25rem; min-width: 12rem; color: var(--muted); font-size: .8125rem; text-align: right; }
.achievements-count b { color: var(--text); }
.achievements-group { margin: .25rem 0 .5rem; color: var(--muted); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.achievements { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.achievement {
  position: relative; display: grid; justify-items: center; align-content: start; gap: .375rem;
  padding: 1.125rem .875rem 1rem; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface);
}
.achievement strong { color: var(--muted); font-size: .9375rem; }
.achievement .hint { margin: 0; font-size: .8125rem; line-height: 1.35; }
.achievement-when { color: var(--muted); font-size: .75rem; }
.achievement-badge {
  display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  color: var(--muted); background: var(--surface-2); transition: transform .2s;
}
.achievement-badge .icon { width: 2.25rem; height: 2.25rem; stroke-width: 1.6; fill: none; opacity: .55; }
.achievement-lock { position: absolute; top: .625rem; right: .625rem; color: var(--muted); opacity: .6; }
.achievement-new {
  position: absolute; top: .625rem; right: .625rem; padding: .0625rem .5rem; border-radius: 999px;
  background: var(--c); color: #fff; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.achievement-progress { display: grid; gap: .25rem; width: 100%; color: var(--muted); font-size: .75rem; }
.achievement-progress .level-progress { height: .3125rem; }
.achievement-progress .level-progress::-webkit-progress-value { background: var(--c); }
.achievement-progress .level-progress::-moz-progress-bar { background: var(--c); }
.achievement.earned {
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--surface)), var(--surface) 70%);
}
.achievement.earned strong { color: var(--text); }
.achievement.earned .achievement-badge {
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 8%, transparent);
}
.achievement.earned .achievement-badge .icon { fill: color-mix(in srgb, currentColor 30%, transparent); opacity: 1; }
.achievement.earned:hover .achievement-badge { transform: scale(1.06) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) {
  .achievement-badge { transition: none; }
}

/* An achievement's symbol in two tones, in the toast */
.achievement-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; color: var(--c, var(--gold)); }
.achievement-icon .icon { width: 1.75rem; height: 1.75rem; stroke-width: 1.6; fill: color-mix(in srgb, currentColor 30%, transparent); }

/* Each achievement in its own colour, drawn in two tones. */
[data-kind="profile_complete"] { --c: #e2553d; }
[data-kind="first_hire"] { --c: #d93a4b; }
[data-kind="first_presented"] { --c: #8a56d6; }
[data-kind="first_customer"] { --c: #b5733a; }
[data-kind="market_hire"] { --c: #2f7fd1; }
[data-kind="timejob_hire"] { --c: #1a9a8c; }
[data-kind="revived"] { --c: #c0662f; }
[data-kind="inbox_zero"] { --c: #2f9e57; }
[data-kind="interviews_25"] { --c: #3b8fe0; }
[data-kind="merged_10"] { --c: #c99a1e; }
[data-kind="hires_10"], [data-kind="level"] { --c: #d9a21b; }
[data-kind="points-hire"] { --c: #d93a4b; }
[data-kind="points-presented"] { --c: #8a56d6; }
[data-kind="points-interview"] { --c: #3b8fe0; }
[data-kind="points-customer"] { --c: #b5733a; }

/* Team goals: what the branch did this month, in the colours of the
   point tiles, green once reached */
.team-branch { display: grid; gap: .5rem; }
.team-branch + .team-branch { margin-top: .75rem; }
.team-branch h3 { margin: 0; color: var(--muted); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.team-goals { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.team-goal { display: grid; gap: .3125rem; }
.team-goal-head { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.team-goal-head .icon { width: 1.125rem; height: 1.125rem; flex: none; color: var(--c); fill: color-mix(in srgb, currentColor 30%, transparent); stroke-width: 1.6; }
.team-goal-head b { margin-left: auto; font-variant-numeric: tabular-nums; }
.team-goal-done { padding: .0625rem .4375rem; border-radius: 999px; background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); font-size: .6875rem; font-weight: 600; }
.team-goal progress { appearance: none; display: block; width: 100%; height: .5rem; border: 0; border-radius: 999px; background: var(--level-track); overflow: hidden; }
.team-goal progress::-webkit-progress-bar { background: var(--level-track); }
.team-goal progress::-webkit-progress-value { background: var(--c); border-radius: 999px; min-width: .5rem; }
.team-goal progress::-moz-progress-bar { background: var(--c); border-radius: 999px; min-width: .5rem; }
.team-goal.reached progress::-webkit-progress-value { background: var(--success); }
.team-goal.reached progress::-moz-progress-bar { background: var(--success); }
.team-members { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.team-members li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; flex-wrap: wrap; }
.team-members li + li { border-top: 1px solid var(--border); }
.team-members .avatar { width: 2.25rem; height: 2.25rem; font-size: .8125rem; }
.team-member-name { display: grid; flex: 1 1 10rem; }
.team-member-name .hint { margin: 0; font-size: .8125rem; }
.team-member-badges { display: flex; flex-wrap: wrap; gap: .375rem; }
.team-badge { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--c);
              background: color-mix(in srgb, var(--c) 14%, transparent); }
.team-badge .icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.6; fill: color-mix(in srgb, currentColor 30%, transparent); }

/* The look back at the past month: a leaf of a calendar with the points,
   the headline, the new badges and a line of what the user brought
   about, with the team's goals. */
.month-review { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .625rem 1.5rem; align-items: center;
  margin-bottom: 1rem; padding: 1.25rem 2.5rem 1.25rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); border-radius: var(--radius);
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--gold) 16%, var(--surface)), var(--surface) 60%); }
.month-review h2 { margin: 0; font-size: 1.375rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.month-review p { margin: .25rem 0 0; }
.month-review-kicker { margin: 0 !important; color: var(--gold); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.month-review form { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.month-review-close { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0;
  background: none; color: var(--muted); box-shadow: none; }
.month-review-close:hover { background: var(--hover); color: var(--text); }
.month-review-close .icon { width: 1rem; height: 1rem; }
.month-review-sheet { grid-row: span 2; display: grid; place-items: center; width: 5rem; height: 5.25rem; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.month-review-sheet small { display: block; width: 100%; padding: .1875rem 0; background: var(--gold); color: #1d1600;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.month-review-sheet b { font-size: 1.75rem; line-height: 1; }
.month-review-sheet span { margin-bottom: .375rem; color: var(--muted); font-size: .6875rem; }
.month-review-badges { display: flex; flex-wrap: wrap; justify-content: end; gap: .375rem; }
.month-review-line { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .875rem; }
.month-review-line span { display: inline-flex; align-items: center; gap: .3125rem; }
.month-review-line .icon { width: 1.125rem; height: 1.125rem; color: var(--c); stroke-width: 1.6; fill: color-mix(in srgb, currentColor 30%, transparent); }
.month-review-team { padding-left: 1rem; border-left: 1px solid var(--border); }
.month-review-team b { color: var(--success); }
:root[data-theme="contrast"] .month-review h2 { font-size: 1.375rem; }
:root[data-theme="contrast"] .month-review { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--surface); }
:root[data-theme="contrast"] .month-review-sheet { border: 2px solid var(--ink); }
:root[data-theme="contrast"] .month-review-sheet small { background: var(--ink); color: var(--surface); }
@media (max-width: 40rem) {
  .month-review { grid-template-columns: auto 1fr; gap: .75rem 1rem; padding: 1rem 2.25rem 1rem 1rem; }
  .month-review-sheet { grid-row: auto; }
  .month-review-badges { grid-column: 1 / -1; justify-content: start; }
  .month-review-line { grid-column: 1 / -1; }
  .month-review-team { padding-left: 0; border-left: 0; }
}

/* Setting the goals: a row per kind with a stepper in the look of the
   form fields, and a thin bar of how far the month got towards the goal
   entered */
.team-goals-head { align-items: flex-start; }
.team-goals-head .hint { margin: .25rem 0 0; }
.team-goals-actions { display: flex; align-items: center; gap: .5rem; }
.goal-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.goal-row { display: grid; grid-template-columns: auto 1fr auto; gap: .25rem .75rem; align-items: center; padding: .625rem 0; }
.goal-row + .goal-row { border-top: 1px solid var(--border); }
.goal-row > .icon { width: 1.125rem; height: 1.125rem; color: var(--c); fill: color-mix(in srgb, currentColor 30%, transparent); stroke-width: 1.6; }
.goal-row-label { display: grid; }
.goal-row-label label { margin: 0; font-weight: 500; }
.goal-row-label .hint { margin: 0; font-size: .8125rem; }
.goal-row-field { display: flex; align-items: center; gap: .5rem; }
.goal-unit { color: var(--muted); font-size: .8125rem; }
.goal-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.goal-stepper button { width: 2.25rem; padding: 0; border: 0; border-radius: 0; background: var(--surface-2); color: var(--muted); font-size: 1rem; }
.goal-stepper button:hover { background: var(--hover); color: var(--text); }
.goal-stepper input {
  width: 3.5rem; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 0;
  text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; box-shadow: none;
}
.goal-stepper input::-webkit-inner-spin-button, .goal-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.goal-stepper:focus-within { border-color: var(--accent); }
.goal-row progress { grid-column: 2 / 4; appearance: none; display: block; width: 100%; height: .25rem; border: 0; border-radius: 999px; background: var(--level-track); overflow: hidden; }
.goal-row progress::-webkit-progress-bar { background: var(--level-track); }
.goal-row progress::-webkit-progress-value { background: var(--c); border-radius: 999px; }
.goal-row progress::-moz-progress-bar { background: var(--c); border-radius: 999px; }
.goal-row:has(input:placeholder-shown) progress { visibility: hidden; }
.goal-done { display: none; color: var(--success); font-weight: 600; }
.goal-row.reached .goal-done { display: inline; }
.goal-row.reached progress::-webkit-progress-value { background: var(--success); }
.goal-row.reached progress::-moz-progress-bar { background: var(--success); }
@media (max-width: 40rem) {
  .goal-row-field { grid-column: 2 / 4; }
}
.team-goals-off h2 { color: var(--muted); }
.team-goals-off > .muted { margin: 0; }
.goal-actions .hint { margin: 0; }

/* The moment of an achievement or level: the toast slides in, the symbol
   pops up, a ring pulses and sparks fly. */
.toast.celebration { --toast-color: var(--c); gap: .875rem; padding: .75rem .5rem .75rem .75rem; border-color: color-mix(in srgb, var(--c) 60%, transparent);
                     background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); animation: celebration-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.toast.celebration .toast-text { display: grid; }
.toast.celebration strong { font-size: 1rem; }
.toast.celebration .hint { margin: 0; font-size: .8125rem; }
.celebration-label { color: var(--c); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.celebration-burst { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; }
.celebration-burst .achievement-icon { width: 3rem; height: 3rem; animation: celebration-pop .7s cubic-bezier(.2, .9, .3, 1.4) .15s both; }
.celebration-burst .achievement-icon .icon { width: 2.25rem; height: 2.25rem; }
.celebration-burst::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c);
                             animation: celebration-ring 1s ease-out .3s both; }
.spark { position: absolute; left: 50%; top: 50%; width: .375rem; height: .375rem; margin: -.1875rem; border-radius: 50%;
         background: var(--c); animation: celebration-spark .8s ease-out .35s both; }
.spark:nth-of-type(odd) { background: var(--gold); width: .25rem; height: .25rem; }
.spark-0 { --a: 0deg; } .spark-1 { --a: 36deg; } .spark-2 { --a: 72deg; } .spark-3 { --a: 108deg; } .spark-4 { --a: 144deg; }
.spark-5 { --a: 180deg; } .spark-6 { --a: 216deg; } .spark-7 { --a: 252deg; } .spark-8 { --a: 288deg; } .spark-9 { --a: 324deg; }
@keyframes celebration-in { from { opacity: 0; transform: translateY(1rem) scale(.96); } }
@keyframes celebration-pop { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: none; } }
@keyframes celebration-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes celebration-spark { 0% { transform: rotate(var(--a)) translateX(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(2.4rem); opacity: 0; } }
[data-kind="team-goal"] { --c: #2f9e57; }
/* Confetti for a goal reached together: it bursts up from the symbol and
   tumbles down. */
.toast.celebration { position: relative; }
.team-confetti { position: absolute; left: 2.25rem; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 1; }
.team-confetti i {
  position: absolute; width: .4375rem; height: .75rem; margin: -.375rem -.21875rem; border-radius: 2px;
  background: var(--k, var(--c)); opacity: 0;
  animation: confetti-fly 2.2s var(--d, .3s) both, confetti-spin .6s var(--d, .3s) linear 4;
}
.team-confetti i:nth-child(3n) { width: .375rem; height: .375rem; border-radius: 50%; }
.team-confetti i:nth-child(4n+1) { --k: var(--gold); }
.team-confetti i:nth-child(4n+2) { --k: #d93a4b; }
.team-confetti i:nth-child(4n+3) { --k: #3b8fe0; }
.team-confetti i:nth-child(5n) { --k: #8a56d6; }
.team-confetti-0 { --x: -9rem; --y: -9rem; } .team-confetti-1 { --x: -6rem; --y: -11rem; --d: .35s; } .team-confetti-2 { --x: -3rem; --y: -12rem; }
.team-confetti-3 { --x: 0rem; --y: -13rem; --d: .4s; } .team-confetti-4 { --x: 3rem; --y: -12rem; } .team-confetti-5 { --x: 6rem; --y: -11rem; --d: .35s; }
.team-confetti-6 { --x: 9rem; --y: -9rem; } .team-confetti-7 { --x: 12rem; --y: -7rem; --d: .45s; } .team-confetti-8 { --x: -12rem; --y: -6rem; --d: .45s; }
.team-confetti-9 { --x: -7.5rem; --y: -7rem; --d: .5s; } .team-confetti-10 { --x: -1.5rem; --y: -9rem; --d: .55s; } .team-confetti-11 { --x: 4.5rem; --y: -8rem; --d: .5s; }
.team-confetti-12 { --x: 10rem; --y: -10rem; --d: .55s; } .team-confetti-13 { --x: 15rem; --y: -8.5rem; --d: .4s; } .team-confetti-14 { --x: -4.5rem; --y: -14rem; --d: .6s; }
.team-confetti-15 { --x: 1.5rem; --y: -15rem; --d: .6s; } .team-confetti-16 { --x: 7.5rem; --y: -13.5rem; --d: .65s; } .team-confetti-17 { --x: 13rem; --y: -12rem; --d: .65s; }
@keyframes confetti-fly {
  0% { transform: translate(0, 0); opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  30% { transform: translate(calc(var(--x) * .6), var(--y)); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  85% { opacity: 1; }
  100% { transform: translate(var(--x), calc(var(--y) + 12rem)); opacity: 0; }
}
@keyframes confetti-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .toast.celebration, .celebration-burst .achievement-icon { animation: none; }
  .celebration-burst::before, .spark, .team-confetti { display: none; }
}
.bonus-list { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.bonus-list li::before { content: "○"; display: inline-block; width: 1.25rem; color: var(--muted); }
.bonus-list li.done { color: var(--muted); text-decoration: line-through; }
.bonus-list li.done::before { content: "✓"; color: var(--success); text-decoration: none; }

.avatar {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: .6875rem;
}
img.avatar { object-fit: cover; background: var(--surface-2); }

button.icon-button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

button.icon-button:hover { background: var(--hover); color: var(--text); border-color: transparent; }

/* On phones the bar at the bottom (.tabbar) takes the sections. */
.tabbar, .sheet { display: none; }

/* On small screens the sidebar becomes a bar on top with the logo and
   the account; the sections move to a bar at the bottom. */
@media (max-width: 48rem) {
  /* What sticks to the bottom of the window stays above the bar. */
  :root { --tabbar-space: calc(3.875rem + env(safe-area-inset-bottom)); }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar .mainnav { display: none; }

  .tabbar {
    position: fixed;
    z-index: 20;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: .375rem .25rem calc(.375rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--sidebar) 92%, transparent);
    backdrop-filter: blur(10px);
  }
  .tabbar > a, .tabbar > button {
    display: grid;
    justify-items: center;
    gap: .1875rem;
    height: auto;
    padding: .25rem 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    box-shadow: none;
    color: var(--muted);
    font-size: .6875rem;
    font-weight: 500;
    text-decoration: none;
  }
  .tabbar .icon { width: 1.375rem; height: 1.375rem; }
  .tabbar [aria-current] { color: var(--area); }
  .tabbar > a:hover, .tabbar > button:hover { background: none; color: var(--text); }

  /* What does not fit into the bar slides up from below. */
  .sheet[open] {
    display: block;
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    color: var(--text);
    animation: sheet-up .2s ease-out;
  }
  .sheet::backdrop { background: rgb(0 0 0 / 45%); }
  .sheet-panel { display: grid; gap: .125rem; padding: .75rem .75rem calc(1.25rem + env(safe-area-inset-bottom)); }
  .sheet-panel::before { content: ""; justify-self: center; width: 2.5rem; height: .25rem; margin-bottom: .5rem; border-radius: 999px; background: var(--border); }
  .sheet-panel hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: .375rem 0; }
  .sheet-panel form { margin: 0; }
  .sheet-panel a, .sheet-panel button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    width: 100%;
    height: auto;
    padding: .75rem .5rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    box-shadow: none;
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
  }
  .sheet-panel a:hover, .sheet-panel button:hover { background: var(--hover); color: var(--text); }
  .sheet-panel a[aria-current="page"] { color: var(--area); background: var(--area-soft); }
  .sheet-panel .icon { width: 1.25rem; height: 1.25rem; }
  .sheet-panel .avatar { width: 1.25rem; height: 1.25rem; font-size: .5625rem; }

  .sidebar {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    padding: .75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .brand { padding: 0; }
  .account { grid-column: 2; grid-row: 1; padding: 0; border: 0; }
  .account .account-name { display: none; }
  .sidebar .level-link { display: none; }
  .content { padding: 1.25rem 1rem calc(6rem + env(safe-area-inset-bottom)); }
}

@keyframes sheet-up { from { translate: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }

.card-link { color: inherit; text-decoration: none; }
.card-link:hover { color: inherit; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* Hints for the first visits: tinted like the accent, with a button to
   put them away at the top right. */
.tip {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .75rem .5rem .75rem 1rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

.tip > div { flex: 1; }
.tip p { margin: 0; }
.tip .tip-title { font-weight: 600; margin-bottom: .125rem; }
.tip form { margin: -.25rem 0; }
.tip form.tip-all { margin: .25rem 0 0; font-size: .8125rem; }

/* Page structure */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.page-header h1 { margin-bottom: .25rem; }
.page-header .muted { margin: 0; }
/* What a page's subtitle leaves out, below the header. */
.page-lead { max-width: 48rem; margin: 0 0 1.5rem; color: var(--muted); }
.title-row { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; margin-bottom: .25rem; }
.title-row h1 { margin: 0; }
.title-link { color: inherit; text-decoration: none; }
.title-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.page-header .muted a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.page-header .muted a:hover { text-decoration-thickness: 2px; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.actions form { margin: 0; }
/* The section first, with its icon from the sidebar, then the way down
   to the page; after a change of section, the way back (app.js). */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0 0 .375rem; font-size: .8125rem; color: var(--muted); }
.breadcrumb a { display: inline-flex; align-items: center; gap: .3125rem; min-width: 0; }
.breadcrumb a + a::before { content: "›"; margin-right: .1875rem; color: var(--muted); }
.breadcrumb .icon { width: .875rem; height: .875rem; flex: none; }
/* The way back follows the breadcrumb, set apart by a bar; without a
   breadcrumb it starts the line, level with the title. */
.breadcrumb a.crumb-back { gap: .125rem; color: var(--muted); }
.breadcrumb a + a.crumb-back { margin-left: .375rem; padding-left: .75rem; border-left: 1px solid currentColor; }
.breadcrumb a.crumb-back:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.breadcrumb a.crumb-back::before { content: none; }
.crumb-back span { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prewrap { white-space: pre-line; margin: 0; color: var(--text-2); }
.ad-description { overflow-wrap: anywhere; }

/* Job descriptions rendered from Markdown. */
.prose { color: var(--text-2); line-height: 1.6; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 .75em; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li > p, .prose li > ul, .prose li > ol { margin: 0; }
.prose li + li { margin-top: .25em; }
.prose strong { color: var(--text); }
.empty { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.empty .button { margin-top: .5rem; }

/* Settings: a navigation of their own next to the page. */
.settings {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.settings-nav { display: grid; gap: 1px; position: sticky; top: 1.75rem; }
.settings-nav p { margin: 0; }
.settings-nav .settings-nav-title { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; padding: 0 .5rem; }

.settings-nav-group {
  padding: .875rem .5rem .375rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
}

.settings-nav a {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 0 .5rem;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-weight: 500;
  text-decoration: none;
}

.settings-nav a:hover { color: var(--text); background: var(--hover); }
.settings-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

@media (max-width: 48rem) {
  .settings { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .settings-nav { position: static; display: flex; gap: .25rem; overflow-x: auto; }
  .settings-nav-title, .settings-nav-group { display: none; }
  .settings-nav a { white-space: nowrap; }
}

.settings-stack { display: grid; gap: 1rem; max-width: 55rem; }
.user-cell { display: inline-flex; align-items: center; gap: .625rem; }
.plain-fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.plain-fieldset legend { padding: 0; margin-bottom: .375rem; }
.user-cell a { color: var(--text); font-weight: 500; text-decoration: none; }
.user-cell a:hover { color: var(--accent); }
.user-cell .hint { font-size: .75rem; }
/* "Erneut senden" goes below the badge when the table is narrow. */
.user-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; white-space: nowrap; }
.user-status form { margin: 0; }

button.link-button {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  font-weight: 500;
}

button.link-button:hover { background: none; color: var(--accent-hover); text-decoration: underline; }
button.link-button.danger, button.link-button.danger:hover { color: var(--danger); }
.user-cell .avatar { width: 2rem; height: 2rem; font-size: .75rem; }

/* Account */
.theme-options { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

.theme-option {
  display: grid;
  align-content: start;
  gap: .25rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 400;
  color: var(--text);
}

.theme-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.theme-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-label { font-weight: 600; }

/* Welcome steps after accepting an invitation: a wider card than the
   sign-in, with the progress through the steps. */
.welcome { width: 100%; max-width: 34rem; }
.welcome-progress { display: grid; gap: .375rem; margin-bottom: 1.25rem; }
.welcome-progress ol { display: flex; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.welcome-progress li { flex: 1; height: .25rem; border-radius: 999px; background: var(--neutral-bg); }
.welcome-progress li.done { background: var(--accent); }
.welcome-progress .hint { margin: 0; }
.welcome .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
.welcome .check + .hint { margin-bottom: 1.25rem; }
.welcome-qr { display: grid; justify-items: center; gap: .5rem; margin: 1.25rem 0 1.5rem; text-align: center; }
.welcome-qr .hint { margin: 0; }
.welcome-key summary { cursor: pointer; color: var(--accent); font-size: .8125rem; font-weight: 500; width: fit-content; margin-inline: auto; }
.welcome-key summary:hover { color: var(--accent-hover); }
.welcome-key[open] summary { margin-bottom: .5rem; }
/* The content of details is not laid out by the details' own display, so
   the key gets its spacing as an inline block. */
.welcome-key .setup-key { display: inline-block; margin-top: .625rem; }

.password-input { position: relative; }
.password-input input { padding-right: 5.5rem; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: .25rem;
  transform: translateY(-50%);
  height: auto;
  padding: .25rem .5rem;
  font-size: .8125rem;
  background: none;
  color: var(--accent);
  border: 0;
  box-shadow: none;
}
.password-toggle:hover { background: var(--hover); color: var(--accent-hover); }
.setup-step { display: grid; gap: .5rem; justify-items: start; }
.setup-step h2 { margin: 0; }
.qr-code { border-radius: var(--radius-sm); background: #fff; padding: .5rem; image-rendering: pixelated; border: 1px solid var(--border); }
.setup-key, .recovery-codes code { font: 500 .9375rem/1.4 var(--mono); letter-spacing: .05em; }
.setup-key { padding: .375rem .625rem; border-radius: var(--radius-sm); background: var(--neutral-bg); }
.mapping-table { margin-top: .75rem; }
.card .mapping-table td { padding-block: .25rem; }
.mapping-table th:last-child { width: 18rem; }
.mapping-table select { width: 100%; height: 2rem; }
.mapping-table label { font-weight: 500; }
.card > h3:has(+ .hint + .mapping-table) { margin: 1.5rem 0 .25rem; font-size: .875rem; font-weight: 600; }
.card > .alert + h3:has(+ .hint + .mapping-table) { margin-top: 1rem; }
.mapping-table + .form-actions { margin-top: 1.25rem; }
.mapping-table + .alert, .card > .alert + .mapping-table, .card > .alert + h3 { margin-top: 1rem; }
/* The button stays level with the first row when the filters wrap. */
.timejob-toolbar { justify-content: space-between; align-items: flex-start; }
.timejob-toolbar form { margin: 0; }
.timejob-toolbar > form { flex: 1 1 40rem; max-width: 56rem; }
.timejob-toolbar > form input[type="search"] { flex-basis: 12rem; }
/* The selects as wide as their options, the search takes the rest. */
.timejob-toolbar > form :is(select, .pick) { flex: 0 0 auto; }
.timejob-table td:first-child { min-width: 12rem; }
.timejob-jobs a { display: block; }
.timejob-table .overdue-note { color: var(--warning); white-space: normal; }
.timejob-table .blocked-mark { display: inline-flex; align-items: center; gap: .25rem; color: var(--warning); cursor: help; }
.timejob-table .blocked-mark .icon { width: .8125rem; height: .8125rem; }
.timejob-jobs .sub + a { margin-top: .25rem; }
/* Employers on the job market, in the colour of a lead in the market. */
.timejob-jobs a.market-hint { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; color: var(--status-lead); font-weight: 500; }
.timejob-jobs a.market-hint .icon { width: .8125rem; height: .8125rem; }
.filter-chip { display: flex; gap: .75rem; align-items: baseline; margin: .75rem 0 0; font-size: .875rem; }
.tel-kind { margin-left: .25rem; }
.card .table + h3 { margin-top: 1.25rem; }
.timejob-links li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.timejob-links form { margin: 0; }
.timejob-match { margin: 0; }
.timejob-match p { margin: 0 0 .375rem; }
.timejob-match p:last-child { margin: 0; }
.timejob-customers td:last-child { width: 45%; }
.timejob-match.done p { color: var(--success); }
/* A row the user just linked or took over stands out from those left to do;
   a hidden one steps back. */
.timejob-customers tr:has(.done-link, .done-import) > td { background: var(--success-bg); }
.timejob-customers tr:has(.done-hide) > td:not(:last-child) { opacity: .55; }

.config-block { display: block; margin: 0; overflow-x: auto; white-space: pre; letter-spacing: 0; font-size: .8125rem; }

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .5rem 1.5rem;
  margin: 0;
  padding-left: 1.5rem;
}

.session-device { font-weight: 500; margin-right: .5rem; }
.recent form { margin: 0; flex: none; }

/* A miniature page: a sidebar and an accent bar on a background, in fixed
   colours so that each option shows its own scheme. */
.theme-preview {
  height: 3.5rem;
  border-radius: calc(var(--radius-sm) - 2px);
  border: 1px solid var(--border);
  background:
    linear-gradient(var(--p-accent), var(--p-accent)) 12% 30% / 30% 12% no-repeat,
    linear-gradient(var(--p-surface), var(--p-surface)) 0 0 / 28% 100% no-repeat,
    var(--p-bg);
}

.theme-preview-light { --p-bg: #edf0f2; --p-surface: #ffffff; --p-accent: #3f5568; }
.theme-preview-dark { --p-bg: #0f151b; --p-surface: #121a21; --p-accent: #c8102e; }

.theme-preview-contrast {
  --p-bg: #eceef3;
  --p-surface: #ffffff;
  --p-accent: #ffd84d;
  border: 2px solid #14142b;
  box-shadow: 2px 2px 0 #14142b;
}

.theme-preview-system {
  --p-accent: #3f5568;
  background:
    linear-gradient(to right, transparent 50%, #0f151b 50%),
    linear-gradient(#ffffff, #ffffff) 0 0 / 28% 100% no-repeat,
    #edf0f2;
}

/* Dashboard */

/* Nordsee: a slate band with a red rule beneath lies across the top of
   every page, behind the breadcrumb, the title, its subtitle and the
   actions. Every page header is built alike, with room for a breadcrumb
   even where there is none, so that the band is equally high everywhere.
   The band hangs off the page header, reaching up and out to the edges of
   the column; the sidebar covers its left end. Not in the contrast theme,
   which has its own look. */
:root:not([data-theme="contrast"]) .shell { overflow-x: clip; }
:root:not([data-theme="contrast"]) .sidebar { z-index: 1; }
:root:not([data-theme="contrast"]) .content { position: relative; z-index: 0; padding-top: 2.25rem; }

:root:not([data-theme="contrast"]) .content .page-header {
  position: relative;
  min-height: 3.625rem;
  margin-bottom: 3.5rem;
}

:root:not([data-theme="contrast"]) .content .page-header:not(.breadcrumb + *) { padding-top: calc(.8125rem * 1.5 + .375rem); }

:root:not([data-theme="contrast"]) .content .page-header::before {
  content: "";
  position: absolute;
  inset: -100vh -100vw -1.5rem;
  z-index: -1;
  background: var(--band);
  border-bottom: 4px solid var(--signal);
}

:root:not([data-theme="contrast"]) .page-header h1 { color: #ffffff; }
:root:not([data-theme="contrast"]) .page-header .muted,
:root:not([data-theme="contrast"]) .content .breadcrumb,
:root:not([data-theme="contrast"]) .content .breadcrumb a + a::before { color: var(--band-muted); }
:root:not([data-theme="contrast"]) .content .breadcrumb a { color: #ffffff; }
:root:not([data-theme="contrast"]) .content .breadcrumb a.crumb-back { color: var(--band-muted); }
:root:not([data-theme="contrast"]) .content .breadcrumb a.crumb-back:hover { color: #ffffff; }
:root:not([data-theme="contrast"]) .page-header .badge { box-shadow: 0 0 0 1px rgb(255 255 255 / 22%); }
/* The photo stays within the height of the title. */
:root:not([data-theme="contrast"]) .page-header .candidate-photo { width: 1.75rem; height: 2.125rem; }

/* In the settings the header spans the navigation too, as on every other
   page; the navigation starts below the band, level with the content.
   Every header is equally high, so its height is known. On small screens
   the navigation moves below the header. */
:root:not([data-theme="contrast"]) .settings {
  --settings-head: calc(.8125rem * 1.5 + .375rem + 3.625rem + 3.5rem);
}

:root:not([data-theme="contrast"]) .settings-content > :is(.breadcrumb, .page-header) { margin-left: calc(-12.5rem - 2rem); }
:root:not([data-theme="contrast"]) .settings-nav { margin-top: var(--settings-head); }

@media (max-width: 48rem) {
  :root:not([data-theme="contrast"]) .settings { display: flex; flex-direction: column; gap: 0; }
  :root:not([data-theme="contrast"]) .settings-content { display: contents; }
  :root:not([data-theme="contrast"]) .settings-content > * { order: 1; }
  :root:not([data-theme="contrast"]) .settings-content > :is(.breadcrumb, .page-header) { order: -1; margin-left: 0; }
  :root:not([data-theme="contrast"]) .settings-nav { margin: 0 0 1rem; }
}

/* On small screens the sidebar is a bar on top, above the band. */
@media (max-width: 48rem) {
  :root:not([data-theme="contrast"]) .sidebar { position: relative; }
}

/* On low screens the band gives up some of its height to the page; on
   narrow ones, where the navigation sits above it, it hugs the title. */
@media (max-height: 56rem) {
  :root:not([data-theme="contrast"]) .content { padding-top: 1.5rem; }
  :root:not([data-theme="contrast"]) .content .page-header { margin-bottom: 2.75rem; }
  :root:not([data-theme="contrast"]) .content .page-header::before { bottom: -1.25rem; }
  :root:not([data-theme="contrast"]) .settings { --settings-head: calc(.8125rem * 1.5 + .375rem + 3.625rem + 2.75rem); }
}

/* Compact mode makes the band lower still, except on narrow screens,
   where it hugs the title anyway. */
@media not all and (max-width: 48rem) {
  :root[data-density="compact"]:not([data-theme="contrast"]) .content { padding-top: 1.25rem; }
  :root[data-density="compact"]:not([data-theme="contrast"]) .content .page-header { margin-bottom: 2.375rem; }
  :root[data-density="compact"]:not([data-theme="contrast"]) .content .page-header::before { bottom: -1.125rem; }
  :root[data-density="compact"]:not([data-theme="contrast"]) .settings { --settings-head: calc(.8125rem * 1.5 + .375rem + 3.625rem + 2.375rem); }
}

@media (max-width: 48rem) {
  :root:not([data-theme="contrast"]) .content { padding-top: 1rem; }
  :root:not([data-theme="contrast"]) .content .page-header { min-height: 0; margin-bottom: 2rem; gap: .75rem; }
  :root:not([data-theme="contrast"]) .content .page-header:not(.breadcrumb + *) { padding-top: 0; }
  :root:not([data-theme="contrast"]) .content .page-header::before { bottom: -1rem; }
  .page-header h1 { font-size: 1.375rem; }
  .breadcrumb { margin-bottom: .25rem; }
}

/* Section headings in cards in small capitals, as on a chart, the
   legends of form sections too. Their line is as high as that of a link
   beside them in a card header, so that headers with and without one are
   alike; the line's space above the small type is taken from the card's
   padding, so that they sit as far from the top as from what follows. */
:root:not([data-theme="contrast"]) .content .card h2,
:root:not([data-theme="contrast"]) .content fieldset.card > legend { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
:root:not([data-theme="contrast"]) .content .card h2 { line-height: 1.25rem; margin-top: -.25rem; margin-bottom: .625rem; }
:root:not([data-theme="contrast"]) .content .card .card-header { margin-top: -.25rem; margin-bottom: .625rem; }
:root:not([data-theme="contrast"]) .content .card .card-header h2 { margin-top: 0; margin-bottom: 0; }
:root:not([data-theme="contrast"]) .content .card h2 .badge { text-transform: none; letter-spacing: 0; }
/* The practice firm's card has a heading of its own, under its kicker. */
:root:not([data-theme="contrast"]) .content .practice-hero h2 { margin: .25rem 0 .5rem; font-size: 1.5rem; line-height: 1.3; text-transform: none; letter-spacing: -.02em; }
.stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: 1rem;
}

.stat { display: grid; gap: .25rem; padding: 1rem 1.25rem; }
.stat-label { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.stat-value { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }

.dashboard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
}

.dashboard-side { display: grid; gap: 1rem; }

.stage-counts-card { margin-bottom: 1rem; }

/* The applications per stage, side by side in the card's full width.
   One column per stage, as "Vorgestellt" is only shown when it has any. */
.stage-counts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0 -1.25rem calc(-1 * var(--card-pad-y));
  padding: 0;
  border-top: 1px solid var(--border);
}

.stage-counts li + li { border-left: 1px solid var(--border); }

.stage-counts li { display: grid; }

/* A label that wraps ("Gespräch vereinbart") pushes no count out of line. */
.stage-counts a {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: .25rem;
  padding: .875rem 1.25rem;
  color: var(--text);
  text-decoration: none;
}

.stage-counts a:hover { background: var(--hover); }
.stage-count-value { font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* Above the customer list the counts stand alone and narrow the list;
   the stripe of their rows leads their label. */
.list-counts .stage-counts { margin-top: calc(-1 * var(--card-pad-y)); border-top: 0; }
.list-counts .stat-label { display: flex; align-items: center; gap: .375rem; }
.list-counts .map-dot { width: 3px; height: .875rem; border: 0; border-radius: 2px; box-shadow: none; }
.list-counts .current a { box-shadow: inset 0 -2px var(--accent); }
.list-counts .current .stage-count-value { color: var(--accent); }
/* Counts that ask for a look: new applications in their blue, jobs
   gone quiet in yellow. */
.list-counts .waiting .stage-count-value { color: var(--accent); }
.list-counts .warn .stage-count-value { color: var(--warning); }

/* A job's open applications in the list, in blue while some are new. */
.table td a.job-applications { color: var(--text); font-weight: 400; }
.table td a.job-applications.has-new { color: var(--accent); font-weight: 600; }
/* New applications wait for the user, in the colour of their stage. */
.stage-counts .waiting .stage-count-value { color: var(--accent); }

.dashboard-grid h2 { display: flex; align-items: center; gap: .5rem; }
/* The badge must not make the heading taller than the one next to it. */
.dashboard-grid h2 .badge { font-weight: 600; margin: -.25rem 0; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card-header a { font-size: .8125rem; }
.card-header .actions { align-items: baseline; gap: 1rem; }

.tasks, .recent { list-style: none; margin: 0 -1.25rem calc(-1 * var(--card-pad-y)); padding: 0; }

/* A list spanning the card's width starts as far below its heading as the
   card's padding is above it, so the heading does not sit on the line. */
:is(.card-header, .card h2):has(+ :is(.tasks, .recent, .stage-counts)),
.card-header:has(+ :is(.tasks, .recent, .stage-counts)) h2 { margin-bottom: 0; }
:is(.card-header, .card h2) + :is(.tasks, .recent, .stage-counts) { margin-top: 1rem; }
:root[data-density="compact"] :is(.card-header, .card h2) + :is(.tasks, .recent, .stage-counts) { margin-top: .75rem; }

.task, .recent li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
}

.task > div, .recent li > div { flex: 1; min-width: 0; }
.task a, .recent a { color: var(--text); font-weight: 500; text-decoration: none; }
.task a:hover, .recent a:hover { color: var(--accent); }
.task .hint, .recent .hint { margin-top: .125rem; }

.task-icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--neutral-bg);
  color: var(--muted);
}

.task-danger .task-icon { background: var(--danger-bg); color: var(--danger); }
.task-warning .task-icon { background: var(--warning-bg); color: var(--warning); }
.task-accent .task-icon { background: var(--accent-soft); color: var(--accent); }
/* The offer of the tour to new users, in the colour of the practice firm. */
.tour-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; border-color: color-mix(in srgb, var(--coach) 45%, var(--border)); }
.tour-offer p { margin: 0; color: var(--text-2); }
.tour-offer .actions { display: flex; align-items: center; gap: 1rem; }
.tour-offer form { margin: 0; }
.setup-checklist { margin-bottom: 1rem; }
.setup-checklist > .hint { margin: -.5rem 0 1rem; }

.recent .badge { flex: none; }

.duplicates { border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.duplicates li { flex-wrap: wrap; }
.duplicates li > .person-cell { flex: 1 1 16rem; }
.duplicates .person-cell > div { min-width: 0; overflow-wrap: anywhere; }

.all-done { display: flex; gap: .75rem; align-items: flex-start; color: var(--muted); }
.all-done .icon { color: var(--success); flex: none; margin-top: .125rem; }
.all-done p { margin: 0; }

@media (max-width: 60rem) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .stage-counts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-counts li + li { border-left: 0; }
  .stage-counts li:nth-child(even) { border-left: 1px solid var(--border); }
  .stage-counts li:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Status */
.badge {
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  font-size: .75rem;
  font-weight: 600;
  padding: 0 .5rem;
  border-radius: 4px;
  background: var(--neutral-bg);
  color: var(--text-2);
  white-space: nowrap;
}

.badge-published, .badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-rejected { background: var(--danger-bg); color: var(--danger); }
/* Badges side by side keep a little room between them. */
.badges { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.badges + .hint { margin-top: .25rem; }

.ba-section { margin-top: 1rem; display: grid; gap: 1rem; }
/* Not "ads-…": ad blockers hide classes like .ads-section (EasyList). */
.job-campaigns { margin-top: 1rem; display: grid; gap: 1rem; }
.job-campaigns h2, .job-campaigns > .hint { margin: 0; }
.ad-form { display: grid; gap: .75rem; }
.ad-form h3 { margin: .25rem 0 0; font-size: .9375rem; }
.ad-form .hint, .ad-form .alert { margin: 0; }
.ba-section h2 { margin: 0; }
.ba-section .alert { margin: 0; }

.ba-status {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  padding: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* The icon sits in a tinted square like on the dashboard. */
.ba-status > .icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: .5rem;
  border-radius: var(--radius-sm);
  background: var(--neutral-bg);
  color: var(--muted);
  stroke-width: 2.2;
}

.ba-status p { margin: 0; }
.ba-status-title { font-weight: 600; }
.ba-status-success .icon { background: var(--success-bg); color: var(--success); }
.ba-status-warning .icon { background: var(--warning-bg); color: var(--warning); }
.ba-status-danger { border-color: color-mix(in srgb, var(--danger) 25%, var(--border)); }
.ba-status-danger .icon { background: var(--danger-bg); color: var(--danger); }
.ba-reasons { margin: .5rem 0 0; padding-left: 1.25rem; }

/* Where a job is published: a chip per channel, the details in its
   tooltip. */
.publications { margin-top: 1rem; }
.publications h2 { margin: 0 0 .75rem; }
.publication-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.publication {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .875rem;
  font-weight: 500;
}
.publication-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .75rem .25rem .375rem;
  color: inherit;
  text-decoration: none;
}
a.publication-chip:hover { color: var(--accent); }
.publication .icon {
  width: 1.375rem;
  height: 1.375rem;
  padding: .25rem;
  border-radius: 999px;
  background: var(--neutral-bg);
  color: var(--muted);
  stroke-width: 2.4;
}
.publication-muted { color: var(--muted); }
.publication-note { font-size: .75rem; font-weight: 600; color: var(--warning); }
.publication-note.quiet { font-weight: 500; color: var(--muted); }
a.publication-chip:hover .publication-note { text-decoration: underline; }
.publication-success .icon { background: var(--success-bg); color: var(--success); }
.publication-warning .icon { background: var(--warning-bg); color: var(--warning); }
.publication-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.publication-danger .icon { background: var(--danger-bg); color: var(--danger); }
.publication-image { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 1rem; }
.publication-image img { display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.publication-image form { display: grid; gap: .625rem; justify-items: start; }
.publication-image .hint { margin: 0; max-width: 34rem; }
.image-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; border: 0; margin: 0; padding: 0; }
.image-choice legend { float: left; width: 6rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.image-option {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .1875rem .625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .8125rem;
  cursor: pointer;
}
.image-option:has(input:checked) { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.image-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.publication-image-controls { display: grid; gap: 1rem; min-width: 0; }
/* The photo is an alternative to the coloured area, set apart from the
   choices for the generated picture. */
.publication-image form.image-photo { display: grid; gap: .5rem; justify-items: stretch; padding-top: 1rem; border-top: 1px solid var(--border); max-width: 34rem; }
.image-photo h3 { margin: 0; font-size: .875rem; }
.image-photo .form-actions { margin: 0; }
.image-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.image-option input.image-color { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: none; box-shadow: none; cursor: pointer; }
.image-color::-webkit-color-swatch-wrapper { padding: 0; }
.image-color::-webkit-color-swatch { border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 999px; }
.image-color::-moz-color-swatch { border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 999px; }
.image-swatch { width: .875rem; height: .875rem; }
.image-swatch circle { stroke: color-mix(in srgb, var(--text) 25%, transparent); stroke-width: 1; }
@media (max-width: 40rem) {
  .publication-image { flex-direction: column; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A card alone in a tab would repeat the tab's name, and its count, above
   itself; its heading stays for screen readers only. */
.tab-panel > .card:only-child > h2:first-child,
.tab-panel > .card:only-child > .card-header:first-child:has(> h2:only-child, > h2 + .muted:last-child) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.history summary { cursor: pointer; color: var(--muted); font-weight: 500; width: fit-content; }
.history summary:hover { color: var(--text); }
.history[open] summary { margin-bottom: .75rem; }
.plain { list-style: none; padding: 0; margin: 0 0 .25rem; }

/* The line below the tabs is an inset shadow rather than a border, so
   that the active tab's underline covers it without overflowing, which
   would show a scrollbar. */
.tabs {
  display: flex;
  gap: 1.25rem;
  box-shadow: inset 0 -1px var(--border);
  margin-bottom: 1rem;
  overflow-x: auto;
  /* Tabs cut off at the edge can still be reached with a mouse. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.tabs a {
  padding: .5rem 0 .625rem;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.tabs .count, .card h2 .count {
  margin-left: .25rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background: var(--neutral-bg);
  color: var(--text-2);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.tabs .count-warning { background: var(--warning-bg); color: var(--warning); }

/* Links that order a list, the chosen one marked. */
/* The orders of a list as small pills, the current one filled. */
.sort-links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: -.25rem 0 .75rem; font-size: .8125rem; }
.sort-links > span { margin-right: .25rem; }
.sort-links a { padding: .125rem .625rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); text-decoration: none; }
.sort-links a:hover { background: var(--hover); color: var(--text); }
.sort-links a[aria-current] { border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.toolbar { margin-bottom: 1rem; }
.toolbar input[type="search"] { width: 100%; max-width: 24rem; }
.toolbar-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.toolbar-row input[type="search"] { flex: 1 1 16rem; }
.toolbar-row :is(select, .pick) { flex: 0 1 15rem; min-width: 0; }

/* A list whose rows lead where the link in their first cell does: the
   link covers the row, other links stay above it. */
.row-links tbody tr { position: relative; cursor: pointer; }
.row-links tbody td:first-child a:first-child::after { content: ""; position: absolute; inset: 0; }
.row-links tbody td :is(a, button):not(td:first-child a:first-child) { position: relative; z-index: 1; }

/* Tables: a card of their own, with a tinted header row. */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.table th, .table td {
  text-align: left;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--border);
}

.table th:first-child, .table td:first-child { padding-left: 1.25rem; }
.select-table th:first-child, .select-table td:first-child { width: 1px; padding-right: 0; }
.hint + .select-table { margin-top: .75rem; }
/* A list to choose from fills its card up to the top edge. */
.card > .select-table:first-child { margin-top: calc(-1 * var(--card-pad-y)); border-top: 0; }
.table th:last-child, .table td:last-child { padding-right: 1.25rem; }
.table th { background: var(--surface-2); font-size: .75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.table tbody tr:hover { background: var(--hover); }
.table tr:last-child td { border-bottom: 0; }
.table td a { color: var(--text); font-weight: 500; text-decoration: none; }
.table td a:hover { color: var(--accent); }
/* In a card a table has no frame of its own, which looked like a card in
   the card: it runs from edge to edge, below a line. */
.card .table {
  width: calc(100% + 2.5rem);
  margin-inline: -1.25rem;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
/* In a grid card the stretched table already spans the margins; Firefox
   would add the 2.5rem once more and let it stick out on the right. */
.job-visits > .table, .ba-section > .table { width: auto; }
.card > .table:last-child { margin-bottom: calc(-1 * var(--card-pad-y)); }
.card:has(> .table:last-child) { overflow: hidden; }
.table .row-actions { text-align: right; }
.table .nowrap { white-space: nowrap; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .num .badge { margin-left: .375rem; }
.table th.sortable a { color: inherit; font-weight: inherit; text-decoration: none; }
.table th.sortable a:hover, .table th[aria-sort] a { color: var(--text); }
.table td > .sub { display: block; font-size: .8125rem; }
/* Ad titles like "Hochbautechnikerin/Hochbautechniker" have no place to
   break and would push the table out of its card. */
.ads-table td:first-child { overflow-wrap: anywhere; }
.list-summary { margin: 0 0 .5rem; font-size: .8125rem; }
/* A list's count with, on phones where the column titles are hidden, the
   orders it can be sorted in. */
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.list-head .list-sort { display: none; margin: 0 0 .5rem; }
/* The column titles stay in view while the list scrolls; clip instead of
   hidden keeps the rounded corners without making the table a scroll
   container, which would stop them sticking. */
.table.sticky-head { overflow: clip; }
.table.sticky-head thead th { position: sticky; top: 0; z-index: 2; }

/* The list of people: a photo or initials before each name, contact
   buttons that show on hovering the row. */
.person-cell { display: flex; align-items: center; gap: .75rem; }
.person-cell .sub { display: block; font-size: .8125rem; }
.person-cell .found { color: var(--accent); }
/* "Giarruffo, Antonio" reads badly broken after the comma. */
.person-cell a { white-space: nowrap; }
.person-avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
}
.people-table .stage + .sub { margin-top: .125rem; }
.quick-actions { display: inline-flex; gap: .125rem; opacity: 0; transition: opacity .15s; }
.people-table tr:is(:hover, :focus-within) .quick-actions { opacity: 1; }
@media (hover: none) {
  .quick-actions { opacity: 1; }
}
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }

/* The job market's filters: what most searches need in one row, the
   rest behind "Weitere Filter"; those set show below as chips. */
.market-filters { display: grid; gap: .625rem; }
.market-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.market-filter-row input[type="search"] { flex: 1 1 12rem; max-width: none; }
.place-filter { display: flex; gap: .5rem; }
.place-filter input { width: 12rem; }
/* The radius counts only around a place. */
.place-filter:has(input:placeholder-shown) select { opacity: .5; }
.filter-menu { position: relative; }
.filter-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; }
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-menu > summary .icon { width: 1rem; height: 1rem; }
.filter-menu > summary .count { padding: 0 .375rem; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: .75rem; font-variant-numeric: tabular-nums; }
.filter-menu > summary .count:empty { display: none; }
.filter-menu[open] > summary { border-color: var(--accent); }
.filter-panel {
  position: absolute;
  top: calc(100% + .375rem);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 1rem;
  width: min(30rem, calc(100vw - 2rem));
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
}
.filter-menu.menu-up > .filter-panel { top: auto; bottom: calc(100% + .375rem); }
.filter-panel > .button { justify-self: end; }
.filter-panel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.filter-panel legend { margin-bottom: .5rem; padding: 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.filter-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.filter-chips label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--text-2);
  cursor: pointer;
}
.filter-chips label:hover { border-color: var(--muted); color: var(--text); }
.filter-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filter-chips label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.filter-chips label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; }
.active-filters:empty { display: none; }
.active-filter { display: inline-flex; align-items: center; gap: .25rem; height: 1.75rem; padding: 0 .4375rem 0 .75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.active-filter .icon { width: .875rem; height: .875rem; opacity: .65; }
.active-filter:hover .icon { opacity: 1; }
.reset-filters { margin-left: .25rem; font-size: .8125rem; color: var(--muted); }
.market-watch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
/* The explanation with the button to hear of new matches beside it; who
   hears of them already takes a line of its own. */
.work-permit[hidden] { display: none; }
/* The end of a work permit counts only for a valid one. */
.work-permit:not(:has(#work_permit option[value="valid"]:checked)) .work-permit-until { visibility: hidden; }
/* "Eingeholt" in the talent pool choice, with how beside it. */
.talent-pool-granted { display: inline-flex; align-items: center; gap: .5rem; }
.talent-pool-granted select { width: auto; }
.talent-pool-granted:not(:has(input:checked)) select { opacity: .6; }
.market-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.market-intro > .hint { flex: 1 1 20rem; margin: 0; }
.market-intro > .market-watch:has(> span) { flex-basis: 100%; }
.market-watch > span { display: inline-flex; align-items: center; gap: .375rem; }
/* The list of watches: what is news on top, as cards, then all watches
   as a table. */
.watch-group { margin: 1.75rem 0 .625rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.watch-news > .watch-group { margin: 0 0 -.375rem; }
.watch-news { display: grid; gap: 1rem; margin-bottom: 1.75rem; }
/* Once the last news card went away, so does its heading. */
.watch-news:not(:has(.card)) { display: none; }
.watch-list > .watch-group:first-child { margin-top: 0; }
.watch-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
:root .content .card.watch-news-card .watch-who h3 { margin: 0; font-size: 1rem; }
.watch-who h3 a { color: var(--text); text-decoration: none; }
.watch-who h3 a:hover { color: var(--accent); }
.watch-who .sub { font-size: .8125rem; }
.watch-who-links { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.watch-new-count { display: inline-block; padding: .0625rem .5rem; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.watch-fits { list-style: none; margin: .75rem -1.25rem calc(-1 * var(--card-pad-y)); padding: 0; }
.watch-fits > li { display: grid; grid-template-columns: minmax(12rem, 1.1fr) minmax(0, 1.6fr) 10rem; align-items: center; gap: .25rem 1rem; padding: .625rem 1.25rem; border-top: 1px solid var(--border); }
.watch-fit-employer { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-width: 0; }
.watch-fit-employer > a { font-weight: 600; color: var(--text); text-decoration: none; }
.watch-fit-employer > a:hover { color: var(--accent); }
.watch-fit-employer > .muted { font-size: .8125rem; }
.watch-fit-ad { min-width: 0; font-size: .875rem; }
.watch-fit-ad > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-fit-why { display: flex; flex-wrap: wrap; gap: .125rem .75rem; margin-top: .125rem; color: var(--muted); font-size: .8125rem; }
.watch-fit-why .against { color: var(--warning); }
.watch-fits > li > .button { justify-self: end; padding: .3125rem .75rem; font-size: .8125rem; }
/* The table lets its menus float out of it. */
.watch-table { overflow: visible; }
.watch-table thead th:first-child { border-top-left-radius: var(--radius); }
.watch-table thead th:last-child { border-top-right-radius: var(--radius); }
.watch-table td { vertical-align: middle; }
.watch-table .watch-person { width: 40%; }
.watch-table .person-cell .sub { display: block; font-size: .8125rem; }
.watch-table .watch-end { white-space: nowrap; }
.watch-table .watch-row-actions { width: 1%; white-space: nowrap; text-align: right; }
.watch-row-actions > *, .watch-row-actions form { display: inline-block; margin: 0; vertical-align: middle; }
.watch-row-actions .button { padding: .25rem .625rem; font-size: .8125rem; }
.watch-row-actions form + .watch-menu { margin-left: .5rem; }
.watch-ending { color: var(--warning); font-weight: 600; }
.watch-extended { color: var(--success); }
.watch-menu > summary { padding: .25rem; border-radius: .25rem; color: var(--muted); }
.watch-menu > summary:hover, .watch-menu[open] > summary { color: var(--text); background: var(--hover); }
.watch-menu > summary .icon { width: 1.125rem; height: 1.125rem; }
.watch-menu-panel { width: 15rem; gap: 0; padding: .375rem 0; text-align: left; }
:root[data-theme="contrast"] .watch-menu-panel { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.watch-menu-panel form { display: block; margin: 0; }
.watch-menu-panel .menu-item { display: block; width: 100%; height: auto; padding: .4375rem .875rem; border: 0; border-radius: 0; box-shadow: none;
  background: none; color: var(--text); font: inherit; font-size: .875rem; text-align: left; text-decoration: none; cursor: pointer; }
.watch-menu-panel .menu-item:hover, .watch-menu-panel .menu-item:focus-visible { background: var(--hover); }
@media (max-width: 40rem) {
  .watch-fits > li { grid-template-columns: minmax(0, 1fr); }
  .watch-fits > li > .button { justify-self: start; }
  .watch-table th:nth-child(2), .watch-table td:nth-child(2) { display: none; }
}
.market-table td:first-child { min-width: 17rem; }
/* Beside a tour's panel the list fits with a narrower first column and
   long occupations hyphenated, or broken where that does not do. */
.market-table .occupation-links { hyphens: auto; overflow-wrap: anywhere; }
.shell:has(> .coach) .market-table td:first-child { min-width: 12rem; }
.market-table .title-row { margin: 0; gap: .375rem; }
/* A stripe in the colours of the map marks leads and customers; most
   employers are untouched, so they go without. Red warns of employers
   who want no staffing agencies. */
.market-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1.25rem; margin-bottom: .5rem; }
.market-summary .list-summary, .market-summary .map-legend { margin: 0; }
.market-table tbody td:first-child { box-shadow: inset 3px 0 var(--stripe, transparent); }
.market-table .status-lead { --stripe: var(--status-lead); }
.market-table .status-customer { --stripe: var(--status-customer); }
.market-table .status-declined { --stripe: var(--status-declined); }
.market-table .refuses-agencies { --stripe: var(--status-refuses); }
/* The eye to watch an employer, at the end of its row: faint until it
   watches. */
.market-table .watch-cell { width: 1%; padding-left: 0; text-align: right; }
.employer-watch { margin: 0; }
button.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  opacity: .45;
}
button.icon-button:hover, button.icon-button:focus-visible { background: var(--hover); opacity: 1; }
button.icon-button.watching { color: var(--accent); opacity: 1; }
button.icon-button .icon { width: 1.125rem; height: 1.125rem; }
.employer-watch > summary.watching { background: var(--accent-soft); color: var(--accent); }
.employer-watch > summary.watching .icon { color: var(--accent); }
.watch-panel { width: min(22rem, calc(100vw - 2rem)); }
.watch-panel form { margin: 0; display: grid; gap: .75rem; }
.watch-panel .hint { margin: 0; }
.watch-choices { display: grid; gap: .375rem; }
.watch-status { display: flex; align-items: center; gap: .375rem; margin: 0; font-weight: 600; }
.watch-status .icon { width: 1rem; height: 1rem; color: var(--accent); }
.watch-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
/* What happened to an employer's ads, the news marked. */
.employer-event { display: flex; align-items: flex-start; gap: .625rem; }
.employer-event > div { flex: 1; min-width: 0; }
.employer-event .event-icon { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--neutral-bg); color: var(--muted); }
.employer-event .event-icon .icon { width: .875rem; height: .875rem; }
.employer-event.event-new .event-icon { background: var(--accent-soft); color: var(--accent); }
.employer-event.event-long .event-icon { background: var(--warning-bg); color: var(--warning); }
.employer-event .event-title { font-weight: 500; }
.employer-event .sub { display: block; }
/* The rest of the history folds below the first, spanning the card as
   the list does. */
.employer-events .recent:has(+ .events-more) { margin-bottom: 0; }
.events-more { margin: 0 -1.25rem calc(-1 * var(--card-pad-y)); border-top: 1px solid var(--border); }
.events-more > summary { padding: .625rem 1.25rem; cursor: pointer; color: var(--muted); font-size: .875rem; font-weight: 500; }
.events-more > summary:hover { color: var(--text); }
.events-more > .recent { margin: 0; }
/* Watched employers the list leaves out follow it. */
.watched-elsewhere { margin-top: 1.25rem; }
.watched-elsewhere li { align-items: center; }
.watched-elsewhere .sub { display: block; }
/* A customer's logo, or its initials in a colour of its own, none of
   the stripe's green and orange. Logos keep a light plate, as most are
   drawn for white pages. */
/* A warning of a duplicate below the name of a new customer. */
.similar-customers:not(:empty) { margin-top: .5rem; padding: .5rem .75rem; border-radius: var(--radius); background: var(--warning-bg); color: var(--warning); }
.similar-customers .hint { margin: 0 0 .25rem; color: inherit; font-weight: 600; }
.similar-customers a { color: inherit; font-weight: 600; }
.similar-customers .muted { color: inherit; opacity: .8; }
.customer-name { display: inline-flex; align-items: center; gap: .625rem; }
.customer-name .sub { display: block; font-size: .8125rem; }
.customer-mark { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: .375rem; object-fit: contain; background: #fff; padding: .125rem; }
.customer-mark.large { width: 2.5rem; height: 2.5rem; border-radius: .5rem; padding: .25rem; }
.customer-mark.initials { padding: 0; font-size: .625rem; font-weight: 700; letter-spacing: .02em; color: #fff; }
.customer-mark.initials.large { font-size: .9375rem; }
.customer-mark.hue-0 { background: #4c6ef5; }
.customer-mark.hue-1 { background: #0c8599; }
.customer-mark.hue-2 { background: #7048e8; }
.customer-mark.hue-3 { background: #ae3ec9; }
.customer-mark.hue-4 { background: #c2255c; }
.customer-mark.hue-5 { background: #5f6b7a; }
/* Customers get the same stripe: green with people deployed, orange when
   they look for staff themselves, which is worth a call. */
.customer-table tbody td:first-child { box-shadow: inset 3px 0 var(--stripe, transparent); }
.customer-table .status-lead { --stripe: var(--status-lead); }
.customer-table .status-customer { --stripe: var(--status-customer); }
/* People presented get a stripe by the answer: green for a yes, red for
   a no, orange where something is to do; the counts above share it. */
.presentation-table tbody td:first-child { box-shadow: inset 3px 0 var(--stripe, transparent); }
.presentation-table .status-yes { --stripe: var(--success); }
.presentation-table .status-no { --stripe: var(--danger); }
.presentation-table .status-todo { --stripe: var(--status-lead); }
.map-dot.presented-yes { background: var(--success); }
.map-dot.presented-no { background: var(--danger); }
/* The answer leads; the application below it is the quieter line. */
.presented-feedback > .stage { color: var(--text); font-weight: 600; }
.presented-application-line .stage { color: var(--muted); }
.presented-application-line .presented-application-link { font-weight: 400; color: var(--muted); }
.presented-application-line .presented-application-link:hover { color: var(--accent); }
/* The list of presentations: photo and logo before the names, tags for
   the anonymous label and the other companies, a calm link on to the
   application. */
.presentation-table .person-cell .sub, .presented-company .sub { margin-top: .125rem; }
.presented-company { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.presented-company > div { min-width: 0; }
.presented-company .sub { display: block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
.presented-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: .8125rem; }
.presented-tags > * { white-space: nowrap; }
.presented-tags .tag { padding: 0 .375rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: .75rem; line-height: 1.25rem; }
.presentation-table .follow-up { display: inline-flex; align-items: center; gap: .25rem; color: var(--warning); font-size: .8125rem; font-weight: 500; }
.presentation-table .follow-up .icon { width: .8125rem; height: .8125rem; }
.presented-application-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; color: var(--text-2); white-space: nowrap; }
/* The buttons of the answer keep to one line, the link on to the
   application below them; the company's line gives way instead. */
.presentation-table td:last-child { width: 1%; }
.presentation-table .presented-feedback { flex-wrap: nowrap; white-space: nowrap; }
.presentation-table .presented-company .sub { max-width: 13rem; }
.presented-application-link .icon { width: .875rem; height: .875rem; }
/* The fields with a dot in their colour, like stages, the levels after
   them; colour enough to tell them apart without crowding the list. */
.table td > .kind { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .75rem; margin-top: .25rem; font-size: .8125rem; }
.field-tag { display: inline-flex; align-items: center; gap: .375rem; color: var(--text-2); white-space: nowrap; }
.field-tag::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 999px; background: var(--field); }
.kind .levels { color: var(--muted); }
.field-industrial { --field: var(--field-industrial); }
.field-commercial { --field: var(--field-commercial); }
.field-technical { --field: var(--field-technical); }
.field-care { --field: var(--field-care); }
.field-other { --field: var(--field-other); }
/* Suitable candidates are what to pitch with, so they stand out. */
.table td a.candidate-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .0625rem .5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.table td a.candidate-chip:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.candidate-chip .icon { width: .875rem; height: .875rem; }
#lead .timeline { margin-top: 1rem; }
.career-url { margin: 0 0 .25rem; overflow-wrap: anywhere; }

/* The ads' header offers to look on the employer's website too; below
   the ads, a note tells how that went and what to change. */
.listings-header { flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.listings-header h2 { margin: 0; }
.listings-header form { margin: 0; }
.career-note { margin-top: 1rem; padding-top: .875rem; border-top: 1px solid var(--border); }
.career-note .hint { margin: 0; }
.career-note .hint a { display: inline-flex; align-items: center; gap: .25rem; overflow-wrap: anywhere; }
.career-note .hint .icon { width: .75rem; height: .75rem; }
.career-note .field-error { margin: .5rem 0 0; }
.career-note details.history { margin-top: .5rem; }
.pending-label { margin: 0; color: var(--accent); font-weight: 500; white-space: nowrap; }
.career-pending { padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--accent-soft); }
.career-pending .pending-label { white-space: normal; }
.career-pending .hint { margin: .25rem 0 0 1rem; }
.career-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .5rem 0 0; }
.career-actions form { margin: 0; }
#lead > details.history { margin-top: .875rem; }

/* A disclosure whose summary looks like a secondary button. */
.summary-button > summary {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 .875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  list-style: none;
}
.summary-button > summary::-webkit-details-marker { display: none; }
.summary-button > summary:hover { background: var(--hover); color: var(--text); }
.summary-button[open] > summary { display: none; }
.summary-button.primary > summary { border-color: var(--primary); background: var(--primary); color: var(--primary-text); font-weight: 500; }
.summary-button.primary > summary:hover { border-color: var(--primary-hover); background: var(--primary-hover); color: var(--primary-text); }
/* Making a job of an ad is offered in every row, so it stays quiet until
   the row is pointed at. */
.ads-table a.quiet-action { color: var(--muted); font-weight: 400; }
.ads-table tr:is(:hover, :focus-within) a.quiet-action { color: var(--accent); }
.timejob-rules { margin: .25rem 0 .5rem; }
.timejob-rules > summary { font-size: .8125rem; }

/* Ads elsewhere, and a select next to its button. */
.far-ads { margin-top: 1rem; }
.inline-form { display: flex; gap: .5rem; margin: 0; }
/* An employer on the market that is not a customer yet: create one, or
   link one, the most alike named first. */
.customer-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: .75rem; }
.customer-actions > .button { justify-self: start; }
.customer-suggestion { display: grid; gap: .5rem; justify-items: start; margin: 0 0 1rem; padding: .75rem .875rem; border-radius: var(--radius-sm); background: var(--accent-soft); }
.customer-suggestion p { margin: 0; }
.inline-form :is(select, .pick) { flex: 1; min-width: 0; }
button.link-button.muted-link { color: var(--muted); }
.table td a.muted-link { color: var(--muted); font-weight: 400; }
.table td .occupation-links a { font-weight: 400; }
.occupation-links a:not(:last-child)::after { content: ","; margin-right: .3em; color: var(--text); }
button.link-button.muted-link:hover { color: var(--text); }

/* A lead in the job market's list: status, owner and follow-up. */
.lead-line { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .375rem; }
/* In the colour of the row's stripe. */
.lead-status { font-size: .8125rem; font-weight: 600; color: var(--status-lead); }
.avatar-sm { width: 1.375rem; height: 1.375rem; font-size: .5625rem; }
.follow-up {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .0625rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}
.follow-up .icon { width: .8125rem; height: .8125rem; }
.follow-up-later { color: var(--muted); border: 1px solid var(--border); }
.follow-up-due { color: var(--warning); background: var(--warning-bg); }
.follow-up-overdue { color: var(--danger); background: var(--danger-bg); }
.row-actions form { margin: 0; }
.row-actions .inline-form { justify-content: flex-end; }

/* Detail */
/* Narrow enough for a job's seven facts to fit in one row. */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin: 0 0 1rem;
  padding: 0;
}

.summary div { padding: .875rem 1.25rem; border-left: 1px solid var(--border); }
.summary div:first-child { border-left: 0; }
.summary dt { font-size: .75rem; font-weight: 500; color: var(--muted); }
.summary dd { margin: .125rem 0 0; font-weight: 600; }
.summary dd.commute-over { color: var(--warning); }

.detail-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  align-items: start;
}
.detail-grid + .card { margin-top: 1rem; }
/* The side column needs some 18rem for its facts; with less, it goes
   below. The tour's panel takes another 21rem. */
@media (max-width: 64rem) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 96rem) { .shell:has(> .coach) .detail-grid { grid-template-columns: minmax(0, 1fr); } }

/* An application's overview, parted into what belongs to the application
   and what to the person, the same on all their applications. */
.detail-section + .detail-section { margin-top: 2rem; }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-bottom: .75rem; min-height: 2.25rem; }
.section-heading h2 { font-size: 1rem; }
.section-heading .hint { margin: 0; }
.section-heading .actions { margin-left: auto; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: .625rem 1rem; margin: 0; }
.facts dt { color: var(--muted); white-space: nowrap; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Applications */
/* A column of cards; long content such as file names is cut off rather
   than widening the column. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
/* A wrapper whose children take its place in the layout. */
.contents { display: contents; }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-lead { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.badge-muted { color: var(--muted); }

/* The stages as numbered steps; each step is a button that moves the
   application there. */
.pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .625rem .75rem;
}

.pipeline-steps { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.pipeline-steps li { display: flex; align-items: center; gap: .25rem; }
.pipeline-steps li + li::before { content: ""; width: .75rem; height: 1px; background: var(--border); }

.pipeline-steps button {
  height: 2rem;
  padding: 0 .625rem 0 .375rem;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
}

.pipeline-steps button:hover { background: var(--hover); color: var(--text); border-color: transparent; }
.pipeline-steps .done button { color: var(--text-2); }
.pipeline-steps .current button { background: var(--accent-soft); color: var(--accent); font-weight: 600; cursor: default; }
/* "Eingestellt" comes from TimeJob there; the step tells so on hover. */
.pipeline-steps .locked button { opacity: .55; cursor: not-allowed; pointer-events: none; }

.step-mark {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--neutral-bg);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step-mark .icon { width: .875rem; height: .875rem; stroke-width: 2.6; }
.done .step-mark { background: var(--success-bg); color: var(--success); }
.current .step-mark { background: var(--accent); color: var(--accent-text); }
.current.done .step-mark { background: var(--success); }

.pipeline-end { display: flex; gap: .5rem; align-items: center; }
.pipeline-end .hint { max-width: 30rem; }
.pipeline-note { flex-basis: 100%; order: 1; margin: 0; padding: .5rem .25rem 0; border-top: 1px solid var(--border); }

button.secondary.danger { color: var(--danger); }
button.secondary.danger:hover { background: var(--danger-bg); color: var(--danger); }

.note-form { margin-bottom: 1.25rem; }
.note-form .field { margin-bottom: .5rem; }
.note-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.quick-notes { display: flex; flex-wrap: wrap; gap: .375rem; }
.note-submit { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-left: auto; }
.note-submit .check { font-size: .8125rem; color: var(--text-2); }
button.quick-note {
  height: 1.75rem;
  padding: 0 .625rem;
  border-radius: 999px;
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .8125rem;
  box-shadow: none;
}
button.quick-note:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* The history of an application: an icon for each kind of entry on a
   line, who and when beside what happened. */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { position: relative; display: flex; gap: .75rem; padding-bottom: 1rem; }
.activity li:last-child { padding-bottom: 0; }
.activity li:not(:last-child)::before,
.activity:has(+ .activity-rest[open]) > li:last-child::before {
  content: "";
  position: absolute;
  left: .875rem;
  top: 1.875rem;
  bottom: .25rem;
  width: 1px;
  background: var(--border);
}
.activity li > div { flex: 1; min-width: 0; padding-top: .25rem; }
.activity-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--neutral-bg);
  color: var(--muted);
}
.activity-icon .icon { width: .875rem; height: .875rem; }
.activity-note .activity-icon { background: var(--accent-soft); color: var(--accent); }
.activity-stage_changed .activity-icon { background: var(--success-bg); color: var(--success); }
.activity-interview .activity-icon { background: var(--warning-bg); color: var(--warning); }
.activity-meta { display: flex; flex-wrap: wrap; gap: .125rem .5rem; align-items: baseline; margin: 0; }
.activity-meta strong { font-weight: 600; }
.activity-meta .muted { font-size: .8125rem; }
.activity-meta .badge { font-size: .75rem; }
.activity-application { font-size: .8125rem; }
.activity .prewrap {
  margin-top: .375rem;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}
.activity-more { display: inline-block; margin: 1rem 0 0 2.5rem; font-size: .8125rem; font-weight: 500; }
/* On a person, the rest folds out below a summary that looks like the link on an application. */
summary.activity-more { color: var(--accent); cursor: pointer; list-style: none; }
summary.activity-more::-webkit-details-marker { display: none; }
summary.activity-more:hover { color: var(--accent-hover); }
.activity-rest[open] > summary.activity-more { display: none; }
/* The unfolded rest goes on where the first entries end. */
.activity:has(+ .activity-rest[open]) > li:last-child { padding-bottom: 1rem; }

/* Tabs that show one part of a long page at a time (app.js). A part
   without a column beside it keeps lines short enough to read. */
.page-tabs { margin-top: 1.5rem; }
.tab-panel.single { max-width: 52rem; }
.tab-panel[hidden] { display: none; }

/* When the interview is, asked below the stages. */
.interview-form { margin-bottom: 1rem; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.interview-form h2 { margin-bottom: 1rem; }
.interview-fields { display: grid; gap: 0 1rem; grid-template-columns: 11rem 8rem minmax(0, 1fr); }
.interview-form .form-actions { margin-top: 0; }
@media (max-width: 40rem) { .interview-fields { grid-template-columns: 1fr 1fr; } .interview-note { grid-column: 1 / -1; } }
.summary-action { display: block; font-size: .8125rem; font-weight: 500; }
.badge .icon { width: .75rem; height: .75rem; margin-right: .25rem; vertical-align: -.0625rem; }

.timeline { list-style: none; margin: 0; padding: 0; }

.timeline li {
  position: relative;
  margin-left: .25rem;
  padding: 0 0 1rem 1.25rem;
  border-left: 1px solid var(--border);
}

.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }

.timeline li::before {
  content: "";
  position: absolute;
  left: -.3125rem;
  top: .375rem;
  width: .5625rem;
  height: .5625rem;
  border-radius: 999px;
  background: var(--border);
}

.timeline .timeline-note::before { background: var(--accent); }
/* The timeline sits in the narrow column, so who and when go below the
   entry. */
.timeline-meta { margin: 0; display: grid; }
.timeline-meta > :first-child { font-weight: 500; }
.timeline-meta > :last-child { font-size: .8125rem; }
.timeline .prewrap { margin-top: .25rem; }

/* Each document is a row of its own, like the lists on the dashboard. */
.documents { list-style: none; margin: 0 -1.25rem 1rem; padding: 0; }

.documents li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1.25rem;
  border-top: 1px solid var(--border);
}

.documents li:last-child { border-bottom: 1px solid var(--border); }
.documents:last-child { margin-bottom: calc(-1 * var(--card-pad-y)); }
.documents:last-child li:last-child { border-bottom: 0; }
.documents li:hover { background: var(--hover); }
.documents form { margin: 0; flex: none; }

.doc-type {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--neutral-bg);
  color: var(--text-2);
}

.doc-type-pdf { background: var(--danger-bg); color: var(--danger); }
.doc-type-text { background: var(--accent-soft); color: var(--accent); }
.doc-type-image { background: var(--success-bg); color: var(--success); }

.doc-info { flex: 1; min-width: 0; }
.doc-info .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.doc-name {
  display: block;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-name:hover { color: var(--accent); }

.upload-form { display: grid; gap: .5rem; }
/* Next to the documents the drop zone is a single flat line. */
.upload-form .filedrop { padding: .5rem .875rem; }
.upload-form .filedrop-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .75rem; }
.upload-form .filedrop > .icon { width: 1.125rem; height: 1.125rem; }
.upload-row { display: flex; gap: .5rem; }
.upload-row select { flex: 1; min-width: 0; }

/* The file input lies invisibly over the whole zone and takes clicks and
   dropped files itself. */
.filedrop {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--muted) 45%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  transition: border-color .15s, background-color .15s;
}

.filedrop input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.filedrop > .icon { flex: none; width: 1.5rem; height: 1.5rem; }
.filedrop-text { display: grid; gap: .125rem; min-width: 0; }
.filedrop-prompt { color: var(--text-2); }
.filedrop-prompt strong { color: var(--accent); font-weight: 600; }
.filedrop-name { display: none; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filedrop:hover, .filedrop.dragover { border-color: var(--accent); background: var(--accent-soft); }
.filedrop:has(input:focus-visible) { border-color: var(--accent); box-shadow: var(--focus-ring); }
.filedrop:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.filedrop.chosen { border-style: solid; border-color: var(--accent); color: var(--accent); }
.filedrop.chosen .filedrop-prompt { display: none; }
.filedrop.chosen .filedrop-name { display: block; }

/* What was read from a CV */
/* Portrait like a photo in a CV, rather than a round avatar. */
.candidate-photo { width: 2.5rem; height: 3.125rem; border-radius: var(--radius-sm); object-fit: cover; flex: none; border: 1px solid var(--border); }
.photo-link { display: block; flex: none; border-radius: var(--radius-sm); cursor: zoom-in; }
.photo-link .candidate-photo { display: block; }

.photo-dialog {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 40px rgb(0 0 0 / 30%);
}

.photo-dialog::backdrop { background: rgb(0 0 0 / 55%); }
/* Photos read from CVs are small; showing them much larger only blurs them. */
.photo-dialog img { display: block; height: min(24rem, 70vh); width: auto; max-width: 80vw; object-fit: contain; border-radius: var(--radius-sm); }
.photo-dialog-actions { display: flex; justify-content: flex-end; margin-top: .75rem; }

.confirm-dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 40px rgb(0 0 0 / 30%);
}
.confirm-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.confirm-dialog[open] { animation: confirm-in .15s ease-out; }
@keyframes confirm-in { from { opacity: 0; transform: translateY(.5rem) scale(.98); } }
.confirm-dialog form { margin: 0; }
.confirm-dialog h2 { margin: 0; font-size: 1.125rem; text-transform: none; letter-spacing: normal; }
.confirm-dialog p { margin: .5rem 0 0; color: var(--muted); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
.confirm-actions button.danger, .confirm-actions button.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.confirm-actions button.danger:hover { filter: brightness(.92); }

.photo-row { display: flex; align-items: center; gap: 1rem; }
.photo-row > div { flex: 1; }
.photo-row p { margin: 0; }
.cv-card h3 { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.cv-summary { margin: 0 0 1rem; color: var(--text-2); }
.cv-summary strong { color: var(--text); font-weight: 600; }
.cv-history { margin-top: 1.25rem; }
/* The short facts side by side keep the card short. */
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.25rem 2rem; margin-top: 1.25rem; }
.cv-grid:empty { display: none; }
.cv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.cv-more summary { cursor: pointer; width: fit-content; margin-top: .5rem; color: var(--muted); font-size: .8125rem; font-weight: 500; }
.cv-more summary:hover { color: var(--text); }
.cv-more[open] summary { margin-bottom: .375rem; }
.cv-card form { margin: 0; }
.cv-pending::before, .pending-label::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 999px; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cv-pending::before, .pending-label::before { animation: none; } }
/* The fields a CV chosen for a new application fills in are swapped as
   one, without a box of their own in the form's layout. */
.cv-prefill { display: contents; }
/* The shift models, a row of their own below the working times. */
.shift-models { margin-top: .5rem; align-items: center; }
.cv-reading:not(.htmx-request) { display: none; }
.cv-suggestions { display: grid; gap: .75rem; }
.cv-suggestions .table td:first-child { width: 2.5rem; }
.cv-source { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.25rem; }
.cv-source > div { display: grid; gap: .25rem; }
.cv-source > .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cv-source > .actions form { margin: 0; }
/* Each station of a CV being corrected, set apart from the next. */
.cv-edit-station { display: grid; gap: .75rem; padding-block: 1rem; border-top: 1px solid var(--border); }
.cv-edit-station:first-of-type { border-top: 0; padding-top: 0; }
.cv-edit-station .field { margin: 0; }
.danger-zone { margin-top: 1.5rem; max-width: 56rem; }
.danger-zone form { margin: 0; }
/* A line per station, its period in a column of its own so the history
   reads like a timeline. */
.stations { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.stations li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 .75rem; align-items: baseline; }
.station-period { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.station-title { font-weight: 500; }
/* On phones there is no room for the period column. */
@media (max-width: 30rem) { .stations li { grid-template-columns: 1fr; } }
/* Long words in narrow columns break by syllable, e-mail addresses after
   their @ or, if they must, anywhere. */
.facts dd, .summary dd { hyphens: auto; }
a.mail { overflow-wrap: anywhere; hyphens: none; }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; margin: 0; padding: 0; }
.chips li { padding: .125rem .5rem; border-radius: 999px; background: var(--neutral-bg); color: var(--text-2); font-size: .8125rem; }
.chips li.chip-against { background: var(--warning-bg); color: var(--warning); }
/* Experiences a recruiter added, each with a button to remove it. */
.experience-chips li { display: inline-flex; align-items: center; gap: .25rem; padding-right: .25rem; }
.experience-chips form { display: contents; }
.chip-remove { display: inline-flex; padding: .125rem; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.chip-remove:is(:hover, :focus-visible) { color: var(--danger); background: var(--surface); }
.chip-remove .icon { width: .75rem; height: .75rem; }
.experience-chips + .experience-form { margin-top: .75rem; }
.experience-form .inline-form input { flex: 1; min-width: 0; }
.experience-form .field-error { margin-top: .375rem; }
.experience-form + .hint { margin-top: .5rem; }
/* Why someone suits a job, as a line; what speaks against it stands out. */
.fit { display: grid; grid-template-columns: auto 1fr; gap: .625rem 1rem; margin: 0; }
.fit > div { display: contents; }
.fit dt { grid-column: 1; color: var(--muted); white-space: nowrap; }
.fit dd { grid-column: 2; margin: 0; display: flex; gap: .375rem; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.fit dd + dd { margin-top: -.375rem; }
.fit .icon { flex: none; width: .9375rem; height: .9375rem; align-self: flex-start; margin-top: .1875rem; }
.fit-good .icon { color: var(--success); }
.fit-bad { color: var(--warning); font-weight: 500; }
.fit-unknown { color: var(--muted); }
.fit + .hint { margin-top: .875rem; }
.reasons { list-style: none; margin: 0; padding: 0; font-size: .8125rem; color: var(--muted); line-height: 1.6; }
.reasons li { display: inline; }
.reasons li + li::before { content: "·"; margin: 0 .4rem; color: var(--muted); }
.reasons .against { color: var(--warning); font-weight: 500; }
.reasons .icon { width: .8125rem; height: .8125rem; vertical-align: -.125rem; margin-right: .1875rem; }
.card-header + .reasons { margin-top: .25rem; }

#application-list td:first-child { min-width: 11rem; }

/* An application's stage in lists: a dot in the stage's colour. */
.stage { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--text-2); white-space: nowrap; }
.stage::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 999px; background: var(--muted); }
/* In a crowded list "Gespräch vereinbart" may wrap, the time of an interview not. */
.table td:not(.nowrap) > .stage { white-space: normal; }
.stage-accent { color: var(--accent); font-weight: 600; }
.stage-accent::before { background: var(--accent); }
.stage-success::before { background: var(--success); }
.stage-warning::before { background: var(--warning); }
.stage-rejected::before { background: var(--danger); }
.stage .icon { width: .8125rem; height: .8125rem; margin-left: -.125rem; }
.stage:has(.icon)::before { display: none; }
/* In a list of facts, the chips' text lines up with the other values and
   their line, the pills reaching into the gap. */
.facts .chips { margin: -.125rem 0 0 -.5rem; }
.card-header + .chips { margin-top: .5rem; }
.chips + .hint { margin-top: .75rem; }

/* Candidates who suit a job: person, reasons and the button to suggest. */
.matches { list-style: none; margin: 0 -1.25rem calc(-1 * var(--card-pad-y)); padding: 0; }
.matches > li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .375rem 1rem; padding: .875rem 1.25rem; border-top: 1px solid var(--border); }
.matches .reasons { grid-column: 1; }
.matches > li > :is(form, .button) { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.matches > li.more-matches { display: flex; justify-content: center; padding: .625rem 1.25rem; }
.matches > li.pick { grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; }
.matches > li.pick > :is(input, .pick-spacer) { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin: .25rem 0 0; }
.matches > li.pick > .pick-spacer { width: 1rem; }
.matches > li.pick > :not(input, .pick-spacer, form, .button, .take-note) { grid-column: 2; }
/* Beside the proposal's card the facts need the room, so what to do
   with someone goes below them. */
.matches > li.pick > :is(form, .button, .take-note) { grid-column: 2; grid-row: auto; justify-self: start; margin-top: .25rem; }
.take-note { font-size: .8125rem; white-space: nowrap; }
/* Beside an employer's lists, what is ticked to propose; it stays in view
   while the list scrolls. */
.propose-card { position: sticky; top: 1rem; }
.propose-card .hint { margin: 0; }
.propose-count { margin: .875rem 0 .75rem; font-size: .875rem; color: var(--text-2); }
.propose-count strong { font-size: 1.25rem; color: var(--text); font-variant-numeric: tabular-nums; }
.propose-card.over .propose-count strong { color: var(--danger); }
.propose-card button { width: 100%; }

/* Choosing whom to present: the list beside a card of those chosen, which
   app.js keeps while searches swap the list. */
.pick-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1rem; align-items: start; }
.pick-people tr.chosen { background: var(--accent-soft); }
.pick-people tr:has(input:disabled) td:not(:first-child) { opacity: .55; }
.pick-people .stage + .sub { margin-top: .125rem; }
.pick-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.pick-foot .hint { margin: 0; }
.pick-chosen { position: sticky; top: 1rem; display: grid; gap: .75rem; }
.pick-chosen h2 { display: flex; justify-content: space-between; gap: .5rem; margin: 0; }
.pick-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick-chosen.full .pick-count { color: var(--warning); }
.pick-slots { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pick-slots li { display: flex; align-items: center; gap: .5rem; min-height: 2rem; font-size: .875rem; }
.pick-slots .person-avatar { width: 1.75rem; height: 1.75rem; font-size: .625rem; }
.pick-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-slots .slot { border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.pick-chosen .hint { margin: 0; }
.pick-chosen .pick-full, .pick-chosen.full .pick-room { display: none; }
.pick-chosen.full .pick-full { display: block; color: var(--warning); }
.pick-chosen :is(button[type="submit"], .button) { width: 100%; justify-content: center; }
/* On narrow screens the card comes first, without its empty places. */
@media (max-width: 60rem) {
  .pick-layout { grid-template-columns: minmax(0, 1fr); }
  .pick-chosen { position: static; order: -1; }
  .pick-slots .slot { display: none; }
}
.match-ads { min-width: 0; }
.match-ads summary { cursor: pointer; color: var(--muted); width: fit-content; }
.match-ads summary:hover { color: var(--text); }
.match-ads details ul { margin-top: .25rem; }
.match-ads details li { align-items: baseline; }
.matches .match-person :is(strong, a) { font-size: .9375rem; font-weight: 600; }
/* What speaks for and against someone, a fact a line with an icon, in
   two columns: what they do and when on the left, where on the right.
   The dl.facts of key data are another thing. */
div.facts { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1875rem 1.5rem; font-size: .8125rem; line-height: 1.5; }
div.facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1875rem; align-content: start; }
div.facts li { display: flex; gap: .5rem; align-items: flex-start; }
div.facts .icon { width: .875rem; height: .875rem; margin-top: .1875rem; color: var(--muted); }
div.facts .wide { grid-column: 1 / -1; }
div.facts .against, div.facts .against .icon { color: var(--warning); }
div.facts .good, div.facts .good .icon { color: var(--success); }
div.facts .minor { color: var(--muted); }
/* A second group of matches in the same card, e.g. former employees. */
.matches-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; margin: 1.25rem -1.25rem 0; padding: .75rem 1.25rem .25rem; border-top: 1px solid var(--border); }
.matches:has(+ .matches-section) { margin-bottom: 0; }
.matches + .matches-section { margin-top: 0; }
.matches-section h3 { margin: 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.matches-section + .hint { margin: 0 0 .75rem; }
/* Assigning a job the matching does not suggest, below them. */
.matches:has(+ .assign-job) { margin-bottom: 0; }
.assign-job { display: grid; gap: .375rem; margin: 1.25rem -1.25rem calc(-1 * var(--card-pad-y)); padding: .75rem 1.25rem 1rem; border-top: 1px solid var(--border); }
.matches + .assign-job { margin-top: 0; }
.assign-job label { font-weight: 500; }
.assign-job .hint { margin: 0; }
.match-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
/* A rating that opens why, over the list. */
.rating-why { position: relative; }
.rating-why > summary { list-style: none; cursor: pointer; }
.rating-why > summary::-webkit-details-marker { display: none; }
.rating-why > summary .badge { text-decoration: underline dotted; text-underline-offset: 2px; }
.rating-why[open] > summary .badge { box-shadow: 0 0 0 1px currentColor; }
.rating-why-panel { position: absolute; z-index: 20; top: calc(100% + .375rem); left: 0; width: max-content; max-width: min(22rem, 80vw); display: grid; gap: .5rem; padding: .75rem .875rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: .8125rem; }
.rating-why-panel div.facts { grid-template-columns: 1fr; }
.rating-why-panel .hint { margin: 0; }
/* Where they live or what it is always goes below the name. */
.match-person > .muted { flex-basis: 100%; }
.match-person a { font-weight: 500; color: var(--text); text-decoration: none; }
.match-person a:hover { color: var(--accent); }
/* A note beside the rating, e.g. that someone was proposed already. */
.match-note { display: inline-flex; align-items: center; gap: .3125rem; font-size: .8125rem; font-weight: 500; cursor: default; }
.match-note .icon { width: .875rem; height: .875rem; flex: none; }
.match-note-warning { color: var(--warning); }
.match-note-done { color: var(--accent); }
/* Lists say what the number counts only where the column heading is
   hidden. */
.table td a.match-count { color: var(--accent); }
.table td a:is(.tel, .mail) { color: var(--accent); font-weight: 400; }
.match-count-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 48rem) {
  .match-count-label { position: static; width: auto; height: auto; clip-path: none; }
}
@media (max-width: 40rem) {
  .facts { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .matches > li { grid-template-columns: 1fr; }
  .matches > li > :is(form, .button) { grid-column: 1; grid-row: auto; }
}

/* Chosen values of a multiple combobox, each with a button to remove it. */
.chosen-list:not(:empty) { margin-top: .5rem; }
.chosen-list li { display: inline-flex; align-items: center; gap: .25rem; padding-right: .25rem; }
button.chip-remove { width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); box-shadow: none; }
button.chip-remove:hover { background: var(--hover); color: var(--text); }
button.chip-remove .icon { width: .875rem; height: .875rem; }

.form-section { margin: 1.5rem 0 1rem; }

/* Career page settings */
/* The state of the career page with the box that changes it beside it. */
.career-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; padding: 0 1.25rem 0 0; }
.career-status .ba-status { flex: 1 1 18rem; min-width: 0; border: 0; background: none; }
.career-status .ba-status .hint { overflow-wrap: anywhere; }
.color-field { display: flex; align-items: center; gap: .75rem; }
.color-field input[type="color"] { width: 3rem; height: 2.25rem; padding: .1875rem; cursor: pointer; }

.logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
}

.logo-preview img { max-height: 4rem; max-width: 100%; }

/* A form without a checklist: one column with the buttons below, as wide
   as the job form's fields. */
.form-page { display: grid; gap: 1rem; max-width: 56rem; }
.form-page .form-actions { align-items: center; }
.form-page .form-actions .hint { margin-right: auto; }

/* The branch only applies to unsolicited applications; applications for
   a job belong to the job's branch. */
.form-page:has(#job_id option:checked:not([value=""])) .unsolicited-only { display: none; }

/* Forms */
/* The job form keeps its publishing checklist in view on the right. */
.job-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 18rem;
  align-items: start;
  max-width: 75rem;
}

.job-form-fields { display: grid; gap: 1rem; min-width: 0; }
/* The checklist and the buttons stay in view next to the fields. */
.job-form-aside {
  position: sticky;
  top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  /* A long checklist scrolls, the buttons below stay in view. */
  max-height: calc(100dvh - 3.5rem);
}
.job-form-aside .readiness { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.job-form-aside .form-actions > * { flex: 1; }

/* On narrow screens the checklist follows the fields and the buttons float
   at the bottom of the form. Fields reached with the keyboard scroll into
   view above them. */
@media (max-width: 60rem) {
  .job-form { grid-template-columns: minmax(0, 1fr); }
  .job-form-aside { display: contents; }
  html:has(.job-form) { scroll-padding-bottom: calc(6rem + var(--tabbar-space, 0px)); }
  .job-form-aside .form-actions {
    position: sticky;
    bottom: calc(1rem + var(--tabbar-space, 0px));
    z-index: 1;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 8px 24px light-dark(rgb(16 24 40 / 10%), rgb(0 0 0 / 40%));
  }
  .job-form-aside .form-actions > * { flex: none; }
}

.readiness { display: grid; gap: .75rem; }
.readiness h2 { margin: 0; }
.readiness h3 { margin: .25rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--muted); }

.readiness progress {
  width: 100%;
  height: .375rem;
  border: 0;
  border-radius: 999px;
  background: var(--neutral-bg);
  overflow: hidden;
  appearance: none;
}

.readiness progress::-webkit-progress-bar { background: var(--neutral-bg); }
.readiness progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.readiness progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

/* The parts of the job form, the one in view marked, with what they lack. */
.form-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
.form-sections > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin: 0 -.5rem;
  padding: .3125rem .5rem;
  border-radius: 6px;
  color: var(--text-2);
  font-weight: 500;
  text-decoration: none;
}
.form-sections > li > a:hover { background: var(--hover); color: var(--text); }
.form-sections > li > a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }
.form-sections > li > a .icon { width: 1rem; height: 1rem; color: var(--success); stroke-width: 2.4; }
.form-section-missing { color: var(--warning); font-size: .75rem; font-weight: 600; }
.form-sections .checklist { margin: .25rem 0 .375rem .25rem; gap: .375rem; font-size: .875rem; }
.checklist, .channels { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.checklist li { display: flex; align-items: center; gap: .5rem; }
.checklist li.done { color: var(--muted); }
.checklist li.done .icon { color: var(--success); stroke-width: 2.4; }

.checklist .mark {
  width: 1rem;
  height: 1rem;
  flex: none;
  border: 1.5px solid var(--border);
  border-radius: 50%;
}

.readiness-missing { margin-bottom: 1rem; border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.readiness-missing .hint { margin: 0; }
.channels li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
fieldset.card { margin: 0; min-width: 0; }
legend { font-weight: 600; padding: 0 .25rem; }
/* A floated legend sits inside the card like a heading instead of on its
   border. */
fieldset.card > legend { float: left; width: 100%; padding: 0; margin-bottom: 1rem; font-size: .9375rem; line-height: 1.25; }
fieldset.card > legend + * { clear: both; }
/* A hint below the legend explains the section, like below a heading. */
fieldset.card > legend:has(+ .hint) { margin-bottom: .25rem; }
textarea { resize: vertical; line-height: 1.6; }

/* The description editor looks like a textarea with a toolbar on top.
   Until editor.js has set it up, the plain textarea shows. */
.editor.ready {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 1px 1px var(--shadow-color);
}
.editor.ready:has(.ProseMirror:focus-visible) { border-color: var(--accent); box-shadow: var(--focus-ring); }
.editor.ready:has([aria-invalid="true"]) { border-color: var(--danger); }
.editor-toolbar { display: flex; gap: .125rem; padding: .25rem; border-bottom: 1px solid var(--border); }
.editor-toolbar .icon-button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.editor .ProseMirror {
  min-height: 18rem;
  padding: .5rem .625rem;
  outline: none;
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  font-variant-ligatures: none;
}
.editor .ProseMirror p, .editor .ProseMirror ul, .editor .ProseMirror ol { margin: 0 0 .75em; }
.editor .ProseMirror ul, .editor .ProseMirror ol { padding-left: 1.5em; }
.editor .ProseMirror li > p { margin: 0; }
.editor .ProseMirror li > ul, .editor .ProseMirror li > ol { margin: 0; }
.editor .ProseMirror > :last-child { margin-bottom: 0; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection * { caret-color: transparent; }
img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; width: 0 !important; height: 0 !important; }
.label { font-weight: 600; font-size: .8125rem; color: var(--text-2); }
.label .muted, label .muted { font-weight: 400; }
.hint { font-size: .8125rem; color: var(--muted); margin: 0; }
.field-error { font-size: .8125rem; color: var(--danger); margin: 0; }
[aria-invalid="true"] { border-color: var(--danger); }

.field-row {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

/* Fields for short values, like a postal code or a radius, are only as
   wide as those; in a row the others share the rest. */
.narrow-field { max-width: 16rem; }
.field-row:has(> .narrow-field) { display: flex; flex-wrap: wrap; }
.field-row:has(> .narrow-field) > .field { flex: 1 1 10rem; min-width: 0; }
.field-row:has(> .narrow-field) > .narrow-field { flex: 0 0 8rem; }

/* Rows whose fields come and go keep their columns. */
.field-row.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 48rem) {
  .field-row.thirds { grid-template-columns: minmax(0, 1fr); }
}

/* Fields that only apply to some choices are hidden otherwise. The server
   ignores their values then. */
.job-form:has(#contract_type option[value="permanent"]:checked) .term-field,
.job-form:has(#salary_period option[value=""]:checked) .salary-amount,
.job-form:has(#salary_period option[value="hourly"]:checked) .per-year,
.job-form:has(#salary_period option[value="yearly"]:checked) .per-hour { display: none; }

/* An input with a unit glued to its right side. */
.input-addon { display: flex; }
.input-addon input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }

.input-addon > span {
  display: flex;
  align-items: center;
  padding: 0 .625rem;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; font-size: .875rem; color: var(--text); }
.check input { width: auto; }

.check-group { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Groups of boxes, like the classes of driving licence, each in a row of
   its own with its name in front; the others share one. */
.check-groups { display: grid; gap: .5rem; }
.check-group-label { align-self: center; min-width: 6.5rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }

/* Checkboxes in a group look like toggle chips. */
.check-group .check {
  padding: .375rem .625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.check-group .check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check-group .check:has(input:focus-visible) { box-shadow: var(--focus-ring); }
/* Choices one below the other, each with a hint under it. */
.check-group.stacked { flex-direction: column; align-items: flex-start; gap: .25rem; }
.check-hint { margin: 0 0 .5rem .25rem; }

/* Channels a job goes to, as cards to tick; one that always gets the
   job is shown alongside, fixed. */
/* Choosing the job for an application from a presentation: each choice
   says what comes of it. */
.apply-choices { display: grid; gap: .75rem; }
.apply-choice { align-items: flex-start; }
.apply-choice > span { display: grid; gap: .125rem; }
.apply-choice .hint { margin: 0; }
.apply-new-job { margin: 0 0 0 1.5rem; }
.apply-choices:has(input[name="job"]:checked):not(:has(input[value="neu"]:checked)) .apply-new-job { display: none; }
.presented-application { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin: 0 0 .75rem; }
.presented-application .hint { margin: 0; }
.presented-application .icon { color: var(--success); }
/* The company's answer about someone presented, or the two buttons that
   take it while it waits. */
.presented-feedback { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.presented-feedback form { margin: 0; }
/* The answer and, below it, the application or the way to it. */
.presented-answer-block { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; }
.presented-application-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; }
/* The buttons for the answer: small, framed buttons, not to be taken for
   the status the answer turns into; only the icon tells yes from no. */
:is(button, .button).feedback-button { height: 1.875rem; padding: 0 .625rem; gap: .3125rem; font-size: .8125rem; box-shadow: none; }
.feedback-button .icon { width: .875rem; height: .875rem; margin-left: -.125rem; }
button.feedback-yes .icon { color: var(--success); }
button.feedback-no .icon { color: var(--danger); }
button.secondary.feedback-yes:hover { border-color: var(--success); }
button.secondary.feedback-no:hover { border-color: var(--danger); }
.presented-feedback button.icon-button.feedback-undo { width: 1.75rem; height: 1.75rem; }
.presented-feedback button.icon-button.feedback-undo .icon { width: .9375rem; height: .9375rem; }
:is(.recent, .tasks) .presented-answer { margin-top: .375rem; }
.greeting-formulas { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
/* The people of a presentation in a list of presentations, each with
   the answer, below the presentation's line. */
.recent .presented-people { list-style: none; margin: .375rem 0 0; padding: 0; }
.recent .presented-people li { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; padding: .375rem 0; border: 0; }
:root[data-density="compact"] .recent .presented-people li { padding-block: .125rem; }
.recent :is(.presented-people, .presented-answer) .presented-feedback { flex-wrap: nowrap; white-space: nowrap; }

/* An internal job's choice to stay so, above the channels it skips. */
.internal-choice { align-items: flex-start; margin-bottom: 1rem; }
.internal-choice > span { display: grid; gap: .125rem; }
.internal-choice .hint { margin: 0; }
.channel-choices { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.channel-choice {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  align-content: start;
  gap: .25rem .5rem;
  padding: .75rem .875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 400;
}
label.channel-choice { cursor: pointer; }
.channel-choice input { width: 1rem; height: 1rem; margin: 0; }
.channel-choice-title { font-weight: 600; font-size: .875rem; }
.channel-choice .hint { grid-column: 1 / -1; margin: 0; }
.channel-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.channel-choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.channel-choice-fixed { background: var(--surface-2); }
.channel-choice-extras { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem; }

/* Segmented control: radio buttons that look like one row of buttons. */
.segmented { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.segmented label { position: relative; padding: .25rem .5rem; font-size: .8125rem; border-left: 1px solid var(--border); font-weight: 400; color: var(--muted); cursor: pointer; }
.segmented label:first-child { border-left: 0; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label:has(input:checked) { background: var(--accent-soft); color: var(--accent); }
.segmented label:has(input:focus-visible) { box-shadow: inset var(--focus-ring); }
.segmented-row { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }

/* A job's requirements: what is required and what wished for, as chips
   in two fields (app.js). */
.hint + .req-fields, .card > .hint + :is(.field, .field-row) { margin-top: 1rem; }
.req-fields { display: grid; gap: 1rem; }
.req-field { display: grid; gap: .375rem; }
.req-field-list { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.req-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3125rem .25rem .3125rem .75rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
}
.req-chip[hidden] { display: none; }
.req-chip.level-required { background: var(--primary); color: var(--primary-text); }
.req-chip.level-preferred { background: var(--accent-soft); color: var(--accent); }
.req-chip button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
}
.req-chip button:hover { background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; border: 0; }
select.req-add { width: auto; height: 2rem; padding-left: .75rem; border: 1px dashed var(--border); background: var(--chevron), none; color: var(--muted); font-weight: 400; font-size: .875rem; }
.req-field .req-empty { margin: 0; }
.req-field:has(.req-chip:not([hidden])) .req-empty { display: none; }

/* Combobox: a text input with a list of suggestions below it. Once an
   option is chosen, a check mark shows inside the input. */
.combobox, .datepicker, .address-field { position: relative; }
.combobox input { padding-right: 2.25rem; }
.combobox.chosen input { padding-right: 3.75rem; }
.combobox > .icon { position: absolute; right: 2.25rem; top: .625rem; color: var(--success); display: none; }
.combobox.chosen > .icon { display: block; }

button.combobox-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 2rem;
  height: calc(100% - 2px);
  padding: 0;
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--chevron);
  box-shadow: none;
}

button.combobox-toggle:hover { background: var(--chevron), var(--hover); }
.combobox:has([aria-expanded="true"]) .combobox-toggle { rotate: 180deg; }

.listbox, .calendar {
  position: absolute;
  z-index: 10;
  top: calc(100% + .25rem);
  left: 0;
  margin: 0;
  box-shadow: 0 8px 24px light-dark(rgb(16 24 40 / 12%), rgb(0 0 0 / 45%));
}

.listbox {
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  list-style: none;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.listbox [role="option"] { padding: .375rem .5rem; border-radius: 4px; cursor: pointer; }
.listbox [role="option"]:hover { background: var(--hover); }
.listbox [role="option"][aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.listbox .current { font-weight: 600; }
.listbox-hint { padding: .375rem .5rem; color: var(--muted); font-size: .8125rem; }

/* Addresses: the list of a narrow postal code is as wide as it needs. */
.address-field .listbox { right: auto; min-width: 100%; width: max-content; max-width: min(22rem, 90vw); }
.address-field [role="option"] .muted { margin-left: .375rem; font-size: .8125rem; }

/* Pick lists: a long select as a button that opens a list like the
   occupation search, the chosen option ticked (app.js). The select stays
   underneath, so that the browser can point at it when it is missing. */
.pick { position: relative; }
.pick > select { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; }
.pick-button { width: 100%; justify-content: flex-start; padding-left: .625rem; color: var(--text); }
.pick-button:hover { background: var(--chevron-soft), var(--surface-2); border-color: transparent; color: var(--text); }
.pick-button span { overflow: hidden; text-overflow: ellipsis; }
.pick-button .muted { font-weight: 400; }
.pick-list {
  position: absolute;
  z-index: 10;
  top: calc(100% + .25rem);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(32rem, 90vw);
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 8px 24px light-dark(rgb(16 24 40 / 12%), rgb(0 0 0 / 45%));
}
.pick-list .listbox { position: static; padding: 0; border: 0; box-shadow: none; outline: none; }
.pick-list [role="option"] { display: flex; align-items: baseline; gap: .5rem; position: relative; padding-left: 1.75rem; }
.pick-list [role="option"].active { background: var(--hover); }
.pick-list [role="option"][aria-selected="true"] { background: none; color: var(--accent); font-weight: 600; }
.pick-list [role="option"][aria-selected="true"].active { background: var(--accent-soft); }
.pick-list [role="option"][aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: .6875rem;
  top: .5rem;
  width: .3125rem;
  height: .625rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}
.pick-hint { margin-left: auto; padding-left: 1rem; color: var(--muted); font-size: .8125rem; font-weight: 400; white-space: nowrap; }
.pick-search { display: block; width: 100%; margin-bottom: .25rem; }

/* Date picker: the calendar button sits inside the input. */
.datepicker input { padding-right: 2.5rem; }
.datepicker [data-calendar-toggle] { position: absolute; right: .125rem; top: .125rem; }
.calendar { width: 17rem; padding: .75rem; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.calendar-title { font-weight: 600; }
.calendar-grid { width: 100%; border-collapse: collapse; text-align: center; }
.calendar-grid th { font-size: .75rem; font-weight: 500; color: var(--muted); padding-bottom: .25rem; }
.calendar-grid td { padding: 1px; }

.calendar-grid button {
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  box-shadow: none;
  color: var(--text);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.calendar-grid button:hover { background: var(--hover); color: var(--text); }
.calendar-grid button[aria-current="date"] { color: var(--accent); font-weight: 600; }
.calendar-grid button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.calendar-foot { display: flex; justify-content: flex-end; margin-top: .5rem; }
/* Time picker: the quarter hours of a working day, an hour a row. */
.timepicker [data-clock-toggle] { position: absolute; right: .125rem; top: .125rem; }
.timepicker input { padding-right: 2.5rem; }
.clock { width: 16.5rem; max-height: 15rem; overflow-y: auto; padding: .375rem; }
.clock-grid { position: relative; }
.clock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.clock-grid button {
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  box-shadow: none;
  color: var(--text-2);
  font-weight: 400;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.clock-grid button:nth-child(4n + 1) { color: var(--text); font-weight: 600; }
.clock-grid button:hover, .clock-grid button:focus-visible { background: var(--hover); color: var(--text); }
.clock-grid button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; }
/* A long form keeps its button in view at the bottom of the window. */
.sticky-actions {
  position: sticky;
  bottom: var(--tabbar-space, 0px);
  z-index: 1;
  margin: 1.25rem -1.25rem calc(-1 * var(--card-pad-y));
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}
.career-online { padding: .75rem 0 .75rem 1rem; }
/* Fields bring their own margin, hints and checkboxes do not. */
.hint + .form-actions, .check + .form-actions, .check + .field { margin-top: 1rem; }

@media (max-width: 48rem) {
  .detail-grid { grid-template-columns: 1fr; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary div:nth-child(odd) { border-left: 0; }
  .table thead { display: none; }
  /* Each row becomes a block: the first cell on its own line, the others
     flowing next to each other below it. */
  .table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  .table tr:last-child { border-bottom: 0; }
  .table td, .table td:first-child, .table td:last-child { border: 0; padding: 0; }
  .table td:first-child { flex-basis: 100%; }
  .table td:not(:first-child) { font-size: .8125rem; color: var(--muted); }
  .list-head .list-sort { display: flex; }
  .people-table .row-actions { margin-left: auto; }
  .people-table td:nth-child(2) { flex-basis: 100%; }
  /* A presentation: the person, the company, then when and the link,
     and the answer on a line of its own. */
  .presentation-table td:nth-child(2), .presentation-table td:last-child { flex-basis: 100%; }
  .presentation-table td:nth-child(3) .sub { display: inline; margin-left: .25rem; }
  .presentation-table td:last-child { width: auto; min-width: 0; }
  .presentation-table .presented-answer-block { margin-top: .25rem; }
  .presentation-table .presented-company .sub { max-width: none; white-space: normal; }
}

/* Practice firm and tours ----------------------------------------------
   The practice firm is marked violet throughout: a stripe on the
   sidebar and a banner over the page. A tour's panel is a third column
   of the shell; what its step is about gets a spotlight (see app.js). */
.shell:has(.practice-banner) .sidebar { box-shadow: inset 0 3px 0 var(--coach); }
.shell:has(.practice-banner) .avatar { background: var(--coach); }

.practice-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin: -.5rem 0 1.25rem;
  padding: .4375rem .5rem .4375rem .5rem;
  border: 1px solid color-mix(in srgb, var(--coach) 22%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(100deg, var(--coach-soft), color-mix(in srgb, var(--coach-soft) 35%, var(--surface)) 70%);
}

.practice-banner p { flex: 1; min-width: 12rem; margin: 0; color: var(--text-2); }
.practice-banner form { margin: 0; }
.practice-banner button { height: 1.875rem; font-size: .8125rem; }

.practice-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 1.5rem;
  padding: 0 .625rem 0 .5rem;
  border-radius: 999px;
  background: var(--coach);
  color: var(--coach-text);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.practice-badge .icon { width: .875rem; height: .875rem; stroke-width: 2.2; }

.nav-help { margin-top: auto; padding-top: .75rem; }
.nav-help a { width: 100%; }

.shell:has(> .coach) { grid-template-columns: 14.5rem minmax(0, 1fr) 21rem; }

.coach {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1.25rem 1.25rem 1.5rem;
  background:
    radial-gradient(28rem 12rem at 100% 0, color-mix(in srgb, var(--coach) 12%, transparent), transparent),
    var(--surface);
  border-left: 1px solid var(--border);
}

.coach h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.coach p { margin: 0; }
.coach form { margin: 0; }
.coach-head { display: flex; align-items: center; justify-content: space-between; margin: -.25rem -.5rem -.25rem 0; }
.coach-toggle { display: none; }

.coach-kicker {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--coach);
}

.coach-tour { font-weight: 600; color: var(--text); margin-top: -.375rem; }
.coach-text { color: var(--text-2); line-height: 1.6; }
.coach-count { font-size: .75rem; font-weight: 600; color: var(--muted); margin-bottom: .125rem; }

.coach-progress { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.coach-progress li { flex: 1; height: .25rem; border-radius: 999px; background: var(--neutral-bg); }
.coach-progress li.done { background: var(--coach); }
.coach-progress li.current {
  background: linear-gradient(90deg, var(--coach) 0 40%, color-mix(in srgb, var(--coach) 35%, var(--neutral-bg)) 60% 100%);
  background-size: 250% 100%;
  animation: coach-shimmer 1.8s ease-in-out infinite alternate;
}

.coach-step { display: grid; gap: .5rem; }

.coach-task {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-top: .375rem;
  padding: .75rem .875rem;
  border: 1px dashed color-mix(in srgb, var(--coach) 55%, transparent);
  border-radius: var(--radius);
  background: var(--coach-soft);
}

.coach-task p { font-weight: 600; color: var(--text); line-height: 1.5; }
.coach-task .coach-task-then { margin-top: .25rem; font-weight: 400; font-size: .8125rem; color: var(--muted); }

.coach-task-mark {
  position: relative;
  flex: none;
  width: .75rem;
  height: .75rem;
  margin-top: .25rem;
  border-radius: 50%;
  background: var(--coach);
}

.coach-task-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--coach);
  animation: coach-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

.coach-task.manual .coach-task-mark { border-radius: 3px; background: transparent; border: 2px solid var(--coach); }
.coach-task.manual .coach-task-mark::after { display: none; }

.coach-actions { display: grid; gap: .625rem; padding-top: .25rem; }
.coach-actions .button, .coach-actions button:not(.link-button) { width: 100%; }
.coach-actions .button:not(.secondary), .coach-actions button:not(.secondary, .link-button),
.coach-finale button:not(.secondary, .link-button) {
  background: var(--coach);
  border-color: var(--coach);
  color: var(--coach-text);
}
.coach-actions .button:not(.secondary):hover, .coach-actions button:not(.secondary, .link-button):hover,
.coach-finale button:not(.secondary, .link-button):hover { background: var(--coach-strong); border-color: var(--coach-strong); }
.coach form:has(> .link-button) { justify-self: center; }
.coach .link-button { color: var(--muted); font-size: .8125rem; }
.coach .link-button:hover { color: var(--text); }

.coach-waiting { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .8125rem; color: var(--muted); }
.coach-pulse { width: .5rem; height: .5rem; border-radius: 50%; background: var(--coach); animation: coach-breathe 1.4s ease-in-out infinite; }

.coach-done {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  color: var(--success);
  font-size: .8125rem;
  font-weight: 600;
  animation: coach-pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}

.coach-done .icon { stroke-width: 2.6; }
.coach-done span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-advanced .coach-step { animation: coach-in .5s .15s ease-out both; }
.coach-advanced .coach-progress li.done:last-of-type { animation: coach-pop .5s ease-out both; }
.coach .alert { margin: 0; display: grid; gap: .5rem; font-size: .8125rem; }
.coach-missing { padding: .5rem .75rem; border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--warning); font: .75rem/1.4 var(--mono); }

/* The spotlight on what the step is about: a ring laid over it with a
   little room around (see app.js), glowing and sending out pulses. It
   lands on the target with a shrinking zoom, so the eye finds it. */
.tour-ring {
  position: fixed;
  z-index: 15;
  pointer-events: none;
  border: 2.5px solid var(--coach);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--coach) 22%, transparent),
    0 0 28px color-mix(in srgb, var(--coach) 45%, transparent),
    inset 0 0 0 9999px color-mix(in srgb, var(--coach) 5%, transparent);
}

/* The pulse spreads the same few pixels whatever the size, so it stays
   close to large cards too. */
.tour-ring::after {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: inherit;
  animation: tour-pulse 2s ease-out infinite;
}

.tour-ring.landing { animation: tour-land .6s cubic-bezier(.2, 1.2, .4, 1) both; }
.tour-ring.on-bar { z-index: 21; }

/* Form fields the tour points at are tinted, the tint spreading by a
   shadow so that nothing around them moves. It spreads half the gap
   between fields, so that fields one after the other merge into one
   block. A row of fields keeps the gap below its fields below itself. */
.tour-field {
  --tour-field-gap: .5rem;
  border-radius: 4px;
  background: var(--coach-soft);
  box-shadow: 0 0 0 var(--tour-field-gap) var(--coach-soft);
  animation: tour-field-in .4s ease-out both;
}
.tour-field > :is(label, .label), .tour-field > .field > label { color: var(--coach); }
.tour-field:has(+ .tour-field) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tour-field + .tour-field { border-top-left-radius: 0; border-top-right-radius: 0; }
.field-row.tour-field { margin-bottom: 1rem; }
.field-row.tour-field > .field { margin-bottom: 0; }

@keyframes tour-field-in {
  from { background: transparent; box-shadow: 0 0 0 var(--tour-field-gap) transparent; }
}
.tour-ring.landing::after { animation-delay: .6s; }
.mainnav a.tour-spot { background: var(--coach-soft); color: var(--coach); }

/* Says where the target lies before the page scrolls there. */
.tour-scroll-hint {
  position: fixed;
  z-index: 25;
  left: 50%;
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: .5rem 1rem .5rem .75rem;
  border-radius: 999px;
  background: var(--coach);
  color: var(--coach-text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--coach) 40%, transparent);
  pointer-events: none;
  transform: translateX(-50%);
  animation: tour-hint-in .3s ease-out both;
}

.tour-scroll-hint::before {
  content: "↓";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 20%);
  animation: tour-nudge .7s ease-in-out infinite alternate;
}

.tour-scroll-hint.down { bottom: 1.5rem; }
.tour-scroll-hint.up { top: 1.5rem; }
.tour-scroll-hint.up::before { content: "↑"; animation-name: tour-nudge-up; }
.tour-scroll-hint.arrived::before { content: "✓"; animation: coach-pop .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.tour-scroll-hint.gone { opacity: 0; transition: opacity .3s; }

/* The finale: confetti over a flag. */
.coach-finale { position: sticky; text-align: center; justify-content: center; overflow: hidden; }
.coach-finale h2 { font-size: 1.5rem; }
.coach-finale .coach-kicker { justify-content: center; }
.coach-finale-actions { display: grid; gap: .625rem; margin-top: .75rem; }
.coach-finale-actions .button, .coach-finale-actions button:not(.link-button) { width: 100%; white-space: normal; height: auto; min-height: 2.25rem; padding-block: .5rem; }

.coach-trophy {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto .25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coach), color-mix(in srgb, var(--coach) 55%, #ff7ab6));
  color: #fff;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--coach) 40%, transparent);
  animation: coach-pop .7s cubic-bezier(.2, 1.6, .4, 1) both;
}

.coach-trophy .icon { width: 2rem; height: 2rem; stroke-width: 2; }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti span {
  position: absolute;
  top: -1rem;
  width: .5rem;
  height: .875rem;
  border-radius: 2px;
  background: var(--coach);
  opacity: 0;
  animation: confetti 2.6s cubic-bezier(.3, .6, .6, 1) forwards;
}
.confetti .c0 { left: 6%; animation-delay: .05s; }
.confetti .c1 { left: 13%; background: #ff7ab6; animation-delay: .3s; }
.confetti .c2 { left: 21%; background: var(--success); animation-delay: .15s; width: .375rem; }
.confetti .c3 { left: 29%; background: #ffc53d; animation-delay: .45s; }
.confetti .c4 { left: 36%; background: var(--accent); animation-delay: .1s; height: .625rem; }
.confetti .c5 { left: 44%; animation-delay: .55s; }
.confetti .c6 { left: 51%; background: #ff7ab6; animation-delay: .2s; width: .625rem; height: .625rem; border-radius: 50%; }
.confetti .c7 { left: 58%; background: #ffc53d; animation-delay: .35s; }
.confetti .c8 { left: 65%; background: var(--success); animation-delay: .05s; }
.confetti .c9 { left: 72%; background: var(--accent); animation-delay: .5s; width: .375rem; }
.confetti .c10 { left: 79%; animation-delay: .25s; height: .625rem; }
.confetti .c11 { left: 86%; background: #ff7ab6; animation-delay: .4s; }
.confetti .c12 { left: 92%; background: #ffc53d; animation-delay: .15s; width: .625rem; height: .625rem; border-radius: 50%; }
.confetti .c13 { left: 97%; background: var(--success); animation-delay: .6s; }

@keyframes coach-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes coach-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes coach-breathe { 50% { transform: scale(.6); opacity: .5; } }
@keyframes coach-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes coach-in { from { transform: translateY(.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tour-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coach) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes tour-land {
  from { transform: scale(1.35); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes tour-hint-in { from { opacity: 0; translate: 0 .75rem; } }
@keyframes tour-nudge { to { transform: translateY(3px); } }
@keyframes tour-nudge-up { to { transform: translateY(-3px); } }
@keyframes confetti {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(26rem) rotate(540deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .coach *, .coach, .tour-ring, .tour-ring::after, .tour-field, .tour-scroll-hint, .tour-scroll-hint::before { animation: none !important; }
  .confetti { display: none; }
}

/* Below a wide screen the panel docks at the bottom of the window. */
@media (max-width: 80rem) {
  .shell:has(> .coach) { grid-template-columns: 14.5rem minmax(0, 1fr); }
  .coach {
    position: fixed;
    inset: auto 1rem 1rem auto;
    z-index: 20;
    width: min(23rem, calc(100vw - 2rem));
    height: auto;
    max-height: min(34rem, calc(100vh - 2rem));
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: 0 18px 50px rgb(16 24 40 / 22%), 0 0 0 1px color-mix(in srgb, var(--coach) 18%, transparent);
  }
  .shell:has(> .coach) .content { padding-bottom: 22rem; }
}

@media (max-width: 48rem) {
  .shell:has(> .coach) { grid-template-columns: minmax(0, 1fr); }
  .nav-help { margin-top: 0; padding-top: 0; }
  .coach { inset: auto .5rem calc(4.5rem + env(safe-area-inset-bottom)); width: auto; max-height: 60vh; gap: .5rem; padding: .75rem 1rem; }
  .coach-tour { display: none; }
  /* The task and its buttons only, so that the page stays in view; the
     text comes with "Erklärung". */
  .coach:not(.expanded) :is(.coach-text, .coach-count, .coach-done, .coach-task-then, .coach-waiting) { display: none; }
  .coach:not(.expanded) h2 { font-size: 1rem; }
  .coach:not(.expanded) .coach-task { padding-block: .5rem; }
  .coach-head { gap: .75rem; }
  .coach-head .coach-kicker { margin-right: auto; }
  .coach-toggle { display: inline; }
  .shell:has(> .coach) .content { padding-bottom: 16rem; }
  /* Above the panel, which docks at the bottom. */
  .tour-scroll-hint.down, .tour-scroll-hint.up { top: calc(4.25rem + env(safe-area-inset-top)); bottom: auto; }
}

/* Help page */
.practice-hero {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  padding: 1.75rem;
  margin-bottom: 2rem;
  background:
    radial-gradient(40rem 18rem at 0 0, color-mix(in srgb, var(--coach) 10%, transparent), transparent),
    var(--surface);
}

.practice-hero h2 { margin: .25rem 0 .5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.practice-hero-body > p { margin: 0 0 1rem; color: var(--text-2); max-width: 44rem; line-height: 1.6; }

.practice-hero-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 11rem;
  aspect-ratio: 1;
  color: var(--coach-text);
}

.practice-hero-art > .icon {
  width: 5.5rem;
  height: 5.5rem;
  padding: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coach), color-mix(in srgb, var(--coach) 50%, #ff7ab6));
  box-shadow: 0 14px 36px color-mix(in srgb, var(--coach) 35%, transparent);
  stroke-width: 1.6;
}

.orbit {
  position: absolute;
  inset: .5rem;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--coach) 40%, transparent);
  animation: orbit 30s linear infinite;
}

.orbit::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 12%;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--coach);
}

.orbit-2 { inset: 1.75rem; animation-duration: 18s; animation-direction: reverse; border-style: solid; border-color: color-mix(in srgb, var(--coach) 18%, transparent); }
.orbit-2::before { top: auto; left: auto; bottom: 4%; right: 30%; background: #ff7ab6; width: .5rem; height: .5rem; }
@keyframes orbit { to { transform: rotate(1turn); } }

.practice-points { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.practice-points li {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 1.75rem;
  padding: 0 .625rem;
  border-radius: 999px;
  background: var(--coach-soft);
  color: var(--text-2);
  font-size: .8125rem;
  font-weight: 500;
}
.practice-points .icon { color: var(--coach); stroke-width: 2.6; width: .875rem; height: .875rem; }
.practice-hero .actions button:not(.secondary) { background: var(--coach); border-color: var(--coach); color: var(--coach-text); }
.practice-hero .actions button:not(.secondary):hover { background: var(--coach-strong); border-color: var(--coach-strong); }

.tours-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .875rem; }
.tours-header h2 { margin: 0; font-size: 1.125rem; }
.tours-progress { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--muted); }

.tours-progress progress {
  width: 8rem;
  height: .375rem;
  border: 0;
  border-radius: 999px;
  background: var(--neutral-bg);
  overflow: hidden;
  appearance: none;
}
.tours-progress progress::-webkit-progress-bar { background: var(--neutral-bg); }
.tours-progress progress::-webkit-progress-value { background: var(--coach); border-radius: 999px; }
.tours-progress progress::-moz-progress-bar { background: var(--coach); border-radius: 999px; }

.tour-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tours-group { margin: 0 0 .625rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.tour-card {
  --tone: var(--coach);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: .25rem 1rem;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}

.tour-card:hover { border-color: color-mix(in srgb, var(--tone) 40%, var(--border)); transform: translateY(-1px); }
.tour-home { --tone: var(--accent); }
.tour-file { --tone: var(--field-commercial); }
.tour-jobs { --tone: var(--field-care); }
.tour-customers { --tone: var(--field-industrial); }
.tour-market { --tone: var(--field-technical); }
.tour-bell { --tone: var(--warning); }
.tour-person { --tone: var(--success); }
.tour-rocket { --tone: var(--gold); }
.tour-card.current { border-color: var(--coach); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coach) 18%, transparent), var(--shadow); }
.tour-card form { grid-column: 2; margin: .75rem 0 0; }

.tour-card-icon {
  position: relative;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
  color: var(--tone);
}

.tour-card-icon .icon { width: 1.375rem; height: 1.375rem; }

.tour-card-number {
  position: absolute;
  right: -.375rem;
  bottom: -.375rem;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--tone);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
}

.tour-card.finished .tour-card-number { background: var(--success); }
.tour-card-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tour-card h3 { margin: 0; font-size: 1rem; }
.tour-card-body p { margin: .375rem 0 0; color: var(--text-2); }
.tour-card-body .tour-card-meta { display: flex; align-items: center; gap: .375rem; color: var(--muted); font-size: .8125rem; }
.tour-card-meta .icon { width: .875rem; height: .875rem; }
.badge .icon { width: .75rem; height: .75rem; margin-right: .25rem; stroke-width: 2.6; }
.badge-coach { background: var(--coach-soft); color: var(--coach); }
.tour-card form button:not(.secondary) { background: var(--coach); border-color: var(--coach); color: var(--coach-text); }
.tour-card form button:not(.secondary):hover { background: var(--coach-strong); border-color: var(--coach-strong); }
.help-hints { text-align: center; }

.blocked-card { max-width: 34rem; margin: 3rem auto; padding: 2rem; text-align: center; display: grid; gap: .75rem; justify-items: center; }
.blocked-card h1 { font-size: 1.375rem; margin: 0; }
.blocked-card p { margin: 0 0 .5rem; }
.blocked-card button { background: var(--coach); border-color: var(--coach); color: var(--coach-text); }
.blocked-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--coach-soft); color: var(--coach); }
.blocked-icon .icon { width: 1.75rem; height: 1.75rem; }

@media (max-width: 60rem) {
  .tour-cards { grid-template-columns: minmax(0, 1fr); }
  .practice-hero { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .practice-hero-art { width: 7rem; }
  .practice-hero-art > .icon { width: 4rem; height: 4rem; padding: .875rem; }
}

/* On phones the picture would take half the first screen. */
@media (max-width: 40rem) {
  .practice-hero-art { display: none; }
}

@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }

/* Component overview (development only) */
.components { display: grid; gap: 2rem; }
.component-section { scroll-margin-top: 1rem; }
.component-section > h2 { font-size: 1.125rem; margin-bottom: .25rem; }
.component-section > .hint { margin-bottom: .75rem; }
.component-demo { display: grid; gap: 1rem; }
.component-demo > * { margin: 0; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.swatches li { display: grid; gap: .375rem; font-size: .75rem; }
.swatch { height: 2.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.swatch-bg { background: var(--bg); }
.swatch-surface { background: var(--surface); }
.swatch-surface-2 { background: var(--surface-2); }
.swatch-hover { background: var(--hover); }
.swatch-border { background: var(--border); }
.swatch-text { background: var(--text); }
.swatch-text-2 { background: var(--text-2); }
.swatch-muted { background: var(--muted); }
.swatch-accent { background: var(--accent); }
.swatch-accent-soft { background: var(--accent-soft); }
.swatch-danger { background: var(--danger); }
.swatch-danger-bg { background: var(--danger-bg); }
.swatch-success { background: var(--success); }
.swatch-success-bg { background: var(--success-bg); }
.swatch-warning { background: var(--warning); }
.swatch-warning-bg { background: var(--warning-bg); }
.swatch-neutral-bg { background: var(--neutral-bg); }

/* The map for picking an area of the job market, see map.js. */
.area-map { height: min(32rem, 70vh); margin: 0 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }

/* The job market on a map, see map.js; the dots match its colours. */
.segmented a { padding: .375rem .75rem; font-size: .875rem; color: var(--muted); text-decoration: none; border-left: 1px solid var(--border); }
.segmented a:first-child { border-left: 0; }
.segmented a:hover { color: var(--text); }
.segmented a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.market-map { height: min(40rem, 75vh); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
/* Until the first tiles are drawn, the map says that it loads. */
[data-ready]:not([data-loaded])::after {
  content: "Karte wird geladen …";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--muted);
  font-size: .875rem;
}
/* MapLibre's controls in the colours of the page. */
[data-ready] .maplibregl-ctrl-group { background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
[data-ready] .maplibregl-ctrl-group button + button { border-top-color: var(--border); }
[data-ready] .maplibregl-ctrl-group button:not(:disabled):hover { background-color: var(--hover); }
[data-flavor="dark"] .maplibregl-ctrl-icon { filter: invert(1); }
.map-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--muted); }
.map-legend li { display: flex; align-items: center; gap: .375rem; }
.map-dot { width: .625rem; height: .625rem; border-radius: 50%; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.map-dot.new { background: var(--status-new); }
.map-dot.lead { background: var(--status-lead); }
.map-dot.customer { background: var(--status-customer); }
.map-dot.declined { background: var(--status-declined); }
.map-dot.refuses { background: var(--status-refuses); }
.map-legend.stripes .map-dot { width: 3px; height: .875rem; border: 0; border-radius: 2px; box-shadow: none; }
.map-dot.candidates { width: .875rem; height: .875rem; border: 2.5px solid var(--text); box-shadow: none; }
.market-map .maplibregl-popup-content { background: var(--surface); color: var(--text); border-radius: var(--radius-sm); box-shadow: 0 2px 10px rgb(0 0 0 / 18%); padding: .625rem .875rem; font: inherit; font-size: .8125rem; }
.market-map [class*="maplibregl-popup-anchor-bottom"] .maplibregl-popup-tip { border-top-color: var(--surface); }
.market-map [class*="maplibregl-popup-anchor-top"] .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.market-map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.market-map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.market-map .maplibregl-popup-content a { font-weight: 600; color: var(--text); }
.market-map .maplibregl-popup-content p { margin: .125rem 0 0; color: var(--muted); }
.market-map .maplibregl-popup-content > div > p:first-child { margin: 0 0 .375rem; }
.map-list { max-height: 16rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.map-list li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; border-top: 1px solid var(--border); }
.map-list li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.map-list li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.map-list .map-dot { flex: none; }

/* Contrast theme: the rules that tokens cannot express. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk.woff2") format("woff2");
}

:root[data-theme="contrast"] :is(h1, h2, .brand-name, .stat-value, .stage-count-value) { font-family: var(--display); }
:root[data-theme="contrast"] h1 { font-size: 2rem; letter-spacing: -.03em; }
:root[data-theme="contrast"] h2 { font-size: 1rem; }
:root[data-theme="contrast"] .stage-count-value { font-size: 1.75rem; font-weight: 700; }

:root[data-theme="contrast"] :is(.card, .table) { border-width: 2px; box-shadow: 4px 4px 0 var(--ink); }
:root[data-theme="contrast"] .level-hero { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
:root[data-theme="contrast"] .level-hero h2 { font-size: 1.5rem; }
:root[data-theme="contrast"] :is(.point-tile, .achievement) { border-width: 2px; }
:root[data-theme="contrast"] :is(.stage-counts, .task, .recent li) { border-top-width: 2px; }
:root[data-theme="contrast"] .stage-counts li + li { border-left-width: 2px; }

:root[data-theme="contrast"] :is(.badge, .task-icon) { border: 1.5px solid var(--ink); }
/* Like the cards; the colour of the background tells the kind. */
:root[data-theme="contrast"] .alert { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); font-weight: 500; }
:root[data-theme="contrast"] .tip { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
:root[data-theme="contrast"] .task-icon { color: var(--ink); }

:root[data-theme="contrast"] :is(button, .button) { font-weight: 700; }
:root[data-theme="contrast"] :is(input, select, textarea, .pick-button):not([type="checkbox"], [type="radio"]) { border-width: 2px; }
/* Framed like the fields beside them. */
:root[data-theme="contrast"] :is(select, .pick-button, .pick-button:hover) { border-color: var(--border); }

:root[data-theme="contrast"] .sidebar { border-right-width: 2px; }
/* Ink and yellow stay for the current entry; only its dot and the
   heading of its group take the colour of sales. */
:root[data-theme="contrast"] [data-area="sales"] { --area: var(--accent); --area-soft: var(--accent-soft); --area-mark: #0b7a72; }
:root[data-theme="contrast"] .mainnav a[aria-current="page"] { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; }
:root[data-theme="contrast"] .avatar { background: var(--accent-soft); color: var(--ink); border: 2px solid var(--ink); }

/* Links are ink like the text around them, so they are underlined. */
:root[data-theme="contrast"] :is(p, .hint, .alert, .card-header, .match-ads, div.facts) a,
:root[data-theme="contrast"] button.link-button { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

:root[data-theme="contrast"] :is(.coach-task, .practice-banner, .coach-done) { border: 2px solid var(--ink); }
:root[data-theme="contrast"] .tour-field { outline: 2px solid var(--coach); outline-offset: var(--tour-field-gap); }
:root[data-theme="contrast"] .tour-card.current { box-shadow: 4px 4px 0 var(--coach); }
:root[data-theme="contrast"] .tour-ring { border-width: 3px; }

/* The user's photo in a circle, beside the button to choose another.
   A new one moves in the circle to choose the part to keep, positioned
   by app.js. */
.portrait-picker { display: flex; align-items: center; gap: 1.25rem; }
.portrait-crop-frame {
  position: relative; flex: none; display: grid; place-items: center; width: 8rem; height: 8rem;
  overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  box-shadow: 0 0 0 1px var(--border); cursor: pointer;
}
.portrait-crop-frame:hover, .portrait-picker.dragover .portrait-crop-frame { box-shadow: 0 0 0 2px var(--accent); }
.portrait-picker.cropping .portrait-crop-frame { cursor: grab; touch-action: none; user-select: none; }
.portrait-picker.cropping .portrait-crop-frame:active { cursor: grabbing; }
.portrait-crop-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.portrait-current { width: 100%; height: 100%; object-fit: cover; }
.portrait-empty svg { width: 3rem; height: 3rem; }
.portrait-crop-image { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; }
.portrait-crop-image[hidden], .portrait-current[hidden], .portrait-empty[hidden] { display: none; }
.portrait-picker-side { flex: 1; min-width: 0; display: grid; gap: .5rem; justify-items: start; }
.portrait-picker-side .hint, .portrait-picker-side .field-error { margin: 0; }
.portrait-actions { display: flex; align-items: center; gap: 1rem; }
.portrait-choose { cursor: pointer; }
.portrait-choose:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.portrait-zoom { display: grid; gap: .25rem; width: 100%; max-width: 16rem; }
.portrait-zoom[hidden] { display: none; }
.portrait-zoom label { font-size: .875rem; font-weight: 500; }
.welcome .portrait-picker { margin: .5rem 0 1.5rem; }
/* The contact: the photo beside job title and phone, in the columns of
   the fields below. */
.contact-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: center; gap: 1.5rem 1rem; }
.contact-profile-fields { display: grid; }

/* Visits of a job's page on the career page */
.job-visits { display: grid; gap: 1rem; margin-top: 1rem; }
.job-visits h2 { margin: 0; }
.visit-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .75rem; margin: 0; }
.visit-totals dt { font-size: .75rem; font-weight: 500; color: var(--muted); }
.visit-totals dd { margin: .125rem 0 0; font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.benefit-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .375rem 1rem; }
.hero-preview img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 1rem; }

/* The logo on the dark colours of the career page, for each way to show
   it there. */
.dark-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  padding: .5rem .75rem;
  border-radius: calc(var(--radius-sm) - 2px);
  background: #0f1218;
  color: #8b93a5;
  font-size: .8125rem;
}

.dark-logo-preview img { display: block; max-width: 100%; max-height: 2rem; }
.dark-logo-preview .dark-logo-plate { padding: .25rem .5rem; border-radius: 6px; background: #ffffff; max-height: 2.5rem; }

/* A miniature career page for each style: a heading, a card and a button
   in the shapes of careers.css, in fixed light colours. */
.career-style-preview {
  --s-accent: #2a78d6;
  --s-radius: 5px;
  --s-border: 1px solid #e3e6ea;
  --s-shadow: 0 1px 3px rgb(16 24 40 / 10%);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: .375rem .5rem;
  height: 4.5rem;
  padding: .5rem .625rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-sm) - 2px);
  background: #f6f7f9;
  color: #1a1f36;
}

.career-style-heading { grid-column: 1 / -1; font: 700 1.125rem/1 var(--font); }
.career-style-card { border: var(--s-border); border-radius: var(--s-radius); background: #ffffff; box-shadow: var(--s-shadow); }
.career-style-button { align-self: end; width: 2.5rem; height: 1rem; border-radius: var(--s-radius); background: var(--s-accent); }
.career-style-professionell { --s-radius: 1px; --s-shadow: none; border-top: 3px solid var(--s-accent); }
.career-style-professionell .career-style-heading { font-family: "Iowan Old Style", Charter, Cambria, Georgia, serif; font-weight: 600; }
.career-style-locker { --s-radius: 10px; --s-border: 1px solid transparent; --s-shadow: 0 3px 10px rgb(16 24 40 / 10%); background: color-mix(in srgb, #2a78d6 7%, #f6f7f9); }
.career-style-locker .career-style-heading { font-family: "Space Grotesk", var(--font); }
.career-style-locker .career-style-button { border-radius: 999px; }
.career-style-kraeftig { --s-radius: 2px; --s-border: 2px solid #1a1f36; --s-shadow: 2px 2px 0 #1a1f36; }
.career-style-kraeftig .career-style-heading { font-family: "Space Grotesk", var(--font); letter-spacing: -.03em; }
.career-style-kraeftig .career-style-button { border: 2px solid #1a1f36; box-shadow: 2px 2px 0 #1a1f36; }

/* A list that is still loading, in the shape of its rows. */
.skeleton li { align-items: center; }
.bone { display: block; height: .75rem; border-radius: 999px; background: var(--border); animation: pulse 1.4s ease-in-out infinite; }
.bone-name { width: 55%; height: .875rem; }
.skeleton li:nth-child(2) .bone-name { width: 42%; }
.skeleton li:nth-child(3) .bone-name { width: 49%; }
.skeleton-chips { display: flex; flex-wrap: wrap; gap: .375rem; grid-column: 1; }
.bone-chip { width: 6rem; height: 1.25rem; }
.bone-chip.bone-short { width: 3.5rem; }
.bone-button { grid-column: 2; grid-row: 1 / span 2; width: 6.5rem; height: 2.25rem; border-radius: var(--radius-sm); }
.skeleton li:nth-child(2) .bone { animation-delay: .15s; }
.skeleton li:nth-child(3) .bone { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .bone { animation: none; } }

/* Profiles presented to companies: in the app and on the page the
   company opens, which prints well too. */
.profile-card { display: grid; gap: .5rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.profile-card h3 { margin: 0; font-size: 1.125rem; }
.profile-card h4 { margin: .5rem 0 0; font-size: .8125rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.profile-head { display: flex; align-items: center; gap: 1rem; }
.profile-photo { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }
.profile-headline { margin: 0; color: var(--text-2); }
.profile-facts { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.profile-facts li { padding: .125rem .625rem; border-radius: 999px; background: var(--neutral-bg); font-size: .8125rem; }
.profile-list { margin: 0; padding-left: 1.25rem; }
.profile-tasks { margin: .125rem 0 .25rem; padding-left: 1rem; color: var(--text-2); font-size: .9em; list-style: "– "; }
.presented-candidate { display: grid; gap: .25rem; margin-top: 1rem; }
.presented-candidate p { margin: 0; }
.profile-fields textarea { font: inherit; }
.public-profiles { background: var(--bg); }
.profiles-page { display: grid; gap: 1rem; max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.profiles-header h1 { margin: .25rem 0 .75rem; font-size: 1.5rem; }
.profiles-header p { margin: 0; }
/* Logos are made for light backgrounds, so they keep one in dark mode. */
.profiles-logo { display: block; max-width: 12rem; max-height: 3.5rem; margin-bottom: .75rem; padding: .375rem .5rem; border-radius: var(--radius-sm); background: #fff; object-fit: contain; }
.profiles-message { display: grid; gap: .7em; }
.card .profiles-message p { margin: 0; }
/* A profile folder's page offers to call before the request below. */
.profiles-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; }
.profiles-callout p { margin: 0; }
.profiles-contact { padding-top: 1rem; border-top: 1px solid var(--border); }
/* The lines stay beside the photo however many there are. */
.profiles-contact > p:first-child:has(.profiles-contact-photo) { position: relative; min-height: 4.5rem; padding-left: 5.5rem; }
.profiles-contact-photo { position: absolute; top: 0; left: 0; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }
@media print {
  .public-profiles { background: none; }
  .profiles-page { padding: 0; }
  .profile-card { break-inside: avoid; }
}
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* A button that asks Mistral for a text, with what it fills in beside. */
.suggest-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: 1rem; }
.suggest-row .hint { margin: 0; }
.suggest-row + .field-error, .suggest-row + .hint { margin: -.5rem 0 1rem; }

/* Editing a profile: what to show beside a preview of it, which stays in
   view while scrolling through a long profile. */
.form-page:has(.profile-editor) { max-width: 72rem; }
.profile-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 1.5rem; align-items: start; }
.profile-preview { position: sticky; top: 1rem; display: grid; gap: .5rem; }
.profile-preview-title { margin: 0; font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.profile-preview .profile-card { background: var(--bg); }
.field-label { font-weight: 600; font-size: .8125rem; color: var(--text-2); }
.profile-choices { gap: .375rem; }
.profile-choices:empty { display: none; }
.profile-photo-check { margin: -.25rem 0 1rem; }
.profile-choices .check { padding: .25rem .5rem; font-size: .8125rem; }
.station-rows { display: grid; gap: .375rem; }
.station-row { display: grid; grid-template-columns: 1rem minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: .5rem; align-items: center; }
.station-row input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; }
/* The tasks go under what, where and when, as tall as they are. */
.station-tasks { grid-column: 2 / -1; min-height: 0; field-sizing: content; font-size: .8125rem; resize: vertical; }
.station-head { font-size: .75rem; color: var(--muted); }
/* Stations left out are struck through, yet still there to take back. */
.station-row:has(> input[type="checkbox"]:not(:checked)) > :is(input:not([type="checkbox"]), textarea) { color: var(--muted); text-decoration: line-through; }
/* The empty row to add one has nothing to leave out yet. */
.station-row:has(> input[placeholder]:placeholder-shown) > input[type="checkbox"] { visibility: hidden; }
/* The kept profile to start from heads the profile; whether to keep the
   changes ends it. */
.profile-source { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.profile-keep { display: grid; gap: .75rem; padding-top: 1rem; margin-top: .25rem; border-top: 1px solid var(--border); }
.profile-keep .field { margin: 0; }
.profile-keep:has(> .check input:not(:checked)) > .field { display: none; }
/* Above a person's kept profiles, how to add one. */
.tab-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.kept-profile .card-header + .hint { margin: .25rem 0 0; }
.kept-profile .hint + .recent { margin-top: 1rem; }
.kept-profile .hint + .muted { margin: .75rem 0 0; }
.folder-request-message { margin: .25rem 0; }
.profile-tabs { align-items: center; margin-bottom: 0; }
.profile-tabs .profile-suggest-all { flex: none; margin-left: auto; }
@media (max-width: 60rem) {
  .profile-editor { grid-template-columns: minmax(0, 1fr); }
  .profile-preview { position: static; }
}
@media (max-width: 40rem) {
  .station-row { grid-template-columns: 1rem minmax(0, 1fr) minmax(0, 1fr); }
  .station-row > :nth-child(2) { grid-column: 2 / -1; }
  .station-row > :nth-child(3) { grid-column: 2; }
  .station-head { display: none; }
}

/* Toasts -----------------------------------------------------------------
   Short confirmations and errors in the bottom right corner, above
   everything else. app.js adds and removes them. */
.toasts {
  position: fixed; z-index: 1000; right: 1rem; bottom: 1rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
  pointer-events: none; max-width: calc(100vw - 2rem);
}
.toast {
  --toast-color: var(--success);
  --toast-bg: var(--success-bg);
  display: flex; align-items: center; gap: .625rem;
  min-width: 16rem; max-width: 28rem;
  padding: .625rem .5rem .625rem .75rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-left: 3px solid var(--toast-color);
  border-radius: var(--radius);
  box-shadow: 0 .5rem 1.5rem light-dark(rgb(16 24 40 / 12%), rgb(0 0 0 / 45%));
  font-size: .875rem; line-height: 1.4;
  pointer-events: auto; animation: toast-in .2s ease-out;
}
.toast.error { --toast-color: var(--danger); --toast-bg: var(--danger-bg); }
.toast-icon {
  flex: none; display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--toast-bg); color: var(--toast-color);
  font-size: .75rem; font-weight: 700;
}
.toast-text { flex: 1; }
.toast-close {
  flex: none; padding: .125rem .375rem; border: 0; background: none;
  color: var(--muted); font-size: 1.125rem; line-height: 1; cursor: pointer; box-shadow: none;
}
.toast-close:hover { color: var(--text); }
.toast.leaving { opacity: 0; transform: translateY(.5rem); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.5rem); } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.leaving { transition: none; }
}
/* Whom TimeJob has who could be a candidate, on the TimeJob card. */
.timejob-found strong:first-child { display: block; }
.timejob-people { list-style: none; margin: .625rem 0 0; padding: 0; display: grid; gap: .875rem; color: var(--text); }
.alert .timejob-people, .alert .facts-list { padding-left: 0; margin-bottom: 0; }
.timejob-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-bottom: .25rem; }
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; font-size: .8125rem; line-height: 1.5; }
.facts-list li { display: flex; gap: .5rem; align-items: flex-start; }
.facts-list .icon { width: .875rem; height: .875rem; margin-top: .1875rem; color: var(--muted); }
.facts-list .against, .facts-list .against .icon { color: var(--danger); }
.facts-list .minor { color: var(--muted); }
.timejob-others { margin-top: 1rem; }
.timejob-others h3 { margin: 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.timejob-others .hint { margin: .125rem 0 0; }
.timejob-action { margin: 1rem -1.25rem 0; padding: 1rem 1.25rem 0; border-top: 1px solid var(--border); }
.timejob-action .hint { margin: 0 0 .75rem; }
.timejob-header-mark { display: inline-flex; text-decoration: none; }

/* Whom TimeJob has as a candidate, by their name in lists. */
.timejob-mark { display: inline-flex; align-items: center; gap: .1875rem; padding: .0625rem .375rem; font-size: .6875rem; white-space: nowrap; }
.timejob-mark .icon { width: .6875rem; height: .6875rem; margin: 0; }
/* The place and marks under a name in a table, side by side. */
.table td > .sub.name-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .125rem; }
/* The QR code for someone to store themselves by the questionnaire. */
.questionnaire-invite { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.questionnaire-invite img { flex: none; border-radius: 6px; background: #fff; image-rendering: pixelated; }
.questionnaire-invite > div { display: grid; flex: 1 1 16rem; gap: .75rem; min-width: 0; }
.questionnaire-invite p, .questionnaire-invite .alert { margin: 0; }
/* The QR codes to print for the offices, a branch each. */
.office-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1rem;
  margin: 1rem 0 0; padding: 0; list-style: none; }
.office-codes li { gap: 1rem; align-items: center; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.office-codes img { width: 120px; height: 120px; }
.office-codes > li > div { flex-basis: 12rem; gap: .5rem; }
.office-codes h3 { margin: 0; font-size: 1rem; }
.office-codes .button { justify-self: start; }
.office-code-link { font-size: .8125rem; overflow-wrap: anywhere; }
/* The posters to print: the branch as chips, the designs as pictures
   that open the PDF. The pictures are always paper. */
.posters { margin-top: 1.25rem; scroll-margin-top: 1.5rem; }
.posters h3, .posters + h3 { margin: 0 0 .75rem; font-size: 1rem; }
.posters + h3 { margin-top: 1.5rem; }
.poster-label { margin: 0 0 .375rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.poster-branches { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
.poster-branches .image-option { padding: .25rem .75rem; font-size: .875rem; color: var(--text); text-decoration: none; }
.poster-branches .image-option[aria-current] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.poster-branches .image-option:hover { border-color: var(--accent); }
.poster-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.poster-gallery a { display: grid; align-content: start; gap: .375rem; height: 100%; padding: .5rem; border: 1px solid transparent;
  border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.poster-gallery a:hover, .poster-gallery a:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.poster-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; margin-bottom: .125rem; border-radius: 3px;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 3px 10px rgb(0 0 0 / .12); }
.poster-name { display: flex; align-items: center; gap: .375rem; font-weight: 600; font-size: .875rem; }
.poster-name .icon { width: .875rem; height: .875rem; margin-left: auto; opacity: 0; color: var(--accent); }
.poster-gallery a:hover .poster-name .icon, .poster-gallery a:focus-visible .poster-name .icon { opacity: 1; }
.poster-description { font-size: .75rem; color: var(--muted); }

/* What the person will not or cannot do, above their search profile, so
   that nobody suggests them for it. */
.excluded-work { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: 6px;
  background: var(--warning-bg); font-size: .875rem; }
.excluded-work .icon { flex: none; margin-top: .125rem; color: var(--warning); }
/* What the person would like to work as, in their words, and the
   occupations matching it to take into the search profile. */
.wish { font-style: italic; }
.wish-source { display: block; color: var(--muted); font-size: .8125rem; }
.wish-suggestions { display: grid; gap: .625rem; margin-top: 1rem; padding: .75rem .875rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.wish-suggestions p { margin: 0; color: var(--muted); font-size: .8125rem; }
:root[data-theme="contrast"] .wish-suggestions { border: 2px solid var(--ink); background: var(--hover); }
:root[data-theme="contrast"] .wish-suggestions p { color: var(--ink); font-weight: 600; }
/* The questionnaire, the information on data protection and the talent
   pool on one card: a line each with a dot as in lists, what can be done
   in a menu, and the open link for the person in a bar below. */
.consents-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .875rem; }
.consents-header h2 { margin: 0; }
.consents-menu > summary { height: auto; padding: .3125rem .75rem; font-size: .875rem; }
.consents-menu > summary::after { content: "▾"; font-size: .75rem; }
.consents-panel { width: min(19rem, calc(100vw - 2rem)); gap: 0; padding: .375rem 0; }
.consents-panel h3 { margin: .625rem .875rem .25rem; color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.consents-panel h3:first-child { margin-top: .25rem; }
.consents-panel > .hint { margin: 0 .875rem .25rem; }
.consents-panel form { margin: 0; }
.consents-panel .menu-item { display: block; width: 100%; height: auto; padding: .4375rem .875rem; border: 0; border-radius: 0; box-shadow: none;
  background: none; color: var(--text); font: inherit; font-size: .9375rem; font-weight: 500; text-align: left; text-decoration: none; white-space: normal; cursor: pointer; }
:root[data-theme="contrast"] .consents-panel .menu-item { font-weight: 500; }
:root[data-theme="contrast"] .consents-panel { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.consents-panel .menu-item:hover, .consents-panel .menu-item:focus-visible { background: var(--hover); }
.consents-panel .menu-item.danger { color: var(--danger); }
.consents-panel .menu-item small { display: block; color: var(--muted); font-size: .8125rem; font-weight: 400; overflow-wrap: anywhere; }
.menu-sub > summary { list-style: none; }
.menu-sub > summary::-webkit-details-marker { display: none; }
.menu-sub[open] > summary { background: var(--hover); }
.menu-sub form { display: grid; gap: .5rem; justify-items: start; padding: .5rem .875rem .75rem; }
.menu-sub form.inline-form { display: flex; }
.consent-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.consent-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.consent-list .stage { font-size: 1rem; color: var(--text); }
.consent-list .when { color: var(--muted); font-size: .875rem; text-align: right; }
.consent-list .consent-plain { padding-left: .875rem; }
/* Waiting for the person: gold, which stands apart in every theme. */
.consent-list .stage-warning::before { background: var(--gold); }
.consent-linkbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .875rem; margin-top: .875rem; padding: .5rem .75rem;
  border-radius: var(--radius-sm); background: var(--surface-2); font-size: .875rem; }
:root[data-theme="contrast"] .consent-linkbar { background: var(--hover); border: 2px solid var(--ink); }
.consent-linkbar > span { flex-basis: 100%; }
.consent-linkbar form { margin: 0; }
.consent-qr > summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.consent-qr[open] { flex-basis: 100%; order: 1; }
.consent-qr > div { display: grid; gap: .5rem; justify-items: start; margin-top: .5rem; }
.consent-qr img { border-radius: 4px; background: #fff; image-rendering: pixelated; }
.consent-qr p { margin: 0; }
.consent-qr input { width: 100%; font-size: .8125rem; }
.consents > .hint { margin: .75rem 0 0; }

/* The colour of the logo, offered as the accent. */
.logo-color { display: inline-flex; justify-self: start; align-items: center; gap: .375rem; margin-top: .5rem; font-size: .875rem; }
.logo-color svg { flex: none; border-radius: 3px; box-shadow: 0 0 0 1px var(--border); }