/* The fit session, shaped like a chat on the web.

   Start: a greeting and a composer in the middle of the screen. Then a
   thread of messages with the composer pinned to the bottom. Quick-reply
   pills sit above the composer. The spec sheet is the artifact: docked on
   the right from 900px, a sheet that slides up on a phone.

   Reuses _index.html's variables (--ink, --soft, --line, --bg, --card,
   --radius, --ease, --sans). */

#screen-session.screen-page {
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100dvh;
}

.fs-shell { width: 100%; min-height: 100dvh; position: relative; }

/* ---------- chat column ---------- */
.fs-main {
  max-width: 680px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(60px + env(safe-area-inset-top)) 16px 0;
}
.fs-shell[data-thread="empty"] .fs-main { justify-content: flex-end; }

.fs-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(to bottom, var(--bg) 60%, rgba(250, 248, 245, 0));
  pointer-events: none;
}
.fs-top > * { pointer-events: auto; }
.fs-logo { height: 14px; width: auto; display: block; }

.fs-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px 7px 10px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fs-spec-pill .n { color: var(--soft); font-variant-numeric: tabular-nums; }
.fs-spec-pill .n:empty { display: none; }
.fs-spec-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: 0.3; }
.fs-shell[data-busy="1"] .fs-spec-pill-dot { opacity: 1; animation: fsPulse 1.1s ease-in-out infinite; }
.fs-spec-pill.is-new .fs-spec-pill-dot { opacity: 1; animation: fsPulse 1.1s ease-in-out 3; }
@keyframes fsPulse { 0%, 100% { transform: scale(0.7); opacity: 0.3; } 50% { transform: scale(1); opacity: 1; } }

/* greeting */
.fs-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.fs-shell[data-thread="empty"] .fs-body { justify-content: center; }
.fs-hello { text-align: center; padding: 0 8px 22px; }
.fs-shell[data-thread="live"] .fs-hello { display: none; }
.fs-hello h1 {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
  text-wrap: balance;
}
.fs-hello p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin: 0 auto; max-width: 380px; text-wrap: pretty; }

/* thread */
.fs-thread { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 14px; }
.fs-msg { animation: fsIn 0.4s var(--ease); max-width: 100%; }
.fs-msg.user {
  align-self: flex-end;
  max-width: 85%;
  background: #EDE9E3;
  color: var(--ink);
  border-radius: 18px 18px 4px 18px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
}
.fs-msg.assistant {
  align-self: stretch;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  padding: 2px 0 2px 18px;
  position: relative;
  text-wrap: pretty;
}
.fs-msg.assistant::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.fs-msg.assistant.is-typing { color: var(--soft); }
.fs-msg.assistant.is-typing::before { animation: fsPulse 1.1s ease-in-out infinite; }
.fs-msg.assistant .fs-note { font-size: 13px; color: var(--soft); margin: 6px 0 0; line-height: 1.5; }
.fs-msg.assistant p { margin: 0 0 8px; }
.fs-msg.assistant p:last-child { margin-bottom: 0; }
.fs-dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.fs-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--soft); animation: fsPulse 1.2s ease-in-out infinite; }
.fs-dots span:nth-child(2) { animation-delay: 0.15s; }
.fs-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes fsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* cards inside assistant messages (consent, stats, setup, offers, review) */
.fs-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}
.fs-card.is-primary { border-color: var(--ink); }
.fs-card .btn { padding: 13px 24px; font-size: 14px; margin-top: 2px; }
.fs-card .btn:disabled { opacity: 0.32 !important; cursor: default; transform: none; box-shadow: none; }
.fs-card .btn.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.fs-card .btn.btn-ghost:hover { background: var(--bg-warm); box-shadow: none; transform: none; }
.fs-card .row2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.fs-card .name { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.fs-card .price { font-size: 15px; font-weight: 500; white-space: nowrap; }
.fs-card .desc { font-size: 13px; color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; margin-top: -4px; }
.fs-card .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.fs-card .pics img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; background: var(--bg-warm); }
.fs-card.is-done { opacity: 0.55; pointer-events: none; }

.fs-field { display: block; }
.fs-field span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 600;
  margin: 0 0 5px 14px;
}
.fs-field input {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;   /* 16px keeps iOS from zooming the page on focus */
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fs-field input:focus { outline: none; border-color: var(--ink); }
.fs-field-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
.fs-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); line-height: 1.5; padding: 0 4px; }
.fs-check input { margin-top: 3px; accent-color: var(--ink); width: 16px; height: 16px; flex: 0 0 auto; }
.fs-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.fs-steps { margin: 0; padding: 0 0 0 20px; font-size: 14px; color: var(--ink); line-height: 1.55; display: grid; gap: 8px; }
.fs-steps li::marker { color: var(--soft); font-size: 12px; }

/* the review card */
.fs-review .fs-hero { text-align: center; padding: 2px 0 14px; border-bottom: 1px solid var(--line-soft); }
.fs-review .fs-hero .lab { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); font-weight: 600; }
.fs-review .fs-hero .size { font-size: 44px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; margin: 4px 0 8px; }
.fs-review .fs-hero .head { font-size: 15px; color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; }
.fs-sec { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.fs-sec:last-of-type { border-bottom: 0; }
.fs-sec .t { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 6px; }
.fs-sec .t b { color: var(--ink); letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 12px; }
.fs-sec .x { font-size: 12.5px; color: var(--soft); margin-bottom: 6px; line-height: 1.5; }
.fs-sec .n { font-size: 14px; color: var(--ink); line-height: 1.55; padding: 2px 0 2px 14px; position: relative; text-wrap: pretty; }
.fs-sec .n::before { content: ''; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: 0.3; }
.fs-math { font-size: 14px; line-height: 1.8; color: var(--ink-soft); display: grid; grid-template-columns: 1fr auto; gap: 0 16px; font-variant-numeric: tabular-nums; }
.fs-math .r { color: var(--ink); text-align: right; }
.fs-math .eq { font-weight: 600; color: var(--ink); }
.fs-order { background: var(--bg-warm); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.fs-order .lab { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); margin-bottom: 3px; font-weight: 600; }
.fs-review .fs-next { font-size: 14px; color: var(--ink-soft); line-height: 1.6; text-wrap: pretty; }
.fs-review .fs-sent { font-size: 12.5px; color: var(--soft); text-align: center; line-height: 1.6; }
.fs-review .btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.fs-review .btn-secondary:hover { background: var(--bg-warm); box-shadow: none; transform: none; }

/* ---------- composer ---------- */
.fs-composer-wrap {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 78%, rgba(250, 248, 245, 0));
}
.fs-shell[data-thread="empty"] .fs-fine { display: block; }
.fs-shell[data-stage="done"] .fs-composer-wrap { display: none; }

/* Question + option chips render inside the fitter's thread message. */
.fs-msg .fs-ask-q { font-weight: 600; margin-top: 2px; }
.fs-ask-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.fs-chip {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  letter-spacing: -0.01em;
  text-align: left;
}
.fs-chip:hover { border-color: var(--ink); }
.fs-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fs-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.fs-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 6px 6px 6px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: border-color 0.2s ease, opacity 0.3s ease;
}
.fs-composer:focus-within { border-color: var(--ink); }
.fs-composer.is-disabled { opacity: 0.55; }
.fs-composer input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 16px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fs-composer input:focus { outline: none; }
.fs-composer input::placeholder { color: var(--soft-light); }
.fs-send {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s var(--ease);
}
.fs-send:hover { transform: translateY(-1px); }
.fs-send:disabled { opacity: 0.25; cursor: default; transform: none; }
.fs-fine { font-size: 11.5px; color: var(--soft-light); text-align: center; margin: 10px 0 0; line-height: 1.5; display: none; }
.fs-error { font-size: 13px; color: #9B3B2F; margin-top: 8px; line-height: 1.5; padding: 0 6px; }
.fs-error:empty { display: none; }
.fs-error button, .fs-retry {
  background: none; border: 0; color: inherit; font-family: var(--sans); font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 0 0 4px;
}

/* ---------- the spec panel (docked artifact) ---------- */
.fs-spec-panel {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 60;
  height: 54dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  transform: translateY(-105%);
  transition: transform 0.45s var(--ease);
}
.fs-shell[data-spec="open"] .fs-spec-panel { transform: none; }
.fs-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(26, 26, 26, 0.28);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  display: none;
}
.fs-shell[data-spec="open"] .fs-scrim { opacity: 1; pointer-events: auto; }

.fs-spec { padding: 14px 18px 12px; }
.fs-spec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.fs-spec-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.fs-spec-meta { flex: 1; font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-align: right; }
.fs-spec-close {
  background: none; border: 0; font-size: 22px; line-height: 1; color: var(--soft);
  cursor: pointer; padding: 0 0 0 6px; align-self: center;
}

/* the scan: a drawer. It shows at full size when it lands, then rolls up
   into the strip; the strip stays and a tap reopens it. */
.fs-scan { position: relative; border-bottom: 1px solid var(--line-soft); }
.fs-scan-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 2px; margin: 0;
  background: none; border: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.fs-scan-title { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.fs-scan-chev { flex: none; font-size: 11px; color: var(--soft); transform: rotate(0deg); transition: transform 0.25s ease; }
.fs-scan[data-roll="open"] .fs-scan-chev { transform: rotate(180deg); }
.fs-scan-body {
  max-height: 480px; opacity: 1; overflow: hidden;
  transition: max-height 0.32s ease, opacity 0.24s ease;
}
.fs-scan[data-roll="rolled"] .fs-scan-body { max-height: 0; opacity: 0; }
.fs-scan-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(180deg, #FBFAF8 0%, #F2EFEA 100%);
  cursor: grab;
}
.fs-scan-frame:active { cursor: grabbing; }
.fs-scan-frame canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.fs-scan-frame canvas[hidden] { display: none; }
.fs-scan[data-state="empty"] .fs-scan-frame { border: 1px dashed rgba(26, 26, 26, 0.22); background: transparent; cursor: default; }
.fs-scan-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center;
  font-size: 12.5px; color: var(--soft); line-height: 1.5;
}
.fs-scan[data-state="measuring"] .fs-scan-empty::after {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); margin-left: 6px; animation: fsPulse 1.1s ease-in-out infinite;
}
.fs-scan[data-state="ready"] .fs-scan-empty { display: none; }
.fs-scan-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: 8px; padding-bottom: 8px; }
.fs-scan-hint { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); font-weight: 600; white-space: nowrap; }
.fs-scan:not([data-state="ready"]) .fs-scan-hint { visibility: hidden; }
.fs-scan-note { font-size: 11.5px; color: var(--soft); line-height: 1.5; text-align: right; text-wrap: pretty; }

.fs-spec-group { padding: 9px 0 5px; border-bottom: 1px solid var(--line-soft); }
.fs-spec-group:last-of-type { border-bottom: 0; }
.fs-spec-group .g {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft-light);
  font-weight: 600;
  margin-bottom: 3px;
}
.fs-spec-bra { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 2px 0 5px; }
.fs-spec-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 14px;
  min-height: 27px;
}
.fs-spec-row .k { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }
.fs-spec-row .v {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  text-wrap: pretty;
  letter-spacing: -0.01em;
}
.fs-spec-row .v.is-blank {
  align-self: center;
  height: 0;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.22);
  color: transparent;
  overflow: hidden;
}
.fs-spec-row .d {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink);
  background: var(--bg-warm);
  border-radius: 999px;
  padding: 3px 8px;
}
.fs-spec-row .d:empty { display: none; }
.fs-spec-row.is-key { padding-top: 7px; }
.fs-spec-row.is-key .v { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.fs-spec-row[data-status="measuring"] .k { color: var(--ink); }
.fs-spec-row[data-status="measuring"] .k::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink);
  margin-left: 6px;
  vertical-align: middle;
  animation: fsPulse 1.1s ease-in-out infinite;
}
.fs-spec-foot {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft-light);
  text-align: right;
  padding: 10px 0 2px;
}

/* ---------- wide screens: the spec docks on the right ---------- */
@media (min-width: 900px) {
  body:has(.fs-shell) {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .fs-shell { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); height: 100dvh; min-height: 0; overflow: hidden; }
  .fs-main { min-height: 0; height: auto; padding-bottom: 0; max-width: 720px; padding-left: 40px; padding-right: 40px; }
  .fs-body { justify-content: flex-start; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .fs-shell[data-thread="empty"] .fs-hello { margin-top: auto; }
  .fs-shell[data-thread="empty"] .fs-thread { margin-bottom: auto; }
  .fs-top { right: 400px; }
  .fs-spec-panel {
    position: sticky;
    top: 0;
    height: 100dvh;
    max-height: none;
    transform: none;
    border-radius: 0;
    border-left: 1px solid var(--line-soft);
    box-shadow: none;
    background: var(--bg-warm);
    padding: 24px;
  }
  .fs-spec { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); }
  .fs-shell[data-spec="closed"] { grid-template-columns: minmax(0, 1fr); }
  .fs-shell[data-spec="closed"] .fs-spec-panel { display: none; }
  .fs-shell[data-spec="closed"] .fs-top { right: 40px; }
  .fs-scrim { display: none; }
  .fs-hello h1 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-msg { animation: none; }
}

/* ---------- mobile: fixed frame, chat-app style ----------
   The page itself never scrolls. The thread scrolls inside its own pane,
   the composer stays pinned at the bottom, and the keyboard only shrinks
   the pane. Nothing on screen moves when a message lands or the spec opens. */
@media (max-width: 899.98px) {
  body:has(.fs-shell) {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .fs-shell {
    height: var(--fs-vvh, 100dvh);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .fs-main {
    flex: 1;
    min-height: 0;
    height: auto;
    padding-bottom: 0;
  }
  .fs-body {
    justify-content: flex-start;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .fs-shell[data-thread="empty"] .fs-body { justify-content: flex-start; }
  .fs-shell[data-thread="empty"] .fs-hello { margin-top: auto; }
  .fs-shell[data-thread="empty"] .fs-thread { margin-bottom: auto; }
  .fs-composer-wrap { position: static; }

  /* post-scan: less on screen at once. The body model keeps its spot but
     gets out of the text's way, the reassurance note goes, and the rows
     tighten so the spec reads like a sheet, not a report. */
  .fs-scan[data-state="ready"] .fs-scan-frame { height: 150px; aspect-ratio: auto; }
  .fs-scan-note { display: none; }
  .fs-spec-row { min-height: 24px; padding: 3px 0; font-size: 13px; }
  .fs-spec-group { padding: 7px 0 4px; }
  .fs-spec-foot { padding: 6px 0 0; }

  /* The spec is a comment sheet, not a panel: the chat stays fullscreen as
     the reel, and the spec slides up over it from the bottom edge when
     asked for and swipes back down when done. No scrim: the conversation
     stays bright behind the sheet. */
  .fs-spec-panel {
    top: auto;
    bottom: 0;
    height: auto;
    max-height: 76dvh;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.14);
    transform: translateY(105%);
    padding-bottom: env(safe-area-inset-bottom);
    /* Comment-sheet timing: quick out, no slow drift. */
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .fs-shell[data-spec="open"] .fs-spec-panel { transform: none; }
  .fs-scrim { display: none; }
  .fs-spec { padding-top: 6px; }
  .fs-spec-head {
    position: relative;
    padding-top: 12px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .fs-spec-head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-soft);
  }
}