/* css/v2.css — additions for the second design pass (new-idea-content/conversation/
   capacity-engine-chat-2.fa.md): dashboard KPI cards, Capacity Inspector drawer, Capacity
   Waterfall, Where/Why/What-if cards, plain-language symbol tag, data-quality strip and the
   guided "assess demand" wizard. Layered on tokens/base/components/engine — no color or
   spacing scale is redefined here, only new component shapes. */

/* ---- Symbol tag: plain-language label stays the heading; the document's own math symbol
   (C_b, C_s...) moves here as a secondary, dismissable detail (chat-2 Prompt 4 §19). ---- */
.sym-tag {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: 800; color: var(--engine-700);
  background: var(--engine-50); border: 1px solid var(--engine-100);
  border-radius: var(--radius-pill); padding: 2px 10px; margin-inline-start: 10px;
  direction: ltr; unicode-bidi: isolate; vertical-align: middle;
}

/* ---- Dashboard KPI cards (clickable, each opens the Capacity Inspector) ---- */
.kpi-dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .kpi-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi-dashboard-grid { grid-template-columns: 1fr; } }
/* Wrapper carries the card chrome; the nav button and the inspector trigger are SIBLING
   interactive controls inside it (a <button> may not contain another <button> — nesting them
   is invalid HTML and browsers will hoist the inner one out, breaking the click target). */
.kpi-card2-wrap {
  background: var(--surface); border: 1.5px solid var(--ink-100); border-radius: var(--radius-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.kpi-card2-wrap:hover { border-color: var(--primary-500); box-shadow: var(--shadow-sm); }
.kpi-card2 {
  all: unset; display: flex; flex-direction: column; gap: var(--sp-2);
  text-align: right; cursor: pointer; width: 100%; font-family: inherit; box-sizing: border-box;
}
.kpi-card2:active { transform: translateY(1px); }
.kpi-card2:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: var(--radius-sm); }
.kpi-card2 .kc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.kpi-card2 .kc-label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-700); }
.kpi-card2 .kc-value { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink-900); direction: ltr; unicode-bidi: isolate; }
.kpi-card2 .kc-unit { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 600; margin-inline-start: 4px; }
.kpi-card2 .kc-sub { font-size: var(--fs-xs); color: var(--ink-500); }
.kpi-card2-wrap .insp-trigger { align-self: flex-start; }

/* ---- Where / Why / What-if — the product's recurring three-question frame
   (chat-2 Prompt 4 §20: "این می‌تواند حتی فلسفه اصلی UX موتور باشد") ---- */
.www-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 760px) { .www-grid { grid-template-columns: 1fr; } }
.www-card {
  background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  padding: var(--sp-5); cursor: pointer; text-align: right; width: 100%; font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.www-card:hover { border-color: var(--primary-500); box-shadow: var(--shadow-sm); }
.www-card .www-icon {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-3);
}
.www-card.where .www-icon { background: var(--primary-100); color: var(--primary-700); }
.www-card.why .www-icon { background: var(--engine-100); color: var(--engine-700); }
.www-card.whatif .www-icon { background: var(--amber-100); color: var(--amber-700); }
.www-card h4 { font-size: var(--fs-md); }
.www-card p { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 4px; }

/* ---- Data-quality / provenance strip ---- */
.dq-strip { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.dq-pill {
  display: flex; align-items: center; gap: 7px; background: var(--ink-50);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: var(--fs-xs); color: var(--ink-700);
}
.dq-pill b.ltr-num { color: var(--ink-900); }
.dq-pill .dq-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dq-dot.good { background: var(--green-600); }
.dq-dot.warn { background: var(--amber-600); }

/* ---- Capacity Waterfall ---- */
.waterfall { display: flex; flex-direction: column; }
.wf-row { padding: 10px 0; border-bottom: 1px dashed var(--ink-100); }
.wf-row:last-child { border-bottom: none; }
.wf-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.wf-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
.wf-ref { font-size: var(--fs-2xs); color: var(--ink-500); display: block; margin-top: 2px; font-weight: 400; }
.wf-value { font-weight: 800; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.wf-row.loss .wf-value { color: var(--red-700); }
.wf-row.total { border-top: 2px solid var(--ink-150); border-bottom: none; padding-top: 14px; margin-top: 4px; }
.wf-row.total .wf-label { font-weight: 800; color: var(--ink-900); }
.wf-row.total .wf-value { color: var(--primary-800); font-size: var(--fs-lg); }
.wf-bar-track { height: 7px; background: var(--ink-100); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.wf-bar-fill { height: 100%; border-radius: 99px; background: var(--primary-600); transition: width .2s ease; }
.wf-row.loss .wf-bar-fill { background: var(--red-500); }
.wf-row.total .wf-bar-fill { background: var(--engine-600); }

/* ---- Capacity Inspector (shared slide-in panel, js/components/inspector.js) ---- */
.inspector-overlay {
  position: fixed; inset: 0; background: rgba(10, 18, 24, .38);
  opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 80;
}
.inspector-overlay.open { opacity: 1; pointer-events: auto; }
.inspector-panel {
  position: fixed; top: 0; inset-inline-end: 0; height: 100vh; width: min(420px, 92vw);
  background: var(--surface); box-shadow: var(--shadow-lg); z-index: 81;
  display: flex; flex-direction: column;
  transform: translateX(105%);
  transition: transform .2s ease;
}
html[dir="rtl"] .inspector-panel { transform: translateX(-105%); }
.inspector-panel.open, html[dir="rtl"] .inspector-panel.open { transform: translateX(0); }
.inspector-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5); border-bottom: 1px solid var(--ink-100); flex-shrink: 0;
}
.inspector-eyebrow { font-size: var(--fs-2xs); color: var(--engine-700); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.inspector-body { padding: var(--sp-5); overflow-y: auto; flex: 1; }
.insp-value-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.insp-value { font-size: var(--fs-2xl); font-weight: 800; }
.insp-section-label {
  font-size: var(--fs-2xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: .03em;
  margin-top: var(--sp-5); margin-bottom: var(--sp-3); font-weight: 700;
}
.insp-steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.insp-step { display: flex; gap: var(--sp-3); align-items: flex-start; }
.insp-step-num {
  flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--engine-100); color: var(--engine-800);
  font-size: var(--fs-2xs); font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.insp-step-label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); }
.insp-step-detail { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 2px; }
.insp-binding { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-md); align-items: flex-start; }
.insp-binding.ok { background: var(--green-50); color: var(--green-800); }
.insp-binding.bind { background: var(--red-50); color: var(--red-800); }
.insp-binding .ic { flex-shrink: 0; margin-top: 2px; }
.insp-ref { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: var(--sp-5); }
.insp-trigger {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--engine-700);
  border-bottom: 1px dashed currentColor; padding-bottom: 1px;
}
.insp-trigger:hover { color: var(--engine-800); }
.insp-trigger:focus-visible { outline: 2px solid var(--engine-500); outline-offset: 2px; border-radius: 3px; }

/* ---- Guided assess-demand wizard ---- */
.wizard-nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); }
.demand-result-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 9px 0; border-bottom: 1px dashed var(--ink-100); }
.demand-result-row:last-child { border-bottom: none; }
.demand-result-row .drr-label { font-size: var(--fs-sm); color: var(--ink-700); }
.demand-result-row .drr-value { font-weight: 800; direction: ltr; unicode-bidi: isolate; }
.demand-result-row.deficit .drr-value { color: var(--red-700); }
.demand-result-row.surplus .drr-value { color: var(--green-700); }

@media (max-width: 560px) {
  .inspector-panel { width: 100vw; }
}

/* ---- Time-Space diagram (js/views/timespace.js) ---- */
.ts-wrap { direction: ltr; overflow-x: auto; border: 1px solid var(--ink-100); border-radius: var(--radius-md); background: var(--surface); }
.ts-wrap .ts-svg { display: block; width: 100%; height: auto; min-width: 420px; }
.ts-line { stroke-width: 2.5; fill: none; }
.ts-line.loaded { stroke: var(--primary-600); }
.ts-line.empty { stroke: var(--amber-600); }
.ts-switch-band { fill: var(--ink-100); opacity: .7; }
.ts-gridline { stroke: var(--ink-100); stroke-width: 1; }
.ts-tick { font-size: 9px; fill: var(--ink-500); font-family: var(--font-ui); }
.ts-axis-label { font-size: 11px; fill: var(--ink-700); font-weight: 700; font-family: var(--font-ui); }
.ts-conflict-dot { fill: var(--red-600); stroke: #fff; stroke-width: 1.5; }
.ts-wrap-naive .ts-line.loaded { stroke: var(--ink-500); }
.ts-wrap-naive .ts-line.empty { stroke: var(--ink-300); }