/* ============================================================
   JUNO PORTALS · where-next.css
   One page: a ranking of places and a way to add one.

   Loaded third, after css/styles.css (tokens, type, buttons, fields,
   labels) and css/editorial.css (wrap, section, h-section, header,
   footer, copy, reveal). Nothing from either is redefined here, and
   nothing here is used by any other page.

   Mobile first. No new colour, no new typeface, no new spacing step.
   ============================================================ */

/* ---------- the distance to the first row ----------
   The ranking is the answer to the question above it, not the next
   screen. editorial.css gives every section a full step of padding at
   both ends, which is right for a long page of separate chapters and
   too much between these two. Halved here, on this page only, by
   overriding the two paddings that face each other. The list keeps its
   own margin, so there is still air above the first hairline. */
body.where-next main > .section:first-child{padding-bottom:var(--s-4)}
body.where-next .section--tight{padding-top:var(--s-3)}

@media (min-width:900px){
  body.where-next main > .section:first-child{padding-bottom:var(--s-5)}
  body.where-next .section--tight{padding-top:var(--s-4)}
}

/* a line of quiet prose: loading, empty, help, all the same weight */
.wn-note{margin-top:var(--s-4)}
.wn-note[hidden]{display:none}

/* said for screen readers only */
.wn-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ---------- the ranking ----------
   A list of places, in the hairline language the about page uses for
   its steps. No cards, no medals, no counts. The percentage is the
   only number on the page, and the bar under each row is a single
   rule that happens to stop early.

   The vertical rhythm is deliberately tighter than the rest of the
   page: this is one list to be read down, not a sequence of editorial
   blocks. Each entry closes on its bar, so there is more air above a
   name than under its bar, and the eye groups the three lines
   together instead of spacing them evenly apart. */
.wn-ranking{list-style:none;margin-top:var(--s-5)}
.wn-ranking[hidden]{display:none}
.wn-ranking li{margin:0}

.wn-row{
  -webkit-appearance:none;appearance:none;
  display:grid;grid-template-columns:1fr auto;
  align-items:baseline;column-gap:var(--s-4);row-gap:var(--s-2);
  width:100%;padding:var(--s-3) 0 var(--s-2);
  font:inherit;color:inherit;text-align:left;
  background:none;border:0;border-top:1px solid var(--color-line-soft);
  cursor:pointer;
}
.wn-ranking li:last-child .wn-row{border-bottom:1px solid var(--color-line-soft)}

.wn-name{
  display:block;
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  text-transform:uppercase;line-height:1;
  font-size:clamp(24px,6.5vw,34px);
  transition:color .2s ease;
}
.wn-country{
  display:block;margin-top:2px;
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-disabled);
}
.wn-pct{
  font-family:var(--font-display);letter-spacing:var(--tracking-display);
  font-size:clamp(20px,5.5vw,28px);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--color-accent);
}

/* the whole width of the row, and the accent stops where the share does */
.wn-bar{grid-column:1 / -1;height:2px;background:var(--color-line-soft)}
.wn-bar i{
  display:block;height:2px;background:var(--color-accent);
  transition:width .6s cubic-bezier(.22,.61,.36,1);
}

.wn-row:hover .wn-name,
.wn-row:focus-visible .wn-name{color:var(--color-accent)}

/* one click is in flight · the row steps back and cannot be pressed again */
.wn-row[aria-busy="true"]{opacity:.45;cursor:default}
.wn-row[aria-busy="true"] .wn-name{color:inherit}

/* her three votes are spent · the ranking is still worth reading, so it
   keeps its weight and only stops behaving like something to press */
.wn-row[disabled]{cursor:default}
.wn-row[disabled]:hover .wn-name{color:inherit}

/* ---------- what happened ----------
   Two lines under the thing that was pressed. It appears in place and
   nothing moves away from under the finger. */
.wn-status{margin-top:var(--s-4)}
.wn-status[hidden]{display:none}
.wn-status b{
  display:block;font-weight:500;
  font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--color-accent);
}
.wn-status span{display:block;margin-top:var(--s-1);font-size:13px;line-height:1.5}
/* something did not work · the same two lines, without the accent */
.wn-status--error b{color:var(--color-text)}

/* ---------- what is left ----------
   One line, in the quietest voice on the page. While votes remain it
   is only a count. When they are gone it takes the two-line shape the
   confirmations use, because then it is the answer to why nothing
   presses any more. */
.wn-allowance{
  margin-top:var(--s-4);
  font-size:11px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-disabled);
}
.wn-allowance[hidden]{display:none}
.wn-allowance b{display:block;font-weight:500;color:var(--color-accent)}
.wn-allowance span{
  display:block;margin-top:var(--s-1);
  font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;
  line-height:1.5;color:var(--color-text);
}

/* ---------- the search ----------
   The field is the site's field. Only the list under it is new. */
.wn-search{position:relative;max-width:420px;margin-top:var(--s-5)}

.wn-results{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  list-style:none;margin:0;padding:0;
  max-height:min(52vh,340px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--color-background);
  border:1px solid var(--color-line-soft);
}
.wn-results[hidden]{display:none}

.wn-option{
  display:flex;align-items:center;min-height:48px;
  padding:var(--s-2) var(--s-3);
  font-size:12px;font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  border-top:1px solid var(--color-line-soft);
  cursor:pointer;
}
.wn-option:first-child{border-top:0}
.wn-option:hover,
.wn-option[aria-selected="true"]{background:var(--color-folio);color:var(--color-accent)}
.wn-option .wn-option-sep{color:var(--color-disabled);padding:0 .5em}
.wn-option .wn-option-country{color:var(--color-disabled)}
.wn-option[aria-selected="true"] .wn-option-sep,
.wn-option[aria-selected="true"] .wn-option-country{color:var(--color-accent)}

/* still searchable, no longer votable */
.wn-option[aria-disabled="true"]{cursor:default;color:var(--color-disabled)}
.wn-option[aria-disabled="true"]:hover,
.wn-option[aria-disabled="true"][aria-selected="true"]{
  background:none;color:var(--color-disabled);
}

/* ---------- focus ----------
   The same mark the magazine uses, kept to this page. */
body.where-next a:focus-visible,
body.where-next button:focus-visible,
body.where-next input:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:3px;
}

/* ---------- movement ---------- */
@media (prefers-reduced-motion:reduce){
  .wn-bar i{transition:none}
  .wn-name{transition:none}
}

/* ---------- more room ----------
   Only the horizontal measure changes with the window. The rows stay
   as tight as they are on a phone, so a long list still reads as one
   list on a wide screen. */
@media (min-width:760px){
  .wn-row{column-gap:var(--s-5)}
}