/* lab-research.css - the lab's research and proof screens (unit W3, wave 7;
   version 2 screens, unit Z3, wave 10).

   Classes .lab-r-* only, drawn by lab-views-research.js. Colours are the
   site's own tokens (static/style.css of the site, :root), read through
   var(--...) and never written here: no hex, no rgb(), no colour name. The
   motion is the canvas's "expressive" decision of 12 October (cards rise in
   cascade, bars fill, pills pulse, the selected release breathes, rows slide
   in, the grid's "met" pops), and all of it stops under
   prefers-reduced-motion, at the end of this file. */

.lab-r-view { display: flex; flex-direction: column; gap: 18px; min-width: 0; color: var(--text); font-size: 16px; line-height: 1.6; }
.lab-r-view h1, .lab-r-view h2, .lab-r-view h3, .lab-r-view p { margin: 0; }
:where(.lab-r-view, .lab-r-view *) { box-sizing: border-box; }
:where(.lab-r-view) a { color: var(--accent-text); text-decoration: none; }
:where(.lab-r-view) a:hover { color: var(--text); }
.lab-r-view :focus-visible { outline: 2px solid var(--ring-accent-strong); outline-offset: 2px; }
:where(.lab-r-view) :where(button, input, select, textarea) { font: inherit; color: inherit; }

/* Text tones and helpers */
.lab-r-muted { color: var(--text-muted); }
.lab-r-soft { color: var(--text-soft); }
.lab-r-up { color: var(--up); }
.lab-r-warn { color: var(--warn-text); }
.lab-r-accent { color: var(--accent-text); }
.lab-r-strong { font-weight: 600; }
.lab-r-small { font-size: 13.5px; }
.lab-r-tiny { font-size: 12.5px; }
.lab-r-mono { font-family: var(--font-mono); }
.lab-r-sans { font-family: var(--font-ui, inherit); }
.lab-r-not-yet { color: var(--text-muted); }
.lab-r-spacer { flex: 1; }
.lab-r-icon { display: inline-flex; align-items: center; flex: none; }
.lab-r-gap-top { margin-top: 8px; }
.lab-r-scroll-x { overflow-x: auto; }
.lab-r-loading, .lab-r-empty { color: var(--text-muted); font-size: 14px; }
.lab-r-quote { color: var(--text-soft); font-size: 15px; margin-top: 4px; }

/* Breadcrumb and heading */
.lab-r-crumb { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lab-r-crumb a { color: var(--text-muted); }
.lab-r-route { font-family: var(--font-mono); font-size: 11.5px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--text-faint); }
.lab-r-head-tools { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.lab-r-clock { border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; color: var(--text-soft); }
.lab-r-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.lab-r-h1 { font-size: 32px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; }
.lab-r-lead { color: var(--text-soft); margin-top: 4px; max-width: 760px; }
.lab-r-keys { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.lab-r-key { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--text-soft); }

/* Panels */
.lab-r-panel { background: var(--glass-panel); border: 1px solid var(--glass-border); border-radius: var(--radius-panel); padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lab-r-panel-lg { padding: 24px 28px; gap: 14px; }
.lab-r-panel-raised { background: var(--bg-raised); border-color: var(--border); padding: 18px 20px; font-size: 14.5px; }
.lab-r-panel-accent { border: 2px solid var(--accent); }
.lab-r-panel-text { font-size: 14px; }
.lab-r-panel-list { padding-bottom: 12px; gap: 2px; }
.lab-r-alert-panel { border-color: var(--warn); }
.lab-r-h2 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.lab-r-h2-pad { margin-bottom: 8px; }
.lab-r-h2-big { font-size: 18px; font-weight: 700; }
.lab-r-h2-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lab-r-eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.lab-r-well { background: var(--glass-row); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.lab-r-stack { display: flex; flex-direction: column; gap: 12px; }
.lab-r-stack-tight { display: flex; flex-direction: column; gap: 8px; }
.lab-r-subform { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.lab-r-subblock { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }

/* Layout: a main column and an aside, side by side, stacked on a phone */
.lab-r-cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.lab-r-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.lab-r-aside { flex: 1 1 280px; max-width: 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.lab-r-grid-auto { display: grid; gap: 12px; }
.lab-r-min-160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.lab-r-min-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lab-r-min-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lab-r-min-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lab-r-min-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lab-r-min-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.lab-r-min-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.lab-r-gap-sm { gap: 10px; }
.lab-r-gap-md { gap: 14px; }
.lab-r-gap-lg { gap: 18px; }
.lab-r-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lab-r-span-2 { grid-column: span 2; }
.lab-r-align-end { align-items: end; }
.lab-r-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lab-r-actions-rule { border-top: 1px solid var(--border); padding-top: 16px; }
.lab-r-kv { display: flex; justify-content: space-between; gap: 8px; }
.lab-r-kv-center { align-items: center; }

/* Buttons: the site's primary gradient and its golden halo on hover */
.lab-r-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; min-height: 48px; padding: 12px 22px; font-weight: 600; font-size: 16px; border: 0; cursor: pointer; position: relative; z-index: 0; text-align: center; transition: transform .15s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.lab-r-view a.lab-r-btn { color: var(--text); }
.lab-r-btn-primary, .lab-r-view a.lab-r-btn-primary { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: var(--on-accent); box-shadow: 0 8px 20px var(--shadow-accent); }
.lab-r-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--shadow-accent), 0 0 0 1px var(--neon-mid), 0 0 0 2px var(--neon-rim), 0 0 14px 2px var(--neon-mid), 0 0 30px 6px var(--neon-soft); }
.lab-r-btn-primary:active { transform: translateY(1px); }
.lab-r-btn-outline { border: 1px solid var(--border-strong); color: var(--text); background: transparent; }
.lab-r-btn-outline:hover { transform: translateY(-1px); border-color: var(--text-soft); background: var(--glass-row); }
.lab-r-btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid transparent; }
.lab-r-btn-ghost:hover { color: var(--text); border-color: var(--border); }
.lab-r-btn-dashed { border-style: dashed; align-self: flex-start; min-height: 44px; font-size: 14.5px; }
.lab-r-btn-md { min-height: 44px; padding: 9px 16px; font-size: 14.5px; }
.lab-r-btn-sm { min-height: 44px; padding: 6px 14px; font-size: 13.5px; align-self: flex-start; }
.lab-r-btn-split { justify-content: space-between; min-height: 46px; padding: 10px 18px; font-size: 15px; }
.lab-r-btn[disabled] { opacity: .6; cursor: progress; }
/* A button of the boards with no route behind it yet (unit W7, decisions A5 and A8): greyed, "soon", inert. */
.lab-r-soon, .lab-r-soon:hover, .lab-r-btn-outline.lab-r-soon:hover { color: var(--text-muted); border-color: var(--border); background: transparent; box-shadow: none; transform: none; cursor: not-allowed; }
.lab-r-soon-tag { font-size: 12px; font-weight: 500; letter-spacing: .04em; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--text-muted); }
.lab-r-linklike { background: none; border: 0; padding: 0; color: var(--accent-text); cursor: pointer; font-size: 13.5px; min-height: 44px; text-align: left; }
.lab-r-linklike:hover { color: var(--text); }

/* Pills that toggle, chips, tags, badges */
.lab-r-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-r-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 9px 15px; min-height: 44px; color: var(--text-soft); background: transparent; cursor: pointer; user-select: none; font-size: 14.5px; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.lab-r-view a.lab-r-pill { color: var(--text-soft); }
.lab-r-pill:hover { border-color: var(--accent); color: var(--text); }
.lab-r-pill:active { transform: scale(.95); }
.lab-r-pill.on { border-color: var(--accent); background: var(--wash-accent); color: var(--text); }
.lab-r-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lab-r-pill:focus-within { outline: 2px solid var(--ring-accent-strong); outline-offset: 2px; }
.lab-r-pill-dashed { border-style: dashed; }
.lab-r-pill-sm { min-height: 44px; padding: 7px 13px; font-size: 13.5px; }
.lab-r-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lab-r-chip { border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-soft); }
.lab-r-chip-warn { border-color: var(--warn); color: var(--warn-text); }
.lab-r-tag { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; color: var(--text-soft); margin-left: 6px; }
.lab-r-tag-up { border-color: transparent; background: var(--wash-up); color: var(--up); }
.lab-r-tag-warn { border-color: transparent; background: var(--wash-warn); color: var(--warn-text); }
.lab-r-tag-plain { color: var(--text-soft); }
.lab-r-tag-accent { border-color: var(--accent); color: var(--accent-text); }
.lab-r-badge { border: 1px solid var(--border-strong); color: var(--text-soft); border-radius: 999px; padding: 1px 9px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.lab-r-badge-active { border-color: var(--accent); color: var(--accent-text); }
.lab-r-badge-weakened { border-color: var(--warn); color: var(--warn-text); }
.lab-r-badge-confirmed { border-color: var(--up); color: var(--up); }
.lab-r-badge-invalidated { border-color: var(--down); color: var(--down); }
.lab-r-badge-abandoned, .lab-r-badge-draft { border-color: var(--border-strong); color: var(--text-soft); }

/* Cards: the whole card is the link, and it lifts on hover */
.lab-r-list { display: flex; flex-direction: column; gap: 12px; }
.lab-r-card, .lab-r-view a.lab-r-card { background: var(--glass-panel); border: 1px solid var(--glass-border); border-radius: var(--radius-panel); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--text); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.lab-r-card:hover, .lab-r-card-lift:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 10px 30px var(--bg-sunken); }
.lab-r-card-lift { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.lab-r-card-dashed { border-style: dashed; border-color: var(--border-strong); }
.lab-r-card-closed { background: var(--bg-raised); border-color: var(--border); }
.lab-r-card-body { min-width: 0; flex: 1 1 360px; }
.lab-r-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lab-r-card-title .lab-r-strong { font-size: 17px; }
.lab-r-card-action { font-size: 13.5px; color: var(--accent-text); }

/* Fields */
.lab-r-field { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--text-soft); min-width: 0; }
.lab-r-field-label { font-size: 14px; color: var(--text-soft); padding: 0; margin-bottom: 4px; }
.lab-r-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lab-r-input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 10px 13px; min-height: 46px; color: var(--text); font-size: 15.5px; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; }
.lab-r-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring-accent); outline: none; }
textarea.lab-r-input { resize: vertical; }
.lab-r-input-short { width: 76px; }
.lab-r-inline-field { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.lab-r-budgets { display: flex; gap: 12px; flex-wrap: wrap; }
.lab-r-form-big { padding: 22px 26px; gap: 16px; }
.lab-r-form-title { font-size: 16px; }

/* Alerts, notes, answers */
.lab-r-alert { color: var(--warn-text); font-size: 14px; }
.lab-r-alert-title { font-weight: 600; }
.lab-r-note { font-size: 13.5px; color: var(--text-soft); }
.lab-r-refusal { border: 1px solid var(--warn); background: var(--wash-warn); color: var(--text); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.lab-r-refusal .lab-r-alert-title { color: var(--warn-text); }
.lab-r-answer:empty { display: none; }
.lab-r-request { white-space: pre-wrap; font-family: var(--font-mono); font-size: 12.5px; background: var(--glass-row); border-radius: 10px; padding: 10px 12px; margin: 6px 0 0; max-height: 240px; overflow: auto; color: var(--text-soft); }
.lab-r-verdict { border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.lab-r-verdict-up { background: var(--wash-up); color: var(--up); }
.lab-r-verdict-warn { background: var(--wash-warn); color: var(--warn-text); }

/* Thesis */
.lab-r-statement { font-family: var(--font-read); font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -.3px; }
.lab-r-links { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.lab-r-causes { margin: 0; padding-left: 1.2rem; font-size: 14px; }
.lab-r-role { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-right: 8px; }
.lab-r-source { font-size: 13px; color: var(--accent-text); }
.lab-r-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.lab-r-table-wide { min-width: 560px; }
.lab-r-table th { padding: 6px 8px; font-weight: 600; color: var(--text-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.lab-r-table td { padding: 10px 8px; border-top: 1px solid var(--border); vertical-align: top; }
.lab-r-table td.lab-r-mono { white-space: nowrap; }
.lab-r-paper { background: var(--paper); color: var(--paper-ink); border-radius: var(--radius-panel); padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-read); }
.lab-r-paper .lab-r-paper-h2 { color: var(--paper-ink); font-family: var(--font-ui, inherit); }
.lab-r-paper-tags { font-size: 12.5px; font-family: var(--font-ui, inherit); }
.lab-r-paper-title { font-size: 18px; font-weight: 700; }
.lab-r-paper-text { font-size: 15px; line-height: 1.55; }
.lab-r-history { font-size: 13.5px; font-family: var(--font-mono); color: var(--text-soft); display: flex; flex-direction: column; gap: 5px; }
.lab-r-grid-row { display: flex; justify-content: space-between; gap: 8px; }
.lab-r-score { font-size: 18px; }
.lab-r-score-big { font-size: 20px; font-weight: 700; }
.lab-r-mentor-box:empty, .lab-r-change-box:empty { display: none; }

/* New thesis: stepper, blocks, the live grid */
.lab-r-stepper { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.lab-r-step { border: 1px solid var(--border-strong); color: var(--text-soft); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.lab-r-step-done { border-color: var(--up); color: var(--up); }
.lab-r-step-now { border-color: var(--accent); background: var(--wash-accent); color: var(--text); }
.lab-r-form { gap: 16px; }
.lab-r-block { gap: 12px; transition: border-color .2s ease; }
.lab-r-block-current { border: 2px solid var(--accent); }
.lab-r-block-badge { border: 1px solid var(--border-strong); color: var(--text-soft); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.lab-r-block-badge-done { border-color: transparent; background: var(--wash-up); color: var(--up); }
.lab-r-block-badge-warn { border-color: var(--warn-text); color: var(--warn-text); }
.lab-r-block-badge-now { border-color: var(--accent); color: var(--accent-text); }
.lab-r-bar-track { height: 6px; background: var(--glass-track); border-radius: 3px; margin-top: 7px; overflow: hidden; }
.lab-r-bar { height: 6px; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.lab-r-words p { font-size: 13.5px; color: var(--text-soft); }
.lab-r-words strong { color: var(--text); }
.lab-r-saved-at { min-height: 1em; }

/* Week: seven days that turn over */
.lab-r-days { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: 10px; perspective: 800px; }
.lab-r-day, .lab-r-view a.lab-r-day { display: block; background: var(--glass-row); border: 1px solid transparent; border-radius: 12px; padding: 12px; min-height: 124px; font-size: 13px; color: var(--text); transition: transform .2s ease, background .2s ease; animation: lab-r-flip-in .5s ease-out both; }
.lab-r-view a.lab-r-day:hover { transform: translateY(-2px); background: var(--glass-row-hover); }
.lab-r-day-today { border-color: var(--accent); }
.lab-r-day-note { margin-top: 8px; }
.lab-r-dots { margin-top: 8px; display: flex; gap: 5px; }
.lab-r-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border-strong); }
.lab-r-dot-done { background: var(--up); border-color: var(--up); }

/* Calendar rows */
.lab-r-row, .lab-r-view a.lab-r-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 10px; border-top: 1px solid var(--border); border-radius: 12px; color: var(--text); transition: background .18s ease, transform .18s ease; }
.lab-r-view a.lab-r-row:hover { background: var(--glass-row); transform: translateX(3px); }
.lab-r-row-selected { background: var(--wash-accent); border: 1px solid var(--accent); margin-top: 6px; }
.lab-r-row-body { min-width: 0; flex: 1 1 300px; }
.lab-r-row-title { font-size: 16px; }

/* Sensors */
.lab-r-placed { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 6px 18px; border-top: 1px solid var(--border); }
.lab-r-ping { position: relative; }
.lab-r-ping::after { content: ""; position: absolute; left: -14px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: lab-r-ping 2.4s ease-out infinite; }
.lab-r-tile { display: block; width: 100%; text-align: left; background: var(--glass-row); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--text); border: 1px solid transparent; cursor: pointer; min-height: 44px; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.lab-r-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--glass-row-hover); }
.lab-r-tile-on { border-color: var(--accent); }
.lab-r-tile-off { cursor: help; }
.lab-r-tile-dashed { border: 1px dashed var(--border-strong); }

/* Measures */
.lab-r-hero { flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: center; padding: 26px 28px; }
.lab-r-hero-text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lab-r-hero-value { font-size: 40px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; }
.lab-r-chart { flex: 0 0 auto; max-width: 100%; min-width: 0; overflow-x: auto; }
.lab-r-chart svg { max-width: 100%; height: auto; }
.lab-r-chart svg { max-width: 100%; height: auto; }
.lab-r-chart-axis { stroke: var(--border-strong); }
.lab-r-chart-diag { stroke: var(--text-muted); stroke-dasharray: 4 4; }
.lab-r-chart-text { fill: var(--text-faint); }
.lab-r-chart-empty { fill: var(--text-muted); }
.lab-r-chart-point { fill: var(--accent); }
.lab-r-stat { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.lab-r-stat-value { font-size: 30px; font-weight: 700; margin-top: 4px; letter-spacing: -.5px; }

/* Notebook */
.lab-r-ledger { font-size: 13.5px; min-width: 600px; }
.lab-r-ledger td { padding: 8px; }
.lab-r-ledger td:nth-child(2) { white-space: nowrap; }
.lab-r-line { transition: background .15s ease; }
.lab-r-line:hover { background: var(--glass-row); }
.lab-r-code { font-size: 22px; letter-spacing: .06em; }
.lab-r-preview { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.lab-r-preview[hidden] { display: none; }

/* Version 2 (unit Z3, wave 10): states, strategy sheets, measures cells, confluence */
.lab-r-cell { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px; }
/* a long label (a sheet's own name) takes its line and the value goes under it, never a squeezed column (unit Z4) */
.lab-r-cell-label { color: var(--text-soft); min-width: 0; flex: 1 1 8em; }
.lab-r-cell-value { white-space: nowrap; }
.lab-r-cell-off .lab-r-cell-label { color: var(--text-muted); }
.lab-r-share { display: flex; flex-direction: column; gap: 2px; }
/* After the fact (a layer after the close, a trial after the reading, a variant not ranked): pale, never hidden. */
.lab-r-pale, .lab-r-pale td, .lab-r-pale .lab-r-cell-label { color: var(--text-muted); }
.lab-r-pale .lab-r-bar { background: var(--border-strong); }
tr.lab-r-pale td:first-child { border-left: 2px dashed var(--border-strong); }
.lab-r-well.lab-r-pale { background: transparent; border: 1px dashed var(--border-strong); }
.lab-r-tier { display: flex; flex-direction: column; gap: 4px; }
.lab-r-state { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); }
.lab-r-state-name { font-family: var(--font-read); font-size: 18px; font-weight: 600; }
.lab-r-by-you { font-style: italic; }
.lab-r-qline { gap: 12px; }
.lab-r-qline-head { display: flex; align-items: flex-start; gap: 14px; }
.lab-r-qline-head > div { flex: 1; min-width: 0; }
.lab-r-qline-n { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-soft); }
.lab-r-qline-done { border-color: var(--border-strong); }
.lab-r-qline-done .lab-r-qline-n { border-color: var(--up); color: var(--up); animation: lab-r-check-pop .4s ease-out both; }
.lab-r-qline-info { background: var(--bg-raised); border-style: dashed; }
.lab-r-facts { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; color: var(--text-soft); }
.lab-r-errors { margin: 4px 0 0; padding-left: 1.1rem; font-size: 13px; }
.lab-r-weights { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lab-r-weights .lab-r-input { min-height: 44px; padding: 8px 10px; }

/* Version 3 (unit N3, wave 12): the method in time, the reviews written by the code.
   The two sides of a version share one style: nothing marks one as the better. */
.lab-r-frise { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 10px; border-left: 2px solid var(--border-strong); }
.lab-r-frise-item { position: relative; min-width: 0; }
.lab-r-frise-item::before { content: ""; position: absolute; left: -21px; top: 22px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg); }
.lab-r-version, .lab-r-view a.lab-r-version { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-row); color: var(--text); min-width: 0; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.lab-r-view a.lab-r-version:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--glass-row-hover); }
.lab-r-version-on, .lab-r-view a.lab-r-version-on { border: 2px solid var(--accent); background: var(--wash-accent); }
.lab-r-frise-item:has(.lab-r-version-on)::before { border-color: var(--accent); background: var(--accent); }
.lab-r-version-n { flex: none; min-width: 44px; text-align: center; border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 10px; font-size: 13px; color: var(--text-soft); }
.lab-r-version-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lab-r-block-line { display: block; }
.lab-r-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lab-r-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lab-r-side-figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lab-r-review-text { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-read); font-size: 16px; line-height: 1.6; color: var(--text); max-width: 760px; }

/* ----- Motion ----------------------------------------------------------- */
.lab-r-rise { animation: lab-r-view-in .5s ease-out both; }
.lab-r-d1 { animation-delay: .06s; } .lab-r-d2 { animation-delay: .12s; } .lab-r-d3 { animation-delay: .18s; }
.lab-r-d4 { animation-delay: .24s; } .lab-r-d5 { animation-delay: .3s; } .lab-r-d6 { animation-delay: .36s; }
.lab-r-d7 { animation-delay: .42s; } .lab-r-d8 { animation-delay: .48s; } .lab-r-d9 { animation-delay: .54s; }
.lab-r-d10 { animation-delay: .6s; } .lab-r-d11 { animation-delay: .66s; } .lab-r-d12 { animation-delay: .72s; }
.lab-r-d13 { animation-delay: .78s; } .lab-r-d14 { animation-delay: .84s; }
.lab-r-check { animation: lab-r-check-pop .4s ease-out both; }
.lab-r-row-in { animation: lab-r-row-in .45s ease-out both; }
.lab-r-met { display: inline-block; animation: lab-r-met-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.lab-r-saved { animation: lab-r-saved-blink .5s ease-out both; }
.lab-r-pulse { animation: lab-r-pulse .4s ease-out; }
.lab-r-breathe { animation: lab-r-breathe 3.2s ease-in-out infinite; }
.lab-r-chain { animation: lab-r-chain-glow 2.8s ease-in-out infinite; }
.lab-r-bar-fill { animation: lab-r-bar-fill 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .4s; }
.lab-r-diag { stroke-dasharray: 320; stroke-dashoffset: 320; animation: lab-r-trace 1.4s ease-out both; animation-delay: .4s; }

@keyframes lab-r-view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lab-r-check-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
@keyframes lab-r-row-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes lab-r-met-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lab-r-saved-blink { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
@keyframes lab-r-pulse { 0% { box-shadow: 0 0 0 0 var(--ring-accent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes lab-r-breathe { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 8px var(--wash-accent); } }
@keyframes lab-r-chain-glow { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 14px var(--ring-up); } }
@keyframes lab-r-ping { 0% { box-shadow: 0 0 0 0 var(--ring-up); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes lab-r-bar-fill { from { width: 0; } }
@keyframes lab-r-trace { to { stroke-dashoffset: 0; } }
@keyframes lab-r-flip-in { from { opacity: 0; transform: rotateX(-30deg) translateY(8px); } to { opacity: 1; transform: none; } }

/* ----- Version 4 (wave 14, unit Q1): links to a peer, precedents, the page of a peer -----
   A link and a case are quiet cards; the secret of a new link sits in the accent's
   frame, once. A case's outcome is a word, never a colour of gain or loss. On the page
   of a peer, the form asks one question per screen under 768 px. */
.lab-r-share, .lab-r-case { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass-row); }
.lab-r-objections { padding-top: 10px; border-top: 1px solid var(--border); }
.lab-r-objection { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lab-r-objection + .lab-r-objection { padding-top: 8px; border-top: 1px dashed var(--border); }
.lab-r-secret { padding: 14px 16px; border: 2px solid var(--accent); border-radius: 14px; background: var(--bg-raised); }
.lab-r-secret-value { color: var(--text); font-size: 15px; overflow-wrap: anywhere; user-select: all; }
.lab-r-precedent-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.lab-r-grow { flex: 1 1 220px; min-width: 0; }
.lab-r-cohort-case { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.lab-r-shared { max-width: 960px; margin: 0 auto; padding: 24px 16px 8px; }
.lab-r-shared-foot { max-width: 960px; margin: 0 auto; padding: 0 16px 32px; }
.lab-r-shared-held { padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; }
.lab-r-shared-form:not(.lab-r-shared-phone) .lab-r-shared-phone-only { display: none; }
.lab-r-shared-phone { overflow-x: clip; }
.lab-r-shared-phone .lab-r-shared-step:not(.lab-r-shared-current) { display: none; }
.lab-r-shared-phone .lab-r-shared-current { animation: lab-r-shared-in .28s ease-out; }
@keyframes lab-r-shared-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ----- Phone ------------------------------------------------------------ */
@media (max-width: 767px) {
  .lab-r-view, .lab-r-cols, .lab-r-head, .lab-r-head > div { min-width: 0; max-width: 100%; }
  .lab-r-view pre, .lab-r-view table { max-width: 100%; }
  .lab-r-mono, .lab-r-code, .lab-r-request { overflow-wrap: anywhere; }
  .lab-r-h1 { font-size: 26px; }
  .lab-r-statement { font-size: 22px; }
  .lab-r-panel { padding: 16px 16px; }
  .lab-r-panel-lg, .lab-r-hero, .lab-r-form-big { padding: 18px 16px; }
  .lab-r-aside { max-width: none; flex-basis: 100%; }
  .lab-r-span-2 { grid-column: auto; }
  .lab-r-min-200, .lab-r-min-240, .lab-r-min-260, .lab-r-min-280, .lab-r-min-300 { grid-template-columns: minmax(0, 1fr); }
  .lab-r-card, .lab-r-view a.lab-r-card { padding: 16px; }
  .lab-r-hero-value { font-size: 34px; }
  .lab-r-weights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-r-cell { flex-wrap: wrap; }
  .lab-r-cell-value { white-space: normal; }
  .lab-r-sides { grid-template-columns: minmax(0, 1fr); }
  .lab-r-version, .lab-r-view a.lab-r-version { flex-direction: column; gap: 8px; }
  .lab-r-review-text { font-size: 15px; }
}

/* ----- Reduced motion: everything stops, the final state shows at once --- */
@media (prefers-reduced-motion: reduce) {
  .lab-r-view *, .lab-r-view *::before, .lab-r-view *::after { animation: none !important; transition: none !important; }
  .lab-r-diag { stroke-dashoffset: 0; }
  .lab-r-card:hover, .lab-r-card-lift:hover, .lab-r-tile:hover, .lab-r-btn:hover, .lab-r-view a.lab-r-row:hover, .lab-r-view a.lab-r-day:hover { transform: none; }
  .lab-r-view a.lab-r-version:hover { transform: none; }
}

/* Unit G8 (Iris F3): the language menu of the peer's page is a target of 44 px. */
#lab-shared-lang { min-height: 44px; min-width: 44px; padding: 0 10px; }