/* The only hand-written stylesheet. app.css (generated from the design files) holds every design rule unchanged.
   The design frames are fixed 390x844 mock-ups. In the real app:
   - on a phone the frame is as wide as the screen;
   - on a tablet or a computer the frame fills the whole window: it is scaled up a little (CSS zoom, factor --k, set by core.js
     fitToScreen together with --colw and --vh) and, on a wide window, the content is laid out in two or three columns (bottom of
     this file);
   - lists can scroll, and the bottom bar stays at the bottom of the window. Nothing else is overridden here. */
html, body { margin: 0; background: #07070F; }
body { background: radial-gradient(900px 640px at 18% 8%, rgba(124,92,255,.16), transparent 60%), radial-gradient(800px 640px at 86% 92%, rgba(54,226,196,.08), transparent 60%), #07070F; background-attachment: fixed; }
body { -webkit-font-smoothing: antialiased; }
#root { display: flex; justify-content: center; min-height: 100vh; min-height: 100dvh; }
/* flow screens grow with their content (--vh is the window height in the frame's own, unzoomed pixels) */
#root .app { zoom: var(--k, 1); width: var(--colw, 100vw); height: auto; min-height: var(--vh, 100dvh); }
/* screens that are one full-bleed picture */
#root .app.s-live, #root .app.s-scan { height: var(--vh, 100dvh); min-height: 640px; }

/* bottom bar: fixed to the window, centred in the column */
#root .nav { position: fixed; left: 50%; right: auto; width: min(var(--navw, 362px), calc(var(--colw, 100vw) - 28px)); transform: translateX(-50%); }#root .app .page { padding-bottom: 40px !important; }
#root .app .page.has-nav { padding-bottom: 116px !important; }

/* a button that looks like the design's link elements */
#root button.as-link { all: unset; cursor: pointer; }
#root .cta, #root .btn, #root .go, #root .chip, #root .recent, #root .tile, #root .mode, #root .micbtn, #root .found { cursor: pointer; }
#root input.field:focus-visible { outline: 0; }
#root a:focus-visible, #root button:focus-visible, #root [tabindex]:focus-visible { outline: 2px solid #A890FF; outline-offset: 2px; }

/* feedback the design has no place for: a short message above the bottom bar, and an "on" state for the mic button */
#toast { position: fixed; left: 50%; bottom: 104px; transform: translate(-50%, 12px); max-width: min(340px, 92vw); padding: 10px 16px; border-radius: 16px;
  background: rgba(24,22,44,.92); border: 1px solid rgba(255,255,255,.12); color: #F3F1FB; font: 500 13px/1.4 'Rubik', system-ui, sans-serif;
  text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 50;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#root .micbtn.on { background: rgba(54,226,196,.28); box-shadow: 0 0 0 4px rgba(54,226,196,.18); }

/* the session pills must scroll sideways when there are many sessions (the design frame is a fixed picture) */
#root .s-words .pills { overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; margin-inline-end: -20px; padding-inline-end: 20px; }
#root .s-words .pills::-webkit-scrollbar { display: none; }

/* Scan: the camera picture (or the picture that was read) fills the frame behind everything, like the design's book page did */
#root .s-scan .cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
#root .s-scan .cam[hidden] { display: none; }
#root .s-scan .hls { position: absolute; inset: 0; pointer-events: none; }


/* Scan: every word of a scanned page is a box to tap; chosen words are filled. Added, not in the design. */
#root .s-scan .hls { pointer-events: none; }
#root .s-scan .pg { position: absolute; inset: 0; }
#root .s-scan .pg .hls { position: absolute; inset: 0; }
#root .s-scan .frame { pointer-events: none; }   /* the corner marks lie over the picture and must not catch the taps meant for the words */
#root .s-scan .wd { position: absolute; margin: 0; padding: 0; border-radius: 6px; pointer-events: auto; cursor: pointer; box-sizing: border-box; transition: background .15s, box-shadow .15s; }
#root .s-scan .wd.hint { box-shadow: inset 0 0 0 2px #36E2C4; }   /* an empty outline: it says "tap here", it does not choose */
#root .s-scan .wd.sel { background: rgba(124,92,255,.34); box-shadow: inset 0 0 0 2px #7C5CFF, 0 0 0 1.5px rgba(255,255,255,.85); }   /* the purple ring shows on white paper, the white edge on a dark photo */
#root .s-scan .mk { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; color: #7FF0DA;
  background: rgba(54,226,196,.14); font: 600 13px 'Rubik', system-ui, sans-serif; }
#root .s-scan .mk:hover { background: rgba(54,226,196,.22); }
#root .s-scan .go { height: 54px; border: 0; border-radius: 18px; color: #fff; font: 600 15px 'Rubik', system-ui, sans-serif; cursor: pointer;
  background: linear-gradient(135deg, #8C70FF, #6446F2); box-shadow: 0 10px 30px -8px rgba(124,92,255,.8), inset 0 1px 0 rgba(255,255,255,.25); }
#root .s-scan .go[disabled] { opacity: .4; cursor: default; box-shadow: none; }

/* Sign-in takes the look of the Main screen but is one column, also in a wide window */
#root .app.s-main .page.login { display: flex !important; flex-direction: column; }
#root .app.s-main .page.login > :nth-child(2), #root .app.s-main .page.login > :nth-child(3) { align-self: stretch; grid-column: auto; grid-row: auto; }

/* Sign-in fields: when the browser fills them in (or the person pastes), it paints the field white or blue. Keep the card's own dark look. */
#root .s-main .field:-webkit-autofill, #root .s-main .field:-webkit-autofill:hover, #root .s-main .field:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #15132a inset; box-shadow: 0 0 0 1000px #15132a inset;
  -webkit-text-fill-color: #F3F1FB; caret-color: #F3F1FB; border-radius: 12px; transition: background-color 9999s ease-out 0s; }
#root .s-main .field:autofill { box-shadow: 0 0 0 1000px #15132a inset; -webkit-text-fill-color: #F3F1FB; caret-color: #F3F1FB; }
#root .s-main .eye { flex: none; width: 44px; height: 44px; margin-inline-end: -12px; border: 0; border-radius: 14px; background: transparent; color: #8E8AAB;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
#root .s-main .eye:hover, #root .s-main .eye[aria-pressed="true"] { color: #F3F1FB; background: rgba(255,255,255,.06); }

/* ===== wide windows (computers, big tablets): the same design, laid out in columns across the whole window ===== */
#root .app .page { max-width: 1180px; margin-inline: auto; width: 100%; box-sizing: border-box; }
#root .app .topbar { max-width: 1180px; margin-inline: auto; }
@media (min-width: 960px) {
  html { --navw: 560px; }
  #root .app .page { padding-inline: 32px !important; }

  /* Look up: heading and search on the left, the two big tiles on the right */
  #root .s-main .page, #root .app.s-main .page { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 22px; align-content: start; }
  #root .app.s-main .page > header { grid-column: 1 / -1; }
  #root .app.s-main .page > :nth-child(2) { grid-column: 1; grid-row: 2; align-self: end; }
  #root .app.s-main .page > :nth-child(3) { grid-column: 1; grid-row: 3; }
  #root .app.s-main .page > :nth-child(4) { grid-column: 2; grid-row: 2 / 4; grid-template-columns: minmax(0, 1fr) !important; align-content: stretch; }
  #root .app.s-main .page > :nth-child(4) .tile { height: auto; min-height: 170px; }
  #root .app.s-main .page > :nth-child(5) { grid-column: 1 / -1; }

  /* Word result: the word and its Hebrew on the left, the explanation on the right */
  #root .app.s-result .rcols { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }

  /* Your words: the list in two columns */
  #root .app.s-words .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  #root .app.s-words .rows .row:nth-child(2) { border-top: 0; }
  #root .app.s-words .rows .row:nth-child(odd) { border-inline-end: 1px solid rgba(255,255,255,.06); }

  /* Practice: three game cards side by side */
  #root .app.s-practice .page { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; row-gap: 18px; align-content: start; }
  #root .app.s-practice .page > header { grid-column: 1 / -1; }
  #root .app.s-practice .page > :nth-child(2) { grid-column: 1 / -1; }
  #root .app.s-practice .page > :nth-child(3) { display: contents !important; }
  #root .app.s-practice .page > :nth-child(3) > .mode { height: 220px !important; }
  #root .app.s-practice .page > .mode.glass { height: 220px !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 4px; padding: 18px !important; border-radius: 28px !important; position: relative; }
  #root .app.s-practice .page > .mode.glass > svg { position: absolute; top: 18px; inset-inline-end: 18px; }

  /* the games: a centred column that is wide enough for the cards */
  #root .app.s-cards .page, #root .app.s-quiz .page { max-width: 760px; }
  #root .app.s-memory .page { max-width: 980px; }
  #root .app.s-memory .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #root .app.s-memory .tile { height: 150px; }
  #root .app.s-cards .card3d { height: 460px; }

  /* the full-screen pictures: their floating cards and bars stay a comfortable width */
  #root .app.s-live .peek, #root .app.s-live .stop { max-width: 560px; margin-inline: auto; }
  #root .app.s-scan .frame { max-width: 760px; margin-inline: auto; }
  #root .app.s-scan .sheet { max-width: 640px; margin-inline: auto; }
  #root .app.s-quiz .fb { max-width: 720px; margin-inline: auto; }
}