/* Frozen shoulder (S06), the condition template. The signature is the readout: the first visit drawn, today measured. */

/* ---------- Trail and head. ---------- */
.fs-trail { padding: 40px var(--pad) 0; background: var(--color-surface); }
.fs-crumbs { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 18px; color: var(--color-muted-foreground); }
.fs-crumbs li { display: flex; align-items: center; gap: 10px; }
.fs-crumbs svg { flex-shrink: 0; }
.fs-crumbs [aria-current] { color: var(--color-foreground); font-weight: 600; }
.fs-back { display: none; }
@media (min-width: 1024px) {
  .fs-head { padding-top: 56px; }
  .fs-head .page-head__words { max-width: 820px; }
  .fs-head .page-head__aside { width: 380px; }
}
@media (max-width: 1023px) {
  .fs-trail { padding-top: 32px; }
  .fs-head { padding-top: 40px; }
}
@media (hover: hover) and (pointer: fine) {
  .fs-crumbs a:hover { text-decoration: underline 1px; text-underline-position: from-font; }
}

/* ---------- The readout: first visit on the left, today on the right. ---------- */
.fs-readout { display: flex; gap: 64px; padding: 0 var(--pad) 96px; background: var(--color-surface); }
.fs-fig { width: 600px; flex-shrink: 0; align-self: flex-start; background: #FFFFFF; }
.fs-fig > img:first-child { width: 100%; height: auto; }
.fs-fig__reading {
  position: absolute; left: 49.67%; top: 34.33%;
  font-family: var(--font-mono); font-size: var(--text-body); line-height: 24px; font-weight: 500; color: var(--color-primary);
}
.fs-fig > .fs-fig__circle, .fs-fig > .fs-fig__arrow { position: absolute; inset: auto; max-width: none; }
.fs-fig > .fs-fig__circle { left: 46.62%; top: 32.3%; width: 12.83%; height: 8.1%; }
.fs-fig > .fs-fig__arrow { left: 38.67%; top: 24.02%; width: 9.6%; height: 10.67%; }
.fs-fig__pen { position: absolute; left: 60%; top: 33.67%; white-space: nowrap; }
.fs-fig__cap { position: absolute; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 12px; }
.fs-fig__cap .pill--example { background: #FFFFFF; border: 1px solid var(--color-border); }
/* The arrow runs from the circle back to the shoulder, so it is revealed from its far corner. */
.js .draw .fs-clip-back { clip-path: inset(100% 0 0 100%); }

.fs-today { width: 600px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; padding-top: 40px; }
.fs-today__intro { display: flex; flex-direction: column; gap: 12px; }

/* The gauge keeps the board's 600 by 380 drawing and scales with its column; labels stay 12. */
.fs-gauge { position: relative; width: 100%; max-width: 600px; aspect-ratio: 600 / 380; background: var(--color-surface); container-type: inline-size; }
.fs-gauge__arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-gauge__bar { display: none; }
.fs-gauge__reading {
  position: absolute; left: 72%; top: 31.58%; display: flex;
  font-family: var(--font-mono); font-size: min(64px, 10.67cqw); line-height: 1.03; letter-spacing: -0.02em; font-weight: 500;
  color: var(--color-primary); font-variant-numeric: tabular-nums;
}
.fs-gauge__reading span { font-weight: 400; margin-left: -0.1em; }
.fs-gauge__note { position: absolute; left: 72%; top: 51.58%; width: 25%; }
.fs-gauge__key { position: absolute; left: 4%; top: 91.05%; white-space: nowrap; }

@media (max-width: 1279px) {
  .fs-readout { gap: 48px; }
  .fs-fig, .fs-today { flex: 1 1 0; width: auto; min-width: 0; }
  .fs-fig { margin-bottom: 42px; }
  .fs-fig__cap { left: 0; right: auto; bottom: auto; top: calc(100% + 12px); }
  .fs-fig__pen { font-size: 20px; line-height: 24px; }
  .fs-gauge__note { width: auto; right: 0; }
}
@media (max-width: 1023px) {
  .fs-readout { flex-direction: column; gap: 32px; padding-bottom: 64px; }
  .fs-fig { flex: none; width: 420px; max-width: 100%; }
  .fs-today { flex: none; width: 100%; max-width: 600px; padding-top: 0; }
  /* At 420 and below the pen keeps only its words, as on the S95 phone, so nothing collides. */
  .fs-fig > .fs-fig__circle, .fs-fig > .fs-fig__arrow { display: none; }
  .fs-fig__reading { left: 57.5%; top: 26.8%; padding: 2px 6px; background: #FFFFFF; line-height: 22px; font-weight: 400; }
  .fs-fig__pen { left: auto; right: 2px; top: 38%; font-size: 20px; line-height: 24px; }
}

/* Below 768: the drawing fills the column, the pen keeps its words, today becomes the plaster card from S95. */
@media (max-width: 767px) {
  .fs-trail { padding: 0; }
  .fs-crumbs { display: none; }
  .fs-back { display: flex; align-items: center; height: 44px; padding: 0 var(--gutter); border-bottom: 1px solid var(--color-border); font-size: 15px; line-height: 18px; }
  .fs-back a { white-space: nowrap; }
  .fs-back svg { display: inline-block; width: 8px; height: 12px; margin-right: 8px; vertical-align: -1px; }
  .fs-back .t-label { margin-left: 4px; }
  .fs-head { padding-top: 32px; padding-bottom: 40px; }

  .fs-readout { gap: 0; padding-bottom: 48px; }
  .fs-fig { width: 100%; margin-bottom: 42px; overflow: visible; }
  .fs-fig__cap { left: 0; right: 0; bottom: auto; top: calc(100% + 12px); justify-content: space-between; }
  .fs-fig__cap .pill--example { height: 24px; padding: 0 9px; font-size: 12px; border: 0; background: var(--color-background); }

  .fs-today { gap: 10px; margin-top: 16px; padding: 20px 16px; border-radius: 16px; background: var(--color-background); }
  .fs-today__intro, .fs-gauge { display: contents; }
  .fs-today__label { order: 1; color: var(--color-foreground); }
  .fs-gauge__reading { order: 2; position: static; font-size: 64px; line-height: 66px; }
  .fs-gauge__arc { display: none; }
  .fs-gauge__bar { display: block; order: 3; width: 100%; max-width: 326px; height: auto; }
  .fs-gauge__note { order: 4; position: static; width: auto; line-height: 16px; }
  .fs-today__text { order: 5; color: var(--color-muted-foreground); }
  .fs-gauge__key { order: 6; position: static; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .js .draw .fs-clip-back { clip-path: none; }
}

/* ---------- Where it starts, how we look. ---------- */
.fs-cause { display: flex; gap: 96px; }
.fs-cause__col { display: flex; flex-direction: column; gap: 20px; }
.fs-cause__col--starts { width: 520px; flex-shrink: 0; }
.fs-cause__col--look { flex: 1; min-width: 0; }
.fs-list, .fs-numbers { margin-top: 8px; }
.fs-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-border); }
.fs-list li:first-child { border-top-color: var(--color-foreground); }
.fs-list li:last-child { border-bottom: 1px solid var(--color-border); }
.fs-numbers > div { display: flex; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--color-border); }
.fs-numbers > div:first-child { border-top-color: var(--color-foreground); }
.fs-numbers > div:last-child { border-bottom: 1px solid var(--color-border); }
.fs-numbers dt { flex: 1; line-height: 27px; color: var(--color-foreground); }
.fs-numbers dd { width: 120px; flex-shrink: 0; text-align: right; font-family: var(--font-mono); font-size: var(--text-body); line-height: 27px; text-transform: uppercase; }
.fs-numbers__foot { display: flex; align-items: center; gap: 12px; }

@media (max-width: 1279px) {
  .fs-cause { gap: 56px; }
  .fs-cause__col--starts { width: auto; flex: 1; min-width: 0; }
}
@media (max-width: 1023px) {
  .fs-cause { flex-direction: column; gap: 48px; }
  .fs-cause__col { max-width: 640px; }
}
@media (max-width: 767px) {
  .fs-cause { gap: 32px; }
  .fs-cause__col { gap: 12px; }
  .fs-list, .fs-numbers { margin-top: 0; }
  .fs-list li { padding: 12px 0; gap: 12px; }
  .fs-list .pill { height: 22px; padding: 0 8px; font-size: 12px; }
  .fs-numbers > div { justify-content: space-between; padding: 12px 0; }
  .fs-numbers dt { line-height: var(--leading-label); }
  .fs-numbers dd { width: auto; font-size: 22px; line-height: 28px; color: var(--color-primary); }
  .fs-numbers__foot { justify-content: space-between; }
  .fs-numbers__foot .pill { order: 2; height: 24px; padding: 0 9px; font-size: 12px; }
}

/* ---------- Plan, home, fee. ---------- */
.fs-plan { display: flex; gap: 64px; }
.fs-plan__col { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.fs-plan__col--fee { flex: 1; width: auto; }
.fs-plan__btn { align-self: flex-start; margin-top: 6px; }

@media (max-width: 1279px) {
  .fs-plan { gap: 48px; }
  .fs-plan__col { flex: 1; width: auto; min-width: 0; }
}
@media (max-width: 1023px) {
  .fs-plan { flex-direction: column; gap: 28px; }
  .fs-plan__col { max-width: 640px; gap: 8px; padding-top: 14px; border-top: 1px solid var(--color-foreground); }
  .fs-plan__col .t-title { font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
  .fs-plan__btn { margin-top: 4px; }
}

/* The 44 section heads keep the board's display tracking. */
@media (min-width: 768px) {
  .fs-cause .t-title, .fs-plan .t-title { letter-spacing: var(--tracking-display); }
}