/* יישור קו: OneDrive's own look, played straight and larger (#62, the surface brief in .impeccable/surfaces/). */
:root {
  color-scheme: light dark;
  --page: light-dark(#faf9f8, #1b1a19);
  --surface: light-dark(#ffffff, #252423);
  --surface-2: light-dark(#f3f2f1, #2d2c2b);
  --line: light-dark(#e1dfdd, #3b3a39);
  --line-soft: light-dark(#edebe9, #323130);
  --ink: light-dark(#242424, #f3f2f1);
  --ink-2: light-dark(#5c5b59, #c8c6c4);
  --ink-3: light-dark(#7a7876, #a19f9d);
  --brand: light-dark(#0f6cbd, #115ea3);  /* fills behind white text: 4.9:1 light, 6.4:1 dark */
  --brand-hover: light-dark(#115ea3, #0f6cbd);
  --brand-press: light-dark(#0c3b5e, #0c3b5e);
  --on-brand: #ffffff;
  --brand-ink: light-dark(#0f548c, #77b7f7);
  --brand-soft: light-dark(#ebf3fc, #082338);
  --brand-line: light-dark(#96c6fa, #2b5b8a);
  --drop: light-dark(#f5faff, #0e2338);
  --ok: light-dark(#107c10, #54b054);
  --ok-soft: light-dark(#f1faf1, #0d260d);
  --bad: light-dark(#c50f1f, #e37d80);  /* dark: 5.5:1 on the surface, 5:1 on a hovered row (#74) */
  --bad-soft: light-dark(#fdf3f4, #3b1015);
  --warn-soft: light-dark(#fff9f5, #2e2010);
  --warn-ink: light-dark(#8a3707, #faa06b);
  --del: light-dark(#c50f1f, #ff99a4);
  --ins: light-dark(#0f548c, #77b7f7);
  --shadow: light-dark(0 8px 24px rgb(0 0 0 / 0.08), 0 8px 28px rgb(0 0 0 / 0.45));
  --scrim: light-dark(rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.6));
  --r-s: 6px; --r-m: 8px; --r-l: 12px; --r-xl: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pane: clamp(26rem, 28vw, 31rem);  /* narrower on a 1280-1440 laptop, so the names keep their room (#74) */
  font-size: 17px;  /* larger than OneDrive's 14px: his PC (PRODUCT.md, larger and simpler) */
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root.green { /* the easter egg: Greenel green instead of Microsoft blue, until the page closes */
  --brand: #2e7d32; --brand-hover: light-dark(#256b29, #1b5e20); --brand-press: #1b5e20;
  --brand-ink: light-dark(#1b5e20, #a5d6a7); --brand-soft: light-dark(#edf7ed, #10261a); --brand-line: light-dark(#a5d6a7, #2e6b38);
  --drop: light-dark(#f5fbf5, #0f2414); --ins: light-dark(#1b5e20, #a5d6a7);
}
@media (max-width: 700px) { :root { font-size: 19px; } }  /* the phone: one step larger (your call) */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", "Segoe UI Web (West European)", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45; color: var(--ink); background: var(--page); min-height: 100dvh;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-soft); color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; border-radius: var(--r-s); }
* { scrollbar-color: var(--line) transparent; scrollbar-width: thin; caret-color: var(--brand-ink); }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.hidden { display: none !important; }
.sr { position: absolute; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* top: at the end of the page it added 1 px of scroll (#78) */
svg.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* buttons: one family, standard behaviour */
.btn {
  min-height: 2.8rem; padding: 0 1.2rem; border-radius: var(--r-m); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; gap: 0.5rem; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.primary:active { background: var(--brand-press); }
.btn.danger { color: var(--bad); }
.btn.big { min-height: 3.8rem; padding: 0 2rem; font-size: 1.2rem; border-radius: var(--r-l); }
.btn.small { min-height: 2.6rem; padding: 0 0.9rem; font-size: 0.9rem; }  /* 44 px, the touch minimum */
.btn[disabled] { opacity: 0.5; cursor: default; }
.icon-btn {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-m); border: 0; background: none; display: grid; place-items: center;
  cursor: pointer; color: var(--ink-2); flex: none;  /* the search field gives up width, not ⋮ (#74) */
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

/* the top bar */
.top {
  position: sticky; top: 0; z-index: 5; height: 3.6rem; display: flex; align-items: center; gap: 1.2rem;
  padding: 0 1.4rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-size: 1.45rem; font-weight: 700; color: var(--brand-ink); border: 0; background: none; padding: 0; cursor: default; flex: none; white-space: nowrap; }
.mark { width: 2rem; height: 2rem; border-radius: var(--r-m); background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.mark svg { width: 1.2rem; height: 1.2rem; stroke-width: 2.4; }
.search {
  flex: 0 1 34rem; margin-inline: auto; position: relative; display: flex; align-items: center;
}
.search svg { position: absolute; inset-inline-start: 0.9rem; color: var(--ink-3); pointer-events: none; }
.search input {
  width: 100%; height: 2.65rem; border-radius: var(--r-m); border: 1px solid transparent; background: var(--surface-2);
  padding-inline: 2.7rem 1rem; color: var(--ink); outline: none;
}
.search input::placeholder { color: var(--ink-2); }
.search input:focus { border-color: var(--brand-ink); background: var(--surface); }

/* the drop area: the front door */
.wrap { max-width: 104rem; margin: 0 auto; padding: 1.4rem 1.9rem 3rem; }
.drop {
  border: 2px dashed var(--brand-line); border-radius: var(--r-xl); background: var(--drop);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2.4rem; padding: 1.8rem 2.8rem;
  transition: border-color 160ms, background 160ms;
}
.drop.over { border-color: var(--brand); border-style: solid; }
.drop h1 { font-size: 1.9rem; font-weight: 600; color: var(--brand-ink); letter-spacing: -0.01em; }
.drop .hint { font-size: 1.1rem; color: var(--ink-2); margin-top: 0.3rem; }
.choices { display: grid; gap: 0.75rem; margin-top: 1.3rem; }
.choice { display: flex; align-items: center; gap: 1rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.choice legend { float: inline-start; width: 6.5rem; color: var(--ink-2); padding: 0; }
.seg { display: inline-flex; border: 1px solid var(--brand-line); border-radius: var(--r-l); overflow: hidden; background: var(--surface); }
.seg label { position: relative; display: grid; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; text-align: center; height: 100%; padding: 0.7rem 1.3rem; font-size: 1.06rem; cursor: pointer; transition: background 140ms, color 140ms; text-wrap: balance; }
.seg label + label span { border-inline-start: 1px solid var(--line); }
.seg input:checked + span { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--brand-ink); outline-offset: -4px; border-radius: var(--r-m); }
.seg input:checked:focus-visible + span { outline-color: var(--on-brand); }  /* blue on blue was 1.5:1 (#74) */
.seg label:hover input:not(:checked) + span { background: var(--brand-soft); }

/* the list and the details pane */
.body { display: grid; grid-template-columns: 1fr var(--pane); gap: 1.4rem; margin-top: 1.4rem; align-items: start; }
.body.solo { grid-template-columns: 1fr; }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
/* fixed status column, and a floor under the buttons that fits the download button (214 px), so neither the
   rolling joke, a longer status nor the first download button reflows the list (#74) */
.list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 15rem minmax(14rem, auto); }
.row {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; column-gap: 1.6rem;
  padding: 0.55rem 1.2rem; min-height: 4.5rem; border-bottom: 1px solid var(--line-soft); position: relative;
  transition: background 120ms;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.row.sel { background: var(--brand-soft); }
.row.enter { animation: enter 320ms var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(-0.5rem); } }
.pick { all: unset; position: absolute; inset: 0; cursor: pointer; border-radius: 0; }
.pick:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -3px; }
.row > :not(.pick) { position: relative; pointer-events: none; }
.row .btn, .row a, .row .icon-btn { pointer-events: auto; }
.name { font-weight: 600; font-size: 1.06rem; display: flex; align-items: baseline; gap: 0.5rem; }
.name bdi { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }  /* long names wrap, two lines at most */
.row:hover .badge, .row.sel .badge { background: var(--surface); }
.badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.1rem 0.38rem; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); flex: none; }
.meta { font-size: 0.9rem; color: var(--ink-2); margin-top: 0.15rem; }
.st { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.st svg { width: 1.2rem; height: 1.2rem; }
.st.ok { color: var(--ok); } .st.bad { color: var(--bad); } .st.run { color: var(--brand-ink); } .st.wait { color: var(--ink-2); }
.st + .meta { margin-top: 0.1rem; }
.nw { white-space: nowrap; }
/* the joke takes the room it's given and never sizes a column. A desktop row fits the longest on one line (405 of
   459+ px), so one is reserved; a phone reserves two. Two at most: it never cuts a sentence, and never moves the row (#74) */
.joke { font-size: 0.9rem; line-height: 1.3; color: var(--ink-2); margin-top: 0.15rem; min-height: 1.3em; transition: opacity 220ms;
  contain: inline-size; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (min-width: 901px) {  /* the joke also gets the empty buttons column */
  .row.fixing .s { grid-column: span 2; min-width: 0; }
  .row.fixing .acts { display: none; }
}
.joke.out { opacity: 0; }
.bar { height: 0.35rem; border-radius: 99px; background: var(--line-soft); margin-top: 0.4rem; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width 200ms linear; }
.spin { animation: spin 0.9s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.acts { display: flex; justify-content: flex-end; gap: 0.5rem; }
.empty { padding: 3rem 2rem; text-align: center; color: var(--ink-2); font-size: 1.1rem; }
.empty strong { display: block; color: var(--ink); font-size: 1.3rem; margin-bottom: 0.4rem; }

.pane {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow);
  padding: 1.4rem 1.6rem 1.6rem; position: sticky; top: 4.6rem; max-height: calc(100dvh - 7.6rem); overflow: auto;  /* 7.6: the bar above, the page's padding below */
}
body:has(#offline:not(.hidden)) .pane { top: 7.4rem; max-height: calc(100dvh - 10.4rem); }  /* and the offline banner (#74) */
@media (min-width: 1280px) {
  /* the page fills the screen, and the list and the pane both stretch over the room under the drop area. The pane never
     sizes that room (contain), so a short list means no page scroll: the pane scrolls inside, as tall as the list. A long
     list scrolls the page, and the pane stays sticky at screen height (#78) */
  .wrap { min-height: calc(100dvh - 3.6rem); display: flex; flex-direction: column; }
  .body { flex: 1; align-items: stretch; }
  .pane { contain: size; }
  .list { display: flex; flex-direction: column; } .empty { margin-block: auto; }  /* an empty list: its message in the middle */
}
.pane-bar { display: none; }
.pane h2 { font-size: 1.3rem; font-weight: 600; overflow-wrap: anywhere; }
.pane .meta { margin: 0.3rem 0 0.9rem; }
.note { border-radius: var(--r-m); padding: 0.7rem 0.9rem; font-size: 0.95rem; display: flex; gap: 0.5rem; align-items: start; margin-bottom: 1rem; }
.note.ok { background: var(--ok-soft); color: var(--ok); }
.note.warn { background: var(--warn-soft); color: var(--warn-ink); }
.note.info { background: var(--brand-soft); color: var(--brand-ink); }
.note.bad { background: var(--bad-soft); color: var(--bad); }
.note svg { margin-top: 0.1rem; }
/* two equal columns that never grow past the pane: a long label wraps (#74: "לתקן שוב: תיקון ועיצוב בסגנון שלך" pushed
   the pane 74 px wide) */
.pane-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.pane-acts .btn { white-space: normal; text-wrap: balance; min-width: 0; padding-block: 0.45rem; text-align: center; }
.pane-acts .primary { grid-column: 1 / -1; }
.pane-acts .wide { grid-column: 1 / -1; }
.pane h3 { font-size: 1.02rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.sum { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; font-size: 0.95rem; color: var(--ink-2); }
.sum b { color: var(--ink); font-weight: 600; margin-inline-end: 0.25rem; }
.ch { padding: 0.6rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1rem; overflow-wrap: anywhere; }
.ch:last-child { border-bottom: 0; }
.ch del { color: var(--del); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ch .nb { white-space: nowrap; }
.ch ins { color: var(--ins); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ch .why, .tbl .why { display: block; font-size: 0.85rem; color: var(--ink-2); margin-top: 0.1rem; }
.ch .ctx { color: var(--ink-2); }
.small-note { font-size: 0.88rem; color: var(--ink-2); margin-top: 0.5rem; }
.tbl { list-style: none; margin: 0; padding: 0; }
.tbl li { padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; }
.tbl li:last-child { border-bottom: 0; }

/* banners, toasts, dialogs, the menu */
.banner { position: sticky; top: 3.6rem; z-index: 4; background: var(--warn-soft); color: var(--warn-ink); text-align: center; padding: 0.6rem 1rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.toast {
  position: fixed; inset-inline: 0; bottom: 1.5rem; margin: 0 auto; width: max-content; max-width: calc(100vw - 2rem);
  background: var(--ink); color: var(--surface); padding: 0.8rem 1.3rem; border-radius: var(--r-l); font-weight: 600;
  box-shadow: var(--shadow); z-index: 30; animation: toast 280ms var(--ease) both; text-wrap: balance; text-align: center;
}
@keyframes toast { from { opacity: 0; transform: translateY(0.75rem); } }
dialog {
  border: 0; border-radius: var(--r-xl); padding: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  width: min(32rem, calc(100vw - 2rem));
}
dialog::backdrop { background: var(--scrim); }
dialog[open] { animation: pop 240ms var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(0.6rem) scale(0.98); } }
.dlg { padding: 1.6rem; display: grid; gap: 1rem; }
.dlg h2 { font-size: 1.3rem; font-weight: 600; }
#confirm-h { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }  /* a long name: three lines at most */
.dlg p { color: var(--ink-2); }
.dlg textarea { width: 100%; min-height: 8rem; border: 1px solid var(--line); border-radius: var(--r-m); padding: 0.7rem 0.9rem; background: var(--surface); resize: vertical; }
.dlg textarea:focus { outline: 2px solid var(--brand-ink); outline-offset: -1px; }
.dlg .row-btns { display: flex; gap: 0.6rem; justify-content: flex-start; }
.menu {
  position: fixed; inset: auto; margin: 0; padding: 0.4rem; border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); min-width: min(17rem, calc(100vw - 1.6rem));
}
.menu button, .menu .theme-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.7rem 0.9rem; border-radius: var(--r-m); cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--surface-2); }
.menu button:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }  /* the grey wash alone was 1.1:1 (#74) */
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 0.35rem 0; }
.menu .theme-row { cursor: default; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.menu .theme-row .seg { display: flex; }
.menu .theme-row .seg label { flex: 1; text-align: center; }
.menu .theme-row .seg span { padding: 0.5rem 0.6rem; font-size: 0.92rem; }

/* the whole window takes a drop */
.dropzone {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent);
  backdrop-filter: blur(2px); border: 3px dashed var(--brand-ink); pointer-events: none;
}
.dropzone div { background: var(--surface); color: var(--brand-ink); font-size: 1.8rem; font-weight: 600; padding: 1.6rem 2.6rem; border-radius: var(--r-xl); box-shadow: var(--shadow); display: flex; align-items: center; gap: 0.8rem; }

/* the tutorial */
.tour { width: min(40rem, calc(100vw - 2rem)); }
.tour .dlg { padding: 2rem 2.2rem 1.6rem; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }  /* never wider than the dialog (#72) */
.tour h2 { font-size: 1.75rem; }
.tour p { font-size: 1.22rem; color: var(--ink); line-height: 1.55; }
.tour p .opt { display: block; } .tour p .opt + .opt { margin-top: 0.45em; }  /* one option per line, its name in bold (#76) */
.tour .pic { background: var(--page); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem; display: grid; place-items: center; min-height: 6rem; pointer-events: none; }
.tour .pic .drop { padding: 1rem 1.4rem; grid-template-columns: 1fr; gap: 0.6rem; text-align: center; }
.tour .dots { display: flex; gap: 0.4rem; justify-content: center; }
.tour .dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line); }
.tour .dots i.on { background: var(--brand); width: 1.4rem; border-radius: 99px; }
.tour .nav { display: flex; gap: 0.6rem; align-items: center; }
.tour .nav .skip { margin-inline-start: auto; }
#tour-next { min-width: 7.5rem; }  /* "הבא" and "מתחילים!" the same width */
@media (min-width: 701px) and (min-height: 501px) {
  /* one height for every step, a line above the tallest (497 px at 17 px), and the space under the text: the dialog never
     re-centres and "הבא" never moves under the mouse (#74; #76 made two steps longer) */
  .tour { height: min(31rem, calc(100dvh - 2rem)); }
  .tour .dlg { min-height: 100%; grid-template-rows: auto auto 1fr auto auto; }
  .tour .nav { position: sticky; bottom: 0; background: var(--surface); }
}
.tour-menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 0.4rem; min-width: min(15rem, 100%); box-shadow: var(--shadow); }
.tour-menu div { padding: 0.55rem 0.8rem; border-radius: var(--r-m); display: flex; gap: 0.6rem; align-items: center; }
.tour-menu div.hl { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }

/* login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.2rem; }
.login-card { width: min(27rem, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 2.4rem 2.2rem; display: grid; gap: 1.1rem; text-align: center; }
.login-card .mark { width: 3.6rem; height: 3.6rem; border-radius: var(--r-l); margin: 0 auto; }
.login-card .mark svg { width: 2.1rem; height: 2.1rem; }
.login-card h1 { font-size: 2rem; color: var(--brand-ink); }
.login-card .tag { color: var(--ink-2); font-size: 1.05rem; }
.login-card label { text-align: start; font-weight: 600; display: grid; gap: 0.4rem; }
.login-card input { width: 100%; min-width: 0; height: 3rem; border: 1px solid var(--ink-3); border-radius: var(--r-m); padding: 0 0.9rem; background: var(--surface); }
.login-card input:focus { outline: 2px solid var(--brand-ink); outline-offset: -1px; }
.login-card .err { color: var(--bad); font-weight: 600; min-height: 1.4em; }
.welcome { position: fixed; inset: 0; z-index: 40; background: var(--surface); display: grid; place-items: center; text-align: center; cursor: pointer; }
.welcome .mark { width: 5.5rem; height: 5.5rem; border-radius: var(--r-xl); margin: 0 auto 1.4rem; }
.welcome .mark svg { width: 3.4rem; height: 3.4rem; stroke-width: 2.6; }
.welcome .mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 520ms 120ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.welcome p { font-size: 1.6rem; font-weight: 600; color: var(--brand-ink); padding: 0 1.5rem; animation: rise 420ms 480ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.6rem); } }
.leaf { position: fixed; z-index: 35; width: 1.6rem; height: 1.6rem; color: #2e7d32; pointer-events: none; animation: leaf 2.4s var(--ease) forwards; }
@keyframes leaf { 70% { opacity: 1; } to { transform: translate(var(--dx), 55vh) rotate(var(--rot)); opacity: 0; } }

/* narrower screens: the details become a page of their own */
@media (max-width: 1279px) {  /* app.js WIDE: from 1101 to 1279 the names got no room beside the pane (#74) */
  .body { grid-template-columns: 1fr; }
  .pane {
    position: fixed; inset: 0; z-index: 15; border-radius: 0; border: 0; max-height: none; top: 0;
    padding: 0 max(1.2rem, calc((100vw - 46rem) / 2)) 2rem; animation: sheet 260ms var(--ease) both;
  }
  /* "חזרה לרשימה" stays at the top while the change list scrolls (#74) */
  .pane-bar { display: block; position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 0.9rem 0 0.7rem; margin-bottom: 0.3rem; }
  .pane.hidden-narrow { display: none; }
  @keyframes sheet { from { transform: translateX(-6%); opacity: 0; } }
}
@media (max-width: 1000px) {  /* a tablet: the choices get the whole width, the button goes under them */
  .drop { grid-template-columns: 1fr; gap: 1.2rem; }
  .drop .btn.big { justify-self: start; }
}
@media (max-width: 900px) {
  .list ul { display: block; }
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n a" "s a"; padding: 0.8rem 1rem; row-gap: 0.3rem; }
  .row > .n { grid-area: n; } .row > .s { grid-area: s; } .row > .acts { grid-area: a; }
  /* a row in progress keeps the room its status and meta will take when ready, so the rows below never jump (#74) */
  .row:is([data-st="upload"], [data-st="waiting"], [data-st="fixing"], [data-st="failed"]) .s { min-height: 3.1rem; }
}
@media (max-width: 700px) {
  .top { padding: 0 0.8rem; gap: 0.6rem; }
  .top .brand span:last-child { display: none; }
  .wrap { padding: 0.9rem 0.8rem 2rem; }
  .drop { grid-template-columns: 1fr; padding: 1.1rem; gap: 1rem; border-style: solid; border-width: 1px; }
  .drop h1, .drop .hint { display: none; }
  .choices { margin-top: 0; }
  .choice { flex-direction: column; align-items: stretch; gap: 0.35rem; }
  .choice legend { width: auto; float: none; margin-bottom: 0.35rem; }
  .seg { display: flex; } .seg label { flex: 1; text-align: center; } .seg span { padding: 0.65rem 0.4rem; font-size: 0.95rem; }
  .drop .btn.big { width: 100%; }
  .row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "s" "a"; }
  .joke { min-height: 2.6em; }
  /* stacked: the room also holds the download button the ready row gets under its status (#74) */
  .row:is([data-st="upload"], [data-st="waiting"], [data-st="fixing"], [data-st="failed"]) .s { min-height: 5.7rem; }
  body:has(#q:not(:placeholder-shown)) .drop { display: none; }  /* searching: the results come first (#74) */
  .row .acts { justify-content: stretch; } .row .acts .btn { flex: 1; }
  .pane-acts { grid-template-columns: minmax(0, 1fr); }
  .tour .dlg { padding: 1.4rem 1.2rem 1.2rem; }
  .tour h2 { font-size: 1.45rem; } .tour p { font-size: 1.1rem; }
  .tour .pic { padding: 0.8rem; font-size: 0.85rem; } .tour .pic .btn { white-space: normal; }
  /* the main button gets its own row, back and skip under it: three in a row don't fit at 360 px (#72) */
  .tour .nav { flex-wrap: wrap; } .tour .nav .primary { flex-basis: 100%; }
}
@media (max-width: 700px), (max-height: 500px) {
  /* one height for every step and the buttons pinned at the bottom. The words come first, so on a short screen it's the
     picture that scrolls under the buttons, never the text (#74) */
  .tour { height: min(37rem, calc(100dvh - 2rem)); }
  .tour .dlg { min-height: 100%; grid-template-rows: auto auto 1fr auto auto; padding-bottom: 0; }
  .tour h2 { order: 1; } .tour p { order: 2; } .tour .pic { order: 3; align-self: start; } .tour .dots { order: 4; }
  .tour .nav { order: 5; position: sticky; bottom: 0; background: var(--surface); padding-block: 0.6rem 1rem; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 360px) { .login-card { padding: 1.8rem 1.3rem; } }
@media (max-height: 500px) {  /* a phone with its keyboard up: the send button stays on screen (#74) */
  .dlg { gap: 0.7rem; padding-block: 1.1rem; }
  .dlg textarea { min-height: 4.5rem; }
}
@media (min-width: 1001px) {  /* the upload button next to its choices, not across an empty band (#74) */
  .drop { grid-template-columns: minmax(0, max-content) auto; justify-content: start; }
}
@media (pointer: coarse) { .drop .hint { display: none; } }
@media (max-height: 860px) and (min-width: 701px) {  /* a 768-high laptop: the front door stays, a little tighter */
  .drop { padding: 1.2rem 2.2rem; }
  .drop h1 { font-size: 1.6rem; }
  .choices { margin-top: 0.8rem; gap: 0.5rem; }
  .seg span { padding: 0.55rem 1.1rem; }
  .drop .btn.big { min-height: 3.3rem; }
  .body { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .spin { animation: none; }
  .welcome .mark path { stroke-dashoffset: 0; }
}