/* Native, article-specific editorial compositions. All labels remain browser text. */
.feed-visual {
  --visual-ink: #3f0652;
  --visual-accent: #890089;
  --visual-muted: #80628e;
  --visual-rule: #d9c8e5;
  --visual-surface: #f0e7f8;
  --visual-highlight: #e1c8f0;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  container-type: inline-size;
  padding: clamp(16px, 5.4%, 28px);
  background: var(--visual-surface);
  color: var(--visual-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  isolation: isolate;
}
.feed-visual * { box-sizing: inherit; }
.visual-tone-1 { --visual-surface:#e8edf8; --visual-highlight:#d2dbef; --visual-rule:#c7cfe1; --visual-accent:#514286; }
.visual-tone-2 { --visual-surface:#f8e8f0; --visual-highlight:#efcbe0; --visual-rule:#e5c6d7; --visual-accent:#9d337a; }
.visual-tone-3 { --visual-surface:#f3efe9; --visual-highlight:#e3d7ef; --visual-rule:#dbd0df; --visual-accent:#705081; }
.visual-label {
  position: relative;
  z-index: 1;
  max-width: 100%;
  font-size: clamp(11px, 3.6cqw, 16px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.025em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.visual-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin-top: clamp(12px, 3.4cqw, 20px);
  font-size: clamp(10px, 3.2cqw, 15px);
}
.feed-visual p { margin: 0; color: inherit; }
.feed-visual b,.feed-visual strong { font-weight: 500; }
.feed-visual ol { margin: 0; padding: 0; list-style: none; }
.visual-comparison { width:100%; }
.visual-operands { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.visual-operand {
  min-width:0;
  min-height:82px;
  padding:14px;
  background:#fff;
  border-top:2px solid var(--visual-accent);
}
.visual-operand:last-child { background:var(--visual-ink); color:#fff; border-color:var(--visual-highlight); }
.visual-operand-index { display:block; font-size:.76em; opacity:.62; margin-bottom:12px; }
.visual-operand-name { display:block; font-size:1.12em; line-height:1.22; letter-spacing:-.025em; overflow-wrap:anywhere; }
.visual-decisions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; }
.visual-decisions>span { min-width:0; font-size:.82em; line-height:1.35; padding-top:9px; border-top:1px solid var(--visual-rule); }
.visual-calculator { width:100%; text-align:center; }
.visual-formula { font-size:1.2em; letter-spacing:.04em; color:var(--visual-accent); }
.visual-result { display:flex; align-items:baseline; justify-content:center; gap:8px; margin:3px 0 10px; }
.visual-result>strong { font-size:clamp(38px,13cqw,70px); line-height:1; letter-spacing:-.07em; }
.visual-result>span { font-size:1.08em; }
.visual-terms { display:flex; justify-content:center; gap:20px; }
.visual-term { flex:1; min-width:0; max-width:125px; padding-top:8px; border-top:1px solid var(--visual-rule); }
.visual-term>b { display:block; font-size:1.08em; }
.visual-term>span { display:block; margin-top:2px; font-size:.73em; line-height:1.25; color:var(--visual-muted); }
.visual-calculator .visual-caption { margin-top:9px; font-size:.74em; color:var(--visual-muted); }
.visual-table { border-collapse:collapse; width:100%; table-layout:fixed; font-size:.88em; line-height:1.3; }
.visual-table th,.visual-table td { text-align:left; vertical-align:top; padding:9px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-bottom:1px solid var(--visual-rule); }
.visual-table thead th { font-size:.88em; font-weight:500; color:var(--visual-accent); background:rgba(255,255,255,.48); }
.visual-table tbody th { font-weight:500; }
.visual-table tbody td { color:#755a81; }
.visual-timeline { width:100%; display:grid; gap:8px; }
.visual-timeline>li { display:flex; align-items:center; gap:13px; min-width:0; position:relative; }
.visual-step-index { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; border:1px solid var(--visual-rule); border-radius:50%; font-size:.76em; color:var(--visual-accent); background:#fff; position:relative; }
.visual-timeline>li:not(:last-child) .visual-step-index::after { content:""; position:absolute; top:25px; left:11px; height:10px; width:1px; background:var(--visual-rule); }
.visual-timeline>li>span:last-child { line-height:1.25; font-size:.96em; }
.visual-network { width:100%; height:100%; min-height:110px; display:grid; grid-template-columns:1fr 1.05fr 1fr; grid-template-rows:1fr 1fr 1fr; gap:4px; align-items:center; position:relative; }
.visual-network::before { content:""; position:absolute; z-index:-1; inset:13% 14%; background:linear-gradient(29deg,transparent calc(50% - .5px),var(--visual-rule) 50%,transparent calc(50% + .5px)),linear-gradient(-29deg,transparent calc(50% - .5px),var(--visual-rule) 50%,transparent calc(50% + .5px)); }
.visual-network-center { grid-column:2; grid-row:2; align-self:center; justify-self:center; display:grid; place-items:center; width:clamp(62px,20cqw,100px); min-height:62px; aspect-ratio:1; padding:10px; border-radius:50%; background:var(--visual-ink); color:#fff; text-align:center; font-size:.76em; line-height:1.25; overflow:hidden; }
.visual-node { justify-self:center; max-width:100%; min-width:0; padding:8px 10px; background:#fff; border:1px solid var(--visual-rule); border-radius:3px; text-align:center; font-size:.8em; line-height:1.2; }
.visual-node-0 { grid-column:1; grid-row:1; }
.visual-node-1 { grid-column:3; grid-row:1; }
.visual-node-2 { grid-column:1; grid-row:3; }
.visual-node-3 { grid-column:3; grid-row:3; }
.visual-checklist { width:100%; background:#fff; padding:7px 15px!important; }
.visual-checklist>li { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--visual-rule); }
.visual-checklist>li:last-child { border-bottom:0; }
.visual-check-box { display:block; width:13px; height:13px; flex-shrink:0; border:1px solid var(--visual-accent); border-radius:2px; }
.visual-checklist>li>span { font-size:.96em; line-height:1.25; }
.visual-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; align-items:stretch; }
.visual-board-column { min-width:0; padding-top:7px; border-top:2px solid var(--visual-accent); }
.visual-board-heading { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; font-size:.76em; line-height:1.3; margin-bottom:8px; }
.visual-board-card { min-height:93px; padding:11px 9px; background:#fff; }
.visual-board-card>b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.82em; line-height:1.3; }
.visual-board-card>span { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:.72em; line-height:1.35; color:var(--visual-muted); margin-top:10px; }
.visual-documents { position:relative; width:100%; height:100%; min-height:125px; }
.visual-paper { position:absolute; inset:4px auto auto 20%; width:68%; min-height:132px; padding:15px; border:1px solid var(--visual-rule); background:#fff; transform-origin:50% 85%; }
.visual-paper-0 { transform:rotate(-8deg) translate(-17px,-1px); background:var(--visual-highlight); }
.visual-paper-1 { transform:rotate(2deg) translate(10px,1px); }
.visual-paper-2 { transform:rotate(7deg) translate(0,7px); }
.visual-paper-index { display:block; font-size:.7em; color:var(--visual-accent); margin-bottom:10px; }
.visual-paper>b { display:block; font-size:1em; line-height:1.25; }
.visual-paper>span:not(.visual-paper-index) { display:block; font-size:.76em; color:var(--visual-muted); line-height:1.3; margin-top:9px; }
.visual-paper-rule { display:block; width:70%; height:1px; background:var(--visual-rule); margin-top:15px; }
.feed-row-image:focus-visible { outline:2px solid var(--visual-accent,#890089); outline-offset:4px; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .visual-operand,.visual-board-card,.visual-paper { transition:border-color .18s ease,background-color .18s ease; }
  .feed-row:hover .visual-operand:first-child,.feed-row:hover .visual-board-card { border-color:var(--visual-accent); background:#fff; }
}
@container(max-width:300px) {
  .visual-content { font-size:10px; margin-top:10px; }
  .visual-operand { min-height:68px; padding:10px; }
  .visual-operand-index { margin-bottom:8px; }
  .visual-decisions { gap:6px; margin-top:8px; }
  .visual-timeline { gap:5px; }
  .visual-step-index { width:22px; height:22px; }
  .visual-timeline>li:not(:last-child) .visual-step-index::after { top:21px; left:9px; height:8px; }
  .visual-checklist { padding:4px 11px!important; }
  .visual-checklist>li { padding:8px 0; }
  .visual-table th,.visual-table td { padding:6px; }
  .visual-board-card { min-height:75px; padding:8px; }
  .visual-paper { min-height:110px; padding:11px; }
  .visual-paper-index { margin-bottom:7px; }
  .visual-terms { gap:10px; }
  .visual-result { margin-bottom:7px; }
  .visual-calculator .visual-caption { margin-top:7px; }
}
@media(prefers-reduced-motion:reduce) {
  .feed-visual * { transition:none!important; animation:none!important; }
}
