/* =====================================================================
   Rabbi Shea Stern · Daf Yomi
   "Classic sefer" theme — a printed-page feel: warm ivory paper, an
   old-style book serif (EB Garamond) set against Frank Ruhl Libre for
   the Hebrew, deep maroon rubrication, restrained gold ornament.
   Self-hosted fonts (assets/fonts) — fully independent, no external CDN.
   Mobile-first; a single centered reading column.
   ===================================================================== */

/* ---------- self-hosted type (variable woff2) ---------- */
@font-face {
  font-family: "Frank Ruhl Libre"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/FrankRuhlLibre-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: "EB Garamond"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/EBGaramond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/EBGaramond-italic-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper:    #fcfaf4;        /* warm ivory page            */
  --paper-2:  #f6f2e8;        /* faint panel tint           */
  --ink:      #1c1a16;        /* near-black warm ink        */
  --ink-soft: #514d44;
  --ink-faint:#767160;       /* warm gray — bumped from #8c8678 to pass WCAG AA (4.68:1) on --paper */
  --rule:     #211e18;        /* full black rule            */
  --hair:     #e7e2d4;        /* hairline                   */
  --hair-2:   #d2ccba;        /* heavier hairline           */
  --accent:   #74202c;        /* deep maroon (rubric/links) */
  --accent-2: #8c2c38;        /* lighter maroon for hover   */
  --accent-soft:#f4e9e6;
  --gold:     #9c7c3c;        /* restrained brass ornament  */
  --link:     #74202c;
  --ok:       #3a7a48;

  --serif:    "EB Garamond", "Frank Ruhl Libre", Georgia, "Times New Roman", "Hoefler Text", serif;
  --serif-he: "Frank Ruhl Libre", "Taamey Frank CLM", "Times New Roman", David, serif;
  --sans:     ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --app: 720px;
  --pad: 26px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background:
    radial-gradient(1200px 480px at 50% -10%, #efece2 0%, #e7e3d6 55%, #e2ddcf 100%) fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  line-height: 1.62; font-size: 18.5px; font-kerning: normal;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: .6px; }
button { font-family: inherit; cursor: pointer; color: inherit; }
img { max-width: 100%; }
::selection { background: #e8d9c2; }

#app {
  max-width: var(--app); margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(33,30,24,.07), 0 18px 60px -18px rgba(33,30,24,.28);
  position: relative; padding-bottom: 0;
  display: flex; flex-direction: column;
}
#app.player-active { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
main#view { flex: 1 0 auto; width: 100%; }

/* ---------- top bar ---------- */
.bar {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));   /* clear the iPhone notch / status bar */
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--hair);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.bar .ic-btn { border: 0; background: none; font-size: 19px; color: var(--ink-soft); min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px; line-height: 1; border-radius: 6px; transition: background .12s, color .12s; }
.bar .ic-btn:hover { background: var(--paper-2); color: var(--ink); }
.bar .ic-btn.back { font-size: 26px; padding: 2px 8px 5px; }
.bar .ic-btn[hidden] { display: none; }
.bar .wordmark { font-family: var(--serif-he); direction: rtl; font-size: 21px; font-weight: 600; letter-spacing: .01em; cursor: pointer; }
.bar .wordmark:hover { color: var(--accent); }
.bar .spacer { flex: 1; }
.bar .live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.bar .live.warn { background: #b8860b; box-shadow: 0 0 0 3px rgba(184,134,11,.18); }
.bar .live.err  { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- masthead / title page ---------- */
.titlepage { text-align: center; padding: 38px 24px 6px; }
.titlepage .he { font-family: var(--serif-he); direction: rtl; font-size: clamp(33px, 7vw, 46px); font-weight: 700; line-height: 1.18; letter-spacing: .005em; }
.titlepage .by { font-size: 17px; margin-top: 12px; font-style: italic; color: var(--ink-soft); }
.titlepage .by b { font-style: normal; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.titlepage .sub { font-family: var(--sans); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 9px; }

/* ornamental divider ❖ flanked by hairlines */
.flourish { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px auto 4px; max-width: 360px; color: var(--gold); }
.flourish::before, .flourish::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hair-2) 30%, var(--hair-2) 70%, transparent); }
.flourish span { font-size: 13px; letter-spacing: .2em; }

.rule { height: 0; border: 0; border-top: 1px solid var(--rule); margin: 18px auto; max-width: 560px; }
.rule.thin { border-top-color: var(--hair-2); }
.rule.double { border: 0; border-top: 3px double var(--rule); }

/* ---------- generic ---------- */
.view { padding: 6px var(--pad) 20px; max-width: 660px; margin: 0 auto; width: 100%; animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
.section { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--ink-soft); margin: 30px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 9px; }
.section::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); flex: none; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.pagetitle { font-size: clamp(27px, 5vw, 33px); font-weight: 600; text-align: center; margin: 20px 0 4px; letter-spacing: .005em; }
.lead { text-align: center; color: var(--ink-soft); font-style: italic; margin: 4px auto 20px; max-width: 50ch; font-size: 17px; }

/* link-style buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--hair-2); background: var(--paper); color: var(--ink); padding: 10px 20px; font-size: 16px; border-radius: 4px; transition: background .14s, color .14s, border-color .14s, box-shadow .14s; letter-spacing: .01em; }
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn.accent { border-color: var(--accent); color: var(--accent); }
.btn.accent:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(33,30,24,.12); }
.btn.solid:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn.block { display: flex; width: 100%; }
.btn.sm { padding: 7px 14px; font-size: 14px; }
.vic { font-size: 1.4em; line-height: 1; }   /* the ▦ Watch / video icon — sized up so it reads as a screen */
.textlink { appearance: none; -webkit-appearance: none; background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--link) 45%, transparent); padding: 0 0 1px; font: inherit; cursor: pointer; color: var(--link); }
.textlink:hover { border-bottom-color: var(--accent-2); text-decoration: none; }

/* ---------- Today (hero band) ---------- */
.today { text-align: center; margin: 6px auto 4px; padding: 24px 18px 22px; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); background: linear-gradient(var(--paper), color-mix(in srgb, var(--paper-2) 55%, var(--paper))); position: relative; }
.today .eyebrow { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: var(--accent); }
.today .he { font-family: var(--serif-he); direction: rtl; font-size: clamp(40px, 9.5vw, 62px); font-weight: 700; line-height: 1.05; margin: 12px 0 4px; }
.today .en { font-size: 19px; color: var(--ink-soft); letter-spacing: .01em; }
.today .date { font-size: 14px; color: var(--ink-faint); margin-top: 8px; }
.today .actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.adjacent { display: flex; justify-content: center; gap: 14px; margin-top: 18px; font-size: 14px; flex-wrap: wrap; }
.adjacent a, .adjacent button { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--hair); border-radius: 999px; background: none; transition: border-color .14s, background .14s; }
.adjacent a:hover, .adjacent button:hover { border-color: var(--hair-2); background: var(--paper-2); text-decoration: none; color: var(--ink); }
.adjacent .nm { font-family: var(--serif-he); direction: rtl; font-weight: 600; color: var(--accent); }

/* ---------- list rows ---------- */
.rows { margin-top: 4px; }
.row { -webkit-appearance: none; appearance: none; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hair); color: var(--ink); font: inherit;
  display: flex; align-items: center; gap: 14px; padding: 12px 8px 12px 10px; position: relative; transition: background .12s; }
.row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .15s; }
.row:hover { background: color-mix(in srgb, var(--paper-2) 70%, var(--paper)); }
.row:hover::before { transform: scaleY(1); }
.row .rnum, .drow .rnum { font-family: var(--serif-he); direction: rtl; font-size: 18px; font-weight: 700; color: var(--accent); min-width: 42px; text-align: center; border-right: 1px solid var(--hair); padding-right: 12px; flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.row .rnum.sym { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.row .rmain, .drow .rmain { flex: 1; min-width: 0; }
.row .rmain b, .drow .rmain b { font-weight: 600; font-size: 17.5px; display: block; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.row .rmeta, .drow .rmeta { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink-faint); margin-top: 2px; letter-spacing: .01em; }
.row .rgo { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair-2); color: var(--accent); font-size: 11px; display: grid; place-items: center; transition: background .14s, color .14s, border-color .14s; }
.svg-ic { display: block; }
.row:hover .rgo { background: var(--accent); border-color: var(--accent); color: #fff; }
.row.is-new .rmain b::after { content: "new"; font-family: var(--sans); margin-left: 8px; color: #fff; background: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; vertical-align: 2px; }

/* ---------- Browse: single-column box navigation (Shas · Parsha · Holidays) ----------
   Full-width tappable boxes, one per line, that open the next level — styled to
   the sefer theme: ivory panel, ink border, maroon on touch. */
.boxcol { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 12px 0 10px; }
.boxcol-top { margin-top: 22px; }
.navbox { -webkit-appearance: none; appearance: none; width: 100%; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(#fdfbf4, #f6f2e8); border: 1.5px solid #5b564a; border-radius: 6px; box-shadow: 0 2px 0 rgba(33,30,24,.16);
  padding: 17px 16px; color: var(--ink); font: inherit; transition: transform .12s, box-shadow .12s, border-color .12s, color .12s, background .12s; }
.navbox:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: 0 5px 14px -6px rgba(33,30,24,.4); }
.navbox:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(33,30,24,.16); }
.navbox .nb-he { font-family: var(--serif-he); direction: rtl; font-size: 27px; font-weight: 700; line-height: 1.25; }
.navbox.latin .nb-he { font-family: var(--serif); direction: ltr; font-size: 23px; font-weight: 600; }
.navbox .nb-sub { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; }
.navbox.empty { background: var(--paper); box-shadow: none; border-color: var(--hair-2); }
.navbox.empty .nb-he { color: var(--ink-soft); font-weight: 600; }

/* level header: round back button + centered Hebrew title */
.boxhead { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; margin: 18px 0 4px; }
.boxback { grid-column: 1; -webkit-appearance: none; appearance: none; border: 1.5px solid #5b564a; background: var(--paper); color: var(--ink); width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px; transition: background .13s, color .13s, border-color .13s, transform .12s; }
.boxback:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.05); }
.boxback:active { transform: scale(.94); }
.boxhead-t { grid-column: 2; text-align: center; min-width: 0; }
.boxhead-t .he { font-family: var(--serif-he); direction: rtl; font-size: clamp(30px, 6.4vw, 38px); font-weight: 700; line-height: 1.15; }
.boxhead-t .he.latin { font-family: var(--serif); direction: ltr; font-size: clamp(26px, 5.6vw, 32px); font-weight: 600; }
.boxhead-t .en { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
/* keyboard focus must not square off the circular controls (the global
   :focus-visible rule sets border-radius: 2px) */
.boxback:focus-visible, .drow-play:focus-visible { border-radius: 50%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* masechta → one row per daf, with its shiur where the Rabbi has given it */
.drows { margin-top: 10px; }
.drow { display: flex; align-items: stretch; border-bottom: 1px solid var(--hair); position: relative; transition: background .12s; }
.drow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .15s; }
.drow:hover { background: color-mix(in srgb, var(--paper-2) 70%, var(--paper)); }
.drow:hover::before { transform: scaleY(1); }
.drow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 8px 12px 10px; background: none; border: 0; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.drow.future .rmain b { color: var(--ink-soft); font-weight: 500; }
.drow.future .rnum { color: var(--ink-faint); font-weight: 400; }
.drow-chk { flex: none; align-self: center; color: var(--ok); font-weight: 700; font-size: 14px; }
.drow-play { flex: none; align-self: center; width: 40px; height: 40px; margin: 0 8px 0 4px; border-radius: 50%; border: 1px solid var(--hair-2); background: var(--paper); color: var(--accent); font-size: 13px; display: grid; place-items: center; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.drow-play:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Daf page: breadcrumbs ---------- */
.crumbs { font-family: var(--sans); font-size: 12.5px; color: var(--ink-faint); margin: 8px 0 2px; letter-spacing: .01em; }
.crumbs a, .crumbs button { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ink-soft); } .crumbs b { color: var(--ink); font-weight: 600; }

/* ---------- Daf page (native) ---------- */
.daf-head { text-align: center; margin: 8px 0 6px; }
.daf-head .he { font-family: var(--serif-he); direction: rtl; font-size: clamp(30px, 6vw, 38px); font-weight: 700; }
.daf-head .en { font-size: 16px; color: var(--ink-soft); }
.daf-head .meta { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); margin-top: 6px; letter-spacing: .01em; }
.daf-media { display: flex; gap: 10px; justify-content: center; margin: 16px 0 6px; flex-wrap: wrap; }
.daf-video { width: 100%; border: 1px solid var(--hair-2); background: #000; border-radius: 4px; margin-top: 12px; }
.sponsor-strip { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 18px 18px 16px; margin: 16px 0; text-align: center; position: relative; }
.sponsor-strip::before { content: "✦"; color: var(--gold); display: block; font-size: 14px; margin-bottom: 6px; }
.sponsor-strip b { color: var(--accent); font-size: 17px; }
.sponsor-strip .btn { margin-top: 12px; }

.daf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 10px; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--hair); padding: 9px 0 8px; }
.daf-toolbar .ttl { font-family: var(--sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-soft); }
.seg { display: inline-flex; border: 1px solid var(--hair-2); border-radius: 5px; overflow: hidden; }
.seg button { border: 0; background: var(--paper); color: var(--ink-soft); font-size: 12.5px; padding: 6px 12px; font-family: var(--sans); transition: background .12s, color .12s; }
.seg button + button { border-left: 1px solid var(--hair-2); }
.seg button.on { background: var(--ink); color: var(--paper); }
.seg button:not(.on):hover { background: var(--paper-2); color: var(--ink); }

.fs-btn { -webkit-appearance: none; appearance: none; border: 1px solid var(--hair-2); background: var(--paper); color: var(--ink-soft); width: 40px; height: 40px; border-radius: 6px; font-size: 16px; display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s; }
.fs-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* top-section day/lecture nav — turns the WHOLE page to the prev / next daf */
.daf-daynav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.daf-head-titles { min-width: 0; }
.daynav { -webkit-appearance: none; appearance: none; flex: none; border: 1px solid var(--hair-2); background: var(--paper); color: var(--accent); width: 40px; height: 40px; border-radius: 50%; font-size: 23px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px; transition: background .13s, color .13s, border-color .13s, opacity .14s, transform .12s; }
.daynav:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.06); }
.daynav:active { transform: scale(.95); }
.daynav:disabled { opacity: .22; pointer-events: none; }
/* phone layout (is-narrow = viewport 560px OR forced phone view) */
html.is-narrow .daynav { width: 36px; height: 36px; font-size: 21px; }
html.is-narrow .daf-daynav { gap: 10px; }


/* gemara-flip arrows live INSIDE the daf, flanking the נב·א page number on both
   sides — identical in every mode (Daf / עברית / English / Both). Borderless;
   they flip ONLY the gemara in place. */
.flip-label { display: flex; align-items: center; justify-content: center; gap: 18px; }
/* hold the DOM order (Hebrew RTL pagination: ‹ next = left, › prev = right) against
   the rtl label — keep the row itself ltr so the chevrons don't bidi-flip */
.dafpage-label.flip-label, .amud-label.flip-label { direction: ltr !important; }
.flip-label .lbl-t { direction: rtl; }
.amud-label.flip-label::before, .amud-label.flip-label::after { display: none; }   /* drop the side rules when arrows flank the number */
.pageflip { -webkit-appearance: none; appearance: none; flex: none; border: 0; background: none; color: var(--accent); width: 30px; height: 30px; border-radius: 50%; font-size: 23px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px; transition: background .13s, color .13s, opacity .14s, transform .12s; }
.pageflip:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-2); transform: scale(1.15); }
.pageflip:active { transform: scale(.92); }
.pageflip:disabled { opacity: .22; pointer-events: none; }

/* ---------- full-screen Daf reader (overlay) ---------- */
html.reader-open { overflow: hidden; }
.reader { position: fixed; inset: 0; z-index: 44; background: var(--paper); display: flex; flex-direction: column; animation: fade .18s ease; }
.reader[hidden] { display: none; }
.reader-bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 11px 18px; padding-top: calc(11px + env(safe-area-inset-top, 0px)); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: saturate(1.1) blur(8px); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--hair-2); }
.reader-bar .rd-side { display: flex; align-items: center; gap: 8px; }
.reader-bar .rd-left { justify-self: start; }
.reader-bar .rd-right { justify-self: end; }
.reader-bar .rd-ic { -webkit-appearance: none; appearance: none; border: 1px solid var(--hair-2); background: var(--paper); color: var(--ink-soft); width: 36px; height: 36px; border-radius: 8px; font-size: 21px; line-height: 1; display: grid; place-items: center; flex: none; padding: 0 0 2px; transition: background .12s, color .12s, border-color .12s, opacity .12s; }
.reader-bar .rd-ic:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.reader-bar .rd-ic.close { font-size: 15px; padding: 0; }
.reader-bar .rd-ic.play { color: var(--accent); font-size: 14px; padding: 0; }
.reader-bar .rd-ic:disabled { opacity: .28; cursor: default; }
.reader-bar .rd-ic:disabled:hover { background: var(--paper); border-color: var(--hair-2); color: var(--ink-soft); }
.reader-bar .rd-title { justify-self: center; text-align: center; line-height: 1.12; min-width: 0; padding: 0 8px; }
.reader-bar .rd-title .he { font-family: var(--serif-he); direction: rtl; font-size: 21px; font-weight: 700; display: block; }
.reader-bar .rd-title .en { font-family: var(--sans); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-top: 1px; }
.reader-bar .rd-seg { flex: none; }
.reader-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 24px 48px; max-width: 1040px; margin: 0 auto; width: 100%; }
/* full-screen daf uses the width; single-column reading text stays a comfortable measure, centered */
.reader-body .amud { max-width: 760px; margin-left: auto; margin-right: auto; }
.reader-body .dafpage { max-width: 100%; }
html.player-on .reader-body { padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
/* phone layout (is-phone = viewport 680px OR forced phone view) */
html.is-phone .reader-bar { gap: 8px 6px; padding-left: 10px; padding-right: 10px; }
html.is-phone .reader-bar .rd-right { grid-column: 1 / -1; justify-self: center; }
html.is-phone .reader-bar .rd-title .he { font-size: 18px; }
html.is-phone .reader-body { padding: 12px 14px 48px; }


.amud { margin: 18px 0 24px; }
.amud .amud-label { font-family: var(--serif-he); direction: rtl; text-align: center; font-size: 15px; letter-spacing: .04em; color: var(--accent); margin-bottom: 12px; position: relative; }
.amud .amud-label::before, .amud .amud-label::after { content: ""; position: absolute; top: 50%; width: 28%; height: 1px; background: var(--hair-2); }
.amud .amud-label::before { left: 0; } .amud .amud-label::after { right: 0; }
.daf-he { font-family: var(--serif-he); direction: rtl; text-align: justify; font-size: 20px; line-height: 1.95; }
.daf-en { direction: ltr; text-align: justify; font-size: 17px; line-height: 1.72; color: #2a2823; }
.daf-en b, .daf-en strong { font-weight: 700; color: #000; }
.seg-pair { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.seg-pair .daf-he { margin-bottom: 8px; }
.daf-loading { text-align: center; color: var(--ink-faint); padding: 34px; font-style: italic; }

/* ---------- "Daf" layout — Tzuras Hadaf (Gemara center · Rashi + Tosafos margins) ---------- */
.dafpage { border: 1px solid var(--hair-2); border-radius: 6px; padding: 16px 16px 10px; margin: 16px 0 24px; background: linear-gradient(#fdfbf4, #fbf8ee); box-shadow: 0 1px 0 var(--hair); }
.dafpage-label { font-family: var(--serif-he); direction: rtl; text-align: center; font-size: 16px; font-weight: 700; color: var(--accent); margin-bottom: 12px; letter-spacing: .03em; }
.dafpage-grid { display: grid; grid-template-columns: 1fr 1.75fr 1fr; gap: 18px; direction: rtl; align-items: start; }
.dafpage-grid .col { direction: rtl; min-width: 0; }
.col-h { font-family: var(--serif-he); direction: rtl; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-faint); border-bottom: 1px solid var(--hair); padding-bottom: 5px; margin-bottom: 9px; letter-spacing: .03em; }
.col.gemara .gem { font-family: var(--serif-he); direction: rtl; text-align: justify; font-size: 18.5px; line-height: 1.85; }
.col.side .comm { font-family: var(--serif-he); direction: rtl; text-align: justify; font-size: 13px; line-height: 1.64; margin: 0 0 9px; color: var(--ink-soft); }
.col.side .comm b { color: var(--ink); font-weight: 700; }
.col-empty { color: var(--hair-2); text-align: center; font-size: 18px; padding: 10px 0; }
/* the phone column selector is hidden on wider screens (all 3 columns show) */
.daf-colhead { display: none; }
/* phone layout (is-phone = viewport 680px OR forced phone view) */
html.is-phone .dafpage { padding: 14px 13px 10px; }
html.is-phone .dafpage-label .pageflip { display: none; }
html.is-phone .dafpage-grid { grid-template-columns: 1fr; gap: 0; }
html.is-phone .col-gemara .dafpage-grid .col:not(.gemara), html.is-phone .col-rashi .dafpage-grid .col:not(.rashi), html.is-phone .col-tosafos .dafpage-grid .col:not(.tosafos) { display: none; }
html.is-phone .dafpage-grid .col.side { border-top: 0; padding-top: 0; margin-top: 0; }
html.is-phone .col.gemara .gem { font-size: 20px; line-height: 1.9; }
html.is-phone .col.side .comm { font-size: 17px; line-height: 1.8; }
html.is-phone .col-h { display: none; }
html.is-phone .daf-toolbar { flex-wrap: wrap; gap: 8px; }
html.is-phone .seg button { padding: 6px 10px; }
html.is-phone .daf-colhead { display: flex; flex-direction: column; align-items: center; gap: 6px; direction: ltr;
    position: -webkit-sticky; position: sticky; top: var(--bar-h, 54px); z-index: 20;
    margin: 0 0 14px; padding: 9px 6px; background: var(--paper); border-bottom: 1px solid var(--hair);
    transition: top .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease; }
html.is-phone .reader-body .daf-colhead { top: 0; }
html.is-phone .daf-flip-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
html.is-phone .daf-flip-lbl { font-family: var(--serif-he); direction: rtl; font-size: 18px; font-weight: 700; color: var(--accent); }
html.is-phone .daf-cols-row { display: flex; align-items: baseline; justify-content: center; gap: 26px; }
html.is-phone .daf-colhead .col-tab { -webkit-appearance: none; appearance: none; background: none; cursor: pointer;
    font-family: var(--serif-he); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: .01em;
    color: var(--ink-faint); padding: 5px 4px 4px; border: 0; border-bottom: 2px solid transparent;
    transition: color .16s, border-color .16s; }
html.is-phone .daf-colhead .col-tab:hover { color: var(--accent-2); }
html.is-phone .daf-colhead .col-tab.on { color: var(--accent); border-bottom-color: var(--accent); }


/* ---------- Sponsor ---------- */
.sp-opts { display: grid; gap: 10px; margin: 8px 0 16px; }
.sp-opt { -webkit-appearance: none; appearance: none; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--hair-2); border-radius: 5px; padding: 14px 16px; background: var(--paper); text-align: left; color: var(--ink); font: inherit; transition: border-color .14s, background .14s; }
.sp-opt:hover { border-color: var(--ink-soft); }
.sp-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.sp-opt b { font-size: 16.5px; font-weight: 600; } .sp-opt span { display: block; } .sp-opt > span span { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.sp-opt .price { font-size: 18px; color: var(--accent); font-weight: 600; flex: none; margin-left: 12px; }
.sp-form { border: 1px solid var(--hair-2); border-radius: 6px; padding: 18px; background: color-mix(in srgb, var(--paper-2) 40%, var(--paper)); }
.sp-form input, .sp-form select, #spDate, #spMas { width: 100%; border: 1px solid var(--hair-2); border-radius: 4px; padding: 11px; font-size: 15px; font-family: inherit; margin-bottom: 10px; background: #fffdf8; color: var(--ink); }
.sp-form input:focus, .sp-form select:focus { outline: none; border-color: var(--accent); }
.field-label { font-family: var(--sans); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin: 10px 0 5px; }
.sp-target { font-size: 15.5px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.sp-target b { color: var(--accent); }

/* ---------- Donate ---------- */
.donate-box { text-align: center; border: 1px solid var(--hair-2); border-radius: 8px; padding: 26px 22px; background: color-mix(in srgb, var(--paper-2) 35%, var(--paper)); }
.qr-frame { background: #fff; border: 1px solid var(--hair-2); padding: 16px 16px 12px; display: inline-block; border-radius: 8px; box-shadow: 0 6px 22px -10px rgba(33,30,24,.3); }
.qr-frame img { width: 230px; height: 230px; object-fit: contain; display: block; }
.qr-frame .qr { display: block; width: 230px; height: 230px; }
.qr-frame .qr-cap { font-family: var(--sans); font-size: 10.5px; color: var(--ink-faint); text-align: center; margin-top: 10px; max-width: 230px; letter-spacing: .02em; }
.qr-frame .qr-cap .zelle-brand { font-size: 11px; }
.zelle-line { margin-top: 18px; font-size: 16px; }
.zelle-line b { display: block; font-weight: 600; font-size: 18px; margin: 2px 0; }
.zelle-line .muted { display: block; font-family: var(--sans); font-size: 13px; }
.zelle-brand { color: #6d1ed4; font-weight: 700; }
.copy-btn { margin-top: 14px; }

/* ---------- prose / faq ---------- */
.prose p { color: #2c2a24; margin: 0 0 15px; text-align: justify; }
.faq { border-bottom: 1px solid var(--hair); }
.faq summary { padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 18px; font-family: var(--sans); transition: transform .18s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 16px; color: var(--ink-soft); font-size: 16px; }
.credits { font-family: var(--sans); font-size: 11px; color: var(--ink-faint); text-align: center; margin-top: 26px; }

/* ---------- menu ---------- */
.mask { position: fixed; inset: 0; background: rgba(28,26,22,.4); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .22s; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
.mask.open { opacity: 1; pointer-events: auto; }
.menu { position: fixed; top: 0; left: 0; height: 100%; width: min(300px, 86vw); background: var(--paper); border-right: 1px solid var(--hair-2); box-shadow: 8px 0 40px -8px rgba(33,30,24,.35); z-index: 65; transform: translateX(-100%); transition: transform .24s ease; overflow-y: auto; }
.menu.open { transform: none; }
.menu .mtitle { font-family: var(--serif-he); direction: rtl; font-size: 24px; font-weight: 700; padding: calc(24px + env(safe-area-inset-top, 0px)) 22px 6px; }
.menu .msub { font-family: var(--sans); padding: 0 22px 16px; font-size: 12px; color: var(--ink-faint); border-bottom: 1px solid var(--hair); letter-spacing: .01em; }
.menu nav { padding: 10px 0; }
.menu a, .menu button.mi { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 22px; font-size: 17px; color: var(--ink); transition: background .12s; border-left: 2px solid transparent; }
.menu a:hover, .menu button.mi:hover { background: var(--paper-2); text-decoration: none; border-left-color: var(--accent); }
.menu .accent { color: var(--accent); }

/* ---------- phone view (desktop): the toggle forces the real phone layout via the
   is-phone / is-narrow classes; here we just narrow the whole app to a phone width
   so it actually looks like a phone (the player + toasts track --app too) ---------- */
html.force-phone { --app: 460px; }
html.force-phone #app { box-shadow: 0 0 0 1px rgba(33,30,24,.1), 0 24px 70px -20px rgba(33,30,24,.4); }
@media (max-width: 680px) { .phoneview-mi { display: none; } }   /* on a real phone the toggle is pointless */

/* ---------- player — one compact bar for audio + video ----------
   A thin full-width scrub sits over a single control row: now-playing on the
   left (♪ audio / ▦ video), transport on the right. Half the height of the old
   three-row bar, so the daf keeps the screen. */
.player { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--app); z-index: 45;
  background: color-mix(in srgb, var(--paper) 92%, #fff);
  -webkit-backdrop-filter: saturate(1.12) blur(10px); backdrop-filter: saturate(1.12) blur(10px);
  border-top: 1px solid var(--hair-2); box-shadow: 0 -10px 30px -16px rgba(33,30,24,.3);
  padding: 9px 18px calc(11px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.player.hidden { transform: translateX(-50%) translateY(130%); }
.player .scrub { display: flex; align-items: center; }
.player input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px; cursor: pointer; background: linear-gradient(var(--accent),var(--accent)) no-repeat, var(--hair-2); background-size: 0% 100%; }
.player input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(33,30,24,.3); }
.player input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 0; }
.player .prow { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.player .pnow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.player .pnow .ptype { flex: none; color: var(--accent); font-size: 16px; line-height: 1; opacity: .85; }
.player .pnow .ptxt { min-width: 0; display: flex; flex-direction: column; }
.player .pnow b { font-weight: 600; font-size: 14.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .pnow .ptime { font-family: var(--sans); font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: .02em; margin-top: 1px; }
.player .ctrls { display: flex; align-items: center; gap: 16px; flex: none; font-family: var(--sans); }
.player .ctrls button { border: 0; background: none; font-size: 13.5px; color: var(--ink); min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; border-radius: 8px; transition: color .12s, background .12s; }
.player .ctrls button .d { font-size: 10.5px; }
.player .ctrls button:hover { color: var(--accent); background: var(--paper-2); }
.player .ctrls .pp { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; box-shadow: 0 3px 12px -3px rgba(116,32,44,.55); }
.player .ctrls .pp:hover { background: var(--accent-2); color: #fff; }
.player .ctrls .pill { min-width: 0; min-height: 0; border: 1px solid var(--hair-2); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; color: var(--ink-soft); }
.player .ctrls .pill:hover { border-color: var(--accent); color: var(--accent); background: none; }
.player .x { flex: none; border: 0; background: none; color: var(--ink-faint); font-size: 14px; line-height: 1; min-width: 32px; min-height: 36px; border-radius: 8px; transition: color .12s, background .12s; }
.player .x:hover { color: var(--ink); background: var(--paper-2); }

/* ---------- misc ---------- */
.hdate { font-family: var(--serif-he); }
.datesep { color: var(--ink-faint); margin: 0 .2em; }
.searchbar { margin: 8px 0 16px; position: relative; }
.searchbar input { width: 100%; border: 0; border-bottom: 1.5px solid var(--ink); background: none; padding: 10px 2px; font-size: 19px; font-family: var(--serif); outline: none; color: var(--ink); }
.searchbar input::placeholder { color: var(--ink-faint); font-style: italic; }
.empty-mini { text-align: center; color: var(--ink-faint); padding: 30px; font-style: italic; }
.toast-wrap { position: fixed; bottom: calc(120px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; max-width: var(--app); pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 6px; font-size: 14px; box-shadow: 0 10px 34px -8px rgba(0,0,0,.4); animation: fade .25s; }
footer { margin-top: auto; text-align: center; font-family: var(--sans); font-size: 12px; color: var(--ink-faint); padding: 34px 22px 30px; line-height: 1.8; border-top: 1px solid var(--hair); }
footer .fhe { font-family: var(--serif-he); direction: rtl; font-size: 17px; color: var(--ink-soft); display: block; margin-bottom: 4px; }
footer a { color: var(--ink-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* keyboard focus rings for inputs that suppress :focus outline for mouse users */
.searchbar input:focus-visible, .sp-form input:focus-visible, .sp-form select:focus-visible,
.editor input:focus-visible, .editor textarea:focus-visible, .editor select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor { padding: 18px; } .editor label { display: block; font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 14px 0 5px; font-weight: 700; }
.editor input, .editor textarea, .editor select { width: 100%; border: 1px solid var(--hair-2); border-radius: 4px; padding: 9px; font-family: inherit; font-size: 15px; }

/* ===== personal progress (learned dapim · resume · continue) ===== */
.prog { margin: 12px auto; max-width: 460px; }
.prog-track { height: 8px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--hair-2); overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 999px; transition: width .45s cubic-bezier(.4,0,.2,1); min-width: 0; }
.prog-label { display: flex; justify-content: space-between; gap: 12px; font-family: var(--sans); font-size: 11.5px; letter-spacing: .03em; color: var(--ink-soft); margin-top: 7px; }
.prog-label .prog-n { color: var(--accent); font-weight: 700; direction: ltr; flex: none; }

.continue { display: grid; gap: 9px; }
.cont-row { -webkit-appearance: none; appearance: none; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--hair-2); border-radius: 7px; color: var(--ink); font: inherit; display: flex; align-items: center; gap: 13px; padding: 13px 15px; transition: border-color .14s, background .14s, box-shadow .14s; }
.cont-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--paper)); box-shadow: 0 1px 0 rgba(33,30,24,.05); }
.cont-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 14px; }
.cont-ic.ghost { background: var(--paper); color: var(--accent); border: 1px solid var(--accent); }
.cont-main { display: flex; flex-direction: column; min-width: 0; }
.cont-main b { font-weight: 600; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-sub { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.cont-prog { margin-top: 2px; }

.daf-progress { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 2px; }
.learn-toggle { -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--hair-2); background: var(--paper); color: var(--ink-soft); border-radius: 999px; min-height: 40px; display: inline-flex; align-items: center; padding: 7px 18px; font-family: var(--sans); font-size: 13px; letter-spacing: .02em; transition: background .14s, color .14s, border-color .14s; }
.learn-toggle:hover { border-color: var(--accent); color: var(--accent); }
.learn-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.learn-toggle.on:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.learn-meta { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); letter-spacing: .01em; }

.mystuff-top { margin: 4px auto 8px; max-width: 460px; }

/* Solid fallbacks for engines without color-mix() (Safari < 16.2, Firefox < 113,
   older Chromium). Modern engines support color-mix and skip this whole block, so
   the tinted/translucent originals above are used there. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .bar { background: var(--paper); }
  .reader-bar { background: var(--paper); }
  .player { background: var(--paper); }
  .sp-form, .donate-box { background: var(--paper); }
  .today { background: linear-gradient(var(--paper), #f9f6ed); }
  .row:hover { background: #f6f2e8; }
  .drow:hover { background: #f6f2e8; }
  .cont-row:hover { background: #f8f2ed; }
  .pageflip:hover { background: var(--accent-soft); }
  .textlink { border-bottom: 1px solid rgba(116,32,44,.45); }
  .bar .live { box-shadow: 0 0 0 3px rgba(58,122,72,.18); }
  .navbox { background: #faf7ef; }
}

/* phone layout (is-narrow = viewport 560px OR forced phone view) */
html.is-narrow { --pad: 18px; }
html.is-narrow body { font-size: 17.5px; }
html.is-narrow .titlepage { padding-top: 28px; }
html.is-narrow .daf-progress { flex-direction: column; gap: 7px; }


/* ===== phone: compact chrome + collapse-on-scroll (maximize reading space) ===== */
/* phone layout (is-phone = viewport 680px OR forced phone view) */
html.is-phone .bar { padding-top: calc(5px + env(safe-area-inset-top, 0px)); padding-bottom: 5px; gap: 6px; }
html.is-phone .daf-colhead { gap: 3px; padding: 6px 6px 7px; margin: 0 0 12px; }
html.is-phone .daf-flip-lbl { font-size: 16px; }
html.is-phone .daf-colhead .col-tab { font-size: 19px; }
html.is-phone .daf-cols-row { gap: 24px; }
@keyframes dyColFade { from { opacity: .45; } to { opacity: 1; } }
html.is-phone .col-switched .dafpage { animation: dyColFade .18s ease; }
html.is-phone .player { padding: 7px 13px calc(8px + env(safe-area-inset-bottom, 0px)); }
html.is-phone .player .prow { gap: 9px; margin-top: 6px; }
html.is-phone .player .pnow { gap: 7px; }
html.is-phone .player .pnow b { font-size: 13.5px; }
html.is-phone .player .pnow .ptime { font-size: 10px; }
html.is-phone .player .ctrls { gap: 8px; }
html.is-phone .player .ctrls button { min-width: 36px; min-height: 38px; font-size: 13px; }
html.is-phone .player .ctrls .pp { width: 40px; height: 40px; font-size: 14px; }
html.is-phone .player .ctrls .pill { padding: 4px 9px; font-size: 11px; }
html.is-phone .player .x { min-width: 28px; }
html.is-phone #app.player-active { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
html.is-phone .toast-wrap { bottom: calc(106px + env(safe-area-inset-bottom, 0px)); }
html.is-phone.dy-min .bar { transform: translateY(-100%); }
html.is-phone.dy-min .daf-colhead { top: 0; box-shadow: 0 8px 16px -12px rgba(33, 30, 24, .45); }

/* Respect the OS "reduce motion" setting — collapse animations/transitions to
   near-instant. State changes still apply; only the motion is removed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}