/* Mat tiling calculator (artificial-boxwood-hedge-mat). Uses the page tokens
   from boxwood-recovery.css. */
.mt { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.mt .calc-form h3 { margin: .7rem 0 1.4rem; font-size: 1.2rem; line-height: 1.25; }
.mt-controls { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 1.1rem; }
.mt-controls:disabled { opacity: .55; }
.mt-dimset { margin: 0; padding: 0; border: 0; min-width: 0; }
.mt-dimset legend {
  padding: 0;
  margin-bottom: .45rem;
  color: var(--muted);
  font-size: .78rem;
}
.mt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.mt-unit { position: relative; }
.mt-unit input { padding-right: 2.6rem; }
.mt-unit label {
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
.mt .calc-help { margin-top: .2rem; }

.mt .calc-result { justify-content: flex-start; gap: 1.4rem; }
.mt .calc-result[aria-live] { min-height: 0; }
.mt-figure { margin: 0; }
.mt-canvas {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg);
  border: 1px solid var(--line);
}
.mt-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin-top: .65rem;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  line-height: 1.6;
  text-transform: uppercase;
}
.mt-key { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); }
.mt-key::before { content: ""; width: 12px; height: 12px; flex: 0 0 auto; }
.mt-key-full::before { background: rgba(0, 200, 83, .2); border: 1px solid rgba(0, 200, 83, .7); }
.mt-key-cut::before {
  border: 1px solid rgba(196, 162, 101, .75);
  background: repeating-linear-gradient(-45deg, rgba(196, 162, 101, .55) 0 1px, rgba(196, 162, 101, .08) 1px 4px);
}
.mt-scale { margin-left: auto; }

.mt-readout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: end;
}
.mt-readout .calc-number { margin: .35rem 0 0; }
.mt-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}
.mt-stats div { padding: .7rem .75rem 0 0; }
.mt-stats dt {
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.mt-stats dd {
  margin: .3rem 0 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mt .calc-summary { font-size: .9rem; }
.mt .calc-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.mt .calc-actions[hidden] { display: none; }
.mt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Drawing */
.mt-svg text { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.mt-ground { stroke: var(--line-strong); stroke-width: 1; }
.mt-ground-ticks { stroke: var(--line); stroke-width: 1; fill: none; }
.mt-wall { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.mt-full { fill: rgba(0, 200, 83, .2); stroke: rgba(0, 200, 83, .55); stroke-width: .75; }
.mt-cut { fill: url(#mt-hatch); stroke: rgba(196, 162, 101, .7); stroke-width: .75; stroke-dasharray: 3 2; }
.mt-hatch-bg { fill: rgba(196, 162, 101, .07); }
.mt-hatch-line { stroke: rgba(196, 162, 101, .55); stroke-width: 1.2; }
.mt-dim line, .mt-dim path { stroke: var(--gold); stroke-width: 1; fill: none; }
.mt-dim .mt-ext { stroke: rgba(196, 162, 101, .4); }
.mt-dim text {
  fill: var(--gold);
  font-weight: 500;
  paint-order: stroke fill;
  stroke: var(--bg);
  stroke-width: 7px;
  stroke-linejoin: round;
}
.mt-module text { font-size: 10px; }
.mt-empty { fill: var(--muted-2); }

.mt-anim rect {
  animation: mtTile 160ms var(--ease) both;
  animation-delay: var(--d, 0ms);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes mtTile {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1050px) {
  .mt { grid-template-columns: 1fr; }
  .mt-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .mt-controls > .field { grid-column: 1 / -1; max-width: 50%; }
}
@media (max-width: 720px) {
  .mt-controls { grid-template-columns: 1fr; }
  .mt-controls > .field { max-width: none; }
  .mt-canvas { aspect-ratio: 4 / 3; }
  .mt-readout { grid-template-columns: 1fr; gap: .9rem; }
  .mt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-stats div { padding-bottom: .7rem; }
  .mt-scale { margin-left: 0; }
  .mt .calc-actions .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-anim rect { animation: none; }
}