/* nicetobuild.com
   Plain CSS. No framework, no build, no web font, no external request.
   Built for a phone held in one hand in a store aisle, and for a laptop at eleven at night. */

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */
:root {
  --paper:      #FCF9F5;
  --paper-2:    #F5EEE4;
  --paper-3:    #EDE3D6;
  --card:       #FFFFFF;
  --ink:        #17120D;
  --ink-2:      #5C5147;
  --ink-3:      #8A7C6E;
  --line:       #E3D8C9;
  --line-2:     #D2C3AF;

  --clay:       #B0512B;
  --clay-deep:  #8C3E1F;
  --clay-soft:  #F6E7DE;
  --sage:       #4A6552;
  --sage-soft:  #E7EEE8;
  --amber:      #B07E1F;
  --amber-soft: #F8EED8;

  --shadow:     0 1px 2px rgba(35, 24, 14, .06), 0 8px 24px -12px rgba(35, 24, 14, .18);
  --shadow-sm:  0 1px 2px rgba(35, 24, 14, .07);

  --radius:     14px;
  --radius-sm:  10px;
  --tap:        44px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #15120E;
    --paper-2:    #1D1915;
    --paper-3:    #262019;
    --card:       #1B1713;
    --ink:        #F4EDE3;
    --ink-2:      #C3B6A6;
    --ink-3:      #948676;
    --line:       #322A22;
    --line-2:     #43392E;

    --clay:       #E8845A;
    --clay-deep:  #F0A282;
    --clay-soft:  #2E1D14;
    --sage:       #8FB89C;
    --sage-soft:  #17231B;
    --amber:      #E0AE55;
    --amber-soft: #2A2113;

    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky, so without this every jump link, the skip link
     included, parks its target underneath the header where nobody sees it. */
  scroll-padding-top: 62px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

/* The house rule is that every number carries its source printed on the page,
   so long raw URLs turn up inside sentences. A URL is one unbreakable word and
   wider than a phone. It has to be "anywhere" and not "break-word": only
   "anywhere" shrinks the min-content width, and min-content is what a grid
   track measures itself against. With "break-word" the source citation still
   forced a 862px column inside a 320px phone and got clipped out of sight. */
a { color: var(--clay-deep); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { color: var(--clay); }

:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--clay); color: #fff;
  padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ *
 * Header and footer
 *
 * The seven calculators are siblings. Not one of them is filed under
 * another, so the bar lists them flat, in one row, in one order, and the
 * menu repeats that same flat list on a phone.
 *
 * On a phone the bar stays one line and 53px tall on purpose. The whole
 * point of the home page is that the answer is on screen without
 * scrolling, and every pixel the header takes is a pixel stolen from it.
 * That is why the seven links sit behind a menu below 900px, and why the
 * panel is absolutely positioned: opening it pushes nothing down.
 * ------------------------------------------------------------------ */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-bar { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.brand {
  font-family: var(--serif);
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand b { color: var(--clay); font-weight: 600; }
/* The logo is the way home, so it gets a real target, not just a word. */
.head-bar .brand {
  display: inline-flex; align-items: center;
  min-height: var(--tap); margin-right: auto;
}

/* The flat rail of seven, wide screens only. */
.head-rail { display: none; }
@media (min-width: 900px) {
  .head-rail {
    display: flex; align-items: center; gap: 2px;
    min-width: 0; overflow-x: auto; scrollbar-width: none;
  }
  .head-rail::-webkit-scrollbar { display: none; }
  .head-rail a {
    display: inline-flex; align-items: center; white-space: nowrap;
    min-height: var(--tap); padding: 0 10px; border-radius: 8px;
    font-size: 14px; color: var(--ink-2); text-decoration: none;
  }
  .head-rail a:hover { background: var(--paper-2); color: var(--ink); }
  .head-rail a[aria-current="page"] {
    background: var(--clay-soft); color: var(--clay-deep); font-weight: 650;
  }
}

/* The menu is a details element, so it opens with no framework and no
   library, and it still opens if the one small script never runs. */
.menu { position: relative; flex: none; }
.menu > summary {
  list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 650;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu > summary:hover { border-color: var(--ink-3); }
.menu > summary svg {
  width: 17px; height: 17px; flex: none;
  stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round;
}
.menu[open] > summary { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.menu-panel {
  position: absolute; right: 0; top: calc(100% + 9px);
  width: min(92vw, 336px);
  padding: 12px 12px 14px; z-index: 70;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: calc(100vh - 78px);
  max-height: calc(100dvh - 78px);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 700; margin: 0 0 6px 4px;
}
.menu-grid + .menu-h { margin-top: 13px; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.menu-grid a {
  display: flex; align-items: center;
  min-height: var(--tap); padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; line-height: 1.25; text-decoration: none;
  color: var(--ink-2); background: var(--paper-2);
}
.menu-grid a:hover { background: var(--paper-3); color: var(--ink); }
.menu-grid a[aria-current="page"] { background: var(--clay-soft); color: var(--clay-deep); }
.menu-note { margin: 13px 4px 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
/* An inline link in a sentence cannot be 44px tall without wrecking the
   sentence. Vertical padding grows the hit area without moving the text, and
   Contact is a full size target three rows above this anyway. */
.menu-note a { color: var(--clay-deep); padding: 15px 0; margin: -15px 0; }

.site-foot {
  margin-top: 56px; border-top: 1px solid var(--line);
  background: var(--paper-2); padding: 26px 0 34px;
  font-size: 14px; color: var(--ink-2);
}
.foot-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-grid h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 6px; }
/* Two columns and a full 44px target on a phone, so the footer is
   something you can tap, not a stack of 13px lines. */
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.foot-grid li { margin: 0; }
.foot-grid ul a {
  display: flex; align-items: center;
  min-height: var(--tap); padding: 0 8px; margin-left: -8px;
  border-radius: 8px; color: var(--ink-2); text-decoration: none;
}
.foot-grid ul a:hover { color: var(--clay); background: var(--paper-3); }
.foot-grid p a { color: var(--clay-deep); }
@media (min-width: 720px) { .foot-grid ul { grid-template-columns: 1fr; } }
/* Targets shrink for a mouse, never for a finger. A tablet is a wide screen
   and a touch screen at the same time, so width is the wrong question to ask
   here and pointer is the right one. */
/* Targets shrink for a mouse on a big screen, and never on a small one. Gating this on pointer
   alone was the bug: a desktop browser narrowed to 375px reports pointer: fine, so the footer
   collapsed to 30px exactly where the rule was supposed to protect it. Width has to be in the
   query too. */
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
  .head-rail a { min-height: 38px; }
  .foot-grid ul a { min-height: var(--tap); }
}
.foot-grid .brand { display: inline-flex; align-items: center; min-height: var(--tap); }
.foot-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.foot-note a { color: var(--clay-deep); padding: 15px 0; margin: -15px 0; }

/* ------------------------------------------------------------------ *
 * Type
 * ------------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 27px; }
h2 { font-size: 22px; margin-top: 1.6em; }
h3 { font-size: 18px; margin-top: 1.3em; }
@media (min-width: 720px) { h1 { font-size: 40px; } h2 { font-size: 28px; } h3 { font-size: 20px; } }
.lede { font-size: 16px; color: var(--ink-2); margin: 0 0 14px; max-width: 62ch; }
@media (min-width: 720px) { .lede { font-size: 18px; } }
.prose { max-width: 68ch; }
.prose p, .prose li { color: var(--ink-2); }
.prose p { margin: 0 0 1em; }
.eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--clay); font-weight: 700; margin: 0 0 6px;
}

/* ------------------------------------------------------------------ *
 * The room scene. The desire, before any form.
 * ------------------------------------------------------------------ */
.stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.stage svg { width: 100%; height: auto; display: block; }
/* A small pill, not a banner. The drawing is the point and nothing should cover it. */
.stage-tag {
  position: absolute; left: 10px; top: 10px;
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  font-family: var(--serif); font-size: 13.5px; font-weight: 600; color: var(--ink);
}
#stage-line { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; }

/* ------------------------------------------------------------------ *
 * room chooser
 *
 * This row used to run full bleed while every other thing on the page lived inside .wrap, so on a
 * wide screen the most important control on the site started at the window edge, 160px to the left
 * of the headline above it. It reads as a broken stylesheet, not as a decision. The shell now
 * carries the same width and the same centering as .wrap, so the first chip is born on the same
 * vertical line as the h1 at every width.
 * ------------------------------------------------------------------ */
.rooms-shell {
  position: relative;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
}
/* The same right edge fade the calculator strip has, because a row that scrolls has to say so.
   Without it, Outside sat off screen on a phone with nothing to suggest it existed, and Outside is
   the whole door into mulch and raised bed soil. app.js turns it off when every chip already fits,
   since a hint pointing at nothing is its own small lie. */
.rooms-shell::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 34px;
  background: linear-gradient(to left, var(--paper), transparent);
  pointer-events: none; transition: opacity .15s ease;
}
.rooms-shell[data-scrollable="false"]::after { opacity: 0; }
.rooms {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 34px 8px 16px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  /* Mandatory snapping aligns the first chip with the edge of the scrollport, which eats the
     16px of padding and lands Kitchen at x=0 on a phone while the h1, the drawing and the
     calculator all start at 16. This is the line that keeps the row on the grid at first paint. */
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.rooms::-webkit-scrollbar { display: none; }
.room-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  min-height: var(--tap); padding: 0 15px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.room-chip[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ------------------------------------------------------------------ *
 * The switch strip. Changes calculator without leaving the page.
 * ------------------------------------------------------------------ */
.strip-shell { position: relative; margin: 14px 0 0; }
.strip-shell::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 34px;
  background: linear-gradient(to left, var(--paper), transparent);
  pointer-events: none;
}
.strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 34px 10px 0;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip-btn {
  flex: 0 0 auto; scroll-snap-align: start;
  min-height: var(--tap); padding: 0 14px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--card); color: var(--ink-2);
  font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.strip-btn:hover { transform: translateY(-1px); }
.strip-btn svg { width: 18px; height: 18px; flex: none; }
.strip-btn[aria-selected="true"] {
  background: var(--clay); border-color: var(--clay); color: #fff;
}
.strip-btn[aria-selected="true"] svg { color: #fff; }
.strip-hint { font-size: 12.5px; color: var(--ink-3); margin: 0 0 6px; }

/* ------------------------------------------------------------------ *
 * The calculator
 * ------------------------------------------------------------------ */
.calc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.calc-head {
  padding: 14px 16px 0;
}
.calc-head h2 { margin: 0 0 2px; font-size: 20px; }
.calc-head p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-3); }

.fields { display: grid; gap: 10px; padding: 0 16px 14px; grid-template-columns: 1fr 1fr; }
.fields .full { grid-column: 1 / -1; }
@media (min-width: 640px) { .fields { grid-template-columns: repeat(4, 1fr); } }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: 5px; line-height: 1.25;
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap input {
  width: 100%; min-height: var(--tap);
  padding: 8px 40px 8px 12px;
  font: inherit; font-size: 17px; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  appearance: none;
}
.input-wrap input::placeholder { color: var(--ink-3); }
.input-wrap input:focus { border-color: var(--clay); background: var(--card); }
.input-wrap .suffix {
  position: absolute; right: 11px; font-size: 12.5px; color: var(--ink-3);
  pointer-events: none; font-weight: 600;
}
.input-wrap.money input { padding-left: 26px; padding-right: 12px; }
.input-wrap.money .prefix {
  position: absolute; left: 11px; font-size: 15px; color: var(--ink-3); pointer-events: none;
}

/* A row of buttons, still typeable, for bag sizes and sheet sizes. These get tapped with a thumb
   in a store aisle, so they carry the same 44px as every other control on the page. */
.choices { display: flex; gap: 6px; flex-wrap: wrap; }
.choice {
  min-height: var(--tap); padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--paper); color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.choice[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* the little markers that tell the truth about a number */
.tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}
.tag-source { background: var(--sage-soft); color: var(--sage); }
.tag-yours  { background: var(--amber-soft); color: var(--amber); }
/*
 * The chip that says where a number came from is the proof this whole site runs on, and it used to
 * be the smallest target on a phone: 16px tall, against the 44px the rest of the page keeps. The
 * pill has to stay small, because it sits beside a 12px label. So the button is 44px and the pill
 * is the span inside it, painted at its old size, and the negative block margin keeps the label
 * row exactly the height it was.
 */
button.tag {
  border: 0; padding: 0; background: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  margin-block: calc((var(--tap) - 16px) / -2);
}
button.tag > span {
  display: inline-flex; align-items: center;
  padding: 2px 6px; border-radius: 5px;
}
button.tag.tag-source > span { background: var(--sage-soft); color: var(--sage); }
button.tag.tag-yours  > span { background: var(--amber-soft); color: var(--amber); }
button.tag:hover > span { filter: brightness(.95); }

.note {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.45;
  margin: 2px 0 0; padding: 8px 10px; background: var(--paper-2);
  border-left: 2px solid var(--line-2); border-radius: 0 6px 6px 0;
}
.note a { color: var(--clay-deep); }
.note[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 * The answer
 * ------------------------------------------------------------------ */
.answer { border-top: 1px solid var(--line); background: var(--paper-2); }
.answer-top { padding: 14px 16px 4px; }
.headline {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--serif);
}
.headline .big {
  font-size: 40px; line-height: 1; font-weight: 600; color: var(--clay);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) { .headline .big { font-size: 52px; } }
.headline .unit { font-size: 17px; color: var(--ink-2); font-family: var(--sans); font-weight: 600; }
.sub { font-size: 14px; color: var(--ink-2); margin: 4px 0 0; font-variant-numeric: tabular-nums; }

/* minmax(0, 1fr), not the default auto: an auto track is sized by its widest
   item and refuses to go below it, which is how one long source URL made this
   column wider than the phone. */
.lines { list-style: none; margin: 10px 0 0; padding: 0 16px 14px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.line {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px;
}
.line-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.line-name { font-weight: 650; font-size: 15px; }
.line-qty {
  font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.line-qty small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.line-cost { font-size: 13.5px; color: var(--sage); font-weight: 700; font-variant-numeric: tabular-nums; }

/* the open math, never hidden behind a details toggle */
.math {
  margin: 8px 0 0; padding: 9px 10px;
  background: var(--paper-2); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--ink-2);
  overflow-x: auto;
}
/* A conta precisa ser LIDA no balcao, num celular. Antes era nowrap com rolagem
   lateral: em 375px sobrava 32% da linha na tela, cortada no meio da palavra, e no
   concreto a unidade 'cu ft' saia de vista deixando uma equacao errada com cara de
   completa. Agora quebra linha, e o renderizador gruda numero com unidade. */
.math div { white-space: normal; overflow-wrap: break-word; }
.math .label { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; margin-bottom: 3px; white-space: normal; }

.warn {
  margin: 8px 16px 0; padding: 9px 11px; border-radius: 8px;
  background: var(--amber-soft); color: var(--amber);
  font-size: 12.5px; font-weight: 600;
}
.warn[hidden] { display: none; }

/* price block */
.price-block { border-top: 1px solid var(--line); padding: 14px 16px; background: var(--card); }
.price-block h3 { margin: 0 0 3px; font-size: 16px; }
.price-block .why {
  font-size: 12.5px; color: var(--ink-3); margin: 0 0 12px; line-height: 1.5; max-width: 66ch;
}
.total-strip {
  margin-top: 12px; padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--sage-soft); color: var(--sage);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.total-strip[hidden] { display: none; }
.total-strip span:last-child { font-size: 20px; }

/* where to buy */
.buy-block { border-top: 1px solid var(--line); padding: 14px 16px 18px; background: var(--paper-2); }
.buy-block h3 { margin: 0 0 3px; font-size: 16px; }
.buy-block p { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }
.zip-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.zip-row .input-wrap { flex: 1 1 130px; max-width: 190px; }
.buy-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.buy-link {
  min-height: var(--tap); padding: 0 15px;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--radius-sm); border: 1px solid var(--clay);
  background: var(--clay); color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 650;
}
.buy-link.ghost { background: transparent; color: var(--clay-deep); }
.buy-link:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: #fff; }

/* ------------------------------------------------------------------ *
 * Sources block
 * ------------------------------------------------------------------ */
.sources { margin-top: 34px; }
.source-card {
  border: 1px solid var(--line); border-left: 3px solid var(--sage);
  border-radius: var(--radius-sm); background: var(--card);
  padding: 12px 14px; margin-bottom: 10px;
}
.source-card .pub { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--sage); font-weight: 700; }
.source-card .ttl { font-weight: 650; font-size: 14.5px; margin: 3px 0; }
.source-card blockquote {
  margin: 7px 0; padding-left: 11px; border-left: 2px solid var(--line-2);
  font-size: 13px; color: var(--ink-2); font-style: italic;
}
.source-card .meta { font-size: 12px; color: var(--ink-3); word-break: break-word; }
.source-card .meta a { word-break: break-all; }

/* ------------------------------------------------------------------ *
 * Generic blocks
 * ------------------------------------------------------------------ */
.section { padding: 30px 0 0; }
.card-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .card-grid.three { grid-template-columns: repeat(3, 1fr); } }
.tool-card {
  display: block; padding: 15px 16px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform .14s ease, box-shadow .14s ease;
}
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.tool-card .tc-top { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.tool-card svg { width: 20px; height: 20px; color: var(--clay); flex: none; }
.tool-card strong { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.tool-card span { font-size: 13.5px; color: var(--ink-2); display: block; }

.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--clay);
  background: var(--clay-soft); border-radius: var(--radius-sm);
  padding: 13px 15px; margin: 18px 0;
}
.callout p { margin: 0; font-size: 14px; color: var(--ink-2); }
.callout strong { color: var(--ink); }

.content-slot {
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  padding: 16px; margin: 20px 0; background: var(--paper-2);
  font-size: 13.5px; color: var(--ink-3);
}
.content-slot code { font-family: var(--mono); font-size: 12px; background: var(--paper-3); padding: 1px 5px; border-radius: 4px; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0; }
table.data th, table.data td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
table.data td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }

.contact-line {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
  padding: 0 16px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 650;
}
.contact-line:hover { color: var(--paper); opacity: .9; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Scene palette. The rooms are drawn, not photographed, so they cost
 * nothing to serve, carry no licence, and follow the theme.
 * A real photograph can replace any .stage later without touching CSS.
 * ------------------------------------------------------------------ */
:root {
  --sc-sky:   #E7DCCB;
  --sc-wall:  #EFE4D4;
  --sc-wall2: #E2D4C0;
  --sc-floor: #C99A6A;
  --sc-floor2:#B9885A;
  --sc-wood:  #A9734A;
  --sc-dark:  #4E3C2E;
  --sc-clay:  #B0512B;
  --sc-sage:  #6E8A70;
  --sc-cream: #FAF3E8;
  --sc-light: #FBEBC8;
  --sc-tile:  #D9E2E0;
  --sc-metal: #9C8C78;
  --sc-grass: #8FA875;
  --sc-mulch: #7A5238;
  --sc-stone: #DCD3C4;
  --sc-leaf:  #5A7A55;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sc-sky:   #241D16;
    --sc-wall:  #2C241C;
    --sc-wall2: #221B15;
    --sc-floor: #6B4A2E;
    --sc-floor2:#573B24;
    --sc-wood:  #7A5334;
    --sc-dark:  #100C08;
    --sc-clay:  #C4613A;
    --sc-sage:  #5E7B62;
    --sc-cream: #3A3026;
    --sc-light: #6B5426;
    --sc-tile:  #37423F;
    --sc-metal: #5D5348;
    --sc-grass: #3B4A32;
    --sc-mulch: #3E2A1C;
    --sc-stone: #38312A;
    --sc-leaf:  #4A6344;
  }
}

/* ------------------------------------------------------------------ *
 * Home, above the fold at 375 x 667.
 * Room drawing, room chooser, switch strip and a live answer, no scrolling.
 * ------------------------------------------------------------------ */
.home-hero { padding-top: 9px; display: grid; gap: 10px; }
.home-hero .eyebrow { margin-bottom: 2px; }
.home-hero h1 { font-size: 24px; margin-bottom: 0; }
/*
 * The one sentence that says what this site does. It used to be display:none below 560px to
 * protect the fold, which meant the phone, where most people arrive, got a headline and a picture
 * and no explanation of what it was looking at. It is visible at every width now, set smaller on
 * a phone, and it is paid for by hiding .room-links down there: that paragraph repeats four links
 * that are already in the header menu and again in the footer, and it was costing 85px.
 */
.hero-sub { display: block; margin: 10px 0 0; color: var(--ink-2); font-size: 16px; max-width: 42ch; }
@media (max-width: 559px) {
  .hero-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.4; max-width: 46ch; }
  .room-links { display: none; }
}

/* The drawing is never cropped. It keeps its own proportions at every width. */
/* Slightly tighter on a phone so the answer and the first field share the fold. */
.stage.hero svg { width: 100%; height: auto; aspect-ratio: 400 / 168; }
@media (min-width: 560px) { .stage.hero svg { aspect-ratio: 400 / 190; } }
@media (max-width: 559px) { #stage-line { display: none; } }

@media (min-width: 560px) {
  .home-hero h1 { font-size: 33px; }
}
@media (min-width: 700px) {
  .home-hero {
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: 30px;
    padding-top: 26px;
  }
  .home-hero h1 { font-size: 38px; }
}
@media (min-width: 980px) { .home-hero h1 { font-size: 46px; } }

/* On a small screen the calculator heading repeats the strip, so it steps aside. */
@media (max-width: 559px) {
  .home-hero + .rooms-shell + .wrap .calc-head { padding-top: 12px; }
  .home-hero + .rooms-shell + .wrap .calc-head h2 { font-size: 17px; margin-bottom: 0; }
  .home-hero + .rooms-shell + .wrap .calc-head p { display: none; }
  .strip-hint { margin-bottom: 4px; }
}

/* ------------------------------------------------------------------ *
 * Question, answer, then the knobs. The answer leads.
 * ------------------------------------------------------------------ */
.answer-lead { border-top: 0; background: var(--card); }
.answer-lead .answer-top { padding: 11px 16px 8px; }
.calc-q {
  margin: 0 0 2px; font-family: var(--serif); font-size: 15.5px; font-weight: 600;
  color: var(--ink-2);
}
.answer-lead .headline .big { font-size: 42px; }
.answer-lead + .fields { padding-top: 2px; }
.answer .lines { margin-top: 0; padding-top: 12px; }

/* The room drawing keeps its floor when it gets cropped. */
.stage svg { object-fit: cover; }


/* Labels of different lengths must not shove their inputs out of line. */
.fields { align-items: end; }
.field > label { flex-wrap: wrap; row-gap: 3px; }

/* A tool page gets one still of the room the material belongs to. */
.stage.tool { margin: 0 0 14px; }
.stage.tool svg { width: 100%; height: auto; aspect-ratio: 400 / 190; }
@media (min-width: 700px) { .stage.tool svg { aspect-ratio: 1000 / 280; } }

/* The little truth chips are small on purpose, but the finger target is not. It used to be an
   invisible ::after stretched over the input below, which measured 16px on the button and stole
   taps from the field under it. The button itself is 44px now, up where .tag is defined. */

/* The section nobody else writes. */
ul.checklist { padding-left: 0; list-style: none; margin: 14px 0 0; }
ul.checklist li {
  position: relative; padding: 0 0 0 24px; margin-bottom: 13px;
  color: var(--ink-2); font-size: 15px; line-height: 1.6;
}
ul.checklist li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--clay); transform: rotate(45deg);
}

/* ------------------------------------------------------------------ *
 * The breadcrumb you can see and click.
 *
 * Every page below the home already told Google there was a path Home > Flooring Calculator, and
 * the reader saw a word in small orange capitals with nothing behind it. Markup has to describe
 * the screen, so the trail is on the screen. It replaces the old .eyebrow in that slot and keeps
 * the same weight in the layout.
 * ------------------------------------------------------------------ */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; margin: 0 0 6px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  line-height: 1.4;
}
.crumbs a {
  color: var(--clay); text-decoration: none;
  /* Small type, finger sized target. The house rule is 44px and a breadcrumb is navigation, so
     the padding grows the hit area to 44 and the negative margin gives the line back its height.
     The link stays inline: an inline box takes vertical padding without moving the text. And the
     underline is drawn by text-decoration rather than a bottom border, because a border on a 44px
     box lands 14px under the word and reads as a stray rule. */
  padding: 14px 0; margin: -14px 0;
  text-underline-offset: 3px;
}
.crumbs a:hover { text-decoration: underline; }
.crumb-sep { color: var(--ink-3); font-weight: 400; }
.crumb-here { color: var(--ink-3); }

/* ------------------------------------------------------------------ *
 * The room, now an image file instead of inline SVG
 *
 * Same frame, same crops, same proportions. The <img> carries alt text, Google Images has
 * something to index and a board has something to pin. The dark version arrives through the
 * <source> inside the <picture>.
 * ------------------------------------------------------------------ */
.stage picture { display: block; }
.stage img { width: 100%; height: auto; display: block; }
.stage.hero img { aspect-ratio: 400 / 168; object-fit: cover; }
@media (min-width: 560px) { .stage.hero img { aspect-ratio: 400 / 190; } }
.stage.tool img, .stage.room img { aspect-ratio: 400 / 190; object-fit: cover; }
@media (min-width: 700px) {
  .stage.tool img { aspect-ratio: 1000 / 280; }
  .stage.room img { aspect-ratio: 1000 / 340; }
}
.stage.room { margin: 0 0 14px; }

/* The line under the room chips that says each room is also a page. */
.room-links {
  margin: 10px 0 4px; font-size: 14px; color: var(--ink-2);
  /* This is a sentence, so it is laid out as one. As a flex row every comma became a flex item of
     its own and picked up an 8px gap, which printed "Kitchen , Living room" and left the full stop
     stranded on a line by itself. */
  line-height: 1.7;
}
.room-links a {
  color: var(--clay); font-weight: 650;
  /* Same rule as the breadcrumb: a real 44px hit area, an inline box so the sentence keeps its
     line height, and an underline that stays under the word instead of a border at the bottom of
     the padding. */
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--clay) 35%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  /* The hit area comes from the shared touch target rule further down, which owns every inline
     link in a sentence on this site. One rule, not two fighting. */
}
.room-links a:hover { text-decoration-color: currentColor; }

/*
 * The ZIP box has a real label now, like every other field on the site, which means the input sits
 * inside a .field: a column flex box. The older rule above it sizes .input-wrap with
 * flex: 1 1 130px, and inside a column that basis is a height, not a width, so the wrapper grew to
 * 130px tall and left the input floating in the middle of it. The wrapper is told not to flex, and
 * the field takes the width instead.
 */
.zip-row .field { flex: 0 1 220px; max-width: 220px; align-self: start; }
.zip-row .field .input-wrap { flex: none; width: 100%; max-width: 190px; }

/* ------------------------------------------------------------------ *
 * WHAT IT COSTS
 *
 * The third part of the owner's sentence: "what does this take, what does it cost more or less,
 * and where do I buy it". The number sits directly under the quantity, before any field, because
 * a price you have to go looking for is a price the page did not really answer.
 * ------------------------------------------------------------------ */
.cost-lead {
  margin: 9px 0 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.cost-num {
  font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--sage);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
@media (min-width: 720px) { .cost-num { font-size: 27px; } }
.cost-what { font-size: 12.5px; color: var(--ink-3); max-width: 40ch; line-height: 1.4; }

/* One published reading, with the product, the store count, the link and the date. */
.reading {
  border: 1px solid var(--line); border-left: 3px solid var(--sage);
  border-radius: var(--radius-sm); background: var(--paper-2);
  padding: 11px 13px; margin: 0 0 10px;
}
.reading-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.reading-range {
  font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.reading-unit { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.reading-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
.reading-list li { margin: 0 0 5px; }
.reading-list strong { font-variant-numeric: tabular-nums; color: var(--ink); }
.reading-meta { margin: 7px 0 0; font-size: 11.5px; color: var(--ink-3); }

/*
 * The moment she overwrites a published figure, the note that used to credit the manufacturer
 * turns into a correction. It is amber, not green, because it is no longer their number.
 */
.note-swap {
  background: var(--amber-soft); border-left-color: var(--amber); color: var(--ink-2);
}
.note-swap a { color: var(--clay-deep); }

/* ------------------------------------------------------------------ *
 * TOUCH TARGETS, 375px
 *
 * A link inside a sentence cannot be 44px tall without wrecking the sentence, so the box grows
 * around the text instead of moving it. Padding on an inline box counts toward its hit area and
 * toward its measured height, and the negative margin gives the space back to the paragraph.
 * ------------------------------------------------------------------ */
.note a,
.reading-list a,
.room-links a,
.prose p > a,
.prose li > a {
  /* 15 and not 14 or 13. An inline box here measures between 15 and 17 pixels depending on the
     type size of the paragraph it sits in, so 13 lands on 43 in one place and 14 lands on 43 in
     another. 15 clears 44 in both, and a ruler is exactly what finds a one pixel miss. */
  padding: 15px 0; margin: -15px 0;
}
/* The raw source URL is its own line already, so it can simply be a proper target. */
.source-card .meta a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 4px 0;
}

/* ------------------------------------------------------------------ *
 * WHERE THE CROP FALLS
 *
 * A tool page runs the room as a wide band, so it is allowed to crop, and a centred crop takes
 * the cut out of both edges evenly. Every one of these scenes is composed with its subject in the
 * lower two thirds: the counter and the floor in a kitchen, the tub and the vanity in a bathroom,
 * the bed itself in a garden. Centring the crop therefore spends the band on ceiling and sky and
 * cuts the thing the reader came to look at. Weighting it low keeps the subject.
 * ------------------------------------------------------------------ */
.stage.tool img,
.stage.room img {
  object-position: 50% 64%;
}
.stage.hero img {
  object-position: 50% 60%;
}

/* Regra da casa: alvo de toque de 44px, sem qualificar largura de tela.
   Antes o cabecalho media 38px e o rodape 30px no desktop. */
.site-head nav a, .site-head .head-rail a, .foot-grid ul a {
  min-height: var(--tap); display: inline-flex; align-items: center;
}

/* Fechar o menu tocando fora era quase impossivel no celular: sobravam 16px de faixa
   lateral e 21px embaixo para acertar. Esta camada invisivel cobre a tela inteira
   atras do painel, entao qualquer toque fora fecha. */
.menu[open]::before {
  content: ""; position: fixed; inset: 0; z-index: 1;
}
.menu[open] > summary { position: relative; z-index: 2; }
/* O painel continua absoluto. Forcar position:relative nele quebrou o flutuante e
   esticou o menu para 336px numa tela de 375, jogando sete links para fora. */
.menu[open] .menu-panel { z-index: 2; }

/* Cinto de seguranca: qualquer que seja a ancora, o painel fica dentro da tela. */
@media (max-width: 520px) {
  .menu-panel { position: fixed; top: 62px; right: 10px; left: 10px; width: auto; max-width: none; }
}