/* article365.css — Blog 365 long-form article system (Network365)
   Pairs with assets/article365.js (lang toggle, scroll reveal, reading bar, TOC).
   Builds on assets/n365.css for the colour palette + .wrap/.btn/.sect globals. */

/* ============================ language toggle ============================ */
.lang-en { display: none; }
html[data-lang="en"] .lang-en { display: revert; }
html[data-lang="en"] .lang-th { display: none; }

/* ============================ reading progress ========================== */
.read-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), #ffb968);
  z-index: 200; transition: width .12s linear; will-change: width;
}

/* ============================ scroll reveal ============================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ================================ hero ================================== */
.art-hero { position: relative; overflow: hidden; padding: 54px 0 46px; isolation: isolate; }
.art-hero .bg { position: absolute; inset: 0; background-size: cover; background-position: right center; opacity: .34; z-index: -3; }
.art-hero .veil { position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, var(--bg-dark) 12%, rgba(10,14,20,.55) 50%, transparent 100%),
    linear-gradient(180deg, rgba(10,14,20,.55) 0%, rgba(10,14,20,.80) 62%, var(--bg-dark) 100%); }
.art-hero .grid-mask { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255,138,30,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,138,30,.05) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(80% 75% at 30% 0%, #000, transparent 80%); }
.art-hero .inner { max-width: 1180px; }  /* full wrap → hero title flush-left, aligned with the body */

.crumbs { font-family: var(--mono); font-size: 12px; color: var(--text-secondary); margin-bottom: 20px; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 8px; opacity: .5; }

.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; }
.pill svg { width: 14px; height: 14px; fill: var(--accent); }

.art-hero h1 { font-size: clamp(1.8rem, 3.7vw, 2.7rem); line-height: 1.16; letter-spacing: -.02em;
  margin: 18px 0 14px; max-width: 18ch;
  color: var(--text-primary);
  background: linear-gradient(122deg, #ffffff 30%, #ffe2c0 60%, #ff9c44 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.art-hero h1 .lang-th, .art-hero h1 .lang-en { -webkit-text-fill-color: transparent; }
.art-hero h1 .lang-th, .art-hero h1 .lang-en { max-width: none; }
/* Newsroom article pages: smaller hero headline (news titles run long) */
.news-art .art-hero h1 { font-size: clamp(1.4rem, 2.5vw, 1.95rem); line-height: 1.2; max-width: 26ch; }
/* Newsroom pages: smaller section headings (news content is leaner than blog) */
.news-art .art-body h2 { font-size: clamp(1.12rem, 1.7vw, 1.38rem); }
.news-art .art-body h3 { font-size: 1.05rem; }
/* Compact, equal-height Related cards — shared by news + blog365 (see base .rel-card below) */
.lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--text-secondary); line-height: 1.6; max-width: 60ch; }

.art-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px;
  font-family: var(--mono); font-size: 12.5px; color: var(--text-secondary); }
.art-meta .by { display: flex; align-items: center; gap: 11px; }
.art-meta .av { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--border); }
.art-meta .av svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.art-meta .by b { color: var(--text-primary); display: block; font-weight: 600; font-family: var(--sans); }
.art-meta .mi { display: inline-flex; align-items: center; gap: 6px; }
.art-meta .mi svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.art-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-secondary); opacity: .6; }
.art-meta .spacer { flex: 1 1 auto; }
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang-toggle button { font-family: var(--mono); font-size: 12px; color: var(--text-secondary);
  background: transparent; border: 0; padding: 6px 12px; cursor: pointer; transition: background .15s, color .15s; }
.lang-toggle button.on { background: var(--accent); color: #1a0f05; font-weight: 600; }

/* ============================ shell + body ============================= */
.art-shell { display: grid; grid-template-columns: minmax(0,1fr) 296px; gap: 50px; align-items: start;
  padding-top: 44px; padding-bottom: 30px; }
.art-body { min-width: 0; max-width: 760px; }
.art-body section { margin-top: 46px; }
.art-body h2 { position: relative; font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.25; letter-spacing: -.01em;
  margin-bottom: 18px; scroll-margin-top: 88px; padding-left: 18px; }
.art-body h2 .h-mark { position: absolute; left: 0; top: .12em; width: 5px; height: 1.05em; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), #c75e12); }
.art-body h3 { font-size: 1.18rem; margin: 26px 0 10px; letter-spacing: -.01em; }
.art-body h4 { font-size: 1.02rem; margin: 0 0 6px; }
.art-body p { color: var(--text-secondary); line-height: 1.75; margin: 0 0 16px; font-size: 1.02rem; }
.art-body p.intro { font-size: 1.18rem; line-height: 1.7; color: #d4d8e0; }
.art-body strong, .art-body b { color: var(--text-primary); font-weight: 600; }
.art-body a { color: var(--accent); }
.art-body mark { background: rgba(255,138,30,.16); color: var(--text-primary); padding: .04em .28em; border-radius: 4px; }
.art-body .kw { color: var(--accent); font-weight: 600; }
.art-body ul, .art-body ol { color: var(--text-secondary); line-height: 1.7; margin: 0 0 16px; padding-left: 1.3em; }
.art-body li { margin: 6px 0; }

/* stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 24px 0 8px; }
.stat-strip .st { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px; }
.stat-strip .st b { display: block; font-size: 1.7rem; color: var(--accent); letter-spacing: -.02em; line-height: 1; margin-bottom: 8px; }
.stat-strip .st span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }

/* figure */
.figure { margin: 30px 0; }
.figure-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; padding: 16px; }
.figure-card .fl { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; }
.figure-card .fl svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.7; }
.figure-card .dwg { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--text-secondary); }
.chart-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
figcaption { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-top: 12px; padding-left: 2px; }
figcaption b { color: var(--text-primary); }

/* capability grid */
.cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 22px 0; }
.cap { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 13px; padding: 18px; transition: border-color .2s, transform .2s; }
.cap:hover { border-color: var(--border); transform: translateY(-3px); }
.cap .ci { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--border);
  display: grid; place-items: center; margin-bottom: 12px; }
.cap .ci svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.7; }
.cap h4 { font-size: .98rem; margin-bottom: 5px; color: var(--text-primary); }
.cap p { font-size: 13px; line-height: 1.5; margin: 0; }

/* callout */
.callout { display: flex; gap: 15px; background: linear-gradient(180deg, rgba(255,138,30,.07), rgba(255,138,30,.02));
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 20px 22px; margin: 24px 0; }
.callout .ci { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft);
  display: grid; place-items: center; }
.callout .ci svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.callout .ct b { display: block; color: var(--text-primary); font-size: 1.02rem; margin-bottom: 6px; }
.callout .ct p { margin: 0; font-size: .98rem; }

/* mock console card (al-* live session + mr rows) */
.mock-card { background: #0b0f15; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 4px; }
.mock-card .mb, .mock-card .al-head { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.mock-card .d { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #2a333f; }
.mock-card .mb .t, .mock-card .al-head .t { font-family: var(--mono); font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
.mock-card .live, .mock-card .rec { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; color: var(--crit); display: inline-flex; align-items: center; gap: 5px; }
.mock-card .live::before, .mock-card .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--crit);
  animation: ra-pulse 1.4s ease-in-out infinite; }
.mock-rows, .al-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.mr, .al-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
  background: var(--bg-3); border: 1px solid var(--line); font-size: 13px; }
.mr .ic, .al-row .al-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(54,211,153,.12); }
.mr .ic svg, .al-row .al-ic svg { width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 2.2; }
.mr .nm, .al-row .al-tx { flex: 1 1 auto; color: var(--text-primary); min-width: 0; }
.al-row .al-tx small, .mr .nm small { color: var(--text-secondary); }
.mr .vl { font-family: var(--mono); color: var(--text-secondary); }
.mr .bd, .al-row .al-bd { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .05em;
  color: var(--ok); background: rgba(54,211,153,.12); border-radius: 5px; padding: 3px 7px; flex: 0 0 auto; }
.mr.warn { border-color: rgba(255,193,77,.35); }
.mr.warn .ic { background: rgba(255,193,77,.14); } .mr.warn .ic svg { stroke: var(--warn); }
.mr.warn .bd { color: var(--warn); background: rgba(255,193,77,.14); }
.al-row.deny .al-ic { background: rgba(255,90,90,.13); } .al-row.deny .al-ic svg { stroke: var(--crit); }
.al-row.deny .al-bd { color: var(--crit); background: rgba(255,90,90,.13); }
.al-row.end .al-ic svg { stroke: var(--text-secondary); }
.al-row.end .al-bd { color: var(--text-secondary); background: var(--bg-panel); }
.al-bar { height: 4px; background: var(--bg-3); } .al-bar i { display: block; height: 100%; width: 38%; background: var(--accent); }

/* live console (Room Alert style) */
.console { background: #0a0d12; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.console-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.console-title { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 13px; color: var(--text-primary); }
.console-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(54,211,153,.5); animation: ra-pulse 1.6s infinite; }
.console-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--text-secondary); }
.sensors { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); }
.sensor { background: #0b0f15; padding: 14px 14px 12px; position: relative; }
.sensor .lbl { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--text-secondary); }
.sensor .lbl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sensor .status { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.sensor.warn .status { background: var(--warn); } .sensor.crit .status { background: var(--crit); }
.sensor .val { margin: 10px 0 8px; color: var(--text-primary); font-weight: 600; }
.sensor .val .num { font-size: 1.5rem; letter-spacing: -.02em; } .sensor .val small { font-size: .8rem; color: var(--text-secondary); margin-left: 3px; }
.sensor.warn .val .num { color: var(--warn); } .sensor.crit .val .num { color: var(--crit); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.spark i { flex: 1; height: 8px; background: rgba(255,138,30,.4); border-radius: 1px; transition: height .4s ease; }
.sensor.warn .spark i { background: rgba(255,193,77,.55); } .sensor.crit .spark i { background: rgba(255,90,90,.55); }
.console-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px;
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--text-secondary); }
.console-foot .alert { display: none; align-items: center; gap: 7px; color: var(--crit); }
.console-foot .alert.show { display: inline-flex; }
.console-foot .alert svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* tick list */
.ticks { list-style: none; padding: 0; margin: 18px 0; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; margin: 11px 0; color: var(--text-secondary); line-height: 1.55; }
.ticks li svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--ok); stroke-width: 2.4;
  background: rgba(54,211,153,.12); border-radius: 6px; padding: 3px; }
.ticks li b { color: var(--text-primary); }

/* numbered steps */
.step { display: flex; gap: 15px; padding: 16px 0; border-top: 1px solid var(--line); counter-increment: step; }
.step:first-of-type { border-top: 0; }
.step .sn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--accent); font-family: var(--mono); font-weight: 600; font-size: 14px; }
.step .sn::before { content: counter(step); }
.step .sc h4 { color: var(--text-primary); margin-bottom: 4px; }
.step .sc p { margin: 0; font-size: .98rem; }
section:has(.step) { counter-reset: step; }

/* NOC device tiles */
.noc-dev { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 12px; }
.noc-dev svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.noc-dev .nm { font-family: var(--mono); font-size: 11.5px; color: var(--text-secondary); }
.noc-dev.alert { border-color: rgba(255,90,90,.4); }
.noc-dev.alert svg { stroke: var(--crit); }

/* divider + footer */
.art-divider { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.art-foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.art-foot .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.art-foot .tags .t { font-family: var(--mono); font-size: 12px; color: var(--text-secondary);
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.art-foot .share { display: flex; gap: 8px; }
.art-foot .share a { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: var(--bg-panel); border: 1px solid var(--line); color: var(--text-secondary); transition: color .18s, border-color .18s; }
.art-foot .share a:hover { color: var(--accent); border-color: var(--border); }
.art-foot .share svg { width: 17px; height: 17px; }

/* ================================ aside ================================ */
.art-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 20px; }
.toc { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 14px; }
.toc h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; }
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
.toc li { counter-increment: toc; margin: 2px 0; }
.toc a { display: flex; gap: 9px; padding: 7px 9px; border-radius: 8px; text-decoration: none; color: var(--text-secondary);
  font-size: 13.5px; line-height: 1.35; border-left: 2px solid transparent; transition: background .15s, color .15s; }
.toc a::before { content: counter(toc,decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--accent); opacity: .7; }
.toc a:hover { background: var(--bg-3); color: var(--text-primary); }
.toc a.active { color: var(--text-primary); background: var(--accent-soft); border-left-color: var(--accent); }

.aside-cta { background: linear-gradient(180deg, rgba(255,138,30,.08), rgba(255,138,30,.02));
  border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.aside-cta .ce { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.aside-cta h4 { font-size: 1.08rem; margin: 9px 0 7px; }
.aside-cta p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 14px; }
.aside-cta .btn { width: 100%; justify-content: center; }
.aside-cta .meta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.aside-cta .meta a { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); text-decoration: none; }
.aside-cta .meta a:hover { color: var(--accent); }
.aside-cta .meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ========================== related articles ========================== */
.rel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 920px; }
.rel-card { display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; text-decoration: none; transition: border-color .2s, transform .2s; }
.rel-card:hover { border-color: var(--border); transform: translateY(-4px); }
.rel-card .rt { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg,#161b23,#0d1118); display: block; overflow: hidden; }
.rel-card .rt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.rel-card:hover .rt img { transform: scale(1.05); }
.rel-card .rt .stripes { position: absolute; inset: 0; opacity: .4;
  background-image: repeating-linear-gradient(135deg, rgba(255,138,30,.08) 0 2px, transparent 2px 12px); }
.rel-card .rt .ic { position: relative; width: 46px; height: 46px; border-radius: 12px; background: rgba(10,12,17,.6);
  border: 1px solid var(--border); display: grid; place-items: center; }
.rel-card .rt .ic svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.7; }
.rel-card .rb { padding: 12px 14px 14px; }
.rel-card .rb .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--accent); margin-bottom: 5px; }
.rel-card .rb h3 { font-size: .9rem; line-height: 1.3; margin: 0; color: var(--text-primary); }

@keyframes ra-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ===================== takeaways header + numbered list ================= */
.takeaways .tk-h { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-primary); font-size: 1.05rem; margin-bottom: 14px; }
.takeaways .tk-h svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; flex: 0 0 auto; }
.takeaways ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.takeaways li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-secondary); line-height: 1.6; }
.takeaways li .n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--border); color: var(--accent); font-family: var(--mono); font-weight: 600; font-size: 12px; margin-top: 1px; }
.takeaways b { color: var(--text-primary); }

/* ============================ comparison (vs) =========================== */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare .col { background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 18px; }
.compare .col.bad { border-color: rgba(255,90,90,.28); background: linear-gradient(180deg, rgba(255,90,90,.05), transparent); }
.compare .col.good { border-color: rgba(54,211,153,.28); background: linear-gradient(180deg, rgba(54,211,153,.05), transparent); }
.compare .ch { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.compare .ch svg { width: 18px; height: 18px; fill: none; stroke-width: 2.2; flex: 0 0 auto; }
.compare .col.bad .ch svg { stroke: var(--crit); }
.compare .col.good .ch svg { stroke: var(--ok); }
.compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.compare li { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; line-height: 1.5; color: var(--text-secondary); }
.compare li svg { width: 16px; height: 16px; fill: none; stroke-width: 2.2; flex: 0 0 auto; margin-top: 2px; }
.compare .col.bad li svg { stroke: var(--crit); }
.compare .col.good li svg { stroke: var(--ok); }

/* ========================== standards/compliance chips ================== */
.std-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.std-chips .c { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--text-secondary);
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; }
.std-chips .c svg { stroke: var(--accent); flex: 0 0 auto; }

/* ============================== step list ============================== */
.steps { counter-reset: step; margin: 18px 0; }

/* ============================ NOC dashboard ============================ */
.noc { background: #0b0f15; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.noc-bar { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.noc-bar .dots { display: inline-flex; gap: 6px; }
.noc-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a333f; }
.noc-bar .ttl { font-family: var(--mono); font-size: 12px; color: var(--text-secondary); }
.noc-bar .badges { margin-left: auto; display: inline-flex; gap: 6px; }
.noc .bd { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; color: #0a0d12; }
.noc .bd.dn { background: var(--crit); } .noc .bd.wn { background: var(--warn); }
.noc .bd.up { background: var(--ok); } .noc .bd.ps { background: var(--info); }
.noc-body { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.noc-col { background: #0b0f15; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.noc-col h5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 2px; }
.noc-spark .lab { font-family: var(--mono); font-size: 10px; color: var(--text-secondary); margin-bottom: 4px; }
.noc-spark svg { width: 100%; height: 30px; display: block; }
.noc-spark .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 160; stroke-dashoffset: 160; animation: nocDraw 1.8s ease forwards; }
@keyframes nocDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .noc-spark .ln { animation: none; stroke-dashoffset: 0; } }
.noc-tile { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-primary);
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; }
.noc-tile small { font-family: var(--mono); font-size: 10px; color: var(--ok); }
.noc-tile.ok { border-color: rgba(54,211,153,.22); }
.noc-sun { display: grid; place-items: center; padding: 6px 0; }
.noc-sun svg { width: 96px; height: 96px; }
.noc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.noc-grid2 .noc-dev { padding: 10px 8px; gap: 5px; }
.noc-dev .st { font-family: var(--mono); font-size: 10px; color: var(--text-secondary); }
.noc-dev .st .g { color: var(--ok); } .noc-dev .st .y { color: var(--warn); } .noc-dev .st .r { color: var(--crit); }
.noc-gauges { display: flex; gap: 10px; }
.noc-g { flex: 1; text-align: center; }
.noc-g svg { width: 58px; height: 58px; }
.noc-g .lab { font-family: var(--mono); font-size: 9.5px; color: var(--text-secondary); margin-top: 2px; }
.noc-svc { display: flex; flex-direction: column; gap: 7px; }
.noc-svc .row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
.noc-svc .row .d { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-secondary); }
.noc-svc .row .d.g { background: var(--ok); } .noc-svc .row .d.y { background: var(--warn); } .noc-svc .row .d.r { background: var(--crit); }
.noc-svc .row .nm { flex: 1; min-width: 0; color: var(--text-primary); display: flex; flex-direction: column; }
.noc-svc .row .nm small { font-family: var(--mono); font-size: 9.5px; color: var(--text-secondary); }
.noc-svc .row .v { font-family: var(--mono); font-size: 11px; color: var(--ok); }
.blink { animation: nocBlink 1.2s ease-in-out infinite; }
@keyframes nocBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================== responsive ============================= */
@media (max-width: 960px) {
  .art-shell { grid-template-columns: 1fr; gap: 30px; }
  .art-aside { position: static; }
  .toc { display: none; }
  .art-body { max-width: none; }
}
@media (max-width: 680px) {
  .stat-strip, .cap-grid, .sensors, .rel-grid { grid-template-columns: 1fr 1fr; }
  .compare, .noc-body { grid-template-columns: 1fr; }
  .art-meta .spacer { display: none; }
}
@media (max-width: 480px) {
  .stat-strip, .cap-grid, .rel-grid { grid-template-columns: 1fr; }
  .callout { flex-direction: column; gap: 10px; }
}