/* ============================================================================
   ShackLink Architecture Diagram Suite
   Shared theme + diagram chrome.
   Palette follows docs/index.html, docs/overview.html, docs/server.html.
   ========================================================================= */

:root {
    /* --- docs theme, verbatim --- */
    --color-bg: #121212;
    --color-bg-light: #181818;
    --color-bg-card: #1d1d22;
    --color-text: #ffffff;
    --color-text-muted: #a9a9bc;
    --color-primary: #1eaace;
    --color-secondary: #0693e3;
    --color-accent: #00d084;
    --color-warning: #ffb20e;
    --color-border: #3f3f50;

    /* --- diagram subsystem hues (extend the docs palette) --- */
    --k-hw: #ffb20e;   /* RF hardware / antennas / radios      */
    --k-ext: #b07cff;  /* helper processes, bridges, plug-ins  */
    --k-core: #1eaace; /* server core / control                */
    --k-dsp: #0693e3;  /* DSP, spectrum, I/Q                   */
    --k-decode: #00d084;/* decoders                            */
    --k-lab: #ffd166;  /* Lab measurement + instruments        */
    --k-tx: #ff6a5f;   /* transmit path                        */
    --k-net: #8ea9d0;  /* transport, router, ports             */
    --k-client: #e879b8;/* client surfaces                     */
    --k-store: #8b8b9e;/* persistence / files                  */

    --panel-w: 400px;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'SF Mono', monospace;
}

html[data-theme="light"] {
    --color-bg: #f4f6fa;
    --color-bg-light: #ffffff;
    --color-bg-card: #ffffff;
    --color-text: #12141a;
    --color-text-muted: #596074;
    --color-primary: #0b7f9e;
    --color-secondary: #0567a5;
    --color-accent: #00794f;
    --color-warning: #a06f05;
    --color-border: #ccd2e0;

    --k-hw: #a8700a;
    --k-ext: #7238d8;
    --k-core: #0b7f9e;
    --k-dsp: #0567a5;
    --k-decode: #00794f;
    --k-lab: #91680b;
    --k-tx: #cf3527;
    --k-net: #3f5c8c;
    --k-client: #a83377;
    --k-store: #5c6274;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- masthead */

.masthead {
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-bg) 100%);
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: blur(8px);
}

.masthead-inner {
    max-width: 1900px; margin: 0 auto;
    padding: 12px 26px;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}

/* The wordmark goes up to the site; the label beside it goes to the plate hub.
   Two destinations, one block, no extra clutter in the bar. */
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand svg { display: block; }

.brand-home {
    display: inline-flex; align-items: center; gap: 11px;
    text-decoration: none; color: inherit;
}
.brand-home:hover { text-decoration: none; }
.brand-home:hover .brand-name { color: var(--color-primary); }
.brand-mark { color: var(--color-primary); display: flex; }
.brand-name { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.2px; transition: color .16s; }
.brand-name span { color: var(--color-primary); }

/* the "leaves this section" hint, revealed on hover so it costs nothing at rest */
.brand-out {
    color: var(--color-text-muted); opacity: 0;
    transform: translate(-4px, 3px);
    transition: opacity .18s, transform .18s;
}
.brand-home:hover .brand-out { opacity: 1; transform: none; }

.brand-sub {
    font-size: 0.7rem; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600;
    padding-left: 13px; border-left: 1px solid var(--color-border);
    text-decoration: none; transition: color .16s;
}
.brand-sub:hover { color: var(--color-primary); text-decoration: none; }

.nav { display: flex; gap: 3px; flex-wrap: wrap; margin-left: auto; }
.nav a {
    font-size: 0.845rem; font-weight: 500; color: var(--color-text-muted);
    padding: 6px 12px; border-radius: 7px; border: 1px solid transparent;
    white-space: nowrap;
}
.nav a:hover { color: var(--color-text); background: var(--color-bg-card); text-decoration: none; }
.nav a.active {
    color: var(--color-primary);
    border-color: var(--color-border);
    background: var(--color-bg-card);
}

/* ----------------------------------------------------------------- toolbar */

.toolbar {
    max-width: 1900px; margin: 0 auto;
    padding: 12px 26px 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.tool {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 8px; padding: 7px 13px;
    font-size: 0.82rem; font-weight: 500; font-family: inherit;
    cursor: pointer; transition: all .15s;
}
.tool:hover { color: var(--color-text); border-color: var(--color-primary); }
.tool.on { color: var(--color-bg); background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
html[data-theme="light"] .tool.on { color: #fff; }
.tool svg { display: block; }

.tool-group { display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: var(--color-bg-card); }
.tool-group .tool { border: none; border-radius: 0; border-right: 1px solid var(--color-border); }
.tool-group .tool:last-child { border-right: none; }

.tool-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-text-muted); font-weight: 600; margin-right: -2px; }

.search-wrap { position: relative; display: inline-flex; align-items: center; }
.search-wrap svg { position: absolute; left: 11px; pointer-events: none; opacity: .55; }
.search {
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    color: var(--color-text); border-radius: 8px;
    padding: 7px 12px 7px 33px; font-size: 0.82rem; font-family: inherit;
    width: 210px; outline: none;
}
.search:focus { border-color: var(--color-primary); }
.search:placeholder { color: var(--color-text-muted); }

select.tool { -webkit-appearance: none; appearance: none; padding-right: 26px;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.zoom-readout { font-family: var(--font-mono); font-size: 0.76rem; color: var(--color-text-muted); min-width: 46px; text-align: center; }

/* ------------------------------------------------------------------- stage */

.stage {
    max-width: 1900px; margin: 0 auto;
    padding: 14px 26px 40px;
}

.canvas-frame {
    position: relative;
    background:
        radial-gradient(1200px 620px at 22% -6%, rgba(30,170,206,.10), transparent 62%),
        radial-gradient(1000px 560px at 88% 108%, rgba(232,121,184,.09), transparent 60%),
        var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.42);
}
html[data-theme="light"] .canvas-frame { box-shadow: 0 12px 40px rgba(20,30,60,.10); }

.canvas-frame svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.canvas-frame.panning svg { cursor: grabbing; }

/* ----------------------------------------------------------- svg internals */

.dg-title { font-weight: 700; letter-spacing: -0.6px; }
.dg-subtitle { font-weight: 400; }
.dg-meta { font-family: var(--font-mono); }
.dg-colhead { font-weight: 700; text-transform: uppercase; letter-spacing: 2.6px; }
.dg-grouplabel { font-weight: 700; text-transform: uppercase; letter-spacing: 2.1px; }
.dg-node-title { font-weight: 600; }
.dg-node-sub { font-weight: 400; }
.dg-badge-t { font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.dg-edge-label { font-weight: 600; }
.dg-note { font-weight: 400; font-style: italic; }

.node { cursor: pointer; }
.node .hit { fill: transparent; }
.node .node-bg { transition: filter .14s, opacity .14s; }
.node:hover .node-bg { filter: brightness(1.42); }
.node:hover .node-title { fill: var(--color-text); }

/* dim / highlight states driven by JS */
.dg-root.has-focus .node:not(.hot) { opacity: .17; }
.dg-root.has-focus .edge:not(.hot) { opacity: .07; }
.dg-root.has-focus .group:not(.hot) { opacity: .22; }
.dg-root.has-focus .decor { opacity: .2; }

.dg-root.searching .node:not(.match) { opacity: .13; }
.dg-root.searching .group:not(.match) { opacity: .25; }
.dg-root.searching .edge { opacity: .1; }
.dg-root.searching .node.match .node-bg { filter: brightness(1.55); }

.layer-off { display: none; }

.node.sel .node-bg { filter: brightness(1.6); }

.edge { pointer-events: none; }
.edge-hit { stroke: transparent; stroke-width: 16; fill: none; pointer-events: stroke; cursor: pointer; }

.edge-flow { display: none; }
body.flowing .edge-flow { display: inline; }
body.flowing .edge-flow { animation: dashmove 1.5s linear infinite; }
@keyframes dashmove { to { stroke-dashoffset: -46; } }

/* --------------------------------------------------------------- side panel */

.detail {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: var(--panel-w); max-width: 92vw;
    background: var(--color-bg-card);
    border-left: 1px solid var(--color-border);
    box-shadow: -22px 0 60px rgba(0,0,0,.5);
    transform: translateX(102%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    z-index: 60; overflow-y: auto; padding: 22px 24px 40px;
}
html[data-theme="light"] .detail { box-shadow: -18px 0 50px rgba(20,30,60,.13); }
.detail.open { transform: translateX(0); }

.detail-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: 1px solid var(--color-border); color: var(--color-text-muted);
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
}
.detail-close:hover { color: var(--color-text); border-color: var(--color-primary); }

.detail-kind {
    display: inline-block; font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    padding: 3px 10px; border-radius: 20px; margin-bottom: 11px;
}
.detail h2 { font-size: 1.28rem; font-weight: 700; line-height: 1.3; margin-bottom: 4px; padding-right: 34px; }
.detail .detail-sub { color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 16px; }
.detail p { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 14px; }
.detail p strong, .detail li strong { color: var(--color-text); font-weight: 600; }
.detail code {
    font-family: var(--font-mono); font-size: 0.82em;
    background: var(--color-bg); border: 1px solid var(--color-border);
    padding: 1px 5px; border-radius: 4px; color: var(--color-primary);
}
.detail h3 {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.7px;
    color: var(--color-text-muted); font-weight: 700;
    margin: 20px 0 9px; padding-bottom: 7px; border-bottom: 1px solid var(--color-border);
}
.detail ul { list-style: none; }
.detail li {
    color: var(--color-text-muted); font-size: 0.875rem;
    padding: 5px 0 5px 15px; position: relative; line-height: 1.55;
}
.detail li:before { content: '▸'; position: absolute; left: 0; color: var(--color-primary); }

.kv { display: grid; grid-template-columns: minmax(88px,auto) 1fr; gap: 5px 14px; font-size: 0.83rem; }
.kv dt { color: var(--color-text-muted); font-weight: 600; }
.kv dd { color: var(--color-text); font-family: var(--font-mono); font-size: 0.94em; word-break: break-word; }

.wire-list li { padding-left: 0; }
.wire-list li:before { content: none; }
.wire-chip {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 9px; border-radius: 7px; background: var(--color-bg);
    border: 1px solid var(--color-border); margin-bottom: 6px;
    font-size: 0.8rem; cursor: pointer;
}
.wire-chip:hover { border-color: var(--color-primary); }
.wire-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.wire-chip .wl { color: var(--color-text); font-weight: 500; }
.wire-chip .wr { color: var(--color-text-muted); margin-left: auto; font-family: var(--font-mono); font-size: 0.92em; }

/* --------------------------------------------------------------- hub cards */

.hero { padding: 64px 0 30px; text-align: center; background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-bg) 100%); }
.hero h1 { font-size: 2.7rem; font-weight: 700; line-height: 1.15; margin-bottom: 14px; letter-spacing: -1px; }
.hero h1 span { color: var(--color-primary); }
.hero p { font-size: 1.08rem; color: var(--color-text-muted); max-width: 780px; margin: 0 auto; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 26px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; margin: 34px 0 20px; }

.dcard {
    display: block; background: var(--color-bg-card);
    border: 1px solid var(--color-border); border-radius: 14px;
    padding: 0; overflow: hidden; color: inherit;
    transition: border-color .18s, transform .18s;
}
.dcard:hover { border-color: var(--color-primary); transform: translateY(-3px); text-decoration: none; }
.dcard .thumb { height: 132px; border-bottom: 1px solid var(--color-border); background: var(--color-bg); display: block; width: 100%; }
.dcard .body { padding: 18px 20px 20px; }
.dcard h3 { font-size: 1.06rem; font-weight: 650; margin-bottom: 7px; display: flex; align-items: center; gap: 9px; }
.dcard p { font-size: 0.885rem; color: var(--color-text-muted); line-height: 1.6; }
.dcard .tags { margin-top: 13px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px;
    padding: 3px 9px; border-radius: 20px;
    border: 1px solid var(--color-border); color: var(--color-text-muted);
}

.section-head { margin: 52px 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.section-head h2 { font-size: 1.45rem; font-weight: 650; }
.section-head p { color: var(--color-text-muted); font-size: 0.95rem; margin-top: 5px; }

.notebox {
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 10px; padding: 17px 20px; margin: 22px 0;
}
.notebox h4 { font-size: 0.94rem; font-weight: 650; margin-bottom: 6px; }
.notebox p { font-size: 0.885rem; color: var(--color-text-muted); }
.notebox p + p { margin-top: 8px; }
.notebox code { font-family: var(--font-mono); font-size: 0.84em; color: var(--color-primary); }

footer.page-foot {
    border-top: 1px solid var(--color-border);
    margin-top: 56px; padding: 26px 0;
    text-align: center; color: var(--color-text-muted); font-size: 0.83rem;
}

.legend-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.lchip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: 20px; padding: 5px 13px 5px 9px;
    font-size: 0.775rem; font-weight: 500; color: var(--color-text-muted);
    cursor: pointer; user-select: none; transition: all .15s;
}
.lchip:hover { color: var(--color-text); }
.lchip .sw { width: 11px; height: 11px; border-radius: 4px; }
.lchip.off { opacity: .38; }
.lchip.off .sw { background: transparent !important; box-shadow: inset 0 0 0 2px currentColor; }

.hint { color: var(--color-text-muted); font-size: 0.78rem; margin-top: 11px; display: flex; gap: 16px; flex-wrap: wrap; }
.hint kbd {
    font-family: var(--font-mono); font-size: 0.92em; background: var(--color-bg-card);
    border: 1px solid var(--color-border); border-bottom-width: 2px;
    padding: 1px 6px; border-radius: 4px; color: var(--color-text);
}

/* ----------------------------------------------- embedded in a host page */
/* Set by chrome.js when the plate is inside an iframe (or ?embed=1): the host
   page already supplies the site chrome, so we contribute only the plate. */

/* The background stays the theme's own: the toolbar controls are drawn for it,
   and a self-consistent block sits better on an unknown host page than a
   transparent one whose controls fight the host's colours. */
body.embedded .toolbar { padding: 10px 12px 0; max-width: none; }
body.embedded .stage { padding: 10px 12px 14px; max-width: none; }
body.embedded .canvas-frame { border-radius: 10px; }
body.embedded .hint { padding: 0 2px; margin-top: 9px; }
body.embedded .embed-anchor { display: none; }

/* ------------------------------------------------------------------- print */

@media print {
   :root { --panel-w: 0px; }
    html, body { background: var(--color-bg) !important; }
    body { font-size: 12px; }
    .masthead, .toolbar, .detail, .hint, .page-foot, .no-print { display: none !important; }
    .stage { max-width: none; padding: 0; margin: 0; }
    .canvas-frame { border: none; border-radius: 0; box-shadow: none; background: var(--color-bg) !important; }
    .canvas-frame svg { width: 100%; height: auto; }
    .dg-root { transform: none !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    a[href]:after { content: none !important; }
    .wrap { max-width: none; }
}

@media (max-width: 900px) {
    .nav { width: 100%; margin-left: 0; }
    .hero h1 { font-size: 2rem; }
    .search { width: 150px; }
}