/* Workflow lab (lab.js). Uses the site tokens from :root; adds no tokens of its own. */
.lab-demo{margin-top:44px;background:var(--white);border-radius:4px}
.lab-demo :is(h3,h4,p,ul,ol){margin:0}
.lab-demo p{max-width:none}
.lab-demo svg{stroke:none}

/* Step indicator */
.lab-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#e3ebe1;border-radius:4px 4px 0 0}
.lab-steps li{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 16px;font-size:14px;font-weight:600;line-height:1.3;color:var(--muted);border-bottom:4px solid transparent;transition:color .25s,border-color .25s,background .25s}
.step-n{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid currentColor;border-radius:50%;font-size:13px;font-variant-numeric:tabular-nums;transition:background .25s,color .25s}
.lab-steps li.is-done{color:#2c634b}
.lab-steps li.is-done .step-n{background:#2c634b;border-color:#2c634b;color:var(--white)}
.lab-steps li[aria-current=step]{color:var(--ink);background:var(--white);border-bottom-color:var(--dark)}
.lab-steps li[aria-current=step] .step-n{background:var(--dark);border-color:var(--dark);color:var(--white)}
.lab-steps li.is-available:not([aria-current]){color:var(--ink)}
.lab-steps li.is-available:not([aria-current]) .step-n{border-style:dashed}

.lab-body{display:grid;grid-template-columns:32% 68%}

/* Controls */
.lab-controls{background:#dce8dc;padding:28px;border-radius:0 0 0 4px}
.lab-demo .lab-controls h3,.lab-demo .lab-top h3{font-family:var(--body);font-size:22px;letter-spacing:-.015em;font-weight:600}
.lab-field{margin-top:22px}
.lab-field label{display:flex;justify-content:space-between;gap:12px;font-size:16px;font-weight:600}
.lab-field output{font-variant-numeric:tabular-nums}
.lab-demo input[type=range]{display:block;width:100%;height:44px;margin:4px 0 0;accent-color:#2c634b;cursor:pointer}
.lab-scale{display:flex;justify-content:space-between;font-size:12px;color:#405546;font-variant-numeric:tabular-nums;margin-top:-4px}
.lab-check{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:14px;font-size:16px;cursor:pointer}
.lab-demo input[type=checkbox]{width:24px;height:24px;margin:0;flex:none;accent-color:#2c634b;cursor:pointer}
.lab-help{font-size:14px;line-height:1.6;color:#405546;margin-top:14px!important}
.lab-controls .button{width:100%;margin-top:22px}

/* Output */
.lab-output{padding:28px;min-width:0}
.lab-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lab-demo .state-label{font-size:13px}
.lab-note{font-size:13px;color:var(--muted);margin-top:10px!important}
.tile-groups{list-style:none;padding:0;display:grid;gap:18px;margin-top:18px!important}
.tile-group-name{font-size:13px!important;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#405546;padding-bottom:6px;margin-bottom:10px!important;border-bottom:1px solid #dae4d9}
.tiles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.tile{display:flex;gap:12px;min-width:0;padding:8px;background:var(--light);border:2px solid transparent;border-radius:4px;transition:border-color .25s,background .25s}
.tile-art{flex:none;align-self:flex-start;width:clamp(76px,34%,132px);aspect-ratio:4/3;border-radius:2px;overflow:hidden;background:#dae4d9;transition:opacity .3s,filter .3s}
.tile-art svg{display:block;width:100%;height:100%}
.tile-body{flex:1;min-width:0}
.tile-name{font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.tile-score{font-size:13px;color:#405546;margin-top:4px!important;font-variant-numeric:tabular-nums}
.tile-score b{font-size:15px;color:var(--ink)}
.tile-bar{display:block;height:6px;margin-top:5px;background:#dae4d9;border-radius:3px;overflow:hidden}
.tile-bar i{display:block;height:100%;background:#2c634b;border-radius:3px;transition:width .3s}
.tile-state{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:8px!important;font-size:12px;font-weight:600;line-height:1.3}
.tile-flag,.tile-diff{padding:2px 6px;border-radius:4px;background:#e3ebe1;color:var(--ink)}
.tile.is-kept{background:#d5e8d9;border-color:#2c634b}
.tile.is-kept .tile-flag{background:#2c634b;color:var(--white)}
.tile.diff-add{border:2px dashed #2c634b}
.tile.diff-add .tile-diff{background:#2c634b;color:var(--white)}
.tile.diff-remove{border:2px dotted var(--ink)}
.tile.diff-remove .tile-name{text-decoration:line-through;text-decoration-thickness:1px}
.tile.diff-remove .tile-diff{background:var(--dark);color:var(--white)}
.tile.diff-same .tile-art,.tile.diff-same .tile-bar{opacity:.4;filter:grayscale(1)}
.tile.diff-same .tile-diff{background:transparent;padding-left:0;font-weight:400;color:#405546}

/* Why not? */
.tile-why{margin-top:2px}
.tile-why summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:0;font-size:13px;font-weight:600;color:var(--focus);list-style:none}
.tile-why summary::-webkit-details-marker{display:none}
.tile-why summary::before{content:"+";display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;font-size:13px;line-height:1}
.tile-why[open] summary::before{content:"\2212"}
.tile-why p{font-size:13px;line-height:1.5;color:var(--ink);padding:8px 10px;margin:0 0 6px!important;background:#e3ebe1;border-left:3px solid var(--focus);animation:lab-rise .25s var(--ease)}

/* Undo, plan, message */
.lab-undo{margin-top:16px}
.lab-undo .button{min-height:44px}
.lab-plan{margin-top:20px;padding:20px;background:#e8eee5;border-left:4px solid var(--dark);border-radius:0 4px 4px 0}
.lab-plan.is-entering{animation:lab-rise .35s var(--ease)}
.lab-plan p,.lab-plan li{font-size:15px}
.lab-plan p{margin-top:8px!important}
.plan-diff{display:inline-block;padding:6px 10px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--white);border:1px solid #c6d6c5;border-radius:4px}
.lab-plan ul{padding-left:20px;margin:12px 0 16px!important}
.plan-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.lab-plan ul:empty{display:none}
.lab-message{font-size:14px;color:var(--muted);min-height:24px;margin-top:16px!important}
@keyframes lab-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Tablet and below */
@media(max-width:900px){
  .lab-body{grid-template-columns:1fr}
  .lab-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-radius:0}
  .lab-controls h3{grid-column:1/-1}
  .lab-field{margin-top:12px}
  .lab-check{margin-top:12px}
  .lab-help{grid-column:2;margin-top:0!important}
  .lab-controls .button{grid-column:1/-1;width:auto;justify-self:start}
}
@media(max-width:640px){
  .lab-controls{display:block;padding:18px 16px}
  .lab-controls .button{width:100%;margin-top:14px}
  .lab-field{margin-top:6px}
  .lab-help{margin-top:6px!important;font-size:13px}
  .lab-output{padding:20px 14px}
  .lab-steps li{flex-direction:column;justify-content:flex-start;text-align:center;gap:6px;padding:10px 4px;font-size:12px}
}
@media(max-width:520px){
  .lab-demo{margin-left:-12px;margin-right:-12px;margin-top:30px}
  .tile{flex-direction:column}
  .tile-art{width:100%;aspect-ratio:16/10;align-self:auto}
  .tiles{gap:8px}
  .tile-name{font-size:14px}
  .tile-group-name{margin-bottom:8px!important}
  .tile-groups{gap:14px}
  .lab-plan{padding:16px 14px}
  .plan-actions{position:sticky;bottom:0;margin:12px -14px -16px;padding:10px 14px;background:#e8eee5;z-index:1}
  .plan-actions .button{flex:1 1 140px;font-size:14px;padding:12px 14px}
}
@media(prefers-reduced-motion:reduce){
  .lab-demo *,.lab-demo *::before,.lab-demo *::after{animation:none!important;transition:none!important}
}