/* The question. It lives IN THE BAR now, not over the content: the bar grows to hold it and
   comes back to its resting height the moment it is answered, so the country below is never
   asked to keep a band clear for something that has gone.
   Inline flow, not flex: a flex row puts the field after the whole heading block, so it landed
   under the text instead of after "your business?". As inline-blocks they sit in the line.
   Where the question sits in the bar, and when it is shown at all, is in styles/nav.css.
   What is here is the line itself. */

/* width:100% as well as max-width. As a shrink-to-fit flex item the line was only as wide as
   its own contents, so a percentage inside it resolved against itself and constrained nothing
   -- which is how the field ended up wider than the box on a small phone. Filling the box
   gives everything inside a real width to be a percentage of; the text is centred either way. */
/* A MEASURE, not a screen. At 1180px the question ran nearly the full width of a laptop as one
   long line. The cap holds the same break at every type size the clamp gives: "WHERE WOULD YOU
   LIKE TO OPEN YOUR" on the first line, "BUSINESS?" and the field underneath. Narrower screens
   simply take more lines, which is what a measure should do.
   IN `em`, NOT `ch`. It used to be 33ch, on the reasoning that ch is the character advance of
   a monospace face and so a count of characters. The question is set in the title face now and
   the field beside it in the mono one, so the line has two faces in it and ch is the advance of
   whichever one this box happens to name -- a measure that means nothing to the text it is
   measuring. em is the type size, which is the one thing both of them share.
   THE BREAK MOVED ONE WORD LATER WITH THE FACE, and it had to. Gabarito is narrower than the
   monospace it replaced, so keeping "OPEN" at the end of the first line needs a measure under
   18.4em -- and the second line then has to hold "YOUR BUSINESS?" AND the field beside it,
   which needs 17.3em at 1440px but 18.7em at 941px, because the field stops shrinking at its
   220px floor while the type goes on getting smaller. The two requirements cross at about
   990px and there is no single measure below that. This is the break the face gives, at every
   width the question stands beside the wordmark, with 34px of slack at the top end. */
.askline{ text-align:center; line-height:1.34; font-size:var(--fs-ask);
  font-family:var(--font-mono); width:100%; max-width:19.5em; margin:0 auto; }
.q{ font:var(--w-title) 1em/1.34 var(--font-title); letter-spacing:var(--ls-tight);
  text-transform:uppercase; color:var(--ink); }

/* A combobox is a field and the list that drops out of it, and there is exactly ONE of each
   on the page. WHERE it is asked is not its business: the same element sits in this line over
   the country, in the left half beside the map, and in the bar's own dropdown, and each of
   those places says how it should look. So it declares no display of its own -- moving it is
   the only thing that changes it, which is why it can be moved at all. */
.combo{ position:relative; max-width:100%; }

/* In the question's line, raised onto the CAPS' centre line, not the x-height's.
   vertical-align:middle centres a box against the baseline plus half an x-height, which is
   right for lower case and wrong for a line that is entirely capitals: it left the field
   3.6px low beside 31px caps. 1cap and 1ex are the font's own measurements of exactly those
   two heights, so the correction is the difference between them and it rescales with the
   type by itself. A browser without 1cap makes the whole calc invalid and gets the old
   behaviour, which is the right thing to fall back to.
   The gap is measured against the QUESTION's size, not the box's own font-size. */
/* INLINE-FLEX, not inline-block. An inline-block wraps a LINE BOX around the field it
   contains, and a line box is taller than the field: the strut's descender hangs below the
   field's baseline, so the wrapper came out 6.2px taller with all of the slack above.
   vertical-align centres the WRAPPER, so the field itself sat 3.3px low however carefully the
   wrapper was placed. A flex container is exactly its content's height, and then the
   correction below is the whole of the correction. */
/* The gap is on the LEFT only. The field is the last thing in the line, so a right margin is
   never between anything -- it just widens the line box and shifts the whole centred line off
   centre by half of itself (measured: 5.6px at 1440). */
.askline .combo{ display:inline-flex; vertical-align:middle;
  top:calc((1ex - 1cap)/2); margin-left:calc(var(--fs-ask)*0.36); }
/* Both of these are SURFACES (styles/surface.css) -- ground, outline and smoothed corners all
   come from there, so neither declares a border, a radius or a background of its own.
   clamp sets what the field WANTS; max-width is what stops it taking more than the page has.
   Without the cap the field and its list were wider than the content under 356px. */
/* No outline:none. It was here to kill the browser's blue ring, and it killed the page's own
   ring with it -- an author rule beats the browser's default anyway, so the ring in base.css is
   all that is needed and this was only in its way. */
.combo input{ max-width:100%; padding:0 14px; box-sizing:border-box; color:var(--ink);
  font:400 var(--fs-14) var(--font-mono); height:var(--cap-h); }
/* The same height as the capsule in the bar -- this is the same kind of box, and the page has
   one height for it. Only the type inside is sized off the question. */
.askline .combo input{ width:clamp(220px,20vw,300px); height:var(--cap-h);
  font-size:calc(var(--fs-ask)*0.5); }
.combo input::placeholder{ color:var(--text-muted); }

/* The list is the surface; the ROWS are what scrolls. A surface paints its outline over its
   contents, and an outline painted over something that scrolls would scroll away with it. */
.menu{ position:absolute; left:0; right:0; top:calc(100% + 6px);
  display:none; z-index:var(--z-menu); text-align:left; line-height:1.4; }
.menu.on{ display:block; }
/* Not enough room under the field, so it opens over it instead. Which way, and how tall, are
   decided in src/combo.js against the room actually there: a flat height ran off the bottom of
   a short window, and off the bottom of the panel's own pane on a phone. */
.menu.up{ top:auto; bottom:calc(100% + 6px); }
.menu-list{ max-height:300px; overflow:auto; }   /* the starting point; combo.js fits it */
.menu .grp{ padding:9px 14px 5px; font:600 var(--fs-10) var(--font-mono);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-muted); }
.menu button{ display:block; width:100%; text-align:left; padding:9px 14px; border:0;
  background:none; font:400 var(--fs-14) var(--font-mono); color:var(--ink); cursor:pointer; }
.menu button:hover,.menu button.sel{ background:var(--ink); color:var(--on-ink); }
.menu button .st{ color:var(--text-muted); margin-left:8px; font-size:var(--fs-12); }
.menu button:hover .st,.menu button.sel .st{ color:var(--on-ink-muted); }
.menu .none{ padding:11px 14px; font:400 var(--fs-13) var(--font-mono); color:var(--text-muted); }