/*
 * Stage B components (queue, posts, post view, sources, sheets, notifications, login). Load order: tokens.css → components.css → layout.css → stage-b.css → skin.css.
 * Structure follows the airy revision: summary first, details behind a tap.
 */

/* ---------- generic airy section header ---------- */
.vhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-block: 8px 18px; }
.vhead h1 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.015em; }
.vhead p { margin: 6px 0 0; font-size: var(--t-sm); color: var(--muted); }
.vhead p b { color: var(--mint); }
/* a line that needs Nadav (the sources screen, 50, 21.10: he lands here from a red banner): warn, not grey; temp mends itself */
.vhead p[data-meta="invalid"], .vhead p[data-meta="no_page"], .vhead p[data-meta="perm"], .vhead p[data-meta="stuck"], .vhead p[data-ig-stopped] { color: var(--warn); }
.sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 28px 0 12px; font-size: var(--t-sm); font-weight: 800; color: var(--fg-2); }
.sec-t span { font-weight: 600; color: var(--muted); font-size: var(--t-xs); }

/* ---------- in progress (queue) ---------- */
.budget { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--surface); margin-bottom: 8px; }
.budget-top { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--fg-2); }
.budget-top b { color: var(--fg); font-variant-numeric: tabular-nums; }
.meter { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--v, 50%); border-radius: 4px; background: var(--mint); }
.meter.warn i { background: var(--warn); }
.meter.bad i { background: var(--bad); }   /* budget at 100% (.meter.warn.bad) */
.jlist { display: grid; gap: 12px; }
.jcard { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface); text-decoration: none; color: inherit; }
.jcard.run { background: linear-gradient(180deg, var(--mint-soft), transparent 70%) var(--surface); box-shadow: inset 0 0 0 1px var(--mint-line); }
.jcard.fail { background: var(--bad-soft); box-shadow: inset 0 0 0 1px rgba(255, 126, 112, .35); }
.j-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--fg-2); }
.j-title { font-size: var(--t-md); font-weight: 700; line-height: 1.35; }
.j-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12.5px; color: var(--muted); }
.j-foot .eta { color: var(--fg-2); }
.j-err { margin: 0; font-size: var(--t-sm); color: var(--fg); line-height: 1.55; }
.j-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* a failed job's raw error, folded (87): plain words stay on top, the tech detail is small and quiet */
.j-tech > summary { position: relative; display: inline-block; list-style: none; cursor: pointer; color: var(--muted); font-size: var(--t-xs); font-weight: 600; }
.j-tech > summary::-webkit-details-marker { display: none; }
.j-tech > summary::after { content: ""; position: absolute; inset: -14px -6px; }   /* 44 px target */
.j-tech code { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg); color: var(--fg-2);
  font: 12px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.steps li { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); }   /* pending: outline only (muted on surface-3 was 4.497:1) */
.steps li.done { background: var(--surface-3); box-shadow: none; color: var(--fg-2); }
.steps li.done::before { content: "✓ "; color: var(--mint); }
.steps li.now { background: var(--mint); box-shadow: none; color: var(--mint-ink); }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--mint); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.qpos { color: var(--muted); font-variant-numeric: tabular-nums; }
.dlist { list-style: none; margin: 0; padding: 0; }
.dlist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.dlist li:last-child { border-bottom: 0; }
.dmeta { color: var(--muted); font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }

/* ---------- posts grid ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
.pcard { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.pthumb { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard.sel .pthumb { box-shadow: 0 0 0 2px var(--mint); }
.ptag { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 9px; border-radius: 999px; background: var(--overlay); color: #fff; font-size: 11px; font-weight: 700; }
.ptitle { font-size: var(--t-sm); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmeta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* ---------- post view ---------- */
.pv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 640px; margin-inline: auto; padding-block: 4px 40px; }   /* minmax: the 1080 px slides must not size the track */
.car { position: relative; }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 10px; direction: ltr; }   /* swipe like Instagram: left = next (approved, not RTL) */
.car-track::-webkit-scrollbar { display: none; }
.slide-c { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: center; background: var(--media-bg); }
.slide-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbadge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: var(--overlay); color: #fff; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--mint-line); direction: rtl; }
.upd-badge { position: absolute; top: 10px; right: 10px;   /* top right: slide text sits at the bottom, the avatar top left */ padding: 3px 9px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font-size: 11.5px; font-weight: 800; }
.car-under { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.dots { display: flex; gap: 6px; direction: ltr; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.dots i.on { background: var(--mint); transform: scale(1.3); }
.dots i.warn { background: var(--warn); }
/* fallback slide (decision 45): navy, no photo, with a warning chip */
.fb { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 10%; background: var(--slide-navy); color: #fff; box-shadow: inset 0 0 0 4px var(--mint); }
.fb b { display: block; font-size: 15px; }
.fb-chip { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: var(--scrim); color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn); font-size: 12.5px; font-weight: 800; direction: rtl; }   /* dark chip: ⚠️ (yellow) vanished on an amber fill */
button.fb-chip { cursor: pointer; }
button.fb-chip::after { content: ""; position: absolute; inset: -8px -4px; }   /* 29 px chip → 45 px target (it opens 🖼️) */
.pv-info { display: grid; gap: 22px; }
/* one-column stacks: pin the track, or the 3-button row's max-content (≈430 px) widens it past a 390 phone */
.pv-info, .pv-state, .pv-acts { grid-template-columns: minmax(0, 1fr); }
.pv-state { display: grid; gap: 6px; }
.pv-state h2 { margin: 0; font-size: var(--t-xl); font-weight: 800; }
.pv-src { font-size: var(--t-sm); color: var(--muted); }
.pv-acts { display: grid; gap: 10px; }
.pv-acts .btn.primary { min-height: 52px; border-radius: 14px; font-size: var(--t-md); }
.pv-acts .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pv-acts .row3 .btn { flex-direction: column; min-height: 62px; gap: 2px; white-space: normal; text-align: center; line-height: 1.2; padding: 6px; }
.pv-acts .row3 .em { font-size: 18px; line-height: 1; }
.pv-acts .row3 small { font-size: 11px; color: var(--muted); font-weight: 500; }
.caption { padding: 16px; border-radius: 14px; background: var(--surface); font-size: var(--t-sm); line-height: 1.8; user-select: text; -webkit-user-select: text; }
.caption p { margin: 0 0 12px; } .caption p:first-child { font-weight: 800; font-size: var(--t-md); } .caption p:last-child { margin: 0; }
.ck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ck { display: grid; grid-template-columns: 24px 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--surface); font-size: var(--t-sm); line-height: 1.6; cursor: pointer; }
.ck input { width: 22px; height: 22px; margin: 0; accent-color: var(--mint); }
.ck.done { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.ck.done .ck-t { color: var(--muted); }
.ck-t em { display: block; font-style: normal; font-size: 12px; color: var(--mint); margin-top: 2px; }
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr { display: grid; grid-template-columns: 34px 22px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.55; }
.cr:last-child { border-bottom: 0; }
.cr .n { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.cr a { color: var(--mint); }
.legend { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.op-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.op { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: var(--surface); font-size: var(--t-sm); line-height: 1.55; }
.op-top { display: flex; align-items: center; gap: 8px; }
.op-kind { white-space: nowrap; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--surface-3); color: var(--fg-2); }
.op-kind.media { background: var(--warn-soft); color: var(--warn); }
.op-kind.claim { background: var(--info-soft); color: var(--info); }
.op-kind.conflict { background: var(--violet-soft); color: var(--violet); }
.op-why { color: var(--muted); font-size: 12.5px; }
.op-why a { position: relative; }
.op-why a::after { content: ""; position: absolute; inset: -13px -9px; }   /* inline "מקור" link: 26×18 → 44 px target */
.op .btn { justify-self: start; }
/* thread messages new in stage B */
.topts { display: grid; gap: 8px; margin-top: 8px; }
.topt { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-ctl); text-align: start; min-height: var(--tap); }
.topt b { font-size: var(--t-md); font-weight: 800; line-height: 1.35; }
.topt span { font-size: 12.5px; color: var(--muted); }
.topt .k { color: var(--mint); font-weight: 700; }   /* the kicker line, mint as on the slide */
.topt:hover, .topt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--mint); }
.diff { display: grid; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-size: 12.5px; }
.diff del { color: var(--muted); }
.diff ins { text-decoration: none; color: var(--mint); font-weight: 700; }

/* ---------- sources ---------- */
.addbox { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--surface); }
.addbox label { font-weight: 800; font-size: var(--t-sm); }
.addbox .row { align-items: stretch; }
.hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.slist { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: var(--surface); overflow: hidden; }
.srow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.srow.off .s-name, .srow.off .s-ic { opacity: .45; }
.s-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); font-size: 18px; }
.s-name { font-weight: 700; font-size: var(--t-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; overflow-wrap: anywhere; }
.srow > div { min-width: 0; }   /* a long source name wraps inside its row (ca) */
.s-name > bdi, .s-name > span:not(.tier) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }   /* the name itself is a flex item: let it shrink below its longest word */
.s-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier { padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; background: var(--surface-3); color: var(--fg-2); min-height: 0; position: relative; }
.tier::after { content: ""; position: absolute; inset: -13px -8px; }
.srow.pending { background: var(--violet-soft); grid-template-columns: 40px minmax(0, 1fr); }
.srow.pending .s-meta { color: var(--violet); white-space: normal; }
.srow.pending .p-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: var(--surface-3); box-shadow: inset 0 0 0 1.5px var(--line-ctl); position: relative; flex: none; }
.switch::before { content: ""; position: absolute; inset: -7px -2px; }    /* 44px target */
.switch::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg-2); transition: inset-inline-start var(--dur-2); }
.switch[aria-checked="true"] { background: var(--mint); box-shadow: none; }
.switch[aria-checked="true"]::after { inset-inline-start: 24px; background: var(--mint-ink); }

/* ---------- sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet-bg { position: absolute; inset: 0; background: var(--scrim); }
.sheet-p { position: absolute; bottom: 0; left: 0; right: 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: 24px 24px 0 0;
  padding: 10px max(18px, var(--safe-r)) calc(20px + var(--safe-b)) max(18px, var(--safe-l)); }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto 12px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet-h h2 { margin: 0; font-size: var(--t-xl); font-weight: 800; }
.sheet-s { margin: 4px 0 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
.sheet-b { display: grid; gap: 14px; margin-top: 18px; }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.type { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border-radius: 16px; background: var(--surface-2); font-weight: 700; font-size: var(--t-sm); position: relative; }
.type .em { font-size: 20px; }
.type[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--mint); background: var(--mint-soft); }
.type.wide { grid-column: 1 / -1; min-height: 64px; }
.type .new { margin-inline-start: auto; padding: 2px 8px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font-size: 11px; font-weight: 800; }
.type small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.uploads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.up { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-3); }
.up img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up .x { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--overlay); color: #fff; display: grid; place-items: center; font-size: 13px; }
.up .x::after { content: ""; position: absolute; inset: -9px; }
.up .vid { position: absolute; bottom: 4px; right: 4px; padding: 1px 6px; border-radius: 6px; background: var(--overlay); color: #fff; font-size: 10.5px; font-weight: 700; direction: ltr; }
.up.add { display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-ctl); color: var(--muted); font-size: 26px; border-radius: 12px; }
.choice { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--mint); }
.choice b { display: block; font-size: var(--t-md); }
.choice span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--mint); background: var(--mint-soft); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.qchip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 999px; background: var(--mint-soft); color: var(--mint); font-weight: 800; font-size: var(--t-sm); box-shadow: inset 0 0 0 1px var(--mint-line); }
.sheet-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 4px; }
.sheet-foot .btn.primary { min-height: 52px; border-radius: 14px; font-size: var(--t-md); }
.sheet-foot .btn.ghost { min-height: 52px; }

/* ---------- notifications ---------- */
.push { position: fixed; z-index: var(--z-push); top: calc(var(--safe-t) + 10px); left: max(10px, var(--safe-l)); right: max(10px, var(--safe-r)); max-width: 430px; margin-inline: auto;
  display: flex; border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--shadow); border: 1px solid var(--glass-line); }
.push-c { flex: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; padding: 12px 14px; min-width: 0; align-items: center; text-decoration: none; color: inherit; }
.push-c img { width: 40px; height: 40px; border-radius: 10px; }
.push-t { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-sm); line-height: 1.35; }
.push-app { font-size: 11.5px; color: var(--muted); }
.push-b { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.push-x { width: var(--tap); color: var(--muted); display: grid; place-items: center; }
.nlist { list-style: none; margin: 0; padding: 0; }
.nrow { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.nrow:last-child { border-bottom: 0; }
.nrow .em { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-size: 18px; }
.nrow.unread .em { background: var(--mint-soft); }
.nrow b { display: block; }
.nrow span { color: var(--muted); font-size: 12.5px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); font-weight: 600; }
.setrow:last-child { border-bottom: 0; }
.setrow small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: calc(32px + var(--safe-t)) max(24px, var(--safe-r)) calc(32px + var(--safe-b)) max(24px, var(--safe-l)); background: radial-gradient(120% 70% at 50% 0%, rgba(100, 247, 203, .1), transparent 60%), var(--bg); }
.login-in { width: min(380px, 100%); display: grid; gap: 16px; justify-items: center; text-align: center; }
.login-av { width: 112px; height: 112px; border-radius: 28px; box-shadow: 0 16px 40px rgba(100, 247, 203, .18); }
.login h1 { margin: 6px 0 0; font-size: 30px; font-weight: 900; }
.login p { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }
.login .btn.primary { width: 100%; min-height: 56px; border-radius: 16px; font-size: var(--t-md); }
.login .btn.ghost { width: 100%; }
.login .fine { font-size: 12px; color: var(--muted); }
/* after a failed sign-in: what happened (b) + what to do; calm, not alarming */
.login .help { width: 100%; padding: 12px 16px; border-radius: 14px; background: var(--bad-soft); color: var(--fg-2); }
.login .help b { display: block; color: var(--bad); font-weight: 800; margin-bottom: 2px; }
/* Safari sizes a centred grid item to its unwrapped text, so long text spills off the side instead of wrapping.
   Text children get a definite width; text-align keeps them centred. (Found on Nadav's iPhone, login subtitle.) */
.login-in > :is(p, h1, h2), .state > :is(h1, h2, h3), .fb > * { justify-self: stretch; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

@media (min-width: 720px) {
  .sheet-p { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 48px)); border-radius: 24px; padding: 24px 26px 26px; box-shadow: var(--shadow); }
  .grab { display: none; }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .pane-list .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv { max-width: 1040px; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; gap: 36px; }
  .pv-media { position: sticky; top: 72px; }
}
@media (prefers-reduced-motion: reduce) { .live::before { animation: none; } }
@media (min-width: 960px) { .pane-detail .d-body:has(.pv) { max-width: 1080px; } }
/* media-dropped option (SPEC §5.6, CONTENT_VOICE §12.1.1): which slide lost which image, why, and 5 alternatives as buttons */
.op.drop { background: var(--warn-soft); box-shadow: inset 0 0 0 1px rgba(255, 200, 97, .3); }
.op.drop .op-why { color: var(--fg-2); }   /* muted is 4.26:1 on the warm fill; fg-2 passes */
.op-kind.drop { background: var(--warn); color: var(--warn-ink); }
.alts { display: grid; gap: 6px; margin-top: 4px; }
.alt { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; min-height: var(--tap); padding: 8px 12px; border-radius: 12px; background: var(--surface); text-align: start; font-size: var(--t-sm); font-weight: 600; }
.alt i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; background: var(--surface-3); color: var(--fg-2); }
.alt small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alt:hover { background: var(--surface-2); }
.alt[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--mint); }
.alt[aria-checked="true"] i { background: var(--mint); color: var(--mint-ink); }
/* actionable alternatives are buttons (upload → 🖼️, copy the photographer draft): a control edge;
   the rest are information only: a faint line, no hover, the explanation wraps */
button.alt { box-shadow: inset 0 0 0 1px var(--line-ctl); }
.alt[aria-disabled="true"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.alt[aria-disabled="true"]:hover { background: transparent; }
.alt[aria-disabled="true"] small { white-space: normal; overflow: visible; }

/* ---------------------------------------------------------------- pull to refresh (decision 61)
   JS contract: body[data-ptr="pull|ready|busy|done|new|error"] (removed when idle), and on body: --pull (px, up to 1.4 × 72)
   and --p (pull / 72, unitless). One fixed .ptr pill at the top of .pane-list, label as its text.
   The list follows the finger at 0.6 and the pill sits centred in the gap it opens, so nothing covers the greeting.
   Threshold 72 px → gap 43, pill 32. The ring (::before) fills with the pull, turns the pill mint at "ready", spins while busy. */
.ptr { position: fixed; inset-inline: 0; width: fit-content; max-width: calc(100% - 32px); margin-inline: auto; z-index: var(--z-sticky); pointer-events: none;
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding-inline: 12px 14px; border-radius: 999px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 18px rgb(0 0 0 / .35);
  font-size: var(--t-sm); font-weight: 700; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(calc(var(--pull, 0px) * .3 - 16px));
  transition: opacity .15s, transform .3s var(--ease-out), box-shadow .2s, color .2s; }
.ptr::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: conic-gradient(var(--mint) calc(min(var(--p, 0), 1) * 360deg), var(--line-2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
body[data-ptr] .ptr { opacity: clamp(0, calc(var(--p, 0) * 2.4 - .35), 1); }
body[data-ptr="pull"] .ptr, body[data-ptr="ready"] .ptr { transition: opacity .15s, box-shadow .2s, color .2s; }   /* follow the finger */
body[data-ptr="ready"] .ptr { color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--mint), 0 6px 18px rgb(0 0 0 / .35); }
body[data-ptr="busy"] .ptr::before { background: conic-gradient(var(--mint) 0 110deg, var(--line-2) 0); animation: ptr-spin .8s linear infinite; }
body[data-ptr="done"] .ptr::before, body[data-ptr="new"] .ptr::before, body[data-ptr="error"] .ptr::before { display: none; }
body[data-ptr="new"] .ptr { background: var(--mint); color: var(--mint-ink); box-shadow: 0 8px 22px rgba(100, 247, 203, .25); }   /* step 2: "✨ N לידים חדשים" */
body[data-ptr="error"] .ptr { color: var(--bad); }
@keyframes ptr-spin { to { transform: rotate(1turn); } }
.pane-list > * { transition: transform .3s var(--ease-out); }
body[data-ptr] .pane-list > * { transform: translateY(calc(var(--pull, 0px) * .6)); }
body[data-ptr="pull"] .pane-list > *, body[data-ptr="ready"] .pane-list > * { transition: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-ptr="busy"] .ptr::before { animation: none; }
  .ptr, .pane-list > * { transition: none; }
}

/* ---------------------------------------------------------------- 🖼️ replace image (SPEC 3.9 slide window, 5.6 credit rule)
   Tap a slide → .sheet "שקופית N/M" with .type.wide rows (🖼️ / 🎬 / ✂️; ✂️ is aria-disabled on an image slide).
   🖼️ → .sheet: .rep (the slide now → the new image, both 4:5), .or, a URL .field, .credit-note, .sheet-foot.
   Entry points: the slide window, the media-dropped card's "4 · להעלות תמונה משלי", and the fallback slide's chip (open 🖼️ for that slide). */
.type[aria-disabled="true"] { opacity: .5; cursor: default; }
a.type { color: inherit; text-decoration: none; }
.rep { display: grid; grid-template-columns: 112px 28px 112px; justify-content: center; align-items: center; gap: 10px; }
.rep-now, .rep .up { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; }
.rep-now { position: relative; background: var(--media-bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.rep-now img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-now small, .rep .up small { position: absolute; inset-inline: 0; bottom: 0; padding: 4px 6px; background: var(--scrim); color: var(--fg-2); font-size: 11px; font-weight: 700; text-align: center; }
.rep .up { position: relative; }
.rep-arrow { color: var(--muted); font-size: 20px; text-align: center; }
.rep.single { grid-template-columns: 112px; }   /* one tile only (📎 שלח לי בעצמך): centred */
.rep.ring .up { aspect-ratio: 1; align-self: center; border-radius: 50%; overflow: visible; box-shadow: 0 0 0 3px var(--mint); }   /* ⭕ chosen: preview the new image as the circle it becomes */
.rep.ring .up img { border-radius: 50%; }
.rep.ring .up .x { top: -6px; left: -6px; }   /* outside the circle, so it isn't clipped */
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--t-xs); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.credit-note { margin: 0; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.5; }
/* the credit a link resolved to: plain text (it can't be typed to get around 🚫), wraps, Latin parts in <bdi> */
.credit-line { margin: 0; color: var(--fg); font-size: var(--t-sm); line-height: 1.5; overflow-wrap: anywhere; }
.credit-line > b { color: var(--muted); font-weight: 600; margin-inline-end: 4px; }
/* a short warning line under the link (manager rule: IG/FB links only via Apify; a 🚫 credit warns): one line, b first */
.sheet-warn { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--fg-2); font-size: var(--t-sm); line-height: 1.5; }
.sheet-warn b { color: var(--warn); font-weight: 800; }
.sheet-warn.bad { background: var(--bad-soft); }
.sheet-warn.bad b { color: var(--bad); }
/* while the slide re-renders: a calm overlay on that slide only (then the usual .upd-badge "עודכן") */
.slide-busy { position: absolute; inset: 0; display: grid; place-items: center; gap: 8px; align-content: center; background: var(--scrim); color: var(--fg); font-size: var(--t-sm); font-weight: 800; }
.slide-busy::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(var(--mint) 0 110deg, var(--line-2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  animation: ptr-spin .8s linear infinite; }

/* ---------------------------------------------------------------- 📰 עוד מהחדשות (decision 63): below-threshold items
   A details.acc.fun.news at the bottom of the leads list (after the rows, before "ארכיון ו־👎"); hidden when empty.
   Each .nitem: the text block is the link to the article (new tab); 👍 (.ib) promotes it to a full lead with research.
   No chili, no "חדש!", no tab badge; the score is a quiet "ציון 4" in the meta line. */
.acc.news { margin-top: 18px; }
.nlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nitem { display: grid; grid-template-columns: minmax(0, 1fr) var(--tap); gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.nitem > a { display: grid; gap: 3px; min-width: 0; color: var(--fg); text-decoration: none; }
.nitem b { font-size: var(--t-md); font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.nitem .n-line { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.nitem small { color: var(--muted); font-size: var(--t-xs); }
.nitem .ib { background: var(--surface-3); }
@media (min-width: 960px) { .nitem .n-line { -webkit-line-clamp: 2; } }

/* two fields side by side (✂️ trim: "מ-" right, "עד" left) and a field in error */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }

/* desktop carousel arrows (SPEC 3.9): in the row under the slides, so they never cover slide text.
   The track is LTR like Instagram: ‹ = previous, › = next. DOM order: .car-nav.prev, .dots, .num, .car-nav.next.
   Phone: hidden (swipe). The first/last slide sets [disabled] on the arrow that can't move. */
.car-nav { display: none; }
@media (min-width: 960px) {
  .car-under { direction: ltr; }
  .car-nav { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-ctl); }
  .car-nav::after { content: ""; position: absolute; inset: -5px; }   /* 44 px target */
  .car-nav:hover { background: var(--surface-3); color: var(--fg); }
  .car-nav[disabled] { opacity: .35; cursor: default; }
  .car-nav .i { width: 18px; height: 18px; }
  .car-nav.prev .i { transform: scaleX(-1); }   /* i-back points right (›); flipped for ‹ */
}

/* ---------------------------------------------------------------- asking for images (decision 82, APP_DESIGN §8.9)
   (a) .sheet "noimg": ol.found (what research found and why it can't be used) + .type.wide actions; no "design anyway".
   (b) .ask-card in the post: there's text for more slides than there are images. A dashed mint outline: an opportunity, not an error. */
.found { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.found li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.found img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: block; filter: grayscale(.7) brightness(.75); }   /* can't be used: shown muted */
.found b { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--fg); }
.found small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
.found .more { color: var(--muted); font-size: 12px; }
.found .ph { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); font-size: 18px; }   /* 🚫/⚠️ files are never downloaded: a status tile instead of a thumbnail */
.ask-card { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--surface); outline: 1.5px dashed var(--mint-line); outline-offset: -1.5px; }
.ask-card b { font-size: var(--t-md); font-weight: 800; }
.ask-card p { margin: 0; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.5; }
.ask-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ask-card.warn { outline-color: var(--warn); }   /* an older post that already has slides without an image (before decision 82) */
.ask-card.warn b { color: var(--warn); }

/* iPhone keyboard over sheets (Nadav: "מסתיר", decision 84). iOS doesn't shrink the page for the keyboard, so a
   bottom sheet stays behind it. The app sets --kb on <html> (the keyboard's height, from visualViewport) and
   html.kb-open while it's up. The phone sheet rides above the keyboard; the sticky bar and the + step aside.
   From 720 px the sheet is a centred dialog and needs none of this. */
@media (max-width: 719px) {
  .sheet-p { bottom: var(--kb, 0px); max-height: calc(92dvh - var(--kb, 0px)); transition: bottom .18s var(--ease-out); }
  html.kb-open .sheet-p { padding-bottom: 14px; }
}
html.kb-open .bar3, html.kb-open .fab { display: none; }
@media (prefers-reduced-motion: reduce) { .sheet-p { transition: none; } }

/* ---------------------------------------------------------------- © credit on a slide (decision 86, items 11–12)
   Only in the app, never burned into the image, and not in the caption (12). A top-right cluster .slide-tags holds
   "עודכן" and ©, so neither covers the slide text (bottom) or the avatar (top left).
   Tap © → .sheet "credit": dl.facts (צילום / מקור / מצב) + actions. .cr-btn.unknown = "קרדיט לא ידוע" (amber). */
.slide-tags { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 6px; direction: rtl; }
.slide-tags .upd-badge { position: static; }
.cr-btn { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--scrim); color: #fff; font-size: 15px; font-weight: 800; line-height: 1; box-shadow: inset 0 0 0 1px var(--glass-line); }
.cr-btn::after { content: ""; position: absolute; inset: -8px; }   /* 44 px target */
a.cr-btn { text-decoration: none; }
.cr-btn.unknown { color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn); }
.cr-state { font-weight: 700; }
.cr-state.ok { color: var(--mint); } .cr-state.check { color: var(--warn); } .cr-state.unknown { color: var(--warn); }
/* the credit sheet lists every image in the post (87, decision 86): slide number, credit, source type, state.
   The slide whose © was tapped is highlighted. "⚠️ לבדוק" for a named photographer, stock, agency, screenshot or unknown. */
.cr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cr-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.cr-list li[aria-current="true"] { background: var(--mint-soft); box-shadow: inset 0 0 0 1.5px var(--mint-line); }
.cr-list i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; background: var(--surface-3); color: var(--fg-2); }
.cr-list b { display: block; font-size: var(--t-sm); font-weight: 700; }
.cr-list small { display: block; color: var(--muted); font-size: 12px; }
.cr-list .cr-state { font-size: 12px; white-space: nowrap; }
.cr-list li[aria-current="true"] small { color: var(--fg-2); }   /* muted on mint-soft was 4.27:1 */
.cr-list small a { position: relative; color: inherit; }   /* the site, a link Nadav opens to check the credit */
.cr-list small a::after { content: ""; position: absolute; inset: -14px -10px; }   /* ~44px target around a short name */

/* ד׳ (decision 86): picking from the pictures of a linked article. `.pick-hint` above, then `.uploads` of button.up:
   role="radio" in a radiogroup in the 🖼️ sheet (one picture for this slide); role="checkbox" in the noimg sheet (several).
   Picked = mint outline + a mint ✓. A checkbox not picked yet shows an empty circle, so it reads as "tap to add".
   Keyboard focus is white, so a focused tile never looks picked. `.vid` carries the number the credit list uses,
   with ⚠️ before it when the credit needs a check. */
.pick { display: grid; gap: 14px; }   /* same rhythm as .sheet-b */
.pick-hint { margin: 0; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.5; }
.uploads button.up { padding: 0; border: 0; font: inherit; color: inherit; cursor: pointer; }
.up[aria-checked="true"] { outline: 3px solid var(--mint); outline-offset: 2px; }
.up[role]:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.up[aria-checked="true"]:focus-visible { outline: 3px solid var(--mint); box-shadow: 0 0 0 7px var(--fg); }
.up[role="checkbox"]::before, .up[aria-checked="true"]::before { content: ""; position: absolute; z-index: 1; top: 6px; right: 6px; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.up[role="checkbox"]::before { border: 2px solid #fff; background: rgba(0, 0, 0, .3); }
.up[aria-checked="true"]::before { content: "✓"; border: 0; background: var(--mint); color: var(--mint-ink); }
.field .row > input { flex: 1 1 auto; min-width: 0; }   /* the URL next to "בדוק" (06) */
.field .row > .btn { flex: none; }
.types > .field, .types > .sheet-warn { grid-column: 1 / -1; }   /* the 🔗 row opens into a field inside .types (noimg): full width, like .type.wide */

/* 💬 מה בתמונה? (decision 91): an optional one-line note per picture, so the bot knows where each one goes.
   Saved when the field loses focus (no button; a .toast "💬 נשמר"). input.img-note (maxlength 200, enterkeyhint done):
   in .cr-list rows (noimg link list, © sheet) as a direct child of the li, spanning the text and state columns;
   in .img-notes, the uploaded pictures (📂 / 🖼️ העלה תמונות): a 44px thumbnail + the note;
   in the 🖼️ sheet: one .field under the credit line.
   A picture with a note shows .note-tag "💬" on its tile (bottom left; .vid bottom right, ✓ top right, ✕ top left). */
.cr-list li > .img-note, .cr-list li > .note-row, .cr-list li > .hint { grid-column: 2 / -1; }
.cr-list li:has(> .img-note, > .note-row) { align-items: start; }   /* the number and the state stay on the credit's line */
.cr-list li:has(> .img-note, > .note-row) > i { margin-top: 0; }
.cr-list li:has(> .img-note, > .note-row) > .cr-state { margin-top: 3px; }
.img-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.img-notes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.img-notes .th { display: block; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--surface-3); }
.up .note-tag { position: absolute; bottom: 4px; left: 4px; padding: 1px 5px; border-radius: 6px; background: var(--overlay); font-size: 11px; line-height: 1.4; }
.field label .opt { color: var(--muted); font-weight: 500; }
/* the © sheet shows a saved note as text and edits it in place; it saves on blur and on 💾, without re-designing
   ("💬 נשמר. ייכנס בעיצוב הבא, או ב-✍️ תקן."); an empty save deletes ("💬 נמחק"). Lists before a design send the note
   with their own action (➕ הוסף / 🎨), so they have no 💾. */
.cr-list .note-line { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cr-list li > span > .mini { margin-top: 2px; }
.cr-list li > .hint { margin-top: -4px; }
.note-row { align-items: center; }
.note-row > .img-note { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.note-row > .btn { flex: none; }
.field > .hint { margin-top: 6px; }

/* v1.1 search and filters (da 19.10, copy 87 v1.1-copy-draft §1, §4), on the leads list and the posts list:
   .fbar = the search field (.search) over one scrolling row of filter chips (.pills.fchips, groups split by .fsep),
   then .fcount ("N מתוך M לידים" + "✕ נקה" while a chip is on). The chips replace V1's status pills and the "⋯":
   no chip on = everything. One chip per group, except categories (several, from the 🏷️ sheet). */
.fbar { display: grid; gap: 8px; margin-bottom: 4px; }
.search { position: relative; }
.search > .i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search input { border-radius: 999px; padding-inline: 44px; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-x { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; color: var(--muted); font-size: 15px; }
.pills.fchips { margin-bottom: 0; }
.fsep { flex: none; width: 1px; align-self: stretch; margin: 8px 2px; background: var(--line-ctl); }
.fchips .menu::after { content: " ▾"; position: static; }   /* the 🏷️ chip opens a sheet; its 44px target comes from the padding box */
.fcount { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; font-size: var(--t-xs); color: var(--fg-2); }
.fcount .mini { margin: 0; }
.fempty { margin: 24px 0; text-align: center; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.6; }
.fempty .btn { margin-top: 12px; }
.rl-meta .kind { color: var(--mint); font-weight: 700; }   /* a post in the search results: "🎨 פוסט · מוכן" / "📤 פוסט · פורסם" (87) */

/* 📌 מה למדתי (the learner, part 1; 06's learner branch, copy 87): the preferences Nadav or Yotam asked the bot to keep.
   A sheet opened from the user's window (entry: a .type.wide "📌 מה למדתי" with the count). Groups: .prefs-h (small label
   with a count) over .prefs-list rows: the preference (b), who and when (small), and "🗑️ מחק". Deleting asks in the row
   itself: li.confirm gets an amber edge and a .pconfirm line ("למחוק את ההעדפה?" 🗑️ מחק / ביטול) across the row. */
.prefs + .prefs { margin-top: 14px; }
.prefs-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--t-sm); font-weight: 700; color: var(--fg-2); }
.prefs-h .n { color: var(--muted); font-weight: 600; }
.prefs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prefs-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.prefs-list b { display: block; font-size: var(--t-sm); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.prefs-list small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.prefs-list li.confirm { box-shadow: inset 0 0 0 1.5px var(--warn); }
.pconfirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pconfirm > span { margin-inline-end: auto; color: var(--warn); font-size: var(--t-sm); font-weight: 700; }
.btn.bad { color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad); background: transparent; }   /* a destructive confirm, e.g. 🗑️ מחק */
.prefs-empty { margin: 8px 0; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.6; }
.saved.gone { opacity: .55; text-decoration: line-through; }   /* after "תשכח את זה": the pill stays, struck through, without its button */

/* Published on Instagram (06's published branch; decision 47 detection): in .pv-state the title becomes "✅ עלה לאינסטגרם",
   .pv-src gives the time, and .pv-ig-n holds the numbers, one row per checkpoint (after 24 hours, after a week):
   likes and comments (no views), then .vs, the comparison with Nadav's median ("📈 פי 1.8 מהחציון שלך"; under it .vs.down,
   neutral, never red). Before the first checkpoint the box says when the numbers come (.wait). A manual "סמן שעלה" that the
   bot can't find yet is .pv-ig-miss (amber), with a .mini to paste the post's link. "פתח באינסטגרם ↗" joins .links. */
.pv-ig-n { display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.pv-ig-n .r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--t-sm); }
.pv-ig-n .when { min-width: 90px; color: var(--muted); font-size: 12px; font-weight: 600; }
.pv-ig-n b { font-variant-numeric: tabular-nums; font-weight: 800; }
.pv-ig-n .vs { padding: 2px 9px; border-radius: 999px; background: var(--mint-soft); color: var(--mint); font-size: 12px; font-weight: 700; }
.pv-ig-n .vs.down { background: var(--surface-3); color: var(--fg-2); }
.pv-ig-n .wait { color: var(--muted); font-size: 12px; }
.pv-ig-miss { margin: 0; color: var(--warn); font-size: var(--t-sm); line-height: 1.5; }
.pv-ig-miss .mini { margin-inline-start: 6px; }

/* v1.1 ➕ הוסף מקור (copy 87 v1.1-copy-draft §2): on the sources screen a .btn row opens .sheet "addsrc": one field
   (a page link, @handle, a site or its RSS) with "הוסף" in a .row, the hint, then one result line under it:
   .add-res (✅ added / ⏳ checking, neutral) or .sheet-warn (blocked, no readable feed, a post link, Facebook/TikTok/X,
   the Instagram limit). A new row in the list flashes .srow.just for 2s; a site still being checked says so in .s-meta. */
.src-add { display: flex; margin-bottom: 4px; }
.add-res { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--fg); overflow-wrap: anywhere; }
.add-res.busy { color: var(--fg-2); }
.srow.just { background: var(--mint-soft); box-shadow: inset 0 0 0 1.5px var(--mint-line); transition: background 1.2s ease 2s, box-shadow 1.2s ease 2s; }
@media (prefers-reduced-motion: reduce) { .srow.just { transition: none; } }

/* v1.1 🛰️ גם X פרסם (copy 87 v1.1-copy-draft §3): one lead, several sources. In the list row's meta a quiet count
   (.also "🛰️ 3"); in the lead's hero, under "הרדאר תפס…", .also with the sources by name (each a link to its article);
   in the notes thread, .act lines "🛰️ גם ynet פרסם · 14:20" (the name links), or a bot bubble when the new source
   adds a detail, plus "לעדכן את הפוסט?" with .m-acts when the lead is already a post. No push. */
.also { color: var(--fg-2); }
.also a, .act a { color: var(--mint); font-weight: 700; text-decoration: none; }
.act .av-bot { display: inline-grid; place-items: center; border-radius: 50%; font-size: 11px; flex: none; }

/* v1.1 ✏️ Canva link (ca's canva-link; copy 87 and canva_link.py). The ✏️ button takes two taps on iPhone, because
   Safari blocks opening a page after a wait: tap 1 sends ("⏳ שולח לקנבה…", aria-busy), then the same button turns
   .ready "✏️ פתח בקנבה" (mint edge) and tap 2 opens Canva. An error shows under the actions as .sheet-warn with a .mini
   "💾 הורד את הקובץ" (the download always works). The user's window has a .setrow: "🔗 חבר את קנבה", or
   "✅ קנבה מחוברת" + "מחובר כ-…" + "נתק". */
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.btn.ready { box-shadow: inset 0 0 0 1.5px var(--mint); color: var(--mint); }
.pv-acts .sheet-warn .mini { margin-inline-start: 6px; }

/* v1.1 ✂️ הסר רקע (ca's cutout): in the 🖼️ sheet the new slot shows the cut-out on a dark checkerboard (.checker);
   while it runs, .up.busy carries the spinner and "⏳ מסיר רקע…"; a failure is .sheet-warn.bad; "↩️ החזר מקור" undoes. */
.checker { background-color: #1a2129; background-image: conic-gradient(#27313b 25%, transparent 0 50%, #27313b 0 75%, transparent 0); background-size: 20px 20px; }
.rep .up.cut img { object-fit: contain; }
.up.busy::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.up .busy-t { position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%); z-index: 1; text-align: center; font-size: 12px; font-weight: 800; color: var(--fg); }

/* v1.1 video slides (#7): while the server works on a video the slide shows .slide-busy with the step and a progress
   bar (.pbar, --p); a failure is .slide-fail over the poster, with "↻ נסה שוב" and "🖼️ שים תמונה במקום". */
.slide-busy .pbar { width: 58%; height: 4px; border-radius: 2px; overflow: hidden; background: var(--line-2); }
.slide-busy .pbar > i { display: block; height: 100%; width: var(--p, 0%); background: var(--mint); }
.slide-busy .pct { font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.slide-fail { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 18px; background: rgba(0, 0, 0, .74); text-align: center; color: var(--fg); font-size: var(--t-sm); font-weight: 700; line-height: 1.5; }
.slide-fail .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* a .pconfirm on its own (not inside a .prefs-list row), e.g. "לנתק את קנבה?" in the user's window: the same amber-edged box */
.sheet-b > .pconfirm, .setrow + .pconfirm { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--warn); }
/* an option card's image description (decision 91 / deploy 3): the "what's in the picture" line under the card's title,
   as Nadav's or the eye check's words, not glued to the label */
.op-desc { margin: 0; color: var(--fg-2); font-size: 12.5px; line-height: 1.5; }
.op-desc::before { content: "💬 "; }
/* a bot reply listing items ("✍️ תיקנתי חלק. לא עשיתי:" + "· …" lines): hanging indent so a wrapped item stays under its text */
.bubble ul.items { margin: 4px 0 0; padding: 0; list-style: none; white-space: normal; }
.bubble ul.items li { position: relative; padding-inline-start: 14px; }
.bubble ul.items li + li { margin-top: 4px; }
.bubble ul.items li::before { content: "·"; position: absolute; inset-inline-start: 2px; font-weight: 800; }

/* ✍️ מה לתקן? without hiding the post (Nadav 19.10: "התיבה עולה על הפוסט ואז קשה לראות").
   .sheet.fixdock on the fix sheet:
   – desktop, from 960 (the post view is two columns): no scrim; the panel docks to the left edge, full height under the
     top bar, over the info column only, so the carousel stays visible and usable (the sheet layer lets clicks through).
   – phone: a lower sheet (≤ 56dvh, above the keyboard) with .fix-thumbs, the numbered slides; a tap shows that slide
     big in .fix-prev above the sheet (the app sets --sheet-h, the panel's height, with a ResizeObserver). */
.fix-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: 2px -2px 0; }
.fix-thumbs::-webkit-scrollbar { display: none; }
.fix-thumbs button { position: relative; flex: none; width: 52px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; padding: 0; border: 0; background: var(--media-bg); }
.fix-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fix-thumbs button i { position: absolute; bottom: 3px; inset-inline-end: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--overlay); color: #fff; font: 800 11px/18px inherit; font-style: normal; text-align: center; }
.fix-thumbs button[aria-pressed="true"] { outline: 2px solid var(--mint); outline-offset: 2px; }
.fix-thumbs button::after { content: ""; position: absolute; inset: -4px; }   /* 60×73 target */
.fix-prev { position: absolute; z-index: 1; inset-inline: 16px; top: calc(var(--safe-t, 0px) + 12px); bottom: calc(var(--sheet-h, 56dvh) + var(--kb, 0px) + 12px); display: flex; justify-content: center; pointer-events: none; }
.fix-prev[hidden] { display: none; }
.fix-prev img { height: 100%; width: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 10px; box-shadow: var(--shadow); pointer-events: auto; }
@media (max-width: 959px) {
  .sheet.fixdock .sheet-p { max-height: min(56dvh, calc(100dvh - var(--kb, 0px) - 160px)); }
  .sheet.fixdock .sheet-bg { background: rgba(0, 0, 0, .35); }   /* lighter: the post stays readable above the sheet */
}
@media (min-width: 960px) {
  .sheet.fixdock { pointer-events: none; }
  .sheet.fixdock .sheet-bg { display: none; }
  .sheet.fixdock .sheet-p { pointer-events: auto; top: 60px; bottom: 0; left: 0; right: auto; transform: none; width: min(440px, 36vw); max-height: none; border-radius: 0 20px 0 0; box-shadow: 8px 0 32px rgba(0, 0, 0, .45); }
  .sheet.fixdock .fix-thumbs, .sheet.fixdock .fix-prev { display: none; }   /* the carousel is right there */
}
@media (max-width: 959px) {   /* typing (keyboard open): the sheet keeps only what's needed, so the slide above has room */
  html.kb-open .sheet.fixdock .sheet-s, html.kb-open .sheet.fixdock .quick, html.kb-open .sheet.fixdock .grab { display: none; }
  html.kb-open .sheet.fixdock textarea { height: 76px; min-height: 0; }
  html.kb-open .sheet.fixdock .sheet-b { margin-top: 10px; gap: 10px; }
}

/* v1.1 "already covered" (87, TRIAGE 1.12, maybe_covered):
   – a below-threshold item Nadav already posted about gets .covered under it, across the row and outside the article
     link: "📤 כבר כיסית את זה ב-16.10: ״…״" and a link to his post ("לפוסט שלך ↗", new tab);
   – a lead that moves his story on gets .chip-e.cont in the hero, "🧵 המשך לפוסט שלך מ-16.10" (a link to that post),
     and .cont-e "🧵 המשך" in its list row. One set (87): 🎨 ready, 📤 published, 🧵 follow-up; 🔁 is the comeback category. */
.nitem .covered { grid-column: 1 / -1; margin: 0; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--fg-2); font-size: var(--t-xs); line-height: 1.5; overflow-wrap: anywhere; }
.nitem .covered a, .chip-e.cont { color: var(--mint); font-weight: 700; text-decoration: none; position: relative; }
.nitem .covered a { margin-inline-start: 6px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 32px; vertical-align: middle; }
.nitem .covered a::after { content: ""; position: absolute; inset: -6px -8px; }   /* 44px tall without leaving the row (the accordion clips) */
.chip-e.cont { background: var(--mint-soft); box-shadow: inset 0 0 0 1px var(--mint-line); }
.chip-e.cont::after { content: ""; position: absolute; inset: -8px 0; }
.cont-e { color: var(--mint); font-weight: 700; }

/* V1 gaps vs the SPEC (06's pass, 19.10) */
.lead-shot { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; margin-inline: auto; object-fit: contain; border-radius: var(--r-lg); background: var(--media-bg); box-shadow: inset 0 0 0 1px var(--line); }   /* §3.4: a lead sent as a screenshot, in its "🖼️ צילום המסך" accordion */
.chip-e.gone { background: var(--surface-2); color: var(--muted); }   /* "⌛ כבר לא טרי" (87): the window chip of a lead whose window has passed */
.pthumb:not(:has(img))::before { content: "🎨"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; opacity: .35; }   /* a post with no rendered cover (a sample, or a render that failed): not an empty box */

/* ✏️ Slide editor (Nadav 20.10: per slide, the album of all the pictures to pick the main one and the ring, and the
   slide's text to edit; "התיבה שנפתחת כרגע מסתירה את השקופית"). Tapping a slide opens .sheet.fixdock "slideedit":
   the slide stays visible (phone: .fix-prev shows it above the lower sheet, always; desktop: the docked panel), and
   .seg tabs switch 🖼️ תמונות / ✏️ טקסט / 🎬 וידאו (video slides only); one 🎨 button saves the changes of all tabs.
   ✏️: one .field per text block of this slide, labelled by its role, with .count = characters / the block's budget from
   the engine (.over past it; saving is still allowed); saving re-renders this slide only (no writer). 🖼️: .album = every picture of the post and the lead as .up tiles; the slide's main one wears
   .is-main (mint outline + "ברקע"), its ring photo .is-ring (dashed, "⭕"); a tap selects a tile (aria-pressed) and .album-acts
   offers "🖼️ ברקע" / "⭕ בעיגול" for it; "+" adds a picture. */
.slideedit .fix-prev { pointer-events: none; }
.slideedit .fix-prev img { pointer-events: none; }
.slide-fields { display: grid; gap: 12px; }
.slide-fields .field label { display: flex; justify-content: space-between; gap: 8px; }
.slide-fields .count { color: var(--muted); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.slide-fields .count.over { color: var(--warn); }
.slide-fields textarea { min-height: 0; resize: vertical; }
.album { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.album .up { padding: 0; border: 0; cursor: pointer; }
.album .up.is-main { outline: 3px solid var(--mint); outline-offset: 2px; }
.album .up.is-ring { outline: 2px dashed var(--mint); outline-offset: 2px; }
.album a.up.add { text-decoration: none; }
.slideedit [data-pane] { display: grid; gap: 12px; }
.slideedit [data-pane][hidden] { display: none; }
.album .up .role { position: absolute; top: 4px; right: 4px; padding: 1px 6px; border-radius: 6px; background: var(--mint); color: var(--mint-ink); font-size: 10.5px; font-weight: 800; }
.album .up[aria-pressed="true"]:not(.is-main) { outline: 2px solid var(--fg); outline-offset: 2px; }
.album-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.album-acts > span { margin-inline-end: auto; color: var(--fg-2); font-size: var(--t-sm); }
html.kb-open .slideedit .slide-fields textarea { height: auto; }   /* the fix sheet's 76px is for its one field */
/* a long album (11 pictures and more) pushed the actions and 🎨 under the fold, away from the tile just tapped
   (ca's E2E, 20.10): both stick to the sheet's bottom while the album scrolls under them.
   The sheet's bottom padding moves into the footer (--se-pb), or the album would show through under a sticky footer. */
.slideedit .sheet-p { --se-pb: calc(20px + var(--safe-b, 0px)); padding-bottom: 0; }
html.kb-open .slideedit .sheet-p { --se-pb: 14px; padding-bottom: 0; }
@media (min-width: 720px) { .slideedit .sheet-p { --se-pb: 26px; } }
.slideedit .sheet-foot { position: sticky; bottom: 0; z-index: 2; margin-top: 0; padding: 10px 0 var(--se-pb); background: var(--surface); }
.slideedit .album-acts { position: sticky; bottom: calc(62px + var(--se-pb)); z-index: 2; padding-block: 8px; background: var(--surface); }
/* "קטנה מדי לרקע. אפשר רק בעיגול." lives inside the sticky row (last, full width), so a small tile's reason shows
   next to its disabled "🖼️ ברקע" and never hides under the footer */
.album-acts > .hint { flex-basis: 100%; margin: 0; }

/* 🏁 "זה העיצוב הסופי שלי" (Nadav approved, 06 builds 10-22; 🏁 since the post already has "✅ עלה לאינסטגרם"): Nadav uploads the slides he finished in Canva; the bot
   compares them with its own, slide by slide, and asks which lessons to keep. The final slides don't replace the bot's
   (💾 and 📤 stay on the bot's); they live beside the post.
   · .final-btn: a wide ghost row under .row3 in .pv-acts (and the same item in the post's ⋯). After an upload it turns
     .done ("🏁 העיצוב הסופי הועלה · 17:40") and links to the result card in the notes.
   · sheet "final": .fin-drop (pick images or Canva's ZIP), then .fin-grid (numbered 4:5 tiles in file-name order),
     .fin-count (.ok / .warn), and on a different count a .fin-match select under each tile ("מול 1" … / "➕ חדשה"), so
     each of his slides is compared with the right one of the bot's. A bad file gets .warn on its tile and a .sheet-warn.
   · result: a bot message in the notes: "🔎 השוויתי…", .fin-res (per slide: .fin-pair bot ← his, and the changes, one
     emoji per kind; slides without change fold into .fin-same), then "📌 מה אלמד מזה?" .fin-lessons with ✓ ללמוד / ✗ לא
     per lesson; a decided row is .yes / .no with "שנה". */
.pv-acts .final-btn { width: 100%; justify-content: flex-start; gap: 10px; min-height: 56px; text-align: start; white-space: normal; line-height: 1.25; }
.pv-acts .final-btn > .em { font-size: 18px; line-height: 1; }
.pv-acts .final-btn small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.pv-acts .final-btn.done { box-shadow: inset 0 0 0 1.5px var(--mint-line); }
.fin-drop { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 150px; padding: 16px; border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px var(--line-ctl); color: var(--fg); font-size: var(--t-md); font-weight: 800; text-align: center; cursor: pointer; }
.fin-drop small { color: var(--muted); font-size: 12px; font-weight: 500; }
.fin-drop:focus-within { box-shadow: inset 0 0 0 2px var(--mint); }
.fin-count { margin: 0; font-size: var(--t-sm); font-weight: 700; }
.fin-count.ok { color: var(--mint); }
.fin-count.warn { color: var(--warn); }
.fin-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fin-grid .fin-cell { display: grid; gap: 4px; min-width: 0; }
.fin-grid .up { aspect-ratio: 4 / 5; }
.fin-grid .up.warn { box-shadow: 0 0 0 2px var(--warn); }
.up .num { position: absolute; top: 4px; right: 4px; min-width: 20px; padding: 0 5px; border-radius: 6px; background: var(--overlay); color: #fff; font-size: 11px; font-weight: 800; text-align: center; line-height: 20px; }
.up.warn .num { background: var(--warn); color: #000; }
.fin-match { width: 100%; min-width: 0; min-height: 44px; padding: 0 6px; border-radius: 10px; border: 0; background: var(--surface-2); color: var(--fg); font: inherit; font-size: 16px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line-ctl); }   /* 16px: iOS zooms into smaller fields */
.fin-grid:has(.fin-match:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* matching: bigger tiles, room for the select */
.fin-res { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.fin-res > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.fin-res > li.fin-same { display: block; color: var(--muted); font-size: 12.5px; }
.fin-pair { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.fin-pair img { width: 56px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; display: block; }
.fin-pair .none { width: 56px; aspect-ratio: 4 / 5; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; }
.fin-chg { display: contents; }   /* the title sits beside the pair, the changes run full width under both */
.fin-chg b { font-size: var(--t-sm); }
.fin-chg ul { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; color: var(--fg-2); font-size: 13px; }
.fin-chg .diff { grid-column: 1 / -1; margin-top: 0; background: var(--surface-3); }
.fin-lessons { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.fin-lessons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: var(--t-sm); font-weight: 700; line-height: 1.45; }
.fin-lessons .acts { display: flex; gap: 6px; }
.fin-lessons em { font-style: normal; font-size: 12px; color: var(--mint); white-space: nowrap; }
.fin-lessons li.no > span { color: var(--muted); font-weight: 500; }
.fin-lessons li > span small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; }   /* the lesson's why (87, FINALDIFF_PACK) */
.fin-lessons li.no em { color: var(--muted); }
/* in a chat bubble the row is ~290px on a phone: the buttons go under the lesson, or it wraps to 5 narrow lines (round 8, 20.10) */
@media (max-width: 719px) { .fin-lessons li { grid-template-columns: 1fr; } .fin-lessons .acts { justify-content: flex-start; } }
/* "לצאת בלי לשמור?" sits right above the footer in the DOM, so the sticky footer covered it and ✕ seemed to do nothing
   (round 5, 20.10): it sticks above the footer too, over the album row while it asks */
.slideedit .sheet-b .pconfirm { position: sticky; bottom: calc(62px + var(--se-pb)); z-index: 3; }

/* v1.1 🪄 in the slide window (§8.22; 0f/ca 20.10: it was only in the old list sheet). Background removal is an action on
   the selected picture, so it lives in .album-acts with "🖼️ ברקע" / "⭕ בעיגול", and runs in the album itself:
   · the tile turns .busy ("⏳ מסיר רקע…"); the other tiles and actions keep working;
   · the result is a new tile right after its original: .up.cut on the checkerboard, contained, with the .cut-tag "🪄";
     it comes selected, and if the original held a slot on this slide (ברקע / ⭕) the cut-out takes it, waiting for 🎨;
   · a cut-out tile holding a slot shows "↩️ התמונה המקורית" in .album-acts (in place of 🪄): the original goes back
     into that slot, also waiting for 🎨. A cut-out tile never shows 🪄 again;
   · a failure: the tile comes back, and the hint row of .album-acts says why (as "קטנה מדי לרקע"). */
.album .up.cut { background-color: #1a2129; background-image: conic-gradient(#27313b 25%, transparent 0 50%, #27313b 0 75%, transparent 0); background-size: 14px 14px; }
.album .up.cut img { object-fit: contain; }
.up .cut-tag { position: absolute; bottom: 4px; left: 4px; padding: 1px 5px; border-radius: 6px; background: var(--overlay); font-size: 11px; line-height: 1.4; }
/* 🏁 a change that already matches today's rules (87, FINALDIFF_PACK 1.1: e.g. the hl in mint, rendered before
   decision 87) ends with .known "✓ כבר ככה" (87), greyed like .fin-same, with one .fin-legend under the list, so it reads as no decision needed */
.fin-chg li .known { color: var(--muted); font-weight: 500; white-space: nowrap; }
.fin-legend { margin: 6px 2px 0; color: var(--muted); font-size: 12px; }   /* once under .fin-res, only when a row has .known */

/* 🧩 Studio, a proposal (Nadav 21.10: "לשפר את מנגנון עיצוב הפוסטים"; out/design-gap/studio.html). Not built; behind a
   flag until Nadav picks. In the slide window: a 4th tab "🧩 עיצוב" with
   · .lay-row: the layouts this slide's pictures allow, as rendered 4:5 cards scrolling sideways (radio; "עכשיו" on the
     current one). Picking one re-renders with the same text and pictures, waiting for 🎨 like the album;
   · .st-row presets, not free drag: the ring's corner on a .pos-map (2×2 of the slide), its size (.chip), the text's place,
     the kicker's size. The template keeps its distances, so text never runs into the ring; free placement stays in Canva.
   In ✏️ טקסט, .fmt: select words in a box, then "🟢 מנטה" / "⚪ לבן" (wraps them in *…*).
   The sheet "order" (⋯ → "↕️ סדר השקופיות"): .ord-list rows with ▲ ▼ and 🧹 (big buttons, no drag: iPhone), the cover locked. */
.fmt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.fmt > span { flex: 1 0 100%; color: var(--muted); font-size: 12.5px; }
.st { display: grid; gap: 10px; }
.st + .st { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.st-h { margin: 0; font-size: var(--t-sm); font-weight: 800; }
.lay-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lay-row::-webkit-scrollbar { display: none; }
.lay { position: relative; flex: 0 0 96px; display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--fg-2); font: inherit; font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; scroll-snap-align: start; }
.lay img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; display: block; box-shadow: inset 0 0 0 1px var(--line-2); }
.lay[aria-checked="true"] img { outline: 3px solid var(--mint); outline-offset: 2px; }
.lay[aria-checked="true"] { color: var(--fg); }
.lay em { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 6px; background: var(--mint); color: var(--mint-ink); font-style: normal; font-size: 10.5px; font-weight: 800; }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-row > span { flex: 1 0 100%; color: var(--fg-2); font-size: 13px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--surface-2); color: var(--fg-2); font: inherit; font-size: 13.5px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line-ctl); cursor: pointer; }
.chip[aria-checked="true"] { background: var(--mint); color: var(--mint-ink); box-shadow: none; }
.pos-map { display: grid; grid-template-columns: repeat(2, 44px); grid-template-rows: repeat(2, 55px); gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-ctl); }
.pos-map button { position: relative; border: 0; border-radius: 7px; background: var(--surface-3); cursor: pointer; }
.pos-map button[aria-checked="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 3px var(--mint); }
/* the map shows the text too (Nadav's iPhone check, 22.10: "למעלה מוריד אותו למטה": picking the text's place moved the
   ring by itself, and the map showed only the ring). The app sets data-text="top|mid|bottom" on .pos-map; three thin
   white lines mark where the text sits, over the cells, so he sees the ring step aside for it. */
.pos-map { position: relative; }
.pos-map::after { content: ""; position: absolute; left: 10px; right: 10px; height: 17px; z-index: 1; pointer-events: none; border-radius: 3px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .7) 0 3px, transparent 3px 7px); }
.pos-map[data-text="top"]::after { top: 12px; }
.pos-map[data-text="mid"]::after { top: calc(50% - 8px); }
.pos-map[data-text="bottom"]::after { bottom: 10px; }
.pos-map:not([data-text])::after { display: none; }
.ord-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ord-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.ord-row > img { width: 48px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; display: block; }
.ord-row b { display: block; font-size: var(--t-sm); overflow-wrap: anywhere; }
.ord-row small { color: var(--muted); font-size: 12px; }
.ord-acts { display: flex; gap: 6px; }
.ord-acts .icon-btn:disabled { opacity: .35; }
.ord-lock { font-size: 16px; padding-inline: 10px; }
/* studio: the Instagram caption edited in place ("✏️ ערוך" next to 📋; 💾 שמור / ביטול) */
.cap-edit textarea { width: 100%; font-size: 16px; line-height: 1.6; }
/* studio: a size chip with no ring photo yet (pick one in the album with "⭕ בעיגול"); forbidden sizes are not shown at all */
.chip:disabled { opacity: .4; cursor: default; box-shadow: inset 0 0 0 1px var(--line); }
.chip:disabled[aria-checked="true"] { background: var(--surface-2); color: var(--fg-2); }

/* 🧩 Studio stage 2 (§8.25): the layout cards are real previews of this slide (the server renders the alternatives when
   the tab opens, 288×360, cached by slide + layout + text); .lay.busy while one renders. A picked layout waits for 🎨,
   and the preview above shows it in .fix-prev.pending (a dashed mint edge, like an album choice not yet designed). */
.lay.busy img { opacity: .35; }
.lay-busy { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 4 / 5; display: grid; place-items: center; font-size: 22px; }
.fix-prev.pending img { outline: 3px dashed var(--mint); outline-offset: 3px; }
/* ✏️ rich fields: a contenteditable box that looks like the textarea; mint words show in mint; the selection the
   🟢 / ⚪ buttons act on is the system one (.sel only marks it in the demo). The hl is mint or white as a whole. */
.rt { min-height: 48px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-ctl); color: var(--fg); font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.rt:focus { box-shadow: inset 0 0 0 2px var(--mint); }
.rt .m { color: var(--mint); font-weight: 700; }
.rt mark.sel { background: rgba(102, 248, 205, .28); color: var(--fg); border-radius: 3px; }
textarea.hl-mint { color: var(--mint); font-weight: 700; }
.hl-col { margin-top: 8px; }
.fmt[data-on="1"] { position: sticky; top: 0; z-index: 2; padding-block: 6px; background: var(--surface); }
/* 🧩 Studio stage 3 (§8.26). In the order sheet a slide taken out stays in the list until 💾 (.out, faded, "↩️ החזר"),
   a slide added from the album is .new (a mint edge, "עוד בלי טקסט") */
.ord-row.out { opacity: .5; }
.ord-row.out b { text-decoration: line-through; }
.ord-row.new { box-shadow: inset 0 0 0 1.5px var(--mint-line); }
.ord-row small { display: block; }