/* Tờ brief (màn riêng sau "Xong, xem bản brief") và khoảnh khắc mở ra của phiếu "chốn riêng của bạn".
   Tách khỏi phieu.css vì là màn khác: phiếu cuộn ở phieu.css, ở đây là tờ giấy in, con dấu, lớp mở ra phủ kín màn,
   và nút nổi "Về bản brief" khi khách đang sửa một khối từ tờ brief. */

.brief-screen { padding: var(--sp-5) var(--gut) calc(var(--sp-9) + env(safe-area-inset-bottom, 0px)); }
.brief-screen .blk__kicker { display: block; margin-bottom: var(--sp-3); }

/* Nút nổi khi đang sửa từ tờ brief. Dùng translate riêng để .btn:active (scale .97) vẫn chạy. Đang gõ chữ thì ẩn đi,
   để không nằm đè lên ô nhập ngay trên bàn phím. */
.float-back { position: fixed; z-index: calc(var(--z-sticky) + 2); left: 50%; bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px)); translate: -50% 0; box-shadow: 0 12px 30px -10px rgb(0 0 0 / .8), 0 0 0 6px rgb(15 14 12 / .55); transition: transform var(--d-press) var(--ease-out), opacity var(--d-fast) ease; }
html:has(:is(input[type="text"], textarea, select):focus) .float-back { opacity: 0; pointer-events: none; }

/* ---------- Bản brief: tờ giấy in của studio ---------- */
/* Trên giấy in, chữ phụ của khách (--you-muted) là nâu xám của giấy để chấm trục và chữ nhỏ đọc được trên nền sáng. */
.brief-paper { --you-muted: #6b6152; position: relative; margin-top: var(--sp-6); padding: 22px 18px 18px; border-radius: var(--r-paper); background: var(--cr-print); color: var(--cr-print-ink); box-shadow: var(--shadow-lift); transform: rotate(-.4deg); }
.brief-paper::before { content: ""; position: absolute; inset: 7px; border: 1px dashed rgb(42 36 28 / .22); border-radius: 1px; pointer-events: none; }
.brief-head { display: flex; justify-content: space-between; gap: var(--sp-3); font: 500 var(--fs-label)/1.4 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: #6b6152; }
.brief-name { margin-top: var(--sp-3); font: 800 var(--fs-2)/1 var(--font-display); letter-spacing: var(--track-2); padding-top: .12em; color: var(--cr-print-ink); overflow-wrap: anywhere; }
.brief-rows { margin-top: var(--sp-4); }
.brief-row { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--sp-3); padding: 12px 0; border-top: 1px dashed rgb(42 36 28 / .25); }
.brief-row dt { grid-column: 1; font: 500 var(--fs-label)/1.4 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: #6b6152; }
.brief-row dd { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--cr-print-ink); }
.brief-row dd small { display: block; font-size: var(--fs-small); color: #6b6152; }
/* Nút Sửa nằm cùng hàng nhãn; lề âm giữ vùng chạm 44px mà không đẩy hàng nhãn cao lên. */
.brief-edit { grid-column: 2; grid-row: 1; align-self: center; margin: -14px -4px -14px 0; min-height: 44px; min-width: 44px; padding: 0 4px; font: 500 .8125rem/1 var(--font-label); color: #6a4b0d; text-decoration: underline; text-underline-offset: 3px; }
.brief-thumbs { display: flex; gap: 6px; margin: 6px 0 4px; }
.brief-thumbs > span { width: 40px; height: 50px; overflow: hidden; border-radius: 1px; box-shadow: 0 0 0 3px #fff; background: var(--cr-print-edge); }
.brief-thumbs img, .brief-thumbs svg { width: 100%; height: 100%; object-fit: cover; }
/* Hàng chốt màu chính trên giấy: ô 44px, chạm lún .97; ô đang chốt có vòng mực + quầng chính màu đó (160ms ease-out). */
.brief-paper :focus-visible { outline-color: var(--cr-print-ink); }
.brief-lead { margin-top: 10px; }
.brief-lead > small { margin-bottom: 8px; text-wrap: pretty; }
.brief-lead__row { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.lead-btn { display: grid; justify-items: center; gap: 5px; width: 50px; transition: transform var(--d-press) var(--ease-out); }
.lead-btn:active { transform: scale(.97); }
/* Viền mực mảnh cho mọi ô (3,3:1 trên giấy kem) để ô màu nhạt như cam đào, hồng vẫn nhận ra là ô bấm được. */
.lead-btn i { width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(42 36 28 / .55); transition: box-shadow 160ms var(--ease-out); }
.lead-btn[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px rgb(42 36 28 / .55), 0 0 0 3px var(--cr-print), 0 0 0 5px var(--cr-print-ink), 0 0 16px 6px color-mix(in oklab, var(--c) 55%, transparent); }
.lead-btn span { min-height: 2.5em; font: 500 .75rem/1.25 var(--font-label); color: #6b6152; text-align: center; }
.lead-btn[aria-pressed="true"] span { color: var(--cr-print-ink); }
.brief-lead__auto { margin: 2px 0 -8px -.4em; font-size: .8125rem; color: #6b6152; text-decoration: underline; text-underline-offset: 3px; }
/* Máy 320–359px: hàng chỉ rộng ~253px, ô 46px + khe 5px để đủ 5 ô trên một hàng (vẫn trên 44px vùng chạm). */
@media (max-width: 359px) { .brief-lead__row { column-gap: 5px; } .lead-btn { width: 46px; } }
/* Tám trục chung một lưới ba cột: chữ hai đầu không xuống dòng, các đường thẳng hàng nhau. */
.axes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px 8px; margin-top: 6px; font: 450 .75rem/1.2 var(--font-label); color: #6b6152; }
.axis { display: contents; }
.axis > span:first-child, .axis > span:last-child { white-space: nowrap; }
.axis > span:last-child { text-align: right; }
.axis__line { position: relative; height: 2px; background: rgb(42 36 28 / .2); }
.axis__line i { position: absolute; top: 50%; left: var(--x); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--you-muted); }
.axis__line i.is-zero { background: transparent; box-shadow: inset 0 0 0 1.5px var(--you-muted); }
.stamp { position: absolute; right: 16px; top: 46px; padding: 6px 10px; border: 2px solid #a33a24; border-radius: 4px; color: #a33a24; font: 600 .8125rem/1.15 var(--font-label); letter-spacing: .06em; text-transform: uppercase; text-align: center; transform: rotate(-6deg); opacity: 0; pointer-events: none; }
.stamp.is-on { opacity: .92; }
.brief-go { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); justify-items: stretch; }
.brief-go__note { text-align: center; font-size: var(--fs-small); color: var(--cr-muted); }
.brief-go .btn--quiet { justify-self: center; }
@media (min-width: 768px) { .brief-go { justify-items: center; } .brief-go .btn--lamp { min-width: 320px; } }

/* ---------- Khoảnh khắc mở ra ---------- */
.unveil { position: fixed; inset: 0; z-index: var(--z-overlay); overflow: hidden; background: var(--cr-ink-0); color: var(--you-text); }
.unveil__you { position: absolute; inset: 0; background: var(--you-bg); opacity: 0; }
.unveil__stage { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--sp-7) var(--gut) max(var(--sp-7), env(safe-area-inset-bottom, 0px)); }
.unveil__center { position: relative; width: min(100%, 560px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.unveil__center > * { max-width: 100%; }
.unveil__stack { position: absolute; left: 50%; top: 32%; width: 0; height: 0; }
/* Tấm ngoài (.unveil__card) chỉ để bay FLIP, không có transform CSS; tấm trong (.print) giữ chỗ lệch và xoay. */
.unveil__card { --w: clamp(120px, 38vw, 190px); position: absolute; width: var(--w); left: calc(var(--w) / -2); top: calc(var(--w) * -.625); }
.unveil__card .print { display: block; }
.unveil__card .print > img, .unveil__card .print__art { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.unveil__card .print__art svg { width: 100%; height: 100%; }
.unveil__blank { display: grid; place-items: center; aspect-ratio: 4 / 5; background: #f7f2e8; font: 450 .875rem/1.3 var(--font-label); color: #6b6152; }
.unveil__lamp { position: relative; width: 120px; height: 120px; margin-bottom: -8px; }
.unveil__lamp .pool { inset: 30% -150% -260%; opacity: 0; }
.unveil__shade { position: absolute; left: 50%; top: 10px; width: 76px; transform: translateX(-50%); opacity: 0; }
.unveil__name { position: relative; max-width: 100%; font-family: var(--font-you-name); font-weight: var(--you-name-weight); letter-spacing: var(--you-name-track); line-height: var(--you-name-lh); font-style: var(--you-name-style); font-variation-settings: var(--you-name-vari); font-size: clamp(3rem, 16vw, 7.5rem); padding-top: .14em; color: var(--you-bg); overflow-wrap: anywhere; text-wrap: balance; }
.unveil__band { display: flex; justify-content: center; gap: 8px; margin-top: var(--sp-5); min-height: 26px; }
.unveil__band i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--you-bg), 0 0 0 3px color-mix(in oklab, var(--you-text) 22%, transparent); }
.unveil__line { margin-top: var(--sp-5); overflow-wrap: anywhere; font-family: var(--font-whisper); font-style: italic; font-size: var(--fs-whisper); line-height: var(--lh-whisper); color: var(--you-text); opacity: 0; }
.unveil__note { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--you-muted); opacity: 0; }
.unveil__go { margin-top: var(--sp-6); opacity: 0; pointer-events: none; }
.unveil__go.is-on { pointer-events: auto; }
/* Nền đổi từ tối sang màu khách giữa chừng: nhãn có nền viên thuốc riêng để đọc được trên cả hai. */
.unveil__skip { position: absolute; right: var(--gut); bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: rgb(10 9 8 / .55); font: 450 var(--fs-label)/1.4 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: #d9d2c4; }
.unveil[data-done] .unveil__skip { display: none; }