/* Labs (iPad-interaction sandbox) styles.
*
* Propshaft does NOT bundle: `stylesheet_link_tag :app` emits one per
* file in app/assets/stylesheets/, so this file ships on EVERY page. Every
* selector below MUST either be a descendant of `body.labs` or be prefixed
* `.labs-` — no bare element or generic class selectors.
*
* Labs has no skin class on , so we rely on :root tokens (which match
* the "stage" defaults). */
body.labs {
background: var(--cream);
color: var(--ink);
font-family: var(--font-body);
}
.labs-shell {
max-width: 720px;
margin: 0 auto;
padding: 16px;
}
.labs-chrome {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
margin-bottom: 12px;
background: var(--cream);
border-bottom: 2px solid var(--line);
}
.labs-chrome-back {
font-family: var(--font-display);
font-weight: 700;
color: var(--ink);
text-decoration: none;
}
.labs-chrome-back:hover {
color: var(--hot);
}
.labs-chrome-title {
flex: 1;
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
}
.labs-intro {
margin: 24px 0;
}
.labs-intro h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: 32px;
margin: 0 0 8px;
}
.labs-intro p {
color: var(--ink-soft);
margin: 0;
}
.labs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.labs-card {
display: block;
padding: 16px;
background: var(--paper);
border: 2px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-card-soft);
color: var(--ink);
text-decoration: none;
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.labs-card:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 0 var(--line);
}
.labs-card:active {
transform: translate(0, 0);
box-shadow: var(--shadow-press);
}
.labs-card-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
margin: 0 0 6px;
}
.labs-card-desc {
color: var(--ink-soft);
margin: 0 0 12px;
font-size: 14px;
}
.labs-card-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.labs-badge {
display: inline-block;
padding: 3px 9px;
border: 1.5px solid var(--line);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: var(--paper);
color: var(--ink);
}
.labs-badge-hardware {
background: var(--cream);
}
.labs-badge-status-spike {
background: var(--sun-soft);
}
.labs-experiment {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.labs-canvas {
width: 100%;
height: 420px;
display: block;
background: #ffffff;
border: 2px solid var(--line);
border-radius: var(--radius-sm);
touch-action: none;
}
.labs-actions {
display: flex;
gap: 8px;
}
.labs-actions button {
padding: 8px 16px;
font-family: var(--font-display);
font-weight: 700;
background: var(--paper);
color: var(--ink);
border: 2px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-press);
cursor: pointer;
}
.labs-actions button:active {
transform: translate(1px, 1px);
box-shadow: none;
}
.labs-meta {
font-family: var(--font-mono-display);
font-size: 13px;
background: var(--paper);
border: 2px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px;
margin: 0;
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px 12px;
}
.labs-meta dt {
color: var(--ink-soft);
font-weight: 700;
}
.labs-meta dd {
margin: 0;
color: var(--ink);
word-break: break-all;
}
.labs-scribble-input {
width: 100%;
padding: 14px 16px;
font-family: var(--font-display);
font-size: 24px;
background: var(--paper);
border: 2px solid var(--line);
border-radius: var(--radius-sm);
color: var(--ink);
}
.labs-scribble-input:focus {
outline: none;
box-shadow: var(--shadow-press);
}
.labs-figure-surface {
display: flex;
align-items: center;
justify-content: center;
background: var(--paper);
border: 2px solid var(--line);
border-radius: var(--radius-sm);
padding: 16px;
overflow: hidden;
transform-origin: center;
touch-action: none;
}
.labs-figure-surface svg {
max-width: 100%;
height: auto;
}
/* Segmented toggle (freeform vs snapped). */
.labs-toggle {
display: inline-flex;
border: 2px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--paper);
}
.labs-toggle-btn {
padding: 8px 16px;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
background: var(--paper);
color: var(--ink);
border: 0;
border-right: 2px solid var(--line);
cursor: pointer;
}
.labs-toggle-btn:last-child {
border-right: 0;
}
.labs-toggle-btn.is-active {
background: var(--ink);
color: var(--paper);
}
/* Drag surface — same chrome as figure-surface but no clipping (pieces can
travel a little outside the inner box during drag without disappearing). */
.labs-drag-surface {
overflow: visible;
touch-action: none;
padding: 8px;
}
.labs-drag-svg {
width: 100%;
height: auto;
display: block;
/* Prevent iOS Safari from selecting the SVG text on long-press during drag. */
-webkit-user-select: none;
user-select: none;
}
/* Pizza-specific cap: a portrait iPad viewport would otherwise scale the
480×460 viewBox to full width and the pizza dominates the page. Cap the
visible width so the whole experiment (toggle + surface + meta) fits in
one screen on an iPad-mini portrait. */
.labs-pizza-surface {
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
/* Bar-divide keeps its viewBox cap for iPad portrait. */
.labs-bar-surface {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
Fraction comparison — "The Showdown"
------------------------------------------------------------
A unified comparison stage holds both bars (single SVG, the
controller geometry is unchanged). The comparator glyph is
an HTML overlay positioned absolutely over the stage centre,
sized like a hero so it visually dominates. Each fraction's
controls live in their own colour-coded card below the stage
so the binding "this stepper drives that bar" is unambiguous.
The meta panel is tucked into a collapsed block.
============================================================ */
.labs-compare-shell {
display: flex;
flex-direction: column;
gap: 16px;
}
/* The stage panel — chunky bordered frame, holds the bars SVG
with the comparator glyph overlaid dead-centre. position:
relative anchors the absolutely positioned glyph. */
.labs-compare-stage {
position: relative;
background: var(--paper);
border: 3px solid var(--line);
border-radius: var(--radius);
padding: 22px 24px;
box-shadow: var(--shadow-card);
overflow: visible;
}
/* Decorative "vs" rail running through the centre of the stage,
behind the bars and the comparator. Gives the central glyph
a structural axis to sit on, not just floating in space. */
.labs-compare-stage::before {
content: "";
position: absolute;
left: 16px;
right: 16px;
top: 50%;
height: 2px;
background: repeating-linear-gradient(
to right,
var(--ink-soft) 0 6px,
transparent 6px 12px
);
opacity: 0.35;
z-index: 0;
}
.labs-compare-stage-svg {
position: relative;
z-index: 1;
width: 100%;
height: auto;
display: block;
-webkit-user-select: none;
user-select: none;
}
/* Inline fraction tags inside the SVG already render via the
existing controller targets (labelA / labelB). We re-style the
labels in the SVG by setting class via attribute? We can't —
SVG needs its own attrs. Style happens in markup. */
/* ---------- Comparator — the visual hero ---------- */
.labs-compare-verdict {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.labs-compare-verdict-glyph {
width: 104px;
height: 104px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--line);
border-radius: 50%;
background: var(--sun);
box-shadow: var(--shadow-card);
font-family: var(--font-mono-display);
font-weight: 900;
font-size: 68px;
line-height: 1;
color: var(--ink);
transform: rotate(-4deg);
}
.labs-compare-verdict-glyph[data-cmp="eq"] {
background: var(--mint);
}
.labs-compare-verdict-glyph[data-cmp="lt"] {
background: var(--ultra-soft);
}
.labs-compare-verdict-glyph[data-cmp="gt"] {
background: var(--hot-soft);
}
/* Pop animation re-runs every time the data-cmp attribute
changes (the controller swaps the text content; we toggle
the attribute in the controller-free way by listening for
text changes via a one-line MutationObserver in the view). */
.labs-compare-verdict-glyph.is-changing {
animation: labs-compare-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes labs-compare-pop {
0% { transform: rotate(-4deg) scale(0.72); }
60% { transform: rotate(-4deg) scale(1.14); }
100% { transform: rotate(-4deg) scale(1); }
}
/* ---------- Per-fraction control card ---------- */
.labs-compare-controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.labs-compare-card {
border: 2px solid var(--line);
border-left-width: 8px;
border-radius: var(--radius-sm);
background: var(--paper);
padding: 14px 14px 16px;
box-shadow: var(--shadow-card-soft);
display: flex;
flex-direction: column;
gap: 12px;
}
.labs-compare-card-a {
border-left-color: #ff2d87;
}
.labs-compare-card-b {
border-left-color: #6a3df5;
}
.labs-compare-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.labs-compare-card-name {
font-family: var(--font-display);
font-weight: 900;
font-size: 24px;
line-height: 1;
color: var(--ink);
}
.labs-compare-card-a .labs-compare-card-name {
color: #ff2d87;
}
.labs-compare-card-b .labs-compare-card-name {
color: #6a3df5;
}
.labs-compare-card-readout {
font-family: var(--font-mono-display);
font-weight: 800;
font-size: 18px;
color: var(--ink-soft);
}
.labs-compare-card-controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Each control is a vertical mini-card: name tag on top, then a row
with [-] [BIG value] [+]. The name has the whole width so it never
truncates; the value gets centre stage between the buttons. */
.labs-compare-control {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.labs-compare-control-label-name {
font-family: var(--font-mono-display);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--ink-soft);
text-transform: uppercase;
text-align: center;
line-height: 1;
}
.labs-compare-control-row {
display: grid;
grid-template-columns: 44px 1fr 44px;
align-items: stretch;
border: 2px solid var(--line);
border-radius: var(--radius-sm);
background: var(--paper);
overflow: hidden;
min-height: 52px;
}
.labs-compare-control-value {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 900;
font-size: 26px;
color: var(--ink);
background: var(--cream);
border-left: 2px solid var(--line);
border-right: 2px solid var(--line);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.labs-compare-control-btn {
font-family: var(--font-display);
font-weight: 900;
font-size: 22px;
background: var(--paper);
color: var(--ink);
border: 0;
cursor: pointer;
transition: background 0.06s ease;
padding: 0;
}
.labs-compare-control-btn:hover {
background: var(--sun-soft);
}
.labs-compare-control-btn:active {
background: var(--sun);
}
/* ---------- Footer: reset + collapsed meta ---------- */
.labs-compare-footer {
display: flex;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
}
.labs-compare-details {
flex: 1;
min-width: 220px;
}
.labs-compare-details summary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-family: var(--font-mono-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--ink-soft);
text-transform: uppercase;
cursor: pointer;
list-style: none;
border: 2px dashed var(--ink-soft);
border-radius: var(--radius-sm);
background: transparent;
}
.labs-compare-details summary::-webkit-details-marker {
display: none;
}
.labs-compare-details summary::before {
content: "▸";
display: inline-block;
font-size: 14px;
transition: transform 0.12s ease;
}
.labs-compare-details[open] summary::before {
transform: rotate(90deg);
}
.labs-compare-details[open] summary {
border-style: solid;
color: var(--ink);
margin-bottom: 8px;
}
.labs-compare-details .labs-meta {
margin: 0;
}
/* Narrow screens (iPad mini portrait splits closer to ~440px,
but allow card stack a bit later for breathing room). */
@media (max-width: 520px) {
.labs-compare-controls {
grid-template-columns: 1fr;
}
.labs-compare-stage {
padding: 16px 14px;
}
.labs-compare-verdict-glyph {
width: 82px;
height: 82px;
font-size: 54px;
}
}
@media (max-width: 360px) {
.labs-compare-card-controls {
grid-template-columns: 1fr;
}
}