/* ==========================================================================
   /review-insights — page styles.

   Two rules from docs/pipeline/REDESIGN-COMMON.md override the product inside every port below, and nothing else
   does: nothing renders under 13px (the product's captions run 10 to 12.5px), and muted text is #5b6076 on tinted
   grounds (#5b6076 measures 6.21:1 on white and 5.80 on --v2-card). Each override is noted where it happens.
   Ported from cloutly-frontend at origin/master: InsightsRedesign/components/LocationsCard.js,
   .../components/Observations.js, .../components/AnswerView.js, .../index.module.scss.
   ========================================================================== */

/* ---------- hero: the Ask moment ---------- */
.ins-page .hero-moment { display: flex; justify-content: flex-end; padding: 12px 0; }
.ins-page .hero-moment .moment { max-width: 440px; gap: 14px; }
/* the Ask mark, the product's own ✦ glyph */
.ins-mk { margin-right: 7px; color: var(--blue); font-size: 14px; line-height: 1; }
.ins-page .m-ask p { margin-top: 12px; font: 400 15.5px/1.55 var(--font-body); }
.ins-page .m-ask p b { color: var(--blue); font-weight: 700; }
/* the caption the product prints under every answer */
.ins-cap { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--v2-line); font: 400 13px/1.45 var(--font-body); color: #6b7088; }
/* the evidence card reads as the attachment to the answer above it, not a second card of equal weight: flat, tinted,
   hairline instead of a shadow */
.ins-page .hero-moment .ins-ev { background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.ins-ev blockquote { margin: 6px 0 0; font: 400 15px/1.55 var(--font-body); color: var(--ink); }
.ins-ev-who { display: block; margin-top: 10px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }
/* the product's own highlight: a gradient underline behind the matched phrase, not a filled box
   (AnswerView's `.snip mark`, index.module.scss:485-490) */
.ins-page mark { background: linear-gradient(transparent 55%, rgba(0, 61, 255, .18) 55%); color: inherit; font-weight: 700; padding: 0 1px; }
/* one shared question shape: a box you could type into, in the hero and in the device alike */
.ins-page .m-q { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #d5d9e6; color: var(--ink); font: 500 15px/1.4 var(--font-display); }
/* a real star row rather than a run of glyphs */
.ins-stars { display: inline-flex; gap: 1px; vertical-align: -1px; font-size: 13px; line-height: 1; }
.ins-stars i { font-style: normal; color: #e2951f; }
.ins-stars i.is-off { color: #ccd0dc; }
/* the two portraits sit clear of the cards they decorate rather than cropping their corners */
@media (min-width: 992px) {
  .ins-page .pp--tl { left: -13%; top: -6%; }
  .ins-page .pp--br { right: -12%; bottom: -5%; }
}
/* the shared .m-from runs at 12.5px; on this page it clears 13px */
.ins-page .m-from { font-size: 13px; }

/* the plan gate in the fine print links to the prices, so the question it raises is answered on the spot */
.ins-page .v2-hero .fine a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ins-page .v2-hero .fine a:hover { color: var(--ink); }

/* ---------- section furniture: left-aligned heads, so the rhythm is not three centred ones ---------- */
.ins-page .ins-head { max-width: 760px; margin: 0 0 36px; }
.ins-page .ins-head .sub { margin-inline: 0; }
.ins-page .ins-h2 { margin-bottom: 0; }
.ins-page .ins-tight { padding-top: 0; }

/* ==========================================================================
   the device: four of the questions Cloutly suggests, over a plain Ask box
   ========================================================================== */
.ins-ask { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); padding: 22px 22px 24px; }

.ins-qs { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-q { padding: 13px 16px; border: 0; border-radius: 12px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 500 14.5px/1.35 var(--font-display); color: var(--v2-body); text-align: left; cursor: pointer; transition: box-shadow .22s var(--ease-out), background-color .22s var(--ease-out), color .22s; }
.ins-q:hover { color: var(--ink); box-shadow: inset 0 0 0 1px #b9bfd2; }
.ins-q.is-on { background: #f0f4ff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--blue); }
.ins-q:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.no-motion .ins-q { transition: none; }

.ins-bar { display: flex; align-items: stretch; gap: 8px; margin-top: 18px; }
.ins-input { flex: 1; min-width: 0; padding: 14px 16px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #d5d9e6; font: 400 15.5px/1.4 var(--font-body); color: var(--ink); }
.ins-input::placeholder { color: #6b7088; }
.ins-input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--blue); }
.ins-page .ins-go { flex: none; padding: 0 26px; border-radius: 14px; }

.ins-out { display: grid; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--v2-line); }
.ins-ans { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .28s var(--ease-out); }
.ins-ans.is-on { visibility: visible; opacity: 1; }
.no-motion .ins-ans { transition: none; }
.ins-a { margin: 0; max-width: 60ch; font: 400 19px/1.5 var(--font-body); color: var(--ink); }
.ins-a b { color: var(--blue); font-weight: 700; }
.ins-ans--none .ins-a { font-size: 17px; color: var(--v2-body); }

/* "The reviews behind the number", ported: the card's own heading, the product's `{N} shown · newest first`
   sub-line (`.blkSub`, 12.5px there, 13 here), then one `.snip` per review — a 28px initials avatar, the review in
   curly quotes with the matched phrase marked, and a meta line joined with middots. Two deviations, both declared in
   the redesign note: the quote stays at the page's 15px rather than the product's 12.5px because this card is three
   times as wide as the product's, and the avatar ground is the dark stop of the product's own gradient
   (#6a5ae0 -> #5a49d6, 5.06:1 and 6.28:1 against the white initials; the light stop #9087e5 measures 3.13 and fails). */
.ins-ev-card { margin-top: 18px; padding: 16px 18px 18px; border-radius: 14px; background: var(--v2-card); }
.ins-ev-sub { display: block; margin-top: 2px; font: 400 13px/1.45 var(--font-body); color: #5b6076; }
.ins-rev { display: flex; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v2-line); }
.ins-rev:first-of-type { margin-top: 10px; }
.ins-avv { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #5a49d6, #6a5ae0); color: #fff; font: 800 13px/1 var(--font-display); letter-spacing: .01em; }
.ins-rev blockquote { margin: 0; max-width: 66ch; font: 400 15px/1.55 var(--font-body); color: var(--ink); }
.ins-rev .ins-ev-who { margin-top: 4px; color: #5b6076; }
/* the review's source as its mark, not its name */
/* styles.css sets `img, svg { display: block }`, so the mark has to be put back inline or the meta line breaks */
.ins-src { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; }

.ins-ask-note { margin-top: 20px; max-width: 78ch; font-size: 13px; }

/* ==========================================================================
   the Ask lobby: one sentence beside the product's noticing card
   ========================================================================== */
.ins-lobby { display: grid; grid-template-columns: minmax(240px, .84fr) minmax(320px, 1.16fr); gap: 26px 44px; align-items: center; margin-top: 46px; }
.ins-lobby-copy h3 { font: 700 22px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.ins-lobby-copy p { margin-top: 10px; max-width: 44ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); }
.ins-lobby-copy a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ins-lobby-copy a:hover { color: var(--ink); }

/* Observations.js + `.noticedCard` / `.nrow` / `.dot` / `.nt` / `.na` (index.module.scss:846-905). The product's card
   is 660px wide with 16px 20px 6px of padding, a 12px muted header, hairline-topped rows, a 6px #c6cbda dot that goes
   crit red on a rating drop, 12.5px body text and a 12px blue action on the right. Header, text and action are all
   lifted to 13px here. */
.ins-noticed { max-width: 660px; padding: 16px 20px 8px; border-radius: 16px; background: #fff; border: 1px solid #e7e9f2; box-shadow: 0 1px 2px rgba(16, 18, 26, .05), 0 12px 32px -20px rgba(16, 18, 26, .22); }
.ins-noticed-h { padding-bottom: 8px; font: 600 13px/1.4 var(--font-display); color: #5b6076; }
.ins-nrow { display: flex; align-items: baseline; gap: 10px; padding: 11px 2px; border-top: 1px solid #eef0f6; }
.ins-ndot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #c6cbda; transform: translateY(-1px); }
.ins-nt { flex: 1; font: 400 13px/1.55 var(--font-body); color: #4a5065; }
.ins-nrow.is-crit .ins-ndot { background: #c93a3a; }
.ins-na { margin-left: auto; white-space: nowrap; font: 700 13px/1.4 var(--font-display); color: var(--blue); }

/* ==========================================================================
   the Locations card, ported whole, then two notes keyed to its columns
   ========================================================================== */
/* `.card` + `.blk` + `.blkHead` (index.module.scss:85-91, 435-444, 1107-1125): 16px radius, 1px #e7e9f2 border, the
   two-layer shadow, 20px 22px of padding, a 16px/800 h3 with the computed digest under it, and a ghost button on the
   right. The card ships no sort control (sortable={false}, LocationsCard.js:211), so neither does this. */
.ins-loc { padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid #e7e9f2; box-shadow: 0 1px 2px rgba(16, 18, 26, .05), 0 12px 32px -20px rgba(16, 18, 26, .22); }
.ins-loc-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.ins-loc-head > div { flex: 1; min-width: 0; }
.ins-loc h3 { font: 800 16px/1.3 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.ins-loc-sub { display: block; margin-top: 3px; font: 400 13px/1.45 var(--font-body); color: #5b6076; }
/* `.btn` + `.btnGhost` (index.module.scss:507-541): 9px radius, 7px 12px, 1px #e7e9f2, 12.5px/700 lifted to 13 */
.ins-ghost { display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; border: 1px solid #e7e9f2; background: #fff; font: 700 13px/1.3 var(--font-display); color: #4a5065; white-space: nowrap; }
.ins-ghost svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* statusAsOfNote, the product's .caption above the table (12px there, 13 here for the site's floor) */
.sc-cap { margin: 0 0 12px; font: 400 13px/1.5 var(--font-body); color: #5b6076; }
.ins-scroll { overflow-x: auto; margin: 0 -14px; padding: 0 14px; }

/* the Locations table, the way the product prints it: no Total column, a blank Rank header with the number in a badge
   on the row, two decimals on every rating, the two delta shapes, and Status doing the flagging. */
.sctab { width: 100%; border-collapse: separate; border-spacing: 0; }
.sctab th, .sctab td { padding: 11px 8px; text-align: right; white-space: nowrap; }
.sctab thead th { border-bottom: 1px solid #e7e9f2; font: 600 13px/1.4 var(--font-display); color: #5b6076; }
.sctab tbody th, .sctab tbody td { border-bottom: 1px solid #eef0f6; font: 500 14.5px/1.35 var(--font-display); color: #4a5065; font-variant-numeric: tabular-nums; }
.sctab tbody tr:last-child th, .sctab tbody tr:last-child td { border-bottom: 0; }
.sctab .sc-rank { width: 44px; padding-left: 0; text-align: left; color: #5b6076; }
.sctab .sc-name { text-align: left; }
.sctab tbody th.sc-name { color: var(--ink); font-weight: 600; }
.sctab .sc-status { padding-right: 0; text-align: right; }
.sc-abbr { display: none; }
/* .rankb, with the product's 24px square and 8px radius; .r1 takes its warn tone */
.sc-rankb { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #f0f1f7; color: #4a5065; font: 700 13px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.sc-rankb.is-r1 { background: #fff2dd; color: #8a5300; }
/* .tdelta: 11px in the product, 13 here for the site's floor. formatRatingDelta sits tight against the rating,
   countChangeCell carries its own leading space in the string. */
.sc-td { margin-left: 5px; font: 700 13px/1 var(--font-display); }
.sc-td.is-up { color: #226b3c; }
.sc-td.is-down { color: #b0143c; }
.sc-td.is-flat { color: #5b6076; }
.sc-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 600 13px/1.35 var(--font-display); }
.sc-nb { white-space: nowrap; }
.sc-pill.is-crit { background: #ffe9ef; color: #b0143c; }
.sc-pill.is-warn { background: #fff2dd; color: #8a5300; }
.sc-pill.is-good { background: #e9f4ec; color: #226b3c; }

/* the two notes: each names a column of the card above and ticks up toward it, so the eye maps note to column before
   it reads either. The Rank note ticks from the left, where the badges are; the Status note from the right, where the
   pills are. No alternating rows, no second card frame. */
.ins-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 48px; }
.ins-note { position: relative; padding-top: 34px; }
.ins-note::before { content: ''; position: absolute; left: 1px; top: 0; width: 2px; height: 22px; background: #c6cbda; border-radius: 2px; }
.ins-note--r::before { left: auto; right: 1px; }
.ins-note--r .ins-note-l { text-align: right; }
.ins-note-l { display: block; font: 600 13px/1.4 var(--font-display); color: #5b6076; }
.ins-note h3 { margin-top: 9px; max-width: 26ch; font: 700 21px/1.28 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.ins-note p { margin-top: 9px; max-width: 46ch; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); }

/* ---------- the hand-off ---------- */
.ins-hand { margin-top: 34px; font: 400 17px/1.6 var(--font-body); color: var(--v2-body); }
.ins-hand a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ins-hand a:hover { color: var(--ink); }

/* The shared big-quote keeps the browser's 40px blockquote indent, so it sits inboard of every other block on all four
   subpages that use it. Fixed here for this page only; the one-line fix belongs in feature-v2.css (QUESTIONS.md #9).
   The band is also tightened: the reader was crossing ~900px of white between the last mock and the CTA. */
.ins-page .tq blockquote { margin: 0; }
.ins-page .tq-section { padding: clamp(52px, 6vw, 84px) 0; }

/* ---------- breakpoints ---------- */
@media (max-width: 1180px) {
  .ins-note h3 { font-size: 19.5px; }
}
@media (max-width: 991px) {
  .ins-page .hero-moment { justify-content: center; }
  .ins-lobby { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .ins-noticed { max-width: none; }
  .ins-notes { gap: 30px 32px; }
}
@media (max-width: 760px) {
  .ins-a { font-size: 17.5px; }
  .ins-notes { grid-template-columns: 1fr; gap: 26px; }
  .ins-note { padding-top: 30px; }
  .ins-note--r::before { left: 1px; right: auto; }
  .ins-note--r .ins-note-l { text-align: left; }
  /* the head's copy block is flex:1 with min-width:0, so it shrinks to a two-word column rather than wrapping;
     below this width the CSV button drops under the digest instead */
  .ins-loc-head { display: block; }
  .ins-ghost { margin-top: 12px; }
}
@media (max-width: 560px) {
  .ins-ask { padding: 16px 16px 18px; }
  .ins-q { width: 100%; font-size: 14.5px; }
  .ins-bar { flex-wrap: wrap; }
  .ins-page .ins-go { width: 100%; }
  .ins-a { font-size: 16.5px; }
  .ins-hand { font-size: 16.5px; }
  .ins-loc { padding: 18px 16px; }
  .ins-note h3 { font-size: 19px; }
  .ins-lobby-copy h3 { font-size: 20px; }
  .ins-noticed { padding: 14px 14px 6px; }
  .ins-nrow { flex-wrap: wrap; }
  .ins-na { margin-left: 16px; }
  .sc-full { display: none; }
  .sc-abbr { display: inline; }
  /* the same call the page already made on the columns: at this width Location, Rating and Status are the table.
     The delta pills go with the columns they annotate so the Status pill is never clipped, and the pill wraps
     rather than scrolling out of the card. */
  .sctab .sc-rank, .sctab .sc-resp, .sctab .sc-quiet, .sctab .sc-new { display: none; }
  .sctab .sc-td { display: none; }
  .sc-pill { white-space: normal; }
  .sctab th, .sctab td { padding: 10px 6px; }
  .sctab .sc-name { padding-left: 0; }
  .sctab tbody th, .sctab tbody td { font-size: 14px; }
  .sc-pill { padding: 4px 8px; font-size: 13px; text-align: left; }
}