/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT — the operational-surface page.
   v2.0 · neo-archival / amber phosphor

   Feature narrative + operator-surface mockups. Dark panes are EMITTED
   PORTALS inside printed sections and hard-code the emitted ladder on
   themselves (DESIGN.md § dual canvas).

   Mono discipline: one hue. State reads by ladder level and form — no
   green/red/teal semantics anywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

.operator-mock,
.excerpt,
.video-placeholder,
.trace-pipeline,
.tg-thread {
    --p5: #FFE9B8;
    --p4: #F5BD4F;
    --p3: #F4EDDF;
    --p2: #9C8B6E;
    --p1: #5E5343;
    --p0: #2A2419;
    --pbg: #0A0906;
    --pline: rgba(244,237,223,0.08);
}

/* ── 1 · FEATURE NARRATIVE ──────────────────────────────────────────────── */

.feature {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--sp-6);
    padding: var(--sp-8) 0;
    border-top: 1px solid var(--rule);
}
.feature:first-of-type { border-top: 0; padding-top: 0; }

.feature-marker { display: flex; flex-direction: column; gap: var(--sp-2); }
.feature-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--accent);
}
.feature-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-3);
}

.feature-body { min-width: 0; }
.feature-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(21px, 2.3vw, 30px);
    line-height: 1.16;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: var(--sp-4);
}
.feature-lede, .feature-body-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-2);
    max-width: 72ch;
    margin-bottom: var(--sp-5);
}

.feature-list { list-style: none; padding: 0; margin: var(--sp-5) 0; display: grid; gap: var(--sp-3); }
.feature-list li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-2);
    padding-left: var(--sp-5);
    position: relative;
}
.feature-list li::before {
    content: '■';
    position: absolute;
    left: 0; top: 2px;
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--accent);
}

.feature-graphic { margin-top: var(--sp-6); }
.feature-graphic-caption {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: var(--sp-3);
}

.feature-moat {
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border-left: 1px solid var(--border-active);
    background: var(--accent-glow);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-2);
}
.moat-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-2);
}

.surface-intro { max-width: 72ch; margin-bottom: var(--sp-7); }

/* ── 2 · EXCERPTS — emitted portals ─────────────────────────────────────── */

.excerpt {
    background: var(--pbg);
    border: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-5) 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.75;
    color: var(--p2);
    position: relative;
    overflow: hidden;
}
.excerpt::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(232,168,56,0.05) 0 1px, transparent 1px 3px);
}
.excerpt > * { position: relative; z-index: 1; }

.excerpt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--pline);
    flex-wrap: wrap;
}
.excerpt-tag {
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--p2);
}
.excerpt-stamp {
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--p1);
}
/* held / needs-you reads at strike level — the only bright thing */
.excerpt-stamp.warn { color: var(--p5); text-shadow: 0 0 14px rgba(255,233,184,0.7); }

.key { color: var(--p1); }
.val-string { color: var(--p2); }
.val-flag { color: var(--p3); }
/* fault is form-encoded: brackets, not colour */
.val-fail { color: var(--p3); }
.val-fail::before { content: '['; }
.val-fail::after { content: ']'; }

.citation {
    display: block;
    margin-top: var(--sp-3);
    padding-left: var(--sp-4);
    border-left: 1px solid var(--pline);
    color: var(--p1);
    font-style: italic;
}

.excerpt .ok, .excerpt .agent { color: var(--p4); }
.excerpt .fail { color: var(--p3); }
.excerpt .mute { color: var(--p1); }
.excerpt .delta { color: var(--p4); font-variant-numeric: tabular-nums; }
.excerpt .name { color: var(--p3); }
.excerpt .status { color: var(--p2); }

/* excerpt variants — same chassis, different content register */
.excerpt-critic { border-left: 2px solid var(--border-active); }
.excerpt-telegram { padding: var(--sp-5); }
.excerpt-trace { font-size: 11.5px; }

/* telegram excerpt */
.tg-thread { display: flex; flex-direction: column; gap: var(--sp-3); }
.tg-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border: 1px solid var(--pline);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--p2);
}
.tg-bubble.bot { align-self: flex-start; background: rgba(244,237,223,0.03); }
.tg-bubble.user { align-self: flex-end; background: rgba(245,189,79,0.09); border-color: rgba(245,189,79,0.3); color: var(--p3); }
.tg-stamp { font-size: 9px; letter-spacing: 0.16em; color: var(--p1); display: block; margin-top: 5px; }
.tg-action {
    display: inline-block;
    margin-top: 7px;
    padding: 4px 11px;
    border: 1px solid rgba(245,189,79,0.4);
    color: var(--p4);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* trace pipeline */
.trace-pipeline { display: flex; flex-direction: column; }
.trace-step, .trace-gate-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: 8px 0;
    border-bottom: 1px solid var(--pline);
}
.trace-step:last-child, .trace-gate-row:last-child { border-bottom: 0; }
.step-marker, .marker {
    width: 14px; flex: none;
    color: var(--p1);
    font-size: 10px;
}
.trace-step .step-body, .step-body { flex: 1; color: var(--p2); }
.step-body strong { color: var(--p3); font-weight: 400; }
.step-cost {
    font-variant-numeric: tabular-nums;
    color: var(--p4);
    font-size: 11px;
}
.trace-gate-row .gate,
.gate { color: var(--p5); text-shadow: 0 0 12px rgba(255,233,184,0.65); }

/* ── 3 · BRAND TOKEN STRIP ──────────────────────────────────────────────── */

.brand-tokens {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    padding: var(--sp-5);
    border: 1px solid var(--border);
    background: var(--accent-glow);
}
.brand-palette { display: flex; gap: 6px; }
.brand-swatch { width: 30px; height: 30px; border: 1px solid var(--border); }
.brand-font-preview {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.025em;
    color: var(--text);
    line-height: 1.1;
}
.brand-font-preview-sub {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: 4px;
}
.brand-critic-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--border-active);
    padding: 5px 11px;
}

/* ── 4 · OPERATOR SURFACE — emitted portal ──────────────────────────────── */

.operator-surface-section { padding: var(--sp-9) 0; }

.operator-mock {
    max-width: 1180px;
    margin: 0 auto;
    padding: 6px;
    background: var(--p0);
    border: 1px solid var(--border);
}
.operator-pane {
    background: var(--pbg);
    color: var(--p3);
    padding: var(--sp-4);
    position: relative;
    overflow: hidden;
    font-family: var(--font-body);
}
.operator-pane::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 75% at 24% 62%, rgba(245,189,79,0.13) 0%, transparent 72%);
}
.operator-pane::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: repeating-linear-gradient(to bottom, rgba(232,168,56,0.05) 0 1px, transparent 1px 3px);
}
.operator-pane > * { position: relative; z-index: 1; }

.operator-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--pline);
    margin-bottom: var(--sp-4);
}
.t-crumb {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--p2);
}
.t-crumb strong { color: var(--p3); font-weight: 400; }
.t-status {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--p4);
}

.operator-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 900px) { .operator-grid { grid-template-columns: 1fr; } }

.operator-mock-caption {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: var(--sp-4);
    text-align: center;
}

/* widgets */
.op-widget {
    border: 1px solid var(--pline);
    padding: var(--sp-4);
}
.op-gates { grid-row: span 2; }

.op-widget-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--pline);
}
.op-widget-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--p3);
}
.op-widget-meta {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    color: var(--p4);
}

.op-gate-list { display: flex; flex-direction: column; }
.op-gate-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 11px 0;
    border-bottom: 1px solid var(--pline);
}
.op-gate-row:last-child { border-bottom: 0; }
.op-gate-body {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--p2);
}
.op-gate-body strong { color: var(--p3); font-weight: 600; font-family: var(--font-heading); }
.op-gate-sub {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    color: var(--p1);
    margin-top: 4px;
}
.op-gate-tier {
    flex: none;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--p5);
    border: 1px solid rgba(255,233,184,0.3);
    padding: 3px 8px;
}
/* resolved = cooled, per the state table */
.gate-resolved .op-gate-body,
.gate-resolved .op-gate-body strong { color: var(--p1); }
.gate-resolved .op-gate-tier { color: var(--p1); border-color: rgba(94,83,67,0.5); text-shadow: none; }

/* briefing + ledger widgets */
.op-briefing-lines, .op-ledger-lines { display: flex; flex-direction: column; gap: 8px; }
.op-briefing-line, .op-ledger-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--p2);
}
.op-briefing-line strong, .op-ledger-line strong { color: var(--p3); font-weight: 400; }
.op-briefing-line .marker { flex: none; color: var(--p1); }
.op-briefing-line > span:not(.marker):not(.delta) { flex: 1; }
.op-ledger-line .t { flex: none; color: var(--p1); }
.op-ledger-line .agent { flex: none; color: var(--p4); }
.op-ledger-line .body { flex: 1; }

.op-today-grid .row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--pline);
}
.op-today-grid .row:last-child { border-bottom: 0; }
.op-today-grid .name { color: var(--p2); }
.op-today-grid .status { color: var(--p4); }
.op-today-grid .status.queue { color: var(--p1); }

.op-cost-figure {
    font-family: var(--font-mono);
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    color: var(--p4);
    text-shadow: 0 0 14px rgba(245,189,79,0.5);
    letter-spacing: -0.01em;
}
.op-cost-cap {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--p1);
    margin-top: 3px;
}
.op-cost-bar {
    height: 2px;
    background: var(--p0);
    margin-top: var(--sp-3);
    position: relative;
}
.op-cost-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--p4);
}
.op-cost-bar-fill::after {
    content: '';
    position: absolute;
    right: 0; top: -3px; bottom: -3px;
    width: 2px;
    background: var(--p5);
    box-shadow: 0 0 12px rgba(255,233,184,0.85);
}

.op-today-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-5);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
}
@media (max-width: 620px) { .op-today-grid { grid-template-columns: 1fr; } }

/* ── 5 · BRIEFING CARD — printed ────────────────────────────────────────── */

.briefing-card {
    border: 1px solid var(--border);
    background: var(--accent-glow);
    padding: var(--sp-5);
    max-width: 620px;
}
.briefing-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--sp-4);
}
.briefing-header-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text);
}
.briefing-header-time {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--text-3);
}
.briefing-lines { display: flex; flex-direction: column; gap: var(--sp-3); }
.briefing-line { display: flex; align-items: baseline; gap: var(--sp-3); }
.briefing-line-marker {
    flex: none;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--accent);
}
.briefing-line-body { flex: 1; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.briefing-line-body strong { color: var(--text); font-weight: 600; }
.briefing-line-delta {
    flex: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.briefing-footer {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.briefing-footer-approvals { color: var(--accent); }

/* One day visible at a time; `.active` is the shown day (set in markup/JS).
   Guard: if no day is marked active, fall back to showing the first so the
   card can never render empty. */
.briefing-card.cyclable { position: relative; }   /* JS hook for the day cycler */
.briefing-day { display: none; }
.briefing-day.active { display: block; }
.briefing-card:not(:has(.briefing-day.active)) .briefing-day:first-child { display: block; }
.briefing-cycle-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
.briefing-cycle-bar-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}
.briefing-cycle-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 1px solid var(--border-active);
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.briefing-cycle-dot[aria-selected="true"],
.briefing-cycle-dot.on { background: var(--accent); }

/* ── 6 · STACK GRID ─────────────────────────────────────────────────────── */

.stack-grid { border-top: 1px solid var(--rule); }
.stack-grid > div,
.stack-row {
    display: grid;
    grid-template-columns: 150px 1.15fr 1fr;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--rule);
    align-items: start;
}
@media (max-width: 860px) {
    .stack-grid > div, .stack-row { grid-template-columns: 1fr; gap: var(--sp-2); }
}
.stack-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}
.stack-value {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
}
.stack-meaning { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.stack-tag {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    border: 1px solid var(--border);
    padding: 3px 8px;
    display: inline-block;
    margin: 2px 3px 2px 0;
}
.stack-dim { color: var(--text-3); }
.stack-footnote {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-3);
    margin-top: var(--sp-5);
    max-width: 78ch;
}

/* ── 7 · VIDEO PLACEHOLDER — emitted ────────────────────────────────────── */

.video-placeholder {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    background: radial-gradient(ellipse 70% 80% at 35% 60%, rgba(245,189,79,0.15) 0%, transparent 70%), var(--pbg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.video-placeholder::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(232,168,56,0.05) 0 1px, transparent 1px 3px);
}
.video-placeholder-content { text-align: center; position: relative; z-index: 1; }
.video-placeholder-play {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(244,237,223,0.25);
    background: rgba(10,9,6,0.55);
    margin: 0 auto var(--sp-4);
    display: flex; align-items: center; justify-content: center;
}
.video-placeholder-play::before {
    content: '';
    width: 0; height: 0; margin-left: 4px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid var(--p3);
}
.video-placeholder-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.015em;
    color: var(--p3);
}
.video-placeholder-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--p2);
    margin-top: 7px;
}

/* ── 8 · SHARED MODIFIERS ───────────────────────────────────────────────── */

.actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.primary { color: var(--accent); }
.queue { color: var(--text-3); }
.excerpt .queue { color: var(--p1); }

@media (max-width: 760px) {
    .feature { grid-template-columns: 1fr; gap: var(--sp-4); }
    .feature-marker { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPECIMEN PLATE — the product as a wall of emitted artifacts on printed ground.
   Each tile is a miniature of something the operation actually produces, so the
   page is scanned by SHAPE, not read. Text budget per tile: a mono label plus
   one caption line. Anything longer belongs on a detail page, not here.
   ═══════════════════════════════════════════════════════════════════════════ */

.plate {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 10px;
}
.spec {
    --p5: #FFE9B8; --p4: #F5BD4F; --p3: #F4EDDF; --p2: #9C8B6E;
    --p1: #5E5343; --p0: #2A2419; --pbg: #0A0906;
    --pline: rgba(244,237,223,0.10);
    border: 1px solid var(--border);
    background: var(--pbg);
    display: flex; flex-direction: column;
    transition: border-color .2s ease, transform .2s ease;
}
.spec:hover { border-color: var(--border-active); transform: translateY(-1px); }
.spec-art {
    height: 116px; padding: 9px 10px; overflow: hidden;
    background:
        radial-gradient(ellipse 90% 80% at 30% 15%, rgba(245,189,79,0.10) 0%, transparent 70%),
        var(--pbg);
    border-bottom: 1px solid var(--pline);
    display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
}
/* flex:1 so the caption fills the row-stretched height — otherwise shorter
   captions leave a dead --pbg strip under the tile in a mixed-height row */
.spec-cap { padding: 9px 10px 11px; background: var(--p0); flex: 1; }
.spec-cap .lb {
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--p4); display: block; margin-bottom: 4px;
}
.spec-cap .ln { font-size: 12.5px; line-height: 1.45; color: var(--p3); }

/* — primitives, composed into every tile — */
.mk-rows { display: flex; flex-direction: column; gap: 3px; }
.mk-row {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .07em;
    color: var(--p2); border-bottom: 1px solid var(--pline); padding-bottom: 3px;
}
.mk-row:last-child { border-bottom: 0; }
.mk-row .nm { color: var(--p3); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-row .st { color: var(--p4); flex-shrink: 0; }
.mk-row .dim { color: var(--p1); flex-shrink: 0; }
.mk-row.past .nm, .mk-row.past .st { color: var(--p1); }

.mk-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.mk-chip {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em;
    text-transform: uppercase; padding: 2.5px 5px;
    border: 1px solid var(--pline); color: var(--p2);
}
.mk-chip.on { color: var(--p4); border-color: rgba(245,189,79,0.38); }

.mk-bar { height: 5px; background: rgba(244,237,223,0.08); position: relative; }
.mk-bar i { position: absolute; inset: 0 auto 0 0; background: var(--p4); }
.mk-bar.cap i { background: var(--p2); }

.mk-bubble {
    border: 1px solid var(--pline); padding: 6px 7px;
    font-size: 10.5px; line-height: 1.4; color: var(--p3);
    background: rgba(244,237,223,0.03);
}
.mk-bubble .who {
    font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--p1); display: block; margin-bottom: 3px;
}
.mk-acts { display: flex; gap: 4px; margin-top: 5px; }
.mk-acts span {
    font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em;
    text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--pline); color: var(--p2);
}
.mk-acts span.pri { color: var(--pbg); background: var(--p4); border-color: var(--p4); }

.mk-sw { display: flex; gap: 3px; }
.mk-sw i { width: 20px; height: 20px; display: block; }

.mk-frame {
    flex: 1; min-height: 34px; border: 1px solid var(--pline); position: relative;
    background: radial-gradient(ellipse 70% 90% at 40% 60%, rgba(245,189,79,0.18) 0%, transparent 72%), var(--p0);
}
.mk-frame::after {
    content: attr(data-k); position: absolute; left: 5px; top: 4px;
    font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--p2);
}

/* band header */
.band-head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.band-head .bn {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--accent);
}
.band-head .bd { font-size: 14px; color: var(--text-2); }

@media (max-width: 640px) {
    .plate { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
    .spec-art { height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
    .spec, .spec:hover { transition: none; transform: none; }
}