/* פסוק לשם — mobile-first RTL stylesheet.
   No framework: a small set of custom properties, a single column that widens
   into a comfortable reading measure on desktop, and a light/dark palette that
   follows the device. */

:root {
  color-scheme: light dark;

  --bg: #f6f4ef;
  --surface: #fffdf8;
  --surface-2: #f1ede3;
  --text: #211f1a;
  --text-soft: #5e5a51;
  --text-faint: #8a857a;
  --line: #e2ddd0;

  --accent: #1f6f5c;
  --accent-soft: #e4f0ea;
  --accent-text: #14503f;

  --first: #b45309;      /* opening letter  */
  --first-bg: #fdecd3;
  --last: #7c3aed;       /* closing letter  */
  --last-bg: #ece3fd;
  --name: #0e7490;       /* the name itself */
  --name-bg: #d8f0f6;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(33, 31, 26, .06), 0 4px 16px rgba(33, 31, 26, .05);

  --font: "Heebo", system-ui, -apple-system, "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
  --font-verse: "Frank Ruhl Libre", "Times New Roman", var(--font);
  /* For text carrying both niqqud and ta'amei hamikra (cantillation) on the
     same letter -- Frank Ruhl Libre doesn't stack the two mark types
     correctly (it's a general revival, not the cantillation-capable
     "Taamey Frank" it's named after), so those letters render wrong. Skips
     straight to the system's own Hebrew font, which already handles this. */
  --font-verse-vocalized: "Times New Roman", var(--font);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12100d;
    --surface: #1c1a16;
    --surface-2: #262320;
    --text: #ede9e0;
    --text-soft: #b1aa9d;
    --text-faint: #857e72;
    --line: #322e28;

    --accent: #4db79a;
    --accent-soft: #17332c;
    --accent-text: #7fd4bb;

    --first: #f0b055; --first-bg: #40300f;
    --last:  #b794f6; --last-bg:  #2e2450;
    --name:  #56c4dc; --name-bg:  #123943;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

.wrap {
  width: 100%;
  max-width: 44rem;      /* a readable measure; phones just fill it */
  margin-inline: auto;
  /* Physical left/right rather than logical inline: there is no
     env(safe-area-inset-inline), and an unknown env() with no fallback
     invalidates the whole declaration. */
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* --- Header --- */

.header {
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-text) 100%);
  color: #fff;
  padding: calc(1rem + env(safe-area-inset-top)) 0 1.5rem;
  text-align: center;
}
.header-wrap { display: flex; flex-direction: column; align-items: center; }
.title {
  font-family: var(--font-verse);
  font-size: clamp(1.9rem, 7vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 .25rem;
  letter-spacing: -.01em;
}
.subtitle { margin: 0; opacity: .88; font-size: .95rem; }

/* --- Header icon + settings button ---
   icon+title+gear, matching KanDOne's header (AppBrandMark + title + a
   Settings entry point). The settings button is absolutely positioned so
   the icon+title pair still centers as a group. */

.header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  position: relative;
  width: 100%;
}
.app-icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255, 255, 255, .18);
}
.settings-btn {
  position: absolute;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.settings-btn:hover { background: rgba(255, 255, 255, .24); }
.settings-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* --- Language switch --- */

.lang-switch {
  display: flex;
  gap: .3rem;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: .25rem;
}
.lang-btn {
  font: 500 .8rem var(--font);
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: .35rem .75rem;
  min-height: 32px;
  opacity: .75;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.lang-btn:hover { opacity: 1; }
.lang-btn.active {
  background: #fff;
  color: var(--accent-text);
  opacity: 1;
  font-weight: 700;
}

/* --- Settings dialog ---
   Native <dialog>: focus trapping, Escape-to-close, and the ::backdrop all
   come for free. method="dialog" on the form means the close (✕) button
   needs no JS handler at all. Holds the language switcher moved out of the
   header banner above. */

.settings-dialog {
  width: min(92vw, 26rem);
  max-height: min(88vh, 34rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
  color: var(--text);
}
.settings-dialog::backdrop { background: rgba(20, 16, 8, .5); }
.settings-form { padding: 1.25rem; overflow-y: auto; }
.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
}
.settings-head h2 { margin: 0; font-family: var(--font-verse); font-size: 1.2rem; }
.dialog-close {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  font-size: .9rem;
  color: var(--text-soft);
  cursor: pointer;
}
.settings-section + .settings-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.settings-section-title {
  margin: 0 0 .6rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-soft);
}
/* Inside the dialog the lang switch sits on a light surface, not the
   header's colored background, so it needs its own readable palette rather
   than the white-on-color one above. */
.settings-dialog .lang-switch { background: var(--surface-2); }
.settings-dialog .lang-btn { color: var(--text-soft); }
.settings-dialog .lang-btn:hover { opacity: 1; color: var(--text); }
.settings-dialog .lang-btn.active { background: var(--accent); color: #fff; }

/* --- Search --- */

.search {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-top: -1.25rem;   /* lift the card over the header edge */
  position: relative;
  z-index: 1;
}
.label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: .5rem;
}
.field { display: flex; gap: .5rem; }
.input {
  flex: 1;
  min-width: 0;
  /* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
  font: 500 1.05rem var(--font);
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .75rem .85rem;
  min-height: 48px;       /* comfortable touch target */
  text-align: right;
}
.input::placeholder {
  color: var(--text-faint);
  font-weight: 400;
  /* The placeholder example got longer than the input is wide; shrinking
     just the placeholder (not .input's own font-size, which stays >=16px
     to stop iOS Safari zooming in on focus) keeps it from looking oversized
     or clipped without affecting what's typed. */
  font-size: .72rem;
}
.input:focus-visible,
.submit:focus-visible,
.clear:focus-visible,
.chip:focus-visible,
.copy:focus-visible,
.more:focus-visible,
.settings-btn:focus-visible,
.dialog-close:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
}
/* Clear: resets the search and drops the query from the URL. A quiet
   companion to Search rather than a second primary action -- same height so
   the row stays level, but outlined and square, and only shown when there is
   something to clear (see syncClearButton in app.js). */
.clear {
  flex: 0 0 auto;
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 1.05rem var(--font);
  color: var(--text-soft);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.clear:hover {
  color: var(--text);
  border-color: var(--text-soft);
}

.submit {
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: 1.35rem;
  font: 700 1rem var(--font);
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .08s ease, opacity .15s ease;
}
.submit:active { transform: scale(.97); }
.submit[disabled] { opacity: .6; cursor: progress; }

.hint { margin: .6rem 0 0; font-size: .95rem; color: var(--text-soft); }

/* Native <details>: closed by default, no JS needed, keyboard- and
   screen-reader-friendly for free. Used both for "how does this work?" and
   for a per-result-group worked example. */
.how-it-works {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--text-soft);
}
.how-it-works summary {
  cursor: pointer;
  color: var(--accent-text);
  font-weight: 500;
  padding: .3rem 0;
}
.how-it-works p { margin: .4rem 0 0; }
.how-it-works p + p { margin-top: .3rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.chip {
  font: 500 .85rem var(--font);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .45rem .8rem;
  min-height: 36px;
  cursor: pointer;
}
.chip:active { transform: scale(.97); }

/* --- Cold-start notice ---
   Free hosts (Render's free plan, among others) sleep the server when idle
   and take up to a minute to wake on the next request. Without this, that
   wait just looks like the app is broken. Shown only if a request is still
   pending after a couple of seconds, so it never appears on a normal, warm
   response. */

.waking {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 500;
  padding: .65rem .9rem;
  margin-top: 1rem;
}
.waking-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* --- Result groups --- */

.results { margin-top: 1.5rem; }

.group { margin-bottom: 2rem; }
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}
.group-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
.group-count {
  font-size: .8rem;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.group-desc { margin: 0 0 .85rem; font-size: .85rem; color: var(--text-soft); }

.example { margin: -.4rem 0 .85rem; font-size: .85rem; }
.example summary {
  cursor: pointer;
  color: var(--accent-text);
  font-weight: 500;
  display: inline-block;
}
.example-text {
  margin: .5rem 0 0;
  padding: .6rem .75rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
}

.name-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 2.25rem 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--line);
}
.name-head:first-child { margin-top: 0; }
.name-head h2 {
  font-family: var(--font-verse);
  font-size: 1.4rem;
  margin: 0;
}
.name-letters {
  font-size: .8rem;
  color: var(--text-soft);
  background: var(--surface-2);
  border-radius: 999px;
  padding: .2rem .65rem;
}

/* --- Verse card --- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem 1rem 1rem;
  margin-bottom: .75rem;
}
.card-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.badge {
  font-size: .78rem;
  font-weight: 500;
  border-radius: 999px;
  padding: .18rem .6rem;
  background: var(--surface-2);
  color: var(--text-soft);
  white-space: nowrap;
}
.badge-book { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.badge-note { background: var(--first-bg); color: var(--first); }

.verse {
  font-family: var(--font-verse-vocalized);
  font-size: 1.25rem;
  line-height: 2;
  margin: 0;
  /* Cantillation sits high above the line; a little extra room stops it
     colliding with the line above. */
  padding-block: .1rem;
}

mark { background: none; color: inherit; border-radius: 4px; padding: 0 .1em; }
mark.first { background: var(--first-bg); color: var(--first); font-weight: 700; }
mark.last  { background: var(--last-bg);  color: var(--last);  font-weight: 700; }
mark.name  { background: var(--name-bg);  color: var(--name);  font-weight: 700; }

/* Rashi's commentary: a closed-by-default <details> disclosure, same pattern
   as .example above -- hidden until the reader chooses to open it. */
.rashi { margin-top: .6rem; font-size: .9rem; }
.rashi summary {
  cursor: pointer;
  color: var(--accent-text);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}
.rashi-text {
  margin: .5rem 0 0;
  padding: .7rem .85rem;
  background: var(--surface-2);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-verse-vocalized);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
}
.rashi-text b { color: var(--accent-text); }
.rashi-text small { font-size: .8em; color: var(--text-soft); }

.card-foot {
  display: flex;
  justify-content: flex-start;
  margin-top: .6rem;
}
.copy {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 500 .85rem var(--font);
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .4rem .75rem;
  min-height: 38px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.copy:active { transform: scale(.97); }
.copy.done { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* --- Pairs --- */

.pair {
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  padding: .55rem;
  margin-bottom: 1rem;
}
.pair .card { margin-bottom: .45rem; }
.pair .card:last-of-type { margin-bottom: 0; }
.pair-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .35rem .5rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--accent-text);
}
.pair-link::before,
.pair-link::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .3;
}
.pair-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--surface);
  border-radius: 999px;
  padding: .15rem .55rem;
}

/* --- States --- */

.more {
  display: block;
  width: 100%;
  min-height: 44px;
  font: 500 .9rem var(--font);
  color: var(--accent-text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.empty, .error {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  color: var(--text-soft);
}
.empty strong, .error strong { color: var(--text); display: block; margin-bottom: .4rem; }
.error { border-color: var(--first); }

/* Skeletons: three placeholder cards while the search runs. */
.skeleton .line {
  height: 1rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  margin-bottom: .6rem;
}
.skeleton .line:nth-child(1) { width: 35%; }
.skeleton .line:nth-child(3) { width: 80%; }
.skeleton .line:last-child { margin-bottom: 0; }
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* --- Toast --- */

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  margin-inline: auto;
  width: max-content;
  max-width: 90vw;
  background: var(--text);
  color: var(--bg);
  font-size: .9rem;
  font-weight: 500;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(.75rem);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* --- Footer --- */

.footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--text-faint);
  text-align: center;
}
.footer a { color: var(--accent-text); }
#footer-attribution { margin-bottom: .2rem; }
.footer-about {
  margin: .6rem auto 0;
  max-width: 34rem;
  text-align: start;
}
.footer-about summary { text-align: center; }
.footer-about p { line-height: 1.5; }
.footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .9rem;
  margin-bottom: 0;
  font-size: .75rem;
  color: var(--text-faint);
}
.footer-credit a { display: inline-flex; color: var(--text-faint); }
.footer-credit a:hover { color: var(--accent-text); }
.footer-links {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  margin-inline-start: .25rem;
}
.footer-links a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  text-decoration: none;
  padding: .4rem .5rem;
  border-radius: .5rem;
  transition: background-color .15s ease, transform .1s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(128, 128, 128, .35);
}
.footer-link-label {
  font-size: .62rem;
  line-height: 1;
  color: var(--text-faint);
}
.footer-links a:hover { background-color: var(--surface-2); }
.footer-links a:active { background-color: var(--surface-2); transform: scale(.88); }
.footer-links svg { display: block; }
.settings-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline-start: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}