/* ==========================================================================
   SlickLab.Digital — demo studio (Laboratory page)
   A dark band under the audit: intro + test meter on the left, a paper card with hard shadow on the right.
   Uses the "Control Room" tokens and shared parts of site.css (.fld, .field, .pill, .btn, .fchip). Animate only transform + opacity.
   ========================================================================== */

/* the link to this section from the audit's left column */
.lab-jump{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--ink);background:var(--paper);font-size:12px;line-height:1.35;box-shadow:4px 4px 0 var(--teal);transition:transform .2s,box-shadow .2s}
.lab-jump:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--teal);color:var(--ink)}

.ds{background:var(--ink);color:var(--paper);border-top:2px solid var(--ink);scroll-margin-top:16px}
.ds-in{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;padding:var(--sec) var(--gut)}
.ds-intro{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,28px);min-width:0}
.ds-tag{align-self:flex-start;padding:6px 10px;background:var(--signal);color:var(--ink);font-size:12px}
.ds-h{font-size:clamp(40px,5.2vw,72px);overflow-wrap:anywhere}
.ds .hl{color:var(--ink)}
.ds .lede{color:var(--g1);max-width:560px}
.ds-how{display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5;color:var(--g1)}
.ds-how li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:baseline;padding-top:12px;border-top:1px solid var(--dk)}
.ds-how .mono{font-size:12px;color:var(--signal)}
.ds-meter{padding:20px;border:2px solid var(--paper);display:flex;flex-direction:column;gap:14px}
.ds-meter-h{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.ds-meter-h span:last-child{color:var(--signal)}
.ds-tests{display:flex;gap:10px;flex-wrap:wrap}
.ds-tests li{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--paper);font-family:var(--f-mono);font-size:14px;font-weight:600;transition:background .3s,color .3s}
.ds-tests li[data-used]{background:var(--signal);border-color:var(--signal);color:var(--ink);text-decoration:line-through;text-decoration-thickness:2px}
.ds-fine{font-size:13px;line-height:1.5;color:var(--g2)}
.ds-fine a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.ds-fine a:hover{color:var(--paper)}

.ds-card{background:var(--paper);color:var(--ink);border:2px solid var(--paper);box-shadow:10px 10px 0 var(--signal);min-width:0}
.ds-card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-bottom:2px solid var(--ink);background:var(--bone);font-size:12px}
.ds-card-h span:last-child{color:#08706b;font-weight:600}
.ds-card-b{padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:18px}
.ds-card .ds-fine{color:var(--t3)}
.ds-card .ds-fine a{color:var(--sig-deep)}
.ds-load{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.ds-lead{font-size:17px;line-height:1.5;color:var(--t2)}
.ds-form{display:flex;flex-direction:column;gap:18px;min-width:0}
.ds-form[hidden],[data-ds-view][hidden]{display:none}
.ds-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ds-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ds-form .btn,.ds-limit .btn{align-self:flex-start;min-width:260px;justify-content:space-between;min-height:58px}
.ds-code{font-family:var(--f-mono);font-size:28px;letter-spacing:.4em;text-align:center;max-width:280px}
.ds-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:14.5px;line-height:1.45;color:var(--t2);cursor:pointer}
.ds-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink)}
.ds-check a{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
.ds-alt{display:flex;flex-wrap:wrap;gap:8px 22px}
.ds-link{padding:6px 0;border:0;background:transparent;font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px;color:var(--ink);cursor:pointer}
.ds-link:hover{color:var(--sig-deep)}
.ds-link[disabled]{color:var(--t4);text-decoration-color:var(--g2);cursor:not-allowed}
.ds-danger{text-decoration-color:var(--sig-deep);color:var(--sig-deep)}
.ds-msg{min-height:1.4em;font-size:14.5px;line-height:1.45}
.ds-msg.ok{color:#08706b;font-weight:600}
.ds-msg.err{color:var(--sig-deep);font-weight:600}
.ds-err{min-height:0;font-size:13px;font-weight:600;color:var(--sig-deep)}
.ds-err:empty{display:none}
.fld[aria-invalid="true"]{border-color:var(--sig-deep);box-shadow:4px 4px 0 var(--sig-soft)}

.ds-acct{display:flex;flex-direction:column;gap:10px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.ds-who{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;font-size:15px}
.ds-who .mono{font-size:11px;color:var(--t3)}
.ds-more summary{cursor:pointer;font-size:11px;color:var(--t3);padding:4px 0;list-style:none}
.ds-more summary::-webkit-details-marker{display:none}
.ds-more summary::after{content:' +';color:var(--ink);font-weight:600}
.ds-more[open] summary::after{content:' –'}
.ds-more-b{display:flex;flex-direction:column;gap:14px;padding:12px 0 4px}
.ds-resume{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px;background:var(--teal-pale);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--teal)}
.ds-resume[hidden]{display:none}
.ds-resume > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds-resume .mono{font-size:11px;color:#08706b}
.ds-resume strong{font-family:var(--f-disp);font-size:22px;letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere}
.ds-resume small{font-size:13px;color:var(--t3)}

.ds-ex{display:flex;flex-direction:column;gap:10px}
.ds-ex > .mono{font-size:12px;color:var(--t3)}
.ds-ex-chips{display:flex;gap:10px;flex-wrap:wrap}
.ds-offers,.ds-tone{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.ds-offers legend,.ds-tone legend{padding:0;margin-bottom:6px;font-size:12px}
.ds-form .field label{font-size:12px}
.ds-opt{color:var(--t3);text-transform:none;letter-spacing:0;font-family:var(--f-body)}
.ds-row{display:flex;flex-direction:column;gap:8px;padding:12px;border:2px solid var(--ink);background:var(--bone)}
.ds-row-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:8px;align-items:stretch}
.ds-row .fld{min-height:48px;padding:10px 12px;font-size:15px}
.ds-x{width:44px;border:2px solid var(--ink);background:var(--paper);font-size:22px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.ds-x:hover{background:var(--ink);color:var(--paper)}
.ds-x[hidden]{display:none}
[data-ds-add]{align-self:flex-start}
[data-ds-add][hidden]{display:none}
.ds-limit{display:flex;flex-direction:column;gap:18px}
.ds-limit-h{font-size:clamp(32px,3.6vw,48px)}

@media (max-width:1080px){
  .ds-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ds-two{grid-template-columns:minmax(0,1fr)}
  .ds-row-top{grid-template-columns:minmax(0,1fr) auto}
  .ds-row-top [data-f="price"]{grid-column:1 / 2;grid-row:2}
  .ds-form .btn,.ds-limit .btn{width:100%;min-width:0}
  .ds-card{box-shadow:6px 6px 0 var(--signal)}
  .ds-code{max-width:none}
}