/* ================================================================================================
   Breivax Architecture Explorer — foundation
   Tokens, reset, typography and the shared controls. The map itself lives in explorer.css.

   Colour is defined once, on :root, in light. Dark redefines only the tokens, so no component
   below ever needs to know which theme it is in.
   ================================================================================================ */

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Brand, from the Breivax logo: navy, cerulean, lime. */
    --brand-navy: #0b1f3a;
    --brand-cerulean: #0058f8;
    --brand-lime: #08f008;

    --bg: #f4f7fc;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #edf1f8;
    --surface-hover: #f7f9fd;

    --border: rgba(11, 31, 58, 0.10);
    --border-strong: rgba(11, 31, 58, 0.20);

    --text: #0b1f3a;
    --text-muted: #4a5f7d;
    --text-faint: #7d8ea7;

    --accent: #0058f8;
    --accent-hover: #0047c8;
    --accent-soft: rgba(0, 88, 248, 0.10);
    --accent-contrast: #ffffff;

    --positive: #0f8a4d;
    --positive-soft: rgba(15, 138, 77, 0.12);
    --caution: #a8690a;
    --caution-soft: rgba(168, 105, 10, 0.12);
    --neutral-soft: rgba(11, 31, 58, 0.07);
    --danger: #c02b2b;

    /* Layer accents. Six, matching the six layers of the level zero diagram. */
    --accent-cerulean: #0058f8;
    --accent-emerald: #0f9d58;
    --accent-amber: #c07807;
    --accent-violet: #6d43d1;
    --accent-steel: #55708f;
    --accent-teal: #0d8a8a;
    --accent-slate: #55708f;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 3px rgba(11, 31, 58, 0.04);
    --shadow: 0 4px 16px rgba(11, 31, 58, 0.08);
    --shadow-lg: 0 18px 48px rgba(11, 31, 58, 0.16);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    --topbar-height: 60px;
    color-scheme: light;
}

:root[data-theme='dark'] {
    --bg: #060f1e;
    --surface: #0b1a30;
    --surface-raised: #102544;
    --surface-sunken: #081426;
    --surface-hover: #13294a;

    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);

    --text: #e6edf7;
    --text-muted: #a3b4cc;
    --text-faint: #6f829c;

    --accent: #5b96ff;
    --accent-hover: #7dadff;
    --accent-soft: rgba(91, 150, 255, 0.14);
    --accent-contrast: #04101f;

    --positive: #3ecf7a;
    --positive-soft: rgba(62, 207, 122, 0.14);
    --caution: #e0a44a;
    --caution-soft: rgba(224, 164, 74, 0.14);
    --neutral-soft: rgba(255, 255, 255, 0.07);
    --danger: #ff6b6b;

    --accent-cerulean: #5b96ff;
    --accent-emerald: #3ecf7a;
    --accent-amber: #e0a44a;
    --accent-violet: #a68bff;
    --accent-steel: #8ba3c0;
    --accent-teal: #3fc6c6;
    --accent-slate: #8ba3c0;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 600;
}

p {
    margin: 0;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code, pre {
    font-family: var(--font-mono);
    font-size: 0.86em;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: var(--accent-soft);
}

/* ------------------------------------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------------------------------------ */

/* The shell is exactly one viewport tall and never scrolls itself. Scrolling belongs to the pane
   that owns the content: the detail rail on the explorer, the document body on every other page.
   Without this the whole page grows to the height of the longest rail, the map viewport grows with
   it, and fitting the map to the viewport stops meaning anything. */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

.app-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ------------------------------------------------------------------------------------------------
   Top bar
   ------------------------------------------------------------------------------------------------ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--topbar-height);
    padding: 0 20px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}

.brand:hover {
    text-decoration: none;
}

.brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--brand-cerulean) 0%, var(--brand-lime) 140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.brand-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
}

.brand-text strong {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.brand-text span {
    color: var(--text-faint);
}

.topnav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}

.topnav-link {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 500;
    transition: color 140ms var(--ease), background 140ms var(--ease);
}

.topnav-link:hover {
    color: var(--text);
    background: var(--neutral-soft);
    text-decoration: none;
}

.topnav-link.active {
    color: var(--text);
    background: var(--neutral-soft);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* ------------------------------------------------------------------------------------------------
   Controls
   ------------------------------------------------------------------------------------------------ */

.primary-button,
.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 140ms var(--ease), border-color 140ms var(--ease), transform 140ms var(--ease);
}

.primary-button {
    background: var(--accent);
    color: var(--accent-contrast);
}

.primary-button:hover:not(:disabled) {
    background: var(--accent-hover);
    text-decoration: none;
}

.primary-button:disabled {
    opacity: 0.55;
    cursor: default;
}

.ghost-button {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}

.ghost-button:hover {
    background: var(--surface-hover);
    text-decoration: none;
}

.is-block {
    width: 100%;
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}

.icon-button:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.text-input {
    width: 100%;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.text-input::placeholder {
    color: var(--text-faint);
}

/* Lens toggle ------------------------------------------------------------------------------------ */

.lens-toggle {
    position: relative;
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-sunken);
}

.lens-toggle-rail {
    position: absolute;
    inset: 3px;
    pointer-events: none;
}

.lens-toggle-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 260ms var(--ease);
}

.lens-toggle-thumb.is-right {
    transform: translateX(100%);
}

.lens-toggle-option {
    position: relative;
    z-index: 1;
    min-width: 78px;
    padding: 5px 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-faint);
    cursor: pointer;
    transition: color 180ms var(--ease);
}

.lens-toggle-option.is-active {
    color: var(--text);
}

/* Viewer menu ------------------------------------------------------------------------------------ */

.viewer-menu {
    position: relative;
}

.viewer-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font: inherit;
    color: var(--text);
    cursor: pointer;
    transition: border-color 140ms var(--ease);
}

.viewer-trigger:hover {
    border-color: var(--border-strong);
}

.viewer-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 13px;
}

.tier-badge {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--neutral-soft);
    color: var(--text-muted);
}

.tier-badge.tier-partner {
    background: var(--accent-soft);
    color: var(--accent);
}

.tier-badge.tier-developer {
    background: var(--positive-soft);
    color: var(--positive);
}

.tier-badge.tier-admin {
    background: var(--caution-soft);
    color: var(--caution);
}

.preview-flag,
.demo-flag {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--caution-soft);
    color: var(--caution);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.viewer-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 288px;
    padding: 4px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    animation: menu-in 160ms var(--ease);
}

@keyframes menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.viewer-panel-head {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border);
}

.viewer-panel-title {
    font-weight: 600;
}

.viewer-panel-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 12px;
}

.viewer-panel-section {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.viewer-panel-hint {
    color: var(--text-faint);
    font-size: 12px;
    line-height: 1.5;
}

.preview-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.preview-option {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 140ms var(--ease), color 140ms var(--ease);
}

.preview-option:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.preview-option.is-active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.demo-signin {
    display: grid;
    gap: 6px;
}

.viewer-panel-foot {
    display: block;
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 12px;
}

.scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
}

/* ------------------------------------------------------------------------------------------------
   Document pages
   ------------------------------------------------------------------------------------------------ */

.doc {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 24px 96px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.doc-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-head h1 {
    font-size: 30px;
}

.doc-lede {
    color: var(--text-muted);
    font-size: 15px;
    max-width: 68ch;
}

.notice-page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-width: 560px;
    margin: 96px auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.notice-page h1 {
    font-size: 26px;
}

.notice-page p {
    color: var(--text-muted);
}

.notice-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Prose ------------------------------------------------------------------------------------------ */

.prose {
    color: var(--text-muted);
    line-height: 1.7;
}

.prose > * + * {
    margin-top: 12px;
}

.prose strong {
    color: var(--text);
    font-weight: 600;
}

.prose ul,
.prose ol {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prose code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface-sunken);
    color: var(--text);
}

.prose pre {
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--surface-sunken);
    overflow-x: auto;
}

.prose blockquote {
    margin: 0;
    padding-left: 16px;
    border-left: 2px solid var(--border-strong);
    color: var(--text-faint);
}

.prose h2 {
    margin-top: 24px;
    font-size: 18px;
    color: var(--text);
}

.prose h3 {
    margin-top: 20px;
    font-size: 15px;
    color: var(--text);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.prose th,
.prose td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.prose th {
    color: var(--text);
    font-weight: 600;
}

/* Tables ----------------------------------------------------------------------------------------- */

.table-scroll {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.content-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.content-table th,
.content-table td {
    padding: 9px 13px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.content-table th {
    background: var(--surface-sunken);
    font-weight: 600;
    white-space: nowrap;
}

.content-table tr:last-child td {
    border-bottom: 0;
}

.content-table td p {
    margin: 0;
}

/* Status and meta -------------------------------------------------------------------------------- */

.status-chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--neutral-soft);
    color: var(--text-muted);
}

.status-chip.status-approved {
    background: var(--positive-soft);
    color: var(--positive);
}

.status-chip.status-draft {
    background: var(--caution-soft);
    color: var(--caution);
}

.status-chip.status-deferred,
.status-chip.status-retired {
    background: var(--neutral-soft);
    color: var(--text-faint);
}

.meta-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--neutral-soft);
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.lens-badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}