/* ================================================================================================
   Breivax Architecture Explorer — the map
   Layout for the canvas, the cards on it, and the detail rail beside it.
   ================================================================================================ */

.explore {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.explore-head {
    padding: 22px 28px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.explore-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.explore-title {
    font-size: 24px;
}

.explore-summary {
    margin-top: 5px;
    max-width: 76ch;
    color: var(--text-muted);
}

.explore-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    flex: 1;
    min-height: 0;
}

/* Breadcrumbs ------------------------------------------------------------------------------------ */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 12px;
}

.crumb {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-faint);
    cursor: pointer;
    transition: color 140ms var(--ease);
}

a.crumb:hover,
button.crumb:hover {
    color: var(--accent);
    text-decoration: none;
}

.crumb.is-current {
    color: var(--text);
    font-weight: 500;
    cursor: default;
}

.crumb-sep {
    color: var(--text-faint);
    opacity: 0.5;
}

/* ------------------------------------------------------------------------------------------------
   Canvas
   ------------------------------------------------------------------------------------------------ */

.map {
    position: relative;
    min-width: 0;
    background:
        radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 22px 22px,
        var(--surface-sunken);
    overflow: hidden;
}

/* Scrolls natively until the canvas script attaches, which then takes the scrollbar away and
   replaces it with pan and zoom. Progressive enhancement rather than decoration: if the circuit is
   slow to connect, or JavaScript never runs at all, the whole map is still reachable. */
.map-viewport {
    position: absolute;
    inset: 0;
    overflow: auto;
    touch-action: auto;
}

.map-viewport.is-interactive {
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.map-viewport.is-panning {
    cursor: grabbing;
}

.map-stage {
    width: 100%;
    min-height: 100%;
    transform-origin: 0 0;
    will-change: transform;
}

.map-plane {
    min-height: 100%;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Drilling in and stepping back are different movements, so they are animated differently: going
   deeper the new plane grows into place, coming back out it settles down onto the map. */
.map-plane.is-entering-deeper {
    animation: plane-in-deeper 300ms var(--ease);
}

.map-plane.is-entering-shallower {
    animation: plane-in-shallower 300ms var(--ease);
}

@keyframes plane-in-deeper {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes plane-in-shallower {
    from { opacity: 0; transform: scale(1.06); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .map-plane.is-entering-deeper,
    .map-plane.is-entering-shallower {
        animation: none;
    }
}

.map-controls {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: flex;
    gap: 5px;
    padding: 4px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.map-hint {
    position: absolute;
    left: 16px;
    bottom: 20px;
    z-index: 5;
    color: var(--text-faint);
    font-size: 11px;
    pointer-events: none;
    opacity: 0.75;
}

.map-empty {
    margin: auto;
    max-width: 380px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-empty-title {
    font-weight: 600;
    font-size: 16px;
}

.map-empty-body {
    color: var(--text-faint);
}

.map-hidden-note {
    margin-top: 4px;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-strong);
    color: var(--text-faint);
    font-size: 12px;
}

/* ------------------------------------------------------------------------------------------------
   Level zero: layer bands
   ------------------------------------------------------------------------------------------------ */

.layer-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.layer-band {
    --band: var(--accent-slate);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 3px solid var(--band);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.layer-band:hover {
    box-shadow: var(--shadow-sm);
}

.accent-cerulean { --band: var(--accent-cerulean); }
.accent-emerald  { --band: var(--accent-emerald); }
.accent-amber    { --band: var(--accent-amber); }
.accent-violet   { --band: var(--accent-violet); }
.accent-steel    { --band: var(--accent-steel); }
.accent-teal     { --band: var(--accent-teal); }
.accent-slate    { --band: var(--accent-slate); }

.layer-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    transition: background 140ms var(--ease);
}

.layer-head:hover {
    background: var(--surface-hover);
}

.layer-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--band) 16%, transparent);
    color: var(--band);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.layer-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.layer-name {
    font-weight: 600;
    font-size: 14px;
}

.layer-summary {
    color: var(--text-faint);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-open {
    margin-left: auto;
    color: var(--text-faint);
    display: flex;
    transition: transform 160ms var(--ease), color 160ms var(--ease);
}

.layer-head:hover .layer-open {
    transform: translateX(2px);
    color: var(--band);
}

.layer-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 16px 14px 50px;
}

.module-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-sunken);
    font: inherit;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 140ms var(--ease), color 140ms var(--ease),
                background 140ms var(--ease), transform 140ms var(--ease);
}

.module-chip:hover {
    border-color: var(--band);
    color: var(--text);
    background: var(--surface);
    transform: translateY(-1px);
}

.module-chip.is-selected {
    border-color: var(--band);
    background: color-mix(in srgb, var(--band) 12%, var(--surface));
    color: var(--text);
    font-weight: 500;
}

.module-chip.is-locked {
    cursor: default;
    border-style: dashed;
    color: var(--text-faint);
    font-size: 11.5px;
}

.module-chip.is-locked:hover {
    transform: none;
    border-color: var(--border);
    background: var(--surface-sunken);
}

/* ------------------------------------------------------------------------------------------------
   Deeper levels: node cards
   ------------------------------------------------------------------------------------------------ */

.node-grid {
    display: grid;
    gap: 12px;
}

.node-grid-roomy {
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.node-grid-dense {
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
}

.node-card {
    --band: var(--accent-slate);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    font: inherit;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.node-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.node-card.is-selected {
    border-color: var(--band);
    box-shadow: 0 0 0 1px var(--band);
}

.node-card-rule {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--band);
    opacity: 0.7;
}

.node-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.node-card-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
}

.node-card-summary {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.node-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
    color: var(--text-faint);
    font-size: 11.5px;
}

/* Separator only when something precedes it. A viewer who cannot see the component count would
   otherwise get a card footer that opens with a stray bullet. */
.node-card-adrs:not(:first-child)::before {
    content: '·';
    margin-right: 10px;
}

.node-card.can-drill .node-card-name::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 7px;
    border-top: 1.5px solid var(--band);
    border-right: 1.5px solid var(--band);
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.8;
}

/* ------------------------------------------------------------------------------------------------
   Detail rail
   ------------------------------------------------------------------------------------------------ */

.detail {
    border-left: 1px solid var(--border);
    background: var(--surface);
    overflow-y: auto;
    padding: 24px 24px 80px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.detail-head {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.detail-kind {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
}

.detail-title {
    font-size: 19px;
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.detail-summary {
    color: var(--text-muted);
    line-height: 1.65;
}

.detail-lens-note {
    padding-top: 9px;
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 12px;
}

.detail-lens-note .link-button {
    margin-left: 6px;
    font-size: 12px;
}

.detail-sections {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.detail-empty {
    color: var(--text-faint);
}

.content-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
}

.section-empty {
    color: var(--text-faint);
    font-size: 12px;
    font-style: italic;
}

.content-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-muted);
}

.content-list li::marker {
    color: var(--text-faint);
}

.content-list p {
    margin: 0;
}

.content-facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content-facts .fact {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
}

.content-facts dt {
    color: var(--text-faint);
    font-size: 12px;
}

.content-facts dd {
    margin: 0;
    color: var(--text);
    word-break: break-word;
}

.link-list,
.adr-list,
.adr-index {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.link-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.link-chip {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-sunken);
    font: inherit;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 140ms var(--ease);
}

button.link-chip:hover,
a.link-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.link-chip.is-static {
    cursor: default;
    color: var(--text-faint);
}

.link-note {
    color: var(--text-faint);
    font-size: 12px;
}

.adr-chip {
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
}

.adr-chip:hover {
    text-decoration: none;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.adr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: border-color 140ms var(--ease), background 140ms var(--ease);
}

.adr-row:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    text-decoration: none;
}

.adr-id {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-faint);
    flex-shrink: 0;
}

.adr-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adr-locked {
    font-size: 11px;
    color: var(--text-faint);
    white-space: nowrap;
}

.detail-provenance {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11.5px;
}

.provenance-label {
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 10px;
}

.detail-provenance code {
    color: var(--text-muted);
    word-break: break-all;
}

/* ------------------------------------------------------------------------------------------------
   Gates
   ------------------------------------------------------------------------------------------------ */

.lock-notice {
    display: flex;
    gap: 11px;
    padding: 14px;
    border-radius: var(--radius);
    border: 1px dashed var(--border-strong);
    background: var(--surface-sunken);
}

.lock-icon {
    color: var(--text-faint);
    flex-shrink: 0;
    padding-top: 1px;
}

.lock-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lock-title {
    font-weight: 600;
    font-size: 13px;
}

.lock-text {
    color: var(--text-faint);
    font-size: 12.5px;
    line-height: 1.55;
}

.lock-action {
    align-self: flex-start;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--accent);
    cursor: pointer;
}

/* ------------------------------------------------------------------------------------------------
   Diagrams
   ------------------------------------------------------------------------------------------------ */

.diagram {
    margin: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-sunken);
    overflow: hidden;
}

.diagram-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px 7px 12px;
    border-bottom: 1px solid var(--border);
}

.diagram-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.diagram-toggle {
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    font: inherit;
    font-size: 11.5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.diagram-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.diagram-surface {
    padding: 14px;
    overflow: auto;
}

/* A real decomposition has no business being squeezed into the rail width: the surface scrolls
   rather than shrinking the diagram to the point where its labels stop being readable. */
.diagram-surface svg {
    min-width: 460px;
    max-width: none;
    height: auto;
    display: block;
    margin: 0 auto;
}

.diagram.is-expanded {
    position: fixed;
    inset: 4vh 4vw;
    z-index: 70;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.diagram.is-expanded .diagram-surface {
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
}

.diagram.is-expanded .diagram-surface svg {
    min-width: 0;
    width: 100%;
    max-height: 100%;
}

.scrim.is-visible {
    z-index: 65;
    background: rgba(3, 9, 20, 0.62);
    backdrop-filter: blur(2px);
}

.diagram-fallback {
    margin-top: 10px;
    color: var(--text-faint);
    font-size: 12px;
}

.diagram-fallback pre {
    margin-top: 8px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow-x: auto;
}

/* ------------------------------------------------------------------------------------------------
   Access tiers
   ------------------------------------------------------------------------------------------------ */

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 12px;
}

.tier-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}

.tier-card.is-you {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.tier-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tier-you {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
}

.tier-desc {
    color: var(--text-muted);
    font-size: 13px;
}

.tier-sees {
    margin: 0;
    padding-left: 17px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.tier-sees li::marker {
    color: var(--text-faint);
}

/* ------------------------------------------------------------------------------------------------
   Roadmap
   ------------------------------------------------------------------------------------------------ */

.filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-count {
    color: var(--text-faint);
    font-size: 12px;
    white-space: nowrap;
}

.phase-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.phase {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 16px;
}

.phase-marker {
    position: relative;
    display: flex;
    justify-content: center;
}

.phase-marker span {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--bg);
}

.phase-marker::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -4px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--border);
}

.phase:first-child .phase-marker::before {
    top: 12px;
}

.phase:last-child .phase-marker::before {
    bottom: auto;
    height: 12px;
}

.phase-done .phase-marker span {
    border-color: var(--positive);
    background: var(--positive);
}

.phase-active .phase-marker span {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.phase-body {
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.phase-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.phase-name {
    font-size: 17px;
}

.phase-goal {
    color: var(--text-muted);
    max-width: 68ch;
}

.phase-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.phase-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
}

.phase-item-title {
    font-weight: 500;
    font-size: 13px;
}

.phase-item-detail {
    color: var(--text-faint);
    font-size: 12.5px;
    line-height: 1.55;
}

.phase-item.state-done {
    border-left: 2px solid var(--positive);
}

.phase-item.state-active {
    border-left: 2px solid var(--accent);
}

.phase-exit {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.phase-exit-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: 6px;
}

.phase-exit ul {
    margin: 0;
    padding-left: 17px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* ------------------------------------------------------------------------------------------------
   Content health
   ------------------------------------------------------------------------------------------------ */

.health-count {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
}

.health-count.is-clean {
    background: var(--positive-soft);
    color: var(--positive);
}

.health-count.is-flagged {
    background: var(--caution-soft);
    color: var(--caution);
}

.health-clean {
    color: var(--text-faint);
    font-size: 13px;
}

.health-explanation {
    color: var(--text-muted);
    font-size: 13px;
}

.health-items {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: 13px;
}

.reload-message {
    color: var(--text-muted);
    font-size: 13px;
}

.reload-message.is-error {
    color: var(--danger);
}

/* ------------------------------------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 1180px) {
    .explore-body {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

@media (max-width: 940px) {
    /* Stacked, the two panes cannot each own a scrollbar, so the page takes it back. */
    .explore {
        overflow-y: auto;
    }

    .explore-body {
        display: flex;
        flex-direction: column;
    }

    .map {
        height: 62vh;
        flex: none;
    }

    .detail {
        border-left: 0;
        border-top: 1px solid var(--border);
        overflow-y: visible;
    }

    .topnav {
        display: none;
    }

    .explore-head {
        padding: 16px 18px 14px;
    }

    .viewer-name {
        display: none;
    }
}

/* Prose that sits under a table or diagram: the part the structure could not express. */
.section-note {
    padding-left: 12px;
    border-left: 2px solid var(--border);
    font-size: 13px;
}