/* The tier chip. ONE component, five states, three sizes.
 *
 * SOURCE OF TRUTH, and this file is a transcription of it rather than a
 * design:
 *   Comps ......... https://claude.ai/code/artifact/738054c2-2512-4edc-a0d4-e724540d1f04
 *   Implementation  https://claude.ai/code/artifact/33fbd7d1-776b-4c15-a861-6be5be52d27d
 *   Marketing, 17 and 21 Aug 2026. Tracks against tfc-70.
 *
 * Both were approved before any of this was written. Every number below --
 * heights, label sizes, the 1.2x mark ratio, the 1.5px border, the tap
 * padding, the fills for both grounds -- is copied from them. Do not
 * re-derive any of it by eye; if something looks wrong, the artifacts are
 * the argument, not this file.
 *
 * THE GOLD BORDER IS THE FAMILY MARKER, NOT A STATE. Marketing: "Gold says
 * 'First Click chip', the fill says which state, the label says it in
 * words." It is on EVERY state, at every size, on both grounds. It is also
 * DECORATION, NEVER STRUCTURE -- measured at 1.47:1 on white, far under
 * the 3:1 a boundary needs. That single fact is what forces the next rule.
 *
 * EVERY STATE CARRIES A FILL, INCLUDING THE NEUTRAL ONE, so the gold rides
 * on a shape that already reads without it. Do not implement any state as
 * transparent-with-a-gold-border-only; that is the first line of the
 * brief's "Do not" list and it is there because the edge disappears on a
 * light ground.
 *
 * EVERY VALUE IS READ OUT OF THE SHIPPED VECTORS, not out of the comps.
 * Marketing Deliverables 20260821/vector/ holds the 30 approved SVGs
 * (chip-{state}-{size}-{ground}.svg) and build_chips.py that generated
 * them. The SVGs are copied into static/assets/chips/ and the CSS below
 * reproduces exactly what they draw -- verified by grepping the fills and
 * strokes out of the files themselves.
 *
 * GOLD IS #EFD53C, AND IT IS NOT AN APPROXIMATION. The 17 Aug comps
 * flagged their palette as provisional "pending the .ai file", which is
 * why this was first written against the repo's #F0D62F. The 21 Aug
 * vectors are the later artefact and they stroke every chip #EFD53C. The
 * deliverable wins over the caveat in the earlier document. Same for the
 * neutral ink: #0F1E33, not this repo's #001234.
 *
 * So --chip-* below deliberately does NOT reach for --yellow or --navy.
 * The chip carries the tier palette; the Control Panel theme carries the
 * page. Wiring one to the other would mean a Control Panel retheme
 * silently restyling a member-facing component.
 */

:root {
  /* ===== the family marker ===== */
  --chip-border: #EFD53C;
  --chip-border-width: 1.5px;

  /* ===== state fills and inks, light ground ===== */
  --chip-premium-fill: #8C1D2B;
  --chip-premium-ink: #FFFFFF;
  --chip-black-fill: #101014;
  --chip-black-ink: #FFFFFF;
  --chip-adfree-fill: #E8F4FB;
  --chip-adfree-ink: #1B6A93;
  --chip-default-fill: #F1F3F7;
  --chip-default-ink: #0F1E33;
  --chip-progress-fill: #F1F3F7;   /* the unearned ground */
  --chip-progress-bar: #E8F4FB;    /* the earned portion */
  --chip-progress-ink: #1B6A93;
}

/* BLACK KEEPS ITS FILL IN DARK MODE and Premium does not. That asymmetry
 * is the brief's, not an oversight: chip/black/fill is #101014 on BOTH
 * grounds because black IS the tier -- lightening it would rename it --
 * while Premium's deep red at #8C1D2B goes muddy on a dark ground and
 * lifts to #C8465A, still white-on-red at 4.69:1. */
@media (prefers-color-scheme: dark) {
  :root {
    --chip-premium-fill: #C8465A;
    --chip-adfree-fill: #12222F;
    --chip-adfree-ink: #6FBEE5;
    --chip-default-fill: #16202D;
    --chip-default-ink: #FFFFFF;
    --chip-progress-fill: #16202D;
    --chip-progress-bar: #12222F;
    --chip-progress-ink: #6FBEE5;
  }
}

/* ===================================================================
 * The pill
 * =================================================================== */

.tfc-chip {
  display: inline-flex;
  align-items: center;
  /* The vectors inset the stroke by 0.75 -- half its width -- so a 32px
   * chip measures 32px INCLUDING its border, not 35. */
  box-sizing: border-box;
  border-radius: 999px;          /* = height/2 at every size, per the brief */
  border: var(--chip-border-width) solid var(--chip-border);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
  position: relative;
}

/* THE TAP TARGET IS NOT THE PILL. At sm the chip is 24px against platform
 * minimums of 44pt (iOS) and 48dp (Android). The brief is explicit that
 * this wants transparent padding rather than a bigger pill -- so the
 * visual size stays exactly as drawn and the touch area grows behind it.
 * ::after rather than real padding, so the chip's box still measures 24px
 * to everything laying it out. "Invisible on a desktop mock and fails
 * immediately on a phone." */
.tfc-chip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--chip-tap, 0px));
  bottom: calc(-1 * var(--chip-tap, 0px));
}

/* THE MARK RUNS AT 1.2x THE LABEL, centred on the cap band -- measured,
 * not chosen. The brief: the arrow is only 74% of the mark's height and
 * ink covers 33% of its bounding box, so box-to-cap-height parity makes it
 * read undersized beside a semibold word. "Do not 'fix' this to look
 * mathematically even." */
.tfc-chip .tfc-chip-mark {
  height: 1.2em;
  width: auto;
  display: block;
  flex: none;
  color: currentColor;
}

/* The trailing detail, behind a hairline divider drawn from the ink itself
 * so it never needs a per-state value. */
.tfc-chip .tfc-chip-meta {
  font-weight: 400;
  font-size: .92em;      /* build_chips.py: mfs = fs * 0.92 */
  opacity: .88;
  border-left: 1px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* ===================================================================
 * Sizes
 * =================================================================== */

.tfc-chip--sm { height: 24px; font-size: 11px; padding: 0 10px 0 8px; gap: 5px;   --chip-tap: 10px; }
.tfc-chip--md { height: 32px; font-size: 13px; padding: 0 13px 0 10px; gap: 6.5px; --chip-tap: 6px; }
.tfc-chip--lg { height: 40px; font-size: 16px; padding: 0 16px 0 13px; gap: 8px;   --chip-tap: 2px; }

.tfc-chip--sm .tfc-chip-meta { margin-left: 5px;   padding-left: 5px; }
.tfc-chip--md .tfc-chip-meta { margin-left: 6.5px; padding-left: 6.5px; }
.tfc-chip--lg .tfc-chip-meta { margin-left: 8px;   padding-left: 8px; }

/* ===================================================================
 * States
 * =================================================================== */

.tfc-chip--premium { background: var(--chip-premium-fill); color: var(--chip-premium-ink); }
.tfc-chip--black   { background: var(--chip-black-fill);   color: var(--chip-black-ink); }
.tfc-chip--adfree  { background: var(--chip-adfree-fill);  color: var(--chip-adfree-ink); }
.tfc-chip--default { background: var(--chip-default-fill); color: var(--chip-default-ink); }

/* PROGRESS IS THE SAME OBJECT AS AD-FREE, deliberately -- same label, same
 * ink. Marketing: "the chip a member works toward should be visibly the
 * same object as the one they end up with, not a different badge that gets
 * swapped out." The fill runs from the left in proportion to the count and
 * is clipped by the pill's own radius, so it reads before the number does.
 *
 * DECORATIVE ONLY. The count is in the trailing text as well, because a
 * gradient is not a value a screen reader can read. */
.tfc-chip--progress {
  color: var(--chip-progress-ink);
  /* THE NEUTRAL GROUND IS THE BASE and the earned portion is painted over
   * it from the left. build_chips.py draws exactly this -- a neutral rect,
   * then an Ad-Free rect clipped to the pill's own rounded rect -- rather
   * than a gradient between two states, so an empty progress chip is
   * literally the neutral chip and a full one is literally the Ad-Free
   * chip. A gradient would have been a third thing that resembles both. */
  background:
    linear-gradient(to right,
      var(--chip-progress-bar) 0 var(--chip-fill, 0%),
      transparent var(--chip-fill, 0%) 100%)
    , var(--chip-progress-fill);
}

/* ===================================================================
 * Focus
 * =================================================================== */
/* The chip is always a link to /account, so it needs a visible focus ring
 * -- and one that does not read as the gold border thickening, which would
 * make focus indistinguishable from decoration. */
.tfc-chip:focus-visible {
  outline: 2px solid var(--chip-adfree-ink);
  outline-offset: 2px;
}

/* ===================================================================
 * Ground, stated rather than inferred
 * =================================================================== */
/* WHY THIS EXISTS. The 30 approved vectors are named
 * chip-{state}-{size}-{ground}.svg -- GROUND is Marketing's own axis, and
 * it means "what is this chip drawn on", not "what theme has the reader
 * chosen". The block above conflates the two, because for a page that
 * follows the OS theme they happen to coincide: a light page in light mode
 * wants the light chip.
 *
 * THEY STOP COINCIDING THE MOMENT A SURFACE HAS A GROUND OF ITS OWN. The
 * site masthead is navy (#001234) at 09:00 on a laptop set to light mode,
 * and inference alone puts the LIGHT neutral chip -- fill #F1F3F7 -- on it:
 * a near-white blob in the header, where the comps' own header mock draws
 * #16202D with white ink. The focus ring lands the same way, since it is
 * drawn from --chip-adfree-ink: #1B6A93 on navy is a dark ring on a dark
 * bar, and #6FBEE5 is the one the reader can actually see.
 *
 * SO THE ATTRIBUTE IS AN OVERRIDE, NOT A REPLACEMENT. Omit it and the
 * media query still answers, which is right for /account and for the
 * Control Panel's tables -- pages whose ground really is the reader's
 * theme. Set it and this element's own declarations win over the inherited
 * ones, in both directions, so a light chip can be pinned onto a page that
 * is otherwise dark just as easily.
 *
 * THE VALUES ARE THE MEDIA QUERY'S, RESTATED. That is a duplication and it
 * is deliberate: the alternative is aliasing every hex through a second
 * custom property, which would rewrite the lines
 * tests/test_tier_chip_matches_the_approved_vectors.py pins the dark
 * palette by -- and the point of those assertions is that the numbers stay
 * legible in the file, next to the vector they came from. Two literal
 * copies inside ONE component file is a smaller risk than a component
 * whose palette can only be read by following indirection.
 *
 * BLACK IS ABSENT HERE FOR THE SAME REASON IT IS ABSENT ABOVE: black IS
 * the tier, and lightening it on a dark ground would rename it. */
[data-chip-ground="dark"] {
  --chip-premium-fill: #C8465A;
  --chip-adfree-fill: #12222F;
  --chip-adfree-ink: #6FBEE5;
  --chip-default-fill: #16202D;
  --chip-default-ink: #FFFFFF;
  --chip-progress-fill: #16202D;
  --chip-progress-bar: #12222F;
  --chip-progress-ink: #6FBEE5;
}

[data-chip-ground="light"] {
  --chip-premium-fill: #8C1D2B;
  --chip-adfree-fill: #E8F4FB;
  --chip-adfree-ink: #1B6A93;
  --chip-default-fill: #F1F3F7;
  --chip-default-ink: #0F1E33;
  --chip-progress-fill: #F1F3F7;
  --chip-progress-bar: #E8F4FB;
  --chip-progress-ink: #1B6A93;
}

/* ===================================================================
 * Without the mark
 * =================================================================== */
/* THE BRIEF ALLOWS DROPPING THE MARK AND NOT THE WORD -- §7's showMark,
 * "a boolean, not a new state", plus §8's flat legibility rule: "below
 * ~18px the Insignia's five rays mush. Under that, drop the mark and keep
 * the word." At md the mark is 15.6px and at sm it is 13.2px, so in the
 * site header §8 decides it on its own, before the header's separate
 * argument (the masthead's own Insignia is centimetres away) is even
 * reached. At lg it is 19.2px and the mark stays, which is why /account
 * keeps it.
 *
 * THE ONLY THING THIS CHANGES IS THE LEFT PADDING, and it is a derivation
 * rather than a new value. Every size is drawn with LESS padding on the
 * leading edge than the trailing one -- 8/10, 10/13, 13/16 -- because the
 * leading edge is where the mark sits and the mark's ink covers only 33%
 * of its box, so it needs less air than a semibold word does. Take the
 * mark away and that reason goes with it, leaving a label sitting 3px off
 * centre in its own pill. So the leading edge takes the SAME value the
 * trailing edge already carries: no number here that the vectors did not
 * already specify for this size.
 *
 * TWO CLASSES, NOT ONE, so this outranks the size rule it corrects rather
 * than depending on file order to beat it -- and so `padding-left` here
 * cannot be undone by a size rule's `padding` shorthand loading later. */
.tfc-chip--nomark.tfc-chip--sm { padding-left: 10px; }
.tfc-chip--nomark.tfc-chip--md { padding-left: 13px; }
.tfc-chip--nomark.tfc-chip--lg { padding-left: 16px; }