/* L'Zecher Nishmas: the June 2020 XD design (orange buttons, cream panels) with the Parchment header (Oct 2026).
   Direction-neutral: margins and padding use logical properties, so Hebrew (dir=rtl) mirrors. */
@font-face { font-family: Heebo; font-weight: 300 700; font-display: swap; src: url(fonts/heebo-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-weight: 300 700; font-display: swap; src: url(fonts/heebo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Heebo; font-weight: 300 700; font-display: swap; src: url(fonts/heebo-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; }
/* header name only: Frank Ruhl Libre (Hebrew) and Cormorant Garamond (English), both SIL OFL */
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 700; font-display: swap; src: url(fonts/frank-ruhl-libre-700-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: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-600-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 {
  --orange: #b85a2c; --orange-dark: #9a4822; --accent: #c16535; --cream: #fffcf4;
  --ink: #1b1b1b; --grey: #707070; --line: #d9d2c3; --burgundy: #7a2433;
  --taken: #efe6d2; --done: #3f8f4f; --radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Heebo, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.5; color: var(--ink); background: #fff; }
a { color: var(--accent); }
a:hover { color: var(--orange-dark); }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
bdi { unicode-bidi: isolate; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.testing-banner { background: #fff3c4; color: #5a4300; text-align: center; font-size: .9rem; padding: 6px 16px; }

/* header: Project Genesis on a white bar, then the name beside the candle on parchment.
   The name and candle are one lockup; its grid mirrors in Hebrew so the text always hugs the candle. */
.masthead-top { background: #fff; border-block-end: 2px solid var(--accent); }
.masthead-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.pg-logo img { display: block; height: 40px; width: auto; }
.lang-switch { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; overflow: hidden; color: #a5532a; font-size: .85rem; line-height: 1; white-space: nowrap; }
.lang-switch > * { padding: 7px 13px; color: inherit; text-decoration: none; }
.lang-switch [lang=he] { font-size: .9rem; }
.lang-switch [aria-current] { background: var(--accent); color: #fff; }
.lang-switch a:hover { background: #f8e9dc; color: inherit; }
.masthead-main { position: relative; overflow: hidden; background-color: #f6e7c8;
  background-image: radial-gradient(ellipse 46% 95% at 50% 100%, rgba(255,210,140,.85), rgba(255,210,140,0) 72%), linear-gradient(180deg, #fdf8ec, #f2dcb2);
  border-block-end: 1px solid #d9bf8f; }
.masthead-main::before { content: ""; position: absolute; inset: 0; background: url(img/mishnah-tile.jpg) repeat; background-size: 210px auto; opacity: .1; mix-blend-mode: multiply; }
.brand { position: relative; display: grid; grid-template-columns: auto auto; grid-template-areas: "he candle" "en candle"; justify-content: center; column-gap: 34px; padding-block-start: 22px; text-decoration: none; }
.brand-he, .brand-en { position: relative; z-index: 1; justify-self: end; line-height: 1.04; white-space: nowrap; }
.brand-he { grid-area: he; align-self: end; font-family: "Frank Ruhl Libre", Heebo, serif; font-weight: 700; font-size: 56px; color: var(--burgundy); }
.brand-en { grid-area: en; align-self: start; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 48px; color: #3a291e; margin-block-end: 26px; }
.brand:hover .brand-he { color: var(--burgundy); }
.brand-candle { grid-area: candle; position: relative; align-self: end; }
.brand-candle img { position: relative; display: block; height: 160px; width: auto; }
.brand-candle::before { content: ""; position: absolute; left: 50%; top: 14%; width: 500px; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,186,96,.6), transparent); pointer-events: none; }

/* buttons and top links */
.button { display: inline-block; border: 0; border-radius: 6px; padding: 10px 22px; font: inherit; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,.16); }
.button-orange { background: var(--orange); color: #fff; font-size: 1.15rem; }
.button-orange:hover { background: var(--orange-dark); color: #fff; }
.button-dark { background: #000; color: #fff; }
.button-outline { background: #fff; color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange); }
.button-outline:hover { background: #fbf1ea; color: var(--orange-dark); }
.topnav-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.topnav-home { color: var(--ink); text-transform: uppercase; text-decoration: none; }
.button-dark:hover { background: #333; color: #fff; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; }
form.inline { display: inline; }
.topnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 24px; }
.topnav-links { display: flex; gap: 24px; text-transform: uppercase; font-size: 1.05rem; }
.topnav-links a { color: var(--ink); text-decoration: none; }
.flash { background: #eaf6ec; border: 1px solid #b6dcbd; border-radius: 6px; padding: 10px 14px; }
.notice { background: #fff3e8; border-inline-start: 4px solid var(--orange); padding: 8px 12px; }

/* panels */
.panel { border-radius: var(--radius); padding: 28px 32px; margin-block-end: 24px; }
.panel-cream { background: var(--cream); border: 3px solid var(--grey); }
.panel-outline { border: 3px solid var(--accent); }
.panel-outline h2 { color: var(--accent); }
.home-columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: start; }

/* homepage */
.search { display: flex; gap: 8px; margin-block: 8px 12px; }
.search input { flex: 1; min-width: 0; font: inherit; padding: 10px 14px; border: 2px solid #000; border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,.16); background: #fff; }
.sort { color: var(--accent); text-transform: uppercase; font-size: .85rem; }
.sort a, .sort strong { margin-inline-start: 8px; }
.siyum-list { list-style: none; margin: 0; padding: 0; }
.siyum-list li { padding-block: 10px; border-block-end: 1px solid var(--line); }
.siyum-list a { color: var(--ink); text-decoration: none; }
.siyum-list a:hover { text-decoration: underline; }
.siyum-date { display: block; color: var(--grey); font-size: .85rem; }
.load-more { text-transform: uppercase; font-size: .9rem; }

/* progress: two layers, taken and completed */
.progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block: 8px 16px; }
.progress-bar { position: relative; flex: 1 1 240px; height: 14px; border-radius: 7px; background: #ece6d8; overflow: hidden; }
.progress-small .progress-bar { flex-basis: 140px; height: 8px; max-width: 260px; }
.progress-bar span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; }
.progress-reserved { background: #f5b48c; }
.progress-done { background: var(--done); }
.progress-text { font-size: .85rem; color: var(--grey); }
.progress-small { margin: 4px 0 0; }

/* siyum page */
.lzecher { margin: 0; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; }
.niftar { font-size: 2.2rem; margin-block: 4px; }
.niftar-en { margin-block: 0 8px; font-size: 1.2rem; color: #444; }
.work-name { font-size: 1.4rem; margin-block-start: 1.2em; border-block-end: 2px solid var(--line); padding-block-end: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-block-end: 20px; }
.grid-group-wide { grid-column: 1 / -1; }
.grid-group-wide ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 16px; }
.grid-group h4 { font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.grid-group ul { list-style: none; margin: 0 0 14px; padding: 0; }
.unit { padding: 4px 8px; border-radius: 6px; margin-block-end: 2px; }
.unit-taken { background: var(--taken); }
.unit-partial { background: linear-gradient(to right, var(--taken), #fff); }
[dir=rtl] .unit-partial { background: linear-gradient(to left, var(--taken), #fff); }
.unit-size { color: var(--grey); margin-inline-start: 4px; }
.claim, .free { display: block; font-size: .85rem; color: #555; padding-inline-start: 12px; }
.free { color: var(--done); }
.claim-extra { color: var(--accent); }
.claim-done .check, .check { color: var(--done); font-weight: 700; margin-inline-start: 4px; }

/* footer */
.merit { text-align: center; font-size: 1.6rem; margin-block: 28px; }
.footer { background: #000; color: #fff; padding-block: 40px; }
.footer a { color: #fff; }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: center; }
.footer-contact strong { text-transform: uppercase; font-weight: 400; }
.footer-tradition { font-size: 1.35rem; text-align: center; margin: 0; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .masthead-top-inner { padding-block: 8px; }
  .pg-logo img { height: 27px; }
  .lang-switch { font-size: .8rem; }
  .lang-switch > * { padding: 6px 10px; }
  .brand { column-gap: 16px; padding-block-start: 16px; }
  .brand-he { font-size: 36px; }
  .brand-en { font-size: 29px; margin-block-end: 16px; }
  .brand-candle img { height: 104px; }
  .brand-candle::before { width: 320px; }
  .home-columns, .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 18px 16px; }
  .merit { font-size: 1.25rem; }
  .footer-tradition { font-size: 1.1rem; }
  .button-orange { font-size: 1rem; }
}
/* forms */
.narrow { max-width: 720px; margin-inline: auto; }
.form { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.form label { font-weight: 500; margin-block-start: 8px; }
.form input:not([type=checkbox]), .form select, .form textarea, .form-row input, .form-row select, .rename input {
  font: inherit; padding: 8px 10px; border: 1px solid #9a948a; border-radius: 6px; background: #fff; min-width: 0; }
.form button { align-self: flex-start; margin-block-start: 12px; }
.form .check-row { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 8px 16px; }
.item-row { border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.error { background: #fdecea; border: 1px solid #f1b0a8; border-radius: 6px; padding: 10px 14px; color: #8a1f12; }
.hint, .muted { color: var(--grey); font-size: .9rem; }
.crumbs { font-size: .9rem; color: var(--grey); }
.badge { display: inline-block; background: #fff3e8; color: var(--accent); border: 1px solid #f3c9a9; border-radius: 999px; padding: 0 8px; font-size: .78rem; }
.danger { color: #b3261e; }
.unit label { display: inline-flex; gap: 6px; align-items: baseline; cursor: pointer; }
.choose-part { font-size: .85rem; margin-inline-start: 8px; }
/* choosing parts */
.parts { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 20px; }
.part { padding: 6px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.part-taken { background: var(--taken); }
.pieces { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-block-start: 4px; font-size: .9rem; }
details.pieces { display: block; }
.piece { display: inline-flex; gap: 4px; align-items: center; }
.piece-taken { color: var(--grey); text-decoration: line-through; }
/* cart */
.cart-list { list-style: none; padding: 0; }
.cart-list li { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--line); }
.remove { color: var(--accent); }
.cart-total { font-weight: 600; }
/* your learning */
.learning-siyum { border-block-end: 1px solid var(--line); padding-block: 12px 18px; }
.dials { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dial-card { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.dial { flex: none; }
.dial-sub { color: var(--grey); font-size: .9rem; }
.dial-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .9rem; margin-block-start: 4px; }
.ticks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 16px; }
/* siyum page extras */
.siyum-stats { color: #444; }
.celebrate { font-size: 1.3rem; color: var(--done); font-weight: 600; }
.recent ul { list-style: none; padding: 0; margin: 0 0 16px; }
/* organizer */
.table-wrap { overflow-x: auto; }
table.claims { border-collapse: collapse; width: 100%; background: #fff; font-size: .92rem; }
.claims th, .claims td { border-block-end: 1px solid var(--line); padding: 6px 8px; text-align: start; vertical-align: top; }
.rename { display: flex; flex-wrap: wrap; gap: 4px; }
.rename input { padding: 4px 6px; width: 11em; }
.actions { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.actions .linklike, .rename .linklike { color: var(--accent); text-decoration: underline; }
@media (max-width: 380px) {
  /* narrow phones: keep the name and candle inside the 16px side gutters */
  .brand { column-gap: 10px; }
  .brand-he { font-size: 32px; }
  .brand-en { font-size: 25px; }
  .brand-candle img { height: 90px; }
}
/* sign in / register / commit: layout B1 (two panels; tabs on phones) */
.button-ghost { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.button-ghost:hover { background: #fbf1ea; color: var(--orange-dark); }
.button-gift { background: var(--burgundy); color: #fff; }
.button-gift:hover { background: #5f1a27; color: #fff; }
.b-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.card h3 { margin: 0 0 4px; font-weight: 500; font-size: 1.2rem; }
.card .sub { margin: 0 0 12px; color: #555; font-size: .9rem; }
.card.primary { border: 2px solid var(--accent); }
.card.one { max-width: 480px; }
.card.dup { border-color: var(--burgundy); background: #fff8f4; }
.field { display: grid; gap: 4px; margin-block-end: 12px; }
.field label { font-size: .88rem; color: #444; }
.field input { font: inherit; padding: 9px 11px; border: 1px solid #b9ab94; border-radius: 6px; background: #fff; width: 100%; min-width: 0; }
.code-field { max-width: 220px; }
.code-in { font-size: 1.4rem !important; letter-spacing: .4em; text-align: center; }
.name-field { max-width: 340px; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.forgot { color: var(--accent); text-decoration: underline; font-size: .9rem; }
.or { display: flex; align-items: center; gap: 10px; color: var(--grey); font-size: .82rem; margin-block: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.small { font-size: .82rem; color: #666; margin: 8px 0 0; }
.small .linklike { color: var(--accent); text-decoration: underline; }
.sel-sum { background: #fff; border: 1px dashed #c9b48f; border-radius: 10px; padding: 12px 16px; margin-block-end: 16px; font-size: .9rem; }
.sel-sum h4 { margin: 0 0 4px; font-weight: 500; font-size: .95rem; }
.sel-sum ul { margin: 0 0 4px; padding-inline-start: 18px; }
.sel-sum .remove { font-size: .8rem; margin-inline-start: 8px; }
.envelope { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fbe3cf; color: var(--accent); margin-block-end: 10px; }
.envelope svg { width: 28px; height: 28px; }
.envelope.ok { background: #e3f1e6; color: var(--done); }
.choice { border: 0; padding: 0; margin: 4px 0 14px; display: grid; gap: 8px; }
.choice legend { font-weight: 500; margin-block-end: 8px; padding: 0; }
.opt-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.opt-row:has(input:checked) { border-color: var(--accent); background: #fff5ee; }
.opt-row input { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; }
.opt-more { padding-inline-start: 30px; }
.signed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .9rem; color: #444; margin-block-end: 14px; }
.signed b { font-weight: 500; }
.signed .linklike { color: var(--accent); text-decoration: underline; }
.commit-list { list-style: none; margin: 0 0 6px; padding: 0; }
.commit-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-block-end: 1px solid #efe8da; }
.commit-actions { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px; align-items: start; margin-block-start: 8px; }
.commit-actions .button { padding: 12px 22px; }
.commit-actions .why { grid-column: 2; font-size: .8rem; color: #666; max-width: 34ch; margin: 0; }
/* tabs on phones, with no script: two radio buttons pick which card shows */
.tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.tabs { display: none; border: 1px solid var(--accent); border-radius: 8px; overflow: hidden; margin-block-end: 14px; }
.tabs label { flex: 1; text-align: center; padding: 9px; cursor: pointer; color: var(--accent); background: #fff; }
@media (max-width: 760px) {
  .b-grid { grid-template-columns: minmax(0, 1fr); }
  .tabs { display: flex; }
  #tab-in:checked ~ .tabs label[for=tab-in], #tab-reg:checked ~ .tabs label[for=tab-reg] { background: var(--accent); color: #fff; }
  #tab-in:checked ~ .b-grid .card-reg, #tab-reg:checked ~ .b-grid .card-in { display: none; }
  .tab-radio:focus-visible ~ .tabs { outline: 2px solid var(--accent); outline-offset: 2px; }
  .commit-actions { grid-template-columns: minmax(0, 1fr); }
  .commit-actions .button { width: 100%; white-space: normal; }
  .commit-actions .why { grid-column: 1; }
}
/* sign-up accordion and sliders: layout A3 (assets/signup.js) */
.signup-form { --sel: #fbe3cf; --sel-line: #c16535; --taken-ink: #8a8172; }
.acc { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-block-end: 12px; overflow: hidden; }
.acc .row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 12px; flex-wrap: wrap; }
.chev { width: 28px; height: 28px; flex: none; display: none; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 6px; color: #6b5a4a; padding: 0; }
.js .chev { display: inline-grid; }
.chev:hover { background: #f5ecdc; }
.chev svg { width: 14px; height: 14px; transition: transform .15s; }
[dir=rtl] .chev svg { transform: scaleX(-1); }
.chev[aria-expanded=true] svg, [dir=rtl] .chev[aria-expanded=true] svg { transform: rotate(90deg); }
.js .acc:not(.is-open) > .acc-body, .js .seder:not(.is-open) > .mas-list { display: none; }
.work-row { background: #f3e3c3; font-size: 1.15rem; font-weight: 500; color: var(--burgundy); }
.work-row .meta { font-size: .85rem; font-weight: 400; color: #7a6650; }
.seder-row { background: #fbf4e6; border-block-start: 1px solid var(--line); font-weight: 500; }
.seder-row .meta { font-size: .82rem; font-weight: 400; color: var(--grey); }
.acc .name { min-width: 0; }
.acc .grow { flex: 1; }
.acc input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); flex: none; cursor: pointer; }
.mas-list { list-style: none; margin: 0; padding: 0; }
.mas { border-block-start: 1px solid #efe8da; }
.mas > .row { padding-inline-start: 50px; }
.mas:has(.cb-row:checked) > .row, .mas:has(.cb-row:indeterminate) > .row { background: #fff4ea; }
.mas.taken > .row { background: #f8f5ef; }
.mas.taken .name, .mas.taken .size { color: var(--taken-ink); }
.mas .size { color: var(--grey); font-size: .9rem; }
.who { font-size: .82rem; color: var(--taken-ink); font-style: italic; }
.who b { font-style: normal; font-weight: 500; color: #6f6556; }
.done { color: var(--done); font-weight: 700; font-style: normal; }
.lock { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; color: #b3a892; }
.lock svg { width: 14px; height: 14px; }
.caret { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px 3px 8px; font-size: .8rem; color: #6b5a4a; cursor: pointer; white-space: nowrap; text-decoration: none; }
.caret:hover { border-color: var(--accent); color: var(--accent); }
.caret svg { width: 11px; height: 11px; transition: transform .15s; }
.caret[aria-expanded=true] svg { transform: rotate(180deg); }
.bar-size { display: block; height: 4px; border-radius: 2px; background: #e9dcc3; margin-block-start: 3px; }
.picker { padding: 4px 16px 14px 50px; }
.picker-alt { font-size: .8rem; margin: 6px 0 0; }
.hint-line { font-size: .8rem; color: var(--grey); margin: 0 0 8px; }
.track-wrap { display: grid; gap: 6px; position: relative; }
.bubble { position: absolute; transform: translate(-50%, -100%); background: #3a291e; color: #fff; font-size: .9rem; font-weight: 500; padding: 4px 11px; border-radius: 7px; white-space: nowrap; pointer-events: none; z-index: 4; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #3a291e; }
.track { display: flex; height: 38px; border: 1px solid #b9ab94; border-radius: 8px; overflow: hidden; background: #fff; touch-action: none; user-select: none; cursor: ew-resize; }
.seg { flex-basis: 0; display: grid; place-items: center; font-size: .72rem; color: #6b5a4a; border-inline-start: 1px solid #efe8da; min-width: 0; overflow: hidden; }
.seg:first-child { border-inline-start: 0; }
.seg.sel { background: var(--orange); color: #fff; border-color: rgba(255,255,255,.35); }
.seg.taken { background: repeating-linear-gradient(135deg, #efe6d2 0 6px, #e4d8bf 6px 9px); color: #a59a84; cursor: not-allowed; }
.track.fine .seg { border-inline-start-color: #f4eee3; font-size: 0; }
.track.fine .seg.tick5 { border-inline-start-color: #dfd3bc; }
.track.fine .seg.tick { border-inline-start-color: #c9bca4; }
.ticks { display: flex; font-size: .68rem; color: var(--grey); }
.ticks span { flex-basis: 0; text-align: start; white-space: nowrap; overflow: visible; }
.readout { font-size: .88rem; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.ends { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ends .lbl { color: #555; font-size: .85rem; }
.end { display: inline-flex; align-items: center; border: 1px solid #b9ab94; border-radius: 999px; background: #fff; }
.end b { padding-inline: 6px; min-width: 3em; text-align: center; font-weight: 500; color: #7a3a14; }
.nud { border: 0; background: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--accent); display: grid; place-items: center; padding: 0; }
.nud:hover:not(:disabled) { background: #fbe3cf; }
.nud:disabled { color: #d3c8b6; cursor: default; }
.nud svg { width: 12px; height: 12px; }
.nud.prev svg, [dir=rtl] .nud.next svg { transform: scaleX(-1); }
[dir=rtl] .nud.prev svg { transform: none; }
.fab { position: sticky; bottom: 14px; display: flex; justify-content: flex-end; pointer-events: none; margin-block: 8px 4px; z-index: 3; }
.fab .button { pointer-events: auto; border-radius: 999px; padding: 12px 22px; box-shadow: 0 6px 18px rgba(80,30,10,.35); }
.fab-count { background: #fff; color: var(--orange); border-radius: 999px; font-weight: 700; padding: 0 8px; font-size: .85rem; margin-inline-start: 6px; }
@media (max-width: 760px) {
  .mas > .row { padding-inline-start: 14px; row-gap: 0; padding-block: 6px; }
  .mas .who { flex-basis: 100%; padding-inline-start: 28px; }
  .picker { padding: 4px 10px 12px 14px; }
  .work-row .meta, .seder-row .meta { display: none; }
}
/* Your account: each block (name, password) is its own section, its SAVE button with it */
.account-email { margin-block-end: 20px; }
.account-section { padding-block: 18px 24px; border-block-start: 1px solid var(--line); }
.account-section:last-child { padding-block-end: 4px; }
.account-section h2 { margin-block: 0 4px; }
.account-section .form .hint { margin: 0; }
.account-section .form button { margin-block-start: 10px; }
/* create a siyum: the text tree (assets/create.js) */
.narrow-wide { max-width: 860px; margin-inline: auto; }
.create-form .form { margin-block-end: 18px; }
.tree, .tchildren { list-style: none; margin: 0; padding: 0; }
.tree { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-block-end: 18px; }
.tree > .tnode + .tnode { border-block-start: 1px solid var(--line); }
.tchildren { padding-inline-start: 26px; }
.js .tnode:not(.open) > .tchildren { display: none; }
.trow { display: flex; align-items: center; gap: 8px; min-height: 40px; padding-inline: 10px; }
.tree > .tnode > .trow { background: #f3e3c3; font-weight: 500; color: var(--burgundy); font-size: 1.08rem; }
.tree > .tnode > .tchildren > .tnode > .trow { background: #fbf4e6; font-weight: 500; }
.tchildren .tnode { border-block-start: 1px solid #efe8da; }
.trow input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); flex: none; cursor: pointer; }
.trow label { cursor: pointer; min-width: 0; }
.tsize { color: var(--grey); font-size: .8rem; font-weight: 400; margin-inline-start: auto; padding-inline-start: 8px; white-space: nowrap; }
.tchildren.tleafs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); border-block-start: 1px solid #efe8da; }
.js .tnode:not(.open) > .tchildren.tleafs { display: none; }
.tleafs > .tnode { border-block-start: 0; }
.tleafs .trow { min-height: 34px; font-size: .93rem; white-space: nowrap; }
.tleafs .tcaret-space { width: 4px; }
.trow:hover { background: #fffaf2; }
.tcaret, .tcaret-space { width: 28px; height: 28px; flex: none; }
.tcaret { display: none; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 6px; color: #6b5a4a; padding: 0; }
.js .tcaret { display: inline-grid; }
.tcaret:hover { background: #f5ecdc; }
.tcaret svg { width: 14px; height: 14px; transition: transform .15s; }
[dir=rtl] .tcaret svg { transform: scaleX(-1); }
.tcaret[aria-expanded=true] svg, [dir=rtl] .tcaret[aria-expanded=true] svg { transform: rotate(90deg); }
.step-label { margin: 0; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.create-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-start: 16px; }
.create-actions .sumline { font-size: .9rem; color: #555; }
.create-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.button[disabled] { background: #cdbfb3; box-shadow: none; cursor: default; }
.work-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-block-end: 14px; }
.work-card h2 { margin: 0; font-weight: 500; font-size: 1.15rem; color: var(--burgundy); }
.work-card .what { margin: 2px 0 10px; color: #555; font-size: .88rem; }
.work-card fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.work-card legend { font-weight: 500; margin-block-end: 6px; padding: 0; }
.finest-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.finest-opt:has(input:checked) { border-color: var(--accent); background: #fff5ee; }
.finest-opt input { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; }
.finest-opt .n { margin-inline-start: auto; font-size: .82rem; color: var(--grey); }
@media (max-width: 760px) {
  .tchildren { padding-inline-start: 14px; }
  .trow { padding-inline: 6px; gap: 6px; }
  .tchildren.tleafs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsize { font-size: .75rem; }
  .create-actions .button, .create-buttons { width: 100%; justify-content: center; }
}
/* progress widths as classes (the CSP allows no inline styles) */
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}
/* the dedication on the create and edit forms (templates/_dedication_fields.php): only the fields that fit */
.ded-types { border: 0; padding: 0; margin: 0 0 6px; display: grid; gap: 4px; }
.ded-types legend { font-weight: 500; margin-block-end: 4px; padding: 0; }
.ded-names, .ded-text { display: contents; }
form:has(.ded-types input[value=occasion]:checked) .ded-names,
form:has(.ded-types input[value=custom]:checked) .ded-names,
form:has(.ded-types input[value=memory]:checked) .ded-text,
form:has(.ded-types input[value=honor]:checked) .ded-text { display: none; }
.ded-text .for-custom, form:has(.ded-types input[value=custom]:checked) .ded-text .for-occasion { display: none; }
form:has(.ded-types input[value=custom]:checked) .ded-text .for-custom { display: inline; }
/* Your learning, Your siyumim: the ruled divider before siyumim whose date has passed */
.archive-heading { display: flex; align-items: center; gap: 14px; margin: 32px 0 6px; color: var(--burgundy); font-size: 1.05rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.archive-heading::before, .archive-heading::after { content: ""; flex: 1; border-block-start: 3px double currentColor; opacity: .45; }
:lang(he) .archive-heading { text-transform: none; letter-spacing: 0; font-size: 1.1rem; }