/* SwissWebWork prototype kit base (from K-046). Load before site.css. Set these tokens in site.css :root:
   --ink, --paper, --line, --mute, --accent, --ok, --bad, --ease, --pad, --max, --sans. Nothing here sets a look
   beyond what every prototype needs: reset, [hidden], focus, forms (16 px inputs, 44 px targets), toast, reveal. */
:root { --ink: #1c1a17; --paper: #f5f1ea; --line: rgba(28, 26, 23, .16); --mute: #675f54; --accent: #a8662a; --ok: #4f7f4e; --bad: #9b2d20;
  --pad: clamp(20px, 4vw, 56px); --max: 1360px; --ease: cubic-bezier(.22, .61, .2, 1); --sans: system-ui, -apple-system, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.wrap.narrow { max-width: calc(860px + 2 * var(--pad)); }
.small { font-size: 14px; color: var(--mute); }

/* live status dot and copy buttons */
.st { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; }
.st i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.st.shut i { background: var(--mute); opacity: .5; }
.copy { background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; text-align: left; }
.copy:hover { text-decoration-color: currentColor; }

/* menu mechanics: hidden on desktop; on small screens a fading layer that never swallows taps while closed */
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.burger i, .burger::before, .burger::after { content: ""; position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }
.burger::before { top: 15px; } .burger i { top: 21px; } .burger::after { top: 27px; }
.open .burger::before { transform: translateY(6px) rotate(45deg); } .open .burger i { opacity: 0; } .open .burger::after { transform: translateY(-6px) rotate(-45deg); }
.menu { display: none; }
@media (max-width: 999px) {
  /* !important: a site's own ".hd .nav { display: flex }" must not bring the desktop nav back and squeeze the burger */
  .hd .nav, .hd .cta { display: none !important; }
  .burger { display: block; flex: none; }
  .menu { display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; position: fixed; inset: 0; z-index: 19; background: var(--paper); color: var(--ink); padding: 108px var(--pad) 40px; opacity: 0; visibility: hidden; overflow-y: auto; transition: opacity .45s var(--ease), visibility 0s .45s; }
  .open .menu { pointer-events: auto; opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
  .hd.open .lg, .hd.open .burger { position: relative; z-index: 21; }
}

/* forms */
.f label, .f legend { display: block; font-size: 14px; color: var(--mute); margin-bottom: 8px; }
select, input:not([type=range]):not([type=checkbox]):not([type=radio]), textarea { width: 100%; min-height: 50px; font-size: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, .28); border-radius: 8px; padding: 12px 14px; }
select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; }
textarea { min-height: 140px; resize: vertical; }
input[type=range] { width: 100%; height: 44px; accent-color: var(--ink); cursor: pointer; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--ink); margin: 0; flex: none; }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding-top: 10px; cursor: pointer; }
.err { display: block; color: var(--bad); font-size: 14px; margin-top: 6px; }
.err:empty { margin: 0; }
.f.bad input, .f.bad select, .f.bad textarea { border-color: var(--bad); }
[data-done] { padding: 22px 24px; border-left: 3px solid var(--ok); font-size: 17px; outline: none; }
[data-done] b { font-weight: 600; }

/* toast: hidden with visibility, so tall screenshots never show it off-screen */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 13px 20px; border-radius: 10px; font-size: 15px; opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .3s; }

/* quiet reveal: opacity and a small rise, never a clip */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .uv { opacity: 0; transition: opacity 1.3s var(--ease) var(--d, 0s); }
.js .uv.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .rv, .js .uv { opacity: 1; transform: none; }
}