/*
 * EU vacancies tracker. Tokens and proportions ported from Orbit (github.com/Noveum/orbit, Apache 2.0).
 * See document/06-interface-specification.md.
 */

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

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --surface-3: #e9ebef;
  --border-subtle: #e3e5ea;
  --border: #d8dbe1;
  --border-strong: #c2c6ce;
  --text-strong: #0d0f14;
  --text: #1c1f27;
  --muted: #4b5060;
  --faint: #636877;
  --accent: #4d57bd;
  --accent-hover: #3f49a8;
  --accent-soft: #e6e8fa;
  --accent-contrast: #ffffff;
  --success: #12724c;
  --danger: #ba3237;
  --link: #2f5fd1;
  --shadow-pop: 0 1px 2px rgb(16 18 26 / 0.06), 0 12px 32px rgb(16 18 26 / 0.12);

  --font-sans: -apple-system, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-dense: 0.84375rem;
  --text-base: 0.9375rem;
  --text-xl: 1.3125rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --sidebar-width: 15rem;
  --topbar-height: 2.75rem;
  --row-height: 28px;
  --fast: 120ms;

  color-scheme: light;
}

/* The dark values appear twice: once when the system asks for them and the visitor has not chosen,
   once when the visitor chose dark. CSS has no way to share one block between the two. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg: #060607;
    --surface: #0f1011;
    --surface-2: #141416;
    --surface-3: #17181a;
    --border-subtle: #212124;
    --border: #26262a;
    --border-strong: #2c2d32;
    --text-strong: #f0f0f2;
    --text: #e4e4e6;
    --muted: #8a8f98;
    --faint: #83878f;
    --accent: #7b83eb;
    --accent-hover: #8d95f2;
    --accent-soft: #1e2140;
    --accent-contrast: #08080a;
    --success: #4cb782;
    --danger: #ea5a5f;
    --link: #7b8cff;
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

:root.dark {
  --bg: #060607;
  --surface: #0f1011;
  --surface-2: #141416;
  --surface-3: #17181a;
  --border-subtle: #212124;
  --border: #26262a;
  --border-strong: #2c2d32;
  --text-strong: #f0f0f2;
  --text: #e4e4e6;
  --muted: #8a8f98;
  --faint: #83878f;
  --accent: #7b83eb;
  --accent-hover: #8d95f2;
  --accent-soft: #1e2140;
  --accent-contrast: #08080a;
  --success: #4cb782;
  --danger: #ea5a5f;
  --link: #7b8cff;
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--text-dense)/1.48 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
h1, h2 { color: var(--text-strong); font-weight: 500; }
.muted { color: var(--muted); }
.count { color: var(--faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; font-weight: 400; }
.link-quiet { color: var(--muted); }

/* ---- Frame ---- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  flex: 0 0 var(--sidebar-width);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.icon { flex: none; width: 16px; height: 16px; }

.sidebar-head { display: flex; align-items: center; gap: 4px; }
.sidebar-head .brand { flex: 1; min-width: 0; }
.icon-button {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--row-height);
  height: var(--row-height);
  border-radius: var(--radius-md);
  color: var(--faint);
}
.icon-button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.topbar-end { margin-left: auto; }
.topbar-signin { flex: none; height: 28px; gap: 6px; padding: 0 10px; }
.topbar-signin .icon { width: 14px; height: 14px; }

/* Collapsed: only the icons remain. */
.shell.is-collapsed .sidebar { flex-basis: 3.25rem; align-items: center; }
.shell.is-collapsed .brand,
.shell.is-collapsed .nav-label,
.shell.is-collapsed .nav-title,
.shell.is-collapsed .search-field input { display: none; }
.shell.is-collapsed .search-field { justify-content: center; width: var(--row-height); padding: 0; }
.shell.is-collapsed .nav-item { justify-content: center; width: var(--row-height); padding: 0; }

.brand { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px; color: var(--text-strong); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.5625rem;
  font-weight: 700;
}
/* The logo in one colour: that of the strongest text, so it is dark on the light theme and light on the dark one.
   The stars take the colour of the page behind. The colour versions are in document/assets/. */
.logo { flex: none; width: 24px; height: 22px; }
.logo-frame { stroke: var(--text-strong); }
.logo-flag { fill: var(--text-strong); stroke: var(--text-strong); }
.logo-stars { fill: var(--bg); }
/* The sign-in, registration and password pages show it larger, above the form. */
.account-page .brand { flex-direction: column; height: auto; gap: 10px; font-size: 1.0625rem; }
.account-page .logo { width: 56px; height: 52px; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--row-height);
  margin-bottom: 4px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--faint);
}
.search-field .icon { width: 14px; height: 14px; }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.search-field:focus-within { border-color: var(--accent); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 2px;
  padding: 0 8px;
  color: var(--faint);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.nav-title .icon { width: 12px; height: 12px; }
a.nav-title { text-decoration: none; }
a.nav-title:hover { color: var(--text); }
.nav-title.is-closed .icon { transform: rotate(-90deg); }
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--row-height);
  padding: 0 8px;
  border-radius: var(--radius-md);
  color: var(--muted);
}
a.nav-item:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--text); text-decoration: none; }
.nav-item.is-active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.nav-item.is-unavailable { opacity: 0.55; cursor: default; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex;
  align-items: center;
  height: var(--topbar-height);
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
}
/* The bars between the steps are drawn here and the ones typed in the pages are not shown, so that a step
   left out on a narrow screen takes its bar with it. */
.breadcrumb { display: flex; min-width: 0; color: var(--faint); font-size: 0; white-space: nowrap; }
.crumb { overflow: hidden; color: var(--muted); font-size: var(--text-dense); text-overflow: ellipsis; }
.crumb + .crumb::before { content: "/"; margin: 0 6px; color: var(--faint); font-weight: 400; }
.crumb.is-current { flex: none; max-width: 70%; color: var(--text); font-weight: 500; }
a.crumb:hover { color: var(--text); }
.page-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.page-header:empty { display: none; }
.page-header.is-sticky { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.page-title { margin: 0; font-size: var(--text-dense); font-weight: 500; color: var(--text); }
.header-actions { display: flex; gap: 4px; margin-left: auto; }
.content { flex: 1; }
.footer { margin-top: 48px; padding: 36px 20px 28px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.footer h2 { margin: 0 0 10px; color: var(--text); font-size: var(--text-xs); font-weight: 600; }
.footer-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-size: var(--text-dense); font-weight: 600; }
.footer-logo:hover { text-decoration: none; }
.footer-logo .logo { width: 20px; height: 20px; }
.footer-brand p { max-width: 24rem; margin: 10px 0 14px; line-height: 1.55; }
.footer-maker { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); line-height: 1.3; }
.footer-maker:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.footer-maker img { border-radius: 50%; }
.footer-maker strong { color: var(--text); font-weight: 600; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.footer-links a, .footer-bottom a { color: var(--muted); }
.footer-links a:hover, .footer-bottom a:hover { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border-subtle); color: var(--faint); font-size: var(--text-2xs); line-height: 1.5; }
.footer-bottom p { margin: 0; }
.footer-wide { margin-top: 0; padding-inline: 0; border-top: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .footer { margin-top: 32px; padding-top: 24px; }
  .footer-grid { display: block; }
  .footer-extra, .footer-brand p, .footer-site h2 { display: none; }
  .footer-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
  .footer-maker { margin-left: auto; }
  .footer-site .footer-links { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; }
  .footer-bottom { margin-top: 16px; padding-top: 12px; }
}

/* ---- Controls ---- */

.button, .chip-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--row-height);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: 500 var(--text-xs) var(--font-sans);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.button:hover, .chip-button:hover { background: var(--surface-2); text-decoration: none; }
.button-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.button-primary { border-color: transparent; background: var(--accent); color: var(--accent-contrast); }
.button-primary:hover { background: var(--accent-hover); }
.button-small { margin: 6px 4px 2px; }
.chip-button { background: var(--surface-2); color: var(--muted); font-weight: 400; }
.chip-button .icon, .header-actions .button-ghost .icon { width: 14px; height: 14px; color: var(--faint); }
.chip-button.is-set { color: var(--text); border-color: var(--border-strong); }
summary::-webkit-details-marker { display: none; }

.menu { position: relative; }
.menu-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  min-width: 14rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.header-actions .menu-panel { right: 0; }
/* A filter panel: search on top, options that scroll, actions that stay in view. */
.filter-panel { display: flex; flex-direction: column; width: 19rem; max-width: calc(100vw - 24px); max-height: min(26rem, 70vh); padding: 0; overflow: hidden; }
/* Institutions have long names: their panel is wide enough for nearly all of them to hold on one line. */
.filter-panel-institution { width: 45rem; }
.filter-panel .filter-search { flex: none; width: calc(100% - 12px); min-height: 30px; margin: 6px 6px 2px; }
[hidden] { display: none !important; }
.filter-options { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; }
.filter-options .menu-row { line-height: 1.3; }
.filter-none { margin: 0; padding: 8px; }
.filter-options .menu-text { flex: 1; min-width: 0; }
.filter-options .count { margin-left: auto; }
.chip { gap: 5px; align-items: center; }
.chip:hover { text-decoration: none; border-color: var(--border-strong); }
.chip-field { color: var(--faint); }
.filter-actions { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px; border-top: 1px solid var(--border); background: var(--surface); }
.filter-actions .link-quiet { margin-left: auto; }
.filter-count { font-size: var(--text-xs); }
.menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--row-height);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.menu-row:hover { background: var(--surface-2); text-decoration: none; }
.menu-row.is-active { font-weight: 500; color: var(--accent); }

.chip, .chip-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-2xs);
  white-space: nowrap;
}
.chip { height: var(--row-height); padding: 0 8px; background: var(--surface-2); color: var(--text); }

.badge {
  display: inline-flex;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: 500;
  line-height: 1;
}
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-success { color: var(--success); }
.badge-outline { border-color: var(--border); color: var(--muted); }
/* Where an offer stands, as coloured text with no frame: green while open, orange before, the accent while a selection runs, grey once over. */
.offer-state { font-size: var(--text-2xs); font-weight: 500; white-space: nowrap; }
.offer-state.is-open { color: var(--success); }
.offer-state.is-upcoming { color: var(--warning); }
.offer-state.is-ongoing { color: var(--accent); }
.offer-state.is-completed, .offer-state.is-closed { color: var(--faint); }
.offer-state.is-cancelled { color: var(--danger); }

/* ---- Offer list ---- */

.banner, .notice {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-xs);
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}
.filter-clear { margin-left: auto; }

.group-header .icon { width: 14px; height: 14px; color: var(--faint); }
.group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  font-size: var(--text-dense);
  color: var(--text);
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--row-height);
  padding: 0 12px;
  color: var(--text);
}
.row:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); text-decoration: none; }
/* A row made of a link and one action beside it: the link takes the room, the action keeps a fixed place. */
.row-main { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 100%; color: inherit; }
.row-main:hover { text-decoration: none; }
.row-action { display: flex; flex: 0 0 5.75rem; justify-content: flex-end; }
form.row-action { flex-basis: auto; }
.row-add, .row-tracked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: var(--text-2xs);
  white-space: nowrap;
  cursor: pointer;
}
.row-add .icon { width: 12px; height: 12px; }
.row-add:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.row-tracked { border-color: transparent; background: none; }
.row-tracked:hover { color: var(--text); text-decoration: underline; }
/* Back from adding an offer: its row is shown clear of the top edge and stands out. */
.row[id] { scroll-margin-top: 5rem; }
.row:target { background: var(--accent-soft); }
.row-deadline { flex: 0 0 7rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-deadline.is-soon { color: var(--danger); }
.row-deadline.is-closed { color: var(--faint); }
.row-reference {
  flex: 0 0 9rem;
  overflow: hidden;
  color: var(--faint);
  font-size: var(--text-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-labels, .row-markers { display: flex; align-items: center; gap: 4px; }
.row-markers .offer-state { padding: 0 3px; }
.row-place { color: var(--faint); font-size: var(--text-2xs); white-space: nowrap; }
/* The offer list is a grid read from both ends: the deadline and the reference on the left, the institution, the
   place and the action on the right keep one width, so that the line of names above stays true. The title takes the
   rest, its markers follow it, and the chips of contract and grade sit against the institution (BR-302). */
.offer-grid .row-markers { flex: 0 0 auto; }
.offer-grid .row-labels { flex: 0 0 auto; justify-content: flex-end; }
.offer-grid .row-institution { flex: 0 0 5rem; }
.offer-grid .row-place { flex: 0 0 8rem; overflow: hidden; text-overflow: ellipsis; }
.offer-grid .row-title { flex: 0 1 auto; min-width: 10rem; }
.offer-grid .row-markers { margin-right: auto; }
.offer-grid .row-action { justify-content: flex-start; }
/* A screen of middle width: the type is left to the row's contract and institution, and the place and the reference
   are narrower. */
@media (max-width: 1500px) {
  .offer-grid .row-markers .badge-accent { display: none; }
  .offer-grid .row-place { flex-basis: 6.5rem; }
  .offer-grid .row-reference { flex-basis: 8rem; }
}
@media (max-width: 1350px) {
  .offer-grid .row-reference { flex-basis: 6.5rem; }
}
@media (max-width: 1200px) {
  .offer-grid .row-place { display: none; }
}
@media (max-width: 1000px) {
  .offer-grid .row-reference { display: none; }
}
.row-head { height: 28px; border-bottom: 1px solid var(--border); color: var(--faint); font-size: var(--text-2xs); }
.row-head:hover { background: none; }
.row-head .row-main > span { align-items: center; color: inherit; font-size: inherit; white-space: nowrap; }
.row-head .icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }

.empty { padding: 64px 24px; text-align: center; color: var(--muted); }
.empty-title { color: var(--text); font-size: 0.875rem; font-weight: 500; }
.pager { display: flex; gap: 8px; justify-content: center; padding: 16px; }

/* ---- Offer page ---- */

.detail { display: flex; align-items: flex-start; }
.detail-main { flex: 1; min-width: 0; max-width: 48rem; margin: 0 auto; padding: 24px 20px; }
.detail-reference { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--faint); font-size: var(--text-xs); }
.detail-title { margin: 4px 0 8px; font-size: var(--text-xl); line-height: 1.33; }
.detail-main h2 { margin: 24px 0 8px; font-size: var(--text-base); }
.status-line { color: var(--muted); }
.status-line.is-soon { color: var(--danger); }
/* ---- Application page: tabs, threads and the list of details ---- */
.tabs-line { margin: 20px 0 16px; gap: 2px; border-bottom: 1px solid var(--border-subtle); }
.tabs-line .tab { margin-bottom: -1px; padding: 6px 10px; border-bottom: 2px solid transparent; border-radius: 0; }
.tabs-line .tab.is-active { border-bottom-color: var(--accent); background: none; color: var(--text); }
.has-tabs .tab-panel > h2 { display: none; }
.tab-panel > .hint { margin: 12px 0; }
.thread-filter { width: fit-content; margin-bottom: 12px; }
.thread-filter .toggle-item { border: 0; background: none; font-family: inherit; cursor: pointer; }
.thread-filter .toggle-item.is-active { background: var(--surface-2); }
.thread { margin: 0 0 12px; padding: 0; list-style: none; }
.thread-item, .thread-compose { position: relative; display: flex; align-items: flex-start; gap: 10px; padding-bottom: 14px; }
/* The line that ties the entries together, from one mark to the next. */
.thread-item::before { content: ""; position: absolute; top: 24px; bottom: 0; left: 11px; width: 1px; background: var(--border); }
.thread-item:last-child::before { display: none; }
.thread-mark { display: flex; flex: 0 0 24px; align-items: center; justify-content: center; height: 24px; }
.thread-dot { width: 7px; height: 7px; border: 1.5px solid var(--faint); border-radius: 50%; }
.avatar { border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--text-2xs); font-weight: 600; }
.thread-body { flex: 1; min-width: 0; margin: 0; }
p.thread-body { padding-top: 3px; color: var(--muted); font-size: var(--text-xs); }
.thread-body.card { padding: 8px 12px; }
.thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: var(--text-dense); }
.thread-head strong { font-weight: 500; }
.thread-action { margin-left: auto; }
.thread-body .prose { margin-top: 4px; }
.thread-body .prose p:last-child { margin-bottom: 4px; }
.thread-when { margin: 2px 0 0; color: var(--muted); font-size: var(--text-xs); }
.thread-item.is-event { padding-bottom: 16px; }
.thread-item.is-event .thread-head { padding-top: 2px; }
.thread-item.is-past .thread-body { opacity: 0.6; }
.thread[data-only="comment"] .is-activity, .thread[data-only="activity"] .is-comment { display: none; }
.thread[data-only] .thread-item::before { display: none; }
.thread-compose { margin-top: 4px; }
.thread-compose p { margin: 8px 0 0; }
.add-form summary .icon { width: 14px; height: 14px; }
.add-form summary { list-style: none; }
.add-form summary::-webkit-details-marker { display: none; }
.details-card { padding: 0 0 4px; overflow: hidden; }
.details-card .panel-title { margin: 0 0 8px; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); color: var(--text); font-size: var(--text-xs); letter-spacing: 0; text-transform: none; }
.details-card .fields { margin: 0; padding: 0 6px 0 12px; }
.details-card .fields .input { min-height: 30px; padding: 3px 8px; border-color: transparent; background-color: transparent; }
.details-card .fields .input:hover { border-color: var(--border); background-color: var(--surface-2); }
.details-card .fields .input:focus { border-color: var(--accent); background-color: var(--surface); }
.details-card .fields > dd { padding-left: 9px; }
.details-card .fields input[type="text"]:placeholder-shown, .details-card .fields input.input:not(:focus):invalid { color: var(--faint); }
.details-foot { margin: 8px 12px 6px; padding-top: 8px; border-top: 1px solid var(--border-subtle); color: var(--faint); font-size: var(--text-2xs); line-height: 1.6; }
.panel-links { margin-top: 14px !important; padding: 0 12px; }
.panel .danger-zone { padding: 0 12px; }
.account-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: var(--text-xs); }
.account-chip .icon { width: 14px; height: 14px; }
.panel-title { margin: 0 0 12px; color: var(--faint); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.fields { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); align-items: center; gap: 6px 8px; margin: 0 0 6px; }
.fields > label, .fields > dt { margin: 0; color: var(--muted); font-size: var(--text-xs); letter-spacing: 0; text-transform: none; }
.fields > dd { margin: 0; min-height: 28px; display: flex; align-items: center; }
.fields .input { min-width: 0; }
.fields .button { justify-self: start; margin-top: 4px; }
.field-with-button { display: flex; gap: 6px; }
.field-with-button .button { margin: 0; }
.back-line { margin: 0 0 12px -8px; }
.back-line .icon { width: 14px; height: 14px; }
/* The facts of the offer under the phase: an icon, a label, then the value; side by side, two to a line on a phone (BR-303). */
.facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 16px; }
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact dt { display: flex; align-items: center; gap: 5px; color: var(--faint); }
.fact dt .icon { width: 12px; height: 12px; }
.fact dd { margin: 0; overflow-wrap: anywhere; }
.fact .is-soon { color: var(--danger); }
@media (max-width: 767px) {
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
}
.account-mark { display: inline-flex; color: var(--faint); }
.account-mark .icon { width: 13px; height: 13px; }
.prose { font-size: var(--text-base); line-height: 1.55; overflow-wrap: anywhere; }
.prose p { margin: 0 0 12px; }
.prose h3 { margin: 20px 0 8px; color: var(--text-strong); font-size: var(--text-base); font-weight: 600; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.files { padding-left: 18px; }
.files a { margin-left: 8px; }
.history { border-collapse: collapse; font-size: var(--text-xs); }
.history td { padding: 2px 16px 2px 0; color: var(--muted); vertical-align: top; }

.panel { flex: 0 0 18rem; align-self: stretch; padding: 12px; border-left: 1px solid var(--border); }
.panel dl { margin: 0; }
.panel dt {
  margin-top: 10px;
  color: var(--faint);
  font-size: var(--text-2xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.panel dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* ---- Narrow screens ---- */

/* Below 1024px the sidebar becomes a drawer, opened by the menu button of the top bar. */
.drawer-toggle, .drawer-button, .drawer-overlay { display: none; }

@media (max-width: 1023px) {
  .drawer-button { display: grid; margin-right: 4px; cursor: pointer; }
  .drawer-toggle { display: block; position: absolute; opacity: 0; pointer-events: none; }
  .drawer-toggle:focus-visible ~ .shell .drawer-button { outline: 2px solid var(--accent); }

  .sidebar,
  .shell.is-collapsed .sidebar {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    width: min(20rem, 88vw);
    align-items: stretch;
    transform: translateX(-100%);
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .drawer-toggle:checked ~ .shell .sidebar { transform: none; box-shadow: var(--shadow-pop); }
  .drawer-toggle:checked ~ .shell .drawer-overlay {
    display: block;
    position: fixed;
    z-index: 20;
    inset: 0;
    background: rgb(3 4 8 / 0.5);
  }

  /* The drawer always shows the full menu, whatever the collapse setting. */
  .sidebar-head .icon-button { display: none; }
  .shell.is-collapsed .brand { display: flex; }
  .shell.is-collapsed .nav-label,
  .shell.is-collapsed .search-field input { display: initial; }
  .shell.is-collapsed .nav-title { display: flex; }
  .shell.is-collapsed .search-field,
  .shell.is-collapsed .nav-item { justify-content: flex-start; width: auto; padding: 0 8px; }
  .nav-item { height: 44px; }

  .detail { flex-direction: column; }
  .panel { flex: none; width: 100%; border-left: 0; border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}
@media (max-width: 767px) {
  .row-institution, .row-place, .row-reference { display: none; }
}
@media (max-width: 639px) {
  .row-labels { display: none; }
  .row-action { flex-basis: auto; }
  .row-action-text { display: none; }
  .row-deadline { flex-basis: 6.5rem; }
}

/* ==== Step 2: accounts, applications, inbox ==== */

:root {
  --warning: #96570c;
  --phase-interested: #6b7080;
  --phase-preparing: #b8420f;
  --phase-progress: #8a5a0b;
  --phase-reserve: #12724c;
  --phase-offer: #4d57bd;
  --priority-urgent: #c33c41;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --warning: #f2c94c;
    --phase-interested: #7a7a82;
    --phase-preparing: #f2683c;
    --phase-progress: #f2c94c;
    --phase-reserve: #4cb782;
    --phase-offer: #5e6ad2;
    --priority-urgent: #e5484d;
  }
}
:root.dark {
  --warning: #f2c94c;
  --phase-interested: #7a7a82;
  --phase-preparing: #f2683c;
  --phase-progress: #f2c94c;
  --phase-reserve: #4cb782;
  --phase-offer: #5e6ad2;
  --priority-urgent: #e5484d;
}

/* ---- Glyphs ---- */

.glyph { flex: none; width: 14px; height: 14px; vertical-align: -2px; }
.phase-interested, .phase-closed { color: var(--phase-interested); }
.phase-preparing { color: var(--phase-preparing); }
.phase-applied, .phase-tests, .phase-interview { color: var(--phase-progress); }
.phase-reserve-list { color: var(--phase-reserve); }
.phase-offer { color: var(--phase-offer); }
.priority-none { color: var(--faint); }
.priority-low { color: var(--muted); }
.priority-medium { color: var(--accent); }
.priority-high { color: var(--warning); }
.priority-urgent { color: var(--priority-urgent); }
.is-soon { color: var(--danger); }

/* ---- Sidebar additions ---- */

.sidebar-foot { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 8px; }
.sidebar-foot .button { justify-content: center; }
.nav-count { margin-left: auto; padding: 0 4px; border-radius: 3px; background: var(--surface-3); color: var(--muted); font-size: var(--text-2xs); line-height: 16px; }
.nav-button { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; }
.nav-button:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--text); }
.shell.is-collapsed .sidebar-foot { display: none; }

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

.input {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.input:hover { border-color: var(--border-strong); }
.input:focus-visible { border-color: var(--accent); outline: 0; }
textarea.input { resize: vertical; }
/* One chevron for every list, at the same distance from the edge as the text: the native one differs by browser. */
select.input:not([multiple]) {
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("../chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  text-overflow: ellipsis;
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: var(--text-xs); }
.stack label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: var(--text-dense); }
.hint { color: var(--faint); font-size: var(--text-2xs); }
.trap { position: absolute; left: -10000px; }
.inline { display: inline; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-form .input { width: auto; }
.actions { display: flex; gap: 8px; margin: 0; }
.button-wide { justify-content: center; height: 36px; }
.button-danger { border-color: transparent; background: var(--danger); color: #fff; }
.button-small-inline { height: 24px; padding: 0 8px; }
.link-button { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.message { margin: 0 0 12px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--text); }
.message.is-error, .banner.is-error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }

/* ---- Account pages ---- */

.account-page { display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 100vh; padding: 48px 16px; }
.account-card { width: 100%; max-width: 22rem; padding: 20px; }
.account-card h1 { margin: 0 0 12px; font-size: 1.0625rem; }

/* ---- Page header controls ---- */

.toggle { display: flex; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.toggle-item { padding: 2px 10px; border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-xs); }
.toggle-item:hover { text-decoration: none; color: var(--text); }
.toggle-item.is-active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.tabs { display: flex; gap: 4px; margin-left: 12px; }
.tab { padding: 3px 10px; border-radius: var(--radius-md); color: var(--muted); }
.tab:hover { text-decoration: none; color: var(--text); }
.tab.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

/* ---- Applications list ---- */

summary.group-header { cursor: pointer; list-style: none; }
.row-date { flex: 0 0 4rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--faint); font-size: var(--text-xs); }
.row-date.is-soon { color: var(--danger); }

/* ---- Calendar: the dates of the applications, as a list by week and month, or on the grid of a month ---- */
.calendar-intro { margin: 0; padding: 10px 16px; color: var(--muted); font-size: var(--text-xs); }
.kind-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--kind, var(--faint)); }
.kind-deadline { --kind: var(--danger); }
.kind-target { --kind: var(--accent); }
.kind-booking-window { --kind: var(--warning); }
.kind-test { --kind: var(--link); }
.kind-interview { --kind: var(--success); }
.agenda-row { gap: 10px; color: inherit; }
.agenda-row:hover { text-decoration: none; }
.agenda-row.is-past { opacity: 0.6; }
.agenda-day { flex: 0 0 5.5rem; color: var(--text); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.agenda-day.is-today { color: var(--accent); font-weight: 600; }
.agenda-day.is-repeat { visibility: hidden; }
.agenda-weekday { display: inline-block; width: 2.1rem; color: var(--faint); font-weight: 400; }
.agenda-kind { display: flex; flex: 0 0 8.5rem; align-items: center; gap: 6px; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.agenda-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-detail { flex: none; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-row .row-date { flex-basis: 5.5rem; }

.month-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.month-name { margin: 0; font-size: var(--text-base); font-weight: 500; }
.month-bar .toggle { margin-left: auto; }
.month { margin: 0 16px 24px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.month-head, .month-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head { border-bottom: 1px solid var(--border-subtle); background: var(--surface); color: var(--faint); font-size: var(--text-2xs); letter-spacing: 0.03em; text-transform: uppercase; }
.month-head span { padding: 6px 8px; }
.month-week + .month-week { border-top: 1px solid var(--border-subtle); }
.month-day { min-height: 6.25rem; padding: 4px; }
.month-day + .month-day { border-left: 1px solid var(--border-subtle); }
.month-day.is-outside { background: var(--surface); }
.month-day.is-outside .month-number { color: var(--faint); opacity: 0.6; }
.month-number { margin: 0 0 2px; padding: 0 4px; color: var(--muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; text-align: right; }
.month-weekday { display: none; }
.month-day.is-today .month-number span:nth-child(2) { display: inline-block; min-width: 1.4em; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); text-align: center; }
.month-entry { display: flex; align-items: baseline; gap: 5px; padding: 1px 4px; border-radius: var(--radius-sm); color: var(--text); font-size: var(--text-2xs); line-height: 1.35; }
.month-entry:hover { background: var(--surface-2); text-decoration: none; }
.month-entry .kind-dot { align-self: center; }
.month-entry-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-entry-kind { color: var(--muted); }
.month-entry-label { display: none; }
.month-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -12px 16px 24px; color: var(--muted); font-size: var(--text-2xs); }
.month-legend > span { display: inline-flex; align-items: center; gap: 5px; }

/* ---- Board ---- */

.board { display: flex; gap: 12px; align-items: flex-start; padding: 12px; overflow-x: auto; }
.column { flex: 0 0 18rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.column.is-target { outline: 2px solid var(--accent); }
.column-header { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; font-size: var(--text-dense); color: var(--text); }
.column-cards { display: flex; flex-direction: column; gap: 8px; min-height: 96px; padding: 0 8px 8px; }
.board-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; cursor: grab; }
.board-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.board-card.is-dragging { opacity: 0.6; box-shadow: var(--shadow-pop); }
.card-meta { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--faint); font-size: var(--text-2xs); }
.card-title { color: var(--text); line-height: 1.35; }
.card-move { display: flex; gap: 4px; }
.card-move select { flex: 1; min-width: 0; height: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: inherit; font-size: var(--text-2xs); }

/* ---- Application page ---- */

.detail-actions { display: flex; gap: 8px; margin: 8px 0 12px; }
.notice-text { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.notice-text summary { cursor: pointer; color: var(--muted); }
.item-list { margin: 0 0 12px; padding: 0; list-style: none; }
.item-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.add-form { margin: 8px 0; }
.add-form[open] summary { margin-bottom: 12px; }
.feed { margin: 0 0 12px; padding: 0; list-style: none; }
.feed-activity { padding: 4px 0; color: var(--muted); font-size: var(--text-xs); }
.feed-comment { margin: 8px 0; padding: 10px 12px; }
.feed-comment .prose p:last-child { margin-bottom: 4px; }
.comment-edit[open] { margin-top: 8px; }
.panel .stack { margin-bottom: 16px; }
.panel-label { margin: 0; color: var(--faint); font-size: var(--text-2xs); letter-spacing: 0.03em; text-transform: uppercase; }
.panel-value { margin: -8px 0 0; }
.danger-zone { margin-top: 16px; }
.danger-zone[open] summary { margin-bottom: 8px; }
.dialog { max-width: 26rem; margin: 48px auto; padding: 20px; }
.dialog h1 { margin: 0; font-size: 1.0625rem; }

/* ---- Inbox ---- */

.inbox { display: grid; grid-template-columns: 22rem minmax(0, 1fr); min-height: calc(100vh - 8rem); }
.inbox-list { margin: 0; padding: 0; border-right: 1px solid var(--border); list-style: none; }
.inbox-row { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.inbox-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); text-decoration: none; }
.inbox-row.is-selected { background: var(--surface-2); }
.unread-dot { flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.unread-dot.is-read { background: transparent; }
/* The icon of the kind of an item (BR-240). */
.inbox-kind { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--muted); }
.inbox-kind svg { width: 14px; height: 14px; }
.button.is-filtering { background: var(--accent-soft); color: var(--accent); }
.inbox-text { display: flex; flex-direction: column; gap: 2px; }
.inbox-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--border); }
.inbox-bar p { flex: 1; min-width: 12rem; margin: 0; }
.inbox-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.inbox-application { padding: 20px; }

/* ---- Settings and tables ---- */

.settings { max-width: 36rem; padding: 20px; }
.settings section { margin-bottom: 32px; }
.settings h2 { margin: 0 0 12px; font-size: var(--text-base); }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: 6px 12px; border-bottom: 1px solid var(--border); color: var(--faint); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.03em; text-align: left; text-transform: uppercase; }
.table td { height: var(--row-height); padding: 0 12px; border-bottom: 1px solid var(--border-subtle); }
.table tr.is-disabled td { color: var(--faint); }

@media (max-width: 767px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox-list { border-right: 0; }
  .table { display: block; overflow-x: auto; }
}

/* ==== Step 3: analytics ==== */

/* The charts use four soft colours, the same on the light and the dark theme, and nothing else. */
:root { --series-1: #9db0ee; --series-2: #93d6c4; --series-3: #f4c79a; --series-4: #d7c3e8; }
.series-1 { fill: var(--series-1); background: var(--series-1); }
.series-2 { fill: var(--series-2); background: var(--series-2); }
.series-3 { fill: var(--series-3); background: var(--series-3); }
.series-4 { fill: var(--series-4); background: var(--series-4); }

.analytics { display: flex; flex-direction: column; gap: 20px; max-width: 64rem; padding: 20px; }
.analytics-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; color: var(--muted); }
.analytics-intro p { margin: 0; }
.analytics-bar { position: sticky; top: 8px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.analytics-bar-icon { display: inline-flex; color: var(--faint); }
.analytics-bar-icon .icon { width: 14px; height: 14px; }
.analytics-reset { margin-left: auto; }
.analytics-reset .icon { width: 14px; height: 14px; }
.tile-unit { margin: 2px 0 0; color: var(--faint); font-size: var(--text-2xs); letter-spacing: 0.04em; text-transform: uppercase; }
.chart-data { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-2) 50%, transparent); font-size: var(--text-xs); }
.chart-data summary { padding: 7px 10px; color: var(--muted); cursor: pointer; }
.chart-data .table { margin: 0; border-top: 1px solid var(--border); background: var(--surface); }
.analytics .filter-bar { margin: 0; padding: 0; border: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 12px; }
.tile { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.tile-label { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.tile-figure { margin: 6px 0 0; color: var(--text-strong); font-size: 1.75rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chart-card { padding: 18px 20px; }
.chart-card h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 14px; font-weight: 500; font-size: var(--text-dense); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; color: var(--muted); font-size: var(--text-xs); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; }
.chart { display: block; width: 100%; height: auto; }
.chart-guide { stroke: var(--border-subtle); stroke-width: 1; }
.chart-text { fill: var(--faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.rank-row { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 3rem; align-items: center; gap: 10px; height: 24px; }
.rank-name { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.rank-bar { width: 100%; height: 12px; border-radius: 2px; }
.rank-total { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.figures td:first-child { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.number { text-align: right !important; font-variant-numeric: tabular-nums; }
.data-notes { color: var(--muted); font-size: var(--text-xs); }
.data-notes h2 { margin: 0 0 4px; font-size: var(--text-xs); color: var(--text); }
.data-notes p { max-width: 46rem; margin: 0 0 6px; line-height: 1.55; }
.page-header { flex-wrap: wrap; }

@media (max-width: 767px) {
  .rank-row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 2.5rem; }
}

/* ==== Step 4 ==== */

.save-search { padding: 4px 12px; border-bottom: 1px solid var(--border); }
.save-search[open] summary { margin-bottom: 6px; }
.save-search .input { width: 18rem; max-width: 100%; }
.row-name { flex: 0 0 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main > .icon { width: 14px; height: 14px; color: var(--faint); }
.search-filters { flex: 1; min-width: 0; overflow: hidden; }
.search-filters .chip-label { gap: 4px; }
.search-filters .icon { width: 11px; height: 11px; color: var(--faint); }
.search-actions { gap: 4px; }
.search-actions .row-add { justify-content: center; }
.search-actions .row-add:first-of-type { min-width: 5.25rem; }
.row-add.is-on { color: var(--text); }
.row-add.is-on .icon { color: var(--accent); }
.row-add.is-danger:hover { border-color: var(--danger); color: var(--danger); }
@media (max-width: 640px) { .row-name { flex-basis: 9rem; } }
.row-summary { flex: 1; min-width: 0; overflow: hidden; color: var(--faint); font-size: var(--text-2xs); text-overflow: ellipsis; white-space: nowrap; }
.row .row-markers .link-button { margin-left: 8px; }

/* ==== Static pages and administration ==== */

.static { max-width: 40rem; padding: 24px 20px; }
.static h1 { margin: 0 0 12px; font-size: var(--text-xl); }
.static h2 { margin: 24px 0 8px; font-size: var(--text-base); font-weight: 600; }
.static code { padding: 1px 4px; border-radius: 3px; background: var(--surface-2); font-size: 0.9em; }
.static .copy-box { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); overflow-x: auto; user-select: all; }
.static .copy-box code { padding: 0; background: none; font-size: var(--text-base); }
.badge-warning { color: var(--warning); border-color: var(--border); }
.badge-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.button[disabled] { opacity: 0.5; cursor: default; }
form.header-actions { margin-left: auto; }
.review-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); }
.review-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.review-actions { display: flex; flex: none; gap: 4px; }
.review-fix select { width: 220px; }
.filter-bar .chip-button:hover { text-decoration: none; }

/* ---- Review queue: filter and bulk dismissal ---- */
.review-bulk .inline-form { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 16rem; }
.review-bulk .input { flex: 1; min-height: 30px; }
.review-dismiss-all { margin-left: auto; }
.review-dismiss-all .menu-panel { right: 0; }
.review-confirm { width: 17rem; padding: 12px; }
.review-confirm p { margin: 0 0 10px; }

.plain-list { margin: 0 0 12px; padding: 0; list-style: none; }
.plain-list li { padding: 3px 0; }

/* ---- Review queue: a possible duplicate, two offers side by side ---- */
.review-duplicate { display: block; padding: 10px 12px; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.compare-side { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.compare-title { display: block; margin-bottom: 6px; font-weight: 500; overflow-wrap: anywhere; }
.compare-facts { display: grid; grid-template-columns: 6.5rem 1fr; gap: 2px 8px; margin: 0 0 10px; font-size: var(--text-xs); }
.compare-facts dt { color: var(--faint); }
.compare-facts dd { margin: 0; overflow-wrap: anywhere; }
.review-pair { padding: 10px 12px; }
.review-pair .inline-form { margin-top: 8px; }
.review-pair .input { flex: 1; min-width: 14rem; }
@media (max-width: 767px) {
  .compare { grid-template-columns: 1fr; }
}

/* ---- My profile ---- */
.profile { max-width: 46rem; }
.profile-section { scroll-margin-top: 3.5rem; }
.section-nav { position: sticky; top: 0; z-index: 2; display: flex; gap: 2px; padding: 0 12px; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--bg, var(--surface)); }
.section-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.section-tab:hover { color: var(--text); text-decoration: none; }
.section-tab.is-active { border-bottom-color: var(--accent); color: var(--text); font-weight: 500; }
.section-tab .icon { width: 14px; height: 14px; }
.section-done { display: inline-flex; color: var(--success, var(--accent)); }
.experience-summary { margin-bottom: 20px; }
.profile-subtitle { margin: 0 0 8px; color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.section-unsaved { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.has-profile-tabs .profile-section { margin-bottom: 20px; }
.profile-empty { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.picker { display: flex; flex-direction: column; gap: 6px; }
.picker-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.picker-chip::after { content: "\00d7"; color: var(--faint); font-size: 1.1em; line-height: 1; }
.picker-chip:hover { border-color: var(--danger); }
.picker-chip:hover::after { color: var(--danger); }
.section-done .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.field-row:not(:has(> label:not([hidden]))) { display: none; }
.profile fieldset { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.profile legend { padding: 0 4px; color: var(--muted); font-size: var(--text-xs); }
.field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.field-row > label { flex: 1; min-width: 9rem; }
.add-entry { display: flex; flex-direction: column; gap: 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 4px 12px; }
.profile select[multiple] { height: auto; padding: 4px; }
.plain-table { margin: 8px 0; border-collapse: collapse; font-size: var(--text-xs); }
.plain-table th, .plain-table td { padding: 4px 10px 4px 0; text-align: left; vertical-align: top; }
.plain-table th { color: var(--muted); font-weight: 500; white-space: nowrap; }

/* ---- The preview board for visitors ---- */
.demo-banner { margin: 12px 12px 0; }
.demo-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-color: var(--accent); background: var(--accent-soft); }

/* ---- Activity: the administrator's screens on how the site is used ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-dense); }
.data-table th, .data-table td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.data-table th { color: var(--faint); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.data-table td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.total-row td { border-top: 1px solid var(--border-strong); background: var(--surface-2); font-weight: 500; }
.csv-link { margin-left: 8px; font-size: var(--text-2xs); font-weight: 400; }
.is-current-link { font-weight: 600; }
.activity .tiles { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.activity .table-title { margin: 20px 0 6px; color: var(--text-strong); font-size: var(--text-dense); font-weight: 600; }
.activity .table-title + .data-table + .hint { margin-top: 6px; }

/* The question put once to a visitor: may the site remember this browser? */
.remember-notice {
  position: fixed; right: 12px; bottom: 12px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  max-width: 26rem; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-pop); font-size: var(--text-xs);
}
.remember-notice p { flex: 1 1 100%; margin: 0; }
@media (max-width: 639px) {
  .remember-notice { right: 8px; left: 8px; max-width: none; }
}

/* ---- Offer analytics: the line of open offers and the four rankings ---- */
.chart-line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--series-1); opacity: 0.22; }
.chart-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 16px; }
.rank-row-short { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 2.5rem; }

/* A switch shows a ticked box when on and an empty one when off. */
.toggle-mark { flex: none; width: 14px; height: 14px; margin-right: 2px; color: var(--faint); vertical-align: -2px; }
.toggle-mark.is-on { color: var(--accent); }

.version { color: var(--faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }

/* Shown only to someone moving through the page with the keyboard. */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 50; padding: 8px 12px; background: var(--surface); color: var(--text); }
.skip-link:focus { left: 8px; top: 8px; }

/* On a wide screen the menu stays in view while the page scrolls, so its foot (the user's name and "Sign out",
   or "Create account" and "Sign in" for a visitor) is always at the bottom of the window. Below 1024px it is a drawer. */
@media (min-width: 1024px) {
  .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
}

/* The way out to the institution's site: the one green button of the page, with the mark of a link that leaves the site. */
.button-apply { border-color: transparent; background: var(--success); color: var(--surface); }
.button-apply:hover { background: color-mix(in srgb, var(--success) 85%, #000); color: var(--surface); text-decoration: none; }
.button-apply .icon { width: 13px; height: 13px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Search and command window ---- */
.palette { width: min(36rem, calc(100% - 24px)); max-height: min(32rem, 80vh); margin: 12vh auto auto; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); overflow: hidden; }
.palette[open] { display: flex; flex-direction: column; }
.palette::backdrop { background: rgb(16 18 26 / 0.35); }
.palette-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.palette-search .icon { color: var(--faint); }
.palette-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--text-base); }
.palette-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
.palette-close { display: none; }
.palette-title { margin: 8px 8px 4px; color: var(--faint); font-size: var(--text-2xs); letter-spacing: 0.04em; text-transform: uppercase; }
.palette-row { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: var(--radius-md); color: var(--text); }
.palette-row:hover { text-decoration: none; }
.palette-row.is-active { background: var(--surface-2); }
.palette-row .icon { color: var(--muted); }
.palette-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-keys { display: flex; gap: 4px; }
.palette kbd { min-width: 18px; padding: 1px 5px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font: 500 var(--text-2xs) var(--font-sans); text-align: center; }
.palette-empty { margin: 0; padding: 10px 8px; color: var(--muted); font-size: var(--text-xs); }

/* ---- Phone: the bar of main pages at the bottom of the screen, and the search window as a sheet ---- */
.tabbar { display: none; }
/* Calendar on a phone: the list keeps the day, the kind and the title; the month becomes the list of its days that hold a date. */
@media (max-width: 767px) {
  .agenda-row { flex-wrap: wrap; height: auto; padding-block: 8px; row-gap: 2px; }
  .agenda-day { flex-basis: 5rem; }
  .agenda-kind { flex: 1; }
  .agenda-title { flex: 0 0 100%; white-space: normal; }
  .agenda-row .row-reference, .agenda-row .chip-label { display: none; }
  .agenda-row .row-date { flex: none; order: -1; margin-left: auto; }
  .agenda-day { order: -3; } .agenda-kind { order: -2; }
  .month { margin-inline: 12px; }
  .month-head, .month-day.is-empty, .month-day.is-outside { display: none; }
  .month-week { display: block; }
  .month-week + .month-week { border-top: 0; }
  .month-day { min-height: 0; padding: 8px; border-bottom: 1px solid var(--border-subtle); }
  .month-day + .month-day { border-left: 0; }
  .month-number { text-align: left; font-size: var(--text-xs); }
  .month-weekday { display: inline; }
  .month-entry { font-size: var(--text-xs); padding-block: 3px; }
  .month-entry-text { white-space: normal; }
  .month-entry-label { display: inline; }
  .month-entry-edge { display: none; }
  .agenda-day.is-repeat { visibility: visible; }
  .month-legend { display: none; }
}

@media (max-width: 767px) {
  .tabbar {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 15;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface);
  }
  /* Seven pages for a signed-in person: narrower places, the middle one a little wider for its disc. */
  .tabbar-seven { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); padding-right: 2px; padding-left: 2px; }
  .tabbar-seven .tabbar-item .icon { width: 20px; height: 20px; }
  .tabbar-seven .tabbar-disc { width: 48px; height: 48px; }
  .tabbar-seven .tabbar-disc .logo { width: 28px; height: 26px; }
  .tabbar-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-height: 48px; padding-bottom: 2px; color: var(--muted); font-size: 10px; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
  .tabbar-item:hover { text-decoration: none; }
  .tabbar-item .icon { width: 22px; height: 22px; }
  .tabbar-item.is-active { color: var(--accent); font-weight: 500; }
  .tabbar-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The offers stand out: a larger disc in the middle, raised over the edge of the bar. */
  .tabbar-disc { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -20px; border: 3px solid var(--bg); border-radius: 50%; background: var(--accent); color: var(--accent-contrast); box-shadow: 0 2px 6px rgb(16 18 26 / 0.18); }
  /* The site's own mark in its colours, as on the favicon: the frame in the accent, the flag blue with gold stars. */
  .tabbar-disc { border-color: var(--bg); background: var(--surface); box-shadow: 0 0 0 1px var(--border-strong), 0 2px 6px rgb(16 18 26 / 0.18); }
  .tabbar-disc .logo { width: 30px; height: 28px; margin: 0 0 2px 2px; }
  .tabbar-disc .logo-frame { stroke: var(--accent); }
  .tabbar-disc .logo-flag { fill: #003399; stroke: var(--accent); }
  .tabbar-disc .logo-stars { fill: #ffcc00; }
  .tabbar-main.is-active .tabbar-disc { box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgb(16 18 26 / 0.18); }
  .tabbar-main { color: var(--text); font-weight: 500; }
  .tabbar-count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accent-contrast); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
  /* Room for the bar under every page, and the question about visits above it. */
  .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .remember-notice { bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* An offer or an application: a long address in the list of changes breaks to the next line, so that the page keeps the width of the screen. */
  .detail-main, .panel { min-width: 0; max-width: 100%; }
  .history { width: 100%; table-layout: fixed; }
  .history td, .prose { overflow-wrap: anywhere; }

  /* The breadcrumb keeps its last two steps: where one is, and the step back. The menu and the bar give the rest. */
  .breadcrumb .crumb:not(:nth-last-child(-n+2)) { display: none; }
  .breadcrumb .crumb:nth-last-child(2)::before { display: none; }

  /* The actions of a page's header go to a line of their own and wrap, so that none is pushed off the screen. */
  .page-header { flex-wrap: wrap; }
  .header-actions { flex-wrap: wrap; margin-left: 0; }

  /* The offer list keeps the deadline and the title; the marks take the room of their text and no more. */
  .offer-grid .row-title { min-width: 0; }
  .offer-grid .row-markers { flex: 0 0 auto; max-width: 5.5rem; }

  /* A menu or a filter opens as a sheet over the bar, as wide as the screen. Hung under its button it reached past
     the edge of the screen and made the whole page slide sideways. */
  .menu-panel, .header-actions .menu-panel, .filter-panel, .filter-panel-institution {
    position: fixed; z-index: 25; top: auto; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 8px;
    width: auto; max-width: none; max-height: min(60vh, 28rem); box-shadow: var(--shadow-pop);
  }
  .menu-row { min-height: 40px; }

  /* A phone zooms into any field whose text is under 16px, and stays zoomed. Every field is given that size. */
  .input, .search-field input, .filter-search, select, textarea { font-size: 16px; }

  /* The search window fills the width and starts at the top, clear of the keyboard. A field under 16px makes the phone zoom in. */
  .palette { top: 8px; right: 8px; bottom: auto; left: 8px; width: auto; max-width: none; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); margin: 0; }
  /* One scrolling block with the field held at its top: a phone's browser gave the list no height inside a flexible box. */
  .palette[open] { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .palette-search { position: sticky; top: 0; z-index: 1; background: var(--surface); }
  .palette-list { overflow: visible; }
  .palette-wide { display: none; }
  .palette-search { padding: 10px 12px; }
  .palette-search input { font-size: 16px; }
  .palette-search kbd, .palette-keys { display: none; }
  .palette-close { display: inline; padding: 6px 2px; font-size: var(--text-dense); }
  .palette-row { height: 46px; font-size: var(--text-base); }
  .palette-row .icon { width: 20px; height: 20px; }
}

/* ---- Landing page: what a visitor sees first (BR-176). No sidebar: one column, wide, with its own bar and footer. ---- */
.landing { min-height: 100vh; background: var(--bg); color: var(--text); }
.landing > header, .landing > main > section, .landing > footer { width: min(100% - 40px, 68rem); margin-inline: auto; }
.landing-nav { display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.landing-nav .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-weight: 600; }
.landing-nav .brand:hover { text-decoration: none; }
.landing-nav .logo { width: 22px; height: 22px; }
.landing-nav-links { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: var(--text-dense); }
.landing-nav-links > a:not(.button) { color: var(--muted); }
.landing-nav-links > a:not(.button):hover { color: var(--text); text-decoration: none; }

/* The opening: full width, a photograph under a dark veil that fades to the right, so that the title reads on any picture
   and in both themes. */
.landing > main > section.landing-hero { position: relative; display: flex; align-items: center; width: 100%; min-height: min(38rem, 78vh); overflow: hidden; background: #0b0d14; }
.landing-hero-media, .landing-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-hero-media img { object-fit: cover; object-position: 70% 40%; }
.landing-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(9 11 20 / 0.92) 0%, rgb(9 11 20 / 0.82) 34%, rgb(9 11 20 / 0.35) 62%, rgb(9 11 20 / 0.05) 100%); }
.landing-hero-text { position: relative; width: min(100% - 40px, 68rem); margin-inline: auto; padding: 64px 0; }
.landing-hero-text > * { max-width: 36rem; }
.landing h1 { margin: 0 0 18px; color: #fff; font-size: clamp(2rem, 4.2vw, 3.125rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
.landing-lead { margin: 0 0 26px; color: rgb(255 255 255 / 0.82); font-size: 1.0625rem; line-height: 1.55; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.landing-cta { min-height: 44px; padding: 0 20px; font-size: var(--text-base); font-weight: 500; }
.landing-hero .landing-cta-plain { border-color: rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.08); color: #fff; backdrop-filter: blur(6px); }
.landing-hero .landing-cta-plain:hover { background: rgb(255 255 255 / 0.16); }
.landing-try { margin: 0; font-size: var(--text-dense); }
.landing-try a { color: rgb(255 255 255 / 0.82); text-decoration: underline; text-underline-offset: 3px; }
.landing-try a:hover { color: #fff; }
.landing-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: min(100% - 40px, 68rem); margin: 0 auto; padding: 28px 0; list-style: none; }
.landing-figures li { display: flex; flex-direction: column; gap: 2px; }
.landing-figures strong { color: var(--text-strong); font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.landing-figures span { color: var(--muted); font-size: var(--text-dense); }
.landing-read { width: min(100% - 40px, 68rem); margin: -12px auto 0; padding-bottom: 24px; color: var(--muted); font-size: var(--text-xs); }

.landing-section { padding: 44px 0; border-top: 1px solid var(--border-subtle); }
.landing-section h2, .landing-final h2 { margin: 0 0 24px; color: var(--text-strong); font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.landing-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; }
.landing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; }
.landing-steps.landing-steps-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.landing-note { max-width: 46rem; margin: 24px 0 0; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); color: var(--muted); line-height: 1.55; }
.landing-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin: 0; }
.landing-words dt { margin: 0 0 4px; color: var(--text-strong); font-weight: 600; }
.landing-words dd { margin: 0; color: var(--muted); line-height: 1.55; }
.landing h3 { margin: 0 0 6px; color: var(--text-strong); font-size: var(--text-base); font-weight: 600; }
.landing-point p, .landing-feature p, .landing-steps p { margin: 0; color: var(--muted); line-height: 1.55; }
.landing-audiences { padding-top: 32px; }
.landing-audience { display: flex; flex-direction: column; gap: 6px; padding: 18px; color: var(--muted); transition: border-color var(--fast); }
.landing-audience:hover { border-color: var(--accent); text-decoration: none; }
.landing-audience > .icon { width: 20px; height: 20px; color: var(--accent); }
.landing-audience strong { color: var(--text-strong); font-size: var(--text-base); }
.landing-audience em { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--link); font-size: var(--text-xs); font-style: normal; }
.landing-audience em .icon { width: 13px; height: 13px; transform: rotate(-90deg); }
.landing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; margin: 0; padding: 0; list-style: none; }
.landing-step-number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--text-xs); font-weight: 600; }
.landing-features { gap: 14px; }
.landing-feature { padding: 16px; }
.landing-feature > .icon { width: 18px; height: 18px; margin-bottom: 10px; color: var(--accent); }
.landing-map-section { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 40px; }
.landing-map-text p { margin: 0 0 10px; color: var(--muted); line-height: 1.55; }
.landing-map { width: 100%; max-width: 30rem; height: auto; justify-self: end; }
.landing-tile rect { fill: var(--surface); stroke: var(--border); }
.landing-tile-code { fill: var(--faint); font-size: 11px; font-weight: 500; letter-spacing: 0.03em; }
.landing-tile-count { fill: var(--text-strong); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.landing-tile.level-1 rect { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.landing-tile.level-2 rect { fill: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
.landing-tile.level-3 rect { fill: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.landing-tile.level-4 rect { fill: var(--accent); stroke: var(--accent); }
.landing-tile.level-4 text { fill: var(--accent-contrast); }
.landing-tile:not(.level-0) .landing-tile-code { fill: var(--text); }
.landing-map a:hover rect { stroke: var(--text-strong); }
.landing-offers { margin: 0; padding: 0; overflow: hidden; list-style: none; }
.landing-offers li + li { border-top: 1px solid var(--border-subtle); }
.landing-offers a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--text); }
.landing-offers a:hover { background: var(--surface-2); text-decoration: none; }
.landing-offer-date { flex: 0 0 3.5rem; color: var(--danger); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.landing-offer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-more { margin: 14px 0 0; font-size: var(--text-dense); }
.landing-faq details { max-width: 44rem; border-bottom: 1px solid var(--border-subtle); }
.landing-faq summary { padding: 12px 0; color: var(--text-strong); font-weight: 500; cursor: pointer; }
.landing-faq details p { margin: 0 0 14px; color: var(--muted); line-height: 1.55; }
.landing-faq details ul { margin: 0 0 14px; padding-left: 18px; color: var(--muted); line-height: 1.7; }
/* The closing call: full width over a photograph. With a mouse the photograph stays still while the page scrolls over it;
   on a touch screen, where browsers do not hold a background still, and for readers who asked for less motion, it scrolls
   with the page. */
.landing > main > section.landing-final { position: relative; width: 100%; padding: 104px 20px 112px; border-top: 0; text-align: center; color: #fff;
  background-color: #0b0d14;
  background-image: linear-gradient(rgb(9 11 20 / 0.74), rgb(9 11 20 / 0.74)), url("../landing/band-1920.jpg");
  background-image: linear-gradient(rgb(9 11 20 / 0.74), rgb(9 11 20 / 0.74)), image-set(url("../landing/band-1920.webp") type("image/webp"), url("../landing/band-1920.jpg") type("image/jpeg"));
  background-position: center; background-size: cover; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .landing > main > section.landing-final { background-attachment: fixed; }
}
.landing-final h2 { max-width: 36rem; margin-inline: auto; color: #fff; }
.landing-final .landing-actions { justify-content: center; }
.landing-final .landing-cta:not(.button-primary) { border-color: rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.08); color: #fff; backdrop-filter: blur(6px); }
.landing-final .landing-cta:not(.button-primary):hover { background: rgb(255 255 255 / 0.16); }
.landing-final .hint { color: rgb(255 255 255 / 0.75); }

@media (max-width: 900px) {
  .landing-three, .landing-steps, .landing-steps.landing-steps-four { grid-template-columns: minmax(0, 1fr); }
  .landing-map-section { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .landing-map { justify-self: start; }
}
@media (max-width: 767px) {
  .landing-words { grid-template-columns: minmax(0, 1fr); }
  .landing-nav-links { gap: 12px; }
  /* On a phone the photograph is a band above the text, which takes the colours of the theme again. */
  .landing > main > section.landing-hero { display: block; min-height: 0; background: none; }
  .landing-hero-media { position: relative; display: block; height: 13rem; }
  .landing-hero-media::after { background: linear-gradient(180deg, transparent 55%, var(--bg) 100%); }
  .landing-hero-text { padding: 20px 0 8px; }
  .landing h1 { color: var(--text-strong); }
  .landing-lead { color: var(--muted); }
  .landing-hero .landing-cta-plain { border-color: var(--border); background: var(--surface); color: var(--text); backdrop-filter: none; }
  .landing-try a { color: var(--link); }
  .landing-figures { gap: 14px; padding: 20px 0; }
  .landing-figures span { font-size: var(--text-xs); }
  .landing-nav-links > a[href="/demo"], .landing-nav .brand-name { display: none; }
  .landing-cta { flex: 1 1 100%; justify-content: center; }
  .landing-section { padding: 32px 0; }
  .landing > main > section.landing-final { padding: 64px 20px 72px; background-image: linear-gradient(rgb(9 11 20 / 0.74), rgb(9 11 20 / 0.74)), url("../landing/band-1100.jpg"); }
}

/* Competitions (document/13-competitions-specification.md): the list by stage and the page of one competition. */
.competitions { max-width: 60rem; margin: 0 auto; padding: 20px; }
.competitions-lead { max-width: 46rem; margin: 0 0 8px; color: var(--muted); line-height: 1.55; }
.competition-section { margin-top: 28px; }
.competition-section h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; color: var(--text-strong); font-size: var(--text-base); font-weight: 600; }
.competition-section > .hint { margin: 0 0 10px; }
.competition-list { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.competition-list li + li { border-top: 1px solid var(--border-subtle); }
.competition-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto 15rem; align-items: baseline; gap: 4px 14px; padding: 9px 14px; color: var(--text); text-decoration: none; }
.competition-row:hover { background: var(--surface-2); }
.competition-reference { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.competition-name { color: var(--text-strong); font-weight: 500; overflow-wrap: anywhere; }
.competition-meta { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.competition-date { color: var(--muted); font-size: var(--text-xs); text-align: right; }
.competition-date.is-soon { color: var(--danger); }
.competition-year { margin-top: 8px; }
.competition-year > summary { padding: 6px 2px; color: var(--text-strong); font-weight: 500; cursor: pointer; }
.competition-year > .competition-list { margin-top: 4px; }

.timeline { margin: 0 0 8px; padding: 0; list-style: none; }
.timeline-step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 14rem) minmax(0, 1fr); align-items: baseline; gap: 0 8px; padding-bottom: 12px; color: var(--faint); }
.timeline-step::before { content: ""; position: absolute; top: 16px; bottom: -4px; left: 11px; width: 1px; background: var(--border); }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step:last-child::before { display: none; }
.timeline-mark { justify-self: center; width: 9px; height: 9px; border: 1.5px solid var(--faint); border-radius: 50%; background: var(--bg); transform: translateY(1px); z-index: 1; }
.timeline-step.is-reached { color: var(--text); }
.timeline-step.is-reached .timeline-mark { border-color: var(--accent); background: var(--accent); }
.timeline-step.is-current .timeline-label { color: var(--text-strong); font-weight: 600; }
.timeline-step.is-current .timeline-mark { box-shadow: 0 0 0 3px var(--accent-soft); }
.timeline-date { color: var(--muted); font-size: var(--text-xs); }

.after-deadline { margin: 0; padding: 4px 14px; }
.after-deadline > div { padding: 10px 0; }
.after-deadline > div + div { border-top: 1px solid var(--border-subtle); }
.after-deadline dt { margin: 0 0 2px; color: var(--text-strong); font-weight: 600; }
.after-deadline dd { margin: 0; color: var(--muted); line-height: 1.55; }
.after-deadline .icon { width: 12px; height: 12px; vertical-align: -1px; }

.field-list { margin: 0; padding: 0; list-style: none; }
.field-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.field-list li + li { border-top: 1px solid var(--border-subtle); }
.field-list .field-title { flex: 1; min-width: 0; }
.field-list form { margin: 0; }

@media (max-width: 767px) {
  .competitions { padding: 16px 12px; }
  .competition-row { grid-template-columns: minmax(0, 1fr) auto; }
  .competition-reference { grid-column: 1; }
  .competition-meta { grid-column: 2; grid-row: 1; justify-self: end; }
  .competition-name { grid-column: 1 / -1; }
  .competition-date { grid-column: 1 / -1; text-align: left; }
  .timeline-step { grid-template-columns: 24px minmax(0, 1fr); }
  .timeline-date { grid-column: 2; }
  .field-list li { flex-wrap: wrap; }
  .field-list .field-title { flex-basis: 100%; }
}

/* The new offers a saved-search item announces, under its button (BR-209). */
.inbox-offers-title { margin: 20px 0 8px; color: var(--text-strong); font-size: var(--text-base); font-weight: 600; }
.inbox-offers { max-width: 46rem; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.inbox-offers li + li { border-top: 1px solid var(--border-subtle); }
.inbox-offers a { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; color: var(--text); }
.inbox-offers a:hover { background: var(--surface-2); text-decoration: none; }
.inbox-offer-title { color: var(--text-strong); font-weight: 500; overflow-wrap: anywhere; }
.inbox-offer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.inbox-application > .hint { max-width: 46rem; margin: 10px 0 0; }

/* What a scan changed on an offer: the card of an inbox item and the values of a change history (BR-236, BR-237).
   The sign and the word say what happened to an entry; the colour only repeats it. */
.inbox-changes { padding-bottom: 0; }
.inbox-changes .inbox-offers-title { margin-top: 0; }
.inbox-changes .inbox-offers-title .count { margin-left: 8px; font-weight: 400; }
.change-list { max-width: 46rem; margin: 0; overflow: hidden; }
.change-row { display: flex; gap: 12px; padding: 10px 14px; }
.change-row + .change-row { border-top: 1px solid var(--border-subtle); }
.change-row dt { flex: 0 0 7rem; padding-top: 2px; color: var(--faint); font-size: var(--text-xs); }
.change-row dd { flex: 1; min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.change-old { color: var(--muted); }
.change-old.is-removed, .change-entry.is-removed .change-text { text-decoration: line-through; }
.change-arrow { color: var(--faint); }
.change-entries { margin: 0; padding: 0; list-style: none; }
/* The sign hangs in the margin of its entry, so that a long title wraps under itself. */
.change-entry { padding-left: 1.4ch; text-indent: -1.4ch; }
.change-entry > * { text-indent: 0; }
.change-entry.is-kept { text-indent: 0; color: var(--faint); }
.change-entry.is-kept a { color: inherit; }
.change-entry.is-removed { color: var(--muted); }
.change-mark { display: inline-block; width: 1.4ch; font-weight: 600; }
.change-entry.is-added .change-mark, .change-entry.is-added .change-word, .change-word.is-added { color: var(--success); }
.change-word, .change-copy { margin-left: 4px; font-size: var(--text-xs); }
.history td:first-child { white-space: nowrap; }
.change-word { color: var(--muted); }
@media (max-width: 767px) {
  .change-row { flex-direction: column; gap: 2px; }
  .change-row dt { flex-basis: auto; }
}

/* The state of the daily email on the page of the sources (BR-255). */
.section-title { margin: 28px 0 8px; color: var(--text-strong); font-size: var(--text-base); font-weight: 600; }
.log { max-width: 100%; margin: 8px 0 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--muted); font-size: var(--text-xs); }

/* Activity: from which day the log starts, under the choice of the period (BR-212). */
.activity-note { margin: 0; padding: 0 20px 4px; }

.activity #clean .banner { margin-bottom: 12px; }