/* Mosaic Lab — the shared shell for every generated report page. Linked after /styles.css, which owns the palette (--bg --panel --border --text --muted --red --green --blue --yellow --magenta). Nothing here redefines those. Emitted by game/scripts/lab-shell.ts; the pages under /lab are generated, so style them here, never in the HTML. */ :root { /* Per-page accents. A generator overrides these on — the open block runs amber, everything else runs the lab blue. */ --lab-accent: var(--blue); --lab-rule: color-mix(in srgb, var(--blue) 55%, transparent); --lab-gold: #FFD54F; --lab-panel-grad: linear-gradient(180deg, #1a1a22, #111116); --lab-dur: 140ms; --lab-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* One key: solid depth at rest, lift on hover, sink on press. */ --lab-key-depth: 0 3px 0 rgba(0, 0, 0, 0.6); } /* ---------------------------------------------------------------- layout */ /* On a wide screen the section rail sits beside the report; the reading column keeps its 920px measure. Below 1100px the rail becomes a strip. */ @media (min-width: 1100px) { body.lab-report main { max-width: 1180px; } body.lab-report .lab-hero { max-width: 920px; margin-inline: auto; } .lab-body { display: grid; grid-template-columns: 184px minmax(0, 920px); justify-content: center; column-gap: 40px; align-items: start; } } /* ------------------------------------------------------------------ hero */ .lab-hero { text-align: center; padding: 72px 0 24px; } .lab-hero h1 { font-weight: 800; margin: 0; } .lab-hero-wordmark h1 { font-size: clamp(40px, 8vw, 84px); letter-spacing: 0.04em; } .lab-hero-wordmark h1 .word-lab { color: var(--lab-accent); } .lab-hero-report h1 { font-size: clamp(34px, 6vw, 64px); letter-spacing: 0.03em; max-width: 940px; margin-inline: auto; } .lab-hero .tagline { color: var(--muted); margin: 12px 0 0; font-size: 16px; font-weight: 400; } .lab-study-eyebrow { display: inline-block; color: var(--lab-accent); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; font-size: 12px; margin-bottom: 14px; text-decoration: none; } a.lab-study-eyebrow:hover { text-decoration: underline; } .lab-status-row { margin-top: 14px; } .lab-count { font-size: clamp(40px, 8vw, 84px); font-weight: 800; letter-spacing: 0.04em; line-height: 1; margin: 34px 0 4px; font-variant-numeric: tabular-nums; } .lab-count-lbl { font-size: 13px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; } .lab-framing { max-width: 720px; margin: 30px auto 0; color: var(--muted); font-size: 15px; text-align: left; } .lab-framing b { color: var(--text); } .lab-framing p { margin: 0 0 12px; } .lab-framing ol { margin: 0; padding-left: 24px; } .lab-framing li { margin: 0 0 6px; } /* ----------------------------------------------------------- status chip */ .lab-status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-variant-numeric: tabular-nums; } .lab-status-dot { font-size: 13px; line-height: 1; } .lab-status.live { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); } .lab-status.done { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); } .lab-status.queued { color: var(--muted); } /* ------------------------------------------------------------ section nav */ .lab-nav { margin: 0 0 8px; } .lab-nav-inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .lab-nav-inner::-webkit-scrollbar { display: none; } .lab-nav a { flex: 0 0 auto; display: block; text-decoration: none; white-space: nowrap; color: var(--muted); font-size: 12px; letter-spacing: 0.03em; padding: 7px 12px; border-radius: 8px; border: 1px solid transparent; transition: color var(--lab-dur) var(--lab-ease), background var(--lab-dur) var(--lab-ease); } .lab-nav a:hover { color: var(--text); background: var(--panel); } .lab-nav a.is-current { color: var(--lab-accent); background: var(--panel); border-color: var(--border); } /* Narrow: a sticky strip that scrolls sideways under the header. */ @media (max-width: 1099px) { .lab-nav { position: sticky; top: 0; z-index: 5; margin: 0 -24px 8px; padding: 8px 24px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } } /* Wide: a rail that stays with the reader. */ @media (min-width: 1100px) { .lab-nav { position: sticky; top: 24px; margin: 28px 0 0; max-height: calc(100vh - 48px); overflow-y: auto; border-left: 1px solid var(--border); padding-left: 2px; } .lab-nav-inner { flex-direction: column; gap: 2px; overflow-x: visible; } .lab-nav a { white-space: normal; padding: 6px 10px; border-radius: 0 8px 8px 0; } .lab-nav a.is-current { box-shadow: inset 2px 0 0 var(--lab-accent); } } /* --------------------------------------------------------------- sections */ section.lab { padding: 28px 0; border-top: 1px solid var(--lab-rule); scroll-margin-top: 72px; } section.lab h2 { font-size: 22px; margin: 0 0 6px; } section.lab .sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; max-width: 780px; } /* ----------------------------------------------------------- stat tiles */ .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .tiles-4 { grid-template-columns: repeat(4, 1fr); } @media (min-width: 641px) and (max-width: 900px) { .tiles, .tiles-4 { grid-template-columns: repeat(2, 1fr); } } .tile { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; } .tile .num { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; } .tiles-4 .tile .num { font-size: 26px; } .tile .lbl { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; } .tile .dtl { font-size: 12px; color: var(--muted); margin-top: 6px; } /* Mobile: each stat is a full-width row — number left, label right. */ @media (max-width: 640px) { .tiles, .tiles-4 { grid-template-columns: 1fr; gap: 10px; } .tile { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; } .tile .num, .tiles-4 .tile .num { font-size: 24px; } .tile .lbl { margin-top: 0; text-align: right; } .tile .dtl { display: none; } } /* ---------------------------------------------------------- chart cards */ figure.lab-fig { margin: 0 0 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; overflow-x: auto; } figure.lab-fig figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; } figure.lab-fig svg { width: 100%; height: auto; display: block; } /* Chart text follows the page ink; grid lines follow the border token; the fair-share reference line is dashed and labelled. Goal colours are used only for goal-colour data — single-series marks take the lab accent. */ figure.lab-fig svg text { font-variant-numeric: tabular-nums; } .cc-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .xg-chart-title { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text); } .cc-eyebrow + .xg-chart-title { margin-top: -2px; } .cc-sub { margin: -4px 0 10px; font-size: 13px; color: var(--muted); } .xg-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12px; color: var(--muted); } .xg-legend span { display: inline-flex; align-items: center; gap: 6px; } .tut-swatch-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* -------------------------------------------------------------- tables */ .lab-scroll { overflow-x: auto; } table.lab-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } table.lab-table th { text-align: left; color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; border-bottom: 1px solid var(--border); } table.lab-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } table.lab-table.num-right td:not(:first-child), table.lab-table.num-right th:not(:first-child) { text-align: right; } /* ------------------------------------------------------------- findings */ .find { border-left: 3px solid var(--lab-rule); padding: 2px 0 2px 16px; margin: 0 0 22px; } .find p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; } .find-lbl { display: inline-block; color: var(--lab-accent); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; margin-right: 6px; } /* ------------------------------------------------------------- scenario */ /* Nathan reads the concrete games first — a gold rule marks every one. */ .scn { border-left: 3px solid var(--lab-gold); background: color-mix(in srgb, var(--lab-gold) 4%, var(--panel)); border-radius: 0 14px 14px 0; padding: 16px 20px; margin: 0 0 14px; } .scn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; } .scn-eyebrow { color: var(--lab-gold); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .scn-title { flex: 1 1 auto; font-weight: 700; font-size: 15px; } .scn-seed { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .scn-text { margin: 0 0 12px; font-size: 14px; line-height: 1.6; } .scn figure.lab-fig { background: transparent; border: 0; padding: 0; margin-bottom: 0; } /* --------------------------------------------------- cross-study cards */ .cmp-studies { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; } @media (max-width: 900px) { .cmp-studies { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .cmp-studies { grid-template-columns: 1fr; } } .cmp-study { display: flex; flex-direction: column; gap: 6px; background: var(--lab-panel-grad); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--text); font-size: 13px; } .cmp-study b { font-size: 15px; } .cmp-study span { color: var(--muted); } .cmp-trends { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1000px) { .cmp-trends { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .cmp-trends { grid-template-columns: 1fr; } } .cmp-trend { margin: 0; } .cmp-trend figcaption { font-size: 12px; } .cmp-turns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 800px) { .cmp-turns { grid-template-columns: 1fr; } } .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 860px) { .two-up { grid-template-columns: 1fr; } } /* ----------------------------------------------------- dashboard cards */ .dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 36px 0 64px; } @media (max-width: 700px) { .dash-grid { grid-template-columns: 1fr; } } .dash-card { display: flex; flex-direction: column; gap: 8px; background: var(--lab-panel-grad); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; text-decoration: none; color: var(--text); } .dash-card-queued { opacity: 0.62; } .dash-eyebrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .dash-eyebrow > span:first-child { color: var(--lab-accent); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; font-size: 11px; } .dash-card h2 { margin: 0; font-size: 19px; } .dash-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; flex: 1 1 auto; } .dash-count { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; } .dash-count-lbl { display: block; font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0.09em; text-transform: uppercase; margin-top: 2px; } .dash-link { color: var(--lab-accent); font-size: 13px; font-weight: 600; } .dash-section-h { font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lab-accent); margin: 0 0 14px; } .dash-mode { margin: 26px 0 18px; padding: 22px 26px; background: var(--lab-panel-grad); border: 1px solid var(--border); border-radius: 16px; } .dash-mode-h { margin: 0 0 8px; font-size: 30px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; } .dash-mode-tag { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted); margin-left: 12px; } .dash-mode .dash-section-sub { margin: 0; } .dash-section-sub { color: var(--muted); font-size: 14px; max-width: 720px; margin: -6px 0 0; } .dash-section-sub + .dash-grid { padding-top: 18px; } .dash-grid + .dash-section-h { margin-top: -18px; } .dash-grid-cross { grid-template-columns: 1fr; padding: 0 0 64px; } @media (max-width: 520px) { .dash-mode { padding: 18px 18px; } .dash-mode-h { font-size: 24px; letter-spacing: 2px; } .dash-mode-tag { display: block; margin-left: 0; margin-top: 4px; } } /* The Classic entry on the dashboard: a key, plus its one line of framing. */ .dash-mode-play { margin-top: 18px; } .dash-mode-play p { color: var(--muted); font-size: 13px; max-width: 720px; margin: 10px 0 0; } a.lab-key { display: inline-block; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; } /* ------------------------------------------------------------- the keys */ /* Every pressable surface on a Lab page is a key: solid depth at rest, a lift on hover, and a real sink on press. */ a.dash-card, a.cmp-study, a.lab-key { box-shadow: var(--lab-key-depth), inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: transform var(--lab-dur) var(--lab-ease), box-shadow var(--lab-dur) var(--lab-ease), border-color var(--lab-dur) var(--lab-ease), filter var(--lab-dur) var(--lab-ease); } a.dash-card:hover, a.cmp-study:hover, a.lab-key:hover { transform: translateY(-1px); border-color: var(--lab-accent); filter: brightness(1.08); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); } a.dash-card:active, a.cmp-study:active, a.lab-key:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03); filter: brightness(0.98); } a.dash-card:focus-visible, a.cmp-study:focus-visible, a.lab-key:focus-visible, .lab-nav a:focus-visible, .lab-foot a:focus-visible { outline: 2px solid var(--lab-accent); outline-offset: 3px; } /* ---------------------------------------------------------------- foot */ .lab-foot { color: var(--muted); font-size: 13px; padding: 24px 0 64px; } .lab-foot a { color: var(--lab-accent); } /* ------------------------------------------------------ reduced motion */ @media (prefers-reduced-motion: reduce) { a.dash-card, a.cmp-study, a.lab-key, .lab-nav a { transition: none; } a.dash-card:hover, a.cmp-study:hover, a.lab-key:hover, a.dash-card:active, a.cmp-study:active, a.lab-key:active { transform: none; } html { scroll-behavior: auto; } }