@import url("fonts.css");

/* Warm and hand-made: cream paper, ink-brown text, terracotta.
   Sizes are in rem so the text-size setting scales everything. */
html { font-size: 20px; }
html[data-size="normal"] { font-size: 17px; }
html[data-size="larger"] { font-size: 23px; }

:root {
  --paper: #fbf5ea;
  --paper-2: #f3e7d3;
  --card: #fffaf2;
  --ink: #2e2419;
  --ink-soft: #5c4f40;
  --line: #2e2419;
  --clay: #b4502e;
  --clay-text: #ffffff;
  --clay-ink: #9a4024;
  --clay-soft: #f2c9b4;
  --sage: #476f4c;
  --sage-soft: #dbe7d3;
  --honey: #855500;
  --honey-soft: #f7e3b3;
  --stop: #a3291f;
  --stop-soft: #f8d9d1;
  --note: #fbe7a6;
  --focus: #e39a2d;
  --hand: 22px 26px 20px 28px / 28px 20px 26px 22px;
  --hand-small: 14px 18px 12px 20px / 20px 12px 18px 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #211a14;
    --paper-2: #2c241c;
    --card: #2a2119;
    --ink: #f4eadb;
    --ink-soft: #cdbfa9;
    --line: #dccbb2;
    --clay: #e2906a;
    --clay-text: #231a13;
    --clay-ink: #f2a582;
    --clay-soft: #5b3526;
    --sage: #9fcaa2;
    --sage-soft: #263427;
    --honey: #f1c264;
    --honey-soft: #3e3115;
    --stop: #ff9a8b;
    --stop-soft: #48201b;
    --note: #4a3d1b;
    --focus: #f1c264;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html[lang="he"] [data-lang="en"], html[lang="en"] [data-lang="he"] { display: none !important; }

body {
  margin: 0;
  background-color: var(--paper);
  /* a little paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 1rem/1.6 "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand-name, .stamp-title, .note h2 { font-family: "Fredoka", "Rubik", system-ui, sans-serif; font-weight: 600; }
a { color: var(--clay-ink); text-underline-offset: .18em; text-decoration-thickness: .08em; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 44rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

/* ---------- header and footer ---------- */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding-top: .4rem; }
.brand { display: flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; }
.brand .drawing svg { width: 3rem; height: 3rem; }
.brand-name { font-size: 1.45rem; line-height: 1; }
.brand-tag { color: var(--ink-soft); font-size: .82rem; margin-top: .15rem; }
.head-actions { display: flex; gap: .5rem; align-items: center; }
.site-nav { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: .9rem 0 1.4rem; padding: .2rem 0 .5rem; border-bottom: 2px dashed color-mix(in srgb, var(--line) 35%, transparent); }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: .35rem 0; }
.site-nav a[aria-current="page"] { color: var(--clay-ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C20 2 32 9 50 5 S82 2 98 6' fill='none' stroke='%23b4502e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% .5rem no-repeat; }
.site-foot { margin-top: 3rem; padding-top: 1.2rem; border-top: 2px dashed color-mix(in srgb, var(--line) 35%, transparent); color: var(--ink-soft); font-size: .9rem; }
.site-foot p { margin: .3rem 0; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem;
  padding: .5rem 1.15rem; font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  color: var(--ink); background: var(--card); border: 2.5px solid var(--line); border-radius: var(--hand-small);
  box-shadow: 3px 3px 0 var(--line); cursor: pointer;
}
.btn:hover { background: var(--paper-2); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.btn:disabled { opacity: .65; cursor: progress; }
.btn.primary { background: var(--clay); color: var(--clay-text); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.quiet { box-shadow: none; border-width: 2px; }
.btn.big { width: 100%; min-height: 3.6rem; font-size: 1.2rem; margin-top: 1rem; }
.btn .drawing svg { width: 1.5rem; height: 1.5rem; }
.linkish { background: none; border: none; padding: .3rem 0; color: var(--clay-ink); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- the checker ---------- */
.hero { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; align-items: end; margin-bottom: 1rem; }
.hero h1 { font-size: 1.9rem; line-height: 1.15; margin: 0; }
.hero p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.hero .drawing svg { width: 7.5rem; height: auto; }
.underline { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C18 3 30 11 48 6 S80 3 98 7' fill='none' stroke='%23b4502e' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% .55em no-repeat; padding-bottom: .12em; }

.card { background: var(--card); border: 2.5px solid var(--line); border-radius: var(--hand); padding: 1.2rem; }
/* three equal buttons in one row; on a phone the longer labels wrap onto two lines */
.tabs { display: flex; gap: .4rem; margin: 0 0 1rem; }
.tabs button {
  flex: 1 1 0; min-width: 0; min-height: 3rem; padding: .45rem .5rem; font: inherit; font-weight: 600; line-height: 1.2;
  color: var(--ink-soft); background: transparent; border: 2px dashed color-mix(in srgb, var(--line) 35%, transparent);
  border-radius: var(--hand-small); cursor: pointer; hyphens: auto;
}
.tabs button[aria-selected="true"] { color: var(--ink); background: var(--card); border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--line); }
.field-label { display: block; font-weight: 600; margin-bottom: .4rem; }
textarea, input[type="text"], input[type="tel"], input[type="number"] {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 2.5px solid var(--line);
  border-radius: var(--hand-small); padding: .6rem .8rem;
}
textarea {
  min-height: 9.5rem; resize: vertical; line-height: 1.6rem;
  /* a lined notepad */
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.6rem - 1px),
    color-mix(in srgb, var(--line) 14%, transparent) calc(1.6rem - 1px), color-mix(in srgb, var(--line) 14%, transparent) 1.6rem);
  background-attachment: local; background-position: 0 .6rem;
}
.picture { margin-top: .9rem; display: grid; gap: .5rem; justify-items: start; }
.picture.dragging { outline: 3px dashed var(--clay); outline-offset: 8px; border-radius: 12px; }
.hint { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.thumb { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.thumb img { height: 5rem; border: 2px solid var(--line); border-radius: var(--hand-small); transform: rotate(-2deg); }
.error { margin-top: .9rem; color: var(--stop); font-weight: 600; }
.progress { margin-top: .9rem; color: var(--ink-soft); }
.spinner { width: 1.1rem; height: 1.1rem; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
details.examples { margin-top: 1rem; }
details summary { cursor: pointer; color: var(--clay-ink); font-weight: 600; padding: .3rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.chip { font: inherit; font-size: .85rem; padding: .3rem .8rem; color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; }

/* the verdict: a rubber stamp */
#result { margin-top: 1.6rem; }
.stamp {
  display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; color: var(--stop);
  background: var(--stop-soft); border: 3px solid currentColor; border-radius: var(--hand); transform: rotate(-.8deg);
  box-shadow: inset 0 0 0 4px var(--stop-soft), inset 0 0 0 5.5px currentColor;
}
.stamp.suspicious { color: var(--honey); background: var(--honey-soft); box-shadow: inset 0 0 0 4px var(--honey-soft), inset 0 0 0 5.5px currentColor; }
.stamp.safe { color: var(--sage); background: var(--sage-soft); box-shadow: inset 0 0 0 4px var(--sage-soft), inset 0 0 0 5.5px currentColor; }
.stamp .drawing svg { width: 3.2rem; height: 3.2rem; flex: none; }
.stamp-title { margin: 0; font-size: 1.55rem; line-height: 1.2; }
.stamp-sub { color: var(--ink); margin-top: .3rem; font-size: 1.05rem; }
.result-body { padding: .4rem .2rem 0; }
.result-body h3, .page h3 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
ol.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: .7rem; }
ol.steps li { counter-increment: step; display: flex; gap: .7rem; font-size: 1.05rem; }
ol.steps li::before {
  content: counter(step); flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  font-family: "Fredoka", sans-serif; font-weight: 600; color: var(--clay-text); background: var(--clay);
  border-radius: 48% 52% 50% 46% / 52% 46% 54% 48%;
}
ul.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
ul.reasons li { display: flex; gap: .6rem; }
ul.reasons li::before { content: ""; flex: none; width: .9rem; height: .9rem; margin-top: .4rem; background: var(--clay); border-radius: 50% 40% 55% 45%; }
.ask-family { margin: 1.4rem 0 .2rem; font-weight: 600; }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem; margin-top: .8rem; }
.actions .btn { margin: 0; }
.btn.call { background: var(--clay); color: var(--clay-text); }
.btn.wa { background: var(--sage); color: var(--paper); }
.callout { margin-top: 1.4rem; padding: 1rem; background: var(--paper-2); border: 2px dashed var(--line); border-radius: var(--hand); display: grid; gap: .7rem; justify-items: start; }
details.more { margin-top: 1.6rem; border-top: 2px dashed color-mix(in srgb, var(--line) 35%, transparent); padding-top: .6rem; }
ul.signals, ul.links { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
ul.signals li { display: flex; gap: .7rem; align-items: baseline; }
.w { flex: none; font-size: .75rem; font-weight: 700; padding: .05rem .4rem; border-radius: .4rem; background: var(--paper-2); }
.w.hi { background: var(--stop-soft); color: var(--stop); } .w.md { background: var(--honey-soft); color: var(--honey); }
.detail { display: block; color: var(--ink-soft); font-size: .92rem; }
q { color: var(--ink-soft); font-size: .85rem; font-style: italic; overflow-wrap: anywhere; }
ul.links li { font-size: .92rem; padding: .5rem .8rem; border: 1.5px solid var(--line); border-radius: var(--hand-small); overflow-wrap: anywhere; }
.flag { color: var(--stop); } .ok { color: var(--sage); }
.ocr-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; padding: .6rem .8rem; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--hand-small); font-size: .92rem; }
.foot-note { color: var(--ink-soft); font-size: .88rem; margin-top: 1.4rem; }

/* sticky note */
.note { margin: 2.2rem auto 0; max-width: 30rem; padding: 1.1rem 1.3rem 1.2rem; background: var(--note); transform: rotate(1.2deg); border-radius: 2px 2px 18px 2px; box-shadow: 0 10px 14px -10px rgba(46, 36, 25, .45); }
.note h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.note ol { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .35rem; }

/* history */
.history { margin-top: 2.4rem; }
.history-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.history-head h2 { font-size: 1.25rem; margin: 0; }
#history-list { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
#history-list button {
  width: 100%; display: flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .55rem .8rem; text-align: start;
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--hand-small); cursor: pointer;
}
.dot { flex: none; width: .8rem; height: .8rem; border-radius: 50% 45% 55% 50%; }
.preview { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.when { flex: none; color: var(--ink-soft); font-size: .8rem; }
.empty { color: var(--ink-soft); }

/* guided questionnaires */
.guided-intro { color: var(--ink-soft); margin: 0 0 1rem; }
.q { margin: 0 0 1.3rem; padding: 0; border: none; min-width: 0; }
.q .qlabel { display: block; font-weight: 600; margin-bottom: .3rem; padding: 0; }
.q .help { color: var(--ink-soft); font-size: .88rem; margin: 0 0 .5rem; }
.qrow { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.opts { display: grid; gap: .45rem; }
.opt { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .8rem; background: var(--paper); border: 2px solid color-mix(in srgb, var(--line) 45%, transparent); border-radius: var(--hand-small); cursor: pointer; }
.opt:has(input:checked) { border-color: var(--line); background: var(--clay-soft); }
.opt input { flex: none; width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; accent-color: var(--clay); }
.row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; margin-top: 1rem; }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.findings li { display: flex; gap: .6rem; align-items: baseline; padding: .6rem .8rem; background: var(--paper); border-radius: var(--hand-small); }
.sev { flex: none; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: .4rem; }
.sev-critical { background: var(--stop-soft); color: var(--stop); } .sev-warning { background: var(--honey-soft); color: var(--honey); }
.sev-info { background: var(--paper-2); color: var(--ink-soft); } .sev-good { background: var(--sage-soft); color: var(--sage); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .8rem; padding: .8rem; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--hand-small); }
.checklist li.done { opacity: .7; }
.cstat { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; font-weight: 700; font-size: .85rem; border: 2px solid var(--line); border-radius: 50% 45% 52% 48%; }
.cs-priority { background: var(--clay); color: var(--clay-text); } .cs-done { background: var(--sage); color: var(--paper); }
.first { margin-inline-start: .4rem; color: var(--clay-ink); font-size: .75rem; font-weight: 700; }
.clinks { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .35rem; font-size: .92rem; }
ul.costs { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .35rem; }

/* ---------- overlays: first-run setup and settings ---------- */
.overlay { position: fixed; inset: 0; z-index: 10; overflow-y: auto; padding: 1rem; background: var(--paper); }
.overlay .panel { max-width: 36rem; margin: 0 auto; padding: 1rem 0 3rem; }
.overlay h2 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 .5rem; }
.overlay h2 span { display: block; }
.overlay h3 { margin: 1.6rem 0 .6rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.countries { display: grid; gap: .7rem; margin-top: 1.2rem; }
.country {
  display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 3.6rem; padding: .6rem 1rem; text-align: start;
  font: inherit; font-size: 1.1rem; font-weight: 600; color: var(--ink); background: var(--card);
  border: 2.5px solid var(--line); border-radius: var(--hand-small); box-shadow: 3px 3px 0 var(--line); cursor: pointer;
}
.country .flag { font-size: 1.8rem; line-height: 1; }
.country .other { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.country[aria-pressed="true"], .choices button[aria-pressed="true"] { background: var(--clay-soft); }
.choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.choices .btn { flex: 1 1 8rem; }
.contact { display: grid; gap: .8rem; }
.contact label { display: grid; gap: .3rem; font-weight: 600; }

/* ---------- content pages ---------- */
.page h1 { font-size: 1.9rem; line-height: 1.2; margin: .2rem 0 .8rem; }
.page .lead { font-size: 1.12rem; color: var(--ink-soft); }
.page h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; }
.page ul, .page ol { padding-inline-start: 1.3rem; display: grid; gap: .45rem; }
.page .drawing.float { float: inline-end; margin: 0 0 .6rem 1rem; }
.page .drawing.float svg { width: 8rem; height: auto; }
.page .box { margin: 1.4rem 0; padding: 1rem 1.1rem; background: var(--card); border: 2.5px solid var(--line); border-radius: var(--hand); }
.page .box.warn { background: var(--stop-soft); }
.page .box h2, .page .box h3 { margin-top: 0; }
.guide-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.guide-list a { display: flex; gap: 1rem; align-items: center; padding: 1rem; color: var(--ink); text-decoration: none; background: var(--card); border: 2.5px solid var(--line); border-radius: var(--hand); box-shadow: 3px 3px 0 var(--line); }
.guide-list a:nth-child(odd) { transform: rotate(-.4deg); }
.guide-list .drawing svg { width: 4.5rem; height: auto; flex: none; }
.guide-list strong { display: block; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.15rem; }
.guide-list span.sum { color: var(--ink-soft); font-size: .95rem; }
.old-browser { padding: 1rem; background: var(--stop-soft); border: 2.5px solid var(--line); border-radius: var(--hand); font-weight: 600; }

/* drawings: ink lines over a soft colour patch, like a hand print */
.drawing svg { display: block; overflow: visible; }
/* stroke width comes from the drawing itself: thinner for small icons */
.drawing .ink { fill: none; stroke: var(--line); stroke-linecap: round; stroke-linejoin: round; }
.drawing .patch { fill: var(--clay-soft); }
.drawing .accent { fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; }
.stamp .drawing .ink { stroke: currentColor; }
.stamp .drawing .patch { fill: transparent; }

@media (max-width: 560px) {
  .wrap { padding: .8rem .8rem 2.5rem; }
  .hero { grid-template-columns: 1fr; }
  .hero .drawing { display: none; }
  .hero h1, .page h1 { font-size: 1.6rem; }
  .stamp-title { font-size: 1.3rem; }
  .qrow { grid-template-columns: 1fr; gap: 0; }
  .page .drawing.float svg { width: 4rem; }
  .tabs button { font-size: .88em; padding-inline: .25rem; }
}