/* www.seastarmauritius.com: one stylesheet, no framework. Sizes, spacing, radii and breakpoints are the previous site's, measured in a
   browser at widths from 390 to 1920 px. Breakpoints: 1441, 1281, 1050, 1024, 800, 699, 575, 525. The palette variables (--main, --shade2, …)
   and the @font-face rules are written into each page's <head> by scripts/build-www.mjs from data/www/site.json and fonts.css. */
*, *::before, *::after { box-sizing: border-box; }
:root { --hd: 75px; --ink: #323335; --muted: #5a6670; --r: 5px; --wmax: 860px; --wgut: 40px; --row: calc(45vh - 48px); }
@media (min-width: 1281px) { :root { --wmax: 1160px; --wgut: 120px; } }
@media (min-width: 1441px) { :root { --wmax: 1320px; } }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.6 Ubuntu, system-ui, sans-serif; color: var(--ink); background: #fff; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: Merriweather, Georgia, serif; font-weight: 700; line-height: 1.3; margin: 0 0 20px; }
h1 { font-size: 64px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0; } /* the previous site's paragraphs have no margin: its gaps are <br>s and blank lines in the text */
@media (min-width: 1281px) { p { font-size: 18px; } h2 { font-size: 36px; } h3 { font-size: 24px; } }
@media (max-width: 800px) { h1 { font-size: 40px; } }
strong, b { font-weight: 700; }
.tc { text-align: center; }
.tr { text-align: right; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the page's content column: 860 px, 1160 px from 1281, 1320 px from 1441, never closer than 20 / 60 px to the sides */
.wrapw { width: min(var(--wmax), calc(100% - var(--wgut))); margin-inline: auto; }

/* ---- header: 75 px, sticky, links 16 px with 20 px sides, the button 38 px high ------------------------------------------------ */
.hd { position: sticky; top: 0; z-index: 20; background: #fff; }
.hd-in { display: flex; align-items: center; justify-content: space-between; height: var(--hd); padding: 0 40px; }
.hd nav { display: flex; align-items: center; font-size: 16px; }
.hd nav a:not(.btn) { display: block; padding: 20px; line-height: 24px; text-decoration: none; font-size: 16px; }
.hd nav a:not(.btn):hover, .hd nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hd nav .btn { margin-left: 44px; padding: 7px 31px; }
.hd .logo { display: block; }
.hd .logo img { display: block; height: 44px; width: auto; }
.hd .burger { display: none; }
@media (max-width: 800px) {
  .hd-in { padding: 0 20px; }
  .js .hd .burger { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; background: none; border: 0; cursor: pointer; padding: 0; }
  .burger span, .burger span::before, .burger span::after { display: block; width: 22px; height: 2px; background: var(--ink); content: ''; position: relative; }
  .burger span::before { position: absolute; top: -7px; }
  .burger span::after { position: absolute; top: 7px; }
  .js .hd nav { display: none; position: absolute; left: 0; right: 0; top: var(--hd); flex-direction: column; align-items: stretch; background: #fff; padding: 8px 20px 20px; box-shadow: 0 8px 12px rgba(0, 0, 0, .12); }
  .js .hd.open nav { display: flex; }
  .hd nav .btn { margin: 8px 0 0; }
  html:not(.js) .hd-in { flex-wrap: wrap; height: auto; padding: 8px 20px; }
  html:not(.js) .hd .logo { order: -1; flex: 0 0 100%; text-align: center; }
}

/* ---- buttons: 50 px high, 5 px radius ------------------------------------------------------------------------------------------ */
.btn { display: inline-block; background: var(--main); color: #fff; padding: 13px 31px; border-radius: var(--r); text-decoration: none; font: 400 16px/24px Ubuntu, system-ui, sans-serif; border: 0; cursor: pointer; text-align: center; transition: filter .15s; }
.btn:hover { filter: brightness(1.1); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--shade1); outline-offset: 2px; }
.bg-main .btn, .bg-shade2 .btn, .hero .btn, .embed .btn { background: #fff; color: var(--ink); }
.ctas { display: flex; flex-wrap: wrap; gap: 20px; margin: 40px 0 -10px; } /* the -10 px puts a centred block 5 px low, as on the previous site */
.tc .ctas, .hero .ctas, .pack .ctas { justify-content: center; }

/* ---- block colours -------------------------------------------------------------------------------------------------------------- */
.bg-white { background: #fff; color: var(--ink); }
.bg-main { background: var(--main); color: #fff; }
.bg-shade2 { background: var(--shade2); color: #fff; }
.bg-white h1, .bg-white h2, .bg-white h3 { color: var(--main); }
.bg-main a:not(.btn), .bg-shade2 a:not(.btn) { color: #fff; }

/* ---- cover: hero (100vh minus the header; on phones as tall as its content) --------------------------------------------------------- */
.hero { position: relative; display: grid; place-items: center; min-height: calc(100vh - var(--hd)); min-height: calc(100svh - var(--hd)); text-align: center; isolation: isolate; overflow: hidden; }
.hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tint, var(--main)); opacity: .62; }
.hero .in { width: 100%; max-width: 810px; padding: 80px 30px 60px; }
.hero.tint-white { color: var(--ink); }
.hero.tint-white::after { --tint: #fff; opacity: .72; }
.hero.tint-white h1, .hero.tint-white h2 { color: var(--main); }
.hero:not(.tint-white) h1, .hero:not(.tint-white) h2, .hero:not(.tint-white) h3, .hero:not(.tint-white) p { color: #fff; }
.hero .in img { max-width: 600px; width: 90%; }
.hero .more { position: absolute; left: 50%; bottom: 7px; width: 54px; height: 47px; margin-left: -27px; display: grid; place-items: center; text-decoration: none; }
.hero .more::before { content: ''; width: 10px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-3px, -3px); }
@media (max-width: 575px) {
  .hero { display: block; min-height: 0; }
  .hero .in { max-width: none; padding: 140px 30px 0; }
  .hero .in img { vertical-align: top; }
  .hero .more { position: relative; left: auto; bottom: auto; margin: 83px auto 10px; }
}

/* ---- cover: image and text side by side (100vh; a 60 px margin, the text 720 px at most) -------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; }
.split .tx { display: flex; flex-direction: column; justify-content: center; padding: 60px; }
.split .tx > div { width: 100%; max-width: 720px; margin-inline: auto; }
.split .tx img { max-width: 100%; }
.split .im { position: relative; min-height: 320px; }
.split .im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split.rev .im { order: -1; }
.split.top .tx { padding-top: 80px; padding-bottom: 60px; }
.justify .tx p { text-align: justify; hyphens: manual; overflow-wrap: break-word; }
/* the "À la carte" layout: the photo takes 55 %, a card in the section's colour covers its right edge, the note sits below */
.over { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.over .im { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; }
.over .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.over .ov { position: relative; margin-left: calc(55% - 125px); padding-right: 60px; }
.over .card { background: var(--main); padding: 62px 0 57px 60px; }
.over .note { margin: 83px 20px 0 205px; }
@media (min-width: 1281px) { .over .note { margin: 83px 60px 0 245px; } }
@media (max-width: 800px) {
  .split { display: flex; flex-direction: column; min-height: 0; }
  .over { display: block; min-height: 0; }
  .split .im, .split.rev .im { order: -1; height: 100vw; min-height: 0; flex: none; }
  .split .tx, .split.top .tx { padding: 40px 20px 80px; }
  .split.top .tx { padding-bottom: 61px; }
  .over .im { position: relative; width: 100%; height: 100vw; }
  .over .ov { margin: 0; padding: 0 20px 80px; }
  .over .card { padding: 70px 0 0; }
  .over .note { margin: 41px 0 0; }
}

/* ---- galleries ------------------------------------------------------------------------------------------------------------------ */
.gal figure { margin: 0; position: relative; }
.gal figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* justified rows: height 45vh - 48 px, 30 px gaps; each photo has the width of its shape at that height, then rows stretch or shrink to fit */
.gal-r { padding: 90px 30px 100px; }
.gal-r .row { display: flex; gap: 30px; height: var(--row); margin-bottom: 30px; }
.gal-r .row:last-child { margin-bottom: 0; }
.gal-r figure { flex: var(--ar) 1 calc(var(--ar) * var(--row)); min-width: 0; }
@media (max-width: 699px) {
  .gal-r { padding: 60px 0 100px; }
  .gal-r .row { display: block; height: auto; margin: 0; }
  .gal-r figure { height: calc(var(--row) * 1.6); }
}
/* tiles: squares with 10 px gaps in the content column, 4 columns from 1441 px, 3 from 1024, 2 from 801, then one */
.gal-t { padding: 80px 0 78px; }
.gal-t .ttl { margin: 0 auto 42px; }
.gal-t .ttl > :last-child { margin-bottom: 0; }
.gal-t .ttl h2 { text-align: center; }
.gal-t.no-ttl { padding-top: 80px; }
.gal-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gal-g figure { aspect-ratio: 1 / 1; }
@media (min-width: 1281px) { .gal-t .ttl { margin-bottom: 40px; } }
@media (min-width: 1441px) { .gal-g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .gal-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .gal-g { grid-template-columns: 1fr; } }

/* ---- slideshow: 640 px, round arrows 1000 px apart, dots, moves on by itself -------------------------------------------------------- */
.slider { position: relative; height: 640px; overflow: hidden; background: var(--shade2); }
.slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.slides::-webkit-scrollbar { display: none; }
.slides figure { margin: 0; flex: 0 0 100%; height: 100%; scroll-snap-align: start; position: relative; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slider .nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(50, 51, 53, .75); cursor: pointer; padding: 0; }
.slider .nav::before { content: ''; position: absolute; top: 18px; width: 11px; height: 11px; border: solid #fff; border-width: 2px 2px 0 0; }
.slider .prev { left: max(12px, calc(50% - 500px)); } .slider .prev::before { left: 20px; transform: rotate(-135deg); }
.slider .next { right: max(12px, calc(50% - 500px)); } .slider .next::before { left: 14px; transform: rotate(45deg); }
.slider .dots { position: absolute; left: 0; right: 0; bottom: 56px; display: flex; justify-content: center; align-items: center; gap: 9px; pointer-events: none; }
.slider .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .75); transition: all .2s; }
.slider .dots i.on { width: 10px; height: 10px; background: #fff; }

/* ---- consent boxes: YouTube and Google Maps load on click --------------------------------------------------------------------------- */
.embed { position: relative; isolation: isolate; background: #fff; color: #fff; min-height: 240px; overflow: hidden; }
/* what stands behind the consent text: for the video a card with the YouTube logo and the name, for the map a picture of a map; both dimmed by 40 % black */
.embed > .ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 24px; padding: 40px; background: rgba(0, 0, 0, .4); overflow-y: auto; }
.embed p { max-width: 1200px; text-align: left; }
.embed svg { display: none; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.loaded { background: #000; }
.vid { padding: 60px 0; }
/* the video card: 16:9 from the first paint (the size it has once it plays, so nothing jumps), a YouTube-shaped play button, the privacy note under it */
.vid .embed { aspect-ratio: 16 / 9; min-height: 0; width: min(calc(var(--wmax) - 40px), calc(100% - var(--wgut) - 40px)); margin: 20px auto; background: #111; border-radius: var(--r); }
.vid .embed .bd { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 120% at 50% 35%, #46464a 0%, #1a1a1c 72%); transition: transform .5s; }
.vid .embed .poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid .embed:hover .bd { transform: scale(1.02); }
.vid .embed > .ov { padding: 16px; gap: 0; background: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .42)); }
.vid .play { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px; background: none; border: 0; color: #fff; cursor: pointer; font: 400 1rem/1 Ubuntu, system-ui, sans-serif; letter-spacing: .02em; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.vid .play svg { display: block; width: clamp(64px, 9vw, 104px); height: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); transition: transform .15s; }
.vid .play .rr { fill: #f00; }
.vid .play .tri { fill: #fff; }
.vid .play:hover svg { transform: scale(1.08); }
.vid .play:hover .rr { fill: #e60000; }
.vid .embed.loaded { background: #000; }
.vid .note { width: min(calc(var(--wmax) - 40px), calc(100% - var(--wgut) - 40px)); margin: 14px auto 0; color: var(--muted); font-size: .875rem; line-height: 1.5; text-align: center; }
.vid .embed.loaded + .note { display: none; }
@media (max-width: 480px) { .vid .note { font-size: .8rem; } .vid .play { gap: 8px; } }
.embed.map { aspect-ratio: 5 / 2; min-height: 0; background: #fff url(/img/consent-map.webp) 0 0 / cover no-repeat; } /* top left, as the previous site's box was: it shows the top band of the picture */
.embed.map.loaded { background-image: none; }
@media (max-width: 800px) {
  .embed > .ov { padding: 24px 20px; }
  .embed.map { min-height: 220px; }
}

/* ---- contact: the content column, the map (40 % as tall as wide), three columns, two from 1049 px down, one from 525 --------------------- */
.contact { padding: 110px 0 110px; }
.contact .wrap { width: min(var(--wmax), calc(100% - var(--wgut))); margin-inline: auto; }
.contact h2 { color: #fff; margin-bottom: 59px; }
.contact .map { margin-bottom: 61px; }
.contact .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 30px; } /* the previous site gave each column 40 px under it */
.contact h3 { margin-bottom: 20px; }
#ladesk { margin-top: 20px; min-height: 0; }
@media (max-width: 1049px) { .contact .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 525px) { .contact .cols { grid-template-columns: 1fr; } }

/* ---- day package band (400 px), news bar, about strip, review cards ------------------------------------------------------------------- */
.pack { position: relative; isolation: isolate; text-align: center; height: 400px; display: grid; place-items: center; overflow: hidden; }
.pack > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pack::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .62; }
.pack .in { width: min(var(--wmax), calc(100% - var(--wgut))); }
.news { padding: 16px 0; }
.news .in { width: min(var(--wmax), calc(100% - var(--wgut))); margin-inline: auto; padding: 0 100px 0 105px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.news h3 { margin: 0; color: #fff; }
.news .ctas { margin: 10px 0; flex-wrap: nowrap; }
@media (min-width: 1281px) { .news .in { padding: 0 60px 0 65px; } }
@media (min-width: 801px) and (max-width: 1280px) { .news .ctas { flex-direction: column; align-items: flex-end; gap: 20px; } } /* two buttons stack on the right until the bar is wide enough for one row */
@media (max-width: 800px) {
  .news { padding: 25px 20px 20px 25px; }
  .news .in { display: block; width: auto; padding: 0; }
  .news h3 { margin-bottom: 0; }
  .news .ctas { justify-content: flex-end; flex-wrap: wrap; margin: 15px 0 10px; }
}
.about { padding: 58px 0 80px; text-align: center; }
.about p { margin: 0; }
.revw { padding: 80px 0 79px; }
.revw .intro { margin-bottom: 40px; }
.revw .intro > :last-child { margin-bottom: 0; }
.revw .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.revw .card { background: var(--shade1); color: var(--ink); display: flex; flex-direction: column; text-align: center; }
.revw .imgbox { flex: 1; display: grid; place-items: center; padding: 30px 0; }
.revw .imgfit { width: 96%; aspect-ratio: 619 / 268; display: grid; place-items: center; }
.revw .imgfit img { display: block; height: auto; }
.revw .txt { padding: 10px 30px; }
.revw .txt h3 { color: var(--ink); margin: 0; padding: 20px 0; }
.revw .card .ctas { justify-content: center; margin: 20px 0 31px; }
.revw .card .btn { background: #000; color: #fff; }
@media (max-width: 690px) { .revw .grid { grid-template-columns: 1fr; } }

/* ---- OCF: the restaurant's open/closed boxes (src/www/ocf.js); the previous widget's own CSS ----------------------------------------------- */
.ocfwrap { width: min(var(--wmax), calc(100% - var(--wgut))); margin-inline: auto; }
.ocf { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; padding: 20px 0; margin: 0 0 20px; list-style: none; }
.ocf li { display: flex; flex-direction: column; padding: 15px; border-radius: 8px; font-size: 16px; font-weight: 700; text-align: center; background: rgb(144, 225, 255); color: var(--ink); width: calc(16.666% - 10px); }
.ocf li > span { margin-bottom: 10px; }
.ocf .st { margin-top: auto; padding: 10px; border-radius: 8px; font-size: 16px; line-height: 24px; display: block; text-decoration: none; overflow: hidden; }
.ocf .open { background: green; color: #fff; }
.ocf .depends { background: yellow; color: #000; }
.ocf .depends::after { content: ' 🌧'; }
.ocf .closed, .ocf .full { background: red; color: #fff; }
@media (max-width: 1000px) { .ocf li { width: calc(33.333% - 10px); } }
@media (max-width: 480px) { .ocf li { width: calc(50% - 10px); } }

/* ---- upcoming events (server-rendered from Airtable, src/www/events.js) ------------------------------------------- */
/* the events sit in a panel of the height the old embed had (635 px) and scroll inside it, so the section does not grow with the number of events */
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 29px 0 0; padding: 10px; list-style: none; max-height: 635px; overflow-y: auto; border: 1px solid #cfd6db; background: #f7f9fa; }
.ev { background: #fff; border: 1px solid #d7e1e7; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; font-size: .85rem; color: var(--ink); }
.ev img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #eef3f6; }
.ev dl { margin: 0; padding: 12px; display: grid; gap: 2px; }
.ev dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 8px; }
.ev dd { margin: 0; }
.ev .when { font-weight: 700; font-size: 1rem; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: #e3e8ec; font-size: .8rem; }
.pill.open { background: #d4f2dc; } .pill.sold { background: #fbd9d9; }
.ev-more { font-size: .85rem; margin-top: 1em; }
.bg-white .ev-more a { color: var(--main); }

/* ---- day package (src/www/dayuse.js, public/www/static/daypackage.js) ---------------------------------------------------- */
.dp { padding: clamp(28px, 5vw, 72px) 20px; }
.dp-in { max-width: 640px; margin: 0 auto; }
.dp-in h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.dp-inc { background: #eef6fa; padding: 18px 22px; border-radius: 6px; margin: 1.4em 0 2em; }
.dp-inc h2 { font-size: 1.1rem; margin-bottom: .3em; }
.dp-inc h3 { font-size: 1rem; color: var(--ink); margin: 1em 0 .3em; }
.dp-inc ul { margin: .3em 0 0; padding-left: 1.2em; }
.dp-form label { display: block; font-weight: 700; margin: 1.3em 0 .35em; }
.dp-form .hint { font-size: .9rem; color: var(--muted); margin: 0 0 1em; }
.dp-form .opt { font-weight: 400; color: var(--muted); }
.dp-form input:not([type=checkbox]), .dp-form select { width: 100%; font: inherit; padding: .7em .8em; border: 1px solid #a9bcc7; border-radius: 4px; background: #fff; color: var(--ink); }
.dp-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.dp-form .check input { margin-top: .4em; }
.dp-form .hp { position: absolute; left: -9999px; }
.dp-form .btn { margin-top: 1.4em; width: 100%; padding: .9em; font-size: 1rem; }
.dp-form .btn[disabled] { opacity: .6; cursor: wait; }
.dp-result { margin-top: 1.2em; padding: 14px 18px; border-radius: 6px; }
.dp-result.ok { background: #d4f2dc; }
.dp-result.err { background: #fbd9d9; }
.dp-result h2 { font-size: 1.2rem; }
.dp-none { padding: 14px 18px; background: #fff3cd; border-radius: 6px; color: var(--ink); }
.pack .dp-none { display: inline-block; text-align: left; }

/* ---- check-out survey (public/www/static/survey.js, data/www/survey.json) -------------------------------------------------- */
.sv { padding: clamp(28px, 5vw, 72px) 20px; }
.sv-in { max-width: 680px; margin: 0 auto; }
.sv-in h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.sv-intro { font-size: 1.05rem; margin-bottom: 1.6em; }
.sv-q { border: 0; border-top: 1px solid #dbe6ec; margin: 0; padding: 1.4em 0 1.2em; min-width: 0; }
.sv-q[hidden] { display: none; }
.sv-q legend { font-weight: 700; padding: 0; margin-bottom: .6em; line-height: 1.4; float: left; width: 100%; }
.sv-q legend + * { clear: both; }
.sv-q .hint { font-size: .9rem; color: var(--muted); margin: -.2em 0 .8em; clear: both; }
.sv .req { color: #c9302c; }
.sv-q textarea { width: 100%; font: inherit; padding: .7em .8em; border: 1px solid #a9bcc7; border-radius: 4px; resize: vertical; }
.sv-choice { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-choice label, .sv-yn label, .sv-scale label { cursor: pointer; }
.sv-choice label { flex: 1 1 140px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border: 2px solid #cfdde5; border-radius: 8px; text-align: center; }
.sv input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-choice label:has(input:checked), .sv-yn label:has(input:checked), .sv-scale label:has(input:checked) { border-color: var(--main); background: #e6f4fa; }
.sv-choice label:has(input:focus-visible), .sv-yn label:has(input:focus-visible), .sv-scale label:has(input:focus-visible), .sv-stars input:focus-visible + label { outline: 3px solid var(--shade1); outline-offset: 2px; }
.sv-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.sv-stars label { font-size: 2.2rem; line-height: 1; color: #c5d2da; cursor: pointer; padding: 0 2px; }
.sv-stars input:checked ~ label, .sv-stars label:hover, .sv-stars label:hover ~ label { color: #f0a800; }
.sv-yn { display: flex; gap: 12px; }
.sv-yn label { padding: .6em 1.6em; border: 2px solid #cfdde5; border-radius: 999px; }
.sv-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.sv-scale label { text-align: center; padding: .65em 0; border: 2px solid #cfdde5; border-radius: 6px; font-weight: 700; }
.sv-ends { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.sv-ends span:nth-child(2) { text-align: center; }
.sv-form .hp { position: absolute; left: -9999px; }
.sv-form .btn { margin-top: 1.6em; width: 100%; padding: .9em; font-size: 1rem; }
.sv-form .btn[disabled] { opacity: .6; cursor: wait; }
.sv-lang { margin-top: 2em; font-size: .9rem; text-align: center; }
@media (max-width: 560px) { .sv-scale { grid-template-columns: repeat(5, 1fr); } }

/* ---- front office assessment quiz (public/www/static/quiz.js, data/www/pages/front-office-quiz.json; unlisted) ------------------------------ */
.qz { padding: clamp(28px, 5vw, 72px) 20px; }
.qz-in { max-width: 680px; margin: 0 auto; }
.qz-in h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.qz-step h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
.qz-step h2:focus { outline: none; }
.qz-step, .qz-form input, .qz-form textarea { scroll-margin-top: calc(var(--hd) + 16px); }
.qz-in p { margin: 0 0 1em; }
.qz-text p:last-child { margin-bottom: 0; }
.qz-in .qz-num { font-size: .85rem; color: var(--muted); margin: 0 0 .3em; }
.qz-q { display: block; font-weight: 700; font-size: 1.15rem; line-height: 1.45; margin: 0 0 .5em; }
.qz .req { color: #b3261e; }
.qz-in .hint { font-size: .9rem; color: var(--muted); margin: 0 0 .8em; }
.qz-msg { margin: 0 0 1em; padding: 12px 18px; background: #eef6fa; border-left: 4px solid var(--main); border-radius: 0 6px 6px 0; font-size: 1.05rem; }
.qz-msg em { display: block; font-size: .85rem; color: var(--muted); }
.qz-form input:not(.hp), .qz-form textarea { display: block; width: 100%; font: inherit; padding: .7em .8em; border: 1px solid #7e95a3; border-radius: 4px; background: #fff; color: var(--ink); }
.qz-form textarea { resize: vertical; min-height: 8em; }
.qz-form input:not(.hp):focus-visible, .qz-form textarea:focus-visible { outline: 3px solid var(--shade1); outline-offset: 1px; border-color: var(--main); }
.qz-form [aria-invalid=true] { border-color: #b3261e; }
.qz-in .qz-err { color: #b3261e; font-weight: 700; font-size: 1rem; margin: .5em 0 0; }
.qz-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 1.4em; }
.qz-nav .btn { min-width: 9em; padding: .8em 1.4em; font-size: 1rem; }
.qz-form .btn[disabled] { opacity: .6; cursor: wait; }
.qz-back { background: none; border: 0; padding: .6em .3em; font: inherit; color: var(--main); text-decoration: underline; cursor: pointer; }
.qz-form .hp { position: absolute; left: -9999px; }
#qz-msg.info { background: transparent; padding-left: 0; padding-right: 0; color: var(--muted); }
@media (max-width: 560px) { .qz-nav .btn { flex: 1 1 100%; } }

/* my own pages (no old counterpart) keep ordinary paragraph spacing */
.dp-in p, .sv-in p, .dp-result p, .ev-more { margin: 0 0 1em; }
.dp-in p:last-child, .sv-in p:last-child, .dp-result p:last-child { margin-bottom: 0; }