/*
 * The whole product's styling, owned by the app layer. Modules ship markup and
 * lean on these classes; they do not ship stylesheets of their own, so that a
 * customer instance can restyle everything from one place.
 */

:root {
  --ink: #1c1e21;
  --ink-muted: #5f6672;
  --line: #dfe3e8;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --accent: #2f5d8a;
  --accent-ink: #ffffff;
  --danger: #a8322d;
  --radius: 6px;
  --gap: 1rem;
  --sidebar-width: 15rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;

  /* A fixed-width sidebar beside a fluid content column. The skip-link is
     positioned out of flow, so the grid sees only the sidebar and main. */
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

a { color: var(--accent); }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 0.5rem;
  background: var(--surface);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  z-index: 10;
}

.sidebar {
  /* Stays put while the content column scrolls. */
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem 0.9rem;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.brand {
  font-weight: 650;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  color: var(--ink-muted);
  text-decoration: none;
}
.sidebar-nav a:hover {
  color: var(--ink);
  background: var(--bg);
}

/* Who is signed in, and the way out. Pushed to the foot of the sidebar so it
   sits apart from the navigation above it. */
.sidebar-account {
  margin-top: auto;
  display: grid;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.sidebar-user {
  padding: 0 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.sidebar-account form { margin: 0; }
.sidebar-account button { width: 100%; }

/* Inline SVG icon. Sized in em so it tracks the text it sits beside, and
   coloured by currentColor so it inherits link and hover states for free. */
.icon {
  width: 1.35em;
  height: 1.35em;
  flex: none;
}

main {
  padding: 1.5rem;
}
.content {
  max-width: 60rem;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 1.25rem;
}
.page-header h1 { margin: 0; font-size: 1.5rem; }

.breadcrumb { margin: 0 0 0.25rem; font-size: 0.875rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.card h2 { margin: 0 0 0.75rem; font-size: 1.05rem; }

/* Buttons and links styled as buttons must look identical. */
button,
.button {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
button:hover,
.button:hover { filter: brightness(1.08); }

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

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

.search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.search input { flex: 1; }

/* An inline filter toggle sitting in a .search row, e.g. "show former staff".
   Opt the checkbox out of the full-width input sizing the row otherwise gives. */
.search .toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.search .toggle input {
  width: auto;
  flex: none;
}

input, textarea, select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  font: inherit;
}
textarea { resize: vertical; }

.form { display: grid; gap: var(--gap); }
.form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.form label input,
.form label textarea { color: var(--ink); font-size: 1rem; }

/* A checkbox and its label read as one line, not a stacked field: lay the box
   beside its text and stop the global full-width input rule from stretching it. */
.form label.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
}
.form label.checkbox input {
  width: auto;
  flex: none;
}

.form .actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.table th, .table td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.table tr:last-child td { border-bottom: none; }

.fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  margin: 0;
}
.fields dt { color: var(--ink-muted); font-size: 0.9rem; }
.fields dd { margin: 0; }

.note { margin: 1rem 0 0; white-space: pre-wrap; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.timeline li { border-left: 2px solid var(--line); padding-left: 0.9rem; }
.timeline-meta { margin: 0; font-size: 0.85rem; }
.timeline-body { margin: 0.15rem 0 0; }

.section-actions { margin: 0 0 1rem; }

.muted { color: var(--ink-muted); }
.empty { color: var(--ink-muted); font-style: italic; }

/* Text only a screen reader needs — the name of a control whose meaning is
   carried visually, e.g. a disclosure arrow. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A destructive action. Quiet in a row of controls, solid once it is the
   confirmation itself. */
button.danger,
.button.danger {
  background: var(--danger);
  color: #ffffff;
  border-color: transparent;
}
button.secondary.danger,
.button.secondary.danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--line);
}
button.secondary.danger:hover,
.button.secondary.danger:hover { border-color: var(--danger); }

.error {
  background: #fdeceb;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  margin-bottom: var(--gap);
}

/* Permissions: a grant reads as a card of rules, each rule a short stack of
   the conditions that must hold, with its delete control alongside. */
.grant-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.grant-list > li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  background: var(--bg);
}
.grant-note { margin: 0 0 0.4rem; font-weight: 600; }
.condition-list { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.condition-list li { margin: 0.1rem 0; }
.grant-list form.inline { display: inline; }
.grant-actions { display: flex; gap: 0.5rem; align-items: center; }

/* The builder groups conditions under a heading; each condition is a checkbox
   with its parameter inputs indented beneath it. */
.form fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  display: grid;
  gap: 0.6rem;
}
.form fieldset legend { padding: 0 0.4rem; font-size: 0.9rem; color: var(--ink-muted); }
.condition-row { display: grid; gap: 0.3rem; }
.condition-row .condition-arg { margin-left: 1.6rem; }

/* An inline caution, e.g. a grant left behind by a removed feature. Unlike the
   block .error alert, this sits within a line. */
.flag-warn { color: var(--danger); font-size: 0.85rem; }

/* Organisation: the Einrichtung → Abteilung → Team tree, edited in place.
   The indentation and the hairline spine down each level are the structure
   itself, so the page needs no other decoration to be read at a glance. Weight
   falls off with depth for the same reason. */
.org-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.org-search {
  width: auto;
  flex: 1 1 12rem;
  max-width: 20rem;
}
.org-summary {
  margin: 0 auto 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.org-level {
  list-style: none;
  margin: 0;
  padding: 0;
}
.org-root {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}
/* An empty list would otherwise leave a bare box above the empty state. */
.org-root:empty { display: none; }

/* Every level below the first hangs off a spine, with a tick reaching out to
   each of its rows. */
.org-level .org-level {
  margin-left: 0.7rem;
  padding-left: 1.15rem;
  border-left: 1px solid var(--line);
}
.org-level .org-level > .org-item > .org-row::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 1.05em;
  width: 0.8rem;
  height: 1px;
  background: var(--line);
}

.org-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2.2rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius);
}
.org-row:hover { background: var(--bg); }

.org-name { color: var(--ink); }
.org-einrichtung > .org-row > .org-name { font-size: 1.05rem; font-weight: 600; }
.org-abteilung > .org-row > .org-name { font-weight: 500; }
.org-team > .org-row > .org-name { font-size: 0.95rem; }

.org-meta {
  font-size: 0.8rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* The disclosure control, and the same width as a spacer on a row that has
   nothing to disclose, so every name on a level starts at one edge. */
.org-twisty {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-muted);
  font-size: 0.85rem;
}
button.org-twisty:hover {
  background: var(--line);
  color: var(--ink);
  filter: none;
}

/* What can be done to a row. The labels stay readable — on a page visited a few
   times a year, controls that only exist on hover are controls nobody finds —
   but they carry no frame until the row is actually under the pointer or holds
   focus, so a long structure reads as names rather than as rows of buttons. */
.org-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.org-actions .button {
  padding: 0.2rem 0.6rem;
  font-size: 0.82rem;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.org-actions .button.secondary {
  background: none;
  border-color: transparent;
  color: var(--ink-muted);
}
.org-row:hover .org-actions .button.secondary,
.org-row:focus-within .org-actions .button.secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.org-actions .button.secondary.danger,
.org-row:hover .org-actions .button.secondary.danger,
.org-row:focus-within .org-actions .button.secondary.danger { color: var(--danger); }

/* Once it is the confirmation itself, the pair speaks up whether or not the
   pointer is still there. */
.org-confirm .button.secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.org-confirm-text {
  font-size: 0.85rem;
  color: var(--danger);
}

/* Renaming and adding both put an input exactly where the name sits, so
   nothing on the page moves while it is open. */
.org-edit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 14rem;
}
.org-input {
  width: auto;
  flex: 1 1 8rem;
  max-width: 22rem;
  padding: 0.25rem 0.5rem;
}
.org-edit .button,
.org-adding .button {
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
}
.org-field-error {
  margin: 0.2rem 0 0.3rem 1.9rem;
  font-size: 0.85rem;
  color: var(--danger);
}
.org-none {
  margin: 0.1rem 0 0.2rem 1.9rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-muted);
}

/* Sorted into place, a new unit seldom appears where it was typed — the tint
   fading out of its row is how the eye follows it there. */
@keyframes org-flash {
  from { background: #e8eff7; }
  to { background: transparent; }
}
.org-flash > .org-row { animation: org-flash 1.6s ease-out; }

.org mark {
  background: #fbeec2;
  color: inherit;
  border-radius: 2px;
}

/* The structure without JavaScript: readable, not editable. */
.org-plain, .org-plain ul { margin: 0.2rem 0; }

@media (prefers-reduced-motion: reduce) {
  .org-flash > .org-row { animation: none; }
  .org-actions .button { transition: none; }
}

/* The signed-out pages — login and setup — have no sidebar. The body drops to
   a single column and the card is centred near the top of the viewport. */
.auth-page {
  grid-template-columns: 1fr;
}
.auth-page main {
  display: flex;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 22rem;
  margin-top: 3rem;
}
.auth-card h1 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
}

/* Below this the sidebar would crowd the content, so it folds up into a top
   bar with the navigation laid out horizontally. */
@media (max-width: 48rem) {
  body { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 1rem 1.25rem;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }
}

@media (max-width: 40rem) {
  .page-header { flex-direction: column; align-items: stretch; }
  .fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The personnel file
   --------------------------------------------------------------------------
   One employee's whole record on one page: a profile strip, a rail of six
   sections over a scrolling body, and every field in one of ten shapes.

   It has a visual language of its own — its own typeface, its own scale, its
   own accent — because it is a dense working surface rather than another page
   of the app's forms. Everything below is scoped to .pf so that nothing here
   leaks into the pages that are.

   Both renderings use these classes: the server's read-only HTML and the
   island that replaces it. That is what makes the switch between them
   invisible — nothing moves, because nothing is styled twice.
   ========================================================================== */

/* Plus Jakarta Sans, self-hosted — see static/fonts/README.md. These are
   variable fonts: one file covers the whole weight axis, which is why the
   range is declared rather than a single weight. Declaring one weight would
   make the browser synthesise the rest and the page would look subtly wrong. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The file is wider than the app's usual reading column. Six columns of fields
   at a readable size do not fit in 60rem, and cramming them would defeat the
   point of having them all on one page. */
.content:has(.pf) { max-width: 84rem; }

.pf {
  --pf-ink: #17202e;
  --pf-ink-soft: #1a2233;
  --pf-muted: #7a8699;
  --pf-muted-strong: #5b6a80;
  --pf-label: #8592a6;

  --pf-accent: #1f6f92;
  --pf-accent-deep: #17566f;
  --pf-accent-soft: #eef6fa;
  --pf-accent-line: #d6e6ef;

  --pf-line: #eef1f6;
  --pf-line-strong: #e0e6f0;
  --pf-field-line: #cdd6e4;

  --pf-ok: #15803d;
  --pf-ok-bg: #e7f6ee;
  --pf-ok-dot: #22c55e;
  --pf-warn: #b45309;
  --pf-warn-ink: #8a5210;
  --pf-warn-bg: #fdf1e2;
  --pf-warn-line: #f0d5ab;
  --pf-danger: #b4342a;
  --pf-danger-bg: #fdf0f0;
  --pf-danger-line: #f0bcbc;
  --pf-quiet-bg: #f2f5f9;

  --pf-radius: 20px;
  --pf-radius-sm: 10px;
  --pf-radius-xs: 8px;

  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--pf-ink-soft);
}

.pf-card {
  background: #fff;
  border: 1px solid #e3e8f0;
  border-radius: var(--pf-radius);
  box-shadow: 0 14px 44px rgba(20, 40, 80, 0.11);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

/* --- The bar: where you are, and how to find a field --- */

.pf-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--pf-line);
}
.pf-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pf-muted);
  text-decoration: none;
}
.pf-back:hover { color: var(--pf-accent); }
.pf-sep { color: #c3cbd8; }
.pf-crumb { font-size: 0.8125rem; font-weight: 700; color: var(--pf-ink); }

.pf-search { position: relative; margin-left: auto; display: flex; align-items: center; }
.pf-search-icon {
  position: absolute;
  left: 12px;
  display: flex;
  color: #9aa6b8;
  pointer-events: none;
}
.pf-search input {
  width: 15rem;
  padding: 8px 12px 8px 36px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1.5px solid var(--pf-line-strong);
  border-radius: var(--pf-radius-sm);
}
.pf-hits {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 20rem;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--pf-line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 40, 80, 0.16);
}
.pf-hits button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  white-space: normal;
}
.pf-hits button:hover { background: #f2f7fa; filter: none; }
.pf-hit-label { font-size: 0.8125rem; font-weight: 700; color: var(--pf-ink); }
.pf-hit-hint { font-size: 0.6875rem; font-weight: 600; color: var(--pf-label); }
/* A guess is labelled as one rather than presented as an answer. */
.pf-hit-weak { color: var(--pf-warn); }
.pf-hits-none {
  padding: 12px 14px;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--pf-label);
}

/* --- The strip: who this is --- */

.pf-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px 28px;
  padding: 16px 28px;
  background: #f7f9fc;
  border-bottom: 1px solid var(--pf-line);
}
.pf-photo-col { flex: none; display: flex; flex-direction: column; align-items: center; }
.pf-photo,
.pf-initials {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: block;
  object-fit: cover;
}
.pf-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b7fa3, var(--pf-accent-deep));
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(31, 111, 146, 0.26);
}
/* The photo doubles as its own upload control while the file is being edited:
   the picture is the target, which is where somebody would click anyway. */
.pf-photo-drop { position: relative; display: block; cursor: pointer; }
.pf-photo-drop input[type='file'] { display: none; }
.pf-photo-pen {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e3e8f0;
  box-shadow: 0 2px 7px rgba(20, 40, 80, 0.2);
  color: var(--pf-accent);
}

.pf-identity { flex: none; width: 16rem; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.pf-name {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pf-ink);
}
.pf-position { margin: 2px 0 0; font-size: 0.78125rem; font-weight: 600; color: var(--pf-muted-strong); }

.pf-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.71875rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--pf-quiet-bg);
  color: var(--pf-muted-strong);
}
.pf-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.pf-badge.pf-tone-ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.pf-badge.pf-tone-ok::before { background: var(--pf-ok-dot); opacity: 1; }
.pf-badge.pf-tone-warn { background: var(--pf-warn-bg); color: var(--pf-warn); }

.pf-facts {
  flex: none;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-content: center;
  gap: 5px 8px;
  margin: 0;
  min-width: 18rem;
  border-left: 1px solid #e7ecf3;
  padding-left: 28px;
}
.pf-facts dt { font-size: 0.6875rem; font-weight: 500; color: var(--pf-label); }
.pf-facts dd {
  margin: 0;
  min-width: 0;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--pf-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-facts-right { grid-template-columns: max-content minmax(0, 1fr); }

/* --- The body: a rail beside a scrolling column --- */

.pf-body { display: flex; align-items: stretch; }
.pf-rail {
  flex: none;
  width: 14.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px;
  background: #fbfcfe;
  border-right: 1px solid #f0f2f6;
}
.pf-rail a,
.pf-rail-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  color: #6b7890;
  font-size: 0.84375rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: normal;
}
.pf-rail a:hover,
.pf-rail-item:hover { background: #f2f5f9; color: var(--pf-ink); filter: none; }
.pf-rail-item.pf-rail-on { background: var(--pf-accent-soft); color: var(--pf-accent); }

.pf-sections {
  flex: 1;
  min-width: 0;
  /* A window rather than the whole page: the rail has to stay beside what it
     is pointing at, and a rail that scrolls away points at nothing. */
  height: min(72vh, 48rem);
  overflow-y: auto;
  position: relative;
  /* Deliberately no scroll-behavior: smooth. The rail and the field search move
     this column by assigning scrollTop, and in a browser that does not animate
     smooth scrolling the assignment is silently dropped rather than applied
     instantly — the jump then simply never happens. A jump that lands is worth
     more than one that glides, so the motion is given up and the scroll is
     kept. */
}

.pf-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: #fff;
  border-bottom: 1px solid var(--pf-line);
}
.pf-section-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--pf-ink); }
.pf-actions { display: flex; align-items: center; gap: 8px; }
/* Only the file's actual action buttons — the ones carrying .button. Every
   other control in here is a button element too (a rail entry, an option row,
   a calendar day, a chip's remove cross), and a rule matching `.pf button`
   would be specific enough to paint all of them accent-blue over their own
   class rules. It did, once. */
.pf .button {
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--pf-accent);
  border-color: var(--pf-accent);
}
.pf .button.secondary {
  background: #fff;
  color: var(--pf-muted-strong);
  border-color: #dbe3ee;
}
.pf .button:disabled {
  background: var(--pf-line);
  border-color: #e2e8f0;
  color: #a9b3c1;
  cursor: not-allowed;
  filter: none;
}
.pf .pf-danger { color: #b91c1c; border-color: #f3d3d3; background: #fdf2f2; }

.pf-section { padding: 0 0 8px; }
.pf-section + .pf-section { border-top: 1px solid var(--pf-line); }
.pf-section-heading {
  margin: 0;
  padding: 22px 28px 2px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-accent);
}
/* Room to scroll the last section up to the top, so the rail can reach it. */
.pf-tail { height: 26rem; }

/* --- The field grid --- */

.pf-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 56px;
  padding: 6px 28px 18px;
}
.pf-field {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid #f1f3f8;
}
.pf-field-full { grid-column: 1 / -1; }
.pf-field-third { grid-column: span 2; }

/* Where the search landed. Bright enough to find at a glance, gone after a
   few seconds so it does not become part of the page. */
.pf-field-hit {
  background: #fffaf0;
  box-shadow: inset 0 0 0 2px #edc37a;
  border-radius: 12px;
  padding-left: 12px;
  padding-right: 12px;
}

.pf-label { font-size: 0.78125rem; font-weight: 500; color: var(--pf-muted); letter-spacing: 0.01em; }
.pf-label-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pf-value { font-size: 0.9375rem; font-weight: 600; color: var(--pf-ink-soft); }
.pf-prose { margin: 0; max-width: 48rem; font-size: 0.875rem; line-height: 1.65; color: #334155; }
.pf-sub {
  grid-column: 1 / -1;
  margin: 6px 0 2px;
  padding: 0 28px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pf-ink);
}
.pf-grid .pf-sub { padding: 0; }
.pf-empty { padding: 0 28px; color: var(--pf-muted); font-style: italic; }

/* --- Inputs --- */

.pf-input,
.pf-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--pf-field-line);
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pf-ink-soft);
  background: #fff;
}
.pf-textarea { min-height: 6rem; line-height: 1.65; resize: vertical; }
.pf .pf-input:focus,
.pf .pf-textarea:focus,
.pf input:focus,
.pf select:focus {
  border-color: var(--pf-accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 146, 0.14);
  outline: none;
}
.pf-input-bad { border-color: #e29a92; background: #fdf7f6; }

/* A value carried over from the previous employment relationship, not yet
   touched. Grey and italic says "this came with you"; it turns solid the
   moment somebody edits it. */
.pf-stale { color: #9aa6b8; font-style: italic; }

.pf-number { display: flex; align-items: center; gap: 9px; max-width: 15rem; }
.pf-number .pf-input { flex: 1; min-width: 0; }
.pf-unit { font-size: 0.8125rem; font-weight: 600; color: var(--pf-muted); white-space: nowrap; }

.pf-placeholder { font-size: 0.84375rem; font-weight: 500; color: #9aa6b8; }
.pf-caret { margin-left: auto; display: flex; align-self: center; color: #9aa6b8; }
.pf-icon { display: flex; flex: none; color: var(--pf-accent); }

/* --- Select --- */

.pf-select { position: relative; }
.pf-selectbox {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1.5px solid var(--pf-field-line);
  border-radius: var(--pf-radius-sm);
  background: #fff;
  color: var(--pf-ink-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  white-space: normal;
}
.pf .pf-selectbox:hover { filter: none; border-color: #b9c6d8; }

.pf-options {
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 18rem;
  overflow-y: auto;
}
.pf-options-float {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--pf-line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 40, 80, 0.18);
}
.pf-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--pf-radius-xs);
  background: transparent;
  color: var(--pf-ink-soft);
  font-size: 0.84375rem;
  font-weight: 600;
  text-align: left;
  white-space: normal;
}
.pf-option:hover { background: #f4fafc; filter: none; }
.pf-option-on { background: #f4fafc; }
.pf-option-empty { padding: 9px 10px; font-size: 0.8125rem; color: var(--pf-label); }

.pf-radio {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c9d3e0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-radio-on { border-color: var(--pf-accent); }
.pf-radio-on::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--pf-accent); }

.pf-check {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1.5px solid #c9d3e0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.pf-check-on { border-color: var(--pf-accent); background: var(--pf-accent); }

/* --- Chips --- */

.pf-chipsfield { position: relative; }
.pf-chipbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid transparent;
  border-radius: var(--pf-radius-sm);
}
.pf-chipbox-edit { border-color: var(--pf-field-line); background: #fff; cursor: pointer; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--pf-accent-line);
  background: var(--pf-accent-soft);
  color: var(--pf-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}
.pf-chip.pf-tone-warn { background: var(--pf-warn-bg); border-color: #f2ddbe; color: #a05a12; }
.pf-chip.pf-tone-danger { background: #fdf0f0; border-color: #f0c9c5; color: var(--pf-danger); }
.pf-chip-locked { opacity: 0.92; }
.pf-chip-meta { font-size: 0.75rem; font-weight: 600; color: #4a8aa6; }
.pf-chip-status { font-size: 0.71875rem; font-weight: 700; white-space: nowrap; }
.pf-status-ok { color: var(--pf-ok); }
.pf-status-warn { color: var(--pf-warn); }
.pf-status-danger { color: var(--pf-danger); }
.pf-status-none { color: var(--pf-label); }

.pf-chip-input {
  width: 3.25rem;
  padding: 2px 6px;
  border: 1px solid #cfe0ea;
  border-radius: 12px;
  background: #fff;
  color: var(--pf-accent);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.pf-chip-note { width: 8rem; text-align: left; }
.pf-chip-input-bad { border: 1.5px solid #e29a92; color: var(--pf-danger); }
.pf-chip-gdb { display: inline-flex; align-items: center; gap: 4px; }
.pf-chip-dates { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-chip-datelabel { font-size: 0.6875rem; font-weight: 600; color: var(--pf-muted); }
.pf-chip-date {
  width: auto;
  padding: 2px 7px;
  border: 1px solid #cfe0ea;
  border-radius: 12px;
  background: #fff;
  color: var(--pf-accent);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
}
.pf-chip-date:disabled { background: #f7f9fc; color: #8b96a8; }

.pf-chip-remove {
  display: inline-flex;
  padding: 0;
  border: none;
  background: transparent;
  color: #5a9bb8;
}
.pf-chip-remove:hover { color: var(--pf-accent-deep); filter: none; }
.pf-lock { display: inline-flex; color: #9aa6b8; }

.pf-picker {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 20rem;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--pf-line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 40, 80, 0.18);
}
.pf-groups {
  display: flex;
  gap: 6px;
  padding: 4px 4px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--pf-line);
}
.pf-group {
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid var(--pf-line-strong);
  border-radius: var(--pf-radius-xs);
  background: #fff;
  color: var(--pf-muted);
  font-size: 0.78125rem;
  font-weight: 700;
  white-space: normal;
}
.pf-group-on { border-color: var(--pf-accent); background: var(--pf-accent-soft); color: var(--pf-accent); }
.pf-custom {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 8px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--pf-line);
}
.pf-custom input { flex: 1; min-width: 0; padding: 8px 11px; border: 1.5px solid var(--pf-line-strong); border-radius: var(--pf-radius-xs); font-size: 0.8125rem; }

.pf-history-btn {
  position: absolute;
  top: -30px;
  right: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid #dbe3ee;
  border-radius: 20px;
  background: #fff;
  color: var(--pf-muted-strong);
  font-size: 0.71875rem;
  font-weight: 700;
}
.pf-history {
  position: absolute;
  z-index: 40;
  top: 6px;
  right: 0;
  width: 21rem;
  max-width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--pf-line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 40, 80, 0.18);
}
.pf-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--pf-ink);
}
.pf-history ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 14rem; overflow-y: auto; }
.pf-history li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px; background: #f7f9fc; }
.pf-history-label { font-size: 0.78125rem; font-weight: 700; color: var(--pf-muted-strong); }
.pf-history-meta { font-size: 0.71875rem; font-weight: 600; color: var(--pf-label); }
.pf-close { padding: 0; border: none; background: transparent; color: #9aa6b8; display: inline-flex; }
.pf-close:hover { filter: none; color: var(--pf-ink); }

/* --- The calendar --- */

.pf-datefield { position: relative; flex: 1; min-width: 9.5rem; display: flex; flex-direction: column; gap: 4px; }
.pf-datefield-sub { font-size: 0.71875rem; font-weight: 600; color: #8b96a8; }
.pf-daterange { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pf-datebox {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1.5px solid var(--pf-field-line);
  border-radius: var(--pf-radius-sm);
  background: #fff;
  color: var(--pf-ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
}
.pf .pf-datebox:hover { filter: none; border-color: #b9c6d8; }
.pf-datebox-empty { color: #9aa6b8; }

.pf-calendar {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 17rem;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--pf-line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 40, 80, 0.18);
}
.pf-calendar-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pf-calendar-head select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--pf-line-strong);
  border-radius: var(--pf-radius-xs);
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
}
.pf-calendar-head select:last-of-type { flex: none; width: 4.75rem; }
.pf-step {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--pf-line-strong);
  border-radius: var(--pf-radius-xs);
  background: #fff;
  color: var(--pf-muted-strong);
}
.pf-step:hover { filter: none; background: #f4fafc; }

.pf-weekdays,
.pf-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pf-weekdays span { text-align: center; font-size: 0.65625rem; font-weight: 700; color: #9aa6b8; }
.pf-day {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: var(--pf-radius-xs);
  background: transparent;
  color: var(--pf-ink-soft);
  font-size: 0.78125rem;
  font-weight: 600;
}
.pf-day:hover { background: #f2f7fa; filter: none; }
.pf-day-blank { pointer-events: none; }
.pf-day-today { border-color: #9ecbdf; background: var(--pf-accent-soft); }
.pf-day-picked { background: var(--pf-accent); border-color: var(--pf-accent); color: #fff; font-weight: 700; }

.pf-calendar-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--pf-line);
}
.pf-year-entry { display: flex; align-items: center; gap: 6px; font-size: 0.71875rem; font-weight: 600; color: #8b96a8; }
.pf-year-entry input { width: 3.875rem; padding: 6px 8px; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-radius-xs); font-size: 0.78125rem; font-weight: 600; }
.pf-mini { padding: 7px 12px; border: none; border-radius: var(--pf-radius-xs); background: var(--pf-accent-soft); color: var(--pf-accent); font-size: 0.75rem; font-weight: 700; }
.pf-mini-quiet { margin-left: auto; background: transparent; color: var(--pf-label); font-weight: 600; }

/* --- Locked, derived and unlockable fields --- */

.pf-locked {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1.5px dashed #dbe3ee;
  border-radius: var(--pf-radius-sm);
  background: #f7f9fc;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pf-muted-strong);
}
.pf-locked-note { margin-left: auto; font-size: 0.71875rem; font-weight: 600; color: #8b96a8; white-space: nowrap; }
.pf-unlock {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #fff;
  color: var(--pf-muted-strong);
  font-size: 0.71875rem;
  font-weight: 700;
}

.pf-warnbox {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 34rem;
  margin-top: 2px;
  padding: 11px 13px;
  border: 1px solid #f6dcb8;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-warn-bg);
}
.pf-warnbox p { margin: 0; font-size: 0.75rem; line-height: 1.5; font-weight: 600; color: var(--pf-warn-ink); }
.pf-warnbox-actions { display: flex; align-items: center; gap: 9px; }
.pf-warnbox-flat { max-width: none; margin: 0 0 18px; }

/* --- The sentences a field carries below itself --- */

.pf-fieldnote {
  display: block;
  max-width: 34rem;
  margin-top: 2px;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 600;
}
.pf-fieldnote-info { background: var(--pf-accent-soft); color: var(--pf-accent); }
.pf-fieldnote-warn { background: var(--pf-warn-bg); color: var(--pf-warn-ink); }
.pf-note { display: block; margin-top: 6px; font-size: 0.71875rem; font-weight: 600; color: var(--pf-label); }

.pf-field-warn,
.pf-field-error {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 22rem;
  font-size: 0.75rem;
  line-height: 1.45;
  font-weight: 600;
}
.pf-field-warn { color: var(--pf-warn-ink); }
.pf-field-error { color: var(--pf-danger); }
.pf-field-warn svg,
.pf-field-error svg { flex: none; margin-top: 1px; }

.pf-conflicts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 28px 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--pf-danger-line);
  border-radius: 14px;
  background: var(--pf-danger-bg);
}
.pf-conflicts-title { margin: 0; font-size: 0.78125rem; font-weight: 700; color: #8f2c22; }
.pf-conflicts ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; }
.pf-conflicts li { max-width: 44rem; font-size: 0.78125rem; line-height: 1.55; font-weight: 600; color: #a04437; }
.pf-error { margin: 16px 28px 0; font-size: 0.8125rem; font-weight: 700; color: var(--pf-danger); }

/* --- The Arbeitsverhältnisse --- */

.pf-employments { padding: 14px 28px 6px; }
.pf-employments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pf-employments .pf-sub { padding: 0; margin: 0; }
.pf-employments .pf-empty { padding: 0; }
.pf-count {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--pf-accent-soft);
  color: var(--pf-accent);
  font-size: 0.75rem;
  font-weight: 700;
}
.pf-employments .button { display: inline-flex; align-items: center; gap: 8px; }

.pf-table-scroll { overflow-x: auto; border: 1px solid #e8ecf3; border-radius: 14px; }
.pf-table { width: 100%; min-width: 52rem; border-collapse: collapse; }
.pf-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pf-label);
  white-space: nowrap;
  background: #f6f8fb;
}
.pf-table td {
  padding: 14px 16px;
  border-top: 1px solid var(--pf-line);
  font-size: 0.84375rem;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}
.pf-table .pf-cell-start { font-size: 0.84375rem; font-weight: 700; color: var(--pf-ink); }
.pf-table .pf-cell-muted { color: #64748b; }
.pf-col-right { text-align: right; }
.pf-row-running { background: #f4fafc; }
.pf-row-open { background: #fbfdff; }
.pf-row-draft { background: var(--pf-accent-soft); }
.pf-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--pf-ok-dot);
}
.pf-kind {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--pf-ok-bg);
  color: var(--pf-ok);
  font-size: 0.75rem;
  font-weight: 600;
}
.pf-kind.pf-tone-warn { background: var(--pf-warn-bg); color: var(--pf-warn); }
.pf-cell-date {
  width: auto;
  padding: 6px 9px;
  border: 1.5px solid #cfe0ea;
  border-radius: 9px;
  background: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pf-ink);
}
/* The end date the page is waiting for before a new relationship can begin. */
.pf-cell-date-wanted { border-color: #e0a44b; box-shadow: 0 0 0 3px var(--pf-warn-bg); }

.pf-row-actions { display: inline-flex; align-items: center; gap: 10px; }
.pf-until { font-size: 0.6875rem; font-weight: 600; color: var(--pf-label); }
.pf-tag {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 20px;
  background: #dceaf3;
  color: var(--pf-accent);
  font-size: 0.71875rem;
  font-weight: 700;
}
.pf-locked-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71875rem;
  font-weight: 600;
  color: #8b96a8;
}

.pf-draft {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1.5px solid var(--pf-accent-line);
  border-radius: 14px;
  background: var(--pf-accent-soft);
}
.pf-draft-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pf-radius-sm);
  background: #fff;
  color: var(--pf-accent);
}
.pf-draft-text { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: 3px; }
.pf-draft-text strong { font-size: 0.84375rem; color: var(--pf-ink); }
.pf-draft-text span { font-size: 0.75rem; line-height: 1.5; font-weight: 600; color: #4d6b7d; }
.pf-draft-error { color: var(--pf-warn) !important; font-weight: 700 !important; }
.pf-draft-actions { display: flex; align-items: center; gap: 10px; }

.pf-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 48rem;
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: var(--pf-radius-sm);
  background: #f7f9fc;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 600;
  color: #6b7890;
}
.pf-hint svg { flex: none; margin-top: 1px; color: #8b96a8; }

/* --- What sits below the file --- */

.pf-aside { max-width: 34rem; }
.pf-create { max-width: 40rem; }
.pf-create-intro { margin: 0 0 0.25rem; font-size: 0.9rem; }
.pf-create-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }

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

@media (max-width: 68rem) {
  .pf-body { flex-direction: column; }
  .pf-rail {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid #f0f2f6;
  }
  .pf-rail a,
  .pf-rail-item { width: auto; }
  /* With the rail above rather than beside it, the body has nothing to stay in
     step with, so it stops being a window and becomes the page. */
  .pf-sections { height: auto; overflow: visible; }
  .pf-tail { display: none; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .pf-field { grid-column: span 1; }
  .pf-field-full,
  .pf-field-third { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .pf-bar { flex-wrap: wrap; }
  .pf-search { margin-left: 0; width: 100%; }
  .pf-search input { width: 100%; }
  .pf-facts { border-left: none; padding-left: 0; min-width: 0; }
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-field { grid-column: 1 / -1; }
  .pf-create-row { grid-template-columns: 1fr; }
}

/* The roster reuses the file's table. Two differences: the name is a link, and
   a former colleague is dimmed rather than hidden — they are still on file. */
.pf-roster { min-width: 34rem; }
.pf-roster td { white-space: normal; }
.pf-roster .pf-cell-start a { color: var(--pf-ink); text-decoration: none; }
.pf-roster .pf-cell-start a:hover { color: var(--pf-accent); text-decoration: underline; }
.pf-row-former { color: var(--pf-muted); }
.pf-row-former .pf-cell-start a { color: var(--pf-muted-strong); }