/* H.O.W. Bazaar™ - Design System & Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* LIGHT THEME.
 * This stylesheet was written dark-native (near-black canvas, neon accents),
 * which read as an ops dashboard rather than a marketplace. Inverting the
 * token layer does most of the work, but two things do NOT invert on their
 * own and are handled further down:
 *   1. ~28 translucent-WHITE backgrounds and ~13 translucent-white borders
 *      that were "lighter than the dark canvas" — on white they disappear.
 *   2. The neon accents (#00e5ff cyan, #d500f9 magenta) which are legible on
 *      near-black and glare on white; each is darkened to hold ~4.5:1 text
 *      contrast while keeping the same hue identity. */
:root {
    --bg-dark: #f6f8fa;                        /* page canvas (name kept: 2 refs) */
    --bg-card: #ffffff;
    --bg-card-hover: #f0f4f8;
    --border-color: rgba(15, 23, 42, 0.12);
    --border-active: rgba(0, 124, 145, 0.55);

    /* Accents darkened for a light canvas. Hue preserved, luminance dropped so
       they pass as TEXT colours rather than glowing on white. */
    --color-primary: #00697d;                  /* was #00e5ff */
    --color-primary-glow: rgba(0, 105, 125, 0.12);
    --color-success: #0a7d43;                  /* was #00e676 */
    --color-success-glow: rgba(10, 125, 67, 0.12);
    --color-error: #c62233;                    /* was #ff1744 */
    --color-error-glow: rgba(198, 34, 51, 0.12);
    --color-warning: #a86500;                  /* was #ffb300 */
    --color-warning-glow: rgba(168, 101, 0, 0.14);
    --color-purple: #8e24aa;                   /* was #d500f9 */
    --color-purple-glow: rgba(142, 36, 170, 0.12);

    --text-main: #0f172a;
    --text-muted: #4a5769;
    --text-dark: #6b7a91;
    --text-secondary: #33415c;
    
    --font-sans: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --transition-fast: 0.2s ease;
    --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(at 10% 20%, rgba(0, 124, 145, 0.06) 0px, transparent 50%),
        radial-gradient(at 90% 80%, rgba(142, 36, 170, 0.05) 0px, transparent 50%);
    color: var(--text-main);
    font-family: var(--font-sans);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.08);
}
::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.16);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Layout */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
}

/* The demo header was text-only — the brand mark was never on this page.
   The theme is now light, so this uses the standard green logo-full.png;
   the white variant would disappear against the light header. */
.logo-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brand-logo {
    height: 38px;
    width: auto;
    max-width: 260px;
    display: block;
}

.poc-badge {
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--color-primary-glow);
    color: var(--color-primary);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(0, 124, 145, 0.32);
    white-space: nowrap;
}

.logo-section h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text-main) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-section h1 span {
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--color-primary-glow);
    color: var(--color-primary);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(0, 124, 145, 0.32);
    vertical-align: middle;
}

.logo-section p {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 300;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    background: rgba(15, 23, 42, 0.066);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-success);
    box-shadow: 0 0 10px var(--color-success);
    display: inline-block;
}

.status-indicator.warning {
    background-color: var(--color-warning);
    box-shadow: 0 0 10px var(--color-warning);
}

.status-indicator.error {
    background-color: var(--color-error);
    box-shadow: 0 0 10px var(--color-error);
}

.btn {
    background: rgba(15, 23, 42, 0.11);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn:hover {
    background: rgba(15, 23, 42, 0.16);
    border-color: rgba(15, 23, 42, 0.16);
}

.btn-primary {
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 14px var(--color-primary-glow);
}

.btn-primary:hover {
    background: #00697a;
    box-shadow: 0 6px 20px var(--color-primary-glow);
    transform: translateY(-1px);
}

.btn-success {
    background: var(--color-success);
    color: #ffffff;
    border: none;
    font-weight: 600;
}

.btn-danger {
    background: var(--color-error);
    color: #ffffff;
    border: none;
    font-weight: 600;
}

/* Dashboard Core Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    flex: 1;
    overflow: hidden;
}

/* Left Sidebar - Agent Arena */
.agent-arena {
    border-right: 1px solid var(--border-color);
    background: #eef2f7;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1.5rem;
    gap: 1.25rem;
}

.section-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.agent-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    transition: var(--transition-slow);
    /* `overflow: hidden` is kept for the ::before accent bar and the rounded
       corners, but the card was ALSO being squeezed by its flex parent — every
       card rendered ~77px tall against ~184px of content, so roughly 60% of
       each agent's description was invisible. `flex-shrink: 0` + auto height
       lets the card be as tall as its own content. */
    overflow: hidden;
    flex-shrink: 0;
    height: auto;
    min-height: fit-content;
}

.agent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background: var(--accent-color, var(--color-primary));
}

/* During the guided walkthrough, logAgent() adds .active to whichever agent is
   currently working, and removes it when that agent goes idle — so the
   highlight naturally travels DOWN the column as the pipeline advances. It is
   deliberately ORANGE (not each agent's own accent) so the audience's eye is
   pulled to "who is acting right now", consistently, wherever it lands. */
.agent-card.active {
    border-color: var(--orch-orange, #e8833a);
    background: #fff7ef;
    box-shadow: 0 0 0 2px rgba(232, 131, 58, 0.35), 0 6px 20px rgba(232, 131, 58, 0.22);
    transform: translateX(4px);
}
/* the left accent bar turns orange too, overriding the per-agent colour */
.agent-card.active::before {
    background: var(--orch-orange, #e8833a);
    width: 5px;
}
/* pulse so it reads as "live" across a room */
.agent-card.active {
    animation: agentActivePulse 1.6s ease-out infinite;
}
@keyframes agentActivePulse {
    0%   { box-shadow: 0 0 0 2px rgba(232, 131, 58, 0.5),  0 6px 20px rgba(232, 131, 58, 0.28); }
    70%  { box-shadow: 0 0 0 8px rgba(232, 131, 58, 0),    0 6px 20px rgba(232, 131, 58, 0.18); }
    100% { box-shadow: 0 0 0 2px rgba(232, 131, 58, 0),    0 6px 20px rgba(232, 131, 58, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
    .agent-card.active { animation: none; }
}

.agent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.agent-name {
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.agent-icon {
    font-size: 1.1rem;
}

.agent-status {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.11);
}

.agent-status.idle { color: var(--text-muted); }
.agent-status.working { color: var(--color-primary); background: var(--color-primary-glow); }
.agent-status.verified { color: var(--color-success); background: var(--color-success-glow); }
.agent-status.alert { color: var(--color-error); background: var(--color-error-glow); }

.agent-body {
    /* Was 0.8rem in --text-muted (#8b9bb4) on the dark card — about 3.9:1,
       under the WCAG AA 4.5:1 minimum and genuinely hard to read on a
       projector. --text-secondary lifts it clear while staying subordinate
       to the agent name. */
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.agent-log {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    /* Was a flat grey (rgba(0,0,0,0.3)) with inherited dark text — low contrast,
       the readout looked disabled. Now a soft slate code-panel with a dark
       ink monospace, so the agent's log actually reads. */
    background: #eef2f7;
    color: #1e293b;
    padding: 0.5rem 0.55rem;
    border-radius: 6px;
    max-height: 80px;
    overflow-y: auto;
    border-left: 3px solid var(--orch-orange, #e8833a);
}

/* Agent Communication Feed */
.comm-terminal {
    /* Was a 40%-black panel the theme sweep didn't reach — dark island on a
       white page. Now a light slate code-panel to match .agent-log. */
    background: #eef2f7;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    max-height: 350px;
    color: #1e293b;
}

.comm-feed {
    flex-grow: 1;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.25rem;
}

.comm-msg {
    padding: 0.5rem;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--text-dark);
}

.comm-msg.sent-MajorDomo { border-color: var(--color-primary); }
.comm-msg.sent-Vizier { border-color: var(--color-purple); }
.comm-msg.sent-Overseer { border-color: var(--color-warning); }
.comm-msg.sent-Moneybags { border-color: var(--color-success); }

.comm-sender {
    font-weight: 600;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
}

.comm-time {
    /* --text-dark was the last sub-AA value at 12px (3.88:1). Timestamps are
       de-emphasised metadata but still have to be readable on a projector. */
    color: var(--text-muted);
}

/* Right Main Display */
.main-display {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Navigation Tabs */
.tabs-navigation {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: #f2f5f9;
    padding: 0 1.5rem;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 1rem 1.5rem;
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
}

.tab-btn:hover {
    color: var(--text-main);
}

.tab-btn.active {
    color: var(--color-primary);
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 1.5rem;
    right: 1.5rem;
    height: 2px;
    background-color: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary-glow);
}

/* Tab Panels */
.tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    display: none;
}

.tab-content.active {
    display: block;
}

/* Tab 1: Market Explorer */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--border-active);
    transform: translateY(-2px);
    background: var(--bg-card-hover);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.product-image-sim {
    height: 140px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.044) 0%, rgba(15, 23, 42, 0.11) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.producer-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    /* Was a dark chip with NO color set, so it inherited the page's dark text —
       dark-on-dark, effectively invisible in the light theme. Now a solid dark
       green chip with explicit white text: a legible label over the tile. */
    background: var(--color-primary, #00697d);
    color: #ffffff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.claim-badges {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.35rem;
}

.claim-badge {
    background: var(--badge-bg, rgba(15, 23, 42, 0.16));
    color: var(--badge-color, var(--text-main));
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid var(--badge-border, transparent);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.claim-badge.verified {
    --badge-bg: var(--color-success-glow);
    --badge-color: var(--color-success);
    --badge-border: rgba(0, 230, 118, 0.2);
}

.claim-badge.unverified {
    --badge-bg: var(--color-error-glow);
    --badge-color: var(--color-error);
    --badge-border: rgba(255, 23, 68, 0.2);
}

.claim-badge.pending {
    --badge-bg: var(--color-warning-glow);
    --badge-color: var(--color-warning);
    --badge-border: rgba(255, 179, 0, 0.2);
}

.claim-badge.illegal {
    --badge-bg: var(--color-error-glow);
    --badge-color: var(--color-error);
    --badge-border: rgba(255, 23, 68, 0.35);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.product-details {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.product-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    flex-grow: 1;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Consumer Preference Rules */
.rules-container {
    background: rgba(15, 23, 42, 0.044);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.rule-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rule-item label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.rule-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

.rule-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.form-input, .form-textarea, .form-select {
    background: rgba(15, 23, 42, 0.066);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--color-primary);
    background: rgba(15, 23, 42, 0.11);
    outline: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* File Upload Simulated Box */
.file-dropzone {
    border: 2px dashed rgba(15, 23, 42, 0.16);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.file-dropzone:hover {
    border-color: var(--color-primary);
    background: rgba(0, 124, 145, 0.096);
}

.file-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.066);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.file-hash {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* Table Design */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
}

tr:hover td {
    background: rgba(15, 23, 42, 0.022);
}

/* Forensic Ledger Explorer Timeline */
.ledger-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
    position: relative;
    padding-left: 2rem;
}

.ledger-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    width: 2px;
    background: rgba(15, 23, 42, 0.11);
}

.ledger-block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    position: relative;
    transition: var(--transition-slow);
}

.ledger-block::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--block-accent, var(--color-primary));
    box-shadow: 0 0 8px var(--block-accent, var(--color-primary));
    border: 3px solid var(--bg-dark);
}

.ledger-block.tampered {
    border-color: var(--color-error);
    --block-accent: var(--color-error);
    box-shadow: 0 0 15px var(--color-error-glow);
}

.ledger-block.validating {
    border-color: var(--color-warning);
    --block-accent: var(--color-warning);
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.block-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.block-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--block-accent, var(--color-primary));
}

.block-data {
    font-size: 0.8rem;
    background: rgba(15, 23, 42, 0.08);
    padding: 0.5rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    margin-bottom: 0.75rem;
    overflow-x: auto;
}

.block-hashes {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.25rem;
}

.hash-label {
    color: var(--text-muted);
    font-weight: 500;
}

.hash-val {
    color: var(--text-main);
    word-break: break-all;
}

.hash-val.match {
    color: var(--color-success);
}

.hash-val.mismatch {
    color: var(--color-error);
    font-weight: 600;
}

.block-signer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    margin-top: 0.5rem;
    border-top: 1px dashed var(--border-color);
    padding-top: 0.5rem;
}

.block-signer span {
    background: rgba(15, 23, 42, 0.11);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

/* QR Scanner Mock Interface — a phone, but a LIGHT phone so it matches the
   rest of the demo. Only the viewfinder (the actual camera lens) stays dark,
   because a camera preview reasonably looks like one. Everything else is a
   clean white handset with dark text. */
.qr-scanner-mock {
    max-width: 400px;
    margin: 0 auto;
    border: 10px solid #d4dbe4;
    border-radius: 36px;
    height: 620px;
    background: #ffffff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
}

.scanner-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    position: relative;
    overflow-y: auto;
    color: var(--text-main);
}

.scanner-viewfinder {
    height: 180px;
    /* the one intentionally-dark element: the camera preview */
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1015;
}

.scanner-laser {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    animation: scanLaser 2s infinite ease-in-out;
}

@keyframes scanLaser {
    0% { top: 10%; }
    50% { top: 90%; }
    100% { top: 10%; }
}

.scanner-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.verification-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Light phone: a soft slate row with dark text, matching the demo. */
    background: #f3f6fa;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.8rem;
    transition: var(--transition-fast);
}

.verification-step.verified {
    border-color: var(--color-success);
    background: var(--color-success-glow);
}

.verification-step.failed {
    border-color: var(--color-error);
    background: var(--color-error-glow);
}

.step-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.16);
}

.verified .step-circle {
    background: var(--color-success);
    color: #ffffff;
}

.failed .step-circle {
    background: var(--color-error);
    color: #ffffff;
}

.step-details {
    flex: 1;
}

.step-title {
    font-weight: 600;
    color: var(--text-main);
}

.step-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Console Notification Alerts */
.console-notice {
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    border-left: 3px solid transparent;
}

/* Notice text darkened one step below the accent so it reads on its own pale
   tint — the success banner was green-on-green and hard to read. */
.console-notice.success {
    background: var(--color-success-glow);
    border-left-color: var(--color-success);
    color: #065f34;
}

.console-notice.error {
    background: var(--color-error-glow);
    border-left-color: var(--color-error);
    color: #9e1b29;
}

.console-notice.info {
    background: var(--color-primary-glow);
    border-left-color: var(--color-primary);
    color: #005566;
}

/* Modal style */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Scrim stays dark so the dialog reads as raised above the page, but
       lighter than the old 0.8 — that was a blackout on a light canvas. */
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    /* Was #10121d — a hardcoded near-black the token sweep did not reach, so
       the dialog kept a dark panel while its text inverted to dark: 1.04:1,
       effectively invisible. This is the block-detail dialog, i.e. the
       forensic proof moment, so it has to be legible. */
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: 12px;
    width: 90%;
    max-width: 550px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 124, 145, 0.16);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--text-main);
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-detail-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.066);
    padding-bottom: 0.5rem;
}

.modal-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.modal-val {
    font-size: 0.9rem;
}

.modal-val.mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    word-break: break-all;
    background: rgba(15, 23, 42, 0.08);
    padding: 0.4rem;
    border-radius: 4px;
}

/* ============================================================
   Producer onboarding "photo a cert" moment
   ============================================================ */

.cert-moment {
    background: rgba(15, 23, 42, 0.044);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.cert-moment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* Honesty labels — everything simulated says so, everything real says so */
.honesty-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
    cursor: help;
}

.honesty-badge.real {
    background: var(--color-success-glow);
    color: var(--color-success);
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.honesty-badge.sim {
    background: var(--color-warning-glow);
    color: var(--color-warning);
    border: 1px solid rgba(255, 179, 0, 0.3);
}

.cert-chat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.chat-line {
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    max-width: 85%;
    line-height: 1.4;
}

.chat-line.agent {
    background: rgba(0, 124, 145, 0.096);
    border: 1px solid rgba(0, 124, 145, 0.192);
    align-self: flex-start;
}

.chat-line.producer {
    background: rgba(15, 23, 42, 0.088);
    border: 1px solid rgba(15, 23, 42, 0.16);
    align-self: flex-end;
}

.cert-moment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.file-dropzone.camera {
    padding: 1.5rem;
    border-color: rgba(0, 124, 145, 0.35);
}

.file-dropzone.camera .camera-icon {
    font-size: 2.2rem;
    margin-bottom: 0.4rem;
}

.file-dropzone.dragover {
    border-color: var(--color-primary);
    background: rgba(0, 124, 145, 0.096);
}

.file-dropzone.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.cert-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.evidence-card {
    background: rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
}

.evidence-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.evidence-thumb {
    max-width: 100%;
    max-height: 110px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    object-fit: contain;
}

.evidence-stage {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.088);
}

.evidence-stage .stage-icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.evidence-stage .stage-body {
    flex: 1;
}

.evidence-stage .stage-name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.evidence-stage .stage-detail {
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-top: 0.1rem;
}

.evidence-stage .stage-detail.mono {
    font-family: var(--font-mono);
    word-break: break-all;
}

/* Claims board */
.cert-claims-board {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.claim-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    transition: var(--transition-fast);
}

.claim-row .claim-name {
    font-size: 0.8rem;
    font-weight: 600;
}

.claim-row .claim-basis {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.claim-class {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.claim-class.awaiting {
    background: rgba(15, 23, 42, 0.132);
    color: var(--text-muted);
    border: 1px solid rgba(15, 23, 42, 0.16);
}

.claim-class.supplier-stated {
    background: var(--color-warning-glow);
    color: var(--color-warning);
    border: 1px solid rgba(255, 179, 0, 0.25);
}

.claim-class.evidence-backed {
    background: var(--color-primary-glow);
    color: var(--color-primary);
    border: 1px solid rgba(0, 124, 145, 0.35);
}

.claim-class.ready {
    background: var(--color-success-glow);
    color: var(--color-success);
    border: 1px solid rgba(0, 230, 118, 0.25);
}

.claim-class.not-permitted {
    background: var(--color-error-glow);
    color: var(--color-error);
    border: 1px solid rgba(255, 23, 68, 0.35);
}

.claim-row.upgraded {
    border-color: rgba(0, 230, 118, 0.35);
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.08);
}

.cert-approve-row {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 900px) {
    .cert-moment-grid {
        grid-template-columns: 1fr;
    }
}

/* --- MajorDomo Developer Spec panel (Jarrod's spec) --- */
.spec-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    border: 1px solid rgba(0, 124, 145, 0.35);
    background: var(--color-primary-glow);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    vertical-align: middle;
}
.spec-tag.sim {
    color: var(--color-warning);
    border-color: rgba(255, 179, 0, 0.3);
    background: var(--color-warning-glow);
}
#md-menu { font-family: inherit; resize: vertical; }
.md-req {
    background: rgba(15, 23, 42, 0.088);
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.5;
}
.md-req.uncertain { border-color: rgba(255, 179, 0, 0.35); }
.md-req .md-src { display: block; font-size: 0.7rem; color: var(--text-muted); }
.md-trace {
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0.4rem 0.75rem;
    border-left: 3px solid rgba(15, 23, 42, 0.16);
    margin-bottom: 0.3rem;
}
.md-trace.pass { border-left-color: var(--color-success); }
.md-trace.fail { border-left-color: var(--color-error); color: var(--text-muted); }
.md-trace.warn { border-left-color: var(--color-warning); }

/* --- real-producer directory --- */
.real-producer-tag {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid rgba(15, 23, 42, 0.16);
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}

/* --- Catalogue tab (synthetic 20k dataset) --- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.6rem;
}
.cat-card {
    background: rgba(15, 23, 42, 0.088);
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    font-size: 0.8rem;
}
.cat-card-head { margin-bottom: 0.2rem; }

/* --- PWA / mobile optimisation --- */
@media (max-width: 900px) {
    .rules-grid { grid-template-columns: 1fr !important; }
    #md-spec-panel .rules-grid,
    #mb-spec-panel .rules-grid,
    #vz-spec-panel .rules-grid,
    #ov-spec-panel .rules-grid { grid-template-columns: 1fr !important; }
    #tab-rescue .rules-grid { grid-template-columns: 1fr !important; }
    #tab-catalogue .rules-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
    html { -webkit-text-size-adjust: 100%; }
    .app-container { height: auto; max-height: none; }
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(8px);
    }
    .header-actions { flex-wrap: wrap; gap: 0.4rem; }
    .dashboard-grid {
        display: flex !important;
        flex-direction: column;
        grid-template-columns: none !important;
        overflow: visible !important;
        height: auto !important;
    }
    /* Agent arena collapses to a horizontal strip under the header */
    .agent-arena {
        flex-direction: row !important;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        max-height: 180px;
    }
    .agent-arena .agent-card { min-width: 220px; flex-shrink: 0; }
    .agent-arena .comm-terminal { min-width: 260px; flex-shrink: 0; }
    .agent-arena .section-title { display: none; }
    .main-display { padding: 1rem !important; overflow: visible !important; }
    .tabs-navigation {
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: sticky;
        top: 0;
        z-index: 40;
        background: rgba(255, 255, 255, 0.97);
    }
    .tabs-navigation::-webkit-scrollbar { display: none; }
    .tab-btn { flex-shrink: 0; padding: 0.6rem 0.8rem; font-size: 0.8rem; }
    .products-grid, #market-products-grid { grid-template-columns: 1fr !important; }
    .cat-grid { grid-template-columns: 1fr 1fr; }
    .btn { min-height: 40px; }   /* touch targets */
    input.rule-input, select.rule-input, textarea.rule-input { font-size: 16px; } /* prevent iOS zoom */
    .cert-moment-grid { grid-template-columns: 1fr !important; }
    table { display: block; overflow-x: auto; }
}
@media (max-width: 430px) {
    .cat-grid { grid-template-columns: 1fr; }
    .logo-section h1 { font-size: 1.1rem; }
    .logo-section p { font-size: 0.65rem; }
}

/* ============================================================================
 * MajorDomo Assistant Dedicated UX Styles
 * ========================================================================== */
.majordomo-dashboard {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    gap: 1.25rem;
    height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
}

.majordomo-chat-column {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.majordomo-panels-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

/* Chat Styles */
.md-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.044);
    border-bottom: 1px solid var(--border-color);
}
.md-chat-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
}

.md-chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-bubble {
    max-width: 85%;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-word;
}
.chat-bubble.assistant {
    background: rgba(15, 23, 42, 0.088);
    color: var(--text-main);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    border: 1px solid rgba(15, 23, 42, 0.11);
}
.chat-bubble.user {
    background: var(--color-primary-glow);
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    border: 1px solid rgba(0, 124, 145, 0.32);
}
.chat-bubble.system-alert {
    background: var(--color-warning-glow);
    color: var(--color-warning);
    align-self: center;
    max-width: 95%;
    text-align: center;
    border: 1px solid rgba(255, 179, 0, 0.2);
}
.chat-bubble .stream-delta {
    display: inline;
}
.chat-bubble .meta {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-align: right;
}

.chat-input-wrapper {
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.044);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.chat-input {
    flex: 1;
    background: rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}
.chat-input:focus {
    border-color: var(--border-active);
    outline: none;
}

/* Structured Panels */
.working-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(10px);
}
.working-panel.collapsed .panel-body {
    display: none;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.panel-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.panel-toggle-icon {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: var(--transition-fast);
}
.working-panel.collapsed .panel-toggle-icon {
    transform: rotate(-90deg);
}
.panel-body {
    margin-top: 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.11);
    padding-top: 0.75rem;
}

/* Timeline / Order Status */
.timeline-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.timeline-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    background: rgba(15, 23, 42, 0.044);
    border: 1px solid transparent;
}
.timeline-step.active {
    border-color: var(--color-primary-glow);
    background: rgba(0, 124, 145, 0.096);
}
.timeline-step.completed {
    color: var(--text-muted);
}
.timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dark);
}
.timeline-step.active .timeline-dot {
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
}
.timeline-step.completed .timeline-dot {
    background: var(--color-success);
}
.timeline-step.failed .timeline-dot {
    background: var(--color-error);
}
.timeline-time-remaining {
    font-size: 0.75rem;
    color: var(--color-error);
    font-weight: bold;
    margin-left: auto;
}

/* RRP Feedback styles */
.rrp-feedback {
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.5rem;
}
.rrp-feedback.savings {
    background: var(--color-success-glow);
    border: 1px solid rgba(0, 230, 118, 0.3);
    color: var(--color-success);
}
.rrp-feedback.no-diff {
    background: rgba(15, 23, 42, 0.088);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}
.rrp-feedback.additional-cost {
    background: var(--color-error-glow);
    border: 1px solid rgba(255, 23, 68, 0.3);
    color: var(--color-error);
}

/* Test Runner UI */
.test-suite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.test-results-log {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.test-case {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.044);
}
.test-case.pass {
    border-left: 3px solid var(--color-success);
    color: var(--color-success);
}
.test-case.fail {
    border-left: 3px solid var(--color-error);
    color: var(--color-error);
}
.test-case-name {
    font-weight: bold;
}

@media (max-width: 900px) {
    .majordomo-dashboard {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }
    .majordomo-chat-column {
        height: 400px;
    }
}