/* ═══════════════════════════════════════════════════════════════════════
   Iconic.css — everything specific to the Iconic page.

   Loads LAST, after Dark.css, like Hound.css does on GitHound: it overrides
   shared geometry (the windows group, the mobile hero's picture), the page
   colours in BOTH schemes, and carries its own dark block at the end.
   Nothing in here is used by the other pages.

   Two sources, as on GitHound. The window replica is measured off Eddy's
   2× screenshots of the real app (iconic_hero_window.png / _dark.png) and
   the Swift source (ContentView, LibrarySidebar, LibraryDetailView,
   IconCell, IconInspectorView, ColorSwatchButton). The page around it is
   measured off his mockups at 1440 wide (732px images, ×1.967).

   ⚠️ Unlike myPod's and GitHound's, this hero window FOLLOWS the
   visitor's light/dark setting — Eddy supplied both renders. Everything
   the window paints is a --iw-* variable, swapped in the dark block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The headline face ──────────────────────────────────────────────────
   SF Pro Rounded Bold — an intentional difference from the other pages
   (Eddy's call). The system's .SF NS Rounded, instanced at wght 700 and
   subset to Basic Latin plus curly quotes, dashes, ellipsis and ©: 12 KB.
   Made the same way as GitHound's digits font (fontTools, see CLAUDE.md).
   ⚠️ This rule is what makes the file count; without it only Safari would
   show a rounded face (via ui-rounded). */
@font-face{
  font-family: "SF Rounded Headline";
  src: url('/Assets/Fonts/SFRounded-Bold-Latin-v1.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* White page, #F2F2F2 footer — sampled off the light mockup, same as
     GitHound's. The dark pair is Eddy's (see the end of this file). */
  --page-bg:   #FFFFFF;
  --footer-bg: #F2F2F2;

  /* The windows group: the 1062×623 app window at (0,0) and the signup card
     hanging off its lower right at (820, 354). The card is centred where
     the mockup draws it; it's the shared 330×356 card, not resized. */
  --group-w: 1150px;
  --group-h: 710px;

  /* The mockup's frame radius, as on GitHound. */
  --hero-radius-max: 20px;

  --accent: #007AFF;

  /* The marquee icons — Friendly Line's own blue (the colour the SVGs are
     drawn in), and a softer lilac of it on the dark page. Eddy's values. */
  --marquee-ink: #0005F8;

  /* ── The window's paint, light appearance ───────────────────────────── */
  --iw-sidebar:      #ECEDEE;
  --iw-main:         #FFFFFF;
  --iw-tile:         #F7F7F7;
  --iw-tile-on:      #DFEBFF;          /* accentColor at 15% over white */
  --iw-divider:      #D5D6D7;          /* the sidebar's Divider() */
  --iw-hairline:     rgba(0,0,0,.09);  /* toolbar bottom edge */
  --iw-separator:    rgba(0,0,0,.10);  /* FadingDivider */
  --iw-ink:          rgba(0,0,0,.86);  /* .primary — the icons sample #232323 */
  --iw-ink-2:        rgba(0,0,0,.50);  /* .secondary */
  --iw-title:        rgba(0,0,0,.70);  /* the window title — lighter than .primary */
  --iw-placeholder:  rgba(0,0,0,.50);
  --iw-knob:         #FFFFFF;
  --iw-ink-3:        rgba(0,0,0,.26);  /* .tertiary */
  --iw-count:        rgba(0,0,0,.30);  /* .secondary.opacity(0.6) */
  --iw-preview:      #FFFFFF;          /* controlBackgroundColor */
  --iw-preview-rim:  rgba(0,0,0,.075); /* .secondary.opacity(0.15) */
  --iw-chip:         rgba(0,0,0,.06);  /* .secondary.opacity(0.12) */
  --iw-btn-2:        rgba(0,0,0,.075); /* .secondary.opacity(0.15) */
  --iw-btn-rim:      rgba(0,0,0,.20);  /* .secondary.opacity(0.4) */
  --iw-swatch-rim:   rgba(0,0,0,.225); /* .secondary.opacity(0.45) */
  --iw-icon-tint:    #000;             /* the template default in light mode */
  --iw-shadow:       0 16px 38px rgba(0,0,0,.42), 0 0 0 .5px rgba(0,0,0,.14);
  --iw-glass:        rgba(248,248,248,.75);
  --iw-glass-rim:    rgba(0,0,0,.12);
  --iw-glass-shadow: 0 1px 4px rgba(0,0,0,.04);
  --iw-glass-hi:     rgba(255,255,255,.9);
  --iw-glass-clear:  rgba(250,250,250,.62);
  --iw-seg-on:       rgba(0,0,0,.09);
  --iw-track:        rgba(0,0,0,.11);
  --iw-edge-fade:    rgba(250,250,250,.85);   /* toolbar scroll-edge veil */

  /* Tahoe's traffic lights: a soft top-to-bottom gradient inside a darker
     hairline rim. Sampled down the centre of each light. */
  --tl-red:    linear-gradient(#FE6D65, #F48D84);
  --tl-yellow: linear-gradient(#FBBA2F, #FDD146);
  --tl-green:  linear-gradient(#5FCF28, #99DA79);
  --tl-rim:    rgba(120,0,0,.55);
}


/* ═══════════════════════════════════════════════════════════════════════
   The hero
   ═══════════════════════════════════════════════════════════════════════ */

/* The blue grain wallpaper. 1948px wide at quality 70: the grain IS the
   texture, and it doesn't compress — at 50 it visibly flattens. The flat
   colour behind it is the image's own mid-blue. */
.Wallpaper{
  background-color: #4E5AF0;
  background-image: url('/Assets/Images/Wallpaper-Iconic-v1.webp');
}

/* Iconic's menu bar extra, matched on height to the Control Centre glyph. */
.Menubar-glyph--iconic{ width: 15.5px; height: 15.5px; }

/* The mockup centres the desktop on a point 24pt right of the app window's
   middle — between the window's centre and the whole group's. */
.Windows{ left: calc(50% + 24px * var(--stage-scale, 1)); }
.Signup{
  left: 820px;
  top: 354px;
}


/* ═══════════════════════════════════════════════════════════════════════
   The Iconic window — ContentView, light and dark
   ═══════════════════════════════════════════════════════════════════════ */

/* 1062 × 623 with a 16pt corner (measured: the corner's curve is a 32px
   circle at 2×). Sidebar 246 | detail 496 | inspector 320 + 1px divider. */
.Iconic{
  position: absolute;
  top: 0; left: 0;
  width: 1062px;
  height: 623px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--iw-main);
  box-shadow: var(--iw-shadow);
  color: var(--iw-ink);
  cursor: default;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0;
}

/* Tahoe draws an inactive window's lights grey, an active one's in
   colour — the same rule as Window.css, with Tahoe's 23pt pitch and its
   enabled zoom button. */
.TrafficLights--iconic{
  top: 19px;
  left: 19px;
  gap: 9px;
}
.Iconic .TrafficLight{ box-shadow: inset 0 0 0 .5px var(--iw-ink-3); }
.Iconic.is-focused .TrafficLight{ box-shadow: inset 0 0 0 .5px var(--tl-rim); }
.Iconic.is-focused .TrafficLight--close{ background: var(--tl-red); }
.Iconic.is-focused .TrafficLight--min  { background: var(--tl-yellow); }
.Iconic.is-focused .TrafficLight--zoom { background: var(--tl-green); }

/* SF Symbols, sized by their own boxes (each viewBox is the glyph's
   bounding box, 100 units on its long side). */
.Iconic-sym{ display: block; flex: none; }

/* ── Liquid Glass controls ──────────────────────────────────────────────
   Tahoe's toolbar circles and capsules, and the floating search bar: a
   near-white glass with a hairline rim, a specular top edge and a soft
   shadow. 36.5pt tall in the toolbar, 44 in the bottom bar. */
.Glass{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--iw-glass);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    inset 0 0 0 .5px var(--iw-glass-rim),
    inset 0 1px 0 var(--iw-glass-hi),
    var(--iw-glass-shadow);
  color: var(--iw-ink);
}
.Glass--circle{ width: 36.5px; height: 36.5px; }

/* ── Sidebar ────────────────────────────────────────────────────────── */
.Iconic-sidebar{
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 246px;
  background: var(--iw-sidebar);
}
.Iconic-sidebarToggle{ top: 7.5px; left: 201.75px; }
.Iconic-sym--sidebar{ width: 18.5px; height: 14.59px; }

/* sidebarHeader: 44pt tall, under the 52pt title-bar band. */
.Iconic-libHeader{
  position: absolute;
  top: 52px; left: 0; right: 0;
  height: 45px;                     /* 44 + the divider, which sits at 96 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 0 14px;
  border-bottom: 1px solid var(--iw-divider);
}
.Iconic-libTitle{ font-size: 13px; font-weight: 600; color: var(--iw-ink); }
/* plus, .title3 semibold, in a 28pt frame 8pt from the edge. */
.Iconic-sym--add{ width: 12.5px; height: 12.5px; color: var(--iw-ink-2); }

.Iconic-libList{
  position: absolute;
  top: 103.5px; left: 0; right: 0;
}
/* Library row: chevron (10pt frame), stack symbol, bold name, count. */
.Iconic-libRow{
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 18px;
}
.Iconic-sym--chevron{
  width: 9px; height: 5.07px;
  margin: 0 10px 0 .5px;
  color: var(--iw-ink-3);
}
/* square.stack.3d.up — the one symbol drawn from a bitmap mask: its
   layered outline doesn't survive as a single SVG path. */
.Iconic-stack{
  flex: none;
  width: 13px; height: 14px;
  margin-right: 9.5px;
  background: var(--accent);
  -webkit-mask: url('/Assets/Icons/Glyph-Stack-v1.png') center / contain no-repeat;
          mask: url('/Assets/Icons/Glyph-Stack-v1.png') center / contain no-repeat;
}
.Iconic-libName{ flex: 1 1 auto; font-weight: 600; white-space: nowrap; }
.Iconic-count{
  flex: none;
  margin-left: auto;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--iw-count);
}

/* Category rows: 28.5pt, a 22pt indent spacer, folder, name, count. The
   selected one fills with accentColor in a 7pt-radius rect, inset 6pt. */
.Iconic-catRow{
  display: flex;
  align-items: center;
  height: 28.5px;
  margin: 0 6px;
  padding: 0 12px 0 43.5px;
  border-radius: 7px;
}
.Iconic-catRow.is-selected{ background: var(--accent); color: #fff; }
.Iconic-sym--folder{
  width: 14.5px; height: 11.7px;
  margin-right: 10px;
  color: var(--iw-ink-2);
}
.Iconic-catRow.is-selected .Iconic-sym--folder{ color: #fff; }
.Iconic-catName{ white-space: nowrap; }
.Iconic-catRow.is-selected .Iconic-count{ color: rgba(255,255,255,.75); }

/* ── Detail column ──────────────────────────────────────────────────── */
.Iconic-main{
  position: absolute;
  top: 0; bottom: 0;
  left: 246px;
  width: 496px;
  overflow: hidden;
}

/* The grid, scrolled. LazyVGrid with adaptive columns (min 88, spacing
   14) inside 14pt padding lands on four 106.5pt columns at this width.
   The K row's tiles start 31pt above the window's top edge, under the
   toolbar — that's where the screenshot was taken.
   ⚠️ The mask is the app's 100pt bottom fade (destinationOut). The search
   bar sits OUTSIDE this element, or the mask would kill its glass. */
.Iconic-scroll{
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), transparent);
}
.Iconic-grid{
  position: absolute;
  top: -45px;
  left: -.5px;
  display: grid;
  grid-template-columns: repeat(4, 106.5px);
  column-gap: 14px;
  row-gap: 14px;
  padding: 14px;
}
.Cell{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.Cell-tile{
  display: grid;
  place-items: center;
  width: 80px; height: 80px;
  border-radius: 8px;
  background: var(--iw-tile);
}
.Cell.is-selected .Cell-tile{
  background: var(--iw-tile-on);
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* The image is padded by 18% of the 64pt icon size: 56.96pt of icon. */
.Cell-icon{ width: 56.96px; height: 56.96px; color: var(--iw-ink); }
.Cell-name{
  font-size: 10px;
  line-height: 15px;
  white-space: nowrap;
  color: var(--iw-ink-2);
}
.Cell.is-selected .Cell-name{ color: var(--iw-ink); }

/* The title-bar band: the window title, and Tahoe's scroll-edge effect —
   whatever scrolls under it is blurred and veiled, with a hairline below. */
.Iconic-titlebar{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52px;
  padding: 11px 0 0 20px;
  background: var(--iw-edge-fade);
  -webkit-backdrop-filter: blur(2.5px);
          backdrop-filter: blur(2.5px);
  border-bottom: .5px solid var(--iw-hairline);
}
.Iconic-title{
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  color: var(--iw-title);
}
.Iconic-subtitle{
  font-size: 11px;
  line-height: 14px;
  color: var(--iw-ink-2);
}

/* bottomBar: a 300pt search capsule and a 44pt import circle, 10pt apart,
   centred, 20pt off the bottom. */
.Iconic-bottomBar{
  position: absolute;
  left: 0; right: 0;
  bottom: 20px;
  height: 44px;
}
.Iconic-search{
  left: 71px;
  width: 300px; height: 44px;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 14px;
}
.Iconic-sym--search{ width: 12.9px; height: 13px; color: var(--iw-ink-2); }
.Iconic-searchText{ color: var(--iw-placeholder); }
/* The bottom bar's glass is clearer than the toolbar's — the grid shows
   through it, barely softened — and carries the app's own
   .shadow(.black 10%, radius 8, y 2). */
.Iconic-bottomBar .Glass{
  background: var(--iw-glass-clear);
  -webkit-backdrop-filter: blur(1.5px) saturate(140%);
          backdrop-filter: blur(1.5px) saturate(140%);
  box-shadow:
    inset 0 0 0 .5px var(--iw-glass-rim),
    inset 0 1px 0 var(--iw-glass-hi),
    0 2px 16px rgba(0,0,0,.10);
}
.Iconic-import{ left: 381px; width: 44px; height: 44px; }
.Iconic-sym--import{ width: 13.5px; height: 13.5px; }

/* ── Toolbar, right-hand group ──────────────────────────────────────── */
.Iconic-toolbar .Glass{ top: 7.5px; }
.Iconic-toolbar .Glass:first-child{ left: 781.5px; }
.Iconic-toolbar .Glass:last-child { left: 1017.5px; }
.Iconic-sym--help{ width: 17px; height: 17px; }
.Iconic-toolbar .Iconic-sym--sidebar{ width: 19.5px; height: 15.38px; margin-left: 1px; }

/* The grid/list picker and the size slider share one capsule. */
.Iconic-view{
  left: 825.5px;
  width: 185px;
  height: 36.5px;
  justify-content: flex-start;
  padding-left: 4.5px;
}
.Iconic-seg{
  display: grid;
  place-items: center;
  width: 32px; height: 28px;
  border-radius: 999px;
}
.Iconic-seg + .Iconic-seg{ margin-left: 4.5px; }
.Iconic-seg.is-selected{ background: var(--iw-seg-on); }
.Iconic-sym--grid{ width: 15.5px; height: 15.5px; }
.Iconic-sym--list{ width: 17px; height: 12.45px; }
/* Slider(32…128) at 64: a 70pt track, filled to the knob. */
.Iconic-slider{
  position: relative;
  width: 70px; height: 6px;
  margin-left: 26.5px;
  border-radius: 3px;
  background: var(--iw-track);
}
.Iconic-sliderFill{
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 22px;
  border-radius: 3px;
  background: var(--accent);
}
.Iconic-sliderKnob{
  position: absolute;
  top: 50%; left: 16px;
  width: 23px; height: 20px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--iw-knob);
  box-shadow: 0 .5px 1.5px rgba(0,0,0,.18), 0 2px 7px rgba(0,0,0,.12);
}

/* ── Inspector column ───────────────────────────────────────────────── */
.Iconic-inspector{
  position: absolute;
  top: 52px; bottom: 0;
  left: 742px;
  width: 320px;
  padding: 18px;
}
/* FadingDivider: separatorColor, fading in over the top 12%. */
.Iconic-inspector::before{
  content: "";
  position: absolute;
  top: -52px; bottom: 0; left: -1px;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0, var(--iw-separator) 12%);
}


/* ═══════════════════════════════════════════════════════════════════════
   The inspector (IconInspectorView) — shared by the hero window and
   module 1. Authored in the app's own points; module 1 scales it up with
   `zoom`.
   ═══════════════════════════════════════════════════════════════════════ */
.Insp{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 284px;
  color: var(--iw-ink);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0;
}

/* 220pt tall, 12pt radius, the background colour with a 0.5pt rim; the
   icon fills it inside 36pt of padding. */
.Insp-preview{
  display: grid;
  place-items: center;
  height: 220px;
  border-radius: 12px;
  background: var(--insp-bg, var(--iw-preview));
  box-shadow: inset 0 0 0 .5px var(--iw-preview-rim);
  transition: background-color .2s ease;
}
.Insp-icon{
  width: 148px; height: 148px;
  color: var(--insp-tint, var(--iw-icon-tint));
  transition: color .2s ease;
}

/* metadataSection: .title2 semibold name, then .caption secondary
   "Category · SVG · size" with 6pt between the pieces. */
.Insp-meta{ margin-top: 20px; }
.Insp-name{
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.Insp-info{
  display: flex;
  gap: 6px;
  margin-top: 5.5px;
  font-size: 10px;
  line-height: 15px;
  color: var(--iw-ink-2);
}

/* variantSection: .subheadline secondary label, 8pt, then the chips —
   .caption in a capsule, 10 × 4 padding, 8pt apart. */
.Insp-variants{ margin-top: 20px; }
.Insp-label{
  font-size: 11px;
  line-height: 16px;
  color: var(--iw-ink-2);
}
.Insp-chips{
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.Chip{
  flex: none;
  display: block;
  margin: 0;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--iw-chip);
  font: inherit;
  font-size: 10px;
  line-height: 15px;
  color: var(--iw-ink);
  white-space: nowrap;
}
.Chip.is-selected{ background: var(--accent); color: #fff; }

/* colorSection: label, then two 22pt swatch rows, 12pt apart. */
.Insp-colors{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.Insp-row{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
}
.Insp-rowLabel{ color: var(--iw-ink-2); }
/* ColorSwatchButton: a filled circle with a 1pt ring at .secondary 45%,
   so a white or near-white swatch still reads. */
.Swatch{
  display: block;
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw, transparent);
  box-shadow: inset 0 0 0 1px var(--iw-swatch-rim);
}
.Swatch--icon{ --sw: var(--insp-tint, var(--iw-icon-tint)); }
.Swatch--bg  { --sw: var(--insp-bg, var(--iw-preview)); }

/* actionsSection (hero window only). */
.Insp-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 8px;
  margin-top: 20px;
}
.Insp-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 33.5px;
  padding: 0 10px;
  border-radius: 10px;
  white-space: nowrap;
}
.Insp-btn--copy  { background: var(--accent); color: #fff; }
.Insp-btn--file  { background: var(--iw-btn-2); }
.Insp-btn--reveal{
  grid-column: 1 / -1;
  box-shadow: inset 0 0 0 1px var(--iw-btn-rim);
}
/* ShortcutHint: .callout monospaced, faint. */
.Insp-key{
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  opacity: .4;
}
.Insp-btn--copy .Insp-key{ opacity: .55; }


/* ═══════════════════════════════════════════════════════════════════════
   Module 1 — the inspector, live
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Type ───────────────────────────────────────────────────────────────
   The shared Module-title / Module-body sizes, unchanged — Eddy's call:
   the mockup draws the module type larger (58px / 19px), but the product
   pages should read as one site. Only positions come from the mockup. The
   one deliberate difference is the headline FACE: SF Pro Rounded.
   <h2> keeps the browser's .83em top margin on this site, so it's zeroed
   here exactly as Hound.css does. */
.Module--inspector .Module-title,
.Module--libraries .Module-title,
.Module--menubar .Module-title{
  margin-top: 0;
  font-family: "SF Rounded Headline", ui-rounded, "SF Pro Rounded", var(--font);
}

/* The mockup draws the inspector 1.157× life size: its preview is 328.5px
   wide at 1440 against the app's 284pt. `zoom` (not transform) so the
   layout box grows with it.
   Columns, measured at 1440: the preview's left edge 134px into the
   1240px measure, the copy 657px in (52.98%). */
.Module--inspector{ padding-bottom: 0; }
.Hero + .Module--inspector{ padding-top: 151.5px; }
.Module--inspector .Module-inner{
  grid-template-columns: 52.98% minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.Module-media--inspector{ padding-left: 20.4%; }
.Insp--live{
  zoom: 1.157;
  /* the colours a visitor picks, set by Iconic.js */
  --insp-tint: var(--iw-icon-tint);
  --insp-bg: var(--iw-preview);
}
/* The copy isn't centred on the inspector: its headline's ink starts
   146px below the preview's top edge, as drawn. */
.Module--inspector .Module-text{
  padding: 0;
  margin-top: 140.5px;
}

/* The chips scroll sideways, as the app's horizontal ScrollView does, and
   fade out at the edge they continue past. */
.Insp-chipScroll{
  margin: 0 -1px;
  padding: 0 1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 24px)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 24px)), transparent 100%);
}
.Insp-chipScroll::-webkit-scrollbar{ display: none; }
.Insp--live .Chip{ cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.Insp--live .Chip:not(.is-selected):hover{ background: var(--iw-btn-2); }
.Insp--live .Chip:focus-visible,
.Insp--live .Swatch:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.Insp--live .Swatch{ cursor: pointer; }

/* ── ColorSwatchButton's popover ────────────────────────────────────────
   Nine 22pt presets 7pt apart (254pt, the app's own sum), a divider, and
   a "Hex" field, inside 20 × 14 padding. Hangs under the swatch that
   opened it with a small arrow, right-aligned so it never runs off the
   inspector's edge. */
.SwatchPop{
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  z-index: 5;
  width: 294px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--pop-bg, rgba(250,250,250,.92));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.14),
    0 8px 30px rgba(0,0,0,.18);
  color: var(--iw-ink);
}
.SwatchPop[hidden]{ display: none; }
.SwatchPop::before{
  content: "";
  position: absolute;
  top: -6px;
  right: calc(var(--arrow-right, 19px) - 6px);
  width: 12px; height: 12px;
  background: inherit;
  transform: rotate(45deg);
  box-shadow: -.5px -.5px 0 rgba(0,0,0,.1);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.SwatchPop-presets{ display: flex; gap: 7px; }
.SwatchPop-preset{
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  margin: 0; padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px var(--iw-swatch-rim);
  cursor: pointer;
}
.SwatchPop-preset[data-color="accent"]{ --sw: var(--accent); }
.SwatchPop-preset[data-color="#000000"]{ --sw: #000; }
.SwatchPop-preset[data-color="#FFFFFF"]{ --sw: #fff; }
.SwatchPop-preset[data-color="#FF3B30"]{ --sw: #FF3B30; }
.SwatchPop-preset[data-color="#FF9500"]{ --sw: #FF9500; }
.SwatchPop-preset[data-color="#FFCC00"]{ --sw: #FFCC00; }
.SwatchPop-preset[data-color="#34C759"]{ --sw: #34C759; }
.SwatchPop-preset[data-color="#007AFF"]{ --sw: #007AFF; }
.SwatchPop-preset[data-color="#AF52DE"]{ --sw: #AF52DE; }
/* The selected preset: a 2pt accent ring 3pt outside the swatch. */
.SwatchPop-preset.is-on::after{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.SwatchPop-preset:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.SwatchPop-divider{
  height: 1px;
  margin: 14px 0;
  background: var(--iw-separator);
}
.SwatchPop-hex{
  display: flex;
  align-items: center;
  gap: 8px;
}
.SwatchPop-hexLabel{
  flex: none;
  width: 32px;
  font-size: 10px;
  color: var(--iw-ink-2);
}
.SwatchPop-hexInput{
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 5px;
  background: var(--iw-preview);
  box-shadow: inset 0 0 0 .5px var(--iw-btn-rim), 0 .5px 1px rgba(0,0,0,.06);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--iw-ink);
  text-transform: uppercase;
}
.SwatchPop-hexInput:focus{
  outline: none;
  box-shadow: inset 0 0 0 .5px var(--iw-btn-rim), 0 0 0 3px rgba(0,122,255,.35);
}


/* ═══════════════════════════════════════════════════════════════════════
   Module 2 — the icon marquees
   ═══════════════════════════════════════════════════════════════════════ */

/* GitHound's marquee, twice: 150px icons on a 289px pitch, the same
   ~28.9px/s drift (6 logos in 60s there; 12 icons in 120s here), and the
   same edge fade. The second row runs the other way. */
.Module--libraries{
  padding-top: 154px;
  padding-bottom: 0;
  overflow: hidden;
}
/* The line break is in the markup, where the mockup breaks it. */
.Module--libraries .Module-title--center{
  max-width: none;
  margin-bottom: 0;
}

.Marquee{
  --icon: 150px;
  --icon-gap: 139px;
  --row-gap: 118px;
  --count: 12;
  margin-top: 74px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  color: var(--marquee-ink);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.Marquee-track{
  display: flex;
  width: max-content;
  animation: Marquee-left calc(var(--count) * 10s) linear infinite;
}
/* Starts half a pitch along, so the two rows never line up in columns. */
.Marquee-row--reverse .Marquee-track{
  animation-name: Marquee-right;
  margin-left: calc((var(--icon) + var(--icon-gap)) / -2);
}
.Marquee-set{
  display: flex;
  gap: var(--icon-gap);
  padding-right: var(--icon-gap);
}
.Marquee-icon{
  display: block;
  flex: none;
  width: var(--icon);
  height: var(--icon);
}
@keyframes Marquee-left{
  to{ transform: translateX(calc(var(--count) * -1 * (var(--icon) + var(--icon-gap)))); }
}
@keyframes Marquee-right{
  from{ transform: translateX(calc(var(--count) * -1 * (var(--icon) + var(--icon-gap)))); }
  to  { transform: translateX(0); }
}


/* ═══════════════════════════════════════════════════════════════════════
   Module 3 — the menu bar
   ═══════════════════════════════════════════════════════════════════════ */
/* ~216px of gap below the marquee, and 815px tall down to the footer — both
   measured at 1440. The band is drawn behind the whole section; the copy
   is ordinary flow on top of its faded left side. */
.Module--menubar{
  margin-top: 220px;
  min-height: 815px;
  padding-top: 0;
  padding-bottom: 0;
}

/* A patch of the wallpaper behind the menu bar, faded into the page by a
   radial mask — an ellipse, not a feathered rectangle. Fitted to both
   mockups at 1440: the ellipse is centred on the band's hard top edge,
   ~180px in from the right, reaching 790px sideways / 650px down; solid
   to 30% of that radius, half-faded at 65%, then easing out to nothing.
   Fractions of the 1440 × 700 box so it scales. The mask is on
   .MenuBand-wall alone; the bar and the popover are its siblings, so they
   stay solid. */
.MenuBand{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.MenuBand-wall{
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 700px;
  background: #4E5AF0 url('/Assets/Images/Wallpaper-Iconic-v1.webp') right top / cover no-repeat;
  -webkit-mask-image: var(--band-mask);
          mask-image: var(--band-mask);
  /* One smootherstep curve (6t⁵ − 15t⁴ + 10t³, flat at both ends) from 30%
     of the radius out to the edge, sampled every 2.5%. Hand-placed stops
     left visible "steps" where the fall-off rate changed (Eddy). Regenerate
     rather than hand-edit: the stops are only smooth as a set. */
  --band-rx: 54.9%;
  --band-ry: 92.9%;
  --band-x:  87.5%;
  --band-mask: radial-gradient(var(--band-rx) var(--band-ry) at var(--band-x) 0%,
    #000 0%,
    #000 30%,
    rgba(0,0,0,1.000) 32.5%,
    rgba(0,0,0,0.997) 35.0%,
    rgba(0,0,0,0.990) 37.5%,
    rgba(0,0,0,0.977) 40.0%,
    rgba(0,0,0,0.957) 42.5%,
    rgba(0,0,0,0.931) 45.0%,
    rgba(0,0,0,0.896) 47.5%,
    rgba(0,0,0,0.855) 50.0%,
    rgba(0,0,0,0.807) 52.5%,
    rgba(0,0,0,0.754) 55.0%,
    rgba(0,0,0,0.695) 57.5%,
    rgba(0,0,0,0.632) 60.0%,
    rgba(0,0,0,0.567) 62.5%,
    rgba(0,0,0,0.500) 65.0%,
    rgba(0,0,0,0.433) 67.5%,
    rgba(0,0,0,0.368) 70.0%,
    rgba(0,0,0,0.305) 72.5%,
    rgba(0,0,0,0.246) 75.0%,
    rgba(0,0,0,0.193) 77.5%,
    rgba(0,0,0,0.145) 80.0%,
    rgba(0,0,0,0.104) 82.5%,
    rgba(0,0,0,0.069) 85.0%,
    rgba(0,0,0,0.043) 87.5%,
    rgba(0,0,0,0.023) 90.0%,
    rgba(0,0,0,0.010) 92.5%,
    rgba(0,0,0,0.003) 95.0%,
    rgba(0,0,0,0.000) 97.5%,
    rgba(0,0,0,0.000) 100.0%);
}

/* The menu bar, magnified 1.85× — 24px type against the hero's 13, every
   glyph and gap scaled to match, its items centred 37px below the band's
   top edge.
   ⚠️ It's positioned by the SMILEY, not by its right end: Iconic's extra
   always sits dead over the popover's centre (Eddy's rule), and the rest
   of the bar runs rightwards from there — off the screen's right edge on
   some phones, which is fine. The extra is the bar's first item, a 64px
   capsule, so its centre is 32px in from the bar's left edge; the
   popover's centre is 285.7 + 350.6 / 2 = 461px in from the right. */
.MenuBand-bar{
  position: absolute;
  top: 13.5px;
  left: calc(100% - 461px - 32px);
  height: 47px;
  display: flex;
  align-items: center;
  gap: 36px;
  color: #fff;
}
/* Iconic's extra, open: the menu bar's selected-item capsule. */
.MenuBand-extra{
  display: grid;
  place-items: center;
  width: 64px; height: 47px;
  margin: 0 -18px 0 0;
  border-radius: 999px;
  background: rgba(20,30,150,.22);
}
.MenuBand-glyph{ display: block; flex: none; }
.MenuBand-glyph--iconic{ width: 28.7px; height: 28.7px; }
.MenuBand-glyph--wifi  { width: 32.4px; height: 23.3px; }
.MenuBand-glyph--search{ width: 26.1px; height: 26.3px; }
.MenuBand-glyph--cc    { width: 26.5px; height: 26.3px; }
.MenuBand-clock{
  font-size: 24px;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The app's popover (738×938 at 2×, shadow included), hanging under
   Iconic's extra: its panel is 324px wide at 1440, left edge 817. The
   panel is centred in the image (shadow margins 28 / 29px of 738), so the
   image's centre is the panel's centre. */
.MenuBand-popover{
  position: absolute;
  top: 69.5px;
  right: 285.7px;
  width: 350.6px;
  height: auto;
  max-width: none;
}

/* The copy: headline 176px below the band's top, 53px into the measure. */
.Module--menubar .Module-inner{
  position: relative;
  display: block;
  padding: 168px 0 0 53px;
}
.Module--menubar .Module-text{ max-width: 560px; }


/* ═══════════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════════ */
/* Identical to GitHound's footer (Hound.css) — Eddy's rule: the footer is
   the same on every product page. The ONLY Iconic-specific thing about it
   is its dark-mode ground, --footer-bg #1B1E23, set in the dark block. */
.Footer{ padding-top: 106px; }
.Footer-signup{ max-width: 484px; }
.Footer-app{ font-weight: 700; color: var(--ink); margin-right: 2px; }
/* The idle button is drawn pale blue in the mockup, as on GitHound. */
.SignupForm--footer .SignupForm-button{
  background: #C6DCF0;
  color: #fff;
}
.SignupForm--footer.is-ready .SignupForm-button{ background: #0a84ff; }


/* ═══════════════════════════════════════════════════════════════════════
   Tablet: stack the split modules
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px){
  .Module--inspector .Module-inner{
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    justify-items: center;
  }
  .Module--inspector .Module-text{ order: -1; justify-self: stretch; margin-top: 0; }
  .Module-media--inspector{ padding-left: 0; }
  .Hero + .Module--inspector{ padding-top: 120px; }
  .Module--libraries{ padding-top: 120px; }
  .Marquee{ --icon: 120px; --icon-gap: 100px; --row-gap: 88px; margin-top: 56px; }

  /* Module 3 stacks too: copy first, then the band underneath it, with the
     popover centred under the bar instead of hanging off Iconic's extra
     (there's no room to its left any more). No mockup covers this. */
  .Module--menubar{
    display: flex;
    flex-direction: column;
    margin-top: 140px;
    min-height: 0;
  }
  .Module--menubar .Module-inner{ order: -1; padding: 0 14px; }
  .MenuBand{
    position: relative;
    inset: auto;
    height: 600px;
    margin: 48px calc(var(--gutter) * -1) 0;
  }
  /* On a narrow screen the desktop ellipse (54.9% of the width across)
     squeezed all the blue into the right-hand side. Here it's centred
     further left and wide enough to run off the LEFT edge too (Eddy). */
  .MenuBand-wall{
    left: 0;
    height: 100%;
    --band-rx: 125%;
    --band-ry: 100%;
    --band-x:  62%;
  }
  /* The popover is centred in the viewport; the bar follows it, smiley
     over the popover's centre (see .MenuBand-bar). */
  .MenuBand-popover{
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .MenuBand-bar{
    left: 50%;
    transform: translateX(-32px);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   Phones — the hero follows the 390×844 mockup
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* The wallpaper is painted by .Mobile as well as .Hero, so the tag and
     the field's text — white, plus-lighter — have something to brighten.
     Same arrangement as GitHound's; see Hound.css. */
  .Hero,
  .Mobile{
    background: #4E5AF0 url('/Assets/Images/Wallpaper-Iconic-v1.webp') center center / cover no-repeat;
  }

  /* The window picture is Eddy's 2× render for a 390pt screen (888px
     wide, so 113.8% of the screen), its window starting 82pt in and the
     rest running off the right edge. Iconic.js places it: window 60px
     above the name row, shrinking on screens too short for it, always
     starting 21% in so it never leaves the left edge. This CSS is only the
     no-JS fallback — exact at 390×844 (window top 68pt down, as drawn). */
  .MobileWindow-art{
    position: absolute;
    left: 12.3vw;
    top: calc(50% + 7px);
    width: 113.85vw;
    max-width: none;
    transform: translateY(-50%);
  }
  .MobileWindow-art img{ width: 100%; height: auto; }

  .MobileIntro{ z-index: auto; }
  .AppRail{ z-index: -1; }

  /* A deep-blue scrim rising from the bottom, behind the name, the field
     and the app rail, to lift their contrast (Eddy asked for it on this
     page — myPod's phone hero deliberately has none). z-index -2 puts it
     above .Mobile's own wallpaper and under everything else, the rail
     (-1) included; it's still inside .Mobile's stacking context, so the
     plus-lighter text blends with it rather than ignoring it. Eased stops,
     so there's no visible edge where it starts. */
  .Mobile::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 58%;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(to top,
      rgba(0,2,126,.55) 0%,
      rgba(0,2,126,.50) 15%,
      rgba(0,2,126,.40) 32%,
      rgba(0,2,126,.27) 50%,
      rgba(0,2,126,.14) 68%,
      rgba(0,2,126,.05) 85%,
      rgba(0,2,126,0) 100%);
  }

  .BetaTag{
    border-color: rgba(255,255,255,.5);
    mix-blend-mode: plus-lighter;
  }
  .BetaTag-icon,
  .BetaTag-platform{ color: rgba(255,255,255,.9); }
  .BetaTag-label   { color: rgba(255,255,255,.6); }

  .SignupForm--mobile .SignupForm-field{
    border: .5px solid rgba(255,255,255,.22);
    border-radius: 10px;
    background: rgba(0,0,0,.12);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .SignupForm--mobile .SignupForm-input,
  .SignupForm--mobile .SignupForm-input:hover,
  .SignupForm--mobile .SignupForm-input:focus,
  .SignupForm--mobile.is-ready .SignupForm-input:focus,
  .SignupForm--mobile.is-invalid .SignupForm-input{
    height: 56px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
  }
  .SignupForm--mobile .SignupForm-input{
    color: #fff;
    caret-color: #fff;
    mix-blend-mode: plus-lighter;
  }
  .SignupForm--mobile .SignupForm-input::placeholder{ color: rgba(255,255,255,.6); }
  .SignupForm--mobile .SignupForm-input:focus::placeholder{ color: rgba(255,255,255,.4); }
  .SignupForm--mobile .SignupForm-field:focus-within{
    border-color: #007BFF;
    box-shadow: 0 0 0 1.5px #007BFF;
  }
  .SignupForm--mobile.is-ready .SignupForm-field:focus-within{
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
  }
  .SignupForm--mobile.is-invalid .SignupForm-field{
    border-color: #FF6B60;
    box-shadow: 0 0 0 1.5px #FF6B60;
  }

  .AppRail-dot--free{
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(255,255,255,.75);
    mix-blend-mode: plus-lighter;
    transform: translate(var(--dot-x, -99px), var(--dot-y, 0px));
    pointer-events: none;
  }

  /* Modules: no phone mockup, so they follow the other pages' phone rules. */
  .Hero + .Module--inspector{ padding-top: 72px; }
  .Module--inspector .Module-text{ padding-left: 14px; padding-right: 14px; }
  /* The inspector's zoom is set by Iconic.js here: 284pt of inspector into
     the column, never above the desktop's 1.157. (CSS can't divide one
     length by another in every browser yet.) */
  .Module--libraries{ padding-top: 88px; }
  .Module--menubar{ margin-top: 96px; }
  /* The magnified bar would be ~470px wide; scaled to fit a phone. */
  .MenuBand{ height: 470px; margin-top: 40px; }
  /* The bar is scaled with a transform about the smiley's centre (not
     zoom, which would also scale its `left` and pull the smiley off the
     popover's centre). top 1px keeps its centre where the zoomed version
     had it, clear of the popover. */
  .MenuBand-popover{ zoom: .66; }
  .MenuBand-bar{
    top: 1px;
    transform-origin: 32px 50%;
    transform: translateX(-32px) scale(.66);
  }
  .Marquee{ --icon: 96px; --icon-gap: 72px; --row-gap: 64px; margin-top: 44px; }
  .Footer{ padding-top: 88px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .Marquee-track{ animation: none; }
  .Insp-preview,
  .Insp-icon{ transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Dark — the page's colours, and the whole window's paint
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root{
    --page-bg:   #23282E;          /* Eddy's — and the window's own main ground */
    --marquee-ink: #A6A8FD;
    --footer-bg: #1B1E23;

    --iw-sidebar:      #222C35;
    --iw-main:         #23282E;
    --iw-tile:         #2A2F35;
    --iw-tile-on:      #23344D;
    --iw-divider:      #374049;
    --iw-hairline:     rgba(255,255,255,.07);
    --iw-separator:    rgba(255,255,255,.10);
    --iw-ink:          rgba(255,255,255,.85);
    --iw-ink-2:        rgba(255,255,255,.55);
    --iw-ink-3:        rgba(255,255,255,.25);
    --iw-title:        rgba(255,255,255,.9);
    --iw-placeholder:  rgba(255,255,255,.7);
    --iw-knob:         #E3E3E5;
    --iw-count:        rgba(255,255,255,.33);
    --iw-preview:      #1E1E1E;
    --iw-preview-rim:  rgba(255,255,255,.08);
    --iw-chip:         rgba(255,255,255,.066);
    --iw-btn-2:        rgba(255,255,255,.08);
    --iw-btn-rim:      rgba(255,255,255,.22);
    --iw-swatch-rim:   rgba(255,255,255,.25);
    --iw-icon-tint:    #fff;
    --iw-shadow:       0 7px 39px rgba(0,0,0,.72), 0 0 0 .5px rgba(0,0,0,.5), inset 0 .5px 0 rgba(255,255,255,.14);
    --iw-glass:        rgba(70,78,88,.62);
    --iw-glass-rim:    rgba(255,255,255,.09);
    --iw-glass-shadow: 0 1px 2px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.25);
    --iw-glass-hi:     rgba(255,255,255,.12);
    --iw-glass-clear:  rgba(72,79,88,.78);
    --iw-seg-on:       rgba(255,255,255,.12);
    --iw-track:        rgba(255,255,255,.16);
    --iw-edge-fade:    rgba(44,50,57,.8);

    --tl-red:    linear-gradient(#F85F56, #EF6961);
    --tl-yellow: linear-gradient(#FBB400, #FECD2F);
    --tl-green:  linear-gradient(#3BC301, #53C33A);
    --tl-rim:    rgba(0,0,0,.35);
  }
  /* The hero's window follows the scheme here, so its form controls
     should too (Page.css pins the hero to light for the other pages). */
  .Iconic{ color-scheme: dark; }
  .SwatchPop{ --pop-bg: rgba(44,48,54,.94); }

  .Footer-app{ color: var(--ink); }
  .SignupForm--footer .SignupForm-button{
    background: rgba(198,220,240,.28);
    color: rgba(255,255,255,.7);
  }
  .SignupForm--footer.is-ready .SignupForm-button{ background: #0a84ff; color: #fff; }
}