/* Analysis → Harmony, after FaceIQ's harmony profile (layout, sizes and motion); colours follow the dashboard. */
.lab-head,.lab{--lab-ease:cubic-bezier(.16,1,.3,1);--lab-short:.2s;--lab-medium:.3s;--lab-radius:12px;--lab-card:var(--ui-surface);--lab-border:var(--ui-border);--lab-text:var(--ui-text);--lab-muted:var(--ui-muted);--lab-line:var(--ui-border);--lab-ideal:var(--ui-muted);--lab-hover:var(--ui-surface);--lab-photo:var(--ui-surface-raised);--lab-bad:239,68,68;--lab-medium-rgb:234,179,8;--lab-good:34,197,94}
.lab-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.lab-head h1{display:flex;align-items:baseline;gap:12px;margin:0;font-size:32px;font-weight:400;letter-spacing:-.03em;color:var(--lab-text)}
.lab-head h1 small{font-size:14px;letter-spacing:0;color:var(--lab-muted);font-variant-numeric:tabular-nums}
.lab-tools{display:flex;align-items:center;gap:10px}
.lab-action{height:34px;padding:0 14px;border:1px solid var(--lab-border);border-radius:10px;background:var(--lab-card);color:var(--lab-text);font:inherit;font-size:13px;cursor:pointer;transition:background-color var(--lab-short) var(--lab-ease)}
.lab-action:hover{background:var(--lab-hover)}
.lab-segment{display:flex;gap:2px;padding:3px;border:1px solid var(--lab-border);border-radius:10px;background:var(--ui-surface-subtle)}
.lab-segment button{height:28px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--lab-muted);font:inherit;font-size:13px;cursor:pointer;transition:background-color var(--lab-short) var(--lab-ease),color var(--lab-short) var(--lab-ease)}
.lab-segment button[aria-pressed="true"]{background:var(--lab-card);color:var(--lab-text);box-shadow:0 1px 2px #1d273314}

.lab{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media(min-width:1280px){.lab{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
@media(min-width:1280px) and (min-height:760px){
  .lab{height:calc(100dvh - var(--lab-top,230px) - 24px);min-height:480px;align-items:stretch}
  .lab>.lab-stage{min-height:0}
  .lab>.lab-sheet{--feather-top:0px;--feather-bottom:40px;min-height:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior-y:auto;
    mask-image:linear-gradient(to bottom,transparent 0,#000 var(--feather-top),#000 calc(100% - var(--feather-bottom)),transparent 100%)}
  .lab>.lab-sheet::-webkit-scrollbar{display:none}
  .lab>.lab-sheet[data-scrolled]{--feather-top:24px}
  .lab>.lab-sheet[data-end]{--feather-bottom:0px}
}

/* Stage: title, photos, score; a hovered ratio takes it over. */
.lab-stage{position:relative;display:flex;flex-direction:column;gap:24px;padding:24px;background:var(--lab-card);border:1px solid var(--lab-border);border-radius:var(--lab-radius);box-shadow:0 1px 3px #111b2b05;overflow:hidden}
@media(min-width:640px){.lab-stage{padding:32px}}
.lab-stage-title{margin:0;font-size:14px;color:var(--lab-text)}
.lab-stage-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;max-width:36rem}
.lab-stage-photos[data-count="1"]{grid-template-columns:minmax(0,1fr);max-width:50%}
.lab-stage-photo{position:relative;aspect-ratio:1/1;min-width:0;border-radius:var(--lab-radius);background:var(--lab-photo);overflow:hidden}
.lab-stage-photo::after{content:"";position:absolute;inset:0;border:1px solid #0000000d;border-radius:inherit;pointer-events:none}
.lab-stage-photo .dash-portrait{position:absolute;inset:0;min-height:0;border-radius:0}
.lab-stage-score{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:auto;padding-top:24px}
.lab-stage-score strong{font-size:72px;line-height:1;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.lab-verdict{margin-top:-6px;font-size:16px;color:var(--lab-muted)}
.lab-chip{padding:4px 10px;border-radius:6px;background:var(--ui-surface-subtle);font-size:12px;color:var(--ui-secondary)}
.lab-stage>*{transition:opacity var(--lab-short) var(--lab-ease)}
.lab-stage[data-takeover]>:not(.lab-takeover){opacity:0;pointer-events:none}
.lab-takeover{position:absolute;inset:0;border-radius:calc(var(--lab-radius) - 1px);background:#06090e;opacity:0;pointer-events:none;overflow:hidden;transition:opacity var(--lab-short) var(--lab-ease)}
.lab-stage[data-takeover]>.lab-takeover{opacity:1;transition-duration:var(--lab-medium)}
.lab-takeover-photo{position:absolute;inset:0;opacity:0;transition:opacity var(--lab-medium) var(--lab-ease)}
.lab-takeover-photo[data-shown]{opacity:1}
.lab-takeover-photo .dash-portrait{position:absolute;inset:0;min-height:0;border-radius:0;background:#06090e}
.lab-takeover-photo .dash-portrait-surface>img{filter:brightness(.62)}
.lab-stage[data-takeover] .lab-takeover-photo[data-shown] .dash-portrait-surface{animation:lab-drift 6s var(--lab-ease) both}
.lab-caption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:56px 24px 22px;background:linear-gradient(transparent,#03070de6);color:var(--ui-faint)}
.lab-caption span{font-size:18px;letter-spacing:-.01em;line-height:1.25}
.lab-caption strong{white-space:nowrap;font-weight:300}
.lab-caption b{font-size:34px;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lab-caption small{margin-left:4px;font-size:13px;color:var(--ui-faint)}
@keyframes lab-drift{from{transform:translateY(0)}to{transform:translateY(-1.1%)}}

/* Sheet: grouped, collapsible ratio cards. */
.lab-sheet{display:flex;flex-direction:column;gap:16px;min-width:0}
.lab-profile{margin:8px 0 -4px;font-size:14px;color:var(--lab-muted)}
.lab-profile:first-child{margin-top:0}
.lab-group{flex:0 0 auto;background:var(--lab-card);border:1px solid var(--lab-border);border-radius:var(--lab-radius);overflow:hidden}
.lab-group-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px 20px;border:0;background:transparent;color:var(--lab-text);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--lab-short) var(--lab-ease)}
.lab-group-head:hover{background:var(--lab-hover)}
.lab-group-head:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
.lab-group-title{min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-group-meta{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:44px;height:20px;margin-left:auto}
.lab-group-score{font-size:18px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:opacity .15s}
.lab-pills{position:absolute;right:0;display:flex;gap:3px;opacity:0;transition:opacity .15s}
.lab-pills i{width:5px;height:11px;border-radius:999px;border:1px solid rgba(var(--pill),.28);background:rgba(var(--pill),.14);transition:transform .15s}
.lab-pills i.is-active{border-color:rgba(var(--pill),.95);background:rgba(var(--pill),.85);transform:scaleY(1.2)}
.lab-group-head:hover .lab-group-score{opacity:0}.lab-group-head:hover .lab-pills{opacity:1}
.is-bad{--pill:var(--lab-bad)}.is-medium{--pill:var(--lab-medium-rgb)}.is-good{--pill:var(--lab-good)}
.lab-chevron{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--lab-muted);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg);transition:transform var(--lab-short) var(--lab-ease)}
.lab-group-head[aria-expanded="false"] .lab-chevron{transform:none}
.lab-group-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--lab-medium) var(--lab-ease)}
.lab-group-head[aria-expanded="false"]+.lab-group-body{grid-template-rows:0fr}
.lab-rows{min-height:0;overflow:hidden;padding:0 10px 10px;border-radius:8px;container-type:inline-size}
.lab-group-head[aria-expanded="false"]+.lab-group-body .lab-rows{padding-bottom:0}

.lab-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title metric" "chart chart";align-items:center;column-gap:8px;row-gap:4px;padding:8px 12px;border-radius:8px;color:inherit;text-decoration:none;transition:background-color var(--lab-short) var(--lab-ease)}
@media(min-width:400px){.lab-row{grid-template-columns:minmax(0,1fr) minmax(100px,300px) auto;grid-template-areas:"title chart metric";row-gap:0;padding:10px 16px}}
.lab-row:hover,.lab-row:focus-visible{background:var(--lab-hover)}
.lab-row:focus-visible{outline:1px solid var(--ui-border-strong);outline-offset:-1px}
.lab-row-title{grid-area:title;min-width:0}
.lab-row-name{font-size:14px;letter-spacing:.02em;color:var(--lab-text)}
.lab-row-value{margin-left:8px;font-size:13px;color:var(--lab-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lab-row-metric{grid-area:metric;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.lab-row-score{min-width:44px;font-size:18px;text-align:right;color:var(--lab-text);font-variant-numeric:tabular-nums}
.lab-row-chevron{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--lab-muted);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:opacity var(--lab-short) var(--lab-ease)}
.lab-row:hover .lab-row-chevron,.lab-row:focus-visible .lab-row-chevron{opacity:1}

/* Range track: thin line fading at both ends, the ideal segment with two ticks, a glowing pill at the value. */
.lab-track{grid-area:chart;position:relative;display:block;width:75%;height:10px;opacity:.6}
@media(min-width:400px){.lab-track{width:auto;opacity:1}}
.lab-track-line,.lab-track-ideal{position:absolute;top:50%;height:2px;transform:translateY(-50%)}
.lab-track-line{left:0;right:0;background:var(--lab-line);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%)}
.lab-track-ideal{background:var(--lab-ideal)}
.lab-tick{position:absolute;top:50%;width:1px;height:12px;background:var(--lab-ideal);transform:translateY(-50%)}
.lab-marker{position:absolute;top:50%;z-index:1;width:6px;height:13px;margin:-6.5px 0 0 -3px;border:1.5px solid rgb(var(--pill));border-radius:3px;background:rgba(var(--pill),.8);box-shadow:0 0 8px rgba(var(--pill),.6)}

/* Entrance: rows rise in sequence the first time a view is shown. */
.lab.is-intro .lab-rise{animation:lab-rise .6s var(--lab-ease) both;animation-delay:calc(.2s + var(--rise-index,0) * 80ms)}
@keyframes lab-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lab-stage>*,.lab-takeover,.lab-takeover-photo,.lab-group-body,.lab-chevron{transition:none}.lab.is-intro .lab-rise,.lab-stage[data-takeover] .lab-takeover-photo[data-shown] .dash-portrait-surface{animation:none}}