/* Yard & Hardscape Planner — the plan gets the width.
 *
 * The plan, its toolbar and the checks take the main column; the palette,
 * the inspector and the list of everything on the plan sit beside it on a
 * desktop and under it on a phone. Type and surfaces come from the site
 * preset. Material colours are fixed: they say what a surface is made of and
 * must read the same on every theme and on paper.
 */

.product[data-product="yard-planner"] {
  --yd-line: color-mix(in srgb, var(--text) 18%, transparent);
  --yd-focus: #2563eb;
  --yd-warn: #b45309;
  --yd-bad: #b42318;
}

.yd-plan-pane { max-width: none; }
.yd-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────── */

.yd-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1rem;
  align-items: start;
}
.yd-main { display: grid; gap: .6rem; min-width: 0; }
.yd-side { display: grid; gap: .8rem; min-width: 0; }

.yd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  padding: .35rem;
  border: 1px solid var(--yd-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.yd-toolgroup { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.yd-toolbar-gap { flex: 1 1 auto; }
.yd-toolbar .input { width: auto; min-width: 0; padding-block: .3rem; }
.yd-toolbar input[type="range"] { width: 6rem; }
.yd-tool[aria-pressed="true"], .yd-toolbar [aria-pressed="true"] {
  background: color-mix(in srgb, var(--yd-focus) 14%, var(--surface));
  border-color: var(--yd-focus);
}
.yd-climate { max-width: 17rem; }

.yd-draftbar, .yd-scalebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .55rem .8rem;
  border-left: 4px solid var(--yd-focus);
  border-radius: calc(var(--radius) / 1.5);
  background: color-mix(in srgb, var(--yd-focus) 9%, var(--surface));
}
.yd-scalebar { border-left-color: var(--yd-bad); background: color-mix(in srgb, var(--yd-bad) 7%, var(--surface)); }
.yd-draftbar p, .yd-scalebar p { margin: 0; flex: 1 1 22rem; }
.yd-draftbar .tool-actions, .yd-scalebar .tool-actions { margin: 0; }
.yd-scalebar .input { width: 11rem; }
.yd-draftbar[hidden], .yd-scalebar[hidden], .yd-checks[hidden] { display: none; }

/* ── The plan ───────────────────────────────────────────────────────── */

.yd-stage {
  position: relative;
  border: 1px solid var(--yd-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #f3f0e7;
}
.yd-canvas {
  display: block;
  width: 100%;
  height: min(72vh, 46rem);
  min-height: 22rem;
  touch-action: none;
  cursor: grab;
  outline: none;
}
.yd-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--yd-focus); }
.yd-canvas.is-panning { cursor: grabbing; }
.yd-canvas[data-hover="item"] { cursor: move; }
.yd-canvas[data-hover="handle"] { cursor: crosshair; }
.yd-canvas.is-drop-target { cursor: copy; box-shadow: inset 0 0 0 3px #16a34a; }

.yd-ghost {
  position: fixed;
  left: 0; top: 0;
  z-index: 50;
  pointer-events: none;
  padding: .25rem .55rem;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: #1f2933;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.yd-ghost[hidden] { display: none; }

/* ── Side cards ─────────────────────────────────────────────────────── */

.yd-card {
  display: grid;
  gap: .6rem;
  padding: .9rem;
  border: 1px solid var(--yd-line);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}
.yd-card h3 { margin: 0; font-size: 1.05rem; }
.yd-card h4 { margin: .2rem 0 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.yd-card .field-help { margin: 0; }

.yd-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .35rem; }
.yd-tile {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.6rem;
  padding: .35rem .5rem;
  font: inherit;
  font-size: .88rem;
  text-align: left;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--yd-line);
  border-radius: calc(var(--radius) / 1.5);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.yd-tile:hover { border-color: var(--yd-focus); }
.yd-tile:focus-visible { outline: 3px solid var(--yd-focus); outline-offset: 1px; }
.yd-draw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
.yd-draw-row .input { width: 100%; min-width: 0; }

.yd-swatch {
  flex: none;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .3);
}
.yd-swatch-pavers {
  background:
    linear-gradient(90deg, transparent 46%, rgba(92, 60, 34, .6) 46% 54%, transparent 54%) 0 0 / 10px 5px,
    linear-gradient(0deg, transparent 80%, rgba(92, 60, 34, .6) 80%) 0 0 / 10px 5px, #c9a27e;
}
.yd-swatch-concrete { background: #d5d3cc; }
.yd-swatch-stone { background: radial-gradient(circle, #958c7a 25%, transparent 26%) 0 0 / 5px 5px, #cfc8b8; }
.yd-swatch-bed { background: radial-gradient(circle, #5a412e 25%, transparent 26%) 0 0 / 4px 4px, #8a6a4f; }
.yd-swatch-lawn { background: #9cc27a; }
.yd-swatch-structure { background: repeating-linear-gradient(45deg, #e7e2d8 0 3px, #b8bec7 3px 4px); border-color: #4b5563; }
.yd-swatch-lot { background: transparent; border: 2px dashed #b42318; }
.yd-swatch-plant { border-radius: 50%; }

.yd-field { display: grid; gap: .2rem; margin: 0; min-width: 0; }
.yd-field .input { width: 100%; min-width: 0; }
.yd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.yd-checks-row { display: grid; gap: .3rem; }
.yd-check { display: inline-flex; gap: .45rem; align-items: center; font-size: .92rem; }
.yd-group {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: .55rem .7rem .7rem;
  border: 1px solid var(--yd-line);
  border-radius: calc(var(--radius) / 1.5);
  min-width: 0;
}
.yd-group legend { padding: 0 .25rem; font-size: .88rem; font-weight: 700; }
.yd-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .8rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.yd-facts dt { color: var(--muted); font-size: .88rem; }
.yd-facts dd { margin: 0; font-weight: 600; }
.yd-actions { margin: 0; }
.yd-actions .tone-bad { color: var(--yd-bad); }

.yd-table-wrap { overflow-x: auto; max-width: 100%; }
.yd-edges { width: 100%; border-collapse: collapse; font-size: .88rem; }
.yd-edges th, .yd-edges td { padding: .2rem .3rem; text-align: left; border-bottom: 1px solid var(--yd-line); }
.yd-edges .input { padding-block: .2rem; font-size: .85rem; width: 100%; min-width: 7.5rem; }

.yd-layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; max-height: 22rem; overflow: auto; }
.yd-layer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .3rem .4rem;
  font: inherit;
  font-size: .9rem;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) / 1.5);
  cursor: pointer;
}
.yd-layer:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.yd-layer[aria-pressed="true"] { border-color: var(--yd-focus); background: color-mix(in srgb, var(--yd-focus) 10%, transparent); }
.yd-layer:focus-visible { outline: 3px solid var(--yd-focus); outline-offset: 1px; }
.yd-layer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yd-layer-meta { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.yd-checks { gap: .4rem; }
.yd-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.yd-check-item {
  width: 100%;
  padding: .4rem .6rem;
  font: inherit;
  font-size: .9rem;
  text-align: left;
  color: var(--text);
  background: color-mix(in srgb, var(--yd-focus) 6%, var(--surface));
  border: 0;
  border-left: 3px solid var(--yd-focus);
  border-radius: 4px;
  cursor: pointer;
}
.yd-check-item.tone-warn { border-left-color: var(--yd-warn); background: color-mix(in srgb, var(--yd-warn) 9%, var(--surface)); }

/* ── Takeoff and costs ──────────────────────────────────────────────── */

.yd-table { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; font-variant-numeric: tabular-nums; }
.yd-table caption { text-align: left; font-weight: 700; padding-bottom: .35rem; }
.yd-table th, .yd-table td { padding: .4rem .5rem; text-align: left; border-bottom: 1px solid var(--yd-line); vertical-align: middle; }
.yd-table thead th { font-size: .82rem; color: var(--muted); font-weight: 600; }
.yd-list { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.yd-sources { color: var(--muted); font-size: .9rem; }
.yd-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem 1rem; margin: .6rem 0; }

.yd-compare {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--yd-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.yd-bar { display: grid; gap: .3rem; }
.yd-bar .field-help { margin: 0; }
.yd-bar-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.yd-bar-total { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.yd-bar-track {
  display: flex;
  height: 1.1rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.yd-bar-part.is-materials { background: #8a6a4f; }
.yd-bar-part.is-extras { background: #c9a27e; }
.yd-bar-part.is-quote { background: #3f6e8c; }
.yd-compare-line { margin: 0; font-weight: 600; }
.yd-price-cell { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.yd-price-cell .input, .yd-extra-row .input.yd-price { width: 6.5rem; min-width: 0; }
.yd-extras, .yd-hired { display: grid; gap: .45rem; margin: 1rem 0; }
.yd-extras h3, .yd-hired h3 { margin: 0; }
.yd-extra-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .4rem; align-items: center; }
.yd-hired .yd-field { max-width: 22rem; }

/* ── Phones and narrow windows ──────────────────────────────────────── */

@media (max-width: 960px) {
  .yd-workspace { grid-template-columns: minmax(0, 1fr); }
  .yd-canvas { height: min(62vh, 32rem); }
}
@media (max-width: 520px) {
  .yd-toolbar-gap { display: none; }
  .yd-climate { max-width: 100%; }
  .yd-pair { grid-template-columns: 1fr; }
  .yd-extra-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .yd-extra-row > button { grid-column: 1 / -1; justify-self: start; }
  .yd-price-cell .input { width: 5rem; }
}

/* ── Print ──────────────────────────────────────────────────────────── */

.yd-print { display: none; }
@media print {
  body[data-printing-scope] .yd-print[data-printing] { display: block; color: #000; font: 10pt/1.35 Helvetica, Arial, sans-serif; }
  .yd-print h2 { font-size: 14pt; margin: 0 0 .3rem; }
  .yd-print h3 { font-size: 11.5pt; margin: .8rem 0 .2rem; }
  .yd-print table { width: 100%; border-collapse: collapse; margin: .3rem 0 .8rem; }
  .yd-print th, .yd-print td { text-align: left; padding: 2pt 4pt; border-bottom: .5pt solid #aaa; }
  .yd-print img { width: 100%; height: auto; max-height: 8.2in; object-fit: contain; }
  .yd-print-page { break-after: page; }
  .yd-print-page:last-child { break-after: auto; }
}

/* Toolbar and inspector buttons read as buttons, not links: they act on the
   plan in place and a reader looks for them as controls. */
.yd-toolbar .btn-quiet, .yd-draw-row .btn-quiet, .yd-actions .btn-quiet, .yd-extras .btn-quiet,
.yd-draftbar .btn-quiet, .yd-scalebar .btn-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: .25rem .65rem;
  font-size: .9rem;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--yd-line);
  border-radius: calc(var(--radius) / 1.5);
}
.yd-toolbar .btn-quiet:hover, .yd-actions .btn-quiet:hover, .yd-draw-row .btn-quiet:hover { border-color: var(--yd-focus); }
.yd-toolbar .btn-quiet:disabled, .yd-draftbar .btn-quiet:disabled { opacity: .5; }