/* Foreign Account, on the case study system.
   Everything shared comes from ../case-study.css (see DESIGN.md). This
   file holds only this page's one-offs:
     - the hero pairing: the shipped locked screen beside what one bound
       card unlocks (set from the flow's copy; no unlocked-Home screenshot
       exists in the repo)
     - the arrival as two journeys, the old one long and muted
     - the padlock on the flow track that opens as the card step passes
       (driven by foreign-account.js)
     - the field-notes log and the launch gallery with its empty slot
     - the growth layout inside the climax band */

/* ---------- hero: one frame, two states, the page's own gate between ----------
   Locked phone | dashed track, padlock, ink track | the five things the
   real Home unlocks, spread over the phone screen's height so both states
   share one frame. The gate is the same device the flow chapter animates;
   here it is drawn once, open, as the thesis. */

.cs-hero--fa { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.fa-states {
  display: grid;
  grid-template-columns: auto clamp(80px, 7vw, 100px) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "l1 . ."
    "phone gate list"
    "cap cap cap";
  align-items: stretch;
  justify-content: start;
}
.fa-states > figcaption { grid-area: cap; max-width: 34rem; }

.fa-state__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.fa-states__l1 { grid-area: l1; }
.fa-states__l2 { margin-bottom: 18px; }

.fa-lock {
  flex: none;
  width: 14px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the same render and crop the home page's folder flies in from */
.fa-phone {
  grid-area: phone;
  position: relative;
  height: var(--cs-visual-h);
  width: calc(var(--cs-visual-h) * 394 / 645);
  overflow: hidden;
}
.fa-phone img {
  position: absolute;
  left: -54.8%;
  top: -4.3%;
  width: 209.6%;
  height: 114.4%;
  max-width: none;
  object-fit: cover;
}

/* the gate: dashed (locked) into the padlock, solid ink out of it */
.fa-states__gate {
  grid-area: gate;
  position: relative;
  align-self: center;
  height: 86px;
}
.fa-states__track {
  position: absolute;
  left: -10px;
  right: 14px;
  top: 25px;
  height: 4px;
  display: flex;
  gap: 36px;
}
.fa-states__dash,
.fa-states__ink { flex: 1; height: 4px; border-radius: 4px; }
.fa-states__dash { background: repeating-linear-gradient(90deg, var(--stroke) 0 7px, transparent 7px 12px); }
.fa-states__ink { background: var(--ink); }
.fa-states__lock {
  position: absolute;
  left: calc(50% - 7px);
  top: 6px;
  width: 30px;
  height: 36px;
  transform: translateX(-50%);
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fa-states__key {
  position: absolute;
  left: calc(50% - 7px);
  top: 54px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}

/* what unlocks: large type, no card, spaced over the phone screen */
.fa-states__open { grid-area: list; align-self: center; }
.fa-states__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.fa-states__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--cs-type-quote);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* bare Tabler marks, the icon set the old page already used; no tile */
.fa-states__icon,
.fa-goal__icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fa-states__icon { width: 1em; height: 1em; margin-top: 0.08em; }

/* ---------- arrival: the old journey against the new one ---------- */

.fa-arrival { margin: 8px 0 56px; }
.fa-arrival .cs-journey { margin: 0 0 40px; }
.fa-arrival__label {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
}
.fa-arrival__new::before { right: calc(25% + 14px); background: var(--ink); }
/* the old journey reads muted, not faint: Faint Ink is for display sizes only */
.fa-arrival .cs-journey--old .cs-step__title { color: var(--ink-muted); }
/* "Read the story" scrolls down the page, so it carries a down arrow, not a play glyph */
.fa-cta svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fa-arrival > figcaption {
  font-size: var(--cs-type-label);
  font-weight: 600;
  color: var(--ink);
}

/* goals grid: three rows per goal (title, body, stub) */
.fa-goals .cs-finding { grid-row: span 3; }
.fa-goals .cs-finding .cs-finding__body { padding-bottom: 24px; }
.fa-goals h3 { display: grid; gap: 16px; justify-items: start; }
.fa-goal__icon { width: 30px; height: 30px; color: var(--ink); }

/* each stub IS the flow step that answers the goal: its number in the
   journey's own display face, and a link that jumps to that step */
.fa-solved {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 22px;
  align-items: center;
}
.fa-solved__num {
  grid-row: span 2;
  font-family: "Tanker", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: var(--cs-type-seq);
  line-height: 0.9;
  letter-spacing: 0.012em;
  color: var(--ink);
}
.cs-finding__implication .fa-solved__link {
  justify-self: start;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.cs-finding__implication .fa-solved__link:hover { text-decoration-thickness: 2.5px; }
.fa-solved p { grid-column: 2; }

/* the stubs jump to these; clear the sticky nav when they land */
.fa-journey .cs-step { scroll-margin-top: 140px; }

.cs-chapter > .fa-owner { margin-top: 44px; }

/* the welcome line, kept in Indonesian on purpose */
.cs-chapter > .fa-welcome {
  margin: 8px 0 36px;
  font-size: var(--cs-type-pull);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

/* ---------- the flow, and the gate that opens ---------- */

.fa-journey { grid-template-columns: 1fr 1.7fr 1fr 1fr 1fr; }
.fa-journey .cs-frame { max-width: 230px; }

.fa-card-step { position: relative; }
.fa-gate { position: absolute; inset: 0 auto auto 0; width: 100%; pointer-events: none; }

/* the unlocked stretch of track, steps 3 to 5, in ink */
.fa-gate__lane {
  position: absolute;
  top: 28px;
  left: 0;
  width: calc(300% + 36px - 4px);
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ink);
}
/* while locked, a dashed cover sits over that stretch */
.fa-gate__cover {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--stroke) 0 10px, var(--bg) 10px 17px);
  transform: translateX(101%);
}

.fa-gate__lock {
  position: absolute;
  top: 14px;
  left: -40px;
  width: 30px;
  height: 32px;
  padding: 4px 6px;
  background: var(--bg);
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fa-lock__shackle { transform-box: fill-box; transform-origin: 80% 100%; }
/* open by default: no JS and reduced motion both show the unlocked flow */
.fa-gate__lock .fa-lock__shackle { transform: translateY(-3px) rotate(-14deg); }

.fa-flow.is-locked .fa-gate__cover { transform: translateX(0); }
.fa-flow.is-locked .fa-gate__lock .fa-lock__shackle { transform: none; }

/* the page's one motion: under 600ms, transform only */
@media (prefers-reduced-motion: no-preference) {
  .fa-gate__cover { transition: transform 460ms cubic-bezier(0.2, 0.75, 0.2, 1) 80ms; }
  .fa-gate__lock .fa-lock__shackle { transition: transform 300ms cubic-bezier(0.2, 0.75, 0.2, 1); }
}

/* ---------- field notes ---------- */

.fa-log {
  list-style: none;
  margin: 8px 0 0;
  padding: 18px 40px;
  border-radius: var(--cs-radius);
  background: var(--cs-surface-deep);
}
.fa-log__entry {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 32px;
  padding: 26px 0;
}
.fa-log__entry + .fa-log__entry { padding-top: 10px; }
.cs-chapter .fa-log__date {
  margin: 2px 0 0;
  font-size: var(--cs-type-label);
  font-weight: 700;
  color: var(--ink);
}
.cs-chapter .fa-log__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.cs-chapter .fa-log__body p:not(.fa-log__title) {
  max-width: 34rem;
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.7;
}

/* two launch photos at the size they had as two of three columns */
.fa-launch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc((100% - 2 * var(--cs-grid-gap)) / 3 * 2 + var(--cs-grid-gap));
  gap: var(--cs-grid-gap);
  margin: var(--cs-block-gap) 0 0;
  align-items: stretch;
}
.fa-launch .cs-frame { display: flex; flex-direction: column; justify-content: space-between; }

/* ---------- climax: growth, context, the quote ---------- */

.fa-growth { grid-column: 1 / -1; margin: 64px 0 0; }
.fa-growth .cs-bars { max-width: 720px; }

.fa-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: 720px;
  margin: 48px 0 0;
}
.fa-context dt {
  font-family: "Tanker", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: var(--cs-type-metric-from);
  line-height: 0.86;
  letter-spacing: 0.012em;
  color: var(--bg);
}
.fa-context dd { margin: 10px 0 0; font-size: var(--cs-type-label); color: var(--cs-inv-muted); }

.cs-climax .fa-pull { grid-column: 1 / -1; margin: 80px 0 56px; }

/* view transition: the home folder flies into the locked phone; the
   facts-line project name matches the folder title */
@media (prefers-reduced-motion: no-preference) {
  img[data-project-transition="foreign-account"] { view-transition-name: vt-hero-foreign; }
  .foreign-account-page .cs-facts__project { view-transition-name: vt-title-foreign; }
  .foreign-account-page .cs-hero__pitch { view-transition-name: vt-sub-foreign; }
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .fa-journey { grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr; gap: 14px; }
  .fa-gate__lane { width: calc(300% + 28px - 4px); }
}

@media (max-width: 1023px) {
  .cs-hero--fa { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .fa-states { --cs-visual-h: 300px; grid-template-columns: auto 62px minmax(0, 1fr); }
  .fa-states__gate { height: 70px; }
  .fa-states__track { gap: 28px; left: -4px; right: 8px; top: 19px; }
  .fa-states__lock { width: 22px; height: 27px; left: calc(50% - 4px); }
  .fa-states__key { top: 44px; left: calc(50% - 4px); font-size: 13px; }
  .fa-states__l2 { margin-bottom: 12px; }
  .fa-states__list { gap: 8px; }
  .fa-states__list li { font-size: 17px; gap: 8px; }
  .fa-goal__icon { width: 26px; height: 26px; }
  .fa-solved { column-gap: 16px; }

  .fa-arrival__new::before { right: auto; bottom: calc(25% + 8px); }

  .fa-journey { grid-template-columns: 1fr; }
  .fa-journey .cs-frame { max-width: 240px; }
  /* vertical track: the lane would need step heights it cannot know,
     so the lock alone marks the gate between steps 2 and 3 */
  .fa-gate__lane { display: none; }
  .fa-gate__lock { top: -30px; left: 2px; }

  .fa-log { padding: 8px 20px; }
  .fa-log__entry { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }

  .fa-launch { max-width: none; gap: 10px; }

  .fa-context { grid-template-columns: 1fr; gap: 28px; }
}