:root {
  color-scheme: light;
  --bg: #f6f4ef;
  --ink: #1f2c1d;
  --muted: #5b6b57;
  --accent: #2f5d3a;
  --accent-ink: #ffffff;
  --card: #ffffff;
  --border: #dfe3d8;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is how every panel on this page is shown and
   hidden, and its default UA rule is only `display: none` — which any
   author rule setting `display` silently beats. That is exactly what
   happened to the clear button: `.clear-btn { display: flex }` left it on
   screen with `hidden` set, on a fresh page with nothing to clear. Making
   it `!important` here means a display rule anywhere else can't defeat it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: 72px 20px 96px;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ask-form {
  display: flex;
  gap: 8px;
}

/* Wraps the input so the clear button can sit inside its right-hand edge.
   The input keeps `flex: 1`, which now applies to the wrapper. */
.ask-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

#question {
  flex: 1;
  min-width: 0;
  /* Right padding reserves the button's lane. It is not enough on its own:
     once the text overflows, browsers scroll it THROUGH the padding, so a
     long question ends up running under the × — see .clear-btn below, which
     is what actually keeps it legible. */
  padding: 13px 46px 13px 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--card);
  color: var(--ink);
}

#question:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* The clear (×) button, inside the right-hand end of the input.
   Deliberately quiet — it's a convenience, not the action on this screen,
   "Ask" is — but it has to stay READABLE, and a transparent button over a
   scrolled input does not. A question long enough to overflow scrolls its
   text through the input's right-hand padding and straight under the ×,
   leaving the two overlaid on each other: pchatzky's report, and the reason
   for the solid disc and the fade beside it.

   Solid rather than transparent, and its own colour rather than the
   input's, so the button reads as an object sitting on the field instead of
   as a mark in the text. */
.clear-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #eceee7;
  color: var(--ink);
  cursor: pointer;
}

/* The strip of field between the scrolling text and the button, faded to
   the field's own colour. Text approaching the × dissolves rather than
   colliding with it, which also signals there is more text off to the left.
   Pointer-events off so it never swallows a click meant for the input. */
.clear-btn::before {
  content: "";
  position: absolute;
  right: 100%;
  top: -6px;
  bottom: -6px;
  width: 22px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--card) 85%);
}

.clear-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  /* Above the fade, which is painted by this button's own ::before. */
  position: relative;
}

.clear-btn:hover,
.clear-btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.clear-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  padding: 13px 22px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1rem;
  cursor: pointer;
}

button:disabled { opacity: 0.55; cursor: default; }

.hint {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.status {
  margin-top: 22px;
  color: var(--muted);
}

.status-label {
  margin: 0 0 8px;
  font-style: italic;
}

/* The bar itself never claims completion before the answer actually
   arrives — see startProgress() in app.js, which eases it toward but never
   all the way to 100% on its own. */
.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent);
  /* Smooths each width update from the animation loop into the next rather
     than snapping, without adding its own timer to coordinate with. */
  transition: width 220ms linear;
}

.status-eta {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.answer-card {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

#answer-text {
  margin: 0;
  white-space: pre-wrap;
}

/* The maintainer-only question-history report is a fixed-width table, and
   its columns only line up in a monospace font. Long question text scrolls
   sideways instead of wrapping, so one question stays on one row. */
#answer-text.report {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
}

.badge {
  display: inline-block;
  margin-top: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef3ec;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge[hidden] { display: none; }

.offer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--muted);
}

.offer[hidden] { display: none; }

#offer-yes {
  padding: 7px 14px;
  font-size: 0.85rem;
}

.more {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.more[hidden] { display: none; }

/* Explicit, because .more h3's own display rule would otherwise beat the
   browser's default [hidden] handling — the same trap the badges hit. */
.more h3[hidden] { display: none; }

.more h3 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

#more-text {
  margin: 0;
  white-space: pre-wrap;
}

.sources { margin-top: 26px; }

.sources h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
}

.sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sources li {
  padding: 11px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.sources a { color: var(--accent); font-weight: 600; }
.src-label { font-weight: 600; color: var(--accent); }
.src-origin { color: var(--muted); }

@media (max-width: 460px) {
  .wrap { padding-top: 44px; }
  h1 { font-size: 1.45rem; }
  .ask-form { flex-direction: column; }
}

/* Rate this response — deliberately quiet: it sits under the answer and
   must not compete with it. */
.rate {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

/* Setting `display` on the class beats the browser's own [hidden] rule, so
   the element stays visible when hidden is set. This has caught every
   toggled block on this page — badge, offer, more — so it is restated
   for each one rather than relied on. */
.rate[hidden] { display: none; }

.rate-label {
  font-size: 0.82rem;
  color: var(--muted);
}

.rate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Comfortably tappable on a phone without looking like a big button on a
     desktop; below ~40px these are easy to miss with a thumb. */
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.rate-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.rate-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.rate-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The chosen verdict stays filled in after voting, so the resident can see
   what they said. */
.rate-btn.chosen {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.rate-btn:disabled { cursor: default; }
.rate-btn:disabled:not(.chosen) { opacity: 0.45; }

/* The global `button:disabled { opacity: 0.55 }` also fades the button the
   resident just chose, which reads as "didn't register". The chosen one is
   disabled to stop a second vote, not to look unavailable. */
.rate-btn.chosen:disabled { opacity: 1; }

.rate-thanks {
  font-size: 0.82rem;
  color: var(--muted);
}

.rate-thanks[hidden] { display: none; }

/* How current the answers are. Quieter than the beta disclaimer above it —
   it's reassurance a resident can go looking for, not something to read
   before asking a question. */
.freshness {
  margin-top: 10px;
}

.linkish {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.linkish:hover {
  color: var(--accent);
}

.freshness-detail {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.freshness-detail dt {
  margin-top: 6px;
  font-weight: 600;
}

.freshness-detail dd {
  margin: 0 0 0 14px;
}

/* Beta disclaimer. Quiet, but present on every screen without needing a
   click — a resident acting on a wrong answer about a fee or a law is the
   risk this tool actually carries. */
.disclaimer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

.disclaimer p { margin: 0 0 0.5rem; }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer a { color: var(--accent); }