/* ============================================================================
   THE BIG MAN — fitting-m.css

   The phone fitting room. Loaded after mobile.css and only by
   m/fitting-room.html.

   This is where the room is actually used — a man reads the studio's Instagram
   on a phone, taps the link, and has his own camera in his hand. So the phone
   version leads with the camera, one movement fills the screen, and the action
   sits under the thumb above the tab bar.
   ========================================================================== */

/* The fitting room shows and hides a great deal — the camera, the still, half
   the buttons on the shot row, the whole send block. It does that with the
   `hidden` attribute, and `hidden` is a UA rule that `.btn { display:
   inline-flex }` in mobile.css quietly outranks. Say it once, here, loudly,
   rather than remembering it at eleven call sites. */
[hidden] { display: none !important; }

/* The bottom bar needs room beneath the scroll. */
body[data-page="fitting"] main { padding-bottom: calc(var(--tabs) + var(--safe-b) + 5.4rem); }

/* ============================== the rail ================================= */

.frm-rail {
  position: sticky;
  top: calc(var(--bar) + var(--safe-t));
  z-index: 50;
  display: flex;
  gap: 0;
  padding: 0 var(--gut);
  background: rgba(8, 8, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--rule);
}
.frm-tick {
  flex: 1 1 0;
  padding: 0.7rem 0 0.6rem;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--bone-3);
  opacity: 0.4;
  border-bottom: 2px solid transparent;
  transition: opacity 0.3s, color 0.3s, border-color 0.3s;
}
.frm-tick.is-done { opacity: 0.8; color: var(--olive); border-bottom-color: rgba(100, 107, 76, 0.6); }
.frm-tick.is-on { opacity: 1; color: var(--brass-lt); border-bottom-color: var(--brass); }

/* ============================= the panels ================================ */

.frm-panel { display: none; padding: 1.5rem var(--gut) 0; }
.frm-panel.is-on { display: block; animation: frm-in 0.4s var(--ease) both; }
@keyframes frm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .frm-panel.is-on { animation: none; } }

.frm-head { margin-bottom: 1.5rem; }
.frm-head h2 {
  font-family: var(--f-display);
  font-size: 1.72rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0.7rem 0 0.6rem;
}
.frm-head p { color: var(--bone-2); font-size: 0.9rem; line-height: 1.65; }

/* ============================== the bar ================================== */

.frm-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tabs) + var(--safe-b));
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem var(--gut);
  background: rgba(10, 10, 12, 0.95);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: var(--rule);
}
.frm-bar .btn { flex: 1 1 auto; }
.frm-bar .frm-back {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: var(--rule);
  border-radius: var(--radius);
  color: var(--bone-2);
}
.frm-bar .frm-back:active { background: rgba(188, 177, 150, 0.1); }

/* ============================== consent ================================== */

.frm-consent { display: grid; gap: 0.7rem; }
.frm-consent li {
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: 1rem 1.05rem 1.1rem;
}
.frm-consent h4 {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.55rem;
}
.frm-consent p { font-size: 0.85rem; line-height: 1.6; color: var(--bone-2); }
.frm-consent .hi {
  display: block;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: var(--rule-soft);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--bone-3);
}

.frm-agree {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-top: 1.3rem;
  padding: 1rem;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--ink-2);
}
.frm-agree input {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  flex: none;
  border: 1px solid rgba(188, 177, 150, 0.5);
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s;
}
.frm-agree input:checked { background: var(--olive); border-color: var(--olive); }
.frm-agree input:checked::after {
  content: "";
  display: block;
  width: 5px; height: 11px;
  margin: 3px auto 0;
  border: solid var(--bone);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.frm-agree span { font-size: 0.85rem; line-height: 1.6; color: var(--bone-2); }
.frm-agree b { color: var(--bone); font-weight: 400; }

/* ============================ the photograph ============================= */

.frm-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  border: var(--rule);
}
.frm-frame video, .frm-frame img { width: 100%; height: 100%; object-fit: cover; }
.frm-frame video { transform: scaleX(-1); }
.frm-frame.is-idle::after {
  content: "No photograph yet";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.frm-pose { position: absolute; inset: 0; opacity: 0.55; pointer-events: none; }
.frm-pose path, .frm-pose circle, .frm-pose line {
  fill: none; stroke: var(--brass); stroke-width: 0.8;
  vector-effect: non-scaling-stroke; stroke-dasharray: 5 5;
}
.frm-count {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 5.5rem;
  color: var(--bone);
  background: rgba(8, 8, 10, 0.4);
  pointer-events: none;
}

.frm-shotbtns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.frm-shotbtns .btn { flex: 1 1 44%; }

.frm-rules { margin-top: 1.4rem; }
.frm-rules li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--bone-2);
}
.frm-rules li::before {
  content: "";
  position: absolute; left: 0; top: 0.68em;
  width: 9px; height: 1px;
  background: var(--brass);
}
.frm-rules b { color: var(--bone); font-weight: 400; }

/* ============================== the figure =============================== */

.frm-form { display: grid; gap: 1.1rem; }
.frm-hint { display: block; margin-top: 0.4rem; font-size: 0.7rem; color: var(--bone-3); }

.frm-builds {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.3rem;
  scroll-snap-type: x mandatory;
}
.frm-builds::-webkit-scrollbar { display: none; }
.frm-build {
  flex: 0 0 30%;
  min-width: 104px;
  scroll-snap-align: start;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: 0.8rem 0.5rem 0.9rem;
  text-align: center;
  transition: border-color 0.25s, background 0.25s;
}
.frm-build svg { width: 46px; height: auto; margin: 0 auto 0.5rem; }
.frm-build svg path { fill: none; stroke: var(--bone-3); stroke-width: 2.6; stroke-linejoin: round; transition: stroke 0.25s; }
.frm-build b { display: block; font-family: var(--f-display); font-size: 1rem; font-weight: 400; }
.frm-build span { display: block; margin-top: 0.2rem; font-size: 0.63rem; color: var(--bone-3); line-height: 1.4; }
.frm-build[aria-pressed="true"] { border-color: var(--brass); background: var(--ink-3); }
.frm-build[aria-pressed="true"] svg path { stroke: var(--brass-lt); }

.frm-flag {
  margin-top: 1.1rem;
  padding: 0.8rem 0.9rem;
  border-left: 2px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(188, 177, 150, 0.07);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--bone-2);
}
.frm-flag b { color: var(--brass-lt); font-weight: 400; }

/* ============================ the commission ============================= */

.frm-pieces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 1.1rem;
}
.frm-piece {
  border: var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  text-align: left;
  transition: border-color 0.25s, transform 0.25s;
}
.frm-piece:active { transform: scale(0.98); }
.frm-piece[aria-pressed="true"] { border-color: var(--brass); }
.frm-piece__media { position: relative; aspect-ratio: 4 / 5; background: var(--ink-3); }
.frm-piece__media img { width: 100%; height: 100%; object-fit: cover; }
.frm-piece__media .card__render { position: absolute; inset: 0; }
.frm-piece__no {
  position: absolute; top: 0.4rem; left: 0.45rem;
  font-size: 0.54rem; letter-spacing: 0.18em;
  padding: 0.2rem 0.38rem;
  color: var(--bone-2);
  background: rgba(8, 8, 10, 0.62);
  border-radius: 3px;
}
.frm-piece__body { padding: 0.55rem 0.65rem 0.75rem; }
.frm-piece__body b { display: block; font-family: var(--f-display); font-size: 0.98rem; font-weight: 400; line-height: 1.2; }
.frm-piece__body span { display: block; margin-top: 0.22rem; font-size: 0.63rem; color: var(--bone-3); }

.frm-clothrow { margin-top: 1.8rem; padding-top: 1.4rem; border-top: var(--rule); }
.frm-cloths {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.3rem;
}
.frm-cloths::-webkit-scrollbar { display: none; }
.frm-cloth { flex: 0 0 78px; border: 1px solid transparent; border-radius: 10px; padding: 3px; }
.frm-cloth .swatch { aspect-ratio: 1; width: 100%; border-radius: 7px; overflow: hidden; }
.frm-cloth span {
  display: block; margin-top: 0.4rem;
  font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-3); line-height: 1.35;
}
.frm-cloth[aria-pressed="true"] { border-color: var(--brass); }
.frm-cloth[aria-pressed="true"] span { color: var(--brass-lt); }

/* ============================== the fitting ============================== */

.frm-render {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  border: var(--rule);
}
.frm-render img { width: 100%; height: 100%; object-fit: cover; }

.frm-loom { position: absolute; inset: 0; display: grid; place-items: center; }
.frm-loom .swatch { position: absolute; inset: 0; opacity: 0.24; }
.frm-loom__txt { position: relative; text-align: center; padding: 1rem; }
.frm-loom__txt p { font-family: var(--f-display); font-size: 1.2rem; margin-bottom: 0.7rem; }
.frm-loom__txt small {
  display: block; font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bone-3);
}
.frm-loom__bar { width: 140px; height: 1px; margin: 1rem auto 0; background: rgba(188,177,150,0.2); overflow: hidden; }
.frm-loom__bar i { display: block; width: 40%; height: 100%; background: var(--brass); animation: frm-shuttle 1.5s ease-in-out infinite; }
@keyframes frm-shuttle { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

.frm-card {
  margin-top: 1.2rem;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: 1.1rem;
}
.frm-card__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  padding-bottom: 0.9rem; border-bottom: var(--rule);
}
.frm-card__size { font-family: var(--f-display); font-size: 2.4rem; line-height: 1; color: var(--brass-lt); }
.frm-card__build { text-align: right; }
.frm-card__build b { display: block; font-family: var(--f-display); font-size: 1.15rem; font-weight: 400; }
.frm-card__build span { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-3); }

.frm-meas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: 1.1rem; background: rgba(188,177,150,0.14); border: var(--rule); border-radius: 8px; overflow: hidden;
}
.frm-meas div { background: var(--ink-2); padding: 0.65rem 0.5rem; }
.frm-meas dt { font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-3); margin-bottom: 0.22rem; }
.frm-meas dd { margin: 0; font-family: var(--f-display); font-size: 1.12rem; }
.frm-meas dd em { font-style: normal; font-size: 0.68em; color: var(--bone-3); }

.frm-notes { margin-top: 1.2rem; }
.frm-notes li {
  position: relative; padding-left: 1.25rem; margin-bottom: 0.65rem;
  font-size: 0.83rem; line-height: 1.6; color: var(--bone-2);
}
.frm-notes li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 9px; height: 1px; background: var(--olive);
}

.frm-disclaim {
  margin-top: 1.2rem; padding-top: 1rem; border-top: var(--rule);
  font-size: 0.74rem; line-height: 1.75; color: var(--bone-3);
}
.frm-disclaim .hi { display: block; margin-top: 0.45rem; }

.frm-send { display: grid; gap: 0.5rem; margin-top: 1rem; }
.frm-left { margin-top: 0.8rem; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--bone-3); text-align: center; }

.frm-error {
  margin-top: 0.9rem; padding: 0.8rem 0.9rem;
  border-left: 2px solid #5E2222;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(94, 34, 34, 0.16);
  font-size: 0.82rem; line-height: 1.55; color: var(--bone-2);
}

/* ================================ hindi ================================== */

.hi { font-family: "Noto Sans Devanagari", "Kohinoor Devanagari", "Mangal", sans-serif; font-weight: 300; }

/* The shared mobile shell already uses five tabs; keep fitting labels compact. */
.tab span { font-size: 0.52rem; letter-spacing: 0.12em; }