/* @fileoverview Responsive supplemental UI and project index styling
Purpose: Serve Nischhal’s approved workspace portfolio.
Responsibilities: Preserve identity, keyboard interactions, local assets and the approved layout.
Execution context: Browser; installed by the final production build stage.
Connected files: scripts/install-workspace-home.cjs, scripts/audit-workspace-home.cjs, src/workspace-home/index.html.
Maintenance: Keep assets under /workspace-home and verify behavior after edits.
*/
.hb-p{max-width:460px}.tq-c blockquote{font-size:clamp(20px,2vw,28px)}.tq-c figcaption a:hover{color:#0D99FF}.dep-row.cur .st{color:#8e8e97}.dep-wrap{padding-bottom:40px}.ft-role span{font-size:14px}.sh-go{font-size:11px!important}.pr-big,.pr-pp,.pr-k .pr-big{font-size:22px!important;font-family:var(--sans)!important}.pr-wkt{max-width:150px}.pr-th{flex-shrink:0}.more-work{position:relative;z-index:10;padding:100px max(24px,calc((100vw - 1240px)/2));background:#07070A}.more-work h2{font-family:var(--title);font-size:clamp(30px,4vw,56px);letter-spacing:-.04em;max-width:800px;margin:24px 0 36px}.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.more-grid>a{padding:32px;border:1px solid #252b3a;background:#0b1020;transition:border-color .2s}.more-grid>a:hover{border-color:#0D99FF}.more-grid h3{font-size:26px;margin:20px 0}.more-grid p{line-height:1.7;color:#b9b9c0}.resume-link{display:inline-block;margin-top:28px;color:#7cc6ff}#openIndex{all:unset;cursor:pointer;font:12px var(--mono);color:#7cc6ff;padding:10px 0;pointer-events:auto}#projectIndex{width:min(1100px,calc(100vw - 32px));max-height:85vh;color:#f4f4f2;background:#0b0c14;border:1px solid #0d99ff;padding:28px;overscroll-behavior:contain}#projectIndex::backdrop{background:#000c;backdrop-filter:blur(12px)}#projectIndex header{display:flex;justify-content:space-between;align-items:center}#projectIndex button{color:#7cc6ff;background:#0b1020;border:1px solid #234263;padding:10px 16px;cursor:pointer}#projectIndex h2{font-size:40px;letter-spacing:-.04em;margin:24px 0}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.project-grid a{min-width:0;border:1px solid #ffffff14;background:#ffffff03;padding:12px}.project-grid img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#07070a}.project-grid h3{font-size:18px;margin:14px 0 8px}.project-grid p{font:11px var(--mono);color:#8e8e97}.project-grid a:hover{border-color:#a259ff}@media(max-width:700px){.more-grid{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr 1fr}#projectIndex{padding:18px}.more-work{padding:70px 20px}.more-grid>a{padding:24px}}@media(max-width:420px){.project-grid{grid-template-columns:1fr}.tb-file{max-width:140px}}@media(prefers-reduced-motion:reduce){.grain{animation:none!important}}
.background-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;border-top:1px solid #ffffff14;padding-top:16px}.background-facts p{color:#b9b9c0;font-size:14px;line-height:1.8}.background-facts .mono{color:#7cc6ff}@media(max-width:700px){.background-facts{grid-template-columns:1fr;gap:0}}

.skip-link{position:fixed;top:8px;left:8px;z-index:99999;background:#f4f4f2;color:#07070a;padding:12px;transform:translateY(-200%)}.skip-link:focus{transform:none}

/* Readable selection-frame labels retain the original workspace palette. */
#client .lbl{background:#7030ba!important;color:#fff}
.fg-sel span,.fg-sel em{color:#06101c}
.wmeta{color:#b9b9c0!important;opacity:1!important;background:#07070a;padding:3px 5px}
.wk-pin{color:#b9b9c0}
.tb-dim,.tb-now em,.tb-now span em,.sh-opt em{color:#b9b9c0}
.sh-av{color:#07101c!important}
.sh-menu .sh-opt:hover,.sh-menu .sh-opt:focus-visible{background:#16558a}
.sh-menu{visibility:hidden}
.sh-menu.on{visibility:visible}
.sh-hp{display:none!important}
.sh-go:disabled{opacity:.6;cursor:progress}
.nrs-turnstile{margin:12px 0;min-height:65px}
.pr-h{font-size:11px}

.fg-sel{transition:transform .6s cubic-bezier(.34,1.15,.64,1),opacity .4s!important}
.sh-p .av,.sh-av>span{color:#07101c!important}
.tb-dim{color:#b9b9c0!important}

/* Blue/orange editor tags need dark ink; invisible navigation states must leave the accessibility tree. */
.tq-al em,.sh-share,.sh-cur span,.ft-sel span,.ft-sel em{color:#06101c!important}
.tb-tip{visibility:hidden}
.tb-t:hover .tb-tip,.tb-t:focus-visible .tb-tip{visibility:visible}
.tb-now>span[style*="opacity: 0;"]{visibility:hidden}
/* Fade the preview surface while keeping its project metadata readable. */
.wk-world{opacity:1}
.wk-world .wsh{opacity:calc(.2 + var(--in) * .8)}

/* Keep tiny editor labels legible through palette changes and reduced-motion rendering. */
#fgSelN,#fgSelS{background:#7cc6ff!important;color:#06101c!important}
@media(prefers-reduced-motion:reduce){.fg-sel{transition:none!important}}