/* ───────────────────────── Tokens ───────────────────────── */
:root {
  --bg: #f5f1ea;
  --surface: #fffcf7;
  --surface-2: #f3eee6;
  --cell: #f1ece3;
  --weekend: #e6dfd3;
  --hatch: #d8cfc1;
  --ink: #1d1b18;
  --ink-2: #5d574e;
  --ink-3: #978f83;
  --line: #e8e1d5;
  --line-2: #d6cdbf;
  --on-fill: #fff;
  --tint: 36%;

  --holiday: #c8433a;
  --dance: #7b4b94;
  --vacation: #1d6b74;
  --event: #3a5bbf;
  --romance: #dc6a1e;
  --medical: #e2b21d;
  --on-yellow: #2b2206;

  --danger: #b3392f;
  --warn: #a8661a;
  --good: #3d7a55;

  --shadow: 0 1px 2px rgba(48, 36, 20, .04), 0 10px 30px -18px rgba(48, 36, 20, .22);
  --radius: 18px;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #12110f;
  --surface: #1b1916;
  --surface-2: #23211d;
  --cell: #262420;
  --weekend: #1f1d1a;
  --hatch: #34302a;
  --ink: #f2ede4;
  --ink-2: #bab2a5;
  --ink-3: #7f786d;
  --line: #2d2a25;
  --line-2: #3b3731;
  --on-fill: #fff;
  --tint: 46%;

  --holiday: #e45b50;
  --dance: #9d70b8;
  --vacation: #2f909a;
  --event: #7391ec;
  --romance: #ef8a3d;
  --medical: #e9c34f;
  --on-yellow: #2b2206;

  --danger: #e0645a;
  --warn: #e0a252;
  --good: #6fb48a;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -18px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ───────────────────────── Base ───────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Always reserve room for scrollbars, so content never shifts when one appears. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { max-width: 1640px; margin: 0 auto; padding: 30px 32px 56px; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
kbd {
  font: 500 11px var(--sans); padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
}
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ───────────────────────── Controls ───────────────────────── */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font: 500 13px/1 var(--sans); padding: 10px 15px; border-radius: 999px; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s, transform .1s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .seg button:focus-visible, .tab:focus-visible, .row:focus-visible, .fchip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.primary:hover { opacity: .88; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); }
.btn.icon { width: 38px; height: 38px; padding: 0; }
.btn.icon.sm { width: 30px; height: 30px; }
.btn.icon.sm svg.i { width: 16px; height: 16px; }

.seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: 500 12.5px/1 var(--sans); color: var(--ink-2); padding: 8px 13px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line); }
.seg.full { display: flex; width: 100%; }
.seg.full button { flex: 1; padding: 8px 6px; }

input[type="text"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 12px; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { resize: vertical; min-height: 60px; line-height: 1.4; }
input:focus, select:focus, textarea:focus {
  border-color: var(--ink-3); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 10%, transparent);
}
.switch {
  appearance: none; flex: none; width: 36px; height: 21px; margin: 0; border-radius: 99px; cursor: pointer;
  background: var(--line-2); position: relative; transition: background .18s;
}
.switch::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s;
}
.switch:checked { background: var(--vacation); }
.switch:checked::after { transform: translateX(15px); }
.switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ───────────────────────── Header ───────────────────────── */
.top {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 32px;
  padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.brand h1 {
  margin: 0; font: 400 46px/0.95 var(--serif); letter-spacing: -.01em;
}
.brand h1 em { font-style: italic; color: var(--vacation); }
.brand p { margin: 8px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.years { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; margin-right: auto; }
.tab {
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left;
  padding: 6px 14px 9px; border-bottom: 2px solid transparent; color: var(--ink-3);
  font: 400 24px/1.1 var(--serif); transition: color .15s, border-color .15s;
}
.tab small { display: block; margin-top: 3px; font: 500 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tab:hover { color: var(--ink-2); }
.tab.on { color: var(--ink); border-color: var(--ink); }
.tab.add { padding: 8px 10px 10px; color: var(--ink-3); align-self: center; }
.tab.add:hover { color: var(--ink); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#layoutSeg svg.i { display: none; }                    /* shown instead of the words on small screens */

.banner {
  margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; font-size: 13px;
  background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--danger) 30%, var(--line));
}
.banner a { color: inherit; font-weight: 600; }

/* ───────────────────────── Cards & summary ───────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.card-head h2 { margin: 0; font: 400 26px/1.15 var(--serif); }
.card-head h2 span { color: var(--ink-3); }

.summary { overflow: hidden; margin-bottom: 20px; }
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Phones: one stat per row (see the end of this file). */
.stat { padding: 18px 20px 16px; min-width: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.stat .k { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.stat .v {
  margin: 8px 0 5px; font: 400 42px/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat .v small { margin-left: 6px; font: 500 12px var(--sans); letter-spacing: 0; color: var(--ink-3); }
.stat .s { font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.stat.hero .v { color: var(--vacation); }
.stat.neg .v { color: var(--danger); }
.stat.lost .v { color: var(--warn); }
.warn { color: var(--warn); }
.nw { white-space: nowrap; }                    /* a phrase that wraps as a whole, e.g. "use by 31 Dec 2027" */
.neg { color: var(--danger); }
.meter-row { display: grid; gap: 10px; padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.meter { position: relative; display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--cell); }
.meter .limit { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger); box-shadow: 0 0 0 1px var(--surface); }
.meter i { display: block; height: 100%; transition: width .3s; }
.meter i + i { box-shadow: -1px 0 0 var(--surface); }
.meter-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11.5px; color: var(--ink-2); }
.meter-legend span { display: inline-flex; align-items: center; gap: 7px; }
.meter-legend .aside { margin-left: auto; }                          /* medical: outside the leave budget */
.meter-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.meter-legend i.unplanned { background: var(--cell); box-shadow: inset 0 0 0 1px var(--line-2); }
.meter i.expired, .meter-legend i.expired { background: repeating-linear-gradient(-45deg, var(--warn) 0 2px, color-mix(in oklab, var(--warn) 35%, var(--surface)) 2px 4px); }

/* ───────────────────────── Main layout ───────────────────────── */
/* Calendar and sidebar sit side by side while the calendar has room for its minimum width;
   otherwise the sidebar wraps below it. The calendar's own horizontal scroll is a last resort. */
.main { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.col { flex: 999 1 850px; display: grid; gap: 20px; min-width: 0; }    /* 850px: the linear calendar's minimum */
.main.is-months .col { flex-basis: 560px; }                             /* month cards reflow; room for two columns */
.cal-card { padding: 22px 22px 18px; min-width: 0; }
.cal-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 2px 6px; margin: -4px -2px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }

/* ───────────────────────── Calendar: day cells ───────────────────────── */
#calendar { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.d {
  --cell-bg: var(--cell);
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 5px; cursor: pointer; color: var(--ink-2);
  background-color: var(--cell-bg); background-repeat: no-repeat;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  transition: box-shadow .12s;
}
.d > span { position: relative; }
.d:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.d.we { --cell-bg: var(--weekend); color: var(--ink-3); }
.d.hol { --cell-bg: var(--weekend); }       /* a free day, like a weekend; an entry's color still wins */
.d.hol, .d.holwe { color: var(--holiday); font-weight: 600; }
/* --over is a top image layer that every fill below includes, so the "before start" hatching survives them. */
.d { --over: none; }
.d.pre { --over: repeating-linear-gradient(-45deg, transparent 0 3px, var(--hatch) 3px 4px); background-image: var(--over); color: var(--ink-3); opacity: .7; }
/* Entry fills. --c is the entry's color: solid = leave taken, tint = a free day, no leave needed. */
.d { --fill: var(--c); --sl: 28%; }
.d.tint { --fill: color-mix(in oklab, var(--c) var(--tint), var(--surface)); }
.d.full { background-color: var(--fill); color: var(--ink); }
.d.full.solid { color: var(--on-fill); font-weight: 600; }
.d.full.solid.ink { color: var(--on-yellow); }                       /* readable on the yellow medical fill */
.d.am { background-image: var(--over), linear-gradient(135deg, var(--fill) 0 50%, transparent 50% 100%); color: var(--ink); }
.d.pm { background-image: var(--over), linear-gradient(135deg, transparent 0 50%, var(--fill) 50% 100%); color: var(--ink); }
/* Only there before or after work: a sliver at the top (morning) and/or bottom (evening). */
.d.morn { background-image: var(--over), linear-gradient(var(--fill) 0 var(--sl), transparent var(--sl)); }
.d.eve { background-image: var(--over), linear-gradient(transparent calc(100% - var(--sl)), var(--fill) calc(100% - var(--sl))); }
.d.full.striped { background-image: var(--over), repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in oklab, var(--c) 34%, transparent) 3px 5px); }
.d.rest.solid { background-image: var(--over), repeating-linear-gradient(-45deg, transparent 0 3px, rgba(255, 255, 255, .32) 3px 5px); }
.d.rest.tint { background-image: var(--over), repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in oklab, var(--c) 50%, transparent) 3px 5px); }
.d .hm {
  position: absolute; top: 0; right: 0; width: 8px; height: 8px; pointer-events: none;
  border-top-right-radius: inherit; background: linear-gradient(225deg, var(--holiday) 0 50%, transparent 50%);
}
.mgrid .d .hm { width: 10px; height: 10px; }
.d.bridge { outline: 1.5px dashed color-mix(in oklab, var(--holiday) 75%, transparent); outline-offset: -2px; }
.d.today::before {
  content: ""; position: absolute; inset: -3px; border: 1.5px solid var(--ink); border-radius: 8px; pointer-events: none;
}
.d.sel { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 1px var(--surface); }
.d.sel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in oklab, var(--ink) 14%, transparent); pointer-events: none; }
.d .dots { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; pointer-events: none; }
.d .dots b { width: 4px; height: 4px; border-radius: 50%; background: var(--m); box-shadow: 0 0 0 1px var(--surface); }

/* Linear layout: one row per month, columns aligned on weekdays. Every row is its own flex line of
   38 equal items (so the columns line up) as wide as the whole calendar, so the month name can stay put
   (sticky) while the days scroll sideways underneath it. */
.lin { display: grid; gap: 3px; width: max-content; min-width: 100%; }
.lin .ln { display: flex; gap: 2px; }
.lin .ln > * { flex: 1 1 0; min-width: 18px; }
.lin .ln > .corner, .lin .ln > .mo {
  flex: 0 0 64px; position: sticky; left: 0; z-index: 2;
  /* Also mask the gaps around it: the today ring reaches 3px beyond its day. */
  background: var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 -3px 0 var(--surface), 0 3px 0 var(--surface);
}
.lin .wd { padding-bottom: 4px; text-align: center; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; color: var(--ink-3); }
.lin .wd.we { opacity: .55; }
.lin .mo { display: flex; align-items: center; white-space: nowrap; }
.lin .mo span { display: flex; align-items: baseline; gap: 5px; font: 400 17px/1 var(--serif); }
.lin .mo small { font: 500 10px var(--sans); color: var(--ink-3); }
.lin .d { height: 30px; }

/* Month cards layout */
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 22px 26px; }
.month h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; font: 400 21px/1.1 var(--serif); }
.month h3 small { font: 500 11px var(--sans); color: var(--ink-3); letter-spacing: .04em; }
.mgrid { display: grid; grid-template-columns: 20px repeat(7, minmax(0, 1fr)); gap: 3px; }
.mgrid .wd { text-align: center; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; color: var(--ink-3); padding-bottom: 2px; }
.mgrid .wd.we { opacity: .55; }
.mgrid .wk { display: flex; align-items: center; justify-content: flex-start; font-size: 9px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mgrid .d { aspect-ratio: 1 / 1; font-size: 11.5px; border-radius: 7px; }
.mgrid .x { aspect-ratio: 1 / 1; }

/* Legend swatches (mirror the cell styles) */
.sw { display: inline-block; width: 13px; height: 13px; border-radius: 4px; background: var(--c); flex: none; }

/* ───────────────────────── Overview table ───────────────────────── */
.ov-card { padding: 22px 22px 12px; min-width: 0; }
.ov-scroll { overflow-x: auto; }
.ov { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }   /* separate: borders move with sticky cells */
.ov th { padding: 0 10px 9px; text-align: right; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ov td { padding: 11px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ov tr:last-child td { border-bottom: 0; }
.ov th:first-child, .ov td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--surface); }   /* the years stay put while scrolling sideways */
.ov td:first-child { font: 400 18px var(--serif); }
.ov tbody tr { cursor: pointer; transition: background .12s; }
.ov tbody tr:hover td { background: var(--surface-2); }
.ov tr.on td { background: color-mix(in oklab, var(--vacation) 8%, var(--surface)); }
.ov .dim { color: var(--ink-3); }

/* ───────────────────────── Sidebar ───────────────────────── */
/* Next to the calendar, the panel is exactly as tall as the calendar column (set by fitSidebar),
   and its body scrolls. Stacked below the calendar it just takes its natural height. */
.side {
  flex: 1 1 clamp(380px, 30vw, 440px);
  display: flex; flex-direction: column; padding: 20px 20px 10px; min-width: 0;
}
.side-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  margin: 0 -20px; padding: 0 20px;
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.side-head { display: flex; align-items: baseline; justify-content: space-between; }
.side-head h2 { margin: 0; font: 400 26px/1.15 var(--serif); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.fchip {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  font: 500 11.5px/1 var(--sans); color: var(--ink-2); transition: opacity .15s, background .15s;
}
.fchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.fchip span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fchip:hover { background: var(--surface-2); }
.fchip[aria-pressed="false"] { opacity: .42; }
.fchip[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.list { margin: 0 -12px; padding: 4px 12px 8px; }
.row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 10px; margin: 0 -10px; border-radius: 13px; cursor: pointer; transition: background .12s;
}
.row:hover, .row:has(:focus-visible), .row:focus-visible { background: var(--surface-2); }   /* keyboard focus only, so a click leaves nothing behind */
.row.past { opacity: .55; }
.past-group summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; margin: 0 -10px 2px; border-radius: 13px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2); transition: background .12s;
}
.past-group summary::-webkit-details-marker { display: none; }
.past-group summary::after { content: "+"; font: 400 18px/1 var(--sans); color: var(--ink-3); }
.past-group[open] summary::after { content: "–"; }
.past-group summary:hover { background: var(--surface-2); }
.past-group summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.row.off > :not(.acts) { opacity: .45; }
.row.off .lv { text-decoration: line-through; }
.row .ico {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--c) 15%, var(--surface)); color: var(--c);
}
.row .t { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.row .t .name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.row .m { font-size: 12px; color: var(--ink-2); }
.row .n { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .lv { text-align: right; font: 400 24px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.row .lv small { display: block; margin-top: 3px; font: 600 9.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.row .acts {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-2);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.row:hover .acts, .row:has(:focus-visible) .acts, .row:focus-visible .acts { opacity: 1; pointer-events: auto; }
@media (hover: none) { .row .acts { display: none; } }   /* tap a row: the editor has Duplicate & Delete */
.tag {
  flex: none; padding: 2px 7px; border-radius: 99px; font: 500 10.5px/1.3 var(--sans);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.empty { padding: 28px 10px; text-align: center; color: var(--ink-2); font-size: 13px; }
.empty .art { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in oklab, var(--vacation) 12%, var(--surface)); color: var(--vacation); }
.empty .art svg.i { width: 24px; height: 24px; }
.empty p { margin: 4px 0; }

.hols { border-top: 1px solid var(--line); margin: auto -20px 0; padding: 0 20px; }   /* auto: sits at the bottom */
.hols summary {
  list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 13px 0 10px; cursor: pointer; font: 400 19px var(--serif);
}
.hols summary::-webkit-details-marker { display: none; }
.hols summary::after { content: "+"; font: 400 18px var(--sans); color: var(--ink-3); margin-left: 6px; }
.hols[open] summary::after { content: "–"; }
.hols summary .muted { margin-left: auto; font-family: var(--sans); }
#holList { padding-bottom: 10px; }
.hrow { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.hrow:first-child { border-top: 0; }
.hrow .hd { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hrow .hn { font-weight: 500; }
.hrow .hn em { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.hrow .hk { grid-column: 2; font-size: 11.5px; color: var(--holiday); }
.hrow.free .hd { color: var(--holiday); font-weight: 600; }
.hrow.weekend .hn, .hrow.past { opacity: .6; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 26px; font-size: 12px; color: var(--ink-3); }
.foot .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--good); vertical-align: 1px; }
.foot .dot.bad { background: var(--danger); }
.foot .dot.wait { background: var(--warn); }

/* ───────────────────────── Dialogs ───────────────────────── */
dialog {
  width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 22px;
  background: var(--surface); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(0,0,0,.45), 0 0 0 1px var(--line);
}
dialog::backdrop { background: rgba(22, 17, 11, .42); backdrop-filter: blur(3px); }
dialog[open] { animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 2px; }
.dlg-h h3 { margin: 0; font: 400 30px/1.1 var(--serif); }
.dlg-b { display: grid; gap: 15px; padding: 16px 22px 18px; }
.dlg-f { display: flex; align-items: center; gap: 6px; padding: 14px 22px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dlg-f .spacer { flex: 1; }
.lbl { display: block; margin-bottom: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hint { margin: 7px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two.date-part { grid-template-columns: 170px minmax(0, 1fr); }      /* date + the four leave options */
.two .seg { margin-top: 8px; }
.check { display: flex; align-items: center; gap: 11px; font-size: 13.5px; cursor: pointer; }
.types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.types button {
  appearance: none; display: grid; justify-items: center; gap: 6px; padding: 11px 4px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface);
  font: 500 11.5px/1.2 var(--sans); color: var(--ink-2); text-align: center; transition: border-color .15s, background .15s;
}
.types button svg.i { color: var(--c); width: 20px; height: 20px; }
.types button:hover { border-color: var(--line-2); }
.types button[aria-pressed="true"] { border-color: var(--c); color: var(--ink); background: color-mix(in oklab, var(--c) 10%, var(--surface)); box-shadow: inset 0 0 0 1px var(--c); }
.preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 13px 16px; border-radius: 14px;
  background: var(--surface-2); font-size: 12.5px; color: var(--ink-2);
}
.preview .big { display: flex; align-items: baseline; gap: 7px; }
.preview .big b { font: 400 34px/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums; }
.preview .meta { display: grid; gap: 2px; }
.err { color: var(--danger); font-size: 12.5px; min-height: 0; margin: 0; }
.err:empty { display: none; }
.ovr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ovr label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--surface-2); font: 400 17px var(--serif); }
.ovr input { padding: 6px 9px; background: var(--surface); text-align: right; font-family: var(--sans); font-size: 13px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ───────────────────────── Tooltip & toast ───────────────────────── */
.tt {
  position: fixed; z-index: 50; left: 0; top: 0; max-width: 290px; padding: 10px 13px 9px; border-radius: 13px;
  background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.4; pointer-events: none;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s;
}
.tt.show { opacity: 1; transform: none; }
.tt .h { margin-bottom: 5px; font: 400 17px/1.2 var(--serif); }
.tt .r { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.tt .r i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c); transform: translateY(0); }
.tt .r em { font-style: normal; opacity: .6; }
.tt .f { margin-top: 7px; font-size: 11px; opacity: .55; }
/* Pinned by a tap (touch screens): the same details, plus buttons. */
.tt.pinned { pointer-events: auto; }
.tt .do { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.tt .do button {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 34px; padding: 6px 13px;
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--bg) 35%, transparent); background: transparent;
  color: var(--bg); font: 500 12px/1.2 var(--sans); cursor: pointer;
}
.tt .do button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt .do button i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.tt .do button svg.i { width: 14px; height: 14px; }
.tt .do button:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 14px;
  padding: 9px 9px 9px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transform: translate(-50%, 16px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast button {
  appearance: none; padding: 6px 13px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--bg);
  border: 1px solid color-mix(in oklab, var(--bg) 35%, transparent); font: 500 12px var(--sans);
}
.toast:not(.has-action) { padding-right: 18px; }

/* ───────────────────────── Account & sign-in ───────────────────────── */
.account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 13.5px; color: var(--ink-2); }
.account strong { color: var(--ink); font-weight: 600; }
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login { width: min(400px, 100%); padding: 30px 28px 26px; }
.login .brand { margin-bottom: 24px; }
.login-form { display: grid; gap: 15px; }
.login-form .btn { width: 100%; padding: 12px 15px; margin-top: 4px; }

/* ───────────────────────── Responsive & print ───────────────────────── */
@media (max-width: 640px) {
  .wrap { padding: 18px 16px 40px; }
  /* Header: the title and the buttons share one row, the years go below it; no subtext. */
  .top { align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 16px; }
  .brand h1 { font-size: 30px; }
  .brand p, .tab small { display: none; }
  .tools { margin-left: auto; gap: 6px; }
  .tools .btn.icon { width: 36px; height: 36px; }
  #layoutSeg button { padding: 7px 10px; }
  #layoutSeg svg.i { display: block; width: 17px; height: 17px; }
  .years { width: 100%; order: 3; }
  .tab { padding: 4px 10px 7px; font-size: 20px; }
  .tab.add { padding: 4px 8px 6px; }
  .cal-card, .ov-card { padding: 18px 16px 14px; }
  .side { padding: 18px 16px 8px; }
  .side-body { margin: 0 -16px; padding: 0 16px; }
  .hols { margin: auto -16px 0; padding: 0 16px; }
  .stat { padding: 14px 16px 12px; }
  .stat .v { font-size: 34px; }
  .meter-row { padding: 12px 16px 14px; }
  .types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two, .two.date-part { grid-template-columns: 1fr; }
  .dlg-h, .dlg-b, .dlg-f { padding-left: 18px; padding-right: 18px; }
  .tools .label { display: none; }
}
/* Phones: the stats become rows, with the label and number on the left and the notes beside them.
   Every row shares the columns (subgrid), so the left one is just as wide as its widest label or number
   and the notes get the rest. */
@media (max-width: 560px) {
  .stats { grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; }
  .stat {
    grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: 12px;
    align-items: center; padding: 11px 14px 10px;
  }
  .stat .k { grid-column: 1; grid-row: 1; }
  .stat .v { grid-column: 1; grid-row: 2; margin: 3px 0 0; font-size: 28px; white-space: nowrap; }
  .stat .v small { margin-left: 5px; }
  .stat .s { grid-column: 2; grid-row: 1 / span 2; }
}
@supports not (grid-template-columns: subgrid) {     /* older browsers: a fixed left column */
  @media (max-width: 560px) { .stat { grid-template-columns: 96px minmax(0, 1fr); } }
}
@media print {
  body { background: #fff; }
  .tools, .tab.add, .row .acts, .foot, .filters, .hols { display: none !important; }
  .card { box-shadow: none; }
  .col, .side { flex-basis: 100%; }
  .side { height: auto !important; }
  .side-body { overflow: visible; }
}