/* MAP brand: Charcoal #414042 · Espresso #4A2C1A · Stone #C8C3BB · Warm White #FAF8F4.
   Headings stand in for FreightBig Pro with a serif stack; body approximates Montserrat. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --charcoal: #414042;
  --espresso: #4A2C1A;
  --espresso-hover: #3D2318;
  --stone: #C8C3BB;
  --warm-white: #FAF8F4;
  --muted: #7A746C;
}

body {
  background: var(--warm-white);
  color: var(--charcoal);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }

.masthead { margin-bottom: 40px; }
.brand {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.brand .dot { color: var(--espresso); }

h1, h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.25;
}
h1 { font-size: 1.9rem; margin-bottom: 6px; }
h2 { font-size: 1.3rem; margin: 24px 0 12px; }

.meta { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.desc { margin: 16px 0 28px; max-width: 56ch; }

.cards { display: grid; gap: 16px; margin: 24px 0; }
.card {
  display: block; padding: 20px; border: 1px solid var(--stone); border-radius: 6px;
  background: #fff; color: inherit; text-decoration: none; transition: border-color 0.15s ease;
}
.card:hover { border-color: var(--espresso); }
.card h2 { margin: 0 0 4px; }
.card p { margin-top: 8px; font-size: 0.95rem; }

.tzrow { display: flex; gap: 10px; align-items: center; margin: 20px 0 16px; font-size: 0.9rem; color: var(--muted); }
select, input, textarea {
  font: inherit; color: var(--charcoal); background: #fff;
  border: 1px solid var(--stone); border-radius: 4px; padding: 10px 12px; width: 100%;
}
.tzrow select { width: auto; padding: 6px 8px; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus, button:focus-visible { outline: 2px solid var(--espresso); outline-offset: 1px; }

.days, .times { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.day, .time {
  border: 1px solid var(--stone); background: #fff; color: var(--charcoal);
  border-radius: 4px; padding: 9px 13px; font: inherit; font-size: 0.92rem; cursor: pointer;
}
.day[aria-pressed="true"], .time[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--warm-white); }
.day:hover, .time:hover { border-color: var(--espresso); }
.month-label { width: 100%; margin: 10px 0 2px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.field { display: block; margin-bottom: 16px; }
.field span { display: block; margin-bottom: 6px; font-size: 0.9rem; }

.btn {
  display: inline-block; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--espresso); color: var(--warm-white);
  font: inherit; font-size: 0.95rem; letter-spacing: 0.03em;
  padding: 12px 22px; margin: 8px 8px 0 0; transition: background 0.15s ease;
}
.btn:hover { background: var(--espresso-hover); }
.btn.ghost { background: transparent; color: var(--charcoal); border: 1px solid var(--stone); }
.btn.ghost:hover { border-color: var(--espresso); }

.confirm-card {
  border: 1px solid var(--stone); border-radius: 6px; background: #fff;
  padding: 16px 18px; margin: 8px 0 16px;
}
.confirm-card p { margin: 0 0 6px; }
.confirm-card p:last-child { margin-bottom: 0; }
.confirm-card a { color: var(--espresso); word-break: break-word; }
.meta-note { font-size: 0.9rem; color: var(--muted); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

#picker-status, #form-status, #cancel-result { margin-top: 12px; color: var(--muted); }
#form-status.error, #cancel-result.error, #picker-status.error { color: #8a2f20; }

.hatch { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--stone); font-size: 0.9rem; color: var(--muted); }
.hatch a { color: var(--espresso); }