@charset "UTF-8";
/* SBVora v3 · system-configurator: orbit nodes as module switches (#systeme) */

/* ---------- Node buttons: identical to the v2 cards, plus switch states ---------- */
.system-orbit button.system-node{
  appearance:none;-webkit-appearance:none;margin:0;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  font:inherit;color:inherit;text-align:left;letter-spacing:inherit;line-height:inherit;
  border-radius:0;cursor:pointer;touch-action:manipulation;
}
.system-orbit .system-node>span{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:14px}
.system-orbit .system-node>small{display:block}
/* switch box: hidden in the orbit until hover, focus or pressed; always visible as a checklist */
.system-orbit .system-node>span::after{
  content:"";flex:none;width:14px;height:14px;box-sizing:border-box;border:1px solid #9cc4dc;background:transparent no-repeat center/10px 10px;
  opacity:0;transition:opacity .25s ease,background-color .25s ease,border-color .25s ease
}
.system-orbit .system-node:hover>span::after,
.system-orbit .system-node:focus-visible>span::after{opacity:1}
.system-orbit .system-node[aria-pressed="true"]>span::after{
  opacity:1;border-color:var(--cyan);background-color:var(--cyan);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.4' fill='none' stroke='%23061a36' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E")
}
.system-orbit .system-node[aria-pressed="true"]{
  border-color:var(--cyan);background:rgba(244,252,255,.96);
  box-shadow:0 18px 48px rgba(45,197,248,.2),inset 0 2px 0 var(--cyan)
}
.system-orbit .system-node[aria-pressed="true"]:hover{border-color:var(--cyan);box-shadow:0 24px 56px rgba(45,197,248,.26),inset 0 2px 0 var(--cyan)}
.system-orbit .system-node[aria-pressed="true"] strong{color:var(--deep)}
.system-orbit .system-node:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:0}
.system-orbit .system-node:active{transition-duration:.12s}

/* ---------- Links (fx.js draws them; orbit.js tags them) ---------- */
.system-links line,.system-links circle{transition:opacity .4s ease,stroke .4s ease}
.system-orbit.has-selection .system-links line{stroke-dasharray:2 6;opacity:.35;animation:none}
.system-orbit.has-selection .system-links line.is-on{
  stroke:#19b4ee;stroke-width:2;stroke-dasharray:none;opacity:1;
  filter:drop-shadow(0 0 4px rgba(45,197,248,.6))
}
.system-orbit.has-selection .system-links circle.is-on{r:3.5}
.system-links circle.is-off{display:none}
.system-orbit.is-offscreen .system-links line,
.system-orbit.is-offscreen .orbit-line{animation-play-state:paused}

/* ---------- Core: module count + one-shot ring ---------- */
.system-orbit .core-mark small.core-count{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);margin:0;
  padding:5px 9px 4px;border:1px solid rgba(45,197,248,.6);background:rgba(45,197,248,.1);
  color:#bfeeff;font:700 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap
}
.system-orbit .core-mark small.core-count[hidden]{display:none}
.system-orbit .core-mark::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--cyan);
  opacity:0;pointer-events:none
}
.system-orbit .core-mark.is-pulse::after{animation:sbvOrbitPulse .9s cubic-bezier(.2,.7,.2,1) 1}
@keyframes sbvOrbitPulse{
  0%{opacity:.95;transform:scale(1)}
  100%{opacity:0;transform:scale(1.32)}
}

/* ---------- Configurator panel ---------- */
.system-config{
  position:relative;max-width:1100px;margin:34px auto 0;
  display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr) auto;
  border:1px solid #d7e1e9;background:rgba(255,255,255,.92);
  box-shadow:0 16px 45px rgba(6,35,90,.06)
}
.system-config::before{
  content:"";position:absolute;left:-1px;top:-1px;width:56px;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan))
}
.system-config.has-selection::before{width:calc(100% + 2px);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.system-config-head{padding:22px 24px;border-right:1px solid #d7e1e9}
.system-config-code{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;
  color:var(--tech);font:700 9px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase
}
.system-config-meter{color:#5b6f86;letter-spacing:.12em;font-variant-numeric:tabular-nums;white-space:nowrap}
.system-config.has-selection .system-config-meter{color:var(--blue)}
.system-config-hint{margin:12px 0 0;color:#566577;font-size:14px;line-height:1.55}
.system-stamp{
  display:inline-block;margin:14px 0 0;padding:6px 9px 5px;border:1px solid var(--tech);
  color:#126aa6;font:700 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;
  transform:rotate(-2deg);transform-origin:left center
}
.system-stamp::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;background:var(--cyan);vertical-align:1px}
.system-stamp[hidden]{display:none}
.system-readout{min-width:0;padding:14px 24px;display:flex;flex-direction:column;justify-content:center}
.system-readout-empty{
  margin:0;padding:15px 16px;border:1px dashed #b9cddb;color:#5b6f86;
  font:600 11px/1.5 ui-monospace,Menlo,monospace;letter-spacing:.06em
}
.system-readout-empty[hidden],.system-readout-list[hidden]{display:none}
.system-readout-list{list-style:none;margin:0;padding:0}
.system-readout-list li{
  display:grid;grid-template-columns:30px minmax(110px,150px) minmax(0,1fr);gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px dashed #cbdbe6
}
.system-readout-list li:last-child{border-bottom:0}
.system-readout-no{color:var(--tech);font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em}
.system-readout-list b{font-family:Michroma,"Arial Narrow",sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.system-readout-desc{color:#566577;font-size:13px;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.system-config-actions{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 22px;border-left:1px solid #d7e1e9;min-width:250px}

.system-take,.system-reset{
  appearance:none;-webkit-appearance:none;margin:0;border-radius:0;cursor:pointer;touch-action:manipulation;
  display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;text-align:left
}
.system-take{
  min-height:54px;padding:0 18px;border:1px solid transparent;color:#fff;
  background:linear-gradient(100deg,var(--blue),var(--tech));box-shadow:0 13px 30px rgba(24,104,192,.22);
  font-size:13px;font-weight:750;letter-spacing:.03em;
  transition:transform .3s var(--ease),box-shadow .3s ease,opacity .3s ease
}
.system-take i{font-style:normal;font-size:18px;line-height:1}
.system-take:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(45,197,248,.3)}
.system-reset{
  min-height:44px;padding:0 18px;border:1px solid #c6d6e2;background:transparent;color:#2d4a66;
  font:700 10px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .25s ease,color .25s ease,opacity .25s ease
}
.system-reset:hover{border-color:var(--tech);color:var(--blue)}
.system-take:focus-visible,.system-reset:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.system-take[aria-disabled="true"],.system-reset[aria-disabled="true"]{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.system-config.is-handed .system-take{background:linear-gradient(100deg,#0f4f96,var(--blue))}

/* ---------- Dark mode ---------- */
html[data-theme="dark"] .system-orbit .system-node>span::after{border-color:#5d88a3}
html[data-theme="dark"] .system-orbit .system-node[aria-pressed="true"]>span::after{border-color:var(--cyan);background-color:var(--cyan)}
html[data-theme="dark"] .system-orbit .system-node[aria-pressed="true"]{
  background:rgba(12,58,88,.96);border-color:var(--cyan);
  box-shadow:0 18px 48px rgba(0,0,0,.28),0 0 28px rgba(45,197,248,.14),inset 0 2px 0 var(--cyan)
}
html[data-theme="dark"] .system-orbit .system-node[aria-pressed="true"] strong{color:#fff}
html[data-theme="dark"] .system-orbit .system-node[aria-pressed="true"] small{color:#c9e6f5}
html[data-theme="dark"] .system-orbit.has-selection .system-links line.is-on{stroke:var(--cyan)}
html[data-theme="dark"] .system-config{background:rgba(13,40,63,.92);border-color:#2f5670;box-shadow:0 16px 45px rgba(0,0,0,.22)}
html[data-theme="dark"] .system-config-head{border-color:#2f5670}
html[data-theme="dark"] .system-config-actions{border-color:#2f5670}
html[data-theme="dark"] .system-config-code{color:#6fd1fa}
html[data-theme="dark"] .system-config-meter{color:#9fb8c9}
html[data-theme="dark"] .system-config.has-selection .system-config-meter{color:var(--cyan)}
html[data-theme="dark"] .system-config-hint{color:#b5cbd9}
html[data-theme="dark"] .system-stamp{border-color:var(--cyan);color:#9ee6ff}
html[data-theme="dark"] .system-readout-empty{border-color:#3d6680;color:#a9c3d3}
html[data-theme="dark"] .system-readout-list li{border-color:#2f5670}
html[data-theme="dark"] .system-readout-no{color:#6fd1fa}
html[data-theme="dark"] .system-readout-list b{color:#eef8ff}
html[data-theme="dark"] .system-readout-desc{color:#b5cbd9}
html[data-theme="dark"] .system-reset{border-color:#43708d;color:#d7efff}
html[data-theme="dark"] .system-reset:hover{border-color:var(--cyan);color:#fff}
html[data-theme="dark"] .system-config.is-handed .system-take{background:linear-gradient(100deg,#0d4a8a,#1868c0)}

/* ---------- Responsive ---------- */
@media(max-width:1120px){
  /* the scaled orbit keeps its nodes inside the viewport */
  .system-orbit{margin-inline:0}
  .system-orbit .system-node>span::after{opacity:1}
  .system-config{grid-template-columns:minmax(210px,260px) minmax(0,1fr);margin-top:24px}
  .system-config-actions{grid-column:1/-1;flex-direction:row;justify-content:flex-end;border-left:0;border-top:1px solid #d7e1e9;min-width:0}
  .system-config-actions .system-take{width:auto;min-width:280px}
  .system-config-actions .system-reset{width:auto;min-height:54px}
  html[data-theme="dark"] .system-config-actions{border-color:#2f5670}
}
@media(max-width:860px){
  /* grid layout: the nodes are a checklist, the core links are hidden */
  .system-links{display:none}
  .system-config{grid-template-columns:1fr;margin-top:18px}
  .system-config-head{border-right:0;border-bottom:1px solid #d7e1e9;padding:20px}
  html[data-theme="dark"] .system-config-head{border-color:#2f5670}
  .system-readout{padding:12px 20px}
  .system-config-actions{padding:16px 20px}
  .system-orbit .core-mark small.core-count{bottom:17px;padding:4px 7px 3px;font-size:8px;letter-spacing:.14em}
}
@media(max-width:560px){
  .system-config-actions{flex-direction:column}
  .system-config-actions .system-take,.system-config-actions .system-reset{width:100%;min-width:0}
  .system-config-actions .system-reset{min-height:48px}
  .system-readout-list li{grid-template-columns:26px minmax(0,1fr);gap:4px 10px}
  .system-readout-desc{grid-column:2}
  .system-orbit .system-node{min-height:104px}
}

/* ---------- Reduced motion: state stays visible, nothing moves ---------- */
@media(prefers-reduced-motion:reduce){
  .system-orbit .core-mark.is-pulse::after{animation:none!important}
  .system-stamp{transform:none}
  .system-take:hover{transform:none}
}

/* ---------- Normal page print ---------- */
@media print{
  html:not(.sbv-print-only) .system-config{box-shadow:none!important;grid-template-columns:1fr!important}
  html:not(.sbv-print-only) .system-config::before,
  html:not(.sbv-print-only) .system-config-actions,
  html:not(.sbv-print-only) .system-config-hint{display:none!important}
  html:not(.sbv-print-only) .system-config-head{border-right:0!important}
  html:not(.sbv-print-only) .system-orbit .core-mark small.core-count{position:static!important;transform:none!important;margin-top:2mm!important;border-color:#071426!important}
  html:not(.sbv-print-only) .system-config,html:not(.sbv-print-only) .system-config-head{border-color:#071426!important;break-inside:avoid;page-break-inside:avoid}
}