/* Three opt-in topic controls; original C article index and Silver shell are shared. */
.topic-layout .kb-topic-nav{display:block;min-width:0}
.topic-layout .kb-topic-label{margin:0 0 12px;font-size:14px;line-height:1.5;font-weight:600;color:var(--kb-muted)}
.topic-layout .kb-topic-buttons{display:grid;gap:8px}
.topic-layout .kb-topic-button{appearance:none;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:48px;padding:12px 14px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--kb-ink);font-size:16px;line-height:1.5;text-align:left;white-space:normal;overflow-wrap:anywhere;transition:background-color 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out}
.topic-layout .kb-topic-button[aria-pressed="true"]{background:var(--kb-tint);border-color:#7da5d3;color:#12569f;font-weight:600}
.topic-layout .kb-topic-button:focus-visible{outline:2px solid var(--kb-accent);outline-offset:3px}
.topic-layout .kb-topic-count{font-size:13px;line-height:1.5;color:var(--kb-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.topic-layout .kb-topic-button[aria-pressed="true"] .kb-topic-count{color:#12569f}
@media(hover:hover){
  .topic-layout .kb-topic-button:hover{background:#e7edf2;border-color:#acbac7}
  .topic-layout .kb-topic-button[aria-pressed="true"]:hover{background:#deebfb;border-color:#7da5d3}
}
/* C1: a quiet vertical topic rail; no boxed panel around it. */
.topic-layout-rail .kb-layout{grid-template-columns:248px minmax(0,1fr);gap:36px}
.topic-layout-rail .kb-filters{position:static}
.topic-layout-rail .kb-topic-nav{margin-top:28px;padding-top:24px;border-top:1px solid var(--kb-line)}
.topic-layout-rail .kb-topic-buttons{gap:4px}
/* C2: categories, then a wrapping horizontal row of topic buttons. */
.topic-layout-wrap .kb-layout{display:block}
.topic-layout-wrap .kb-filters{position:static;margin-bottom:32px}
.topic-layout-wrap #kb-categories{display:flex;flex-wrap:wrap;gap:8px}
.topic-layout-wrap .kb-topic-nav{margin-top:24px}
.topic-layout-wrap .kb-topic-buttons{display:flex;flex-wrap:wrap;gap:8px}
.topic-layout-wrap .kb-topic-button{width:auto;max-width:100%;min-height:44px;padding:10px 16px;border-color:var(--kb-line);border-radius:24px;background:#fff}
.topic-layout-wrap .kb-topic-button[aria-pressed="true"]{background:var(--kb-tint);border-color:#7da5d3}
/* C3: stable two-column topic matrix beside the grouped index. */
.topic-layout-matrix .kb-layout{grid-template-columns:352px minmax(0,1fr);gap:36px}
.topic-layout-matrix .kb-filters{position:static}
.topic-layout-matrix .kb-topic-nav{margin-top:24px}
.topic-layout-matrix .kb-topic-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.topic-layout-matrix .kb-topic-button{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-height:96px;padding:16px;background:#fff;border-color:var(--kb-line)}
.topic-layout-matrix .kb-topic-button:first-child{grid-column:1/-1;flex-direction:row;align-items:center;min-height:48px}
.topic-layout-matrix .kb-topic-button[aria-pressed="true"]{background:var(--kb-tint);border-color:#7da5d3}
.topic-layout-matrix .kb-topic-group>div{grid-template-columns:1fr}
/* Preview illustrations belong only to the comparison page. */
.kb-topic-comparison .kb-compare-grid{align-items:stretch}
.kb-topic-comparison .kb-preview{display:flex;flex-direction:column}
.kb-topic-comparison .kb-preview>p{min-height:48px;line-height:1.7}
.kb-topic-comparison .kb-compare-open{margin-top:auto}
.kb-topic-sample{display:grid;gap:12px;min-height:280px;padding:16px;background:#edf1f4;margin:12px 0 24px;font-size:12px;line-height:1.5;color:#465461}
.kb-sample-topics,.kb-sample-results{display:grid;align-content:start;gap:8px;min-width:0}
.kb-sample-topics span{display:block;padding:8px;background:#fff;border:1px solid #cbd2d8;border-radius:4px;overflow-wrap:anywhere}
.kb-sample-topics span:first-child{background:#e2edfb;border-color:#7da5d3;color:#12569f}
.kb-sample-results b{padding:8px;background:#dce4eb;font-weight:600}
.kb-sample-results span{padding:8px 0;border-bottom:1px solid #cbd2d8}
.kb-sample-rail{grid-template-columns:112px minmax(0,1fr)}
.kb-sample-rail .kb-sample-topics span{border-color:transparent;background:transparent}
.kb-sample-rail .kb-sample-topics span:first-child{background:#e2edfb;border-color:#7da5d3}
.kb-sample-wrap{grid-template-rows:auto 1fr}
.kb-sample-wrap .kb-sample-topics{display:flex;flex-wrap:wrap;gap:6px}
.kb-sample-wrap .kb-sample-topics span{border-radius:20px;padding:6px 10px}
.kb-sample-matrix{grid-template-rows:auto 1fr}
.kb-sample-matrix .kb-sample-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1050px){
  .topic-layout-rail .kb-layout{grid-template-columns:224px minmax(0,1fr);gap:28px}
  .topic-layout-matrix .kb-layout{grid-template-columns:300px minmax(0,1fr);gap:28px}
}
@media(max-width:760px){
  .topic-layout .kb-layout{display:block}
  .topic-layout .kb-filters{margin-bottom:28px}
  .topic-layout .kb-topic-nav{margin-top:20px}
  .topic-layout .kb-topic-label{margin-bottom:10px}
  .topic-layout-rail .kb-topic-nav{padding-top:20px}
  .topic-layout-rail .kb-topic-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px}
  .topic-layout-rail .kb-topic-button{padding:10px 12px;border-color:var(--kb-line);background:#fff}
  .topic-layout-rail .kb-topic-button:first-child{grid-column:1/-1}
  .topic-layout-rail .kb-topic-button[aria-pressed="true"]{background:var(--kb-tint);border-color:#7da5d3}
  .topic-layout-wrap .kb-topic-button{padding:10px 12px}
  .topic-layout-matrix .kb-topic-button{min-height:84px;padding:12px;gap:8px}
  .kb-topic-comparison .kb-preview>p{min-height:0}
}
@media(prefers-reduced-motion:reduce){.topic-layout .kb-topic-button{transition:none}}