/* FlyNumber home page collage — "Home Collage V5 Flat" from the Claude Design
 * project: three panel screens on a fixed 1420x1560 artboard. Every design px
 * is written as calc(N * var(--u)) where --u = 1 artboard px, derived from the
 * container width with container-query units, so the composition scales like
 * an image but stays crisp text/vectors.
 *
 * This file is ONLY the artwork. The hero grid around it is the reusable
 * pattern in product-shots.css (.page-hero) — every future page shot
 * (pricing, features, ...) uses that. The artwork sits unframed on the page.
 *
 * Tokens are the panel's design-system tokens (colors_and_type.css), scoped
 * to .fn-collage so nothing leaks into the rest of the site.
 */

.fn-collage {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --success: 142.4 71.8% 29.2%;
  --success-subtle: 140.6 84.2% 92.5%;
  --success-border: 141.7 76.6% 73.1%;
  --warning: 17.5 88.3% 40.4%;
  --warning-subtle: 34.3 100% 91.8%;
  --warning-border: 30.7 97.2% 72.4%;
  --destructive: 0 73.7% 41.8%;
  --destructive-subtle: 0 93.3% 94.1%;
  --destructive-border: 0 93.5% 81.8%;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

/* ───────── Collage: scaling frame ───────────────────────────────────── */
.fn-collage {
  container-type: inline-size;
  width: 100%;
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  line-height: 1.2;
}
.fn-collage *, .fn-collage *::before, .fn-collage *::after { box-sizing: border-box; }
.fn-collage svg.fnc-icon { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The board is the visible frame; the stage carries the artboard's own
   coordinate system (1420 wide) and is nudged so the artwork's dead margins
   fall outside the frame. Height is the artwork's real extent, not the
   1560 artboard. */
.fn-collage-board {
  --u: calc(100cqw / 1300);
  position: relative;
  width: 100%;
  height: calc(1132 * var(--u));
}
.fn-collage-stage {
  position: absolute;
  left: calc(-32 * var(--u));
  top: calc(-40 * var(--u));
  /* Sized to the artwork, NOT the 1420x1560 artboard: the stage's own box
     counts toward the page's scrollable overflow even where it's empty, and
     at ~1280px viewports the artboard-sized box poked 7px past the viewport
     and grew a horizontal scrollbar. 1300/1172 ends flush with the board. */
  width: calc(1300 * var(--u));
  height: calc(1172 * var(--u));
}

/* ───────── Cards ────────────────────────────────────────────────────── */
/* Card shell = the site's sticker shell (2px #333 border, hard 5px offset
   shadow — what .responsive-image and .content-with-image already use), not
   the panel's hairline + soft shadow. The UI inside the cards is untouched,
   so the collage speaks the page's language while still showing the real
   product. Shadow/border are fixed px on purpose: they must match the copy
   box and nav buttons beside them, not scale with the artwork. */
.fnc-card {
  position: absolute;
  background: hsl(0 0% 100%);
  border: 2px solid #333;
  border-radius: 0;
  box-shadow: 5px 5px 0 #333;
  padding: calc(28 * var(--u));
}
/* Positions and the ±2° on the back cards are from the artboard's
   Component.renderVals() (tilt 2, overlap 25 → e = -30). The front card is
   deliberately NOT rotated (artboard: -0.7°): with a hard-bordered shell a
   0.7° tilt reads as crooked, and straight it lines up with the h1 and the
   copy box. The back cards keep their angle so the stack still reads as a
   collage. */
.fnc-card--myfly {
  left: calc(48 * var(--u)); top: calc(48 * var(--u)); width: calc(560 * var(--u));
  transform: translate(calc(-10.5 * var(--u)), calc(-4.5 * var(--u))) rotate(-2deg);
  z-index: 1;
}
.fnc-card--logs {
  left: calc(640 * var(--u)); top: calc(88 * var(--u)); width: calc(620 * var(--u));
  transform: translate(calc(10.5 * var(--u)), calc(-4.5 * var(--u))) rotate(2deg);
  z-index: 1;
}
.fnc-card--settings {
  left: calc(330 * var(--u)); top: calc(440 * var(--u)); width: calc(790 * var(--u));
  padding: calc(34 * var(--u)) calc(38 * var(--u)) calc(38 * var(--u));
  transform: translate(0, calc(27 * var(--u)));
  z-index: 2;
}

.fnc-tabular { font-variant-numeric: tabular-nums; }

/* Card header */
.fnc-head { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.fnc-title { font-size: calc(22 * var(--u)); font-weight: 600; letter-spacing: -0.01em; color: hsl(var(--foreground)); }
.fnc-sub { font-size: calc(13 * var(--u)); color: hsl(var(--muted-foreground)); }
.fnc-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.fnc-head-row .fnc-head { margin-bottom: 0; }
.fnc-btn-outline {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(32 * var(--u)); padding: 0 calc(14 * var(--u));
  border-radius: calc(8 * var(--u)); border: 1px solid hsl(var(--input));
  background: hsl(0 0% 100%);
  font-size: calc(13 * var(--u)); font-weight: 500; white-space: nowrap;
  color: hsl(var(--foreground));
}
.fnc-btn-outline .fnc-icon { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: hsl(var(--muted-foreground)); }

/* Flag in a ring */
.fnc-flag {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: calc(20 * var(--u)); height: calc(20 * var(--u));
  border-radius: 9999px;
  background: hsl(var(--background));
  overflow: hidden;
  flex-shrink: 0;
}
.fnc-flag .fi { font-size: calc(20 * var(--u)); line-height: 1em; }
.fnc-flag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px hsl(var(--border)); pointer-events: none; }
.fnc-flag--lg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.fnc-flag--lg .fi { font-size: calc(40 * var(--u)); }

/* ── My FlyNumbers ── */
.fnc-stack { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.fnc-num {
  position: relative; overflow: hidden;
  border-radius: calc(12 * var(--u)); border: 1px solid hsl(var(--border));
  background: hsl(0 0% 100%);
  padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u));
  box-shadow: var(--shadow-sm);
}
.fnc-num-stripe { position: absolute; top: 0; bottom: 0; left: 0; width: calc(4 * var(--u)); background: hsl(142.4 71.8% 36%); }
.fnc-num--expiring .fnc-num-stripe { background: hsl(38 92% 50%); }
.fnc-num-meta { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-bottom: calc(10 * var(--u)); font-size: calc(11 * var(--u)); }
.fnc-status { font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(142.4 71.8% 29.2%); }
.fnc-num--expiring .fnc-status { color: hsl(17.5 88.3% 40.4%); }
.fnc-dot-sep { color: hsl(215 16% 47% / 0.4); }
.fnc-type { font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); }
.fnc-num-line { display: flex; align-items: baseline; gap: calc(8 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.fnc-cc { font-size: calc(14 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); }
.fnc-digits { font-size: calc(22 * var(--u)); line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; color: hsl(var(--foreground)); }
.fnc-num-loc { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-bottom: calc(14 * var(--u)); font-size: calc(12 * var(--u)); color: hsl(var(--muted-foreground)); }
.fnc-num-loc .fnc-sep { opacity: 0.4; }
.fnc-handling { border-radius: calc(10 * var(--u)); background: hsl(var(--muted)); padding: calc(9 * var(--u)) calc(12 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.fnc-handling-label { font-size: calc(10 * var(--u)); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin-bottom: calc(3 * var(--u)); }
.fnc-handling-row { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.fnc-handling-row .fnc-icon { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: hsl(var(--muted-foreground)); }
.fnc-handling-val { font-size: calc(13 * var(--u)); font-weight: 500; color: hsl(var(--foreground)); }
.fnc-num-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); font-size: calc(11 * var(--u)); color: hsl(var(--muted-foreground)); }

/* ── Call Logs ── */
.fnc-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(10 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.fnc-stat { border-radius: calc(12 * var(--u)); border: 1px solid hsl(var(--border)); background: hsl(0 0% 100%); padding: calc(12 * var(--u)) calc(14 * var(--u)); box-shadow: var(--shadow-sm); }
.fnc-stat-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); }
.fnc-stat-dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 9999px; }
.fnc-stat-dot--ok { background: hsl(142.4 71.8% 36%); }
.fnc-stat-dot--warn { background: hsl(38 92% 50%); }
.fnc-stat-value { font-size: calc(22 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); margin-bottom: calc(2 * var(--u)); }
.fnc-stat-sub { font-size: calc(11 * var(--u)); color: hsl(var(--muted-foreground)); }

.fnc-table { border: 1px solid hsl(var(--border)); border-radius: calc(12 * var(--u)); overflow: hidden; }
.fnc-tr {
  display: grid;
  grid-template-columns: calc(92 * var(--u)) calc(24 * var(--u)) 1fr calc(62 * var(--u)) calc(56 * var(--u)) calc(96 * var(--u));
  gap: calc(6 * var(--u)); align-items: center;
  padding: calc(11 * var(--u)) calc(14 * var(--u));
  border-top: 1px solid hsl(var(--border));
  font-size: calc(12.5 * var(--u)); font-variant-numeric: tabular-nums; color: hsl(var(--foreground));
}
.fnc-tr--head {
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  border-top: 0;
  background: hsl(var(--muted));
  font-size: calc(10.5 * var(--u)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground));
}
.fnc-tr .fnc-icon { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: hsl(var(--muted-foreground)); }
.fnc-td-time { color: hsl(var(--muted-foreground)); }
.fnc-td-from { font-weight: 500; white-space: nowrap; }

.fnc-pill {
  display: inline-flex; align-items: center;
  height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u));
  border-radius: 9999px; border: 1px solid transparent;
  font-size: calc(11.5 * var(--u)); font-weight: 500; white-space: nowrap;
}
.fnc-pill--md { padding: 0 calc(10 * var(--u)); font-size: calc(12 * var(--u)); }
.fnc-pill--success { background: hsl(var(--success-subtle)); border-color: hsl(var(--success-border)); color: hsl(var(--success)); }
.fnc-pill--warning { background: hsl(var(--warning-subtle)); border-color: hsl(var(--warning-border)); color: hsl(var(--warning)); }
.fnc-pill--destructive { background: hsl(var(--destructive-subtle)); border-color: hsl(var(--destructive-border)); color: hsl(var(--destructive)); }

/* ── Number settings ── */
.fnc-set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(24 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.fnc-set-id { display: flex; align-items: center; gap: calc(14 * var(--u)); min-width: 0; }
.fnc-set-title { font-size: calc(26 * var(--u)); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); }
.fnc-set-meta { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); color: hsl(var(--muted-foreground)); }
.fnc-set-renew { display: flex; flex-direction: column; align-items: flex-end; gap: calc(2 * var(--u)); flex-shrink: 0; }
.fnc-set-renew-label { font-size: calc(12 * var(--u)); color: hsl(var(--muted-foreground)); }
.fnc-set-renew-val { font-size: calc(15 * var(--u)); font-weight: 600; color: hsl(var(--foreground)); }

.fnc-section { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.fnc-section-title { font-size: calc(18 * var(--u)); font-weight: 600; color: hsl(var(--foreground)); }
.fnc-section-sub { font-size: calc(13 * var(--u)); color: hsl(var(--muted-foreground)); }
.fnc-label { font-size: calc(12 * var(--u)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); margin-bottom: calc(10 * var(--u)); }

.fnc-options { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.fnc-option {
  display: flex; align-items: center; gap: calc(14 * var(--u));
  border: 1px solid hsl(var(--border)); border-radius: calc(12 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u));
}
.fnc-radio {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  border-radius: 9999px; border: max(1px, calc(1.5 * var(--u))) solid hsl(var(--border));
}
.fnc-option-text { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.fnc-option-title { font-size: calc(14 * var(--u)); font-weight: 600; color: hsl(var(--foreground)); }
.fnc-option-sub { font-size: calc(12 * var(--u)); color: hsl(var(--muted-foreground)); }

.fnc-option.is-selected { display: block; border: max(1px, calc(1.5 * var(--u))) solid hsl(var(--primary)); background: hsl(var(--primary) / 0.04); }
.fnc-option-row { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.is-selected .fnc-radio { border-color: hsl(var(--primary)); }
.fnc-radio-dot { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 9999px; background: hsl(var(--primary)); }
.fnc-note {
  display: flex; align-items: flex-start; gap: calc(10 * var(--u));
  border-radius: calc(10 * var(--u));
  background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary) / 0.2);
  padding: calc(12 * var(--u)) calc(14 * var(--u));
}
.fnc-note .fnc-icon--note { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.5; color: hsl(var(--primary)); margin-top: calc(1 * var(--u)); }
.fnc-note span { font-size: calc(12.5 * var(--u)); line-height: 1.5; color: hsl(var(--foreground)); }

.fnc-actions { display: flex; justify-content: flex-end; }
.fnc-btn-primary {
  display: flex; align-items: center;
  height: calc(40 * var(--u)); padding: 0 calc(18 * var(--u));
  border-radius: calc(8 * var(--u));
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-size: calc(14 * var(--u)); font-weight: 500;
  box-shadow: var(--shadow-sm);
}

/* ───────── Collage: phone composition ──────────────────────────────── */
/* A 2° tilted overlap of 560–790px cards has no legible form at 400px, and
   cropping it shows fragments. So below 720px it becomes a small composition
   of its own: the Settings card in front at full width, the My FlyNumbers
   card tucked behind it showing just its header and first number. Each card
   is its own container so --u is per card (Settings 790 wide, My FlyNumbers
   560); the back card is shrunk/tilted with a transform so its layout width
   — and therefore its cqw — stays exact. Call Logs is dropped. */
@media (max-width: 720px) {
  .fn-collage-board { height: auto; }
  .fn-collage-stage {
    position: relative; left: 0; top: 0; width: auto; height: auto;
    padding-top: 31.5%; /* the strip of the back card left showing (its header +
                           first number, cut in the gap below it); padding, not a
                           margin on the front card, which would collapse through
                           the stage and drag the back card down with it */
  }
  .fnc-card { container-type: inline-size; width: 100%; }
  .fnc-card--settings {
    --u: calc(100cqw / 790);
    position: relative; left: 0; top: 0;   /* clear the artboard offsets */
    transform: none;
    z-index: 2;
  }
  .fnc-card--myfly {
    --u: calc(100cqw / 560);
    position: absolute; left: 0; top: 0;
    transform: rotate(-1.5deg) scale(0.94);
    transform-origin: 50% 0;
    z-index: 1;
  }
  .fnc-card--logs { display: none; }
}

/* Container-query units are the whole scaling mechanism; without them the
   artboard renders at 1420px and blows out the page. Hide instead. */
@supports not (width: 1cqw) {
  .fn-collage { display: none; }
}