/* ============================================================================
   The page's one kind of box.

   Paper, an ink outline a hair thick, and corners smoothed rather than merely
   rounded. The capsule in the bar, the question's field, the list that drops out
   of it, the two choices beside the map, the dialog -- all the same object, and
   all of them say so the same way: class="surface".

   Nothing here declares a colour or a metric of its own; the two numbers behind
   the shape are --rule and --radius-sm in tokens.css. The corner itself
   is a superellipse, which no border-radius can draw, so src/surface.js builds
   the path at the element's live size and hands it back through two properties:
   clip-path, which makes the contents follow the curve, and --surface-edge, the
   same path stroked, which is painted here.
   ========================================================================= */

/* :where() so all of this has ZERO specificity: these are what a surface falls back to, not
   what it imposes. A component that positions itself must keep doing so -- the dropdown is
   absolute, and being handed position:relative by this rule put it back in the flow, which
   grew the line it hangs off and pushed the question down the page with it. A default that
   can silently overrule a component is not a default. */
:where(.surface){
  position:relative;             /* ::after needs something to be absolute against */
  background-color:var(--surface);
  border:0;                      /* the outline is --surface-edge, not a border    */
  border-radius:0;               /* and the corner is the clip, not a radius       */
}

/* Over the contents, not under them: a hovered row, a chosen card and the black
   search button all run to the edge, and would otherwise cover the line that is
   supposed to round them. */
.surface::after{
  content:'';
  position:absolute; inset:0;
  z-index:var(--z-outline);
  background-image:var(--surface-edge);
  background-repeat:no-repeat;
  pointer-events:none;
}

/* An <input> cannot carry a pseudo-element, so its outline is its own background.
   Nothing inside a field reaches the edge, so there is nothing for it to be under. */
input.surface{
  background-image:var(--surface-edge);
  background-repeat:no-repeat;
}
input.surface::after{ content:none; }

/* ---- KEYBOARD FOCUS ON ONE OF THESE BOXES ----
   A second line inside the first, following the same curve, because it IS the same curve --
   src/surface.js draws it from the same superellipse. An `outline` cannot do this job here: it
   draws a rectangle, and a surface clips everything it paints including its own outline, so the
   ring came out as a hard-cornered rectangle sitting inside a curve. The plain outline in
   base.css still serves everything that is not one of these boxes. */
.surface:focus-visible{ outline:none; }
input.surface:focus-visible{ background-image:var(--surface-focus), var(--surface-edge); }
.surface:focus-visible::after{
  background-image:var(--surface-focus), var(--surface-edge); }

/* ---- A HAIRLINE BETWEEN TWO PARTS OF ONE SURFACE ----

   Not a border, and the reason is a single device pixel. src/surface.js holds the outline ONE
   DEVICE PIXEL CLEAR of the clip, because the browser snaps the outline's image to the device
   grid and does not snap a clip-path: without that clearance the clip eats into the outline
   wherever the two disagree, and one edge comes out lighter than the others. Nothing covers
   that pixel. So a border drawn to the element's own edge fills it and pokes past the outline
   by exactly one device pixel -- measured on the capsule's segment dividers, and on the map's
   zoom control, where a horizontal line across a 32px box is where it finally reads.

   These stop a rule short at both ends instead, which is also simply how a divider inside a
   rounded box should be drawn: it ends where the outline begins. */
.divide-l, .divide-r, .divide-t{ position:relative; }
.divide-l::before, .divide-r::before, .divide-t::before{
  content:''; position:absolute; background:var(--ink);
  z-index:var(--z-outline); pointer-events:none; }
.divide-l::before{ left:0;  top:var(--rule); bottom:var(--rule); width:var(--rule); }
.divide-r::before{ right:0; top:var(--rule); bottom:var(--rule); width:var(--rule); }
.divide-t::before{ top:0;   left:var(--rule); right:var(--rule); height:var(--rule); }