/* The Lab's helper inside Product ("Help with this view", "Try one change"), in the Lab's look. lab-assist.mjs and
   lab-experiment.mjs put .lab-skin and the Lab's light or dark choice on the dialog, the experiment and the Actions
   group; lab-skin.css gives .lab-skin the Lab's palette and roles, so Product keeps its own look everywhere else.
   The shared helper's own sheets (/lab-assist/client.css, /lab-workspace/workspace.css) stay as they are: the rules
   below give their parts the Lab's roles inside .lab-skin only, as the Lab's planner, Desk and Crowd Reactions do.
   Role tokens only: no colour is named here. */
@import url("lab-skin.css");

/* The two helpers in Actions: one small Lab card at the top of the menu, under the Lab's name. */
.product-lab-menu.lab-skin { margin: 6px; padding: 4px 0 2px; border: var(--ol-thin) solid var(--edge); border-radius: var(--r); color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); }
.product-lab-menu .product-lab-menu-name { margin: 4px 12px 2px; color: var(--text-dim); font: 700 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.product-lab-menu.lab-skin .product-lab-menu-item { min-height: 44px; padding: 6px 12px; border: 0; border-radius: 0; color: var(--text); background: transparent; font: 700 13px/1.3 var(--display); letter-spacing: -0.01em; white-space: normal; text-align: left; }
.product-lab-menu.lab-skin .product-lab-menu-item + .product-lab-menu-item { border-top: var(--ol-thin) solid var(--divider); }
.product-lab-menu.lab-skin .product-lab-menu-item:hover { color: var(--text); background: var(--bg); text-decoration: underline 2px var(--link-line); text-underline-offset: 0.3em; }
.product-lab-menu.lab-skin .product-lab-menu-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; background: var(--bg); }
.product-lab-menu.lab-skin .product-lab-menu-item:last-child { border-radius: 0 0 calc(var(--r) - 3px) calc(var(--r) - 3px); }

/* The helper's sheet: the Lab's dialog, a sticker on the scrim. */
.product-lab-assist-dialog.lab-skin {
  /* centred like the Lab's sheets (Product's own reset sets every margin to 0) */
  box-sizing: border-box; width: min(46rem, calc(100vw - 2rem)); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 2rem); margin: auto; overflow: auto;
  padding: 18px 20px 20px; border: var(--ol) solid var(--edge); border-radius: var(--r-lg);
  color: var(--text); background: var(--surface); box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge);
  font: 500 1rem/1.5 var(--display); overflow-wrap: anywhere;
}
.product-lab-assist-dialog::backdrop { background: var(--scrim, rgb(7 3 15 / 72%)); }
.product-lab-assist-dialog.lab-skin > button {
  float: right; display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 8px 12px; padding: 6px 16px;
  border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font: 800 0.95rem/1.2 var(--display); cursor: pointer;
}
.product-lab-assist-dialog .product-lab-assist-kicker { margin: 10px 0 2px; color: var(--text-dim); font: 700 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.product-lab-assist-dialog .product-lab-assist-note { margin: 0 0 14px; color: var(--text-dim); font-size: 0.95rem; }
.product-lab-assist-dialog .product-lab-assist-comparison {
  margin: 14px 0 0; padding: 12px 14px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r);
  color: var(--text); background: var(--bg); font: 600 0.9rem/1.5 var(--display); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Try one change: a card in the sheet (or on its own). Before and after are told apart by line shape. */
.product-lab-experiment.lab-skin {
  box-sizing: border-box; margin: 0 0 18px; padding: 16px 18px 18px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r);
  color: var(--text); background: var(--surface); font: 500 1rem/1.5 var(--display); overflow-wrap: anywhere;
}
.product-lab-experiment .ple-kicker { margin: 0; color: var(--text-dim); font: 700 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.product-lab-experiment h3 { margin: 6px 0 8px; font: 800 1.4rem/1.15 var(--display); letter-spacing: -0.03em; }
.product-lab-experiment h4 { margin: 4px 0 8px; font: 800 1.1rem/1.25 var(--display); letter-spacing: -0.02em; }
.product-lab-experiment p { margin: 6px 0; }
.product-lab-experiment label { display: block; margin: 14px 0; font-weight: 800; }
.product-lab-experiment select {
  display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 6px; padding: 8px 44px 8px 12px; appearance: none;
  border: var(--ol) solid var(--control-edge); border-radius: var(--r); color: var(--text); font: 600 1rem/1.3 var(--display);
  background: linear-gradient(45deg, transparent 50%, var(--text) 50%) right 22px center / 7px 7px no-repeat,
    linear-gradient(135deg, var(--text) 50%, transparent 50%) right 15px center / 7px 7px no-repeat, var(--surface);
}
/* The slider: a rounded track and a picked round thumb (Product's own slider rule is for its small header sliders). */
.product-lab-experiment input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.product-lab-experiment input[type=range]::-webkit-slider-runnable-track { box-sizing: border-box; height: 10px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill); background: var(--bg); }
.product-lab-experiment input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: -10px; border: var(--ol-thin) solid var(--edge); border-radius: 50%; background: var(--picked); box-shadow: 2px 2px 0 var(--edge); }
.product-lab-experiment input[type=range]::-moz-range-track { box-sizing: border-box; height: 10px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill); background: var(--bg); }
.product-lab-experiment input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; border: var(--ol-thin) solid var(--edge); border-radius: 50%; background: var(--picked); box-shadow: 2px 2px 0 var(--edge); }
.product-lab-experiment output { float: right; font: 700 0.95rem/1.4 var(--mono); }
.product-lab-experiment [data-ple-note], .product-lab-experiment small { color: var(--text-dim); }
.product-lab-experiment small { display: block; margin-top: 12px; font-size: 0.85rem; }
.product-lab-experiment [data-ple-status]:not(:empty) { font-weight: 800; }
.product-lab-experiment button {
  display: inline-flex; align-items: center; min-height: 44px; margin: 6px 10px 6px 0; padding: 6px 16px;
  border: var(--ol) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font: 800 0.95rem/1.2 var(--display); letter-spacing: -0.01em; cursor: pointer;
}
.product-lab-experiment button:disabled { border-style: dashed; color: var(--text-dim); box-shadow: none; cursor: not-allowed; }
.product-lab-experiment [data-ple-confirm] { margin: 10px 0; padding: 12px 14px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); background: var(--bg); }
.product-lab-experiment [data-ple-results] { margin-top: 14px; padding-top: 12px; border-top: var(--ol-thin) solid var(--divider); }
.product-lab-experiment [data-ple-results] > select { margin: 8px 0 4px; }
.product-lab-experiment figure { color: var(--text); }
.product-lab-experiment figcaption { color: var(--text-dim); }
.product-lab-experiment svg { display: block; width: 100%; height: auto; margin-top: 8px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); background: var(--bg); }
.product-lab-experiment polyline[data-series="before"] { stroke: var(--text-dim); stroke-dasharray: 9 7; }
.product-lab-experiment polyline[data-series="after"] { stroke: var(--text); }
.product-lab-experiment [hidden] { display: none !important; }

/* Lift on hover, press onto the shadow, never moving with reduced motion. */
@media (hover: hover) {
  .product-lab-assist-dialog.lab-skin > button:hover, .product-lab-experiment button:not(:disabled):hover {
    transform: translate(-1px, -1px); box-shadow: calc(var(--pop-sm) + 1px) calc(var(--pop-sm) + 1px) 0 var(--edge);
  }
}
.product-lab-assist-dialog.lab-skin > button:active, .product-lab-experiment button:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--edge); }
:is(.product-lab-assist-dialog.lab-skin, .product-lab-experiment.lab-skin) :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The shared helper (client.css) and its saved work (workspace.css), given the Lab's roles. Its Ask stays a quiet
   sticker: these parts sit inside an app, which keeps its own one main action. */
/* Product's own page header rule (a 48px flex bar, a grid on smaller screens) would otherwise lay out the helper's
   headings as one row. */
.lab-skin :is(.lab-assist, .lab-workspace) header { display: block; height: auto; min-height: 0; padding: 0; gap: 0; border: 0; background: transparent; overflow: visible; z-index: auto; }
.lab-skin .lab-assist { margin-top: 4px; color: var(--text); background: var(--surface); border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); font: 500 1rem/1.5 var(--display); }
.lab-skin .lab-assist .la-eyebrow { color: var(--text-dim); font: 700 max(12px, 0.76rem)/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.lab-skin .lab-assist h3 { font: 800 1.25rem/1.2 var(--display); letter-spacing: -0.02em; }
.lab-skin .lab-assist :is(h4, h5) { font-family: var(--display); font-weight: 800; }
.lab-skin .lab-assist :is(input:not([type=checkbox]), textarea, select) { border: var(--ol) solid var(--control-edge); border-radius: var(--r); color: var(--text); background: var(--surface); box-shadow: none; font-weight: 600; }
.lab-skin .lab-assist input[type=checkbox] { accent-color: var(--text); }
.lab-skin .lab-assist :is(input, textarea)::placeholder { color: var(--text-dim); opacity: 1; }
.lab-skin .lab-assist button { border: var(--ol) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font-weight: 800; }
.lab-skin .lab-assist button:hover:not(:disabled) { border-color: var(--control-edge); }
.lab-skin .lab-assist [type=submit], .lab-skin .lab-assist button[type=submit]:is(:hover, :focus-visible):not(:disabled) { border-color: var(--edge); color: var(--text); background: var(--surface); }
.lab-skin .lab-assist button:disabled { border-style: dashed; color: var(--text-dim); box-shadow: none; opacity: 1; }
.lab-skin .lab-assist :is(details, article) { border-color: var(--divider); }
.lab-skin .lab-assist :is(.la-status, .la-confirm) { border-color: var(--control-edge); }
.lab-skin :is(.lab-assist, .lab-workspace) :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lab-skin .lab-workspace { --lw-blue: var(--text-dim); --lw-ink: var(--text); --lw-bg: var(--surface); border-color: var(--control-edge); border-top-color: var(--control-edge); border-radius: var(--r-lg); font-family: var(--display); }
.lab-skin .lab-workspace :is(input, textarea, select) { border: var(--ol) solid var(--control-edge); border-radius: var(--r); color: var(--text); background: var(--surface); box-shadow: none; }
.lab-skin .lab-workspace :is(button, .lw-link) { border: var(--ol) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font-family: var(--display); font-weight: 800; }
.lab-skin .lab-workspace :is([data-lw-review], [data-lw-active]) { border-left-color: var(--picked); background: var(--bg); }
.lab-skin .lab-workspace [data-lw-status] { color: var(--text-dim); }
.lab-skin .lab-workspace .lw-kicker { color: var(--text-dim); font: 700 max(12px, 0.76rem)/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.lab-skin .lab-workspace h3 { font: 800 1.25rem/1.2 var(--display); letter-spacing: -0.02em; }
.lab-skin .lab-workspace :is(details, article, .lw-result-grid article, [data-lw-note-options] label) { border-color: var(--divider); background: transparent; }
.lab-skin .lab-workspace :is(small, .lw-result-grid dt) { color: var(--text-dim); }
.lab-skin .lab-workspace .lw-result-grid h5 { font-family: var(--display); }

@media (prefers-reduced-motion: reduce) {
  .product-lab-assist-dialog.lab-skin > button, .product-lab-experiment button { transition: none; transform: none !important; }
}
@media (max-width: 480px) {
  .product-lab-assist-dialog.lab-skin { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); padding: 12px 12px 16px; }
  .product-lab-experiment.lab-skin { padding: 14px 12px; }
}