/* ==========================================================================
   Garden rooms. The roof page's bones, with its own middle: four questions
   that write a spec sheet, and a wall section drawn to scale from the same
   numbers, so the strip is the wall you would get rather than a picture.
   ========================================================================== */

/* ---------- the four questions ---------- */
.gr-spec { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; }
.gr-ask { display: grid; gap: 22px; position: sticky; top: 104px; }
.gr-q { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.gr-q legend { display: flex; align-items: center; gap: 10px; padding: 0; font-size: 15px; color: var(--ink); }
.gr-q-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.gr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gr-chip { height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
  transition: border-color .16s, background .16s, color .16s; }
.gr-chip:hover { border-color: var(--ink); }
.gr-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
#gr-use .gr-chip.on { background: var(--brand); border-color: var(--brand); }

/* ---------- the sheet it writes ---------- */
.gr-sheet { display: grid; gap: 16px; }
.gr-sheet-head { padding: 22px 24px; border-radius: var(--r) var(--r) 0 0; background: var(--ink); color: #fff; }
.gr-sheet-eyebrow { display: block; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .58); }
.gr-sheet-title { display: block; margin-top: 5px; font-size: 27px; font-weight: 400; letter-spacing: -.6px; }
.gr-rows { margin-top: -16px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r);
  background: #fff; overflow: hidden; }
.gr-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: baseline;
  padding: 14px 24px; border-top: 1px solid var(--line-2); }
.gr-row:first-child { border-top: 0; }
.gr-row span { font-size: 13.5px; color: var(--muted); }
.gr-row p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.gr-row:first-child p { font-weight: 500; }
.gr-row:last-child p { color: var(--muted); }

.gr-verdict { padding: 18px 22px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; }
.gr-verdict-h { display: flex; align-items: center; gap: 10px; }
.gr-verdict-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.gr-verdict b { font-size: 17px; font-weight: 500; letter-spacing: -.3px; }
.gr-verdict p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.58; color: var(--muted); }
.gr-verdict[data-level="easy"] { border-color: rgba(31, 157, 85, .35); background: rgba(31, 157, 85, .05); }
.gr-verdict[data-level="easy"] .gr-verdict-dot { background: #1f9d55; }
.gr-verdict[data-level="notice"] { border-color: rgba(224, 163, 58, .4); background: rgba(224, 163, 58, .06); }
.gr-verdict[data-level="notice"] .gr-verdict-dot { background: #e0a33a; }
.gr-verdict[data-level="permit"] { border-color: rgba(207, 74, 74, .35); background: rgba(207, 74, 74, .05); }
.gr-verdict[data-level="permit"] .gr-verdict-dot { background: #cf4a4a; }
.gr-cta { justify-self: start; }
.gr-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- the wall, to scale ---------- */
.gr-points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gr-points li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.gr-points li::before { content: ""; position: absolute; left: 0; top: calc((1.6em - 10px) / 2);
  width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--brand); }

.gr-wall-card { padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.gr-wall-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.gr-wall-top span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gr-wall-top b { font-size: 22px; font-weight: 400; letter-spacing: -.4px; color: var(--brand); font-variant-numeric: tabular-nums; }
.gr-wall { display: flex; height: 92px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.gr-layer { min-width: 2px; transition: flex-grow .35s cubic-bezier(.22, 1, .36, 1), filter .15s; cursor: default; }
.gr-layer.on { filter: brightness(1.12) saturate(1.3); box-shadow: inset 0 0 0 2px var(--ink); }
.gr-wall-key { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.gr-wall-key li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 6px; transition: background .15s; }
.gr-wall-key li.on { background: var(--sand); }
.gr-wall-key i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(5, 15, 21, .16); align-self: center; }
.gr-wall-key b { font-size: 14px; font-weight: 500; }
.gr-wall-key span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gr-wall-key p { grid-column: 2 / -1; margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s, opacity .2s; }
.gr-wall-key li.on p { max-height: 60px; opacity: 1; }

/* ---------- the closing picture ---------- */
.gr-cta-media { margin: 34px 0 0; border-radius: var(--r); overflow: hidden; }
.gr-cta-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- narrower ---------- */
@media (max-width: 1000px) {
  .gr-spec { grid-template-columns: 1fr; gap: 26px; }
  .gr-ask { position: static; }
}
@media (max-width: 720px) {
  .gr-sheet-head { padding: 18px 18px; }
  .gr-sheet-title { font-size: 23px; }
  .gr-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
  .gr-wall-card { padding: 18px 16px 20px; }
  .gr-wall { height: 74px; }
  .gr-wall-key p { font-size: 12.5px; }
  .gr-chip { height: 40px; }
}