/* 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;
}

/* The viewport is the whole canvas: one element takes every pointer event, and the
   transform layer under it carries pan and zoom. Nothing inside is a hit target. */
.arch-canvas-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    touch-action: none;
    cursor: default;
    background: var(--workspace-bg);
    color: var(--workspace-text);
    border: 1px solid var(--workspace-border);
    border-radius: 8px;
}

.arch-canvas-viewport:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: -2px; }

/* Inert on purpose: with no child taking the event, the viewport is always the target and
   a pointer's offsetX is already viewport-local, which is what makes hit-testing arithmetic. */
.arch-canvas-transform {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

/* The wrapper itself must not swallow clicks meant for the canvas behind it. */
.arch-canvas-chrome { position: absolute; inset: 0; pointer-events: none; }
.arch-canvas-chrome > * { pointer-events: auto; }

/* Selection chrome sits above the transform layer in screen space, so a handle stays
   the same size however far the canvas is zoomed out. */
.arch-selection {
    position: absolute;
    pointer-events: none;
    border: 1.5px solid var(--workspace-accent);
    border-radius: 4px;
}

.arch-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    pointer-events: none;
    background: var(--workspace-surface);
    border: 1.5px solid var(--workspace-accent);
    border-radius: 2px;
}

.arch-marquee {
    position: absolute;
    pointer-events: none;
    border: 1px dashed var(--workspace-accent);
    background: color-mix(in srgb, var(--workspace-accent) 12%, transparent);
}

.arch-guide {
    position: absolute;
    pointer-events: none;
    background: var(--workspace-accent);
}

.arch-guide-vertical { top: 0; bottom: 0; width: 1px; }
.arch-guide-horizontal { left: 0; right: 0; height: 1px; }

.arch-canvas-controls {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--workspace-surface);
    border: 1px solid var(--workspace-border);
    border-radius: 8px;
}

.arch-canvas-controls button {
    min-width: 30px;
    padding: 3px 8px;
    background: transparent;
    color: var(--workspace-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
}

.arch-canvas-controls button:hover:not(:disabled) { background: var(--workspace-surface-soft); }
.arch-canvas-controls button:disabled { opacity: 0.4; cursor: default; }

.arch-zoom-readout {
    min-width: 44px;
    text-align: center;
    font-size: 11px;
    color: var(--workspace-text-muted);
}

/* ── Style island ────────────────────────────────────────────────────────── */

.arch-style-island {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--workspace-surface);
    border: 1px solid var(--workspace-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.arch-style-row { display: flex; gap: 4px; }

.arch-swatch {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--workspace-border);
    border-radius: 50%;
    cursor: pointer;
}

.arch-swatch.is-active { outline: 2px solid var(--workspace-accent); outline-offset: 1px; }

.arch-stroke,
.arch-dash {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    background: var(--workspace-surface-alt);
    color: var(--workspace-text-muted);
    border: 1px solid var(--workspace-border);
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
}

.arch-stroke span {
    display: block;
    width: 14px;
    background: var(--workspace-text);
}

.arch-stroke.is-active,
.arch-dash.is-active {
    border-color: var(--workspace-accent);
    color: var(--workspace-text);
}

/* ── 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; }
}