/* Component styles. Every colour, radius, spacing step and layer comes from theme.css.
   The rules of one page sit in several blocks, so search for its class prefix: np- (the add-person form and working hours), prow (the People
   table), workplace / wp- / dp- / ov- (the Workplaces tab and its overrides), tl- and shifts- (the Shifts calendar), cal-, balance, upcoming and
   my-hours (the Overview), decide- and req- (Requests), perm- (Permissions), meter, heat and bar- (Team stats). Where two rules have the same
   weight the later one wins, which is why a block further down can refine an earlier one. */
* { box-sizing: border-box; }
body { margin: 0; font: var(--text-base)/1.5 var(--font-body); color: var(--color-text); }
[hidden] { display: none !important; }
.dev-banner { background: var(--color-notice-bg); color: var(--color-notice-text); text-align: center; font-size: var(--text-sm); padding: 0.15rem; }
.site-header { display: flex; align-items: center; padding: 0 1.2rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.site-header .brand { font-weight: 700; color: var(--color-accent); text-decoration: none; }
.site-header .seg { padding: 0; align-self: stretch; }
.site-header .brand, .site-header .seg a, .site-header .seg button, .whoami, .header-right .link-button { white-space: nowrap; } /* a longer menu squeezes the gaps, never wraps a word */
.site-header a { color: inherit; }
main { padding: 1.2rem; max-width: var(--page-max); margin: 0 auto; }
.header-right { margin-left: auto; display: flex; align-items: center; flex: none; }
.header-right form { margin: 0; }
.lang-switch { display: flex; }
.lang-switch button { font: inherit; font-size: var(--text-sm); cursor: pointer; }
.lang-switch button[aria-current="true"] { border-color: var(--color-accent); font-weight: 700; }
.link-button { font: inherit; background: none; border: 0; color: var(--color-accent); text-decoration: underline; cursor: pointer; padding: 0; }
.whoami { font-size: var(--text-md); }
.stack { display: flex; flex-direction: column; gap: var(--space-2); max-width: 24rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--color-text-muted); font-size: var(--text-md); }
.tag { margin-left: 0.4rem; padding: 0 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-surface-muted); font-weight: normal; }
.card { margin: 0 0 var(--space-4); padding: var(--space-4) 1.1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.card h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
/* ==== Shared components ============================================================================================
   Patterns that more than one page uses. A page's own rules, further down, add only what is particular to it. */

/* The down chevron that mask icons draw; the week arrows set their own. */
:root { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* A small uppercase label: section headings, column headers and filter labels. The size and the colour are set where it is used. */
.np-section-title, .two-cols h3, .detail > h3, .ov-group h4, .staff-title, .decide-day, .review-section, .sum-head > span, .filter-row .zlabel, .prow-head, .shifts-workplaces .wp-group, .filters-card > .wp-count .wp-group, .tl-head .tl-point, .tl-head .tl-wp, .card.hours h2 { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* An initials circle tinted by --tone, a workplace colour picked from the name. The size is set where it is used. */
.req-avatar, .tile-avatar, .who-list .who-avatar, .prow.summary .who > .avatar { display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--color-accent)) 20%, var(--color-surface)); color: var(--color-text-strong); font-weight: 600; }

/* A switch: a checkbox drawn as a track with a knob. The label beside it is muted until it is on. */
.shifts-toolbar .away-toggle input, .people-filters .away-toggle input, .request-whole input, #decide-dialog .fix-option input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 2rem; height: 1.15rem; margin: 0; border-radius: 999px; background: var(--color-border-strong); cursor: pointer; transition: background-color var(--transition-fast); }
.shifts-toolbar .away-toggle input::after, .people-filters .away-toggle input::after, .request-whole input::after, #decide-dialog .fix-option input::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-bar); transition: transform var(--transition-fast); }
.shifts-toolbar .away-toggle input:checked, .people-filters .away-toggle input:checked, .request-whole input:checked, #decide-dialog .fix-option input:checked { background: var(--color-accent); }
.shifts-toolbar .away-toggle input:checked::after, .people-filters .away-toggle input:checked::after, .request-whole input:checked::after, #decide-dialog .fix-option input:checked::after { transform: translateX(0.85rem); }
.shifts-toolbar .away-toggle input:focus-visible, .people-filters .away-toggle input:focus-visible, .request-whole input:focus-visible, #decide-dialog .fix-option input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.shifts-toolbar .away-toggle:has(input:checked), .request-whole:has(input:checked) { color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .shifts-toolbar .away-toggle input, .people-filters .away-toggle input, .request-whole input, #decide-dialog .fix-option input, .shifts-toolbar .away-toggle input::after, .people-filters .away-toggle input::after, .request-whole input::after, #decide-dialog .fix-option input::after { transition: none; } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 1.2rem; z-index: var(--z-toast); transform: translateX(-50%); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--color-toast); color: var(--color-on-accent); opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); }
.toast.show { opacity: 1; }
.toast.bad { background: var(--color-danger-strong); }

/* Assignments page */
main:has(.people-app, .shifts) { max-width: none; }

/* Assignments: shared pieces */
.seg { display: flex; gap: 2rem; padding: 0 var(--space-5); }
.seg button, .seg a { display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; font-weight: 500; padding: var(--space-3) 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--color-text-muted); cursor: pointer; }
.seg a { text-decoration: none; }
.seg button:hover, .seg a:hover { color: var(--color-text); }
.seg button[aria-current="page"], .seg a[aria-current="page"] { position: relative; z-index: 1; color: var(--color-accent); font-weight: 600; border-bottom-color: var(--color-accent); }
.seg button:focus-visible, .seg a:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.tab-icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.people-app input[type=search], .people-app .add input, .workplace-search { font: inherit; padding: 0.45rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); min-width: 0; }
#people-search { display: block; flex: 1 1 auto; width: 100%; margin: 0; }
.people-head { margin: 0 0 var(--space-3); padding-block: var(--space-3); }
.people-head[hidden] { display: none; }
.people-bar { display: flex; gap: var(--space-3); align-items: center; }
.people-bar #people-search, .people-bar .small { box-sizing: border-box; height: 2.5rem; }
.people-bar #people-search { flex: 1 1 auto; }
.people-filters { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding-block: var(--space-2); }
.people-filters[hidden], .filter-row[hidden] { display: none; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.filter-row .zlabel { flex: none; }
.shifts-workplaces.filter-chips { margin: 0; }
.shifts-workplaces.filter-chips a::before { display: none; }
.people-bar .small { flex: none; padding: 0.45rem var(--space-4); }
.workplace-search { display: block; width: 100%; margin: 0.6rem 0; }
.people-app .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.people-app .panel h2 { margin: 0 0 0.2rem; font-size: var(--text-lg); }
.people-app h3 { font-size: var(--text-md); margin: 0 0 var(--space-2); color: var(--color-text-strong); }
.people-app .sub { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 0.8rem; }
.people-app .empty { color: var(--color-text-muted); font-size: var(--text-md); padding: var(--space-2) 0; }
.people-app .add { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.people-app .add input { flex: 1 1 14rem; }
.people-app .add button { padding: 0.45rem var(--space-4); }
.people-app .small { font: inherit; font-size: var(--text-md); font-weight: 600; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-accent); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.people-app .small:hover:not(:disabled), .people-app .small:focus-visible { background: var(--color-accent-soft); }
.people-app .small:active:not(:disabled) { background: var(--color-accent-tint); }
.people-app .small:disabled { border-color: var(--color-border); background: var(--color-surface-muted); color: var(--color-text-faint); cursor: not-allowed; }
.field-error { margin: -0.4rem 0 0.8rem; font-size: var(--text-sm); color: var(--color-danger); }
.people-app input[aria-invalid="true"] { border-color: var(--color-danger); }

/* Information block: a short explanation with an icon on the left */
.hint { --hint-line: 1.3rem; --hint-icon: 1.05rem; display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: var(--text-sm); line-height: var(--hint-line); color: var(--color-text-muted); }
.hint[hidden] { display: none; }
.hint-icon { flex: none; display: grid; place-items: center; box-sizing: border-box; width: var(--hint-icon); height: var(--hint-icon); margin-top: calc((var(--hint-line) - var(--hint-icon)) / 2); border: 1px solid currentColor; border-radius: 50%; font: italic 600 0.7rem/1 Georgia, 'Times New Roman', serif; opacity: .8; }

/* Draggable tiles */
ul.tiles { position: relative; list-style: none; margin: 0; padding: 0.4rem; display: grid; gap: 0.35rem; min-height: 3.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); align-content: start; }
ul.tiles.over { border-style: dashed; border-color: var(--color-accent); background: var(--color-accent-soft); }
ul.tiles:empty::before { content: attr(data-empty); color: var(--color-text-faint); font-size: var(--text-sm); padding: 0.6rem 0.4rem; }
.tile { display: flex; gap: 0.6rem; align-items: center; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; }
.tile.readonly { cursor: default; touch-action: auto; }
.tile.muted-tile { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.tile:focus-visible { outline: var(--focus-ring); }
.tile.dragging { opacity: .35; pointer-events: none; }
.tile.ghost { position: fixed; z-index: var(--z-ghost); margin: 0; cursor: grabbing; box-shadow: var(--shadow-float); background: var(--color-surface); pointer-events: none; }
body.dragging-tiles, body.dragging-tiles * { cursor: grabbing !important; user-select: none; }
/* People who share a rank are one joined block with a blue bar on the left, all in the same column. */
.tile[data-tied="1"]:not(.ghost) { margin-top: -0.35rem; border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dashed; }
.tile:has(+ .tile[data-tied="1"]):not(.ghost) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tile[data-tied="1"], .tile:has(+ .tile[data-tied="1"]) { border-left: 4px solid var(--color-accent); }
.tile[data-tied="1"] .rank { opacity: .55; }
.tile .tie { --tie-color: var(--color-text-faint); flex: none; width: 1.7rem; height: 1.7rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--tie-color); font: inherit; font-weight: 700; cursor: pointer; }
.tile .tie:hover, .tile .tie:focus-visible { background: var(--color-surface); border-color: var(--color-border); color: var(--color-accent); }
.tile[data-tied="1"] .tie { --tie-color: var(--color-accent); }
.tile:first-child .tie { display: none; }
.rank-warning { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-danger); }
.tile .rank { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border-strong); font-weight: 600; font-size: var(--text-sm); }
.tile .what { flex: 1; display: flex; flex-wrap: wrap; gap: 0.1rem var(--space-2); align-items: baseline; min-width: 0; }
.tile .what a { color: inherit; font-weight: 600; text-decoration: none; }
.tile .what a:hover { text-decoration: underline; }
.tile .fn { color: var(--color-text-muted); font-size: var(--text-sm); }
/* + and x are drawn as masks, not text, so they sit exactly in the middle whatever the font does. The text stays for the JS but is hidden. */
.tile .act { --icon: none; --act-color: var(--color-text-muted); position: relative; flex: none; width: 1.7rem; height: 1.7rem; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; font-size: 0; color: var(--act-color); transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.tile .act::before { content: ""; position: absolute; inset: 0; margin: auto; width: 55%; height: 55%; background: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }
.tile .act[data-act="add"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --act-color: var(--color-success);
  --act-hover: var(--color-success-bg);
  --act-hover-border: var(--color-success-border);
  --act-press: var(--color-success-bg-strong);
  --act-press-border: var(--color-success);
}
.tile .act[data-act="remove"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --act-color: var(--color-danger);
  --act-hover: var(--color-danger-bg);
  --act-hover-border: var(--color-danger-border);
  --act-press: var(--color-danger-bg-strong);
  --act-press-border: var(--color-danger);
}
.tile .act:hover, .tile .act:focus-visible { background: var(--act-hover); border-color: var(--act-hover-border); }
.tile .act:active { background: var(--act-press); border-color: var(--act-press-border); }
/* Drag grip: a 2 x 3 grid of dots, drawn in CSS so it is always crisp */
.tile .grip { flex: none; width: 0.55rem; height: 0.95rem; color: var(--color-text-faint); background: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 0 / 0.28rem 0.32rem; cursor: grab; }
.tile:hover .grip { color: var(--color-text-muted); }
.tile.dragging .grip { cursor: grabbing; }

/* People tab: each person in their own card, with a row for what they can work in and a row for what they cannot */
.prows { display: grid; gap: var(--space-2); }
.prow { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.np-form { display: grid; margin: 0 0 var(--space-4); }
.np-form h3 { margin: 0; }
.np-fields { display: grid; }
.np-field { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.np-bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }
.np-works { flex: 1 1 20rem; }
.np-form input, .np-form select { font: inherit; padding: 0.45rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); min-width: 0; width: 100%; box-sizing: border-box; }
.dd { position: relative; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; box-sizing: border-box; font: inherit; padding: 0.45rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.dd-btn:focus-visible { outline: var(--focus-ring); }
.dd-btn[aria-expanded="true"] { border-color: var(--color-accent); }
.dd-label.placeholder { color: var(--color-text-faint); }
.dd-caret { flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.15rem; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: translateY(-25%) rotate(45deg); transition: transform var(--transition-fast); }
.dd-btn[aria-expanded="true"] .dd-caret { transform: translateY(25%) rotate(-135deg); }
.dd-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.25rem); margin: 0; padding: var(--space-1); list-style: none; max-height: 15rem; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.dd-list[hidden] { display: none; }
.dd-opt { padding: 0.4rem 0.6rem; border-radius: var(--radius-md); color: var(--color-text); cursor: pointer; }
.dd-opt.active { background: var(--color-surface-muted); }
.dd-opt[aria-selected="true"] { background: var(--color-accent-soft); font-weight: 500; }
.dd-opt[aria-selected="true"].active { background: var(--color-accent-tint); }
.np-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.np-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.np-chip:hover { background: var(--color-surface-muted); color: var(--color-text); }
.np-chip:focus-visible { outline: var(--focus-ring); }
.np-chip[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-text); }
.np-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-left: auto; }
.np-actions .quiet { border-color: var(--color-border); color: var(--color-text-muted); }
.np-actions button { padding: 0.45rem var(--space-4); }
.prow.inactive > :not(.acts) { opacity: .6; } /* a deactivated person is dimmed, but what can be done with them is not */
/* Summary rows: one grid for the whole list, so every cell lines up from row to row. Name, job, one column per distribution
   point (--points is set on .prows), then Edit. Rows are divided by thin lines inside one bordered table. */
.prows:has(.prow.summary, .prow-head) { gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.prow-head, .prow.summary { display: grid; grid-template-columns: minmax(12rem, 22rem) repeat(var(--points, 0), minmax(8rem, 1fr)) 6.5rem; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); }
.prow-head { position: sticky; top: 0; z-index: 1; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border-strong); }
.prow-head .col-point { display: grid; }
.prows .prow.summary { border: 0; border-radius: 0; border-bottom: 1px solid var(--color-border); min-height: 2.6rem; }
.prows .prow.summary:last-child { border-bottom: 0; }
.prows .prow.summary:hover { background: var(--color-surface-muted); }
.prow .chip.pick { font: inherit; font-size: var(--text-sm); line-height: inherit; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.prow .chip.pick:focus-visible { outline: var(--focus-ring); }
.prow .chip.pick.off { background: var(--color-surface); border-color: var(--color-border); border-style: dashed; color: var(--color-text-muted); }
.prow .chip.pick.off:hover { border-color: var(--color-accent); color: var(--color-text); background: var(--color-accent-soft); }
.prow .chip.pick:not(.off):hover { background: var(--color-accent-tint); }
.icon-btn.done { color: var(--color-accent); border-color: var(--color-accent-tint); background: var(--color-accent-soft); }
.prow.summary .name { font-weight: 600; color: inherit; text-decoration: none; }
/* The avatar is taller than the two text lines; it overflows the row gap instead of stretching it. */
.prow.summary .who { display: grid; gap: 0.1rem; min-width: 0; align-content: center; }
.prow.summary .job { font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.prow .cell { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; align-content: center; }
.prow .chip { font-size: var(--text-sm); padding: 0.1rem var(--space-2); border: 1px solid var(--color-accent-tint); border-radius: 999px; background: var(--color-accent-soft); white-space: nowrap; }
.prow .acts { display: flex; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--color-accent); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--color-accent-soft); border-color: var(--color-accent-tint); }
.icon-btn.prow-cancel { color: var(--color-text-muted); }
.icon-btn.prow-remove:hover, .icon-btn.prow-remove:focus-visible { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.prow.summary .prow-edit, .prow.summary .prow-remove, .prow.summary .prow-cancel { margin: 0; }

/* Workplaces tab: workplaces on the left (manage and select), the chosen workplace's people on the right */
.master-detail { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.master-detail .side h2 { margin: 0 0 0.6rem; font-size: var(--text-xl); }
.master-detail .side .add { margin: 0 0 0.8rem; flex-wrap: nowrap; }
.master-detail .side .add input { flex: 1 1 auto; }
.master-detail .side .add button { white-space: nowrap; }
.workplaces-list { display: grid; gap: 0.3rem; }
.workplaces-list button { font: inherit; text-align: left; padding: var(--space-2) 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.workplaces-list button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.workplaces-list .workplace-tiles { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.workplaces-list .workplace-tiles .tile { justify-content: flex-start; padding: var(--space-2) 0.8rem; }
.workplaces-list .workplace-tiles .tile .sname { flex: 1; }
.workplaces-list .workplace-tiles .tile[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.workplaces-list .workplace-tiles .tile[aria-pressed="true"] .rank { color: var(--color-text); }
.workplaces-list .all-workplaces { margin-bottom: var(--space-2); border-style: dashed; }
.staff-source { flex: 1 1 100%; margin: 0; }
.workplaces-list .sname { font-weight: 600; }
.workplaces-list .count { font-size: var(--text-sm); opacity: .75; }
.detail-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.8rem; padding: 0 0.2rem 0.8rem; }
.detail-head h2 { flex: 0 0 100%; margin: 0 0 0.2rem; font-size: var(--text-xl); line-height: 1.2; }
.detail-head .sub { margin: 0; }
.detail-head .dot { margin: 0 -0.3rem; }
.hint-card, .detail .hint { padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.hint-card { margin: 0 0 var(--space-4); }
.detail .hint { margin: 0 0 1rem; }
.master-detail .side .hint { margin-bottom: 0.8rem; }
.quiet-danger { font: inherit; font-size: var(--text-md); padding: 0.15rem var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--color-danger); cursor: pointer; }
.quiet-danger:hover, .quiet-danger:focus-visible { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
/* Both columns share the same rows (heading, search, list), so the search boxes line up */
.two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 var(--space-4); align-items: start; }
.two-cols > .panel { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.two-cols h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }

/* Confirmation dialog */
dialog.confirm { width: min(30rem, calc(100vw - 2rem)); border: 0; border-top: 5px solid var(--color-danger); border-radius: var(--radius-xl); box-shadow: var(--shadow-dialog); }
dialog.confirm::backdrop { background: var(--color-scrim); }
dialog.confirm h2 { margin: 0 0 var(--space-4); font-size: 1.25rem; }
dialog.confirm p { margin: 0; }
dialog.confirm .lead { font-weight: 600; margin-bottom: var(--space-2); }
dialog.confirm .facts { list-style: none; margin: 0 0 var(--space-4); padding: 0.7rem 0.9rem; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: grid; gap: 0.35rem; }
dialog.confirm .facts b { display: inline-block; min-width: 1.6rem; font-size: var(--text-lg); }
dialog.confirm .warn { color: var(--color-danger-strong); margin-bottom: 1.1rem; line-height: 1.45; }
dialog.confirm label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
dialog.confirm input { width: 100%; font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); }
dialog.confirm input::placeholder { color: var(--color-text-faint); }
dialog.confirm input:focus { outline-offset: 1px; }
dialog.confirm .actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.3rem; }
dialog.confirm .small, dialog.confirm .danger { font: inherit; padding: var(--space-2) 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; }
dialog.confirm .danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); font-weight: 600; }
dialog.confirm .danger:disabled { opacity: .4; cursor: not-allowed; }

/* Narrow screens. The 55rem here is --breakpoint-narrow in theme.css. */
@media (max-width: 55rem) {
  .prow, .master-detail { grid-template-columns: minmax(0, 1fr); }
  .prow-head { display: none; }
  .prow.summary { grid-template-columns: minmax(0, 1fr) auto; }
  .two-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-4); }
  .two-cols > .panel { grid-row: auto; grid-template-rows: none; }
}

/* Minimum and optimal headcount: one compact row */
.people-app .panel.staffing { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.staff-title { flex: none; color: var(--color-text-strong); font-size: var(--text-md); }
.staff-field { flex: 1 1 14rem; display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.staff-field label { font-weight: 600; color: var(--color-text-strong); font-size: var(--text-md); }
.staff-field .sub { margin: 0; }
.stepper { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface); }
.stepper:focus-within { outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.stepper input[type=number] { appearance: textfield; -moz-appearance: textfield; width: 3.2rem; height: auto; margin: 0; padding: 0.25rem 0.2rem; border: 0; border-left: 1px solid var(--color-border-input); border-right: 1px solid var(--color-border-input); border-radius: 0; outline: 0; box-shadow: none; background: transparent; text-align: center; font: inherit; font-weight: 600; color: var(--color-text-strong); }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .step { font: inherit; font-size: var(--text-lg); font-weight: 600; line-height: 1; width: 2rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--color-accent); cursor: pointer; }
.stepper .step:hover:not(:disabled), .stepper .step:focus-visible { background: var(--color-accent-soft); outline: 0; }
.stepper .step:disabled { color: var(--color-text-faint); background: var(--color-surface-muted); cursor: not-allowed; }

/* Shifts: Monday-to-Friday week calendar. 30 minutes = --slot-h. */
.shifts { --slot-h: 1.75rem; --axis-w: 3.5rem; --gutter: 2.4rem; }
.shifts-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.shifts-toolbar h1 { font-size: var(--text-lg); margin: 0 0 0 var(--space-2); }
.shifts-toolbar button { font: inherit; font-size: var(--text-md); font-weight: 600; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-accent); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.shifts-toolbar button:hover:not(:disabled), .shifts-toolbar button:focus-visible { background: var(--color-accent-soft); }
.shifts-toolbar button:active:not(:disabled) { background: var(--color-accent-tint); }
.shifts-toolbar .icon-btn { display: inline-flex; align-items: center; padding: var(--space-1); }
.shifts-toolbar .icon-btn .tab-icon { margin: 0; }
.gen-group { margin: 0 0 var(--space-2); justify-content: flex-end; display: flex; align-items: center; gap: var(--space-2); }
@keyframes gen-spin { to { transform: rotate(360deg); } }
.shifts-toolbar button:disabled { opacity: .6; cursor: progress; }
.shifts-scroll { height: calc(18 * var(--slot-h) + 2.6rem); overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.shifts-grid { display: grid; grid-template-columns: var(--axis-w) repeat(5, minmax(0, 1fr)); }
.shifts-head { top: 0; z-index: 3; height: 2.6rem; place-items: center; font-weight: 600; background: var(--color-surface); border-bottom: 1px solid var(--color-border); border-left: 2px solid var(--color-border); }
.shifts-head.corner { border-left: 0; }
.shifts-head.today { color: var(--color-accent); }
.shifts-axis, .shifts-col { position: relative; height: calc(48 * var(--slot-h)); }
.shifts-axis span { position: absolute; right: 0.4rem; transform: translateY(-50%); font-size: var(--text-xs); color: var(--color-text-muted); }
.shifts-col { border-left: 2px solid var(--color-border); touch-action: none; user-select: none; cursor: crosshair;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(2 * var(--slot-h) - 1px), var(--color-border) calc(2 * var(--slot-h) - 1px) calc(2 * var(--slot-h))); }
.shifts-block { position: absolute; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; padding: 2px 1.3rem 2px 6px; border-radius: var(--radius-md); border: 1px solid var(--color-accent); background: var(--color-accent-soft); color: var(--color-text-strong); font-size: var(--text-sm); cursor: grab; }
.shifts-block .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shifts-block.selected { z-index: 2; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-lift); }
.shifts-block.active { cursor: grabbing; opacity: .9; }
.shifts-block:focus-visible { outline: var(--focus-ring); }
.shifts-block .edge { position: absolute; left: 0; right: 0; height: 0.45rem; cursor: ns-resize; }
.shifts-block .edge.top { top: 0; }
.shifts-block .edge.bottom { bottom: 0; }
/* Workplace filter chips: several can be on. Every chip has the same box in both states (border, weight and check slot never change), so nothing shifts when you toggle one.
   The dot is the workplace's calendar colour; "on" shows as an accent border, a pale accent fill and a check. */
.shifts-workplaces { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.shifts-workplaces a { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; padding: var(--space-1) var(--space-3); border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 400; text-decoration: none; cursor: pointer; user-select: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.shifts-workplaces a:hover { background: var(--color-surface-muted); color: var(--color-text); }
.shifts-workplaces a:focus-visible { outline: var(--focus-ring); }
.shifts-workplaces a::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sec, var(--color-border-strong)); opacity: .5; transition: opacity var(--transition-fast); }
.shifts-workplaces a[data-all], .shifts-workplaces a[data-all-points] { margin-right: var(--space-2); }
.shifts-workplaces a[data-all]::before { background: conic-gradient(var(--workplace-0), var(--workplace-1), var(--workplace-2), var(--workplace-3), var(--workplace-4), var(--workplace-0)); }
.shifts-workplaces a[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent-tint); color: var(--color-text); font-weight: 500; }
.shifts-workplaces a[aria-pressed="true"]:hover { background: var(--color-accent-tint); }
.shifts-workplaces a[aria-pressed="true"]::before { opacity: 1; }
.shifts-toolbar .toolbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); white-space: nowrap; }
.shifts-toolbar .legend { display: flex; align-items: center; margin: 0; font-size: inherit; } /* undo the general .legend rule */
.shifts-toolbar .swatch { flex: none; }
.shifts-toolbar .legend-item, .shifts-toolbar .away-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
.shifts-toolbar .away-toggle { cursor: pointer; }
.swatch { border: 1px solid; }
.swatch.red, .shifts-band.red { background: var(--color-short-min-bg); border-color: var(--color-short-min); }
.swatch.yellow, .shifts-band.yellow { background: var(--color-short-optimal-bg); border-color: var(--color-short-optimal); }
.shifts-band { position: absolute; left: 3px; right: 3px; z-index: 0; box-sizing: border-box; border: 1px solid; border-radius: var(--radius-md); pointer-events: none; }
.shifts-band span { position: absolute; top: 0; bottom: 0; right: 0; width: var(--gutter); box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: var(--text-sm); font-weight: 600; border-left: 1px solid; }
.shifts-band.red span { color: var(--color-short-min-text); background: color-mix(in srgb, var(--color-short-min) 28%, transparent); border-color: var(--color-short-min); }
.shifts-band.yellow span { color: var(--color-short-optimal-text); background: color-mix(in srgb, var(--color-short-optimal) 35%, transparent); border-color: var(--color-short-optimal); }
.shifts-block.ghost { left: 6px; width: calc(100% - 6px - var(--gutter)); border-style: dashed; background: var(--color-accent-soft); opacity: .8; pointer-events: none; }
.shifts-dialog { width: min(26rem, 92vw); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: inherit; }
.shifts-dialog::backdrop { background: var(--color-scrim); }
.shifts-dialog h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.shifts-dialog .when { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.shifts-dialog .times { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.shifts-dialog .times label { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.shifts-dialog select { font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.shifts-dialog .error { margin: 0 0 var(--space-2); color: var(--color-danger); font-size: var(--text-sm); }
.shifts-dialog h3 { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.who-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-1); max-height: 14rem; overflow-y: auto; }
.who-list label { display: flex; align-items: center; padding: 0.35rem var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.who-list label:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.who-list .fn, .who-list .why { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); }
.who-list .off label { opacity: .5; cursor: not-allowed; }
.shifts-dialog .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.shifts-dialog .actions button { font: inherit; padding: 0.45rem var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.shifts-dialog .actions button.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); font-weight: 600; }
.shifts-dialog .actions button:disabled { opacity: .5; cursor: not-allowed; }
.shifts-block .del { position: absolute; top: 1px; right: 2px; z-index: 1; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: var(--text-md); line-height: 1; cursor: pointer; opacity: .7; }
.shifts-block .del:hover, .shifts-block .del:focus-visible { opacity: 1; background: var(--color-danger-bg-strong); color: var(--color-danger-strong); }
.shifts-block .lockbtn { position: absolute; top: 1px; right: 1.65rem; z-index: 1; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: 0; }
.shifts-block .lockbtn svg { width: .8rem; height: .8rem; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shifts-block:hover .lockbtn, .shifts-block.selected .lockbtn, .shifts-block .lockbtn:focus-visible { opacity: .7; }
.shifts-block .lockbtn:hover, .shifts-block .lockbtn:focus-visible { opacity: 1; background: var(--color-surface); }
.shifts-block.locked .lockbtn { opacity: 1; right: 2px; }
.shifts-block.locked { cursor: default; }
.shifts-block.locked .edge, .shifts-block.locked .del { display: none; }
.tl .shifts-block .lockbtn { top: 50%; transform: translateY(-50%); }
.shifts:not([data-edit="1"]) .shifts-block:not(.locked) .lockbtn { display: none; }
.shifts:not([data-edit="1"]) .shifts-block.locked .lockbtn { pointer-events: none; }
.shifts-head { position: sticky; display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.shifts-head.corner { display: block; }
.shifts-head .eye { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.shifts-head .eye:hover, .shifts-head .eye:focus-visible { background: var(--color-surface-muted); color: var(--color-text); }
.eye-icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shifts-col.collapsed { cursor: default; background: repeating-linear-gradient(135deg, var(--color-surface-sunken) 0 6px, transparent 6px 12px); }

.info-dialog { width: min(40rem, 92vw); max-height: 85vh; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: inherit; }
.info-dialog[open] { display: flex; flex-direction: column; gap: var(--space-3); }
.info-dialog::backdrop { background: var(--color-scrim); }
.info-body { overflow-y: auto; line-height: 1.5; }
.info-body h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.info-body h3 { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-md); }
.info-body h2.part { margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.info-body p { margin: 0 0 var(--space-2); }
.info-body ul, .info-body ol { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.info-section { margin-top: var(--space-3); border-top: 1px solid var(--color-border); }
.info-section > summary { padding: var(--space-3) var(--space-1); font-weight: 600; font-size: var(--text-md); line-height: 1.4; cursor: pointer; border-radius: var(--radius-sm); }
.info-section > summary:hover { background: var(--color-surface-muted); }
.info-section > summary:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.info-section-body { padding: 0 var(--space-1) var(--space-2); }
@media (max-width: 480px) { .info-section { margin-top: 0; } }
.info-section-body > h3:first-child { margin-top: 0; }
.info-body li + li { margin-top: var(--space-2); }
.info-dialog .actions { display: flex; justify-content: flex-end; }
.info-dialog .actions button { font: inherit; padding: 0.45rem var(--space-4); border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; cursor: pointer; }
.shifts-block .sec { display: none; font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.shifts.multi .shifts-block .sec { display: block; }
.shifts-dialog .where { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: 600; }
.shifts-dialog .where[hidden] { display: none; }
.shifts-toolbar .nav-group { display: inline-flex; }
.shifts-toolbar .nav-group .icon-btn { padding: var(--space-1) var(--space-2); }
.shifts-toolbar .nav-group .icon-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.shifts-toolbar .nav-group .icon-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-left: -1px; }
#shifts-title { font-weight: 700; }
.shifts-col.today { background-color: var(--color-today); }
.shifts-col.past { background-color: var(--color-past); }
.shifts-head.past { background: var(--color-past); color: var(--color-text-muted); }
.shifts-col.closed { cursor: default; background: var(--color-surface-sunken); }
.shifts:not([data-edit="1"]) .shifts-col { cursor: default; }
.shifts:not([data-edit="1"]) .shifts-block .del { display: none; }
.shifts-block:not(.selected):not(.ghost) { border-color: var(--sec, var(--color-accent)); background: var(--sec-soft, var(--color-accent-soft)); } /* --sec and --sec-soft are set per workplace by shifts.js */

/* Overwrites on the Workplaces tab: an icon in the staffing box, this week's and next week's overwrites as text under it,
   and a side sheet with the week calendar that slides over the page from the right. */
.ov-toggle { width: auto; height: auto; display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.ov-toggle .tab-icon, .ov-sheet .icon-btn .tab-icon { margin: 0; }
.ov-toggle:hover, .ov-toggle:focus-visible { background: var(--color-accent-soft); }
.ov-toggle[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.ov-summary { flex: 0 0 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3) var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.ov-group { display: grid; grid-template-columns: max-content max-content max-content 1.1rem 1.1rem 1.3rem; column-gap: var(--space-4); row-gap: var(--space-2); justify-content: start; align-items: center; align-content: start; } /* one grid per week, so the loops and crosses line up across both lists */
.ov-group > h4, .ov-group > .ov-none { grid-column: 1 / -1; }
.ov-group h4 { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: 700; color: var(--color-text-strong); }
.ov-time-col { font-variant-numeric: tabular-nums; }
.ov-day-col { font-weight: 600; color: var(--color-text-strong); }
.ov-none { margin: 0; color: var(--color-text-faint); }
/* One row per overwrite in columns, so the arrows, loops and crosses line up: text, arrow (empty unless poor quality), loop (empty when it does not repeat), cross. */
.ov-list { display: contents; margin: 0; padding: 0; list-style: none; color: var(--color-text-muted); }
.ov-list li { display: contents; }
.ov-loop { text-align: center; }
.ov-same { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-danger); }
.ov-del { display: block; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: color-mix(in srgb, var(--color-danger) 55%, transparent); font: inherit; line-height: 1; cursor: pointer; }
.ov-del:hover, .ov-del:focus-visible { background: var(--color-danger-bg-strong); color: var(--color-danger-strong); }
.ov-sheet { --slot-h: 1.75rem; --axis-w: 3rem; --gutter: 0rem; position: fixed; inset: 0; margin: auto; width: min(58rem, calc(100vw - 2rem)); height: fit-content; max-height: calc(100vh - 2rem); box-sizing: border-box; padding: var(--space-5); border: 0; border-radius: var(--radius-xl); background: var(--color-surface); color: inherit; box-shadow: var(--shadow-dialog); flex-direction: column; gap: var(--space-3); overflow: auto; }
.ov-sheet[open] { display: flex; animation: ov-in .18s ease-out; }
.ov-sheet::backdrop { background: var(--color-scrim); }
@keyframes ov-in { from { opacity: 0; transform: translateY(0.75rem) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ov-sheet[open] { animation: none; } }
.ov-hint { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-text-strong); font-size: var(--text-sm); }
.ov-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.ov-bar .shifts-toolbar { margin: 0; }
.ov-sheet .shifts-scroll { flex: 0 1 auto; height: auto; min-height: 0; }
/* Calendar dimensions and hour-line offset follow the backend opening hours. */
.ov-sheet .shifts-axis, .ov-sheet .shifts-col { height: calc(var(--calendar-slots) * var(--slot-h)); }
.ov-sheet .shifts-col { background-position: 0 calc(var(--calendar-offset) * var(--slot-h)); }
.ov-sheet .shifts-toolbar { margin: 0; }
.ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.ov-head h3 { margin: 0; font-size: var(--text-lg); }
.ov-defaults { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ov-sheet .icon-btn { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--text-lg); line-height: 1; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.ov-sheet .icon-btn:hover, .ov-sheet .icon-btn:focus-visible { background: var(--color-accent-soft); }
.ov-week { margin: 0 0 0 var(--space-2); font-size: var(--text-md); }
.ov-sheet .shifts-head { font-size: var(--text-sm); }
.ov-block { left: 4px; right: 4px; width: auto; cursor: pointer; }
.shifts-block.ov-block.ghost { left: 4px; right: 4px; width: auto; }
.ov-heads label { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.shifts-dialog .actions .quiet-danger { margin-right: auto; }
.ov-repeat { margin: 0 0 var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.ov-repeat-switch { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-md); cursor: pointer; }
.ov-repeat-body { margin-top: var(--space-2); }
.ov-repeat-body h3 { margin: var(--space-2) 0 var(--space-1); }
.ov-days { display: flex; gap: var(--space-1); }
.ov-day { flex: 1 1 0; font: inherit; font-size: var(--text-sm); font-weight: 600; padding: var(--space-1) 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; }
.ov-day:hover, .ov-day:focus-visible { background: var(--color-accent-soft); }
.ov-day[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.ov-ends { display: flex; flex-direction: column; gap: var(--space-2); }
.ov-end { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); min-height: 2rem; }
.ov-end input[type=date] { font: inherit; padding: 0.25rem 0.4rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); }
.ov-end input:disabled { opacity: .5; }
.ov-delete-actions { flex-wrap: wrap; }
.shifts-dialog .actions button.danger { border-color: var(--color-danger-border); color: var(--color-danger); }
.shifts-dialog .actions button.danger:hover, .shifts-dialog .actions button.danger:focus-visible { background: var(--color-danger-bg); }
.ov-block { padding: 0; background: var(--color-surface); border: 2px solid var(--color-accent); z-index: 1; }
/* A repeating overwrite carries a small loop in the corner. */
.ov-block.series::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 1rem; height: 1rem; border-bottom-right-radius: var(--radius-md); background: var(--color-accent) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2012a8%208%200%201%201-2.6-5.9M20%204v4.5h-4.5'/%3E%3C/svg%3E") center / 80% no-repeat; pointer-events: none; }
.ov-default { position: absolute; left: 0; right: 0; z-index: 0; box-sizing: border-box; display: flex; padding: 0; pointer-events: none; }
.ov-default .ov-bands { position: relative; gap: 0; }
.ov-default .ov-band { font-size: var(--text-sm); }
.ov-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ov-legend .swatch { margin-left: var(--space-2); }
.ov-key { display: inline-block; min-width: 1.1rem; text-align: center; padding: 0 2px; border: 2px solid var(--color-accent); border-radius: var(--radius-md); color: var(--color-text-strong); }
.ov-bands { flex: 1 1 0; min-height: 0; display: flex; gap: 1px; }
.ov-band { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: var(--text-md); font-weight: 700; border: 0; border-radius: 0; }
.ov-band.red { background: var(--color-short-min-bg); border-color: var(--color-short-min); color: var(--color-short-min-text); }
.ov-band.yellow { background: var(--color-short-optimal-bg); border-color: var(--color-short-optimal); color: var(--color-short-optimal-text); }
.ov-block.ghost .ov-bands { display: none; }
.ov-block .del { z-index: 2; top: 1px; right: 1px; width: 1rem; height: 1rem; background: var(--color-surface); color: color-mix(in srgb, var(--color-danger) 55%, transparent); opacity: .85; } /* a faint red ring at rest (drawn by the icon), so the cross reads as a button */

/* Shifts timeline: the week as day groups, a row per workplace, time running left to right. */
#shifts .shifts-scroll { height: auto; max-height: 72vh; overflow-x: hidden; overflow-y: scroll; isolation: isolate; /* the calendar's own layers (header 8, names 7, shifts 6) stay inside its box, below the Understaffed list */ } /* the scrollbar space is always reserved, so the width the hours are fitted to never changes */
.tl { min-width: max-content; }
.tl-head { position: sticky; top: 0; z-index: 8; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.tl-row { display: flex; }
.tl-name { position: sticky; left: 0; z-index: 7; flex: none; box-sizing: border-box; width: var(--tl-name-w); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); background: var(--color-surface); border-right: 2px solid var(--color-border); border-top: 1px solid var(--color-border); font-weight: 600; font-size: var(--text-sm); }
.tl-name:not(:empty)::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sec, transparent); }
.tl-name.split { width: var(--tl-name-split-w); gap: 0; padding: 0; }
.tl-name.split::before { content: none; }
.tl-point, .tl-wp { box-sizing: border-box; min-width: 0; padding: 0 var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-point { flex: 0 0 55%; font-weight: 400; color: var(--color-text-muted); border-right: 1px solid var(--color-border); align-self: stretch; display: flex; align-items: center; }
.tl-wp { flex: 1; display: flex; align-items: center; gap: var(--space-2); white-space: normal; overflow-wrap: anywhere; line-height: 1.2; padding-block: var(--space-1); } /* a long name wraps and the row grows, instead of being cut */
.tl-wp:not(:empty)::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sec, transparent); }
.tl-head .tl-name { border-top: 0; }
.tl-head .tl-wp::before { content: none; }
.tl-day { position: sticky; left: 0; z-index: 3; box-sizing: border-box; width: fit-content; min-width: 100%; padding: var(--space-1) var(--space-2); }
.tl-day > span { position: sticky; left: var(--space-2); }
.tl-day .why { margin-left: var(--space-2); font-weight: 400; font-size: var(--text-sm); color: var(--color-text-muted); }
.tl-day.today { color: var(--color-accent); }
.tl-day.past { color: var(--color-text-muted); }
.tl-row.past .tl-track { background-color: var(--color-past); }
.tl-row.past .tl-name { background: var(--color-past); }
.tl-day.closed { color: var(--color-text-muted); font-weight: 400; }
.tl-track { position: relative; flex: none; border-top: 1px solid var(--color-border); cursor: crosshair; touch-action: none; user-select: none;
  background: repeating-linear-gradient(to right, transparent 0 calc(var(--pph) - 1px), var(--color-border) calc(var(--pph) - 1px) var(--pph)); }
.tl-axis { height: 1.8rem; border-top: 0; cursor: default; background: none; }
.tl-axis span { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 0.3rem; font-size: var(--text-xs); color: var(--color-text-muted); }
.tl .shifts-band { top: 0; bottom: 0; border-radius: 0; border-width: 0 1px; color: var(--color-short-min-text); font-size: var(--text-xs); font-weight: 600; padding: 0 var(--space-1); line-height: 1.15rem; white-space: nowrap; overflow: hidden; }
.tl .shifts-band.yellow { color: var(--color-short-optimal-text); }
.tl .shifts-block { height: 1.6rem; flex-direction: row; align-items: center; gap: var(--space-2); padding: 0 1.6rem 0 8px; white-space: nowrap; }
.tl .shifts-block .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tl .shifts-block .time { flex: none; font-size: var(--text-xs); opacity: .85; }
.tl .shifts-block .edge { top: 0; bottom: 0; width: 0.45rem; height: auto; cursor: ew-resize; }
.tl .shifts-block .edge.top { left: 0; right: auto; }
.tl .shifts-block .edge.bottom { right: 0; left: auto; }
.tl .shifts-block .del { top: 50%; transform: translateY(-50%); right: 4px; }
.tl .shifts-block.ghost { width: auto; }
/* Room for both icons (padlock and cross) on a block that can be edited; a locked one only shows its padlock. */
.shifts[data-edit="1"] .tl .shifts-block:not(.locked):not(.narrow):not(.ghost) { padding-right: 3.2rem; }
/* A narrow block (a short shift) has no room for the cross, the padlock and the time: only the name stays, and a locked one keeps a
   small padlock mark. Hovered, focused or selected it grows to its full content and sits on top of its neighbours. */
.tl .shifts-block.narrow { padding: 0 3px; gap: 0; }
.tl .shifts-block.narrow .time, .tl .shifts-block.narrow .del, .tl .shifts-block.narrow .lockbtn { display: none; }
.tl .shifts-block.narrow.locked .lockbtn { display: grid; right: 1px; top: 1px; transform: none; width: .7rem; height: .7rem; pointer-events: none; }
.tl .shifts-block.narrow.locked .lockbtn svg { width: .6rem; height: .6rem; }
.tl .shifts-block.narrow:not(.active):is(:hover, :focus-within, .selected) { width: max-content !important; overflow: visible; z-index: 6; padding: 0 1.3rem 0 8px; gap: var(--space-2);
  background: linear-gradient(var(--sec-soft, var(--color-accent-soft)), var(--sec-soft, var(--color-accent-soft))), var(--color-surface); box-shadow: 0 1px 4px var(--color-scrim); }
.shifts[data-edit="1"] .tl .shifts-block.narrow:not(.locked):not(.active):is(:hover, :focus-within, .selected) { padding-right: 2.6rem; }
.tl .shifts-block.narrow:not(.active):is(:hover, :focus-within, .selected) .time { display: block; }
.tl .shifts-block.narrow:not(.active):is(:hover, :focus-within, .selected):not(.locked) .del { display: grid; }
.tl .shifts-block.narrow:not(.active):is(:hover, :focus-within, .selected):not(.locked) .lockbtn { display: grid; top: 50%; transform: translateY(-50%); right: 1.35rem; width: 1.1rem; height: 1.1rem; pointer-events: auto; }
.tl .shifts-block.narrow.locked:not(.active):is(:hover, :focus-within, .selected) .lockbtn { display: grid; top: 50%; transform: translateY(-50%); right: 2px; width: 1.1rem; height: 1.1rem; pointer-events: auto; }
.tl .shifts-block.narrow.locked:not(.active):is(:hover, :focus-within, .selected) .lockbtn svg { width: .8rem; height: .8rem; }
.shifts:not([data-edit="1"]) .tl .shifts-block.narrow:not(.locked) .lockbtn, .shifts:not([data-edit="1"]) .tl .shifts-block.narrow .del { display: none !important; }
.shifts:not([data-edit="1"]) .tl .shifts-block.narrow.locked .lockbtn { pointer-events: none !important; }

.shifts:not([data-edit="1"]) .tl-track { cursor: default; }
.shifts-daychips a::before { display: none; }
.shifts-workplaces a[aria-disabled="true"] { color: var(--color-text-faint); background: var(--color-surface-muted); border-color: var(--color-border); cursor: not-allowed; opacity: .6; }
.shifts-daychips a.today { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); color: var(--color-accent); } /* drawn inside the chip, so neighbours and the toolbar cannot clip it */
.shifts-toolbar .shifts-daychips { margin: 0 0 0 var(--space-3); }
.gen-view { display: inline-flex; min-height: 2.8rem; box-sizing: border-box; align-items: center; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); gap: var(--space-3); flex-wrap: nowrap; }
/* The workplaces and the generate view share one line, both as white rounded bars. The workplaces take the free space and wrap their chips onto more lines; generate keeps its size. */
/* Generate sits on the right; the point chips, workplace chips and person search share one card, with a line between them */
.shifts-top { display: flex; flex-wrap: wrap; gap: var(--space-3); flex-direction: column; align-items: stretch; margin-bottom: var(--space-2); }
.shifts-top .shifts-left { flex: 1 1 0; min-width: 16rem; display: flex; flex-direction: column; gap: var(--space-2); }
.workplaces-view { flex: none; margin: 0; padding: var(--space-1) var(--space-3); box-sizing: border-box; align-content: center; min-height: 2.8rem; }
.shifts-workplaces.people-filter { margin-bottom: var(--space-3); } /* its own full-width line under the workplaces and generate bars */
.people-filter a::before { display: none; }
.people-filter .pf-chips { display: contents; }
.people-filter a[data-person]::after { content: "×"; margin-left: var(--space-1); font-size: 1.1em; line-height: 1; opacity: .6; }
.people-filter a[data-person]:hover::after { opacity: 1; }
.shifts-top .gen-group { flex: none; margin: 0; align-items: center; align-self: flex-end; }
.workplaces-view, .gen-view { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1.4rem; box-shadow: var(--shadow-bar); }
/* The days to generate are tick-boxes, not the pills of the filters below them: an empty box when left out, a ticked one when chosen. */
.gen-view .gen-days a { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font-weight: 500; }
.gen-view .gen-days a::before { content: ""; display: block; flex: none; box-sizing: border-box; width: 1rem; height: 1rem; border: 1.5px solid var(--color-border-strong); border-radius: 4px; background: var(--color-surface); opacity: 1; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.gen-view .gen-days a::after { content: ""; position: absolute; left: calc(var(--space-2) + .5rem); top: 50%; width: .7rem; height: .7rem; transform: translate(-50%, -50%); background: var(--color-on-accent); mask: var(--tick) center / contain no-repeat; -webkit-mask: var(--tick) center / contain no-repeat; opacity: 0; --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gen-view .gen-days a:hover:not([aria-disabled="true"]) { background: var(--color-surface-muted); border-color: var(--color-accent); }
.gen-view .gen-days a[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent-tint); color: var(--color-text); }
.gen-view .gen-days a[aria-pressed="true"]::before { background: var(--color-accent); border-color: var(--color-accent); }
.gen-view .gen-days a[aria-pressed="true"]::after { opacity: 1; }
.gen-view .gen-days a.today { box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.gen-view .gen-days a[aria-disabled="true"] { background: var(--color-surface-muted); border-color: var(--color-border); color: var(--color-text-faint); cursor: not-allowed; }
.gen-view .gen-days a[aria-disabled="true"]::before { background: transparent; border-color: var(--color-border); }
.gen-view .gen-days { margin: 0; flex-wrap: nowrap; gap: var(--space-1); }
.shifts-daychips a[data-all] { margin-right: var(--space-2); }

/* Generate: the differences a new plan would make, in groups */
.gen-changes { margin: 0 0 1rem; max-height: 50vh; overflow: auto; }
.gen-changes h3 { margin: .75rem 0 .25rem; font-size: .95rem; }
.gen-changes h3:first-child { margin-top: 0; }
.gen-changes .gen-warnings { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.gen-changes .gen-warnings li { color: var(--color-danger); }

/* People filter: a search box with a list of matching names */
.pf-search { position: relative; }
.pf-search .pf-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; fill: none; stroke: var(--color-text-muted); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.pf-search input { box-sizing: border-box; width: 15rem; font: inherit; font-size: var(--text-sm); padding: var(--space-1) var(--space-3) var(--space-1) 2.2rem; border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); }
.pf-search input::placeholder { color: var(--color-text-muted); }
.pf-search input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent; }
.pf-list { position: absolute; z-index: 30; top: calc(100% + var(--space-2)); left: 0; width: 22rem; max-width: 80vw; max-height: 16rem; overflow-y: auto; margin: 0; padding: var(--space-2); list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); }
.pf-list[hidden] { display: none; }
.pf-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--text-sm); cursor: pointer; }
.pf-list li.active, .pf-list li:hover { background: var(--color-accent-soft); }
.pf-list li strong { color: var(--color-accent); font-weight: 700; }
.pf-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; }
.pf-list li.active .pf-avatar, .pf-list li:hover .pf-avatar { background: var(--color-surface); }
.pf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-job { flex: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.pf-list li.none { justify-content: center; padding: var(--space-3); color: var(--color-text-muted); cursor: default; }
.pf-list li.none:hover { background: none; }

/* A bad slot is an overwrite with diagonal stripes over its numbers. A block of the default shown on a workplace's calendar is faded and untouchable. */
.ov-block.bad .ov-band, .ov-block.bad:not(:has(.ov-bands)) { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--color-bad-stripe) 70%, transparent) 6px 12px); } /* on the bands themselves, so the numbers stay on top of the stripes */
.ov-block.bad:not(.selected):not(.ghost) { border-color: var(--color-bad); }
.ov-block.ov-inherited { border-style: dashed; border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-surface)); pointer-events: none; z-index: 0; }
.ov-block.ov-inherited > * { opacity: .55; } /* the block itself stays opaque: fading it would let the highlight of today show through */
.swatch.bad { background: repeating-linear-gradient(135deg, var(--color-bad-bg) 0 6px, var(--color-bad-stripe) 6px 12px); border-color: var(--color-bad); }
.ov-loop .tab-icon, .ov-key .tab-icon { width: .9rem; height: .9rem; margin: 0; vertical-align: middle; }
.ov-del .tab-icon, .ov-block .del .tab-icon { display: block; width: 100%; height: 100%; }
.ov-del circle, .ov-block .del circle { stroke-width: 1; stroke-opacity: .6; }
.ov-del:hover circle, .ov-del:focus-visible circle, .ov-block .del:hover circle, .ov-block .del:focus-visible circle { stroke-opacity: 1; }
.ov-block.bad::after { content: ""; position: absolute; bottom: 0; left: 0; z-index: 1; width: 1rem; height: 1rem; border-top-right-radius: var(--radius-md); background: var(--color-bad) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14M6.5%2013.5L12%2019l5.5-5.5'/%3E%3C/svg%3E") center / 80% no-repeat; pointer-events: none; } /* the same corner badge as the loop of a repeating one, at the bottom left */
.ov-bad-row { margin: 0 0 var(--space-3); }
.ov-kind-help { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.ov-kind-help[hidden], .ov-heads[hidden] { display: none; }

/* Locations and distribution points */
.chip-place { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.shifts-workplaces.places[hidden], .shifts-workplaces.places a[hidden] { display: none; }
.shifts-workplaces.places a::before { display: none; }
.shifts-workplaces.places a[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.tree { display: grid; gap: var(--space-1); }
.tree .node { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); }
.tree .node-open { flex: 1; min-width: 0; }
.tree .node-location .node-open { font-weight: 700; }
.tree .node-rank { flex: none; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; }
.tree .chev { flex: none; width: 1.5rem; height: 1.5rem; padding: 0; justify-content: center; border-color: transparent; background: none; cursor: pointer; }
.tree .chev::before { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(45deg); transition: transform var(--transition-fast); }
.tree .chev[aria-expanded="false"]::before { transform: rotate(-45deg); }
.tree .chev:focus-visible, .tree .node-open:focus-visible { outline: var(--focus-ring); }
.tree-children { display: grid; gap: var(--space-1); margin-left: var(--space-3); padding-left: var(--space-2); border-left: 1px solid var(--color-border); }
.tree .node-empty { margin: 0 0 0 var(--space-3); }
.place-list { display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.place-item { width: 100%; font: inherit; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.place-item:hover, .place-item:focus-visible { background: var(--color-surface-muted); }
.place-item .sname { font-weight: 600; }
.place-item .count { font-size: var(--text-sm); opacity: .75; }
.quiet-link { font: inherit; font-size: var(--text-sm); padding: 0.1rem var(--space-2); border: 0; background: none; color: var(--color-accent); cursor: pointer; }
.quiet-link:hover, .quiet-link:focus-visible { text-decoration: underline; }
.quiet-danger:disabled { color: var(--color-text-faint); cursor: not-allowed; background: none; border-color: transparent; }
.detail .add { display: flex; gap: var(--space-2); margin: var(--space-2) 0 0; max-width: 28rem; }
.detail .add input { flex: 1; min-width: 0; }
.detail-head input { font: inherit; font-size: var(--text-lg); padding: 0.2rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.np-seg { display: inline-flex; width: fit-content; border: 1px solid var(--color-border); overflow: hidden; }
.np-seg-btn { font: inherit; border: none; cursor: pointer; }
.np-seg-btn:hover { background: var(--color-surface-muted); color: var(--color-text); }
.np-seg-btn:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.np-seg-btn[aria-pressed="true"] { font-weight: 600; }
/* Room between the mode switch and the summary bar. */
.np-hours-body { display: grid; margin-top: var(--space-3); }
.np-form input.np-hours-input { width: 6rem; padding-block: 0; height: 2rem; }
.np-section { gap: var(--space-2); margin-top: var(--space-2); }
/* Working hours: no rules between days, quiet labels, soft chips. */
.np-hours { display: grid; margin-top: var(--space-2); }
.np-day-row { display: grid; align-items: center; border-top: 1px solid var(--color-border); }
.np-day-row:last-child { border-bottom: 1px solid var(--color-border); }
.np-dayname { font-weight: 500; }
.np-total { border-top: none; font-weight: 600; }
.np-total-time { font-variant-numeric: tabular-nums; }
.np-blocks { display: flex; flex-wrap: wrap; align-items: center; }
.np-blocks > .sub { margin: 0; }
.np-block { display: inline-flex; align-items: center; gap: var(--space-2); }
.np-block .dd { width: 6.5rem; }
.np-block .dd-btn { height: 2.5rem; padding-block: 0; }
.np-day-actions { display: grid; gap: var(--space-2); justify-content: end; grid-template-columns: 4.5rem 8rem; }
.np-day-actions .small { height: 2.5rem; padding-block: 0; white-space: nowrap; width: 100%; }
.np-day-actions .quiet, .np-x { border-color: var(--color-border); color: var(--color-text-muted); }
.np-x { background: none; border: none; cursor: pointer; font: inherit; line-height: 1; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); }
.np-x:hover { color: var(--color-text); background: var(--color-surface-muted); }
.np-x:focus-visible { outline: var(--focus-ring); }
.np-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: 600; }
.np-form input.np-check { width: 1rem; height: 1rem; margin: 0; padding: 0; }
.np-supervisors { max-width: 32rem; margin-top: var(--space-1); }
.ms-box { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; min-height: 2.5rem; box-sizing: border-box; padding: 0.25rem 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.ms-box:focus-within { border-color: var(--color-accent); }
.ms-chips { display: contents; }
.ms-chip { cursor: default; padding: 0 var(--space-1) 0 var(--space-3); }
.np-form .ms-input { flex: 1 1 8rem; border: none; padding: 0.25rem 0.3rem; background: transparent; width: auto; }
.np-form .ms-input:focus { outline: none; }
@media (max-width: 720px) { .np-day-row { grid-template-columns: 1fr; gap: var(--space-2); } .np-day-actions { justify-content: start; } }
.np-wheres { display: grid; gap: var(--space-3); }
.np-groups { display: grid; gap: var(--space-2); }
.np-group { display: grid; gap: var(--space-1); }
.np-need { margin: 0; }

/* Workplaces sidebar: one quiet group per location, its workplaces under a guide line. Stays in view while the page scrolls. */
.master-detail > .side { position: sticky; top: var(--space-3); max-height: calc(100dvh - 2 * var(--space-3)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-bottom: 0; }
.dp-list { display: grid; margin: 0; padding: 0; list-style: none; }
.dp-tile { display: block; padding: var(--space-2) 0; border: 0; border-radius: 0; background: none; }
.dp-tile + .dp-tile { border-top: 1px solid var(--color-border); }
.dp-head { gap: var(--space-1); }
.dp-head .grip { opacity: 0; transition: opacity var(--transition-fast); } /* the drag handle only when it is useful */
.dp-tile:is(:hover, :focus-within) .dp-head .grip, .dp-tile.dragging .dp-head .grip { opacity: 1; }
@media (hover: none) { .dp-head .grip { opacity: .6; } }
.dp-title { flex: 1; min-width: 0; display: grid; }
.workplaces-list .dp-name { display: block; width: 100%; padding: 0.15rem 0.3rem; border: 0; border-radius: var(--radius-md); background: none; font: inherit; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); }
.workplaces-list .dp-name:hover { background: var(--color-surface-muted); color: var(--color-text-strong); }
.workplaces-list .dp-name[aria-pressed="true"] { background: var(--color-accent-soft); color: var(--color-accent); }
.dp-head .chev { order: 9; }
.dp-workplaces { display: grid; margin-left: 0.6rem; padding-left: var(--space-2); border-left: 1px solid var(--color-border); }
.workplace-row { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: 0.15rem 0.6rem; border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); }
.workplace-row:hover { background: var(--color-surface-muted); }
.workplaces-list .workplace-row .sname { flex: 1; min-width: 0; font-weight: 500; }
.workplace-row .count { min-width: 1.4rem; padding: 0 0.4rem; border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: center; opacity: 1; }
.workplace-row:hover .count { background: var(--color-border); }
.workplaces-list .workplace-row.all-row .sname { font-weight: 400; font-size: var(--text-sm); }
.workplace-row.all-row { color: var(--color-text-faint); font-style: italic; }
.workplace-row.all-row:hover { color: var(--color-text-muted); }
/* Selected: a soft tint with an accent bar on the guide line, not a solid block */
.workplace-row[aria-pressed="true"] { background: var(--color-accent-soft); color: var(--color-accent); } /* colour only: the font never changes with the state */
.workplace-row[aria-pressed="true"]::before { content: ""; position: absolute; inset-block: 0.1rem; left: calc(-1 * var(--space-2) - 1px); width: 2px; border-radius: 2px; background: var(--color-accent); }
.workplace-row[aria-pressed="true"] .count { background: color-mix(in srgb, var(--color-accent) 15%, transparent); color: inherit; }
.workplace-row:focus-visible { outline: var(--focus-ring); }
@media (max-width: 55rem) { .master-detail > .side { position: static; max-height: none; } }

.detail .add.wide { max-width: none; margin: 0 0 var(--space-2); }
.detail .place-default { border-style: dashed; margin-bottom: var(--space-2); }
.detail .tile.workplace-tile .place-item { flex: 1; width: auto; padding: 0; border: 0; background: none; }

.ov-list .ov-from-default { color: var(--color-text-muted); }
.ov-list .ov-tag { margin-left: auto; font-size: var(--text-xs); font-style: italic; }

/* Workplaces sidebar: the "new location" box sits above the tree and stays as small as the rows below it. */
.master-detail .side .add.compact { gap: var(--space-1, 0.25rem); margin: 0 0 var(--space-3); }
.master-detail .side .add.compact input { font-size: var(--text-sm); padding: 0.3rem 0.55rem; }
.master-detail .side .add.compact button { font-size: var(--text-sm); padding: 0.3rem 0.6rem; }

/* Workplace chips grouped by distribution point: one row per point, its muted label first */
.shifts-workplaces.workplaces-view:not(.people-filter) { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--space-1); }
.shifts-workplaces .wp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.shifts-workplaces .wp-group { flex: none; }
.shifts-workplaces a[data-pick-point]::before { display: none; }
.filters-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-bar); }
.filters-card .workplaces-view { background: none; border: 0; box-shadow: none; border-radius: 0; margin: 0; padding: var(--space-2) var(--space-4); }
.filters-card .workplaces-view:not(:last-child) { background: linear-gradient(var(--color-border), var(--color-border)) no-repeat center bottom / calc(100% - 2rem) 1px; } /* an inset line, not an edge-to-edge rule */
.shifts-top:not(:has(*)) { display: none; }
.filters-card .workplaces-view[hidden] { display: none; }

/* Start page */
.section-title { font-size: 1.05rem; }
.big-number { margin: 0 0 var(--space-1); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.big-number .unit { font-size: var(--text-md); font-weight: 500; color: var(--color-text-muted); }
/* Compact balance cards */
/* Balance cards: 6 across on a wide screen, then 3 and 3, then 2 and 2 and 2; never a lonely row. */
.balances { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.balances .card { margin: 0; display: flex; flex-direction: column; padding: var(--space-3); border-radius: var(--radius-lg, var(--radius-md)); }
.meter { margin: var(--space-2) 0; }
.seg-booked { background: var(--color-accent); }
.seg-pending { background: var(--color-short-optimal); }
.legend { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.swatch { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: var(--space-1); border-radius: 50%; }
.tag.status-pending { color: var(--color-short-optimal-text); background: var(--color-short-optimal-bg); border-color: var(--color-short-optimal); }
.tag.status-approved { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); }
.week-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.week-nav { display: flex; gap: var(--space-1); }
.week-nav a { padding: 0.15rem var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); text-decoration: none; color: var(--color-text); }
.week-nav a:hover { border-color: var(--color-accent); }
/* Short blocks on the overview stay readable without hovering: time and place share a line, and none is drawn lower than one line. */
.cal { display: grid; grid-template-columns: 3.2rem repeat(5, minmax(0, 1fr)); gap: 0 2px; margin-top: var(--space-3); grid-template-rows: auto 36rem; }
.cal-head { padding: var(--space-2); text-align: center; font-weight: 600; border-bottom: 1px solid var(--color-border); }
.cal-head.today { color: var(--color-accent); border-bottom: 2px solid var(--color-accent); }
.cal-axis, .cal-col { position: relative; }
.cal-axis span { position: absolute; right: var(--space-2); transform: translateY(-50%); color: var(--color-text-muted); }
.cal-col { border-left: 1px solid var(--color-border); background: var(--color-surface); touch-action: pan-y; user-select: none; }
.cal-col.today { background: var(--color-today); }
.cal-col.off { background: repeating-linear-gradient(135deg, var(--color-surface-muted), var(--color-surface-muted) 6px, var(--color-hatch) 6px, var(--color-hatch) 12px); }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--color-border); opacity: .6; }
.cal-block { position: absolute; left: 3px; right: 3px; z-index: 1; display: flex; flex-direction: column; gap: 0.1rem; padding: var(--space-1) var(--space-2); overflow: hidden; border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-sm); line-height: 1.25; }
.cal-block b { font-size: var(--text-xs); }
.cal-notes { position: absolute; top: var(--space-1); left: var(--space-1); right: var(--space-1); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.cal-notes .tag { margin-left: 0; }
.card[aria-busy="true"] { opacity: .6; transition: opacity var(--transition-fast); }
.cal-leave { position: absolute; left: 0; right: 0; z-index: 0; display: flex; flex-direction: column; gap: 0.1rem; padding: var(--space-2); overflow: hidden; background: var(--color-success-bg); border-top: 3px solid var(--color-success); color: var(--color-success); font-size: var(--text-sm); }
.cal-leave.pending { background: repeating-linear-gradient(135deg, var(--color-short-optimal-bg), var(--color-short-optimal-bg) 6px, transparent 6px, transparent 12px); border-top-color: var(--color-short-optimal); color: var(--color-short-optimal-text); }
.cal-leave.kind-unpaid:not(.pending) { background: var(--color-surface-sunken); border-top-color: var(--color-text-muted); color: var(--color-text-strong); }
.cal-leave span { font-size: var(--text-xs); }

/* Asking for time off */
.cal-head.pick { cursor: pointer; }
.cal-head.pick:hover { background: var(--color-accent-soft); }
.cal-col[data-work-from] { cursor: crosshair; }
.cal-sel { position: absolute; left: 2px; right: 2px; z-index: 3; pointer-events: none; overflow: hidden; padding: var(--space-1) var(--space-2); background: color-mix(in srgb, var(--color-accent) 85%, transparent); border-radius: var(--radius-sm); color: var(--color-on-accent); font-size: var(--text-xs); box-shadow: var(--shadow-lift); }
.request-done { margin: 0 0 var(--space-4); color: var(--color-success); font-weight: 600; }
dialog.request { overflow: visible; width: min(30rem, calc(100vw - 2rem)); padding: var(--space-5); border: 0; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-dialog); }
dialog.request::backdrop { background: var(--color-scrim); }
dialog.request h2 { margin: 0 0 var(--space-4); font-size: 1.15rem; }
.request-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.request-label { font-weight: 600; flex: 0 0 8.5rem; }
.request-row select { font: inherit; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface); color: inherit; }
.request-row select:disabled { opacity: .5; }
.request-whole { margin: 0 0 var(--space-3) 3.5rem; margin-left: 8.5rem; }
.request-what { margin: 0 0 var(--space-3); font-weight: 600; min-height: 1.4em; }
.request-note { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-text-strong); font-size: var(--text-sm); }
.request-note:empty { display: none; }
.request-problem { margin: 0 0 var(--space-3); color: var(--color-danger); }
.request-problem:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip { font: inherit; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.chip:hover:not(:disabled) { border-color: var(--color-accent); }
.chip[aria-checked="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.chip.extra:not(:disabled) { border-color: var(--color-info); color: var(--color-info-text); background: var(--color-info-bg); }
.chip.extra[aria-checked="true"] { background: var(--color-info); border-color: var(--color-info); color: var(--color-on-accent); }
.chip:disabled { color: var(--color-text-faint); border-style: dashed; cursor: not-allowed; }
.chip:focus-visible, .request .btn:focus-visible { outline: var(--focus-ring); }
.request-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.request .btn { font: inherit; padding: var(--space-1) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; }
.request .btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.request .btn:disabled { opacity: .5; cursor: not-allowed; }

/* The date picker of the time-off dialog */
.dp { position: relative; }
.dp-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 11.5rem; justify-content: space-between; font: inherit; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.dp-btn:hover, .dp-btn[aria-expanded="true"] { border-color: var(--color-accent); }
.dp-btn:focus-visible, .dp-nav:focus-visible, .dp-day:focus-visible { outline: var(--focus-ring); }
.dp-btn .tab-icon { margin: 0; color: var(--color-accent); }
.dp-pop { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 10; width: 17rem; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg, var(--radius-md)); background: var(--color-surface); box-shadow: var(--shadow-float); }
.dp-pop[hidden] { display: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); text-transform: capitalize; }
.dp-nav { width: 1.9rem; height: 1.9rem; font: inherit; font-size: 1.2rem; line-height: 1; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-accent); cursor: pointer; }
.dp-nav:hover { background: var(--color-accent-soft); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-dow { padding: var(--space-1) 0; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; }
.dp-day { aspect-ratio: 1; font: inherit; font-size: var(--text-sm); border: 1px solid transparent; border-radius: 50%; background: none; color: var(--color-text); cursor: pointer; }
.dp-day:hover { background: var(--color-accent-soft); }
.dp-day.weekend { color: var(--color-text-muted); }
.dp-day.other { color: var(--color-text-faint); }
.dp-day.today { border-color: var(--color-accent); color: var(--color-accent); font-weight: 700; }
.dp-day.selected { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); font-weight: 700; }
.balance h3 { margin: 0 0 var(--space-2); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.balance-main { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; line-height: 1.1; }
.balance-main.centered { align-items: center; min-height: 1.75rem; }
.infinity { width: 2rem; height: 2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.balance .big-number { font-size: 1.75rem; }
.balance .unit { font-size: var(--text-sm); }
.balance .meter { height: 0.4rem; margin: var(--space-2) 0 var(--space-1); }
.balance .meter.empty { background: none; }
.balance-of { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.stats div { min-width: 0; }
.stats dt { display: flex; align-items: center; margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.stats dd { margin: 0; font-weight: 600; font-size: var(--text-md); }
.stats .swatch { flex: none; }
.section-title { margin: var(--space-3) 0 var(--space-2); }

/* Upcoming time off: the columns line up across rows, without being a table */
.upcoming { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content; column-gap: var(--space-5, 1.5rem); }
.upcoming li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.upcoming li:first-child { border-top: 0; }
.upcoming .when { font-weight: 600; }
.upcoming .tag { margin-left: 0; }
.upcoming .what { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem var(--space-2); min-width: 0; }
.upcoming .what .note { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); color: var(--color-text-muted); }
.upcoming .state { justify-items: start; }
.upcoming .by { font-size: var(--text-xs); color: var(--color-text-muted); }
.upcoming .act { justify-self: end; }

/* Working hours: one slim row, everything centred on the same line */
.card.hours { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding: var(--space-2) var(--space-4); line-height: 1.5; }
.hours h2 { margin: 0; font-size: var(--text-md); line-height: inherit; color: var(--color-text-muted); font-weight: 600; }
.hours p { margin: 0; line-height: inherit; }
.hours-main b { font-size: 1.1rem; }
.hours-days { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.day-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-sm); line-height: 1.7; }
.day-chip b { font-weight: 700; }

/* Extra hours and the bank */
.seg-paid { background: var(--color-text-faint); }
.cal-extra { position: absolute; left: 4px; right: 4px; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); padding: var(--space-1) var(--space-2); overflow: hidden; border: 2px dashed var(--color-info); border-radius: var(--radius-sm); background: var(--color-info-bg); color: var(--color-info-text); font-size: var(--text-sm); line-height: 1.25; }
.cal-extra span { font-size: var(--text-xs); }
.cal-extra.pending { border-color: var(--color-short-optimal); background: var(--color-notice-bg); color: var(--color-notice-text); }
.cal-leave.kind-lieu:not(.pending) { background: var(--color-info-bg); border-top-color: var(--color-info); color: var(--color-info-text); }

/* Distances as a table: points down and across, the minutes of each pair once, in a staircase. */
.dist-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.dist-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dist-table th, .dist-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: center; white-space: nowrap; }
.dist-table tr:last-child > * { border-bottom: 0; }
.dist-table th[scope="row"] { text-align: left; border-right: 1px solid var(--color-border); }
.dist-table th { font-weight: 600; }
.dist-table th .nm, .dist-table th .loc { display: block; }
.dist-table th .nm { font-size: var(--text-sm); color: var(--color-text-strong); }
.dist-table th .loc { font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
.dist-table td.void { background: var(--color-surface-muted); }
.dist-cell { font: inherit; padding: 0.15rem 0.7rem; border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-accent); cursor: pointer; }
.dist-cell:disabled { cursor: default; }
.dist-cell:not(:disabled):hover { background: var(--color-accent-soft); }
.dist-cell:focus-visible { outline: var(--focus-ring); }
.dist-table .dist-edit { margin: 0 auto; }

/* The panel's last row, kept at the bottom of the visible panel while the tree above it scrolls. */
.side-footer { position: sticky; bottom: 0; margin: var(--space-1) calc(-1 * var(--space-4)) 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* the footer fills the bottom, so the space above and below its row is its own, and equal */

/* Add a person: compact two-column layout (details and workplaces | working hours), tighter rows. */
.np-form { gap: var(--space-2); }
.np-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--space-4) var(--space-5); align-items: start; }
/* Add a person, left column: every field is a row, a quiet label on the left and the control on the right. */
.np-col { display: grid; min-width: 0; align-content: start; gap: var(--space-5); }
.np-fields { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); }
.np-form .np-section { margin-top: 0; }
.np-day-row { grid-template-columns: 6rem minmax(0, 1fr) auto; padding-block: var(--space-1); gap: var(--space-2); }
.np-blocks { min-height: 2rem; gap: var(--space-1) var(--space-3); }
.np-block .dd-btn, .np-day-actions .small { height: 2rem; }
.np-chip { padding: 0.1rem var(--space-3); }
.np-hours .np-day-row, .np-hours .np-day-row:last-child { border: none; padding-block: var(--space-2); }
.np-hours .np-dayname { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-sm); }
.np-hours .np-total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.np-hours .np-total .np-dayname { font-weight: 500; color: var(--color-text); }
.np-hours .np-chip { border-color: transparent; background: var(--color-surface-muted); color: var(--color-text-muted); }
.np-hours .np-chip:hover { color: var(--color-text); }
.np-hours .np-chip[aria-pressed="true"] { background: var(--color-accent-soft); border-color: transparent; color: var(--color-text); }
.np-hours .np-day-actions .small { border-color: transparent; background: none; font-size: var(--text-sm); }
.np-hours .np-day-actions .small:hover:not(:disabled) { background: var(--color-surface-muted); }
.np-half, .np-half-head { width: 7.5rem; justify-content: center; text-align: center; box-sizing: border-box; }
.np-half-head { display: grid; font-size: var(--text-sm); color: var(--color-text-muted); }
.np-half-head small { font-size: inherit; font-variant-numeric: tabular-nums; opacity: 0.75; }
.np-hours .np-half-heads { padding-block: 0; }
.np-stat-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.np-stat-value { display: flex; align-items: center; gap: var(--space-2); min-height: 2rem; margin-left: var(--space-1); font-weight: 500; }
.np-stat-value.np-over { color: var(--color-danger); }
.np-weekly-summary + .np-day-row { padding-top: 0; }
/* One line: "Contract: 36 h/week • Pharmacy open: 42.5 h", label and value side by side. */
.np-weekly-summary .np-stat + .np-stat::before { color: var(--color-text-muted); margin-right: var(--space-1); content: none; }
/* Hours per week: the morning and afternoon pills share the row's whole width, no empty column on the right. */
.np-hours .np-halfrow { grid-template-columns: 6rem minmax(0, 1fr); padding-block: var(--space-1); }
/* Wide tiles: each cell fills its half of the row, so the two columns read as a tidy grid. */
.np-hours .np-halves { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.np-hours .np-halves .np-half, .np-hours .np-halves .np-half-head { width: auto; }
/* Set times: the same quiet look as hours per week. */
.np-hours .np-blocks > .sub { font-size: var(--text-sm); }
.np-hours .np-block .dd-btn { background: var(--color-surface-muted); border-color: transparent; }
.np-hours .np-block .dd-btn:hover { border-color: var(--color-border); }
.np-hours .np-x { color: var(--color-text-muted); opacity: 0.7; }
.np-hours .np-x:hover { opacity: 1; }

/* The summary line above the days: a soft bar, muted label, bold value, a clear gap between them. */
/* The summary bar: two equal columns, an outline instead of a grey fill, the same in both modes. */
.np-weekly-summary { flex-wrap: wrap; align-items: center; border-radius: var(--radius-md); margin-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: var(--space-2) var(--space-5); background: none; border: 1px solid var(--color-border); }
.np-stat { display: inline-flex; align-items: center; gap: var(--space-3); }
.np-stat-label::after { content: ":"; }
.np-weekly-summary .np-stat + .np-stat { border-left: 1px solid var(--color-border); padding-left: var(--space-5); }
.np-weekly-summary input.np-hours-input { width: 4rem; text-align: center; background: var(--color-surface); }
/* Same space between the mode switch, the summary bar and the days in both modes. */
.np-hours-body { gap: var(--space-3); }
.np-hours-body > .np-hours { margin-top: 0; }
.np-weekly-summary .np-stat { min-width: 0; }
@media (max-width: 480px) { .np-weekly-summary { grid-template-columns: 1fr; } .np-weekly-summary .np-stat + .np-stat { padding-left: 0; border-left: none; } }
.np-weekly-summary .np-stat + .np-stat { border-left-color: var(--color-border); }
/* Morning / afternoon cells: a tick when on, an empty cell when off. The header above names the columns. */
/* Cells and ticks are as tall as the time pickers (2.5rem) and easy to hit. */
.np-half .np-tick { opacity: 0; font-weight: 600; transition: opacity var(--transition-fast); line-height: 1; }
.np-half[aria-pressed="true"] .np-tick { opacity: 1; color: var(--color-accent); }
.np-half:hover:not([aria-pressed="true"]) .np-tick { opacity: 0.3; }
.np-half { transition: background-color var(--transition-fast); }
/* Morning / afternoon cells: compact rounded squares centred under their column header, not stretched ovals. */
.np-hours .np-half { padding: 0; border-radius: var(--radius-md); justify-content: center; width: 100%; justify-self: stretch; }
.np-hours .np-half-head { justify-self: center; }
.np-rows { display: grid; gap: var(--space-3); }
.np-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; min-width: 0; }
.np-rowlabel { display: flex; align-items: center; min-height: 2.25rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.np-row .np-chips { min-height: 2.25rem; }
.np-control { display: grid; gap: var(--space-2); min-width: 0; }
.np-row .np-seg { min-height: 2.25rem; }
.np-row .np-groups { gap: var(--space-3); padding-top: 0.2rem; }
.np-rows .np-chip { border-color: transparent; background: var(--color-surface-muted); color: var(--color-text-muted); }
.np-rows .np-chip:hover { color: var(--color-text); }
.np-rows .np-chip[aria-pressed="true"] { background: var(--color-accent-soft); color: var(--color-text); }
.np-form .np-supervisors { max-width: none; margin: 0; }
@media (max-width: 520px) { .np-row { grid-template-columns: 1fr; gap: var(--space-1); } .np-rowlabel { min-height: 0; } }

/* Two clear columns: side by side with a hairline between them on wide screens, stacked on narrow ones. */
@media (min-width: 1000px) {
  .np-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
  .np-cols > .np-col:first-child { padding-right: var(--space-5); }
  .np-cols > .np-col + .np-col { padding-left: var(--space-5); border-left: 1px solid var(--color-border); }
}
@media (max-width: 999px) {
  .np-cols > .np-col + .np-col { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
}

/* Working hours under each person in the People list: a quiet line with an Edit button, or the editor. */
.prow-hours { grid-column: 1 / -1; }
.prow-hours.editing { display: grid; justify-content: stretch; margin: 0; color: var(--color-text); font-size: inherit; gap: var(--space-3); }
.prow-hours.editing.np-form { margin: 0; }
.prows:has(.prow-hours.editing) { overflow: visible; } /* the time lists open below the last row */

/* "Add a person" opens and closes the form, so it carries a chevron: down when closed, up when open. */
#people-add-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
#people-add-toggle::after { transition: transform var(--transition-fast); }

/* Add a person, open: the form joins the search bar above it as one card, with no gap between them. */
.people-app:has(#people-add:not([hidden])) .people-head { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#people-add:not([hidden]) > .np-form { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: var(--space-2); }

/* Team stats: one column of full-width cards; every row of two cards has a chart or a grid in both */
.team-stats h2 { margin: var(--space-6, 2.5rem) 0 var(--space-3); font-size: 1.15rem; }
.team-stats h3, .team-stats h4 { margin: 0 0 var(--space-2); font-size: 1rem; }
.team-stats .muted { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 400; }
.stats-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.stats-head h1 { margin: 0; }
.stats-range { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-strong); }
.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); }
.stats-cards .card { margin: 0; display: grid; gap: var(--space-1); align-content: start; }
.stat-label { color: var(--color-text-muted); font-size: var(--text-sm); }
.stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.stat-change { font-size: var(--text-sm); }
.stat-change.good { color: var(--color-good); }
.stat-change.bad { color: var(--color-short-min-text); }
.stat-change.flat, .stat-change.none { color: var(--color-text-muted); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--space-3); align-items: stretch; }
.stats-row > .card { margin: 0; }
.stats-workplaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stats-workplaces .card { margin: 0; }
.team-stats .point-name { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.stats-empty { display: grid; place-items: center; min-height: 9rem; padding: var(--space-4); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.stats-empty strong { font-weight: 600; }
.chart-card { display: flex; flex-direction: column; }
.chart-card > .stats-empty { flex: 1; }
.stats-empty-wide { min-height: 5rem; background: var(--color-surface); }
.viz-scroll { overflow-x: auto; }
.viz-scroll .viz { min-width: 30rem; }
.stats-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.stats-search { flex: 0 1 20rem; min-height: 2.25rem; box-sizing: border-box; padding: 0 var(--space-3); font: inherit; font-size: var(--text-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); }
.stats-none { margin: 0; padding: var(--space-4); text-align: center; color: var(--color-text-muted); }
.table-scroll { overflow-x: auto; }
.stats-table-view { margin: var(--space-3) 0 0; }
.stats-table-view summary { cursor: pointer; color: var(--color-text-muted); }

/* Sortable tables */
.stats-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: var(--space-2); text-align: left; border-bottom: 1px solid var(--color-border); font-weight: 400; white-space: nowrap; }
.stats-table tbody tr:last-child > * { border-bottom: 0; }
.stats-table tbody tr:hover > * { background: var(--color-surface-muted); }
.stats-table thead th { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); border-bottom-color: var(--color-border-strong); }
.stats-table tbody th { min-width: 11rem; }
.stats-table .who { display: inline-flex; align-items: center; gap: var(--space-2); }
.stats-avatar { flex: none; width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
.stats-table td:has(.meter) { white-space: nowrap; }
.stats-table .meter { margin: 0 var(--space-2) 0 0; }
/* The bar column has one width and starts under its heading; the percentage is right-aligned at the cell's edge, like the numbers beside it. (Narrow screens have their own layout below.) */
@media (min-width: 55.01rem) {
  .stats-table th:has(+ td .meter), .stats-table td:has(.meter) { width: 14rem; }
  .stats-table td .meter { width: calc(100% - 3.6rem); }
  .stats-table td .meter-text { min-width: 2.6rem; text-align: right; }
}
@media (max-width: 55rem) { .stats-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--color-surface); } .stats-table tbody tr:hover > th { background: var(--color-surface-muted); } }
.stats-table .num { text-align: right; }
.stats-table td.over { color: var(--color-short-min-text); font-weight: 600; }
.stats-table button[data-sort] { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3em; }
.stats-table button[data-sort]:hover { color: var(--color-text); }
.stats-table button[data-sort]:focus-visible { outline: var(--focus-ring); }
.stats-table th[aria-sort="ascending"] button::after, .stats-table th[aria-sort="descending"] button::after { content: ""; width: .9em; height: .9em; background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }
.stats-table th[aria-sort="ascending"] button::after { transform: scaleY(-1); }
.stats-table th[aria-sort] button:is(:hover) { color: var(--color-text); }
.stats-table th[aria-sort="ascending"], .stats-table th[aria-sort="descending"] { color: var(--color-text); }

/* Charts: marks carry the colour, text stays in text colours */
.viz { width: 100%; height: auto; display: block; }
.viz-grid { stroke: var(--color-border); stroke-width: 1; }
.viz-tick { fill: var(--color-text-muted); font-size: 13px; }
.viz-line { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-area { fill: var(--viz-1); fill-opacity: .1; stroke: none; }
.viz-point { fill: var(--color-surface); stroke: var(--viz-1); stroke-width: 1.5; }
.viz-dot { fill: var(--viz-1); stroke: var(--color-surface); stroke-width: 2; }
.viz-bar { fill: var(--viz-1); }
.viz-hit { fill: transparent; }
.viz-hit:hover { fill: var(--viz-1); fill-opacity: .12; }
.viz-point:hover { fill: var(--viz-1); }

/* Horizontal bars: a distribution point and, under it, its workplaces that were short */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.bars li { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 4.5rem; align-items: center; gap: var(--space-3); }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-point { margin-top: var(--space-2); font-weight: 600; }
.bar-workplace .bar-label { padding-left: var(--space-4); color: var(--color-text-muted); }
.bar-track { height: 1rem; }
.bar-fill { display: block; height: 100%; background: var(--viz-1); border-radius: 0 4px 4px 0; }
.bar-workplace .bar-fill { height: 60%; margin-top: .2rem; opacity: .75; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }

/* Heatmap: one hue, light to dark */
.heat { width: 100%; border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.heat th { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); padding: 0 var(--space-2); text-align: right; width: 3.2rem; }
.heat thead th { text-align: center; width: auto; }
.heat td { height: 1.7rem; text-align: center; font-size: var(--text-xs); border-radius: var(--radius-sm); background: var(--color-surface-muted); }
.heat td.heat-closed { background: var(--color-surface-sunken); }
.heat td.heat-1 { background: var(--viz-seq-1); }
.heat td.heat-2 { background: var(--viz-seq-2); }
.heat td.heat-3 { background: var(--viz-seq-3); color: var(--color-on-accent); }
.heat td.heat-4 { background: var(--viz-seq-5); color: var(--color-on-accent); }

/* A thin meter inside a table cell */
.meter { display: inline-block; vertical-align: middle; width: 5rem; height: .5rem; background: var(--color-surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--viz-1); }
.meter.over .meter-fill { background: var(--color-short-min); }
.meter-text { display: inline-block; min-width: 3.2rem; font-variant-numeric: tabular-nums; }

.stats-risk { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-2); }
.stats-risk li { padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--radius-lg); display: grid; gap: var(--space-1); }
.stats-risk li.risk { border-left-color: var(--color-short-min); }
.stats-risk li.ok { border-left-color: var(--color-good); }
.stats-risk-ok { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-strong); }
.stats-risk-ok::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: var(--color-good); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.heat-legend i { width: 1.1rem; height: .7rem; border-radius: var(--radius-sm); }
.heat-legend .heat-1 { background: var(--viz-seq-1); } .heat-legend .heat-2 { background: var(--viz-seq-2); } .heat-legend .heat-3 { background: var(--viz-seq-3); } .heat-legend .heat-4 { background: var(--viz-seq-5); }
.heat-legend span:first-child { margin-right: var(--space-1); } .heat-legend span:last-child { margin-left: var(--space-1); }
.stats-risk li.none { border-left-color: var(--color-border-strong); color: var(--color-text-muted); }
/* Hovered or focused, a block, extra-hours band or leave band grows to fit its text (never lower than it was) and lies on top. */
.cal-block, .cal-extra, .cal-leave { min-height: 1.5rem; cursor: default; height: var(--h); }
.cal-block, .cal-leave { flex-direction: row; flex-wrap: wrap; align-items: baseline; align-content: flex-start; column-gap: var(--space-2); padding-block: 0.15rem; }
/* A block with room for one line only keeps time and place on it, the place cut short with an ellipsis (hover shows all of it). */
.cal-block.short { flex-wrap: nowrap; }
.cal-block.short b { flex: none; }
.cal-block.short span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-extra { padding-block: 0.1rem; }

/* Any block, not only a narrow one, grows to its full content while hovered, focused or selected, and never gets narrower than it was:
   a bar that is just wide enough for the icons but too short for the name or the time shows everything. */
.tl .shifts-block:not(.narrow):not(.active):not(.ghost):is(:hover, :focus-within, .selected) { width: max-content !important; min-width: var(--w); overflow: visible; z-index: 6; box-shadow: 0 1px 4px var(--color-scrim); }
.tl .shifts-block:not(.narrow):not(.active):not(.ghost):is(:hover, :focus-within, .selected) .name { overflow: visible; text-overflow: clip; }
.cal-block:is(:hover, :focus-within), .cal-extra:is(:hover, :focus-within), .cal-leave:is(:hover, :focus-within) { height: auto; min-height: max(1.5rem, var(--h)); overflow: visible; z-index: 4; box-shadow: var(--shadow-lift); }
.cal-leave.pending:hover { background-color: var(--color-surface); }

/* Time off that is asked for can be clicked to change or cancel it; shifts cannot. It looks like a button (an outline, a little lift, a
   pencil in the corner) and the shifts stay flat. */
.cal-leave.editable { cursor: pointer; padding-right: 1.5rem; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-top-width: 3px; border-radius: var(--radius-sm); box-shadow: 0 1px 2px var(--color-scrim); transition: box-shadow var(--transition-fast), filter var(--transition-fast); }
.cal-leave.editable::after { content: ""; position: absolute; top: 0.2rem; right: 0.3rem; width: 0.9rem; height: 0.9rem; background: currentColor; opacity: .7; mask: var(--pencil) center / contain no-repeat; -webkit-mask: var(--pencil) center / contain no-repeat; --pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.cal-leave.editable:hover, .cal-leave.editable:focus-visible { filter: brightness(.93); box-shadow: var(--shadow-lift); }
.cal-leave.editable:hover::after, .cal-leave.editable:focus-visible::after { opacity: 1; }
.cal-leave.editable:focus-visible { outline: var(--focus-ring); }
.request-actions .btn.danger { margin-right: auto; border-color: var(--color-danger-border); color: var(--color-danger); }
.request-actions .btn.danger:hover:not(:disabled) { background: var(--color-danger-bg); }

.request-confirm { margin: 0 auto 0 0; font-weight: 600; color: var(--color-danger); }
.request-actions .btn.danger.solid { margin-right: 0; background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); }
.request-actions .btn.danger.solid:hover:not(:disabled) { background: var(--color-danger-strong); }

/* Away for work: told apart from time off by its colour, and it carries what it is for. */
.cal-leave.kind-work:not(.pending) { background: var(--color-info-bg); border-top-color: var(--color-info); color: var(--color-info-text); }
.cal-leave .note { font-style: italic; }

/* The text field of a request, like the selects beside it. */
.request-row[hidden] { display: none; }
.request-row input[type=text] { flex: 1 1 12rem; min-width: 0; font: inherit; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface); color: inherit; }
.request-row input[type=text]::placeholder { color: var(--color-text-faint); }
.request-row input[type=text]:focus-visible { outline: var(--focus-ring); }

/* The request dialog: one select for the type, a quiet "withdraw" on the left, and Cancel then the primary action on the right. */
.request-kind { flex: 1 1 14rem; min-width: 0; }
.request-to { color: var(--color-text-muted); }
.request-actions .btn.danger.quiet { border-color: transparent; background: none; padding-inline: var(--space-2); }
.request-actions .btn.danger.quiet:hover:not(:disabled) { background: var(--color-danger-bg); }

/* The type dropdown in the request dialog; what is left of a kind is secondary text, and a kind that cannot be chosen is greyed out. */
.dd-sub { color: var(--color-text-muted); font-size: var(--text-sm); }
.dd-opt.disabled { opacity: .5; cursor: not-allowed; }
.request-row .dd.request-kind { flex: 1 1 14rem; min-width: 0; }

/* Outside the opening hours nothing can be chosen: those hours are shaded. Labels line up in one column, and the type list shows every kind. */
.cal-closed { position: absolute; left: 0; right: 0; z-index: 0; background: var(--color-surface-sunken); opacity: .8; pointer-events: none; }
.request-row .dd-list { max-height: 22rem; }

/* Hovered or focused, a short block drops the one-line cut and shows all of its text. */
.cal-block.short:is(:hover, :focus-within) { flex-wrap: wrap; }
.cal-block.short:is(:hover, :focus-within) span { overflow: visible; text-overflow: clip; white-space: normal; }

/* Each distribution point has a colour of its own: on its chip above the calendar and on its shifts. */
.dp-chips { margin: var(--space-3) 0 0; }
.dp-0 { --dp: var(--workplace-0); --dp-soft: var(--workplace-0-soft); --sec: var(--workplace-0); }
.dp-1 { --dp: var(--workplace-1); --dp-soft: var(--workplace-1-soft); --sec: var(--workplace-1); }
.dp-2 { --dp: var(--workplace-2); --dp-soft: var(--workplace-2-soft); --sec: var(--workplace-2); }
.dp-3 { --dp: var(--workplace-3); --dp-soft: var(--workplace-3-soft); --sec: var(--workplace-3); }
.dp-4 { --dp: var(--workplace-4); --dp-soft: var(--workplace-4-soft); --sec: var(--workplace-4); }
.dp-5 { --dp: var(--workplace-5); --dp-soft: var(--workplace-5-soft); --sec: var(--workplace-5); }
.dp-6 { --dp: var(--workplace-6); --dp-soft: var(--workplace-6-soft); --sec: var(--workplace-6); }
.dp-7 { --dp: var(--workplace-7); --dp-soft: var(--workplace-7-soft); --sec: var(--workplace-7); }
.cal-block { border-left-color: var(--dp, var(--color-accent)); background: var(--dp-soft, var(--color-accent-tint)); }
.cal-block:hover { background: color-mix(in srgb, var(--dp, var(--color-accent)) 25%, var(--color-surface)); }
.cal-block[hidden] { display: none; }

/* Permissions tab */
.perm-app { display: grid; gap: var(--space-3); }
.perm-app h1 { margin: 0; }
.perm-main { display: grid; gap: var(--space-3); min-width: 0; }
.perm-app { min-width: 0; }
.perm-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-bar); }
.perm-panel { overflow-x: clip; }
.perm-wrap { position: relative; min-width: 0; }
.perm-table thead tr:first-child th { position: sticky; top: 0; z-index: 2; height: 2rem; }
.perm-table thead tr:nth-child(2) th { position: sticky; top: 2rem; z-index: 2; }
.perm-modes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-3) var(--space-4); }
.perm-modes .np-section-title { flex-basis: 100%; }
.perm-mode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-strong); }
.perm-modes .hint { flex-basis: 100%; }
.perm-app .stats-bar { margin: 0; }
.perm-table { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
/* Every permission column is as wide as the others, so a group's name sits over the middle of its columns (with the width of the text, See was narrow and Approve wide, and the group looked pushed to the right). */
.perm-table { table-layout: fixed; min-width: 78rem; }
.perm-table th.perm-name { width: 12rem; }
.perm-table th.perm-all { width: 4rem; }
.perm-table thead th.perm-group { letter-spacing: .04em; }
.perm-table thead th.perm-col { padding-inline: var(--space-1); letter-spacing: .04em; } /* "Bewerken" and "Beslissen" fit the equal columns */
.perm-table thead th.perm-group[colspan="1"] { width: 7.5rem; } /* a group of one column (Statistics) needs the room of its own name */
.perm-table th, .perm-table td { padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.perm-table thead th { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); vertical-align: bottom; white-space: nowrap; }
.perm-table thead th.perm-group { text-align: center; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-1); }
.perm-table thead tr:nth-child(2) th { border-bottom-color: var(--color-border-strong); }
.perm-table thead tr:first-child th[rowspan] { border-bottom-color: var(--color-border-strong); }
.perm-table tbody tr:last-child > * { border-bottom: 0; }
.perm-table tbody tr:hover > * { background: var(--color-surface-muted); }
.perm-name { text-align: left; font-weight: 500; white-space: nowrap; min-width: 12rem; padding-left: var(--space-4) !important; }
.perm-name .who { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; }
.perm-table tbody .perm-name { white-space: normal; } /* a long name wraps inside its cell instead of running under the checkboxes */
.perm-text { min-width: 0; overflow-wrap: anywhere; }
.perm-avatar { flex: none; width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
.perm-you { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; line-height: 1.4rem; }
.perm-col { text-align: center; }
.perm-cell { text-align: center; }
.perm-cell:nth-child(2) { border-right: 1px solid var(--color-border); }
.perm-table th.perm-all { border-right: 1px solid var(--color-border); }
.perm-cell input { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 1.2rem; height: 1.2rem; margin: 0; vertical-align: middle; border: 1.5px solid var(--color-border-strong); border-radius: .3rem; background: var(--color-surface); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.perm-cell input:hover:not(:disabled) { border-color: var(--color-accent); }
.perm-cell input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.perm-cell input:checked { background: var(--color-accent); border-color: var(--color-accent); }
.perm-cell input:checked::after { content: ""; width: .8rem; height: .8rem; background: var(--color-on-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.perm-cell input:disabled { cursor: default; }
.perm-cell input:disabled:checked { background: color-mix(in srgb, var(--color-accent) 40%, var(--color-surface)); border-color: transparent; }
.perm-cell input:disabled:not(:checked) { background: var(--color-surface-muted); }
@media (max-width: 55rem) { .perm-table .perm-name { position: sticky; left: 0; z-index: 1; min-width: 0; } .perm-table thead .perm-name { z-index: 2; } .perm-name .perm-you { display: none; } .perm-modes { padding: var(--space-3); } }

/* People away on a day (approved leave): the shape of a shift bar in muted colours, not draggable, with no reason shown */
.shifts-away { position: absolute; z-index: 1; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; gap: var(--space-2); overflow: hidden; padding: 0 8px; height: 1.6rem; white-space: nowrap; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong, var(--color-border)); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: var(--text-sm); }
.shifts-away .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-away .tl-track { cursor: default; }

/* The arrow on a day's header: opens or closes the day */
.tl-day { display: flex; align-items: center; gap: var(--space-2); }
.day-toggle { position: sticky; left: var(--space-2); flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.day-toggle:hover { background: var(--color-surface-muted); }
.day-toggle:focus-visible { outline: var(--focus-ring); }
.day-toggle ~ span { left: calc(var(--space-2) + 1.6rem + var(--space-2)); } /* beside the arrow, which is stuck at the left too */

/* Changing the week: the old week fades after a moment (a quick load never flashes), the new one eases in */
.shifts-scroll.loading { pointer-events: none; }
.shifts-scroll .tl { transition: opacity .15s ease .12s; }
.shifts-scroll.loading .tl { opacity: .5; }
.tl-enter { animation: tl-enter .18s ease-out; }
@keyframes tl-enter { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tl-enter { animation: none; } .shifts-scroll .tl { transition: none; } }

/* The bell next to the person's name */
.bell-wrap { position: relative; }
.bell { position: relative; display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.bell:hover, .bell[aria-expanded="true"] { background: var(--color-surface-muted); color: var(--color-text); }
.bell:focus-visible { outline: var(--focus-ring); }
.bell svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell-count { position: absolute; top: -.1rem; right: -.1rem; min-width: 1.1rem; height: 1.1rem; box-sizing: border-box; padding: 0 .25rem; border-radius: 999px; background: var(--color-danger); color: var(--color-on-accent); font-size: .7rem; font-weight: 700; line-height: 1.1rem; text-align: center; }
.bell-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; width: min(24rem, 92vw); max-height: 70vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-lift); }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.bell-all { font: inherit; font-size: var(--text-sm); padding: .15rem .6rem; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.bell-all:hover { background: var(--color-surface-muted); }
.bell-all:focus-visible, .bell-done:focus-visible, a.bell-body:focus-visible { outline: var(--focus-ring); }
.bell-list { list-style: none; margin: 0; padding: 0; }
.bell-list li { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-2); background: var(--color-accent-soft); transition: opacity .15s ease, transform .15s ease; }
.bell-list li + li { border-top: 1px solid var(--color-border); }
.bell-list li.leaving { opacity: 0; transform: translateX(1rem); }
.bell-body { flex: 1; min-width: 0; display: grid; gap: .15rem; padding: var(--space-2) var(--space-3) var(--space-2) 1.5rem; position: relative; color: inherit; text-decoration: none; font-weight: 600; }
.bell-body::before { content: ""; position: absolute; left: .6rem; top: 1rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-accent); }
a.bell-body:hover .bell-text { text-decoration: underline; }
.bell-done { flex: none; width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); color: var(--color-text-muted); font: inherit; line-height: 1; cursor: pointer; }
.bell-done:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
@media (prefers-reduced-motion: reduce) { .bell-list li { transition: none; } }
.bell-at { font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
.bell-none { margin: 0; padding: var(--space-4) var(--space-3); text-align: center; color: var(--color-text-muted); }

.tag.status-rejected { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--color-danger-border); }

/* The requests page: a person's card with an avatar header, rows that read dates first, and a flat list of decisions
   grouped by day. */
.requests { display: grid; gap: var(--space-3); max-width: 60rem; }
.requests h1 { margin: var(--space-2) 0 0; font-size: 1.4rem; letter-spacing: -.01em; }
.req-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.req-bar .np-seg { min-height: 2.25rem; }
.req-bar .count-pill[hidden], .req-bar .np-seg[hidden] { display: none; }
.req-filter { justify-self: start; }
.req-filter .np-seg-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.req-count { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.req-count[hidden] { display: none; }
.decide-list { display: grid; gap: var(--space-3); }
.decide-none[hidden] { display: none; }
.decide-none .sub { color: var(--color-text-muted); font-size: var(--text-sm); }

/* A person's card */
.decide-group { padding: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-bar); }
.decide-group.highlight { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.decide-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--transition-fast);
  border-radius: var(--radius-lg);
}
.decide-head::-webkit-details-marker { display: none; }
.decide-head::before { content: ""; flex: none; width: 1rem; height: 1rem; margin-right: var(--space-1); background: var(--color-text-muted); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transform: rotate(-90deg); transition: transform var(--transition-fast); }
.decide-group[open] > .decide-head::before { transform: none; }
.decide-head:hover { background: var(--color-surface-muted); }
.decide-group > .decide-head:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.decide-group[open] > .decide-head { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.decide-head b { font-size: var(--text-md); }
.decide-head .muted { font-size: var(--text-sm); margin-left: var(--space-1); }
@media (prefers-reduced-motion: reduce) { .decide-head, .decide-head::before { transition: none; } }

.req-avatar { flex: none; width: 2rem; height: 2rem; font-size: var(--text-xs); }

/* A request: dates, then the kind and note; who has approved; the decision or the buttons */
ul.decide-rows { margin: 0; padding: 0 var(--space-4); }
/* A request being rejected stays in its place, faded, with its Undo and a line that runs out. */
.decide-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--space-5); row-gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); position: relative; }
.decide-row.has-who { grid-template-columns: 11rem minmax(0, 1fr) auto; }
.decide-rows > .decide-row:first-child { border-top: 0; }
.decide-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-weight: 600; }
.decide-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decide-main { display: grid; gap: var(--space-1); min-width: 0; }
.decide-when { color: var(--color-text-strong); font-size: var(--text-md); font-weight: 600; }
.decide-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.decide-top .tag { margin-left: 0; }
.kind-pill { color: var(--color-accent); background: var(--color-accent-soft); border-color: transparent; font-size: var(--text-sm); padding: .05rem .6rem; }
.kind-pill.extra { color: var(--color-text); background: var(--color-surface-muted); }
.tag.overlap, .tag.starts.urgent { color: var(--color-short-optimal-text); background: var(--color-short-optimal-bg); border-color: var(--color-short-optimal); font-size: var(--text-sm); padding: .05rem .6rem; }
.tag.starts { font-size: var(--text-sm); padding: .05rem .6rem; color: var(--color-text); background: var(--color-surface-muted); border-color: transparent; }
.tag.starts.urgent { font-weight: 600; }
.decide-note { display: flex; align-items: center; gap: .35rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.decide-note svg { width: .9rem; height: .9rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.decide-side { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.decide-side .approvers { margin: 0; }
.decide-status { display: grid; justify-items: end; gap: var(--space-1); min-width: 9rem; text-align: right; }
.decide-status .tag { margin: 0; padding: .05rem .7rem; font-size: var(--text-sm); font-weight: 600; }
.decide-by { font-size: var(--text-sm); color: var(--color-text-muted); }
.decide-buttons { display: inline-flex; gap: var(--space-2); }
.decide-row > .decide-side { grid-column: 2; }
.decide-row.has-who > .decide-side { grid-column: 3; } /* in the list of decisions the name takes the first column */
.decide-row > .decide-buttons { grid-column: 3; } /* always the last column, also when the row has no circles of its own */

/* The list of decisions: a small heading for each day, then one card */
.decide-day { margin: var(--space-2) 0 calc(var(--space-1) * -1); font-size: var(--text-sm); color: var(--color-text-muted); }
.decide-day:first-child { margin-top: 0; }
.decide-flat { padding: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-bar); }
.decide-more { justify-self: center; }
@media (max-width: 55rem) {
  .decide-row, .decide-row.has-who { grid-template-columns: minmax(0, 1fr); }
  .decide-row > .decide-side, .decide-row.has-who > .decide-side, .decide-row > .decide-buttons { grid-column: auto; }
  .decide-side { justify-content: flex-start; flex-wrap: wrap; }
  .decide-status { justify-items: start; text-align: left; min-width: 0; }
  .decide-buttons .btn { flex: 1; }
  .decide-buttons { display: flex; }
  .req-bar .np-seg { flex: 1 1 100%; }
  .req-bar .np-seg-btn { flex: 1; }
  .req-filter .np-seg-btn { flex: 1; padding-inline: var(--space-2); white-space: nowrap; font-size: var(--text-sm); }
}
.decide .btn.danger { border-color: var(--color-danger-border); color: var(--color-danger); }
.decide .btn, .request a.btn { display: inline-block; font: inherit; padding: var(--space-1) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: inherit; text-decoration: none; cursor: pointer; }
.decide .btn.primary, .request a.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.decide .btn:hover:not(:disabled) { background: var(--color-accent-soft); }
.decide .btn.primary:hover:not(:disabled) { background: var(--color-accent); filter: brightness(.95); }
.decide .btn:disabled { opacity: .5; cursor: not-allowed; }
.decide .btn:focus-visible, .request a.btn:focus-visible { outline: var(--focus-ring); }

/* A longer header wraps to a second line instead of running off the page */
.site-header { flex-wrap: wrap; }
.lang-switch button { white-space: nowrap; }
@media (max-width: 1440px) { .site-header { gap: .8rem; padding-inline: .8rem; } .site-header .seg { gap: .9rem; } .header-right { gap: .5rem; } .whoami { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; } }

/* A shift planned while the person is away (approved leave): red until someone repairs it */
.shifts-block.on-leave:not(.ghost) { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger-strong); }
.shifts-block.on-leave.selected { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); }

/* The dialog after approving leave that clashes with planned shifts */
.request-actions { flex-wrap: wrap; } .request-actions .btn { white-space: nowrap; }

#decide-dialog { width: min(36rem, 94vw); }

/* The approve dialog: who and what, then what would change a day at a time */
.review-what { display: grid; gap: .3rem; margin: 0 0 var(--space-3); }
.review-name { font-weight: 700; }
.review-kind .kind-pill { font-size: var(--text-sm); }
.diff { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.diff-day { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.diff-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .35rem var(--space-3); background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); }
.diff-head .tag { margin-left: 0; }
.tag.diff-gap { color: var(--color-warn-soft-text); background: var(--color-warn-soft-bg); border-color: transparent; font-weight: 600; }
.diff-lines { display: grid; column-gap: .5rem; row-gap: .2rem; margin: 0; padding: .45rem var(--space-3); grid-template-columns: .6rem 11rem minmax(0, 1fr); } /* dot, person, what happens: the same columns on every line */
.diff-line { display: contents; }
.diff-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; transform: translateY(.02rem); background: var(--color-text-muted); align-self: start; margin-top: .45rem; }
.diff-line.removed .diff-dot { background: var(--color-danger); }
.diff-line.added .diff-dot { background: var(--color-success); }
.diff-line.changed .diff-dot { background: var(--color-accent); }
.fix-check { display: flex; align-items: center; gap: .55rem; margin: 0; font-weight: 600; line-height: 1.2; cursor: pointer; }
.fix-check input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--color-accent); }
.fix-caption { margin: .2rem 0 0 1.65rem; font-size: 12px; line-height: 1.35; color: var(--color-text-muted); }
.fix-note { margin: .2rem 0 0; font-size: var(--text-sm); }
.review-kind .tag { margin-left: 0; }
.fix-check { margin-top: var(--space-3); }

/* Header tabs: a soft hover tint and a tinted pill with an underline for the selected tab. */
.site-header .seg a, .site-header .seg button { position: relative; margin-block: .5rem; border-bottom: 0; border-radius: var(--radius-md, .5rem); transition: background var(--transition-fast, .15s), color var(--transition-fast, .15s); }
.site-header .seg a:hover, .site-header .seg button:hover { background: var(--color-surface-muted); color: var(--color-text-strong); }
.site-header .seg a[aria-current="page"], .site-header .seg button[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.site-header .seg a[aria-current="page"]::after, .site-header .seg button[aria-current="page"]::after { content: ""; position: absolute; bottom: -.5rem; height: 2px; border-radius: 2px; background: var(--color-accent); left: .6rem; right: .6rem; }

/* Lighter look: a quiet header, and on the start page cards with a faint shadow instead of a hard outline. */
/* No nav tabs (login, no access): keep the height the tabs give the header everywhere else. */
.site-header:not(:has(.seg)) { min-height: 3.36rem; }
.site-header { border-bottom-color: transparent; box-shadow: var(--shadow-bar); }
.site-header .brand { font-size: 1.05rem; letter-spacing: -.01em; }
.site-header .whoami { color: var(--color-text-muted); }
main:has(#week-card) .card { border-color: transparent; border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card); }
main:has(#week-card) .balances .card { padding: var(--space-3) var(--space-4); }
main:has(#week-card) h1 { margin: var(--space-2) 0 var(--space-3); font-size: 1.4rem; letter-spacing: -.01em; }
main:has(#week-card) .cal-head.today { background: var(--color-accent-soft); border-radius: var(--radius-md) var(--radius-md) 0 0; }
main:has(#week-card) .cal-col { border-left-color: var(--color-surface-sunken); }
main:has(#week-card) .cal-line { border-top-color: var(--color-surface-sunken); }

/* ---- One button system. Secondary is the default; primary, danger and solid danger are the variants. Quiet and icon buttons keep
   their own rules. Chips, steppers, the generate split button, calendar cells and the date picker are not buttons in this sense. */
:root { --btn-pad: .4rem 1rem; --btn-ease: var(--transition-fast, .15s); }

/* Secondary: white with a grey border; on hover a light fill and a blue border. */
.btn, .request .btn, .decide .btn, .request a.btn, .week-nav a, .people-app .small, .shifts-toolbar button:not(.icon-btn),
.shifts-dialog .actions button, dialog.confirm .small {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-weight: 500; line-height: 1.3; padding: var(--btn-pad); text-decoration: none; cursor: pointer;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-strong);
  transition: background-color var(--btn-ease), border-color var(--btn-ease), color var(--btn-ease);
}
.btn:hover:not(:disabled), .request .btn:hover:not(:disabled), .decide .btn:hover:not(:disabled), .request a.btn:hover, .week-nav a:hover,
.people-app .small:hover:not(:disabled), .shifts-toolbar button:not(.icon-btn):hover:not(:disabled), .shifts-dialog .actions button:hover:not(:disabled),
dialog.confirm .small:hover:not(:disabled) { background: var(--color-surface-muted); border-color: var(--color-accent); color: var(--color-accent); }
.btn:active:not(:disabled), .decide .btn:active:not(:disabled), .week-nav a:active, .people-app .small:active:not(:disabled),
.shifts-toolbar button:not(.icon-btn):active:not(:disabled), .shifts-dialog .actions button:active:not(:disabled) { background: var(--color-surface-sunken); }
.btn:focus-visible, .request a.btn:focus-visible, .week-nav a:focus-visible, .people-app .small:focus-visible,
.shifts-toolbar button:not(.icon-btn):focus-visible, .shifts-dialog .actions button:focus-visible, dialog.confirm .small:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.btn:disabled, .people-app .small:disabled, .shifts-toolbar button:not(.icon-btn):disabled, .shifts-dialog .actions button:disabled, dialog.confirm .small:disabled { opacity: .5; cursor: not-allowed; }

/* Primary: solid blue, a little darker on hover. */
.btn.primary, .request .btn.primary, .decide .btn.primary, .request a.btn.primary, .shifts-dialog .actions button.primary, .info-dialog .actions button {
  font-weight: 600; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); filter: none;
}
.btn.primary:hover:not(:disabled), .request .btn.primary:hover:not(:disabled), .decide .btn.primary:hover:not(:disabled), .request a.btn.primary:hover,
.shifts-dialog .actions button.primary:hover:not(:disabled), .info-dialog .actions button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent) 82%, black); border-color: color-mix(in srgb, var(--color-accent) 82%, black); color: var(--color-on-accent); filter: none;
}
.btn.primary:active:not(:disabled), .decide .btn.primary:active:not(:disabled), .shifts-dialog .actions button.primary:active:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 70%, black); }
.info-dialog .actions button:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }

/* Danger: red text and border, a pale red fill on hover. */
.btn.danger, .decide .btn.danger, .shifts-dialog .actions button.danger { border-color: var(--color-danger-border); color: var(--color-danger); background: var(--color-surface); }
.btn.danger:hover:not(:disabled), .decide .btn.danger:hover:not(:disabled), .shifts-dialog .actions button.danger:hover:not(:disabled) { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }

/* Solid danger: the final "yes, delete". */
.btn.danger.solid, .request-actions .btn.danger.solid, dialog.confirm .danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); font-weight: 600; }
.btn.danger.solid:hover:not(:disabled), .request-actions .btn.danger.solid:hover:not(:disabled), dialog.confirm .danger:hover:not(:disabled) { background: var(--color-danger-strong); border-color: var(--color-danger-strong); color: var(--color-on-accent); }
dialog.confirm .danger { padding: var(--btn-pad); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--btn-ease), border-color var(--btn-ease); }

/* The count on the Requests tab */
.tab-count { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--color-danger); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: 700; line-height: 1.15rem; text-align: center; }
.tab-count[hidden] { display: none; }

/* ---- App-wide look: background, cards, fields, dialogs and chips (the shared components are at the top of this file). */

/* Background: plain, so the white cards stand out. */
body { background: var(--color-bg); }

/* Cards: a faint shadow instead of a hard outline, on every page. */
main .card { border-color: transparent; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }

/* Fields: one border, one radius, one focus ring. */
.people-app input[type=search], .people-app .add input, .workplace-search, .np-form input, .np-form select, dialog.confirm input,
.shifts-dialog select, .ov-end input[type=date], .request-row select, .request-row input[type=text], .dd-btn, .dp-btn {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text);
  transition: border-color var(--btn-ease), box-shadow var(--btn-ease), background-color var(--btn-ease);
}
.request-row select, .request-row input[type=text], .shifts-dialog select, .ov-end input[type=date] { padding: .4rem .7rem; }
.dp-btn { padding: .4rem .7rem; }
.people-app input[type=search]:hover, .people-app .add input:hover, .workplace-search:hover, .np-form input:hover, .np-form select:hover,
.shifts-dialog select:hover, .request-row select:hover, .request-row input[type=text]:hover, .dd-btn:hover, .dp-btn:hover { border-color: var(--color-accent); }
.people-app input[type=search]:focus, .people-app .add input:focus, .workplace-search:focus, .np-form input:focus, .np-form select:focus,
.shifts-dialog select:focus, .ov-end input[type=date]:focus, .request-row select:focus, .request-row input[type=text]:focus, .dd-btn:focus-visible, .dp-btn:focus-visible,
.dd-btn[aria-expanded="true"], .dp-btn[aria-expanded="true"] {
  outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft);
}
dialog.confirm input:focus { outline: 0; border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-bg); }
.dd-btn:hover { background: var(--color-surface); }
.dd-list, .dp-pop { border-color: var(--color-border); border-radius: var(--radius-lg); }

/* Dialogs: the same corners, padding and shadow. */
.shifts-dialog, .info-dialog { border: 0; border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-dialog); }
dialog.confirm { padding: var(--space-5); }
dialog.confirm .actions, .shifts-dialog .actions, .request-actions { gap: var(--space-2); margin-top: var(--space-4); }
dialog.confirm h2, .shifts-dialog h2, dialog.request h2 { font-size: 1.15rem; }

/* Chips and the segmented toggle: pill corners, the same hover and selected colours. */
.chip, .prow .chip { border-radius: var(--radius-pill); transition: background-color var(--btn-ease), border-color var(--btn-ease), color var(--btn-ease); }
.chip:hover:not(:disabled):not([aria-checked="true"]) { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.np-seg-btn { transition: background-color var(--btn-ease), color var(--btn-ease); }
.np-seg-btn[aria-pressed="true"] { color: var(--color-accent); }

/* ---- Details that belong to no single section. */
/* The header stays on one line at laptop widths: tighter tab padding and gaps. */
.site-header { gap: var(--space-3); }
.site-header .seg { gap: .1rem; }
.site-header .seg a, .site-header .seg button { padding: .4rem .6rem; }
.site-header .brand { flex: none; margin-right: 0; }

/* Permissions: a wide table gets the whole page width. */

/* Sign-in page: a proper form instead of browser defaults. */
.stack select { font: inherit; padding: .5rem .7rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); }
.stack select:focus { outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.stack .btn { margin-top: var(--space-2); }

/* The balance bars on the start page: a full-width bar of coloured parts. (The stats table's small .meter rule above would otherwise win.) */
.balance .meter { display: flex; width: auto; vertical-align: baseline; }
.balance .meter > span { display: block; flex: none; height: 100%; }

/* Working-hours day chips: all the same width. */
.day-chip { justify-content: center; min-width: 5.6rem; font-variant-numeric: tabular-nums; }

/* Generate and Repair: two labelled buttons, then an info button. Generate plans the chosen days again from scratch; Repair only fixes
   what no longer fits and leaves every other shift alone. */
.gen-actions { display: inline-flex; align-items: center; gap: var(--space-2); position: relative; }
.gen-split { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); } /* Replan, its chevron and the menu it opens: the menu hangs under these two, wherever the row wraps */
.gen-actions .btn { border-radius: var(--radius-pill); padding: .35rem .9rem; white-space: nowrap; }
.gen-actions .generate, .gen-actions .fill-gaps { min-width: 9.5rem; justify-content: center; } /* "Generate", "Replace" and "Week 2 of 4" take the same room */
.gen-actions .btn .tab-icon { width: 1.05rem; height: 1.05rem; margin: 0; }
.gen-actions .info-btn { width: 2rem; height: 2rem; border: 1px solid var(--color-border-strong); border-radius: 50%; }
.gen-actions .generate:disabled:not(.busy), .gen-actions .fill-gaps:disabled { opacity: .5; }
.gen-actions .generate:not(.primary), .gen-actions .fill-gaps:not(.primary) { color: var(--color-accent); border-color: var(--color-accent); } /* the quieter of the two: outlined, where the likelier one is solid */
.gen-sep { align-self: stretch; width: 1px; margin: .3rem var(--space-1); background: var(--color-border); }
.gen-actions .fill-gaps:disabled:not(.busy) { color: var(--color-text-muted); border-color: var(--color-border-strong); cursor: not-allowed; }
.gen-actions .generate.busy { cursor: progress; }
.gen-actions .generate.busy .tab-icon { display: none; }
.gen-actions .generate.busy::before { content: ""; box-sizing: border-box; flex: none; width: 1.05rem; height: 1.05rem; border: 2px solid currentcolor; border-right-color: transparent; border-radius: 50%; animation: gen-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .gen-actions .generate.busy::before { animation-duration: 2s; } }

/* The review dialog of generating and repairing: wider, the day cards scroll when there are many. */
dialog.request.review { width: min(40rem, calc(100vw - 2rem)); }
dialog.request.review .diff-what { white-space: normal; }
dialog.request.review .gen-changes { max-height: 55vh; margin-bottom: var(--space-3); }
dialog.request.review .gen-warnings li { margin-bottom: var(--space-1); }

/* Notices above the shifts calendar: the result of generating or fixing, and "shifts no longer fit". A message in words, with a colour for
   how it went: green done, amber to look at, red failed. */
.notice { display: flex; gap: var(--space-3); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-short-optimal); border-radius: var(--radius-lg); background: var(--color-notice-bg); color: var(--color-notice-text); align-items: flex-start; }
.notice[hidden] { display: none; }
.notice.ok { border-color: var(--color-success-border); background: var(--color-success-bg); color: var(--color-success); }
.notice.error { border-color: var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger-strong); }
.notice-icon { display: inline-flex; flex: none; }
.notice-icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentcolor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.notice-text { flex: 1; font-weight: 500; }
.notice-close { flex: none; color: inherit; }
.notice-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; }

/* The day cards inside a confirm dialog: the lines wrap instead of running out of the box. */
dialog.confirm .diff-what { white-space: normal; }
dialog.confirm .gen-changes { max-height: 50vh; overflow: auto; margin-bottom: var(--space-3); }

/* The lines under a notice's message: what is still short of people, or what the planner points out. */
.notice-text .notice-sub { margin-top: var(--space-1); font-weight: 400; }
.notice-list { margin: var(--space-1) 0 0; padding: 0 0 0 1.1rem; font-weight: 400; display: grid; gap: .15rem; }
.notice-list .muted { color: inherit; opacity: .75; }
.notice:not(:has(.notice-list)) { align-items: center; } /* a one-line message sits in the middle of the bar */
.notice > .btn { align-self: center; }
.gen-changes .notice-list { padding-left: 0; list-style: none; }
.gen-changes h3 + .notice-list { margin-top: var(--space-1); }

/* "Apply this change too": one box with the checkbox, what it does in bold and the consequence of leaving it off in small type under it. */
.fix-option { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-3) 0 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); cursor: pointer; }
.fix-option input { flex: none; width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--color-accent); }
.fix-option span { display: grid; gap: .15rem; }
.fix-option b { font-weight: 600; line-height: 1.3; }
.fix-option small { font-size: var(--text-sm); line-height: 1.35; color: var(--color-text-muted); font-weight: 400; }
dialog.confirm .fix-option { display: flex; margin: var(--space-3) 0 0; font-weight: 400; }
dialog.confirm .fix-option input { width: 1.1rem; padding: 0; border: 0; box-shadow: none; }
dialog.confirm:has(.diff) { width: min(38rem, calc(100vw - 2rem)); }

/* Waiting for the planner: a spinner with what it is doing, and the same spinner on a button that has been pressed. */
.spinner { flex: none; box-sizing: border-box; width: 1.4rem; height: 1.4rem; border: 3px solid var(--color-accent-tint); border-top-color: var(--color-accent); border-radius: 50%; animation: gen-spin .8s linear infinite; }
.loading-row { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.loading-row > div { display: grid; gap: .15rem; }
.loading-row small { color: var(--color-text-muted); font-size: var(--text-sm); }
dialog.confirm button.busy { cursor: progress; }
dialog.confirm button.busy::before { content: ""; display: inline-block; box-sizing: border-box; width: .9rem; height: .9rem; margin-right: var(--space-2); vertical-align: -.1rem; border: 2px solid currentcolor; border-right-color: transparent; border-radius: 50%; animation: gen-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .spinner, dialog.confirm button.busy::before { animation-duration: 2s; } }

/* Every dialog's title looks the same: bold, the same size, the same room under it. */
dialog h2 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--color-text); }
dialog.confirm h2, dialog.request h2 { margin: 0 0 var(--space-4); }
.review-name { font-size: var(--text-md); }

/* A line of the change cards stays aligned when its text wraps: the dot sits by the first line, not in the middle. */
.diff-lines { align-items: start; }
.diff-what { white-space: normal; }

/* A day of the change cards opens and closes by its header; closed, the header says how many of each kind it holds (red removed, blue shortened, green added). */
.diff-head { cursor: pointer; list-style: none; user-select: none; }
.diff-head::-webkit-details-marker { display: none; }
.diff-head:hover { background: var(--color-surface-sunken); }
.diff-head:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.diff-title { display: inline-flex; align-items: center; gap: var(--space-3); }
.diff-title::before { content: ""; flex: none; width: .45rem; height: .45rem; margin: 0 .2rem 0 .1rem; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(-45deg); transition: transform var(--transition-fast); }
.diff-day[open] > .diff-head .diff-title::before { transform: rotate(45deg); }
.diff-day:not([open]) > .diff-head { border-bottom: 0; }
.diff-n { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-strong); }
.diff-n .diff-dot { margin: 0; width: .5rem; height: .5rem; align-self: center; }
.diff-n.removed .diff-dot { background: var(--color-danger); }
.diff-n.added .diff-dot { background: var(--color-success); }
.diff-n.changed .diff-dot { background: var(--color-accent); }

/* The understaffed hours are a chip in the toolbar, always there and always the same size; its list of where is a pop-over, so opening it moves nothing. */
.sum-chip { position: relative; font-variant-numeric: tabular-nums; }
.sum-chip .sum-where { position: relative; }
.sum-chip summary { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); cursor: pointer; list-style: none; }
.sum-chip summary::-webkit-details-marker { display: none; }
.sum-chip summary::after { content: '\25BE'; }
.sum-chip.bad summary { border-color: var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger-strong); }
.sum-chip.bad summary b { font-weight: 700; }
.sum-chip .sum-where.empty summary { cursor: default; }
.sum-chip .sum-where.empty summary::after { content: none; }
/* Messages float over the page, so the calendar never moves down for them. */
#shifts-result { position: fixed; left: 50%; bottom: 1.2rem; z-index: var(--z-toast); transform: translateX(-50%); width: max-content; max-width: min(40rem, calc(100vw - 2rem)); margin: 0; box-shadow: var(--shadow-toast); background: var(--color-surface); }
#shifts-result.warn { background: var(--color-notice-bg); }
#shifts-result.ok { background: var(--color-success-bg); }
#shifts-result.error { background: var(--color-danger-bg); }
.sum-list {
  position: absolute;
  right: 0;
  top: 100%;
  max-width: calc(100vw - 2rem);
  z-index: 5;
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-4);
  list-style: none;
  display: grid;
  row-gap: .15rem;
  max-height: 50vh;
  overflow: auto;
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-menu);
  column-gap: 0;
}
.sum-list li { display: contents; white-space: nowrap; }
.sum-list li > span { padding: var(--space-1) var(--space-4) var(--space-1) 0; }
.sum-list li > span:last-child { padding-right: 0; }
.sum-list li > span + span { padding-left: var(--space-4); }
.sum-list li.sum-first > span { border-top: 1px solid var(--color-border); }
.sum-head > span { padding-bottom: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.sum-day { font-weight: 600; }
.sum-point small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.sum-time.odd { font-weight: 700; color: var(--color-danger-strong); }
.sum-hours { margin-left: var(--space-2); padding: 0 var(--space-1); border-radius: var(--radius-sm, 4px); background: var(--color-danger-bg); font-weight: 600; }
.sum-time { text-align: right; font-variant-numeric: tabular-nums; }
.shifts-toolbar .plan-status { margin-left: 0; align-self: center; }
.gen-menu { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 30; min-width: 12rem; /* under Replan days and its chevron, where it was opened from */ margin: 0; padding: var(--space-1); list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-bar); }
.gen-menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; cursor: pointer; white-space: nowrap; }
.gen-menu button:hover, .gen-menu button:focus-visible { background: var(--color-surface-muted); }
.gen-weeks { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-1); }
/* "Fill gaps" in a day's header: as solid as Generate, at the right end of the header, since it is what the day needs. */
.tl-day .day-fill { position: sticky; right: var(--space-3); margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); padding: .15rem var(--space-3); font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-on-accent); background: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 999px; cursor: pointer; transition: filter var(--transition-fast); }
.tl-day .day-fill::before { content: "+"; font-weight: 700; }
.tl-day .day-fill:hover, .tl-day .day-fill:focus-visible { filter: brightness(.92); }
.tl-day .day-fill[hidden] { display: none; }

/* Header, user area: an avatar chip with the name and a quiet logout button, instead of bare text and an underlined link. */
.header-right { gap: var(--space-3); }
.user-menu { display: flex; align-items: center; gap: var(--space-2); padding-left: var(--space-3); margin-left: var(--space-1); border-left: 1px solid var(--color-border); }
.user-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: .2rem .75rem .2rem .25rem; border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-strong); font-size: var(--text-sm); font-weight: 600; min-width: 0; }
.user-avatar { flex: none; box-sizing: border-box; width: 1.9rem; height: 1.9rem; padding: .3rem; border-radius: 50%; background: var(--color-accent-soft); fill: none; stroke: var(--color-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.user-chip .whoami { font-size: inherit; color: inherit; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.logout-btn { display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; font-size: var(--text-sm); font-weight: 500; padding: .4rem .7rem; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.logout-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logout-btn:hover { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.logout-btn:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
/* Language switch as one pill-shaped segmented control */
.lang-switch { gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: var(--color-surface-muted); }
.lang-switch button { border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); padding: .2rem .6rem; transition: background var(--transition-fast), color var(--transition-fast); }
.lang-switch button:hover { color: var(--color-text); }
.lang-switch button[aria-current="true"] { background: var(--color-surface); color: var(--color-accent); box-shadow: var(--shadow-card); }
@media (max-width: 1440px) { .logout-label { display: none; } .logout-btn { padding: .45rem; } .user-chip .whoami { max-width: 8rem; } }
@media (max-width: 55rem) { .user-chip .whoami { display: none; } .user-chip { padding: .2rem; } .user-menu { padding-left: var(--space-2); } }

/* Six or more tabs (an admin) do not fit beside the user area on a laptop: the tabs take a row of their own under the brand and the
   user area, instead of the user area dropping alone to a second line. */
@media (max-width: 1720px) {
  .site-header:has(.seg > a:nth-child(6)) { padding-top: .4rem; row-gap: 0; }
  .site-header:has(.seg > a:nth-child(6)) .brand { order: 1; }
  .site-header:has(.seg > a:nth-child(6)) .header-right { order: 2; margin-left: auto; }
  .site-header:has(.seg > a:nth-child(6)) .seg { order: 3; flex: 1 0 100%; overflow-x: auto; }
}

/* Who has approved a request: a circle with the initials of each approver and where they stand in its corner. */
.approvers { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-xs); }
.approver {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  width: 2.25rem;
  height: 2.25rem;
}
.approver .vote {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  box-sizing: content-box;
  right: -0.3rem;
  bottom: -0.3rem;
  width: 0.8rem;
  height: 0.8rem;
}
.approver .vote svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vote-approved { background: var(--color-success); color: var(--color-on-accent); }
.vote-rejected { background: var(--color-danger); color: var(--color-on-accent); }
.vote-pending { background: var(--color-surface-muted); color: var(--color-text-muted); outline: 1px solid var(--color-border-strong); outline-offset: -1px; }

/* Access in the add-person form: a row for each area, its levels as a segmented control. */
.np-perms { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.np-perm { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.25rem; }
.np-perm-name { font-size: var(--text-sm); color: var(--color-text); }
.np-perm .np-seg { background: var(--color-surface); }
.np-perm .np-seg-btn { min-width: 3.6rem; padding: 0.25rem var(--space-3); font-size: var(--text-sm); }
.np-seg-btn:disabled { background: var(--color-surface); color: var(--color-text-muted); opacity: 0.45; cursor: not-allowed; }
.np-seg-btn[aria-pressed="true"]:disabled { background: var(--color-accent-soft); }

/* My hours on the Overview: the period chips of the team stats, a row of quiet tiles, how full the contract is, and where the hours were. */
.my-hours-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.my-hours-head h2, .my-hours h3 { margin: 0; }
.my-hours .stats-periods { margin: 0; }
.my-hours .stats-range { margin: var(--space-2) 0 var(--space-3); color: var(--color-text-muted); font-weight: 400; }
.my-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-3); }
.my-tile { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.my-tile-label { font-size: var(--text-sm); }
.my-tile-value { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
.my-tile-note { font-size: var(--text-xs); }
.my-tile.bad .my-tile-value, .my-tile.bad .my-tile-note { color: var(--color-short-min-text); }
.my-load { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 4.5rem; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; font-size: var(--text-sm); }
.my-load-label { color: var(--color-text-muted); }
.my-load .bar-track { height: 0.6rem; border-radius: 999px; background: var(--color-surface-sunken); overflow: hidden; }
.my-load .bar-fill { border-radius: 999px; }
.my-load.over .bar-fill { background: var(--color-short-min); }
.my-load b { text-align: right; font-variant-numeric: tabular-nums; }
.my-hours h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); }
.my-where li { font-size: var(--text-sm); grid-template-columns: minmax(12rem, 22rem) 1fr 8rem; }
.my-where .bar-workplace .bar-label { padding-left: 0; color: var(--color-text); }
.my-where .bar-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .my-load, .my-where li { gap: var(--space-1); } .my-load b, .my-where .bar-value { text-align: left; } } /* the place and the workplace are both in the label */
@media (max-width: 640px) { .my-where li { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .my-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .my-tile { padding: var(--space-2) var(--space-3); } .my-tile-value { font-size: 1.25rem; } }

/* The head of a location, distribution point or workplace: the name, its actions as buttons on the right, one quiet line under them. */
.detail-head.place-head { align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: 0 0.2rem var(--space-3); }
.place-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; order: 1; }
.place-head .head-actions { display: flex; flex: none; gap: var(--space-2); order: 2; }
.place-head > .sub { flex: 0 0 100%; order: 3; }
.people-app .small.danger { border-color: var(--color-danger-border); color: var(--color-danger); }
.people-app .small.danger:hover:not(:disabled), .people-app .small.danger:focus-visible { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); } /* the general hover turns the text and border to the accent colour: a delete button stays red */
.people-app .small.danger:disabled { border-color: var(--color-border); color: var(--color-text-faint); }
.place-head .sub .quiet-link { padding: 0; font-size: inherit; }

/* Add a person: a calm card with a header, soft inputs, a visible focus and a footer for the actions. */
.np-form.panel { padding: var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); gap: var(--space-5); }
.np-head { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.np-head h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
.np-head .sub { margin: 0; }
/* Add a person: one heading style for every section, access folded away, a light hours grid, a plus on the toggle. */
.np-section-title { margin: 0; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.np-form input, .dd-btn, .ms-box { min-height: 2.5rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); }
.np-form input:hover, .dd-btn:hover, .ms-box:hover { border-color: var(--color-text-faint); }
.np-form input:focus, .ms-box:focus-within, .dd-btn[aria-expanded="true"] { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.np-form input::placeholder { color: var(--color-text-faint); }
.np-form input.invalid { border-color: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent); }
.np-req { margin-left: 0.2rem; color: var(--color-danger); }
.np-seg { border-radius: 999px; padding: 2px; background: var(--color-surface-muted); border-color: transparent; gap: 2px; }
.np-seg-btn { border-radius: 999px; background: transparent; padding: 0.3rem var(--space-4); }
.np-seg-btn + .np-seg-btn { border-left: none; }
.np-seg-btn[aria-pressed="true"] { background: var(--color-surface); box-shadow: var(--shadow-bar); }
.np-bottom { align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.np-legend { margin: 0; font-size: var(--text-sm); }
.np-actions button[type="submit"] { font-weight: 600; box-shadow: var(--shadow-bar); }
.np-actions button[type="submit"]:disabled { box-shadow: none; }
/* A hint standing in for the workplaces ("Pick a location first.") lines up with its label. */
.np-row .np-groups:has(> .sub) { padding-top: 0; }
.np-groups > .sub { display: flex; align-items: center; min-height: 2.25rem; margin: 0; }
.np-field > .np-section-title { margin-bottom: var(--space-2); }
.np-details > summary { cursor: pointer; width: fit-content; font-size: var(--text-sm); color: var(--color-text-muted); padding: var(--space-1) 0; }
.np-details > summary:hover { color: var(--color-text); }
.np-details > summary:focus-visible { outline: var(--focus-ring); }
.np-details[open] > summary { margin-bottom: var(--space-2); }
.np-hours .np-half { height: 2.25rem; border: 1px dashed var(--color-border); background: transparent; }
.np-hours .np-half:hover:not([aria-pressed="true"]) { background: var(--color-surface-muted); }
.np-hours .np-half[aria-pressed="true"] { border-style: solid; border-color: transparent; background: var(--color-accent-soft); }
.np-half .np-tick { font-size: 1rem; }
#people-add-toggle::after { content: "+"; width: auto; height: auto; margin: 0; border: none; font-size: 1.15rem; line-height: 1; transform: none; }
#people-add-toggle[aria-expanded="true"]::after { content: "\00d7"; transform: none; margin: 0; }

/* People tab: search and filters in one card, calm rows, actions on hover, a readable phone layout. */
.people-head:has(+ #people-add[hidden] + #people-filters:not([hidden])) { margin-bottom: 0; border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.people-head:has(+ #people-add[hidden] + #people-filters:not([hidden])) + #people-add + #people-filters { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: var(--space-3); padding-bottom: var(--space-3); box-shadow: none; }
.filter-row .zlabel { font-size: var(--text-xs); color: var(--color-text-faint); }
.shifts-workplaces.filter-chips a { border-color: var(--color-border); color: var(--color-text-muted); }
.shifts-workplaces.filter-chips a[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); font-weight: 500; }
.shifts-workplaces.filter-chips a[aria-pressed="false"]:hover { border-color: var(--color-text-faint); }

/* Rows: an initials avatar, one muted line, the working days as small pills. */
.prow.summary .who { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: 0.05rem; align-items: center; }
.prow.summary .who > .avatar { width: 2.25rem; height: 2.25rem; font-size: var(--text-sm); letter-spacing: 0.02em; margin-block: -0.5rem; }
.prow.summary .who > :not(.avatar) { grid-column: 2; }
.prow.inactive .avatar { color: var(--color-text-muted); }
.prow .days { display: inline-flex; gap: 2px; margin-top: 0.2rem; }
.prow .day { display: inline-grid; place-items: center; padding-inline: 0.15rem; border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--color-text-faint); background: var(--color-surface-muted); text-transform: capitalize; min-width: 1.75rem; height: 1.45rem; }
.prow .day.on { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.prow.summary .job.extra { color: var(--color-text-faint); font-size: var(--text-xs); }

/* Row actions: quiet icons side by side, the remove icon only when the row is hovered or focused (always on touch screens). */
.prow .acts { align-items: center; gap: var(--space-1); }
.icon-btn.prow-edit:not(.done) { color: var(--color-text-muted); }
.icon-btn.prow-edit:not(.done):hover, .icon-btn.prow-edit:not(.done):focus-visible { color: var(--color-accent); }
.icon-btn.prow-remove { color: var(--color-text-muted); }
.icon-btn.prow-remove:hover, .icon-btn.prow-remove:focus-visible { color: var(--color-danger); }
@media (hover: hover) {
  .prow:not(.editing) .icon-btn.prow-remove { opacity: 0; transition: opacity var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }
  .prow:hover .icon-btn.prow-remove, .prow:focus-within .icon-btn.prow-remove { opacity: 1; }
}
.prow-head { font-size: var(--text-xs); color: var(--color-text-muted); border-bottom-color: var(--color-border); }
.prow-head small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-text-faint); }

/* The row being edited: a card with the same look as the add form. */
.prows .prow.summary.editing { background: var(--color-surface); box-shadow: inset 3px 0 0 var(--color-accent); }
.prow-hours.editing { max-width: none; padding: var(--space-4) 0 var(--space-2); border-top: 1px solid var(--color-border); margin-top: var(--space-2); }
.prow-hours.editing .prow-help { margin: 0; max-width: 52rem; }
.prow-hours.editing .np-field { max-width: 52rem; }
.prow-hours .prow-foot { margin-left: 0; justify-content: flex-end; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.prow-hours .prow-foot .small { padding: 0.45rem var(--space-4); }

/* Phone: name and icons on one line, then only the distribution points the person works in, each with its name. */
@media (max-width: 55rem) {
  .prow.summary .who { grid-column: 1; grid-row: 1; }
  .prow.summary .acts { grid-column: 2; grid-row: 1; align-self: start; }
  .prow.summary .cell { grid-column: 1 / -1; grid-row: auto; }
  .prow.summary .cell.empty { display: none; }
  .prow.summary .cell[data-label]::before { content: attr(data-label); flex: 0 0 100%; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); }
  .prow.summary.editing .cell[data-label] { padding-top: var(--space-1); }
}
.filter-row .zlabel { white-space: nowrap; }

/* People table: the avatar is centred on the whole name block; job, hours and days share one wrapping line; quiet chips. */
.prow.summary .who > .avatar { grid-row: 1 / -1; align-self: center; }
.prow.inactive .avatar { background: var(--color-surface-muted); }
.prow .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem var(--space-3); min-width: 0; }
.prow .meta .days { margin-top: 0; }
.prow.summary { align-items: center; padding-block: var(--space-3); }
.prow.summary:not(.editing) .cell .chip { background: var(--color-surface-muted); border-color: transparent; color: var(--color-text); }
.prow.summary:not(.editing):hover .cell .chip { background: var(--color-surface); border-color: var(--color-border); }
/* A clear empty marker, an edit pencil that is always visible but quiet, and filter chips that only light up when picked. */
.prow .cell .none { display: block; width: 100%; text-align: left; color: var(--color-text-faint); font-size: var(--text-md); }

/* The days they work: a column of its own (Name, Days, one column per distribution point, actions), so the pills line up. */
.prow .acts { justify-content: flex-end; }
.prow .days-col { align-items: center; min-width: 0; }
@media (max-width: 55rem) {
  .prow.summary .days-col { grid-column: 1 / -1; grid-row: 2; }
  .prow.summary .days-col:empty { display: none; }
}
.filter-row .zlabel { width: 10rem; }
.icon-btn.prow-edit:not(.done) { opacity: 0.55; transition: opacity var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }
.prow:hover .icon-btn.prow-edit, .prow:focus-within .icon-btn.prow-edit, .icon-btn.prow-edit:hover { opacity: 1; }
.people-empty { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-6, 3rem) var(--space-4); text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }

/* The result row, the last row of the filter card: the count (a small pill like the other counts in the app) and the clear chip are one height and centred on one line. */
.filter-count { gap: var(--space-3); align-items: center; }
.count-pill { padding: 0.1rem var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-strong); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; padding-inline: var(--space-3); }

/* Sortable column headers */
.prow-sort { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; color: inherit; cursor: pointer; }
.prow-sort:hover { color: var(--color-text); }
.prow-sort:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-md); }
.prow-sort:not([aria-sort="none"]) { color: var(--color-accent); }
/* "Clear filters": an outlined pill with a cross, the same shape as the filter chips next to it. */
.clear-chip { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; padding: 0.1rem var(--space-3) 0.1rem var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.clear-chip::before { content: "\00d7"; font-size: 1.1rem; line-height: 1; }
.clear-chip:hover { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); }
.clear-chip:focus-visible { outline: var(--focus-ring); }
.clear-chip[hidden] { display: none; }

/* Sortable headers, laid out in line: the label (with its small second line) and the arrow beside it, the arrow level with the first line. */
.prow-head .prow-sort { display: inline-flex; align-items: flex-start; gap: var(--space-2); width: fit-content; max-width: 100%; }
.prow-sort > span { display: inline-grid; }
.prow-sort::after { content: ""; flex: none; width: 0.38rem; height: 0.38rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-15%) rotate(45deg); opacity: 0; transition: opacity var(--transition-fast); margin-top: 0.2rem; }
.prow-sort[aria-sort="ascending"]::after { transform: translateY(15%) rotate(-135deg); margin-top: 0.34rem; }
.prow-sort:not([aria-sort="none"])::after { opacity: 1; }
.prow-sort[aria-sort="none"]:hover::after { opacity: 0.45; }
.count-pill, .clear-chip { display: inline-flex; align-items: center; box-sizing: border-box; height: 1.75rem; padding-block: 0; line-height: 1; }
/* Header labels share one top line (the point columns have a second line under theirs); the arrow sits on the label's centre line. */
.prow-head { align-items: start; padding-block: var(--space-3); }

/* Working time in one column: the total, then the days as pills, then any unusual hours. */
.prows.has-days .prow-head, .prows.has-days .prow.summary { grid-template-columns: minmax(11rem, 16rem) 11rem repeat(var(--points, 0), minmax(8rem, 1fr)) 6.5rem; }
@media (max-width: 70rem) { .prows.has-days .prow-head, .prows.has-days .prow.summary { grid-template-columns: minmax(9rem, 14rem) 9.5rem repeat(var(--points, 0), minmax(8rem, 1fr)) 6.5rem; padding-inline: var(--space-3); } }
.prow .days-col { display: grid; gap: 0.3rem; align-content: center; justify-items: start; }
.prow .days-col .days { margin-top: 0; }
.prow .hours-total { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); line-height: 1.2; }
.prow .days-col .job.extra { white-space: nowrap; }
@media (max-width: 55rem) {
  .prow.summary .days-col { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem var(--space-3); }
}

/* Narrow screens: the row actions stay at the card's right edge, and every filter label sits on its own line above its chips. */
@media (max-width: 55rem) {
  .prows.has-days .prow.summary > .acts, .prow.summary > .acts { justify-self: end; }
  .filter-row .zlabel { width: 100%; }
  .filter-count { align-items: center; }
  .filter-count .zlabel { width: 100%; }
}
@media (max-width: 55rem) {
  .prows.has-days .prow.summary { grid-template-columns: minmax(0, 1fr) auto; }
}
/* The edit icon is the one at the edge; the remove icon (shown on hover) takes the slot to its left. */
.prow .acts { flex-direction: row-reverse; }

/* Shifts filters, in line with the People tab: small uppercase labels, a calmer card, a count row with a clear chip. */
.filters-card { border-radius: var(--radius-lg); }
.shifts-workplaces .wp-group { min-width: 12rem; font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; }
.people-filter .wp-group { align-self: center; }
.shifts-workplaces.workplaces-view .wp-group { margin-right: var(--space-2); }
.filters-card > .wp-count { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3); }
.filters-card > .wp-count .wp-group { min-width: 12rem; margin-right: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }
.shifts-workplaces.filter-chips a, .filters-card .shifts-workplaces a { border-color: var(--color-border); }
.filters-card .shifts-workplaces a[aria-pressed="false"] { color: var(--color-text-muted); }
.filters-card .shifts-workplaces a[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); font-weight: 500; }
.filters-card .shifts-workplaces a[aria-pressed="true"]::before { opacity: 1; }
@media (max-width: 55rem) { .shifts-workplaces .wp-group, .filters-card > .wp-count .wp-group { flex: 0 0 100%; min-width: 0; margin-right: 0; } }

/* Calendar column headers read like the People table's: small, uppercase, muted, the same weight. */
.tl-head .tl-point, .tl-head .tl-wp { font-size: var(--text-xs); color: var(--color-text-muted); }
.shifts-head { font-size: var(--text-sm); }

/* "Show people away" as a switch, like the other on/off choices. */
.shifts-toolbar .away-toggle { gap: var(--space-2); color: var(--color-text-muted); }

/* Shifts on a phone: the replan bar and the week toolbar wrap instead of running off the screen. */
@media (max-width: 55rem) {
  .shifts-top .gen-group, .shifts-top .gen-view { flex-wrap: wrap; width: 100%; box-sizing: border-box; border-radius: var(--radius-lg); }
  .shifts-top .gen-days { flex-wrap: wrap; }
  .shifts-top .gen-actions { flex-wrap: wrap; row-gap: var(--space-2); }
  .shifts-toolbar { flex-wrap: wrap; row-gap: var(--space-2); }
  .shifts-toolbar .toolbar-end { flex-wrap: wrap; margin-left: 0; width: 100%; gap: var(--space-2) var(--space-3); }
}
/* The per-point shortcut chips are quieter than the real filter chips. */
.shifts-workplaces a[data-pick-point] { border-style: dashed; font-size: var(--text-sm); }
.filters-card .shifts-workplaces a[data-pick-point][aria-pressed="true"] { border-style: solid; }
.shifts-workplaces a[data-all-workplaces]::before { display: none; }

/* Shifts: the filters bar, the day bars, the week toolbar and the dialogs. */
/* The filters card is a compact bar; the chip rows open under it. */
.filters-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); }
.filters-toggle { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; height: 1.75rem; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.filters-toggle:hover { border-color: var(--color-text-faint); background: var(--color-surface-muted); }
.filters-toggle:focus-visible { outline: var(--focus-ring); }
.filters-toggle::after { content: ""; margin-bottom: 0.15rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--transition-fast); width: 0.9rem; height: 0.9rem; }
.filters-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -0.1rem; }
.filters-body { border-top: 1px solid var(--color-border); }
.filters-body[hidden] { display: none; }
.filters-body .workplaces-view:first-child { padding-top: var(--space-3); }
.filters-card { margin-bottom: var(--space-3); }

/* Narrow bars show the initials; the whole name comes back on hover. */
.shifts-block .name .short { display: none; }
.tl .shifts-block.narrow .name .full { display: none; }
.tl .shifts-block.narrow .name .short { display: inline; font-weight: 700; letter-spacing: 0.02em; }
.tl .shifts-block.narrow:not(.active):is(:hover, :focus-within, .selected) .name .full { display: inline; }
.tl .shifts-block.narrow:not(.active):is(:hover, :focus-within, .selected) .name .short { display: none; }

/* Lighter day bars: a soft surface, a small chevron, the hours planned that day beside the name. */
.tl-day { background: var(--color-surface); border-top: 1px solid var(--color-border); font-weight: 600; }
.tl-day.past { background: var(--color-past); }
.tl-day .day-toggle { width: 1.5rem; height: 1.5rem; border-color: transparent; background: var(--color-surface-muted); font-size: 0; color: var(--color-text-muted); line-height: 0; margin-block: -0.1rem; }
.tl-day .day-toggle::after { content: ""; margin-bottom: 0.12rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--transition-fast); width: 1rem; height: 1rem; }
.tl-day .day-toggle[aria-expanded="false"]::after { transform: rotate(-135deg); margin-bottom: -0.1rem; }
.tl-day .day-toggle:hover { background: var(--color-border); color: var(--color-text); }
.tl-day .day-total { font-weight: 400; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.tl-day .day-total { margin-left: var(--space-2); }
.tl-day .day-total::before { content: "·"; margin-right: var(--space-2); }

/* The week toolbar: a quieter legend with round dots. */
.shifts-toolbar .legend { gap: var(--space-3); color: var(--color-text-muted); }
.shifts-toolbar .legend-item { font-size: var(--text-sm); }
.shifts-toolbar .swatch { width: 0.65rem; height: 0.65rem; border-radius: 50%; }

/* The shift dialogs: the app's own time dropdowns, a plain Cancel, a quiet red Remove on the left, a Save that looks off until it can be used. */
.shifts-dialog { overflow: visible; }
.shifts-dialog .times .dd { width: 6.5rem; }
.shifts-dialog .times .dd-list { max-height: 12rem; }
.shifts-dialog .actions { align-items: center; }
.shifts-dialog .actions .remove { margin-right: auto; border-color: transparent; background: none; }
.shifts-dialog .actions .remove:hover:not(:disabled) { background: var(--color-danger-bg); }
.shifts-dialog .actions button.primary:disabled { opacity: 1; background: var(--color-surface-muted); border-color: var(--color-border); color: var(--color-text-faint); }

/* Phone: a narrower name column, so the time axis gets room. */
@media (max-width: 55rem) {
  .tl-point { font-size: var(--text-xs); }
}
@media (max-width: 55rem) {
  .tl-wp { overflow-wrap: break-word; font-size: var(--text-sm); }
}

/* Chevrons drawn as an icon, so they are centred exactly on the line of text next to them. */
.tl-day .day-toggle::after, .filters-toggle::after { content: ""; flex: none; margin: 0; border: 0; transform: none; background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transition: transform var(--transition-fast); }
.tl-day .day-toggle[aria-expanded="false"]::after, .filters-toggle[aria-expanded="true"]::after { transform: rotate(180deg); margin: 0; }

/* The replan controls live in the filters bar: one row, no second box. */
.filters-bar .gen-group { margin: 0 0 0 auto; align-self: center; }
.filters-bar .gen-view, .filters-bar .workplaces-view.gen-view { border: 0; box-shadow: none; background: none; padding: 0; min-height: 0; }
.filters-bar .shifts-daychips { margin: 0; }
@media (max-width: 55rem) {
  .filters-bar .gen-group, .filters-bar .gen-view { width: 100%; margin-left: 0; }
}
/* A row of the calendar lights up under the pointer. */
.tl-row:not(.past):hover .tl-name { background: var(--color-surface-muted); }
@media (max-width: 55rem) {
  .filters-bar .gen-view, .filters-bar .gen-days, .filters-bar .gen-actions, .filters-bar .gen-group { flex-wrap: wrap; row-gap: var(--space-2); }
  .filters-bar .gen-view { padding-top: var(--space-1); }
}

/* Day bars with room to breathe, one hairline between them (the old inset line doubled the border). */
.tl-day { padding-block: var(--space-3); box-shadow: none; }
.tl-day.today { box-shadow: inset 3px 0 0 var(--color-accent); }

/* Details of the Shifts calendar. */
.who-list .who-avatar { flex: none; width: 1.7rem; height: 1.7rem; font-size: var(--text-xs); }
.who-list .off .who-avatar { background: var(--color-surface-muted); color: var(--color-text-faint); }
.who-list label { gap: var(--space-3); padding-block: 0.45rem; }
.who-list label:hover { border-color: var(--color-text-faint); }
.shifts-toolbar .nav-group .icon-btn { border-color: var(--color-border); color: var(--color-text-muted); background: var(--color-surface); }
.shifts-toolbar .nav-group .icon-btn:hover:not(:disabled), .shifts-toolbar .nav-group .icon-btn:focus-visible { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }

/* "Now": a thin red line across today's rows, with its time on the axis. */
.tl-now { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; pointer-events: none; background: repeating-linear-gradient(to bottom, var(--color-danger) 0 6px, transparent 6px 10px); } /* above the bars, below the sticky name column */
.tl-now[hidden], .now-tag[hidden] { display: none; }
.tl-axis .now-tag { position: absolute; top: 50%; z-index: 1; transform: translate(-50%, -50%); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-danger); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }

/* What is over fades: a translucent layer that softens and desaturates the bars and bands beneath it. Same stacking level as the bars but later,
   so it covers them; a selected or hovered bar sits higher and comes back at full strength. */
.tl-elapsed { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--color-surface) 50%, transparent); -webkit-backdrop-filter: saturate(0.35); backdrop-filter: saturate(0.35); }
.tl-elapsed.until-now { right: auto; }

/* Home calendar, "now" and what is over: the same fade and dashed line as the Shifts tab, drawn down the day columns. */
.cal-elapsed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; background: color-mix(in srgb, var(--color-surface) 50%, transparent); -webkit-backdrop-filter: saturate(0.35); backdrop-filter: saturate(0.35); }
.cal-now { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; margin-top: -1px; pointer-events: none; background: repeating-linear-gradient(to right, var(--color-danger) 0 6px, transparent 6px 10px); }
.cal-axis .now-tag { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-danger); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-axis span[hidden] { display: none; }

/* ==== Overview: the same language as People and Shifts ==== */

/* Section titles: small, uppercase, readable (the faint grey was too pale for text). */
.np-section-title { color: var(--color-text-muted); }
#balance-h.np-section-title { margin: var(--space-5) 0 var(--space-3); }
#balance-h .muted { font-weight: 600; letter-spacing: inherit; }
.week-head, .my-hours-head, #upcoming-card > h2 { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); }
#week-card h2, #my-hours h2, #upcoming-card h2 { margin-block: 0; font-size: var(--text-md); }
.week-hint { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Working hours: a subtitle line under the heading, in line with the page's left edge, not a card. */
main:has(#week-card) .card.hours { padding: 0; border: 0; background: none; box-shadow: none; margin-bottom: 0; }
.card.hours h2 { font-size: var(--text-sm); }
.day-chip { background: var(--color-surface-muted); color: var(--color-text); border: 1px solid var(--color-border); }
.day-chip b { color: var(--color-text-strong); }
@media (min-width: 40rem) { .balances { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 84rem) { .balances { grid-template-columns: repeat(6, minmax(0, 1fr)); } .balance h3 { min-height: 2.5em; } }
.balance h3 { font-size: var(--text-xs); line-height: 1.25; white-space: normal; text-wrap: balance; color: var(--color-text-muted); }
@media (max-width: 40rem) { .balance .big-number { font-size: 1.5rem; } .stats dt { white-space: normal; } }
.balance-of, .stats dt, .upcoming .by { font-size: var(--text-sm); }

/* Week header: the action and the arrows on one line. */
.week-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.week-nav a.week-arrow { width: 2.1rem; height: 2.1rem; padding: 0; color: var(--color-text-muted); border-color: var(--color-border); }
.week-nav a.week-arrow:hover, .week-nav a.week-arrow:focus-visible { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-soft); }
.week-arrow::after { content: ""; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.week-arrow.next::after { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }

/* Calendar text: readable without zooming. */
.cal-axis span { font-size: var(--text-sm); }
.cal-block b, .cal-extra b, .cal-leave b { font-size: var(--text-sm); }
@media (max-width: 40rem) { .cal-block span { display: none; } .cal-block b { white-space: normal; } } /* the place is in the tooltip; the times are what fits */

/* My hours: the period is a segmented control, the tiles read at a glance, the bars have a track. */
.np-seg a.np-seg-btn { display: inline-flex; align-items: center; text-decoration: none; }
.np-seg-btn[aria-current="true"] { background: var(--color-surface); box-shadow: var(--shadow-bar); color: var(--color-accent); font-weight: 600; }
.my-tile-label { color: var(--color-text); }
.my-load, .my-where li { grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr) 8.5rem; }
.my-where .bar-track { height: 0.6rem; border-radius: 999px; background: var(--color-surface-sunken); overflow: hidden; }
.my-where .bar-fill, .my-where .bar-workplace .bar-fill { height: 100%; margin: 0; opacity: 1; border-radius: 999px; }
@media (max-width: 640px) { .my-load, .my-where li { grid-template-columns: 1fr; } }

/* Upcoming time off: one line per request; the remove cross shows on hover. */
.upcoming .state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.upcoming .approvers { margin-top: 0; gap: var(--space-3); }
.approver .vote svg { width: 0.6rem; height: 0.6rem; }
.upcoming li { padding-block: var(--space-3); }
.upcoming .act .prow-remove { color: var(--color-text-muted); }
@media (hover: hover) {
  .upcoming .act .prow-remove { opacity: 0; transition: opacity var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }
  .upcoming li:hover .prow-remove, .upcoming li:focus-within .prow-remove { opacity: 1; }
}
@media (max-width: 40rem) {
  .upcoming { display: block; }
  .upcoming li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when act" "what what" "state state"; gap: var(--space-2) var(--space-3); }
  .upcoming .when { grid-area: when; } .upcoming .what { grid-area: what; } .upcoming .state { grid-area: state; } .upcoming .act { grid-area: act; }
}

/* Overview on a phone: stacked stats, a header that wraps cleanly, a full-width period control, times that fit the day columns. */
@media (max-width: 40rem) {
  .balance .stats { grid-template-columns: 1fr; gap: var(--space-1); }
  .balance .stats div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
  .balance .stats dd { font-size: var(--text-base); }
  .week-head { flex-direction: column; align-items: stretch; }
  .week-actions { justify-content: space-between; }
  .my-hours .stats-periods.np-seg { display: flex; flex-wrap: nowrap; width: 100%; }
  .my-hours .np-seg-btn { flex: 1; justify-content: center; padding-inline: var(--space-2); white-space: nowrap; }
  main:has(#week-card) #week-card { padding-inline: var(--space-3); }
  .cal { grid-template-columns: 2.9rem repeat(5, minmax(0, 1fr)); gap: 0 1px; }
  .cal-block, .cal-extra, .cal-leave { padding-inline: 2px; left: 2px; right: 2px; }
  .cal-block b, .cal-extra b { font-size: var(--text-xs); }
  .cal-leave { left: 0; right: 0; }
}
.np-seg-btn { color: var(--color-text); }

/* A scrolling menu fades at its edge so it reads as scrollable; a whole-day leave block writes its name along its height on a phone. */
@media (max-width: 55rem) {
  .site-header:has(.seg > a:nth-child(6)) .seg { scrollbar-width: none; -webkit-mask: linear-gradient(to right, currentColor calc(100% - 2rem), transparent); mask: linear-gradient(to right, currentColor calc(100% - 2rem), transparent); padding-right: 2rem; }
  .site-header:has(.seg > a:nth-child(6)) .seg::-webkit-scrollbar { display: none; }
}
@media (max-width: 40rem) {
  .cal-leave.tall b { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; align-self: flex-start; }
  .cal-leave:not(.tall) b { overflow-wrap: anywhere; }
}

/* The request dialog: the whole-days choice is a switch, as elsewhere; a short block on a phone shows only its start. */
.request-whole { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; cursor: pointer; color: var(--color-text-muted); }
@media (max-width: 40rem) { .request-whole { margin-left: 0; } .cal-block.short .to { display: none; } }

/* Longer words (Dutch) must not run into each other: the stats are label-and-value rows at every width, headings break inside long words. */
.balance .stats { grid-template-columns: 1fr; gap: var(--space-1); }
.balance .stats div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.balance .stats dt { white-space: normal; }
.balance .stats dd { font-size: var(--text-base); }
.cal-block .to { font-style: normal; }
.balance h3 { overflow-wrap: break-word; hyphens: auto; }

/* The approve dialog: who and what in a quiet band, then a heading and the day cards, and the schedule option as a switch. */
#decide-dialog .review-what { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-muted); }
#decide-dialog .review-what .req-avatar { width: 2.5rem; height: 2.5rem; font-size: var(--text-sm); }
#decide-dialog .review-who { flex: 1 1 10rem; min-width: 0; display: grid; gap: .1rem; }
#decide-dialog .review-name { font-size: var(--text-md); font-weight: 700; }
#decide-dialog .review-what .tag { margin: 0; }
.review-section { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
#decide-dialog .diff-day { border-radius: var(--radius-lg); }
#decide-dialog .diff-head { padding: var(--space-2) var(--space-3); }
#decide-dialog .diff-n { font-size: var(--text-sm); }
#decide-dialog .diff-who { font-weight: 600; }
#decide-dialog .diff-title::before { width: 1rem; height: 1rem; margin: 0; border: 0; background: var(--color-text-muted); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transform: rotate(-90deg); }
#decide-dialog .diff-day[open] > .diff-head .diff-title::before { transform: none; }
#decide-dialog .fix-option { align-items: center; margin-top: var(--space-4); border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) { #decide-dialog .diff-title::before { transition: none; } }
.decide-head .approvers { margin: 0 0 0 auto; }
.decide-any { font-size: var(--text-sm); color: var(--color-text-muted); }
.decide-head .decide-any { margin-left: auto; }
.decide-head .decide-any + .approvers { margin-left: var(--space-3); }
#decide-dialog .review-waiting { margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-text-strong); font-size: var(--text-sm); line-height: 1.45; }
.req-search { box-sizing: border-box; height: 2.25rem; flex: 0 1 16rem; min-width: 0; font: inherit; padding: 0 .75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); transition: border-color var(--btn-ease), box-shadow var(--btn-ease); }
.req-search[hidden] { display: none; }
.req-search:hover { border-color: var(--color-accent); }
.req-search:focus { outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.decide-row.held > :not(.decide-buttons) { opacity: .4; }
.decide-row.held .decide-buttons { align-items: center; }
.decide-row.held::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--color-danger); transform-origin: left; animation: undo-run var(--undo-ms, 6s) linear forwards; animation-play-state: var(--undo-state, running); }
@keyframes undo-run { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .decide-row.held::after { animation: none; } }
@media (max-width: 55rem) { .req-search { flex: 1 1 100%; } }

/* An approver's circle names the person and where they stand when hovered or focused. */
.approver[data-tip] { cursor: default; }
.approver[data-tip]:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.approver[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + .45rem); z-index: var(--z-toast); transform: translateX(-50%); padding: .25rem .6rem; border-radius: var(--radius-md); background: var(--color-toast); color: var(--color-on-accent); font-size: var(--text-sm); font-weight: 400; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); }
.approver[data-tip]:hover::after, .approver[data-tip]:focus-visible::after { opacity: 1; }

/* A request that leaves folds shut, so what is below it does not jump. A person's last request takes the whole card. */
.folding { overflow: hidden; opacity: 0; transition: height .2s ease, opacity .2s ease, padding .2s ease, margin .2s ease, border-width .2s ease; }
.decide-row.folding { padding-block: 0; border-top-width: 0; }
.decide-group.folding { margin-bottom: calc(var(--space-3) * -1); border-width: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .folding { transition: none; } }
#decide-dialog .fix-option small { color: var(--color-text); } /* muted on the grey option box was 4.4:1 */
@media (max-width: 55rem) { .stats-head .stats-periods.np-seg { display: flex; flex-wrap: nowrap; width: 100%; } .stats-head .np-seg-btn { flex: 1; justify-content: center; padding-inline: var(--space-2); white-space: nowrap; font-size: var(--text-sm); } }

.stats-workplaces .stats-table thead th { white-space: normal; vertical-align: bottom; }
@media (max-width: 40rem) {
  .stats-workplaces .stats-avatar { display: none; }
  .stats-workplaces .stats-table th, .stats-workplaces .stats-table td { padding-inline: var(--space-1); }
  .stats-workplaces .stats-table tbody th { min-width: 0; white-space: normal; position: static; }
  .stats-workplaces .meter { display: block; width: 100%; margin: 0 0 2px; }
  .stats-workplaces .meter-text { min-width: 0; }
}
/* The matrix needs 78rem: below that it scrolls sideways inside its card (the page itself does not). */
@media (max-width: 82rem) {
  .perm-panel { overflow-x: auto; }
  .perm-table .perm-name { position: sticky; left: 0; z-index: 1; }
  .perm-table thead .perm-name { z-index: 2; }
  .perm-table thead tr:first-child th, .perm-table thead tr:nth-child(2) th { position: static; }
  .perm-table thead tr:first-child th.perm-name { position: sticky; left: 0; z-index: 3; }
  .perm-wrap::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 2.5rem; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: linear-gradient(to right, transparent, var(--color-surface)); pointer-events: none; transition: opacity var(--transition-fast); }
  .perm-wrap.at-end::after { opacity: 0; }
}

/* Workplaces tab: the detail pages. Headings use the shared uppercase label; people are tiles with an initials circle. */
.two-cols h3, .detail > h3, .ov-group h4, .staff-title { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.detail > h3 { margin-top: var(--space-2); }
.place-head .small.danger { border-color: transparent; background: none; }
.place-head .small.danger:hover:not(:disabled), .place-head .small.danger:focus-visible { border-color: var(--color-danger-border); }
.place-head .small.danger:disabled { opacity: .6; }
.people-app .panel.staffing { gap: var(--space-2) var(--space-5); padding: var(--space-3) var(--space-4); }
.staffing > * { min-width: 0; }
.staff-title { margin: 0; }
.staff-field { flex: 0 1 auto; justify-content: flex-start; }
.staff-field label { font-size: var(--text-sm); }
.staff-field .sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.ov-toggle { border-color: var(--color-border-strong); color: var(--color-text-strong); }
.ov-toggle:hover, .ov-toggle:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
.ov-toggle[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-on-accent); }
.staffing > .small { margin-right: auto; }
.staff-source { color: var(--color-text-muted); font-size: var(--text-sm); }
.ov-none { color: var(--color-text-muted); }
.ov-list { color: var(--color-text); }
.ov-group h4 { margin-bottom: var(--space-1); }
.workplace-search { min-height: 2.25rem; box-sizing: border-box; margin: var(--space-2) 0; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-sm); }
.two-cols .tile { background: var(--color-surface); }
.two-cols .tile:hover:not(.ghost):not(.dragging) { background: var(--color-surface-muted); }
.two-cols .tile.muted-tile { color: var(--color-text); }
.two-cols .tile.muted-tile .what b, .two-cols .tile.muted-tile .what a { font-weight: 500; }
.tile .rank { border-color: transparent; background: var(--color-surface-muted); color: var(--color-text-muted); }
.tile-avatar { flex: none; width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
.tile .act { border-color: transparent; background: none; }
.tile .act[data-act="add"] { --act-color: var(--color-text-muted); }
.tile .act[data-act="add"]:hover, .tile .act[data-act="add"]:focus-visible { color: var(--color-success); }
.tile .act[data-act="remove"]:hover, .tile .act[data-act="remove"]:focus-visible { color: var(--color-danger); }
.tile .act[data-act="remove"] { --act-color: var(--color-text-faint); }
@media (hover: hover) {
  .tile .act[data-act="remove"] { opacity: 0; transition: opacity var(--transition-fast), background-color var(--transition-fast); }
  .tile:hover .act[data-act="remove"], .tile:focus-within .act[data-act="remove"] { opacity: 1; }
  .tile .grip { opacity: 0; transition: opacity var(--transition-fast); }
  .tile:hover .grip, .tile:focus-within .grip, .tile.dragging .grip { opacity: 1; }
}
ul.tiles.cannot { max-height: 36rem; overflow-y: auto; overscroll-behavior: contain; }
.dist-table thead th, .dist-table th[scope="col"] { vertical-align: bottom; }
.dist-cell { border-color: var(--color-border-strong); color: var(--color-text-strong); }
.dist-cell:not(:disabled):hover { border-color: var(--color-accent); color: var(--color-accent); }
@media (max-width: 40rem) {
  .ov-summary { grid-template-columns: minmax(0, 1fr); }
  .ov-group { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; column-gap: var(--space-2); }
  .staff-field { flex-wrap: wrap; }
}
.staff-source { flex: 0 1 auto; }
.ov-del { color: var(--color-text-faint); }
.ov-del:hover, .ov-del:focus-visible { color: var(--color-danger-strong); }
.workplace-row.all-row, .workplace-row.all-row:hover { color: var(--color-text-muted); }
.workplace-row .count, .tile .rank { color: var(--color-text); }
.tile .act[data-act="remove"] { --act-color: var(--color-text-muted); }
.tile .tie { --tie-color: var(--color-text-muted); }
.staffing > .small { font-size: var(--text-sm); padding: .3rem .8rem; }
.detail > .sub { max-width: 75ch; }
.master-detail .detail { scroll-margin-top: var(--space-3); }
.staffing > .staff-source { margin: 0; }
/* Distances: a matrix of few, important numbers, so it is drawn large */
.dist-table th, .dist-table td { padding: var(--space-4) var(--space-5); }
.dist-table th[scope="col"], .dist-table th[scope="row"] { min-width: 9rem; }
.dist-table th .nm { font-size: var(--text-lg); }
.dist-table th .loc { margin-top: 2px; font-size: var(--text-sm); }
.dist-table thead th { border-bottom-color: var(--color-border-strong); }
.dist-cell { min-width: 6.5rem; padding: 0.4rem 1.2rem; font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.dist-table .stepper { margin: 0 auto; font-size: var(--text-lg); }
.dist-table .stepper input[type=number] { width: 4rem; padding: 0.35rem 0.2rem; }
.dist-table .stepper .step { width: 2.4rem; }
@media (max-width: 40rem) {
  .dist-table th, .dist-table td { padding: var(--space-3); }
  .dist-table th[scope="col"], .dist-table th[scope="row"] { min-width: 0; }
  .dist-cell { min-width: 0; padding-inline: var(--space-3); }
}
@media (min-width: 40.01rem) { .dist-table { table-layout: fixed; } .dist-table thead td:first-child { width: 13rem; } }
@media (max-width: 40rem) {
  .dist-table th, .dist-table td { padding: var(--space-3) var(--space-1); }
  .dist-table th[scope="row"] { padding-left: var(--space-3); }
  .dist-table th .nm { font-size: var(--text-md); }
  .dist-table th .loc { font-size: var(--text-xs); }
  .dist-cell { padding: 0.3rem 0.55rem; font-size: var(--text-md); }
}

/* ==== Review pass (2026-10-29) ====================================================================================
   One page width, Team stats on a phone. */

.requests { max-width: none; }

/* Team stats: a number instead of a line that never moves; charts that fit a phone instead of scrolling sideways. */
.stat-hero { margin: var(--space-2) 0 var(--space-1); font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--color-text-strong); }
.viz-narrow { display: none; }
.viz-scroll .viz-narrow .viz { min-width: 0; width: 100%; }
.viz-narrow .viz-tick { font-size: 14px; }
@media (max-width: 40rem) {
  .viz-wide { display: none; }
  .viz-narrow { display: block; }
}
.stats-more { display: block; margin: var(--space-3) auto 0; }
.stats-more[hidden] { display: none; }

/* Team stats tables become labelled cards on a phone, like People and Requests. */
@media (max-width: 55rem) {
  .table-scroll { overflow: visible; }
  .stats-table, .stats-table tbody { display: block; }
  .stats-table thead { display: none; }
  .stats-table tbody tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-1) var(--space-5); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); }
  .stats-table tbody tr[hidden] { display: none; }
  .stats-table tbody tr:last-child { border-bottom: 0; }
  .stats-table tbody tr:hover > * { background: none; }
  .stats-table tbody th { grid-column: 1 / -1; position: static; min-width: 0; padding: 0 0 var(--space-1); border: 0; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
  .stats-table tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 0; border: 0; text-align: right; }
  .stats-table tbody td::before { content: attr(data-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); text-align: left; }
  .stats-table tbody td .meter { flex: 1 1 1.5rem; width: auto; min-width: 1.5rem; max-width: 9rem; margin: 0 var(--space-2) 0 auto; align-self: center; }
  .stats-table tbody td .meter-text { flex: none; min-width: 0; text-align: right; }
}


/* The menu is the same on every page and every tab is always there with its name: on a narrow window the tabs wrap onto more rows
   instead of scrolling sideways (which hid the first ones when the page was not the first tab). */
@media (max-width: 55rem) {
  .site-header .seg, .site-header:has(.seg > a:nth-child(6)) .seg { overflow: visible; flex-wrap: wrap; gap: 0 .2rem; }
}
@media (max-width: 40rem) {
  .site-header { row-gap: 0; }
  .site-header .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-bottom: .4rem; }
  .site-header .seg a, .site-header .seg button { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin-block: .15rem; padding: .35rem .2rem; font-size: var(--text-xs); text-align: center; white-space: normal; }
  .site-header .seg a[aria-current="page"]::after, .site-header .seg button[aria-current="page"]::after { bottom: 0; }
  .site-header .seg .tab-icon { width: 1.3rem; height: 1.3rem; }
}
.tl-point { padding-right: var(--space-3); }

/* The current tab is not bolder than the others: bold text is wider and moved every tab after it when you changed page. */
.site-header .seg a[aria-current="page"], .site-header .seg button[aria-current="page"] { font-weight: 500; }

/* Access denied and no-access pages: a calm card in the middle instead of bare text. */
.notice-page { max-width: 30rem; margin: var(--space-6, 3rem) auto; padding: var(--space-5) var(--space-6, 2rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); text-align: center; }
.notice-page h1 { margin: 0 0 var(--space-2); font-size: 1.4rem; letter-spacing: -.01em; }
.notice-page p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.notice-page p:last-child { margin-bottom: 0; }
.notice-page .notice-link { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; text-decoration: none; }
.notice-page .notice-link:hover, .notice-page .notice-link:focus-visible { filter: brightness(.95); }

/* The approvers' tooltips are hidden until hovered but still take up room at the page's edge, which made the page scroll sideways. */
.requests { overflow-x: clip; }

/* People: the switch that shows deactivated people, the buttons on a deactivated row, and the calmer deactivate dialog (nothing is lost). */
.people-filters .away-toggle { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; color: var(--color-text-muted); cursor: pointer; font-size: var(--text-sm); }
.people-filters .away-toggle[hidden] { display: none; }
.icon-btn.prow-restore { color: var(--color-text-muted); }
.icon-btn.prow-delete { color: var(--color-text-muted); }
dialog.confirm.gentle { border-top-color: var(--color-accent); }
dialog.confirm.gentle .sub { color: var(--color-text-muted); line-height: 1.45; }
dialog.confirm.gentle .actions .primary { padding: 0.45rem var(--space-4); border-radius: var(--radius-md); background: var(--color-accent); border: 1px solid var(--color-accent); color: var(--color-on-accent); font: inherit; font-weight: 600; cursor: pointer; }
.icon-btn.prow-deactivate:hover, .icon-btn.prow-deactivate:focus-visible { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent-tint); }

/* Archived workplaces: the row under the list, and the list of them with a Restore button. */
.archived-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.archived-item { display: flex; align-items: center; min-height: 3rem; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.archived-item .name { font-weight: 600; }
.archived-item .sub { flex: 1; color: var(--color-text-muted); }
.archived-row .sname { color: var(--color-text-muted); }
.archived-item .name, .archived-item .sub { margin: 0; line-height: 1.3; }

/* ==== Login ======================================================================================================== */
body:has(.login) { background: var(--color-bg) var(--bg-pattern) 0 0 / var(--bg-pattern-size); }
main:has(.login) { max-width: none; display: grid; place-items: start center; padding: clamp(var(--space-4), 8vh, 5rem) var(--space-4) var(--space-5); }
.login { width: 100%; max-width: 25rem; }
.login-card { padding: 2rem 1.75rem 1.5rem; background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-card), var(--shadow-login); border: 1px solid var(--color-border); }
.login-mark { width: 3.5rem; height: 3.5rem; margin: 0 auto var(--space-3); }
.login-mark svg { width: 100%; height: 100%; display: block; fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.login h1 { margin: 0; text-align: center; font-size: 1.5rem; letter-spacing: -.02em; }
.login-sub { margin: var(--space-2) 0 var(--space-5); text-align: center; color: var(--color-text-muted); font-size: var(--text-md); }
.login-google { display: flex; align-items: center; justify-content: center; gap: var(--space-3); height: 2.9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); font-weight: 600; text-decoration: none; transition: background .15s, box-shadow .15s, border-color .15s; }
.login-google:hover { background: var(--color-surface-muted); box-shadow: var(--shadow-bar); }
.login-google svg { width: 1.25rem; height: 1.25rem; }
.login-or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--color-text-faint); font-size: var(--text-sm); }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.login-form { display: flex; flex-direction: column; gap: var(--space-4); }
.login-field label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-strong); }
.login-field input { width: 100%; height: 2.9rem; padding: 0 var(--space-3); font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); transition: border-color .15s, box-shadow .15s; }
.login-field input::placeholder { color: var(--color-text-faint); }
.login-field input:hover { border-color: var(--color-border-input); }
.login-field input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-tint); }
.login-pw { position: relative; }
.login-pw input { padding-right: 3rem; }
.login-eye { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text-muted); cursor: pointer; }
.login-eye:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.login-eye:focus-visible { outline: var(--focus-ring); }
.login-eye svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-eye .eye-off, .login-eye.on .eye-on { display: none; }
.login-eye.on .eye-off { display: block; }
.login-submit { height: 2.9rem; margin-top: var(--space-1); border: 0; border-radius: var(--radius-lg); background: var(--color-accent); color: var(--color-on-accent); font: inherit; font-weight: 600; cursor: pointer; transition: filter .15s, box-shadow .15s; box-shadow: var(--shadow-primary); }
.login-submit:hover { filter: brightness(1.08); }
.login-submit:active { filter: brightness(.95); }
.login-submit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.login-alert { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--color-danger-border); border-radius: var(--radius-lg); background: var(--color-danger-bg); color: var(--color-danger-strong); font-size: var(--text-md); }
.login-alert svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.login-help, .login-note { margin: var(--space-5) 0 0; text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.login-note { margin-top: var(--space-3); }
.login-mode { display: flex; margin: 0 auto var(--space-4); min-height: 2.25rem; }
.login-mode .np-seg-btn { flex: 1; }
.login-dev { font-size: var(--text-sm); color: var(--color-text-muted); }
.login-dev h1 { font-size: 1.25rem; color: var(--color-text); }
.login-dev p { margin: var(--space-2) 0; text-align: center; }
.login-dev code { padding: 0 .3rem; background: var(--color-surface-sunken); border-radius: var(--radius-sm); color: var(--color-text); }
.login-dev-roles { display: flex; margin: var(--space-4) 0 0; min-height: 2.25rem; }
.login-dev-roles .np-seg-btn { flex: 1; }
.login-dev-roles .np-seg-btn { text-transform: capitalize; }
.login-dev-people { display: flex; flex-direction: column; gap: 2px; max-height: 16rem; margin-top: var(--space-3); overflow-y: auto; }
.login-dev-people button { padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.login-dev-people button:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.login-dev-people button:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
@media (max-width: 480px) { .login-card { padding: 1.5rem 1.15rem 1.25rem; border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .login * { transition: none !important; } }

/* A link to copy, in the dialog that offers one */
.link-box { width: 100%; box-sizing: border-box; margin-bottom: var(--space-4); font-family: ui-monospace, monospace; font-size: var(--text-sm); }
.login-field .login-note { margin: var(--space-1) 0 0; text-align: left; }
.login h1 + .login-alert { margin-top: var(--space-4); }
.login-help a { color: var(--color-accent); font-weight: 600; }

dialog.link-dialog .lead { margin: 0 0 var(--space-4); font-weight: 400; color: var(--color-text-muted); line-height: 1.45; }
.link-row { display: flex; gap: var(--space-2); align-items: stretch; }
.link-row .link-box { flex: 1; min-width: 0; margin: 0; text-overflow: ellipsis; background: var(--color-surface-muted); }
.link-copy { flex: none; padding: 0 var(--space-4); border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-on-accent); font: inherit; font-weight: 600; cursor: pointer; transition: filter .15s, background .15s; }
.link-copy:hover { filter: brightness(1.08); }
.link-copy.done { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.link-expiry { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); }
dialog.link-dialog .actions { justify-content: flex-end; }
.invited-pill.expired { background: var(--color-danger-bg); color: var(--color-danger-strong); }
.invited-pill { margin-left: var(--space-2); padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; }
/* The link button sits among the row actions: muted like the edit pencil, accent on hover */
.icon-btn.prow-link { color: var(--color-text-muted); opacity: 0.55; transition: opacity var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.prow:hover .icon-btn.prow-link, .prow:focus-within .icon-btn.prow-link, .icon-btn.prow-link:hover, .icon-btn.prow-link:focus-visible { opacity: 1; }
.icon-btn.prow-link:hover, .icon-btn.prow-link:focus-visible { color: var(--color-accent); }
.prow.summary .prow-link { margin: 0; }

/* The row actions: the same size in every row, packed against the right edge (the row is reversed, so the start is the right) with the edit/restore slot at the edge. */
.prow .acts { justify-content: flex-start; }
.prow .acts .icon-btn { flex: none; }

/* The confirm button of the calmer dialogs (deactivate, invite link) reacts like the other buttons: brighter on hover, darker when pressed. */
dialog.confirm.gentle .actions .primary { transition: filter var(--transition-fast), box-shadow var(--transition-fast); }
dialog.confirm.gentle .actions .primary:hover { filter: brightness(1.12); box-shadow: var(--shadow-primary); }
dialog.confirm.gentle .actions .primary:active { filter: brightness(.92); box-shadow: none; }
dialog.confirm.gentle .actions .primary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* Restore and delete on a deactivated row look like the other row actions: muted and faint until the row or the icon is hovered; restore turns accent. */
.icon-btn.prow-restore, .icon-btn.prow-delete { opacity: 0.55; transition: opacity var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.prow:hover .icon-btn.prow-restore, .prow:focus-within .icon-btn.prow-restore, .icon-btn.prow-restore:hover, .icon-btn.prow-restore:focus-visible,
.prow:hover .icon-btn.prow-delete, .prow:focus-within .icon-btn.prow-delete, .icon-btn.prow-delete:hover, .icon-btn.prow-delete:focus-visible { opacity: 1; }
.icon-btn.prow-restore:hover, .icon-btn.prow-restore:focus-visible { color: var(--color-accent); }

/* Printing the schedule, for when the site is unreachable: only the schedule, on paper, in landscape. */

/* Privacy statement and terms of use. */
.legal { max-width: 42rem; margin: var(--space-5) auto; padding: 0 var(--space-4); line-height: 1.6; }
.legal h1 { margin-bottom: var(--space-3); }
.legal h2 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
.legal p { margin: 0 0 var(--space-3); }
.legal .lead { color: var(--color-text); }
.legal-contact { font-weight: 600; }
.login-legal { margin: var(--space-3) 0 0; text-align: center; font-size: var(--text-sm); }

/* The invite link dialog: the email result first, then the link, a neutral box (the red border of the delete dialogs does not belong here). */
dialog.link-dialog h2 { margin-bottom: var(--space-3); }
dialog.link-dialog .link-box, dialog.link-dialog .link-box:focus { border-color: var(--color-border-input); box-shadow: none; }
dialog.link-dialog .link-box:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
dialog.link-dialog .link-status { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); line-height: 1.4; overflow-wrap: anywhere; }
dialog.link-dialog .link-status svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.link-status.ok { background: var(--color-success-bg); color: var(--color-success); }
.link-status.warn { background: var(--color-danger-bg); color: var(--color-danger-strong); }
dialog.link-dialog .lead { margin-bottom: var(--space-3); }
dialog.link-dialog .link-expiry { margin: var(--space-3) 0 0; color: var(--color-text-muted); }
dialog.link-dialog .actions { margin-top: var(--space-5); }

/* Long names: a place with a very long unbroken name wraps instead of running off the screen. */
.tree, .tree-children { min-width: 0; }
.tree .node-open { overflow-wrap: anywhere; }
@media (max-width: 30rem) { .np-block { flex-wrap: wrap; } .np-block .dd { width: 5.25rem; } }
.detail-head, .detail-head > * { min-width: 0; }
.detail-head h2, .prow-name, .stats-table .who, .perm-text { overflow-wrap: anywhere; }
/* Set times on a phone: the weekday above its blocks and buttons (the later three-column rule would otherwise win over the earlier narrow one). */
@media (max-width: 720px) {
  .np-day-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .np-day-actions { grid-template-columns: auto auto; justify-content: start; }
  .np-day-actions .small { width: auto; }
}
.filter-chips a, .filter-chips button { max-width: 100%; overflow-wrap: anywhere; }
/* Long names and headings wrap instead of widening the page. */
main h1, main h2, main h3, main h4, main .sub, .point-name, .tag, .np-chip { overflow-wrap: anywhere; }
.np-chip, .np-chips > * { max-width: 100%; }
.stats-workplaces h4, .stats-workplaces .card { min-width: 0; }
/* A menu in a longer language (Dutch) wraps onto a second row when it does not fit, rather than running off the side. */
.site-header .seg { flex-wrap: wrap; column-gap: 1.5rem; }
/* A very long unbroken name: tiles, inline editor chips and menu tabs may wrap or shrink instead of widening the page. */
.tile, .tile > *, .prow .chip, .np-chip { min-width: 0; overflow-wrap: anywhere; }
.prow .chip { white-space: normal; max-width: 100%; }
.np-head, .np-head > *, .prow-name { min-width: 0; }
@media (max-width: 30rem) { .site-header .seg a, .site-header .seg button { white-space: normal; overflow-wrap: anywhere; } }
.prow.summary .who, .prow.summary .who > * { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.shifts-workplaces a { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.prow .cell, .prow .cell * { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.shifts-workplaces .wp-group { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.shifts-workplaces .wp-row, .shifts-workplaces .filters-body, .filters-body { min-width: 0; }
/* Larger text: the Generate buttons wrap onto another line instead of widening the page. */
.gen-group, .gen-view, .gen-actions, .gen-days { flex-wrap: wrap; max-width: 100%; }
/* Team stats between a phone and a wide screen: with the Paid leave column the table is tighter, so headings wrap and the bar column is narrower. */
@media (min-width: 55.01rem) and (max-width: 80rem) {
  .stats-table th, .stats-table td { padding-inline: var(--space-1); }
  .stats-table thead th { white-space: normal; }
  .stats-table td:has(.meter) { width: 9.5rem; }
  .stats-table tbody th { min-width: 8rem; }
}

/* Shifts on a phone. The calendar keeps a readable hour width and scrolls sideways under a narrow, sticky name column (shifts.js
   fit() reads these two widths and keeps at least 3rem per hour); the day bars stay put while it scrolls. */
:root { --tl-name-w: 9rem; --tl-name-split-w: 18rem; }
@media (max-width: 55rem) {
  :root { --tl-name-w: 6.5rem; --tl-name-split-w: 7.5rem; }
  #shifts .shifts-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  /* The distribution point sits above the workplace, in one narrow cell. */
  .tl-name.split { flex-direction: column; align-items: stretch; justify-content: center; padding: var(--space-1) var(--space-2); }
  .tl-name.split .tl-point { flex: none; align-self: auto; display: block; padding: 0; border-right: 0; font-size: .7rem; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
  .tl-name.split .tl-wp { flex: none; padding: 0; font-size: var(--text-xs); }
  .tl-name.split .tl-wp:not(:empty)::before { width: .45rem; height: .45rem; }
  .tl-head .tl-name.split .tl-wp::before { content: none; }
  /* The "Understaffed" list opens from a chip at the left edge: grow it to the right, not off the screen. */
  .sum-list { right: auto; left: 0; }
  /* The period switch (My hours, Team stats): equal buttons whose label may wrap, so a longer Dutch label never runs off the switch. */
  .stats-periods .np-seg-btn { flex: 1 1 0; min-width: 0; font-size: var(--text-sm); white-space: normal; line-height: 1.2; text-align: center; }
}
/* A finger scrolls the calendar first, so on a phone a shift is added or edited by tapping (shifts.js), not dragged. Wider touch screens
   keep drag-to-plan: their calendar does not scroll sideways, so nothing else wants the gesture. */
@media (max-width: 55rem) and (pointer: coarse) { .tl-track { touch-action: manipulation; } } /* pan and pinch-zoom: both take the gesture away from the page script */