/* BookPress kit (look A, "Workbench"). Visual Design owns this file.
   Tokens are the ones in web/index.html :root (kept as they are, so
   tools/contrast-check.mjs still holds); this file adds the shape tokens
   and one class per control, all prefixed bp- so it can land beside the
   current styles and replace them view by view. */
:root {
  --r-s: 4px; --r: 6px; --r-area: 9px; --r-pop: 10px;
  --h-ctl: 26px; --h-field: 24px; --h-row: 24px; --h-head: 32px;
  --fs: 12.5px; --fs-s: 11.5px; --fs-xs: 10.5px; --fs-he: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wash: rgb(20 30 50 / .05); --wash-press: rgb(20 30 50 / .09);
  --text-1: #2a62b0; --text-2: #a7802c; --text-3: #2f7a3e; --text-4: #8b3a8f;
  --text-5: #b8322a; --text-6: #2b8a8a; --text-7: #6b6b2a; --text-8: #5a5ab0;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wash: rgb(255 255 255 / .055); --wash-press: rgb(255 255 255 / .09); } }
:root[data-theme="dark"] { --wash: rgb(255 255 255 / .055); --wash-press: rgb(255 255 255 / .09); }

.bp-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bp-ic.s14 { width: 14px; height: 14px; } .bp-ic.s20 { width: 20px; height: 20px; }
[dir="rtl"] .bp-ic.flip { transform: scaleX(-1); }

/* Buttons ------------------------------------------------------------ */
.bp-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-ctl); padding-inline: 11px; border-radius: var(--r); font: 500 var(--fs)/1 var(--ui); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); background: var(--area); white-space: nowrap; cursor: default;
  transition: background .12s var(--ease), box-shadow .12s var(--ease); }
.bp-btn:hover { background: color-mix(in srgb, var(--area), var(--ink) 6%); box-shadow: inset 0 0 0 1px var(--edge); }
.bp-btn:active { background: color-mix(in srgb, var(--area), var(--ink) 10%); }
.bp-btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.bp-btn.primary:hover { background: color-mix(in srgb, var(--accent), var(--ink) 12%); }
.bp-btn.quiet { box-shadow: none; background: transparent; }
.bp-btn.quiet:hover { background: var(--wash); }
.bp-btn.danger { color: var(--bad); }
.bp-btn.danger:hover { box-shadow: inset 0 0 0 1px var(--bad); }
.bp-btn:disabled, .bp-btn[aria-disabled="true"] { color: var(--off); box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
.bp-btn.primary:disabled { background: var(--accent-soft); color: var(--off); }
:is(.bp-btn, .bp-ib, .bp-tab, .bp-act, .bp-seg button):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.bp-ib { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--h-ctl); height: var(--h-ctl);
  border-radius: var(--r); color: var(--muted); transition: background .12s var(--ease), color .12s; }
.bp-ib:hover { background: var(--wash); color: var(--ink); }
.bp-ib:active { background: var(--wash-press); }
.bp-ib.on, .bp-ib[aria-pressed="true"] { background: var(--sel); color: var(--accent); }
.bp-ib:disabled { color: var(--off); background: none; }

/* Fields ------------------------------------------------------------- */
.bp-field { display: inline-flex; align-items: center; gap: 6px; height: var(--h-field); min-width: 0; padding-inline: 8px; border-radius: var(--r-s);
  background: var(--field); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: var(--fs) var(--ui); white-space: nowrap; }
.bp-field:hover { box-shadow: inset 0 0 0 1px var(--edge); }
.bp-field:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); }
.bp-field input { all: unset; flex: 1; min-width: 0; font: inherit; color: inherit; }
.bp-field input::placeholder { color: var(--faint); }
.bp-field .unit { color: var(--faint); font-size: var(--fs-xs); }
.bp-field .bp-ic { color: var(--faint); }
.bp-field.num input { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: end; }
.bp-field.invalid { box-shadow: inset 0 0 0 1px var(--bad); }
.bp-field.inherited input { color: var(--faint); font-style: italic; }
.bp-field.disabled { background: transparent; color: var(--off); box-shadow: inset 0 0 0 1px var(--line); }
.bp-select { justify-content: space-between; }
.bp-select .chev { margin-inline-start: auto; color: var(--faint); }

/* Segmented, switch, check, radio, range ------------------------------- */
.bp-seg { display: inline-flex; padding: 2px; gap: 1px; border-radius: 7px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.bp-seg button { all: unset; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 26px; height: 20px; padding-inline: 8px;
  border-radius: 5px; color: var(--muted); font: var(--fs) var(--ui); }
.bp-seg button:hover { color: var(--ink); }
.bp-seg button[aria-pressed="true"] { background: var(--sel); color: var(--ink); }
.bp-seg.icons button { padding-inline: 4px; }
.bp-seg.icons button[aria-pressed="true"] { color: var(--accent); }

.bp-switch { appearance: none; margin: 0; width: 28px; height: 16px; border-radius: 8px; background: var(--line); position: relative; flex: none; transition: background .12s; }
.bp-switch::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: inset-inline-start .14s var(--ease); }
.bp-switch:checked { background: var(--accent); }
.bp-switch:checked::after { inset-inline-start: 14px; background: var(--accent-ink); }
.bp-check, .bp-radio { appearance: none; margin: 0; width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--edge); background: var(--field); display: inline-grid; place-items: center; flex: none; }
.bp-radio { border-radius: 50%; }
.bp-check:checked { background: var(--accent); box-shadow: none; }
.bp-check:checked::after { content: ""; width: 7px; height: 4px; border: solid var(--accent-ink); border-width: 0 0 1.8px 1.8px; transform: translateY(-1px) rotate(-45deg); }
.bp-check:indeterminate { background: var(--accent); box-shadow: none; }
.bp-check:indeterminate::after { content: ""; width: 7px; height: 1.8px; background: var(--accent-ink); }
.bp-radio:checked { box-shadow: inset 0 0 0 4px var(--accent); }
:is(.bp-switch, .bp-check, .bp-radio):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bp-range { appearance: none; background: none; width: 120px; height: 16px; margin: 0; }
.bp-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(var(--accent), var(--accent)) 0/var(--v, 50%) 100% no-repeat, var(--line); }
.bp-range::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--area); }
.bp-range::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line); }
.bp-range::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--accent); }
.bp-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); }

/* Areas, headers, tabs, activity bar ---------------------------------- */
.bp-area { background: var(--area); border-radius: var(--r-area); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.bp-area.focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--line)); }
.bp-ahead { height: var(--h-head); display: flex; align-items: center; gap: 2px; padding-inline: 6px 4px; background: var(--head); border-bottom: 1px solid var(--line); }
.bp-ahead .tools { margin-inline-start: auto; display: flex; opacity: .55; transition: opacity .12s; }
.bp-area:hover .bp-ahead .tools, .bp-area.focus .bp-ahead .tools { opacity: 1; }
.bp-view { all: unset; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 7px 5px; border-radius: 12px; font: 600 var(--fs) var(--ui); color: var(--ink); }
.bp-view:hover { background: var(--wash); }
.bp-view .chev { color: var(--faint); }
.bp-tabs { display: flex; align-items: stretch; height: 34px; padding-inline: 4px; background: var(--head); border-bottom: 1px solid var(--line); }
.bp-tab { all: unset; position: relative; display: inline-flex; align-items: center; gap: 7px; padding-inline: 12px; color: var(--muted); font: var(--fs) var(--ui); }
.bp-tab:hover { color: var(--ink); background: var(--wash); }
.bp-tab[aria-selected="true"] { color: var(--ink); background: var(--area); }
.bp-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 8px; inset-block-end: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.bp-tab .close { opacity: 0; display: inline-flex; border-radius: 4px; }
.bp-tab:hover .close, .bp-tab[aria-selected="true"] .close, .bp-tab.dirty .close { opacity: .7; }
.bp-tab .close:hover { opacity: 1; background: var(--wash-press); }
.bp-tab.dirty .close::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin: 3.5px; }
.bp-tab.dirty .close .bp-ic { display: none; }
.bp-tab.dirty:hover .close::before { display: none; }
.bp-tab.dirty:hover .close .bp-ic { display: block; }
.bp-acts { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 42px; padding-top: 4px; }
.bp-act { all: unset; position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); }
.bp-act:hover { background: var(--wash); color: var(--ink); }
.bp-act[aria-pressed="true"] { background: var(--sel); color: var(--accent); }
.bp-act[aria-pressed="true"]::before { content: ""; position: absolute; inset-inline-start: -5px; inset-block: 9px; width: 2px; border-radius: 2px; background: var(--accent); }
.bp-act .badge { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; min-width: 14px; height: 14px; padding-inline: 3px; border-radius: 7px; background: var(--warn); color: var(--app); font: 600 9.5px/14px var(--ui); text-align: center; }

/* Rows: tree, list, properties ------------------------------------------ */
.bp-sect { padding: 10px 12px 4px; color: var(--faint); font: 600 var(--fs-xs) var(--ui); text-transform: uppercase; letter-spacing: .07em; }
[dir="rtl"] .bp-sect { text-transform: none; letter-spacing: 0; font-size: var(--fs-s); }
.bp-row { display: flex; align-items: center; gap: 7px; height: var(--h-row); margin-inline: 6px; padding-inline: 6px; border-radius: 5px; color: var(--ink); white-space: nowrap; position: relative; }
.bp-row:hover { background: var(--wash); }
.bp-row[aria-selected="true"] { background: var(--sel); }
.bp-row .meta { margin-inline-start: auto; color: var(--faint); font-size: var(--fs-s); }
.bp-row .twist { color: var(--faint); transition: transform .12s; }
.bp-row[aria-expanded="false"] .twist { transform: rotate(-90deg); }
[dir="rtl"] .bp-row[aria-expanded="false"] .twist { transform: rotate(90deg); }
.bp-row.drop-before::before { content: ""; position: absolute; inset-inline: 4px; inset-block-start: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.bp-row.drop-into { box-shadow: inset 0 0 0 1.5px var(--accent); }
.bp-row.d1 { padding-inline-start: 22px; } .bp-row.d2 { padding-inline-start: 38px; }
.bp-he { font-family: var(--hebrew); font-size: var(--fs-he); unicode-bidi: plaintext; }
.bp-sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.bp-badge { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding-inline: 7px; border-radius: 9px; background: var(--wash-press); color: var(--muted); font: var(--fs-xs) var(--ui); white-space: nowrap; }
.bp-badge.accent { background: var(--accent-soft); color: var(--accent); }
.bp-badge.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

.bp-group { border-top: 1px solid var(--line); }
.bp-group > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; font: 600 var(--fs) var(--ui); color: var(--ink); }
.bp-group > summary::-webkit-details-marker { display: none; }
.bp-group > summary .bp-ic { color: var(--faint); }
.bp-group > summary .twist { margin-inline-start: auto; color: var(--faint); transition: transform .12s; }
.bp-group:not([open]) > summary .twist { transform: rotate(-90deg); }
.bp-props { display: grid; grid-template-columns: 92px 1fr 14px; align-items: center; gap: 6px 6px; padding: 4px 8px 10px 12px; }
.bp-props > label { color: var(--muted); font-size: var(--fs-s); }
.bp-props .pair { display: flex; gap: 6px; min-width: 0; }
.bp-props .pair > * { flex: 1; }
.bp-props .bp-field { width: 100%; }
.bp-props .bp-seg { justify-self: start; }
.bp-props .mark { width: 6px; height: 6px; border-radius: 50%; justify-self: center; }
.bp-props .mark.set { background: var(--accent); }
.bp-props .mark.over { background: var(--warn); }
.bp-more { all: unset; grid-column: 1 / -1; color: var(--accent); font-size: var(--fs-s); padding-block: 2px; }
.bp-more:hover { text-decoration: underline; }

/* Marker parts (restyle of PR 584's marker row, own bp- names so the two never collide) ----------------------------- */
.bp-mk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.bp-mk .bp-mk-side { width: 4.4ch; text-align: center; font-family: var(--mono); }
.bp-mk .bp-mk-draw { min-width: 3.4ch; height: var(--h-field); padding-inline: 6px; border-radius: var(--r-s); display: inline-grid; place-items: center;
  background: var(--accent-soft); color: var(--ink); font: 14px var(--hebrew); white-space: nowrap; }
.bp-mk.bad .bp-mk-draw { background: none; color: var(--bad); outline: 1px dashed var(--bad); outline-offset: -1px; }
.bp-mk .bp-mk-count { flex: 1 0 100%; }

/* Menus, palette, tooltip, dialog, toast -------------------------------- */
.bp-menu { background: var(--menu); border-radius: var(--r-pop); box-shadow: var(--shadow); padding: 5px; min-width: 240px; font: var(--fs) var(--ui); }
.bp-mi { display: flex; align-items: center; gap: 9px; height: 26px; padding-inline: 8px; border-radius: 5px; color: var(--ink); }
.bp-mi .bp-ic { color: var(--muted); }
.bp-mi .bp-kbd { margin-inline-start: auto; color: var(--faint); font: var(--fs-xs) var(--mono); border: 0; padding: 0; }
.bp-mi .bp-tick { width: 16px; color: var(--accent); }
.bp-mi:hover, .bp-mi.act { background: var(--accent); color: var(--accent-ink); }
.bp-mi:hover :is(.bp-ic, .bp-kbd, .bp-tick), .bp-mi.act :is(.bp-ic, .bp-kbd, .bp-tick) { color: inherit; }
.bp-mi[aria-disabled="true"] { color: var(--off); background: none; }
.bp-mi[aria-disabled="true"] :is(.bp-ic, .bp-kbd) { color: var(--off); }
.bp-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.bp-menu .head { padding: 6px 8px 2px; color: var(--faint); font: 600 var(--fs-xs) var(--ui); text-transform: uppercase; letter-spacing: .06em; }
.bp-palette { width: 560px; max-width: 100%; background: var(--menu); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.bp-palette .q { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--faint); }
.bp-palette .q input { all: unset; flex: 1; font: 14px var(--ui); color: var(--ink); }
.bp-palette .list { padding: 5px; }
.bp-palette .r { display: flex; align-items: center; gap: 10px; height: 30px; padding-inline: 10px; border-radius: 6px; color: var(--ink); }
.bp-palette .r .bp-ic { color: var(--muted); }
.bp-palette .r .k2 { margin-inline-start: auto; color: var(--faint); font-size: var(--fs-s); }
.bp-palette .r.act { background: var(--sel); }
.bp-palette mark { background: none; color: var(--accent); font-weight: 600; }
.bp-kbd { display: inline-block; font: var(--fs-xs)/15px var(--mono); color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.bp-tip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: var(--ink); color: var(--area); font: var(--fs-s) var(--ui); box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.bp-tip .bp-kbd { color: inherit; border-color: color-mix(in srgb, var(--area) 40%, transparent); opacity: .8; }
.bp-dialog { width: 420px; max-width: 100%; background: var(--menu); border-radius: 12px; box-shadow: var(--shadow); font: var(--fs) var(--ui); color: var(--ink); overflow: hidden; }
.bp-dialog header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; font: 600 14px var(--ui); }
.bp-dialog header .bp-ib { margin-inline-start: auto; }
.bp-dialog .body { padding: 6px 16px 14px; display: grid; gap: 10px; color: var(--muted); }
.bp-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--head); }
.bp-toast { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 8px; background: var(--ink); color: var(--area); font: var(--fs) var(--ui); box-shadow: var(--shadow); }
.bp-toast button { all: unset; color: color-mix(in srgb, var(--accent), var(--area) 45%); font-weight: 600; }

/* Checks, status, progress, empty ---------------------------------------- */
.bp-issue { display: grid; grid-template-columns: 16px 1fr; gap: 2px 8px; padding: 7px 12px; color: var(--ink); }
.bp-issue:hover { background: var(--wash); }
.bp-issue .where { grid-column: 2; color: var(--faint); font-size: var(--fs-s); }
.bp-issue.error .bp-ic { color: var(--bad); } .bp-issue.warn .bp-ic { color: var(--warn); } .bp-issue.info .bp-ic { color: var(--accent); }
.bp-status { display: flex; align-items: center; gap: 14px; height: 26px; padding-inline: 12px; background: var(--app); color: var(--muted); font: var(--fs-s) var(--ui); position: relative; }
.bp-status .item { display: inline-flex; align-items: center; gap: 5px; }
.bp-status .ok { color: var(--good); }
.bp-progress { position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px; overflow: hidden; }
.bp-progress::after { content: ""; position: absolute; inset-block: 0; width: 30%; background: var(--accent); animation: bp-run 1.1s var(--ease) infinite; }
@keyframes bp-run { from { inset-inline-start: -30%; } to { inset-inline-start: 100%; } }
.bp-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 18px; text-align: center; color: var(--muted); }
.bp-empty .art { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.bp-empty strong { color: var(--ink); font-weight: 600; }
.bp-pill { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--menu) 86%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); }

@media (prefers-reduced-motion: reduce) { .bp-progress::after { animation: none; inset-inline-start: 0; width: 100%; opacity: .5; } :is([class*="bp-"], [class*="bp-"] *) { transition: none !important; } }