/* ===========================================================================
   chrome.css — the five corner elements.

   The wordmark, the black pills, the rotated mark, the micro-label, and the
   180 ms / 20 ms ink swap that carries all five across a ground change.

   These are the only nodes on the site whose colour IS transitioned, because
   they persist across every state and would otherwise be caught mid-ground.
   ======================================================================== */


/* === 3.3 Corner chrome ink swap — the 20 ms grace note ==================== */

/* 180 ms linear with a 20 ms delay, so the ground has committed before the
   pill's ink moves. No glyph is ever legible against the wrong ground.

   This block is FIRST on purpose. Rules below that need their own transition
   (the mark's drift, the status pill's measured width) re-declare the ink
   triplet inside their own shorthand, because a later `transition` shorthand
   at equal specificity would otherwise drop it. */

.chrome, .chrome *{
  transition: color var(--d-onplate) linear var(--d-onplate-delay),
              background-color var(--d-onplate) linear var(--d-onplate-delay),
              border-color var(--d-onplate) linear var(--d-onplate-delay);
}


/* === The wordmark — top-left ============================================= */

.chrome--mark{
  margin: 0;
  font-family: var(--f-label);
  font-variation-settings: "wdth" 84, "wght" 700;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--on-plate);
}

/* --- the tiled mark ----------------------------------------------------------
   Three letters, each knocked out of its own rounded tile, then the tagline set
   small and wide beside them. Black and white by construction: the tile takes
   the ink and the letter takes the ground, so on the carbon leaf the pair
   inverts with the plate instead of needing a second colour. */
.mark{
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.9cqw, 14px);
  color: inherit;
  text-decoration: none;
  /* THE MARK IS A LINK HOME, so it has to take the pointer back. `.card__inner`
     is pointer-events:none (card.css) and only `.pill` below re-enabled it —
     which meant the wordmark rendered as a link, read as a link to a screen
     reader, took focus and answered Enter, but could not be clicked. The one
     failure mode that looks like nothing is wrong. */
  pointer-events: auto;
}
/* The whole mark is one target — tiles and tagline together, as marked up. */
.mark:focus-visible{ outline-offset: 4px }
.mark__tiles{ display: inline-flex; gap: 3px }
.mark__tiles > span{
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 5px;
  background: var(--on-plate);
  color: var(--plate-now, var(--plate-foam));
  font-variation-settings: "wdth" 84, "wght" 700;
  letter-spacing: 0;
  transition: background-color var(--d-onplate) linear var(--d-onplate-delay),
              color var(--d-onplate) linear var(--d-onplate-delay);
}
.mark__tag{
  font-variation-settings: "wdth" 74, "wght" 500;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--on-soft);
  white-space: nowrap;
}
/* The tagline is the first thing to go when the card runs out of top rail. */
@container (max-width: 720px){
  .mark__tag{ display: none }
}


/* === The pills =========================================================== */

/* Black pill, white text. On carbon the pair inverts, cross-faded on the ink
   swap above — a black pill on a black ground would simply disappear. */

.pill{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--plate-carbon);
  color: var(--plate-foam);
  font-family: var(--f-label);
  font-variation-settings: "wdth" 88, "wght" 600;
  font-weight: 600;
  font-size: var(--t-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.024em;
  text-decoration: none;
  pointer-events: auto;
}

[data-plate="carbon"] .pill{
  background-color: var(--carbon-type);
  color: var(--plate-carbon);
}

/* Buttons: strip the UA chrome, keep the type. */
button.pill{
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--f-label);
  font-variation-settings: "wdth" 88, "wght" 600;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.024em;
}

/* --seal-blue is the ONE interactive colour on the site. */
.pill:active{ background-color: var(--seal-blue); color: var(--plate-foam) }
[data-plate="carbon"] .pill:active{ background-color: var(--seal-blue); color: var(--plate-foam) }


/* === The status pill — bottom-left: NN ● Label ============================ */

/* The dot is static. The only pulsing dot on the site is the 5 px --film-red
   live dot beside the phone number on the carbon leaf, and it is the second of
   that colour's exactly two permitted uses. */

.pill--index{
  width: max-content;
  overflow: hidden;
  white-space: nowrap;
}

/* Contract: pill.js measures the incoming label off-layout, writes the result
   to --pill-w (registered <length>) and stamps `data-w`. The card's own
   inline-size never changes, so no container query and no clamp() is
   recomputed by this tween — only the auto grid track inside .card__inner. */
.pill--index[data-w]{
  width: var(--pill-w);
  transition: color var(--d-onplate) linear var(--d-onplate-delay),
              background-color var(--d-onplate) linear var(--d-onplate-delay),
              border-color var(--d-onplate) linear var(--d-onplate-delay),
              width var(--d-pill-w) var(--e-roll);
}

.pill--index .num{
  font-variation-settings: "wdth" 76, "wght" 500;
  font-weight: 500;
  font-size: var(--t-num);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}

.pill--index .dot{
  flex: none;
  width: 4px; height: 4px;
  border-radius: 50%;
  background-color: var(--plate-foam);
}
[data-plate="carbon"] .pill--index .dot{ background-color: var(--plate-carbon) }

.pill--index .label{
  display: inline-block;
  white-space: nowrap;
}

/* The odometer roll. Contract: pill.js stamps `data-roll` on the pill for
   --d-pill-out, swaps the text, then clears it; the numeral and label roll out
   upward and the replacements arrive from below over --d-pill-in. Mechanical
   curve, zero overshoot. */
.pill--index .num,
.pill--index .label{
  transition: opacity var(--d-pill-in) var(--e-roll),
              translate var(--d-pill-in) var(--e-roll);
}
.pill--index[data-roll] .num,
.pill--index[data-roll] .label{
  opacity: 0;
  translate: 0 -0.75em;
  transition: opacity var(--d-pill-out) var(--e-roll),
              translate var(--d-pill-out) var(--e-roll);
}


/* === The CTA pill — asymmetric hairline underline, 340 in / 680 out ======= */

/* Twice as long to withdraw as to offer. The label shifts 8 px right as the
   rule grows in from the left; on leave the rule empties out to the right. */

/* The markup carries the CTA label as a bare text node inside an inline-flex
   pill, so there is no element to shift on its own; the pill's whole rect
   carries the 8 px offset. Compositor-only either way. */
.pill--cta{
  position: relative;
  overflow: hidden;
  transition: color var(--d-onplate) linear var(--d-onplate-delay),
              background-color var(--d-onplate) linear var(--d-onplate-delay),
              border-color var(--d-onplate) linear var(--d-onplate-delay),
              translate 340ms var(--e-roll);
}
.pill--cta::after{
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 7px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;     /* collapses out to the right … */
  transition: transform 680ms var(--e-roll);
}
.pill--cta:hover::after,
.pill--cta:focus-visible::after{
  transform: scaleX(1);
  transform-origin: left center;      /* … and grows in from the left */
  transition: transform 340ms var(--e-roll);
}
.pill--cta:hover,
.pill--cta:focus-visible{ translate: 8px 0 }


/* === The back pill — top-left, product pages only ========================
   It lives INSIDE the wordmark header, not in a corner slot of its own: the
   card's first column is as wide as the bottom-left status pill, so its own slot
   would have stranded it 150 px from the mark it belongs beside. Nested, it
   reads as a breadcrumb — PBE ← PRODUCTS — and arrives on the mark's stagger
   slot instead of needing an animation-delay of its own.

   The CTA offers itself 8 px to the right; this one withdraws 8 px to the left,
   the direction it sends you. Same curve, same duration, opposite sign — one
   gesture read twice, not two gestures. */

.chrome--mark:has(.pill--back){
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2cqw, 18px);
}

.pill--back{
  transition: color var(--d-onplate) linear var(--d-onplate-delay),
              background-color var(--d-onplate) linear var(--d-onplate-delay),
              border-color var(--d-onplate) linear var(--d-onplate-delay),
              translate 340ms var(--e-roll);
}
.pill--back:hover,
.pill--back:focus-visible{ translate: -8px 0 }

/* The arrow is the only part that moves inside the pill: it leads by 2 px. */
.pill--back .arrow{
  display: inline-block;
  transition: translate 340ms var(--e-roll);
}
.pill--back:hover .arrow,
.pill--back:focus-visible .arrow{ translate: -2px 0 }

@media (prefers-reduced-motion: reduce){
  .pill--back,
  .pill--back .arrow{ transition: none }
  .pill--back:hover,
  .pill--back:focus-visible,
  .pill--back:hover .arrow,
  .pill--back:focus-visible .arrow{ translate: none }
}


/* === The rotated mark — bottom-right ===================================== */

/* `this side up`, the one phrase stencilled on every carton in America,
   printed upside down. 15 px Bodoni italic. It is aria-hidden and paired with
   an .sr-only clarification, so no screen reader ever reads a joke as a
   handling instruction. It carries no information: one span to remove if the
   client flinches.

   `rotate` and `translate` are declared as individual transform properties on
   purpose. The individual properties compose translate → rotate → scale, so
   the drift stays in screen space instead of being flipped by the 180°.

   Contract: mark.js writes --mark-x / --mark-y in px and stamps `data-near`
   while the pointer is inside the proximity radius. It must NOT write
   `transform`, which would compose after the rotation and invert the drift. */

.mark-rotated{
  display: inline-block;
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: var(--t-mark);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--kraft-mid);
  rotate: 180deg;
  translate: var(--mark-x, 0px) var(--mark-y, 0px);
  transition: color var(--d-onplate) linear var(--d-onplate-delay),
              translate var(--d-mark-release) var(--e-roll);
}
.mark-rotated[data-near]{
  transition: color var(--d-onplate) linear var(--d-onplate-delay),
              translate var(--d-mark-follow) var(--e-roll);
}

[data-plate="carbon"] .mark-rotated{ color: var(--carbon-soft) }


/* === The micro-label — bottom-centre ===================================== */

/* Factual, parenthetical, sentence case. The original spec's
   `(this side of the page)` is killed: it is a joke about the joke, sitting
   40 px from the actual joke. */

.note{
  margin: 0;
  font-family: var(--f-label);
  font-variation-settings: "wdth" 100, "wght" 400;
  font-weight: 400;
  font-size: var(--t-label);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--on-soft);
}