/* TOSSI architecture diagram — scoped to #tossi-arch-mount. Auto-generated from prototype index.html. */

#tossi-arch-mount {
  /* matched to the site's navy/cyan theme (tossi-midnight / tossi-navy / tossi-cyan / tossi-violet) */
  --bg: #060b1a; --bg-elev: #0b1326; --bg-card: #0d1730;
  --line: rgba(180,200,255,0.08); --line-2: rgba(180,200,255,0.14);
  --ink: #e8eefc; --ink-2: #a8b3cc; --ink-3: #6b7694;
  --accent:#22d3ee; --accent-2:#38bdf8; --accent-3:#8b7bff;
  --accent-soft:rgba(34,211,238,.18); --accent-glow:rgba(34,211,238,.55);
  --ok: #5fe3a1; --warn: #f5b942; --err: #ff6b8a;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
}

/* Widen the visible canvas ~30% beyond Starlight's content column so the
   wide diagram isn't clipped. Breaks out symmetrically and stays centered;
   blocks/zoom are untouched. Capped to the viewport on narrow screens. */
#tossi-arch-mount {
  display: block;
  width: min(95vw, calc(var(--sl-content-width, 45rem) * 1.3));
  margin-inline: calc(min(95vw, calc(var(--sl-content-width, 45rem) * 1.3)) / -2 + 50%);
}

#tossi-arch-mount .arch-wrap { margin-top: 56px; margin-bottom: 20px; }
#tossi-arch-mount .archd {
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background:
      radial-gradient(900px 400px at 50% -8%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
      linear-gradient(180deg, #060b1a, #0b1326);
    overflow: hidden;
  }
#tossi-arch-mount .archd-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: 11px;
    background: rgba(0,0,0,0.3);
    flex-wrap: wrap; gap: 10px;
  }
#tossi-arch-mount .archd-tools-l, #tossi-arch-mount .archd-tools-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#tossi-arch-mount .archd-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); letter-spacing: 0.12em; }
#tossi-arch-mount .archd-tag.muted { color: var(--ink-3); }
#tossi-arch-mount .archd-tag .led {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
    animation: pulse 2s ease-in-out infinite;
  }
#tossi-arch-mount .archd-btn {
    background: transparent; color: var(--ink-2);
    border: 1px solid var(--line-2); border-radius: 4px;
    height: 26px; padding: 0 8px;
    font-family: var(--mono); font-size: 11px;
    display: grid; place-items: center;
  }
#tossi-arch-mount .archd-btn:hover { color: var(--accent); border-color: var(--accent); }
#tossi-arch-mount .archd-zoom { color: var(--ink-2); width: 42px; text-align: center; }
#tossi-arch-mount .archd-hint { color: var(--ink-3); font-size: 10px; letter-spacing: 0.08em; }
#tossi-arch-mount .legend { display: flex; gap: 12px; }
#tossi-arch-mount .lg-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 10px; letter-spacing: 0.1em; }
#tossi-arch-mount .lg-line { display: inline-block; width: 16px; height: 2px; }
#tossi-arch-mount .lg-line.data { background: var(--accent); }
#tossi-arch-mount .lg-line.ctrl { background: var(--accent-2); }
#tossi-arch-mount .lg-line.mgmt { background: var(--accent-3); background-image: linear-gradient(90deg, var(--accent-3) 50%, transparent 50%); background-size: 6px 2px; }
#tossi-arch-mount .lg-line.tel { background: rgba(255,255,255,.5); background-image: linear-gradient(90deg, rgba(255,255,255,.5) 50%, transparent 50%); background-size: 4px 2px; }
#tossi-arch-mount .archd-stage {
    position: relative;
    min-height: 1100px;
    overflow: hidden;
    cursor: grab;
  }
#tossi-arch-mount .archd-stage.dragging { cursor: grabbing; }
#tossi-arch-mount .archd-canvas {
    position: absolute; top: 20px; left: 50%;
    transform-origin: 50% 0;
    transition: transform .15s ease;
    margin-left: -1100px;
    /* GPU-stable transforms: keeps zoom/pan smooth and avoids sub-pixel
       shimmer during scale changes. */
    will-change: transform;
    backface-visibility: hidden;
  }
  /* While actively dragging, drop the transition so the pan tracks the cursor
     1:1 instead of easing/sliding past it. */
  #tossi-arch-mount .archd-stage.dragging .archd-canvas { transition: none; }
#tossi-arch-mount .archd-board { position: relative; }
#tossi-arch-mount .archd-edges {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
  }
#tossi-arch-mount .abs-block {
    position: absolute;
    z-index: 1;
    width: auto;
    /* Isolate each absolutely-positioned block: its internal re-renders
       (hover-dim, focus ring) can't reflow siblings or the board. */
    contain: layout style;
  }
#tossi-arch-mount .block {
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 16px 20px 18px;
    background: #0c1117;
    cursor: pointer;
    /* Transition only visual props, never layout (left/top/width/height), so a
       measurement nudge can never animate a block into a drifting position. */
    transition: border-color .15s ease, box-shadow .15s ease, opacity .18s ease;
    overflow: hidden;
    display: flex; flex-direction: column; gap: 12px;
    color: var(--ink);
    font-family: var(--sans);
  }
#tossi-arch-mount .block:not(.abs-block) { position: relative; }
#tossi-arch-mount .block::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
  }
#tossi-arch-mount .block:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 40px color-mix(in oklab, var(--accent) 25%, transparent);
  }
#tossi-arch-mount .block:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
    box-shadow: 0 8px 40px color-mix(in oklab, var(--accent) 30%, transparent);
  }
#tossi-arch-mount .block-agent {
    background:
      radial-gradient(600px 120px at 50% 50%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 80%),
      transparent;
    border-color: color-mix(in oklab, var(--accent) 55%, transparent);
    box-shadow: 0 0 60px color-mix(in oklab, var(--accent) 18%, transparent), inset 0 0 40px rgba(0,0,0,0.4);
  }
#tossi-arch-mount .bk { position: absolute; width: 8px; height: 8px; border-color: var(--accent); }
#tossi-arch-mount .bk.tl { top: 4px; left: 4px; border-top: 1px solid; border-left: 1px solid; }
#tossi-arch-mount .bk.tr { top: 4px; right: 4px; border-top: 1px solid; border-right: 1px solid; }
#tossi-arch-mount .bk.bl { bottom: 4px; left: 4px; border-bottom: 1px solid; border-left: 1px solid; }
#tossi-arch-mount .bk.br { bottom: 4px; right: 4px; border-bottom: 1px solid; border-right: 1px solid; }
#tossi-arch-mount .block-head { display: flex; justify-content: space-between; align-items: center; }
#tossi-arch-mount .block-layer {
    font-family: var(--mono); font-size: 15px; letter-spacing: 0.18em;
    color: var(--accent); text-transform: uppercase;
  }
#tossi-arch-mount .block-led {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ok); box-shadow: 0 0 6px var(--ok);
    animation: pulse 2s ease-in-out infinite;
  }
#tossi-arch-mount .block-title {
    font-size: 34px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
    color: var(--ink);
  }
#tossi-arch-mount .block-desc {
    font-size: 22px; color: var(--ink-3); line-height: 1.45;
    margin-top: auto;
  }
#tossi-arch-mount .block-logos {
    display: flex; flex-wrap: wrap; gap: 28px;
    align-items: center; justify-content: space-evenly;
    padding: 10px 0 8px;
  }
#tossi-arch-mount .block-logo-img {
    height: 48px; width: auto; max-width: 240px;
    object-fit: contain; display: block;
    filter: brightness(0) invert(1);
    opacity: 0.92;
    transition: opacity .15s ease;
  }
#tossi-arch-mount .block:hover .block-logo-img { opacity: 1; }
#tossi-arch-mount .block-logo-img[src*="ocudu"] { height: 28px; max-width: 320px; }
#tossi-arch-mount .block-logo-img[src*="oransc"] { height: 76px; max-width: 380px; }
#tossi-arch-mount .block-logo-img[src*="xfapi"] { height: 96px; max-width: 460px; }
#tossi-arch-mount .block-logo-img[src*="vvdn"] { height: 72px; max-width: 220px; }
#tossi-arch-mount .blk-l1 .block-split-right { flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 26px; }
#tossi-arch-mount .blk-l1 .block-logo-img { height: 58px; }
#tossi-arch-mount .blk-l1 .block-logo-img[src*="ocudu"] { height: 40px; max-width: 300px; }
#tossi-arch-mount .block-logo-img[src*="magma"] { height: 76px; max-width: 320px; }
#tossi-arch-mount .block-logo-img[src*="magma-india"] { height: 76px; max-width: 440px; }
#tossi-arch-mount .agent-band { display: flex; flex-direction: column; gap: 12px; }
#tossi-arch-mount .agent-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#tossi-arch-mount .agent-head .block-layer { color: var(--accent); font-size: 17px; }
#tossi-arch-mount .agent-head .block-title { font-size: 31px; }
#tossi-arch-mount .agent-status {
    font-family: var(--mono); font-size: 15px;
    color: var(--accent); letter-spacing: 0.15em;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px; border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
    border-radius: 999px; background: rgba(0,0,0,0.4);
  }
#tossi-arch-mount .agent-status .led { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 2s ease-in-out infinite; }
#tossi-arch-mount .agent-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  }
#tossi-arch-mount .agent-card {
    border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--line-2));
    border-radius: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.25));
    display: flex; flex-direction: column; gap: 4px;
    animation: agentBreath 4s ease-in-out infinite;
  }
@keyframes agentBreath {
    0%,100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 25%, transparent); }
  }
#tossi-arch-mount .agent-card-head { display: flex; align-items: center; gap: 6px; }
#tossi-arch-mount .agent-name { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; flex: 1; }
#tossi-arch-mount .agent-mono { font-family: var(--mono); font-size: 16px; color: var(--ink-3); }
#tossi-arch-mount .agent-task { font-size: 18px; color: var(--ink-2); line-height: 1.4; }
#tossi-arch-mount .nf-groups { display: flex; flex-direction: column; gap: 6px; }
#tossi-arch-mount .nf-group-label {
    font-family: var(--mono); font-size: 17px; letter-spacing: 0.15em;
    color: var(--ink-3); text-transform: uppercase;
  }
#tossi-arch-mount .nf-list { display: flex; flex-wrap: wrap; gap: 5px; }
#tossi-arch-mount .block-nfs { display: flex; flex-wrap: wrap; gap: 4px; }
#tossi-arch-mount .block-nfs.chips { gap: 5px; }
#tossi-arch-mount .nf {
    font-family: var(--mono); font-size: 19px; font-weight: 500;
    padding: 8px 13px;
    border: 1px solid var(--line-2); border-radius: 5px;
    color: var(--ink);
    background: rgba(255,255,255,0.04);
    letter-spacing: 0.04em;
  }
#tossi-arch-mount .block:hover .nf { border-color: color-mix(in oklab, var(--accent) 40%, var(--line-2)); }
#tossi-arch-mount .block-split {
    display: flex; align-items: center; gap: 32px;
    margin-top: 2px;
  }
#tossi-arch-mount .block-split-left { flex: 1 1 60%; min-width: 0; }
#tossi-arch-mount .block-split-left .nf-list { display: flex; flex-wrap: wrap; gap: 8px; }
#tossi-arch-mount .block-split-left .nf { font-size: 20px; padding: 9px 14px; }
#tossi-arch-mount .block-split-left .nf-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: start;
    gap: 14px 16px;
  }
#tossi-arch-mount .block-split-left .nf-group {
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--line-2); border-radius: 9px;
    padding: 12px 13px 14px;
    background: rgba(255,255,255,0.02);
  }
#tossi-arch-mount .block-split-right {
    flex: 0 0 auto; max-width: 42%;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 28px 32px;
  }
#tossi-arch-mount .block-split-right .block-logo-img { opacity: 0.92; }
#tossi-arch-mount .block-split-right.logo-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px;
    place-items: center;
  }
#tossi-arch-mount .block-fill { justify-content: flex-start; }
#tossi-arch-mount .block-fill .nf-groups { gap: 16px; }
#tossi-arch-mount .block-fill .nf-group { display: flex; flex-direction: column; gap: 9px; }
#tossi-arch-mount .block-fill .nf-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#tossi-arch-mount .block-fill .nf { text-align: center; font-size: 20px; padding: 10px 9px; }
#tossi-arch-mount .block-fill .nf-group-label { font-size: 15px; }
#tossi-arch-mount .blk-nearrt .nf-group:last-child {
    border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
    border-radius: 8px;
    padding: 12px;
    background: var(--accent-soft);
  }
#tossi-arch-mount .fw-block { display: flex; flex-direction: column; gap: 10px; }
#tossi-arch-mount .fw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#tossi-arch-mount .fw-card {
    border: 1px solid var(--line-2); border-radius: 9px;
    padding: 16px 12px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    background: rgba(255,255,255,0.02);
  }
#tossi-arch-mount .fw-name { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: 0.04em; }
#tossi-arch-mount .fw-icon { color: var(--accent); display: grid; place-items: center; }
#tossi-arch-mount .fw-icon svg { display: block; width: 96px; height: 96px; }
#tossi-arch-mount .nested-block {
    margin-top: 4px;
    border: 1px solid color-mix(in oklab, var(--accent) 32%, var(--line-2));
    border-radius: 10px;
    padding: 16px 18px 18px;
    background: rgba(0,0,0,0.35);
    display: flex; flex-direction: column; gap: 12px;
  }
#tossi-arch-mount .nested-block > .nf-groups { gap: 16px; }
#tossi-arch-mount .nested-block .nf-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#tossi-arch-mount .nested-block .nf { text-align: center; font-size: 20px; padding: 10px 9px; }
#tossi-arch-mount .nested-block .nf-group:last-child {
    border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
    border-radius: 8px;
    padding: 12px;
    background: var(--accent-soft);
  }
#tossi-arch-mount .block-agents { display: flex; flex-wrap: wrap; gap: 6px; }
#tossi-arch-mount .agent-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10px;
    padding: 4px 10px;
    border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line-2));
    border-radius: 999px;
    color: var(--ink);
    background: rgba(0,0,0,0.3);
  }
#tossi-arch-mount .agent-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: agentPulse 2.4s ease-in-out infinite;
  }
@keyframes agentPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
  }
#tossi-arch-mount .arch-tip {
    position: fixed; z-index: 90;
    background: rgba(8,8,14,0.96);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 10px 12px;
    max-width: 280px;
    pointer-events: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 24px var(--accent-soft);
  }
#tossi-arch-mount .arch-tip-cat { font-family: var(--mono); font-size: 9px; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; }
#tossi-arch-mount .arch-tip-name { font-size: 14px; font-weight: 600; margin: 4px 0 6px; letter-spacing: -0.01em; }
#tossi-arch-mount .arch-tip-desc { font-size: 12px; color: var(--ink-2); line-height: 1.4; }

/* drawer — right-side slide-in panel (was missing; restored from prototype) */
#tossi-arch-mount .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; backdrop-filter: blur(4px); }
#tossi-arch-mount .drawer {
    position: fixed; right: 0; bottom: 0; width: 360px; max-width: 92vw;
    /* Start below the fixed site header so the panel's heading isn't clipped. */
    top: var(--sl-nav-height, 4rem);
    background: var(--bg-elev);
    border-left: 1px solid var(--line-2);
    z-index: 101;
    padding: 28px;
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0,0,0,0.6);
  }
#tossi-arch-mount .drawer-close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px; border-radius: 6px;
    background: transparent; border: 1px solid var(--line-2);
    color: var(--ink-2);
    display: grid; place-items: center;
  }
#tossi-arch-mount .drawer-close:hover { color: var(--accent); border-color: var(--accent); }
#tossi-arch-mount .drawer h3 { font-size: 18px; margin: 12px 0 4px; font-weight: 500; letter-spacing: -0.01em; }
#tossi-arch-mount .drawer .cat { font-family: var(--mono); font-size: 22px; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; }
#tossi-arch-mount .drawer .desc { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; margin: 14px 0 22px; }
#tossi-arch-mount .drawer .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
#tossi-arch-mount .drawer .meta-cell { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
#tossi-arch-mount .drawer .meta-cell .k { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
#tossi-arch-mount .drawer .meta-cell .v { font-family: var(--mono); font-size: 12px; color: var(--ink); margin-top: 4px; }
#tossi-arch-mount .drawer .repo {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line-2); border-radius: 8px;
    font-family: var(--mono); font-size: 12px;
    color: var(--ink); margin-bottom: 14px;
  }
#tossi-arch-mount .drawer .repo:hover { border-color: var(--accent); color: var(--accent); }
#tossi-arch-mount .drawer .telemetry {
    border: 1px solid var(--line); border-radius: 8px; padding: 14px;
    margin-top: 8px;
  }
#tossi-arch-mount .drawer .telemetry-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; padding: 6px 0; }
#tossi-arch-mount .drawer .telemetry-row .lbl { color: var(--ink-3); }
#tossi-arch-mount .drawer .telemetry-row .val { color: var(--accent); }

/* drawer-only: smaller chips/labels so the narrower panel reads cleanly */
#tossi-arch-mount .drawer .nf { font-size: 12px; padding: 5px 9px; }
#tossi-arch-mount .drawer .nf-group-label { font-size: 11px; }
#tossi-arch-mount .drawer .block-logo-img { height: 34px; }