/* ============================================================
   mysterious.quest — Cryptobotanical Survey Console
   Palette: burgundy-cream, ten values
   Type: Roboto Slab + Zilla Slab + Zilla Slab Highlight + JetBrains Mono
   ============================================================ */

:root {
    /* Palette */
    --herbarium-cream: #F4ECDC;
    --pressed-paper: #EADFC7;
    --aged-foxing: #D8C9A8;
    --burgundy-ink: #7A1B2A;
    --deep-bordeaux: #5A1320;
    --specimen-shadow: #3A0B15;
    --glitch-magenta: #B53A4D;
    --glitch-cyan: #2E5E5C;
    --brass-dial: #C8A878;
    --console-char: #1A0608;

    /* Lens-controlled custom properties (live-mutated by knobs) */
    --ch-offset: 4px;     /* Channel Sync */
    --hue-drift: 0;       /* Hue Drift -> mosaic intensity */
    --scan-density: 0.6;  /* Scanline Density */
    --bloom: 0;           /* Phosphor Bloom 0..1 */
    --ink-saturation: 1;  /* Ink Saturation */
    --stillness: 1;       /* Specimen Stillness */

    /* Cursor position within lens stage (0..1) */
    --lx: 0.5;
    --ly: 0.5;
    --lens-active: 0;

    /* Spring easing */
    --ease-spring: cubic-bezier(.22,.61,.36,1);
    --t-fast: 240ms;
}

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

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--deep-bordeaux);
    color: var(--burgundy-ink);
    font-family: 'Zilla Slab', 'Roboto Slab', Georgia, serif;
    font-size: 13px;
    line-height: 1.32;
    -webkit-font-smoothing: antialiased;
}

/* ===== Index ribbon (8px instrument readout) ===== */
.index-ribbon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    background: var(--console-char);
    color: var(--herbarium-cream);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 18px;
    padding: 0 12px;
    display: flex;
    gap: 32px;
    z-index: 100;
    border-bottom: 1px solid var(--burgundy-ink);
}

.ribbon-cell {
    white-space: nowrap;
    opacity: 0.92;
}

.ribbon-cell:last-child {
    margin-left: auto;
    opacity: 0.7;
}

/* ===== Main grid (golden-ratio four-region) ===== */
.dashboard {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1.618fr 1fr;
    grid-template-rows: 1.618fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--deep-bordeaux);
}

/* Region placement */
.region-a { grid-column: 1; grid-row: 1; }
.region-b { grid-column: 2; grid-row: 1 / span 2; }
.region-c { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: auto auto 1fr; }
.region-d { display: none; } /* fold D into C row half via JS not needed; replaced below */

/* Re-shape: split the bottom row into C (top half) + D (bottom half) of left column */
.dashboard {
    grid-template-columns: 1.618fr 1fr;
    grid-template-rows: 1.618fr 0.5fr 0.5fr;
}

.region-a { grid-column: 1; grid-row: 1; }
.region-b { grid-column: 2; grid-row: 1 / span 3; }
.region-c { grid-column: 1; grid-row: 2; }
.region-d { display: block; grid-column: 1; grid-row: 3; }

.region {
    position: relative;
    background: var(--herbarium-cream);
    overflow: hidden;
    isolation: isolate;
}

.region::before {
    /* Paper fibre texture */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(122,27,42,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(122,27,42,0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.region::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.478  0 0 0 0 0.105  0 0 0 0 0.165  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: multiply;
    z-index: 1;
}

/* Region header bar */
.region-bar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--pressed-paper);
    border-bottom: 1px solid var(--deep-bordeaux);
    font-family: 'Roboto Slab', serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--deep-bordeaux);
    text-transform: uppercase;
}

.region-label { }
.region-meta {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--burgundy-ink);
}

.region-caption {
    position: relative;
    z-index: 3;
    padding: 6px 10px 8px;
    font-family: 'Zilla Slab', serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.32;
    color: var(--burgundy-ink);
    border-bottom: 1px solid var(--aged-foxing);
    background: transparent;
}

/* ===== Region A: Lens Field ===== */
.lens-stage {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: var(--herbarium-cream);
    cursor: none;
    z-index: 2;
}

.specimen-calm {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.specimen-calm svg {
    width: min(72%, 520px);
    height: auto;
    max-height: 78%;
    color: var(--deep-bordeaux);
}

/* Specimen accession 96px in bottom-right */
.specimen-accession {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-family: 'Roboto Slab', serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 1;
    color: var(--deep-bordeaux);
    letter-spacing: -0.01em;
    z-index: 4;
    pointer-events: none;
    text-shadow: 0 0 0 transparent;
}

.specimen-binomial {
    position: absolute;
    bottom: 18px;
    left: 18px;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 22px;
    color: var(--burgundy-ink);
    letter-spacing: -0.01em;
    z-index: 4;
    pointer-events: none;
}

.specimen-vernacular {
    position: absolute;
    bottom: 46px;
    left: 18px;
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--deep-bordeaux);
    letter-spacing: -0.01em;
    z-index: 4;
    pointer-events: none;
    text-transform: uppercase;
}

/* Triangle extrema markers */
.tri {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.55;
}
.tri-tl { top: 70px; left: 14px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--deep-bordeaux); }
.tri-tr { top: 70px; right: 14px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--deep-bordeaux); transform: rotate(90deg); }
.tri-bl { bottom: 14px; left: 14px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--deep-bordeaux); transform: rotate(-90deg); }
.tri-br { bottom: 14px; right: 14px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid var(--deep-bordeaux); }

/* The lens viewport — only circular form on the page */
.lens-viewport {
    position: absolute;
    width: 240px;
    height: 240px;
    top: 0;
    left: 0;
    transform: translate3d(-9999px, -9999px, 0);
    pointer-events: none;
    z-index: 5;
    will-change: transform;
    transition: opacity 240ms var(--ease-spring);
    opacity: 0;
}

.lens-stage:hover .lens-viewport {
    opacity: 1;
}

.lens-inner {
    position: relative;
    width: 100%;
    height: 100%;
    clip-path: circle(120px at center);
    -webkit-clip-path: circle(120px at center);
    background: var(--herbarium-cream);
    border: 1px solid transparent;
}

.lens-channel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.lens-channel svg {
    width: 78%;
    height: 78%;
    overflow: visible;
}

/* In the lens, scale up the specimen so the circle reveals magnified detail.
   Each channel uses the cursor's relative position inside the lens stage to position the specimen,
   so the lens behaves like a real magnifying glass. */
.lens-channel {
    --lens-scale: 1.4;
}

.lens-channel-magenta {
    color: var(--glitch-magenta);
    transform: translate3d(calc(var(--ch-offset) * 1), calc(var(--ch-offset) * -0.4), 0);
    filter: blur(0.2px);
    opacity: 0.92;
    animation: chDriftMagenta 2.5s linear infinite;
}

.lens-channel-cyan {
    color: var(--glitch-cyan);
    transform: translate3d(calc(var(--ch-offset) * -1), calc(var(--ch-offset) * 0.4), 0);
    filter: blur(0.2px);
    opacity: 0.92;
    animation: chDriftCyan 2.5s linear infinite;
}

.lens-channel-burgundy {
    color: var(--specimen-shadow);
    opacity: 1;
}

@keyframes chDriftMagenta {
    0%   { transform: translate3d(calc(var(--ch-offset) *  1), calc(var(--ch-offset) * -0.4), 0); }
    25%  { transform: translate3d(calc(var(--ch-offset) *  1.4), calc(var(--ch-offset) *  0.2), 0); }
    50%  { transform: translate3d(calc(var(--ch-offset) *  0.6), calc(var(--ch-offset) *  0.6), 0); }
    75%  { transform: translate3d(calc(var(--ch-offset) *  1.2), calc(var(--ch-offset) * -0.6), 0); }
    100% { transform: translate3d(calc(var(--ch-offset) *  1), calc(var(--ch-offset) * -0.4), 0); }
}

@keyframes chDriftCyan {
    0%   { transform: translate3d(calc(var(--ch-offset) * -1), calc(var(--ch-offset) *  0.4), 0); }
    25%  { transform: translate3d(calc(var(--ch-offset) * -0.6), calc(var(--ch-offset) * -0.4), 0); }
    50%  { transform: translate3d(calc(var(--ch-offset) * -1.2), calc(var(--ch-offset) * -0.7), 0); }
    75%  { transform: translate3d(calc(var(--ch-offset) * -0.8), calc(var(--ch-offset) *  0.7), 0); }
    100% { transform: translate3d(calc(var(--ch-offset) * -1), calc(var(--ch-offset) *  0.4), 0); }
}

.lens-mosaic {
    position: absolute;
    inset: 0;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(58,11,21,0.0) 0deg 22.5deg,
            rgba(122,27,42,0.18) 22.5deg 45deg
        ),
        repeating-linear-gradient(
            0deg,
            rgba(122,27,42,0.0) 0px,
            rgba(122,27,42,0.0) 6px,
            rgba(58,11,21,0.18) 6px,
            rgba(58,11,21,0.18) 7px
        );
    mix-blend-mode: multiply;
    opacity: calc(0.18 * (0.4 + var(--hue-drift) * 1.6));
    pointer-events: none;
}

.lens-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(244,236,220,0) 0px,
        rgba(244,236,220,0) 1px,
        rgba(122,27,42,0.42) 1px,
        rgba(122,27,42,0.42) 2px
    );
    mix-blend-mode: multiply;
    opacity: var(--scan-density);
    animation: scanlineDrift 6s linear infinite;
    pointer-events: none;
}

@keyframes scanlineDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 0 12px; }
}

.lens-bloom {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 12px rgba(90,19,32,0.55),
        0 0 calc(12px * var(--bloom)) rgba(181,58,77,calc(0.45 * var(--bloom)));
    pointer-events: none;
    transition: box-shadow 240ms var(--ease-spring);
}

/* Hairline circle border around the lens (renders the geometry as semantic notation) */
.lens-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--deep-bordeaux);
    pointer-events: none;
}

/* ===== Region B: Catalogue Drawer ===== */
.catalogue {
    position: relative;
    z-index: 3;
    list-style: none;
    height: calc(100% - 60px);
    overflow-y: auto;
    padding: 6px;
    background: var(--pressed-paper);
    scrollbar-width: thin;
    scrollbar-color: var(--burgundy-ink) var(--pressed-paper);
}

.catalogue::-webkit-scrollbar { width: 8px; }
.catalogue::-webkit-scrollbar-track { background: var(--pressed-paper); }
.catalogue::-webkit-scrollbar-thumb { background: var(--burgundy-ink); }

.cat-card {
    position: relative;
    padding: 10px 12px 12px;
    margin: 6px 4px;
    background: var(--herbarium-cream);
    border: 1px solid var(--burgundy-ink);
    cursor: pointer;
    transition: background 240ms var(--ease-spring), transform 240ms var(--ease-spring);
}

.cat-card::before,
.cat-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border: 1px solid var(--deep-bordeaux);
}
.cat-card::before { inset: 3px; opacity: 0.35; }
.cat-card::after  { inset: 6px; opacity: 0.18; }

.cat-card:hover {
    background: var(--aged-foxing);
}

.cat-card.is-active {
    background: var(--aged-foxing);
    outline: 2px solid var(--deep-bordeaux);
    outline-offset: -1px;
}

.cat-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--deep-bordeaux);
    margin-bottom: 4px;
}

.cat-name {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--deep-bordeaux);
    line-height: 1.2;
    margin-bottom: 2px;
}

.cat-binomial {
    font-family: 'Zilla Slab', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    color: var(--burgundy-ink);
    margin-bottom: 6px;
}

.cat-obs {
    font-family: 'Zilla Slab', serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.32;
    color: var(--burgundy-ink);
}

.glitch-class {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 1px 4px;
    border: 1px solid var(--burgundy-ink);
    color: var(--deep-bordeaux);
    background: var(--herbarium-cream);
}

.glitch-class.gc-0 { opacity: 0.5; }
.glitch-class.gc-I { background: var(--aged-foxing); }
.glitch-class.gc-II { background: var(--burgundy-ink); color: var(--herbarium-cream); }
.glitch-class.gc-III {
    background: var(--deep-bordeaux);
    color: var(--herbarium-cream);
    box-shadow: inset 0 0 0 1px var(--brass-dial);
}

/* ===== Region C: Calibration Bar ===== */
.knobs {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 10px 12px 14px;
    height: calc(100% - 60px);
    align-items: center;
}

.knob {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;
}

.knob-seat {
    /* Hexagonal seat */
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--pressed-paper);
}

.knob-seat::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--herbarium-cream);
}

.knob-dial {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brass-dial);
    border: 1px solid var(--deep-bordeaux);
    cursor: grab;
    transition: transform 120ms var(--ease-spring);
    box-shadow:
        inset 0 0 0 4px var(--herbarium-cream),
        inset 0 0 0 5px var(--deep-bordeaux);
}

.knob-dial:active {
    cursor: grabbing;
}

.knob-dial::before {
    /* Triangular indicator */
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--deep-bordeaux);
}

.knob-dial::after {
    /* Center pin */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--deep-bordeaux);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.knob-label {
    margin-top: 6px;
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--deep-bordeaux);
}

.knob-readout {
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--burgundy-ink);
    min-height: 14px;
}

/* ===== Region D: Field Journal ===== */
.journal {
    position: relative;
    z-index: 3;
    list-style: none;
    height: calc(100% - 60px);
    margin: 0;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background: var(--pressed-paper);
    border-top: 1px dashed var(--burgundy-ink);
    scroll-behavior: smooth;
}

.journal::-webkit-scrollbar { height: 6px; }
.journal::-webkit-scrollbar-thumb { background: var(--burgundy-ink); }

.journal-entry {
    display: inline-block;
    margin-right: 18px;
    padding: 2px 6px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--burgundy-ink);
    border-left: 2px solid var(--deep-bordeaux);
    animation: journalFade 600ms var(--ease-spring) both;
}

@keyframes journalFade {
    0%   { color: var(--burgundy-ink); background: var(--herbarium-cream); }
    100% { color: var(--aged-foxing); background: transparent; }
}

.journal-entry .je-tag {
    color: var(--deep-bordeaux);
    font-weight: 500;
    margin-right: 6px;
}

/* Highlighted callout (Zilla Slab Highlight) */
.callout-highlight {
    font-family: 'Zilla Slab Highlight', 'Zilla Slab', serif;
    font-weight: 700;
    color: var(--deep-bordeaux);
    background: linear-gradient(transparent 60%, rgba(122,27,42,0.18) 60%);
    padding: 0 2px;
}

/* ===== Specimen SVG color coercion ===== */
.specimen-calm svg path,
.specimen-calm svg circle,
.specimen-calm svg line,
.specimen-calm svg ellipse,
.specimen-calm svg polyline,
.specimen-calm svg polygon,
.specimen-calm svg rect {
    stroke: currentColor;
    fill: none;
}

.lens-channel svg path,
.lens-channel svg circle,
.lens-channel svg line,
.lens-channel svg ellipse,
.lens-channel svg polyline,
.lens-channel svg polygon,
.lens-channel svg rect {
    stroke: currentColor;
    fill: none;
}

/* ===== Narrow viewport: stack into instructional sequence ===== */
@media (max-width: 880px) {
    html, body { overflow: auto; height: auto; }
    .dashboard {
        position: relative;
        top: 0;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .region-a, .region-b, .region-c, .region-d {
        grid-column: auto;
        grid-row: auto;
        min-height: 360px;
    }
    .lens-stage { position: relative; height: 360px; }
    .specimen-accession { font-size: 64px; }
    .knobs { grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
}