/* Strategy Tracking / HTML visual component candidate inside Equal Ice Snow shell. */
.ice-shell .buyer-topic-workspace {
  display:grid;
  grid-template-columns:clamp(190px,19vw,250px) minmax(0,1fr);
  flex:1;
  min-height:0;
  overflow:hidden;
  background:#fff;
}
.ice-shell .buyer-topic-index {
  min-width:0;
  min-height:0;
  overflow:auto;
  padding:20px 16px;
  border-right:1px solid #dbe9f6;
  background:#f5faff;
}
.buyer-topic-index-label {
  margin:2px 4px 12px;
  color:#52718b;
  font-size:12px;
  font-weight:750;
  letter-spacing:.025em;
}
.buyer-topic-item {
  display:grid;
  gap:4px;
  padding:12px 11px;
  border:1px solid #d9e9f8;
  border-radius:9px;
  background:#fff;
  color:#315777;
  text-decoration:none;
  line-height:1.45;
}
.buyer-topic-item:hover,
.buyer-topic-item[aria-current] {
  border-color:#b9d8f4;
  background:#e4f2ff;
  color:#205f99;
}
.buyer-topic-item time {
  color:#6f8ba5;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.buyer-topic-item strong { font-size:13px; font-weight:720; }
.buyer-topic-item span { color:#6a8299; font-size:11px; }
.buyer-topic-index-note {
  margin:16px 4px 0;
  color:#748ca6;
  font-size:11px;
  line-height:1.65;
}
.ice-shell .buyer-topic-reading {
  min-width:0;
  min-height:0;
  overflow:auto;
  padding:22px clamp(18px,3vw,38px) 42px;
  background:#f4f9ff;
  scrollbar-gutter:stable;
}
#buyer-topic-status {
  max-width:960px;
  margin:0 auto;
  padding:24px;
  color:#6887a4;
  font-size:13px;
}
.buyer-topic-article {
  max-width:960px;
  margin:0 auto;
  padding:34px clamp(28px,4vw,50px) 50px;
  border:1px solid #dcebf9;
  border-radius:13px;
  background:#fff;
  box-shadow:0 12px 34px rgba(53,112,169,.08);
}
.buyer-topic-header {
  padding-bottom:24px;
  border-bottom:1px solid #e2edf8;
}
.buyer-topic-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  color:#6d88a1;
  font-size:12px;
}
.buyer-topic-meta span { color:#2874bd; font-weight:700; }
.buyer-topic-meta time { font-variant-numeric:tabular-nums; }
.buyer-topic-header h1 {
  max-width:800px;
  margin:0;
  color:#1d4774;
  font-size:28px;
  font-weight:760;
  line-height:1.38;
  letter-spacing:-.018em;
}
.buyer-topic-dek {
  max-width:760px;
  margin:14px 0 0;
  padding-left:14px;
  border-left:3px solid #6caee8;
  color:#4b6d8c;
  font-size:15px;
  line-height:1.75;
}
.buyer-topic-body.markdown-body {
  max-width:820px;
  margin:0 auto;
  padding-top:8px;
  color:#273f58;
  font-size:15px;
  line-height:1.86;
}
.buyer-topic-body.markdown-body > h2 {
  margin:42px 0 17px;
  padding:0 0 10px;
  border-bottom:1px solid #dceaf7;
  color:#1d4e7d;
  font-size:21px;
  font-weight:780;
  line-height:1.45;
  letter-spacing:-.01em;
}
.buyer-topic-body.markdown-body > h3,
.buyer-topic-body.markdown-body .visual-source-copy h3 {
  margin:25px 0 10px;
  color:#2c5f8b;
  font-size:17px;
  font-weight:720;
  line-height:1.55;
}
.buyer-topic-body.markdown-body p { margin:0 0 15px; }
.buyer-topic-body.markdown-body ul,
.buyer-topic-body.markdown-body ol {
  margin:7px 0 18px;
  padding-left:1.35rem;
}
.buyer-topic-body.markdown-body li + li { margin-top:5px; }
.buyer-topic-body.markdown-body blockquote {
  margin:17px 0 20px;
  padding:11px 15px;
  border-left:3px solid #78afe0;
  border-radius:0 7px 7px 0;
  background:#f1f7fd;
  color:#355f83;
}
.buyer-topic-body.markdown-body blockquote p:last-child { margin-bottom:0; }
.buyer-topic-body.markdown-body strong { color:#234f76; }
.buyer-topic-body.markdown-body pre {
  margin:18px 0;
  padding:15px 17px;
  border:1px solid #dceaf7;
  border-radius:8px;
  background:#f3f8fd;
  color:#31546f;
  font-size:13px;
  line-height:1.7;
  white-space:pre-wrap;
}

/* Supplemental HTML illustrations: article prose stays visible and complete. */
.buyer-topic-body.markdown-body figure.strategy-illustration {
  margin:28px 0 26px;
  padding:0;
  border:1px solid #d5e6f5;
  border-radius:12px;
  background:#f8fbff;
  overflow:hidden;
  box-shadow:0 7px 20px rgba(54,107,157,.055);
}
.strategy-illustration-caption {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px 13px;
  border-bottom:1px solid #dce9f6;
  background:linear-gradient(110deg,#eef7ff,#f9fcff);
  text-align:left;
}
.strategy-illustration-label {
  flex:0 0 auto;
  padding:3px 7px;
  border-radius:6px;
  background:#dceeff;
  color:#2874bd;
  font-size:10px;
  font-weight:800;
  line-height:1.6;
  letter-spacing:.06em;
}
.strategy-illustration-caption-copy { min-width:0; }
.strategy-illustration-caption-copy strong {
  display:block;
  color:#244f76;
  font-size:14px;
  line-height:1.5;
}
.strategy-illustration-caption-copy p {
  margin:3px 0 0 !important;
  color:#71899f;
  font-size:11.5px;
  line-height:1.55;
}
.strategy-illustration-body { padding:15px; }
.logic-visual-grid,
.scenario-visual-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.logic-visual-card,
.scenario-visual-card {
  min-width:0;
  padding:17px 15px 15px;
  border:1px solid #dce9f6;
  border-top:3px solid #7eafd9;
  border-radius:10px;
  background:linear-gradient(180deg,#f9fcff,#f3f8fd);
  box-shadow:0 5px 15px rgba(54,107,157,.055);
}
.logic-visual-card.tone-quality { border-top-color:#4d95d1; }
.logic-visual-card.tone-cycle { border-top-color:#8a9fb4; }
.logic-visual-card.tone-capital { border-top-color:#5b83ad; }
.scenario-visual-card.tone-base { border-top-color:#739bc0; }
.scenario-visual-card.tone-improve { border-top-color:#5aa483; }
.scenario-visual-card.tone-weaken { border-top-color:#c18b76; }
.visual-card-head {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
}
.visual-card-head h4 {
  margin:0;
  color:#244f76;
  font-size:16px;
  font-weight:720;
  line-height:1.48;
}
.visual-card-index {
  flex:0 0 auto;
  min-width:27px;
  padding:2px 5px;
  border-radius:6px;
  background:#e5f1fc;
  color:#2d75b5;
  font-size:11px;
  font-weight:800;
  line-height:1.6;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.visual-field {
  padding:10px 0;
  border-top:1px solid #e2edf7;
}
.visual-field:first-of-type { border-top:0; }
.visual-field-label {
  display:block;
  margin-bottom:4px;
  color:#6d87a0;
  font-size:11px;
  font-weight:760;
  letter-spacing:.035em;
}
.visual-field p {
  margin:0 !important;
  color:#35536e;
  font-size:13px;
  line-height:1.68;
}
.visual-field-boundary p,
.visual-field-adjustment p { color:#244f76; font-weight:650; }
.visual-source-details {
  margin:12px 0 20px;
  border:1px solid #dce9f6;
  border-radius:8px;
  background:#fbfdff;
}
.visual-source-details summary {
  padding:10px 13px;
  color:#4f718f;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  user-select:none;
}
.visual-source-details[open] summary { border-bottom:1px solid #e4eef8; }
.visual-source-copy { padding:14px 16px 5px; }
.visual-source-copy h3:first-child { margin-top:0; }

/* Tracking signal component replaces the wide table. */
.tracking-visual-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:18px 0 20px;
}
.tracking-visual-card {
  min-width:0;
  padding:16px;
  border:1px solid #dce9f6;
  border-radius:10px;
  background:#f9fcff;
}
.tracking-visual-card:last-child:nth-child(odd) { grid-column:1 / -1; }
.tracking-visual-head {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-bottom:12px;
}
.tracking-visual-head h4 {
  margin:0;
  color:#244f76;
  font-size:15px;
  font-weight:720;
  line-height:1.5;
}
.tracking-signal-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.tracking-signal {
  min-width:0;
  padding:11px 12px;
  border-radius:8px;
}
.tracking-signal span {
  display:block;
  margin-bottom:5px;
  font-size:11px;
  font-weight:800;
}
.tracking-signal p {
  margin:0 !important;
  color:#3b5871;
  font-size:12.5px;
  line-height:1.65;
}
.tracking-support { background:#edf8f3; border:1px solid #d4ebdf; }
.tracking-support span { color:#39785c; }
.tracking-weaken { background:#fcf3ef; border:1px solid #eedfd7; }
.tracking-weaken span { color:#9a614d; }

/* Fallback table and stable image pipeline. */
.buyer-topic-body.markdown-body table {
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  font-size:13px;
  line-height:1.55;
}
.buyer-topic-body.markdown-body table th {
  background:#edf6ff;
  color:#2c5678;
  font-weight:700;
}
.buyer-topic-body.markdown-body table th,
.buyer-topic-body.markdown-body table td {
  padding:10px 11px;
  border:1px solid #dce9f6;
  vertical-align:top;
}
.buyer-topic-body.markdown-body figure {
  margin:24px 0 26px;
  padding:10px;
  border:1px solid #dce9f6;
  border-radius:10px;
  background:#f8fbff;
}
.buyer-topic-body.markdown-body figure img {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:560px;
  object-fit:contain;
  border-radius:6px;
  background:#fff;
}
.buyer-topic-body.markdown-body figcaption {
  padding:9px 4px 1px;
  color:#71899f;
  font-size:12px;
  line-height:1.55;
  text-align:center;
}
.image-missing {
  display:block;
  margin:18px 0;
  padding:13px 15px;
  border:1px dashed #c9dceb;
  border-radius:8px;
  color:#7890a6;
  background:#f7fbff;
  font-size:12px;
}

@media (max-width:980px) {
  .logic-visual-grid,
  .scenario-visual-grid { grid-template-columns:1fr; }
  .buyer-topic-header h1 { font-size:26px; }
}
@media (max-width:760px) {
  .ice-shell .buyer-topic-workspace { display:flex; flex-direction:column; }
  .ice-shell .buyer-topic-index {
    flex:0 0 auto;
    max-height:116px;
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid #dbe9f6;
  }
  .buyer-topic-index-label { margin:0 0 7px; font-size:11px; }
  .buyer-topic-item { padding:8px 10px; gap:2px; }
  .buyer-topic-index-note { display:none; }
  .ice-shell .buyer-topic-reading { flex:1; padding:12px 10px 28px; }
  .buyer-topic-article {
    padding:24px 18px 34px;
    border-radius:10px;
    box-shadow:none;
  }
  .buyer-topic-header { padding-bottom:21px; }
  .buyer-topic-header h1 { font-size:23px; line-height:1.42; }
  .buyer-topic-dek { font-size:14px; }
  .buyer-topic-body.markdown-body { font-size:15px; line-height:1.82; }
  .buyer-topic-body.markdown-body > h2 { margin-top:33px; font-size:20px; }
  .buyer-topic-body.markdown-body > h3,
  .buyer-topic-body.markdown-body .visual-source-copy h3 { margin-top:22px; font-size:16px; }
  .tracking-visual-grid { grid-template-columns:1fr; }
  .tracking-visual-card:last-child:nth-child(odd) { grid-column:auto; }
  .tracking-signal-pair { grid-template-columns:1fr; }
  .visual-source-copy { padding:12px 13px 3px; }
}
@media (max-width:420px) {
  .buyer-topic-meta { align-items:flex-start; flex-direction:column; gap:2px; }
  .logic-visual-card,
  .scenario-visual-card,
  .tracking-visual-card { padding:14px 13px; }
}


/* v0.3 fixed diagram-image flow: full article remains visible; diagrams are added after sections. */
.buyer-topic-body.markdown-body figure.strategy-diagram {
  margin:30px 0 34px;
  padding:0;
  overflow:hidden;
  border:1px solid #cfe2f4;
  border-radius:14px;
  background:#f7fbff;
  box-shadow:0 9px 24px rgba(54,107,157,.075);
}
.strategy-diagram-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid #dce9f6;
  background:linear-gradient(110deg,#edf7ff,#fbfdff);
}
.strategy-diagram-toolbar span:first-child {
  color:#2874bd;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
}
.strategy-diagram-toolbar span:last-child {
  color:#7890a6;
  font-size:11px;
}
.strategy-diagram-button {
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:#eaf5ff;
  cursor:zoom-in;
}
.strategy-diagram-button:focus-visible {
  outline:3px solid #5ca7ed;
  outline-offset:-3px;
}
.strategy-diagram-button img {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  background:#edf7ff;
}
.strategy-diagram figcaption {
  display:grid;
  gap:3px;
  padding:11px 14px 13px;
  border-top:1px solid #dce9f6;
  background:#fff;
  text-align:left;
}
.strategy-diagram figcaption strong {
  color:#244f76;
  font-size:13px;
  line-height:1.5;
}
.strategy-diagram figcaption span {
  color:#71899f;
  font-size:11.5px;
  line-height:1.55;
}
.strategy-diagram.is-missing .strategy-diagram-button {
  padding:18px;
  color:#7890a6;
  font-size:12px;
  cursor:default;
}
.buyer-diagram-lightbox {
  width:min(96vw,1320px);
  max-width:1320px;
  max-height:96vh;
  margin:auto;
  padding:44px 18px 16px;
  border:1px solid #cfe2f4;
  border-radius:14px;
  background:#eef7ff;
  box-shadow:0 25px 80px rgba(20,59,95,.28);
}
.buyer-diagram-lightbox::backdrop {
  background:rgba(16,43,70,.74);
  backdrop-filter:blur(4px);
}
.buyer-diagram-lightbox img {
  display:block;
  width:100%;
  max-height:80vh;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
}
.buyer-diagram-lightbox p {
  margin:10px 0 0;
  color:#365e80;
  font-size:13px;
  text-align:center;
}
.buyer-diagram-close {
  position:absolute;
  top:8px;
  right:10px;
  width:32px;
  height:32px;
  border:1px solid #bdd7ed;
  border-radius:50%;
  background:#fff;
  color:#315f88;
  font-size:24px;
  line-height:28px;
  cursor:pointer;
}
@media(max-width:760px) {
  .buyer-topic-body.markdown-body figure.strategy-diagram { margin:24px 0 28px; border-radius:10px; }
  .strategy-diagram-toolbar { padding:8px 10px; }
  .strategy-diagram-toolbar span:last-child { display:none; }
  .strategy-diagram figcaption { padding:9px 10px 11px; }
  .buyer-diagram-lightbox { width:98vw; max-height:96vh; padding:40px 8px 10px; border-radius:10px; }
  .buyer-diagram-lightbox img { max-height:84vh; }
}

/* Strategy tracking reuses the shared date board layout. */
.ice-shell .buyer-topic-workspace.date-board{display:grid;grid-template-columns:clamp(190px,19vw,250px) minmax(0,1fr);}
@media(max-width:760px){.ice-shell .buyer-topic-workspace.date-board{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);}}