/* The area lookup: one form, and answers drawn as small tables. Loaded after styles.css and tools.css and uses
 * their tokens. No @import, no URL of any kind. */

.fields { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-end; }
.fields p { margin: 0; flex: 1 1 14rem; max-width: 24rem; }
.fields p.actions { flex: 0 0 auto; margin: 0; }
#hint { margin: 1rem 0 0; max-width: 70ch; }

#result .when { margin: 0 0 1rem; max-width: 70ch; color: var(--ink-soft); }
#result .heed {
  max-width: 44rem; margin: 0 0 1rem; padding: .75rem 1rem;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: .5rem; font-weight: 600;
}

.place {
  max-width: 56rem; margin: 0 0 1rem; padding: 1.1rem 1.25rem;
  background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: .75rem;
}
.place h3 { font: 1.6rem/1.15 var(--serif); letter-spacing: -.02em; margin: 0 0 .35rem; }
.place p { margin: .5rem 0; max-width: 70ch; }

.table-wrap { overflow-x: auto; }
.figures { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: .9rem 0 .5rem; }
.figures caption {
  text-align: left; font-size: .82rem; font-weight: 700; color: var(--green);
  text-transform: uppercase; letter-spacing: .08em; padding-bottom: .25rem;
}
.figures th, .figures td {
  text-align: right; padding: .45rem .6rem; vertical-align: top; border-bottom: 1px solid var(--line-soft);
}
.figures th:first-child { text-align: left; padding-left: 0; }
.figures thead th { font-size: .82rem; color: var(--ink-faint); font-weight: 600; border-bottom: 1px solid var(--line); }
.figures tbody th { font-weight: 600; }
.figures td.median { font-weight: 700; white-space: nowrap; }
.figures .flag { display: block; max-width: 38ch; font-weight: 400; font-size: .82rem; color: #a13d25; }

#result details.more { max-width: 56rem; margin: .6rem 0; }
#result details.more summary { cursor: pointer; font-weight: 600; color: var(--green); }
#result details.more summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.offers { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; padding: 0; list-style: none; }
.offers button {
  font: inherit; font-weight: 600; cursor: pointer; padding: .45rem .95rem;
  color: var(--green); background: var(--paper); border: 1.5px solid var(--green); border-radius: 999px;
}
.offers button:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.sources { max-width: 70ch; margin-top: 2rem; }
.sources h3 { font-size: 1.1rem; }
.sources h4 { margin: 1.1rem 0 .2rem; font-size: .82rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.sources p { margin: .4rem 0; }
.sources .source { overflow-wrap: anywhere; }
/* The link to a lookup is words to copy, not a link to follow: one tap selects all of it. */
.sources .link { display: block; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }

.files { padding-left: 20px; max-width: 70ch; }
.files li { margin-bottom: .35rem; }

/* On a phone a five-column table would scroll sideways. Each row becomes a short list instead: the place or
   dwelling type as its heading, then one labelled line per figure. The column headings stay for screen readers,
   moved off the screen and not removed. page.mjs gives every part its role outright, so the table is still
   announced as a table when it is drawn as blocks. */
@media (max-width: 40rem) {
  .figures thead { position: absolute; left: -9999px; }
  .figures, .figures caption, .figures tbody, .figures tr, .figures th, .figures td { display: block; }
  .figures tr { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
  .figures th, .figures td { border: 0; padding: .1rem 0; text-align: left; }
  .figures td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  /* The label a sighted reader needs beside each figure is one a screen reader has already had, as the column's
     heading. Measured in Edge at 400px: every cell was named "Median rent $995 a week". The second `content`
     gives the label an empty spoken form; a browser that does not know that syntax keeps the first. */
  .figures td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    color: var(--ink-faint); font-size: .85rem; text-align: left; font-weight: 400;
  }
  .figures td:empty { display: none; }
  .figures .flag { max-width: none; }
}