:root{
  --klaf:#f5eddc; --klaf-deep:#efe3cb; --paper:#fbf6ea; --line:#d9c9a5;
  --ink:#22160a; --ink-soft:#5c4a33; --brass:#a9761f; --brass-soft:#d8b877;
  --stamp:#7a2e22; --oxblood:#7c3b3b;
}
*{box-sizing:border-box}
body{margin:0; background:var(--klaf); color:var(--ink); font-family:"Heebo",sans-serif; line-height:1.6; padding:24px 14px 60px}
.wrap{max-width:840px; margin:0 auto}
.sheet{background:var(--paper); border:1px solid var(--line); border-radius:3px; box-shadow:0 1px 0 #fff inset, 0 6px 22px rgba(70,45,15,.12); padding:30px 30px 26px}
.head{text-align:center; border-bottom:2px solid var(--brass); padding-bottom:14px; margin-bottom:16px}
.bsd{font-size:.8rem; color:var(--ink-soft); letter-spacing:.1em; margin-bottom:6px}
.head .mas{font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:2.05rem; color:var(--ink); line-height:1.15}
.head .per{font-family:"Frank Ruhl Libre",serif; font-size:1.15rem; color:var(--stamp); margin-top:2px}
.head .meta{font-size:.82rem; color:var(--ink-soft); margin-top:8px}
a.src{color:var(--brass); text-decoration:none; border-bottom:1px solid var(--brass-soft)}
a.src:hover{color:var(--stamp)}
a.src::after{content:" ↗"; font-size:.68em; color:var(--ink-soft); border:none; vertical-align:super}
.daf-link{display:inline-block; margin-top:9px; font-size:.83rem; font-weight:500}
.hint{font-size:.8rem; color:var(--ink-soft); text-align:center; margin:2px 0 14px}

/* language toggle */
.mf-lang{display:flex; gap:0; border:1px solid var(--brass-soft); border-radius:3px; overflow:hidden; width:max-content; background:var(--paper)}
.mf-lang.glob{margin:0 auto 4px}
.mf-lang button{font-family:"Heebo"; font-size:.74rem; font-weight:700; border:none; background:transparent; color:var(--ink-soft); padding:5px 14px; cursor:pointer; border-left:1px solid var(--brass-soft)}
.mf-lang button:first-child{border-left:none}
.mf-lang button.on{background:var(--brass); color:#fff}

/* teaching frame */
.chak{background:#fff8ec; border:1px solid var(--brass-soft); border-radius:3px; padding:13px 16px; margin:14px 0}
.chak .q{font-family:"Frank Ruhl Libre",serif; font-size:1.06rem; font-weight:700; color:var(--stamp); margin-bottom:5px}
.chak p{margin:5px 0; font-size:.92rem; color:var(--ink-soft)}

/* interlinear daf */
h3.sec{font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:1.12rem; color:var(--brass); margin:20px 0 6px; padding-bottom:5px; border-bottom:1px dotted var(--brass-soft)}
#daf .load,#daf .err{font-family:"Heebo"; font-size:.92rem; color:var(--ink-soft); padding:14px 4px}
#daf .err a{color:var(--brass)}
.seg-block{border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:6px}
.seg-num{font-family:"Heebo"; font-size:.68rem; font-weight:700; color:var(--brass-soft); letter-spacing:.1em}
.gem{background:var(--klaf-deep); border-right:3px solid var(--brass); border-radius:2px; padding:11px 15px; margin:6px 0}
.gem .seg,.gem .he{font-family:"Frank Ruhl Libre",serif; font-size:1.14rem; line-height:1.85; color:var(--ink)}
.comm{padding:0 6px}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.pair .he{font-family:"Frank Ruhl Libre",serif; font-size:1.06rem; line-height:1.85; direction:rtl; text-align:right; color:var(--ink)}
.pair .en{font-family:"Heebo"; font-size:.9rem; line-height:1.65; direction:ltr; text-align:left; color:var(--ink-soft); border-right:1px solid var(--line); padding-right:12px}
.gem .pair .he{font-size:1.14rem}
.en-only .seg{direction:ltr; text-align:left; font-family:"Heebo"; font-size:.94rem; line-height:1.7; color:var(--ink-soft)}
.seg sup,.he sup,.en sup{font-size:.7em; color:var(--brass)}

/* per-dibbur rows */
.dh-item{border-top:1px solid var(--line)}
.dh-item:first-child{border-top:none}
.dh-head{display:flex; gap:8px; align-items:baseline; padding:7px 2px; cursor:pointer; user-select:none}
.dh-head:hover .dh-lemma{color:var(--brass)}
.dh-chev{color:var(--brass); font-size:.7rem; transition:transform .22s; flex-shrink:0; width:9px}
.dh-item.open .dh-chev{transform:rotate(90deg)}
.dh-mef{font-family:"Heebo"; font-size:.68rem; font-weight:700; color:#fff; background:var(--brass); border-radius:2px; padding:1px 7px; flex-shrink:0; align-self:center}
.dh-lemma{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.02rem; color:var(--stamp); transition:color .12s}
.dh-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s ease}
.dh-item.open .dh-panel{grid-template-rows:1fr}
.dh-panel>.dh-inner{overflow:hidden}
.dh-body{padding:2px 12px 9px}
.dh-body .seg{font-family:"Frank Ruhl Libre",serif; font-size:1.02rem; line-height:1.8; margin:0 0 5px}

.foot{margin-top:22px; border-top:1px solid var(--line); padding-top:12px; display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink-soft)}
.bar{max-width:840px; margin:0 auto 16px; display:flex; justify-content:flex-end}
.btn{font-family:"Heebo"; font-weight:700; font-size:.86rem; background:var(--brass); color:#fff; border:none; border-radius:3px; padding:8px 18px; cursor:pointer}
.btn:hover{background:#946416}
@media (max-width:560px){ .pair{grid-template-columns:1fr} .pair .en{border-right:none; padding-right:0; border-top:1px solid var(--line); padding-top:6px} }
@media print{
  body{background:#fff; padding:0}
  .bar,.hint,.mf-lang,.nav{display:none}
  .sheet{box-shadow:none; border:none; padding:0}
  .dh-panel{grid-template-rows:1fr !important}
  .dh-chev{display:none}
}

/* ---- nav ---- */
.nav{max-width:840px; margin:0 auto 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.nav .brand{font-family:"Frank Ruhl Libre",serif; font-weight:900; color:var(--stamp); font-size:1.15rem; text-decoration:none}
.nav .brand:hover{color:var(--brass)}
.nav .links{display:flex; gap:6px}
.nav a.navbtn{font-family:"Heebo"; font-size:.82rem; font-weight:700; color:var(--ink-soft); text-decoration:none; padding:5px 12px; border:1px solid var(--line); border-radius:3px; background:var(--paper)}
.nav a.navbtn:hover{border-color:var(--brass); color:var(--brass)}
.nav a.navbtn[aria-disabled="true"]{opacity:.32; pointer-events:none}
/* ---- home ---- */
.masintro{background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:24px 28px; margin:0 auto 16px; max-width:840px; box-shadow:0 6px 22px rgba(70,45,15,.1)}
.masintro h1{font-family:"Frank Ruhl Libre",serif; font-size:2.1rem; margin:0 0 4px; color:var(--ink)}
.masintro .sub{font-family:"Frank Ruhl Libre",serif; color:var(--stamp); font-size:1.15rem; margin:0 0 10px}
.masintro p{color:var(--ink-soft); font-size:.95rem; margin:8px 0}
.perek-h{font-family:"Heebo"; font-weight:700; font-size:.78rem; letter-spacing:.06em; color:var(--brass); margin:16px auto 6px; max-width:840px}
.daf-grid{max-width:840px; margin:0 auto 10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px}
.daf-grid a{font-family:"Frank Ruhl Libre",serif; font-size:1.02rem; text-align:center; padding:8px 4px; border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--ink); text-decoration:none; transition:.12s}
.daf-grid a:hover{border-color:var(--brass); background:var(--klaf-deep); color:var(--stamp)}

/* ---- home: cycle pills + cards ---- */
.cycle{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.pill{font-family:"Heebo"; font-size:.76rem; font-weight:700; color:var(--ink-soft); background:var(--klaf-deep); border:1px solid var(--line); border-radius:20px; padding:4px 12px}
.pill.now{background:var(--brass); border-color:var(--brass); color:#fff}
.cards{max-width:840px; margin:0 auto 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cards .card{display:block; background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:14px 16px; text-decoration:none; transition:.12s}
.cards .card:hover{border-color:var(--brass); background:var(--klaf-deep)}
.cards .ct{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.12rem; color:var(--stamp); margin-bottom:3px}
.cards .cd{font-size:.85rem; color:var(--ink-soft); line-height:1.6}
@media (max-width:560px){ .cards{grid-template-columns:1fr} }

/* ---- inline ד"ה anchors inside the Gemara ---- */
.anch{
  border-bottom:1px dashed var(--brass); cursor:pointer; padding-bottom:1px;
  transition:background .12s, color .12s;
}
.anch:hover{background:#f2e2bd; color:var(--stamp)}
.anch.active{background:var(--brass); color:#fff; border-bottom-color:var(--brass)}
.inline-comm{display:none; margin:6px 0 2px; border-right:2px solid var(--brass-soft); padding-right:10px}
.inline-comm.show{display:block}
.rest{margin-top:8px; border-top:1px dotted var(--line); padding-top:6px}
.rest-h{font-family:"Heebo"; font-size:.7rem; font-weight:700; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:2px}