/* PORTED for /separation-agreement/ (分居協議書, #124) from public/components/da-parts.css - renamed only (da-/cb- -> sa-);
   the reference behaviour is the spec (WORK-ORDER.md "behaves exactly like its reference"). */
/* sa-parts.css: section 2 of /divorce-agreement/: 離婚協議書的六個部分 (#105; a copy of cb-situations.css).
   A copy of public/components/cu-factors.css (撫養權 s3, itself a copy of 贍養費 v4 s2, the precept
   "Process Orbit"), renamed cu- -> sa- (the inner cf- names kept), retargeted (WORK-ORDER.md row 3):
   - TAN ground #E8DCC3 (the live 撫養權 six factors): ink text, ink ruler + ticks, amber dot.
     Muted text rgba(16,32,27,.68) on tan (the contrast probe re-measures it).
   - SIX stops on the TAN ground; the pin is 4 screens tall, the 撫養權 six-factor height (cu-factors.css:69).
   - each step carries a one-line answer (.cf-sum), keyword chips (.cf-kp, desktop pinned + static only)
     and an optional link (.cf-go) under the body.
   1. DEFAULT = FINAL STATE. Without JS or under reduced motion sa-parts.js never adds .cf-armed /
      .is-pinned: title block, then the six steps stacked, each with its composed still.
   2. ONE WRITER PER PROPERTY (cu-factors.css header, unchanged). */

.sa .sa-parts {
  --cf-ease: cubic-bezier(0.08, 0.78, 0.56, 1);
  --cf-ink: #10201B;
  --cf-mute: rgba(16,32,27,.68);
  --cf-num-fs: clamp(48px, 4.4vw, 76px);
  --cf-row: calc(var(--cf-num-fs) * 2.2);
  position: relative; padding: 140px 0 0; background: var(--sa-sand); color: var(--cf-ink);
}
.sa .sa-parts .sa-label, .sa .sa-parts .sa-intro, .sa .sa-parts .sa-body { color: var(--cf-mute); }
.sa .sa-parts .h2 { margin: 12px 0 0; color: var(--cf-ink); }
/* the H2 may only break BETWEEN its two phrases, never inside one, at any width */
.sa .cf-ph { display: inline-block; white-space: nowrap; }

/* ================= the static reading (default, reduced motion, no JS) ================= */
.sa .cf-stage { width: min(var(--wrap), calc(100% - 2 * var(--pad))); margin-inline: auto; }
.sa .cf-dial, .sa .cf-art, .sa .cf-odo { display: none; }
.sa .cf-head { max-width: 640px; }
.sa .cf-copy { margin-top: 56px; }
.sa .cf-list { display: grid; gap: 72px; margin: 0; padding: 0; list-style: none; }
.sa .cf-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(28px, 4vw, 64px); align-content: center; }
.sa .cf-step > * { grid-column: 1; }
.sa .cf-count-row { grid-row: 2; }
.sa .cf-h3 { grid-row: 3; }
.sa .cf-text { grid-row: 4; }
/* the composed still: the three layers stacked in one box of the art's own ratio */
.sa .cf-still { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; position: relative; aspect-ratio: 4 / 3; }
.sa .cf-still img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.sa .cf-count-row { display: flex; align-items: center; gap: 16px; }
.sa .cf-num { font-size: 56px; color: var(--cf-ink); }
.sa .cf-count {
  display: inline-block; padding: 5px 12px 4px; border: 1px solid rgba(16,32,27,.34); border-radius: 999px;
  font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.3; letter-spacing: .08em; color: var(--cf-mute);
  white-space: nowrap;
}
.sa .cf-h3 { margin: 14px 0 0; color: var(--cf-ink); white-space: nowrap; }
.sa .cf-text { margin: 10px 0 0; max-width: 30em; text-wrap: pretty; }

/* the ask under the section (the wireframe's one line + button, never a 7th stop) */
.sa .cf-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; padding: 56px 0 120px; text-align: center; }
.sa .cf-ask-line { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--cf-mute); }

/* FIX 1 R6: with JS on and motion allowed (html.sa-js, set by an inline script in the page head before
   first layout) the six composed stills stay display:none, so their lazy images are never fetched, until
   sa-parts.js either pins the section (stills never needed) or chooses the static reading (.cf-static).
   Under reduced motion or with JS off html.sa-js is never set and the stills show as before. */
html.sa-js .sa-parts:not(.cf-static) .cf-still { display: none; }

/* ================= armed (JS on, motion allowed) ================= */
.sa .sa-parts.cf-armed { padding: 0; }
.sa .cf-pin.is-pinned { height: calc(var(--screen) * 4); }
.sa .is-pinned .cf-stage { position: sticky; top: 0; width: auto; height: var(--screen); margin: 0; overflow: hidden; }

.sa .is-pinned .cf-dial { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sa .cf-arc, .sa .cf-ticks { fill: none; stroke: rgba(16,32,27,.30); stroke-width: 1; }
.sa .cf-lit { stroke: var(--cf-ink); }
.sa .cf-brackets { fill: none; stroke: rgba(16,32,27,.55); stroke-width: 1; }
.sa .cf-dot { fill: #E9A93A; stroke: var(--cf-ink); stroke-width: 1; }
.sa .cf-cap { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .12em; fill: var(--cf-ink); dominant-baseline: central; }

.sa .is-pinned .cf-head { position: absolute; left: var(--cf-l); top: var(--cf-head-t); width: var(--cf-head-w); max-width: none; }
.sa .is-pinned .cf-head .sa-intro { margin-top: 12px; max-width: 34em; }

.sa .is-pinned .cf-copy { position: absolute; left: var(--cf-l); top: var(--cf-copy-t); width: var(--cf-col); margin: 0; display: grid; }
.sa .is-pinned .cf-odo {
  display: block; grid-area: 1 / 1; align-self: start; justify-self: start; height: var(--cf-row); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.sa .cf-odo-col { will-change: transform; }
.sa .cf-odo-col > span { display: block; height: var(--cf-row); line-height: var(--cf-row); font-size: var(--cf-num-fs); color: var(--cf-ink); white-space: nowrap; }
.sa .is-pinned .cf-list { grid-area: 1 / 1; display: grid; gap: 0; }
/* align-content:start is load-bearing (mt-s2.css): centred shorter steps sat 14px lower */
.sa .is-pinned .cf-step { grid-area: 1 / 1; display: block; align-content: start; visibility: hidden; }
.sa .is-pinned .cf-step.is-on { visibility: visible; }
.sa .is-pinned .cf-still, .sa .is-pinned .cf-num { display: none; }
.sa .is-pinned .cf-count-row { height: var(--cf-row); padding-left: calc(var(--cf-odo-w, 1.3em) + 18px); }
.sa .is-pinned .cf-h3 { margin-top: 2px; }

/* step change (precept one-shot): outgoing cut (no transition), incoming pill fades up 14px, then each
   rendered line slides up inside its own mask, +90ms per line (inline delay) */
.sa .is-pinned .cf-count { opacity: 0; transform: translateY(14px); transition: none; }
.sa .is-pinned .is-on .cf-count { opacity: 1; transform: none; transition: opacity .76s var(--cf-ease), transform .76s var(--cf-ease); }
.sa .cf-ln { display: block; overflow: hidden; }
.sa .cf-ln-i { display: block; }
.sa .is-pinned .cf-ln-i { transform: translateY(110%); transition: none; }
.sa .is-pinned .is-on .cf-ln-i { transform: none; transition: transform .76s var(--cf-ease); }

/* the art: right column (stacked layouts: between title and step text); a fitted box of the art's own
   ratio, pre-shrunk by the zoom so the zoomed art stays in its lane */
.sa .is-pinned .cf-art { display: block; position: absolute; left: var(--cf-art-l); top: var(--cf-art-t); width: var(--cf-art-w); height: var(--cf-art-h); }
.sa .cf-zoom { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
/* scene change is SCROLL-LINKED (sa-parts.js, from each scene's approach p = 1 - |u - k|): opacity
   smoothstep(p), drift 16px -> 0 / scale 1.02 -> 1, the lines' draw-in mask (fully drawn by p = .6),
   the amber bloom over the last 40%. Nothing here transitions those; values below = before frame 1. */
.sa .cf-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform-origin: 50% 50%; }
.sa .cf-scene > img, .sa .cf-amber-b, .sa .cf-amber-b > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.sa .cf-lines {
  -webkit-mask-image: linear-gradient(to bottom right, #000 45%, transparent 55%);
          mask-image: linear-gradient(to bottom right, #000 45%, transparent 55%);
  -webkit-mask-size: 300% 300%; mask-size: 300% 300%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 83% 83%; mask-position: 83% 83%;
}
.sa .cf-amber { opacity: 0; transform: scale(.85); will-change: transform, opacity; }
/* the amber breathes while a step is settled (.is-settled): opacity 1 <-> .9, scale 1 <-> 1.02, 3s, on
   the WRAPPER so it never shares a property with the bloom on the img inside it */
.sa .cf-scene.is-settled .cf-amber-b { animation: cf-breathe 3s ease-in-out infinite; }
@keyframes cf-breathe { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .9; transform: scale(1.02); } }

/* ================= phone (< 768): thin arc on the left edge, labels hidden ================= */
@media (max-width: 767px) {
  .sa .sa-parts { padding: 80px 0 0; --cf-num-fs: 36px; --cf-row: calc(var(--cf-num-fs) * 1.8); }
  .sa .cf-copy { margin-top: 36px; }
  .sa .cf-list { gap: 48px; }
  .sa .cf-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sa .cf-step > * { grid-row: auto; }
  .sa .cf-still { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 16px; }
  .sa .cf-num { font-size: 40px; }
  .sa .cf-cap { display: none; }
  .sa .sa-parts .sa-intro { font-size: 15px; line-height: 1.7; }
  .sa .cf-text { font-size: 15px; line-height: 1.7; }
  .sa .is-pinned .cf-count-row { padding-left: calc(var(--cf-odo-w, 1.3em) + 12px); }
  .sa .is-pinned .cf-head .sa-intro { margin-top: 8px; }
  .sa .is-pinned .cf-h3 { margin-top: 0; }
  .sa .is-pinned .cf-text { margin-top: 6px; }
  .sa .cf-ask { padding: 40px 0 80px; }
  .sa .cf-ask-line { font-size: 15px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .sa .sa-parts { --cf-num-fs: 32px; --cf-row: calc(var(--cf-num-fs) * 1.7); }
  .sa .sa-parts .sa-intro, .sa .cf-text { font-size: 14px; line-height: 1.6; }
  .sa .is-pinned .cf-head .sa-intro { margin-top: 6px; }
  .sa .sa-parts .h2 { margin-top: 6px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .sa .sa-parts { --cf-num-fs: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .sa .cf-scene, .sa .cf-lines, .sa .cf-amber, .sa .cf-count, .sa .cf-ln-i { transition: none !important; }
  .sa .cf-amber-b { animation: none !important; }
}

/* ================= step extras: the read-more link (the answer line + chip rules are unused here) ================= */

.sa .sa-parts .cf-step { grid-template-rows: 1fr auto auto auto auto auto auto 1fr; }
.sa .sa-parts .cf-sum { grid-row: 4; margin: 8px 0 0; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.5; color: #2F6B55; }
.sa .sa-parts .cf-text { grid-row: 5; }
.sa .sa-parts .cf-kp { grid-row: 6; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.sa .sa-parts .cf-kp li { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(16,32,27,.22); font-size: 13px; line-height: 1.5; color: var(--cf-ink); background: rgba(255,255,255,.45); }
.sa .sa-parts .cf-go { grid-row: 7; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--cf-ink); text-decoration: underline; text-decoration-color: rgba(16,32,27,.35); text-underline-offset: 5px; }
.sa .sa-parts .cf-go:hover { text-decoration-color: var(--amber); }
.sa .sa-parts .cf-go:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 3px; border-radius: 4px; }
.sa .sa-parts .cf-go-arr { display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.sa .sa-parts .cf-go:hover .cf-go-arr { transform: translateX(4px); }
.sa .sa-parts .h2 .cf-ph { display: inline-block; white-space: nowrap; }
.sa .is-pinned .cf-sum { margin-top: 4px; }
.sa .is-pinned .cf-kp { margin-top: 10px; }
.sa .is-pinned .cf-go { margin-top: 2px; }
/* the pinned step's chips and link fade in with the step, cut with it */
.sa .is-pinned .cf-step .cf-kp, .sa .is-pinned .cf-step .cf-go { opacity: 0; transform: translateY(10px); transition: none; }
.sa .is-pinned .cf-step.is-on .cf-kp, .sa .is-pinned .cf-step.is-on .cf-go { opacity: 1; transform: none; transition: opacity .6s var(--cf-ease) .3s, transform .6s var(--cf-ease) .3s; }
@media (max-width: 767px) {
  .sa .sa-parts .cf-step { grid-template-rows: none; }
  .sa .sa-parts .cf-sum { font-size: 16px; }
  /* the pinned phone stage has no room for the chips: they stay in the static reading only */
  .sa .is-pinned .cf-kp { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sa .cf-kp, .sa .cf-go { transition: none !important; } }

/* ---------- 離婚協議書 (#105): the two labelled texts per part (要寫甚麼 / 最常漏寫) + the seal line ---------- */
.sa .sa-parts .cf-pair { grid-row: 4; margin: 12px 0 0; max-width: 32em; }
.sa .sa-parts .cf-pair-miss { grid-row: 5; margin-top: 10px; padding-left: 14px; border-left: 3px solid #E9A93A; }
.sa .sa-parts .cf-go { grid-row: 6; }
.sa .sa-parts .cf-lab { margin: 0; font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .12em; color: #3E4A44; }
.sa .sa-parts .cf-pair .cf-text { margin: 4px 0 0; color: #33403A; }
.sa .is-pinned .cf-pair { margin-top: 8px; }
.sa .is-pinned .cf-step .cf-pair { opacity: 0; transform: translateY(10px); transition: none; }
.sa .is-pinned .cf-step.is-on .cf-pair { opacity: 1; transform: none; transition: opacity .6s var(--cf-ease) .2s, transform .6s var(--cf-ease) .2s; }
.sa .sa-parts .cf-seal { font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); color: var(--cf-ink); }
@media (max-width: 767px) { .sa .sa-parts .cf-pair, .sa .sa-parts .cf-pair-miss, .sa .sa-parts .cf-go { grid-row: auto; } }
@media (prefers-reduced-motion: reduce) { .sa .cf-pair { transition: none !important; opacity: 1 !important; transform: none !important; } }
/* the long WhatsApp label (按您的情況列出要寫的部分 · WhatsApp 我們) wraps inside the screen on a narrow phone */
@media (max-width: 480px) { .sa .sa-parts .cf-ask .btn { white-space: normal; height: auto; min-height: 48px; padding-block: 10px; text-align: center; max-width: 100%; line-height: 1.4; } }
/* #114 (round 2): the pinned phone stage. The two labelled blocks are this page's only addition to the 中港離婚
   copy, and they made the step text ~52px taller than the reference's, so at 473x844 the art box fell 6px short of
   the shared R6 minimum and the section fell back to the static reading where 中港離婚 pins. Only the blocks' own
   spacing is tightened here (the reference's type, line-heights and --cf-row are untouched); the static reading and
   every desktop size keep the values above. lab/probe-sa-parts.mjs check P holds the mode equal to 中港離婚's. */
@media (max-width: 767px) {
  .sa .is-pinned .cf-pair { margin-top: 4px; }
  .sa .sa-parts .is-pinned .cf-pair .cf-text { margin-top: 2px; }
  .sa .sa-parts .is-pinned .cf-lab { font-size: 12px; line-height: 1.25; }
  .sa .sa-parts .is-pinned .cf-pair-miss { padding-left: 12px; }
}