/* /room-analysis: a sample Room Analysis, laid out as the report itself. The bar, the footer, the badge, the FAQ and
   the tokens are base.css's; this file is the page's own. The report is the app's (apps/ios/Snuug/Features/Analysis,
   and the PDF in docs/mockups/review/share-sheet.html, ".a4.v2"): white sheets on the soft surface, Inter only (the
   brand keeps the pixel font out of the report), one ink hairline under each sheet's head, faint ones between rows.
   A phone reads the sheets one under the other; from 900 px they lie two by two, like an open report. Nothing here
   moves by itself, so there is no script. */
.ra { --good: #3F7D52; --potential: #B86A14; --paper: #FFFFFF; --tile: #F6F5F2; --faint: #ECEBE6; --grey: #8A8984; }
.ra main { padding-top: clamp(104px, 12vw, 164px); }
.ra :where(ol) { margin: 0; padding: 0; list-style: none; }
.ra a { text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: #B9B8B2; }
@media (hover: hover) { .ra main a:hover { text-decoration-color: currentColor; } }

/* ---------- The opening: what this is, in one breath. */
.ra-open { display: grid; justify-items: start; gap: 16px; max-width: 1100px; }
.ra-open .label { display: inline-flex; align-items: center; gap: 8px; }
.ra-open .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--potential); }
.ra-open h1 { font-size: clamp(38px, 5.2vw, 70px); font-weight: 300; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.ra-open h1 span { display: block; }   /* the two sentences of the headline, each on its own line */
.ra-open .lede { max-width: 36em; }
/* A tablet: the opening lines up with the column of sheets under it (560 px, centred). */
@media (min-width: 600px) and (max-width: 899px) { .ra-open { max-width: 560px; margin-inline: auto; } }
/* A phone: the headline's first sentence stays on one line down to 360 px. */
@media (max-width: 719px) { .ra-open h1 { font-size: min(9.4vw, 44px); } .ra-open .lede { text-wrap: pretty; } }

/* ---------- The report: sheets of paper on the soft surface. On a phone the surface runs edge to edge. */
.ra-report { margin-top: clamp(36px, 5vw, 64px); background: var(--surface); padding: 12px 12px 20px; }
.ra-sheets { display: grid; gap: 12px; max-width: 560px; margin-inline: auto; }
.sheet { display: flex; flex-direction: column; min-width: 0; padding: 22px 20px 16px; border-radius: 18px; background: var(--paper);
  box-shadow: 0 1px 2px rgb(20 20 18 / 0.05), 0 22px 36px -28px rgb(20 20 18 / 0.28); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.sheet-head h2 { font-size: 22px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.sheet-head .sec, .sheet-foot { font-size: 11.5px; line-height: 1; color: var(--grey); font-variant-numeric: tabular-nums; }
.sheet-head .sec { letter-spacing: 0.04em; }
.sheet-head .wm { display: block; width: 70px; height: 17px; color: var(--ink); }
/* The foot of every sheet says it is a sample, as the PDF's foot names the room. */
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; }
.sheet-foot span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.sheet-foot svg { width: 11px; height: 11px; flex: none; }
.sheet-body { display: grid; gap: 16px; padding: 18px 0 22px; align-content: start; }
.sheet-foot { border-top: 1px solid var(--faint); }

/* The cover: the room by day with a pin on each feature, "Room / Analysis", the two numerals, the summary. */
.cover .pic { position: relative; margin-top: 16px; border-radius: 12px; background: var(--tile); }
.cover .pic img { width: 100%; height: auto; }
.cover .measure { left: 12px; top: 12px; padding: 5px 9px; }
.pin { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pin b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FFF; color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--good), 0 4px 10px -2px rgb(20 20 18 / 0.45); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pin.p b { box-shadow: 0 0 0 2px var(--potential), 0 4px 10px -2px rgb(20 20 18 / 0.45); }
@media (hover: hover) { .pin:hover b { transform: scale(1.15); } }
.pin:active b { transform: scale(0.92); transition-duration: 0.1s; }
.cover h2 { margin-top: 22px; font-size: clamp(60px, 19vw, 84px); font-weight: 300; letter-spacing: -0.05em; line-height: 0.9; }
.cover h2 span { display: block; color: var(--soft); }
.tally { display: flex; gap: 28px; margin-top: 20px; }
.tally b { display: block; font-size: 40px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.tally span, .status, .legend { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.tally span { margin-top: 6px; }
.dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.dot.p { background: var(--potential); }
.cover .summary { margin-top: 20px; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.coverline { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--faint); font-size: 13px; color: var(--grey); font-variant-numeric: tabular-nums; }
.coverline b { font-weight: 400; color: var(--ink); }
.cover .sheet-foot { margin-top: 22px; }

/* The tiles (the app's SpecTiles): a quiet label over a light figure. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiles div { min-width: 0; padding: 11px 12px 12px; border-radius: 12px; background: var(--tile); }
.tiles span { display: block; font-size: 12px; line-height: 1.2; color: var(--grey); }
.tiles b { display: block; margin-top: 6px; font-size: 19px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Your room, measured: the plan to scale beside its four measures (the PDF's page 2). */
.measured { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 16px; align-items: center; }
.measured dl { margin: 0; }
.measured dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--faint); }
.measured dl div:last-child { border-bottom: 0; }
.measured dt { font-size: 12.5px; color: var(--grey); }
.measured dd { margin: 0; font-size: 15px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The table: one row per feature. Your number first, in a heavier weight; the designers' range in grey; the dot last. */
.mt { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.3; }
.mt th { padding: 0 8px 9px 0; border-bottom: 1px solid var(--ink); text-align: left; font-size: 12px; font-weight: 400; color: var(--grey); }
.mt td { padding: 14px 8px 14px 0; border-bottom: 1px solid var(--faint); vertical-align: baseline; }
.mt td:nth-child(2) { font-weight: 500; }
.mt td:nth-child(3) { color: var(--grey); }
.mt :is(td, th):last-child { width: 10px; padding-right: 0; text-align: right; }
.mt .dot { display: inline-block; vertical-align: 1px; }
.mt a { display: block; margin: -14px 0; padding: 14px 0; text-decoration: none; }   /* the whole cell takes the tap */
.legend { gap: 6px 8px; flex-wrap: wrap; font-size: 12px; font-weight: 400; color: var(--grey); }
.legend .dot + .dot, .legend .dot:nth-of-type(2) { margin-left: 8px; }

/* The plan, to scale: 1 unit of the drawing is 1 cm of the room (the symbol #plan in the page). The pieces are the
   app's quiet grey; the piece a feature is about is ink; a lamp is the sun's amber, the one lit thing in the drawing;
   what Snuug suggests is dashed, as in the app. Labels are HTML over the drawing, so their type keeps one size. */
/* BUG-395: each <use href="#plan"> in the page names the symbol's box (x, y, width, height), or the room stretches to its <svg>. */
.plan { position: relative; overflow: hidden; border-radius: 14px; background: var(--tile); }
.plan svg { display: block; width: 100%; height: auto; }
.pl-floor { fill: #FFF; }
.pl-rug { fill: #F4F3EF; stroke: #DDDCD6; stroke-width: 1.5; }
.pl-p { fill: #E2E1DC; }
.pl-arm { fill: none; stroke: #C9C8C2; stroke-width: 3; stroke-linecap: round; }
.pl-lamp { fill: #F2A93B; }
.pl-wall { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.pl-win { fill: none; stroke: #FFF; stroke-width: 5; }
.pl-winl { fill: none; stroke: var(--ink); stroke-width: 0.9; }
.pl-on { fill: var(--ink); }
.pl-on-line { fill: none; stroke: var(--ink); stroke-width: 3.5; }
.pl-mark { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.pl-new { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.pl-reach { fill: rgb(242 169 59 / 0.1); stroke: rgb(242 169 59 / 0.9); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.pl-thing { fill: #FFF; opacity: 0.85; }
.pl-chip { position: absolute; transform: translate(-50%, -50%); padding: 4px 8px; border-radius: 999px; background: var(--ink); color: #FFF; font-size: 11.5px; font-weight: 500; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-chip.quiet { background: #FFF; color: var(--ink); box-shadow: 0 0 0 1px rgb(20 20 18 / 0.1); }
.pl-chip.turn { transform: translate(-50%, -50%) rotate(90deg); }
.pl-chip.side { display: none; }   /* the room's two sides, on the large plan only: a phone reads them in the list beside it */

/* A feature. Working well: a small plan beside a few lines. High potential: a sheet of its own. A pin or a row of the
   table jumps to its feature, and base.css's scroll-padding-top keeps it clear of the bar. */
.kicker { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--grey); font-variant-numeric: tabular-nums; }
.well { display: grid; }
.well li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--faint); }
.well li:first-child { padding-top: 0; } .well li:last-child { border-bottom: 0; padding-bottom: 0; }
.well .plan { align-self: start; border-radius: 10px; }
.well .bd { grid-column: 1 / -1; }
.well .kicker { display: flex; align-items: center; gap: 6px; }
.well h3 { margin-top: 6px; font-size: 21px; font-weight: 300; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; }
.well .bd p { font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.find h3 { margin-top: 6px; font-size: clamp(25px, 7vw, 30px); font-weight: 300; letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; }
.find .status { margin-top: 10px; }
.find p { font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.find p > b:first-child { font-weight: 500; }
.find .sheet-body { gap: 14px; padding-top: 16px; }
/* Try: the one thing to do first, on the soft surface, marked with the High potential dot (the app's TipCard). */
.try { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--tile); }
.try .dot { margin-top: 0.58em; }
/* Snuug Choice: the fix Snuug picks, in ink, with what it costs, how long it takes and whether a renter may do it. */
.choice { padding: 14px 16px 15px; border-radius: 18px; background: var(--ink); color: #FFF; }
.choice .lab { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: rgb(255 255 255 / 0.7); }
.choice .lab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FFF; }
.choice .line { margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.choice .taste { margin-top: 4px; font-size: 13px; color: rgb(255 255 255 / 0.72); }
.choice dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.16); }
.choice dt { font-size: 12px; line-height: 1.2; color: rgb(255 255 255 / 0.6); }
.choice dd { margin: 5px 0 0; font-size: 17px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* A link to the calculator or guide that holds the rule: a row of its own, 44 px tall for a finger. */
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 -12px; font-size: 14px; color: var(--muted); }
.more::after { content: "→"; text-decoration: none; transition: transform 0.3s var(--ease); }
@media (hover: hover) { .more:hover { color: var(--ink); } .more:hover::after { transform: translateX(3px); } }
.well .more { margin: 0 0 -14px; }

/* Ideas for your room (the app's IdeasView): a number, the idea, how, and why in the quiet grey. */
.ideas li { padding: 16px 0; border-bottom: 1px solid var(--faint); }
.ideas li:first-child { padding-top: 0; } .ideas li:last-child { border-bottom: 0; padding-bottom: 0; }
.ideas .n { font-size: 12.5px; font-weight: 500; color: var(--grey); font-variant-numeric: tabular-nums; }
.ideas h3 { margin-top: 6px; font-size: 22px; font-weight: 300; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; }
.ideas p { margin-top: 8px; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.ideas p.why { font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* Your Room Plan: tonight's steps cost nothing, then what to buy. A square to tick, as on the PDF. */
.steps h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 24px; font-weight: 300; letter-spacing: -0.04em; line-height: 1.1; }
.steps h3 span { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--grey); font-variant-numeric: tabular-nums; }
.steps ul + h3 { margin-top: 26px; }
.steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--faint); font-size: 15px; line-height: 1.4; }
.steps li::before { content: ""; width: 16px; height: 16px; border: 1px solid var(--ink); border-radius: 4px; transform: translateY(3px); }
.steps li span { font-size: 13px; color: var(--grey); white-space: nowrap; font-variant-numeric: tabular-nums; }
.steps .note { margin-top: 16px; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* Under the sheets: the silver seal (the home page's, how.css) and what the sample is made of. */
.ra-after { display: grid; gap: 14px; max-width: 560px; margin: 20px auto 0; padding: 0 8px; }
.ra-after p { font-size: 13.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.ra-seal { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.ra-seal svg { width: 28px; height: 28px; }
.ra-seal p { font-size: 15px; color: var(--ink); }
.ra-seal b { font-weight: 500; }

/* ---------- How to get yours: three steps and the badge. */
.ra-get { text-align: center; }
.ra-get .title { max-width: 14em; margin-inline: auto; }
.ra-steps { display: grid; gap: 10px; max-width: 980px; margin: var(--head) auto 0; text-align: left; counter-reset: step; }
.ra-steps li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 14px; padding: 16px 18px 18px; border-radius: 18px; background: var(--surface); }
.ra-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #FFF; font-size: 13px; font-weight: 500; }
.ra-steps b { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; line-height: 28px; }
.ra-steps span { font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.ra-get .cta { justify-content: center; margin-top: 32px; }
.ra-faq .head { margin-bottom: 0; }

/* ---------- From 900 px: the sheets lie two by two, like an open report, and each pair shares one height. */
@media (min-width: 900px) {
  .ra-open { margin-inline: auto; justify-items: center; text-align: center; }
  .ra-report { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding: 32px; border-radius: 32px; }
  .ra-sheets { grid-template-columns: 1fr 1fr; gap: 24px; max-width: none; }
  .sheet { padding: 34px 34px 22px; border-radius: 20px; }
  .sheet-head h2 { font-size: 26px; }
  .sheet-head .wm { width: 84px; height: 20px; }
  .sheet-body { gap: 20px; padding: 24px 0 28px; }
  .cover h2 { font-size: clamp(84px, 8vw, 112px); }
  .cover .summary { font-size: 16px; max-width: 30em; }
  .tiles.four { grid-template-columns: repeat(4, 1fr); }
  .tiles b { font-size: 20px; }
  .mt { font-size: 14.5px; }
  .well li { grid-template-columns: 96px minmax(0, 1fr); gap: 14px 20px; padding: 22px 0; }
  .well h3 { font-size: 24px; }
  /* The measured sheet lies beside the cover, which is taller: the plan goes large, over the four measures as tiles. */
  .measured { grid-template-columns: 1fr; gap: 10px; }
  .measured .plan { order: 0; }
  .pl-chip.side { display: block; }
  .measured dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .measured dl div, .measured dl div:last-child { display: block; padding: 11px 12px 12px; border: 0; border-radius: 12px; background: var(--tile); }
  .measured dt { font-size: 12px; line-height: 1.2; }
  .measured dd { margin-top: 6px; font-size: 18px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; }
  .find h3 { font-size: 32px; }
  .find .plan { width: 86%; margin-inline: auto; background: none; }
  .find .plan-box { border-radius: 14px; background: var(--tile); }
  .ideas h3 { font-size: 24px; }
  .steps h3 { font-size: 28px; }
  .ra-after { grid-template-columns: 1fr 1fr; gap: 24px; max-width: none; margin-top: 28px; padding: 0 6px; }
  .ra-steps { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ra-steps li { grid-template-columns: 1fr; gap: 6px; padding: 26px; }
  .ra-steps li::before { grid-row: auto; margin-bottom: 10px; }
}
/* Paper: the sheets alone, one after the other, with no shadow. */
@media print {
  .top, .foot nav, .ra-get .cta { display: none; }
  .ra main { padding-top: 0; }
  .ra-report { background: none; padding: 0; }
  .ra-sheets { display: block; max-width: 560px; }
  .sheet { box-shadow: none; border: 1px solid var(--line); margin-bottom: 16px; break-inside: avoid; }
}