/*
 * The METEORSTORM data-model figure, drawn by /assets/javascripts/meteorstorm-ten.js.
 * Shared by the METEORSTORM one-pager and the Space ISAC page.
 *
 * Follows the METEORSTORM visual language: the figure sits on a #f8fafc card;
 * one colour per layer, on the frame border, the header pill and the element
 * code, never for status; every element also names its layer in text, so the
 * figure survives greyscale. The Analytic layer is dashed: it has no parent and
 * anchors through its target field, so it is drawn apart, never as a container.
 */
:root {
  --pce: #c77e20; --pce-f: #faf6ef;
  --seg: #1f6f86; --seg-f: #eaf6f8;
  --svc: #2e7d4f; --svc-f: #ffffff;
  --ast: #33507e; --ast-f: #edf1f8;
  --an: #c1187d;  --an-f: #fdf2f8;
}
.ten { background: #f8fafc; border: 0.75px solid var(--rule); border-radius: 6px; padding: 10px 10px 8px; }
.ten-title { font-family: var(--display); font-weight: 800; font-size: 8.4pt; margin: 0 0 6px; }
.rail { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 6.4pt; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 6px; }
.rail::before, .rail::after { content: ""; flex: 1; border-top: 0.75px solid var(--ink-3); }
.rail.down::after { flex: 1; }
.rail .arr { font-family: var(--mono); }
.lay { position: relative; border: 1.25px solid; border-radius: 6px; padding: 10px 6px 5px; margin-top: 8px; }
.lay > .pill { position: absolute; top: -7px; left: 8px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 6.4pt; line-height: 1; padding: 3px 7px; border-radius: 99px; white-space: nowrap; }
.lay > .pred { font-style: italic; color: var(--ink-3); font-size: 6.5pt; line-height: 1.25; margin: 0 0 4px; }
.els { display: grid; gap: 3px 4px; margin-bottom: 5px; }
.el { background: #fff; border: 0.75px solid; border-radius: 3px; padding: 1px 4px 2px; }
.el .c { display: block; font-family: var(--mono); font-weight: 600; font-size: 6.4pt; }
.el .l { display: block; font-size: 6.6pt; line-height: 1.15; color: var(--ink); }
.lay.pce { border-color: var(--pce); background: var(--pce-f); } .lay.pce > .pill { background: var(--pce); } .lay.pce .el { border-color: var(--pce); } .lay.pce .el .c { color: var(--pce); }
.lay.seg { border-color: var(--seg); background: var(--seg-f); } .lay.seg > .pill { background: var(--seg); } .lay.seg .el { border-color: var(--seg); } .lay.seg .el .c { color: var(--seg); }
.lay.svc { border-color: var(--svc); background: var(--svc-f); } .lay.svc > .pill { background: var(--svc); } .lay.svc .el { border-color: var(--svc); } .lay.svc .el .c { color: var(--svc); }
.lay.ast { border-color: var(--ast); background: var(--ast-f); } .lay.ast > .pill { background: var(--ast); } .lay.ast .el { border-color: var(--ast); } .lay.ast .el .c { color: var(--ast); }
.lay.an { border-color: var(--an); background: var(--an-f); } .lay.an > .pill { background: var(--an); } .lay.an .el { border-color: var(--an); } .lay.an .el .c { color: var(--an); }
.el .tg { float: right; font-family: var(--mono); font-size: 5.8pt; color: var(--an); }


@media screen and (max-width: 860px) {
  .lay > .pill { white-space: normal; position: static; display: inline-block; margin: -4px 0 6px; }
  .lay { padding-top: 8px; }
  .els { grid-template-columns: 1fr 1fr !important; }
}

/* Layer 5, THE LAYER form: the band, three target-field pills with their edges,
   and the one destination every analytic element reaches. */
.an-fig .lay.an { margin-top: 8px; }
.an-ts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 4px; }
.an-t { display: flex; flex-direction: column; align-items: center; padding: 10px 0 10px; position: relative; text-align: center; }
.an-t::before, .an-t::after { content: ""; position: absolute; left: 50%; width: 0; border-left: 1.25px solid var(--an); }
.an-t::before { top: 0; height: 9px; }
.an-t::after { bottom: 0; height: 9px; }
.an-pill { background: var(--an); color: #fff; font-family: var(--mono); font-weight: 600; font-size: 6.6pt; line-height: 1; padding: 3px 8px; border-radius: 99px; }
.an-x { font-size: 6.2pt; color: var(--ink-3); margin-top: 2px; line-height: 1.15; }
.an-plat { border: 1.25px solid var(--ink-3); border-radius: 6px; background: #fff; padding: 5px 8px 6px; text-align: center; position: relative; }
.an-plat::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 0; }
.an-plat b { display: block; font-family: var(--display); font-size: 6.6pt; letter-spacing: .08em; }
.an-codes { display: block; font-family: var(--mono); font-weight: 600; font-size: 7.4pt; margin: 1px 0 2px; }
.an-codes .pl-pce { color: var(--pce); } .an-codes .pl-seg { color: var(--seg); } .an-codes .pl-svc { color: var(--svc); } .an-codes .pl-ast { color: var(--ast); }
.an-cap { display: block; font-style: italic; font-size: 6.4pt; color: var(--ink-3); }

/* The Analytics Catalog: frameworks down, the six elements across. */
table.an-src { width: 100%; border-collapse: collapse; font-size: 7.4pt; line-height: 1.25; }
table.an-src th { font-family: var(--display); font-weight: 700; font-size: 6.4pt; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); text-align: left; border-bottom: 1px solid var(--ink, #14161a); padding: 0 6px 3px 0; }
table.an-src th.m { text-align: center; font-family: var(--mono); color: var(--an); letter-spacing: 0; width: 2.9em; padding-right: 0; }
table.an-src td { border-bottom: 0.5px solid var(--rule-2, #e6e8eb); padding: 2.5px 6px 2.5px 0; vertical-align: top; }
table.an-src tr:last-child td { border-bottom: 1px solid var(--ink, #14161a); }
table.an-src td.fw { font-weight: 600; }
table.an-src td.pub { color: var(--ink-3); }
table.an-src td.m { text-align: center; padding-right: 0; color: var(--an); }
table.an-src td.m.on { background: var(--an-f); }
table.an-src .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media screen and (max-width: 860px) {
  table.an-src td.pub { display: none; }
  table.an-src th:nth-child(2) { display: none; }
  .an-ts { grid-template-columns: repeat(6, 1fr); }
  .an-x { display: none; }
}
table.an-src.compact { font-size: 7pt; }
table.an-src.compact td { padding: 1px 4px 1px 0; }
table.an-src.compact th.m { width: 2.6em; }
.an-src-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
@media screen and (max-width: 860px) { .an-src-split { grid-template-columns: 1fr; } }