/* אות.חיים — מערכת פנימית (אב-טיפוס)
   Tokens taken from ot-hayim.co.il (Elementor globals) */

/* v18 (Lia: "תכניס את הלוגו האמיתי שלהם ואת הפונטים שהם משתמשים בהם באתר"): the site's own fonts, from ot-hayim.co.il */
@font-face { font-family: "buSimpatia"; src: url("../assets/brand/buSimpatia-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "buSimpatia"; src: url("../assets/brand/buSimpatia-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "fbShefa"; src: url("../assets/brand/fbShefa-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "fbShefa"; src: url("../assets/brand/fbShefa-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

@font-face {
  font-family: "OHLiorRaviv";
  src: url("../assets/OHLiorRaviv-Regular.woff2") format("woff2");
  font-display: block;
}

:root {
  --ink: #003878;          /* primary — deep blue */
  --night: #072344;        /* text */
  --night-2: #042E5E;
  --sky: #34A3CA;          /* handwriting blue, logo */
  --mist: #DEF6FF;
  --paper: #F1FBFF;
  --white: #FFFFFF;
  --poppy: #A31D21;        /* accent, used sparingly */
  --line: #C9E3EF;
  --muted: #4E6A86;

  --f-body: "fbShefa", "Assistant", "Arial Hebrew", sans-serif;
  --f-head: "buSimpatia", "Varela Round", "Assistant", sans-serif;
  --f-hand: "OHLiorRaviv", "Varela Round", sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r-s: 6px; --r-m: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--night);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-head); font-weight: 400; color: var(--ink); margin: 0; }
h1 { font-size: 2.3rem; letter-spacing: 2.2px; line-height: 1.2; }
h2 { font-size: 1.45rem; letter-spacing: 1.4px; line-height: 1.3; }
h3 { font-size: 1.12rem; letter-spacing: .8px; }
p { margin: 0 0 var(--s3); max-width: 68ch; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }  /* screen headings get focus for screen readers only */
.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.hand { font-family: var(--f-hand); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh;
  background: var(--ink);
  color: var(--white);
  display: flex; flex-direction: column;
  padding: var(--s6) var(--s5);
  overflow: hidden;
}
.logo { text-decoration: none; color: inherit; display: block; margin-block-end: var(--s7); }
.logo-mark {
  font-family: var(--f-hand);
  font-size: 3.1rem; line-height: 1; color: var(--sky);
  display: block;
}
.logo-tag {
  display: block; margin-block-start: var(--s2);
  font-family: var(--f-head); font-size: .86rem; letter-spacing: 3px; color: var(--white);
}
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); position: relative; z-index: 1; }
.nav a {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-s);
  color: #CFE6F5; text-decoration: none;
  font-size: 1rem;
}
.nav a:hover { background: rgba(255,255,255,.07); color: var(--white); }
.nav a[aria-current="page"] { background: rgba(52,163,202,.18); color: var(--white); }
.nav a[aria-current="page"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--poppy);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}
.nav-sep { margin-block: var(--s4) var(--s1); padding-inline: var(--s3); font-size: .82rem; color: #8FB4D2; }
.nav-sep b { font-family: var(--f-hand); font-weight: 400; font-size: 1.3rem; color: var(--sky); display: block; line-height: 1.2; }
.rail-texture {
  position: absolute; inset-inline: -40px; inset-block-end: 0; height: 46%;
  pointer-events: none; opacity: .14; display: none;  /* read as a cut-off glitch at the rail edge */
}
.rail-poppy {
  position: absolute; inset-block-end: 26px; inset-inline-start: 22px;
  width: 64px; transform: rotate(-12deg); opacity: .95; pointer-events: none;
}
.rail-foot { margin-block-start: auto; position: relative; z-index: 1; font-size: .82rem; color: #8FB4D2; padding-inline-start: 88px; }

.main { min-width: 0; position: relative; }
.screen { display: none; padding: var(--s7) var(--s7) var(--s8); max-width: 1180px; }
.screen.is-active { display: block; }
.screen-head { margin-block-end: var(--s6); }
.screen-head p { color: var(--muted); margin-block-start: var(--s2); }

/* ---------- common parts ---------- */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: var(--s5);
}
.panel + .panel { margin-block-start: var(--s5); }
/* v20s (Lia: "יש עוד בלוקים לא מיושרים, תעבור על הכל"): panels side by side in a grid never take the stacking
   margin - every row of boxes starts on one top line; paired panels (result-two/hero) also share one height */
:is(.upload-grid, .review-grid, .result-two, .result-hero, .card-wrap, .aside-stack) > .panel { margin-block-start: 0; }
.panel h2 { margin-block-end: var(--s3); }
.field { display: grid; gap: var(--s1); margin-block-end: var(--s4); align-content: start; }  /* fields in a row stay top-aligned */
.field label { font-size: .92rem; color: var(--night-2); }
.field small { color: var(--muted); font-size: .84rem; }
.input, .textarea {
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper);
  padding: var(--s2) var(--s3);
}
.input { height: 46px; }
.input:focus, .textarea:focus { border-color: var(--sky); background: var(--white); outline: none; box-shadow: 0 0 0 3px rgba(52,163,202,.25); }
.textarea { min-height: 96px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font-size: .98rem; text-decoration: none;
}
.btn:hover { background: var(--mist); }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--night-2); }
.btn-primary[disabled] { opacity: .45; cursor: not-allowed; }
.btn-quiet { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 4px; padding-inline: var(--s2); }
.btn-quiet:hover { background: transparent; color: var(--night); }
.actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-block-start: var(--s5); }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; padding: 2px 10px; border-radius: 999px; background: var(--mist); color: var(--ink); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.is-done { background: #E5F3EA; color: #24613A; }
.chip.is-review { background: #FFF1E6; color: #8A4A12; }
.chip.is-building { background: var(--mist); color: var(--ink); }
.chip.is-draft { background: #EEF1F4; color: #586574; }

.toast {
  position: fixed; inset-block-end: var(--s5); inset-inline-start: 50%; transform: translateX(50%);
  background: var(--night); color: var(--white); padding: 10px 20px; border-radius: 999px;
  font-size: .95rem; opacity: 0; pointer-events: none; transition: opacity .25s;
  z-index: 50;
}
.toast.is-on { opacity: 1; }

/* scan placeholders — neutral, synthetic (no real scans in the prototype) */
.scan {
  background:
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(52,163,202,.16) 21px 22px),
    #F4F2EC;
  color: #3B5C88;
  font-family: var(--f-hand);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.scan > span { filter: blur(.35px); transform: rotate(-2deg); opacity: .88; }
.glyph { font-family: var(--f-hand); color: var(--ink); display: grid; place-items: center; background: var(--white); }

/* ---------- 1. upload ---------- */
.upload-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--s1);  /* label is inline by default: it spilled over the thumbs */
  border: 2px dashed #9CCBE0; border-radius: var(--r-m);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(52,163,202,.12), transparent 60%),
    var(--paper);
  padding: var(--s7) var(--s5); text-align: center; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.drop:hover, .drop.is-over { border-color: var(--sky); background-color: var(--mist); }
.drop-title { font-family: var(--f-head); letter-spacing: 1.2px; font-size: 1.2rem; color: var(--ink); display: block; margin-block-end: var(--s1); }
.drop svg { color: var(--sky); margin-block-end: var(--s3); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); margin-block-start: var(--s5); }
.thumb { border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--white); position: relative; }
.thumb .scan, .thumb img { height: 150px; width: 100%; object-fit: cover; display: grid; }
.thumb .scan span { font-size: 1.15rem; line-height: 1.5; text-align: start; padding: var(--s3); }
.thumb.is-photo .scan { background: linear-gradient(160deg, #C8D7E4, #8EA6BD); color: transparent; }
.thumb.is-photo .scan::after { content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.55); inset-block-start: 30px; }
.thumb.is-photo .scan::before { content: ""; position: absolute; width: 110px; height: 70px; border-radius: 55px 55px 0 0; background: rgba(255,255,255,.55); inset-block-end: -6px; }
.thumb-meta { padding: var(--s2) var(--s3); font-size: .84rem; display: grid; gap: 2px; }
.thumb-meta label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.thumb-x { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(7,35,68,.65); color: #fff; cursor: pointer; line-height: 1; }
.thumb-flag { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; font-size: .74rem; background: var(--white); color: var(--ink); padding: 1px 8px; border-radius: 999px; }
.side-note { background: var(--mist); border-radius: var(--r-m); padding: var(--s5); font-size: .94rem; }
.side-note h3 { margin-block-end: var(--s2); }
.side-note ul { margin: 0; padding-inline-start: 1.1em; }
.side-note li { margin-block-end: 6px; }

/* ---------- 2. progress (the one bold moment) ---------- */
.forge {
  border-radius: 22px; overflow: hidden; position: relative;
  background: linear-gradient(0deg, var(--night) 0%, var(--ink) 55%, #0B4A8E 100%);
  color: var(--white);
  padding: var(--s7) var(--s7) var(--s6);
}
.forge-name { font-family: var(--f-head); letter-spacing: 2px; color: #CFE6F5; font-size: 1.05rem; }
.forge-name b { font-family: var(--f-hand); font-weight: 400; color: var(--white); font-size: 2rem; letter-spacing: 0; margin-inline-start: var(--s2); }
.ink-wrap { position: relative; margin-block: var(--s6) var(--s5); height: 150px; }
.ink-line {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: max-content;
  font-family: var(--f-hand); font-size: 92px; line-height: 150px; white-space: nowrap;
  color: var(--white);
  direction: rtl; text-align: start;
}
.ink-line.ghost { color: rgba(255,255,255,.08); }
.ink-line.live { clip-path: inset(-1em 0 -1em 100%); }
.ink-line.fade { transition: opacity .8s; opacity: 0; }
.ink-rule { position: absolute; inset-inline: 0; inset-block-end: 26px; border-block-end: 1px solid rgba(52,163,202,.45); }
.pen {
  position: absolute; inset-block-start: 58px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sky); box-shadow: 0 0 0 6px rgba(52,163,202,.18), 0 0 22px 6px rgba(52,163,202,.45);
  transform: translateX(50%);
}
.forge-pct { display: flex; align-items: baseline; gap: var(--s4); justify-content: space-between; flex-wrap: wrap; }
.pct { font-family: var(--f-head); font-size: 4.6rem; line-height: 1; letter-spacing: 2px; }
.pct small { font-size: 2rem; }
.eta { font-size: 1.05rem; color: #CFE6F5; }
.eta b { color: var(--white); font-weight: 600; }
.bar { height: 10px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; margin-block-start: var(--s4); }
.build-time { margin-block-start: var(--s3, 12px); font-size: 1rem; color: #CFE6F5; }   /* v23x: how long a build takes */
.build-time b { color: var(--white); font-weight: 600; }
.read-now[hidden], .read-row[hidden] { display: none; }   /* v23y: display:grid/flex would override hidden */
.read-now { margin-block-start: var(--s4, 16px); display: grid; gap: 10px; }   /* v23y */
.read-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.read-tag { flex: none; font-size: .9rem; color: #CFE6F5; min-width: 5.5em; }
.read-row img { max-width: min(100%, 640px); max-height: 64px; background: #fff; border-radius: 8px; padding: 4px 8px; }
.read-text { color: var(--white); font-size: 1.05rem; }
.bar > i { display: block; height: 100%; width: 0; background: linear-gradient(270deg, var(--sky), #7FD0EC); border-radius: 999px; transition: width .4s linear; margin-inline-start: 0; }
.forge-poppy { position: absolute; inset-inline-end: 44px; inset-block-start: 22px; width: 78px; transform: rotate(10deg); opacity: .9; pointer-events: none; }   /* v21e (Lia: "הפרח צמוד למעלה"): whole flower inside the card, level with the name row */

.steps { list-style: none; margin: var(--s6) 0 0; padding: 0; counter-reset: s; display: grid; gap: 2px; max-width: 640px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr auto 4.5em; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-block-end: 1px solid var(--line); color: var(--muted); }
.steps li::before {
  content: counter(s); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #A9C9DD; font-size: .88rem;
}
.steps li.is-now { color: var(--night); }
.steps li.is-now::before { border-color: var(--sky); background: var(--sky); color: var(--white); }
.steps li.is-done { color: var(--night); }
.steps li.is-done::before { content: "✓"; background: var(--ink); border-color: var(--ink); color: var(--white); }
.steps li small { color: var(--muted); font-size: .85rem; }
.steps li .step-pct { font-weight: 600; font-size: .9rem; color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }   /* v23z */
.steps li.is-now .step-pct { color: var(--sky); }
.steps li.is-done .step-pct { color: var(--ink); }

/* ---------- 3. review ---------- */
.review-top { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; justify-content: space-between; margin-block-end: var(--s4); }
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; }
.filters button { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 4px 14px; cursor: pointer; font-size: .9rem; }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tally { font-size: .95rem; color: var(--muted); }
.tally b { color: var(--night); }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
/* v24a (Lia 08/11 "עכשיו יש מלא שטח מת"): the letters take the whole width; the side column opens only with a letter */
.review-grid:has(.aside-stack > .panel:not([hidden]):is(.detail.is-open, .ask)) { grid-template-columns: minmax(0, 1fr) 380px; }
.review-grid:not(:has(.aside-stack > .panel:not([hidden]):is(.detail.is-open, .ask))) .aside-stack { display: none; }
.review-act [hidden], .filters[hidden] { display: none; }
.review-wait { grid-column: 1 / -1; font-size: 1.05rem; }
.review-act { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: var(--s3); }
.tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; display: grid; }
.tile.is-ok { border-color: #8CC4A0; }
.tile.is-bad { border-color: var(--poppy); box-shadow: 0 0 0 1px var(--poppy); }
.tile-pair { display: grid; grid-template-columns: 1fr 1fr; height: 84px; cursor: pointer; border: 0; padding: 0; background: none; }
.tile-pair .scan, .tile-pair .glyph { font-size: 48px; height: 84px; }
.tile-pair .glyph { border-inline-start: 1px solid var(--line); }
.tile-foot { display: flex; align-items: center; justify-content: space-between; padding-block: 4px; padding-inline: 10px 6px; border-block-start: 1px solid var(--line); }
.tile-name { font-size: .95rem; }
.tile-name small { color: var(--muted); font-size: .76rem; margin-inline-start: 4px; }
.yn { display: flex; gap: 4px; }
.yn button { width: 30px; height: 28px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: .95rem; line-height: 1; }
.yn button[aria-pressed="true"].y { background: #2F7A4A; border-color: #2F7A4A; color: #fff; }
.yn button[aria-pressed="true"].n { background: var(--poppy); border-color: var(--poppy); color: #fff; }

.aside-stack { display: grid; gap: var(--s4); position: sticky; top: var(--s5); max-height: calc(100vh - 2 * var(--s5)); overflow-y: auto; overscroll-behavior: contain; }  /* v24n: a long panel scrolls on its own (Lia 08/11) */
.ask { border-inline-start: 4px solid var(--poppy); }
.ask-item { display: grid; grid-template-columns: 88px 1fr; gap: var(--s3); align-items: center; padding-block: var(--s3); border-block-end: 1px dashed var(--line); }
.ask-item:last-child { border-block-end: 0; }
.ask-item .scan { height: 88px; font-size: 54px; border-radius: var(--r-s); }
.ask-item label { font-size: .92rem; display: block; margin-block-end: 4px; }
.ask-item .input { font-size: 1.1rem; text-align: center; max-width: 90px; }
.ask-item.is-answered .scan { outline: 2px solid #8CC4A0; }
.ask-src { font-size: .78rem; color: var(--muted); }

.detail { display: none; }
.detail.is-open { display: block; }
.detail-head { display: flex; align-items: baseline; justify-content: space-between; margin-block-end: var(--s3); }
.detail-letter { font-family: var(--f-hand); font-size: 3rem; line-height: 1; color: var(--ink); }
.alts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-block: var(--s2) var(--s4); }
.alt { border: 1px solid var(--line); border-radius: var(--r-s); padding: 0; cursor: pointer; overflow: hidden; background: none; }
.alt .scan { height: 64px; font-size: 40px; }
.alt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.alt small { display: block; font-size: .7rem; color: var(--muted); padding: 2px 0; }
.cut-box { position: relative; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line); }
.cut-box canvas { display: block; width: 100%; height: 150px; touch-action: none; cursor: crosshair; }
.cut-hint { font-size: .84rem; color: var(--muted); margin-block: var(--s2); }
.write-me .textarea { min-height: 84px; }
.sent { display: grid; gap: 6px; margin-block-start: var(--s3); font-size: .9rem; }
.sent div { background: var(--mist); border-radius: var(--r-s); padding: 6px 10px; }

/* ---------- 4. result ---------- */
.result-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); align-items: stretch; }
/* v20s (Lia: "הבלוקים כאן לא באותו הגובה"): side-by-side panels share one top line and one height */
.result-hero > .panel { margin: 0; display: flex; flex-direction: column; }
.result-hero > .tester .textarea { flex: 1; }
.tester .textarea {
  font-family: var(--f-hand); color: var(--ink);
  background: var(--white); border: 0; border-block-end: 1px solid var(--line); border-radius: 0;
  min-height: 170px; line-height: var(--try-lh, 1.35); padding-inline: 0;   /* v20w: the font's own line height */
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--try-lh, 1.35) * 1em - 1px), rgba(52,163,202,.25) calc(var(--try-lh, 1.35) * 1em - 1px) calc(var(--try-lh, 1.35) * 1em));
  background-attachment: local;
}
.tester .textarea:focus { box-shadow: none; }
.size-row { display: flex; gap: var(--s3); align-items: center; font-size: .9rem; color: var(--muted); margin-block-start: var(--s3); }
.size-row input { flex: 1; accent-color: var(--ink); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.compare figure { margin: 0; }
.compare figcaption { font-size: .86rem; color: var(--muted); margin-block-start: var(--s2); }
.compare .scan, .compare .glyph { min-height: 190px; padding: var(--s4); font-size: 34px; line-height: 1.5; place-items: start; border-radius: var(--r-s); border: 1px solid var(--line); text-align: start; }
.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.downloads a { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; padding: 10px var(--s3); border: 1px solid var(--line); border-radius: var(--r-s); text-decoration: none; color: var(--night); }
.downloads a:hover { border-color: var(--sky); background: var(--paper); }
.downloads b { font-weight: 600; }
.downloads small { color: var(--muted); font-size: .82rem; display: block; }
.downloads .size { font-size: .84rem; color: var(--muted); }
.downloads a > :last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.missing { width: 100%; border-collapse: collapse; font-size: .94rem; }
.missing th, .missing td { text-align: start; padding: 8px 6px; border-block-end: 1px solid var(--line); vertical-align: top; }
.missing th { font-weight: 600; color: var(--night-2); font-size: .86rem; }
.missing .ch { font-family: var(--f-hand); font-size: 1.6rem; color: var(--ink); width: 54px; }
.missing .ch.nofont { font-family: var(--f-body); font-size: 1.2rem; }
.letter-msg { white-space: pre-line; background: var(--paper); border-radius: var(--r-s); padding: var(--s4); border: 1px solid var(--line); font-size: .98rem; max-width: none; }
.result-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); margin-block-start: var(--s5); align-items: stretch; }

/* memorial card */
.card-wrap { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.mcard {
  aspect-ratio: 1 / 1; width: 100%; position: relative; overflow: hidden; border-radius: 4px;
  background: linear-gradient(170deg, #B7C8D8 0%, #8FA6BC 55%, #6E879F 100%);
  box-shadow: 0 18px 40px -18px rgba(7,35,68,.5);
}
.mcard-portrait { position: absolute; inset: 0; }
.mcard-portrait::before { content: ""; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.38); inset-inline-start: 33%; inset-block-start: 14%; }
.mcard-portrait::after { content: ""; position: absolute; width: 64%; height: 46%; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.38); inset-inline-start: 18%; inset-block-start: 50%; }
.mcard-fade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 0%, rgba(0,56,120,.92) 32%, rgba(0,56,120,0) 62%); }
.mcard-name { position: absolute; inset-inline: 0; inset-block-start: 60%; text-align: center; font-family: var(--f-hand); color: var(--white); font-size: clamp(2rem, 9vw, 3.6rem); line-height: 1; }
.mcard-years { position: absolute; inset-inline: 0; inset-block-start: 75%; text-align: center; color: #CFE6F5; font-size: .9rem; letter-spacing: 2px; font-family: var(--f-head); }
.mcard-logo { position: absolute; inset-block-end: 4.5%; inset-inline-end: 5%; text-align: start; color: var(--white); }
.mcard-logo .logo-mark { font-size: 1.6rem; }
.mcard-logo .logo-tag { font-size: .5rem; letter-spacing: 1.6px; margin-block-start: 2px; }
.mcard-poppy { position: absolute; inset-block-end: 3%; inset-inline-start: 6%; width: 13%; transform: rotate(-8deg); }

/* ---------- 5. library ---------- */
.lib-top { display: flex; justify-content: space-between; align-items: end; gap: var(--s4); flex-wrap: wrap; margin-block-end: var(--s5); }
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s4); }
.fcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; display: grid; grid-template-rows: 132px auto; text-decoration: none; color: inherit; }
.fcard:hover { border-color: var(--sky); }
.fcard-face { background: var(--ink); color: var(--white); display: grid; place-items: center; position: relative; overflow: hidden; padding: var(--s3); }
.fcard-face span { font-family: var(--f-head); font-size: 1.5rem; letter-spacing: 1.6px; text-align: center; line-height: 1.2; }
.fcard-face.has-font span { font-family: var(--f-hand); font-size: 2.6rem; letter-spacing: 0; }
.fcard-face.is-draft { background: repeating-linear-gradient(180deg, var(--paper) 0 21px, rgba(52,163,202,.2) 21px 22px); color: var(--muted); }
.fcard-body { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: 4px; }
.fcard-body h3 { font-size: 1.05rem; }
.fcard-body .en { font-size: .84rem; color: var(--muted); }
.fcard-row { display: flex; justify-content: space-between; align-items: center; margin-block-start: var(--s2); font-size: .84rem; color: var(--muted); }
.fcard.is-new { border-style: dashed; border-width: 2px; border-color: #9CCBE0; display: grid; place-items: center; grid-template-rows: none; min-height: 250px; text-align: center; color: var(--ink); }
.fcard.is-new b { font-family: var(--f-head); letter-spacing: 1.2px; font-weight: 400; font-size: 1.15rem; display: block; }

/* ---------- responsive / motion ---------- */
@media (max-width: 1060px) {
  .review-grid, .upload-grid, .result-hero, .result-two, .card-wrap { grid-template-columns: 1fr; }
  .aside-stack { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; padding: var(--s4); }
  .logo { margin-block-end: var(--s3); }
  .logo-mark { font-size: 2.2rem; }
  .nav { grid-auto-flow: column; overflow-x: auto; }
  .nav-sep, .rail-texture, .rail-poppy, .rail-foot { display: none; }
  .screen { padding: var(--s5) var(--s4) var(--s7); }
  .row, .compare { grid-template-columns: 1fr; }
  .forge { padding: var(--s5); }
  .ink-line { font-size: 60px; }
  .pct { font-size: 3.2rem; }
  h1 { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* v12 live mode: the eye-check tile (scan | glyph) fills the pair */
.tile.has-img .tile-pair { display: block; height: 84px; background: var(--white); }
.tile.has-img .tile-pair img { width: 100%; height: 84px; object-fit: contain; display: block; }
.glyph.nofont { color: var(--muted); font-family: var(--f-body); }
/* v25z (Lia 08/11 "מה שחסר לא להציג פונט כתב יד אחר, תציג את גופן הדפוס של אות חיים"): a missing letter and its
   note are set in the Ot.Hayim print font, never another person's handwriting */
.glyph.nofont + .scan, .glyph.nofont + .scan small { font-family: var(--f-body); }
.cmp-img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--white); }

/* v15: alternates drawer, ligatures, card photo */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.photo-btn { display: inline-flex; margin-block: var(--s2) var(--s3); cursor: pointer; }
.photo-btn:has(+ #mPhoto:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.mcard-portrait.has-photo { background-size: cover; background-position: center top; }
.mcard-portrait.has-photo::before, .mcard-portrait.has-photo::after { display: none; }
.alts:has(.alt-live) { grid-template-columns: 1fr; }
.alt-live { margin: 0; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--white); }
.alt-live img { width: 100%; height: auto; max-height: 220px; object-fit: contain; display: block; cursor: zoom-in; }  /* v24p: small in the list */
.zoom { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .55); display: grid; place-items: center; cursor: zoom-out; }
.zoom img { max-width: min(92vw, 1100px); max-height: 90vh; background: var(--white); border-radius: var(--r-s); }
.alt-live figcaption { font-size: .78rem; color: var(--muted); padding: 4px 8px; border-top: 1px solid var(--line); }
.ligs-title { grid-column: 1 / -1; margin: var(--s4) 0 0; font-size: 1rem; }
.lig-tile .tile-pair { display: flex; align-items: center; justify-content: center; height: 84px; cursor: default; }
.lig-glyph { font-family: "OHCurrent", "OHLiorRaviv", sans-serif; font-size: 56px; line-height: 1; font-feature-settings: "liga" 1; direction: rtl; }

/* v17: version picker (like/dislike -> pick a drawing) */
.versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.version { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r-s); cursor: pointer; font: inherit; color: inherit; }
.version img { max-width: 100%; height: 110px; object-fit: contain; }
.version[aria-pressed="true"] { border-color: var(--ink, #14306b); box-shadow: 0 0 0 2px rgba(20, 48, 107, .15); }
.version:focus-visible { outline: 3px solid var(--ink, #14306b); outline-offset: 2px; }
.version span { font-size: .85rem; }

/* v18: the real logo (ot-hayim.co.il, version for dark backgrounds) */
.logo-img { display: block; width: 100%; max-width: 230px; height: auto; }
.mcard-logo .logo-img { max-width: 92px; }

/* v19b: Glyphs edit button, top of the letter panel */
.glyphs-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-block: 4px 12px; }
.glyphs-edit .cut-hint { margin: 0; flex: 1 1 200px; }
.alt-live figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.alt-edit { padding: 4px 10px; font-size: .82rem; }
.learn-list { margin: 0; padding-inline-start: 1.1em; font-size: .9rem; line-height: 1.6; }
.learn-list li + li { margin-block-start: 6px; }

/* v20d: editor picker + drop-back for a program that is not on this computer */
.edit-app { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.edit-app select { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line, #cfdbe6); background: #fff; }
.edit-drop { flex: 1 1 100%; display: block; padding: 12px 14px; border: 2px dashed var(--line, #cfdbe6); border-radius: 12px; font-size: .9rem; cursor: pointer; }
.edit-drop input { display: block; margin-block-start: 8px; }
.liga-read { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-block: 12px 0; font-size: .9rem; }
.liga-read label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; }
.liga-read input { font: inherit; font-size: 1.1rem; padding: 6px 10px; border: 1px solid var(--line, #cfdbe6); border-radius: 8px; }
/* v20m: lesson = what the scan shows + the steps from the system result to the team's */
.learn-scan { color: #6b6b6b; font-size: .92em; }
.learn-steps { margin: .3em 1.4em 0 0; font-size: .92em; }
/* v20t: upload a scanned page next to each missing character */
.missing .add-page { text-align: end; white-space: nowrap; width: 1%; }
.btn-addpage { font-size: .84rem; padding: 4px 12px; }

/* v26e: previous-version notice on the result page while a build runs */
.stale-note { margin-top: var(--s2); padding: var(--s2) var(--s3); border: 1px solid #E3C77A; border-radius: 10px; background: #FFF8E1; color: var(--night); font-size: .95rem; }

/* v26t: during a build - approved letters white in her hand, the rest faded print */
.ink-line .pending { font-family: var(--f-body); opacity: .22; }
.ink-line .ready { color: var(--white); }
.ink-line.ghost .ready { color: inherit; }

/* v26x (Lia 09/11 "מסודר יותר באקורדיון"): folded panels - the rejected forms, by letter */
.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3); }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary h2 { margin: 0; }
.acc[open] > summary { margin-block-end: var(--s3); }
.acc-arrow { margin-inline-start: auto; width: 10px; height: 10px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
details[open] > summary .acc-arrow { transform: rotate(-135deg); }
.acc-letter { border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s2) var(--s3) var(--s3); margin-block-start: var(--s2); background: var(--white); }
.rej-head { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-size: 1rem; }
/* v26x (Lia 09/11 "עברית אקורדיון, לטינית אקורדיון... רק קטגוריות"): the letter categories fold, the tiles inside do not */
.acc-cat { grid-column: 1 / -1; }
.acc-cat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2); padding-block: var(--s1); }
.acc-cat > summary::-webkit-details-marker { display: none; }
.acc-cat .ligs-title { margin: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: var(--s3); margin-block-start: var(--s3); }
.acc-ch { font-size: 1.35rem; min-width: 1.6em; text-align: center; }
.rej-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.rej-fig { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: var(--s2); background: var(--white); }
.rej-fig img { width: 100%; height: auto; display: block; max-height: 180px; object-fit: contain; }
.rej-fig figcaption { display: grid; gap: var(--s2); margin-block-start: var(--s2); }
.rej-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.rej-act .liga-read { display: grid; gap: var(--s1); width: 100%; }
/* v26x (Lia 09/11 "הפאנלים לא יכולים להיות כל כך צמודים, צריך מרווח ביניהם") */
#screen-review > .acc { margin-block-start: var(--s6); }
/* v27d (Lia 09/11 "הל עולה על הכיתוב, הוא נמוך מדי"): the note sits under the rule, never under the ascenders */
.ink-note { margin: calc(-1 * var(--s3)) 0 var(--s5); font-size: .85rem; color: rgba(255,255,255,.55); text-wrap: balance; }   /* v27f: no orphan word */

/* v28 accounts: who is signed in, login and users screens */
.rail-user { position: relative; z-index: 1; margin-block-start: var(--s4); padding: var(--s2) var(--s3); border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 2px; color: var(--white); }
.rail-user-role { color: #8FB4D2; font-size: .8rem; }
.rail-logout { justify-self: start; color: #8FB4D2; padding-inline: 0; }
.login-panel { max-width: 420px; }
.login-err { color: var(--poppy); }
.users-grid { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .users-grid { grid-template-columns: 1fr; } }
.users-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.users-table th, .users-table td { text-align: start; padding: var(--s2) var(--s2); border-bottom: 1px solid var(--line); }
.users-table th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.google-btn { background: var(--white); color: var(--night); border: 1px solid var(--line); }
.google-btn:hover { background: #F3F7FA; }
.users-table tr.is-pending td { background: #FFF8E1; }