/* מעטפת דמו מערכת — build-system-demo. מעתיקים כמו שהוא.
 * כל הצבעים והגופנים הם טוקנים; את הזהות של הדמו קובעים ב-theme.css (נטען אחרי הקובץ הזה). */
:root {
  --font: 'Assistant', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-display: var(--font);
  --brand: #2456c8; --brand-ink: #ffffff; --brand-soft: #e8eefb;
  --bg: #f5f6f8; --surface: #ffffff; --side: #ffffff; --side-ink: #1b2330;
  --line: #e2e6ec; --text: #1b2330; --muted: #677284;
  --good: #1d7a4c; --good-soft: #e2f3ea; --warn: #9a5b00; --warn-soft: #fbf0dc;
  --bad: #b3261e; --bad-soft: #fbe7e5; --info: #2456c8; --info-soft: #e8eefb; --neutral: #4b5563; --neutral-soft: #eef0f3;
  --radius: 10px; --shadow: 0 18px 48px -24px rgba(16, 24, 40, .35);
  --side-w: 248px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --brand-soft: #1d2a44; --bg: #10141a; --surface: #171d25; --side: #131920; --side-ink: #e6ebf2;
  --line: #27313d; --text: #e6ebf2; --muted: #95a1b2;
  --good: #6fd3a0; --good-soft: #173326; --warn: #f0b860; --warn-soft: #3a2c14; --bad: #ff8a80; --bad-soft: #3d1c1a;
  --info: #8ab4ff; --info-soft: #1d2a44; --neutral: #b4bdc9; --neutral-soft: #222a34; color-scheme: dark } }
:root[data-theme="dark"] {
  --brand-soft: #1d2a44; --bg: #10141a; --surface: #171d25; --side: #131920; --side-ink: #e6ebf2;
  --line: #27313d; --text: #e6ebf2; --muted: #95a1b2;
  --good: #6fd3a0; --good-soft: #173326; --warn: #f0b860; --warn-soft: #3a2c14; --bad: #ff8a80; --bad-soft: #3d1c1a;
  --info: #8ab4ff; --info-soft: #1d2a44; --neutral: #b4bdc9; --neutral-soft: #222a34; color-scheme: dark }

* { box-sizing: border-box }
html, body { margin: 0; min-height: 100% }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5 }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
bdi { unicode-bidi: isolate }

.dm-shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh }
.dm-side { background: var(--side); color: var(--side-ink); border-inline-end: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100dvh; overflow-y: auto }
.dm-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px }
.dm-brand img { width: 38px; height: 38px; object-fit: contain; border-radius: 8px }
.dm-brand b { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.2 }
.dm-brand small { color: var(--muted); font-size: 12.5px }
#dmNav { display: grid; gap: 2px; flex: 1; align-content: start }
.dm-group { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); padding: 12px 10px 4px }
.dm-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 14.5px }
.dm-nav span { width: 20px; text-align: center }
.dm-nav:hover { background: var(--brand-soft) }
.dm-nav.on { background: var(--brand); color: var(--brand-ink); font-weight: 600 }
.dm-dot { width: 7px; height: 7px; border-radius: 50%; margin-inline-start: auto; background: var(--neutral) }
.dm-dot.dm-good { background: var(--good) } .dm-dot.dm-warn { background: var(--warn) } .dm-dot.dm-bad { background: var(--bad) }
.dm-made { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 8px }
.dm-made img { height: 26px; width: auto; background: #fff; padding: 4px 7px; border-radius: 6px } /* הלוגו כתוב בכחול כהה — שבב בהיר שומר עליו קריא גם בתפריט כהה */

.dm-main { min-width: 0; display: flex; flex-direction: column }
.dm-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); flex-wrap: wrap }
.dm-search { flex: 1 1 220px; min-width: 0 }
.dm-search input { width: 100%; max-width: 380px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface) }
.dm-demo { font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap }
.dm-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.dm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-decoration: none; font-size: 14px; white-space: nowrap }
.dm-btn:hover { border-color: var(--brand) }
.dm-btn:disabled { opacity: .45; cursor: default }
.dm-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 600 }
.dm-icon { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; display: inline-grid; place-items: center }
.dm-burger { display: none }
.dm-count { font-size: 12px; color: var(--muted) }
.dm-role { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 10px; background: var(--surface) }
.dm-role select { border: 0; background: transparent; font-size: 13.5px; max-width: 190px }
.dm-ava { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: hsl(var(--h, 210) 45% 45%); flex: none }

.dm-view { padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; outline: none }
.dm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap }
.dm-head h1 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); line-height: 1.2; text-wrap: balance; display: flex; align-items: center; gap: 10px }
.dm-hicon { font-size: .9em }
.dm-sub { margin: 4px 0 0; color: var(--muted) }
.dm-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.dm-muted { color: var(--muted) }

.dm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px }
.dm-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 2px }
.dm-kpi small { color: var(--muted); font-size: 13px }
.dm-kpi b { font-size: 26px; font-variant-numeric: tabular-nums; font-family: var(--font-display) }
.dm-link { cursor: pointer } .dm-kpi.dm-link:hover { border-color: var(--brand) }
.dm-delta { font-size: 12.5px; font-weight: 600; justify-self: start; border-radius: 6px; padding: 1px 7px }
.dm-grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px }
.dm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; min-width: 0 }
.dm-card h2 { margin: 0 0 10px; font-size: 16px }
.dm-chart svg { width: 100%; height: auto; display: block }
.dm-bar { fill: color-mix(in srgb, var(--brand) 35%, var(--surface)) } .dm-bar-last { fill: var(--brand) }
.dm-axis { fill: var(--muted); font-size: 11px; font-family: var(--font) }
.dm-grid { stroke: var(--line) } .dm-target { stroke: var(--warn); stroke-dasharray: 5 4 }
.dm-feed { list-style: none; margin: 0; padding: 0; display: grid }
.dm-feed li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line) }
.dm-feed li:last-child { border-bottom: 0 }
.dm-feed small { color: var(--muted); white-space: nowrap }
.dm-ints { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted) }
.dm-int { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 12px; font-size: 13px; color: var(--text) }

.dm-chips { display: flex; flex-wrap: wrap; gap: 6px }
.dm-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 13.5px }
.dm-chip span { color: var(--muted) }
.dm-chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600 }
.dm-tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius) }
.dm-table { width: 100%; border-collapse: collapse; font-size: 14px }
.dm-table th { text-align: start; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: color-mix(in srgb, var(--bg) 50%, var(--surface)) }
.dm-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle }
.dm-table tbody tr { cursor: pointer } .dm-table tbody tr:hover { background: var(--brand-soft) }
.dm-table tbody tr:last-child td { border-bottom: 0 }
.dm-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap }
.dm-foot { color: var(--muted); font-size: 13px }
.dm-empty { color: var(--muted); padding: 28px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius) }
.dm-pill { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: var(--neutral-soft); color: var(--neutral) }
.dm-good { background: var(--good-soft); color: var(--good) } .dm-warn { background: var(--warn-soft); color: var(--warn) }
.dm-bad { background: var(--bad-soft); color: var(--bad) } .dm-info { background: var(--info-soft); color: var(--info) }
.dm-tag { display: inline-block; font-size: 12px; background: var(--neutral-soft); border-radius: 6px; padding: 1px 7px }
.dm-person { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap }
.dm-person .dm-ava { width: 24px; height: 24px; font-size: 11px }

.dm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px }
.dm-col { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: grid; gap: 8px; align-content: start }
.dm-col h3 { margin: 0 0 2px; font-size: 14px; display: flex; align-items: center; justify-content: space-between }
.dm-col h3 > span:last-child { color: var(--muted); font-weight: 400 }
.dm-tile { text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; display: grid; gap: 3px }
.dm-tile:hover { border-color: var(--brand) }
.dm-tile small { color: var(--muted) }

.dm-scrim { position: fixed; inset: 0; background: rgba(10, 14, 20, .38); z-index: 20 }
.dm-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(440px, 100%); background: var(--surface); z-index: 21; box-shadow: var(--shadow); padding: 20px 22px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; display: grid; gap: 14px; align-content: start }
.dm-drawer-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start }
.dm-drawer-head small { color: var(--muted) }
.dm-drawer-head h2 { margin: 2px 0 0; font-family: var(--font-display); font-size: 21px }
.dm-drawer h3 { margin: 6px 0 0; font-size: 15px }
.dm-fields { margin: 0; display: grid; gap: 0 }
.dm-fields div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line) }
.dm-fields dt { color: var(--muted); font-size: 13.5px } .dm-fields dd { margin: 0; overflow-wrap: anywhere }
.dm-drawer-actions { display: flex; gap: 8px; flex-wrap: wrap }
.dm-verdicts { display: grid; gap: 8px }
.dm-verdict { border: 1.5px solid var(--line); background: var(--surface); color: var(--text); border-radius: 10px; padding: 10px 14px; cursor: pointer; text-align: start; font-weight: 600 }
.dm-verdict[aria-pressed="true"].dm-good { background: var(--good-soft); color: var(--good); border-color: var(--good) }
.dm-verdict[aria-pressed="true"].dm-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn) }
.dm-verdict[aria-pressed="true"].dm-bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad) }
.dm-verdict:not([aria-pressed="true"]) { background: var(--surface); color: var(--text) }
.dm-label { font-weight: 600; font-size: 14px; margin-bottom: -8px }
.dm-drawer textarea, .dm-copyfb { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--bg); resize: vertical }
.dm-sync { color: var(--muted); font-size: 13px; min-height: 1.4em }

.dm-tour { position: fixed; inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 20px; z-index: 30; width: min(360px, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--brand); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 6px }
.dm-tour small { color: var(--brand); font-weight: 700; font-size: 12px }
.dm-tour h3 { margin: 0; font-size: 17px } .dm-tour p { margin: 0; color: var(--muted) }
.dm-tour-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px }
.dm-tour-actions .dm-icon { margin-inline-start: auto; width: 32px; height: 32px }
.dm-spot { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 8px; transition: outline-color .2s }
.dm-toast { position: fixed; inset-block-end: 20px; inset-inline-end: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 40; background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 10px; font-size: 14px; transition: .2s }
.dm-toast.on { opacity: 1; transform: translate(-50%, 0) }
[hidden] { display: none !important }

@media (max-width: 900px) {
  .dm-shell { grid-template-columns: minmax(0, 1fr) }
  .dm-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(280px, 85vw); z-index: 21; transform: translateX(100%); transition: transform .22s; box-shadow: var(--shadow) }
  body.dm-menu-open .dm-side { transform: none }
  .dm-burger { display: inline-grid }
  .dm-top { padding: 10px 16px }
  .dm-view { padding: 16px }
  .dm-grid2 { grid-template-columns: minmax(0, 1fr) }
  .dm-role select { max-width: 120px }
}
@media (max-width: 600px) {
  .dm-search { order: 5; flex-basis: 100% }
  .dm-top { gap: 8px }
  .dm-actions { flex: 1; justify-content: flex-end; gap: 6px }
  .dm-lbl { display: none }
  .dm-btn { padding: 7px 10px }
  .dm-role select { max-width: 96px }
  .dm-demo { display: none }
  .dm-table thead { display: none }
  .dm-table, .dm-table tbody, .dm-table tr, .dm-table td { display: block }
  .dm-table tr { padding: 8px 4px; border-bottom: 1px solid var(--line) }
  .dm-table td { border: 0; padding: 3px 10px; display: flex; justify-content: space-between; gap: 12px; text-align: end }
  .dm-table td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; text-align: start }
  .dm-fields div { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }