:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --ink: #1b2430;
  --muted: #5d6b7c;
  --line: #dde3ea;
  --brand: #0f5c8c;
  --brand-ink: #ffffff;
  --brand-soft: #e5f0f7;
  --ok: #1f7a4d;
  --ok-soft: #e3f3ea;
  --warn: #9a6200;
  --warn-soft: #fdf1dc;
  --bad: #b3261e;
  --bad-soft: #fbe7e5;
  --radius: 10px;
  color-scheme: light;
}
/* dark is the default on screen; "light" is a per-device choice (sun/moon button). Print is always light. */
@media screen {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #11161c; --surface: #1a2129; --ink: #e6ebf1; --muted: #9aa8b8; --line: #2c3642;
    --brand: #4aa3d8; --brand-ink: #0b1620; --brand-soft: #16303f;
    --ok: #5cc48f; --ok-soft: #173327; --warn: #e3ae4f; --warn-soft: #3a2d14; --bad: #f08a80; --bad-soft: #3d1d1a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: .75rem 0 .25rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
[hidden] { display: none !important; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1.25rem;
  background: var(--brand); color: var(--brand-ink); flex-wrap: wrap; }
.topbar a { color: var(--brand-ink); }
.brand { font-weight: 700; white-space: nowrap; }
.logo { display: inline-block; font-size: 1.2em; }
.logo.big { font-size: 2.5rem; color: var(--brand); }
.topbar nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.topbar nav a { padding: .35rem .75rem; border-radius: 6px; opacity: .85; }
.topbar nav a.on, .topbar nav a:hover { background: rgba(255,255,255,.16); opacity: 1; text-decoration: none; }
@media screen { :root:not([data-theme="light"]) .topbar nav a.on, :root:not([data-theme="light"]) .topbar nav a:hover { background: rgba(0,0,0,.22); } }
.me { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.me form { margin: 0; }
.me .link { color: var(--brand-ink); opacity: .85; }

main.wrap { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
main.auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.narrow { max-width: 720px; margin: 0 auto; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1rem; }
.auth-card { width: 100%; max-width: 400px; }
.auth-head { text-align: center; margin-bottom: 1rem; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem; }
.daynav { display: flex; gap: .5rem; flex-wrap: wrap; }
.grid-main { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 1rem; align-items: start; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid2.tight { gap: 0 1rem; }
@media (max-width: 860px) { .grid-main, .grid2 { grid-template-columns: 1fr; } }

/* forms */
label { display: block; margin-bottom: .8rem; font-weight: 500; font-size: .9rem; }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem;
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
select:disabled { opacity: .55; }
label.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
label.check input { width: auto; margin: 0; }
fieldset legend { font-size: .9rem; font-weight: 500; padding: 0 .25rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row input[type=time] { width: auto; margin: 0; }

.btn { display: inline-block; padding: .5rem 1rem; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }
.btn:hover { border-color: var(--brand); text-decoration: none; }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.small { padding: .3rem .7rem; font-size: .85rem; }
.btn.block { width: 100%; }
.link { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; }
.link.danger { color: var(--bad); }
.link.ok { color: var(--ok); }

.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid transparent; }
.flash.success { background: var(--ok-soft); color: var(--ok); }
.flash.error { background: var(--bad-soft); color: var(--bad); }
.flash.info { background: var(--brand-soft); color: var(--ink); }
/* messages float at the top, over the page, with × to close; they never move the layout */
.toasts { position: fixed; top: var(--toast-top, 4.2rem); left: 50%; transform: translateX(-50%); z-index: 1000; width: min(34rem, calc(100vw - 2rem));
  display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { pointer-events: auto; margin: 0; display: flex; align-items: flex-start; gap: .75rem; border-color: currentColor;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); animation: toastin .2s ease-out; }
.toast > span { flex: 1; }
.toast.hide { opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.toast-x { border: 0; background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; padding: 0 .15rem; cursor: pointer; opacity: .8; }
.toast-x:hover { opacity: 1; }
@keyframes toastin { from { opacity: 0; transform: translateY(-6px); } }
@media print { .toasts { display: none; } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: .25rem; }
.stat .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.stat .value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .value small { font-size: .9rem; color: var(--muted); font-weight: 500; }
.meter { height: 6px; background: var(--brand-soft); border-radius: 3px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--brand); }

.badge { display: inline-block; font-size: .8rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px;
  background: var(--brand-soft); color: var(--ink); }
.badge.submitted { background: var(--warn-soft); color: var(--warn); }
.badge.approved { background: var(--ok-soft); color: var(--ok); }
.badge.rejected { background: var(--bad-soft); color: var(--bad); }
.tag { display: inline-block; font-size: .75rem; padding: 0 .45rem; border-radius: 4px; background: var(--brand-soft); margin-left: .35rem; }
.tag.warn { background: var(--warn-soft); color: var(--warn); }

/* entries list */
.entries { list-style: none; margin: 0; padding: 0; }
.entries li { display: grid; grid-template-columns: 70px 1fr auto; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.entries li:first-child { border-top: 0; }
.entry-time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.entry-time strong { font-size: 1.1rem; }
.crumbs { font-size: .8rem; color: var(--muted); }
.act { font-weight: 600; }
.entry-body p { margin: .2rem 0 0; white-space: pre-wrap; }
.entry-actions { display: flex; flex-direction: column; gap: .2rem; align-items: flex-end; }
.entry-actions form { margin: 0; }
.empty { text-align: center; padding: 2rem 1rem; }
@media (max-width: 560px) { .entries li { grid-template-columns: 56px 1fr; } .entry-actions { grid-column: 2; flex-direction: row; gap: 1rem; } }

/* tables */
.scroll-x { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; }
th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.left, table.list th, table.list td { text-align: left; }
td.weekend, th.weekend { background: color-mix(in srgb, var(--bg) 60%, transparent); }
th.today { color: var(--brand); }
tfoot th { color: var(--ink); font-size: .9rem; }
tfoot th.under, td.under, .table-key .under { color: var(--bad); font-weight: 600; }
tr.inactive td { opacity: .55; }
details summary { cursor: pointer; }
details table { margin-top: .75rem; }

.actions-bar { display: flex; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }
.review { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.review input { width: 320px; max-width: 100%; margin: 0; }
.pending { margin: 0; padding-left: 1.2rem; }
.pending li { margin: .3rem 0; }

/* reports */
.filters { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.filters label { margin: 0; min-width: 150px; }
.filters .spacer { flex: 1; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { margin-bottom: .6rem; }
.bar-label { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.bar-label span:last-child { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: var(--brand-soft); border-radius: 4px; overflow: hidden; margin-top: .2rem; }
.bar span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }

/* admin */
.subnav { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.subnav a { padding: .5rem .9rem; color: var(--muted); border-bottom: 2px solid transparent; }
.subnav a.on { color: var(--brand); border-color: var(--brand); text-decoration: none; }
dl.kv { display: grid; grid-template-columns: 130px 1fr; gap: .35rem .75rem; margin: 0 0 1rem; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }
form.inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
form.inline input { margin: 0; width: auto; min-width: 220px; padding: .3rem .5rem; }
.tx-sector h2 input { font-weight: 700; min-width: 420px; max-width: 100%; }
.tx-activities { margin-left: 1rem; display: flex; flex-direction: column; gap: .3rem; }
form.add { margin-top: .4rem; }

/* block picker */
fieldset.blocks { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset.blocks legend { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; padding: 0; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.chip { margin: 0; cursor: pointer; }
.chip input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chip span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  height: 64px; border: 2px solid var(--line); border-radius: 10px; font-size: .8rem; color: var(--muted);
  background: var(--surface); transition: border-color .1s, background .1s; }
.chip span strong { font-size: 1.35rem; color: var(--ink); line-height: 1.1; }
.chip:hover span { border-color: var(--brand); }
.chip input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.chip input:checked + span strong { color: var(--brand); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.chip.disabled { cursor: not-allowed; }
.chip.disabled span { opacity: .35; }
.chip.disabled:hover span { border-color: var(--line); }

/* the day as a strip of blocks */
.day-total { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.daystrip { display: flex; height: 40px; border-radius: 8px; overflow: hidden; background: var(--bg);
  border: 1px solid var(--line); gap: 2px; padding: 2px; }
.seg-block { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem;
  font-weight: 700; border-radius: 5px; min-width: 0; }
.seg-block:hover { text-decoration: none; filter: brightness(1.1); }
.seg-empty { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px); border-radius: 5px; }
.hour-ticks { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: .2rem;
  font-variant-numeric: tabular-nums; }
.week-line { margin: .75rem 0 0; }
/* one colour per sector, all readable with white text */
.c0 { background: #0f5c8c; } .c1 { background: #237a5f; } .c2 { background: #6b4fa8; }
.c3 { background: #a45c16; } .c4 { background: #b0364a; } .c5 { background: #4f5d6b; }
.c6 { background: #0e7490; } .c7 { background: #8a3f86; } .c8 { background: #5b6b16; } .c9 { background: #7c4a2d; }
/* fixed: official travel and meetings never share a sector's colour */
.ctravel { background: #c2410c; } .cmeet { background: #3b5bdb; }
.entry-time .num { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; color: #fff;
  align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; margin-bottom: .2rem; }
ol.entries { list-style: none; }
.entries li { grid-template-columns: auto 70px 1fr auto; }
.entries li:not(:has(.reorder)) { grid-template-columns: 70px 1fr auto; }
.reorder { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.reorder form { display: flex; flex-direction: column; gap: .1rem; margin: 0; }
.handle { cursor: grab; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: .1rem .2rem; user-select: none; }
.handle:active { cursor: grabbing; }
.arrow { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 4px;
  width: 24px; height: 20px; padding: 0; font-size: .75rem; line-height: 1; cursor: pointer; }
.arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.arrow:disabled { opacity: .3; cursor: default; }
.entries li.dragging { opacity: .4; }
.entries li.drop-before { box-shadow: inset 0 3px 0 var(--brand); }
.entries li.drop-after { box-shadow: inset 0 -3px 0 var(--brand); }
.reorder-hint { margin: -.4rem 0 .4rem; }
@media (max-width: 560px) { .entries li { grid-template-columns: auto 56px 1fr; } .handle { display: none; } }
.done { font-size: 1.1rem; font-weight: 600; color: var(--ok); }

/* show / hide password */
.pw-wrap { position: relative; display: block; margin-top: .25rem; }
.pw-wrap input { margin-top: 0; padding-right: 4.2rem; }
.pw-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0;
  background: transparent; color: var(--brand); font: inherit; font-size: .8rem; font-weight: 600;
  padding: .25rem .45rem; border-radius: 4px; cursor: pointer; }
.pw-toggle:hover { background: var(--brand-soft); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand); }

/* ---------- UX fixes (user testing) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.row.between { justify-content: space-between; }

/* notices on Today / week pages */
.notice { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid var(--brand); background: var(--brand-soft); }
.notice.bad { border-color: var(--bad); background: var(--bad-soft); }
.notice.warn { border-color: var(--warn); background: var(--warn-soft); }
.notice .quote { font-style: italic; }
.notice .btn { white-space: nowrap; }

/* day bar legend */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .6rem 0 0; padding: 0; font-size: .8rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: .35rem; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dayoff-strip { align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); font-weight: 600; }
/* a holiday or leave day that also has blocks: a thin band running under the whole strip */
.dayoff-band { margin-top: 3px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand) 28%, transparent) 0 8px, transparent 8px 14px), var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand); font-size: .7rem; font-weight: 700; letter-spacing: .02em; overflow: hidden; }
.dayoff-band span { background: var(--surface); padding: 0 .4rem; border-radius: 3px; white-space: nowrap; }
.dayoff-note { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.dayoff-note form { margin: 0; }
.dayoff-form { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.dayoff-form label { margin: 0; }
.dayoff-form select { width: auto; margin: 0; }

/* week & team tables: first and last columns stay visible when scrolling sideways */
.sticky-first { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 9rem; max-width: 15rem; }
.sticky-last { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -1px 0 0 var(--line); }
tbody th.sticky-first, tfoot th.sticky-first { font-size: .9rem; color: var(--ink); font-weight: 400; }
tfoot th.sticky-first { font-weight: 600; }
.week-grid .act-name { font-weight: 600; }
.week-grid .path, .team-grid .path { display: block; }
.week-grid tbody th .swatch { margin-right: .3rem; vertical-align: middle; }
.short-mark { margin-left: 2px; font-weight: 700; }
.table-key { margin: .6rem 0 0; }
.off-row td .tag { margin: 0; }

/* review / submit actions at the top of the week page */
.actions-bar.actions-top { justify-content: flex-start; margin-bottom: 1rem; }
.review { flex-direction: column; align-items: stretch; width: 100%; max-width: 620px; }
.review-comment { margin: 0 0 .5rem; }
.review-comment input { width: 100%; }
.field-error { display: block; color: var(--bad); font-size: .85rem; margin-top: .25rem; font-weight: 500; }
[aria-invalid="true"] { border-color: var(--bad); outline-color: var(--bad); }

/* reports quick periods */
.presets { flex-basis: 100%; display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }

/* admin users */
.user-actions { display: flex; gap: .2rem .9rem; flex-wrap: wrap; margin-top: .3rem; }
.user-actions form { margin: 0; }

/* phone: blocks-so-far list inside the day card */
.mobile-only { display: none; }
.blocks-peek { margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.blocks-peek summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.blocks-peek ol { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.blocks-peek .num { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; color: #fff;
  align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; margin-right: .3rem; }

@media (max-width: 860px) {
  .mobile-only { display: block; }
}

/* phone / narrow window: compact one-line header with a scrollable menu row */
@media (max-width: 700px) {
  .topbar { gap: .35rem .75rem; padding: .5rem .9rem .35rem; }
  .brand { flex: 1; font-size: .95rem; }
  .me-name { display: none; }
  .topbar nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: .15rem; margin: 0 -.3rem; -webkit-overflow-scrolling: touch; }
  .topbar nav a { white-space: nowrap; padding: .35rem .65rem; }
  .wide-only { display: none; }
  main.wrap { padding-top: 1rem; }
  h1 { font-size: 1.3rem; }
  .sticky-first { min-width: 7.5rem; max-width: 10rem; }
}

/* bigger touch targets for reordering on phones */
@media (max-width: 560px) {
  .arrow { width: 38px; height: 34px; font-size: 1rem; }
  .reorder form { gap: .3rem; }
}

/* tables that scroll sideways: no card padding at the sides, so nothing shows beside the fixed columns */
.card.scroll-x { padding-left: 0; padding-right: 0; }
.card.scroll-x > table th:first-child, .card.scroll-x > table td:first-child { padding-left: 1.25rem; }
.card.scroll-x > table th:last-child, .card.scroll-x > table td:last-child { padding-right: 1.25rem; }
.card.scroll-x > .table-key, .card.scroll-x > h2, .card.scroll-x > p { padding: 0 1.25rem; }
@media (max-width: 700px) {
  .week-grid .path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8.5rem; }
}

/* ---------- round 2 fixes ---------- */
/* compact header also on tablets (admins have 5 menu items) */
@media (min-width: 701px) and (max-width: 960px) {
  .topbar { gap: .35rem .75rem; padding: .5rem 1rem .35rem; }
  .brand { flex: 1; }
  .topbar nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: .15rem; margin: 0 -.3rem; }
  .topbar nav a { white-space: nowrap; }
}

/* how it works */
.intro { position: relative; border-left: 4px solid var(--brand); }
.intro ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.intro-close { position: absolute; top: .6rem; right: .8rem; font-size: 1.1rem; color: var(--muted); padding: .2rem .4rem; }

/* temporary password box */
.temp-box { border-left: 4px solid var(--ok); }
.temp-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
dl.kv.compact { grid-template-columns: auto 1fr; margin: 0; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--bg); padding: .1rem .4rem; border-radius: 4px; }
.temp-pw { font-size: 1.15rem; letter-spacing: .04em; user-select: all; }

/* live password checks */
.pw-checks { list-style: none; padding: 0; margin: -.2rem 0 1rem; font-size: .85rem; color: var(--muted); display: grid; gap: .15rem; }
.pw-checks li::before { content: "○ "; }
.pw-checks li.ok { color: var(--ok); }
.pw-checks li.ok::before { content: "✓ "; }

/* projects & activities */
.tx-sector > summary { cursor: pointer; display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; font-size: 1.05rem; }
.tx-sector .tx-body { margin-top: .75rem; }
.tx-hidden { margin: .4rem 0; }
.tx-hidden > summary, .tx-hidden-sectors > summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
.tx-hidden-sectors { margin-top: 1rem; }

/* edit page footer */
.edit-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.edit-footer form { margin: 0; }

/* not-working form */


/* ---------- round 3 ---------- */
/* date + day buttons on the day card's first line */
.day-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.day-title { font-size: 1.25rem; margin: 0; }
.day-top .daynav { gap: .4rem; }

/* top-level kind of time */
.kind-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .25rem; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; }
.kind-tabs button { flex: 1 1 auto; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 500;
  padding: .5rem .7rem; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.kind-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 700; }
.kind-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.next-block { margin: -.4rem 0 .6rem; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.plan-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .plan-grid, .plan-grid.two { grid-template-columns: 1fr; } }
.dayoff-form { margin: 0; padding: 0; border: 0; }
tr.past td { color: var(--muted); }

/* focus ring on all buttons matches the app */
.btn:focus-visible, .link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* one line: date + total on the left, day buttons + status on the right */
.day-left { display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; }
.day-sum .day-total { font-size: 1.6rem; }
.daynav .badge { align-self: center; }
.btn.off { opacity: .4; pointer-events: none; }
.day-left .badge { align-self: baseline; }
.holiday-pick { margin: 0; display: flex; }
.holiday-pick select { width: 16.5rem; max-width: 100%; text-overflow: ellipsis; margin: 0; padding: .3rem 1.8rem .3rem .6rem; font-size: .85rem;
  font-weight: 600; border-radius: 8px; cursor: pointer; }
/* three tabs always fit in one row */
.kind-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.kind-tabs button { white-space: normal; font-size: .9rem; padding: .45rem .4rem; line-height: 1.2; }

/* working pattern */
fieldset.pattern { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .9rem .3rem; margin: 0 0 1rem; }
fieldset.pattern legend { font-weight: 600; padding: 0 .3rem; }
fieldset.pattern select { width: auto; }
.daychecks { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .4rem; }
.daycheck { display: flex; align-items: center; gap: .3rem; margin: 0; padding: .3rem .55rem; border: 1px solid var(--line);
  border-radius: 6px; font-weight: 500; cursor: pointer; }
.daycheck input { width: auto; margin: 0; }
.daycheck:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

/* round 4: compact day summary on phones */
@media (max-width: 560px) {
  .day-top .holiday-pick, .day-top .holiday-pick select { width: 100%; }
}

/* round 5 */
.acting-banner { background: var(--warn-soft); color: var(--ink); border-bottom: 2px solid var(--warn); padding: .55rem 1.25rem;
  display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.pattern-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 560px) { .pattern-row { grid-template-columns: 1fr; } }
.pattern-history { margin: .2rem 0 .6rem; }
.handover { margin-top: .5rem; }
.submit-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.submit-form label { margin: 0; min-width: 260px; flex: 1; }
.notice.history .muted { color: var(--muted); }

/* date pairs: boxes line up on the same row */
.plan-grid { align-items: end; }
.plan-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 380px) { .plan-grid.two { grid-template-columns: 1fr; } }

.travel-chips { grid-template-columns: repeat(4, 1fr); }
.travel-chips .chip span { height: 52px; }

/* meetings & trainings */
.meeting-fields { display: grid; gap: .5rem; margin-bottom: .8rem; }
.seg-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .4rem .8rem; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; font-weight: 500; }
.pill input { width: auto; margin: 0; }
.pill:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.kind-tabs { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
/* all kind tabs in one row, however many there are */
.kind-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.kind-tabs button { font-size: .82rem; padding: .45rem .3rem; }

/* monthly report */
.monthly-grid { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); }
@media (max-width: 860px) { .monthly-grid { grid-template-columns: 1fr; } }
.monthly-form textarea[name=highlights] { font-family: inherit; line-height: 1.45; }
.fit-meter { margin: .25rem 0 1rem; padding: .45rem .7rem; border-radius: 6px; font-weight: 600; font-size: .9rem; }
.fit-meter.ok { background: var(--ok-soft); color: var(--ok); }
.fit-meter.over { background: var(--bad-soft); color: var(--bad); }
.from-blocks details { margin: .4rem 0; }
.from-blocks ul { margin: .3rem 0 .3rem 1rem; padding: 0; }
.report-page { max-width: 820px; }
.report-page h2 { margin-bottom: .6rem; }
.report-head th { width: 150px; background: var(--bg); }
.report-page h3 { color: var(--brand); margin-top: 1rem; }
.report-page h4 { margin: .7rem 0 .2rem; }
.report-page ul { margin: .2rem 0 .4rem 1.1rem; padding: 0; }
.approved-line { margin-top: 1rem; }

/* monthly reports: selection + signatures */
.select-bar { padding: 0 1.25rem .6rem; }
.select-bar label { margin: 0; }
.check-col { width: 2rem; }
.check-col input { width: auto; margin: 0; }
.sig-pad { width: 100%; max-width: 420px; aspect-ratio: 3 / 1; border: 1px dashed var(--line); border-radius: 8px;
  background: #fff; touch-action: none; cursor: crosshair; display: block; margin: .3rem 0; }
.sig-preview { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .5rem; display: inline-block; margin-bottom: .4rem; }
.sig-preview img, .approved-line .sig { max-height: 60px; max-width: 220px; display: block; }
.approved-line .sig { background: #fff; margin: .3rem 0; }

.nowrap { white-space: nowrap; }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } }
.contract-box { margin: .4rem 0 .8rem; }

.chip-note { grid-column: 1 / -1; margin: .2rem 0 0; }
.draft-inline { margin-left: .5rem; }
@media (min-width: 861px) { .draft-inline { display: none; } }
.muted-row td { color: var(--muted); }

/* ---- dashboard */
.p0 { fill: #0f5c8c; } .bp0 { background: #0f5c8c; } .s-p0 { background: #0f5c8c; }
.p1 { fill: #237a5f; } .bp1 { background: #237a5f; } .s-p1 { background: #237a5f; }
.p2 { fill: #6b4fa8; } .bp2 { background: #6b4fa8; } .s-p2 { background: #6b4fa8; }
.p3 { fill: #a45c16; } .bp3 { background: #a45c16; } .s-p3 { background: #a45c16; }
.p4 { fill: #b0364a; } .bp4 { background: #b0364a; } .s-p4 { background: #b0364a; }
.p5 { fill: #4f5d6b; } .bp5 { background: #4f5d6b; } .s-p5 { background: #4f5d6b; }
.p6 { fill: #0e7490; } .bp6 { background: #0e7490; } .s-p6 { background: #0e7490; }
.p7 { fill: #8a3f86; } .bp7 { background: #8a3f86; } .s-p7 { background: #8a3f86; }
.p8 { fill: #5b6b16; } .bp8 { background: #5b6b16; } .s-p8 { background: #5b6b16; }
.p9 { fill: #7c4a2d; } .bp9 { background: #7c4a2d; } .s-p9 { background: #7c4a2d; }
.ftravel { fill: #c2410c; } .bftravel { background: #c2410c; } .s-ftravel { background: #c2410c; }
.fmeet { fill: #3b5bdb; } .bfmeet { background: #3b5bdb; } .s-fmeet { background: #3b5bdb; }
.fother { fill: #9aa5b1; } .bfother { background: #9aa5b1; } .s-fother { background: #9aa5b1; }
.twork { fill: #0f5c8c; } .btwork { background: #0f5c8c; } .s-twork { background: #0f5c8c; }
.tmeeting { fill: #3b5bdb; } .btmeeting { background: #3b5bdb; } .s-tmeeting { background: #3b5bdb; }
.ttraining { fill: #0e7490; } .bttraining { background: #0e7490; } .s-ttraining { background: #0e7490; }
.ttravel { fill: #c2410c; } .bttravel { background: #c2410c; } .s-ttravel { background: #c2410c; }
.mf2f { fill: #0f5c8c; } .bmf2f { background: #0f5c8c; } .s-mf2f { background: #0f5c8c; }
.monline { fill: #4aa3d8; } .bmonline { background: #4aa3d8; } .s-monline { background: #4aa3d8; }
.rafro { fill: #0093d5; } .brafro { background: #0093d5; } .s-rafro { background: #0093d5; }
.remro { fill: #a3238e; } .bremro { background: #a3238e; } .s-remro { background: #a3238e; }
.reuro { fill: #e39b00; } .breuro { background: #e39b00; } .s-reuro { background: #e39b00; }
.rsearo { fill: #f26522; } .brsearo { background: #f26522; } .s-rsearo { background: #f26522; }
.rwpro { fill: #00a651; } .brwpro { background: #00a651; } .s-rwpro { background: #00a651; }
.rpaho { fill: #6b4fa8; } .brpaho { background: #6b4fa8; } .s-rpaho { background: #6b4fa8; }
.rother { fill: #9aa5b1; } .brother { background: #9aa5b1; } .s-rother { background: #9aa5b1; }
.sapproved { fill: #1f7a4d; } .bsapproved { background: #1f7a4d; } .s-sapproved { background: #1f7a4d; }
.ssubmitted { fill: #0f5c8c; } .bssubmitted { background: #0f5c8c; } .s-ssubmitted { background: #0f5c8c; }
.srejected { fill: #b3261e; } .bsrejected { background: #b3261e; } .s-srejected { background: #b3261e; }
.sdraft { fill: #9aa5b1; } .bsdraft { background: #9aa5b1; } .s-sdraft { background: #9aa5b1; }
.f0 { fill: #0f5c8c; } .bf0 { background: #0f5c8c; } .s-f0 { background: #0f5c8c; }
.f1 { fill: #237a5f; } .bf1 { background: #237a5f; } .s-f1 { background: #237a5f; }
.f2 { fill: #6b4fa8; } .bf2 { background: #6b4fa8; } .s-f2 { background: #6b4fa8; }
.f3 { fill: #a45c16; } .bf3 { background: #a45c16; } .s-f3 { background: #a45c16; }
.f4 { fill: #b0364a; } .bf4 { background: #b0364a; } .s-f4 { background: #b0364a; }
.f5 { fill: #4f5d6b; } .bf5 { background: #4f5d6b; } .s-f5 { background: #4f5d6b; }
.f6 { fill: #0e7490; } .bf6 { background: #0e7490; } .s-f6 { background: #0e7490; }
.f7 { fill: #8a3f86; } .bf7 { background: #8a3f86; } .s-f7 { background: #8a3f86; }
.f8 { fill: #5b6b16; } .bf8 { background: #5b6b16; } .s-f8 { background: #5b6b16; }
.f9 { fill: #7c4a2d; } .bf9 { background: #7c4a2d; } .s-f9 { background: #7c4a2d; }

main.wrap.wide { max-width: 1560px; }
.dash { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; }
.dash-filters { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; padding: 1rem; }
.dash-filter-box > summary { cursor: pointer; margin-bottom: .6rem; list-style: none; }
.dash-filter-box > summary::-webkit-details-marker { display: none; }
.dash-group { border: 0; padding: 0; margin: 0 0 .9rem; }
.dash-group legend { font-weight: 600; font-size: .85rem; color: var(--brand); margin-bottom: .3rem; padding: 0; }
.dash-group label.check { margin: 0 0 .25rem; font-size: .88rem; line-height: 1.3; }
.dash-banner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--brand-soft); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.2rem; margin-bottom: 1rem; }
.dash-banner h1 { font-size: 1.35rem; margin: 0; color: var(--ink); }
.dash-banner p { margin: .1rem 0 0; opacity: .85; }
.dash-banner .btn { background: var(--surface); color: var(--brand); border-color: var(--line); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .5rem;
  text-align: center; display: flex; flex-direction: column; }
.kpi strong { font-size: 1.9rem; line-height: 1.1; color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .8rem; color: var(--muted); }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.dash-grid > .card { margin: 0; min-width: 0; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
@media (max-width: 1180px) { .span-7, .span-5, .span-8 { grid-column: span 12; } .span-4 { grid-column: span 6; } }
@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }
  .dash-filters { position: static; max-height: none; }
  .span-4, .span-8 { grid-column: span 12; }
}
.chart-card h2 { margin-bottom: .2rem; }
.chart-card > p.muted { margin: 0 0 .5rem; }
.chart { margin-top: .6rem; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg text { fill: var(--ink); font-size: 12px; }
.chart-svg .t-lab { fill: var(--muted); font-size: 11px; }
.chart-svg .t-val { font-size: 11px; font-weight: 600; }
.chart-svg .t-node { font-size: 14px; }
.chart-svg .t-region { fill: var(--muted); font-size: 11px; }
.chart-svg .axis { stroke: var(--line); }
.fcol { fill: var(--brand); }
.sankey .s-link { opacity: .38; }
.sankey .s-link:hover { opacity: .7; }
.hbars { display: grid; gap: .45rem; }
.hbar { display: grid; grid-template-columns: minmax(0, 40%) 1fr auto; gap: .5rem; align-items: center; font-size: .85rem; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { background: var(--bg); border-radius: 4px; height: 14px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 4px; }
.bp { background: var(--brand); }
.hbar-value { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.two-donuts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .two-donuts { grid-template-columns: 1fr; } }
.donut { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.donut-svg { width: 160px; height: 160px; }
.donut-svg .t-total { font-size: 22px; font-weight: 700; fill: var(--ink); }
.donut-svg .t-lab { fill: var(--muted); font-size: 11px; }
.chart .legend { list-style: none; margin: 0; padding: 0; font-size: .82rem; width: 100%; display: block; }
.chart .legend li { display: flex; align-items: center; gap: .4rem; margin: .15rem 0; }
.legend .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.treemap { position: relative; height: 300px; border-radius: 6px; overflow: hidden; }
.tm-cell { position: absolute; border: 2px solid var(--surface); color: #fff; padding: .35rem .45rem; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; font-size: .8rem; line-height: 1.2; }
.tm-label { font-weight: 600; }
.tm-cell.bfother, .tm-cell.breuro, .tm-cell.brwpro { color: #10161d; }
.tm-value { font-weight: 700; font-size: .95rem; }
.dash-foot { margin-top: 1rem; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; }
  .topbar, .dash-filters, [data-print], .notice, footer { display: none !important; }
  main.wrap.wide { max-width: none; padding: 0; }
  .dash { display: block; }
  .dash-banner { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dash-grid > .card, .kpi { break-inside: avoid; box-shadow: none; }
  .chart-card * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .span-4 { grid-column: span 4; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-5 { grid-column: span 5; }
}

/* home / deployment / other */
.add-head { margin-bottom: .9rem; }
.add-head h2 { margin: 0 0 .55rem; }
/* one left-aligned row under the heading: [Home | Deployment | Other]  where; the city field gets its own full row */
.place-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; }
.place-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 0; }
.place-seg button { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .8rem;
  padding: .2rem .45rem; line-height: 1.3; cursor: pointer; white-space: nowrap; }
.place-seg button + button { border-left: 1px solid var(--line); }
.place-seg button:hover { background: var(--bg); }
.place-seg button.on { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.place-seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.place-now { margin: 0; flex: 1 1 0; min-width: 3.5rem; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-bar { position: relative; }
.place-where { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 60; width: min(24rem, 100%);
  display: flex; gap: .4rem; align-items: center; margin: 0; padding: .5rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.place-where[hidden] { display: none; }
.place-where::after { content: ""; position: absolute; top: 100%; left: calc(var(--arrow-x, 2rem) - 7px);
  border: 7px solid transparent; border-top-color: var(--surface); filter: drop-shadow(0 1px 0 var(--line)); }
.place-where input[name=location] { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.place-where .btn, .place-where .link { flex: none; }
@media (max-width: 420px) {
  .place-seg { display: flex; width: 100%; }
  .place-seg button { flex: 1; padding: .35rem .3rem; }
}

.whome { fill: #0f5c8c; } .wdeployment { fill: #c2410c; } .wother { fill: #9aa5b1; }
.s-whome { background: #0f5c8c; } .s-wdeployment { background: #c2410c; } .s-wother { background: #9aa5b1; }

/* admin: projects & activities table */
.tx-add { display: flex; gap: .5rem .9rem; align-items: flex-end; flex-wrap: wrap; }
.tx-add label, .tx-tools label { margin: 0; }
.tx-add .grow, .tx-tools .grow { flex: 1 1 16rem; }
.tx-add select { max-width: 22rem; }
.tx-tools { display: flex; gap: .5rem 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .75rem; }
.tx-tools label.check { padding-bottom: .5rem; }
.tx-scroll { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.tx-table { margin: 0; min-width: 760px; }
.tx-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.tx-table td { vertical-align: middle; padding-top: .35rem; padding-bottom: .35rem; }
.tx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tx-row.lvl-sector td { background: var(--brand-soft); font-weight: 700; }
.tx-row.lvl-project td:nth-child(3) { padding-left: 1.6rem; font-weight: 600; }
.tx-row.lvl-activity td:nth-child(3) { padding-left: 3.2rem; }
.tx-table td:nth-child(5) { white-space: nowrap; }
.tx-row.inactive .tx-name { color: var(--muted); text-decoration: line-through; }
.tx-actions { display: flex; gap: .75rem; justify-content: flex-end; white-space: nowrap; }
.tx-actions form { margin: 0; }
.tx-rename-form { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.tx-rename-form input[name=name] { width: 22rem; max-width: 60vw; margin: 0; padding: .25rem .4rem; }
.tx-row.flash-row td { animation: txflash 2.2s ease-out; }
@keyframes txflash { from { background: var(--warn-soft); } }
.tx-id { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.tx-table .check-col { width: 2rem; }
.merge-bar { position: sticky; top: 0; z-index: 5; display: flex; gap: .5rem 1rem; align-items: center; flex-wrap: wrap;
  background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 8px; padding: .5rem .8rem; margin: 0 0 .75rem; }
.merge-bar label { margin: 0; display: flex; gap: .4rem; align-items: center; }
.merge-bar select { margin: 0; max-width: 26rem; }
.bad-text { color: var(--bad); }

/* light / dark switch in the top bar */
.theme-btn { font-size: 1.05rem; line-height: 1; padding: .15rem .3rem; color: var(--brand-ink); }
.theme-btn:hover { text-decoration: none; opacity: .8; }
.entries li.flash-row { animation: rowflash 1.6s ease-out; }
@keyframes rowflash { 0%, 30% { background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand); } 100% { background: transparent; box-shadow: none; } }
@media (max-width: 700px) { .toasts { top: auto; bottom: 1rem; flex-direction: column-reverse; } }

/* the day buttons keep one place on every day: the date side wraps within its own space */
@media (min-width: 1000px) {
  .day-top { flex-wrap: nowrap; align-items: flex-start; }
  .day-top .day-left { flex: 1 1 auto; min-width: 0; }
  .day-top .daynav { flex: none; flex-wrap: nowrap; }
}
.day-top .day-left { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.day-status { display: flex; align-items: baseline; align-content: center; gap: .3rem .75rem; flex-wrap: wrap; min-height: 2.45rem; }
.day-status .badge { align-self: baseline; }
/* the date is a button that opens a calendar */
.day-title { position: relative; }
.day-pick { all: unset; cursor: pointer; border-radius: 6px; padding: 0 .15rem; margin-left: -.15rem;
  display: inline-flex; align-items: center; gap: .4rem; }
.day-pick:hover { background: var(--brand-soft); }
.day-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.day-pick-icon { font-size: .85em; opacity: .75; }
.day-pick-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
/* wide screens: date and hours share one line, next to the day buttons */
@media (min-width: 1200px) {
  .day-top { align-items: center; }
  .day-top .day-left { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: .75rem; min-height: 2.45rem; }
  .day-sum .day-total { font-size: 1.4rem; }
  .day-pick { gap: .3rem; }
  .day-title { flex: none; white-space: nowrap; font-size: 1.2rem; }
  .day-status { flex: 0 1 auto; min-width: 0; min-height: 0; flex-wrap: nowrap; white-space: nowrap; gap: .6rem; }
  .holiday-pick select { width: 15rem; }
  .day-status .day-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .day-status .badge { flex: none; }
}

/* desktop: the whole "Add to this day" form, down to its button, fits on one screen */
@media (min-width: 861px) {
  .day-top { margin-bottom: .5rem; }
  .daystrip { height: 34px; }
  .week-line { margin-top: .5rem; }
  .add-head { margin-bottom: .6rem; }
  .kind-tabs { margin-bottom: .7rem; padding: .2rem; }
  .kind-tabs button { padding: .35rem .45rem; font-size: .85rem; line-height: 1.25; }
  .entry-form fieldset.blocks { margin-bottom: .6rem; }
  .entry-form fieldset.blocks legend { margin-bottom: .3rem; }
  .entry-form .chip span, .entry-form .travel-chips .chip span { height: 40px; flex-direction: row; align-items: baseline;
    gap: .25rem; padding-top: .45rem; }
  .entry-form .chip span strong { font-size: 1.15rem; }
  .entry-form label { margin-bottom: .45rem; }
  .entry-form input, .entry-form select, .entry-form textarea { margin-top: .15rem; padding: .38rem .6rem; }
  .entry-form textarea { height: 3.9rem; min-height: 2.6rem; resize: vertical; }
  .next-block { margin-bottom: .45rem; }
}
@media (min-width: 1280px) { .grid-main { grid-template-columns: minmax(300px, 460px) 1fr; } }

/* reminders: small tags on the week line of the day card */
.remind { display: inline-block; margin: .15rem 0 0 .5rem; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem;
  font-weight: 600; background: var(--warn-soft); color: var(--warn); border: 1px solid transparent; white-space: nowrap; }
.remind a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a.remind:hover { text-decoration: none; border-color: currentColor; }
.remind.bad { background: var(--bad-soft); color: var(--bad); }
span.remind { white-space: normal; max-width: 100%; }

/* printing any page: no buttons or forms, comments stay */
@media print {
  .daynav, .acting-banner, .kind-tabs, .entry-form, .place-bar, .theme-btn, .remind, .intro, .toasts,
  form:not(.monthly-form) button, .page-head .btn, .handle { display: none !important; }
  body { color: #000; background: #fff; }
}

/* locked week: a small Unlock button with its pop-up */
.locked-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.locked-head h2 { margin: 0; }
.unlock { position: relative; display: inline-block; }
.unlock-pop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; width: min(22rem, 80vw);
  display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: .75rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); font-weight: 400; }
.unlock-pop[hidden] { display: none; }
.unlock-pop::before { content: ""; position: absolute; bottom: 100%; left: 1.2rem;
  border: 7px solid transparent; border-bottom-color: var(--surface); filter: drop-shadow(0 -1px 0 var(--line)); }
.unlock-pop label { margin: 0; }
.unlock-pop input { margin-top: .25rem; }
.unlock-pop p { margin: 0; }
.unlock-pop .row { gap: .4rem; }
.revert-asked { margin: .75rem 0 0; padding: .5rem .75rem; border-radius: 8px; background: var(--brand-soft); }
@media print { .unlock { display: none !important; } }

/* Unlock pop-up on phones: stays on screen */
@media (max-width: 700px) {
  .unlock-pop { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 1rem; width: auto; }
  .unlock-pop::before { display: none; }
}
/* the menu has up to 8 tabs: compact one-row menu until the window is wide enough for all of them */
@media (min-width: 961px) and (max-width: 1260px) {
  .topbar { gap: .35rem .75rem; }
  .topbar nav { flex-wrap: nowrap; overflow-x: auto; gap: .1rem; }
  .topbar nav a { white-space: nowrap; padding-left: .55rem; padding-right: .55rem; }
  .me-name { display: none; }
}
/* browsers without a calendar pop-up: the date field shows for typing */
.day-pick-input.typing { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; margin-left: .5rem;
  padding: .2rem .4rem; border: 1px solid var(--line); font-size: 1rem; }

/* the add form repeats the previous block */
.repeat-note { color: var(--brand); }
.repeat-note a { font-weight: 500; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* week page: the person's name is a dropdown */
.person-pick { margin: 0; }
.person-pick h1 { margin: 0 0 .25rem; }
.person-pick select { font: inherit; font-weight: 700; color: var(--ink); background-color: transparent;
  border: 1px solid transparent; border-bottom: 1px dashed var(--muted); border-radius: 8px 8px 0 0;
  padding: .1rem 2rem .1rem .4rem; margin-left: -.45rem; width: auto; max-width: min(100%, 24rem);
  text-overflow: ellipsis; cursor: pointer; }
.page-head > div { min-width: 0; }
.person-pick select:hover, .person-pick select:focus-visible { border-color: var(--line); background-color: var(--surface); }
.person-pick select option { font-size: 1rem; font-weight: 400; background: var(--surface); color: var(--ink); }

/* a description copied from the previous block */
textarea[data-prefilled] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }

/* dashboard charts: in the dark theme the darker series colours are lifted to stay readable on the dark cards */
@media screen {
  :root:not([data-theme="light"]) .p0 { fill: #3d8fc4; } :root:not([data-theme="light"]) .bp0, :root:not([data-theme="light"]) .s-p0 { background: #3d8fc4; }
  :root:not([data-theme="light"]) .p5 { fill: #8595a6; } :root:not([data-theme="light"]) .bp5, :root:not([data-theme="light"]) .s-p5 { background: #8595a6; }
  :root:not([data-theme="light"]) .p9 { fill: #b77a52; } :root:not([data-theme="light"]) .bp9, :root:not([data-theme="light"]) .s-p9 { background: #b77a52; }
  :root:not([data-theme="light"]) .p1 { fill: #2f9a78; } :root:not([data-theme="light"]) .bp1, :root:not([data-theme="light"]) .s-p1 { background: #2f9a78; }
  :root:not([data-theme="light"]) .p8 { fill: #7d9220; } :root:not([data-theme="light"]) .bp8, :root:not([data-theme="light"]) .s-p8 { background: #7d9220; }
  :root:not([data-theme="light"]) .p2 { fill: #8a6fcf; } :root:not([data-theme="light"]) .bp2, :root:not([data-theme="light"]) .s-p2 { background: #8a6fcf; }
}
/* wide charts (flows, months) scroll sideways on phones so their labels stay readable */
@media (max-width: 700px) {
  .chart.chart-wide { overflow-x: auto; }
  .chart.chart-wide > svg { min-width: 640px; }
}

/* greyed-out labels (not links) still show their explanation on hover */
span.btn.off { pointer-events: auto; cursor: not-allowed; }

/* ---- team map */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.team-map { height: 60vh; min-height: 360px; border-radius: 8px; border: 1px solid var(--line); z-index: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .6rem; }
.map-legend .check { margin: 0; display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; }
.map-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid #fff; vertical-align: middle; }
.map-dot.k-home { background: #2f9a78; } .map-dot.k-deployment { background: #3d8fc4; }
.map-dot.k-other { background: #b0364a; } .map-dot.k-travel { background: #c2410c; }
.map-list { max-height: calc(60vh + 6rem); overflow-y: auto; }
.map-list h2 { margin-top: 0; }
.map-country { font-size: .95rem; margin: .9rem 0 .3rem; }
.map-people { list-style: none; margin: 0; padding: 0; }
.map-people li { padding: .25rem .3rem; border-radius: 6px; cursor: pointer; }
.map-people li:hover, .map-people li:focus-visible { background: var(--brand-soft); }
.map-day input[type=date] { width: auto; margin: 0; }
.map-status:empty { display: none; }
.map-pop ul { margin: .3rem 0 0; padding-left: 1rem; }
.leaflet-container { font: inherit; }
@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } .map-list { max-height: none; } }

/* monthly report: invoice card above "From your daily blocks" */
.monthly-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.invoice-card h2 { margin-top: 0; }
.invoice-steps { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
.invoice-steps li { margin-bottom: .3rem; }