.jewish-calendar { margin: 0 auto; padding: 16px clamp(16px, 4vw, 64px); background: #edf2f8; border-bottom: 1px solid #d9e2ee; color: #173654; }
.calendar-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1392px; margin: auto; }
.calendar-today { display: grid; gap: 4px; }
.calendar-today .hebrew-date { display: block; color: #173654; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; white-space: normal; }
.calendar-today small { color: #52677f; font-size: 11px; }
.calendar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.calendar-actions a { display:inline-flex; align-items:center; min-height:42px; border:1px solid #c5d3e3; border-radius:9px; padding:10px 14px; background:#fff; color:#234e7d; font-size:13px; font-weight:600; text-underline-offset:3px; }
.calendar-actions button { min-height: 42px; border: 1px solid #c5d3e3; border-radius: 9px; padding: 10px 14px; background: #fff; color: #234e7d; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.calendar-actions button[aria-expanded=true] { background: #1b416b; color: #fff; border-color: #1b416b; }
.calendar-panel { max-width: 1392px; margin: 18px auto 0; padding: 24px; border: 1px solid #d9e2ee; border-radius: 14px; background: #fff; }
.calendar-panel[hidden], .converter-fields[hidden] { display: none; }
.calendar-panel h2 { margin: 0 0 8px; color: #173654; font: 400 27px/1.2 Georgia, serif; }
.calendar-panel p { color: #52677f; line-height: 1.6; font-size: 14px; }
.converter-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
#date-converter-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
#date-converter-form input, #date-converter-form select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #bbcbdc; border-radius: 8px; padding: 10px 12px; font: inherit; color: #173654; background: #fff; }
.converter-fields { margin: 14px 0; }
#hebrew-fields { display: grid; grid-template-columns: 70px minmax(0, 1fr) 100px; gap: 10px; }
#date-converter-form .sunset-option { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-weight: 400; }
#date-converter-form .sunset-option input { width: 18px; height: 18px; min-height: 18px; accent-color: #245b98; }
#converter-output { display: grid; align-content: center; gap: 12px; min-height: 164px; background: #f2f5fa; border-radius: 12px; padding: 24px; color: #173654; line-height: 1.6; }
#converter-output:empty::before { content: 'Choose a date to see its Hebrew or Gregorian equivalent.'; color: #52677f; font-size: 14px; }
#converter-output strong { font-size: 22px; line-height: 1.4; }
#converter-output span[lang=he] { text-align: left; font-size: 24px; }
#converter-output small { color: #52677f; }
.calendar-credit { font-size: 12px !important; margin: 16px 0 0; }
.calendar-credit a, .hillulot-links a { color: #245b98; text-underline-offset: 3px; }
.hillulot-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 14px 0; font-size: 14px; }
#hillulot-frame { width: 100%; height: min(640px, 75vh); min-height: 360px; display: block; border: 1px solid #dce5ef; border-radius: 10px; background: #fafbfc; }
.radio-home #hillulot-panel { scroll-margin-top:175px; }
.yahrzeit-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.yahrzeit-heading a { color:#245b98; font-size:14px; white-space:nowrap; text-underline-offset:3px; }
.yahrzeit-heading p { margin:6px 0 0; }
.yahrzeit-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.yahrzeit-card { padding:16px; border:1px solid #cedcea; border-radius:12px; background:#f5f8fc; min-width:0; }
.yahrzeit-card .yahrzeit-day { color:#245b78; font-size:12px; font-weight:700; margin:0 0 8px; }
.yahrzeit-card h3 { font-family:inherit;font-size:17px;font-weight:600;line-height:1.4; margin:0 0 8px; }
.yahrzeit-card h3 a { color:#123d69; text-underline-offset:3px; }
.yahrzeit-card small { color:#52677f; font-size:12px; }
.yahrzeit-card .yahrzeit-civil { margin:0 0 6px; font-size:13px; }
.yahrzeit-card .yahrzeit-summary { margin:0 0 12px; color:#2d465b; font-size:15px; line-height:1.6; }
.yahrzeit-card .yahrzeit-date-note { margin:0 0 10px; color:#52677f; font-size:12px; line-height:1.55; }
.yahrzeit-source-links { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:13px; }
.yahrzeit-browse { margin-top:18px; }
.yahrzeit-browse summary { cursor:pointer; color:#173654; font-weight:600; min-height:44px; padding:10px 0; }
.yahrzeit-browse label { display:block; margin:12px 0 7px; font-size:14px; }
.yahrzeit-browse input { width:100%; min-height:44px; padding:10px 12px; border:1px solid #bbcbdc; border-radius:8px; color:#173654; background:#fff; font:inherit; }
.yahrzeit-empty { grid-column:1/-1; margin:0; }
@media(max-width:600px) { .yahrzeit-list { grid-template-columns:1fr; } .yahrzeit-heading { flex-direction:column; } }
@media(max-width:740px) { .radio-home #hillulot-panel { scroll-margin-top:20px; } }
.watch-heading { gap: 14px; flex-wrap: wrap; }
.watch-heading .moon-phase { padding: 8px 12px 8px 8px; gap: 10px; border: 1px solid #2c5175; border-radius: 14px; background: #102c49; color: #fff; white-space: normal; }
.watch-heading .moon-phase svg { width: 48px; height: 48px; filter: drop-shadow(0 0 3px #8eb8ee40); }
.watch-heading .moon-phase .moon-label { display: grid; gap: 4px; max-width: 130px; }
.moon-label strong { color: #f1f6ff; font-size: 11px; font-weight: 600; }
.moon-label small { color: #bdd4ef; font-size: 10px; }
@media (max-width: 600px) {
  .calendar-bar { align-items: stretch; flex-direction: column; gap: 12px; }
  .calendar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .calendar-actions button { padding: 10px 8px; font-size: 12px; }
  .calendar-panel { padding: 18px 14px; }
  .converter-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #converter-output { min-height: 110px; padding: 18px; }
  #hebrew-fields { grid-template-columns: 64px minmax(0, 1fr) 82px; gap: 7px; }
  .watch-heading .moon-phase { gap: 6px; padding: 5px 8px 5px 5px; }
  .watch-heading .moon-phase svg { width: 40px; height: 40px; }
  .watch-heading .moon-phase .moon-label { max-width: 95px; }
}

@media (max-width: 380px) {
  .radio-home .header-zmanim { width: 118px; }
  .radio-home .site-header { gap: 10px 8px; }
  .radio-home .brand strong { font-size: 15px; }
  .radio-home .brand-mark { width: 34px; height: 34px; }
  .radio-home .brand { gap: 7px; }
}