/* The public pages and the admin page of the planner for sale. Colours, type and buttons are copied on 2026-11-09
   from the planner page (web/app/planner-page.css): the dark HUD with cyan
   accents. Chakra Petch and JetBrains Mono are used when the device has them, else the system fonts. */
:root{--bg:#040b14;--surface:#081626;--surface2:#0c1f33;--fg:#dcf7ff;--fg2:#9fc4d3;--muted:#5d8397;--line:rgba(0,229,255,.18);--accent:#00e5ff;--good:#22e39a;--warn:#ffc23d;--bad:#ff5468;--break:#b98cff;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,#0b2a44 0,transparent 60%),var(--bg);background-color:var(--bg);color:var(--fg);font:16px/1.5 "Chakra Petch",system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh;overflow-x:hidden}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:24px 16px 48px}
.top{display:flex;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.kicker{margin:0;font:600 12px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.brand{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:.02em}
.brand a{color:var(--fg);text-decoration:none}
h1{margin:.2rem 0 .6rem;font-size:clamp(1.6rem,6vw,2.4rem);letter-spacing:.02em;line-height:1.15}
h1:focus{outline:none}
h2{margin:0 0 .5rem;font-size:1.15rem}
.links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
a.ghost,button.ghost{display:inline-block;padding:.45rem .8rem;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--fg2);text-decoration:none;font:600 14px "Chakra Petch",system-ui,sans-serif;cursor:pointer}
a.ghost:hover,button.ghost:hover{border-color:var(--accent);color:var(--fg)}
.go{display:inline-block;padding:.7rem 1.3rem;border:1px solid var(--accent);border-radius:10px;background:rgba(0,229,255,.12);color:var(--fg);font:700 16px "Chakra Petch",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;box-shadow:0 0 18px rgba(0,229,255,.2)}
.go:hover{background:rgba(0,229,255,.22)}
.go.small{padding:.45rem .8rem;font-size:13px}
.go.bad{border-color:var(--bad);background:rgba(255,84,104,.1);box-shadow:0 0 18px rgba(255,84,104,.18)}
.go.big-go{padding:1rem 1.8rem;font-size:20px;border-color:var(--good);background:rgba(34,227,154,.12);box-shadow:0 0 24px rgba(34,227,154,.25)}
button:disabled{opacity:.45;cursor:default;box-shadow:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.row.left{justify-content:flex-start}
.hud,.card{margin:0 0 20px;padding:20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--surface2),var(--surface));box-shadow:0 0 0 1px rgba(0,229,255,.06),0 0 40px rgba(0,229,255,.08)}
.intro{text-align:center}
.lead{margin:.2rem auto 1rem;max-width:560px;color:var(--fg2);font-size:1.1rem}
.points{list-style:none;margin:18px auto 8px;padding:0;max-width:600px;display:grid;gap:8px;text-align:left}
.points li{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.points li::before{content:"✓ ";color:var(--good)}
.block{margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.fieldset{margin:0 0 12px}
.fieldset label,legend{display:block;margin:0 0 4px;color:var(--fg2);font-weight:600}
.field{display:block;width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:500 17px "Chakra Petch",system-ui,sans-serif;outline:none}
.field::placeholder{color:var(--muted)}
.field:focus{border-color:var(--accent);box-shadow:0 0 18px rgba(0,229,255,.15)}
.hint{margin:.4rem 0;color:var(--fg2);font-size:14px}
.hint.warn,.warn{color:var(--warn)}
.hint.good{color:var(--good)}
.line{margin:10px 0 0;padding:8px 12px;border-left:3px solid var(--good);border-radius:6px;background:rgba(34,227,154,.07);color:var(--fg)}
.line.error{border-left-color:var(--bad);background:rgba(255,84,104,.08)}
.note{color:var(--fg2)}
.facts{margin:0 0 8px;display:grid;gap:8px}
.facts div{display:grid;grid-template-columns:minmax(6rem,9rem) minmax(0,1fr);gap:10px;align-items:baseline}
.facts dt{font:600 11px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font:600 16px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--fg);overflow-wrap:anywhere}
.devices{margin:0 0 12px;padding:0;border:0;display:grid;gap:8px}
.device{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.device input{accent-color:var(--accent);width:18px;height:18px}
.foot{margin-top:28px;color:var(--muted);font-size:14px}
.foot-links{display:flex;gap:14px;flex-wrap:wrap;margin:.4rem 0 0}
.tick{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.tick input{accent-color:var(--accent);width:20px;height:20px;flex:0 0 auto;margin:2px 0 0}
.tick label{color:var(--fg);cursor:pointer}

/* The terms and the privacy statement (terms.html, privacy.html) */
.legal h2{margin:1.6rem 0 .4rem;font-size:1.25rem}
.legal h3{margin:1.1rem 0 .3rem;font-size:1.02rem;color:var(--fg)}
.legal p,.legal li{color:var(--fg2)}
.legal ul{padding-left:1.2rem}
.legal li{margin:.25rem 0}
.legal .version{font:600 12px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.legal .langs{display:flex;gap:10px;flex-wrap:wrap}
.skip{position:absolute;left:16px;top:-4rem;z-index:30;padding:.5rem .9rem;border-radius:8px;background:var(--accent);color:var(--bg);font-weight:700}
.skip:focus{top:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The admin page */
.admin-wrap{max-width:1180px}
.admin-table-wrap{overflow-x:auto;margin-top:12px}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th,.admin-table td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.admin-table th{font:600 11px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.admin-table td{color:var(--fg)}
.admin-row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.admin-row-actions .field{width:auto;min-width:8rem;padding:.35rem .5rem;font-size:14px}
.admin-confirm{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--warn)}
.admin-qr{display:block;margin:12px 0;background:#fff;padding:8px;border-radius:8px;max-width:100%}
textarea.field{font:500 15px "JetBrains Mono",ui-monospace,monospace;min-height:6rem;resize:vertical}
select.field{appearance:auto}
.admin-check{display:inline-flex;gap:6px;align-items:center;color:var(--fg2)}

@supports (padding:env(safe-area-inset-top)){
  .wrap{padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(48px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}
@media (max-width:480px){
  .hud,.card{padding:16px}
  .row .go,.row button{flex:1 1 auto;min-height:48px}
  .facts div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}