/* ==========================================================================
   CHAPTER 02 — technology.html override layer (load AFTER Tailwind, only here)
   The explorer and project data scripts emit dark utility classes.
   This sheet adapts them to
   the SPINE paper monograph, scoped strictly under the protected containers:
   #explorer-grid, #project-modal, #keyword-modal, #broadcast-carousel.
   ========================================================================== */

/* --- Surfaces ----------------------------------------------------------- */
#explorer-grid .bg-slate-800\/50,
#explorer-grid .bg-slate-800,
#explorer-grid .bg-slate-900,
#project-modal .bg-slate-800,
#project-modal .bg-slate-800\/50,
#project-modal .bg-slate-900,
#keyword-modal .bg-slate-800,
#keyword-modal .bg-slate-900 {
    background-color: var(--paper-soft) !important;
}

#project-modal .bg-slate-950,
#project-modal .bg-slate-900\/90,
#project-modal .bg-slate-900\/95,
#keyword-modal .bg-slate-950,
#keyword-modal .bg-slate-900\/90,
#keyword-modal .bg-slate-900\/95 {
    background-color: var(--paper) !important;
}

/* Modal backdrops stay scrims, but ink-tinted */
#project-modal.bg-black\/80, #project-modal .bg-black\/80,
#keyword-modal.bg-black\/80, #keyword-modal .bg-black\/80,
#project-modal .backdrop-blur-sm, #keyword-modal .backdrop-blur-sm {
    background-color: rgba(22, 22, 26, .55) !important;
}

/* --- Text --------------------------------------------------------------- */
#explorer-grid .text-white,
#project-modal .text-white,
#keyword-modal .text-white,
#explorer-grid .text-slate-100, #project-modal .text-slate-100, #keyword-modal .text-slate-100,
#explorer-grid .text-slate-200, #project-modal .text-slate-200, #keyword-modal .text-slate-200 {
    color: var(--ink) !important;
}

#explorer-grid [class*="text-slate-3"],
#explorer-grid [class*="text-slate-4"],
#explorer-grid [class*="text-slate-5"],
#project-modal [class*="text-slate-3"],
#project-modal [class*="text-slate-4"],
#project-modal [class*="text-slate-5"],
#project-modal [class*="text-slate-6"],
#keyword-modal [class*="text-slate-3"],
#keyword-modal [class*="text-slate-4"],
#keyword-modal [class*="text-slate-5"] {
    color: var(--ink-soft) !important;
}

/* Cyber teal accents → chapter teal-ink */
#explorer-grid [class*="text-cyber-"],
#project-modal [class*="text-cyber-"],
#keyword-modal [class*="text-cyber-"],
#explorer-grid [class*="text-cyan-"],
#project-modal [class*="text-cyan-"],
#keyword-modal [class*="text-cyan-"],
#explorer-grid [class*="text-teal-"],
#project-modal [class*="text-teal-"] {
    color: var(--accent-deep) !important;
}

#explorer-grid [class*="bg-cyber-"],
#project-modal [class*="bg-cyber-"],
#keyword-modal [class*="bg-cyber-"] {
    background-color: var(--accent) !important;
    color: #FAF7F2 !important;
}

/* --- Borders & frames ---------------------------------------------------- */
#explorer-grid [class*="border-slate-"],
#explorer-grid [class*="border-cyber-"],
#explorer-grid [class*="border-cyan-"],
#project-modal [class*="border-slate-"],
#project-modal [class*="border-cyber-"],
#project-modal [class*="border-cyan-"],
#keyword-modal [class*="border-slate-"],
#keyword-modal [class*="border-cyber-"] {
    border-color: var(--hairline) !important;
}

/* Glow shadows → none (hairlines do the work on paper) */
#explorer-grid [class*="shadow-"],
#project-modal [class*="shadow-"]:not([class*="shadow-none"]) {
    box-shadow: none !important;
}

/* Sharp editorial corners */
#explorer-grid .rounded-lg, #explorer-grid .rounded-xl, #explorer-grid .rounded-2xl,
#project-modal .rounded-lg, #project-modal .rounded-xl, #project-modal .rounded-2xl, #project-modal .rounded-3xl,
#keyword-modal .rounded-lg, #keyword-modal .rounded-xl, #keyword-modal .rounded-2xl {
    border-radius: 0 !important;
}

/* --- Broadcast carousel shell ------------------------------------------- */
#broadcast-carousel [class*="bg-slate-8"],
#broadcast-carousel [class*="bg-slate-9"] {
    background-color: var(--paper-soft) !important;
}
#broadcast-carousel .text-white { color: var(--ink) !important; }
#broadcast-carousel [class*="text-slate-3"],
#broadcast-carousel [class*="text-slate-4"] { color: var(--ink-soft) !important; }
#broadcast-carousel [class*="border-slate-"] { border-color: var(--hairline) !important; }
#broadcast-carousel .rounded-xl, #broadcast-carousel .rounded-2xl { border-radius: 0 !important; }

/* --- Keyword chips ------------------------------------------------------- */
.keyword-chip {
    border: 1px solid var(--hairline) !important;
    background: transparent !important;
    color: var(--accent-deep) !important;
    border-radius: 0 !important;
    font-family: 'Space Grotesk', monospace !important;
}
.keyword-chip:hover {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
}

/* --- Live career-log terminal ------------------------------------------ */
#terminal-body {
    background: #0E1413 !important;   /* phosphor well — the one dark plate, framed like equipment */
    color: #7FD1C8 !important;
}
#terminal-body .text-white { color: #E6F4F2 !important; }

/* ==========================================================================
   APPENDED — SPINE rebuild page-specific layer (technology.html)
   ========================================================================== */

/* --- Utility shims (theme-tech.css dropped; carousel.js + terminal shell
       rely on these classes) ---------------------------------------------- */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* --- Generic hairline frame helper for page-owned shells ------------------ */
.frame-hairline { border: 1px solid var(--hairline); }

/* --- Explorer chrome (page-owned wrappers around the protected grid) ----- */
.explorer-chrome-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
    font-family: 'Space Grotesk', monospace;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.explorer-status-bar {
    border-top: 1px solid var(--hairline);
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Space Grotesk', monospace;
    font-size: 14px;
    letter-spacing: .12em;
    color: var(--ink-soft);
}
#explorer-breadcrumbs { color: var(--ink-soft); }
#explorer-breadcrumbs .hover\:text-cyber-400:hover { color: var(--accent-deep) !important; }

/* Project browser: ordinary document scrolling on touch screens. */
#explorer-grid > button {
    height: auto;
    min-height: 144px;
    overflow-wrap: anywhere;
}
#explorer-grid > button::before { top: 8px; left: 10px; right: auto; }
#explorer-grid button:focus-visible,
#explorer-breadcrumbs button:focus-visible,
#explorer-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
#explorer-breadcrumbs { flex-wrap: wrap; overflow: visible; }
#explorer-breadcrumbs button { min-height: 44px; text-align: left; }
#explorer-back { flex-shrink: 0; }
#archive .explorer-status-bar > div { flex-wrap: wrap; gap: 8px 16px; }
#project-modal [aria-label="Close project modal"] {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    background: var(--paper);
}
#modal-content { padding: 20px; overflow-wrap: anywhere; }
#project-modal-title { padding-right: 44px; }
@media (max-width: 639px) {
    #origin-track > .origin-row:last-child {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 12px;
    }
    #origin-track > .origin-row:last-child .frame-hairline { padding: 16px; }
}

/* --- FIELD NOTES vertical scrub rule -------------------------------------- */
.field-rule {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--accent);
    transform-origin: top center;
}

/* --- Origin story scrubbed line-draw -------------------------------------- */
.origin-line-svg {
    position: absolute;
    top: 0;
    left: 21px;
    width: 2px;
    height: 100%;
    overflow: visible;
}
@media (min-width: 768px) {
    .origin-line-svg { left: 50%; transform: translateX(-50%); }
}
.origin-line-svg path {
    stroke: var(--accent);
    stroke-width: 2;
    fill: none;
    vector-effect: non-scaling-stroke;
    opacity: .55;
}
.origin-node {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    background: var(--paper);
    display: grid;
    place-items: center;
    font-family: 'Space Grotesk', monospace;
    font-size: 13px;
    color: var(--accent-deep);
    z-index: 1;
}
.origin-node::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--accent);
    opacity: 0;
    pointer-events: none;
}
.origin-node.pinged::after { animation: spine-node-ping .9s ease-out 1; }
@keyframes spine-node-ping {
    0%   { transform: scale(1); opacity: .8; }
    100% { transform: scale(2.3); opacity: 0; }
}

/* --- Mono chip label (replaces old pill chips, radius 0) ------------------ */
.chip-mono {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    border: 1px solid var(--hairline);
    padding: 3px 10px;
    font-family: 'Space Grotesk', monospace;
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-deep);
    background: transparent;
}
.chip-mono.chip-accent { border-color: var(--accent); }

/* --- QA pass: pale tint text classes unreadable on paper ----------------- */
#project-modal [class*="text-yellow-1"], #project-modal [class*="text-yellow-2"],
#project-modal [class*="text-yellow-3"], #project-modal [class*="text-amber-2"],
#project-modal [class*="text-amber-3"],
#explorer-grid [class*="text-yellow-1"], #explorer-grid [class*="text-yellow-2"],
#explorer-grid [class*="text-yellow-3"], #explorer-grid [class*="text-amber-2"],
#explorer-grid [class*="text-amber-3"] {
    color: #D4B274 !important;            /* bright gold on phosphor dark */
}
#project-modal .text-yellow-500, #explorer-grid .text-yellow-500 {
    color: #B8965A !important;            /* gold kicker labels */
}
#project-modal [class*="text-green-"], #project-modal [class*="text-emerald-2"],
#project-modal [class*="text-emerald-3"], #project-modal [class*="text-emerald-4"],
#explorer-grid [class*="text-green-"],
#keyword-modal [class*="text-green-"] {
    color: var(--accent-deep) !important;
}
#project-modal [class*="text-red-3"], #project-modal [class*="text-rose-3"],
#project-modal [class*="text-pink-3"] {
    color: #FB7185 !important;            /* light rose warnings on dark */
}
#project-modal [class*="text-purple-2"], #project-modal [class*="text-purple-3"],
#project-modal [class*="text-violet-2"], #project-modal [class*="text-violet-3"],
#project-modal [class*="text-indigo-2"], #project-modal [class*="text-indigo-3"] {
    color: #C4B5FD !important;
}
/* Decorative glow blobs inside the modal die on paper */
#project-modal .blur-2xl, #project-modal .blur-3xl { display: none !important; }

/* Original terminal window restored from d56d164, using the chapter palette. */
#career-terminal {
    border-color: var(--hairline);
    background: var(--paper-soft);
}
#career-terminal > div:first-child {
    background: var(--paper-soft);
    border-color: var(--hairline);
}
#terminal-body { overflow-wrap: anywhere; }

/* Wider project browser with decorative window controls and readable cards. */
.window-lights { display: inline-flex; gap: 7px; flex-shrink: 0; }
.window-lights > span { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; }
.window-lights > span:nth-child(2) { background: #eab308; }
.window-lights > span:nth-child(3) { background: #22c55e; }
#terminal-body { font-size: 16px; line-height: 1.6; }
#career-terminal { max-width: 560px; }
#explorer-shell { width: 100%; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: var(--paper); }
.explorer-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
.explorer-location, .explorer-actions, #explorer-breadcrumbs { display: flex; align-items: center; gap: 12px; min-width: 0; }
.explorer-location { flex: 1; }
#explorer-breadcrumbs { flex-wrap: wrap; font: 15px 'Space Grotesk', monospace; }
#explorer-back, #explorer-all { min-height: 44px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 6px; font: 15px 'Space Grotesk', monospace; }
#explorer-back svg, .explorer-search-label svg { width: 20px; height: 20px; flex-shrink: 0; }
#explorer-all[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-deep); }
.explorer-search-label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 6px; }
#explorer-search { width: 240px; min-width: 0; background: transparent; font: 16px 'Outfit', sans-serif; color: var(--ink); }
#explorer-search::placeholder { color: var(--ink-soft); }
#explorer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
#explorer-grid > button.explorer-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 192px; height: auto; gap: 12px; padding: 22px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper-soft); transition: border-color .2s, background .2s; }
#explorer-grid > button.explorer-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.explorer-card > svg, .explorer-file-top svg { width: 32px; height: 32px; color: var(--accent-deep); }
.explorer-card-title { font: 600 20px/1.3 'Outfit', sans-serif; color: var(--ink); }
.explorer-card-description { font: 17px/1.5 'Outfit', sans-serif; color: var(--ink-soft); }
.explorer-card-meta { display: block; width: 100%; margin-top: auto; padding-top: 10px; font: 15px/1.5 'Space Grotesk', monospace; color: var(--accent-deep); }
.explorer-card-meta > span:not(.explorer-estimate-label) { float: right; }
.explorer-estimate-label { display: block; font-size: 14px; color: var(--ink-soft); }
.explorer-file-top { display: flex; justify-content: space-between; align-items: center; width: 100%; font: 13px 'Space Grotesk', monospace; color: var(--ink-soft); }
.explorer-award { font: 14px/1.5 'Space Grotesk', monospace; color: #d4b274; }
.explorer-empty { grid-column: 1 / -1; padding: 24px 0; }
#archive .explorer-status-bar { flex-wrap: wrap; gap: 12px; padding: 12px 20px; font-size: 14px; letter-spacing: .04em; }
@media (min-width: 600px) { #explorer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { #explorer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { #explorer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .explorer-actions { width: 100%; flex-wrap: wrap; }
    .explorer-search-label { flex: 1; }
    #explorer-search { width: 100%; }
    .explorer-toolbar { padding: 14px; }
    #explorer-grid { padding: 14px; gap: 14px; }
    #explorer-grid > button.explorer-card { padding: 18px; }
}

/* Larger project details and honest, inspectable cost ranges. */
#modal-wrapper { width: min(1280px, calc(100vw - 32px)); max-width: 1280px; padding: 0; }
#modal-wrapper.valuation-open { width: min(1560px, calc(100vw - 32px)); max-width: 1560px; }
#modal-wrapper > .glass-card { max-height: calc(100dvh - 48px); }
#modal-content { padding: clamp(20px, 3vw, 40px); }
#project-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
#main-panel { min-width: 0; }
#project-modal :is(p, li) { font-size: 18px; line-height: 1.65; }
#project-modal h2 { font-size: clamp(26px, 2vw, 34px); }
#project-modal h4 { font-size: 20px; }
#project-modal .keyword-chip { font-size: 15px; min-height: 44px; }
#valuation-panel { width: auto; min-width: 0; padding: 24px; }
#valuation-panel :is(p, .text-xs, .text-sm) { font-size: 16px; line-height: 1.6; }
#valuation-panel .valuation-amount { white-space: normal; overflow-wrap: normal; }
.valuation-method { margin-top: 18px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.valuation-method summary { cursor: pointer; min-height: 44px; font-size: 16px; }
.valuation-method a { display: inline-block; margin-top: 10px; color: var(--accent-deep); text-decoration: underline; font-size: 15px; }
@media (min-width: 1280px) { .valuation-open #project-panels { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (max-width: 599px) {
    #project-modal { padding: 12px 8px; }
    #modal-wrapper, #modal-wrapper.valuation-open { width: calc(100vw - 16px); }
    #modal-content { padding: 20px 14px; }
    #valuation-panel { padding: 16px; }
    #project-modal :is(p, li) { font-size: 17px; }
    #project-modal #main-panel > .p-6 { padding: 16px; }
}

@media (min-width: 1280px) { #explorer-grid.explorer-root { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#project-modal [aria-label="Close project modal"] { position: sticky; top: 8px; right: 8px; float: right; margin: 8px; border: 1px solid var(--hairline); border-radius: 6px; }
#keyword-modal [aria-label="Close keyword modal"] { min-width: 44px; min-height: 44px; }

@media (max-width: 767px) {
    .explorer-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .explorer-location { grid-column: 1; grid-row: 1; }
    .explorer-actions { display: contents; }
    #explorer-all { grid-column: 2; grid-row: 1; justify-self: end; }
    .explorer-search-label { grid-column: 1 / -1; width: 100%; }
}

#valuation-panel summary { min-height: 44px; }

.explorer-window-bar { display: flex; align-items: center; padding: 12px 20px 0; }

/* Cost details enter beside the story on desktop and above it on touch layouts. */
#valuation-panel { transition: none; }
@media (min-width: 1280px) {
    .valuation-open #main-panel { grid-column: 1; grid-row: 1; }
    .valuation-open #valuation-panel { grid-column: 2; grid-row: 1; }
}
#project-modal { align-items: flex-start; }
#modal-wrapper > .glass-card { overflow-anchor: none; scrollbar-gutter: stable; }

#explorer-grid { align-content: start; perspective: 1100px; }
.explorer-card > svg, .explorer-file-top svg { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .explorer-card:hover > svg, .explorer-card:hover .explorer-file-top svg { transform: translateY(-3px) rotate(-4deg) scale(1.08); }
}