/* THE ONLINE ESTIMATE PAGE (docs/INSTANT_ESTIMATE.md §13.4, docs/ESTIMATE_DESIGN.md
   §7, §9). Most of it is Tailwind in the views; these are the things utilities
   cannot say or would say over and over: the numbered steps with the line between
   them, the white cards and the buttons, the picker's chips and sections with
   their states, the Preview, the review's cards, the file list, the card taking
   the whole width when there is no map, and the colour swatches.

   Every rule is under .ie-page (the page's <body>), because this folder is
   loaded on every page of the app. The one exception is the colour swatch at the
   end (.ie-swatch[data-swatch]): the Settings card "Pictures customers see" draws
   the same swatches on a staff page, and ie-swatch is a class only this build uses.

   The spacing scale is 4 / 8 / 12 / 16 / 24 / 32 / 48 px; a tap target is 44 px
   or more; nothing moves for somebody who asked for less motion. */

/* ------------------------------------------------------------ the steps -- */
.ie-page [data-ie-stepper] .ie-step {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}
.ie-page [data-ie-stepper] .ie-step:last-child { flex: 0 0 auto; }

/* The line to the next step: it fills with the accent once the step before it is done. */
.ie-page [data-ie-stepper] .ie-step:not(:last-child)::after {
  content: "";
  flex: 1 1 0.75rem;
  min-width: 0.5rem;
  height: 3px;
  margin-inline: 0.5rem;
  border-radius: 2px;
  background: var(--color-line, #e6e1d8);
}
.ie-page [data-ie-stepper] .ie-step[data-state="done"]:not(:last-child)::after { background: var(--color-accent, #b45309); }

.ie-page .ie-step-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--spacing-tap, 2.75rem);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}
.ie-page .ie-step-button:not(:disabled) { cursor: pointer; }
.ie-page .ie-step-button:focus-visible { outline: 2px solid var(--color-accent, #b45309); outline-offset: 3px; border-radius: 999px; }

.ie-page .ie-step-circle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-line-strong, #d3ccc0);
  border-radius: 999px;
  background: #fff;
  color: var(--color-muted, #6b6259);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
}
/* The step they are on: the accent, with a soft halo. */
.ie-page .ie-step[data-state="current"] .ie-step-circle {
  border-color: var(--color-accent, #b45309);
  background: var(--color-accent, #b45309);
  color: #fff;
  box-shadow: 0 0 0 4px rgb(180 83 9 / 0.18);
}
/* A step done: the accent, and a check (the page writes it). */
.ie-page .ie-step[data-state="done"] .ie-step-circle {
  border-color: var(--color-accent, #b45309);
  background: var(--color-accent-soft, #fdf1e1);
  color: var(--color-accent-strong, #92400e);
}

.ie-page .ie-step-label {
  color: var(--color-muted, #6b6259);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.ie-page .ie-step[data-state="current"] .ie-step-label,
.ie-page .ie-step[data-state="done"] .ie-step-label { color: var(--color-ink, #1f1a14); }

/* A phone has room for the open step's name only. The others are kept for a
   screen reader (the circle is hidden from it), and each circle is a whole
   thumb wide. */
@media (max-width: 39.9375rem) {
  .ie-page .ie-step-button {
    position: relative;
    min-width: var(--spacing-tap, 2.75rem);
    justify-content: center;
  }
  .ie-page .ie-step[data-state="done"] .ie-step-label,
  .ie-page .ie-step[data-state="todo"] .ie-step-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ----------------------------------------------------------- the layout -- */

/* No right column (no map, or the last step): the card is the page, as wide as
   /quote's, and the last step's two cards get more room. */
.ie-page [data-ie-grid][data-ie-nomap] > [data-ie-card] {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
}
.ie-page [data-ie-grid][data-ie-wide] > [data-ie-card] { max-width: 56rem; }

/* The heading takes focus when a step opens, so a screen reader starts there;
   nobody needs a ring around a heading. */
.ie-page [tabindex="-1"]:focus { outline: none; }

/* A box the server or the page marked as a problem. */
.ie-page [aria-invalid="true"] {
  border-color: var(--color-bad, #b91c1c);
  box-shadow: 0 0 0 1px var(--color-bad, #b91c1c);
}

/* Step 3's three views (draw, design, review): the server draws them all with
   the open one marked, and a browser that knows scripts are on never shows the
   others, not even for the moment before the page's script starts. The page
   controller sets `hidden` as well, for the browsers that do not know the query. */
@media (scripting: enabled) {
  .ie-page [data-ie-view]:not([data-ie-view-open]) { display: none; }
  .ie-page [data-ie-section-state="done"]:not([data-ie-section-edit]) [data-ie-chips] { display: none; }
  /* The picker's chips are all drawn as plain radios, so scripts off can pick a
     whole design in one go; with scripts on, the ones not to show yet (a section
     still waiting, another type's style, a style behind "Show more styles")
     never flash before the picker hides them itself. */
  .ie-page [data-ie-section-state="waiting"] [data-ie-chips],
  .ie-page [data-ie-later] { display: none; }
}

/* A screen coming in rises 8px and fades over 180ms; nothing moves when the
   customer asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ie-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  .ie-page .ie-view-in { animation: ie-rise 180ms ease-out; }
  .ie-page .ie-chip,
  .ie-page .ie-section,
  .ie-page .ie-btn,
  .ie-page .ie-dot {
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease, opacity 150ms ease;
  }
}

/* ------------------------------------------------- cards, words, buttons -- */

.ie-page .ie-card {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--color-line, #e6e1d8);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(31 26 20 / 0.05), 0 6px 16px -8px rgb(31 26 20 / 0.12);
}
.ie-page .ie-card-tight { padding: 1rem; }
@media (min-width: 40rem) {
  .ie-page .ie-card { padding: 2rem; }
  .ie-page .ie-card-tight { padding: 1.25rem; }
}

.ie-page .ie-title {
  color: var(--color-ink, #1f1a14);
  font-size: var(--text-title, 1.625rem);
  font-weight: 700;
  line-height: 2.125rem;
  letter-spacing: -0.01em;
}
@media (min-width: 40rem) {
  .ie-page .ie-title { font-size: 2rem; line-height: 2.5rem; }
}
.ie-page .ie-lead {
  margin-top: 0.25rem;
  color: var(--color-muted, #6b6259);
  font-size: 1rem;
  line-height: 1.5rem;
}
.ie-page .ie-eyebrow {
  color: var(--color-muted, #6b6259);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1rem;
  text-transform: uppercase;
}

/* The buttons: a white one, and the accent one for the step's main job. 48px
   tall, 44px for the small ones. */
.ie-page .ie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-line-strong, #d3ccc0);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(31 26 20 / 0.06);
  color: var(--color-ink, #1f1a14);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ie-page .ie-btn:hover { border-color: #bdb4a4; background: #faf9f6; }
.ie-page .ie-btn:focus-visible { outline: 3px solid rgb(180 83 9 / 0.45); outline-offset: 2px; }
.ie-page .ie-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ie-page .ie-btn-primary {
  border-color: var(--color-accent, #b45309);
  background: var(--color-accent, #b45309);
  color: #fff;
  font-size: 1.125rem;
}
.ie-page .ie-btn-primary:hover { border-color: var(--color-accent-strong, #92400e); background: var(--color-accent-strong, #92400e); }
.ie-page .ie-btn-primary:disabled { cursor: wait; opacity: 0.7; }
.ie-page .ie-btn-block { display: flex; width: 100%; }
.ie-page .ie-btn-small { min-height: var(--spacing-tap, 2.75rem); padding: 0.25rem 1rem; font-size: 0.9375rem; }
/* A small button on two lines, "Walk gate" over "4 ft" (the map's gate choices,
   three to a phone's row). */
.ie-page .ie-btn-stack { flex-direction: column; gap: 0; padding-inline: 0.5rem; }

/* A word-sized button: underlined, a whole thumb tall. */
.ie-page .ie-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-tap, 2.75rem);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink, #1f1a14);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ie-page .ie-link:focus-visible { outline: 3px solid rgb(180 83 9 / 0.45); outline-offset: 2px; border-radius: 4px; }

/* A line of warning (a fence with no style yet). Never a block: it only says. */
.ie-page .ie-note-warn {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--color-warn-soft, #fef6d4);
  color: var(--color-warn, #7a4a00);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* --------------------------------------------------------- design view -- */

/* "Fence 1 of 2 · 102 ft", a small tag over the heading. */
.ie-page .ie-fence-tag {
  display: flex;
  width: fit-content;
  margin-top: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--color-accent-soft, #fdf1e1);
  color: var(--color-accent-strong, #92400e);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ie-page .ie-back { display: flex; width: fit-content; }

/* "Same as fence 1. Change anything that's different.": a quiet line in the accent. */
.ie-page .ie-note-soft {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--color-accent-soft, #fdf1e1);
  color: var(--color-accent-strong, #92400e);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* A section is a row that opens and folds. Open: the accent edge. Done: one
   line (a filled dot, the title, what was picked, Change). Waiting: dashed and
   quiet, with what to pick first. */
.ie-page .ie-section {
  padding: 0 1rem;
  border: 1px solid var(--color-line, #e6e1d8);
  border-radius: 0.875rem;
  background: #fff;
}
.ie-page .ie-section[data-ie-section-state="open"],
.ie-page .ie-section[data-ie-section-edit] {
  border-color: var(--color-accent, #b45309);
  box-shadow: 0 0 0 1px var(--color-accent, #b45309);
}
.ie-page .ie-section[data-ie-section-state="waiting"] {
  border-style: dashed;
  border-color: var(--color-line-strong, #d3ccc0);
  background: transparent;
}
.ie-page .ie-section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
}
.ie-page .ie-section-title {
  color: var(--color-ink, #1f1a14);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5rem;
}
.ie-page .ie-section[data-ie-section-state="waiting"] .ie-section-title { color: var(--color-muted, #6b6259); }
.ie-page .ie-section-hint,
.ie-page .ie-section-value {
  min-width: 0;
  margin-left: auto;
  color: var(--color-ink, #1f1a14);
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}
.ie-page .ie-section[data-ie-section-state="waiting"] .ie-section-hint { color: var(--color-muted, #6b6259); font-weight: 600; }
.ie-page .ie-change {
  flex: none;
  min-width: var(--spacing-tap, 2.75rem);
  min-height: var(--spacing-tap, 2.75rem);
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--color-muted, #6b6259);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ie-page .ie-change:hover { color: var(--color-ink, #1f1a14); }
.ie-page .ie-change:focus-visible { outline: 3px solid rgb(180 83 9 / 0.45); outline-offset: 1px; }

/* The Drawing | Photo switch in the Type and Style heads (27 Oct): it shows
   while the tiles are open, after "Pick one" and pushed right. On a phone it
   does not fit beside the hint, so it drops to a line of its own at the right
   (the title keeps the head's 3.5rem, so the first line sits where it always
   did). The hint keeps to 60% so a long picked name wraps instead of pushing
   the switch off the row. */
.ie-page .ie-section-head-pics .ie-section-title { display: flex; align-items: center; min-height: 3.5rem; }
.ie-page .ie-section[data-ie-section-state="open"] .ie-section-head-pics,
.ie-page .ie-section[data-ie-section-edit] .ie-section-head-pics { flex-wrap: wrap; row-gap: 0; }
.ie-page .ie-section[data-ie-section-state="open"] .ie-section-head-pics .ie-section-hint,
.ie-page .ie-section[data-ie-section-edit] .ie-section-head-pics .ie-section-hint { flex: 1 1 auto; max-width: 60%; margin-left: 0; }
.ie-page .ie-pics-slot { display: flex; flex: none; margin-left: auto; }
.ie-page .ie-pics-slot[hidden] { display: none; }
.ie-page .ie-section:not([data-ie-section-state="open"]):not([data-ie-section-edit]) .ie-pics-slot { display: none; }
/* Under the Preview's picture it takes the place "See the real photo" had. */
.ie-page .ie-pics-preview { margin-left: 0; }

/* The switch: two halves of one pill, the one in use filled with the accent,
   like the EN/ES pill, on white with the accent edge. Each half is a full 44. */
.ie-page .ie-pics {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  /* The accent edge is drawn inside the pill, so it is exactly as tall as its halves: 44. */
  outline: 1px solid var(--color-accent, #b45309);
  outline-offset: -1px;
  border-radius: 999px;
  background: #fff;
}
.ie-page .ie-pics[hidden] { display: none; }
.ie-page .ie-pics-half {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border: 0;
  background: #fff;
  color: var(--color-ink, #1f1a14);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.ie-page .ie-pics-half:hover { background: var(--color-accent-soft, #fdf1e1); }
.ie-page .ie-pics-half[aria-pressed="true"] { background: var(--color-accent, #b45309); color: #fff; }
.ie-page .ie-pics-half:focus-visible { outline: 3px solid rgb(180 83 9 / 0.45); outline-offset: -3px; }
.ie-page .ie-pics-half[aria-pressed="true"]:focus-visible { outline-color: #fff; }

/* The round dot at the start of a section: empty until it is picked, then filled. */
.ie-page .ie-dot {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-line-strong, #d3ccc0);
  border-radius: 999px;
  background: #fff;
}
.ie-page .ie-section[data-ie-section-state="open"] .ie-dot,
.ie-page .ie-section[data-ie-section-edit] .ie-dot { border-color: var(--color-accent, #b45309); }
.ie-page .ie-section[data-ie-section-state="done"] .ie-dot,
.ie-page .ie-dot-on {
  border-color: var(--color-ink, #1f1a14);
  background: var(--color-ink, #1f1a14);
}
.ie-page .ie-section[data-ie-section-edit] .ie-dot { background: #fff; }

/* The chips: big, round-cornered, tappable labels around a radio only a screen
   reader and the keyboard use. Picked: the accent edge, its soft fill and a
   check. Crossed out: not made for what is picked, dimmed with a line across. */
.ie-page .ie-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.25rem 0 1rem;
}
.ie-page .ie-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 4.25rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-line-strong, #d3ccc0);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--color-ink, #1f1a14);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  cursor: pointer;
}
.ie-page .ie-chip-label { min-width: 0; overflow-wrap: anywhere; }
.ie-page .ie-chip:hover { border-color: var(--color-accent, #b45309); }
.ie-page .ie-chip:has(input:focus-visible) { outline: 3px solid rgb(180 83 9 / 0.5); outline-offset: 2px; }
.ie-page .ie-chip[data-ie-chip-state="picked"] {
  border-color: var(--color-accent, #b45309);
  background: var(--color-accent-soft, #fdf1e1);
  box-shadow: 0 0 0 2px var(--color-accent, #b45309);
}
.ie-page .ie-chip-check {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--color-accent, #b45309);
}
.ie-page .ie-chip:not([data-ie-chip-state="picked"]) .ie-chip-check { display: none; }
.ie-page .ie-chip[data-ie-chip-state="unavailable"] {
  border-color: var(--color-line, #e6e1d8);
  cursor: not-allowed;
  opacity: 0.55;
}
.ie-page .ie-chip[data-ie-chip-state="unavailable"]:hover { border-color: var(--color-line, #e6e1d8); }
.ie-page .ie-chip[data-ie-chip-state="unavailable"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgb(31 26 20 / 0.55) calc(50% - 1px), rgb(31 26 20 / 0.55) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none;
}

/* A colour: its swatch over its name. */
.ie-page .ie-chip-colour {
  flex: 1 1 6rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
  min-width: 0;
  max-width: 9.5rem;
  padding: 0.375rem 0.375rem 0.5rem;
  font-size: 0.9375rem;
}
.ie-page .ie-chip-colour .ie-swatch {
  display: block;
  width: 100%;
  height: 3.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
}
.ie-page .ie-chip-colour .ie-chip-check {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  box-sizing: content-box;
  padding: 0.1875rem;
  border-radius: 999px;
  background: var(--color-accent, #b45309);
  color: #fff;
}
.ie-page .ie-more { margin-top: 0.25rem; }

/* ----------------------------------------------------- the right column -- */

/* The whole picture, never cropped, on the page's grey, as MySalesman shows its
   photo: small on a phone (the chips are the point), a little taller on a
   tablet, and from a laptop short enough that "Your drawing" fits under it on
   a 768 px screen. */
.ie-page .ie-preview-frame {
  position: relative;
  overflow: hidden;
  height: 8rem;
  border-radius: 0.875rem;
  background: var(--color-page, #f5f4f1);
}
@media (min-width: 40rem) {
  .ie-page .ie-preview-frame { height: 11rem; }
}
@media (min-width: 64rem) {
  .ie-page .ie-preview-frame { height: 12rem; }
}
.ie-page .ie-preview-picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The photo in the frame opens whole (the existing viewer) when it is tapped. */
.ie-page .ie-tile-example.ie-preview-example { left: 0.5rem; bottom: 0.5rem; }
.ie-page .ie-preview-open {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.ie-page .ie-preview-picture[data-shows="photo"]:not([hidden]) ~ .ie-preview-open { display: block; }
.ie-page .ie-preview-open:focus-visible { outline: 3px solid rgb(180 83 9 / 0.45); outline-offset: -3px; }
.ie-page .ie-preview-empty {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--color-muted, #6b6259);
  font-size: 1rem;
  text-align: center;
}
.ie-page .ie-preview-empty img { width: 55%; max-height: 55%; opacity: 0.5; object-fit: contain; }

/* The card of the Preview is in the design view only (the review has fences of
   every design); "Your drawing" is on a phone's review only (the design view
   has the Preview to look at, and the chips). */
.ie-page [data-ie-preview-view="review"] [data-ie-preview-card] { display: none; }
.ie-page [data-ie-preview-view="design"] [data-ie-sketch-card] { display: none; }
@media (min-width: 64rem) {
  .ie-page [data-ie-preview-view="design"] [data-ie-sketch-card] { display: block; }
}
/* On a phone the map comes first: its how-to is over it, and its Total and Next
   under it. The card says neither a second time. The card's stay while the map's
   are not showing: a deck with no fence still needs a Next. */
@media (max-width: 63.9375rem) {
  .ie-page [data-ie-draw-help] { display: none; }
  .ie-page [data-ie-grid]:has([data-ie-toolbar]:not([hidden]) [data-ie-map-next]:not([hidden])) [data-ie-view="draw"] [data-ie-to-design],
  .ie-page [data-ie-grid]:has([data-ie-toolbar]:not([hidden]) [data-ie-map-total]:not(:empty)) [data-ie-view="draw"] [data-ie-total] { display: none; }
}
/* On a phone the design view's column is the Preview alone, so until there is
   a picture to show it is not drawn at all: the chips come first. */
@media (max-width: 63.9375rem) {
  .ie-page [data-ie-preview][data-ie-preview-view="design"]:not([data-ie-preview-filled]) { display: none; }
  /* The drawing under it is not drawn there either, so no space is left for it. */
  .ie-page [data-ie-preview][data-ie-preview-view="design"] [data-ie-preview-card] { margin-block-end: 0; }
}
.ie-page .ie-sketch {
  display: block;
  width: 100%;
  height: 11rem;
  border-radius: 0.75rem;
  background: var(--color-page, #f5f4f1);
}
@media (min-width: 64rem) {
  .ie-page .ie-sketch { height: auto; aspect-ratio: 8 / 5; max-height: 10rem; }
}
/* Under the drawing, once there are gates: a green dot is a gate. */
.ie-page .ie-sketch-key {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: var(--color-muted, #6b6259);
  font-size: 0.875rem;
}
.ie-page .ie-sketch-key-dot {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: #059669;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-line-strong, #d3ccc0);
}

/* ---------------------------------------------- lists of fences and files -- */

.ie-page .ie-rows {
  display: grid;
  gap: 0.5rem;
}
.ie-page .ie-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1px solid var(--color-line, #e6e1d8);
  border-radius: 0.75rem;
  background: #faf9f6;
}
.ie-page .ie-row-remove { flex: none; justify-content: center; min-width: var(--spacing-tap, 2.75rem); padding: 0 0.5rem; color: var(--color-muted, #6b6259); font-size: 0.9375rem; }

/* A fence on the review: a small picture of its style, its words, Change, Remove. */
.ie-page .ie-fence-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-line, #e6e1d8);
  border-radius: 1rem;
  background: #faf9f6;
}
.ie-page .ie-fence-thumb {
  flex: none;
  width: 5rem;
  height: 3.25rem;
  border-radius: 0.5rem;
  background: var(--color-page, #f5f4f1);
  object-fit: cover;
}
@media (max-width: 21.9375rem) {
  .ie-page .ie-fence-thumb { display: none; }
}

/* The photos and plans a customer adds: names and sizes, never the file. */
.ie-page .ie-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--spacing-tap, 2.75rem);
  padding: 0.25rem 0.25rem 0.25rem 0.875rem;
  border: 1px solid var(--color-line, #e6e1d8);
  border-radius: 0.75rem;
  background: #fff;
}
.ie-page .ie-file-name { flex: 1 1 auto; min-width: 0; font-size: 1rem; overflow-wrap: anywhere; }
.ie-page .ie-file-size { flex: none; color: var(--color-muted, #6b6259); font-size: 0.875rem; }
.ie-page .ie-file-remove {
  flex: none;
  min-width: var(--spacing-tap, 2.75rem);
  min-height: var(--spacing-tap, 2.75rem);
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--color-muted, #6b6259);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ie-page .ie-file-remove:focus-visible { outline: 3px solid rgb(180 83 9 / 0.45); outline-offset: 1px; border-radius: 0.5rem; }
.ie-page .ie-file-busy { color: var(--color-muted, #6b6259); font-style: italic; }
.ie-page .ie-file-pick { display: inline-flex; }
.ie-page .ie-files-box input[type="file"]:focus-visible + .ie-file-pick { outline: 3px solid rgb(180 83 9 / 0.5); outline-offset: 2px; }
.ie-page .ie-files-box input[type="file"]:disabled + .ie-file-pick { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ------------------------------------------------------- the last step -- */

.ie-page .ie-done-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--color-good-fill, #16a34a);
  color: #fff;
}
.ie-page .ie-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--color-accent-soft, #fdf1e1);
  color: var(--color-accent-strong, #92400e);
  font-size: 1.125rem;
  font-weight: 700;
}
/* The booking offer is the /quote thank-you page's own partial, drawn there
   with a rule above it; here it is the whole card. */
.ie-page .ie-offer [data-booking-offer] { margin-top: 0; padding-top: 0; border-top: 0; }

/* On a phone the last step is one list in the order a customer needs it: the
   thanks, the booking offer (or the call line) right under it, then their
   request and their team. The two columns' boxes step aside (display:
   contents), so their cards line up in the one list, drawn once. */
@media (max-width: 63.9375rem) {
  .ie-page [data-ie-finish] { display: flex; flex-direction: column; }
  .ie-page [data-ie-finish-column] { display: contents; }
  .ie-page [data-ie-finish-part="done"] { order: 1; }
  .ie-page [data-ie-finish-part="offer"] { order: 2; }
  .ie-page [data-ie-finish-part="request"] { order: 3; }
  .ie-page [data-ie-finish-part="team"] { order: 4; }
  .ie-page [data-ie-finish-part="test"] { order: 5; }
  .ie-page [data-ie-finish-part="change"] { order: 6; }
}

/* ------------------------------------------------------------ on the map -- */

/* The labels on the customer's map ride on Google's overlay layer. */
.ie-page .ie-pill {
  font-family: inherit;
  line-height: 1.25;
}

/* Google's address search, drawn like the other boxes (it brings no border of
   its own), at the 16px an iPhone needs to leave the page unzoomed, and the
   width of the other boxes. */
.ie-page gmp-place-autocomplete {
  display: block;
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--color-slate-300, #d6d3d1);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  color-scheme: light;
  font-size: 1rem;
  --gmp-mat-font-body-large: 400 1rem/1.5rem system-ui, sans-serif;
  --gmp-mat-font-body-medium: 400 1rem/1.5rem system-ui, sans-serif;
}

/* ------------------------------------------------------ colour swatches -- */

/* NOT under .ie-page: the Settings card "Pictures customers see" draws the same
   swatches on a staff page, sized there with Tailwind classes, so nothing here
   sets a size. Wood grain for cedar and treated pine (repeating lines over a
   warm or a pale fill), flat fills for the rest, a line round white, and any
   colour this does not know a plain warm grey. */
.ie-swatch[data-swatch] { background: var(--color-line-strong, #d3ccc0); box-shadow: inset 0 0 0 1px rgb(31 26 20 / 0.12); }
.ie-swatch[data-swatch="cedar"] {
  background:
    repeating-linear-gradient(96deg, rgb(110 52 24 / 0.28) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(88deg, rgb(255 224 190 / 0.22) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, #cf8d5a, #b4693a);
}
.ie-swatch[data-swatch="treated_pine"] {
  background:
    repeating-linear-gradient(94deg, rgb(78 86 36 / 0.22) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(86deg, rgb(255 250 200 / 0.28) 0 3px, transparent 3px 13px),
    linear-gradient(180deg, #c8c98e, #a6aa68);
}
.ie-swatch[data-swatch="black"] { background: linear-gradient(180deg, #2c2c2c, #101010); }
.ie-swatch[data-swatch="white"] { background: #ffffff; box-shadow: inset 0 0 0 1px var(--color-line-strong, #d3ccc0); }
.ie-swatch[data-swatch="galvanized"] { background: linear-gradient(115deg, #e6e8ea, #b7bcc2 42%, #eef0f2 56%, #a5abb2); }
.ie-swatch[data-swatch="bronze"] { background: linear-gradient(180deg, #8b6a45, #5c4327); }
.ie-swatch[data-swatch="gray"] { background: linear-gradient(180deg, #a3a8ad, #858a90); }
.ie-swatch[data-swatch="beige"] { background: #dccdae; }
.ie-swatch[data-swatch="tan"] { background: #c9a874; }
.ie-swatch[data-swatch="khaki"] { background: #bcb27b; }
.ie-swatch[data-swatch="almond"] { background: #e4d7c0; }
.ie-swatch[data-swatch="clay"] { background: #b9765c; }
.ie-swatch[data-swatch="sandstone"] { background: #cfb690; }
.ie-swatch[data-swatch="adobe"] { background: #c28d66; }
.ie-swatch[data-swatch="brown"] { background: #70492f; }
.ie-swatch[data-swatch="green"] { background: #5d7b50; }
.ie-swatch[data-swatch="red"] { background: #a8392d; }
.ie-swatch[data-swatch="blue"] { background: #40669f; }

/* Real style photos supplement the drawing. Native dialog supplies Escape,
   focus trapping and a scripts-off ordinary-link fallback. */
.ie-page .ie-photo-dialog {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: #171717;
  color: #fff;
}
.ie-page .ie-photo-dialog::backdrop { background: #171717; }
.ie-page .ie-photo-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; }
.ie-page .ie-photo-bar h2 { font-size: 1rem; font-weight: 600; }
.ie-page .ie-photo-close { min-width: 44px; min-height: 44px; padding: .5rem 1rem; border: 1px solid #aaa; border-radius: .5rem; }
.ie-page .ie-photo-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ie-page .ie-photo-image { display: block; width: 100%; height: calc(100% - 4rem); margin-top: 1rem; object-fit: contain; }
/* A stock picture's credit line, when its licence asks for one (docs/EXAMPLE_PHOTOS.md). */
.ie-page .ie-photo-dialog:has(.ie-photo-credit:not([hidden])) .ie-photo-image { height: calc(100% - 6rem); }
.ie-page .ie-photo-credit { margin-top: .5rem; font-size: .875rem; color: #ddd; overflow-wrap: anywhere; }

/* ------------------------------------------------------- the map's height -- */
/* On a phone, step 3's map is 55% of the screen the customer can see. iOS
   Safari's vh is the screen with its bars hidden, which is taller than that;
   svh is the screen with them shown. A browser without svh keeps 55vh. From a
   laptop the map's lg: height applies as before. */
@supports (height: 1svh) {
  @media (width < 64rem) {
    .ie-page [data-ie-map-canvas].h-\[55vh\] { height: 55svh; }
  }
}

/* ------------------------------------------------ the photo tiles (27 Oct) -- */

/* The Type and Style steps: a grid of tiles, the picture big and the plain
   name small under it (Kanyon: they pick by looks, not by name). Two across on
   a phone, three from a tablet (and in the laptop's card column), four on a
   tablet held wide, where the card has the whole width. A tap picks it and
   moves on; the one picked is outlined with the accent and a check. */
.ie-page .ie-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}
@media (min-width: 40rem) {
  .ie-page .ie-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .ie-page .ie-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ie-page .ie-tiles .ie-more { grid-column: 1 / -1; justify-self: start; }
.ie-page .ie-tile {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.375rem 0.375rem 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}
.ie-page .ie-tile-frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 0.5rem;
  background: var(--color-page, #f5f4f1);
}
.ie-page .ie-tile-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A tile's name wraps between words (Spanish hyphenates), never mid-word;
   a touch smaller where three or four share the row. */
.ie-page .ie-tile .ie-chip-label { overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 40rem) {
  .ie-page .ie-tile { padding: 0.25rem 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.125rem; }
}
/* Kowboy's drawing is shown whole, never cropped. */
.ie-page .ie-tile-photo[data-ie-drawing] { object-fit: contain; padding: 0.25rem; }
/* A stock photo says so, small, in the bottom corner of its frame while it shows. */
.ie-page .ie-tile-example {
  position: absolute;
  left: 0.25rem;
  bottom: 0.25rem;
  max-width: calc(100% - 0.5rem);
  padding: 0 0.375rem;
  border-radius: 0.25rem;
  background: rgb(31 26 20 / 0.78);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.125rem;
  pointer-events: none;
}
.ie-page .ie-tile-example[hidden] { display: none; }
.ie-page .ie-tile .ie-chip-check {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  box-sizing: content-box;
  padding: 0.1875rem;
  border-radius: 999px;
  background: var(--color-accent, #b45309);
  color: #fff;
}

/* Step 4: the fence by its real name, with the picture it was picked by. */
.ie-page .ie-named-fence {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.ie-page .ie-named-photo {
  flex: none;
  width: 5.5rem;
  height: 4.125rem;
  border-radius: 0.5rem;
  background: var(--color-page, #f5f4f1);
  object-fit: cover;
}
.ie-page .ie-named-photo[data-ie-drawing] { object-fit: contain; padding: 0.25rem; }

/* The EN/ES pill in the brand bar: two halves, the language in use filled. */
.ie-page .ie-lang {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 999px;
}
.ie-page .ie-lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.ie-page .ie-lang-link:hover { color: #fcd34d; }
.ie-page .ie-lang-link:focus-visible { outline: 3px solid rgb(252 211 77 / 0.8); outline-offset: -3px; }
.ie-page .ie-lang-link[aria-current="true"] { background: #fff; color: var(--color-ink, #1f1a14); }