/* The tent through the week and the year: the holiday dressings on the home's tent, the calm Shabbat screen, and the
   "סיכום היום" card at the top of the home. The contract is docs/design/seasons.md; the dressings are
   /assets/holidays/<id>.svg, drawn in the tent picture's own coordinates (1400 × 794). Load after base.css (and care.css,
   for the emergency button on the Shabbat screen). */

:root {
  --shb-bg: #f3ecdf;  --shb-ink: #33261a;  --shb-muted: #66553f;  --shb-gold: #82571a;  --shb-line: #dccdb2;
  --shb-glow: rgb(255 196 92 / .38);
  --dsum-quiet: color-mix(in srgb, var(--olive) 14%, var(--card));
}
:root[data-theme="dark"] {
  --shb-bg: #0b1020;  --shb-ink: #efe6d2;  --shb-muted: #b9b1a1;  --shb-gold: #e8c27a;  --shb-line: #283049;
  --shb-glow: rgb(255 186 80 / .22);
  --dsum-quiet: color-mix(in srgb, var(--olive) 12%, var(--card));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shb-bg: #0b1020;  --shb-ink: #efe6d2;  --shb-muted: #b9b1a1;  --shb-gold: #e8c27a;  --shb-line: #283049;
    --shb-glow: rgb(255 186 80 / .22);
    --dsum-quiet: color-mix(in srgb, var(--olive) 12%, var(--card));
  }
}

/* ───────────── The holiday dressing: one picture over the tent, the same size as the tent ───────────── */
.camp > .holiday, .shb-tent > .holiday { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none;
  animation: holiday-in 1.1s var(--ease-river) .35s both; }
@keyframes holiday-in { from { opacity: 0; transform: translateY(-6px); } }
:root[data-motion="reduce"] .holiday { animation: none; }
@media (prefers-reduced-motion: reduce) { .holiday { animation: none; } }

/* The holiday's line under the tent: its name, the night, and "נתכנס לחג" (opens a family gathering) */
.hol-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-block-start: 10px;
  padding-block: 8px; padding-inline: 16px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); max-inline-size: 100%; }
.hol-band > b { font-size: 1.05rem; font-weight: 600; }
.hol-band > small { color: var(--muted); font-size: .92rem; }
.hol-gather { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding-inline: 16px; border-radius: 999px; border: 0;
  background: var(--primary); color: var(--primary-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.hol-gather .icon { inline-size: 19px; block-size: 19px; }
.hol-gather:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (max-width: 420px) { .hol-band { border-radius: var(--radius-lg); padding: 10px 14px; } }

/* ───────────── The calm Shabbat screen ───────────── */
/* While it is up (html[data-shabbat], .shb a direct child of body): the page behind neither scrolls nor shows,
   and toasts and messages stay hidden. Only the emergency sent screen (.sos-screen) may come over it. */
html[data-shabbat] { overflow: hidden; }
html[data-shabbat] body > :not(.shb, .sos-screen, script) { visibility: hidden; }
.shb { --bg: var(--shb-bg); --card: var(--shb-bg); --text: var(--shb-ink); --muted: var(--shb-muted); --line: var(--shb-line);
  position: fixed; inset: 0; z-index: calc(var(--z-sheet, 60) + 2); overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(60% 45% at 50% 22%, var(--shb-glow), transparent 70%), var(--shb-bg); color: var(--shb-ink);
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  animation: shb-in 1.2s ease both; }
@keyframes shb-in { from { opacity: 0; } }
.shb-in { display: grid; justify-items: center; gap: 6px; inline-size: 100%; max-inline-size: 560px; margin-inline: auto; text-align: center; }
.shb-tent { position: relative; margin: 0 0 4px; inline-size: min(100%, 440px); aspect-ratio: 1400 / 794; }
.shb-tent > img:first-child { display: block; inline-size: 100%; block-size: auto; filter: drop-shadow(0 12px 16px rgb(40 26 10 / .16)); }
:root[data-theme="dark"] .shb-tent > img:first-child { filter: brightness(.82) drop-shadow(0 12px 16px rgb(0 0 0 / .4)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shb-tent > img:first-child { filter: brightness(.82) drop-shadow(0 12px 16px rgb(0 0 0 / .4)); } }
/* the candles' light breathes slowly on the mat (the candles stand at about 25% across, 72% down the picture) */
.shb-tent::after { content: ''; position: absolute; left: 13%;   /* physical on purpose: the picture is not mirrored in RTL */
  inset-block-start: 52%; inline-size: 22%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(255 205 110 / .55), transparent); pointer-events: none;
  animation: shb-breathe 3.6s ease-in-out infinite alternate; }
@keyframes shb-breathe { from { opacity: .45; transform: scale(.94); } to { opacity: .85; transform: scale(1.04); } }
.shb-h { margin: 0; font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.2rem); font-weight: 500; line-height: 1.1; letter-spacing: .01em; color: var(--shb-ink); text-wrap: balance; }
.shb-par { margin: 0; font-size: 1.15rem; color: var(--shb-gold); font-weight: 500; }
.shb-times { display: flex; justify-content: center; gap: 10px; margin: 12px 0 4px; padding: 0; inline-size: 100%; }
.shb-times > div { flex: 1; max-inline-size: 190px; display: grid; gap: 2px; padding: 10px 8px; border-radius: var(--radius);
  border: 1px solid var(--shb-line); background: color-mix(in srgb, var(--shb-bg) 95%, var(--shb-ink)); }
.shb-times dt { font-size: .92rem; color: var(--shb-muted); }
.shb-times dd { margin: 0; font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.shb-city { margin: 0; font-size: .92rem; color: var(--shb-muted); }
.shb-note { margin: 10px 0 6px; max-inline-size: 34ch; font-size: 1.02rem; line-height: 1.55; color: var(--shb-ink); text-wrap: balance; }
/* the emergency button (care.css) stays, quieter around it: no red field, a smaller ring, the red button itself unchanged */
.shb .sos { inline-size: 100%; max-inline-size: 440px; margin-block-start: 6px; padding: 12px 14px; gap: 14px; text-align: start;
  background: transparent; border: 1px solid var(--shb-line); }
.shb .sos-btn { inline-size: 92px; block-size: 92px; padding: 7px; }
.shb .sos-core .icon { inline-size: 26px; block-size: 26px; }
.shb .sos-core b { font-size: 1.15rem; }
.shb .sos-how b { font-size: 1.08rem; }
.shb .sos-how span { font-size: .95rem; }
@media (max-width: 340px) { .shb .sos { text-align: center; } }
.shb-anyway { margin-block-start: 14px; padding: 10px 14px; font-size: .92rem; color: var(--shb-muted); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--shb-muted) 50%, transparent); }
.shb-anyway:focus-visible { outline: 2px solid var(--shb-gold); outline-offset: 2px; border-radius: 6px; }
:root[data-motion="reduce"] .shb { animation: none; }
:root[data-motion="reduce"] .shb-tent::after { animation: none; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .shb { animation: none; } .shb-tent::after { animation: none; opacity: .7; } }

/* ───────────── "סיכום היום": at the top of the home, on the first open of the day ───────────── */
.dsum { position: relative; z-index: 2; isolation: isolate; inline-size: min(100%, 640px); min-inline-size: 0; justify-self: center; margin-block: 6px 10px; padding: 14px 16px 12px; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 18px rgb(46 42 30 / .07); text-align: start;
  animation: dsum-in .6s var(--ease-river) both; }
@keyframes dsum-in { from { opacity: 0; transform: translateY(-8px); } }
.dsum.leaving { animation: dsum-out .32s var(--ease-leave, ease-in) both; }
@keyframes dsum-out { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
.dsum-head { display: flex; align-items: flex-start; gap: 10px; }
.dsum-head > div { flex: 1; min-inline-size: 0; }
.dsum-head h2 { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.dsum-head p { margin: 0; font-size: .9rem; color: var(--muted); }
.dsum-close { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin-block-start: -6px; margin-inline-end: -6px;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.dsum-close:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.dsum-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dsum-close svg { inline-size: 20px; block-size: 20px; }
.dsum-body { display: grid; gap: 10px; margin-block-start: 10px; }
.dsum-body > section { min-inline-size: 0; }
.dsum-sub { margin: 0 0 4px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.dsum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dsum-list > li > * { display: flex; align-items: center; gap: 12px; min-block-size: 48px; padding: 6px 8px; margin-inline: -8px;
  border-radius: var(--radius); color: inherit; text-decoration: none; }
.dsum-list a:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.dsum-list a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dsum-ic { --c: var(--primary); flex: none; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 15%, var(--card)); color: color-mix(in srgb, var(--c) 72%, var(--text)); }
.dsum-ic svg { inline-size: 20px; block-size: 20px; stroke-width: 1.7; }   /* any svg: index.html builds them without .icon */
.dsum-txt { flex: 1; min-inline-size: 0; display: grid; }
.dsum-txt b { font-weight: 500; line-height: 1.35; }
/* a long title or line keeps to two lines, so the time stays beside it and the card stays short */
.dsum-txt :is(b, small) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.dsum-txt small { font-size: .88rem; color: var(--muted); line-height: 1.35; }
.dsum-when { flex: none; white-space: nowrap; font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
/* the quiet part, what is not urgent since the last summary: small chips */
.dsum-quiet { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.dsum-quiet a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding: 4px 12px 4px 10px; border-radius: 999px;
  background: var(--dsum-quiet); color: var(--text); text-decoration: none; font-size: .92rem; }
.dsum-quiet a:hover { background: color-mix(in srgb, var(--olive) 24%, var(--card)); }
.dsum-quiet a:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dsum-quiet .icon { inline-size: 16px; block-size: 16px; color: var(--muted); }
.dsum-quiet b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dsum-calm { margin: 0; font-size: .95rem; color: var(--muted); }
/* more than three things today: the rest behind one quiet line */
.dsum-more { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 2px; font-size: .92rem; font-weight: 500;
  color: var(--primary); text-decoration: none;
  /* a link or a button (index.html builds a button): no native button face */
  background: none; border: 0; font-family: inherit; cursor: pointer; justify-self: start; }
.dsum-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.dsum-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
/* the day itself (vision batch 16): every day, with or without messages. A small calendar leaf beside the title (the Hebrew
   day in letters, the month under it), then one row of facts: the weather, the sunset (on a Friday the candles). */
.dsum-leaf { flex: none; display: grid; place-content: center; justify-items: center; inline-size: 50px; block-size: 54px; margin-block-start: -2px;
  border-radius: 10px; background: var(--card); border: 1px solid var(--line); border-block-start: 5px solid var(--primary);
  line-height: 1.1; box-shadow: 0 2px 6px rgb(46 42 30 / .06); }
.dsum-leaf b { font-size: 1.3rem; font-weight: 600; color: var(--text); }
.dsum-leaf small { font-size: .72rem; font-weight: 500; color: var(--muted); }
.dsum-facts { --c: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.dsum-facts > li { flex: 1 1 0; min-inline-size: 0; display: flex; align-items: center; gap: 10px; min-block-size: 52px;
  padding: 6px 12px 6px 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--c) 9%, var(--card)); }
.dsum-facts .icon { flex: none; inline-size: 28px; block-size: 28px; stroke-width: 1.6; color: color-mix(in srgb, var(--c) 78%, var(--text)); }
.dsum-facts span { min-inline-size: 0; display: grid; }
.dsum-facts b { font-size: 1.05rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsum-facts small { font-size: .84rem; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsum-facts a { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: inherit; align-self: stretch; color: inherit; text-decoration: none; }
.dsum-facts a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.dsum-fact-wx { --c: #b07a1e; }
/* the weather has the longest line and takes the room; a time keeps to its own size */
.dsum-facts > li:not(.dsum-fact-wx) { flex: 0 1 auto; }
.dsum-fact-wx[data-sky="cloud"], .dsum-fact-wx[data-sky="fog"] { --c: #6b6a75; }
.dsum-fact-wx[data-sky="rain"], .dsum-fact-wx[data-sky="storm"], .dsum-fact-wx[data-sky="snow"] { --c: #2a7fa8; }
.dsum-fact-wx[data-sky="moon"] { --c: #5a5f9a; }
.dsum-fact-sun { --c: #b8572e; }
.dsum-fact-candles { --c: #b07a1e; }
/* the facts span the whole card, above "היום" and "מאז" */
.dsum-body > .dsum-facts, .dsum-body > .dsum-calm { grid-column: 1 / -1; }
.dsum-calm .icon { inline-size: 18px; block-size: 18px; vertical-align: -4px; margin-inline-end: 6px; color: var(--primary); }
/* on a phone the card stays short, so the tent still shows: the chips run in one row that scrolls sideways */
@media (max-width: 759px) {
  .dsum-leaf { inline-size: 46px; block-size: 50px; }
  .dsum-facts { gap: 6px; }
  .dsum-facts > li { gap: 8px; padding-inline: 8px 10px; min-block-size: 48px; }
  .dsum-facts .icon { inline-size: 24px; block-size: 24px; }
  .dsum-list > li > * { min-block-size: 44px; padding-block: 4px; }
  .dsum-quiet { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; padding-block: 2px;
    -webkit-mask: linear-gradient(to left, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask: linear-gradient(to left, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .dsum-quiet::-webkit-scrollbar { display: none; }
  .dsum-quiet a { flex: none; white-space: nowrap; }
}
@media (min-width: 760px) {
  .dsum { padding: 16px 20px 14px; }
  .dsum-body { grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
  .dsum-body > section + section { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
  /* one section alone (a quiet day: only "היום") takes the whole width */
  .dsum-body > section:only-of-type { grid-column: 1 / -1; }
}
:root[data-motion="reduce"] .dsum, :root[data-motion="reduce"] .dsum.leaving { animation: none; }
@media (prefers-reduced-motion: reduce) { .dsum, .dsum.leaving { animation: none; } }