/* Almanaque. Reference: docs/DESIGN.md (SavvyCal): forest-green stage, cream paper, editorial serif,
   lime = action (and the vacation days you take), red = holidays, as on a printed wall calendar.
   Shape rule: 8px for buttons, cards and inputs; pills 999px; frames 20px. */
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --f-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --f-mono: var(--f-sans);
  --bg: #fcf7ed; --surface: #ffffff; --surface-2: #f4ecdc; --field: #ffffff;
  --ink: #1c1917; --head: #0b0a09; --muted: #5b544b; --line: #e8dfcc; --line-strong: #c7bba3;
  --stage: #0d542b; --stage-2: #0a4423; --stage-ink: #fcf7ed; --stage-muted: #c9dccd;
  --lime: #b9ff78; --lime-ink: #1c1917; --lime-soft: #e3fdc9;
  --red: #c42f12; --red-ring: #f54320; --red-soft: #ffe3e3;
  --accent: #0d542b; --accent-hover: #0a4423; --accent-ink: #fcf7ed; --accent-text: #0d542b;
  --weekend: #6b6358; --today: #1c1917;
  --danger: #b42318; --r-s: 8px; --r-m: 12px; --r-btn: 8px; --r-frame: 20px;
  --shadow: 0 24px 48px -24px rgb(28 25 23 / .22), 0 2px 6px rgb(28 25 23 / .05);
  --shadow-warm: 0 24px 48px -20px rgb(245 67 32 / .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1612; --surface: #16201a; --surface-2: #121b16; --field: #101813;
    --ink: #efe9dc; --head: #fcf7ed; --muted: #b3ab9b; --line: #25322a; --line-strong: #3b4b41;
    --stage: #0b3d21; --stage-2: #082f19; --stage-muted: #b8cfbf;
    --lime-soft: #23361a;
    --red: #ff8466; --red-ring: #ff6a47; --red-soft: #3a1f19;
    --accent: #b9ff78; --accent-hover: #cdff9f; --accent-ink: #13200b; --accent-text: #b9ff78;
    --weekend: #a9b4ab; --today: #fcf7ed;
    --danger: #f97066; --shadow: 0 24px 48px -24px rgb(0 0 0 / .7); --shadow-warm: 0 24px 48px -24px rgb(0 0 0 / .6);
  }
}
body { font-feature-settings: "ss01" on; letter-spacing: -0.003em; }
h1, h2, h3, .display { font-family: var(--f-serif); color: var(--head); font-weight: 650; letter-spacing: -0.02em; }
.brand { font-family: var(--f-serif); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand svg { border-radius: 8px; }
.prose p, .prose li { color: var(--ink); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ buttons */
.btn-solid { background: var(--lime); color: var(--lime-ink); border: 1.5px solid var(--ink); }
.btn-solid:hover { background: #a8f560; }
.btn-ghost { border-width: 1.5px; border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.stage .btn-solid { border-color: transparent; box-shadow: 0 0 0 4px rgb(185 255 120 / .2); }
.stage .btn-ghost { color: var(--stage-ink); border-color: rgb(252 247 237 / .6); }
.stage .btn-ghost:hover { background: var(--stage-ink); color: var(--stage); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-solid { border-color: transparent; } }

/* ------------------------------------------------------------------ eyebrow with the coral squiggle */
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-bottom: 9px; margin: 0 0 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q 3 0 6 3 T 12 3 T 18 3 T 24 3' fill='none' stroke='%23f54320' stroke-width='1.6'/%3E%3C/svg%3E") left bottom / 24px 6px repeat-x;
  background-size: 24px 6px; }
.stage .eyebrow { color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q 3 0 6 3 T 12 3 T 18 3 T 24 3' fill='none' stroke='%23b9ff78' stroke-width='1.6'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ stage (the one dark zone per page) */
.stage { position: relative; isolation: isolate; overflow: hidden; color: var(--stage-ink);
  background: radial-gradient(120% 90% at 85% 0%, #0f6a37 0%, var(--stage) 45%, var(--stage-2) 100%); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 0%, transparent 0 46px, rgb(185 255 120 / .07) 46px 47px); }
.stage h1, .stage h2 { color: var(--stage-ink); }
.stage h1 em, .stage .hl { font-style: normal; color: var(--lime); }
.stage a:not(.btn) { color: var(--stage-ink); }
.stage .lead { color: var(--stage-muted); }
.stage-in { padding-block: 48px 56px; }
@media (min-width: 900px) { .stage-in { padding-block: 72px 80px; } }
.stage h1 { font-size: clamp(2.5rem, 6vw, 4.7rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; margin-bottom: .3em; max-width: 15ch; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 58ch; }
.stage .field > label, .stage .field > .label { color: var(--stage-ink); }
.stage .help { color: var(--stage-muted); }
.stage .input select, .stage select.select, .stage .input input { background-color: rgb(252 247 237 / .08); color: var(--stage-ink); border-color: rgb(252 247 237 / .35); }
.stage select option { color: #1c1917; }
.stage :focus-visible { outline-color: var(--lime); }
.stage .input select, .stage select.select { background-image: linear-gradient(45deg, transparent 50%, var(--stage-ink) 50%), linear-gradient(135deg, var(--stage-ink) 50%, transparent 50%); }

.hero-grid { display: grid; gap: 32px; align-items: end; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.next { border: 1px solid rgb(252 247 237 / .22); border-radius: var(--r-frame); padding: 22px 24px; background: rgb(8 40 22 / .35); backdrop-filter: blur(6px); }
.next-l { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lime); font-weight: 700; }
.next-n { font-family: var(--f-serif); font-size: clamp(3.2rem, 8vw, 4.6rem); line-height: 1; font-weight: 700; margin: 8px 0 4px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.next-n small { font-size: .32em; font-weight: 500; letter-spacing: 0; color: var(--stage-muted); font-family: var(--f-sans); margin-left: .3em; }
.next-d { margin: 0; color: var(--stage-ink); font-weight: 600; }
.next-s { margin: 4px 0 0; color: var(--stage-muted); font-size: .92rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; border-top: 1px solid rgb(252 247 237 / .18); padding-top: 14px; }
.stats dt { font-size: .74rem; color: var(--stage-muted); }
.stats dd { margin: 0; font-family: var(--f-serif); font-size: 1.6rem; font-weight: 700; }
.pick { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 28px; }
.pick .field { min-width: min(100%, 300px); }

/* ------------------------------------------------------------------ sections */
.sec { padding-block: 64px 0; }
.sec-head { max-width: 760px; margin-bottom: 28px; }
.sec h2, .page-h h1 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; }
.page-h { padding-block: 40px 8px; }
.page-h h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); max-width: 20ch; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 24px; }

/* ------------------------------------------------------------------ year calendar */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 22px; padding: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; }
.sw-hol { color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red-ring); }
.sw-loc { color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red-ring); background: var(--red-soft); }
.sw-vac { background: var(--lime); color: var(--lime-ink); }
.sw-we { color: var(--weekend); }
.sw-br { box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 999px; }

.year { display: grid; gap: 28px 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }
.month h3 { font-size: 1.15rem; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
.month h3 small { font-family: var(--f-sans); font-size: .75rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
table.mcal { width: 100%; border-collapse: separate; border-spacing: 0 2px; table-layout: fixed; font-size: .88rem; }
.mcal th, .mcal td { padding: 0; text-align: center; vertical-align: middle; border: 0 !important; background: none; }
.mcal thead th { font-size: .7rem; color: var(--muted); font-weight: 600; padding-bottom: 4px; background: none; }
.mcal td span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; font-variant-numeric: tabular-nums; position: relative; }
.mcal td.we span { color: var(--weekend); }
.mcal td.h span { color: var(--red); font-weight: 750; box-shadow: inset 0 0 0 1.5px var(--red-ring); cursor: help; }
.mcal td.h.l span { background: var(--red-soft); }
.mcal td.v span { background: var(--lime); color: var(--lime-ink); font-weight: 700; }
.mcal td.run { background: color-mix(in srgb, var(--lime) 28%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mcal td.run { background: color-mix(in srgb, var(--lime) 14%, transparent); } }
.mcal td.run.rs { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.mcal td.run.re { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.mcal td.t span { outline: 2px solid var(--today); outline-offset: -2px; }
.mcal td.x span { color: var(--muted); font-weight: 400; box-shadow: none; text-decoration: line-through; text-decoration-color: var(--line-strong); }
.mcal td.bridge span::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--ink); }
@media (max-width: 380px) { .mcal td span { width: 27px; height: 27px; } }

/* ------------------------------------------------------------------ holiday list */
.hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.hlist li { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.hdate { text-align: center; line-height: 1; }
.hdate b { display: block; font-family: var(--f-serif); font-size: 2rem; color: var(--red); font-weight: 700; letter-spacing: -0.03em; }
.hdate span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.hname { font-weight: 600; }
.hname small { display: block; font-weight: 400; color: var(--muted); font-size: .88rem; }
.tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line-strong); color: var(--muted); }
.tag-a { border-color: var(--red-ring); color: var(--red); }
.tag-l { background: var(--red-soft); border-color: transparent; color: var(--red); }
.hlist li.past { opacity: .55; }

.two { display: grid; gap: 40px; }
@media (min-width: 1000px) { .two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } .two .sticky { position: sticky; top: 88px; } }

/* ------------------------------------------------------------------ bridges */
.bridges { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); list-style: none; padding: 0; margin: 0; }
.bridges li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px; display: grid; gap: 4px; }
.b-len { font-family: var(--f-serif); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--head); }
.b-len small { font-family: var(--f-sans); font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: 6px; }
.b-when { font-weight: 600; margin: 4px 0 0; }
.b-why { color: var(--muted); font-size: .9rem; margin: 0; }
.b-take { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; font-weight: 600; margin-top: 6px; }
.b-take i { width: 10px; height: 10px; border-radius: 999px; background: var(--lime); box-shadow: 0 0 0 1px var(--ink); }

/* ------------------------------------------------------------------ tools grid */
.tools { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tool { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); text-decoration: none; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s; }
.tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-warm); border-color: var(--red-ring); }
.tool .i { width: 30px; height: 30px; color: var(--accent-text); }
.tool h3 { font-size: 1.3rem; margin: 6px 0 0; }
.tool p { margin: 0; color: var(--muted); font-size: .95rem; }
.tool .go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; margin-top: 6px; color: var(--ink); }

/* region links */
.regions { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); list-style: none; padding: 0; margin: 0; }
.regions a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-weight: 600; transition: border-color .2s, transform .2s; }
.regions a:hover { border-color: var(--ink); transform: translateX(3px); }
.regions small { color: var(--muted); font-weight: 500; }

/* ------------------------------------------------------------------ tool pages */
.tool-grid { display: grid; gap: 28px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .tool-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; } .tool-grid > .panel { position: sticky; top: 88px; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 24px; display: grid; gap: 18px; }
.panel h2 { font-size: 1.3rem; margin: 0; }
.row2 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.row2 input { min-width: 0; }
.seg { display: grid; width: 100%; }
.seg label { padding: 0 8px; }
.result-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 4px; }
.big { font-family: var(--f-serif); font-size: clamp(3.4rem, 9vw, 5.6rem); line-height: .95; font-weight: 700; letter-spacing: -0.04em; color: var(--head); margin: 0; font-variant-numeric: tabular-nums; }
.big-l { font-size: 1.1rem; color: var(--muted); margin: 0; }
.big-l b { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.blocks { list-style: none; padding: 0; margin: 22px 0 32px; display: grid; gap: 10px; }
.blocks li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.blocks .n { font-family: var(--f-serif); font-weight: 700; font-size: 1.9rem; line-height: 1; min-width: 2ch; text-align: right; color: var(--head); }
.blocks .w { font-weight: 600; }
.blocks .w small { display: block; font-weight: 400; color: var(--muted); font-size: .86rem; }
.blocks .c { font-size: .82rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); white-space: nowrap; }
.blocks li.fx .c { background: var(--surface-2); color: var(--ink); }
.note { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--surface-2); font-size: .92rem; }
.note.warn { background: var(--red-soft); }
.locals { display: grid; gap: 10px; }
.locals .row2 input { min-height: 46px; }
input[type="date"] { min-height: 50px; padding: 0 12px; background: var(--field); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-s); width: 100%; }
input[type="date"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; margin: 18px 0; }
.kv div { background: var(--surface); padding: 14px 16px; }
.kv dt { font-size: .8rem; color: var(--muted); }
.kv dd { margin: 2px 0 0; font-family: var(--f-serif); font-size: 1.6rem; font-weight: 700; }
.dlist { columns: 2 220px; padding-left: 1.1em; font-size: .92rem; color: var(--muted); }

/* print page preview */
.preview { border: 2px solid var(--red-ring); border-radius: var(--r-frame); box-shadow: var(--shadow-warm); background: #fff; overflow: hidden; aspect-ratio: 210 / 297; }
.preview.land { aspect-ratio: 297 / 210; }
.preview canvas { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ faq */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 2px; font-weight: 650; display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-serif); font-size: 1.6rem; line-height: 1; color: var(--red); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 2px 18px; color: var(--ink); max-width: 70ch; }

/* tables */
.ftable td:first-child { white-space: nowrap; font-weight: 600; }
.ftable td.c, .ftable th.c { text-align: center; }
.src { font-size: .85rem; color: var(--muted); }
.src a { color: var(--accent-text); }

.nf .nf-code { color: var(--red); font-family: var(--f-serif); }

/* ------------------------------------------------------------------ disclosure inside panels */
.more { border-top: 1px solid var(--line); padding-top: 14px; }
.more summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font-family: var(--f-serif); font-size: 1.4rem; line-height: 1; color: var(--red); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.more[open] summary::after { transform: rotate(45deg); }