/* ==== Dark, square, compact (20px rows); shared across pages ==== */
:root{
  --bg:#0b0d10;
  --panel:#111419;
  --panel-2:#0e1115;
  --ink:#fffdd0;
  --muted:#9aa3ad;
  --line:#252c35;
  --hl:#f1c95a;        /* warm gold highlight */
  --row:20px;
}
*,*::before,*::after{ box-sizing:border-box; border-radius:0 }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{
  margin:0;
  /* All fonts -> Noto Sans Hebrew (default) with Calibri as fallback */
  font-family: "Noto Sans Hebrew", Calibri, "Segoe UI", Arial, system-ui, sans-serif;
  background: radial-gradient(1000px 600px at 50% -220px, #151a20 0%, var(--bg) 60%) fixed;
  color:var(--ink);
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:100dvh;
}
.top{
  background:#0d0f12; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:10px 14px;
}
.logo{ font-weight:800; letter-spacing:.2px }
.logo-dot{ display:inline-block; width:10px; height:10px; background:var(--hl); margin-inline-start:6px; }

.container{
  display:grid; grid-template-columns:260px 1fr; gap:12px;
  padding:12px 14px; overflow:hidden;
}
.aside{
  background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--line);
  padding:10px; overflow:auto;
}
.main{
  background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--line);
  padding:10px; overflow:auto;
}

.section{ border:1px solid var(--line); margin:8px 0; background:var(--panel) }
.section > summary{
  list-style:none; cursor:pointer; padding:10px 12px; border-bottom:1px solid var(--line);
  font-weight:800; color:var(--ink);
}
.section[open] > summary{ background:#12161b }
.section .inner{ padding:6px 8px }

.list{ display:grid; gap:3px }
.row{
  display:flex; align-items:center; gap:8px;
  height:var(--row); line-height:var(--row);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:0 8px; background:#12161b; border:1px solid #2a313a; color:var(--ink);
  cursor:pointer;
}
.row:hover{ background:#161b21; border-color:#303945; }
.row .t{ font-weight:700; font-size:12px; overflow:hidden; text-overflow:ellipsis }
.row .meta{ color:var(--muted); font-size:12px }
.row .spacer{ flex:1 1 auto; min-width:8px }

/* darker cue for “restored” entries if your data has that flag */
.row[data-restored="1"]{
  background:#0f1318; border-color:#1f2731; color:#ebe5d1;
}

/* Filters / inputs */
.controls{ display:flex; gap:10px; align-items:center; margin-bottom:10px; color:var(--muted) }
.input{
  background:#0f1216; color:var(--ink);
  border:1px solid #2b323a; padding:6px 8px; outline:none;
}

/* Player (shared / used on nowplaying.html too) */
.player{
  background:#0e0f12; border-top:1px solid var(--line);
  padding:10px 14px; display:grid; grid-template-columns:auto auto 1fr auto auto; align-items:center; gap:10px;
  position:sticky; bottom:0; z-index:5;
}
.pbtn{ background:#141418; color:var(--ink); border:1px solid #27272e; font-size:1.2rem; padding:4px 8px; cursor:pointer }
.bar{ position:relative; height:8px; background:#111418; border:1px solid #2a313a; cursor:pointer; width:260px }
.fill{ position:absolute; inset-block:0; inset-inline-start:0; width:0%; background:var(--hl) }
.time{ color:var(--muted); font-size:12px }

/* Simple link buttons */
.btn{ display:inline-block; padding:6px 10px; border:1px solid var(--line); color:var(--ink); text-decoration:none; background:#14171c; cursor:pointer }
.btn:hover{ background:#181c22 }

/* tiny utilities */
.badge{ border:1px solid #3a414a; padding:0 6px; color:#c2c8cf; font-size:12px }
.stack{ display:grid; gap:8px }

/* ===== Modals (styled pop-ups) ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center;
}
.modal{
  width:min(560px, 92vw);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
}
.modal-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--line); font-weight:800;
}
.modal-b{ padding:10px 12px; display:grid; gap:10px; max-height:60vh; overflow:auto }
.modal-f{ padding:10px 12px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end }
.modal .btn{ background:#14171c }
.modal .btn:hover{ background:#181c22 }
/* brief highlight when deep-linking to a row */
.row.flash{
  outline: 2px solid var(--hl);
  background: #1a2028;
}
/* segmented toggle look */
.seg { display:inline-flex; gap:6px; border:1px solid var(--line); padding:2px }
.seg .btn { background:#14171c }
.seg .btn.is-on { background:#1a1f26; border-color:#3a444f }
/* Player buttons: same size for prev / play / next */
.pbtn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Header layout: keep title on right (RTL) and push count + add-all to LEFT */
.summary{ display:flex; align-items:center; gap:8px }
.summary .spacer{ flex:1 1 auto }
.summary-meta{ display:inline-flex; gap:8px; margin-inline-start:auto } /* pushes to LEFT in RTL */
/* ====== GRID LAYOUT: Lock outer page scroll; only panes scroll ====== */
:root {
  --aside: 260px;   /* sidebar width */
  --gap: 12px;      /* space between columns */
  --top-z: 10;      /* header stacking */
}

/* 1) Page is a 2-row grid: header + content */
html, body { height: 100%; }
body {
  margin: 0;
  height: 100vh;                 /* full viewport */
  display: grid;
  grid-template-rows: auto 1fr;  /* header row + content row */
  overflow: hidden;              /* 🔒 stop the outer page from scrolling */
}

/* 2) Content row is a 2-column grid: aside | main */
.container {
  display: grid;
  grid-template-columns: var(--aside) 1fr;  /* sidebar on the right in RTL markup order is fine */
  gap: var(--gap);
  min-height: 0;  /* critical so children can shrink & scroll */
  min-width: 0;
}

/* 3) Only these panes may scroll */
.aside {
  overflow: auto;
  min-height: 0;
  min-width: 0;
}
.main {
  overflow: auto;  /* ✅ the years list (and other main content) scrolls here */
  min-height: 0;
  min-width: 0;
}

/* Optional: keep the top bar visible without affecting scroll */
.top {
  position: sticky;
  top: 0;
  z-index: var(--top-z);
}

/* If you use hidden anchors before each year header, avoid hiding under controls */
.year-anchor { scroll-margin-top: 56px; } /* tune to your controls/header height */
/* Keep scroll inside your panes when embedded (e.g., Google Sites) */
html, body { overscroll-behavior: none; }
.aside, .main { overscroll-behavior: contain; }