/* ==========================================================
   economic.day — Seismographic Instrument Stylesheet
   ========================================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    overflow-x: hidden;
}

body {
    background: #F5F1E8;
    color: #2B2B28;
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 2.4em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    cursor: none;
}

/* --- Instrument Boot Screen --- */
#instrument-boot {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2B2B28;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
}

#instrument-boot.paper-reveal {
    background: #2B2B28;
}

#instrument-boot.dismissed {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#boot-trace {
    width: 80%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

#boot-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

#boot-line.drawing {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 800ms ease-out;
}

/* --- Bezel Bar (fixed instrument frame) --- */
#bezel-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background: #2B2B28;
    border-bottom: 1px solid #8C8677;
    z-index: 9999;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8C8677;
}

#bezel-domain {
    color: #C7BFA8;
}

#bezel-pipe {
    margin: 0 16px;
    color: #5A5647;
}

#bezel-timestamp {
    margin-left: auto;
    color: #8C8677;
    font-variant-numeric: tabular-nums;
}

/* --- Custom Needle Cursor --- */
#needle-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    display: none;
    width: 1px;
    height: 24px;
    flex-direction: column;
    align-items: center;
}

#needle-triangle {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid #A3342B;
}

#needle-stem {
    width: 1px;
    height: 19px;
    background: #A3342B;
}

#cursor-reference-line {
    position: fixed;
    pointer-events: none;
    z-index: 9997;
    height: 0.3px;
    background: #A3342B;
    opacity: 0;
    transition: opacity 0.6s ease;
    left: 0;
    width: 100%;
}

#cursor-reference-line.visible {
    opacity: 0.3;
}

/* --- Main Recording Surface --- */
#recording-surface {
    position: relative;
    margin-top: 48px;
    width: 100%;
    min-height: 100vh;
}

/* --- Trace Line --- */
#trace-line {
    position: absolute;
    top: 0;
    left: 18%;
    width: 58%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

#trace-path {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
}

/* --- Recording Block (three-band layout) --- */
.recording-block {
    display: flex;
    width: 100%;
    position: relative;
    min-height: 200px;
}

.recording-block + .recording-block {
    margin-top: 0;
}

/* --- Annotation Margin (left band, 18%) --- */
.annotation-margin {
    width: 18%;
    flex-shrink: 0;
    padding: 40px 12px 40px 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.margin-label,
.margin-category {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5A5647;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: sticky;
    top: 80px;
}

.margin-category {
    color: #8C8677;
    font-size: 10px;
}

.margin-alert {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #A3342B;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: sticky;
    top: 140px;
}

/* --- Center Band (primary recording surface, 58%) --- */
.center-band {
    width: 58%;
    flex-shrink: 0;
    position: relative;
    padding: 40px 32px;
    background: #F5F1E8;
}

.chart-paper-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(2.4em - 0.5px),
        #C7BFA8 calc(2.4em - 0.5px),
        #C7BFA8 2.4em
    );
    background-size: 100% 2.4em;
    opacity: 0.6;
}

.inscription {
    position: relative;
    z-index: 1;
}

.recording-title {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 2.4em;
    color: #2B2B28;
    margin-bottom: 0;
}

.inscription p {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 2.4em;
    color: #2B2B28;
    margin-top: 0;
}

.inscription strong {
    font-weight: 600;
    color: #2B2B28;
}

.seismic-emphasis {
    color: #A3342B;
    font-weight: 600;
}

/* --- Readout Panel (right band, 24%) --- */
.readout-panel {
    width: 24%;
    flex-shrink: 0;
    background: #F0EBE0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.readout-numeral {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 4.5rem);
    letter-spacing: -0.03em;
    color: #6B4423;
    text-shadow: 0 0 0.5px #6B4423;
    line-height: 1.1;
    position: sticky;
    top: 80px;
}

.readout-unit {
    font-size: 0.5em;
    letter-spacing: 0;
    color: #8C8677;
}

.seismic-numeral {
    color: #A3342B;
    text-shadow: 0 0 0.5px #A3342B;
}

.decay-curve {
    width: 100%;
    max-width: 120px;
    height: 60px;
    position: sticky;
    top: 160px;
}

.decay-curve path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}

.decay-curve.drawn path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1200ms ease-out;
}

.readout-label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8C8677;
    position: sticky;
    top: 240px;
}

.seismic-label {
    color: #A3342B;
}

/* --- Calibration Zone --- */
.calibration-zone {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16%;
}

.calibration-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 9.5px,
            #C7BFA8 9.5px,
            #C7BFA8 10px
        ),
        repeating-linear-gradient(
            to right,
            transparent,
            transparent 9.5px,
            #C7BFA8 9.5px,
            #C7BFA8 10px
        );
    background-size: 10px 10px;
    opacity: 0.5;
}

.calibration-mark {
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    color: #4A6B5A;
    font-weight: 400;
    z-index: 1;
    line-height: 1;
    position: relative;
    margin-left: 2%;
}

/* --- Spacing between blocks --- */
.recording-block + .calibration-zone,
.calibration-zone + .recording-block {
    /* No extra margin; the calibration zone IS the separator */
}

/* Chart paper gap between blocks (when no calibration zone) */
.recording-block + .recording-block::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 18%;
    width: 58%;
    height: 120px;
    background: #F5F1E8;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(2.4em - 0.5px),
        #C7BFA8 calc(2.4em - 0.5px),
        #C7BFA8 2.4em
    );
    background-size: 100% 2.4em;
    opacity: 0.6;
    pointer-events: none;
}

/* --- Hairline separators between content blocks --- */
.center-band::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5px;
    background: #C7BFA8;
}

/* --- End of Recording --- */
#recording-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    gap: 8px;
}

.end-label {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8C8677;
}

.end-timestamp {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5A5647;
    font-variant-numeric: tabular-nums;
}

/* --- Responsive: below 768px --- */
@media (max-width: 768px) {
    body {
        cursor: auto;
        font-size: 16px;
    }

    #needle-cursor,
    #cursor-reference-line {
        display: none !important;
    }

    .recording-block {
        flex-direction: column;
    }

    .annotation-margin {
        width: 100%;
        flex-direction: row;
        padding: 16px 16px 0 16px;
        gap: 12px;
        align-items: center;
    }

    .margin-label,
    .margin-category,
    .margin-alert {
        writing-mode: horizontal-tb;
        transform: none;
        position: static;
        font-size: 10px;
    }

    .center-band {
        width: 100%;
        padding: 16px;
    }

    .readout-panel {
        width: 100%;
        padding: 20px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }

    .readout-numeral {
        position: static;
        font-size: clamp(1.5rem, 8vw, 2.5rem);
    }

    .decay-curve {
        position: static;
        max-width: 100px;
        height: 40px;
    }

    .readout-label {
        position: static;
        width: 100%;
    }

    .calibration-zone {
        padding-left: 16px;
    }

    #trace-line {
        left: 0;
        width: 100%;
    }

    .chart-paper-bg {
        background-image: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent calc(2.4em - 0.5px),
            #C7BFA8 calc(2.4em - 0.5px),
            #C7BFA8 2.4em
        );
    }
}

/* --- Prevent body scroll during boot --- */
body.booting {
    overflow: hidden;
}

/* --- Selection styling --- */
::selection {
    background: #6B4423;
    color: #F5F1E8;
}