/* Arlecchino Employee Hub. The public website's language (playful-world-373078.framer.app): a cream page between
   multicolour diamond-stripe edges, Londrina Solid Black headlines with a yellow bar, JetBrains Mono for voice and
   actions, Inter for long reading, polaroid photographs with coloured tape, chapter rules, rounded green panels.
   Colours are the brand's own (#064F2B green, #F5F0EA cream, #FDC308 yellow) and the eight diamonds of the logo. */

@font-face { font-family: "Londrina Solid"; font-weight: 900; font-display: swap; src: url(/fonts/londrina-solid-black.woff2) format("woff2"); }
@font-face { font-family: "Londrina Solid"; font-weight: 400; font-display: swap; src: url(/fonts/londrina-solid-regular.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-regular.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(/fonts/jetbrains-mono-bold.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); }

:root {
  --green: #064F2B; --green-2: #0A6338; --green-ink: #043A1F;
  --cream: #F5F0EA; --paper: #FBF8F2; --card: #FFFDF9;
  --ink: #1B1B18; --ink-2: #3D3A33; --muted: #6B665B; --line: #E4DCCD; --line-2: #D7CDBB;
  --yellow: #FDC308; --yellow-soft: #FFE680;
  --d-orange: #FD6301; --d-pink: #F92168; --d-cyan: #01B9EB; --d-green: #028A1D; --d-red: #E50217; --d-blue: #0853DD; --d-purple: #631786;
  --red: #D7262C;
  --display: "Londrina Solid", "Arial Narrow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --edge: 14px; --gutter: 18px; --max: 1120px;
  --r-lg: 28px; --r-md: 18px; --r-sm: 12px;
  --shadow: 0 1px 0 rgba(27,27,24,.04), 0 12px 30px -18px rgba(27,27,24,.35);
  --shadow-photo: 0 2px 4px rgba(27,27,24,.12), 0 18px 34px -16px rgba(27,27,24,.45);
  --ease: cubic-bezier(.2,.8,.2,1); --ease-spring: cubic-bezier(.34,1.45,.55,1);
  --top-h: 64px; --tab-h: 0px;
  color-scheme: light;
}
@media (min-width: 768px) { :root { --edge: 20px; --gutter: 28px; --top-h: 76px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; } }
@media (max-width: 1023px) { :root { --tab-h: calc(64px + env(safe-area-inset-bottom)); } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; background: var(--cream); color: var(--ink); font: 15px/1.6 var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--d-blue); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 10px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- the multicolour edges (the website's side borders) ---------- */
/* Measured on the website (29 Oct 2026): a fixed strip starting under the header, each one half outside the page (the
   website sets the right strip's right exactly as the left strip's left; a desktop scrollbar gutter can hide that, an iPad
   or iPhone never does), the picture 80px taller than its strip and moved with how far down the page is (left 48px, right
   38.4px the other way). The stripe artwork is symmetrical (transparent 2px each side), so mirroring the box mirrors it. */
.edge { position: fixed; top: var(--top-h); width: 24px; height: 732px; z-index: 40; overflow: clip; pointer-events: none; }
.edge img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: contain; object-position: center; transform: translate3d(0, var(--edge-y, 0px), 0); will-change: transform; }
.edge-l { left: -14px; } .edge-r { right: -14px; }
@media (min-width: 810px) { .edge { width: 20px; height: 100vh; } .edge img { object-fit: cover; } .edge-l { left: -10px; } .edge-r { right: -10px; } }
@media (min-width: 1200px) { .edge { width: 24px; } .edge-l { left: -12px; } .edge-r { right: -12px; } }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 18px; padding: 0 calc(var(--edge) + var(--gutter) * .6); background: rgba(245,240,234,.9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.top.scrolled { border-color: var(--line); box-shadow: 0 8px 24px -22px rgba(0,0,0,.5); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { height: 30px; width: auto; }
@media (min-width: 768px) { .brand img { height: 36px; } }
.brand-tag { font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); border-left: 2px solid var(--yellow); padding: 4px 0 4px 10px; }
@media (max-width: 420px) { .brand-tag { display: none; } }
.nav { display: none; gap: 4px; margin-left: auto; }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav a { position: relative; font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 12px 12px; border-radius: 999px; color: var(--ink-2); }
.nav a:hover { color: var(--green); }
.nav a[aria-current="page"] { color: var(--green); }
.nav a .sel { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 4px; border-radius: 4px; background: var(--yellow); }
.who { margin-left: auto; position: relative; }
@media (min-width: 1024px) { .who { margin-left: 4px; } }
.who-btn { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px; border-radius: 999px; min-height: 44px; }
.who-btn .mono-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font: 900 16px/1 var(--display); letter-spacing: .02em; }
.who-btn .who-name { display: none; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 1100px) { .who-btn .who-name { display: inline; } }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; background: var(--card); border-radius: var(--r-md); box-shadow: 0 20px 50px -20px rgba(0,0,0,.45), 0 0 0 1px var(--line); padding: 8px; transform-origin: top right; animation: pop .22s var(--ease); }
.menu .menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu .menu-head b { display: block; font: 900 20px/1.1 var(--display); text-transform: uppercase; }
.menu .menu-head span { font-size: 12px; color: var(--muted); }
.menu a, .menu button { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; background: none; border: 0; padding: 12px; border-radius: 10px; text-decoration: none; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; min-height: 44px; }
.menu a:hover, .menu button:hover { background: var(--paper); }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

/* ---------- mobile tab bar ---------- */
.tabbar { display: none; }
@media (max-width: 1023px) {
  .tabbar:not(:empty) { max-width: 640px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; z-index: 35; left: calc(var(--edge) + 8px); right: calc(var(--edge) + 8px); bottom: calc(8px + env(safe-area-inset-bottom)); background: var(--green); border-radius: 22px; padding: 6px; box-shadow: 0 14px 30px -12px rgba(6,79,43,.6); }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 7px 2px 6px; color: rgba(255,255,255,.72); text-decoration: none; font: 700 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 16px; min-height: 48px; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--green); }
  .tabbar .tab-sel { position: absolute; inset: 0; background: var(--yellow); border-radius: 16px; z-index: -1; }
  .tabbar a { z-index: 0; isolation: isolate; }
  main { padding-bottom: calc(var(--tab-h) + 24px); }
}

/* ---------- layout ---------- */
main { display: block; min-height: calc(100vh - var(--top-h)); outline: none; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter) + 2 * var(--edge)); margin: 0 auto; padding: 0 calc(var(--edge) + var(--gutter)); }
.wrap-narrow { max-width: calc(820px + 2 * var(--gutter) + 2 * var(--edge)); }
.section { padding-block: 40px; }
@media (min-width: 768px) { .section { padding-block: 64px; } }
.grid-2 { display: grid; gap: 24px; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } }
.stack > * + * { margin-top: 16px; }

/* ---------- type ---------- */
.kicker { font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.kicker .dot { width: 9px; height: 9px; transform: rotate(45deg); background: var(--yellow); flex: none; }
/* sizes as on the website (measured 29 Oct 2026: headlines 44px on a phone to 56px on a desktop, sections 30-38px) */
.display { font: 900 clamp(42px, 3vw + 30px, 60px)/.92 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0; color: var(--green); }
.h1 { font: 900 clamp(34px, 2.4vw + 25px, 52px)/.94 var(--display); text-transform: uppercase; margin: 0; color: var(--green); }
.h2 { font: 900 clamp(26px, 1.2vw + 22px, 38px)/.98 var(--display); text-transform: uppercase; margin: 0; color: var(--green); }
.h3 { font: 900 clamp(20px, .6vw + 17px, 25px)/1.02 var(--display); text-transform: uppercase; margin: 0; color: var(--green); }
.on-green .display, .on-green .h1, .on-green .h2, .on-green .h3, .panel.green .display, .panel.green .h1, .panel.green .h2, .panel.green .h3 { color: var(--cream); }
.bar { position: relative; display: inline-block; padding-bottom: .28em; }
.bar::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(120px, 60%); height: 7px; border-radius: 6px; background: var(--yellow); transform-origin: left; transform: scaleX(var(--bar, 1)); transition: transform .9s var(--ease) .15s; }
[data-reveal].pre .bar::after, .bar.pre::after { --bar: 0; }
.lead { font: 400 15px/1.7 var(--mono); color: var(--ink-2); max-width: 46ch; margin: 18px 0 0; }
@media (min-width: 768px) { .lead { font-size: 16px; } }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.prose { font: 400 16px/1.65 var(--sans); color: var(--ink); max-width: 68ch; }
.prose p { margin: 0 0 1em; }
.prose strong { font-weight: 700; }
.prose a { color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--yellow); font-weight: 600; }
.heart { color: var(--d-red); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--green); background: var(--green); color: #fff; font: 700 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: transform .25s var(--ease-spring), background .2s, box-shadow .25s; box-shadow: 0 6px 0 -2px rgba(4,58,31,.0); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(6,79,43,.7); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.red { background: var(--red); border-color: var(--red); }
.btn.yellow { background: var(--yellow); border-color: var(--yellow); color: var(--green-ink); }
.btn.ghost { background: transparent; color: var(--green); }
.on-green .btn.ghost { color: var(--cream); border-color: rgba(245,240,234,.7); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 11.5px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.link { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--green); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; background: none; border: 0; padding: 0; }
.link:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.on-green .link { color: var(--yellow); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }

/* ---------- surfaces ---------- */
.panel { background: var(--card); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
@media (min-width: 768px) { .panel { padding: 36px; } }
.panel.green, .on-green { background: var(--green); color: var(--cream); }
.panel.green .lead, .on-green .lead { color: rgba(245,240,234,.86); }
.panel.green .kicker, .on-green .kicker { color: var(--yellow); }
.panel.yellow { background: var(--yellow); color: var(--green-ink); }
.panel.yellow .h2, .panel.yellow .h3 { color: var(--green-ink); }
.panel.flat { box-shadow: none; background: var(--paper); border: 1px solid var(--line); }

/* polaroid photographs with coloured tape, as on the website's Our Story */
.polaroid { position: relative; background: #fff; padding: 10px 10px 42px; box-shadow: var(--shadow-photo); transform: rotate(var(--rot, -2deg)); transition: transform .5s var(--ease-spring); }
.polaroid img { width: 100%; height: auto; aspect-ratio: var(--ar, auto); object-fit: cover; background: var(--line); }
.polaroid figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; font: 700 10.5px/1.2 var(--mono); color: var(--ink-2); letter-spacing: .02em; }
.polaroid::before { content: ""; position: absolute; top: -12px; left: var(--tape-x, 18px); width: 76px; height: 24px; background: var(--tape, var(--d-green)); opacity: .92; transform: rotate(var(--tape-rot, -3deg)); box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.polaroid:hover { transform: rotate(calc(var(--rot, -2deg) * .3)) translateY(-4px); }
.tape-red { --tape: var(--d-red); } .tape-cyan { --tape: var(--d-cyan); } .tape-purple { --tape: var(--d-purple); } .tape-orange { --tape: var(--d-orange); } .tape-yellow { --tape: var(--yellow); } .tape-pink { --tape: var(--d-pink); } .tape-blue { --tape: var(--d-blue); }

/* the yellow highlighter tag ("Feeding Greenock since 1921 ♥") */
.tag { display: inline-block; background: var(--yellow); color: var(--green-ink); font: 700 11.5px/1.3 var(--mono); padding: 8px 14px; border-radius: 6px; transform: rotate(var(--rot, -3deg)); box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.chip.green { background: var(--green); color: #fff; border-color: var(--green); }
.chip.yellow { background: var(--yellow); border-color: var(--yellow); color: var(--green-ink); }
.chip.red { background: #FDE7E7; border-color: #F5C2C2; color: #9B1C1F; }
.chip.ok { background: #E3F2E6; border-color: #BFE0C6; color: #0F5B27; }

/* diamonds: the logo's eight colours, used as small markers and as the loading signal */
.dia { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: var(--c, var(--yellow)); flex: none; }
.diamonds { display: inline-flex; gap: 6px; }
.diamonds i { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; animation: dia 1.2s var(--ease) infinite; }
.diamonds i:nth-child(1) { background: var(--d-orange); } .diamonds i:nth-child(2) { background: var(--d-pink); animation-delay: .12s; } .diamonds i:nth-child(3) { background: var(--d-cyan); animation-delay: .24s; } .diamonds i:nth-child(4) { background: var(--d-green); animation-delay: .36s; }
@keyframes dia { 0%, 100% { transform: rotate(45deg) translateY(0); } 40% { transform: rotate(45deg) translate(-4px, -4px); } }
.boot { min-height: 60vh; display: grid; place-items: center; }

/* chapter rule: a coloured line and a small label, as between the story's chapters */
.rule { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font: 700 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rule::before { content: ""; flex: 1; height: 2px; background: var(--c, var(--d-green)); transform-origin: left; transform: scaleX(var(--draw, 1)); transition: transform 1.1s var(--ease); }
.pre .rule::before, .rule.pre::before { --draw: 0; }

/* confetti dashes */
.confetti { position: absolute; width: 22px; height: 5px; border-radius: 4px; background: var(--c, var(--d-red)); transform: rotate(var(--r, 20deg)); pointer-events: none; }

/* ---------- reveal motion (once; never repeated) ---------- */
[data-reveal] { transition: opacity .6s var(--ease), transform .7s var(--ease); }
[data-reveal].pre { opacity: 0; transform: translateY(16px); transition: none; }
[data-reveal="photo"].pre { transform: translateY(20px) rotate(calc(var(--rot, -2deg) * 2)); }
[data-reveal="left"].pre { transform: translateX(-20px); }
[data-reveal="scale"].pre { transform: scale(.96); }
/* while a page takes noticeably long to arrive: one thin line under the header, nothing else moves */
.nav-progress { position: fixed; left: 0; right: 0; top: var(--top-h); height: 3px; z-index: 45; pointer-events: none; opacity: 0; transform-origin: left; background: linear-gradient(90deg, var(--d-orange), var(--yellow), var(--d-green)); transition: opacity .2s; }
.nav-progress.on { opacity: 1; animation: nav-progress 1.4s var(--ease) infinite; }
@keyframes nav-progress { from { transform: scaleX(0); } 60% { transform: scaleX(.8); } to { transform: scaleX(1); opacity: .2; } }

/* page transitions */
@view-transition { navigation: none; }
::view-transition-old(root) { animation: .16s var(--ease) both fade-out; }
::view-transition-new(root) { animation: .26s var(--ease) .04s both fade-in; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }
/* the header, its navigation selector and the side borders stay where they are while pages change */
.top { view-transition-name: hub-top; }
.edge-l { view-transition-name: hub-edge-l; } .edge-r { view-transition-name: hub-edge-r; }
::view-transition-group(hub-top), ::view-transition-group(hub-edge-l), ::view-transition-group(hub-edge-r) { animation: none; }
::view-transition-old(hub-edge-l), ::view-transition-old(hub-edge-r), ::view-transition-new(hub-edge-l), ::view-transition-new(hub-edge-r) { animation: none; }

/* ---------- forms ---------- */
.field { display: grid; gap: 8px; margin: 0 0 20px; }
.field > label, .label { font: 700 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.field .hint { font: 400 13px/1.45 var(--mono); color: var(--muted); }
.field .err { font: 700 13px/1.4 var(--mono); color: #A3171C; display: flex; gap: 6px; }
.input, .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field input[type=password], .field input:not([type]), .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 2px solid var(--line-2); border-radius: 14px; background: #fff; font: 400 16px/1.4 var(--sans); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(253,195,8,.45); }
.field.has-err input, .field.has-err textarea, .field.has-err select { border-color: #C9353A; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--line-2); border-radius: 14px; background: #fff; cursor: pointer; font: 400 15px/1.45 var(--sans); transition: border-color .2s, background .2s; min-height: 52px; }
.choice input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green); flex: none; }
.choice:has(input:checked) { border-color: var(--green); background: #F0F6F1; }
.choices { display: grid; gap: 10px; }
.saved { font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.saved .dia { width: 8px; height: 8px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 22px); transform: translate(-50%, 20px); opacity: 0; z-index: 60; background: var(--ink); color: #fff; font: 700 12.5px var(--mono); padding: 14px 20px; border-radius: 14px; transition: .3s var(--ease); pointer-events: none; max-width: calc(100vw - 60px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- sheet (bottom sheet on phones, side panel on larger screens) ---------- */
.sheet-back { position: fixed; inset: 0; background: rgba(20,22,18,.42); z-index: 70; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 71; background: var(--cream); left: 0; right: 0; bottom: 0; max-height: 92vh; border-radius: 26px 26px 0 0; overflow: auto; padding: 22px calc(var(--gutter)) calc(28px + env(safe-area-inset-bottom)); animation: sheet-up .38s var(--ease); overscroll-behavior: contain; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 768px) { .sheet { left: auto; top: 0; width: min(560px, 92vw); max-height: none; border-radius: 26px 0 0 26px; padding: 30px 36px; animation-name: sheet-in; } @keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } } }
.sheet-close { position: sticky; top: 0; float: right; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; z-index: 2; }

/* ---------- empty and error states ---------- */
.empty { text-align: center; padding: 34px 18px; }
.empty .h3 { margin-top: 12px; }
.empty p { color: var(--muted); max-width: 42ch; margin: 8px auto 0; }
.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #FFF6D6; border: 1px solid #F2DD8F; font: 400 14px/1.5 var(--mono); }
.alert.red { background: #FDECEC; border-color: #F3C6C6; }
.alert.green { background: #E8F3EA; border-color: #C3E1C9; }
.alert > svg { flex: none; margin-top: 2px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal].pre { opacity: 1; transform: none; }
  .polaroid, .tag { transition: none; }
}
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }

/* an owner's preview of someone's Hub: a small pill above the tab bar, never covering the page's own controls */
.preview-bar { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 14px); transform: translateX(-50%); z-index: 55; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; border-radius: 22px; background: var(--ink); color: #fff; font: 500 12.5px/1.3 var(--mono); box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); }
.preview-bar .pv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; }
.preview-bar .pv-text { min-width: 0; }
.preview-bar .pv-text b { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--yellow); }
.preview-bar .pv-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: none; color: #fff; font: 700 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.preview-bar .pv-btn:hover, .preview-bar .pv-btn:focus-visible { background: rgba(255,255,255,.12); }
.preview-bar .pv-exit { background: var(--yellow); border-color: var(--yellow); color: var(--green-ink); }
.preview-bar .pv-exit:hover, .preview-bar .pv-exit:focus-visible { background: #fff; }
.preview-bar .pv-pick { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 4px 2px; }
.preview-bar .pv-pick[hidden] { display: none; }
@media (max-width: 600px) {
  .preview-bar { left: 12px; right: 12px; transform: none; max-width: none; flex-wrap: nowrap; justify-content: flex-start; padding: 6px 6px 6px 12px; border-radius: 16px; gap: 8px; }
  .preview-bar .pv-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .preview-bar .pv-btn { min-height: 32px; padding: 0 10px; flex: none; }
  .preview-bar:has(.pv-pick:not([hidden])) { flex-wrap: wrap; }
}
.preview-bar select { flex: 1 1 160px; min-height: 40px; font: 500 14px var(--mono); border-radius: 10px; border: 0; padding: 0 10px; color: var(--ink); background: #fff; }
body.previewing main { padding-bottom: calc(var(--tab-h) + 96px); }

/* form fields never grow past their column: Safari gives date fields a wide intrinsic size (and centres their text) */
.field input, .field select, .field textarea, input.input { max-width: 100%; min-width: 0; box-sizing: border-box; }
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 48px; text-align: left; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* Native form controls drawn the same in Safari as elsewhere. iOS zooms the page into any field under 16px, so on touch
   screens every field is at least 16px; selects lose Safari's grey gradient and take a drawn chevron; search fields lose
   Safari's rounded style; checkboxes and radios take the brand green. */
html select:not([multiple]) { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 42px; text-overflow: ellipsis; }
html input[type="search"] { -webkit-appearance: none; appearance: none; }
html input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }
@media (pointer: coarse) {
  html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html select, html textarea { font-size: max(16px, 1em); }
}
.menu-who { color: inherit; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; }
.pv-who { color: inherit; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }