/* Form modal (#sheet), v7 测试报告. Every selector is scoped under #sheet; ds tokens only.
   Phone: white bottom sheet. Eyebrow + progress, H2 「留你的位子」, a paper ticket (.ds-ticket) that fills in as you answer,
   one question, one yellow button. Keyboard open (.kb, set by sec-sheet.js): the ticket folds to a 56px strip.
   Success: lander.js adds .logged.on -> a green .ds-stamp--pass 「位子留好了 ✓」 thunks onto the ticket, then the redirect.
   >= 720: centred modal. >= 900: 880px dialog, ticket card left (report rows), question right. */

/* ---------- container ---------- */
#sheet .sheet {
  padding: var(--ds-s5) var(--ds-gutter) calc(var(--ds-s4) + env(safe-area-inset-bottom));
  font-family: var(--ds-zh);
}
#sheet .grab { display: none; }                         /* no swipe-to-close, so no false affordance */
#sheet .x {
  top: var(--ds-s2); right: var(--ds-s2); width: 44px; height: 44px; border-radius: var(--ds-r-s);
  background: transparent; color: var(--ds-text); z-index: 2; transition: background var(--ds-t1);
}
@media (hover: hover) { #sheet .x:hover { background: var(--ds-line); } }
#sheet .x:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 0; }

/* ---------- header: eyebrow + progress on one line, then the H2 ---------- */
#sheet .sheet-top { padding-right: 48px; }
#sheet .sheet-k { display: flex; color: var(--ds-mute); align-items: center; gap: var(--ds-s4); margin: 0 0 var(--ds-s1); }
#sheet .ds-h2 { margin: 0; font-size: 28px; line-height: 1.2; }

/* progress: 3 bars + n/3 (sits right of the eyebrow) */
#sheet .dots { display: inline-flex; align-items: center; gap: var(--ds-s1); margin: 0 0 0 auto; }
#sheet .dots i { width: 16px; height: 4px; border-radius: 2px; background: var(--ds-line); transition: background var(--ds-t2); }
#sheet .dots i.on { background: var(--ds-ink); }
#sheet .dots::after {
  content: "1/3"; margin-left: var(--ds-s1); font: 600 var(--ds-fs-tag)/16px var(--ds-mono); letter-spacing: 0; color: var(--ds-mute);
}
#sheet .sheet[data-at="1"] .dots::after { content: "2/3"; }
#sheet .sheet[data-at="2"] .dots::after { content: "3/3"; }

/* ---------- the ticket: a paper .ds-ticket (perforation + notches from ds.css) ---------- */
#sheet .tix {
  --ds-ground: var(--ds-paper);
  position: relative; margin-top: var(--ds-s4); overflow: visible; border-radius: 0;
  background: none; color: var(--ds-text);
}
#sheet .tix > .tix-main, #sheet .tix > .tix-stub { background: var(--ds-paper); }
#sheet .tix-main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag code" "for for" "name name";
  align-items: baseline; column-gap: var(--ds-s4); padding: var(--ds-s4) var(--ds-s5) var(--ds-s4);
}
#sheet .tix-top { display: contents; }
#sheet .tix-tag { grid-area: tag; font: 700 var(--ds-fs-tag)/18px var(--ds-mono); letter-spacing: .06em; color: var(--ds-mute); }
#sheet .tix-top .num { grid-area: code; justify-self: end; font: 600 var(--ds-fs-tag)/18px var(--ds-mono); letter-spacing: .04em; color: var(--ds-mute); }
#sheet .tix-for { grid-area: for; margin: var(--ds-s2) 0 0; font: 400 var(--ds-fs-fine)/18px var(--ds-zh); color: var(--ds-mute); opacity: 1; }
#sheet .tix-name {
  grid-area: name; justify-self: start; max-width: 100%; min-height: 36px; margin: 0;
  font: 900 30px/36px var(--ds-zh); color: var(--ds-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1.5px dashed transparent;
}
#sheet .tix-name.is-todo { color: var(--ds-mute); border-bottom-color: var(--ds-mute); }
#sheet .tix-sub, #sheet .tix-meter { display: none; }

/* stub: report cells (label above, value below) */
#sheet .tix-stub {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-s2) var(--ds-s4);
  padding: var(--ds-s4) var(--ds-s5) var(--ds-s4); border: 0; font-size: 15px;
}
#sheet .tix-stub::before { left: var(--ds-s5); right: var(--ds-s5); }
#sheet .c { display: grid; gap: 2px; min-width: 0; align-content: start; }
#sheet .c > span { font: 400 var(--ds-fs-tag)/16px var(--ds-zh); color: var(--ds-mute); opacity: 1; }
#sheet .c b {
  display: block; min-width: 0; font: 700 15px/22px var(--ds-num); font-stretch: 92%; color: var(--ds-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sheet .c b span { font: inherit; color: inherit; opacity: 1; }
#sheet .c-day { grid-column: span 3; }
#sheet .c-time { grid-column: span 1; }
#sheet .c-wa, #sheet .c-em { grid-column: span 2; }
#sheet .c-where, #sheet .c-spk { display: none; }       /* phone: the hint and the line under the button already say Zoom */
#sheet .c b.is-todo { justify-self: start; font-family: var(--ds-zh); font-weight: 400; color: var(--ds-mute); border-bottom: 1.5px dashed var(--ds-mute); line-height: 20px; }
#sheet .c b.ink-in { animation: tix-ink var(--ds-t2) var(--ds-ease) both; }
@keyframes tix-ink { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* success stamp: hidden until lander.js adds .on; then the ds-thunk lands it on the ticket */
#sheet .logged {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: none;
  opacity: 0; visibility: hidden; pointer-events: none; transition: none;
}
#sheet .logged .ds-stamp { padding: .26em .6em .3em; border-radius: var(--ds-r-s); background: var(--ds-paper); font-size: 26px; }
#sheet .logged.on { opacity: 1; visibility: visible; }
.ds-motion #sheet .logged.on .ds-stamp { animation: ds-thunk .24s var(--ds-ease-thunk) both; }
.ds-motion #sheet .logged.on .ds-stamp::after { animation: ds-ring .3s ease-out .12s both; }
#sheet .sheet.done .form { opacity: .5; transition: opacity var(--ds-t2); }

/* ---------- one question ---------- */
#sheet .form { margin-top: var(--ds-s5); }
#sheet .field label { display: block; margin: 0 0 var(--ds-s2); font: 700 18px/1.35 var(--ds-zh); color: var(--ds-text); }
#sheet .hint { display: block; margin-top: 2px; font: 400 14px/1.5 var(--ds-zh); color: var(--ds-mute); }
#sheet .hint span { font: inherit; }
#sheet .input, #sheet .cc {
  min-height: 56px; padding: 0 var(--ds-s4); border: 1.5px solid var(--ds-mute); border-radius: var(--ds-r-s);
  background: var(--ds-white); font: 400 17px var(--ds-zh); color: var(--ds-text);
  transition: border-color var(--ds-t1), box-shadow var(--ds-t1);
}
#sheet .input::placeholder { color: var(--ds-mute); opacity: 1; }
#sheet .input:focus { outline: none; border-color: var(--ds-ink); box-shadow: 0 0 0 1px var(--ds-ink), 0 0 0 5px var(--ds-line); }
/* country code + number = one field */
#sheet .phone {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0;
  border: 1.5px solid var(--ds-mute); border-radius: var(--ds-r-s); background: var(--ds-white);
  transition: border-color var(--ds-t1), box-shadow var(--ds-t1);
}
#sheet .phone .cc, #sheet .phone .input { min-height: 53px; border: 0; border-radius: 0; box-shadow: none; background-color: transparent; }
#sheet .phone .cc {
  padding: 0 24px 0 14px; border-right: 1px solid var(--ds-line); border-radius: 9px 0 0 9px;
  font: 700 16px var(--ds-num); background-position: right 10px center;
}
#sheet .phone .input, #sheet #f-email { font-family: var(--ds-num); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
#sheet .phone:focus-within { border-color: var(--ds-ink); box-shadow: 0 0 0 1px var(--ds-ink), 0 0 0 5px var(--ds-line); }
#sheet .phone .input:focus, #sheet .phone .cc:focus { box-shadow: none; outline: none; }
#sheet .phone .cc:focus-visible { background-color: var(--ds-line); }

/* error: red border + one red line under the field. No green "ok": the ticket filling in is the success feedback. */
#sheet .err { margin: var(--ds-s2) 0 0; font: 700 14px/1.5 var(--ds-zh); color: var(--ds-dn-t); }
#sheet .field.bad .input, #sheet .field.bad .phone { border-color: var(--ds-dn-t); }
#sheet .field.bad .input:focus, #sheet .field.bad .phone:focus-within { border-color: var(--ds-dn-t); box-shadow: 0 0 0 1px var(--ds-dn-t), 0 0 0 5px rgba(198,47,51,.12); }
#sheet .field.bad .phone .input, #sheet .field.bad .phone .input:focus { border: 0; box-shadow: none; }
#sheet .field.ok .input { border-color: var(--ds-mute); }
#sheet .field.ok .input:focus { border-color: var(--ds-ink); }
#sheet .field.ok .phone .input { border: 0; }
#sheet .form-msg { margin-top: var(--ds-s4); padding: 0 0 0 var(--ds-s4); border-radius: 0; border-left: 3px solid var(--ds-dn-t); background: none; color: var(--ds-dn-t); font: 700 14px/1.6 var(--ds-zh); }

/* ---------- action: the one yellow thing ---------- */
#sheet .step-nav { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--ds-s2); margin-top: var(--ds-s4); }
#sheet .step-nav .btn { width: 100%; grid-column: auto; min-height: 56px; font-size: 18px; }
#sheet .stepper[data-step="0"] .step-nav { grid-template-columns: 1fr; }
#sheet .stepper[data-step="0"] .back { display: none; }
#sheet .back {
  display: grid; place-items: center; width: 56px; min-height: 56px; padding: 0;
  border: 1.5px solid var(--ds-mute); border-radius: var(--ds-r-s); background: var(--ds-white); color: var(--ds-text);
  transition: border-color var(--ds-t1);
}
@media (hover: hover) { #sheet .back:hover { border-color: var(--ds-ink); } }
#sheet .back:focus-visible, #sheet .btn:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
#sheet #step-next .l-last { display: none; }
#sheet .stepper[data-step="1"] #step-next .l-next { display: none; }
#sheet .stepper[data-step="1"] #step-next .l-last { display: inline; }
#sheet #submit:disabled { opacity: 1; cursor: progress; }
#sheet #submit .spin { width: 18px; height: 18px; }

/* under the button: where the link goes (every step), then free / consent */
#sheet .sheet-under, #sheet .sheet-note, #sheet .consent { margin: var(--ds-s2) 0 0; font: 400 var(--ds-fs-fine)/1.6 var(--ds-zh); color: var(--ds-mute); text-wrap: pretty; }
#sheet .sheet-under { margin-top: var(--ds-s4); font-weight: 700; color: var(--ds-text-2); }
#sheet .sheet-under span { font: inherit; }
#sheet .consent { display: none; }
#sheet .stepper[data-step="2"] .consent { display: block; }
#sheet .stepper[data-step="2"] .sheet-note { display: none; }
#sheet .consent a { color: var(--ds-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- phone, keyboard open: the ticket folds to one strip (name · WhatsApp · 6-slot meter) ---------- */
@media (max-width: 719px) {
  #sheet .sheet.kb { max-height: calc(100% - 8px); padding-top: var(--ds-s4); }
  #sheet .sheet.kb .ds-h2 { font-size: 20px; line-height: 28px; }
  #sheet .sheet.kb .tix { margin-top: var(--ds-s2); }
  #sheet .sheet.kb .tix-main {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name meter" "sub meter";
    align-items: center; row-gap: 0; min-height: 56px; padding: var(--ds-s2) var(--ds-s4);
    border-radius: var(--ds-r-s); -webkit-mask: none; mask: none;
  }
  #sheet .sheet.kb .tix-tag, #sheet .sheet.kb .tix-for, #sheet .sheet.kb .tix-top .num, #sheet .sheet.kb .tix-stub { display: none; }
  #sheet .sheet.kb .tix-name { min-height: 24px; font-size: 19px; line-height: 24px; }
  #sheet .sheet.kb .tix-sub {
    display: block; grid-area: sub; margin: 0; min-width: 0;
    font: 600 var(--ds-fs-tag)/16px var(--ds-mono); color: var(--ds-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #sheet .sheet.kb .tix-meter { display: flex; grid-area: meter; gap: 3px; align-self: center; }
  #sheet .tix-meter i { width: 8px; height: 4px; border-radius: 1px; background: var(--ds-line); transition: background var(--ds-t2); }
  #sheet .tix-meter i.on { background: var(--ds-ink); }
  #sheet .sheet.kb .form { margin-top: var(--ds-s4); }
  #sheet .sheet.kb .stepper[data-step="0"] .hint { display: none; }
  #sheet .sheet.kb .sheet-note { display: none; }
}
@media (max-width: 370px) {
  #sheet .tix-main { padding: var(--ds-s4) var(--ds-s4) var(--ds-s2); }
  #sheet .tix-stub { padding: var(--ds-s4); gap: var(--ds-s2); }
  #sheet .tix-name { font-size: 26px; }
  #sheet .c b { font-size: 14px; font-stretch: 88%; }
}

/* ---------- v9 mobile polish ---------- */
/* no label under 13px on the ticket */
#sheet .tix-tag, #sheet .tix-top .num, #sheet .c > span, #sheet .dots::after { font-size: 13px; }
#sheet .sheet.kb .tix-sub { font-size: 13px; }
/* the #sheet .cc background shorthand above wiped zh.css's chevron: put it back so the country code reads as a picker */
#sheet .phone .cc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' fill='none' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
/* short phones (360x640, in-app browsers): tighten the ticket so the button and the consent line stay on screen */
@media (max-width: 719px) and (max-height: 700px) {
  #sheet .sheet:not(.kb) { padding-top: var(--ds-s4); }
  #sheet .sheet:not(.kb) .tix { margin-top: var(--ds-s3); }
  #sheet .sheet:not(.kb) .tix-main { padding-top: var(--ds-s3); padding-bottom: var(--ds-s3); }
  #sheet .sheet:not(.kb) .tix-for { margin-top: var(--ds-s1); }
  #sheet .sheet:not(.kb) .tix-name { font-size: 26px; line-height: 32px; min-height: 32px; }
  #sheet .sheet:not(.kb) .tix-stub { padding-top: var(--ds-s3); padding-bottom: var(--ds-s3); }
  #sheet .sheet:not(.kb) .form { margin-top: var(--ds-s4); }
  #sheet .sheet-under { margin-top: var(--ds-s3); }
}

/* ---------- tablet: centred dialog, one column ---------- */
@media (min-width: 720px) {
  #sheet .sheet {
    width: var(--ds-sheet-w); max-height: calc(100% - 48px); padding: var(--ds-s6) var(--ds-s6) var(--ds-s5);
    border-radius: var(--ds-sheet-r); box-shadow: var(--ds-sheet-shadow);
  }
  #sheet .x { top: var(--ds-s4); right: var(--ds-s4); }
  #sheet .c-where { display: grid; grid-column: span 1; }
  #sheet .c-day { grid-column: span 2; }
}

/* ---------- desktop: 880 dialog, ticket card left (report rows), one question right ---------- */
@media (min-width: 900px) {
  #sheet .sheet {
    width: 880px; padding: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: auto 1fr; align-content: start;
  }
  #sheet .sheet > * { grid-column: 2; }
  #sheet .sheet-top { padding: var(--ds-s8) var(--ds-s6) 0 var(--ds-s6); }
  #sheet .sheet-k { margin-bottom: var(--ds-s2); }
  #sheet .ds-h2 { font-size: 40px; }
  #sheet .form { margin: var(--ds-s6) var(--ds-s6) var(--ds-s6); }
  #sheet .field label { font-size: 19px; }

  #sheet .tix {
    grid-column: 1; grid-row: 1 / 3; margin: var(--ds-s4) 0 var(--ds-s4) var(--ds-s4); align-self: stretch;
    grid-template-rows: auto 1fr;
  }
  #sheet .tix-main { padding: var(--ds-s5) var(--ds-s5) var(--ds-s5); }
  #sheet .tix-for { margin-top: var(--ds-s6); }
  #sheet .tix-name { min-height: 44px; margin-top: var(--ds-s1); font-size: 34px; line-height: 44px; }
  /* stub = a lab-report table: label left, value right, hairline rows */
  #sheet .tix-stub { grid-template-columns: 1fr; gap: 0; align-content: start; padding: var(--ds-s2) var(--ds-s5) var(--ds-s5); }
  #sheet .c, #sheet .c-where, #sheet .c-spk {
    display: grid; grid-column: 1; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: var(--ds-s4);
    padding: var(--ds-s2) 0; border-bottom: 1px solid var(--ds-line);
  }
  #sheet .c-em { border-bottom: 0; }
  #sheet .c > span { font-size: var(--ds-fs-fine); }
  #sheet .c b { font-size: 16px; line-height: 24px; }
  #sheet .c b.is-todo { line-height: 22px; }
  #sheet .c-day b { font-size: 15px; font-stretch: 88%; }   /* event.js joins the two dates with no-break spaces */
  #sheet .logged .ds-stamp { font-size: 28px; }
}

/* ---------- reduced motion: final states only ---------- */
@media (prefers-reduced-motion: reduce) {
  #sheet .c b.ink-in { animation: none; }
  #sheet .dots i, #sheet .tix-meter i, #sheet .sheet.done .form { transition: none; }
}

/* v7 QA fix (CRO): the sheet must feel open in < 300ms. Shorter slide than the shared --ds-t3. */
#sheet .sheet { transition-duration: .24s; }