/* ==========================================================================
   The portion card — this week's portion, and the Continue card that wears
   the same card. Painted by js/portion-card.js and js/continue-card.js into
   their mounts; shared by the scripture library (/scriptures) and the home
   page's Today band (/), which mount the same sealed card
   (KodeshWaySpecs/scripture/WEEKLY_PORTION.md). Moved out of
   css/scriptures.css unchanged on 2026-10-01 so the home page need not load
   the reader's stylesheet; the library loads it straight after that sheet,
   where these rules stood, so the cascade is the one it was. After editing,
   re-run build/render_scriptures.mjs and build/stamp_assets.py.
   ========================================================================== */
/* ── This week's portion ─────────────────────────────────────────────
   Painted by js/portion-card.js on the library page. The mount is empty
   in the pre-rendered HTML, so the rules below must not draw anything on
   the mount itself — only on the card the script appends.
   The mount holds the card's room: it arrives after a fetch, and the shelf
   below jumped by a card every visit. flow-root keeps the card's margins
   inside that room (they collapsed through it, so the shelf still moved
   26px). Measured over all 54 portions (2026-09-30), the card with its
   margins is 192-264px tall above 520px, so the room is the tallest; on
   phones it is 259-504px, and the room covers four weeks in five at 390px. When
   the walk rests on a feast Shabbat, or the list cannot be read, the
   script hides the mount and the room is given back. The continue-card
   mount is not reserved — it paints synchronously from localStorage and is
   absent for a first visit. */
#portion-card { display: flow-root; min-height: 264px; }
#portion-card[hidden] { display: none; }
@media (max-width: 520px) { #portion-card { min-height: 350px; } }
.portion-card {
  display: block;
  margin: 26px 0 4px;
  padding: 18px 20px;
  border: 1px solid rgba(168, 116, 42, 0.28);
  border-left: 3px solid var(--kw-accent, #A8742A);
  border-radius: 10px;
  background: rgba(168, 116, 42, 0.06);
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease, border-color 160ms ease;
}
.portion-card:hover,
.portion-card:focus-visible {
  background: rgba(168, 116, 42, 0.11);
  border-color: rgba(168, 116, 42, 0.45);
}
.portion-card__eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--kw-accent, #A8742A);
  font-weight: 600;
}
.portion-card__reading {
  display: block;
  margin-top: 6px;
  font-family: var(--kw-font-serif, Georgia, serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--kw-label, #1A1A26);
}
.portion-card__meta {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  opacity: 0.72;
}
.portion-card__thread {
  display: block;
  margin-top: 11px;
  font-family: var(--kw-font-serif, Georgia, serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
}
/* Continue reading — painted by js/continue-card.js from the chapter page's
   kodesh-last-read record, in the same card as the portion so the two read
   as one shelf. Absent when nothing has been read yet. */
.portion-card__cta {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kw-accent, #A8742A);
}
.portion-card--continue { margin-bottom: 0; }
#continue-card:not(:empty) + #portion-card .portion-card { margin-top: 12px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portion-card {
    border-color: rgba(196, 144, 64, 0.30);
    border-left-color: #C49040;
    background: rgba(196, 144, 64, 0.07);
  }
  :root:not([data-theme="light"]) .portion-card__eyebrow,
  :root:not([data-theme="light"]) .portion-card__cta { color: #C49040; }
  :root:not([data-theme="light"]) .portion-card__reading { color: #F2F2F2; }
}
:root[data-theme="dark"] .portion-card {
  border-color: rgba(196, 144, 64, 0.30);
  border-left-color: #C49040;
  background: rgba(196, 144, 64, 0.07);
}
:root[data-theme="dark"] .portion-card__eyebrow,
:root[data-theme="dark"] .portion-card__cta { color: #C49040; }
:root[data-theme="dark"] .portion-card__reading { color: #F2F2F2; }