/* Screens — spec 05 §6. Mobile first; tablet 640+, desktop 1024+. */

.screen { min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-top: max(var(--sp-3), env(safe-area-inset-top)); padding-bottom: var(--sp-3);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-l); letter-spacing: -0.02em; }
.brand .icon { color: var(--holo-1); }
[data-theme="dark"] .brand .icon { color: #A78BFA; }
.topbar__end { display: flex; align-items: center; gap: var(--sp-2); }
.topbar__theme button { padding: 0; }

/* ---------- home ---------- */
.home__grid { display: grid; gap: var(--sp-8); padding-top: var(--sp-6); }
.home__copy { display: grid; gap: var(--sp-5); align-content: start; }
.home__copy .lede { margin-bottom: var(--sp-2); }
.home__modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.home__art { order: -1; color: var(--ink); }
.hero-art { width: 100%; max-width: 520px; margin-inline: auto; height: auto; overflow: visible; }
.hero-views { opacity: .9; }
.hero-glow { fill: var(--holo-1); opacity: .22; filter: blur(14px); }
.hero-part { animation: hero-float 7s var(--ease) infinite alternate; transform-origin: center; }
@keyframes hero-float { to { transform: translateY(-6px); } }
[data-theme="light"] .hero-part { color: #111; }
[data-theme="dark"] .hero-part { color: rgb(255 255 255 / .55); }

.home__samples { display: grid; gap: var(--sp-4); padding-top: var(--sp-14); }
.home__samples-head { display: grid; gap: var(--sp-1); }
.samples {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(68vw, 240px); gap: var(--sp-3);
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--sp-2);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.samples::-webkit-scrollbar { display: none; }
.samples li { scroll-snap-align: start; }
.sample {
  width: 100%; display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-3);
  border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface-glass); color: var(--ink); text-align: left;
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  transition: transform var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.sample:hover { border-color: var(--line-strong); }
.sample:active { transform: scale(.98); }
.sample img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: top left; border-radius: var(--radius-s); background: #FAFAF7; }
.sample__title { font-weight: 500; font-size: var(--fs-s); padding-inline: var(--sp-1); }

.home__foot { display: flex; gap: var(--sp-2); align-items: center; padding-block: var(--sp-14) max(var(--sp-8), env(safe-area-inset-bottom)); color: var(--ink-2); margin-top: auto; }
.home__foot .icon { width: 18px; height: 18px; }

@media (min-width: 640px) {
  .home__grid { padding-top: var(--sp-10); }
  .samples { grid-auto-columns: 220px; }
}
@media (min-width: 1024px) {
  .home__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--sp-14); padding-top: var(--sp-14); }
  .home__art { order: 0; }
  .home__copy { max-width: 520px; }
  .home__copy .btn--primary { width: auto; justify-self: start; min-width: 280px; }
  .samples { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; overflow: visible; }
}

/* ---------- upload ---------- */
.upload__body { display: grid; gap: var(--sp-6); padding-block: var(--sp-4) var(--sp-14); max-width: 720px; }
.upload__picks { display: grid; gap: var(--sp-3); }
.pick {
  display: flex; align-items: center; gap: var(--sp-4); min-height: 88px; padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface-glass); color: var(--ink); text-align: left;
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  transition: transform var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.pick:active { transform: scale(.98); }
.pick:hover { border-color: var(--line-strong); }
.pick__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); flex: none; }
.pick__text { display: grid; gap: 2px; }
.pick__label { font-weight: 600; font-size: var(--fs-l); }
.drop { display: none; }
.guide { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--radius-l); background: var(--bg-elev); border: 1px solid var(--line); }
.guide__list { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.guide__item { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--ink-2); }
.guide__item[data-kind="good"] .icon { color: var(--ok); }
.guide__item[data-kind="warn"] .icon { color: var(--warn); }
@media (min-width: 1024px) {
  .upload__picks { grid-template-columns: 1fr 1fr; }
  .drop {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
    min-height: 160px; border-radius: var(--radius-l); color: var(--ink-2); cursor: pointer;
    border: 2px dashed var(--line-strong); opacity: .8; /* drafting-style dashed frame */
    transition: background-color var(--t-micro) var(--ease);
  }
  .drop.is-over { background: var(--surface-glass); opacity: 1; }
}

/* ---------- scan ---------- */
.scan__body, .views__body { display: grid; gap: var(--sp-5); padding-block: var(--sp-4) calc(var(--sp-20) + env(safe-area-inset-bottom)); }
.scan__head { display: grid; gap: var(--sp-2); max-width: 60ch; }
.scan__stage { position: relative; display: grid; place-items: center; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-elev); border: 1px solid var(--line); padding: var(--sp-3); }
.scan__notes { display: grid; gap: var(--sp-3); }
.scan__actions {
  position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  margin-inline: calc(var(--gutter) * -1); padding: var(--sp-6) var(--gutter) max(var(--sp-3), env(safe-area-inset-bottom));
  background: linear-gradient(rgb(0 0 0 / 0), var(--bg) 45%);
}
@media (min-width: 640px) { .scan__actions { position: static; margin-inline: 0; padding: var(--sp-2) 0 0; background: none; } }
@media (min-width: 1024px) { .scan__actions { grid-template-columns: auto auto; justify-content: end; } }

.corner-editor { position: relative; width: fit-content; max-width: 100%; touch-action: none; }
.corner-editor__img { display: block; max-width: 100%; max-height: 62dvh; width: auto; height: auto; border-radius: var(--radius-s); }
.corner-editor__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.corner-editor__shade { fill: rgb(7 7 12 / .45); }
.corner-editor__outline { fill: none; stroke: #A78BFA; stroke-width: 3; vector-effect: non-scaling-stroke; }
.corner-handle {
  position: absolute; width: var(--tap); height: var(--tap); margin: calc(var(--tap) / -2) 0 0 calc(var(--tap) / -2);
  border: 0; border-radius: 50%; background: transparent; touch-action: none;
}
.corner-handle::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: rgb(255 255 255 / .9); border: 3px solid #7C3AED; box-shadow: 0 2px 10px rgb(0 0 0 / .35);
}
.corner-handle[data-drag]::after { transform: scale(1.15); }
.loupe { position: absolute; width: 96px; height: 96px; margin: -130px 0 0 -48px; border-radius: 50%; border: 2px solid #A78BFA; box-shadow: 0 8px 24px rgb(0 0 0 / .4); pointer-events: none; opacity: 0; transition: opacity var(--t-micro); background: #fff; }
.loupe.is-on { opacity: 1; }

.scan-progress { position: absolute; inset: 0; pointer-events: none; transition: opacity var(--t-scene) var(--ease); }
.scan-progress.is-done { opacity: 0; }
.scan-progress__beam {
  position: absolute; left: 0; right: 0; height: 28%; top: -28%;
  background: linear-gradient(180deg, transparent, rgb(167 139 250 / .35) 70%, rgb(34 211 238 / .55) 96%, transparent);
  mix-blend-mode: screen; animation: beam 1.8s var(--ease) infinite;
}
@keyframes beam { to { transform: translateY(460%); } }
.scan-progress__hud {
  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); display: grid; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-m); background: rgb(7 7 12 / .72); color: #F5F3FF;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.scan-progress__label { font-weight: 500; font-size: var(--fs-s); }
.scan-progress__bar { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .15); overflow: hidden; }
.scan-progress__bar::after { content: ''; display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #A78BFA, #22D3EE); transition: width var(--t-panel) var(--ease); }
@media (prefers-reduced-motion: reduce) { .scan-progress__beam { display: none; } }

/* ---------- views ---------- */
.views__legend { display: flex; gap: var(--sp-4); }
.views-editor { position: relative; width: fit-content; max-width: 100%; touch-action: pan-y; }
.views__img { display: block; max-width: 100%; max-height: 62dvh; width: auto; height: auto; border-radius: var(--radius-s); }
.frames { position: absolute; inset: 0; }
.frames.is-locked { pointer-events: none; }
.frame {
  position: absolute; border: 2px solid var(--c); border-radius: 6px; cursor: move; touch-action: none;
  background: color-mix(in srgb, var(--c) 8%, transparent);
}
.frame[data-role="F"] { --c: var(--view-front); } .frame[data-role="T"] { --c: var(--view-top); } .frame[data-role="S"] { --c: var(--view-side); }
.frame__tag { position: absolute; left: calc(var(--tap) / 2); bottom: 100%; display: flex; align-items: flex-end; gap: 2px; } /* clear of the corner handle */
.frame__role {
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-3); border: 0; border-radius: 10px 10px 0 0;
  background: var(--c); color: #fff; font-weight: 700; font-size: var(--fs-s); text-shadow: 0 1px 2px rgb(0 0 0 / .45);
}
.frame__remove { display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 10px 10px 0 0; background: rgb(17 17 17 / .55); color: #fff; }
.frame__remove .icon { width: 18px; height: 18px; }
.frame__handle { position: absolute; width: var(--tap); height: var(--tap); margin: calc(var(--tap) / -2) 0 0 calc(var(--tap) / -2); touch-action: none; }
.frame__handle::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--c); }
.frame__handle[data-corner="tl"] { left: 0; top: 0; cursor: nwse-resize; } .frame__handle[data-corner="tr"] { left: 100%; top: 0; cursor: nesw-resize; }
.frame__handle[data-corner="br"] { left: 100%; top: 100%; cursor: nwse-resize; } .frame__handle[data-corner="bl"] { left: 0; top: 100%; cursor: nesw-resize; }
.eraser { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.eraser.is-active { pointer-events: auto; cursor: crosshair; }
.views__tools { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.views__tools--eraser { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius-l); background: var(--bg-elev); border: 1px solid var(--line); }
.views__tools--eraser[hidden] { display: none; }
.views__row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.views__actions { grid-template-columns: 1fr; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (min-width: 1024px) { .views__actions { grid-template-columns: auto; } }

/* ---------- result (always dark, model full-bleed) ---------- */
.result { position: relative; min-height: 100dvh; overflow: hidden; }
.stage { position: fixed; inset: 0; z-index: 0; touch-action: none; }
.stage canvas { width: 100% !important; height: 100% !important; display: block; outline: none; }
.result__top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding-top: max(var(--sp-3), env(safe-area-inset-top)); }
.result__status { display: grid; justify-items: end; gap: var(--sp-1); text-align: right; max-width: 70%; }
.result__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-3);
  border-radius: 999px; font-weight: 600; font-size: var(--fs-s);
  background: var(--surface-glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
.result__badge .icon { width: 18px; height: 18px; }
.result__badge[data-kind="ok"] .icon { color: var(--ok); }
.result__badge[data-kind="approx"] .icon { color: var(--warn); }
.result__notes { position: relative; z-index: 2; padding-inline: var(--gutter); }
.result__dock {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: var(--sp-3);
  padding: var(--sp-4) var(--gutter) max(var(--sp-4), env(safe-area-inset-bottom));
  background: linear-gradient(rgb(7 7 12 / 0), rgb(7 7 12 / .85) 40%);
}
.result__dock .segmented { justify-self: center; }
.result__row { display: flex; justify-content: center; gap: var(--sp-3); }
.result__modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.result .sheet { z-index: 6; }
.sheet[data-open="closed"] { transform: translateY(100%); }
.corrections { display: grid; gap: var(--sp-5); padding-bottom: var(--sp-4); }
.holes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.holes__item { display: flex; align-items: center; gap: var(--sp-3); }
.holes__item > span { flex: 1; display: flex; gap: var(--sp-2); align-items: center; }
.switch { position: relative; width: 56px; height: var(--tap); border: 0; background: transparent; flex: none; }
.switch::before { content: ''; position: absolute; left: 4px; right: 4px; top: 10px; bottom: 10px; border-radius: 999px; background: var(--line); transition: background-color var(--t-micro); }
.switch[aria-checked="true"]::before { background: var(--holo); }
.switch__knob { position: absolute; top: 13px; left: 7px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--t-micro) var(--ease); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(24px); }
@media (min-width: 1024px) {
  .result__dock { left: auto; right: var(--gutter); bottom: var(--gutter); width: 420px; border-radius: var(--radius-xl); background: var(--surface-glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); padding: var(--sp-4); }
  .result .sheet { left: auto; right: var(--gutter); width: 420px; bottom: calc(var(--gutter) + 260px); border-radius: var(--radius-xl); border: 1px solid var(--line); }
  .result .sheet[data-open="closed"] { transform: translateY(calc(100% + 400px)); }
  .result .sheet[data-open="half"], .result .sheet[data-open="full"] { transform: none; }
}

/* ---------- VR ---------- */
.vr { position: relative; min-height: 100dvh; }
.vr__top { position: relative; z-index: 3; padding-top: max(var(--sp-3), env(safe-area-inset-top)); }
.vr__intro {
  position: relative; z-index: 3; display: grid; gap: var(--sp-5); max-width: 520px;
  margin: var(--sp-6) auto var(--sp-8); padding-block: var(--sp-6); border-radius: var(--radius-xl);
  background: var(--surface-glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
.vr__phone { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; background: var(--holo); color: #07070c; animation: lay-down 2.4s var(--ease) infinite; }
.vr__phone .icon { width: 36px; height: 36px; }
@keyframes lay-down { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }
.vr__rotate { display: none; }
.vr.is-stereo .vr__intro, .vr.is-stereo .vr__top { display: none; }
@media (orientation: portrait) {
  .vr.is-stereo .vr__rotate {
    position: fixed; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: var(--sp-4);
    background: rgb(7 7 12 / .92); color: #F5F3FF; font-size: var(--fs-l);
  }
  .vr.is-stereo .vr__rotate .icon { width: 56px; height: 56px; animation: lay-down 2.4s var(--ease) infinite; }
}

/* ---------- AR ---------- */
.ar { min-height: 100dvh; }
.ar__badge { background: var(--holo); }
.ar__state { display: grid; gap: var(--sp-3); }
.ar__link { width: 100%; min-height: var(--tap); padding: 0 var(--sp-3); border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink); font: 500 var(--fs-s) var(--font-ui); }
.ar__actions { display: grid; gap: var(--sp-3); }
.ar__overlay { position: fixed; inset: 0; z-index: 20; display: grid; align-content: space-between; padding: max(var(--sp-6), env(safe-area-inset-top)) var(--gutter) max(var(--sp-6), env(safe-area-inset-bottom)); pointer-events: auto; touch-action: none; }
.ar__overlay[hidden] { display: none; }
.ar__hint { justify-self: center; padding: var(--sp-2) var(--sp-4); border-radius: 999px; background: rgb(7 7 12 / .7); color: #F5F3FF; font-weight: 500; text-align: center; }
.ar__hint:empty { display: none; }
.ar__overlay-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ar__gl { position: fixed; inset: 0; z-index: 10; }

/* ---------- library ---------- */
.library__body { display: grid; gap: var(--sp-6); padding-block: var(--sp-4) var(--sp-14); }
.lib { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.lib-card { display: grid; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-l); background: var(--surface-glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.lib-card img, .lib-card__ph { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius-m); background: #11111A; object-fit: cover; }
.lib-card__meta { display: grid; gap: 2px; padding-inline: var(--sp-1); }
.lib-card__actions { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); }
.lib-card__actions .btn { --h: var(--tap); }
.lib-empty { display: grid; gap: var(--sp-4); justify-items: start; padding: var(--sp-6); border-radius: var(--radius-l); border: 2px dashed var(--line-strong); color: var(--ink-2); opacity: .9; }