@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Hebrew:wght@300;400;500;600&display=swap");

/* Base */
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--text-body); -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
.es-root { direction: rtl; font: var(--text-body); color: var(--ink); }
.es-root *, .es-root *::before, .es-root *::after { box-sizing: border-box; }
.es-root :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.es-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.es-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.es-note { margin: 0; font: var(--text-caption); color: var(--ink-muted); }
.es-link { color: var(--accent); text-underline-offset: 3px; }
.es-page-title { margin: 0; font: var(--text-page-title); }
.es-section-title { margin: 0; font: var(--text-section); display: flex; align-items: baseline; gap: var(--space-2); }
.es-section-title .es-mono { font: var(--text-id); color: var(--ink-muted); }
.es-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-2); min-width: 0; }
.es-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.es-stack { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.es-tone-stop { color: var(--stop); }
.es-tone-warn { color: var(--warn); }
.es-tone-ok { color: var(--ok); }
.es-tone-accent { color: var(--accent); }

/* Buttons and inputs */
.es-btn { font: var(--text-body-strong); min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.es-btn:hover { background: var(--surface-2); }
.es-btn--primary, .es-btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.es-input { width: 100%; min-height: 36px; padding: var(--space-1) var(--space-2); font: var(--text-body); color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); }
.es-input::placeholder { color: var(--ink-muted); }
textarea.es-input { resize: vertical; }

/* Chip */
.es-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); font: var(--text-label); white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--neutral-soft); color: var(--neutral); }
.es-chip--stop { background: var(--stop-soft); color: var(--stop); }
.es-chip--warn { background: var(--warn-soft); color: var(--warn); }
.es-chip--ok { background: var(--ok-soft); color: var(--ok); }
.es-chip--accent { background: var(--accent-soft); color: var(--accent); }

/* Stat tile */
.es-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.es-stat { display: grid; align-content: start; background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); min-width: 0; }
.es-stat__label, .es-stat__note { font: var(--text-caption); color: var(--ink-muted); }
.es-stat__value { font: var(--text-figure); font-variant-numeric: tabular-nums; }
.es-stat--stop .es-stat__value { color: var(--stop); }
.es-stat--warn .es-stat__value { color: var(--warn); }
.es-stat--ok .es-stat__value { color: var(--ok); }
.es-stat--accent .es-stat__value { color: var(--accent); }

/* Inbox row */
.es-inbox { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); min-height: 48px; background: none; border: 0; border-top: 1px solid var(--hairline); color: inherit; font: var(--text-body); text-align: start; text-decoration: none; }
.es-list > .es-inbox:first-child { border-top: 0; }
a.es-inbox, button.es-inbox { cursor: pointer; }
a.es-inbox:hover, button.es-inbox:hover { background: var(--surface-2); }
.es-inbox__count { font: var(--text-count); min-width: 2.5em; font-variant-numeric: tabular-nums; }
.es-inbox__body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.es-inbox__title { flex: 1 1 16em; min-width: 0; }
.es-inbox__sub { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.es-inbox__meta { font: var(--text-caption); color: var(--ink-muted); }
.es-inbox__go { display: inline-flex; color: var(--ink-muted); }

/* Stage rail */
.es-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-1); }
.es-rail__step { display: grid; justify-items: center; align-content: start; text-align: center; min-width: 0; padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); border: 1px dashed var(--hairline-strong); color: var(--ink-muted); }
.es-rail__btn { display: grid; justify-items: center; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.es-rail__n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-pill); font: var(--text-id); font-weight: 500; }
.es-rail__name { font: var(--text-label); text-wrap: balance; }
.es-rail__date { font: var(--text-caption); font-variant-numeric: tabular-nums; }
.es-rail__step--done { border: 1px solid transparent; background: var(--ok-soft); color: var(--ok); }
.es-rail__step--current { border: 2px solid var(--accent); background: var(--surface); color: var(--accent); }
.es-rail__step--current .es-rail__n { background: var(--accent); color: var(--on-accent); }
.es-rail__step--closed { border: 1px solid transparent; background: var(--neutral-soft); color: var(--neutral); }

/* Stage section */
.es-stage { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); min-width: 0; }
.es-stage__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); cursor: pointer; list-style: none; }
.es-stage__head::-webkit-details-marker { display: none; }
.es-stage__n { font: var(--text-id); font-weight: 500; color: var(--ink-muted); }
.es-stage__name { font: var(--text-body-strong); }
.es-stage__date { font: var(--text-caption); color: var(--ink-muted); }
.es-stage__sum { flex-basis: 100%; font: var(--text-caption); color: var(--ink-muted); }
.es-stage[open] .es-stage__sum { display: none; }
.es-stage__body { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.es-stage--current { border-color: var(--accent); }
.es-stage--current .es-stage__n { color: var(--accent); }

/* Client header */
.es-client { display: grid; gap: var(--space-1); }
.es-client__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.es-client__name { font: var(--text-card-title); }
.es-client__id { font: var(--text-id); color: var(--ink-muted); }
.es-client__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font: var(--text-caption); color: var(--ink-muted); }

/* Stop line */
.es-stop { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--stop-soft); border: 1px solid var(--stop); border-radius: var(--radius-sm); }
.es-stop__title { margin: 0; font: var(--text-body-strong); color: var(--stop); }
.es-stop__flag { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.es-stop__src, .es-stop__say, .es-stop__note { font: var(--text-caption); color: var(--ink-muted); }
.es-stop__note { margin: 0; color: var(--ink); }

/* Draft */
.es-draft { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); min-width: 0; }
.es-draft__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.es-draft__title { font: var(--text-body-strong); }
.es-draft__meta { font: var(--text-caption); color: var(--ink-muted); }
.es-draft__letter { display: grid; gap: var(--space-2); max-width: 72ch; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); }
.es-draft__letter p, .es-draft__letter h4 { margin: 0; }
.es-draft__letter h4 { font: var(--text-body-strong); }
.es-draft__letter ul { margin: 0; padding-inline-start: var(--space-4); display: grid; gap: var(--space-1); }
.es-draft__fixed { padding-top: var(--space-2); border-top: 1px solid var(--hairline); color: var(--ink-muted); }
.es-draft__fixed h4 { color: var(--ink); }
.es-draft__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.es-draft__fix { display: grid; gap: var(--space-2); flex-basis: 100%; }

/* Table */
.es-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.es-table { width: 100%; border-collapse: collapse; font: var(--text-body); }
.es-table caption { padding: var(--space-2) var(--space-3); text-align: start; font: var(--text-body-strong); }
.es-table th { padding: var(--space-2) var(--space-3); text-align: start; white-space: nowrap; font: var(--text-label); color: var(--ink-muted); background: var(--surface-2); }
.es-table td { padding: var(--space-2) var(--space-3); text-align: start; border-top: 1px solid var(--hairline); }
.es-table .es-num { text-align: end; }
.es-table td.es-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Switch */
.es-switch-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.es-switch-row__label { flex: 1; min-width: 0; display: grid; }
.es-switch { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; background: none; color: var(--ink-muted); font: var(--text-label); cursor: pointer; }
.es-switch:disabled { cursor: default; }
.es-switch__track { position: relative; width: 36px; height: 20px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); background: var(--surface-2); transition: background-color .15s; }
.es-switch__knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-muted); transition: inset-inline-start .15s; }
.es-switch[aria-checked="true"] { color: var(--accent); }
.es-switch[aria-checked="true"] .es-switch__track { background: var(--accent); border-color: var(--accent); }
.es-switch[aria-checked="true"] .es-switch__knob { inset-inline-start: 18px; background: var(--on-accent); }

/* Empty state */
.es-empty { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--surface); border: 1px dashed var(--hairline-strong); border-radius: var(--radius-md); }
.es-empty__title { margin: 0; font: var(--text-body-strong); }
.es-empty__body { margin: 0; color: var(--ink-muted); }

/* Shell and app bar */
.es-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; background: var(--bg); }
.es-shell:has(> .es-appbar--rail) { grid-template-columns: 232px minmax(0, 1fr); }
.es-main { width: 100%; max-width: 1100px; margin-inline: auto; padding: var(--space-4) var(--space-3) var(--space-6); display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.es-appbar { min-width: 0; background: var(--surface); z-index: 5; }
.es-top { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-2) var(--space-3); }
.es-mark { font: var(--text-mark); letter-spacing: 3px; white-space: nowrap; }
.es-mark__light { font-weight: 300; }
.es-top__status { margin-inline-start: auto; font: var(--text-caption); color: var(--ink-muted); white-space: nowrap; }
.es-nav { display: flex; }
.es-nav__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); font: var(--text-body); text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer; }
.es-nav__item:hover { background: var(--surface-2); color: var(--ink); }
.es-nav__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font: var(--text-body-strong); }
.es-nav__count { margin-inline-start: auto; font: var(--text-id); }
.es-nav__more { position: relative; }
.es-nav__more > summary { list-style: none; }
.es-nav__more > summary::-webkit-details-marker { display: none; }

.es-appbar--rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; border-inline-end: 1px solid var(--hairline); }
.es-appbar--rail .es-top { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3); }
.es-appbar--rail .es-top__status { margin-inline-start: 0; white-space: normal; }
.es-appbar--rail .es-nav { flex-direction: column; gap: var(--space-1); padding: 0 var(--space-2) var(--space-3); }
.es-appbar--rail .es-nav__more { display: none; }

.es-appbar--bar { position: sticky; top: 0; border-bottom: 1px solid var(--hairline); }
.es-appbar--bar .es-top { flex-wrap: wrap; row-gap: var(--space-1); }
.es-appbar--bar .es-top__search { flex: 1; min-width: 0; }
.es-appbar--bar .es-top__status { flex-basis: 100%; margin-inline-start: 0; white-space: normal; }
.es-appbar--bar .es-nav { position: fixed; bottom: 0; inset-inline: 0; z-index: 5; justify-content: space-around; padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--hairline); }
.es-appbar--bar .es-nav__item { flex-direction: column; gap: 0; padding: var(--space-1) var(--space-2); font: var(--text-label); }
.es-appbar--bar .es-nav__item[aria-current="page"] { font: var(--text-label); }
.es-appbar--bar .es-nav__count { margin: 0; }
.es-appbar--bar .es-nav__item--extra { display: none; }
.es-appbar--bar .es-nav__menu { position: absolute; bottom: calc(100% + var(--space-1)); inset-inline-end: 0; display: grid; min-width: 180px; padding: var(--space-1); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.es-appbar--bar .es-nav__menu .es-nav__item { flex-direction: row; font: var(--text-body); padding: var(--space-2) var(--space-3); }

@media (prefers-reduced-motion: reduce) { .es-switch__track, .es-switch__knob { transition: none; } }

/* Previews only: a padded column, a row, and a framed box that keeps fixed bars inside it */
.es-demo { padding: var(--space-3); display: grid; gap: var(--space-3); align-content: start; }
.es-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.es-demo-frame { position: relative; overflow: hidden; transform: translateZ(0); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--bg); }
.es-demo-frame > .es-shell { min-height: 100%; height: 100%; }
.es-demo-frame .es-appbar--rail { height: 100%; }