/* Article tables and independent algorithm players. No global theme overrides. */
.post-article-content table thead th,
.post-content:has(.algorithm-demo) table th,
.post-content:has(link[href="/css/data-algorithms.css"]) table th,
.article-entry:has(link[href="/css/data-algorithms.css"]) table th {
  color: #f7fbff !important;
  background: #23394f !important;
  text-shadow: none !important;
}
.algorithm-demo {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 1.6rem 0;
  padding: 1.1rem;
  color: #183044;
  background: #f6f9fc;
  border: 1px solid #c5d4e2;
  border-radius: 12px;
  overflow: hidden;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.algorithm-demo *, .algorithm-demo *::before, .algorithm-demo *::after { box-sizing: border-box; }
.algorithm-demo .algorithm-demo-title {
  margin: 0 0 1rem;
  padding: 0;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #183044;
}
.algorithm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.algorithm-controls button {
  width: auto;
  flex: 0 0 auto;
  padding: .5rem .85rem;
  min-height: 40px;
  border: 1px solid #829ab0;
  border-radius: 7px;
  color: #173f64;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  line-height: 1.3;
  box-shadow: none;
}
.algorithm-controls button:hover:not(:disabled) { background: #e3eff9; border-color: #376a96; }
.algorithm-controls button:focus-visible { outline: 3px solid #ad6717; outline-offset: 2px; }
.algorithm-controls button:disabled { opacity: .48; cursor: default; }
.algorithm-progress { color: #4c647a; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.algorithm-stage { min-width: 0; width: 100%; max-width: 100%; }
.algorithm-cells, .algorithm-linked-nodes {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  max-width: 100%;
  padding: .45rem .15rem .8rem;
  scrollbar-width: thin;
}
.algorithm-cell, .algorithm-node {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  border: 2px solid #a4b6c6;
  border-radius: 8px;
  padding: .5rem .35rem;
  background: #fff;
}
.algorithm-node { flex-basis: 124px; }
.algorithm-index { font-size: .74rem; line-height: 1.3; color: #526779; white-space: nowrap; }
.algorithm-value { font-size: 1.35rem; line-height: 1.25; color: #12334f; font-variant-numeric: tabular-nums; }
.algorithm-cell-note { min-height: 1em; font-size: .7rem; color: #4d5d6b; white-space: nowrap; }
.algorithm-next { font-family: ui-monospace, monospace; font-size: .77rem; white-space: nowrap; }
.algorithm-cell.is-range { background: #e2f0fd; border-color: #598cbb; }
.algorithm-cell.is-sorted, .algorithm-cell.is-final { background: #e4f2e9; border-color: #4d8661; }
.algorithm-cell.is-source { background: #e2f0fd; border-color: #3674aa; }
.algorithm-cell.is-hole { border-style: dashed; background: #f0f3f6; }
.algorithm-cell.is-active, .algorithm-node.is-active { border-color: #b56822; background: #fff0d9; }
.algorithm-meta { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin: .65rem 0; min-width: 0; }
.algorithm-field { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; font-size: .9rem; }
.algorithm-field-label { color: #5c7182; }
.algorithm-field strong { color: #1b3b55; overflow-wrap: anywhere; }
.algorithm-demo p { margin: .7rem 0; color: #2a4155; line-height: 1.7; }
.algorithm-demo .algorithm-caption { padding: .7rem .85rem; background: #e9f0f7; border-left: 3px solid #587d9b; }
.algorithm-demo .algorithm-legend, .algorithm-demo .algorithm-motion-note { font-size: .83rem; color: #526779; }
.algorithm-demo .algorithm-path { font-size: .86rem; overflow-wrap: anywhere; }
.algorithm-graph { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.algorithm-graph-node circle { stroke: #7b91a4; stroke-width: 2; fill: #edf1f5; }
.algorithm-graph-node text { font-size: 19px; font-weight: 650; fill: #193850; }
.algorithm-graph-node .algorithm-distance { font-size: 13px; font-weight: 400; fill: #506a80; }
.algorithm-graph-node.is-queued circle { fill: #dcecff; stroke: #467cad; }
.algorithm-graph-node.is-active circle { fill: #ffe7c5; stroke: #b46b24; }
.algorithm-graph-node.is-finished circle { fill: #dcefe0; stroke: #4c825c; }
@media (max-width: 520px) {
  /* Keep diagram labels readable; only the figure can scroll, not the page. */
  .post-article-content p:has(> img[src*="/data_algorithms/"]) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .post-article-content p:has(> img[src*="/data_algorithms/"])::before {
    content: "图较宽，可左右滑动查看";
    display: block;
    position: sticky;
    left: 0;
    width: max-content;
    font-size: .78rem;
    color: #526779;
    margin-bottom: .4rem;
  }
  .post-article-content p > img[src*="/data_algorithms/"] {
    width: 640px;
    min-width: 640px;
    max-width: none;
    height: auto;
  }
  .algorithm-demo { padding: .8rem .65rem; border-radius: 8px; }
  .algorithm-controls { gap: .4rem; }
  .algorithm-controls button { padding: .45rem .6rem; }
  .algorithm-progress { flex-basis: 100%; text-align: right; }
  .algorithm-cell { flex-basis: 64px; }
  .algorithm-demo .algorithm-caption { padding: .6rem; font-size: .93rem; }
}
@media (prefers-reduced-motion: reduce) {
  .algorithm-demo *, .algorithm-demo *::before, .algorithm-demo *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 600px) {
  .post-article-content > table { display: block; max-width: 100%; overflow-x: auto; }
  .post-article-content > table th, .post-article-content > table td { min-width: 9rem; }
  .post-article-content > table::before { content: '表格可左右滑动查看'; display: block; width: max-content; position: sticky; left: 0; font-size: .8rem; color: #526779; margin: .3rem 0; }
}