* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #1d1d22;
  background: #f4f1ea;
}

.site-header, main, footer {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-header { padding-top: 20px; }
h1 { font-size: 1.7rem; margin: 0 0 6px; }
h2 { font-size: 1.3rem; }
.lead { margin: 0 0 8px; }

nav a { margin-right: 14px; color: #5a3410; font-weight: 600; }
a { color: #5a3410; }

.controls, .unlock {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-end;
  padding: 14px 0;
}

.unlock { flex-direction: row; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }

label { font-size: 0.9rem; font-weight: 600; }

input[type="text"], select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid #8a8470;
  border-radius: 4px;
  background: #fff;
  min-width: 140px;
}

button {
  font: inherit;
  padding: 7px 14px;
  border: 1px solid #5a3410;
  border-radius: 4px;
  background: #fff;
  color: #3a2208;
  cursor: pointer;
}

button:hover:not([disabled]) { background: #efe3d0; }
button[disabled], select[disabled], input[disabled] { opacity: 0.5; cursor: not-allowed; }

.map-info { font-size: 0.95rem; margin: 6px 0; word-break: break-all; }

#map {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  background: #fff;
  border: 2px solid #2b2b33;
}

.note { font-size: 0.9rem; color: #444; max-width: 720px; }
.status { flex-basis: 100%; margin: 0; font-weight: 600; }
.status.ok { color: #1d5b2b; }
.status.bad { color: #9b1c1c; }

.pro {
  margin: 28px 0;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #c9bfa8;
  border-radius: 6px;
}

footer { padding-top: 16px; padding-bottom: 28px; font-size: 0.85rem; color: #444; }

.tile-container { display: none; }

.tw1 { width: 1in; } .tw2 { width: 2in; } .tw3 { width: 3in; } .tw4 { width: 4in; }
.tw5 { width: 5in; } .tw6 { width: 6in; } .tw7 { width: 7in; }
.th1 { height: 1in; } .th2 { height: 2in; } .th3 { height: 3in; } .th4 { height: 4in; }
.th5 { height: 5in; } .th6 { height: 6in; } .th7 { height: 7in; } .th8 { height: 8in; }
.th9 { height: 9in; } .th10 { height: 10in; }

@page { margin: 0.5in; }

@media print {
  body { background: #fff; }
  .no-print, .site-header, footer, .controls, .unlock, .pro { display: none; }
  main { max-width: none; padding: 0; margin: 0; }
  .map-area { display: block; }
  .map-info { font-size: 10pt; margin: 0 0 0.1in; }
  #map {
    width: 7in;
    max-width: 7in;
    height: auto;
    border: 1px solid #000;
  }

  body.print-tiles .map-area { display: none; }
  body.print-tiles .tile-container { display: block; }
  .tile-page {
    position: relative;
    width: 7in;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }
  .tile-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .tile-canvas { display: block; }
  .tile-label {
    position: absolute;
    top: -0.32in;
    left: 0;
    font-size: 9pt;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
  }
}