/* Heebo, self-hosted so visitors' addresses never reach Google (SIL Open Font License, assets/fonts/OFL.txt).
   One variable file per script covers every weight from 400 to 900. */
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/heebo-v28-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/heebo-v28-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --navy: #0f1f3d; --navy-deep: #0a1529; --navy-soft: #16294f;
  --gold: #e8b64a; --gold-deep: #d4a033; --gold-soft: #fbf3dc;
  --ink: #111827; --text: #374151; --muted: #6b7280; --faint: #9ca3af;
  --line: #e5e7eb; --line-soft: #f1f3f6; --bg: #ffffff; --bg-alt: #f7f8fa;
  --green: #16a34a; --amber: #d97706; --red: #dc2626; --blue: #2563eb; --violet: #7c3aed;
  --r: 14px; --r-lg: 22px;
  --shadow: 0 2px 6px rgba(15,31,61,0.06), 0 24px 60px -20px rgba(15,31,61,0.25);
  --font: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg-alt); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--navy); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

.boot { min-height: 100vh; display: grid; place-content: center; gap: 1rem; justify-items: center; color: var(--muted); }
.ring { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; display: inline-block; flex: none; }
.ring-gold { border-color: var(--gold); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border-radius: 10px; font-weight: 700; font-size: 0.92rem; border: 1.5px solid transparent; cursor: pointer; background: var(--bg-alt); color: var(--navy); transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); background: #eef0f4; }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn-gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 8px 24px -8px rgba(232,182,74,0.7); }
.btn-gold:hover { background: var(--gold-deep); }
.btn-outline { border-color: var(--line); background: #fff; }
.btn-outline:hover { border-color: var(--gold); background: var(--gold-soft); }
.btn-danger { color: var(--red); background: #fff; border-color: var(--line); }
.btn-danger:hover { background: #fef2f2; border-color: #fecaca; }
.btn-ghost { background: transparent; color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.35); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.85rem; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-lg { padding: 0.85rem 1.4rem; font-size: 1rem; }
.btn-link { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 600; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; }
.btn-icon:hover { background: var(--bg-alt); border-color: var(--line); color: var(--navy); }

/* Auth layout */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-side { background: var(--navy-deep); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-side::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; border: 60px solid rgba(232,182,74,0.12); inset-inline-end: -180px; bottom: -200px; }
.auth-side::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(255,255,255,0.05); inset-inline-start: -100px; top: 120px; }
.auth-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.6rem; position: relative; z-index: 1; }
.auth-brand .ring { border-color: #fff; }
.auth-copy { position: relative; z-index: 1; max-width: 30rem; }
.auth-copy h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 900; margin-bottom: 1rem; }
.auth-copy p { color: rgba(255,255,255,0.78); font-size: 1.1rem; line-height: 1.6; }
.auth-foot { position: relative; z-index: 1; color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.auth-foot a { color: rgba(255,255,255,0.75); }
.auth-main { display: grid; place-items: center; padding: 2.5rem 1.5rem; background: var(--bg); }
.auth-card { width: min(440px, 100%); }
.auth-card h2 { font-size: 1.8rem; margin-bottom: 0.4rem; }
.auth-card .lede { color: var(--muted); margin-bottom: 1.6rem; line-height: 1.6; }
.auth-switch { margin-top: 1.6rem; color: var(--muted); font-size: 0.92rem; text-align: center; }
.auth-switch a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.otp-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; direction: ltr; }
.otp-box { width: 100%; aspect-ratio: 0.85; min-height: 56px; text-align: center; font-size: 1.7rem; font-weight: 800; color: var(--ink); padding: 0; border-radius: 10px; border: 1px solid var(--line); background: #fff; caret-color: var(--gold-deep); transition: border-color .15s, box-shadow .15s; }
.otp-box:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.otp-box:not(:placeholder-shown):not(:focus) { border-color: var(--navy-soft); }
.dev-code { background: var(--gold-soft); border: 1px dashed var(--gold); border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.88rem; color: #7a5a12; margin-bottom: 1rem; }
.dev-code b { font-size: 1.1rem; letter-spacing: 0.15em; direction: ltr; display: inline-block; }
.auth-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.8rem; font-size: 0.9rem; }

/* Forms */
.form { display: grid; gap: 0.95rem; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.field { display: grid; gap: 0.3rem; font-size: 0.86rem; font-weight: 700; color: var(--navy); }
.field > span { display: flex; justify-content: space-between; }
.field small { color: var(--faint); font-weight: 500; }
.field input, .field select, .field textarea { font-weight: 400; padding: 0.65rem 0.85rem; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s; }
/* A locked field (a house, a role, a parent's contact rules) reads as fixed, not as an empty box to fill. */
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--bg-alt); color: var(--muted); cursor: not-allowed; }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.field-check { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.field-check input { width: 18px; height: 18px; accent-color: var(--gold-deep); }
.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 10px; padding: 0.6rem 0.85rem; font-size: 0.9rem; }
.notice { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-radius: 10px; padding: 0.6rem 0.85rem; font-size: 0.9rem; }

/* App shell */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: var(--navy); color: #fff; padding: 1.3rem 0.9rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.3rem; padding: 0.2rem 0.6rem 1rem; }
.side-org { padding: 0 0.6rem 1.2rem; color: rgba(255,255,255,0.6); font-size: 0.82rem; margin-top: -0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side nav { display: grid; gap: 2px; overflow-y: auto; min-height: 0; }
.side nav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.75rem; border-radius: 9px; color: rgba(255,255,255,0.8); font-weight: 500; font-size: 0.93rem; }
.side nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.side nav a.on { background: rgba(255,255,255,0.09); color: var(--gold); font-weight: 700; }
.side nav a .ic { background: currentColor; opacity: 0.9; }
.side-user { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 0.9rem; display: flex; align-items: center; gap: 0.6rem; }
.side-user .av { width: 34px; height: 34px; }
.side-user b { display: block; font-size: 0.9rem; }
.side-user small { color: rgba(255,255,255,0.55); font-size: 0.75rem; display: block; }
.side-user .btn-icon { margin-inline-start: auto; color: rgba(255,255,255,0.6); }
.side-user .btn-icon:hover { background: rgba(255,255,255,0.08); border-color: transparent; color: #fff; }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 2rem 0; }
.topbar h1 { font-size: 1.6rem; }
.topbar p { color: var(--muted); font-size: 0.9rem; margin-top: 0.1rem; }
.topbar-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.content { padding: 1.4rem 2rem 3rem; display: grid; gap: 1.2rem; min-width: 0; }
.menu-toggle { display: none; }

/* Cards & tables */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 1px 2px rgba(15,31,61,0.04); min-width: 0; }
[data-section] { scroll-margin-top: 1rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--line-soft); }
/* A title never gives way to the hint beside it: on a narrow card the hint wraps below instead. */
.card-head h3 { font-size: 1rem; flex: 0 0 auto; max-width: 100%; }
.card-head .hint { color: var(--muted); font-size: 0.85rem; }
.card-body { padding: 1.2rem; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
/* Cards side by side share the row's height, so a short card never leaves a hole beside a tall one. */
.grid-2.rows-even { align-items: stretch; }
.grid-2.rows-even.measuring { align-items: start; }
.grid-2.stacked { grid-template-columns: minmax(0, 1fr); }
.stat-note { color: var(--muted); font-size: 0.86rem; margin-top: -0.4rem; }
.stack { display: grid; gap: 1.2rem; align-content: start; }
.kv { display: grid; margin: 0; }
.kv > div { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem 1rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--line-soft); }
.kv > div:first-child { border-top: 0; padding-top: 0; }
.kv > div:last-child { padding-bottom: 0; }
.kv dt { font-size: 0.86rem; font-weight: 700; color: var(--navy); display: grid; gap: 0.1rem; }
.kv dt small { color: var(--faint); font-weight: 500; }
.kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.kv dd.kv-empty { color: var(--faint); }
.form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.search { display: flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.9rem; color: var(--faint); min-width: 240px; }
.search input { border: 0; outline: 0; background: transparent; width: 100%; color: var(--ink); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tbl th { text-align: start; color: var(--muted); font-weight: 600; font-size: 0.78rem; padding: 0.6rem 1rem; background: var(--bg-alt); white-space: nowrap; }
.tbl td { padding: 0.75rem 1rem; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr { cursor: pointer; transition: background .1s; }
.tbl tbody tr:hover { background: #fbfbfc; }
.tbl tbody tr.static { cursor: default; }
.tbl td.name { font-weight: 700; color: var(--ink); }
.tbl td.name .av { margin-inline-end: 0.55rem; vertical-align: middle; }
.tbl td.dim { color: var(--muted); }
.tbl td.nowrap { white-space: nowrap; }
.tbl th.sel, .tbl td.sel { width: 2.4rem; text-align: center; }
.tbl tr.dup td { background: #fffbeb; }
a.tel { color: inherit; }
a.tel:hover { color: var(--blue); }
.m-only { display: none; }
.num { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.tbl th[data-sort] { cursor: pointer; user-select: none; }
.tbl th[data-sort]:hover { color: var(--navy); }
.tbl th.sorted { color: var(--navy); }
.tbl th.sorted::after { content: " ↓"; }
.tbl th.sorted.desc::after { content: " ↑"; }
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--gold-soft); color: var(--gold-deep); font-weight: 800; font-size: 0.8rem; }
.av.av-navy { background: var(--navy-soft); color: var(--gold); }
.st { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-green { background: #dcfce7; color: #15803d; }
.st-amber { background: #fef3c7; color: #b45309; }
.st-red { background: #fee2e2; color: #b91c1c; }
.st-blue { background: #dbeafe; color: #1d4ed8; }
.st-gray { background: #f3f4f6; color: #4b5563; }
.st-violet { background: #ede9fe; color: #6d28d9; }
.empty { padding: 2.2rem 1rem; text-align: center; color: var(--muted); display: grid; gap: 0.6rem; justify-items: center; }
.empty b { color: var(--navy); font-size: 1.05rem; }

/* Dashboard */
.greet h2 { font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
.greet p { color: var(--muted); }
.sun { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); display: inline-block; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; position: relative; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.kpi:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi b { display: block; font-size: 1.8rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.1; }
.kpi span { color: var(--muted); font-size: 0.82rem; }
.kpi .kic { position: absolute; top: 0.9rem; inset-inline-end: 0.9rem; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); }
.kic::after { content: ""; width: 18px; height: 18px; background: var(--gold-deep); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.kic-green { background: #dcfce7; } .kic-green::after { background: var(--green); }
.kic-blue { background: #dbeafe; } .kic-blue::after { background: var(--blue); }
.kic-violet { background: #ede9fe; } .kic-violet::after { background: var(--violet); }
.list { display: grid; grid-template-columns: minmax(0, 1fr); }
.list-item { min-width: 0; }
.list-item .st { flex: none; }
.list-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1.2rem; border-top: 1px solid var(--line-soft); }
.list-item:first-child { border-top: 0; }
.list-item .when { flex: none; width: 54px; text-align: center; background: var(--bg-alt); border-radius: 9px; padding: 0.3rem 0; line-height: 1.15; }
.list-item .when b { display: block; font-size: 1.05rem; color: var(--navy); }
.list-item .when small { color: var(--muted); font-size: 0.7rem; }
.list-item .txt { min-width: 0; flex: 1; }
/* Titles get up to two lines before they are cut, so "טיול הרי אילת" is never just "טיול הרי אי…". */
.list-item .txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-size: 0.92rem; overflow-wrap: anywhere; }
.list-item .txt small { color: var(--muted); font-size: 0.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-item.done .txt b { text-decoration: line-through; color: var(--faint); }
.check { width: 20px; height: 20px; accent-color: var(--gold-deep); cursor: pointer; flex: none; }
/* A task row on its way between the open and done lists: it folds shut where it was and unfolds where it lands. */
.list-item.row-anim { overflow: hidden; transition: height .32s ease, padding .32s ease, border-top-width .32s ease, opacity .22s ease, transform .32s ease; }
.list-item.leaving { padding-top: 0; padding-bottom: 0; border-top-width: 0; opacity: 0; }
.list-item.leaving-down { transform: translateY(18px); }
.list-item.leaving-up { transform: translateY(-18px); }
.list-item.arriving { height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; opacity: 0; overflow: hidden; }
.list-item.arriving.from-above { transform: translateY(-18px); }
.list-item.arriving.from-below { transform: translateY(18px); }
.list-item.settle { animation: settle 1.2s ease-out; }
@keyframes settle { 0%, 30% { background: var(--gold-soft); } 100% { background: transparent; } }
.overdue { color: var(--red); }

/* Recruitment board */
/* Wide screens: the stages in as few even rows as fit (fitBoard in app.js sets the column count), never
   scrolling sideways. Columns in one row share its height. */
.board { display: grid; grid-template-columns: repeat(var(--stages, 5), minmax(0, 1fr)); gap: 0.9rem; align-items: start; }
.board .kcol { min-width: 0; }
.kcol { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r); padding: 0.7rem; transition: background .15s, border-color .15s, box-shadow .15s; }
.kcol-head { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem 0.4rem 0.7rem; font-weight: 800; color: var(--navy); font-size: 0.92rem; }
.kcol-head span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0 0.55rem; font-size: 0.78rem; color: var(--muted); }
.kcol-cards { display: grid; gap: 0.6rem; }
/* An empty stage is a thin dashed slot: still a drop target, never a tall blank column. */
.kcol-empty { padding: 0.6rem 0.5rem; font-size: 0.82rem; color: var(--faint); text-align: center; border: 1.5px dashed var(--line); border-radius: 10px; }
.kcol-more { display: block; margin: 0.6rem auto 0; font-size: 0.85rem; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 0.75rem 0.85rem; box-shadow: 0 1px 2px rgba(15,31,61,0.04); }
.kcard[draggable] { cursor: grab; }
.kcard[draggable]:active { cursor: grabbing; }
.kcard.dragging { opacity: 0.35; border-style: dashed; }
.kcard b { display: block; color: var(--ink); cursor: pointer; }
.kcard small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; }
.kcard .next { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text); background: var(--gold-soft); border-radius: 7px; padding: 0.25rem 0.5rem; }
.kcard-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; align-items: center; justify-content: flex-end; }
.kcard-actions .btn { white-space: normal; text-align: center; }
.btn-ghost-dark { background: transparent; color: var(--muted); border-color: transparent; padding-inline: 0.45rem; }
.btn-ghost-dark:hover { background: var(--bg-alt); color: var(--navy); }
.kcard.settle { animation: settle 1.2s ease-out; }
/* While a card is in the air every other column is a target; the one under the pointer lights up. */
.board.is-dragging .kcol { border-style: dashed; }
.board .kcol.drop-over { background: var(--gold-soft); border-color: var(--gold); border-style: solid; box-shadow: 0 0 0 3px rgba(232,182,74,0.25); }
.board.is-dragging .kcard { pointer-events: none; }

/* Phones: one stage at a time, the stage strip above it, swipe sideways to move between stages. */
.board-mobile { display: grid; gap: 0.7rem; }
.stage-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.15rem 0.15rem 0.4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.stage-tabs::-webkit-scrollbar { display: none; }
.stage-tab { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: 0.4rem 0.85rem; font-weight: 700; font-size: 0.86rem; cursor: pointer; white-space: nowrap; }
.stage-tab span { background: var(--bg-alt); border-radius: 999px; padding: 0 0.45rem; font-size: 0.76rem; }
.stage-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.stage-tab.on span { background: rgba(255,255,255,0.15); color: var(--gold); }
.stage-pane { overflow: hidden; touch-action: pan-y; }
.stage-pane .kcol { transition: transform .22s ease, opacity .22s ease; will-change: transform; }
.stage-pane.slide-forward .kcol { animation: slide-forward .26s ease-out; }
.stage-pane.slide-back .kcol { animation: slide-back .26s ease-out; }
@keyframes slide-forward { from { transform: translateX(-40px); opacity: 0; } }
@keyframes slide-back { from { transform: translateX(40px); opacity: 0; } }
[dir="ltr"] .stage-pane.slide-forward .kcol { animation-name: slide-back; }
[dir="ltr"] .stage-pane.slide-back .kcol { animation-name: slide-forward; }
.stage-dots { display: flex; justify-content: center; gap: 0.35rem; }
.stage-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .15s, transform .15s; }
.stage-dots i.on { background: var(--gold-deep); transform: scale(1.3); }

/* Stage editor */
.stage-hint { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.9rem; }
.stage-rows { display: grid; gap: 0.45rem; }
.stage-row { display: grid; grid-template-columns: 1.4rem 1fr auto auto auto auto; gap: 0.35rem; align-items: center; }
.stage-row-n { color: var(--faint); font-size: 0.8rem; font-weight: 700; text-align: center; }
.stage-row input { padding: 0.5rem 0.7rem; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); min-width: 0; width: 100%; }
.stage-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.stage-row-count { color: var(--muted); font-size: 0.78rem; white-space: nowrap; display: inline-flex; gap: 0.35rem; align-items: center; }
.stage-row .btn-icon { font-weight: 700; }
.stage-row .btn-icon:disabled { opacity: 0.3; cursor: default; background: transparent; border-color: transparent; }
.stage-tools { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.8rem; }
.row-actions { display: flex; gap: 0.3rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
.tbl-candidates td.name { display: table-cell; }
.name-link { color: var(--ink); font-weight: 700; }
.tbl .md-show { display: none; }
.cand-sub { display: block; color: var(--muted); font-weight: 400; font-size: 0.8rem; white-space: normal; }
.name-link:hover { color: var(--navy); }

/* Segmented view toggle */
.seg { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 0.4rem 0.85rem; border-radius: 7px; font-weight: 700; font-size: 0.86rem; color: var(--muted); cursor: pointer; }
.seg button:hover { color: var(--navy); }
.seg button.on { background: var(--navy); color: #fff; }

/* Reports */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.bars { display: grid; gap: 0.5rem; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.8rem; align-items: center; font-size: 0.9rem; }
.bar .track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.bar .fill { height: 100%; background: var(--gold); border-radius: 999px; }
.bar b { color: var(--navy); }

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(10,21,41,0.55); display: grid; place-items: center; padding: 1rem; z-index: 100; animation: fade .15s; }
.modal { background: #fff; border-radius: var(--r-lg); width: min(560px, 100%); max-height: calc(100vh - 2rem); overflow: auto; box-shadow: var(--shadow); animation: rise .18s; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem 0.6rem; }
.modal-head h3 { font-size: 1.2rem; }
.modal-body { padding: 0.6rem 1.4rem 1.4rem; }
.modal-foot { display: flex; gap: 0.5rem; justify-content: flex-start; align-items: center; margin-top: 1.2rem; }
.modal-foot .spacer { flex: 1; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }

.toast { position: fixed; bottom: 1.2rem; inset-inline-start: 50%; transform: translateX(50%); background: var(--navy-deep); color: #fff; padding: 0.7rem 1.1rem; border-radius: 10px; box-shadow: var(--shadow); z-index: 200; font-size: 0.92rem; animation: rise .18s; }
.toast.err { background: #991b1b; }

/* Icons (mask-based) */
.ic { width: 17px; height: 17px; display: inline-block; flex: none; background: var(--faint); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ic-home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.ic-users { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21c0-4 3-7 7-7s7 3 7 7M16 4a4 4 0 0 1 0 8M22 21c0-3-2-6-5-7'/%3E%3C/svg%3E"); }
.ic-staff { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.5-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }
.ic-funnel { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E"); }
.ic-cal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M8 14h3M13 14h3M8 18h3'/%3E%3C/svg%3E"); }
.ic-parents { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3Ccircle cx='17' cy='9' r='3'/%3E%3Cpath d='M2 20c0-3.5 2.7-6 6-6s6 2.5 6 6M14 20c0-2.5 1.5-4.5 3.5-5 2 .5 3.5 2.5 3.5 5'/%3E%3C/svg%3E"); }
.ic-shield { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ic-chart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 20h16M7 16v-5M12 16V7M17 16v-9'/%3E%3C/svg%3E"); }
.ic-cog { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }
.ic-search { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
.ic-check { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.ic-logout { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4M15 8l5 4-5 4M20 12H9'/%3E%3C/svg%3E"); }
.ic-x { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ic-menu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.ic-plus { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ic-pencil { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l11-11-4-4L4 16z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E"); }
.ic-download { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E"); }
.btn .ic { background: currentColor; width: 15px; height: 15px; }

/* Responsive */
@media (max-width: 1100px) {
  .kpis, .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 2rem 1.5rem; min-height: 0; }
  .auth-side::before, .auth-side::after { display: none; }
  .auth-copy h1 { font-size: 1.8rem; }
  .auth-copy p { font-size: 1rem; }
  .auth-foot { display: none; }
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset-inline-start: 0; top: 0; width: 260px; z-index: 90; transform: translateX(100%); transition: transform .2s; }
  [dir="ltr"] .side { transform: translateX(-100%); }
  .shell.menu-open .side { transform: none; }
  .menu-toggle { display: inline-grid; }
  .topbar { padding: 1rem 1rem 0; flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .topbar h1 { font-size: 1.35rem; }
  .topbar-actions { justify-content: flex-start; }
  .content { padding: 1rem 1rem 2.5rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .f2 { grid-template-columns: 1fr; }
  /* Tables become a stack of cards: the name on top, every other cell labelled, actions at the bottom. */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.9rem; padding: 0.8rem 1rem; border-top: 1px solid var(--line-soft); }
  .tbl tbody tr:first-child { border-top: 0; }
  .tbl td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  .tbl td.name { grid-column: 1 / -1; font-size: 1rem; }
  .tbl td.wide, .tbl td.actions { grid-column: 1 / -1; }
  .tbl td[data-label]:not(.name)::before { content: attr(data-label); display: block; font-size: 0.72rem; color: var(--faint); font-weight: 600; margin-bottom: 0.05rem; }
  .tbl td.blank { display: none; }
  .tbl td .num { white-space: normal; overflow-wrap: anywhere; }
  .row-actions { justify-content: flex-start; }
  .filters { padding: 0.7rem 1rem; }
  .search { min-width: 0; width: 100%; }
  .topbar-actions { width: 100%; }
}

@media (max-width: 520px) {
  .kv > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Filters above a list */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--line-soft); }
.card > .filters:last-child { border-bottom: 0; }
.filters select { padding: 0.4rem 0.7rem; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 0.88rem; max-width: 100%; }
.filters .count { margin-inline-start: auto; color: var(--muted); font-size: 0.85rem; }
.filters .search { min-width: 0; width: 240px; max-width: 100%; padding: 0.35rem 0.8rem; }
.filters .btn-link { font-size: 0.85rem; }

/* Toast with an action (undo) */
.toast { display: flex; align-items: center; gap: 0.9rem; max-width: min(92vw, 520px); }
.toast button { background: none; border: 0; color: var(--gold); font-weight: 800; cursor: pointer; padding: 0; white-space: nowrap; }
.toast button:hover { text-decoration: underline; }

/* Attention strip on the dashboard */
.alerts { display: grid; gap: 0.4rem; }
.alert { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); border-radius: 10px; padding: 0.55rem 0.9rem; font-size: 0.9rem; color: var(--ink); }
.alert-text { min-width: 0; overflow-wrap: anywhere; }
.alert .st { flex: none; }
.alert:hover { background: var(--gold-soft); }
.alert.late { border-inline-start-color: var(--red); }
.alert.late:hover { background: #fef2f2; }

/* Recruitment board extras */
.kcard .meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.45rem; font-size: 0.74rem; color: var(--faint); }
.kcard .meta .stale { color: var(--amber); font-weight: 700; }
.kcard.lost { opacity: 0.7; }
.kcard.lost b { text-decoration: line-through; }

/* Trainee page */
.profile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.profile .av-lg { width: 60px; height: 60px; font-size: 1.3rem; }
.profile h2 { font-size: 1.4rem; }
.profile .sub { color: var(--muted); font-size: 0.9rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.profile .spacer { flex: 1; }
.tabs { display: flex; gap: 0.3rem; padding: 0.6rem 1.2rem 0; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 0.55rem 0.8rem; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--navy); border-bottom-color: var(--gold); }
.timeline { display: grid; }
.tl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.8rem; padding: 0.8rem 1.2rem; border-top: 1px solid var(--line-soft); cursor: pointer; }
.tl:hover { background: #fbfbfc; }
.tl .tl-when { color: var(--muted); font-size: 0.8rem; line-height: 1.3; }
.tl .tl-when b { display: block; color: var(--navy); font-size: 0.95rem; }
.tl .tl-body b { display: block; color: var(--ink); font-size: 0.92rem; }
.tl .tl-body p { white-space: pre-wrap; color: var(--text); font-size: 0.9rem; margin-top: 0.15rem; }
.tl .tl-body small { color: var(--faint); font-size: 0.78rem; }
.sensitive-box { background: #fff7f7; border: 1px dashed #fecaca; border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.9rem; white-space: pre-wrap; }
.field.sensitive textarea { border-color: #fecaca; background: #fff9f9; }
.chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* Roster */
.roster-summary { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.88rem; }
.roster-summary b { color: var(--navy); }
.tbl td.ck { text-align: center; }
.tbl td.ck input { width: 18px; height: 18px; accent-color: var(--gold-deep); cursor: pointer; }

/* Lesson library */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.lib { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; cursor: pointer; display: grid; gap: 0.4rem; transition: box-shadow .15s, transform .15s; }
.lib:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.lib h3 { font-size: 1rem; }
.lib p { color: var(--muted); font-size: 0.86rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-line; }
.lib small { color: var(--faint); font-size: 0.78rem; }
.lib-body { white-space: pre-wrap; line-height: 1.65; color: var(--text); }

/* Import */
.map-rows { display: grid; gap: 0.45rem; }
.map-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; align-items: center; font-size: 0.9rem; }
.map-row .src { font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-row .arrow { color: var(--faint); }
.map-row select { padding: 0.4rem 0.6rem; border-radius: 9px; border: 1px solid var(--line); background: #fff; min-width: 0; }
/* The native picker ("Choose File / No file chosen") is hidden; a Hebrew button and the chosen name show instead. */
.file-pick { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.9rem; padding: 1.1rem; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); cursor: pointer; }
.file-pick:hover { border-color: var(--gold); background: var(--gold-soft); }
.file-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-pick:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.file-pick .btn { pointer-events: none; }
.file-name { font-size: 0.88rem; overflow-wrap: anywhere; min-width: 0; unicode-bidi: plaintext; }

/* Access log & support */
.audit { display: grid; gap: 0; }
.audit > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--line-soft); font-size: 0.86rem; }
.audit > div > span { min-width: 0; overflow-wrap: anywhere; }
.pager { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0 1.2rem 1.1rem; }
.audit > div:first-child { border-top: 0; }
.audit small { color: var(--faint); display: block; }
.side-support { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; margin: 0.6rem 0 0.2rem; border-radius: 9px; color: rgba(255,255,255,0.75); font-size: 0.85rem; background: rgba(255,255,255,0.05); }
.side-support:hover { color: #fff; background: rgba(255,255,255,0.1); }
.side-support .ic { background: currentColor; }
.ic-chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.ic-book { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4zM20 4h-6a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E"); }
.ic-grad { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5M22 9v6'/%3E%3C/svg%3E"); }
.ic-upload { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 10l5-5 5 5M4 20h16'/%3E%3C/svg%3E"); }
.ic-send { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10l8 3 3 8z'/%3E%3C/svg%3E"); }
.ic-people { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21c0-4 3-7 7-7s7 3 7 7M16 4a4 4 0 0 1 0 8M22 21c0-3-2-6-5-7'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ review round additions */
.toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; color: var(--text); cursor: pointer; white-space: nowrap; }
.toggle input { width: 16px; height: 16px; accent-color: var(--gold-deep); }
.head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.card-foot-hint { color: var(--faint); font-size: 0.8rem; padding: 0.7rem 1.2rem 1rem; }
.more-link { display: block; padding: 0.4rem 1.2rem 0.9rem; font-size: 0.86rem; }
.task-chips { margin-top: 0.25rem; }
.task-chips .st { font-size: 0.7rem; }
.modal-wide { width: min(760px, 100%); }

/* Dashboard: flags and conversation coverage */
.flag-item { align-items: flex-start; }
.flag-item .txt p { font-size: 0.86rem; color: var(--text); margin-top: 0.15rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.flag-name { display: block; font-weight: 700; color: var(--ink); }
.flag-name:hover { color: var(--blue); }
.no-talk { display: grid; gap: 1rem; }
.no-talk-group h4 { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.92rem; margin-bottom: 0.5rem; }
.no-talk-group h4 small { color: var(--muted); font-weight: 500; }
.no-talk-group h4 span { margin-inline-start: auto; color: var(--muted); font-size: 0.8rem; }
.no-talk-group .more-link { padding: 0.4rem 0 0; }
.name-chip { display: inline-flex; align-items: baseline; gap: 0.35rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.84rem; color: var(--ink); background: #fff; }
.name-chip small { color: var(--faint); font-size: 0.72rem; }
.name-chip:hover { border-color: var(--gold); background: var(--gold-soft); }

/* Trainees: scope, bulk edit */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.7rem 1.2rem; background: var(--gold-soft); border-bottom: 1px solid var(--line-soft); }
.bulk-bar select, .bulk-bar input { padding: 0.4rem 0.6rem; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-size: 0.86rem; min-width: 0; max-width: 100%; }
.bulk-status { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.content > .seg { justify-self: start; }

/* Timeline extras */
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
.tl-meta .btn-link { font-size: 0.8rem; }
.tbl.engagement td { white-space: nowrap; }

/* Parent updates: sending */
.send-body { display: grid; gap: 1rem; }
.send-section { display: grid; gap: 0.5rem; border-top: 1px solid var(--line-soft); padding-top: 0.9rem; }
.send-section h4 { font-size: 0.95rem; }
.send-section .stage-hint { margin: 0; }
.send-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.send-count { color: var(--navy); font-size: 0.9rem; }
.send-list { max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.send-list .list-item { padding: 0.55rem 0.9rem; }
.send-list .done-wa .txt b { color: var(--green); }
.send-chips { flex: 0 1 auto; justify-content: flex-end; max-width: 45%; }
.field-note { color: var(--faint); font-weight: 500; }
.add-inline { display: flex; gap: 0.4rem; }
.add-inline input { flex: 1; min-width: 0; }
.manual-copy { display: grid; gap: 0.5rem; }
.manual-copy textarea { width: 100%; border: 1px solid var(--gold); border-radius: 10px; padding: 0.6rem; font: inherit; font-size: 0.88rem; resize: vertical; }
.warn-line { display: block; color: #991b1b; background: #fef2f2; border-radius: 8px; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; }
.modal-narrow { width: min(440px, 100%); }

/* Staff removal */
.remove-body { display: grid; gap: 0.9rem; }
.workload { display: grid; gap: 0.5rem; background: var(--bg-alt); border-radius: 10px; padding: 0.8rem 0.9rem; }
.workload small { display: block; color: var(--muted); overflow-wrap: anywhere; }

/* Settings: houses and cohorts */
.lists-body { display: grid; gap: 1.2rem; }
/* Three list editors: side by side only where all three fit, otherwise one under the other (never two plus a gap). */
.lists-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
@media (min-width: 1600px) { .lists-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.list-editor { display: grid; gap: 0.6rem; align-content: start; }
.list-editor h4 { font-size: 0.95rem; display: grid; gap: 0.1rem; }
.list-editor h4 small { color: var(--faint); font-weight: 500; font-size: 0.8rem; }
.list-rows { display: grid; gap: 0.4rem; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto auto; gap: 0.35rem; align-items: center; }
.list-row input { padding: 0.5rem 0.7rem; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); min-width: 0; width: 100%; }
.list-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.list-row small { color: var(--muted); font-size: 0.78rem; white-space: nowrap; display: inline-flex; gap: 0.3rem; align-items: center; }
.list-row .btn-icon:disabled { opacity: 0.3; cursor: default; }
.list-editor .stage-tools { margin-top: 0; }
.strays { display: grid; gap: 0.5rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 0.9rem 1rem; }
.strays .stage-hint { margin: 0; }
.stray { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: center; font-size: 0.88rem; }
.stray span { min-width: 0; overflow-wrap: anywhere; }
.stray small { color: var(--muted); }
.stray select { padding: 0.4rem 0.6rem; border-radius: 9px; border: 1px solid var(--line); background: #fff; max-width: 100%; }

/* Import */
.import-body { display: grid; gap: 1rem; }
.import-body .stage-hint { margin: 0; }
.import-h { font-size: 0.9rem; margin: 0.4rem 0 0.5rem; }
.import-preview .tbl-wrap { border: 1px solid var(--line); border-radius: 10px; }
.tbl-preview td { font-size: 0.84rem; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.tbl-preview tbody tr { cursor: default; }
.dup-note { font-weight: 500; color: #92400e; align-items: flex-start; margin-top: 0.6rem; }
.dup-note input { margin-top: 0.2rem; }

/* Roster: participants, check-in rows with large tap targets */
.who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; border-bottom: 1px solid var(--line-soft); }
.who small { display: block; color: var(--faint); font-size: 0.78rem; }
.who-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.who-tools select { padding: 0.4rem 0.6rem; border-radius: 9px; border: 1px solid var(--line); background: #fff; max-width: 100%; }
.roster-card .roster-summary { padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--line-soft); background: #fff; }
.roster-warn { color: var(--red); font-weight: 600; }
.checkin-list { display: grid; }
.checkin { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.35rem 1.2rem; border-top: 1px solid var(--line-soft); min-height: 52px; }
.checkin:first-child { border-top: 0; }
.checkin.warn { background: #fff7f7; }
.checkin-name { min-width: 0; display: grid; }
.checkin-name a { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }  /* a name wraps, never cut */
.checkin-name small { color: var(--muted); font-size: 0.78rem; }
.checkin-flags { display: flex; gap: 0.4rem; flex: none; }
.pill-toggle { position: relative; display: inline-flex; cursor: pointer; }
.pill-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-toggle span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 0.85rem; border: 1.5px solid var(--line); border-radius: 10px; font-size: 0.84rem; font-weight: 700; color: var(--muted); background: #fff; white-space: nowrap; user-select: none; }
.pill-toggle input:checked + span { background: #dcfce7; border-color: #86efac; color: #15803d; }
.pill-toggle input:checked + span::before { content: "✓ "; white-space: pre; }
/* Absent reads as absent (red, ✗), excused as neutral, never like present. */
.pill-toggle input[data-flag="absent"]:checked + span { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.pill-toggle input[data-flag="absent"]:checked + span::before { content: "✗ "; }
.pill-toggle input[data-flag="excused"]:checked + span { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
.pill-toggle input[data-flag="excused"]:checked + span::before { content: "– "; }
.pill-toggle i { font-style: normal; }
.pill-short { display: none; }
.pill-toggle input:focus-visible + span { box-shadow: 0 0 0 3px var(--gold-soft); border-color: var(--gold); }
.picker { display: grid; gap: 0.8rem; max-height: 55vh; overflow: auto; }
.picker fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.8rem 0.7rem; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.3rem 0.8rem; }
.picker legend { font-weight: 800; color: var(--navy); padding: 0 0.3rem; }
.pick { display: flex; align-items: center; gap: 0.4rem; min-height: 32px; font-size: 0.9rem; }
.print-only { display: none; }
@media print {
  .side, .topbar, .no-print, .toast { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; }
  .card { border: 0; box-shadow: none; }
  .print-only { display: block; }
  .print-only h2 { font-size: 1.2rem; margin-bottom: 0.3rem; }
  .print-roster { width: 100%; border-collapse: collapse; font-size: 11pt; margin-top: 0.6rem; }
  .print-roster th, .print-roster td { border: 1px solid #999; padding: 4px 6px; text-align: start; }
}

@media (max-width: 1100px) {
  .lists-grid { grid-template-columns: 1fr; }
}
/* Medium widths (a laptop with the sidebar): columns that are also on the card step aside so the rest stay on one line. */
@media (max-width: 1150px) and (min-width: 861px) {
  .tbl th.md-hide, .tbl td.md-hide, .tbl .md-hide { display: none; }
  .tbl .md-show { display: block; }
  .tbl-candidates .row-actions { flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 860px) {
  .audit > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .board { grid-template-columns: 1fr; }
  /* Compact list rows on a phone: name and status on the first line, house and phone on the second. */
  .tbl-compact tbody tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sel name side" "sel meta tel"; align-items: center; gap: 0.1rem 0.7rem; padding: 0.55rem 1rem; }
  .tbl-compact td::before { display: none !important; }
  .tbl-compact td.sel { grid-area: sel; width: auto; }
  .tbl-compact td.name { grid-area: name; grid-column: auto; font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tbl-compact td.name .av { display: none; }
  .tbl-compact td.c-side { grid-area: side; justify-self: end; }
  .tbl-compact td.c-meta { grid-area: meta; color: var(--muted); font-size: 0.84rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tbl-compact td.c-tel { grid-area: tel; justify-self: end; font-size: 0.86rem; }
  .tbl-compact td.c-tel a.tel { display: inline-flex; align-items: center; min-height: 32px; color: var(--blue); }
  .tbl-compact td.m-hide { display: none; }
  .tbl-compact .m-only { display: inline; }
  .checkin { flex-wrap: wrap; padding: 0.5rem 1rem; }
  .checkin-flags { width: 100%; min-width: 0; }
  .checkin-flags .pill-toggle { flex: 1 1 0; min-width: 0; }
  .checkin-flags .pill-toggle span { width: 100%; padding: 0 0.4rem; }
  .checkin { gap: 0.3rem; }
  .checkin-name { display: flex; align-items: baseline; gap: 0 0.45rem; flex-wrap: wrap; }  /* the details drop under the name rather than squeeze it */
  .checkin-name a { flex: 0 1 auto; }
  .pill-long { display: none; }
  .pill-short { display: inline; }
  /* The counter stays in view while scrolling down a long roster. */
  .roster-sticky { position: sticky; top: 0; z-index: 5; box-shadow: 0 6px 12px -10px rgba(15,31,61,0.4); }
  .stray { grid-template-columns: 1fr; }
  /* Phone: one row that scrolls sideways (never two rows). The far end fades while there is more to see. */
  .tabs { padding: 0.5rem 0.6rem 0; gap: 0; flex-wrap: nowrap; scrollbar-width: none; overscroll-behavior-x: contain; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs.more-after { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem); mask-image: linear-gradient(to right, transparent, #000 2.5rem); }
  .tabs button { padding: 0.55rem 0.6rem; font-size: 0.9rem; flex: 0 0 auto; }
  /* Phone: a list row whose chips would squeeze the title puts them on their own line under it. */
  .list-item:has(.send-chips), .list-item.ev-row { flex-wrap: wrap; }
  .send-chips, .ev-row .chips { flex: 1 0 100%; max-width: none; justify-content: flex-start; padding-inline-start: calc(54px + 0.8rem); }
  .list-row { grid-template-columns: minmax(0, 1fr) auto auto auto auto; row-gap: 0.25rem; }
  .list-row input { grid-column: 1 / -1; }
  .stage-tabs { flex-wrap: wrap; overflow: visible; }
  .tbl.engagement td { white-space: normal; }
}

/* ------------------------------------------------------------------ round seven */
/* Meta parts are separate items with a gap, never glued with "·", so no line starts or ends with a dot. */
.list-item .txt small.parts, small.parts { display: flex; flex-wrap: wrap; column-gap: 0.6rem; row-gap: 0.05rem; -webkit-line-clamp: unset; }
.list-item .when.range b { font-size: 0.86rem; white-space: nowrap; }
.cohort-note { display: block; color: var(--muted); font-weight: 500; font-size: 0.82rem; }
.cohort-note.now { color: #b45309; font-weight: 700; }
.enrol-next { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; color: var(--text); }
/* Recruitment lanes: one full-width row per stage; cards wrap and every row is filled (they grow). */
.board.lanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
.lane .kcol-head { justify-content: flex-start; gap: 0.6rem; }
.lane .kcol-head .kcol-more { margin: 0 auto 0 0; margin-inline-start: auto; font-size: 0.85rem; }
.lane-cards { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; }
.lane-cards { gap: 10px; }
.lane-cards > .kcard { flex: 0 0 var(--card-w, 220px); min-width: 0; max-width: 100%; display: flex; flex-direction: column; }
.lane-cards > .kcard .kcard-actions { margin-top: auto; padding-top: 0.6rem; }
.lane-cards > .kcol-empty { flex: 1; }
.empty-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border: 1.5px dashed var(--line); border-radius: var(--r); color: var(--muted); font-size: 0.86rem; }
.board .kcol.empty-stage { min-height: 0; padding: 0.25rem 0.7rem; border-radius: 999px; background: #fff; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.board .kcol.empty-stage.drop-over { color: var(--navy); }
.notice.soft { background: #fffbeb; color: #92400e; border-color: #fde68a; display: grid; gap: 0.2rem; }
.notice.soft small { color: #a16207; }
.plan-body { display: grid; gap: 1rem; }
.plan-group h4 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.plan-group .chips { max-height: 30vh; overflow: auto; }
.dup-list { display: grid; gap: 0.4rem; margin-top: 0.6rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 0.7rem 0.8rem; }
.dup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; font-size: 0.88rem; }
.dup-row small { display: block; color: var(--muted); font-size: 0.78rem; }
.dup-row select { padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; max-width: 100%; }
@media (max-width: 860px) { .dup-row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ round eight */
/* Date tiles: one day, a range in one month, or a range across months written out. */
.date-tile { flex: none; min-width: 54px; text-align: center; background: var(--bg-alt); border-radius: 9px; padding: 0.3rem 0.4rem; line-height: 1.15; }
.date-tile b { display: block; font-size: 1.05rem; color: var(--navy); white-space: nowrap; }
.date-tile small { color: var(--muted); font-size: 0.7rem; }
.date-tile.range b, .list-item .when.range b { font-size: 0.92rem; }
.date-tile.cross b, .list-item .when.cross b { font-size: 0.78rem; font-weight: 800; }
.list-item .when.cross { width: auto; min-width: 54px; padding: 0.3rem 0.45rem; }
/* The trainee's header: house, cohort, city, phone with generated separators between non-empty items. */
.profile .sub .meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0; }
.profile .sub .meta > * + *::before { content: "·"; margin-inline: 0.45rem; color: var(--faint); }
/* Import dialog: nothing wider than the dialog; the preview scrolls inside its own box. */
.import-body > * { min-width: 0; }
.import-preview { min-width: 0; max-width: 100%; }
.import-preview .tbl-wrap { overflow-x: auto; max-width: 100%; }
.map-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.dup-row { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); }
.dup-hint { color: #92400e; font-size: 0.8rem; }
.dup-row select { width: 100%; min-width: 0; }
.confirm-body { display: grid; gap: 0.9rem; }
@media (max-width: 860px) {
  /* Parents list on a phone: "child · house" wraps instead of being cut. */
  .tbl-compact td.c-meta { white-space: normal; overflow: visible; text-overflow: clip; }
  .dup-row { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ round nine */
/* The selection bar floats at the bottom of the list: rows never move when it appears. */
.bulk-bar { position: sticky; bottom: 0; z-index: 6; border-top: 1px solid #f0d58a; border-bottom: 0; border-radius: 0 0 var(--r) var(--r); box-shadow: 0 -8px 18px -12px rgba(15,31,61,0.35); }
/* Dialog actions stay in view: the footer sticks to the bottom of a long dialog (1024x768 included). */
.modal .modal-foot { position: sticky; bottom: 0; z-index: 3; background: #fff; margin: 1.2rem -1.4rem -1.4rem; padding: 0.8rem 1.4rem; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
/* Page header: one row on a laptop. The search shrinks first, then secondary buttons become icons
   (their label stays for screen readers); the gold primary action is always last on the row. */
@media (min-width: 861px) {
  .topbar-actions { flex-wrap: nowrap; min-width: 0; }
  .topbar-actions .search { flex: 1 1 200px; min-width: 120px; }
}
/* Medium widths: every button keeps its label (searches sit in the page toolbars instead). */
@media (min-width: 861px) and (max-width: 1150px) {
  .topbar { gap: 0.8rem; }
  .topbar > div:first-child { min-width: 0; }
}
.field-check.with-note > span { display: grid; gap: 0.1rem; }
.field .field-note-line { color: #b45309; font-weight: 600; font-size: 0.8rem; }
.missing-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 1.2rem; border-bottom: 1px solid var(--line-soft); }
.missing-bar .seg button { min-height: 36px; }
.seg button:disabled { opacity: 0.45; cursor: default; }
.mark-all { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; border-top: 1px solid var(--line-soft); }
.mark-all .hint { color: var(--muted); font-size: 0.85rem; }
.cand-history { margin-bottom: 0.9rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.8rem; background: var(--bg-alt); }
.cand-history summary { cursor: pointer; font-weight: 700; color: var(--navy); font-size: 0.9rem; }
.cand-history ul { display: grid; gap: 0.35rem; margin-top: 0.5rem; max-height: 220px; overflow: auto; }
.cand-history li { display: grid; font-size: 0.86rem; }
.cand-history small { color: var(--muted); font-size: 0.76rem; }
.lesson-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; color: var(--muted); }
.invite-body { display: grid; gap: 0.8rem; }
.invite-body textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem; font: inherit; font-size: 0.9rem; resize: vertical; }
.set-current { font-size: 0.78rem; }
.tbl-coverage td { white-space: nowrap; }
.back-btn { white-space: normal; text-align: start; }
.tbl-candidates .back-btn { white-space: nowrap; }
@media (max-width: 860px) {
  /* Planning on a phone: tasks first (they are what you act on), then the events. */
  .content > .grid-2 > [data-section="tasks"] { order: -1; }
  /* "מעורבות": month on its own line, the three numbers in one row of three. */
  .tbl.engagement tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tbl.engagement td.name { grid-column: 1 / -1; }
  .kcard-actions .btn { min-height: 44px; }
  .back-btn { padding-inline: 0.7rem; border-color: var(--line); background: #fff; }
  .modal .modal-foot { margin: 1rem -1.4rem -1.4rem; }
}
/* A field never stretches its own rows when its neighbour is taller (a note under "מחזור"), so the
   inputs of a form row stay on one line. */
.field { align-content: start; }

/* ------------------------------------------------------------------ round ten */
.saved-mark { margin-inline-start: auto; color: var(--green); font-size: 0.8rem; font-weight: 700; opacity: 0; transition: opacity .25s; }
.saved-mark.on { opacity: 1; }
.roster-card .roster-summary { align-items: center; }
.summary-items { display: flex; flex-wrap: wrap; gap: 1rem; }
.bar .fill-red { background: #dc2626; }
.bar .fill-amber { background: #f59e0b; }
.bar .fill-green { background: #16a34a; }
.bar .fill-gray { background: var(--faint); }
.warn-text { color: #b45309; font-weight: 700; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sel-hit { display: inline-grid; place-items: center; cursor: pointer; }
/* The board's toolbar carries the search; on a wide screen it keeps a readable width. */
.filters .search { min-width: 180px; }
@media (max-width: 860px) {
  /* A 44px hit area around each selection box; the box itself stays small. */
  .tbl-compact td.sel { width: 44px; overflow: visible; }
  .sel-hit { width: 44px; height: 44px; }
  .filters .search { min-width: 0; }
  /* Candidate cards: the selection box sits in the card's top corner, beside the name, not on a row of its own. */
  .tbl-candidates tbody tr { position: relative; }
  .tbl-candidates td.sel { position: absolute; top: 0.35rem; inset-inline-end: 0.35rem; width: 44px; padding: 0; }
  .tbl-candidates td.sel::before { display: none !important; }
  .tbl-candidates:has(td.sel) td.name { padding-inline-end: 48px; }
}

/* ------------------------------------------------------------------ round eleven */
/* "→ חזרה ל…" is a full 44px target at every width. */
.back-btn { min-height: 44px; }
.plain-list { display: grid; gap: 0.2rem; padding-inline-start: 1.1rem; list-style: disc; margin: 0.3rem 0 0.6rem; }
.error.info-note { background: var(--bg-alt); color: var(--text); border-color: var(--line); }
/* Library cards: three whole lines, then an ellipsis; never half a line at the bottom edge. */
.lib p { line-height: 1.5; max-height: 4.5em; }
@media (max-width: 860px) {
  /* Parents on a phone: the updates first, the long contacts list below. */
  .content > .stack > [data-section="updates"] { order: -1; }
}
/* Coverage table: the month still under way reads as provisional, not as a finished result. */
.tbl-coverage tr.month-partial { background: var(--bg-alt); }
.tbl-coverage tr.month-partial td { color: var(--muted); }
.tbl-coverage .month-note { display: block; font-size: 0.74rem; font-weight: 500; color: var(--muted, #5b6b84); white-space: normal; }
.import-warn { margin: 0.4rem 0; padding: 0.55rem 0.8rem; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.84rem; }
.protected-block { margin-top: 1rem; }
.protected-block .field { margin-bottom: 0.3rem; }
.review-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.review-row > span { display: grid; gap: 0.2rem; min-width: 0; flex: 1 1 18rem; }
.review-row small { color: var(--muted); font-size: 0.84rem; }
.review-item { align-items: flex-start; flex-wrap: wrap; }
.review-item .txt { flex: 1 1 18rem; min-width: 0; }
.review-item .sensitive-box { margin-top: 0.4rem; }
.review-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.security-body { display: grid; gap: 0.9rem; }
.security-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; white-space: normal; min-width: 0; }
.security-row > span { display: grid; gap: 0.2rem; flex: 1 1 14rem; min-width: 0; }
.security-body { min-width: 0; }
.security-row small { color: var(--muted); font-size: 0.84rem; }
.totp-setup { display: grid; gap: 0.6rem; padding: 0.8rem; border: 1px dashed var(--line); border-radius: 12px; }
.totp-secret { font-size: 1.1rem; letter-spacing: 0.08em; font-weight: 700; overflow-wrap: anywhere; }
/* Two-step set-up (round 15): three numbered steps; the QR beside the link and key, stacked on a phone. */
.totp-steps { list-style: none; counter-reset: step; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.totp-steps > li { counter-increment: step; display: grid; gap: 0.35rem; padding-inline-start: 2.2rem; position: relative; min-width: 0; }
.totp-steps > li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 0.85rem; display: grid; place-items: center; }
.totp-steps > li > small { color: var(--muted); font-size: 0.86rem; }
.totp-pair { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 0.3rem; }
.totp-qr { width: 168px; height: 168px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; }
.totp-qr svg { width: 100%; height: 100%; display: block; }
.totp-alt { display: grid; gap: 0.35rem; min-width: 0; flex: 1 1 10rem; justify-items: start; }
.totp-alt .totp-secret { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }  /* the key wraps in its groups, never past the card */
.totp-confirm { margin-top: 0.2rem; }
@media (max-width: 480px) { .totp-pair { justify-content: center; } .totp-alt { justify-items: center; text-align: center; } }
.totp-confirm { max-width: 22rem; }

/* ---- Phase B: guardians, attachments, the funding attendance report, flags, trip safety ---- */
.field-head { font-weight: 800; color: var(--navy); font-size: 0.92rem; padding-top: 0.6rem; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 0 0.5rem; align-items: baseline; }  /* a long note drops under the title, never squeezes it */
.field-head small { color: var(--faint); font-weight: 500; font-size: 0.8rem; }
.f2 > .field-head:first-child { border-top: 0; padding-top: 0; }
.guardian { display: grid; gap: 0.15rem; justify-items: start; }
.contact-note { display: block; color: #92400e; background: #fffbeb; border-radius: 6px; padding: 0.1rem 0.45rem; font-size: 0.8rem; font-weight: 600; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.list-item .txt .contact-note { margin-top: 0.2rem; }
.note-list { display: grid; gap: 0.25rem; margin-top: 0.4rem; }
.notice.excluded > div { font-size: 0.85rem; }
.files { display: grid; gap: 0.5rem; }
.file-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; padding: 0.45rem 0; border-top: 1px solid var(--line-soft); }
.file-row:first-child { border-top: 0; }
.file-row small { color: var(--faint); font-size: 0.8rem; }
.file-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--blue); min-width: 0; overflow-wrap: anywhere; }
.file-link.locked { color: var(--muted); font-weight: 600; }
.file-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.file-tools .hint, .files-empty { color: var(--faint); font-size: 0.8rem; margin: 0; }
.files-h { font-size: 0.9rem; color: var(--navy); margin: 1rem 0 0.4rem; }
.danger-link { color: #b91c1c; font-size: 0.8rem; }
.has-file { color: #15803d; font-weight: 700; white-space: nowrap; }
a.has-file { text-decoration: underline; text-underline-offset: 2px; }
.attach-link { font-size: 0.8rem; white-space: nowrap; }
.kv dd.kv-missing { color: #b91c1c; font-weight: 700; }
[data-trip-safety] .import-warn { margin: 0 0 0.8rem; }
.mark-all-by { flex-basis: 100%; color: var(--faint) !important; font-size: 0.78rem !important; }
.flag-chips { margin: 0.25rem 0 0.1rem; }
.att-body { display: grid; gap: 0.6rem; }
.att-body .stage-hint { margin: 0; }
.att-lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; }
.att-lock span { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 16rem; }
.att-lock small { color: var(--muted); font-size: 0.82rem; }
.att-lock.locked { background: #eff6ff; border-color: #bfdbfe; }
.att-matrix { border-top: 1px solid var(--line-soft); }
.att-matrix > summary { cursor: pointer; padding: 0.8rem 1.2rem; font-weight: 700; color: var(--navy); }
.tbl-att th, .tbl-att td { padding: 0.45rem 0.55rem; text-align: center; }
.tbl-att th:first-child, .tbl-att td:first-child { text-align: start; position: sticky; inset-inline-start: 0; background: #fff; }
.tbl-att th:first-child { background: var(--bg-alt); }
.att { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; border-radius: 6px; font-weight: 800; font-size: 0.8rem; }
.att-p { background: #dcfce7; color: #15803d; }
.att-a { background: #fee2e2; color: #b91c1c; }
.att-e { background: #f3f4f6; color: #4b5563; }
.att-u { background: #fffbeb; color: #b45309; }
.print-safety th { width: 11rem; text-align: start; }
.tbl-att-sum th.att-sum-cell, .tbl-att-sum td.att-sum-cell { display: none; }
@media (max-width: 860px) {
  .tbl-compact td.c-note { grid-column: 2 / -1; grid-row: 3; }
  .tbl-compact td.c-note.blank { display: none; }
  .tbl-att td:first-child { position: static; }
  .tbl-att th, .tbl-att td { text-align: start; }
  .att-lock .btn { width: 100%; }
  .tbl-att-sum tbody tr { grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.8rem; padding: 0.6rem 1rem; }
  .tbl-att-sum td.att-n { display: none; }
  .tbl-att-sum td.name { grid-column: 1; }
  .tbl-att-sum td.att-pct { grid-column: 2; grid-row: 1; font-weight: 800; }
  .tbl-att-sum td.att-sum-cell { display: block; grid-column: 1 / -1; color: var(--muted); font-size: 0.84rem; }
  .tbl-att-sum td.att-sum-cell::before, .tbl-att-sum td.att-pct::before { display: none !important; }
}

/* ---------------------------------------------------------------- Phase B part 2 */
.ic-phone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
/* Call / WhatsApp: small round buttons with a phone-size tap area */
.contact-icons { display: inline-flex; gap: 0.3rem; margin-inline-start: auto; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; flex: none; }
.icon-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
.icon-btn.wa { color: #15803d; }
.icon-btn .ic { width: 16px; height: 16px; }
@media (pointer: coarse) { .icon-btn { width: 40px; height: 40px; } }
.kcard .meta { flex-wrap: wrap; }
.tbl-candidates td .st + .st { margin-inline-start: 0.3rem; }

/* Weekly lessons in the event form */
.weekday-pick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.weekday-pick .pill-toggle span { min-width: 44px; padding: 0 0.6rem; }
.weekday-pick .pill-toggle input:checked + span::before { content: ""; }
.series-line { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.84rem; }

/* Timetable ("מערכת שעות") */
.tt-bar { align-items: center; }
.tt-nav { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tt-label { color: var(--navy); font-weight: 800; padding: 0 0.3rem; }
.tt-grid { display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); }
.tt-grid > div { border-bottom: 1px solid var(--line-soft); border-inline-start: 1px solid var(--line-soft); min-width: 0; }
.tt-corner, .tt-day { background: var(--bg-alt); position: sticky; top: 0; z-index: 1; }
.tt-day { padding: 0.45rem 0.4rem; text-align: center; display: grid; gap: 0.05rem; }
.tt-day b { color: var(--navy); font-size: 0.86rem; }
.tt-day small { color: var(--muted); font-size: 0.76rem; }
.tt-day.today { background: var(--gold-soft); }
.tt-day.today b { color: var(--navy-deep); }
.tt-time { padding: 0.45rem 0.4rem; color: var(--faint); font-size: 0.76rem; font-weight: 700; text-align: center; }
.tt-time.tt-allday { color: var(--muted); font-size: 0.72rem; line-height: 1.25; }
.tt-cell { padding: 0.3rem; display: grid; gap: 0.3rem; align-content: start; min-height: 36px; }
.tt-cell.today { background: #fffdf6; }
.tt-ev { display: block; border-radius: 8px; padding: 0.3rem 0.45rem; background: #eff6ff; border-inline-start: 3px solid var(--blue); color: var(--ink); overflow-wrap: anywhere; line-height: 1.3; }
.tt-ev:hover { filter: brightness(0.97); }
.tt-ev b { display: block; font-size: 0.8rem; font-weight: 700; }
.tt-ev small { display: block; color: var(--muted); font-size: 0.72rem; }
.tt-ev.tt-activity { background: #f0fdf4; border-color: var(--green); }
.tt-ev.tt-workshop { background: #f5f3ff; border-color: var(--violet); }
.tt-ev.tt-trip { background: #fffbeb; border-color: var(--amber); }
.tt-ev.tt-parents { background: #fdf2f8; border-color: #db2777; }
.tt-ev.tt-open { background: var(--gold-soft); border-color: var(--gold-deep); }
.tt-ev.tt-other { background: var(--bg-alt); border-color: var(--faint); }
.tt-mday { padding: 0.75rem 1rem; border-top: 1px solid var(--line-soft); }
.tt-mday h4 { font-size: 0.95rem; margin-bottom: 0.45rem; }
.tt-mday h4 small { color: var(--muted); font-weight: 600; }
.tt-mday.today h4 { color: var(--navy-deep); }
.tt-mday.today { background: #fffdf6; }
.tt-mlist { display: grid; gap: 0.4rem; }
.tt-mlist .tt-ev { padding: 0.5rem 0.65rem; }
.tt-mlist .tt-ev b { font-size: 0.9rem; }
.tt-mlist .tt-ev small { font-size: 0.8rem; }

/* Candidate dialog */
.cand-view { display: grid; gap: 0.9rem; }
.cand-contact { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cand-sec { display: grid; gap: 0.5rem; border-top: 1px solid var(--line-soft); padding-top: 0.8rem; }
.cand-sec h4 { font-size: 0.95rem; }
.cand-sec .chips { gap: 0.4rem; align-items: center; }
.cand-note { white-space: pre-wrap; background: var(--bg-alt); border-radius: 9px; padding: 0.5rem 0.7rem; font-size: 0.9rem; }
.tbl-scores td, .tbl-scores th { text-align: center; }
.tbl-scores td.name, .tbl-scores th:first-child { text-align: start; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); }
.score-row > span { font-weight: 700; color: var(--ink); }
.score-seg label { position: relative; }
.score-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.score-seg span { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; border-radius: 7px; font-weight: 800; color: var(--muted); cursor: pointer; }
.score-seg input:checked + span { background: var(--navy); color: #fff; }
.score-seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--gold-soft); }
.wait-list .list-item { gap: 0.6rem; }
.wait-rank { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-soft); color: var(--navy); font-weight: 800; flex: none; }
.wait-actions { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.wait-list .contact-icons { margin-inline-start: 0; }
.pick-list { display: grid; gap: 0.2rem; max-height: 50vh; overflow-y: auto; margin-top: 0.6rem; }
.search-input { width: 100%; padding: 0.55rem 0.8rem; border-radius: 9px; border: 1px solid var(--line); background: #fff; }
.outreach-text { white-space: pre-wrap; color: var(--ink); }

/* Goals and feedback */
.goals-pane { display: grid; gap: 0.7rem; }
.goal-item.clickable { cursor: pointer; }
.goal-notes { color: var(--text); font-size: 0.88rem; white-space: pre-wrap; margin-top: 0.15rem; }
.fb-title { border-top: 1px solid var(--line-soft); padding-top: 0.8rem; }
.fb-form { border: 1px solid var(--line); border-radius: 11px; padding: 0.7rem 0.85rem; display: grid; gap: 0.4rem; }
.fb-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fb-head b { color: var(--navy); }
.fb-head small { color: var(--muted); }
.fb-kv { grid-template-columns: 1fr; }
.fb-houses { display: grid; gap: 0.55rem; }
.fb-house { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; }
.fb-house span { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.fb-bar { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.fb-bar i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.fb-house b { font-size: 0.86rem; color: var(--muted); white-space: nowrap; }
.fb-bar-top .spacer { flex: 1; }

/* Settings: interview rubric */
.rubric-body { display: grid; gap: 0.6rem; max-width: 560px; }
.rubric-rows { display: grid; gap: 0.4rem; }
.rubric-rows .list-row { grid-template-columns: minmax(0, 1fr) auto; }

/* Library: plain formatting and pictures */
.lib-body.rich { white-space: normal; display: grid; gap: 0.6rem; }
.lib-body.rich ul, .lib-body.rich ol { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: 0.2rem; }
.lib-body.rich ul { list-style: disc; }
.lib-body.rich ol { list-style: decimal; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }
.thumb { display: block; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-alt); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .tt-word { display: none; }
  .tt-nav { flex-wrap: nowrap; width: 100%; }
  .tt-nav .btn { min-width: 44px; min-height: 40px; }
  .tt-label { flex: 1; text-align: center; }
}
.cand-decision { margin-top: 0.25rem; }
/* Open day roster: a candidate's name over its details, the call buttons and "הגיע/ה" on one line below */
.checkin-name .name-link { font-weight: 700; color: var(--ink); text-align: start; }
.openday-list .checkin-name { display: grid; }
.openday-list .contact-icons { margin-inline-start: 0; }
@media (max-width: 860px) { .openday-list .checkin-name { display: grid; width: 100%; } }
@media (max-width: 520px) { .score-row { display: grid; justify-items: start; gap: 0.35rem; } }

/* Contact conflicts (round 15): what the note says beside the guardians as they are, then the fixes. */
.conflict { display: grid; gap: 0.5rem; padding: 0.7rem 0; border-top: 1px solid var(--line-soft); }
.conflict:first-of-type { border-top: 0; }
.conflict p { margin: 0; overflow-wrap: anywhere; }
.conflict-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.conflict-item + .conflict-item { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.conflict-item h4 { margin: 0 0 0.2rem; }
.conflict-banner .card-body { display: grid; gap: 0.2rem; }
.modal-body > .hint + .conflict-item { margin-top: 0.9rem; }
.totp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.35rem; }  /* staff page: two-step required / set up, under the access chips */
.totp-line small { color: var(--muted); font-size: 0.74rem; width: 100%; }
.security-row > .st { display: inline-flex; flex: 0 0 auto; align-self: flex-start; }  /* a status chip keeps its size when the row stacks */