/* Architecture diagram tool.
   Palette comes from the active theme via the --workspace-* variables, the same
   set text-compare.css uses. No hard-coded colours: an invented variable name
   silently falls back to its literal, which is what broke light theme before. */

/* ── Topbar ──────────────────────────────────────────────────────────────────
   The .workspace-* chrome is scoped per page (see the note at the top of
   text-compare.css), so this page carries its own copy. Unlike the siblings,
   the kicker pill here is built from theme variables rather than hard-coded
   rgba(255,255,255,…), which is invisible against a light surface.
   ────────────────────────────────────────────────────────────────────────── */

.arch-page {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
    padding-top: 4px;
    overflow: hidden;
}

.arch-page .workspace-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid var(--workspace-border);
    border-radius: 18px;
    background: var(--workspace-surface);
}

.arch-page .workspace-title-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.arch-page .workspace-kicker-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.arch-page .workspace-kicker {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--workspace-surface-soft);
    border: 1px solid var(--workspace-border);
    color: var(--workspace-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.arch-page .workspace-kicker-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--workspace-accent);
    flex: none;
}

.arch-page .workspace-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 11px;
    color: var(--workspace-text-muted);
}

.arch-page .workspace-breadcrumb a {
    color: var(--workspace-text-muted);
    text-decoration: none;
    border-radius: 4px;
}

.arch-page .workspace-breadcrumb a:hover {
    color: var(--workspace-text);
    text-decoration: underline;
}

.arch-page .workspace-breadcrumb a:focus-visible {
    outline: 2px solid var(--workspace-accent);
    outline-offset: 2px;
}

/* dark.css and light.css both declare `.theme-* span { color: var(--bepa-text) !important }`.
   That blanket rule outranks any plain declaration, so every span here that is meant to
   be muted, subtle or accented has to restate its colour at the same weight. Selector
   specificity (0,2,0) then decides. text-compare.css solves the same problem the same way. */
.arch-page .workspace-breadcrumb-sep { color: var(--workspace-text-subtle) !important; }

.arch-page .workspace-breadcrumb-current {
    color: var(--workspace-accent) !important;
    font-weight: 700;
}

.arch-page .workspace-heading-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.arch-page .workspace-heading-row h1 {
    margin: 0;
    color: var(--workspace-text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.arch-page .workspace-subtitle {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--workspace-text-muted);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arch-page .workspace-topbar-meta {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.arch-page .workspace-status-card {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 220px;
    padding: 6px 10px;
    border-radius: 12px;
    background: var(--workspace-surface-soft);
    border: 1px solid var(--workspace-border);
}

.arch-page .workspace-status-card .mud-icon-root { font-size: 17px !important; }

.arch-page .workspace-status-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.arch-page .workspace-status-copy span {
    color: var(--workspace-text-muted) !important;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.arch-page .workspace-status-copy strong {
    color: var(--workspace-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

/* ── Panes ───────────────────────────────────────────────────────────────── */

.arch-page .pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.arch-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 320px;
    gap: 12px;
    min-height: 0;
    flex: 1;
}

.arch-assets,
.arch-side {
    background: var(--workspace-surface);
    color: var(--workspace-text);
    border: 1px solid var(--workspace-border);
    border-radius: 8px;
    padding: 12px;
    overflow-y: auto;
}

.arch-pane-title { font-weight: 600; font-size: 14px; }

.arch-asset-filter,
.arch-field input,
.arch-field select {
    width: 100%;
    padding: 6px 8px;
    background: var(--workspace-surface-alt);
    color: var(--workspace-text);
    border: 1px solid var(--workspace-border);
    border-radius: 6px;
}

.arch-asset-group-btn {
    width: 100%;
    margin-top: 10px;
    padding: 6px 8px;
    background: var(--workspace-surface-alt);
    color: var(--workspace-text);
    border: 1px solid var(--workspace-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.arch-asset-group-btn:hover { background: var(--workspace-surface-soft); }

.arch-asset-group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--workspace-text-subtle);
    margin: 14px 0 6px;
}

.arch-asset {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--workspace-text);
    text-align: left;
    cursor: pointer;
}

.arch-asset:hover { background: var(--workspace-surface-soft); }

.arch-asset-dot {
    width: 12px;
    height: 12px;
    border: 1px solid var(--workspace-text-muted);
    flex: none;
}

.arch-asset-dot.arch-shape-cylinder { border-radius: 40%; }
.arch-asset-dot.arch-shape-rounded  { border-radius: 50%; }
.arch-asset-dot.arch-shape-hexagon  { transform: rotate(45deg); }

.arch-field { display: block; margin: 12px 0; font-size: 13px; }
.arch-field span { display: block; margin-bottom: 4px; color: var(--workspace-text-muted) !important; }

.arch-toggles label { display: block; font-size: 13px; margin: 6px 0; }

.arch-link-btn {
    background: none;
    border: none;
    color: var(--workspace-accent);
    cursor: pointer;
    padding: 0;
    font-size: 13px;
}

/* ── Canvas ──────────────────────────────────────────────────────────────── */

.arch-canvas-pane { display: flex; flex-direction: column; min-width: 0; touch-action: none; }

.arch-canvas-toolbar { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }

.arch-canvas-toolbar button,
.arch-upload-label {
    padding: 5px 10px;
    background: var(--workspace-surface);
    color: var(--workspace-text);
    border: 1px solid var(--workspace-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.arch-canvas-toolbar button:hover,
.arch-upload-label:hover { background: var(--workspace-surface-soft); }

/* The real file input is hidden; the label is the button, as elsewhere on the site. */
.arch-upload-label input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.arch-canvas-scroll {
    flex: 1;
    overflow: auto;
    background: var(--workspace-bg);
    color: var(--workspace-text);
    border: 1px solid var(--workspace-border);
    border-radius: 8px;
}

.arch-canvas-stack { position: relative; }

.arch-hit { position: absolute; cursor: grab; }
.arch-hit:active { cursor: grabbing; }
.arch-hit-group { cursor: move; }

/* ── SVG ─────────────────────────────────────────────────────────────────── */

.arch-node-body {
    fill: var(--workspace-surface);
    stroke: var(--workspace-border-strong);
    stroke-width: 1.5;
}

.arch-node-body-top {
    fill: var(--workspace-surface-soft);
    stroke: var(--workspace-border-strong);
}

.arch-node-label { fill: var(--workspace-text); font-size: 13px; font-weight: 600; }
.arch-node-caption { fill: var(--workspace-text-muted); font-size: 11px; }

.arch-node-untyped .arch-node-body { stroke-dasharray: 4 3; }
.arch-node-selected .arch-node-body { stroke: var(--workspace-accent); stroke-width: 2.5; }
.arch-node-highlighted .arch-node-body { stroke: var(--workspace-warning); stroke-width: 2.5; }

.arch-group-body { fill: none; stroke: var(--workspace-border-strong); stroke-width: 1.5; }
.arch-group-public .arch-group-body { stroke: var(--workspace-warning); stroke-dasharray: 6 4; }
.arch-group-label { fill: var(--workspace-text-muted); font-size: 12px; }

.arch-edge { stroke: var(--workspace-text-muted); stroke-width: 1.5; }
.arch-arrowhead { fill: var(--workspace-text-muted); }
.arch-edge-label { fill: var(--workspace-text-muted); font-size: 11px; }

/* ── Source and issues ───────────────────────────────────────────────────── */

.arch-tabs { display: flex; gap: 4px; margin-bottom: 10px; }

.arch-tabs button {
    flex: 1;
    padding: 6px;
    background: none;
    border: 1px solid var(--workspace-border);
    border-radius: 6px;
    color: var(--workspace-text);
    cursor: pointer;
    font-size: 13px;
}

.arch-tabs button.active { background: var(--workspace-surface-soft); }

/* Both themes force `textarea { background/color/border-color: … !important }`,
   so those are left to the theme rather than fought — the same choice
   text-compare.css makes for its editor. */
.arch-source {
    width: 100%;
    min-height: 420px;
    padding: 10px;
    border: 1px solid var(--workspace-border);
    border-radius: 6px;
    font-family: var(--workspace-mono-font);
    font-size: 12.5px;
    resize: vertical;
}

.arch-finding {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--workspace-surface-alt);
    border: 1px solid var(--workspace-border);
    border-left-width: 3px;
    border-radius: 6px;
    color: var(--workspace-text);
    cursor: pointer;
    font-size: 12.5px;
}

.arch-finding:hover { background: var(--workspace-surface-soft); }

/* Low uses the accent rather than --workspace-info: the dark theme defines info
   as a near-white grey, which would make Low and Info indistinguishable there. */
.arch-finding.sev-high   { border-left-color: var(--workspace-danger); }
.arch-finding.sev-medium { border-left-color: var(--workspace-warning); }
.arch-finding.sev-low    { border-left-color: var(--workspace-accent); }
.arch-finding.sev-info   { border-left-color: var(--workspace-text-subtle); }

.arch-finding-sev {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--workspace-text-muted) !important;
    margin-bottom: 3px;
}

.arch-empty { font-size: 13px; color: var(--workspace-text-muted); }

.arch-warnings {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--workspace-border);
    font-size: 12px;
    color: var(--workspace-text-muted);
}

@media (max-width: 1100px) {
    .arch-shell { grid-template-columns: 1fr; }
    .arch-canvas-scroll { min-height: 420px; }
}