:root {
  --bg: #f6f6f7;
  --surface: #ffffff;
  --ink: #18181b;
  --muted: #6b6b73;
  --faint: #e6e6e9;
  --hover: #f0f0f2;
  --selected: #eaecfb;
  --accent: #4353d6;
  --on-accent: #ffffff;
  --needs: #a65b00;
  --needs-soft: #fdf3e3;
  --needs-line: #efd9b4;
  --good: #1a7a4c;
  --good-soft: #e6f4ec;
  --bad: #b3261e;
  --bad-soft: #fbeaea;
  --radius: 14px;
  --es-realty: #1e8a63;
  --mekudeshet: #7a4fd1;
  --thecircle: #d0417e;
  --astor: #2a78c9;
  --keter: #c2720f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101012;
    --surface: #1b1b1f;
    --ink: #f3f3f5;
    --muted: #a0a0a9;
    --faint: #2d2d33;
    --hover: #25252a;
    --selected: #272b4d;
    --accent: #8d99f5;
    --on-accent: #101012;
    --needs: #f1b566;
    --needs-soft: #2e2415;
    --needs-line: #4c3a1f;
    --good: #6fd0a0;
    --good-soft: #15291f;
    --bad: #f2928b;
    --bad-soft: #2f1b1a;
    --es-realty: #58c49c;
    --mekudeshet: #ab8cf0;
    --thecircle: #ee7fae;
    --astor: #6fb0ee;
    --keter: #eaa34c;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }

/* The two panes. One at a time on a phone. */
.shell { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); height: 100dvh; }
.pane-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--faint); background: var(--surface); }
.pane-detail { overflow-y: auto; min-width: 0; }
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .pane-list { border-right: 0; }
  .shell[data-view="list"] .pane-detail { display: none; }
  .shell[data-view="detail"] .pane-list { display: none; }
}
@media (min-width: 761px) { .back { display: none !important; } }

/* The list */
.list-head { padding: calc(14px + env(safe-area-inset-top)) 16px 10px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.title-row h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.icon-button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); font-size: 18px; }
.icon-button:hover { background: var(--hover); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px 12px; margin: 0 -16px -10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 13px; font-weight: 550; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.chip .count { opacity: 0.7; font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--svc, var(--muted)); }
[data-service="es-realty"] { --svc: var(--es-realty); }
[data-service="mekudeshet"] { --svc: var(--mekudeshet); }
[data-service="thecircle"] { --svc: var(--thecircle); }
[data-service="astor"] { --svc: var(--astor); }
[data-service="keter"] { --svc: var(--keter); }

.list-body { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: env(safe-area-inset-bottom); }
.notices { padding: 0 16px; display: grid; gap: 6px; margin-bottom: 4px; }
.notice { font-size: 13px; padding: 8px 11px; border-radius: 10px; background: var(--hover); color: var(--muted); }
.notice.bad { background: var(--bad-soft); color: var(--bad); }
.section-label { padding: 14px 16px 6px; font-size: 12px; font-weight: 650; color: var(--muted); letter-spacing: 0.01em; }
.section-label.needs { color: var(--needs); }
.row { display: block; width: 100%; text-align: left; padding: 11px 16px; border-top: 1px solid var(--faint); }
.row:first-of-type { border-top-color: transparent; }
.row:hover { background: var(--hover); }
.row[aria-current="true"] { background: var(--selected); }
.row-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.row-meta .service { font-weight: 600; color: var(--ink); }
.row-meta .when { margin-left: auto; font-variant-numeric: tabular-nums; }
.row-title { margin-top: 3px; font-weight: 600; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.row-sum { margin-top: 2px; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.row-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.tag { font-size: 11.5px; font-weight: 600; padding: 1.5px 7px; border-radius: 6px; background: var(--hover); color: var(--muted); }
.tag.needs { background: var(--needs-soft); color: var(--needs); }
.tag.fixed { background: var(--good-soft); color: var(--good); }
.tag.progress { background: var(--selected); color: var(--accent); }
.fold { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 14px 16px; border-top: 1px solid var(--faint); font-size: 13px; font-weight: 600; color: var(--muted); }
.fold:hover { background: var(--hover); }
.fold-mark { width: 12px; }
.empty { padding: 44px 24px; text-align: center; color: var(--muted); }

/* The detail */
.detail { max-width: 720px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.back { font-weight: 550; color: var(--accent); justify-self: start; padding: 2px 0; }
.detail-head h2 { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; margin-top: 6px; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--muted); }
.detail-meta .service { font-weight: 600; color: var(--ink); }
.detail-sub { margin-top: 6px; font-size: 13px; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--faint); border-radius: var(--radius); padding: 15px 16px; display: grid; gap: 8px; min-width: 0; }
.card h3 { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.card .lead { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.card .plain { overflow-wrap: anywhere; white-space: pre-wrap; }
.subhead { margin-top: 6px; }
.source { font-size: 12px; color: var(--muted); }
.pending { color: var(--muted); }

.decision { background: var(--needs-soft); border-color: var(--needs-line); gap: 11px; }
.decision h3 { color: var(--needs); }
.decision .question { font-size: 17px; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.decision .why { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.options { display: grid; gap: 7px; border: 0; padding: 0; margin: 0; }
.option { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 11px 12px; border: 1px solid var(--faint); border-radius: 11px; background: var(--surface); cursor: pointer; }
.option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.option input { margin: 3px 0 0; accent-color: var(--accent); grid-row: span 2; }
.option .label { font-weight: 600; overflow-wrap: anywhere; }
.option .sub { grid-column: 2; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
textarea, input[type="password"], input[type="url"] { width: 100%; padding: 10px 12px; border: 1px solid var(--faint); border-radius: 11px; background: var(--surface); }
textarea { resize: vertical; min-height: 68px; }
.field { display: grid; gap: 5px; font-size: 13px; font-weight: 550; color: var(--muted); }
.field textarea { font-weight: 400; color: var(--ink); font-size: 15px; }
.primary { width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 650; }
.primary:disabled { opacity: 0.4; }
.secondary { width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--hover); font-weight: 600; }
.secondary:disabled { color: var(--muted); }
.error { color: var(--bad); font-size: 14px; }
.decided { background: var(--good-soft); border-color: transparent; }
.decided h3 { color: var(--good); }
.decided .answer { font-weight: 650; overflow-wrap: anywhere; }
.decided .question { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }

.attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.attachments img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 9px; background: var(--hover); display: block; }
.attachments audio, .attachments video { width: 100%; }
.thread { display: grid; gap: 12px; }
.note { display: grid; gap: 1px; }
.note-head { font-size: 13px; font-weight: 600; }
.note-head span { font-weight: 400; color: var(--muted); }
.note p { white-space: pre-wrap; overflow-wrap: anywhere; }
.note.event p { color: var(--muted); font-size: 13.5px; }
.open-link { color: var(--accent); font-size: 14px; font-weight: 550; text-decoration: none; }
.hint { font-size: 13px; color: var(--muted); }

/* Sign in, and settings */
.center { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.signin-page { background: radial-gradient(44rem 26rem at 50% -4rem, color-mix(in srgb, var(--accent) 22%, transparent), transparent); }
.signin { width: min(340px, 100%); display: grid; gap: 12px; text-align: center; justify-items: center; }
.signin > * { width: 100%; }
.signin .signin-logo { width: 84px; height: 84px; border-radius: 19px; box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 34%, transparent); }
.signin h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin-top: 8px; }
.signin-sub { color: var(--muted); font-size: 14.5px; margin: -6px 0 16px; }
.signin input[type="password"] { padding: 14px 16px; border-radius: 14px; font-size: 16px; }
.signin .error:empty { display: none; }
.signin-go { border-radius: 999px; padding: 14px 16px; transition: filter 0.15s; }
.signin-go:hover { filter: brightness(1.08); }
.nothing { height: 100%; display: grid; place-items: center; color: var(--muted); padding: 24px; text-align: center; }
dialog { border: 0; border-radius: 18px; padding: 0; background: var(--surface); color: var(--ink); width: min(440px, calc(100vw - 32px)); box-shadow: 0 16px 60px rgba(0, 0, 0, 0.3); }
dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.sheet { padding: 20px; display: grid; gap: 16px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { font-size: 19px; letter-spacing: -0.01em; }
.link-button { color: var(--accent); font-weight: 550; }
.setting { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items: center; }
.setting .name { font-weight: 600; }
.setting .sub { grid-column: 1; font-size: 13px; color: var(--muted); }
.switch { grid-column: 2; grid-row: 1 / span 2; width: 46px; height: 28px; appearance: none; -webkit-appearance: none; background: var(--faint); border-radius: 999px; position: relative; margin: 0; cursor: pointer; transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: 0.5; cursor: default; }
.conn { display: grid; gap: 8px; }
.conn-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.conn-row .state { margin-left: auto; color: var(--muted); font-size: 13px; }
.conn-row .state.bad { color: var(--bad); }
.conn-row .state.good { color: var(--good); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }