/* 掃描頁（js/scan.js）。class 用 sc- 開頭。顏色、字體、元件都用 design-system 的 token 與 class。 */

.sc-scroll > * { flex: none; }
.sc-scroll .dsh-btn { text-decoration: none; box-sizing: border-box; }

/* 取景框：data-mode 是 loading（開相機中）、live（相機開著）、nocam（打不開）。
   寬螢幕（平板）上正方形邊長被可視高度限制，要置中，不然會貼左邊 */
.sc-finder {
  position: relative; aspect-ratio: 1; overflow: hidden; align-self: center; box-sizing: border-box;
  width: min(100%, 50vh);
  width: min(100%, 50dvh);
  background: var(--outline); border: var(--stroke-ui) solid var(--outline); border-radius: var(--radius-md);
}
.sc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 正方形對準框：只畫四個角 */
.sc-frame {
  position: absolute; inset: 18%; pointer-events: none;
  --c: var(--ink-50); --w: 4px; --l: 28px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}
.sc-finder__hint {
  position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); margin: 0; white-space: nowrap;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--outline); color: var(--ink-50); font-size: 14px; line-height: 20px; font-weight: 700;
}
.sc-nocam {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-6); background: var(--surface-sunken); text-align: center; font-size: 15px; line-height: 22px;
}
.sc-nocam p { margin: 0; }
.sc-finder[data-mode="nocam"] .sc-nocam { display: flex; }
.sc-finder:not([data-mode="live"]) .sc-frame,
.sc-finder:not([data-mode="live"]) .sc-finder__hint { display: none; }

.sc-msg { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--brand-text); }
.sc-msg:empty { display: none; }

/* 手動輸入樹號 */
.sc-form { display: flex; flex-direction: column; gap: var(--space-1); font-size: 15px; font-weight: 700; }
.sc-form__row { display: flex; gap: var(--space-2); }
.sc-form input {
  flex: 1; min-width: 0; font: inherit; font-weight: 400; font-size: 16px; line-height: 24px; color: var(--text);
  padding: var(--space-2) var(--space-3); letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  background: var(--surface); border: var(--stroke-fine) solid var(--outline); border-radius: var(--radius-sm);
}
.sc-form input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.sc-file { position: relative; }
.sc-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sc-file:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* Demo 樹牌 */
.sc-demo { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.sc-demo__title { margin: 0 0 var(--space-2); font-size: 15px; line-height: 22px; font-weight: 700; color: var(--text-muted); }
.sc-demo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sc-demo__btn {
  width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
  background: var(--surface-raised); border: var(--stroke-fine) solid var(--outline); border-radius: var(--radius-sm);
}
.sc-demo__btn:active { background: var(--surface-sunken); }
.sc-demo__btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.sc-demo__btn span { display: flex; flex-direction: column; font-size: 13px; line-height: 18px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sc-demo__btn b { font-size: 16px; line-height: 22px; color: var(--text); }