/* ===========================================================================
   SolutionsSales -- 画面イメージ (FRAGMENT:mock-dash), part 5:
   tab 6 ダッシュボード. Four blocks (see the panel note in the page):
   送信から商談まで (3 linked counts, the goal emphasised) / 未対応の返信 /
   送信の状態 (meters with a target tick); the campaign
   table (block 4) is in sales-mock-6.css.
   Behaviour: sales-mock-5.js.
   - State colours always travel with words (注意 / 良好 / 目安), never alone.
   - The AI tint stays on AI marks only (AI優先度, AIの提案).
   - Motion only under html.sa-motion (.is-draw): bars and meters fill, the
     arrows and rows rise. Reduced motion / no JS = final state.
   Contrast (measured): #8A5A00 on #FFF3D6 5.3:1; #1D6B47 on #E6F2EA 5.8:1;
   --sa-acc-ink on #FFF 7.4:1; --muted on #FFF 5.48:1.
   =========================================================================== */
.sa-db { --db-warn: #8A5A00; --db-warn-bg: #FFF3D6; --db-good: #1D6B47; --db-good-bg: #E6F2EA; --db-tick: #B7791F; display: grid; gap: 12px; }
.sa-mock-win .sa-db-per { display: inline-flex; gap: 6px; }
.sa-db-per .sa-mock-btn { min-height: 32px; padding: 3px 12px; }
.sa-db-per .sa-mock-btn[aria-pressed="true"]:disabled { background: var(--sa-acc); color: var(--white); }   /* no JS: 今月 still reads as chosen */
.sa-db-card, .sa-db-flow { margin: 0; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); }
.sa-mock-win .sa-db-ch { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.sa-db-ch b, .sa-db-flow-h b { display: block; font-size: 13.5px; line-height: 1.5; color: var(--navy); }
.sa-db-ch small, .sa-db-flow-h small { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sa-mock-win .sa-db-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-db-warn, .sa-db-good { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 4px; background: var(--db-warn-bg); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--db-warn); white-space: nowrap; }
.sa-db-good { background: var(--db-good-bg); color: var(--db-good); }
.sa-db-good::before { content: ""; width: 7px; height: 4px; margin-top: -2px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.sa-mock-win .sa-db-fn { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--muted); }

/* ---- 1 送信から商談まで ------------------------------------------------------ */
.sa-mock-win .sa-db-flow-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; }
.sa-db-flow-h b, .sa-db-flow-h small { display: inline; }
.sa-db-note { padding: 0 8px; border-radius: 4px; background: var(--sa-flat); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--muted); }
.sa-db-steps { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr) 92px minmax(0, 1.15fr); align-items: stretch; }
.sa-db-step { padding: 12px 14px; border-radius: 8px; background: var(--surface); }
.sa-db-step--goal { background: var(--white); box-shadow: inset 0 0 0 2px var(--sa-acc); }
.sa-mock-win .sa-db-kl { font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--muted); }
.sa-mock-win .sa-db-kv { margin: 2px 0 1px; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--navy); }
.sa-db-step--goal .sa-db-kv { font-size: 32px; color: var(--sa-acc-ink); }
.sa-db-kv small { margin-left: 3px; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; color: var(--muted); }
.sa-mock-win .sa-db-kd { font-size: 13px; line-height: 1.6; color: var(--muted); }
.sa-mock-win .sa-db-arrow { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px 14px; text-align: center; }
.sa-db-arrow span { font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.sa-db-arrow b { font-size: 16px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--navy); }
.sa-db-arrow::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--sa-rule); }
.sa-db-arrow::before { content: ""; position: absolute; right: 10px; bottom: 5px; width: 6px; height: 6px; border: solid var(--sa-rule); border-width: 2px 2px 0 0; transform: rotate(45deg); }

/* ---- row: 2 未対応の返信 | 3 送信の状態 ------------------------------------ */
.sa-db-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.sa-mock-win .sa-db-rl { margin-top: 8px; }
.sa-db-r { padding: 11px 0; border-top: 1px solid var(--mk-row); }
.sa-mock-win .sa-db-r-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sa-db-r-h b { font-size: 13px; color: var(--navy); }
.sa-db-r-t { font-size: 13px; color: var(--muted); }
.sa-mock-win .sa-db-r-q { margin: 5px 0 6px; font-size: 13px; line-height: 1.7; color: var(--ink); }
.sa-mock-win .sa-db-r-a { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sa-db-r-s { font-size: 13px; font-weight: 700; color: var(--navy); }
.sa-db-r-a .sa-mock-btn { margin-left: auto; }
.sa-mock-win .sa-db-more { position: relative; padding-top: 10px; border-top: 1px solid var(--mk-row); }
.sa-db-card .sa-mock-btn--row { min-height: 32px; padding: 3px 10px; }
.sa-db-card .sa-mock-btn--row::before { inset: -7px -2px; }
.sa-db-meter { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--sa-hair); }
.sa-db-meter i { position: absolute; inset: 0; border-radius: 4px; background: var(--sa-acc); transform: scaleX(var(--v)); transform-origin: left center; }
.sa-mock-win .sa-db-hm { display: grid; gap: 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--mk-row); }
.sa-db-hm-r { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; }
.sa-db-hm dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.sa-db-hm dd { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; margin: 0; }
.sa-db-hm-r--x dd { grid-template-columns: auto minmax(0, 1fr); }
.sa-db-hm dd b { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--navy); }
.sa-db-hm dd small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.sa-db-meter { height: 6px; overflow: visible; }
.sa-db-meter i { background: var(--db-good); border-radius: 3px; }
.sa-db-meter::after { content: ""; position: absolute; top: -4px; left: calc(var(--t) * 100%); width: 2px; height: 14px; margin-left: -1px; background: var(--db-tick); }
.sa-db-hm-r.is-over .sa-db-meter i { background: var(--db-tick); }
.sa-mock-win .sa-db-dom { margin-top: 12px; }

/* ---- 4 一斉配信・ワークフロー別の成果: sales-mock-6.css ------------------------- */

/* ---- motion (html.sa-motion only) ------------------------------------------------ */
@keyframes sa-db-fill { from { transform: scaleX(0); } }
html.sa-motion .sa-db.is-draw .sa-db-arrow { animation: sa-mock-in 0.45s var(--ease-out) both; }
html.sa-motion .sa-db.is-draw .sa-db-arrow:nth-of-type(2) { animation-delay: 0.25s; }
html.sa-motion .sa-db.is-draw .sa-db-meter i { animation: sa-db-fill 0.8s var(--ease-out) 0.2s both; }
html.sa-motion .sa-db.is-draw [data-db-rows] tr:not([hidden]) { animation: sa-mock-in 0.4s var(--ease-out) both; }
html.sa-motion .sa-db-meter i { transition: transform 0.6s var(--ease-out); }

/* ---- small screens ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .sa-db-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .sa-db-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sa-db-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; padding: 10px 12px; }
  .sa-db-step .sa-db-kd { grid-column: 1 / -1; }
  .sa-mock-win .sa-db-kv, .sa-db-step--goal .sa-db-kv { margin: 0; font-size: 22px; }
  .sa-mock-win .sa-db-arrow { flex-direction: row; gap: 6px; justify-content: flex-start; padding: 6px 12px 6px 34px; }
  .sa-db-arrow b { font-size: 14px; }
  .sa-db-arrow::after { left: 17px; right: auto; top: 4px; bottom: 4px; width: 2px; height: auto; }
  .sa-db-arrow::before { left: 15px; right: auto; bottom: 3px; transform: rotate(135deg); }
}
@media (max-width: 639px) {
  .sa-db-card, .sa-db-flow { padding: 12px; }
  .sa-mock-win .sa-db-per { gap: 12px; }   /* room for the dot's ripple between chips */
  .sa-db-r-a .sa-mock-btn { margin-left: 0; }
  .sa-db-hm-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sa-db-hm dd small { grid-column: 1 / -1; }
}