/* ==========================================================================
   site7.css

   The bar, the full menu, the original palette and the two tool primitives.
   Unlayered and loaded after site6.css, so it overrides the chrome rules in
   the sheets above it on source order alone and needs no !important.

   Hex literals appear in exactly one place in this file: the token block
   below. Everything after it reads a token.
   ========================================================================== */

:root {
  /* The palette the first site was built in, restored by name. Sprinkled
     rather than flooded: at most one of these per block. */
  --c-ground: #0a0e17;
  --c-band: #0f1420;
  --c-panel: #151b2b;
  --c-card: #141a2a;
  --c-accent: #00d4ff;
  --c-accent-dim: #00a8cc;
  --c-green: #22c55e;
  --c-yellow: #eab308;
  --c-red: #ef4444;
  --c-amber: #f59e0b;
  --c-orange: #f97316;
  --c-purple: #7c3aed;

  /* The bar is one height at every width. The condensed variant below is the
     only thing that changes it. */
  --bar-height: 3.75rem;
}

/* --------------------------------------------------------------------------
   Section bands

   The utility every track uses to alternate the long pages. It is a colour and
   nothing else: no border, no shadow, no inset. Two adjacent bands would read
   as one block, so the rule that matters is that tracks alternate them.
   -------------------------------------------------------------------------- */
.band {
  background-color: var(--c-band);
  background-image: none;
}

.band-panel {
  background-color: var(--c-panel);
  background-image: none;
}

/* ==========================================================================
   THE BAR

   Left to right and in this order in the markup, so the reading order and the
   visual order are the same thing and nothing has to be reordered in CSS:
   wordmark, online count, section links, the key, the menu button.
   ========================================================================== */
.masthead {
  --nav-height: var(--bar-height);
  z-index: 70;
  background-color: color-mix(in srgb, var(--c-ground) 94%, transparent);
  background-image: none;
  border-bottom: 1px solid var(--s6-hair);
  box-shadow: none;
}

.masthead.is-condensed { --nav-height: 3.25rem; }

.masthead-inner {
  gap: var(--step-4);
  min-width: 0;
}

.masthead .wordmark {
  flex: none;
  margin-right: 0;
  font-weight: 700;
  font-size: var(--size-base);
  letter-spacing: -0.02em;
}

.masthead .wordmark-mark {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--c-accent);
  background-image: none;
  box-shadow: none;
  animation: none;
}

/* --------------------------------------------------------------------------
   The online count

   A live figure rather than a fact, so it belongs where it is visible from any
   scroll position. It is a button because it opens the map dialog, and it is
   hidden until the count arrives.
   -------------------------------------------------------------------------- */
.online-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 0;
  padding: 0.3em 0.65em;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--s6-mute);
  background: none;
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}

.online-pill:hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--c-green) 55%, transparent);
}

.online-pill[hidden] { display: none; }

.online-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--c-green);
  background-image: none;
  box-shadow: none;
  animation: none;
}

/* --------------------------------------------------------------------------
   Section links

   Five words on a wide screen, and nothing below it: at that width the same
   five are the first thing in the menu, with a sentence each.
   -------------------------------------------------------------------------- */
/* The order reset is load-bearing. A sheet above this one moves any <nav> in
   the bar to the end of the row, which was written when the navigation was the
   last thing in it; here the section links sit beside the wordmark. */
.masthead-inner > .bar-links { order: 0; }

.bar-links {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--step-4);
}

.bar-links a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  white-space: nowrap;
  text-decoration: none;
}

.bar-links a:hover,
.bar-links a[aria-current='page'] { color: var(--color-text); }

/* --------------------------------------------------------------------------
   The key

   A rectangle with a darker edge along the bottom, which is the whole of the
   idea: it reads as something that depresses. No pill, no gradient, no glow.
   -------------------------------------------------------------------------- */
.btn-build {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--c-ground);
  background: var(--c-accent);
  background-image: none;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 -2px 0 var(--c-accent-dim);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* The space belongs to the second word, and is preserved rather than set as a
   margin. Whitespace BETWEEN two flex items is discarded, so a plain space in
   the markup ran the words together visually and a margin would have left the
   accessible name reading as one word. */
.btn-build-tail { white-space: pre; }

.btn-build:hover {
  color: var(--c-ground);
  transform: translateY(-1px);
  box-shadow: inset 0 -2px 0 var(--c-accent-dim);
}

.btn-build:active {
  transform: translateY(1px);
  box-shadow: inset 0 -1px 0 var(--c-accent-dim);
}

/* On its own page it is a statement rather than an invitation, so it stops
   asking to be pressed. */
.btn-build.is-current {
  color: var(--c-accent);
  background: none;
  box-shadow: inset 0 0 0 1px var(--c-accent-dim);
  transform: none;
}

/* --------------------------------------------------------------------------
   The menu button. Far right at every width, including the desktop.
   -------------------------------------------------------------------------- */
.masthead .nav-toggle {
  order: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  min-height: 0;
  margin-left: 0;
  padding: 0.4rem 0.55rem;
  color: var(--s6-mute);
}
.masthead .nav-toggle svg { flex: none; }
.masthead .nav-toggle {
  background: none;
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
}

.masthead .nav-toggle::before { content: none; }
.masthead .nav-toggle:hover { color: var(--color-text); border-color: var(--s6-hair-strong); }
.masthead .nav-toggle:active { transform: none; box-shadow: none; }

.nav-toggle-label {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Widths
   -------------------------------------------------------------------------- */
/* With the section links folded away there is nothing in the middle of the row
   to take the slack, so the key and the menu would sit against the count with
   the right third of the bar empty. The auto margin is that missing slack. */
@media (max-width: 59.999rem) {
  .btn-build { margin-left: auto; }
}

@media (min-width: 60rem) {
  .bar-links { display: flex; }
  .nav-toggle-label { display: inline; }
  .masthead .nav-toggle { padding-inline: 0.7rem; width: auto; height: auto; }
}

/* The bar carries four things at 320: the wordmark, the count, the key and the
   menu. Nothing is optional, so the gaps and the paddings tighten instead. */
@media (max-width: 26rem) {
  .masthead-inner { gap: var(--step-2); }
  .masthead .wordmark { font-size: var(--size-sm); }
  .wordmark-stamp { display: none; }
  .online-word { display: none; }
  .online-pill { padding-inline: 0.45em; }
  .btn-build { padding: 0.45rem 0.6rem; font-size: 0.6875rem; }
  .btn-build-tail { display: none; }
  .masthead .nav-toggle { padding: 0.35rem 0.4rem; }
}

/* The count is a number beside a lamp on a phone; the word is the first thing
   that can go and the dialog says it in full anyway. */
@media (max-width: 34rem) {
  .online-word { display: none; }
  .btn-build-tail { display: none; }
}

/* ==========================================================================
   THE FULL MENU

   A right-hand panel on a wide screen, the whole screen on a phone, driven by
   one set of rules. With no script it is a plain block of links below the bar,
   which is why the hiding below is gated on the .js class.
   ========================================================================== */
.menu {
  position: relative;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--step-4);
  padding: var(--step-5) var(--step-5) max(var(--step-7), env(safe-area-inset-bottom));
  background: var(--c-ground);
  border-left: 1px solid var(--s6-hair);
}

.menu-backdrop { display: none; }

html.js .menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--c-ground) 72%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

html.js .menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 32rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateX(100%);
  /* visibility flips at the END of the close and at the START of the open. The
     delay is what makes the panel focusable the instant it is asked for: a
     transitioning visibility is still hidden, and nothing inside a hidden
     element can take focus, so the close button silently refused it. */
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
  box-shadow: -24px 0 60px -40px var(--s6-ink);
}

@media (min-width: 48rem) {
  html.js .menu { width: clamp(26rem, 34vw, 32rem); }
}

body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }
html.js body.menu-open .menu {
  visibility: visible;
  transform: none;
  transition: transform 0.2s ease, visibility 0s linear 0s;
}

/* The taking-out-of-flow half of the scroll lock is applied inline by the
   script, because an inline position is already on the body and only another
   inline value outranks it. This is the rest of the lock. */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.js .menu,
  html.js body.menu-open .menu,
  html.js .menu-backdrop { transition: none; }
}

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-4);
  padding-bottom: var(--step-3);
  border-bottom: 1px solid var(--s6-hair);
}

.menu-title {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--s6-quiet);
}

.menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.35rem;
  color: var(--s6-mute);
  background: none;
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
}

.menu-close::before { content: none; }
.menu-close:hover { color: var(--color-text); border-color: var(--s6-hair-strong); }

/* Every control in the bar has to be reachable with a thumb. The bar is 60px,
   so a 44px hit area fits inside it without changing the bar's height; the
   look is unchanged because the extra height is padding around the same small
   mono label and the same key face. */
@media (max-width: 47.999rem) {
  .online-pill,
  .btn-build { min-height: 2.75rem; }
  .masthead .nav-toggle,
  .menu-close {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
  }
}

/* The palette opener, shaped like the field it becomes. */
.menu-search {
  display: flex;
  align-items: center;
  gap: var(--step-3);
  padding: var(--step-3) var(--step-4);
  color: var(--s6-quiet);
  text-decoration: none;
  background: var(--c-panel);
  border: 1px solid var(--s6-hair);
  border-radius: 3px;
}

.menu-search:hover { color: var(--color-text); border-color: var(--s6-hair-strong); }
.menu-search-label { flex: 1 1 auto; font-size: var(--size-sm); }

.menu-search-key {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  padding: 0.1em 0.4em;
  color: var(--s6-quiet);
  border: 1px solid var(--s6-hair);
  border-radius: 2px;
}

/* The keycap names a shortcut a touch device has no way to press. */
@media (pointer: coarse) {
  .menu-search-key { display: none; }
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--step-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-group { margin: 0; }
.menu-group > ul { margin: 0; padding: 0; list-style: none; }
.menu-group > ul > li { margin: 0; }

.menu-heading {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--s6-quiet);
  margin: 0 0 var(--step-3);
  text-shadow: none;
}

.menu-item {
  display: block;
  padding: var(--step-2) var(--step-3);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-text);
}

.menu-item:hover { background: var(--c-panel); }
.menu-item[aria-current='page'] { color: var(--c-accent); }

.menu-item-label { display: block; font-size: var(--size-base); font-weight: 500; }

.menu-item-note {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--size-xs);
  color: var(--s6-quiet);
}

/* --------------------------------------------------------------------------
   The tools group

   The four things a reader arrives here to DO. It is the first group and the
   only one with a ground of its own, and each line carries its own colour as a
   rule down the left edge. One colour per line, nowhere else.
   -------------------------------------------------------------------------- */
.menu-group-tools {
  padding: var(--step-4);
  background: var(--c-panel);
  border: 1px solid var(--s6-hair);
  border-radius: 3px;
}

.menu-group-tools .menu-heading { color: var(--color-text); }

.menu-item.has-mark {
  border-left: 3px solid var(--s6-hair-strong);
  border-radius: 0 2px 2px 0;
}

.menu-item.mark-accent { border-left-color: var(--c-accent); }
.menu-item.mark-green  { border-left-color: var(--c-green); }
.menu-item.mark-amber  { border-left-color: var(--c-amber); }
.menu-item.mark-purple { border-left-color: var(--c-purple); }

.menu-item.has-mark + li,
.menu-group-tools li + li { margin-top: var(--step-2); }

/* ==========================================================================
   TOOL PRIMITIVES

   Two shapes, used by the home page and by every page that should offer the
   flasher and the viewer without a detour. Both carry the tool's colour as a
   left rule and nothing else; the tint is 6%, which is a ground rather than a
   highlight.

   Set the colour once per element with --tool, e.g. style="--tool: var(--c-green)"
   or by adding one of the four .tool-* classes below.
   ========================================================================== */
.tool-card,
.tool-accent { --tool: var(--c-accent); }
.tool-green  { --tool: var(--c-green); }
.tool-amber  { --tool: var(--c-amber); }
.tool-purple { --tool: var(--c-purple); }

/* A compact row of tool links, for the top or the foot of a page. */
.tool-strip {
  /* The fallback lives on the container, not on the link. On the link it is a
     class plus an element, which outranks the single class a marker colour
     arrives as, and every strip rendered in the one colour. */
  --tool: var(--c-accent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-strip > li { margin: 0; }

.tool-strip a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  font-size: var(--size-sm);
  color: var(--color-text);
  text-decoration: none;
  background: color-mix(in srgb, var(--tool) 6%, transparent);
  border: 1px solid var(--s6-hair);
  border-left: 4px solid var(--tool);
  border-radius: 0 4px 4px 0;
}

.tool-strip a:hover { border-color: var(--s6-hair-strong); border-left-color: var(--tool); }

/* The card carries its colour as the left rule and nothing else, and the strip
   is the same component in a smaller size, so the dot goes: two different
   markers for one idea read as two families. */
.tool-strip .tool-mark { display: none; }

/* A large entry card, for the tools section on the home page. */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--step-3);
  padding: var(--step-5);
  background: color-mix(in srgb, var(--tool) 6%, var(--c-card));
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-left: 4px solid var(--tool);
  border-radius: 0 4px 4px 0;
  box-shadow: none;
}

.tool-card .tool-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--tool);
}

.tool-card h3 { margin: 0; }
.tool-card p { margin: 0; color: var(--s6-mute); }
.tool-card .tool-actions { margin-top: auto; padding-top: var(--step-3); }

/* ==========================================================================
   THE SITE-WIDE HERO AND FACTS LINE (moved here from the home sheet so every
   page renders the same opening: graph paper, eyebrow with the version stamp,
   the log date, the headline, and the device photograph in its module
   bleeding right when the page has one).
   ========================================================================== */
:root {
  --s6h-grid-ink: rgba(255, 255, 255, 0.04);
  --s6h-rule: rgba(255, 255, 255, 0.09);
  --s6h-rule-soft: rgba(255, 255, 255, 0.06);
  --s6h-quiet: rgba(255, 255, 255, 0.45);
}
/* --------------------------------------------------------------------------
   HERO

   Two columns, the photograph running off the right edge of the viewport. The
   bleed is a negative right margin measured against the viewport, so it can
   land a hair past the client width once a scrollbar is present; the hero
   clips on that axis rather than handing the page a horizontal scroll.
   -------------------------------------------------------------------------- */
.hero-log { overflow-x: clip; }

/* The retired grid overlay comes back here only, as graph paper, and only
   under the hero: this page is a build log, and a build log is written on it.
   The shared tokens supply the ruling and the fade; the pair of gradients is
   the local fallback. It rides ::after rather than a shared wrapper hook
   because a hero's ::before is already spoken for by the drifting bloom, and
   that bloom is exactly the sort of decoration this restructure drops. */
.hero-log::before { content: none; }

.hero-log::after {
  background-image: var(--s6-grid,
    repeating-linear-gradient(to right, var(--s6h-grid-ink) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--s6h-grid-ink) 0 1px, transparent 1px 24px));
  background-size: auto;
  -webkit-mask-image: var(--s6-grid-mask, linear-gradient(180deg, rgb(0 0 0) 0%, transparent 78%));
  mask-image: var(--s6-grid-mask, linear-gradient(180deg, rgb(0 0 0) 0%, transparent 78%));
}

/* The 12-column placements from the card layout would override the two-column
   bleed grid, so they are released here. The phone ordering rules below 60rem
   are left alone: they still do the right thing in one column. */
@media (min-width: 60rem) {
  .hero-log .hero-copy,
  .hero-log .hero-media { grid-column: auto; }
  .hero-log .hero-media { align-self: start; }

  /* Full hero height rather than a 4:3 crop floating in the column. */
  .hero-log .hero-media img {
    aspect-ratio: auto;
    height: clamp(24rem, 36vw, 32rem);
    object-fit: cover;
  }
}

/* Placement only. The stamp and the log date are shared primitives now; all
   this page decides is where on the line they sit. */
.eyebrow .stamp { margin-left: var(--step-3); vertical-align: baseline; }

.hero-log .log-date { margin-top: var(--step-2); }

/* A hero with no photograph carries a plain .container, which is a block; the
   bleed variant is the grid. That left every page without a photo opening on
   different vertical rhythm from the home page, because the grid's row gap is
   what separates the eyebrow from the line below it. Same grid, one column
   wide. */
/* The gap is the bleed variant's own phone gap, not a smaller step: on a phone
   .hero-copy is display: contents, so this row gap IS the distance between the
   eyebrow and the line under it, and anything else opens the page on different
   rhythm from the home page. */
.hero > .container:not(.bleed-right) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-7);
}

.hero > .container:not(.bleed-right) > .hero-copy { grid-column: 1 / -1; }

/* Below 60rem .hero-copy is display: contents, so its children are the grid
   items. A single column keeps every one of them the full width of the
   container; a twelve-column grid put each child in its own narrow track. */
@media (max-width: 59.999rem) {
  .hero > .container:not(.bleed-right) > .hero-copy > * { grid-column: 1 / -1; min-width: 0; }
  .hero > .container.bleed-right > .hero-copy > * { min-width: 0; }
}

@media (max-width: 59.999rem) {
  /* .hero-copy is display: contents at this width, so a new child needs a place
     in the ordering or it lands ahead of the eyebrow. */
  .hero-log .hero-copy > .log-date { order: 1; }
}

/* --------------------------------------------------------------------------
   THE FACTS LINE

   The moulded readout plate becomes the quantities line off the top of a
   recipe card: mono, inline, one hairline between each, nothing behind them.
   -------------------------------------------------------------------------- */
.facts-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  list-style: none;
  margin: var(--step-8) 0 0;
  padding: 0;
  background-image: none;
  border: 0;
  border-block: 1px solid var(--s6h-rule);
  border-radius: 0;
  box-shadow: none;
}

/* Two by two rather than four across. The hero's copy column is a little over
   a third of the page, and four mono quantities in it either wrap three-and-one
   or squeeze the labels to nothing. */
.facts-line > li {
  flex: 1 1 40%;
  min-width: 0;
  padding: var(--step-4);
  text-align: left;
}

.facts-line > li + li {
  border-left: 1px solid var(--s6h-rule-soft);
  box-shadow: none;
}

/* The first cell of each line of two starts on the text's own edge. */
.facts-line > li:nth-child(odd) { padding-left: 0; border-left: 0; }

/* The de-plating this page used to own now lives in the shared sheet, scoped to
   bare .facts, because six other pages carry the same strip. Only the size the
   two-across layout needs is left here. */
.facts-line .fact-value { font-size: var(--size-base); }

.facts-line .fact-label { margin-top: var(--step-1); }




/* --------------------------------------------------------------------------
   THE SCREENSHOT LIGHTBOX'S CLOSE CONTROL

   The dialog had no visible way out: Escape and the backdrop worked, and
   nothing said so. The control is fixed to the corner of the viewport rather
   than to the picture, because the picture is sized from its own aspect ratio
   and a button hung off its edge lands on the image on one shape and off the
   screen on another.
   -------------------------------------------------------------------------- */
.shot-close {
  position: fixed;
  top: max(var(--step-3), env(safe-area-inset-top));
  right: max(var(--step-3), env(safe-area-inset-right));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--s6-mute);
  background: color-mix(in srgb, var(--c-ground) 70%, transparent);
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
}

.shot-close::before { content: none; }
.shot-close:hover { color: var(--color-text); border-color: var(--s6-hair-strong); }

/* Focus belongs to the button now, so the dialog's own ring — which drew a
   cyan rectangle around the picture — has nothing left to say. */
#shot-dialog:focus { outline: none; }
#shot-dialog.screenshot:focus-visible { outline: none; }

/* --------------------------------------------------------------------------
   The visit counter
   -------------------------------------------------------------------------- */

/* A box with a number in it and nothing else, on the last line of the page
   beside the licence. Tabular figures stop the width jumping as the digits
   change, which is the whole reason a counter looks cheap without them.
   margin-inline-start:auto pushes it to the end of the line on a wide screen
   and does nothing once the line wraps, which is what happens on a phone. */
.footer-base .hit-count {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.6em;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: var(--tracking-label);
  color: var(--c-accent, var(--color-accent));
  background: var(--s6-sunk, transparent);
  border: 1px solid var(--s6-hair);
  border-radius: 2px;
  white-space: nowrap;
}