/* 2.50.0: the synagogue information line (public/synagogue.js) and Jewish calendar routing (public/jroute.js).
   Modern Calm: white cards with soft corners and a soft shadow on the page's grey, one accent, pills for state,
   the preview and the next changes in a sticky column beside the editor (stacked on a phone). */
.syn { --syn-r: 16px; --syn-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .045); --syn-gold: #B7791F; max-width: 1240px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .syn { --syn-shadow: 0 1px 2px rgba(0, 0, 0, .35); --syn-gold: #F6C453; } }
:root[data-theme="dark"] .syn { --syn-shadow: 0 1px 2px rgba(0, 0, 0, .35); --syn-gold: #F6C453; }

/* the list of lines / profiles */
.syn-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 14px; }
.syn-listhead h2 { margin: 0; font-size: 17px; }
.syn-lines { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.syn-linecard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .045); color: var(--ink); text-decoration: none; min-width: 0; }
.syn-linecard:hover, .syn-linecard:focus-visible { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.syn-linecard > .ico:last-child { color: var(--muted); flex: none; }
.syn-linecard-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #4F46E5; background: color-mix(in srgb, #4F46E5 12%, var(--panel)); }
.syn-linecard-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.syn-linecard-text b { overflow-wrap: anywhere; }
.syn-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 40px 20px; border-radius: 16px; background: var(--panel); border: 1px dashed var(--line); color: var(--muted); }
.syn-empty h2 { margin: 4px 0 0; color: var(--ink); font-size: 17px; }
.syn-empty p { margin: 0 0 6px; max-width: 460px; line-height: 1.55; }

/* pills */
.syn-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.syn-pill.ok { background: color-mix(in srgb, var(--ok) 13%, var(--panel)); color: color-mix(in srgb, var(--ok) 80%, var(--ink)); }
.syn-pill.wait { background: color-mix(in srgb, var(--wait) 15%, var(--panel)); color: color-mix(in srgb, var(--wait) 75%, var(--ink)); }
.syn-pill.info { background: var(--accent-soft); color: var(--accent); }
.syn-pill.bad { background: var(--fault-soft); color: var(--fault); }

/* the editor's top bar */
.syn-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: var(--syn-r); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--syn-shadow); }
.syn-back { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--muted); flex: none; }
.syn-back:hover { background: var(--sunk); color: var(--ink); }
[dir="rtl"] .syn-back .ico { transform: scaleX(-1); }
.syn-top-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.syn-title { font-size: 19px; font-weight: 650; border: 1px solid transparent; background: transparent; padding: 2px 6px; margin-inline-start: -6px; border-radius: 8px; width: 100%; max-width: 520px; color: var(--ink); box-shadow: none; }
.syn-title:hover { border-color: var(--line); }
.syn-title:focus { border-color: var(--accent-bright); background: var(--panel); }
.syn-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.syn-code { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; }
.syn-save { font-size: 12px; color: var(--muted); }
.syn-problems ul { list-style: none; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--fault-soft); display: grid; gap: 4px; }
.syn-problems li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fault); }
.syn-problems li.warning { color: color-mix(in srgb, var(--wait) 80%, var(--ink)); }
.syn-problems.inline { list-style: none; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--fault-soft); display: grid; gap: 4px; }

/* two columns: the editor, and the preview beside it */
.syn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.syn-aside { position: sticky; top: 12px; display: grid; gap: 12px; max-height: calc(100vh - 24px); overflow: auto; padding-bottom: 2px; }
.syn-col { display: grid; gap: 12px; min-width: 0; }
.syn-card { padding: 16px 18px; border-radius: var(--syn-r); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--syn-shadow); min-width: 0; }
.syn-card-head { margin-bottom: 12px; }
.syn-card-head.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.syn-card-head h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.syn-card-head p { margin: 4px 0 0; line-height: 1.5; }

/* tabs */
.syn-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sunk); overflow-x: auto; scrollbar-width: none; }
.syn-tab { flex: none; height: 34px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); font-weight: 500; cursor: pointer; white-space: nowrap; }
.syn-tab:hover { color: var(--ink); }
.syn-tab[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }

/* rows of the schedule */
.syn-row { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--sunk) 45%, var(--panel)); margin-bottom: 10px; }
.syn-row.urgent { border-color: color-mix(in srgb, var(--fault) 45%, var(--line)); background: color-mix(in srgb, var(--fault) 5%, var(--panel)); }
.syn-row-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: start; }
.syn-row-top > :nth-child(2):not(button) { min-width: 0; }
.syn-row-top:has(> :nth-child(3):not(button)) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; }
.syn-row-mid, .syn-row-bottom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.syn-row-bottom > input { flex: 1; min-width: 140px; }
.syn-row-inline { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; }
.syn-time { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.syn-time select, .syn-time input { width: auto; }
.syn-offset { width: 72px !important; }
.syn-days { display: flex; gap: 4px; flex-wrap: wrap; }
.syn-day { min-width: 38px; height: 32px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; font-weight: 500; }
.syn-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.syn-hdate { display: inline-flex; gap: 6px; align-items: center; }
.syn-hdate input { width: 70px; }
.syn-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.syn-inline input { width: auto; }
.syn-alt summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.syn-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.syn-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.syn-checks { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 8px; }
.syn-pinrow { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.syn-pinrow .field { margin-bottom: 0; }
.syn-pubrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.syn-pubrow input[type="text"] { flex: 1; min-width: 160px; }
.syn-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.syn-recs li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--sunk); }
.syn-rec-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.syn-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.syn-versions li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.syn-vnote { flex: 1 1 160px; min-width: 0; color: var(--muted); font-size: 13px; }
.syn-vacts { display: flex; gap: 6px; margin-inline-start: auto; }
.syn-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.syn-codes > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); min-width: 0; }
.syn-codes code { font-size: 12px; overflow-wrap: anywhere; }
.syn-pre { margin: 0 0 10px; padding: 12px 14px; border-radius: 10px; background: var(--sunk); font-size: 12px; line-height: 1.55; overflow-x: auto; white-space: pre; text-align: left; }
.syn-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.syn-menu li { display: flex; align-items: center; gap: 10px; }
.syn-menu kbd, .syn-sim kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--panel); font: 600 13px/1 ui-monospace, monospace; }

/* the preview: this week */
.syn-prevctl { display: flex; gap: 6px; align-items: center; }
.syn-prevctl input { width: auto; height: 32px; }
.syn-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--sunk); }
.syn-seg button { height: 26px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.syn-seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.syn-week { display: grid; gap: 8px; }
.syn-wday { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.syn-wday.first { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .syn-wday.first { box-shadow: inset -3px 0 0 var(--accent); }
.syn-wday.shabbat { background: color-mix(in srgb, var(--syn-gold) 7%, var(--panel)); }
.syn-wday.holiday:not(.shabbat) { background: color-mix(in srgb, #4F46E5 5%, var(--panel)); }
.syn-wday-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.syn-hd { margin-inline-start: auto; font-size: 13px; color: var(--muted); }
.syn-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.syn-tag { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--sunk); color: var(--ink); }
.syn-tag.rc { background: color-mix(in srgb, #0D9488 14%, var(--panel)); color: color-mix(in srgb, #0D9488 85%, var(--ink)); }
.syn-tag.hol { background: color-mix(in srgb, #4F46E5 12%, var(--panel)); color: color-mix(in srgb, #4F46E5 85%, var(--ink)); }
.syn-tag.parsha { background: color-mix(in srgb, var(--syn-gold) 16%, var(--panel)); color: color-mix(in srgb, var(--syn-gold) 80%, var(--ink)); }
.syn-times { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.syn-times li { display: flex; justify-content: space-between; gap: 10px; }
.syn-times li b { font-variant-numeric: tabular-nums; font-weight: 600; }
.syn-times li.z { color: color-mix(in srgb, var(--syn-gold) 80%, var(--ink)); }
.syn-times li.sh { color: var(--muted); }
.syn-times li.exc span::after { content: ' *'; color: var(--accent); }
.syn-read { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--sunk); }
.syn-read h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.syn-read p { margin: 0; line-height: 1.6; font-size: 13.5px; }

/* try a call */
.syn-sim { display: grid; gap: 10px; }
.syn-sim-log { display: grid; gap: 4px; min-height: 60px; max-height: 180px; overflow: auto; padding: 10px; border-radius: 10px; background: var(--sunk); font-size: 13px; }
.syn-sim-log p { margin: 0; line-height: 1.5; }
.syn-sim-log .ev-ask { color: var(--muted); }
.syn-sim-log .ev-end, .syn-sim-log .ev-transfer { color: var(--accent); font-weight: 600; }
.syn-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; direction: ltr; }
.syn-keypad button { height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font: 600 15px/1 ui-monospace, monospace; cursor: pointer; }
.syn-keypad button:hover:not(:disabled) { border-color: var(--accent-bright); }

/* Jewish calendar routing */
.jr-week { display: grid; gap: 6px; margin-bottom: 10px; }
.jr-wrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.jr-ranges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jr-range { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border-radius: 10px; background: var(--sunk); }
.jr-range input { width: auto; height: 30px; }
.jr-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 14px; }
.jr-end { display: flex; gap: 6px; }
.jr-end input { width: 90px; }
.jr-greet { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 200px); gap: 8px; align-items: start; margin-bottom: 8px; }
.jr-greet-label { font-weight: 600; padding-top: 8px; }
.jr-binds { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.jr-binds li { display: flex; align-items: center; gap: 8px; }
.jr-bindrow { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-bindrow input, .jr-bindrow select { width: auto; flex: 1; min-width: 140px; }
.jr-emergency.on { border-color: color-mix(in srgb, var(--fault) 55%, var(--line)); background: color-mix(in srgb, var(--fault) 5%, var(--panel)); }
.jr-em-state { margin: 0 0 10px; font-weight: 600; color: var(--fault); }
.jr-emrow { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.jr-emacts { display: flex; gap: 8px; flex-wrap: wrap; }
.jr-now { display: grid; gap: 4px; border-width: 1px; }
.jr-now.ok { background: color-mix(in srgb, var(--ok) 6%, var(--panel)); }
.jr-now.bad, .jr-now.em { background: color-mix(in srgb, var(--fault) 5%, var(--panel)); }
.jr-now-state { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jr-big { font-size: 24px; font-weight: 700; letter-spacing: -.01em; text-transform: capitalize; }
.jr-big.ok { color: color-mix(in srgb, var(--ok) 85%, var(--ink)); }
.jr-big.bad { color: var(--fault); }
.jr-label { font-size: 13px; color: var(--ink); }
.jr-next { list-style: none; margin: 0; padding: 0; position: relative; }
.jr-next li { position: relative; display: grid; grid-template-columns: 14px 100px minmax(0, 1fr); gap: 10px; padding: 8px 0; align-items: start; }
.jr-next li + li { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.jr-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--fault); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fault) 16%, transparent); }
.jr-next li.open .jr-dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.jr-next-when { display: flex; flex-direction: column; gap: 1px; }
.jr-next-when b { font-variant-numeric: tabular-nums; font-size: 15px; }
.jr-hd { font-size: 12px; color: var(--muted); }
.jr-next-what { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.jr-next li.jr-draftnote { display: block; padding-top: 8px; }
.jr-pub { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 12px; font-size: 13px; }
.jr-pub dt { color: var(--muted); }
.jr-pub dd { margin: 0; overflow-wrap: anywhere; }
.jr-dial summary { cursor: pointer; }
.jr-dial[open] summary { margin-bottom: 8px; }

@media (max-width: 1100px) {
  .syn-layout { grid-template-columns: minmax(0, 1fr); }
  .syn-aside { position: static; max-height: none; overflow: visible; }
  /* routing: the state now and the next changes first */
  .jr .syn-aside { order: -1; }
}
@media (max-width: 640px) {
  .syn-top { flex-wrap: wrap; padding: 12px; }
  .syn-top > .primary { width: 100%; justify-content: center; }
  .syn-card { padding: 14px; }
  .syn-grid2, .syn-grid3 { grid-template-columns: minmax(0, 1fr); }
  .syn-row-top, .syn-row-top:has(> :nth-child(3):not(button)) { grid-template-columns: minmax(0, 1fr) auto; }
  .syn-row-top > :nth-child(2):not(button) { grid-column: 1 / -1; grid-row: 2; }
  .syn-row-inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .syn-row-inline > button { justify-self: end; }
  .syn-lines { grid-template-columns: minmax(0, 1fr); }
  .jr-wrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .jr-greet { grid-template-columns: minmax(0, 1fr); }
  .jr-greet-label { padding-top: 0; }
  .jr-emrow { grid-template-columns: minmax(0, 1fr); }
  .jr-next li { grid-template-columns: 14px 86px minmax(0, 1fr); }
}