/* mytown.html — What about my town? Uses the tbf.css tokens. The answer card
   takes its colour from --k / --k-ink, set per kind by js/mytown.js. */
/* The container keeps the site width (so it lines up with the header); its
   children stop at a readable 800px. */
.mt-wrap { display: flex; flex-direction: column; gap: 18px; }
.mt-wrap > * { width: 100%; max-width: 800px; }
.mt-wrap [hidden] { display: none !important; }
.mt-ask { margin: 0; }
.mt-ask .card-body { gap: 10px; grid-template-columns: minmax(0, 1fr); }
.mt-label { font: 700 15px/1.2 var(--font); color: var(--text); }
.mt-row { display: flex; gap: 8px; min-width: 0; }
.mt-row input {
  flex: 1 1 0; width: 0; min-width: 0; font: 500 18px/1.2 var(--font); padding: 13px 14px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--inset); color: var(--text);
}
.mt-row input::placeholder { color: var(--mute); }
.mt-row input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.mt-go { flex: 0 0 auto; min-width: 88px; font-size: 16px; padding-inline: 20px; border-radius: 10px; }
.btn:disabled { opacity: .6; cursor: progress; }
.mt-small { font-size: 13px; margin: 0; }
.mt-locate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 4px; }
.mt-locate-row .btn { flex: 0 0 auto; }
.mt-locate-row p { flex: 1 1 240px; }
.mt-last { margin: 0; font-size: 14px; color: var(--dim); }
.mt-link { font: 600 14px/1.4 var(--font); color: var(--accent-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.mt-result { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 12px; }
.mt-result[aria-busy="true"] .mt-card { opacity: .55; transition: opacity .2s; }
.mt-card {
  --k: #6b7280; --k-ink: #fff;
  padding: 16px 18px 16px 20px; border-radius: 14px; background: var(--panel);
  border: 2px solid var(--k); border-left-width: 10px; box-shadow: var(--shadow);
}
.mt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mt-pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--k); color: var(--k-ink);
  font: 800 12.5px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.mt-place { margin: 0; font: 800 clamp(20px, 4vw, 26px)/1.15 var(--font); color: var(--text); }
.mt-text { margin: 10px 0 0; font: 600 clamp(18px, 3.2vw, 21px)/1.4 var(--font); color: var(--text); }
.mt-alerts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mt-alert { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 10px; border-radius: 8px; background: var(--raise); border: 1px solid var(--line); }
.mt-alert b { font-weight: 700; color: var(--text); }
.mt-alert span { color: var(--dim); font-variant-numeric: tabular-nums; }
.mt-sig-W { border-left: 4px solid #e8173c; }
.mt-sig-A { border-left: 4px solid #ffd400; }
.mt-sig-Y { border-left: 4px solid #f59e0b; }

.mt-meta p { margin: 0; }
.mt-meta { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--dim); }
.mt-asof { display: flex; flex-wrap: wrap; gap: 4px 14px; font-variant-numeric: tabular-nums; }
.mt-live { font-weight: 700; color: var(--text); }
.mt-live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--k-live, #e8173c); vertical-align: 1px; }
.mt-note { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel-2, var(--raise)); color: var(--text); }
.mt-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mt-links a { color: var(--accent-text); font-weight: 600; text-underline-offset: 2px; }

.mt-standing { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text); font-weight: 600; line-height: 1.45; }
.mt-how { margin: 0; }
.mt-how ol { margin: 0 0 0 1.3em; padding: 0; }
.mt-how li { margin: 3px 0; }
.mt-how p { margin: 0; }

@media (max-width: 480px) {
  .mt-card { padding: 14px 14px 14px 16px; border-left-width: 8px; }
  .mt-go { min-width: 72px; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-result[aria-busy="true"] .mt-card { transition: none; }
}