:root {
  /* 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);
  --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);
  --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;
  --waiting: light-dark(#c8102e, #ff6b7d);
  /* 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; }

/* 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;
  --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);
  --waiting: var(--accent);
  --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: spacing is given in rem almost everywhere, so a smaller
   root font size tightens the whole layout; tables and cards get a little
   extra. */
:root[data-density="compact"] { font-size: 14px; }
:root[data-density="compact"] body { line-height: 1.4; }
:root[data-density="compact"] .table th,
:root[data-density="compact"] .table td { padding: .375rem .75rem; }
:root[data-density="compact"] .card { padding: 1rem 1.25rem; }
:root[data-density="compact"] .content { padding-top: 1.25rem; }
:root[data-density="compact"] .tasks,
:root[data-density="compact"] .recent { margin-bottom: -1rem; }

*, *::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: 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; }

.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(--accent); background: var(--accent-soft); }
.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); }

.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; }

.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;
}

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(--accent); }
  .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(--accent); background: var(--accent-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; }
  .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; }

/* Page structure */
.page-header {
  display: flex;
  align-items: flex-end;
  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; }
.breadcrumb { margin: 0 0 .375rem; font-size: .8125rem; color: var(--muted); }
.breadcrumb a::after { content: "/"; margin: 0 .375em; color: var(--muted); }
.prewrap { white-space: pre-line; margin: 0; color: var(--text-2); }

/* 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-jobs .sub + a { margin-top: .25rem; }
.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::after { color: var(--band-muted); }
:root:not([data-theme="contrast"]) .content .breadcrumb a { 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); }
}

@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. */
:root:not([data-theme="contrast"]) .content .card h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
:root:not([data-theme="contrast"]) .content .card h2 .badge { text-transform: none; letter-spacing: 0; }
.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 -1.25rem;
  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; }
.stage-counts .waiting .stage-count-value { color: var(--waiting); }

.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: baseline;
  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 -1.25rem; 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); }
.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; }
.ads-section { margin-top: 1rem; display: grid; gap: 1rem; }
.ads-section h2, .ads-section > .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;
}

.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; }
.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); }
.card .table { box-shadow: none; }
.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; }
/* "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; }
.people-table .match-pill { gap: .25rem; text-decoration: none; }
.table td a.match-pill { color: var(--accent); font-weight: 600; }
.match-pill .icon { margin-right: 0; }
.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: search and choices in one row, toggles below. */
.market-filters { display: grid; gap: .625rem; }
.market-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.market-filter-row:first-child { gap: .5rem; }
.market-filter-row input[type="search"] { flex: 1 1 12rem; max-width: none; }
/* The levels are chips as high as the selects beside them. */
.level-filter { height: 2.25rem; }
.level-filter label { display: flex; align-items: center; padding: 0 .75rem; font-size: .875rem; }
.market-table td:first-child { min-width: 17rem; }
.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); }
.table td > .kind { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; margin-top: .25rem; }
.field-tag {
  padding: 0 .375rem;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--field);
  background: color-mix(in srgb, var(--field) 13%, transparent);
  white-space: nowrap;
}
.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. */
.ads-header { flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.ads-header h2 { margin: 0; }
.ads-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; }

/* 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; }
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; }
.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; }

/* 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); }

/* 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; }

.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; }

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: -1.25rem; }
.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; } }
.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; }
.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); }
/* 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-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 -1.25rem; 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 form { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.matches > li.pick { grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; }
.matches > li.pick > input { grid-row: 1 / span 2; align-self: start; margin: .25rem 0 0; }
.matches > li.pick > :not(input) { grid-column: 2; }
.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 -1.25rem; 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; }
/* 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); }
/* 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; }
  .job-applications { display: inline-flex; flex-direction: row-reverse; gap: .375rem; align-items: baseline; }
}
@media (max-width: 40rem) {
  .facts { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .matches > li { grid-template-columns: 1fr; }
  .matches form { 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); }

/* Channels a job goes to, as cards to tick; one that always gets the
   job is shown alongside, fixed. */
.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 -1.25rem;
  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%; }
}

/* 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-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; }

/* 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: 50vh; gap: .625rem; padding: 1rem; }
  .coach-tour { display: none; }
}

/* 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; }

.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-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; }
}

@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; }
.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-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"] :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; }
: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) 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; }

.portrait-preview img { display: block; width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; }

/* 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; }
.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; }
.profiles-contact { padding-top: 1rem; border-top: 1px solid var(--border); }
@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; }
.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)) > input:not([type="checkbox"]) { 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; }
.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;
}
.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; }