/*
 * main.css
 * Mobile-first stylesheet for the Phase 2 visual layer. Portrait/narrow
 * viewports get a clean styled document with no board. Landscape desktop
 * viewports (min-width 900px, orientation landscape) get the full
 * PCB board experience: tile grid, cable parallax, and cover panel
 * loading sequence, layered behind and around the document.
 */

/* ------------------------------------------------
 * Colour palette
 * Sampled directly from a reference PCB photo (i-like-these.png) rather
 * than picked by eye - single source of truth for every colour used
 * below. A true mid-tone circuit-board green with warm near-black
 * chip/panel tones, instead of the previous pastel-mint take.
 * ------------------------------------------------ */
:root {
    /* Backgrounds */
    --bg-base: #100e0c;       /* near-black base, warm chip-shadow tone */
    --bg-panel: #1c1815;      /* card/panel background */
    --bg-elevated: #2c2724;   /* elevated surface, e.g. traces panel - matches sampled chip body colour */

    /* Circuit greens */
    --accent-primary: #00b060;   /* headings, active traces, primary accent - sampled bright PCB trace */
    --accent-secondary: #17c96b; /* secondary trace green */
    --accent-dim: #045c28;       /* inactive/dim trace lines */

    /* Text */
    --text-primary: #d7ecd3;   /* body text, sampled pale mint pin highlight */
    --text-secondary: #9fcf9a; /* muted/secondary text */
    --text-heading: #00b060;   /* headings */

    /* Borders/dividers */
    --border-subtle: #0e6b2c;

    /* Fonts - a legible monospace for anything meant to be read at length
       (resume content, form fields), and a decorative CRT/terminal font
       reserved for short, atmospheric labels where readability matters
       less than the retro-console feel. */
    --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
    --font-console: 'VT323', Consolas, monospace;
}

/* ------------------------------------------------
 * Base reset
 * Applies in every orientation.
 * ------------------------------------------------ */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-mono);
    background: var(--bg-base);
}

/* ---- Portrait / mobile: document only ---- */

/* The board layer, cable layers, cable shadow layers, and edge shadow
   gradients are hidden */
#board-layer,
#cables-left,
#cables-right,
#cables-left-shadow,
#cables-right-shadow,
#edge-shadow-left,
#edge-shadow-right {
    display: none;
}

/* Document sits normally in page flow, centred */
#doc-wrap {
    position: relative;
    margin: 0 auto;
    max-width: 1400px;
    padding: 32px;
}

/* ---- Landscape desktop: full board experience ---- */
@media (orientation: landscape) and (min-width: 900px) {

    /* Board elements become visible */
    #board-layer,
    #cables-left,
    #cables-right,
    #cables-left-shadow,
    #cables-right-shadow,
    #edge-shadow-left,
    #edge-shadow-right {
        display: block;
    }

    /* Document lifts out of flow and sits on top of board */
    #doc-wrap {
        position: absolute;
        margin: 0;
        max-width: none;
        padding: 0;
        /* width and left position set by board.js based on tile grid */
    }

    /* All board-specific CSS goes inside this media query */

}

/* ------------------------------------------------
 * Document panel styling
 * Applies in both orientations
 * ------------------------------------------------ */

#doc-wrap {
    font-family: var(--font-mono);
    background: var(--bg-panel);
}

/* Page title bar - the single on-page <h1>, sitting above the RAM slot.
   Shares the RAM slot's border/background treatment so the two read as one
   continuous "chrome" region, with no border seam between them (same
   technique used to blend ram-slot/doc-panel/doc-foot into one column). */
#page-title-bar {
    background: var(--bg-elevated);
    border: 4px solid var(--accent-primary);
    border-bottom: none;
    padding: 8px 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#page-title-bar h1 {
    margin: 0;
    font-family: var(--font-console);
    font-size: 28px;
    color: var(--text-heading);
    letter-spacing: 2px;
}

/* Dashboard and admin links */
#page-title-bar a {
    color: #ff5555;
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
}

/* Keeps the two links together at the right hand end of the bar, so the
   title bar's space-between has two items to separate rather than three. */
#page-title-bar-links {
    display: inline-flex;
    align-items: baseline;
    gap: 16px;
}

/* The red above is the admin link's warning colour - it goes to a login and
   to the controls behind it. The dashboard link is an ordinary public page,
   so it takes the palette's trace green like every other link on the site
   rather than borrowing the admin link's red. */
#dashboard-link {
    color: var(--accent-primary);
}

#ram-slot {
    background: var(--bg-elevated);
    border-left: 4px solid var(--accent-primary);
    border-right: 4px solid var(--accent-primary);
    padding: 8px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Field labels (resume version selector, email input) */
#ram-slot label {
    color: var(--text-secondary);
    font-size: 18px;
    font-family: var(--font-mono);
}

/* The version selector and PDF actions are still wrapped in their
   original Phase 1 <section> tags - flatten them into the RAM slot's
   flex row instead of letting them block-stack. */
#ram-slot section {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* The PDF actions section instead stacks its two actions - download and
   email - on their own lines, rather than flattening into the same row as
   everything else. */
#ram-slot section[data-section="pdf-actions"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.pdf-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* RAM slot controls - inputs, buttons */
#ram-slot input[type="text"],
#ram-slot input[type="email"] {
    background: var(--bg-panel);
    border: 2px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 18px;
    padding: 4px 8px;
}

#ram-slot button {
    background: var(--bg-panel);
    border: 2px solid var(--border-subtle);
    color: var(--accent-secondary);
    font-family: var(--font-mono);
    font-size: 18px;
    padding: 4px 12px;
    cursor: pointer;
}

#ram-slot button:hover {
    background: var(--bg-elevated);
}

/* PDF download/email status messages (e.g. "Generating PDF...") - same
   colour as the postal address text (.section-text) */
#pdf-download-status-message,
#pdf-email-status-message {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 18px;
    margin: 0;
}

#doc-panel {
    background: var(--bg-panel);
    border-left: 4px solid var(--accent-primary);
    border-right: 4px solid var(--accent-primary);
}

.resume-section {
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 20px;
    position: relative;
}

.resume-section:last-child {
    border-bottom: none;
}

.section-tag {
    font-family: var(--font-console);
    font-size: 22px;
    color: var(--accent-primary);
    background: var(--bg-elevated);
    padding: 2px 10px;
    display: inline-block;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.section-text {
    font-size: 18px;
    color: var(--text-primary);
    line-height: 1.55;
}

.section-muted {
    font-size: 16px;
    color: var(--accent-dim);
}

.section-bold {
    font-weight: bold;
    font-size: 18px;
    color: var(--text-heading);
}

#doc-foot {
    height: 10px;
    background: var(--bg-panel);
    border: 4px solid var(--accent-primary);
    border-top: none;
}

/* ------------------------------------------------
 * Structural elements inside resume sections that do not carry one of
 * the four section-* classes directly - lists, articles, headings.
 * ------------------------------------------------ */

.resume-section h2 {
    margin: 0 0 8px 0;
}

/* Website/Mobile/Email links in Personal Details - colour only, matching
   .section-tag's green so they read as part of the same PCB theme rather
   than default browser link blue. Everything else about them (underline,
   etc.) is left as the browser default. */
[data-section="personal-details"] a {
    color: var(--accent-primary);
}

.resume-section ul {
    margin: 8px 0;
    padding-left: 32px;
}

.resume-section li {
    font-size: 18px;
    color: var(--text-primary);
    line-height: 1.55;
}

.resume-section article {
    margin-top: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px dotted var(--border-subtle);
}

.resume-section article:last-of-type {
    border-bottom: none;
}

/* ------------------------------------------------
 * Copy-icon row wrappers - place a square copy-icon button directly before
 * the section heading / job title / employer text, on the same line.
 * ------------------------------------------------ */
.section-heading-row,
.job-title-row,
.job-employer-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.job-title-row,
.job-employer-row {
    margin-bottom: 4px;
}

.job-title-row h3,
.job-employer-row p {
    margin: 0;
}

/* ------------------------------------------------
 * Reveal button - same keycap style and press mechanics as .btn-copy
 * (dark body, coloured border, bottom border shrinks on press rather than
 * the whole button just sliding down), sized for its text label instead of
 * a fixed icon square.
 * ------------------------------------------------ */

.btn-reveal {
    margin-top: 10px;
    height: 40px;
    padding: 0 20px;
    background: #0c1f12;
    border: 3px solid var(--text-heading);
    border-bottom: 6px solid var(--accent-dim);  /* Keycap depth */
    color: var(--text-heading);
    font-family: var(--font-mono);
    font-size: 18px;
    cursor: pointer;
    letter-spacing: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-reveal:active {
    border-bottom-width: 3px;
    transform: translateY(2px);
}

/* ------------------------------------------------
 * Copy button - keyboard keycap style
 * ------------------------------------------------ */

.btn-copy {
    width: 40px;
    height: 40px;
    padding: 0;
    background: #0c1f12;
    border: 3px solid var(--text-heading);
    border-bottom: 6px solid var(--accent-dim);  /* Keycap depth */
    color: var(--text-heading);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-family: var(--font-mono);
    flex-shrink: 0;
    vertical-align: middle;
}

.btn-copy:active {
    border-bottom-width: 3px;
    transform: translateY(2px);
}

/* The education section's per-entry copy button sits inline at the start of
   the <li>, before the qualification name, so it needs its own trailing gap
   before the text that follows it. */
.resume-section li .btn-copy {
    margin-right: 8px;
}

/* Education entries are a copy-paste record (name, institution, year), not
   a semantic bullet list, so the marker is removed - especially now that
   each entry has a leading copy-icon button. */
[data-section="education"] ul {
    list-style: none;
    padding-left: 0;
}

/* ------------------------------------------------
 * Phone-sized mobile: scale text down
 * Every font-size above was tuned for the landscape board experience
 * (large screen, viewed from a distance) but also applies unscoped to
 * mobile/portrait, since only structural properties get overridden inside
 * the landscape media query. On an actual phone that reads oversized, so
 * scale it down here - this only affects narrow viewports and never
 * touches the landscape/desktop board appearance above.
 * ------------------------------------------------ */
@media (max-width: 480px) {

    #page-title-bar h1 {
        font-size: 20px;
    }

    #page-title-bar a {
        font-size: 14px;
    }

    #ram-slot label {
        font-size: 14px;
    }

    #ram-slot input[type="text"],
    #ram-slot input[type="email"],
    #ram-slot button {
        font-size: 14px;
    }

    #pdf-download-status-message,
    #pdf-email-status-message {
        font-size: 14px;
    }

    .section-tag {
        font-size: 16px;
    }

    .section-text,
    .resume-section li {
        font-size: 15px;
    }

    .section-muted {
        font-size: 14px;
    }

    .section-bold {
        font-size: 15px;
    }

    .btn-reveal {
        font-size: 14px;
        height: 36px;
        padding: 0 16px;
    }

    .btn-copy {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

}

/* ------------------------------------------------
 * Copy buttons - board mode only
 * These fill out job applications with pasted resume text, a task never
 * done on a phone - hidden by default (mobile) and restored only inside
 * the landscape+900px board media query below, so visibility tracks the
 * exact same mobile/board toggle as everything else on the site.
 * ------------------------------------------------ */
.btn-copy {
    display: none;
}

/* ------------------------------------------------
 * Solder strips
 * ------------------------------------------------ */

#solder-left,
#solder-right {
    position: absolute;
    top: 0;
    width: 8px;
    /* Height set by board.js. These background-images are only a no-JS
       fallback pointing at the generated placeholders - board.js always
       overrides them inline with the path for the currently selected
       BOARD_CONFIG.ASSET_SOURCE. Left and right are distinct sprites,
       not mirrored copies, since each joins the rest of the circuit
       differently. */
    background-repeat: repeat-y;
    z-index: 4;
    pointer-events: none;
}

#solder-left {
    left: -8px;
    background-image: url('../img/generated/ui/solder_strip_left.png');
}

#solder-right {
    right: -8px;
    background-image: url('../img/generated/ui/solder_strip_right.png');
}

/* ------------------------------------------------
 * Board layer (landscape only)
 * ------------------------------------------------ */

@media (orientation: landscape) and (min-width: 900px) {

    body {
        overflow-x: hidden;
        background: var(--bg-base);
    }

    /* Outer page wrapper - height comes entirely from #board-layer's
       explicit height (set by board.js to the document's height plus one
       framing tile row) so the page never scrolls past the bottom of the
       resume, and never leaves blank space below it either. */
    #page-wrapper {
        position: relative;
        width: 100%;
    }

    /* Copy buttons restored - board mode only, see the unconditional
       hide rule above */
    .btn-copy {
        display: inline-flex;
    }

    /* Board layer - fills the full page behind the document */
    #board-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* Height set by board.js to match tile grid height */
        z-index: 1;
        overflow: hidden;
    }

    /* Document - lifted out of flow, centred on board */
    #doc-wrap {
        position: absolute;
        top: 0;
        /* left and width set by board.js */
        z-index: 3;
    }

    /* Cable shadow canvases - flat black duplicates sitting between the
       board layer and the real cables. Scrolled at a slower parallax
       speed by cables.js so they lag behind the real cables, with only a
       vertical offset (CABLE_SHADOW_OFFSET_PX, applied in cables.js) -
       horizontally they sit flush with the same screen edge as the real
       cables. Stacking order (bottom to top): this shadow, the real
       cables, then the edge shadow gradient on top of both. */
    #cables-left-shadow,
    #cables-right-shadow {
        position: fixed;
        z-index: 2;
        pointer-events: none;
    }

    #cables-left-shadow {
        left: 0;
    }

    #cables-right-shadow {
        right: 0;
    }

    /* Edge shadow gradients - drawn above the real cables (rather than
       below them) to test whether that reads better, reinforcing the
       shadow effect by darkening toward each screen edge. Width is a
       quarter of CABLE_BUNCH_WIDTH (assets/js/config.js, currently
       160px) - keep this in sync if that value changes. */
    #edge-shadow-left,
    #edge-shadow-right {
        position: fixed;
        top: 0;
        height: 100vh;
        width: 40px;
        z-index: 7;
        pointer-events: none;
    }

    #edge-shadow-left {
        left: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }

    #edge-shadow-right {
        right: 0;
        background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }

    /* Cable canvases - screen edges, above board, below doc */
    #cables-left {
        position: fixed;
        left: 0;
        z-index: 6;
        pointer-events: none;
    }

    #cables-right {
        position: fixed;
        right: 0;
        z-index: 6;
        pointer-events: none;
    }

}