/* ==========================================================================
   No-sidebar layout
   --------------------------------------------------------------------------
   The shell reserves --sidebar-w on .app for a fixed sidebar. This page has
   none — three links do not earn a rail, and the space is better spent on the
   content. The device tool keeps its sidebar because the device catalogue
   genuinely fills one.
   ========================================================================== */

.app {
  padding-left: 0;
}

/* The shell's .main is left-aligned under a sidebar. With the rail gone it
   centres instead, and gets a little more room than the default. */
.main {
  max-width: 1180px;
  margin-inline: auto;
  padding: 28px var(--sp-6) 40px;
  width: 100%;
}

/* --- Topbar: brand left, navigation right -------------------------------- */

.ip-topbar {
  gap: var(--sp-4);
  padding-inline: max(var(--sp-6), calc((100% - 1180px) / 2 + var(--sp-6)));
}

.ip-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ip-brand__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--aqua), var(--blue));
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ip-brand__name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The tagline is part of the name but secondary to it, and it is the first
   thing to go when the bar runs short of room. */
.ip-brand__tag {
  color: var(--muted);
  font-weight: 500;
}

.ip-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ip-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.ip-pill i {
  font-size: 12px;
  color: var(--muted);
  transition: color .16s ease;
}

/* Marks a pill that leaves the site. Smaller and quieter than the leading
   icon — it is a signal, not a second label — and it sits slightly raised so
   it reads as a superscript rather than a third item in the row. */
.ip-pill__ext {
  font-size: 9px;
  margin-left: -2px;
  transform: translateY(-3px);
  opacity: .75;
}

.ip-pill:hover {
  color: var(--ink);
  border-color: var(--aqua);
  background: color-mix(in srgb, var(--aqua) 10%, var(--surface));
}

.ip-pill:hover i { color: var(--aqua-deep, var(--aqua)); }

.ip-pill:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

@media (max-width: 1080px) {
  /* The tagline goes first, then the pill labels — icons alone still read,
     and the bar stays on one line rather than wrapping under the brand. */
  .ip-brand__tag { display: none; }
}

/* Tablet: drop the pill labels to keep the bar on one line. Icons alone are
   a compromise, but between 721 and 820px the bar cannot wrap and something
   has to give; below 721 the labels come back (see the next block).

   Targets .ip-pill__label, NOT `.ip-pill span`. The old selector matched every
   span in the pill, including the two .sr-only ones — "(new)" and "(opens in a
   new tab)". .sr-only sets no `display`, and `.ip-pill span` outranks it, so
   `display: none` won: that information was being dropped from the
   accessibility tree on exactly the narrow screens where the visible label was
   gone too, leaving a screen reader with an unlabelled icon link. */
@media (max-width: 820px) {
  .ip-pill__label { display: none; }
  .ip-pill { padding: 8px 12px; }
  .ip-pill i { font-size: 14px; }
}

/* Phone: labels return, and the nav takes a row of its own.
   Below 720px shell.css lets the topbar wrap, which is what makes this
   possible — three labelled pills cannot share a line with the brand, the
   appearance switcher and the palette at 390px. Given its own row they fit,
   and the icons stop being a guessing game. Matches the "Devices" label on the
   device-test page, which has the same problem for the same reason.

   The nav wraps internally as well: at the narrowest sizes the three pills
   need two lines, and wrapping is better than either clipping them or
   shrinking the text below the rest of the bar. */
@media (max-width: 720px) {
  .ip-pills {
    order: 10;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ip-pill__label { display: inline; }
}

@media (max-width: 560px) {
  .main { padding: 20px 16px 32px; }
  .ip-topbar { padding-inline: 16px; }
}

/* ==========================================================================
   IPBoat home — page layer
   --------------------------------------------------------------------------
   Sits on top of tokens.css / base.css / shell.css / components.css from the
   Lake Mead Admin theme, the same stack the device test tool uses, so the two
   pages read as one product. Everything here reads theme tokens: no literal
   colours, so both pages follow the day/night switch together.
   ========================================================================== */

.ip-topbar-title {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ip-foot-note {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .04em;
}

/* --- The address itself --------------------------------------------------- */

/* This is the one thing most visitors came for, so it gets a card of its own
   rather than a slot in the stat row. */
.ip-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  padding: 22px 26px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--aqua) 12%, transparent),
      transparent 60%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--aqua) 30%, var(--line));
}

.ip-hero__label {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ip-hero__value {
  margin: 0;
  /* Tabular figures keep the address from shifting between visitors, and the
     mono face makes an IPv6 address readable in groups. */
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(30px, 6vw, 54px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.ip-stats { margin-bottom: 34px; }

/* The stat tile's default value size is tuned for short numbers. These hold
   an ISP name or a user-agent string, so they take a smaller, wrapping size
   rather than overflowing their card. */
.stat__value--sm {
  margin: 2px 0 4px;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* The tiles hold wrapping text rather than a short number, so they need a
   consistent floor — otherwise a one-line ISP sits in a short card beside a
   three-line location in a tall one. */
/* Equal-height tiles. The grid row stretches its columns, but the card inside
   each column only grew to its own content, so a one-line ISP sat in a short
   card beside a three-line location in a tall one. */
.ip-stats > [class*="col-"] {
  display: flex;
}

.ip-stats .stat {
  align-items: flex-start;
  width: 100%;
  min-height: 132px;
  padding: 18px;
}

.ip-stats .stat__label {
  margin-bottom: 2px;
}

.ip-stats .stat__meta {
  margin-top: auto;
  padding-top: 4px;
  line-height: 1.4;
}

/* --- Section blocks ------------------------------------------------------- */

/* scroll-margin keeps an anchored section clear of the sticky topbar when
   the pills jump to it. */
.ip-block { margin-bottom: 36px; scroll-margin-top: 88px; }

.ip-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  margin-bottom: 14px;
}

.ip-block__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.ip-block__title i { color: var(--aqua); font-size: 14px; }

.ip-block__note {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* --- WHOIS ---------------------------------------------------------------- */

/* The theme's .card carries NO padding of its own — it expects a padded child
   such as .card__body. The stat tiles and tool cards on this page set their
   own; this one never did, so its field and button sat 1px from the card's
   border on both sides. */
#whois .card {
  padding: 20px 22px 22px;
}

.ip-whois-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  /* Sits directly above the results, whose first field has no rule of its
     own, so this gap is the whole separation between the two. */
  margin-bottom: 18px;
}

/* .btn is a fixed 38px, which left the Search button 10px shorter than the
   48px field beside it — the two read as misaligned rather than as one
   control pair. Matching the field's height fixes the row. */
.ip-whois-form .btn {
  height: auto;
  min-height: 48px;
  padding-inline: 22px;
}

.ip-whois-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--surface-alt, var(--surface));
  border: 1px solid var(--line);
  border-radius: 10px;
}

.ip-whois-field i { color: var(--muted); font-size: 13px; }

.ip-whois-field input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
  font: inherit;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
}

.ip-whois-field:focus-within {
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent);
}

/* Multi-column flow, NOT a grid.
   
   As a grid, every cell in a row stretched to the tallest one in that row.
   A four-line ORGANIZATION therefore left three tall voids beside it, under
   RANGE, IP VERSION and ABUSE CONTACT — the ragged gaps this replaces.
   
   Columns let each field take only the height its own content needs and flow
   into the next column, so there is no shared row height to pad out. Reading
   order becomes column-major, which is fine for a list of independent facts
   and is how registry output is usually set. */
.ip-whois-results {
  columns: 4 230px;
  column-gap: 34px;
  margin: 0;
}

/* A field must not be split down the middle by a column break. */
.ip-whois-results > div {
  break-inside: avoid;
  page-break-inside: avoid;
  padding: 11px 0 12px;
  border-top: 1px solid var(--line-soft);
}

/* The first field in each column keeps its rule; the run of rules then reads
   as a consistent ladder rather than starting mid-column. */
.ip-whois-results > div:first-child {
  padding-top: 0;
  border-top: 0;
}

/* The message shown when a lookup finds nothing sits in the same padded card,
   so it needs no margin of its own. */
.ip-whois-message {
  margin-top: 0;
}

.ip-whois-results dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ip-whois-results dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.55;
}

.ip-whois-results dd a { color: var(--aqua); }

.ip-whois-message {
  margin: 0;
  padding: 13px 15px;
  color: var(--ink-soft);
  background: var(--surface-alt, var(--surface));
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  font-size: 13.5px;
}

/* --- Tools ---------------------------------------------------------------- */

/* The icon, the text and the arrow are one row. `align-items: flex-start`
   put the icon hard against the card's top padding while the title sat a few
   pixels lower; aligning the icon to the title's line instead removes that
   visual step. */
.ip-tool {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 18px;
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}

.ip-tool:hover {
  border-color: var(--aqua);
  transform: translateY(-2px);
}

.ip-tool:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

/* IPBoat's own tool leads the list, so it carries the accent edge that marks
   it as ours rather than an outbound link. */
.ip-tool--own { border-left: 3px solid var(--aqua); }

.ip-tool__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 1px;
  width: 38px;
  height: 38px;
  color: var(--aqua);
  background: color-mix(in srgb, var(--aqua) 14%, transparent);
  border-radius: 11px;
  font-size: 15px;
}

.ip-tool__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.ip-tool__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 650;
}

.ip-tool__desc {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.ip-tool__go {
  margin-left: auto;
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  transition: color .16s ease, transform .16s ease;
}

.ip-tool:hover .ip-tool__go {
  color: var(--aqua);
  transform: translateX(2px);
}

/* --- Footer --------------------------------------------------------------- */

.ip-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12.5px;
}

.ip-foot a { color: inherit; }
.ip-foot a:hover { color: var(--aqua); }

@media (max-width: 760px) {
  .ip-whois-form { grid-template-columns: minmax(0, 1fr); }
  .ip-block__head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ip-tool,
  .ip-tool__go {
    transition: none;
  }
  .ip-tool:hover { transform: none; }
}

/* Section collapsing.

   shell.css owns the rule that hides a nav section, and its own comment calls
   itself "THE ONLY PLACE SECTION SLUGS ARE LISTED" — that selector names the
   admin theme's sections explicitly. This page uses its own slugs, so without
   the lines below the group chevrons would toggle aria-expanded and persist
   state while nothing ever collapsed. */
html[data-nav-collapsed~="lookup"] .nav-section[data-section="lookup"],
html[data-nav-collapsed~="tools"]  .nav-section[data-section="tools"] {
  --list-h: 0px;
  --list-op: 0;
  --caret-rot: -90deg;
}

/* A lookup the browser could not complete.
   ipapi.co's free tier refuses a large share of requests, so this is an
   expected state rather than an error: the field says plainly that the lookup
   did not answer, and stays visually quieter than a real value so the card
   does not read as though it found something. */
.stat__value.is-unavailable {
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
}

/* ==========================================================================
   Boat artwork
   --------------------------------------------------------------------------
   Sits in the bottom-right corner of the address card.

   Drawn on a pseudo-element rather than as a background on .ip-hero itself,
   for two reasons: the card already carries a gradient background, and the
   night theme needs a filter on the artwork that must not touch the text.

   The source images/boat.png could not be used directly — despite being RGBA
   it is fully opaque, with a #f3f3f3 ground baked in, so it would have painted
   a pale rectangle across the card and been plainly wrong on a dark surface.
   images/boat-cutout.png is the same artwork with that ground keyed out to
   real alpha, anti-aliased edges preserved as partial alpha.
   ========================================================================== */

.ip-hero {
  position: relative;
  overflow: hidden;
}

.ip-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(42%, 300px);
  /* Matches the source's 599x507 so the drawing never distorts. */
  aspect-ratio: 599 / 507;
  background: url("../../images/boat-cutout.png") right bottom / contain no-repeat;
  opacity: .92;
  pointer-events: none;
}

/* The artwork is black linework, which disappears on the night surface.
   invert() alone would flip the red lighthouse to cyan and the orange sun to
   blue; following it with hue-rotate(180deg) returns the hues to roughly
   where they started while keeping the lightness inverted, so the strokes
   read light on dark and the boat still looks like the same drawing. */
/* Night sits a little lower than day. The inverted strokes are near-white on
   a dark card, which reads as higher contrast than the same figure does in
   day mode — matching the numbers would make it louder than the day version,
   not equal to it. */
html[data-theme="night"] .ip-hero::after {
  filter: invert(1) hue-rotate(180deg);
  opacity: .78;
}

/* Keep the card's own text clear of the drawing at wide sizes, and drop the
   artwork entirely when the card is too narrow for both. */
@media (min-width: 720px) {
  .ip-hero {
    /* Tall enough to show the whole drawing. It was 124px, against a drawing
       box of 300x254 anchored to the bottom — so 132px of it, more than half,
       was being cropped away by the card's own overflow: hidden. The sun, the
       mast and most of the sail were simply not on the page; what looked like
       a boat sitting on the card's bottom edge was the bottom fifth of the
       picture. */
    min-height: 200px;
    justify-content: center;
  }

  .ip-hero::after {
    /* Same construction as the phone layout: the offsets fix the height and
       the base rule's aspect-ratio derives the width, so the drawing fits the
       card exactly and cannot be clipped again if this height ever changes.
       Replaces the fixed `width: min(42%, 300px)`, which was sized with no
       reference to the card it had to fit inside.

       bottom: 0 keeps it seated on the card's lower edge, which is how it has
       always read; the 10px is only at the top, where the sail needs air. */
    top: 10px;
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
  }

  .ip-hero__label,
  .ip-hero__value {
    position: relative;
    max-width: calc(100% - 150px);
  }
}

/* Phone: the drawing moves below the text rather than beside it.
   It used to be dropped entirely here, on the grounds that the card was too
   narrow for both. That is true SIDE BY SIDE but not outright, and the measured
   reason is the IP number: at 390px it is 227px wide intrinsically against
   306px of content box, and at 320px it has about 9px to spare. There is no
   width to give a drawing, and the number must never wrap — it is the one
   thing the page exists to show.

   So the card reserves a band at its foot instead and the artwork sits in it,
   right-aligned as it is on desktop. The text keeps the full width it already
   had and nothing moves; the card simply grows by the height of the band.

   --ip-boat-w is the single knob: the band is derived from it, so the two
   cannot drift apart and leave the drawing clipped or floating in dead space.
   The 507/599 is the source image's own ratio, as above. */
@media (max-width: 719px) {
  .ip-hero {
    /* The boat is the brand — the site is called IPBoat — so it is sized to
       hold the card's bottom-right corner rather than to be tucked out of the
       way. Scales with the screen instead of sitting at one fixed size: vw
       rather than a percentage because the band below is derived from this
       value, and a percentage in `padding-bottom` resolves against the
       PARENT's width, not the card's, so the two would only agree by accident.
       vw refers to the same thing in both places. */
    --ip-boat-w: clamp(96px, 34vw, 150px);
    /* Tighter than the shared 22/26. Two reasons beyond simply being shorter:
       the vertical saving is direct, and the narrower side padding widens the
       content box from 306px to 322px at 390px — enough for the meta line to
       fit on ONE line instead of wrapping to two, which removes another 20px
       without touching a font size. */
    padding: 12px 18px;
    /* The band is exactly the drawing's height plus a small gap above it, so
       there is no dead space between the text and the artwork and none below
       it either. That gap is the only slack in the card's foot. */
    padding-bottom: calc(var(--ip-boat-w) * 507 / 599 + 6px);
  }

  .ip-hero::after {
    width: var(--ip-boat-w);
    /* Flush into the corner, as on desktop. Insets here made it read as a
       sticker dropped onto the card; sitting in the corner, clipped by the
       card's own border-radius (the card is overflow: hidden), it reads as
       part of the card. */
    right: 0;
    bottom: 0;
    /* At phone size the linework is being drawn at roughly a sixth of the
       source's width, so the strokes land thin and the whole figure reads
       fainter than the same artwork does on desktop. Full strength here, and
       a lift on night below, to put it back where it looks on a big screen —
       it sits in its own band with no text over it, so there is no contrast
       cost to spend. */
    opacity: 1;
  }

  html[data-theme="night"] .ip-hero::after {
    opacity: .95;
  }
}

/* Phone, 375px and up: the card is sized to the boat, text beside it.
   ------------------------------------------------------------------------
   The card is 140px and the drawing fills it with a 4px gap top and bottom,
   so the boat is 132px tall and — at the source's 599/507 — 156px wide. The
   text moves to its left instead of sitting above it, which is what makes the
   card short: its height is now the drawing's, not the drawing's plus the
   text's.

   WHY 375px IS THE FLOOR
   The IP number is the constraint. It cannot wrap and it cannot be small; it
   is what the page is for. Beside a 156px drawing it needs the card to be wide
   enough that it clears the drawing's INK, which is not the same as clearing
   the drawing's box — measured from the source, the left third of the image
   carries only 5% of its ink (the water line trailing off), and the boat and
   lighthouse sit in the right 60%. So the number may sit over the left of the
   box without touching anything that reads.

   Even with that, 375px is where it stops working: at 343px of card the dense
   ink begins 234px in, and the number at its full 30px ends at 245px. Hence
   the small clamp on the font below, and hence the stacked layout staying in
   place under 375px rather than being stretched to fit — an iPhone SE 1st gen
   would put the number across the lighthouse. */
@media (min-width: 375px) and (max-width: 719px) {
  .ip-hero {
    min-height: 140px;
    justify-content: center;
    /* Replaces the stacked band; nothing is reserved below the text now. */
    padding: 12px 18px;
  }

  .ip-hero::after {
    /* The pair of offsets fixes the height, and the base rule's
       aspect-ratio: 599/507 derives the width from it. Nothing here states a
       size, so the 4px gap holds whatever the card turns out to be and the
       drawing can never letterbox inside its own box.

       Writing both dimensions is what to avoid: 140px of card is 138px of
       padding box once the 1px borders are taken off, so the height lands at
       130px and a width hardcoded from 132px leaves a sliver of empty box on
       each side. Derive one from the other and that cannot happen. */
    top: 4px;
    bottom: 4px;
    right: 4px;
    height: auto;
    width: auto;
    background-position: right center;
  }

  /* Keep the three lines out of the drawing's DENSE part, not out of its box.
     The box is 156px wide sitting 4px off the right edge; its dense ink starts
     32.7% in, i.e. 109px from the card's right edge. Reserving the full 160px
     of box was the first attempt and it was too tight — the IP number wrapped,
     which made the text taller than the drawing and pushed the card to 193px,
     defeating the entire point. 97px is that 109px expressed against the
     content box (which is already 36px narrower than the card), less a 6px
     margin so the number ends before the ink rather than exactly on it. */
  .ip-hero__label,
  .ip-hero__value {
    position: relative;
    max-width: calc(100% - 97px);
  }

  /* The only concession the number makes: its full 30px from about 410px up,
     easing to ~26px at 375px, which is what keeps it clear of the lighthouse
     at the narrow end. It stays by far the largest thing on the card.
     nowrap is a guarantee, not a preference — a wrapped IP is both wrong to
     read and the thing that inflates the card. */
  .ip-hero__value {
    font-size: clamp(25px, 7vw, 30px);
    white-space: nowrap;
  }
}

@media (prefers-reduced-data: reduce) {
  .ip-hero::after {
    display: none;
  }
}

/* --- "New" badge on the Device Test pill ----------------------------------
   A small gold-starred badge pinned to the pill's top-right corner.

   The pill is the anchor, so it takes position: relative. The badge overlaps
   the pill's edge slightly, which means the topbar must not clip it — hence
   the overflow rule on .ip-pills below. The star is inline SVG so it keeps
   its gold fill while the pill's own icon follows the text colour.
   -------------------------------------------------------------------------- */

.ip-pill--new {
  position: relative;
}

/* The badge sits outside the pill's rounded edge, so nothing in the bar may
   clip it. The topbar itself is not made visible-overflow — only this row —
   so a long brand still truncates rather than spilling. */
.ip-pills {
  overflow: visible;
}

.ip-pill__new {
  position: absolute;
  top: -7px;
  right: -6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 5px;
  color: #3d2a06;
  background: linear-gradient(135deg, #ffd24a, #f2a93c);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  /* Dark ink on gold rather than white: white on #f2a93c measures 2.0:1,
     while this reads above 9:1. */
  pointer-events: none;
}

.ip-pill__new svg {
  /* A deeper gold than the badge so the star reads as a shape rather than
     dissolving into its own background. */
  color: #8a5a00;
  flex: 0 0 auto;
}

/* Night keeps the same gold — it is a highlight, and it holds its contrast
   against the dark bar without adjustment. */

@media (max-width: 820px) {
  /* Pill labels are hidden at this width, so the badge shrinks to the star
     alone rather than crowding a 40px icon button. */
  .ip-pill__new {
    font-size: 0;
    gap: 0;
    padding: 3px;
    top: -6px;
    right: -5px;
  }

  .ip-pill__new svg {
    width: 8px;
    height: 8px;
  }
}

/* Phone: the full badge returns, because the labels do.
   The block above shrinks the badge to its star precisely because the labels
   are hidden there and the pill is a ~40px icon button that a worded badge
   would swamp. Below 720px the labels are back and the pill is full width, so
   a bare gold dot would be an unexplained mark rather than a "New" flag.

   This MUST stay after that block. Both selectors are a single class, so they
   have equal specificity and source order decides; written earlier in the file
   — next to the other 720px rules, where it belongs by topic — it lost, and
   the badge stayed a dot. */
@media (max-width: 720px) {
  .ip-pill__new {
    font-size: 9px;
    gap: 3px;
    padding: 2px 6px 2px 5px;
    top: -7px;
    right: -6px;
  }

  .ip-pill__new svg {
    width: 9px;
    height: 9px;
  }
}