/* GALUT v8 additions */
.notice:empty { display: none; }
.seg-tabs { margin: 4px 0 12px; }
.seg-tabs button { flex: 1; font-weight: 700; }
.verb-search { display: block; margin: 12px 0; }
.verb-search input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.verb-search input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.vb-pages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }
.vb-pages button { min-width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; }
.vb-pages button.is-on { background: var(--primary); color: var(--primary-ink, #fff); border-color: var(--primary); }
.art-hero { margin: 6px 0 14px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); aspect-ratio: 9 / 5; background: var(--surface-2); }
.art-hero .art-svg { display: block; width: 100%; height: 100%; }
.tile.tile-art { width: 76px; height: 54px; padding: 0; overflow: hidden; background: var(--surface-2); }
.tile.tile-art .art-svg { display: block; width: 100%; height: 100%; }

/* languages whose translation is still in progress */
.chip-wip { background: #fff4d6; color: #8a5a00; border: 1px solid #f1d58a; white-space: nowrap; }
.row-body .chip-wip { align-self: flex-start; justify-self: start; width: fit-content; max-width: 100%; margin-top: 5px; min-height: 22px; font-size: 11.5px; }
.wip-note { margin: 4px 0 14px; padding: 10px 14px; border-radius: 14px; background: #fff4d6; color: #6b4600; border: 1px solid #f1d58a; font-size: 14px; line-height: 1.45; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip-wip, :root:not([data-theme="light"]) .wip-note { background: #3a2f12; color: #f5d98a; border-color: #5c4a1a; }
}
:root[data-theme="dark"] .chip-wip, :root[data-theme="dark"] .wip-note { background: #3a2f12; color: #f5d98a; border-color: #5c4a1a; }

/* ---------- Beta label next to the brand ---------- */
.brand::after {
  content: "Beta";
  font-family: var(--font-ui); direction: ltr; unicode-bidi: isolate;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  padding: 4px 7px; border-radius: 999px; margin-inline-start: 2px;
  background: var(--gold-soft); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  white-space: nowrap; align-self: center;
}
@media (min-width: 600px) { .brand::after { content: "Beta · גרסת הרצה"; } }

/* ---------- Tablet: a wider column ---------- */
@media (min-width: 600px) and (max-width: 899px) {
  #app { max-width: 760px; }
}

/* ---------- Desktop: use the whole screen ---------- */
@media (min-width: 900px) {
  :root { --content: 1040px; --gutter: max(32px, calc((100% - var(--content)) / 2)); }
  body { font-size: 16px; }
  #app { max-width: none; border-inline: 0; }
  .topbar { min-height: 64px; padding-inline: var(--gutter); }
  .screen { padding-inline: var(--gutter); padding-block: 32px 72px; gap: 24px; }
  .title { font-size: 30px; }
  .he-sub { font-size: 24px; }
  .lede { font-size: 15px; max-width: 75ch; }

  /* lists become a two-column grid, separated by hairlines */
  .list:not(.letters):not(.timeline):not(.conj-list) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; background: var(--line);
  }
  .list:not(.letters):not(.timeline):not(.conj-list) > * { background: var(--surface); border-bottom: 0 !important; min-width: 0; }
  .list:not(.letters):not(.timeline):not(.conj-list) > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .list:not(.letters):not(.timeline):not(.conj-list) > .row:hover { background: var(--surface-2); }

  /* quizzes and long reading stay at a comfortable width */
  .screen-quiz { --content: 760px; }
  .bottombar { padding-inline: max(32px, calc((100% - 760px) / 2)); }
  .art-hero { max-width: 640px; width: 100%; margin-inline: auto; }

  /* settings sheet opens as a panel at the end of the top bar */
  .sheet { inset-inline: auto var(--gutter); width: 440px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; }
  .sheet-backdrop { inset: 64px 0 0; }
  .sheet { top: 64px; }
}
@media (min-width: 1400px) {
  :root { --content: 1180px; }
  .list.lang-list, .screen .list:not(.letters):not(.timeline):not(.conj-list).cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}