/* ============================================================
   DaaS-IoT — documentation article layer
   Prose, code blocks and native flow diagrams for /support articles.
   Depends on the tokens defined in daasiot.css.
   ============================================================ */

/* ---- Article shell ---- */
.doc-wrap { max-width: 860px; margin: 0 auto; padding: 44px 28px 80px; width: 100%; }

.doc-lede { font-size: 1.05rem; color: var(--daas-fg-on-dark-muted); max-width: 680px; line-height: 1.6; margin: 0; }

.doc-crumb { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--daas-fg-on-dark-subtle); margin: 0 0 14px; }
.doc-crumb a { color: var(--daas-fg-on-dark-muted); }
.doc-crumb a:hover { color: #fff; }

/* ---- Prose ---- */
.doc-prose { color: var(--daas-fg-on-dark-muted); font-size: 1rem; line-height: 1.75; }
.doc-prose > p { margin: 0 0 20px; }
.doc-prose > p:last-child { margin-bottom: 0; }
.doc-prose h2 {
  font-size: 1.35rem; font-weight: var(--daas-font-weight-black); color: #fff;
  letter-spacing: -.02em; line-height: 1.3; margin: 46px 0 16px; padding-top: 22px;
  border-top: 1px solid var(--daas-border-on-dark);
}
.doc-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-prose h3 { font-size: 1.05rem; font-weight: var(--daas-font-weight-bold); color: #fff; margin: 30px 0 12px; }
.doc-prose strong { color: rgba(255, 255, 255, .9); font-weight: var(--daas-font-weight-bold); }
.doc-prose em { color: rgba(255, 255, 255, .74); }
.doc-prose a { color: var(--daas-accent-red-hover); border-bottom: 1px solid rgba(232, 64, 96, .32); }
.doc-prose a:hover { border-bottom-color: rgba(232, 64, 96, .7); }
.doc-prose ul, .doc-prose ol { margin: 0 0 22px; padding-left: 22px; }
.doc-prose li { margin: 0 0 9px; }
.doc-prose li::marker { color: var(--daas-accent-red); }
.doc-prose :not(pre) > code {
  background: rgba(26, 86, 219, .15);
  border: 1px solid rgba(26, 86, 219, .24);
  border-radius: 5px;
  padding: .1em .4em;
  font-size: .86em;
  color: #b9ccff;
  white-space: nowrap;
}

/* ---- Table ---- */
.doc-table { margin: 0 0 26px; overflow-x: auto; }
.doc-table table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .92rem; }
.doc-table th {
  text-align: left;
  padding: 0 14px 10px;
  border-bottom: 1px solid rgba(26, 86, 219, .3);
  font-size: .66rem; font-weight: var(--daas-font-weight-bold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--daas-fg-on-dark-subtle);
  white-space: nowrap;
}
.doc-table td { padding: 12px 14px; border-bottom: 1px solid var(--daas-border-on-dark); vertical-align: top; line-height: 1.6; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { color: rgba(255, 255, 255, .9); font-weight: var(--daas-font-weight-semibold); white-space: nowrap; }
.doc-table td:nth-child(2) { color: var(--daas-fg-on-dark); white-space: nowrap; }

/* ---- Code block ---- */
.doc-code {
  background: linear-gradient(150deg, rgba(13, 27, 75, .9), rgba(7, 15, 44, .96));
  border: 1px solid rgba(26, 86, 219, .18);
  border-radius: var(--daas-radius-md);
  box-shadow: var(--daas-shadow-card);
  margin: 0 0 24px;
  overflow: hidden;
}
.doc-code-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(26, 86, 219, .16);
  font-size: .68rem; font-weight: var(--daas-font-weight-bold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--daas-fg-on-dark-subtle);
}
.doc-code-bar::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--daas-accent-red); flex-shrink: 0;
}
.doc-code pre { margin: 0; padding: 18px; overflow-x: auto; font-size: .82rem; line-height: 1.75; color: #d3e1ff; }
.doc-code .cm { color: rgba(255, 255, 255, .36); font-style: italic; }
.doc-code .fn { color: #ff8ba0; }
.doc-code .ty { color: #9dbcff; }
.doc-code .st { color: #7ee6ac; }
.doc-code .cn { color: #ffcf8b; }

/* ---- Notation ----
   Short formal expressions — set as notation rather than as a code sample,
   because they describe the model instead of calling an API. */
.doc-formula {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: rgba(9, 15, 36, .55);
  border: 1px solid var(--daas-night-blue-border);
  border-left: 3px solid rgba(26, 86, 219, .5);
  border-radius: var(--daas-radius-sm);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .84rem;
  line-height: 1.85;
  color: #cfe0ff;
  white-space: pre;
  overflow-x: auto;
}

/* ---- Callout ---- */
.doc-note {
  background: rgba(26, 86, 219, .1);
  border: 1px solid rgba(26, 86, 219, .3);
  border-left: 3px solid var(--daas-accent-blue);
  border-radius: var(--daas-radius-sm);
  padding: 14px 18px;
  margin: 0 0 24px;
  font-size: .94rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .7);
}

/* ============================================================
   Native flow diagrams
   Structural equivalents of the source mermaid flowcharts, drawn
   with the brand's own card / connector idioms.
   ============================================================ */

.doc-fig {
  margin: 0 0 26px;
  padding: 24px 20px;
  background: radial-gradient(130% 150% at 82% 0%, rgba(18, 35, 95, .5) 0%, rgba(7, 15, 44, .62) 100%);
  border: 1px solid var(--daas-night-blue-border);
  border-radius: var(--daas-radius-md);
  overflow-x: auto;
}
.doc-fig figcaption {
  margin: 16px 0 0;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--daas-fg-on-dark-subtle);
  text-align: center;
}

/* Chains never wrap — a wrapped line would end on a connector pointing at
   nothing. Long chains scroll inside .doc-fig instead; .tight shrinks the
   6+ step ones enough to fit the article column. */
.doc-flow { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; min-width: min-content; }

/* Node */
.doc-n {
  flex: 0 1 auto;
  min-width: 100px; max-width: 176px;
  padding: 11px 13px;
  text-align: center;
  background: linear-gradient(160deg, rgba(13, 27, 75, .96), rgba(7, 15, 44, .96));
  border: 1px solid rgba(26, 86, 219, .32);
  border-radius: 10px;
  font-size: .78rem; font-weight: var(--daas-font-weight-semibold); line-height: 1.4;
  color: rgba(255, 255, 255, .9);
}
.doc-n small { display: block; margin-top: 3px; font-size: .71rem; font-weight: var(--daas-font-weight-normal); color: var(--daas-fg-on-dark-muted); }
.doc-n code { font-size: .93em; color: #b9ccff; white-space: nowrap; }
.doc-n.accent { border-color: rgba(204, 17, 48, .48); box-shadow: 0 0 22px rgba(204, 17, 48, .13); }
.doc-n.accent small { color: rgba(255, 180, 195, .72); }
.doc-n.pill { border-radius: var(--daas-radius-pill); min-width: 0; padding: 9px 18px; }
.doc-n.wide { max-width: 440px; }
/* A decision node (mermaid `{...}`): the branch labels carry the yes/no. */
.doc-n.q { border-color: rgba(26, 86, 219, .58); background: linear-gradient(160deg, rgba(18, 35, 95, .98), rgba(9, 18, 52, .98)); }
.doc-n.q small { color: #9dbcff; font-style: italic; }
.doc-flow.tight .doc-n { min-width: 84px; max-width: 132px; padding: 10px; font-size: .74rem; }
.doc-flow.tight .doc-n small { font-size: .68rem; }
/* Peers shown side by side with no connector between them. */
.doc-flow.gap { gap: 10px; flex-wrap: wrap; }

/* Horizontal connector */
.doc-arw {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 30px; height: 1px;
  margin: 0 3px;
  background: linear-gradient(90deg, rgba(26, 86, 219, .12), rgba(26, 86, 219, .65));
}
.doc-arw::after {
  content: '';
  position: absolute; right: -1px; top: -3.5px;
  border-left: 7px solid rgba(26, 86, 219, .8);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.doc-arw.lbl { width: 132px; }
.doc-flow.tight .doc-arw { width: 20px; margin: 0 2px; }
/* A tight chain still has to leave its edge labels room to sit on the line. */
.doc-flow.tight .doc-arw.lbl { width: 84px; }
/* Long identifiers wrap rather than spill outside the node's border — a tight
   chain is exactly where the box is too narrow to hold them on one line. */
.doc-flow.tight .doc-n code { white-space: normal; overflow-wrap: anywhere; }
.doc-arw[data-lbl]::before {
  content: attr(data-lbl);
  position: absolute; bottom: 7px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .66rem; font-weight: var(--daas-font-weight-semibold);
  letter-spacing: .02em;
  color: var(--daas-fg-on-dark-subtle);
}
.doc-arw.back { background: linear-gradient(90deg, rgba(204, 17, 48, .65), rgba(204, 17, 48, .12)); }
.doc-arw.back::after { right: auto; left: -1px; border-left: 0; border-right: 7px solid rgba(204, 17, 48, .8); }
/* An undirected link (mermaid `---`): association without a direction. */
.doc-arw.plain { background: linear-gradient(90deg, rgba(26, 86, 219, .45), rgba(26, 86, 219, .45)); }
.doc-arw.plain::after { display: none; }

/* Edge semantics for failover figures: a dashed red link is the path that
   broke (mermaid `-.->`), a thick green one is the path now carrying traffic
   (mermaid `==>`). */
.doc-arw.dash { background-image: repeating-linear-gradient(to right, rgba(204, 17, 48, .62) 0 6px, transparent 6px 11px); }
.doc-arw.dash::after { border-left-color: rgba(204, 17, 48, .78); }
.doc-arw.thick { height: 3px; border-radius: 2px; background-image: linear-gradient(90deg, rgba(26, 86, 219, .22), rgba(53, 208, 127, .78)); }
.doc-arw.thick::after { top: -2.5px; border-left-color: rgba(53, 208, 127, .85); }
.doc-arw.thick.back { background-image: linear-gradient(90deg, rgba(53, 208, 127, .78), rgba(26, 86, 219, .22)); }
.doc-arw.thick.back::after { border-right-color: rgba(53, 208, 127, .85); }
/* A label too long for one line. */
.doc-arw.lbl2 { width: 208px; }
.doc-arw.lbl2[data-lbl]::before { white-space: normal; width: 208px; bottom: 6px; line-height: 1.35; text-align: center; }

/* A standalone connector label, for branches where the pseudo-element would
   collide with a sibling. */
.doc-lbl { font-size: .66rem; font-weight: var(--daas-font-weight-semibold); letter-spacing: .02em; line-height: 1.4; color: var(--daas-fg-on-dark-subtle); text-align: center; }
.doc-branch { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 1 auto; }

/* Vertical connector, for figures whose flow is top-to-bottom */
.doc-arw.v { width: 1px; height: 30px; margin: 4px auto; background: linear-gradient(180deg, rgba(26, 86, 219, .12), rgba(26, 86, 219, .65)); }
.doc-arw.v::after { right: -3.5px; top: auto; bottom: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid rgba(26, 86, 219, .8); border-bottom: 0; }
.doc-arw.v[data-lbl]::before { bottom: 50%; left: 10px; transform: translateY(50%); }
/* Bottom-up layering: the stack is read from the platform towards the network. */
.doc-arw.v.up { background: linear-gradient(0deg, rgba(26, 86, 219, .12), rgba(26, 86, 219, .65)); }
.doc-arw.v.up::after { top: -1px; bottom: auto; border-top: 0; border-bottom: 7px solid rgba(26, 86, 219, .8); }

/* Convergence rail: N stacked sources joining into one target. */
.doc-stack { display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.doc-stack > .doc-n { width: 100%; max-width: none; }
.doc-rail { position: relative; flex: 0 0 auto; align-self: stretch; width: 40px; margin: 0 2px; }
.doc-rail::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px;
  background: linear-gradient(180deg, rgba(26, 86, 219, .1), rgba(26, 86, 219, .6) 50%, rgba(26, 86, 219, .1));
}
.doc-rail::after {
  content: ''; position: absolute; left: 0; right: 8px; top: calc(50% - .5px); height: 1px;
  background: linear-gradient(90deg, rgba(26, 86, 219, .3), rgba(26, 86, 219, .65));
}
.doc-rail > i {
  position: absolute; right: 0; top: calc(50% - 4px);
  border-left: 7px solid rgba(26, 86, 219, .8);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
/* Mirrored: one source branching out to N targets. The arrowheads belong to
   each branch row, so the rail is a plain T-junction. */
.doc-rail.out::before { left: auto; right: 0; }
.doc-rail.out::after { left: 0; right: 0; }
.doc-rail.out > i { display: none; }

/* Subgraph */
.doc-group {
  position: relative;
  flex: 1 1 auto;
  min-width: 190px;
  padding: 28px 16px 16px;
  border: 1px dashed rgba(26, 86, 219, .38);
  border-radius: var(--daas-radius-md);
  background: rgba(9, 15, 36, .35);
}
.doc-group::before {
  content: attr(data-title);
  position: absolute; top: 9px; left: 15px;
  font-size: .65rem; font-weight: var(--daas-font-weight-bold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--daas-fg-on-dark-subtle);
}
/* Content that carries edge labels needs air, or the topmost label lands on
   the title's line. */
.doc-group.air { padding-top: 42px; }
.doc-group.accent { border-color: rgba(204, 17, 48, .4); }
.doc-group.accent::before { color: rgba(232, 64, 96, .8); }
.doc-group > .doc-n { margin: 0 auto; max-width: none; }

/* Concentric layers — each .doc-group nests inside the previous one, so an
   envelope diagram needs no new box primitive, only a width bound. */
.doc-nest { max-width: 560px; margin: 0 auto; }

/* Multi-subgraph figure: side by side, or stacked with `.tb`. */
.doc-split { display: flex; align-items: stretch; justify-content: center; gap: 18px; flex-wrap: wrap; }
.doc-split.tb { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.doc-split.tb > .doc-group { margin: 0 0 4px; }
.doc-split.tb > .doc-group + .doc-group { margin-top: 4px; }
.doc-split.tb > .doc-n { align-self: center; }

/* Stacked connector pair between two subgraphs */
.doc-conn { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; gap: 30px; padding: 4px 0; }
.doc-conn.roomy { gap: 46px; }

/* ---- Decision ladder ----
   A cascade of decisions, each with one branch taken sideways and the other
   falling through to the next test. Its own connector classes (.doc-ly /
   .doc-ln) keep the grid intact — the narrow-screen rules below rotate
   .doc-arw, which would break the ladder's geometry. The figure scrolls
   instead.

   Every child declares its column: auto-placement fills a row's remaining
   cells rather than starting a new row, so the tracks have to be explicit. */
.doc-ladder { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; }
.doc-ladder > * { justify-self: center; }
.doc-ladder > .doc-n, .doc-ladder > .doc-ln { grid-column: 1; }
.doc-ladder > .doc-ly { grid-column: 2; }
.doc-ladder > .doc-out { grid-column: 3; }
.doc-ladder > .doc-span { grid-column: 1 / -1; }

.doc-ly, .doc-ln { position: relative; flex: 0 0 auto; }
.doc-ly { width: 92px; height: 1px; background: linear-gradient(90deg, rgba(26, 86, 219, .12), rgba(26, 86, 219, .65)); }
.doc-ly::after {
  content: ''; position: absolute; right: -1px; top: -3.5px;
  border-left: 7px solid rgba(26, 86, 219, .8);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.doc-ln { width: 1px; height: 32px; margin: 5px 0; background: linear-gradient(180deg, rgba(26, 86, 219, .12), rgba(26, 86, 219, .65)); }
.doc-ln::after {
  content: ''; position: absolute; left: -3.5px; bottom: -1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 7px solid rgba(26, 86, 219, .8);
}
.doc-ly[data-lbl]::before, .doc-ln[data-lbl]::before {
  content: attr(data-lbl);
  position: absolute; white-space: nowrap;
  font-size: .64rem; font-weight: var(--daas-font-weight-bold);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--daas-fg-on-dark-subtle);
}
.doc-ly[data-lbl]::before { bottom: 6px; left: 50%; transform: translateX(-50%); }
.doc-ln[data-lbl]::before { left: 9px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .doc-flow, .doc-split { flex-direction: column; align-items: stretch; }
  .doc-n, .doc-flow.tight .doc-n { max-width: none; font-size: .78rem; }
  .doc-conn { align-self: stretch; gap: 0; }
  .doc-arw { width: 1px !important; height: 24px; margin: 5px auto; background: linear-gradient(180deg, rgba(26, 86, 219, .12), rgba(26, 86, 219, .65)); }
  .doc-arw::after { right: -3.5px; top: auto; bottom: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid rgba(26, 86, 219, .8); border-bottom: 0; }
  .doc-arw[data-lbl]::before { position: static; display: block; transform: none; padding-left: 10px; }
  .doc-arw.back { background: linear-gradient(180deg, rgba(204, 17, 48, .65), rgba(204, 17, 48, .12)); }
  .doc-arw.back::after { border-top: 0; border-bottom: 7px solid rgba(204, 17, 48, .8); top: -1px; bottom: auto; }
  .doc-arw.dash { background-image: repeating-linear-gradient(to bottom, rgba(204, 17, 48, .62) 0 6px, transparent 6px 11px); }
  .doc-arw.dash::after { border-top-color: rgba(204, 17, 48, .78); }
  .doc-arw.thick { width: 3px !important; height: 26px; background-image: linear-gradient(180deg, rgba(26, 86, 219, .22), rgba(53, 208, 127, .78)); }
  .doc-arw.thick::after { right: -2.5px; top: auto; border-top-color: rgba(53, 208, 127, .85); }
  .doc-arw.thick.back { background-image: linear-gradient(180deg, rgba(53, 208, 127, .78), rgba(26, 86, 219, .22)); }
  .doc-arw.thick.back::after { border-bottom-color: rgba(53, 208, 127, .85); }
  .doc-arw.lbl2, .doc-arw.lbl2[data-lbl]::before { width: auto; }
  /* The convergence rail has no room to fan out — collapse it to one arrow. */
  .doc-rail { align-self: center; width: 1px; height: 26px; margin: 6px auto; }
  .doc-rail::before { top: 0; bottom: 0; }
  .doc-rail::after { display: none; }
  .doc-rail > i { right: -3.5px; top: auto; bottom: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid rgba(26, 86, 219, .8); }
}

/* ============================================================
   Embedded mode — the article rendered inside a doc modal.
   Site chrome (nav, sub-nav, footer, hero CTA) is suppressed so the
   same file serves both the standalone page and the modal body.
   ============================================================ */
html.doc-embed .doc-chrome { display: none !important; }
html.doc-embed body { background: transparent !important; }
html.doc-embed .doc-hero { border-bottom: 1px solid var(--daas-night-blue-border); }
html.doc-embed .doc-hero-inner { padding-top: 34px !important; padding-bottom: 30px !important; }
html.doc-embed .doc-wrap { padding-top: 34px; padding-bottom: 44px; }

/* ============================================================
   Doc modal (host page side — see assets/js/docmodal.js)
   ============================================================ */
.docm-overlay {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(4, 8, 22, .74);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: docm-fade .18s ease;
}
@keyframes docm-fade { from { opacity: 0; } to { opacity: 1; } }

.docm-box {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 1000px; height: 90vh;
  background: linear-gradient(160deg, var(--daas-night-blue), var(--daas-night-blue-deep));
  overflow: hidden;
  animation: daas-slidein .28s ease;
}
.docm-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px 13px 20px;
  border-bottom: 1px solid var(--daas-night-blue-border);
  background: rgba(9, 15, 36, .6);
  flex-shrink: 0;
}
.docm-title { font-size: .95rem; font-weight: var(--daas-font-weight-bold); color: #fff; margin: 0; letter-spacing: -.01em; }
.docm-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.docm-full { font-size: .78rem; font-weight: var(--daas-font-weight-semibold); color: var(--daas-fg-on-dark-muted); white-space: nowrap; }
.docm-full:hover { color: #fff; }
.docm-x {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--daas-night-blue-border);
  border-radius: 50%;
  color: var(--daas-fg-on-dark-muted);
  font-size: 1.2rem; line-height: 1; font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.docm-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.docm-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; background: #0a1230; }

.docm-card { cursor: pointer; }
.docm-card:focus-visible { outline: 2px solid var(--daas-accent-red-hover); outline-offset: 3px; }
.docm-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: .8rem; font-weight: var(--daas-font-weight-bold);
  letter-spacing: .04em;
  color: var(--daas-accent-red-hover);
}
.docm-more::after { content: '→'; transition: transform .2s ease; }
.docm-card:hover .docm-more::after { transform: translateX(3px); }

@media (max-width: 640px) {
  .docm-overlay { padding: 0; }
  .docm-box { height: 100%; max-width: none; border-radius: 0; border: 0; box-shadow: none; }
}