/* =========================================================================
   Try It On —— 鑽石手上模擬器（三層合成）
   搭配 Views/Shared/_TryItOn.cshtml 與 Scripts/try-it-on.js

   本檔刻意不使用任何寬度斷點與視窗寬度單位；每一個會顯示文字的選擇器都
   明確寫 font-size；所有規則都掛在 .tio 前綴底下，避免與全站樣式撞名。
   ========================================================================= */

.tio, .tio *, .tio *::before, .tio *::after { box-sizing: border-box; margin: 0; padding: 0; }

.tio {
    --tio-gold: #b09c57;
    --tio-gold-dark: #8a7840;
    --tio-ink: #303030;
    --tio-muted: #6f6b66;
    --tio-line: #e2e0dd;
    --tio-ivory: #faf9f7;
    --tio-white: #fff;
    --tio-warn: #c8791f;
    --tio-ok: #3f7d4e;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    color: var(--tio-ink);
    font-size: 14px;
    line-height: 1.75;
}

.tio h2 { font-size: 26px; font-weight: 600; letter-spacing: .02em; margin-bottom: 8px; }
.tio .tio-lede { font-size: 14px; color: var(--tio-muted); margin-bottom: 24px; max-width: 720px; }

/* ---------------------------------------------------------------- 校正列 */
.tio .tio-cal { border: 1px solid var(--tio-line); background: var(--tio-ivory); margin-bottom: 22px; }
.tio .tio-cal-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
.tio .tio-cal-head:hover { background: #f4f2ee; }

.tio .tio-badge {
    font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
    padding: 4px 12px; border-radius: 20px; white-space: nowrap; border: 1px solid;
}
.tio .tio-badge.is-off { color: var(--tio-warn); border-color: var(--tio-warn); background: #fdf6ec; }
.tio .tio-badge.is-on { color: var(--tio-ok); border-color: var(--tio-ok); background: #eef6f0; }

.tio .tio-cal-msg { font-size: 13.5px; color: var(--tio-muted); flex: 1; }
.tio .tio-cal-msg b { color: var(--tio-ink); font-weight: 600; }

.tio .tio-cal-toggle {
    font-size: 13px; color: var(--tio-gold-dark); border: 1px solid var(--tio-gold);
    background: var(--tio-white); padding: 7px 16px; cursor: pointer;
    white-space: nowrap; font-family: inherit;
}
/* 校正完成後的「重新校正」：金底白字，與未校正時的白底金字區隔。
   （2026-09-12 Albert 指定） */
.tio .tio-cal-toggle.is-done {
    color: #fff;
    background: var(--tio-gold-dark);
    border-color: var(--tio-gold-dark);
}
/* 已校正時訊息欄是空的，不要留下空白撐開版面 */
.tio .tio-cal-msg:empty { display: none; }

/* 第一次來的時候呼吸式閃動，校正完就拿掉 */
.tio .tio-cal-toggle.is-shine { animation: tioShine 1.6s ease-in-out infinite; }
@keyframes tioShine {
    0%, 100% { box-shadow: 0 0 0 0 rgba(176,156,87,.55); background: var(--tio-white); }
    50% { box-shadow: 0 0 0 7px rgba(176,156,87,0); background: #fdfaf2; }
}
/* 使用者若關閉系統動態效果就不要閃 */
@media (prefers-reduced-motion: reduce) {
    .tio .tio-cal-toggle.is-shine { animation: none; }
}

.tio .tio-cal-body { border-top: 1px solid var(--tio-line); padding: 20px 18px; }
.tio .tio-cal-steps { font-size: 13.5px; color: var(--tio-muted); margin-bottom: 16px; }
.tio .tio-cal-steps b { color: var(--tio-ink); }

.tio .tio-refbtns { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tio .tio-refbtns button {
    font-family: inherit; font-size: 13px; padding: 7px 14px;
    border: 1px solid var(--tio-line); background: var(--tio-white);
    color: var(--tio-ink); cursor: pointer;
}
.tio .tio-refbtns button.is-on {
    border-color: var(--tio-gold); background: #fdfaf2;
    color: var(--tio-gold-dark); font-weight: 600;
}
.tio .tio-refhint { font-size: 12.5px; color: var(--tio-muted); margin-bottom: 12px; }

.tio .tio-cal-stage {
    position: relative; background: var(--tio-white); border: 1px solid var(--tio-line);
    height: 150px; margin-bottom: 14px; overflow: hidden;
}
.tio .tio-refobj {
    position: absolute; left: 24px; top: 22px;
    border: 2px solid var(--tio-gold); background: rgba(176,156,87,.10);
}
.tio .tio-refobj.is-round { border-radius: 50%; }

.tio .tio-calrow { display: flex; align-items: center; gap: 14px; }
.tio .tio-calrow input[type=range] { flex: 1; accent-color: var(--tio-gold); }
.tio .tio-calrow .tio-calval { font-size: 13px; color: var(--tio-muted); width: 150px; text-align: right; }

.tio .tio-cal-done { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.tio .tio-cal-done button {
    font-family: inherit; font-size: 13px; padding: 8px 20px; cursor: pointer;
    border: 1px solid var(--tio-gold); background: var(--tio-gold); color: #fff;
}
.tio .tio-cal-done .tio-cal-reset {
    background: var(--tio-white); color: var(--tio-muted); border-color: var(--tio-line);
}

/* ------------------------------------------------ 主體：左舞台 / 右控制項 */
.tio .tio-wrap { display: flex; gap: 40px; align-items: flex-start; }
.tio .tio-stagecol { flex: 0 0 auto; }

.tio .tio-stage {
    position: relative; background: var(--tio-ivory);
    border: 1px solid var(--tio-line); overflow: hidden;
}
.tio .tio-stage .tio-hand { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.tio .tio-stage .tio-layer { position: absolute; transform-origin: center center; }
.tio .tio-stage .tio-layer img { width: 100%; height: auto; display: block; }

.tio .tio-scalenote { font-size: 12.5px; margin-top: 10px; }
.tio .tio-scalenote.is-off { color: var(--tio-warn); }
.tio .tio-scalenote.is-on { color: var(--tio-ok); }
.tio .tio-cap { font-size: 12.5px; color: var(--tio-muted); margin-top: 8px; max-width: 470px; line-height: 1.7; }

.tio .tio-ctrlcol { flex: 1 1 auto; min-width: 0; }
.tio .tio-ctrl { margin-bottom: 26px; }
.tio .tio-ctrl-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.tio .tio-ctrl-hd .tio-n { font-size: 12px; color: var(--tio-gold); font-weight: 600; letter-spacing: .1em; }
.tio .tio-ctrl-hd .tio-t { font-size: 15px; font-weight: 600; }
.tio .tio-ctrl-hd .tio-s { font-size: 12.5px; color: var(--tio-muted); }

.tio .tio-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tio .tio-chips button {
    font-family: inherit; font-size: 13.5px; padding: 8px 15px; line-height: 1.4;
    border: 1px solid var(--tio-line); background: var(--tio-white);
    color: var(--tio-ink); cursor: pointer; transition: .18s;
}
.tio .tio-chips button:hover { border-color: var(--tio-gold); }
.tio .tio-chips button.is-on {
    border-color: var(--tio-gold); background: var(--tio-gold); color: #fff; font-weight: 600;
}
.tio .tio-chips button .tio-sub { display: block; font-size: 11.5px; opacity: .72; font-weight: 400; }
.tio .tio-onlyone { font-size: 13px; color: var(--tio-muted); padding: 8px 0; }

.tio .tio-caratwrap { padding: 2px 4px 0; }
.tio .tio-caratwrap input[type=range] { width: 100%; accent-color: var(--tio-gold); }
.tio .tio-ticks { display: flex; justify-content: space-between; margin-top: 4px; }
.tio .tio-ticks span { font-size: 11.5px; color: var(--tio-muted); width: 34px; text-align: center; }
.tio .tio-ticks span.is-on { color: var(--tio-gold-dark); font-weight: 700; }

.tio .tio-readout {
    border: 1px solid var(--tio-line); background: var(--tio-ivory);
    padding: 16px 18px; font-size: 13.5px; line-height: 1.9;
}
.tio .tio-readout .tio-rd-hd { font-size: 19px; font-weight: 600; color: var(--tio-ink); margin-bottom: 6px; }
.tio .tio-readout .tio-k { color: var(--tio-muted); }

/* ---------------------------------------------------------------- 分享列 */
.tio .tio-share { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tio-line); }
.tio .tio-share-hd { font-size: 12.5px; color: var(--tio-muted); margin-bottom: 10px; }
.tio .tio-share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tio .tio-share-btns button {
    font-family: inherit; font-size: 13px; padding: 8px 16px; cursor: pointer;
    border: 1px solid var(--tio-line); background: var(--tio-white); color: var(--tio-ink);
    display: inline-flex; align-items: center; gap: 6px; transition: .18s;
}
.tio .tio-share-btns button:hover { border-color: var(--tio-gold); color: var(--tio-gold-dark); }
.tio .tio-share-btns button.is-copied { border-color: var(--tio-ok); color: var(--tio-ok); }

/* ================================================================
   手機版專屬（aj.mobile）
   桌機是「左舞台／右控制項」，手機改成上下堆疊。

   ⚠️ 這一段是手機版與桌機版唯一不同的地方，桌機那份沒有。
   Trap 2：本站 1rem = 10px，所以這裡一律用 px，避免混淆。
   ================================================================ */

.tio .tio-wrap { flex-direction: column; gap: 22px; }
.tio .tio-stagecol { flex: 0 0 auto; width: 100%; }
.tio .tio-ctrlcol { width: 100%; }

/* 觀景窗：固定大小、裁切。舞台維持真實 mm 尺寸在裡面移動。
   手部圖是整隻手 119.9 x 168.6 mm，手機上真實大小要 720px 寬放不下，
   所以只顯示以戒指為中心的一塊 —— 比例仍然是真的。 */
.tio .tio-view {
    position: relative;
    width: 100%;
    aspect-ratio: 36 / 44;
    max-height: 64vh;
    overflow: hidden;
    background: var(--tio-ivory);
    border: 1px solid var(--tio-line);
}
.tio .tio-view .tio-stage {
    position: absolute;
    border: none;
    background: none;
}

.tio .tio-cap { max-width: none; }
.tio .tio-calrow .tio-calval { width: auto; min-width: 96px; }

/* 校正區：桌機是「狀態徽章 / 說明文字 / 按鈕」橫排一列，
   手機寬度不夠，說明文字會被擠成一個字一行。改成上下堆疊。 */
.tio .tio-cal-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px;
}
.tio .tio-cal-head > * { width: 100%; }
.tio .tio-cal-msg { flex: none; }
.tio .tio-cal-head button,
.tio .tio-cal-head .tio-calbtn { width: 100%; }

/* 參考物按鈕：三顆平分一排 */
.tio .tio-refbtns { gap: 6px; }
.tio .tio-refbtns button { flex: 1 1 0; min-width: 0; }

/* 校正滑桿那一列：數值換到下一行，滑桿才有足夠寬度 */
.tio .tio-calrow { flex-wrap: wrap; }
.tio .tio-calrow input[type=range] { flex: 1 1 100%; order: 2; }
.tio .tio-calrow .tio-calval { order: 1; text-align: left; }