/* ==========================================================================
   static/css/try-cta.css  ·  the "Try Mirror Ai" controls
   ==========================================================================
   Styles for the render macros in templates/components/try_cta.html:
     .try-cta    filled accent button (the one primary action in its view)
     .try-chip   a suggested question, as a link
     .try-card   content-styled card: heading, quoted question, button, note
     .try-sticky the slim dismissible bar (components/try_sticky.html)

   REQUIRES site-tokens.css. Every colour, radius, duration and type size below
   is a token from that file; none is introduced here.

   The header's "Try it free" item is NOT styled here. It is `.sh-cta` in
   site-chrome.css, because the header renders on pages that never load this
   file.

   SPACING IS LITERAL ON PURPOSE. --space-1..7 exist in site-tokens.css AND
   existed in the legacy workspace stylesheets with different values (the
   responsive one clamped them by viewport), and these controls must look the
   same on every shell they are dropped into. site-chrome.css avoids those names for the
   same reason. The values below are the site-tokens scale (8/12/16/24).

   COLOUR IS NEVER THE ONLY SIGNAL. The button is a filled shape with a text
   label and an arrow; the chip is a bordered shape with its question as text.
   Neither relies on cyan alone to read as a control.
   ========================================================================== */

/* ---- button ------------------------------------------------------------- */
.try-cta {
  position: relative; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--font-ui); font-size: var(--type-u5); font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--_ink-on-accent);
  background: var(--grad-accent);
  border: 0; border-radius: var(--r-pill);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 24px -10px var(--accent-glow);
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.try-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px var(--accent-glow); }
.try-cta__arrow { flex: none; transition: transform var(--dur-2) var(--ease-out); }
.try-cta:hover .try-cta__arrow { transform: translateX(3px); }
.try-cta:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ---- chip --------------------------------------------------------------- */
.try-chip {
  box-sizing: border-box;
  display: inline-flex; align-items: center;
  min-height: 44px; max-width: 100%;
  padding: 8px 16px;
  font-family: var(--font-ui); font-size: var(--type-u5); font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--ink-2);
  background: var(--sf-1);
  border: 1px solid var(--line-3); border-radius: var(--r-pill);
  text-decoration: none; text-align: left;
  overflow-wrap: anywhere;
  transition: color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.try-chip:hover {
  color: var(--ink-1); border-color: var(--accent-line-hi); background: var(--accent-wash);
}
.try-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- card ---------------------------------------------------------------
   THE HOUSE CARD LANGUAGE, not a new one: the hairline, radius, faint top-lit
   gradient and display-face title of `.ind-card` / `.ind-persona`
   (css/individual.css), restated here with no page-private tokens so it renders
   the same on every shell. It reads as content, not as an ad banner: no glow,
   no fill, the only accent is the one button. */
.try-card {
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  font-family: var(--font-ui);
  text-align: left;
}
.try-card__copy { display: flex; flex-direction: column; gap: 8px; }
.try-card__heading {
  margin: 0;
  font-family: var(--font-display); font-size: var(--type-u2); font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug); color: var(--ink-1);
}
/* Measures in ch ON the paragraph, swept with test/e2e/width_audit.py's
   tripwire: 62ch on the 14px lede read 79 characters on /individual, so 56. */
.try-card__lede,
.try-card__question {
  margin: 0; max-width: 56ch;
  font-size: var(--type-u5); line-height: var(--lh-body); color: var(--ink-2);
}
.try-card__question q { font-style: italic; color: var(--ink-1); }
.try-card__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.try-card__chips li { display: flex; max-width: 100%; }
.try-card__action {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.try-card__note {
  margin: 0; max-width: 56ch;
  font-size: var(--type-u6); line-height: var(--lh-body); color: var(--ink-3);
}

/* ---- card placements ------------------------------------------------------
   --section  a card closing (or between) a page's sections
   --wide     from 900px the copy and chips sit left and the action right, so a
              full-content-width card is not one tall ragged column
   --pricing / --404 / --listing / --in-article / --article-end  per-host spacing */
.try-card--section { margin-top: 40px; }
@media (min-width: 900px) {
  .try-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    grid-template-areas: "copy action" "chips action";
    column-gap: 40px; row-gap: 16px;
    align-items: center;
  }
  .try-card--wide .try-card__copy { grid-area: copy; }
  .try-card--wide .try-card__chips { grid-area: chips; }
  .try-card--wide .try-card__action {
    grid-area: action;
    flex-direction: column; align-items: flex-start; justify-self: end;
  }
  .try-card--wide .try-card__action .try-card__note { max-width: 32ch; }
  .try-card--wide:not(:has(.try-card__chips)) { grid-template-areas: "copy action"; }
}
.try-card--pricing { margin: 0 auto 40px; max-width: 960px; }
.try-card--404 { width: min(100%, 560px); margin: 24px auto 0; }
.try-card--listing { margin: 32px 0; }
.try-card--article-end { margin: 40px 0; }

/* PROSE HOSTS. Inside an article (.article-content) or a reading page
   (.rd-prose / .rd-section) the host's prose rules reach into the card: link
   colour and underline (a cyan label on the cyan button is 1:1), paragraph
   size and gaps, the arrow list marker on the chips. Each is put back here,
   two classes deep so it outranks the host's one-class-plus-element rules.
   The heading-sized <p> keeps its heading look where the host uses a <p>. */
.article-content .try-card { margin: 40px 0; }
.article-content .try-card p,
.rd-prose .try-card p,
.rd-section .try-card p {
  margin: 0; font-size: var(--type-u5); line-height: var(--lh-body); color: var(--ink-2);
}
.article-content .try-card .try-card__heading,
.rd-prose .try-card .try-card__heading {
  font-family: var(--font-display); font-size: var(--type-u2); font-weight: 600;
  line-height: var(--lh-snug); color: var(--ink-1);
}
.article-content .try-card .try-card__note,
.rd-prose .try-card .try-card__note,
.rd-section .try-card .try-card__note { font-size: var(--type-u6); color: var(--ink-3); }
.rd-prose .try-card ul,
.rd-section .try-card ul { margin: 0; }
.rd-prose .try-card li,
.rd-section .try-card li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.rd-prose .try-card li::before,
.rd-section .try-card li::before { content: none; }
.article-content .try-card a,
.rd-prose .try-card a,
.rd-section .try-card a { border-bottom: 0; text-decoration: none; }
.article-content .try-card a.try-cta,
.rd-prose .try-card a.try-cta,
.rd-section .try-card a.try-cta { color: var(--_ink-on-accent); }
.article-content .try-card a.try-chip,
.rd-prose .try-card a.try-chip,
.rd-section .try-card a.try-chip { color: var(--ink-2); }
.article-content .try-card a.try-chip:hover,
.rd-prose .try-card a.try-chip:hover,
.rd-section .try-card a.try-chip:hover { color: var(--ink-1); }

/* ---- sticky bar (components/try_sticky.html, driven by try-cta.js) --------
   Hidden until try-cta.js decides otherwise; never shown without script,
   because without script it could not be dismissed. `visibility` (not only
   opacity) takes it out of the tab order and the accessibility tree while it
   is off screen. z-index is the rail band: above page content, under the
   header (whose mobile drawer must cover it) and far under the modal band. */
.try-sticky {
  position: fixed; z-index: var(--z-rail);
  box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-ui);
  background: var(--sf-glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-3);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  visibility: hidden; opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out),
              visibility 0s linear var(--dur-3);
}
.try-sticky[hidden] { display: none; }
.try-sticky.is-shown {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
}
.try-sticky__text {
  margin: 0; min-width: 0;
  font-size: var(--type-u5); font-weight: 500; line-height: var(--lh-snug);
  color: var(--ink-1);
}
.try-sticky__cta { flex: none; }
.try-sticky__dismiss {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0; padding: 0;
  font: inherit; font-size: 22px; line-height: 1;
  color: var(--ink-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer;
}
.try-sticky__dismiss:hover { color: var(--ink-1); border-color: var(--line-3); }
.try-sticky__dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --try-sticky-lift is set by try-cta.js only on pages whose legacy chat bubble
   shares this corner (the Knowledge Hub); everywhere else it is unset. */
/* phone and tablet: a slim full-width bar, 64px plus the home-indicator inset */
@media (max-width: 1099px) {
  .try-sticky {
    left: 0; right: 0; bottom: var(--try-sticky-lift, 0px);
    min-height: 64px; max-height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
    border-width: 1px 0 0; border-radius: 0;
  }
  .try-sticky__text { flex: 1 1 auto; }
  .try-sticky__cta { margin-left: auto; }
}
/* below 420px the question and the button no longer fit one 64px row; the
   button label carries the whole offer on its own */
@media (max-width: 419px) {
  .try-sticky__text { display: none; }
  .try-sticky__cta { flex: 1 1 auto; margin-left: 0; }
}
/* desktop: a compact card in the bottom-right corner */
@media (min-width: 1100px) {
  .try-sticky {
    right: 24px; bottom: max(24px, var(--try-sticky-lift, 0px));
    padding: 12px 8px 12px 20px;
    border-radius: var(--r-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .try-cta, .try-cta__arrow, .try-chip { transition: none; }
  .try-sticky, .try-sticky.is-shown { transition: none; transform: none; }
  .try-cta:hover, .try-cta:hover .try-cta__arrow { transform: none; }
}