/* ============================================================
   fit.champsland.com — the fit page (v1, 2026-10-22)
   The mock-up's look (docs/brainstorm/fit-page/canvas/), phone first.
   No inline styles anywhere: the page's Content-Security-Policy
   (nginx-fit.conf.example) allows only this file.
   Fonts are our own copies (stage.sh puts them in fonts/): a page that
   asks people for their body measurements should not hand their IP to a
   font CDN on the way in.
   ============================================================ */
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fonts/cairo-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fonts/cairo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fonts/sora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --bg: #FAFAF8; --card: #FFFFFF; --ink: #111110; --ink-2: #45433E; --muted: #5F5D57;
  --line: #E4E1DA; --line-2: #D9D5CC; --line-3: #EEECE6; --soft: #F1EFEA; --dash: #B8B3A8;
  --accent: #B8460A; --accent-bg: #FDEEE4; --orange: #E05A10; --icon-off: #8A867D;
  --f-ar: 'Cairo', 'Sora', system-ui, sans-serif;
  --f-en: 'Sora', 'Cairo', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-ar); font-size: 16px; line-height: 1.6; }
html[lang="en"] body { font-family: var(--f-en); }
a { color: var(--accent); }
a:hover { color: #8F3507; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
[hidden] { display: none !important; }
.wrap { max-width: 480px; margin: 0 auto; }
.num, input.num { font-family: 'Sora', 'Cairo', sans-serif; }

/* ── The bar: brand, language, unit ─────────────────────────── */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; max-width: 480px; margin: 0 auto; }
.brand { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .14em; direction: ltr; white-space: nowrap; }
.ctl { display: flex; align-items: center; gap: 8px; }
.pill { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--card); font-size: 14px; }
html[lang="ar"] .pill { font-family: 'Sora', sans-serif; }
html[lang="en"] .pill { font-family: 'Cairo', sans-serif; }
.units { display: flex; border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden; background: var(--card); }
.units button { min-height: 44px; min-width: 52px; border: 0; background: var(--card); font-size: 14px; font-weight: 600; }
.units button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* The tape strip: cm ticks, the black end and the orange 0 line, like the tape. */
.tape { position: relative; height: 34px; direction: ltr; border-block: 1px solid var(--ink); background-color: #fff;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 30px),
                    repeating-linear-gradient(90deg, transparent 0 15px, var(--ink) 15px 16px, transparent 16px 30px),
                    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(90deg, #fff 0 300px, #FDEBDD 300px 600px);
  background-size: 100% 14px, 100% 9px, 100% 5px, 100% 100%; background-repeat: no-repeat; background-position: 30px 0; }
.tape::before { content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 100%; background: var(--ink); }
.tape::after { content: ''; position: absolute; left: 29px; top: 0; width: 2px; height: 100%; background: var(--orange); }

/* ── Views ───────────────────────────────────────────────────── */
main { display: block; max-width: 480px; margin: 0 auto; padding-bottom: 8px; }
main:focus { outline: none; }
.pad { padding: 0 20px; }
.sec { padding: 24px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.head { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.hero { padding: 32px 20px 0; display: flex; flex-direction: column; gap: 12px; }
h1 { margin: 0; font-size: 30px; line-height: 40px; font-weight: 700; }
h1:focus { outline: none; }
.hero h1 { font-size: 32px; line-height: 44px; }
h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
p { margin: 0; }
.lead { font-size: 17px; line-height: 28px; color: var(--ink-2); }
.sub { font-size: 14px; line-height: 22px; color: var(--muted); }
.back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-start: -10px; color: var(--ink); }
html[dir="ltr"] .flip { transform: scaleX(-1); }

/* The two big doors on the start screen. */
.doors { padding: 28px 20px 0; display: flex; flex-direction: column; gap: 14px; }
.door { display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 18px 16px; border-radius: 16px; text-decoration: none;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); }
.door:hover { color: var(--ink); }
.door.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.door.dark:hover { color: #fff; }
.door > span { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.door b { font-size: 20px; line-height: 28px; }
.door small { font-size: 15px; line-height: 22px; color: var(--muted); }
.door.dark small { color: var(--line-2); }
.door svg { flex: none; }
.mine { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.mine:hover { color: var(--ink); }
.mine > span { flex: 1; display: flex; flex-direction: column; }
.mine b { font-size: 17px; line-height: 24px; }
.mine small { font-size: 14px; color: var(--muted); }

/* How to measure — the tape's own words. */
.how { margin: 22px 20px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.how summary { min-height: 52px; padding: 12px 16px; font-size: 16px; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.how summary::-webkit-details-marker { display: none; }
.how summary::after { content: '+'; font-size: 22px; line-height: 1; }
.how[open] summary::after { content: '−'; }
.how-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.how-row { display: flex; gap: 12px; align-items: flex-start; }
.how-row svg { flex: none; }
.how-row b { display: block; font-size: 16px; }
.how-row span { font-size: 15px; line-height: 24px; color: var(--ink-2); }
.tips { margin: 0; padding: 12px 16px; list-style: none; background: var(--soft); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 24px; }
.tips li::before { content: '· '; color: var(--orange); font-weight: 700; }

.note { margin: 14px 20px 0; display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: var(--soft); border-radius: 12px; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.note svg { flex: none; margin-top: 2px; }
.sec .note { margin: 0; }
.small-lbl { font-size: 15px; line-height: 22px; font-weight: 600; }
.foot { display: flex; justify-content: space-between; gap: 12px; padding: 28px 20px 20px; font-size: 13px; line-height: 20px; color: var(--muted); }
.foot a { color: var(--muted); }

/* ── Fields ──────────────────────────────────────────────────── */
.card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.card.dashed { border: 1px dashed var(--dash); }
.card > svg { flex: none; }
.fbody { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
label, .lbl { font-size: 17px; line-height: 24px; font-weight: 700; }
.def { font-size: 14px; line-height: 21px; color: var(--muted); }
.inrow { display: flex; align-items: center; gap: 8px; }
.inrow .u { font-size: 15px; color: var(--ink-2); }
input.box { width: 120px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; font-family: 'Sora', 'Cairo', sans-serif; font-size: 20px; }
input.box.short { width: 72px; padding: 0 10px; }
input.box.wide { width: 100%; font-size: 18px; }
html[dir="rtl"] input.box { text-align: right; }
input.box[aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
input.box::placeholder { color: #A9A59C; }
.hint { font-size: 13px; line-height: 18px; color: var(--muted); min-height: 18px; }
.hint.bad, .err { color: var(--accent); }
.err { font-size: 14px; line-height: 20px; font-weight: 600; }
/* The honeypot. NOT left:-9999px: in a right-to-left page an element far to
   the left WIDENS the page (RTL scrolls that way), and a phone then zooms out
   to fit 10,000 px — the screen went blank. Clipped in place instead. */
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }

/* Choice chips. */
.chips { display: grid; gap: 8px; }
.chips.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chips.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.chip { min-height: 48px; padding: 4px; border: 0; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; line-height: 20px; }
.chip.on { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
.chip.tall { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chip.tall small { font-size: 12px; line-height: 18px; color: var(--muted); font-weight: 400; }
.chip.icon { min-height: 84px; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; line-height: 16px; }
.chip.icon rect { fill: var(--icon-off); }
.chip.icon.on rect { fill: var(--accent); }
.chip.sz { font-family: 'Sora', 'Cairo', sans-serif; font-size: 14px; }
.chips[aria-invalid="true"] .chip { box-shadow: inset 0 0 0 1px var(--accent); }
.subpanel { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }

/* Buttons. */
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--ink); color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; text-align: center; }
.btn:hover { color: #fff; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn.line { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); font-size: 16px; font-weight: 600; min-height: 52px; }
.btn.line:hover { color: var(--ink); }
.btn.quiet { background: var(--card); color: var(--ink-2); border: 1px solid var(--line-2); font-size: 16px; font-weight: 400; min-height: 48px; }
.btn.small { min-height: 48px; font-size: 16px; font-weight: 600; border-radius: 12px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.link { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 16px; font-weight: 600; }
.send { display: flex; gap: 12px; align-items: flex-start; }
.send input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent); }
.send label { display: flex; flex-direction: column; gap: 2px; font-weight: 400; }
.send label b { font-size: 15px; line-height: 22px; font-weight: 600; }
.send label small { font-size: 13px; line-height: 20px; color: var(--muted); }

/* Saved. */
.done { padding: 28px 20px 0; display: flex; align-items: center; gap: 14px; }
.done svg { flex: none; }
.done h1 { font-size: 24px; line-height: 34px; }
.mytable { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.mytable caption { text-align: start; padding: 10px 0 6px; font-size: 18px; font-weight: 700; }
.mytable tr + tr { border-top: 1px solid var(--line-3); }
.mytable th { text-align: start; padding: 10px 0; font-weight: 600; }
.mytable td { padding: 10px 0; font-family: 'Sora', 'Cairo', sans-serif; white-space: nowrap; }
.mytable td + td { padding-inline-start: 12px; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.tags span { padding: 4px 12px; border-radius: 14px; background: var(--soft); font-size: 14px; line-height: 22px; }
.soon { margin: 20px 20px 0; padding: 16px; border: 1.5px dashed var(--dash); border-radius: 16px; display: flex; flex-direction: column; gap: 6px; }
.soon b { font-size: 18px; line-height: 26px; }
.soon span { font-size: 15px; line-height: 24px; color: var(--ink-2); }
.cta { margin: 20px 20px 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: #fff; text-decoration: none; }
.cta:hover { color: #fff; }
.cta span { flex: 1; font-size: 17px; line-height: 24px; font-weight: 600; }

/* Thank you. */
.thanks { padding: 56px 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.thanks h1 { font-size: 34px; line-height: 46px; }
.keep { margin: 28px 20px 0; display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--soft); border-radius: 12px; font-size: 15px; line-height: 24px; }
.keep svg { flex: none; }
.actions { padding: 28px 20px 0; display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 520px) {
  body { padding-bottom: 24px; }
}