/* סופ״ש פנוי V1 design (DESIGN.md, 28/09/2026).
   Cool, flat, 4-6px radius, no floating cards, no heavy shadows.
   Fredoka SemiBold only for the logo, the big answer and dates; IBM Plex Sans Hebrew for everything else.
   Colour lives only inside the strip; the big answer is ink. */

:root {
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --ink: #14213D;
  --muted: #64748B;
  --line: #DCE3EC;
  --free: #20A66A;
  --free-bg: #DDF5E9;
  --free-ink: #137A4D;
  --kids: #F4B942;
  --kids-bg: #FFF1C7;
  --kids-ink: #805A00;
  --action: #2563EB;
  --on-action: #FFFFFF;

  --font-display: "Fredoka", "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --r: 5px;
  --maxw: 30rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1628;
    --surface: #16213A;
    --ink: #EEF2FA;
    --muted: #9AA7BD;
    --line: #26344F;
    --free: #34C585;
    --free-bg: #123B2C;
    --free-ink: #8BE3BA;
    --kids: #F4B942;
    --kids-bg: #3A2F12;
    --kids-ink: #F6D78A;
    --action: #5B8DEF;
    --on-action: #0E1628;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--action); }
h1, h2 { font-weight: 600; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
p { margin: 0 0 .9em; }
.muted, .hint { color: var(--muted); }
.hint { font-size: .88rem; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Frame -------------------------------------------------------------- */

.site-header, .page, .site-footer, body > .flash {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 16px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font: 600 1.05rem/1 var(--font-display);
}
.logo-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 22px;
  height: 22px;
}
.logo-mark i { border-radius: 2px; background: var(--free); }
.logo-mark i:nth-child(2), .logo-mark i:nth-child(3) { background: var(--kids); }

.header-link { font-size: .95rem; text-decoration: none; }

.page { flex: 1; padding-block: 28px 40px; }

.site-footer {
  display: flex;
  gap: 18px;
  padding-block: 18px 28px;
  font-size: .85rem;
}
.site-footer a { color: var(--muted); }

.flash {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 14px;
  margin-block: 12px 0;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font: 600 1.05rem/1.2 var(--font-body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary.is-done { background: var(--free); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-answer {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  min-height: 60px;
  font-size: 1.15rem;
}
.btn-answer:hover { border-color: var(--ink); }

.linklike {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--action); text-decoration: underline; cursor: pointer;
}

:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.actions { display: grid; gap: 10px; margin-block: 16px; }

/* Google and Facebook buttons, per each company's guidelines. */
.signin { display: grid; gap: 10px; margin-top: 16px; }
.btn-google, .btn-facebook {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 4px;
  font: 500 1rem/1 var(--font-body);
  text-decoration: none;
}
.btn-google { background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; }
.btn-facebook { background: #1877F2; color: #FFFFFF; border: 1px solid #1877F2; }

/* ---- The question and the answer ---------------------------------------- */

.ask { padding-top: 12vh; }
.ask-question, .question { font-size: 1.6rem; font-weight: 600; margin-bottom: 4px; }
.lead { font-size: 1.15rem; font-weight: 600; margin-bottom: 2px; }
.date { font: 600 1.35rem/1.3 var(--font-display); margin: 0 0 18px; }
.answers { display: grid; gap: 10px; margin-block: 24px 16px; }

.status { margin-bottom: 28px; }
.who { display: flex; align-items: center; gap: 10px; color: var(--muted); margin-bottom: 16px; }
.kicker { font-size: 1rem; color: var(--muted); font-weight: 500; margin: 0; }
.answer {
  font: 600 clamp(72px, 22vw, 88px)/1 var(--font-display);
  color: var(--ink);
  margin: 14px 0 6px;
  letter-spacing: -.01em;
}
.status .date { margin-bottom: 20px; }

/* ---- The weekend strip (the product's identity) ------------------------- */

.strip {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tile {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  aspect-ratio: 1 / 1.05;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}
.tile-date { font: 600 1.05rem/1 var(--font-display); }
.tile-mark { font: 600 1.1rem/1 var(--font-display); min-height: 1.1rem; }
.tile-free { background: var(--free-bg); border-color: var(--free-bg); color: var(--free-ink); }
.tile-kids { background: var(--kids-bg); border-color: var(--kids-bg); color: var(--kids-ink); }
.tile-unknown { background: var(--surface); color: var(--muted); }
.tile-unknown .tile-mark { font-size: 1.4rem; }
.tile-overlap { box-shadow: inset 0 0 0 2px var(--action); border-color: var(--action); }

/* ---- Profile: gate and result ------------------------------------------- */

.gate, .result { border-top: 1px solid var(--line); padding-top: 22px; }
.gate .btn { margin-top: 8px; }
.result-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 2px; }
.result .date { margin-bottom: 4px; }
.result .btn { margin-top: 16px; }

/* ---- Avatar ------------------------------------------------------------- */

.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--line);
  color: var(--ink);
  font-weight: 600;
  flex: none;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-s { width: 36px; height: 36px; font-size: 1rem; }

/* ---- Link ----------------------------------------------------------------- */

.big-link {
  font: 600 1.6rem/1.2 var(--font-display);
  overflow-wrap: anywhere;
  text-align: end;
  margin: 8px 0 4px;
}
.my-link { border-top: 1px solid var(--line); padding-top: 22px; }
.my-link h2 { font-size: 1rem; color: var(--muted); font-weight: 500; margin: 0; }
.flip { font-size: .95rem; }
.done { padding-top: 8vh; }

/* ---- Forms -------------------------------------------------------------- */

.stack { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span:first-child { font-weight: 600; }
input[type="text"] {
  width: 100%;
  min-height: 50px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.slug-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.slug-input:focus-within { outline: 2px solid var(--action); outline-offset: 2px; }
.slug-input .prefix { padding-inline: 12px 0; color: var(--muted); white-space: nowrap; font-size: 1.05rem; }
.slug-input input { border: 0; border-radius: 0; padding-inline: 1px 12px; min-width: 0; font-size: 1.05rem; font-weight: 600; }
.slug-input input:focus-visible { outline: none; }

.alts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 0; }
.chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-decoration: none;
  font-weight: 600;
}

.segmented { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmented legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.segmented input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }

.check { display: flex; align-items: center; gap: 8px; }
.field-error { color: var(--kids-ink); font-size: .92rem; margin: 0; }

.settings { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 14px; }
.settings summary { cursor: pointer; color: var(--muted); }
.settings[open] summary { margin-bottom: 16px; }
.settings .delete { margin-block: 28px 16px; }

/* ---- Bottom sheet (no JS: rendered open by the server, closed by a link) -- */

.sheet-scrim { position: fixed; inset: 0; background: rgba(20, 33, 61, .35); }
.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  max-width: var(--maxw);
  margin-inline: auto;
  background: var(--surface);
  border-radius: 6px 6px 0 0;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.sheet h2 { font-size: 1.3rem; margin-bottom: 4px; padding-inline-end: 32px; }
.sheet p { color: var(--muted); }
.sheet-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--muted);
  text-decoration: none;
  font-size: 1.5rem;
}

.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li { margin-bottom: 6px; }

/* Full gate: one huge "?" tile where the answer would be. */
.tile-hero {
  width: 132px;
  aspect-ratio: 1;
  margin: 14px 0 10px;
  font: 600 76px/1 var(--font-display);
  color: var(--muted);
}

/* ---- Community stats ---------------------------------------------------- */

.card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 18px 16px;
  margin-block: 24px;
}
.card h2 { font-size: 1.1rem; margin-bottom: 6px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmented-3 { grid-template-columns: 1fr 1fr 1.4fr; }
.segmented-3 span { font-size: .95rem; text-align: center; padding-inline: 4px; }
select {
  width: 100%;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

/* Two-segment split bar, the strip motif stretched: my side in green, the other in yellow. */
.split { display: flex; gap: 3px; height: 28px; margin: 14px 0 8px; }
.split span { border-radius: var(--r); min-width: 3px; }
.split-a { background: var(--free); }
.split-b { background: var(--kids); }
.split-legend { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--muted); }
.split-legend b { color: var(--ink); font-family: var(--font-display); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 6px; vertical-align: middle; }
.dot-a { background: var(--free); }
.dot-b { background: var(--kids); }

/* On /stats neither rotation is "yours", so no free/kids colours. */
.split-neutral .split-a, .split-neutral.split-legend .dot-a { background: var(--ink); }
.split-neutral .split-b, .split-neutral.split-legend .dot-b { background: var(--line); }

.progress { height: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--ink); }

/* Widths without inline styles (CSP style-src 'self'). */
.g-0{flex-grow:0}
.w-0{width:0%}
.g-1{flex-grow:1}
.w-1{width:1%}
.g-2{flex-grow:2}
.w-2{width:2%}
.g-3{flex-grow:3}
.w-3{width:3%}
.g-4{flex-grow:4}
.w-4{width:4%}
.g-5{flex-grow:5}
.w-5{width:5%}
.g-6{flex-grow:6}
.w-6{width:6%}
.g-7{flex-grow:7}
.w-7{width:7%}
.g-8{flex-grow:8}
.w-8{width:8%}
.g-9{flex-grow:9}
.w-9{width:9%}
.g-10{flex-grow:10}
.w-10{width:10%}
.g-11{flex-grow:11}
.w-11{width:11%}
.g-12{flex-grow:12}
.w-12{width:12%}
.g-13{flex-grow:13}
.w-13{width:13%}
.g-14{flex-grow:14}
.w-14{width:14%}
.g-15{flex-grow:15}
.w-15{width:15%}
.g-16{flex-grow:16}
.w-16{width:16%}
.g-17{flex-grow:17}
.w-17{width:17%}
.g-18{flex-grow:18}
.w-18{width:18%}
.g-19{flex-grow:19}
.w-19{width:19%}
.g-20{flex-grow:20}
.w-20{width:20%}
.g-21{flex-grow:21}
.w-21{width:21%}
.g-22{flex-grow:22}
.w-22{width:22%}
.g-23{flex-grow:23}
.w-23{width:23%}
.g-24{flex-grow:24}
.w-24{width:24%}
.g-25{flex-grow:25}
.w-25{width:25%}
.g-26{flex-grow:26}
.w-26{width:26%}
.g-27{flex-grow:27}
.w-27{width:27%}
.g-28{flex-grow:28}
.w-28{width:28%}
.g-29{flex-grow:29}
.w-29{width:29%}
.g-30{flex-grow:30}
.w-30{width:30%}
.g-31{flex-grow:31}
.w-31{width:31%}
.g-32{flex-grow:32}
.w-32{width:32%}
.g-33{flex-grow:33}
.w-33{width:33%}
.g-34{flex-grow:34}
.w-34{width:34%}
.g-35{flex-grow:35}
.w-35{width:35%}
.g-36{flex-grow:36}
.w-36{width:36%}
.g-37{flex-grow:37}
.w-37{width:37%}
.g-38{flex-grow:38}
.w-38{width:38%}
.g-39{flex-grow:39}
.w-39{width:39%}
.g-40{flex-grow:40}
.w-40{width:40%}
.g-41{flex-grow:41}
.w-41{width:41%}
.g-42{flex-grow:42}
.w-42{width:42%}
.g-43{flex-grow:43}
.w-43{width:43%}
.g-44{flex-grow:44}
.w-44{width:44%}
.g-45{flex-grow:45}
.w-45{width:45%}
.g-46{flex-grow:46}
.w-46{width:46%}
.g-47{flex-grow:47}
.w-47{width:47%}
.g-48{flex-grow:48}
.w-48{width:48%}
.g-49{flex-grow:49}
.w-49{width:49%}
.g-50{flex-grow:50}
.w-50{width:50%}
.g-51{flex-grow:51}
.w-51{width:51%}
.g-52{flex-grow:52}
.w-52{width:52%}
.g-53{flex-grow:53}
.w-53{width:53%}
.g-54{flex-grow:54}
.w-54{width:54%}
.g-55{flex-grow:55}
.w-55{width:55%}
.g-56{flex-grow:56}
.w-56{width:56%}
.g-57{flex-grow:57}
.w-57{width:57%}
.g-58{flex-grow:58}
.w-58{width:58%}
.g-59{flex-grow:59}
.w-59{width:59%}
.g-60{flex-grow:60}
.w-60{width:60%}
.g-61{flex-grow:61}
.w-61{width:61%}
.g-62{flex-grow:62}
.w-62{width:62%}
.g-63{flex-grow:63}
.w-63{width:63%}
.g-64{flex-grow:64}
.w-64{width:64%}
.g-65{flex-grow:65}
.w-65{width:65%}
.g-66{flex-grow:66}
.w-66{width:66%}
.g-67{flex-grow:67}
.w-67{width:67%}
.g-68{flex-grow:68}
.w-68{width:68%}
.g-69{flex-grow:69}
.w-69{width:69%}
.g-70{flex-grow:70}
.w-70{width:70%}
.g-71{flex-grow:71}
.w-71{width:71%}
.g-72{flex-grow:72}
.w-72{width:72%}
.g-73{flex-grow:73}
.w-73{width:73%}
.g-74{flex-grow:74}
.w-74{width:74%}
.g-75{flex-grow:75}
.w-75{width:75%}
.g-76{flex-grow:76}
.w-76{width:76%}
.g-77{flex-grow:77}
.w-77{width:77%}
.g-78{flex-grow:78}
.w-78{width:78%}
.g-79{flex-grow:79}
.w-79{width:79%}
.g-80{flex-grow:80}
.w-80{width:80%}
.g-81{flex-grow:81}
.w-81{width:81%}
.g-82{flex-grow:82}
.w-82{width:82%}
.g-83{flex-grow:83}
.w-83{width:83%}
.g-84{flex-grow:84}
.w-84{width:84%}
.g-85{flex-grow:85}
.w-85{width:85%}
.g-86{flex-grow:86}
.w-86{width:86%}
.g-87{flex-grow:87}
.w-87{width:87%}
.g-88{flex-grow:88}
.w-88{width:88%}
.g-89{flex-grow:89}
.w-89{width:89%}
.g-90{flex-grow:90}
.w-90{width:90%}
.g-91{flex-grow:91}
.w-91{width:91%}
.g-92{flex-grow:92}
.w-92{width:92%}
.g-93{flex-grow:93}
.w-93{width:93%}
.g-94{flex-grow:94}
.w-94{width:94%}
.g-95{flex-grow:95}
.w-95{width:95%}
.g-96{flex-grow:96}
.w-96{width:96%}
.g-97{flex-grow:97}
.w-97{width:97%}
.g-98{flex-grow:98}
.w-98{width:98%}
.g-99{flex-grow:99}
.w-99{width:99%}
.g-100{flex-grow:100}
.w-100{width:100%}