/* article-visuals.css — tables, flowcharts, decision trees, checklists,
   timelines and stat callouts for blog articles. Inherits --accent per page. */

.sm-fig { margin: 56px 0 !important; font-family: var(--sans, 'Inter', system-ui, sans-serif); }
.sm-fig-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; font-weight: 500; }
.sm-fig-note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mid); margin-top: 14px; line-height: 1.7; }

/* ---------- table ---------- */
.sm-table-wrap { border: 2px solid var(--ink); border-radius: 18px; overflow-x: auto; overflow-y: hidden; background: #0a0a0a; -webkit-overflow-scrolling: touch; max-width: 100%; }
.sm-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sm-table-wrap .sm-table { min-width: 520px; }
.sm-table th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; text-align: left; padding: 16px 18px; background: var(--accent); color: var(--accent-text); font-weight: 500; }
.sm-table td { padding: 15px 18px; border-top: 1px solid var(--line); color: var(--ink-soft); line-height: 1.5; vertical-align: top; }
.sm-table tr td:first-child { color: var(--ink); font-weight: 500; }
.sm-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.sm-table .num { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; }
.sm-table .yes { color: var(--accent); font-weight: 700; }
.sm-table .no { color: var(--ink-mid); }

/* ---------- process flow ---------- */
.sm-flow { display: flex; flex-direction: column; gap: 0; }
.sm-flow-step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; align-items: start; }
.sm-flow-step .fs-num { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--accent); background: #000; }
.sm-flow-step .fs-body { padding-bottom: 6px; }
.sm-flow-step .fs-h { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.2; }
.sm-flow-step .fs-p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.sm-flow-arrow { margin: 6px 0 6px 26px; width: 2px; height: 28px; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb),0.15)); }

/* ---------- decision tree ---------- */
.sm-tree { border: 2px solid var(--ink); border-radius: 18px; padding: 28px 26px; background: #0a0a0a; }
.sm-tree-q { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 20px; }
.sm-branches { display: grid; gap: 14px; }
.sm-branch { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--line); background: #000; }
.sm-branch .br-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-text); white-space: nowrap; font-weight: 500; }
.sm-branch .br-out { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.sm-branch .br-out strong { color: var(--ink); font-weight: 600; }
.sm-branch.is-muted .br-tag { background: transparent; border: 1.5px solid var(--line); color: var(--ink-mid); }

/* ---------- checklist ---------- */
.sm-check { border: 2px dashed rgba(var(--accent-rgb),0.4); border-radius: 18px; padding: 26px 28px; background: rgba(var(--accent-rgb),0.05); display: grid; gap: 12px; }
.sm-check-item { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.sm-check-item .ck { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--accent); display: grid; place-items: center; font-size: 12px; color: var(--accent); font-weight: 700; }
.sm-check-item strong { color: var(--ink); font-weight: 600; }

/* ---------- timeline ---------- */
.sm-time { display: grid; gap: 0; border-left: 2px solid var(--line); padding-left: 0; }
.sm-time-row { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 20px 0 20px 24px; border-bottom: 1px dashed var(--line); position: relative; }
.sm-time-row:last-child { border-bottom: none; }
.sm-time-row::before { content: ''; position: absolute; left: -7px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.sm-time-row .tr-when { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.sm-time-row .tr-h { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.sm-time-row .tr-p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- stat callouts ---------- */
.sm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; }
.sm-stat { background: #0a0a0a; padding: 26px 22px; }
.sm-stat .st-n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-mid); margin-bottom: 14px; }
.sm-stat .st-v { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
.sm-stat .st-l { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin-top: 12px; }

@media (max-width: 700px) {
  .sm-stats { grid-template-columns: 1fr; }
  .sm-time-row { grid-template-columns: 1fr; gap: 8px; }
  .sm-table { font-size: 14px; }
  .sm-table th, .sm-table td { padding: 12px 13px; }
  .sm-fig { overflow-x: auto; }
}


/* ===== OVERFLOW GUARDS ===== */
.sm-fig, .sm-fig > *, .sm-flow, .sm-branch, .sm-check, .sm-time, .sm-stats { max-width: 100%; }
@media (max-width: 600px) {
  .sm-fig { padding: 20px 16px; }
  .sm-flow, .sm-branch { grid-template-columns: 1fr !important; }
  .sm-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .sm-time-row, .sm-check-row { grid-template-columns: auto 1fr !important; gap: 12px !important; }
}