/* Generated by build.js from app.html. Do not edit. */
body{margin:0}[hidden]{display:none!important}img{max-width:100%}
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-grotesque-v1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Fallback tuned to Bricolage Grotesque's width and ascent, so text doesn't move when the web font arrives. */
@font-face { font-family: "Bricolage Fallback"; font-weight: 400; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"); size-adjust: 92.4%; ascent-override: 100.6%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Liberation Sans Bold"); size-adjust: 89.3%; ascent-override: 104.1%; descent-override: 30.2%; line-gap-override: 0%; }
/* Layout: almanac page on pelto.se paper. Settings column on the left, plan + calendar on the right; stacks on phones.
   Neutrals equal home.css; colour only for meaning: red holidays, amber eves, ballpoint-blue leave. */
:root {
  --bg: #f2ede3;
  --surface: #f2ede3;
  --surface-2: #e9e2d4;
  --ink: #1d1b17;
  --muted: #5e594f;
  --faint: #8c8577;
  --line: #d6cebf;
  --red: #b3262a;
  --red-tint: #f1d8cf;
  --leave: #23509e;
  --leave-ink: #f7f3ea;
  --leave-tint: #d9dfe8;
  --leave-stripe: #6d8cc4;
  --eve: #7a5300;
  --eve-tint: #efdfb5;
  --block: #8c8577;
  --warn: #b3262a;
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", "Bricolage Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --r: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #22201c; --surface: #22201c; --surface-2: #2d2a25; --ink: #ece6da; --muted: #aaa293; --faint: #857e70; --line: #3d3933;
    --red: #f2827a; --red-tint: #47271f; --leave: #86a9ea; --leave-ink: #11141a; --leave-tint: #2b3347; --leave-stripe: #4f6ea8;
    --eve: #e8bd5a; --eve-tint: #3f3317; --block: #857e70; --warn: #f2827a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #22201c; --surface: #22201c; --surface-2: #2d2a25; --ink: #ece6da; --muted: #aaa293; --faint: #857e70; --line: #3d3933;
  --red: #f2827a; --red-tint: #47271f; --leave: #86a9ea; --leave-ink: #11141a; --leave-tint: #2b3347; --leave-stripe: #4f6ea8;
  --eve: #e8bd5a; --eve-tint: #3f3317; --block: #857e70; --warn: #f2827a; color-scheme: dark;
}
/* No layout shift: the markup ships invisible copies (.ph) of what the script renders for a first visit
   (settings summary, budgets, a suggestion card, stats, the empty plan line, the legend); the script's innerHTML
   replaces them. The theme button keeps its place while hidden. */
.ph { visibility: hidden; }
.jump .theme-btn[hidden] { display: inline-flex !important; visibility: hidden; }
/* ---------- Layout pass 2026-10-31: phones first ---------- */
/* Settings summary: on narrow screens the settings collapse into one line that opens them. */
.setup-sum { display: none; }
@media (max-width: 900px) {
  .setup-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 1px solid var(--faint); border-radius: 16px; background: var(--bg); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
  .setup-sum .ss-text { display: grid; gap: 2px; min-width: 0; }
  .setup-sum .ss-k, .setup-sum .ss-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .setup-sum .ss-v { font-size: 1rem; font-weight: 600; }
  .setup-sum .ss-k { font-size: 0.86rem; color: var(--muted); }
  .setup-sum .ss-act { flex: none; font-size: 0.86rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
  .setup-sum[aria-expanded="true"] .ss-act::after { content: " ▴"; }
  aside.settings:not(.open) { display: none; }
}
/* Goal as three visible choices instead of a dropdown. */
.goal-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--faint); border-radius: 999px; }
.goal-seg label { padding: 7px 13px; font-size: 0.86rem; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 999px; transition: background-color .15s ease, color .15s ease; }
.goal-seg input { position: absolute; opacity: 0; pointer-events: none; }
.goal-seg label:has(input:checked) { background: var(--ink); color: var(--bg); }
.goal-seg label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.goal-wrap { display: grid; gap: 6px; }
.panel-intro { font-size: 0.88rem; color: var(--muted); max-width: 70ch; }
.justera-head { display: grid; gap: 6px; padding-top: 8px; }
/* Touch or pointer wording. */
.on-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .on-touch { display: inline; } .on-pointer { display: none; } }
/* Month navigation: only used when the months scroll sideways (phones). The panel's column must not grow to
   the row of months, so it is capped at the available width. */
.panel { grid-template-columns: minmax(0, 1fr); }
.month-nav { display: none; scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 64px); }
footer details.sources summary { cursor: pointer; color: var(--ink); }
footer details.sources ul { margin-top: 8px; }
@media (max-width: 560px) {
  .month-nav { display: flex; align-items: center; gap: 8px; }
  .month-nav .mn-arrow { flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--faint); background: var(--bg); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .month-nav .mn-arrow:disabled { opacity: .35; }
  .month-nav .mn-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .month-strip { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); padding: 2px 8px; }
  .month-strip::-webkit-scrollbar { display: none; }
  .month-strip button { flex: none; position: relative; min-width: 44px; height: 40px; padding: 0 8px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font-size: 0.84rem; font-weight: 600; scroll-snap-align: center; }
  .month-strip button[aria-current="true"] { border-color: var(--ink); color: var(--ink); }
  .month-strip button.has-leave::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--leave); }
  .months { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .months::-webkit-scrollbar { display: none; }
  .months .month { scroll-snap-align: start; scroll-snap-stop: always; }
}
/* Striped blue = sommarblock: still your leave, reserved before the rest. */
:root { --stripes: repeating-linear-gradient(135deg, var(--leave) 0 5px, var(--leave-stripe) 5px 9px); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
.wrap {
  max-width: 1320px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 14px 48px;
}
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variation-settings: "opsz" 72; }
h3 { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
html { -webkit-text-size-adjust: 100%; accent-color: var(--ink); caret-color: var(--leave); scrollbar-color: var(--line) transparent; scroll-behavior: smooth; }
::selection { background: var(--leave-tint); color: var(--ink); }
a { text-underline-offset: 3px; }
[data-target] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 64px); }

/* Sticky jump bar */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.jump { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.jump-inner { max-width: 1320px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 8px; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.jump-inner::-webkit-scrollbar { display: none; }
.jump button { border: none; background: none; color: var(--muted); font-weight: 500; font-size: 0.94rem; padding: 7px 10px; border-radius: 0; white-space: nowrap; }
.jump button:hover { color: var(--ink); }
.jump-sum { margin-left: auto; flex: 1 1 auto; text-align: right; white-space: nowrap; font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--ink); padding-left: 12px; }
.jump-sum b { color: var(--leave); }
.theme-btn { flex: none; width: 38px; height: 38px; border-radius: 999px !important; border: 1px solid var(--line) !important; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; margin-left: 8px; }
.theme-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jump-sum:is([hidden]) + .theme-btn, .jump-sum[style*="display: none"] + .theme-btn { margin-left: auto; }
@media (min-width: 901px) { .jump .only-narrow { display: none; } }
@media (max-width: 560px) { .jump-sum { display: none; } .jump button { padding: 7px 8px; } .jump-inner { justify-content: space-between; } .theme-btn { margin-left: 0; } }
@media (max-width: 360px) { .jump button { padding: 7px 5px; font-size: 0.82rem; } .jump-inner { gap: 0; } }
p { margin: 0; }
a { color: inherit; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 0.84rem; }

.topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; margin-bottom: 28px; border-bottom: 1px solid var(--ink); }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 20; transform: translateY(-200%); padding: 10px 14px; background: var(--ink); color: var(--bg); }
.skip-link:focus { transform: none; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: -0.04em; text-decoration: none; font-variation-settings: "opsz" 96; }
.wordmark span { color: #b03c17; }
:root[data-theme="dark"] .wordmark span { color: #ef7148; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark span { color: #ef7148; } }
.topline-note { font-size: 0.84rem; color: var(--muted); }
.noscript { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--ink); border-radius: var(--r); max-width: 56ch; }
header.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
/* Two lines are reserved so the page doesn't jump when the script fills the line in. */
header.top .hero-line { max-width: 40ch; min-height: 2.7em; margin-top: 16px; font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.3rem); font-weight: 500; line-height: 1.35; text-wrap: balance; }
header.top .hero-line b { font-variant-numeric: tabular-nums; color: var(--leave); }
header.top .lead { max-width: 56ch; color: var(--muted); margin-top: 8px; font-size: 1rem; }
.redword { color: var(--red); }

.layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); } }

/* Settings */
aside.settings { background: none; border: none; border-top: 1px solid var(--ink); border-radius: 0; padding: 16px 2px 8px; display: grid; gap: 24px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); max-height: calc(100vh - 76px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 900px) { aside.settings { position: static; max-height: none; border-top: none; padding-top: 4px; } }
/* Taller than the viewport (Fler inställningar open on a laptop): scroll with the page instead of inside the box. */
aside.settings.unstick { position: static; max-height: none; overflow: visible; }
.weekdays { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.weekdays .check { align-items: center; }
.weekdays .check input { margin-top: 0; }
.group { display: grid; gap: 12px; }
.field { display: grid; gap: 4px; }
.field label, .lbl { font-size: 0.86rem; font-weight: 500; }
.hint { font-size: 0.8rem; color: var(--muted); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.group, .field, .more-body, .rules-body { min-width: 0; }
/* iOS/iPadOS Safari gives date inputs a wide intrinsic size that ignores width: 100%. */
@supports (-webkit-touch-callout: none) {
  input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; min-height: 46px; }
  input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}
input[type="number"], input[type="date"], select {
  font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--bg); border: 1px solid var(--faint);
  border-radius: 10px; padding: 10px 14px; min-height: 46px; width: 100%; min-width: 0;
}
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--ink); }
details.rules { border-top: 1px solid var(--line); padding-top: 10px; }
details.rules summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; }
details.rules .rules-body { display: grid; gap: 8px; margin-top: 10px; }
.avtal-note { font-size: 0.84rem; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.avtal-note .unverified { color: var(--warn); font-weight: 600; }
.avtal-note summary { cursor: pointer; color: var(--ink); }
.avtal-note summary .lm { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.avtal-note[open] summary .lm { display: none; }
#avtalNote { display: grid; gap: 4px; margin-top: 6px; }
details.more { border-top: 1px solid var(--line); padding-top: 14px; }
details.more > summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.more-body { display: grid; gap: 18px; margin-top: 14px; }

/* Main column */
main { display: grid; gap: 44px; min-width: 0; }
.panel { background: none; border: none; border-radius: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }

.budgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.budget { display: grid; gap: 6px; }
.budget .nums { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.budget .big { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; display: flex; }
.bar span { display: block; height: 100%; }
.bar .b-summer { background: var(--stripes); }
.bar .b-leave { background: var(--leave); }
.budget.over .big { color: var(--warn); }
.budget.over .bar { outline: 2px solid var(--warn); outline-offset: 1px; }
.warn-text { color: var(--warn); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.optimize-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 10px 10px 18px; background: var(--surface-2); border-radius: 28px; }
.optimize-row .btn.primary { margin-left: auto; }
.tools-row { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tools-row .linkbtn { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tools-row .linkbtn:hover { text-decoration: underline; }
.tools-row svg, .cards-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .optimize-row { border-radius: 20px; padding: 12px; }
  .optimize-row .btn.primary { margin-left: 0; width: 100%; }
  .optimize-row .goal { flex: 1 1 auto; }
}
.cards-wrap { position: relative; min-width: 0; }
.cards-nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cards-nav { display: flex; gap: 6px; }
  .cards-nav button { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--faint); background: var(--bg); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
  .cards-nav button:hover:not(:disabled) { background: var(--surface-2); }
  .cards-nav button:disabled { opacity: .35; cursor: default; }
}
.more-breaks { justify-self: start; margin-top: 4px; }
.goal { display: inline-flex; align-items: center; gap: 6px; }
button { font: inherit; cursor: pointer; }
.btn { border: 1px solid var(--faint); background: transparent; color: var(--ink); border-radius: 999px; min-height: 44px; padding: 0 20px; font-weight: 600; font-size: 0.94rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .2s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { background: var(--leave); border-color: var(--leave); color: var(--leave-ink); }

/* Cards */
.cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 252px); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
/* Card rows: head / main / dates / footer, so the same parts line up across the strip. */
.card { text-align: left; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--r); padding: 14px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; scroll-snap-align: start; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--ink); }
.card .c-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card .c-name { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; text-wrap: balance; }
.card .c-main { font-size: 0.92rem; }
.card .c-main b { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.card .c-dates { font-size: 0.8rem; color: var(--muted); }
.card .c-wk { white-space: nowrap; }
.card .chip { flex: none; font-size: 0.78rem; font-weight: 650; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: var(--leave-tint); color: var(--leave); }
.card .c-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.8rem; font-weight: 600; min-height: 31px; }
.card .pill-top { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink); background: none; border: 1px solid var(--ink); padding: 1px 7px; border-radius: 999px; }
.card .c-status { display: inline-flex; align-items: center; gap: 5px; color: var(--leave); margin-left: auto; }
.card .c-status svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.card[aria-pressed="true"] { background: var(--leave-tint); border-color: var(--leave); box-shadow: inset 0 0 0 1px var(--leave); }
.card[aria-pressed="true"] .chip { background: var(--bg); }
.card[aria-pressed="true"] .c-foot { border-top-color: color-mix(in srgb, var(--leave) 35%, transparent); }
.card.partial { border-color: var(--leave); border-style: dashed; }
.cards-empty { color: var(--muted); font-size: 0.9rem; }

/* Summary */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { display: grid; gap: 2px; align-content: start; }
.stat .v { font-size: 2.2rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.1; font-variation-settings: "opsz" 72; }
.stat .k { font-size: 0.78rem; color: var(--muted); }
.breaks { list-style: none; margin: 0; padding: 0; display: grid; }
.breaks li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.breaks .b-when { font-weight: 600; }
/* The dates of a break are a button: it shows the break in the calendar. */
.breaks .b-show { flex: 1 1 auto; min-width: 0; display: block; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.breaks .b-show .b-when { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.breaks .b-show:hover .b-when { text-decoration-color: currentColor; }
.breaks .b-show:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.breaks .b-cal { display: inline-block; width: 15px; height: 15px; margin-left: 7px; vertical-align: -2px; color: var(--muted); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.breaks .b-show:hover .b-cal { color: var(--ink); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.month { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 72px); }
/* Days of the break picked in Din plan, outlined for a few seconds. */
.d.shown { box-shadow: 0 0 0 2px var(--ink); z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .d.shown { animation: shown-pulse .9s var(--ease-out) 2; }
  @keyframes shown-pulse { 50% { box-shadow: 0 0 0 4px var(--ink); } }
}
.breaks .b-meta { color: var(--muted); font-size: 0.86rem; }
.breaks .b-tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--leave); margin-left: 6px; }
.linkbtn { background: none; border: none; color: var(--ink); padding: 2px 0; font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.linkbtn:hover { text-decoration-color: currentColor; }
.warnline { color: var(--warn); font-size: 0.88rem; font-weight: 600; }

/* Calendar */
.modebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--faint); border-radius: 999px; }
.seg label { padding: 6px 13px; font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 999px; display: flex; align-items: center; gap: 6px; transition: background-color .15s ease, color .15s ease; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--ink); color: var(--bg); }
.seg label:hover:not(:has(input:checked)) { color: var(--ink); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.sw.leave { background: var(--leave); border-color: var(--leave); }
.sw.summer { background: var(--stripes); border-color: var(--leave); }
.sw.bridge { background: var(--leave-tint); }
.sw.red { background: var(--red-tint); border-color: var(--red); }
.sw.eve { background: var(--eve-tint); border-color: var(--eve); }
.sw.evework { background: var(--surface); border-color: var(--eve); box-shadow: inset 0 0 0 1.5px var(--eve-tint); }
.sw.half { background: linear-gradient(135deg, var(--eve-tint) 50%, var(--surface) 50%); border-color: var(--eve); }
.sw.klam { background: var(--surface); border: 1.5px dashed var(--eve); }
.sw.block { background: repeating-linear-gradient(45deg, var(--surface-2) 0 3px, var(--block) 3px 4px); }
.sw.pref { background: var(--surface); border-bottom: 2px dotted var(--leave); border-radius: 3px 3px 0 0; }
.sw.today { background: var(--surface); border: 2px solid var(--ink); }

.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px 16px; }
.month { min-width: 0; }
.month-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 6px; }
.month-head .mname { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; text-transform: capitalize; color: var(--ink); margin: 0; }
.month-head .mname-btn { font: inherit; text-transform: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.month-head .mstat { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.grid { display: grid; grid-template-columns: 24px repeat(7, minmax(0, 1fr)); gap: 2px; }
.grid .dh { font-size: 0.75rem; color: var(--muted); text-align: center; text-transform: lowercase; padding-bottom: 2px; }
.grid .wk { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.d { height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-variant-numeric: tabular-nums; border: 1px solid transparent; background: none; color: var(--ink); padding: 0; position: relative; min-width: 0; }
.d.empty { visibility: hidden; }
button.d:hover { border-color: var(--ink); }
.d.wkend { color: var(--muted); }
.d.sun { color: var(--red); }
.d.red { background: var(--red-tint); color: var(--red); font-weight: 650; }
.d.eve { background: var(--eve-tint); color: var(--eve); font-weight: 650; }
.d.half { background: linear-gradient(135deg, var(--eve-tint) 50%, transparent 50%); }
.d.evework { color: var(--eve); font-weight: 650; box-shadow: inset 0 0 0 1.5px var(--eve-tint); }
.d.klam { border: 1.5px dashed var(--eve); }
.d.klamfree { background: var(--eve-tint); color: var(--eve); border-style: solid; border-color: var(--eve-tint); }
.d.bridge { background: var(--leave-tint); }
.d.bridge.red, .d.bridge.eve { box-shadow: inset 0 0 0 2px var(--leave-tint); }
.d.leave { background: var(--leave); color: var(--leave-ink); font-weight: 650; }
.d.summer { background: var(--stripes); color: var(--leave-ink); font-weight: 650; }
.d.block { background: repeating-linear-gradient(45deg, var(--surface-2) 0 4px, transparent 4px 7px); color: var(--muted); text-decoration: line-through; }
.d.pref::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 2px; height: 0; border-bottom: 2px dotted var(--leave); }
.d.leave.pref::after, .d.summer.pref::after { border-color: var(--leave-ink); }
.d.past { color: var(--muted); background: none; box-shadow: none; font-weight: 400; }
.d.today { outline: 2px solid var(--ink); outline-offset: -2px; }
.d.hl { box-shadow: 0 0 0 2px var(--leave); z-index: 1; }
.d.hl.leave, .d.hl.summer { box-shadow: 0 0 0 2px var(--ink); }

/* Windows High Contrast and similar: backgrounds are dropped, so each state needs a shape of its own. */
@media (forced-colors: active) {
  .d.leave, .sw.leave { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .d.summer, .sw.summer { forced-color-adjust: none; background: Highlight; color: HighlightText; border: 2px double HighlightText; outline: 2px solid Highlight; outline-offset: -1px; }
  .d.bridge, .sw.bridge { border: 1px dashed Highlight; }
  .d.red, .sw.red, .d.sun { color: LinkText; border: 2px solid LinkText; }
  .d.eve, .d.klamfree, .sw.eve, .sw.klam { border: 2px dotted CanvasText; }
  .d.half, .sw.half { border: 1px dotted CanvasText; }
  .d.block, .sw.block { text-decoration: line-through; border: 1px solid GrayText; color: GrayText; }
  .d.pref::after, .sw.pref { border-bottom: 2px dotted Highlight; }
  .d.today { outline: 3px solid CanvasText; }
  .card[aria-pressed="true"], .seg label:has(input:checked) { outline: 3px solid Highlight; outline-offset: -3px; }
  .bar span { forced-color-adjust: none; background: Highlight; }
  .bar { border: 1px solid CanvasText; }
}

/* Dialog-ish export panel */
.export { display: grid; gap: 10px; }
.export ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.export li { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 6px; font-size: 0.9rem; }
.export textarea, .copyfallback { width: 100%; min-height: 90px; font-family: var(--font-mono); font-size: 0.75rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px; }

.wrap:not(.wrap-main) { padding-bottom: 0; }
.wrap.wrap-main { padding-top: 0; }
.panel, aside.settings { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 60px); }
.jump button[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.avtal-note > summary { list-style: none; }
.avtal-note > summary::-webkit-details-marker { display: none; }
.h-group { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 0.9rem; max-width: min(92vw, 520px); z-index: 20; opacity: 0; pointer-events: none; transition: opacity .2s; display: flex; align-items: center; gap: 14px; box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .45); }
.toast.show { opacity: 1; }
.toast.show.act { pointer-events: auto; }
.toast button { background: none; border: none; color: var(--bg); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; white-space: nowrap; }
.toast button:focus-visible { outline-color: var(--bg); }
@media (max-width: 560px) { .toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 58px); width: max-content; } }
footer { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--ink); display: grid; gap: 12px; font-size: 0.84rem; color: var(--muted); }
footer > p, footer > div { max-width: 90ch; }
footer a { text-decoration-color: var(--faint); }
footer a:hover { text-decoration-color: currentColor; }
.foot-home { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 14px; border-top: 1px solid var(--line); max-width: none !important; }
.foot-home a { color: var(--ink); text-decoration: none; }
footer ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
@media (prefers-reduced-motion: reduce) { *, html { transition: none !important; scroll-behavior: auto !important; } }

/* Motion (all inside no-preference). Only where it explains a change: the entrance matches the start page and
   /minecraft/; bars move from their old value; after Optimera the plan rows slide in; a day you add pops. */
@media (prefers-reduced-motion: no-preference) {
  header.top h1 { animation: focus-in .9s var(--ease-out) both; }
  header.top .hero-line { animation: lift .6s var(--ease-out) .2s both; }
  header.top .lead { animation: lift .6s var(--ease-out) .3s both; }
  .setup-sum, .panel[aria-labelledby="budgetTitle"] { animation: lift .6s var(--ease-out) .4s both; }
  .bar span { transition: width .6s var(--ease-out); }
  .breaks li.enter { animation: slide-in .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .stats.enter .stat { animation: lift .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
  .d.pop { animation: pop-in .3s var(--ease-out); }
  button.d, .card, .seg label, .goal-seg label { transition: transform .12s var(--ease-out), background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
  button.d:active { transform: scale(.9); }
  .card:active { transform: scale(.98); }
  @keyframes focus-in { from { opacity: 0; transform: translateY(.18em); filter: blur(12px); } }
  @keyframes lift { from { opacity: 0; transform: translateY(16px); } }
  @keyframes slide-in { from { opacity: 0; transform: translateX(-14px); } }
  @keyframes pop-in { from { transform: scale(.6); } 60% { transform: scale(1.08); } }
}

/* Print: the plan and the calendar on white paper; controls stay on screen. */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --bg: #fff; --surface: #fff; --surface-2: #eee; --ink: #000; --muted: #444; --line: #bbb;
    --red: #b3262a; --red-tint: #f6dcd6; --leave: #23509e; --leave-ink: #fff; --leave-tint: #dde4f0; --leave-stripe: #6d8cc4;
    --eve: #7a5300; --eve-tint: #f3e4bb; color-scheme: light;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before, .jump, aside.settings, .skip-link, .optimize-row, .tools-row, #copyFallback, .export, .cards-nav, .modebar, #modeHint, .toast, .setup-sum, .justera-head, .month-nav, footer details.sources,
  .panel[aria-labelledby="cardsTitle"], .breaks li .linkbtn, .more-breaks, .topline-note { display: none !important; }
  .layout { display: block; }
  main { gap: 24px; }
  .months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .month { break-inside: avoid; }
  footer ul { display: none; }
}

/* Tablet: settings in two columns above the plan */
@media (min-width: 600px) and (max-width: 900px) {
  aside.settings { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  aside.settings > details.more { grid-column: 1 / -1; }
  .more-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more-body > #rulesBox { grid-column: 1 / -1; }
}
/* Phone */
@media (max-width: 560px) {
  .wrap { padding-block: 18px 40px; }
  header.top { margin-bottom: 12px; }
  header.top .lead { font-size: 0.95rem; }
  aside.settings { padding: 14px 0 4px; }
  .jump button { font-size: 0.88rem; }
  .theme-btn { width: 34px; height: 34px; }
  .layout { gap: 32px; }
  main { gap: 36px; }
  .topline { margin-bottom: 24px; }
  .budget .big { font-size: 1.5rem; }
  .stat .v { font-size: 1.8rem; }
  .legend { font-size: 0.78rem; gap: 4px 10px; }
}
/* Touch: bigger targets, no sticky hover */
@media (pointer: coarse) {
  .d { height: 38px; font-size: 0.9rem; }
  .btn { min-height: 44px; }
  .seg label { padding: 10px 12px; }
  .linkbtn { padding: 8px 0; }
}
@media (hover: none) {
  button.d:hover { border-color: transparent; }
  .card:hover { border-color: var(--line); }
  .btn:hover { border-color: var(--faint); }
  .btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
}