/* ZB.DEV / Labs: The Workshop x Digital Archive.
   Styles are scoped to the Labs section; the main-site CSS is untouched.
   Palette lives here so colours can be iterated on later. */
:root {
  --lab-bg: #111516;
  --lab-panel: #15191a;
  --lab-panel-hover: #1a1f20;
  --lab-ink: #f0ede4;
  --lab-muted: #b8bab3;
  --lab-secondary: #8d9694;
  --lab-rule: #5d605e;
  --lab-faint: #343a3b;
  --lab-accent: #e3a43f;
  --lab-accent-bright: #f0b65c;
  --lab-green: #78ca73;
  --lab-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --lab-sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --lab-width: 1220px;
}
body.labs, body.labs * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.labs { margin: 0; min-width: 320px; color: var(--lab-ink); background: var(--lab-bg); font-family: var(--lab-mono); font-size: 13px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.labs a { color: inherit; text-decoration: none; }
body.labs button { font: inherit; }
body.labs img { max-width: 100%; display: block; }
body.labs :focus-visible { outline: 2px solid var(--lab-accent-bright); outline-offset: 4px; }
body.labs ::selection { color: var(--lab-bg); background: var(--lab-accent); }
body.labs h1, body.labs h2, body.labs h3, body.labs p, body.labs figure { margin-top: 0; }
.labs-skip { position: fixed; z-index: 120; top: -100px; left: 15px; color: var(--lab-bg) !important; background: var(--lab-accent); padding: 9px 14px; }
.labs-skip:focus { top: 12px; }

/* The shared header, including registration marks, is styled in shared-header.css. */

.labs-content { max-width: var(--lab-width); margin: 0 auto; padding: 0 24px 45px; }
.labs-eyebrow, .labs-kicker { margin-bottom: 14px; font: 500 12px/1.4 var(--lab-mono); }
.labs-eyebrow { display: inline-block; border-bottom: 1px solid var(--lab-rule); padding-bottom: 5px; }
.labs-eyebrow__ticks { color: var(--lab-secondary); margin-left: 9px; letter-spacing: .24em; }
.labs-accent-rule { display: block; width: 96px; height: 2px; margin: 20px 0 24px; background: var(--lab-accent); }
.labs-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 31px; padding: 12px 22px; min-height: 46px; border: 1px solid var(--lab-accent); color: var(--lab-accent) !important; font: 600 12px/1.4 var(--lab-mono); white-space: nowrap; transition: background .18s,color .18s,transform .18s; }
.labs-button:hover { color: var(--lab-bg) !important; background: var(--lab-accent); transform: translateY(-2px); }
.labs-button--outline { gap: 13px; }
.labs-brackets { position: relative; }
.labs-brackets::before, .labs-brackets::after { content: ''; position: absolute; width: 16px; height: 16px; z-index: 2; pointer-events: none; }
.labs-brackets::before { top: 9px; left: 9px; border-top: 1px solid var(--lab-accent); border-left: 1px solid var(--lab-accent); }
.labs-brackets::after { bottom: 9px; right: 9px; border-bottom: 1px solid var(--lab-accent); border-right: 1px solid var(--lab-accent); }

/* Hero */
.labs-hero { min-height: 448px; display: grid; grid-template-columns: .97fr 1.03fr; align-items: center; gap: clamp(24px,4.9vw,66px); padding: 24px 0 31px; }
.labs-hero__copy { padding: 10px 0 10px 40px; }
.labs-hero h1 { margin: 3px 0 6px; font: 700 clamp(48px,5.15vw,75px)/1.07 var(--lab-sans); letter-spacing: -.052em; }
.labs-hero__lead { max-width: 30ch; font: 400 clamp(19px,2vw,26px)/1.29 var(--lab-mono); letter-spacing: -.045em; }
.labs-hero__description { max-width: 45ch; margin-bottom: 20px; font: 400 14px/1.6 var(--lab-mono); }
.labs-hero__visual { align-self: center; width: 100%; height: 380px; margin: 0; border: 1px solid var(--lab-rule); }
.labs-hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.labs-hero__visual figcaption { position: absolute; z-index: 3; top: 19px; left: 26px; right: 24px; display: flex; justify-content: space-between; gap: 10px; font: 500 11px/1.3 var(--lab-mono); text-shadow: 0 2px 7px #000, 0 0 10px #000; }
.labs-hero__counter { position: absolute; bottom: -26px; right: 0; font: 500 11px var(--lab-mono); }

/* Featured and index panels */
.labs-showcase { display: grid; grid-template-columns: minmax(0,2.75fr) minmax(277px,1fr); gap: 16px; padding-top: 8px; }
.labs-feature, .labs-index, .labs-app-card, .labs-empty-card, .labs-toolkit { background: transparent; border: 1px solid var(--lab-rule); }
.labs-feature { min-height: 270px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(170px,.84fr) minmax(150px,.81fr); align-items: center; gap: 18px; padding: 25px 29px 26px 39px; }
.labs-feature__copy { align-self: stretch; display: flex; flex-direction: column; align-items: start; justify-content: center; min-width: 0; }
.labs-kicker { text-transform: uppercase; }
.labs-feature__copy .labs-kicker { margin-bottom: 19px; }
.labs-feature h2 { margin-bottom: 5px; font: 600 clamp(26px,2.8vw,36px)/1.18 var(--lab-sans); letter-spacing: -.035em; }
.labs-feature__intro { max-width: 35ch; font: 400 12px/1.76 var(--lab-mono); margin-bottom: 23px; }
.labs-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.labs-tags span { background: #2a2f30; padding: 5px 8px; color: var(--lab-ink); font: 500 10px/1.25 var(--lab-mono); white-space: nowrap; }
.labs-feature__cover { display: block; border: 1px solid #ddd4c5; background: #eee5d1; padding: 6px; transition: transform .18s, border-color .18s; }
.labs-feature__cover:hover { border-color: var(--lab-accent); transform: translateY(-3px); }
.labs-feature__cover img { aspect-ratio: 1 / 1.16; width: 100%; height: 198px; object-fit: cover; object-position: center; filter: sepia(.33) contrast(1.09); }
.labs-feature__action { height: 78%; min-height: 180px; border-left: 1px solid var(--lab-rule); padding-left: 20px; display: flex; flex-direction: column; align-items: start; justify-content: center; }
.labs-feature__action p:not(.labs-status) { font: 400 12px/1.74 var(--lab-mono); margin-bottom: 17px; }
.labs-feature__action .labs-status { margin-bottom: 19px; }
.labs-status { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1.2 var(--lab-mono); text-transform: uppercase; white-space: nowrap; }
.labs-status--live { color: var(--lab-green); }
.labs-status--building { color: var(--lab-accent); }
.labs-status--planned { color: var(--lab-muted); }
.labs-status--archived { color: var(--lab-secondary); }
.labs-status__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; background: currentColor; }
.labs-status--planned .labs-status__dot, .labs-status--archived .labs-status__dot { background: transparent; border: 1px solid currentColor; }
.labs-index { padding: 20px 20px 17px; min-width: 0; }
.labs-index__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.labs-index__heading h2 { margin: 0; font: 500 12px var(--lab-mono); }
.labs-index__heading a { font: 400 11px var(--lab-mono); white-space: nowrap; }
.labs-index__heading a:hover { color: var(--lab-accent); }
.labs-index__list { margin: 0; padding: 0; list-style: none; }
.labs-index__list li { border-bottom: 1px solid var(--lab-rule); }
.labs-index__list li:last-child { border-bottom: 0; }
.labs-index__list a, .labs-index__static { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 0; font: 400 11px/1.45 var(--lab-mono); }
.labs-index__list a:hover { color: var(--lab-accent); }
.labs-index__list a:hover .labs-status { color: var(--lab-accent); }
.labs-index__number { font-weight: 600; }
.labs-index__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.labs-index__muted { color: var(--lab-secondary); }
.labs-index__muted span:last-child { font-size: 9px; letter-spacing: -.035em; }

/* Dynamic app cards and intentional empty state */
.labs-archive { padding-top: 32px; scroll-margin-top: 28px; }
.labs-archive__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 0 8px 13px; border-top: 1px solid var(--lab-faint); padding-top: 10px; }
.labs-archive__heading h2 { margin: 0; font: 500 12px var(--lab-mono); color: var(--lab-accent); }
.labs-archive__heading > span { color: var(--lab-muted); font: 500 11px var(--lab-mono); }
.labs-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.labs-app-card { min-height: 255px; padding: 18px 24px 18px; display: flex; flex-direction: column; transition: background .18s,border-color .18s; }
.labs-app-card:hover { background: var(--lab-panel-hover); border-color: var(--lab-accent); }
.labs-app-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 19px; font: 500 12px var(--lab-mono); }
.labs-app-card__body { display: grid; grid-template-columns: 77px minmax(0,1fr); align-items: start; gap: 15px; }
.labs-app-card__symbol { width: 65px; height: 78px; display: grid; place-items: center; border: 1px solid var(--lab-ink); font-size: 22px; font-weight: 400; white-space: nowrap; }
.labs-app-card h3 { margin: 0 0 8px; font: 500 19px/1.25 var(--lab-sans); letter-spacing: -.022em; }
.labs-app-card p { color: var(--lab-muted); font: 400 12px/1.56 var(--lab-mono); }
.labs-app-card .labs-tags { margin: 12px 0 15px; }
.labs-app-card__bottom { margin-top: auto; font: 500 11px var(--lab-mono); color: var(--lab-accent); }
.labs-app-card__bottom a { display: inline-flex; gap: 10px; align-items: center; }
.labs-app-card__bottom a:hover { color: var(--lab-ink); }
.labs-app-card__unavailable { color: var(--lab-secondary); }
.labs-empty-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.labs-empty-card, .labs-toolkit { min-height: 238px; padding: 26px 31px; display: flex; flex-direction: column; align-items: start; }
.labs-empty-card > div { margin: auto 0; }
.labs-empty-card h3 { margin-bottom: 10px; font: 600 clamp(23px,2.1vw,29px)/1.2 var(--lab-sans); letter-spacing: -.035em; }
.labs-empty-card p { margin-bottom: 0; max-width: 64ch; color: var(--lab-muted); font: 400 12px/1.72 var(--lab-mono); }
.labs-empty-card__footer { color: var(--lab-accent); font: 500 11px var(--lab-mono); }
.labs-empty-card__footer > span { margin-left: 9px; }
.labs-toolkit h3 { margin: 13px 0 7px; font: 600 22px/1.2 var(--lab-sans); }
.labs-toolkit p { margin-bottom: 15px; color: var(--lab-muted); font: 400 12px/1.58 var(--lab-mono); }
.labs-toolkit__foot { margin-top: auto; color: var(--lab-secondary); font: 500 10px var(--lab-mono); }

.labs-footer { padding: 8px 0 14px; }
.labs-footer__inner { max-width: var(--lab-width); margin: auto; padding: 18px 24px 14px; border-top: 1px solid var(--lab-rule); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.labs-footer small, .labs-footer__links, .labs-footer__meta { font: 500 11px/1.45 var(--lab-mono); }
.labs-footer__links { display: flex; align-items: center; gap: 20px; }
.labs-footer__links a { text-decoration: underline; text-underline-offset: 3px; }
.labs-footer__links a:hover { color: var(--lab-accent); }
.labs-footer__meta { display: flex; align-items: center; gap: 28px; white-space: nowrap; }
.labs-footer__meta span { border-left: 1px solid var(--lab-rule); padding-left: 22px; color: var(--lab-secondary); }

@media (max-width: 1100px) {
  .labs-showcase { grid-template-columns: 1fr; }
  .labs-feature { grid-template-columns: minmax(0,1.3fr) minmax(180px,.75fr) minmax(160px,.75fr); }
  .labs-index__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; }
}
@media (max-width: 850px) {
  .labs-hero { grid-template-columns: 1fr 1fr; gap: 22px; min-height: 380px; }
  .labs-hero__copy { padding-left: 7px; }
  .labs-hero h1 { font-size: clamp(40px,5.6vw,55px); }
  .labs-hero__lead { font-size: 17px; }
  .labs-hero__visual { height: 315px; }
  .labs-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .labs-empty-grid { grid-template-columns: 1fr; }
  .labs-footer__inner { flex-wrap: wrap; }
}
@media (max-width: 660px) {
  .labs-content { padding: 0 18px 33px; }
  .labs-hero { display: flex; flex-direction: column; align-items: stretch; padding: 34px 0 39px; gap: 25px; }
  .labs-hero__copy { padding: 0 3px; }
  .labs-hero h1 { font-size: clamp(42px,12vw,62px); }
  .labs-hero__lead { font-size: clamp(18px,4.1vw,22px); }
  .labs-hero__description { font-size: 12px; }
  .labs-hero__visual { height: auto; aspect-ratio: 1.6; }
  .labs-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(126px,.78fr); gap: 15px; padding: 23px 22px 23px; }
  .labs-feature__copy { justify-content: start; }
  .labs-feature h2 { font-size: 26px; }
  .labs-feature__intro { font-size: 11px; }
  .labs-feature__cover img { height: 164px; }
  .labs-feature__action { grid-column: span 2; min-height: 0; height: auto; border-left: 0; border-top: 1px solid var(--lab-rule); padding: 14px 0 0; display: block; }
  .labs-feature__action .labs-status { margin-bottom: 7px; }
  .labs-feature__action p:not(.labs-status) { margin-bottom: 13px; }
  .labs-index__list { display: block; }
  .labs-cards { grid-template-columns: 1fr; }
  .labs-footer__inner { padding: 15px 20px; }
  .labs-footer__meta { gap: 10px; }
  .labs-footer__meta span { padding-left: 10px; }
}
@media (max-width: 420px) {
  .labs-feature { grid-template-columns: minmax(0,1fr); }
  .labs-feature__cover { max-width: 260px; }
  .labs-feature__action { grid-column: 1; }
  .labs-hero__visual figcaption { font-size: 9px; left: 18px; right: 16px; }
  .labs-footer__links { flex-wrap: wrap; row-gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .labs-button, .labs-feature__cover, .labs-app-card { transition: none; } }