/* Bikurim workspace — shared tokens, header, panels, canvas, windows, document typography. */
:root {
  --bg: #f4f3f0;
  --canvas: #ecebe7;
  --dot: #d6d4ce;
  --surface: #ffffff;
  --surface-2: #f8f7f5;
  --ink: #1d1d1b;
  --ink-2: #4b4a46;
  --ink-3: #7a7872;
  --line: #e2e0da;
  --line-2: #cfccc4;
  --accent: #1f4f8f;
  --accent-soft: #e6eef8;
  --dark: #1d1d1b;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 20, 18, .06), 0 8px 24px rgba(20, 20, 18, .08);
  --shadow-lg: 0 2px 4px rgba(20, 20, 18, .08), 0 18px 48px rgba(20, 20, 18, .16);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  --nav-h: 60px;

  --st-decided: #1f6b3a; --st-decided-bg: #e5f2e8;
  --st-spec2024: #6b5a1f; --st-spec2024-bg: #f5efd9;
  --st-proposal: #1f4f8f; --st-proposal-bg: #e6eef8;
  --st-open: #9a3412; --st-open-bg: #fbe9df;
  --st-superseded: #6b6b6b; --st-superseded-bg: #ececec;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- header ---------- */
.ws-nav {
  height: var(--nav-h); flex: none; display: flex; align-items: center; gap: 18px;
  padding-inline: 16px; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 30;
}
.ws-nav__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.ws-nav__brand strong { display: block; font-size: 14px; }
.ws-nav__brand small { display: block; font-size: 11.5px; color: var(--ink-3); }
.ws-nav__mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--dark); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.ws-nav__tabs {
  display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 92%, transparent);
}
[dir="rtl"] .ws-nav__tabs { mask-image: linear-gradient(to left, #000 92%, transparent); }
.ws-nav__tab {
  flex: none; padding: 7px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.ws-nav__tab:hover { background: var(--surface-2); color: var(--ink); }
.ws-nav__tab.is-active { background: var(--accent-soft); color: var(--accent); }
.ws-nav__tab--strong { background: var(--dark); color: #fff; }
.ws-nav__tab--strong:hover { background: #000; color: #fff; }
.ws-nav__tab--strong.is-active { background: var(--dark); color: #fff; box-shadow: inset 0 -3px 0 #8fb3e6; }
.ws-nav__tab--ext { color: var(--ink-3); font-weight: 400; }
.ws-nav__sep { width: 1px; height: 22px; background: var(--line); flex: none; margin-inline: 4px; }
.ws-nav__lang { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.ws-nav__lang a { padding: 6px 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 12.5px; }
.ws-nav__lang a + a { border-inline-start: 1px solid var(--line); }
.ws-nav__lang a.is-active { background: var(--dark); color: #fff; }

/* ---------- layout ---------- */
.ws-main { flex: 1; min-height: 0; display: flex; position: relative; }
.bk-panel {
  width: 300px; flex: none; background: var(--surface); border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; z-index: 10;
}
.bk-panel--end { border-inline-end: 0; border-inline-start: 1px solid var(--line); width: 300px; }
.bk-panel[hidden] { display: none; }
.bk-panel__head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.bk-panel__title { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 0 0 8px; }
.bk-panel__body { flex: 1; overflow: auto; padding: 10px 8px 16px; }
.ws-input {
  width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; background: var(--surface);
}
.ws-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
textarea.ws-input { resize: vertical; min-height: 160px; line-height: 1.5; }

.bk-bar {
  position: absolute; top: 12px; inset-inline-start: 12px; inset-inline-end: 12px; display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; z-index: 5; pointer-events: none;
}
.bk-bar > * { pointer-events: auto; }
.bk-bar__spacer { flex: 1; pointer-events: none; }
.ws-btn {
  border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px; padding: 6px 11px; cursor: pointer;
  font-weight: 500; color: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,.03); white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.ws-btn:hover { border-color: var(--ink-3); }
.ws-btn.is-on { background: var(--dark); color: #fff; border-color: var(--dark); }
.ws-btn--ghost { border-color: transparent; background: transparent; box-shadow: none; }
.ws-btn--small { padding: 3px 8px; font-size: 12.5px; }
.ws-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--surface); }
.ws-seg button { border: 0; background: transparent; padding: 6px 11px; cursor: pointer; font-weight: 500; }
.ws-seg button + button { border-inline-start: 1px solid var(--line); }
.ws-seg button.is-on { background: var(--dark); color: #fff; }

/* ---------- canvas ---------- */
.bk-viewport {
  flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: grab; touch-action: none;
  background-color: var(--canvas);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 22px 22px;
}
.bk-viewport.is-panning { cursor: grabbing; }
.bk-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bk-world { position: absolute; left: 0; top: 0; width: 1px; height: 1px; will-change: transform; }
.bk-zoom {
  position: absolute; bottom: 12px; inset-inline-end: 12px; z-index: 6; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow);
}
.bk-zoom button { border: 0; background: none; padding: 6px 10px; cursor: pointer; font-weight: 600; }
.bk-zoom output { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12.5px; }
.ws-hint {
  position: absolute; bottom: 12px; inset-inline-start: 12px; z-index: 6; font-size: 12px; color: var(--ink-3);
  background: rgba(255,255,255,.8); padding: 4px 8px; border-radius: 6px;
}

/* ---------- chips ---------- */
.ws-chip {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  vertical-align: 1px; line-height: 1.6;
}
.ws-chip--decided { color: var(--st-decided); background: var(--st-decided-bg); }
.ws-chip--spec2024 { color: var(--st-spec2024); background: var(--st-spec2024-bg); }
.ws-chip--proposal { color: var(--st-proposal); background: var(--st-proposal-bg); }
.ws-chip--open { color: var(--st-open); background: var(--st-open-bg); }
.ws-chip--superseded { color: var(--st-superseded); background: var(--st-superseded-bg); text-decoration: line-through; }

/* ---------- canvas windows ---------- */
.bk-win {
  position: absolute; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; cursor: default;
}
.bk-win.is-dragging { opacity: .92; }
.bk-win.is-focus { outline: 3px solid #8fb3e6; }
.bk-win__head {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); cursor: move; user-select: none; flex: none;
}
.bk-win__title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-win__body { flex: 1; overflow: auto; overscroll-behavior: contain; cursor: auto; }
.bk-win__grip {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--line-2) 50%, var(--line-2) 60%, transparent 60%, transparent 70%, var(--line-2) 70%, var(--line-2) 80%, transparent 80%);
}

/* ---------- document typography ---------- */
.bk-doc { padding: 22px 28px 40px; max-width: 920px; font-size: 14.5px; line-height: 1.6; }
.bk-doc h1 { font-size: 24px; line-height: 1.25; margin: 0 0 12px; }
.bk-doc h2 { font-size: 18px; margin: 28px 0 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.bk-doc h3 { font-size: 15.5px; margin: 20px 0 6px; }
.bk-doc h4 { font-size: 14.5px; margin: 16px 0 4px; }
.bk-doc p { margin: 8px 0; }
.bk-doc ul, .bk-doc ol { margin: 8px 0; padding-inline-start: 22px; }
.bk-doc li { margin: 3px 0; }
.bk-doc li.bk-task { list-style: none; margin-inline-start: -22px; display: flex; gap: 8px; align-items: baseline; }
.bk-task__box {
  flex: none; width: 15px; height: 15px; border: 1.5px solid var(--ink-3); border-radius: 4px; display: inline-grid;
  place-items: center; font-size: 11px; transform: translateY(2px);
}
.bk-task.is-done .bk-task__box { background: var(--dark); border-color: var(--dark); color: #fff; }
.bk-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); }
.bk-doc pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow: auto; }
.bk-doc pre code { border: 0; padding: 0; background: none; }
.bk-doc blockquote { margin: 12px 0; padding: 4px 14px; border-inline-start: 3px solid var(--line-2); color: var(--ink-2); }
.bk-doc img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; display: block; margin: 10px 0; }
.bk-doc hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.bk-table { overflow-x: auto; margin: 10px 0; }
.bk-doc table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.bk-doc th, .bk-doc td { border: 1px solid var(--line); padding: 6px 9px; text-align: start; vertical-align: top; }
.bk-doc th { background: var(--surface-2); font-weight: 600; }
.bk-doc mark { background: #fff2a8; padding: 0 1px; }
.bk-doc .bk-meta { color: var(--ink-3); font-size: 12.5px; margin-bottom: 4px; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .bk-panel { position: absolute; inset-block: 0; inset-inline-start: 0; box-shadow: var(--shadow-lg); width: min(300px, 86vw); }
  .bk-panel--end { inset-inline-start: auto; inset-inline-end: 0; }
  .ws-nav__brand small { display: none; }
  .ws-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bk-world { transition: none !important; } }