/* Hide English: at read/translate stops (body.hen-stop), "why" stops (body.hen-why) and by the top-bar switch (body.hen).
   Works on content, not layout, so it holds at every width. Tap a hidden line to peek (.hen-peek). */
.hen-btn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink2);font:600 14px var(--ui);cursor:pointer;white-space:nowrap;flex:none}
.hen-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hen-btn .hen-slash{display:none}
.hen-btn[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.hen-btn[aria-pressed="true"] .hen-slash{display:inline}
.hen-btn .hen-s{display:none}
.mtop .hen-btn~.acct-main{margin-left:8px!important}
.mtop .hen-btn~.pn{margin-left:8px}
@media (max-width:700px){.hen-btn .hen-l{display:none}.hen-btn .hen-s{display:inline}.hen-btn{padding:0 9px;gap:4px;font-size:13px}}

/* English lines: phrase box, English under the Gemara text, word sheet's English column, notes */
body.hen .stageen:not(:empty):not(.hen-peek),body.hen-stop .stageen:not(:empty):not(.hen-peek),
body.hen .his-en:not(.hen-peek),body.hen-stop .his-en:not(.hen-peek),
body.hen table.w td.en:not(.hen-peek),body.hen-stop table.w td.en:not(.hen-peek),
body.hen-stop .cnote:not(.hen-peek){
 color:transparent!important;text-shadow:none!important;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;
 background:repeating-linear-gradient(135deg,rgba(128,128,128,.13) 0 7px,rgba(128,128,128,.05) 7px 14px)!important;border-radius:6px}
body.hen .stageen:not(:empty):not(.hen-peek) *,body.hen-stop .stageen:not(:empty):not(.hen-peek) *,
body.hen .his-en:not(.hen-peek) *,body.hen-stop .his-en:not(.hen-peek) *,
body.hen table.w td.en:not(.hen-peek) *,body.hen-stop table.w td.en:not(.hen-peek) *,
body.hen-stop .cnote:not(.hen-peek) *{visibility:hidden}
body.hen .stageen:not(:empty):not(.hen-peek)::before,body.hen-stop .stageen:not(:empty):not(.hen-peek)::before,
body.hen .his-en:not(.hen-peek)::before,body.hen-stop .his-en:not(.hen-peek)::before,
body.hen-stop .cnote:not(.hen-peek)::before{
 content:"English hidden · tap to peek";position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font:600 12.5px var(--ui);letter-spacing:.03em;visibility:visible;white-space:nowrap}
.hen-peek{outline:1px dashed var(--line);outline-offset:2px;border-radius:4px}

/* Explanation + Key moments: hidden at any stop while the window is open */
body.hen-stop [data-p="expl"]:not(.hen-peek)>*,body.hen-why [data-p="expl"]:not(.hen-peek)>*,
body.hen-stop [data-p="moments"]:not(.hen-peek)>*,body.hen-why [data-p="moments"]:not(.hen-peek)>*{display:none!important}
body.hen-stop [data-p="expl"]:not(.hen-peek)::before,body.hen-why [data-p="expl"]:not(.hen-peek)::before,
body.hen-stop [data-p="moments"]:not(.hen-peek)::before,body.hen-why [data-p="moments"]:not(.hen-peek)::before{
 content:"Hidden while you try it. It comes back when he gives the answer. Tap to show it now.";display:block;margin:14px 0;padding:26px 18px;text-align:center;
 border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);font:15px/1.5 var(--ui);cursor:pointer}
/* transcript: lines ahead of now */
[data-p="tx"] .hen-txnote{display:none;list-style:none}
body.hen-stop [data-p="tx"]:not(.hen-peek) li.ahead,body.hen-why [data-p="tx"]:not(.hen-peek) li.ahead{display:none!important}
body.hen-stop [data-p="tx"]:not(.hen-peek) .hen-txnote,body.hen-why [data-p="tx"]:not(.hen-peek) .hen-txnote{display:block}
.hen-txnote button{display:block;width:100%;margin:10px 0;padding:14px;border:1px dashed var(--line);border-radius:var(--r);background:transparent;color:var(--muted);font:14px var(--ui);cursor:pointer}

/* the card at a read / translate stop: his words, the Hebrew line large, a Show English peek */
.stopcard.sc-tr .stophe{font-size:clamp(24px,4.4vw,34px);line-height:1.7;margin:10px 0 6px;max-height:40vh;overflow:auto}
.stopcard.sc-tr.sc-long .stophe{font-size:clamp(21px,3.4vw,27px)}
.stopcard .stopen{margin:4px 0 8px;padding:10px 12px;background:var(--bg);border-radius:var(--r);font:var(--t-en)/1.5 var(--serif);color:var(--ink2)}
.stopcard .peekbtn{margin:2px 0 6px;min-height:40px}
.henchip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 0;padding:6px 6px 6px 14px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r);background:var(--panel);font:13.5px var(--ui);color:var(--ink2)}
.henchip[hidden]{display:none}
.henchip .hc-b{flex:none;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:600 13px var(--ui);cursor:pointer}
.scrub .stoptick.tk-tr{background:var(--acc)}

/* Rashi / Tosafos / pasuk stops: a label ("Rashi", "Tosafos" or the pasuk's reference) over the text, shown large */
.stopcard .stopcml{margin:12px 0 0;font:700 13px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.stopcard .stopcml[hidden]{display:none}
.stopcard.sc-cm .stophe{margin-top:4px;padding:8px 12px;border-right:3px solid var(--acc);border-radius:var(--r);background:var(--bg)}

/* Nikud on/off button (top bar). Pressed = nikud shown (the default). */
.nik-btn{font:600 15px var(--ui);padding:0 12px}
.nik-btn[aria-pressed="false"]{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)}
.nik-btn[aria-pressed="true"]{background:transparent;border-color:var(--line);color:var(--ink2)}
.mtop .nik-btn+.hen-btn{margin-left:8px}
@media (max-width:700px){.nik-btn{padding:0 8px;font-size:14px}}

/* "English" switch: on = cards show English right away */
.mtop .en-btn .en-s{display:none}
.mtop .en-btn .en-st{font-weight:700;margin-left:4px}
.en-btn[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.mtop .nik-btn+.en-btn,.mtop .en-btn+.hen-btn{margin-left:8px}
/* phone: three compact buttons so the top bar still fits */
@media (max-width:700px){
 .mtop .nik-btn{padding:0 7px;font-size:13px;min-height:36px}
 .mtop .en-btn{padding:0 8px;font-size:13px;min-height:36px}
 .mtop .en-btn .en-l,.mtop .en-btn .en-st{display:none}
 .mtop .en-btn .en-s{display:inline}
 .mtop .hen-btn#henbtn{padding:0 8px;min-height:36px}
 .mtop .hen-btn#henbtn .hen-s{display:none}
 .mtop .nik-btn+.en-btn,.mtop .en-btn+.hen-btn{margin-left:4px}
 .mtop .hen-btn~.pn{margin-left:6px}
}

@media (max-width:420px){
 .mtop .nik-btn{padding:0 5px;font-size:12px}
 .mtop .en-btn{padding:0 6px}
 .mtop .hen-btn#henbtn{padding:0 6px}
 .mtop .nik-btn+.en-btn,.mtop .en-btn+.hen-btn{margin-left:3px}
 .mtop .hen-btn~.pn{margin-left:4px}
 .mtop .pn button,.mtop .pn a{padding-left:9px;padding-right:9px}
}

/* round cards: the step's words as on the word sheet */
.stopcard .stopgrid{margin:10px 0 6px;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);-webkit-overflow-scrolling:touch}
.stopcard .stopgrid[hidden]{display:none}
.stopgrid .sg-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px;align-items:start;padding:7px 10px;border-top:1px solid var(--line)}
.stopgrid .sg-row:first-child{border-top:0}
.stopgrid .sg-he{font-size:20px;line-height:1.5;text-align:right;direction:rtl;order:2}
.stopgrid .sg-cell,.stopgrid.g-hebeng .sg-en{order:1}
.stopgrid .sg-cell{display:flex;flex-direction:column;gap:3px}
.stopgrid input{width:100%;box-sizing:border-box;min-height:38px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:16px var(--ui)}
.stopgrid.g-write .sg-en{display:none;font:13.5px/1.35 var(--ui);color:var(--acc)}
.stopgrid.g-write.sg-done .sg-en{display:block}
.stopgrid.g-hebeng .sg-en{font:15px/1.4 var(--ui);color:var(--ink2);cursor:pointer;align-self:center}
.stopgrid.g-hebeng .sg-en.sg-hid{color:transparent;background:var(--line);border-radius:6px;user-select:none}
.stopcard.sc-round .stopq{font-size:.95em}
.stopcard.sc-checking .hint::after{content:" Playing: the English fills in when the class finishes the round."}

/* Small phones: the top bar holds ☰ Classes, the three toggles, the sign-in control and Prev/Next.
   Below 560px "☰ Classes" and "‹ Prev"/"Next ›" show as their icons (the words stay as their accessible names),
   so nothing runs past the screen edge and "Sign in" keeps room for its full label. */
@media (max-width:559px){
 body.dc .mtop .lessons-btn,body.dc .mtop .pn button{font-size:0!important;padding:0!important;width:36px;min-width:36px;flex:none;text-align:center;line-height:1}
 body.dc .mtop .lessons-btn::before{content:"\2630";font-size:18px;font-weight:600}
 body.dc .mtop .prevl::before{content:"\2039";font-size:24px}
 body.dc .mtop .nextl::before{content:"\203A";font-size:24px}
 body.dc .mtop .pn{gap:3px}
 body.dc .mtop .acct-main .cs-btn{padding:0 7px;gap:5px}
 body.dc .mtop .acct-main .cs-g{width:15px;height:15px}
}
@media (max-width:379px){body.dc .mtop .acct-main .cs-g{display:none}}