:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
[hidden]{display:none!important}
/* Layout: one year as twelve month rows, days left to right; plans are bars laid on the rows, stacked in lanes when they overlap. */
:root{
  --bg:#faf7f2; --surface:#ffffff; --line:#e2dbd0; --line-soft:#ece6dc;
  --fg:#241f1a; --muted:#6b635a; --faint:#9c938a; --weekend:#f1ece3; --blank:#f7f3ec;
  --accent:#1f5f57; --accent-fg:#ffffff; --today:#c2410c; --danger:#b42318;
  --c-trips:#2b7a8c; --c-conferences:#b54a6a; --c-family:#b7791f; --c-holidays:#3f8a4f; --c-rest:#6b5ba8;
  --bar-fg:#ffffff;
  --day-size:.68rem; --day-weight:400; --wd-size:.6rem; --wd:currentColor;
  --month-gap:0; --month-radius:0; --month-bg:transparent; --m-div-w:1px; --m-div:var(--line-soft); --mlabel-bg:transparent; --mlabel-border:var(--line-soft); --m-size:.95rem; --m-fg:var(--fg); --year-bg:var(--surface); --year-pad:0; --days-pad:5px; --m-frame-w:0; --m-frame:transparent; --m-last-w:0; --m-display:block; --m-align:flex-start; --m-pad:6px 0 0 10px;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#131a27; --surface:#26314a; --line:#3d4a66; --line-soft:#2f3b57;
  --fg:#e8ecf4; --muted:#9aa4b8; --faint:#c3cddd; --weekend:#1e2840; --blank:#171e2b;
  --day-size:.78rem; --day-weight:700; --wd-size:.58rem; --wd:#afbcd2;
  --month-gap:3px; --month-radius:8px; --month-bg:#26314a; --m-div-w:1px; --m-div:#4a5a78; --mlabel-bg:#3b4a6b; --mlabel-border:transparent; --m-size:1.15rem; --m-fg:#ffffff; --year-bg:#1a2234; --year-pad:4px; --days-pad:1px; --m-frame-w:1px; --m-frame:#4a5a78; --m-last-w:1px; --m-display:flex; --m-align:center; --m-pad:0 0 0 10px;
  --accent:#6cc3b5; --accent-fg:#0c1714; --today:#fb923c; --danger:#f97066;
  --c-trips:#4fa7ba; --c-conferences:#d77a96; --c-family:#d9a043; --c-holidays:#66b475; --c-rest:#9c8ddb;
  --bar-fg:#101620; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#131a27; --surface:#26314a; --line:#3d4a66; --line-soft:#2f3b57;
  --fg:#e8ecf4; --muted:#9aa4b8; --faint:#c3cddd; --weekend:#1e2840; --blank:#171e2b;
  --day-size:.78rem; --day-weight:700; --wd-size:.58rem; --wd:#afbcd2;
  --month-gap:3px; --month-radius:8px; --month-bg:#26314a; --m-div-w:1px; --m-div:#4a5a78; --mlabel-bg:#3b4a6b; --mlabel-border:transparent; --m-size:1.15rem; --m-fg:#ffffff; --year-bg:#1a2234; --year-pad:4px; --days-pad:1px; --m-frame-w:1px; --m-frame:#4a5a78; --m-last-w:1px; --m-display:flex; --m-align:center; --m-pad:0 0 0 10px;
  --accent:#6cc3b5; --accent-fg:#0c1714; --today:#fb923c; --danger:#f97066;
  --c-trips:#4fa7ba; --c-conferences:#d77a96; --c-family:#d9a043; --c-holidays:#66b475; --c-rest:#9c8ddb;
  --bar-fg:#101620; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 40px}
img{max-width:100%}
.wrap{max-width:1280px;margin:0 auto;display:grid;gap:18px}
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
h1{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.3rem);margin:0;letter-spacing:-.01em;text-wrap:balance}
.yearnav{display:flex;align-items:center;gap:6px}
.yearnav .yr{font-family:var(--display);font-weight:700;font-size:1.6rem;min-width:4.2ch;text-align:center;font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:8px 14px;min-height:40px}
button:hover{border-color:var(--muted)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.bar:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:700}
button.icon{width:40px;padding:0;font-size:1.2rem}
button.danger{color:var(--danger);border-color:var(--danger)}
.bar-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;list-style:none;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:6px}
.sw{width:14px;height:14px;border-radius:3px;display:inline-block}
.status{font-size:.85rem;color:var(--muted)}
.status.warn{color:var(--today)}

.yearbox{background:var(--year-bg);border:1px solid var(--line);border-radius:12px;overflow-x:auto;padding:var(--year-pad)}
.year{min-width:760px;display:grid;gap:var(--month-gap)}
.month{display:grid;grid-template-columns:52px 1fr;border:var(--m-frame-w) solid var(--m-frame);border-bottom:var(--m-div-w) solid var(--m-div);background:var(--month-bg);border-radius:var(--month-radius);overflow:hidden}
.month:last-child{border-bottom-width:var(--m-last-w)}
.mlabel{font-family:var(--display);font-weight:700;font-size:var(--m-size);display:var(--m-display);align-items:var(--m-align);padding:var(--m-pad);color:var(--m-fg);background:var(--mlabel-bg);border-right:1px solid var(--mlabel-border)}
.days{display:grid;grid-template-columns:repeat(31,minmax(0,1fr));grid-auto-rows:minmax(22px,auto);row-gap:3px;padding-bottom:var(--days-pad);position:relative}
.cell{grid-row:1/-1;border-right:1px solid var(--line-soft);font-size:var(--day-size);font-weight:var(--day-weight);color:var(--faint);text-align:center;padding-top:3px;font-variant-numeric:tabular-nums}
.cell.we{background:var(--weekend)}
.cell.none{background:repeating-linear-gradient(135deg,var(--blank) 0 4px,var(--line-soft) 4px 5px);color:transparent}
.cell.today{box-shadow:inset 0 0 0 2px var(--today);color:var(--today);font-weight:700}
.cell .wd{display:block;font-size:var(--wd-size);color:var(--wd);opacity:.85}
.bar{position:relative;z-index:1;margin:0 1px;border-radius:5px;color:var(--bar-fg);font-size:.78rem;font-weight:700;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border:0;min-height:22px;text-align:left;line-height:18px}
.bar.cont-l{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.bar.cont-r{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.bar .mark{font-weight:400;opacity:.85}

.empty{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:16px 18px;color:var(--muted);max-width:68ch}
.empty strong{color:var(--fg)}

dialog{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);padding:0;width:min(520px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(10,14,24,.45)}
.plan{display:grid;gap:14px;padding:20px}
.plan h2{font-family:var(--display);margin:0;font-size:1.3rem}
.field{display:grid;gap:4px}
.field label{font-weight:700;font-size:.9rem}
.field .hint{font-size:.8rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:40px;width:100%}
textarea{min-height:64px;resize:vertical}
.err{color:var(--danger);font-size:.88rem;min-height:1.2em}
.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
.actions .right{display:flex;gap:8px;margin-left:auto}
.confirm{background:var(--bg);border:1px solid var(--danger);border-radius:8px;padding:10px 12px;display:grid;gap:8px}
@media (max-width:820px){.year{min-width:660px}}
@media (pointer:coarse){button{min-height:48px}button.icon{width:48px}input,select,textarea{min-height:48px}.bar{min-height:30px}}
@media (pointer:coarse) and (max-width:520px),(pointer:coarse) and (max-height:500px){.bar{min-height:44px}}
@media (max-width:480px){.two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.bar{transition:filter .15s}.bar:hover{filter:brightness(1.08)}}

/* Read-only details and pencilled-in entries */
.plan p{margin:0}
.plan .hint{font-size:.85rem;color:var(--muted)}
.bar{background:var(--cat)}
.bar.tentative{background:color-mix(in srgb,var(--cat) 28%,var(--surface));color:var(--fg);box-shadow:inset 0 0 0 1px var(--cat)}
.sw-faded{background:color-mix(in srgb,var(--muted) 28%,var(--surface));box-shadow:inset 0 0 0 1px var(--muted)}

/* Work-phase band: a thin strip at the top of a month, with a second lane when phases overlap. Not a sixth colour. */
.mlabel{grid-row:1 / span 2}
.phases,.days{grid-column:2}
.phases{display:grid;grid-template-columns:repeat(31,minmax(0,1fr));grid-auto-rows:14px;row-gap:1px;padding:1px 0}
.phase{min-height:0;height:14px;padding:0 4px;margin:0;border:0;border-radius:3px;background:var(--muted);color:var(--bg);font-size:.62rem;font-weight:700;line-height:14px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phase.tentative{background:color-mix(in srgb,var(--muted) 28%,var(--surface));color:var(--fg);box-shadow:inset 0 0 0 1px var(--muted)}
.sw-phase{background:var(--muted)}
@media (pointer:coarse){.phases{grid-auto-rows:20px}.phase{min-height:0;height:20px;line-height:20px}}