/* ===========================================================================
   POP — Design system components (HTML/CSS port of the Figma library)
   Every block below names the Figma node it mirrors. Keep them in sync.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   SF Symbols
   Rendered as private-use glyphs in SF Pro, exactly as the Figma library
   stores them. ss16 is the stylistic set Apple uses for the symbol range.
--------------------------------------------------------------------------- */
.sf {
  font-family: "SF Pro Text", "SF Pro Display", "SF Pro", "SF Pro Icons",
               -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "ss16" 1;
  font-variation-settings: "wdth" 100;
  font-weight: 500; letter-spacing: 0;
  /* The box is exactly the icon size; DS.icon picks a font-size that makes the
     glyph's ink fit it. line-height:0 stops the 1.19em line box from adding
     height, and the glyph is centred on it so nothing spills. */
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; flex: 0 0 auto; overflow: visible;
  text-align: center; white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Header — Figma 137:3246 (Type=Standard)
   62px tall, white, 1px bottom hairline, 44px control row, 16px side padding.
   Left/Right slots are always 44x44 so the title stays optically centred.
--------------------------------------------------------------------------- */
.header {
  flex: 0 0 auto; position: relative; z-index: 400;
  height: var(--header-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--neutral-0);
  border-bottom: 1px solid var(--neutral-200);
}
.header__row {
  width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
}
.header__slot {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.header__title { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.header__title span {
  font: var(--t-header-title); letter-spacing: -0.43px;
  color: var(--neutral-900); white-space: nowrap;
}
.header__sub { font: var(--t-medium-13); color: var(--neutral-500); }

/* Touch targets.
   Several circular controls are 28–36px because that is what the Figma
   components specify. Rather than redraw them, the hit area is extended with a
   pseudo-element so the tappable region reaches 44px while the visual stays
   exactly as designed. */
.nav-icon, .edit-btn, .list-card__action, .token__x, .picker__opt { position: relative; }
.nav-icon::after, .edit-btn::after, .list-card__action::after, .token__x::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* Chips sit side by side, so only grow the target vertically — overlapping
   horizontal targets would make the wrong chip win. */
.picker__opt::after { content: ""; position: absolute; inset: -5px 0; }

/* Nav Icon — Figma 173:1452 (Action=Back / Close) */
.nav-icon {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--neutral-0); border: 1px solid var(--nav-icon-border);
  box-shadow: var(--shadow-nav);
  display: flex; align-items: center; justify-content: center;
  padding: 10px; cursor: pointer;
  transition: transform var(--dur-tap) ease, background var(--dur-tap) ease;
}
.nav-icon:active { transform: scale(.92); background: #f7f5f3; }


/* ---------------------------------------------------------------------------
   Button — Figma 1073:17068
   Size=Large 52px · Justified layout (icon slots hug the edges, label centred)
   Chunky iOS feel: 1px border + 4px hard bottom shadow that collapses on press.
--------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: var(--btn-h-lg);
  padding: var(--btn-pad-v-lg) var(--btn-pad-h-lg);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font: var(--t-btn-label);
  cursor: pointer; user-select: none;
  transition: transform var(--dur-tap) ease, box-shadow var(--dur-tap) ease,
              background var(--dur-tap) ease, opacity 160ms ease;
}
.btn__slot {
  width: var(--btn-icon-slot); height: var(--btn-icon-slot); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.btn__label { flex: 1 1 auto; text-align: center; white-space: nowrap; }

/* Compact layout — icons sit next to the label instead of hugging the edges */
.btn--compact { justify-content: center; gap: var(--btn-gap-lg); }
.btn--compact .btn__label { flex: 0 0 auto; }
.btn--compact .btn__slot:empty { display: none; }

.btn--md { height: var(--btn-h-md); padding: var(--btn-pad-v-md) var(--btn-pad-h-md); font: 600 15px/20px var(--font-ui); }
.btn--sm { height: var(--btn-h-sm); padding: var(--btn-pad-v-sm) var(--btn-pad-h-sm); font: var(--t-btn-label-xs); }

.btn--primary   { background: var(--orange-500); border-color: var(--orange-700); color: #fff;
                  box-shadow: 0 var(--btn-drop) 0 var(--orange-700); }
.btn--success   { background: var(--green-500);  border-color: var(--green-700);  color: #fff;
                  box-shadow: 0 var(--btn-drop) 0 var(--green-700); }
.btn--secondary { background: var(--beige-50);   border-color: var(--beige-400);  color: var(--neutral-900);
                  box-shadow: 0 var(--btn-drop) 0 var(--beige-400); }
.btn--tertiary  { background: var(--neutral-0);  border-color: var(--neutral-200); color: var(--neutral-900);
                  box-shadow: 0 var(--btn-drop) 0 var(--neutral-200); }

.btn:not(.is-disabled):active,
.btn.is-pressed { transform: translateY(var(--btn-drop)); box-shadow: 0 0 0 currentColor; }
.btn--primary:not(.is-disabled):active   { box-shadow: 0 0 0 var(--orange-700); background: #f25a1d; }
.btn--success:not(.is-disabled):active   { box-shadow: 0 0 0 var(--green-700); }
.btn--secondary:not(.is-disabled):active { box-shadow: 0 0 0 var(--beige-400); }
.btn--tertiary:not(.is-disabled):active  { box-shadow: 0 0 0 var(--neutral-200); }

.btn.is-disabled { opacity: .38; cursor: default; pointer-events: none; }

/* Plain text link button (used for "skip"-style secondary actions) */
.btn-text {
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font: var(--t-semibold-15); color: var(--neutral-500);
}
.btn-text:active { opacity: .55; }
.btn-text--brand { color: var(--orange-text); }

/* ---------------------------------------------------------------------------
   Button Bar — Figma 137:3597 (Layout=Single / Dual / Single + Helper Text)
   Sticky at the bottom of the screen, 30px top radius, sits above the keyboard.
--------------------------------------------------------------------------- */
.buttonbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 600;
  min-height: var(--buttonbar-h);
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  padding: 18px var(--gutter);
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
}
.buttonbar__row { width: var(--content-w); display: flex; gap: 10px; }
/* Two buttons in the bar: the same proportion the flow sheet's Skip/Continue
   pair uses, so a skippable question looks the same whether it is asked on a
   screen or in a sheet. Continue is wider because it is the expected path. */
.buttonbar__row > .btn { flex: 1 1 0; min-width: 0; }
.buttonbar__row > .btn:last-child:not(:only-child) { flex: 1.6 1 0; }
.buttonbar__helper {
  width: var(--content-w); text-align: center;
  font: var(--t-regular-12); color: var(--neutral-500);
}
.buttonbar__helper a { color: var(--neutral-900); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Section Title — Figma 173:5556
--------------------------------------------------------------------------- */
.section-title { display: flex; flex-direction: column; gap: 4px; }
.section-title__t { font: var(--t-header-title); letter-spacing: -0.43px; color: var(--neutral-900); }
.section-title__s { font: var(--t-medium-13); color: var(--neutral-500); }

/* Page-level heading used inside the body — Figma "Primary Heading 24" */
.h-display {
  font: var(--t-heading-24); color: var(--neutral-900);
  margin: 0; text-align: center;
}
.body-copy {
  font: var(--t-medium-15); color: var(--neutral-900);
  margin: 0; text-align: center; white-space: pre-wrap;
}
.body-copy--muted { color: var(--neutral-500); }
.text-left { text-align: left; }

/* ---------------------------------------------------------------------------
   Progress Bar — Figma 173:6006
--------------------------------------------------------------------------- */
.progress { width: 100%; height: 5px; border-radius: 3px; background: var(--neutral-200); overflow: hidden; }
.progress__fill {
  height: 100%; border-radius: 3px; background: var(--orange-500);
  transition: width 460ms var(--ease-out-ios);
}

/* ---------------------------------------------------------------------------
   Toggle Row — Figma 152:1318  (the modular data-entry container)
   Padding lives on the row itself; full-bleed children opt out with --flush.
--------------------------------------------------------------------------- */
.rows {
  width: 100%;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--r-card);
  overflow: hidden;
}
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  background: var(--neutral-0);
  min-height: 60px;
}
.row + .row { border-top: 1px solid var(--neutral-200); }
.row--tappable { cursor: pointer; transition: background var(--dur-tap) ease; }
.row--tappable:active { background: #faf8f6; }
.row__label { flex: 1 1 auto; font: var(--t-medium-15); color: var(--neutral-900); }
.row__sub   { display: block; font: var(--t-medium-13); color: var(--neutral-500); margin-top: 2px; }
.row__trail { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------------------
   Form Group — Figma "Form Row" 152:1240, stacked · group node 3440:19885
   "Master form row — Label on left, configurable field type on right. Stack
   vertically to build forms."

   THE WHOLE GROUP IS ONE CARD. This is the entire point of the modifier, and
   the bug it was made to fix: the shift times step drew each row as its own
   16px-radius bordered card with a 10px gap between them, INSIDE another
   bordered card. Sam reported it as "the container for choosing times is a bit
   broken" and asked for the Figma component instead. Two rows that answer one
   question — starts, ends — read as two unrelated settings the moment there is
   a moat between them.

   Everything structural is already `.rows` / `.row`: 16px radius with
   `overflow: hidden` (so the top row gets the top corners and the last row the
   bottom ones), a 1px `--neutral-200` border on the group, 16px padding and a
   12px gap per row, a full-bleed hairline between rows, no gaps. This modifier
   therefore adds exactly the two things the Figma group has that the plain
   toggle-row group does not.

   1. THE LAST ROW IS SUNKEN. `#fcfcfc` (`--neutral-50`) against the white
      above it, which is what closes the stack off visually — without it a
      two-row group and the top two rows of a five-row group look identical.
      `:not(:first-child)` because a group of ONE row is a first row, not a last
      one, and tinting a lone row would say "there is more above this".
   2. THE VALUE IS ORANGE AND THERE IS NO CHEVRON. Both live in the builder
      (`DS.formGroup`) rather than here, since they are what the row IS rather
      than how the group is drawn.

   Specificity, not source order — see CONVENTIONS §6c. `.row` sets its own
   white fill, so the tint has to out-specify it rather than merely follow it,
   and the press state has to out-specify the tint or the last row would be the
   one row in the app that does not respond to a finger.
--------------------------------------------------------------------------- */
.rows--form > .row:not(:first-child):last-child { background: var(--neutral-50); }
.rows--form > .row--tappable:not(:first-child):last-child:active { background: #f6f4f2; }

/* A row that cannot be answered yet — the day-by-day times before any day has
   been chosen. Grey is this app's disabled colour everywhere else, and the row
   keeps its full 60px so the group does not change shape when it unlocks.
   No Figma variant for this; flagged as proposed in CONVENTIONS §6. */
.row--disabled { cursor: default; }
.row--disabled .row__label,
.row--disabled .row__sub,
.row--disabled .fv { color: var(--neutral-400); }

/* Field Value — Figma 173:6420 */
.fv          { font: var(--t-medium-15); color: var(--neutral-500); }
.fv--input   { font: var(--t-semibold-15); color: var(--neutral-900); }
.fv--choose  { font: var(--t-medium-15); color: var(--orange-text); }
/* THE CARET LEADS PLACEHOLDER TEXT AND FOLLOWS REAL TEXT.
   `.fv--focused` is the empty state, so its caret is a ::before — a caret after
   "First Name" claims you typed those words. `.fv--caret` is the filled state,
   where after is the genuine insertion point. Same rule as the date mask and
   both search fields; it is not a per-component decision. */
.fv--focused { position: relative; color: var(--neutral-500); }
.fv--caret { position: relative; }
.fv--focused::before, .fv--caret::after {
  content: ""; display: inline-block; width: 2px; height: 20px;
  background: var(--neutral-900); vertical-align: -4px;
  animation: caret 1.06s steps(1) infinite;
}
.fv--focused::before { margin-right: 2px; }
.fv--caret::after    { margin-left: 2px; }
@keyframes caret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* ---------------------------------------------------------------------------
   Tag — Figma 332:15062
--------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--r-pill);
  background: var(--neutral-0); border: 1px solid var(--neutral-200);
  font: var(--t-medium-13); color: var(--neutral-900);
}
.tag--active { background: var(--orange-500); border-color: var(--orange-700); color: #fff; }

/* ---------------------------------------------------------------------------
   Avatar — Figma 139:825
--------------------------------------------------------------------------- */
/* `position: relative` because the photograph is layered *over* the initials
   rather than replacing them — see DS.avatar. The circle is fully drawn before
   any image decodes, so a data URI arriving late cannot reflow anything and a
   data URI that never arrives leaves initials rather than a broken glyph. */
.avatar {
  position: relative;
  border-radius: var(--r-pill); background: var(--beige-50);
  border: 1px solid var(--beige-400); color: var(--neutral-900);
  display: flex; align-items: center; justify-content: center;
  font: var(--t-semibold-15); overflow: hidden; flex: 0 0 auto;
}
/* ===========================================================================
   HARD RULE: A PROFILE PICTURE SHOWING A PHOTO HAS NO BORDER AND NO SHADOW.

   Borders and rings exist to give an initials chip an edge against whatever is
   behind it. Over a photograph they land on the image and read as a fuzzy
   halo — Sam has now flagged it three times, in three different components,
   because each one was carrying its own ring. So the rule is written once and
   enforced from one place, with `!important`: any future component that draws
   a photo cannot reintroduce it by accident.

   Applies to `.avatar--photo` (set by DS.avatar whenever `src` is present) and
   to `.upload-target.is-set`. Selection state is carried by something else —
   the tab's underline — not by a ring on someone's face.
=========================================================================== */
.avatar--photo,
.upload-target.is-set {
  border-color: transparent !important;
  box-shadow: none !important;
  background: none;
}

/* ---------------------------------------------------------------------------
   Danger link — DS.dangerLink
   The destructive action, as ink on nothing at the bottom of a page. Never in
   the button bar: a destructive verb must not sit in the same green button that
   commits everywhere else in the app.

   No `gap`: there is no icon beside the word (see the note at the call site —
   `trash` is in neither this font nor the Figma file), and a gap with nothing
   on one side of it just pushes the label off centre.
--------------------------------------------------------------------------- */
.danger-link {
  margin: 18px auto 0; display: flex; align-items: center;
  border: 0; background: none; cursor: pointer; padding: 10px 14px;
  color: var(--danger, #c0392b); font: var(--t-semibold-15);
}
.danger-link:active { opacity: .6; }

.avatar--s  { width: 32px; height: 32px; font-size: 12px; }
.avatar--m  { width: 40px; height: 40px; font-size: 14px; }
.avatar--l  { width: 56px; height: 56px; font-size: 18px; }
.avatar--xl { width: 72px; height: 72px; font-size: 22px; }

/* ---------------------------------------------------------------------------
   Layout helpers
--------------------------------------------------------------------------- */
.stack-v  { display: flex; flex-direction: column; }
.stack-h  { display: flex; flex-direction: row; align-items: center; }
.center   { align-items: center; }
.grow     { flex: 1 1 auto; min-height: 0; }
/* THE TOP PADDING BELONGS HERE, NOT TO NINE CALLERS.
   This class carried no `padding-top` at all, so every screen set its own
   inline and between them they produced 16, 20, 24 and 24-with-a-bottom. The
   gap between a header and the first thing under it is one decision; it is
   24 now, and `DS.content({ padTop })` is the visible exception for a screen
   that genuinely needs to start tighter. */
.content  { width: var(--content-w); margin: 0 auto; padding-top: 24px; }
.gap-4  { gap: 4px }  .gap-8  { gap: 8px }  .gap-12 { gap: 12px }
.gap-16 { gap: 16px } .gap-20 { gap: 20px } .gap-24 { gap: 24px }
.pt-16 { padding-top: 16px } .pb-16 { padding-bottom: 16px }
.pt-24 { padding-top: 24px } .pb-24 { padding-bottom: 24px }

/* Photo card — the tilted founder image on the intro screen */
.photo-card {
  transform: rotate(8.5deg);
  box-shadow: 0 4px 4px rgba(0,0,0,.02);
  display: block;
}
.photo-card img { display: block; width: 187px; height: 183px; object-fit: cover; }