/* =========================================================================
   App_Carousel: the marketing section shell.

   Everything OUTSIDE the phone. The device frame and the thirteen app screens
   are in screens.css, lifted from the Switchgrass sales demo.

   Geometry is read off Figma iq1KZ8YWPE4aOsV2D47Qpv node 2756:6162, not
   eyeballed: 1440x800 frame, 1252 content row, horizontal gap 64, left column
   820, right column 368. Left column vertical rhythm 64 / 32 / 20 / 16, tile
   grid at 263x64 with a 16 gap, tile radius 6, icon button 48x48 radius 6.
   ========================================================================= */

:root {
  /* Brand surface tokens, values shared with prototypes/cattle-product-page.html
     and prototypes/select-country/home.html rather than re-picked here. */
  --ac-white: #FFFFFF;
  --ac-cream: #FBF5EE;          /* the tile fill in Figma */
  --ac-sand: #E9E7D4;           /* VI beige-medium, the active-tile fill */
  --ac-grey-light: #F5F5F5;     /* the icon-button fill in Figma */
  --ac-grey-border: #E9EAEB;
  --ac-text-primary: #181D27;   /* the heading fill in Figma */
  --ac-text-secondary: #535862; /* the supporting-text fill in Figma */
  --ac-text-tertiary: #717680;
  --ac-green-tint: #EDF6E3;
  /* brand-green from prototypes/select-country/home.html. The accent green
     #5FA526 the rest of the library reaches for first measures 3.04:1 on white,
     which fails text, so every green here that carries a letter, an icon or a
     focus ring is the deep one. */
  --ac-green-deep: #396317;
  --ac-dark: #151C17;
  /* --nf-bg-brand from tokens.css: the same vivid green the phone's own
     primary buttons (Log activity, Move herd) use, reused here rather than
     picked fresh so the outer chrome and the app screens agree. */

  --ac-radius-sm: 6px;
  --ac-radius-full: 9999px;
}

.ac-section *,
.ac-section *::before,
.ac-section *::after { box-sizing: border-box; }

.ac-section {
  background: var(--ac-white);
  color: var(--ac-text-primary);
  font-family: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 64px 0;
}

.ac-container {
  width: 100%;
  /* This section is framed inside section-shell, which already caps the width and applies the
     site gutter (clamp(20px, 4vw, 64px) at every breakpoint). So the export's own container did
     both a second time: a 1252 cap plus 24px padding, leaving this section narrower than its
     neighbours and its text out of line with theirs. The cap is kept only to bound the
     standalone /embeds/ view — above the widest frame the shell can hand us (1440 - 128 = 1312),
     so it never bites in a page — and the gutter has exactly one owner. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* The Figma row: copy column beside the phone, 64 apart. The phone column is
   sized from the 368 rectangle in the frame. */
/* align-items: start, not center: with centering, every time the caption's
   text wraps to a different number of lines the whole copy column re-centres
   against the phone's fixed height, so the heading at its top visibly drifts
   up and down. Top-aligned, the heading's position is fixed and only the
   space below it breathes. */
.ac-row {
  display: grid;
  grid-template-columns: minmax(0, 820fr) 368px;
  gap: 64px;
  align-items: start;
}

/* ------------------------------------------------------------ the header */

/* align-self:stretch (the row is align-items:start) makes this column as tall as the
   stage, which is what lets the disclaimer sit level with the phone's bottom edge. */
.ac-copy { display: flex; flex-direction: column; gap: 35px; align-self: stretch; }

.ac-head { display: flex; flex-direction: column; gap: 20px; }

.ac-head-top { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

.ac-badge {
  display: none;
  align-items: center;
  padding: 4px 12px;
  border-radius: 16px;
  background: var(--ac-green-tint);
  color: var(--ac-green-deep);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.ac-heading {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.25;
  font-weight: 400;
  color: var(--ac-text-primary);
  text-wrap: balance;
}

.ac-support {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 28px;
  color: var(--ac-text-secondary);
  text-wrap: pretty;
}

/* ------------------------------------------------------------- the tiles */

.ac-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--ac-grey-border);
  border-radius: var(--ac-radius-sm);
  background: var(--ac-white);
  color: var(--ac-text-primary);
  font: inherit;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.14s ease;
}

/* No boxed-icon background: the icon sits straight on the tile, coloured
   brand green when idle, so the tile stays a single flat surface instead of
   a card-within-a-card. */
.ac-tile-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--nf-bg-brand);
  transition: color 0.18s ease;
}

/* The DS icons carry their own fill or stroke per path, so the tile only sets
   the colour and lets each path resolve currentColor its own way. */
.ac-tile-ic svg { width: 24px; height: 24px; display: block; }

.ac-tile-label { flex: 1 1 auto; }

.ac-tile:hover { background: var(--ac-grey-light); }

.ac-tile:focus-visible {
  outline: 2px solid var(--nf-bg-brand);
  outline-offset: 2px;
}

.ac-tile[aria-selected="true"] {
  background: var(--ac-sand);
  border-color: var(--ac-sand);
  color: var(--ac-text-primary);
  cursor: default;
}

.ac-tile[aria-selected="true"] .ac-tile-ic { color: var(--ac-text-primary); }

.ac-tile:active { transform: translateY(1px); }
.ac-tile[aria-selected="true"]:active { transform: none; }

/* ----------------------------------------------------------- the caption */

/* 660px, not the 560px the body reads at: the longest caption title ("Spot
   problems before they become emergencies") needs 618px at the 28px top of the
   clamp, and wrapping one title but not the other five made the block jump
   height as you moved between tiles. The body keeps its own 560px measure
   below, so only the headline gets the extra room. */
.ac-caption { max-width: 660px; margin-top: 24px; }

/* Fades out, JS swaps the text while invisible, fades back in: see
   fadeSwapText in app-carousel.js. Plain opacity, no movement, so it agrees
   with the phone's own screen-in/out rather than fighting it. */
.ac-caption-copy,
.ac-count { transition: opacity 0.16s ease; }
.ac-caption-copy.is-swapping,
.ac-count.is-swapping { opacity: 0; }

.ac-caption-title {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ac-text-primary);
}

.ac-caption-body {
  margin: 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ac-text-secondary);
}

/* the closing beat's benefit list, shown in place of .ac-caption-body */
.ac-caption-points {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ac-text-secondary);
}
.ac-caption-points li { position: relative; padding-left: 20px; }
.ac-caption-points li + li { margin-top: 6px; }
.ac-caption-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ------------------------------------------------- the disclaimer (SW-5012)

   margin-top:auto drops it to the foot of .ac-copy, and stretching that column
   makes its foot the row's foot — which is the phone's bottom edge, since the
   stage is the taller of the two. */
.ac-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: auto 0 0;
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ac-text-tertiary);
  text-wrap: pretty;
}

.ac-disclaimer-ic {
  flex: none;
  width: 14px;
  height: 14px;
  /* Optical centring against the first line of 13px/1.45 text. */
  margin-top: 2px;
}

/* Once every feature has played to its closing beat and Done has been
   pressed: the tiles go back to their resting, unselected look, and the
   whole caption (closing line included) goes with them, so the section
   settles back to just the tiles rather than holding onto the last thing
   read. */
.ac-caption.is-collapsed .ac-caption-copy,
.ac-caption.is-collapsed .ac-nav,
.ac-caption.is-collapsed .ac-count { display: none; }

.ac-caption.is-closing .ac-caption-body,
.ac-caption.is-closing .ac-caption-points { color: var(--ac-text-primary); }

.ac-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

/* Pill, not the library's 6px radius: reverted by request. Colour is also a
   deliberate departure from that component's own Primary (green fill): Next
   is the same near-black as the rest of the section's UI chrome (--ac-dark),
   not the library's green Hierarchy=Primary. Back stays Hierarchy=Tertiary
   (no fill, no border, text/icon only). */
.ac-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--ac-radius-full);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--ac-dark);
  color: var(--ac-white);
  transition: background 0.16s ease, transform 0.14s ease, opacity 0.16s ease;
}

.ac-btn:hover { background: #22301F; }
.ac-btn:active { transform: translateY(1px); }

.ac-btn:focus-visible {
  outline: 2px solid var(--ac-green-deep);
  outline-offset: 2px;
}

.ac-btn--back {
  background: transparent;
  color: #414651;
}

.ac-btn--back:hover { background: var(--ac-grey-light); }

/* #A4A7AE is the component's own disabled-state token (read off the Figma
   instance, not opacity applied to the enabled colour), so disabled reads as
   a genuinely quieter grey rather than a faded one. */
.ac-btn--back[disabled] { color: #A4A7AE; cursor: default; background: transparent; }
.ac-btn--back[disabled]:active { transform: none; }

.ac-btn[disabled] { opacity: 0.35; cursor: default; }
.ac-btn[disabled]:active { transform: none; }

.ac-btn svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; }

.ac-count {
  margin: 14px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ac-text-tertiary);
}

/* ------------------------------------------------------- the phone column

   The device is drawn at its real 390x844 in screens.css and scaled to the
   368-wide column the Figma frame gives it, so one set of screens serves every
   breakpoint. Scale, not a reflow: a screen that reflows stops being the
   drawing that was approved. */

.ac-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-phone-fit {
  --ac-phone-scale: 0.886;
  width: calc(390px * var(--ac-phone-scale));
  height: calc(844px * var(--ac-phone-scale));
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-phone-fit .phone {
  transform: scale(var(--ac-phone-scale));
  transform-origin: center center;
  margin: calc(-844px * (1 - var(--ac-phone-scale)) / 2)
          calc(-390px * (1 - var(--ac-phone-scale)) / 2);
}

/* --------------------------------------------------------- touch affordance */

.ac-stage { touch-action: pan-y; }

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

@media (max-width: 1100px) {
  .ac-row { grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; }
  .ac-phone-fit { --ac-phone-scale: 0.78; }
}

@media (max-width: 900px) {
  .ac-section { padding: 48px 0; }

  /* One column. display:contents on the copy wrapper lets the caption travel
     below the phone while the heading and tiles stay above it, without moving
     anything in the source order. */
  .ac-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .ac-copy { display: contents; }
  .ac-head { order: 1; }
  .ac-tiles { order: 2; }
  .ac-stage { order: 3; }
  .ac-caption { order: 4; max-width: none; }
  /* .ac-copy is display:contents here, so this needs its own order or it would
     default to 0 and land above the heading. No auto margin to push against. */
  .ac-disclaimer { order: 5; margin-top: 0; max-width: none; }

  .ac-phone-fit { --ac-phone-scale: 0.82; }

  /* Six tiles will not sit three across at this width, so they become the
     scroll-snap chip row the rest of the prototype library uses. Bleed to the
     viewport edges so the row reads as scrollable rather than clipped. */
  .ac-tiles {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px;
    padding: 4px 24px;
  }

  .ac-tiles::-webkit-scrollbar { display: none; }

  .ac-tile {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

/* Below this the phone and a caption stacked under it cannot both be on screen
   at once. A 375x812 handset leaves roughly 700px once browser chrome is out,
   and the phone alone is ~590px of that, so a block of text below it always
   pushed either the tiles or the words off screen: you tapped a tile and could
   not see what changed.

   So on handsets the caption stops being a block under the phone and becomes a
   sheet over the bottom of it, which is the shape the app itself uses for its
   own bottom sheets. Tiles, phone and words are then all on screen together.
   The cost is deliberate: the lower third of each app screen is covered on
   mobile, so anything that lives down there (the Record heat button, the lower
   stat cards) is hidden at this width. */
@media (max-width: 700px) {
  .ac-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    --ac-phone-scale: 0.7;
  }

  /* grid-column is not optional here: without it the caption auto-places into
     an implicit second column instead of landing on top of the stage. */
  .ac-head  { grid-row: 1; grid-column: 1; }
  .ac-tiles { grid-row: 2; grid-column: 1; }
  .ac-stage { grid-row: 3; grid-column: 1; }
  /* Row 4, below the sheet that overlaps the phone in row 3. */
  .ac-disclaimer { grid-row: 4; grid-column: 1; }

  /* Inherit rather than restate the number, so the sheet below cannot drift
     out of step with the phone it is sitting on. */
  .ac-phone-fit { --ac-phone-scale: inherit; }

  /* Same grid cell as the stage: this is the overlap. The stage row is exactly
     as tall as the phone, so align-self:end puts the sheet on the phone's
     bottom edge, and the width/radius are the phone's own, scaled. */
  .ac-caption {
    grid-row: 3;
    grid-column: 1;
    z-index: 2;
    align-self: end;
    justify-self: center;
    width: calc(390px * var(--ac-phone-scale));
    max-width: none;
    margin: 0;
    padding: 40px 18px 20px;
    border-radius: 0 0 calc(40px * var(--ac-phone-scale))
                        calc(40px * var(--ac-phone-scale));
    /* Stops in px, not %, and reaching near-solid within 26px: a long
       percentage fade left the app content under it half-veiled, which read as
       a rendering fault rather than a sheet. A short fade gives the sheet a
       readable top edge and leaves what it covers honestly covered. No
       backdrop blur for the same reason. */
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.97) 26px,
      rgba(255, 255, 255, 0.99) 100%);
    /* The swipe gesture belongs to the phone underneath. */
    pointer-events: none;
  }

  .ac-caption-title {
    font-size: 17px;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  .ac-caption-body {
    font-size: 13.5px;
    line-height: 1.45;
    max-width: none;
  }
}

/* Purely an overflow guard, which is why it is keyed so low. At 0.7 the phone
   is 273px and the section's own padding takes 48px, so anything from about
   340px up has room for it; below that the phone has to come in or the page
   scrolls sideways. Everything else about how big the phone should be is a
   question of height, handled below. */
@media (max-width: 340px) {
  .ac-row { --ac-phone-scale: 0.62; }
}

/* The binding constraint on a handset is height, not width: the tiles and the
   phone together have to clear the viewport or you are back to scrolling
   between the control and the thing it controls. Tall handsets (812px and up)
   keep the 0.7 phone; shorter ones step it down rather than let it push the
   tiles off the top. Height wins over the width rule above, so these come
   last. */
/* The sheet has to come down with the phone. Its height is set by its words,
   so leaving the type alone while the phone shrinks turns a third of the
   screen covered into two thirds, and the app underneath stops being visible
   enough to be worth showing. */
@media (max-width: 700px) and (max-height: 720px) {
  .ac-row { --ac-phone-scale: 0.55; }
  .ac-caption { padding: 32px 14px 16px; }
  .ac-caption-title { font-size: 15px; margin-bottom: 5px; }
  .ac-caption-body { font-size: 12.5px; }
}

@media (max-width: 700px) and (max-height: 620px) {
  .ac-row { --ac-phone-scale: 0.46; }
  .ac-caption { padding: 24px 12px 12px; }
  .ac-caption-title { font-size: 13px; margin-bottom: 4px; }
  .ac-caption-body { font-size: 11px; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-tile,
  .ac-btn,
  .ac-caption-copy,
  .ac-tile-ic { transition: none; }
}