/* 2.52.0: the Kosher phone hub (public/kosher.js), on the synagogue line's look (synagogue.css). Modern Calm: white
   cards on the page's grey, one accent, pills for state; the items waiting for approval stand out in a soft amber,
   "what callers hear today" sits beside the editor (stacked on a phone). */
.kos { --kos-teal: #0F766E; --kos-teal-soft: color-mix(in srgb, #0F766E 11%, var(--panel)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kos { --kos-teal: #5EEAD4; } }
:root[data-theme="dark"] .kos { --kos-teal: #5EEAD4; }
.kos-ico { color: #0F766E; background: color-mix(in srgb, #0F766E 12%, var(--panel)); }

.kos-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kos-pillbtn { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; }
.kos-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 6px; border-radius: 999px; background: var(--wait); color: #fff; font-size: 11px; font-weight: 600; }
.kos-grow { flex: 1; }

/* an item: its state, where it came from, its words, the decision */
.kos-item { gap: 8px; }
.kos-item.draft { border-color: color-mix(in srgb, var(--wait) 40%, var(--line)); background: color-mix(in srgb, var(--wait) 5%, var(--panel)); }
.kos-item.approved { background: var(--panel); }
.kos-item.rejected { opacity: .72; }
.kos-item-head, .kos-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.kos-src { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.kos-src.feed { color: var(--kos-teal); }
.kos-title { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.kos-text { margin: 0; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
.kos-link { color: var(--muted); overflow-wrap: anywhere; }
.kos-approve { background: var(--kos-teal); color: #fff; border-color: transparent; }
.kos-approve:hover { filter: brightness(1.08); }
:root[data-theme="dark"] .kos-approve { color: #04201D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kos-approve { color: #04201D; } }
.kos-empty { display: flex; align-items: center; gap: 6px; }
.kos-max { margin-bottom: 10px; }
.kos-max input { width: 72px; }
.kos-rejected { padding: 12px 18px; }
.kos-rejected summary { cursor: pointer; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.kos-feed { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto auto; }
.kos-feedst { grid-column: 1 / -1; }
.kos-feedst.bad { color: var(--fault); }
.kos-contact { grid-template-columns: auto minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) auto; }
.kos-key { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--panel); font: 600 13px/1 ui-monospace, monospace; }
.kos-learn { list-style: none; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--kos-teal-soft); display: grid; gap: 6px; }
.kos-learn li { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.kos-wx { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kos-danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* the approval log */
.kos-log { width: 100%; border-collapse: collapse; font-size: 13px; }
.kos-log th { text-align: start; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.kos-log td { padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: top; }
.kos-logtitle { overflow-wrap: anywhere; }

/* what callers hear today */
.kos-hear { display: grid; gap: 10px; font-size: 13.5px; }
.kos-hear p { margin: 0; line-height: 1.6; }
.kos-lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin-bottom: 2px; }
.kos-greet { padding: 10px 12px; border-radius: 12px; background: var(--kos-teal-soft); }
.kos-stale { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--wait) 14%, var(--panel)); color: color-mix(in srgb, var(--wait) 75%, var(--ink)); }
.kos-urgent { padding: 10px 12px; border-radius: 12px; background: var(--fault-soft); color: var(--fault); }
.kos-secs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kos-secs details { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.kos-secs summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; font-weight: 600; list-style: none; }
.kos-secs summary::-webkit-details-marker { display: none; }
.kos-secs kbd, .kos-subhead kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--sunk); font: 600 12px/1 ui-monospace, monospace; flex: none; }
.kos-lines { display: grid; gap: 4px; padding: 0 12px 10px; }
.kos-lines p.rec { color: var(--kos-teal); }
.kos-mic { display: inline-flex; vertical-align: -2px; margin-inline-end: 4px; }
.kos-sub { border-top: 1px dashed var(--line); padding-top: 8px; }
.kos-subhead { display: flex; align-items: center; gap: 8px; padding: 0 12px 6px; font-weight: 500; color: var(--muted); }
.kos-subhead code { font-size: 12px; }

@media (max-width: 640px) {
  .kos-feed, .kos-contact { grid-template-columns: minmax(0, 1fr) auto; }
  .kos-contact .kos-key { display: none; }
  .kos-log th:nth-child(4), .kos-log td:nth-child(4) { display: none; }
}