/* "While you were gone" page (/urlaubs-comic/, /en/vacation-handover/, /it/passaggio-consegne/): form, progress, comic grid, Nextcloud receipts, handover note.
   Dark is the site default; html[data-theme="light"] redefines the --hv-* colours. Colour only supports the meaning (✓/✗ and labels carry it). */
.hv { --hv-ok: #3ddc84; --hv-bad: #ff6b6b; --hv-card: rgba(255, 255, 255, .035); --hv-line: rgba(255, 255, 255, .14); --hv-mark: #ffb454; }
html[data-theme="light"] .hv { --hv-ok: #17803d; --hv-bad: #b42318; --hv-card: rgba(0, 0, 0, .03); --hv-line: rgba(0, 0, 0, .16); --hv-mark: #b45309; }
.hv [hidden] { display: none !important; }
.hv .dim { color: var(--muted); }
.hv-kick { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 4px; font: 700 13px var(--font-m); letter-spacing: .08em; text-transform: uppercase;
  color: #0a0c10; background: linear-gradient(135deg, #7df0ff, #ffb454); }
.hv-hero .h2 { font-size: clamp(32px, 6vw, 56px); line-height: 1.06; letter-spacing: -.01em; }
.hv-h2 { margin: 34px 0 12px; font: 700 clamp(20px, 3vw, 26px)/1.2 var(--font-d, var(--font-b)); }
.hv h3 { margin: 18px 0 8px; font: 700 16px var(--font-b); }
.hv a:focus-visible, .hv button:focus-visible, .hv select:focus-visible, .hv input:focus-visible + span, .hv summary:focus-visible { outline: 3px solid #8fb4ff; outline-offset: 2px; }

/* ---- form */
.hv-form { margin: 24px 0 8px; max-width: 760px; }
.hv-note { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.hv-row { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.hv-lab { display: block; margin: 0 0 6px; padding: 0; font: 600 14.5px var(--font-m); color: var(--muted); }
.hv-sel { width: 100%; max-width: 420px; min-height: 46px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2, rgba(127, 127, 127, .45)); background: var(--bg-2, transparent);
  color: var(--text); font: 500 16px var(--font-b); color-scheme: light dark; }
.hv-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-pill { position: relative; cursor: pointer; }
.hv-pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hv-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2, rgba(127, 127, 127, .45)); color: var(--text); font: 500 15px var(--font-b); transition: border-color .2s, background .2s; }
.hv-pill:hover span { border-color: var(--accent); }
.hv-pill input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.hv-go { min-height: 54px; padding: 0 30px; border: 1px solid var(--accent); border-radius: 10px; color: #eaf6ff; font: 700 18px var(--font-b); cursor: pointer;
  background: linear-gradient(135deg, #1b3a4a, #3a2a55); box-shadow: 0 0 0 1px rgba(125, 240, 255, .25), 0 0 18px rgba(125, 240, 255, .22); transition: transform .2s, filter .2s; }
.hv-go:hover { filter: brightness(1.2); transform: translateY(-2px); }
.hv-go[disabled] { opacity: .6; cursor: wait; transform: none; }
.hv-msg { margin: 14px 0 0; max-width: 66ch; color: var(--muted); font-size: 15.5px; min-height: 1.4em; }
.hv-msg:empty { display: none; }
.hv-msg.ok { color: var(--hv-ok); font-weight: 600; }
.hv-msg.warn { color: var(--hv-mark); font-weight: 600; }

/* ---- progress */
.hv-prog { margin: 18px 0 8px; padding: 16px; max-width: 760px; border-radius: var(--radius); border: 1px solid var(--hv-line); background: var(--hv-card); }
.hv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hv-steps li { display: grid; grid-template-columns: 18px minmax(120px, 190px) 1fr; align-items: baseline; gap: 10px; opacity: .45; transition: opacity .3s; font-size: 14.5px; }
.hv-steps li b { font: 700 13.5px var(--font-m); }
.hv-steps li.on, .hv-steps li.done { opacity: 1; }
.hv-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); align-self: center; }
.hv-steps li.on .hv-dot { border-color: var(--accent); background: var(--accent); animation: hv-pulse 1s infinite; }
.hv-steps li.done .hv-dot { border-color: var(--hv-ok); background: var(--hv-ok); }
@keyframes hv-pulse { 50% { transform: scale(1.5); opacity: .6; } }

/* ---- comic (self-hosted lettering fonts, SIL OFL: see assets/fonts/handover/LICENSE.txt) */
@font-face { font-family: "Bangers"; src: url("/assets/fonts/handover/Bangers-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Comic Neue"; font-weight: 700; src: url("/assets/fonts/handover/ComicNeue-Bold.woff2") format("woff2"); font-display: swap; }
.hv-who { margin: 0 0 12px; color: var(--muted); font: 600 14.5px var(--font-m); }
.hv-comic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px 14px; padding: 6px 2px; }
.hv-p { margin: 0; grid-column: span 12; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .35)); transition: opacity .6s ease, transform .6s ease; }
@media (min-width: 761px) {
  .hv-p.p1, .hv-p.p2 { grid-column: span 6; } .hv-p.p3 { grid-column: span 7; } .hv-p.p4 { grid-column: span 5; }
  .hv-p.p0 { transform: rotate(-.25deg); } .hv-p.p1 { transform: rotate(.3deg); } .hv-p.p2 { transform: rotate(-.3deg); } .hv-p.p3 { transform: rotate(.2deg); } .hv-p.p4 { transform: rotate(-.35deg); }
}
.hv-p svg { display: block; width: 100%; height: auto; }
.hv-p.is-hidden { opacity: 0; transform: translateY(16px) scale(.96) !important; }
.hv-act { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.hv-b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-2, rgba(127, 127, 127, .45)); background: transparent; color: var(--text);
  font: 500 14.5px var(--font-m); cursor: pointer; text-decoration: none; }
.hv-b:hover { border-color: var(--accent); color: var(--accent); }
.hv-clip { position: fixed; left: -9999px; top: 0; }

/* ---- Nextcloud receipts */
.hv-rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 10px 0; }
.hv-r { position: relative; margin: 0; padding: 14px 14px 14px 52px; border-radius: 10px; border: 1px solid var(--hv-ok); background: var(--hv-card); min-width: 0; }
.hv-r.is-fail { border-color: var(--hv-bad); }
.hv-rh { font: 700 14px var(--font-m); color: var(--hv-ok); }
.hv-r.is-fail .hv-rh { color: var(--hv-bad); }
.hv-rd { margin: 6px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; color: var(--text); }
.hv-ri { position: absolute; left: 14px; top: 12px; font-size: 24px; }

/* ---- handover note */
.hv-sum { margin: 0 0 6px; font-size: 17px; line-height: 1.55; max-width: 70ch; }
.hv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 4px 22px; }
.hv-cols ul, .hv-cols ol { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.55; }
.hv-cols li { margin: 0 0 6px; }
.hv-mail li.m-urgent b::before { content: "▲ "; color: var(--hv-mark); }
.hv-reply { margin: 6px 0 0; padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--hv-card); border-radius: 0 8px 8px 0; white-space: pre-wrap; font-size: 15px; line-height: 1.55; max-width: 70ch; }
.hv-mdwrap { margin: 16px 0 0; }
.hv-mdwrap summary { cursor: pointer; font: 600 14.5px var(--font-m); color: var(--muted); min-height: 32px; }
.hv-md { margin: 10px 0 0; padding: 14px; max-height: 420px; overflow: auto; border-radius: 8px; border: 1px solid var(--hv-line); background: var(--bg-2, transparent); white-space: pre-wrap; font: 500 13px/1.55 var(--font-m); }

/* ---- below the fold */
.hv-faq details { margin: 0 0 8px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--hv-line); }
.hv-faq summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.hv-faq p { margin: 8px 0 0; line-height: 1.6; max-width: 70ch; }
.hv-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hv-rel { margin: 22px 0 0; }
@media (max-width: 560px) { .hv-steps li { grid-template-columns: 18px 1fr; } .hv-steps li > span:last-child { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .hv-p, .hv-go, .hv-steps li { transition: none; } .hv-steps li.on .hv-dot { animation: none; } }