/* twoplus11.com — platform (macOS / Windows) awareness
   ─────────────────────────────────────────────────────────────────────────
   Every download button on this site used to say "Download" and silently mean
   macOS. With Windows builds shipping under the same app names, that is no
   longer a label — it is a wrong file. These styles carry the distinction:
   which platform you are on, which builds an app has, and which one a button
   is about to hand you.

   Two rules run through all of it:
     · the other platform is never hidden, only de-emphasised. A Mac visitor
       must still be able to see, and link, the Windows build.
     · nothing here is required for the page to work. With JavaScript off the
       markup stands on its own and none of these classes are applied.

   Tokens come from site.css. Contrast is checked against --s2 (the card) and
   --s1 (the filter strip), the two surfaces these sit on. */

/* ── Segmented switch ──────────────────────────────────────────────── */
.pfx {
  display: inline-flex;
  position: relative;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: 999px;
  /* Never a scroll trap on a narrow phone: the labels shrink before the page does. */
  max-width: 100%;
}
.pfx__b {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.42rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--t3);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.2s;
}
.pfx__b:hover { color: var(--t2); }
.pfx__b[aria-pressed="true"] { color: var(--t1); }
.pfx__b:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.pfx__b svg { flex-shrink: 0; opacity: 0.9; }
/* The count of apps available on that platform. Reads as data, not as a badge. */
.pfx__n {
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--t4);
  padding: 0.05rem 0.34rem;
  border-radius: 999px;
  background: var(--b0);
}
.pfx__b[aria-pressed="true"] .pfx__n { color: var(--t2); background: var(--b1); }
/* Sliding indicator. Positioned from JS so it survives label-width changes. */
.pfx__ind {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 999px;
  background: var(--s3);
  box-shadow: inset 0 0 0 1px var(--b1), 0 2px 10px rgba(0,0,0,0.28);
  transition: left 0.28s cubic-bezier(0.32, 0.72, 0, 1), width 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
  z-index: 0;
}
/* First paint must not animate in from the left edge. */
.pfx[data-ready="0"] .pfx__ind { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pfx__ind { transition: none; }
}

/* The switch as it sits in the home page's filter strip. */
.pfx-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.pfx-wrap__note {
  font-size: 0.78rem;
  color: var(--t4);
  line-height: 1.5;
}

/* ── Availability pills on an app card ─────────────────────────────── */
.pf-pills {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}
.pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  padding: 0.14rem 0.46rem 0.14rem 0.38rem;
  border-radius: 999px;
  border: 1px solid var(--b1);
  background: var(--b0);
  color: var(--t3);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.pf-pill svg { flex-shrink: 0; }
/* Not available on that platform. Never removed — an app that runs on one OS
   and not the other is telling you something, and hiding the row would make the
   two cases look identical.

   The state is carried by the dashed border and the struck-through label, NOT by
   fading the text: the pill still has to be readable to be worth showing, and
   the text stays on --t4, which clears AA on both surfaces these sit on. Only
   the mark, which is decoration, dims. Each pill also carries its own aria-label
   ("No Windows build of GifMint yet"), so none of this is visual-only. */
.pf-pill[data-on="0"] {
  border-style: dashed;
  color: var(--t4);
}
.pf-pill[data-on="0"] svg { opacity: 0.5; }
.pf-pill[data-on="0"] span { text-decoration: line-through; text-decoration-thickness: 1px; }
/* The platform you are actually on, when the app has a build for it. */
.pf-pill[data-you="1"] {
  border-color: rgba(10,132,255,0.42);
  background: var(--blue-d);
  color: var(--t2);
}

/* ── A card with nothing to offer the selected platform ──────────────
   Recessed, not faded. Dropping the whole card to 55% opacity was the obvious
   thing and it takes every line of body copy below AA — the card is still there
   to be read, and someone who cannot read it cannot find out that the app they
   want is macOS-only. So the card sinks to the darker surface and its icon goes
   grey, and no text loses a point of contrast. */
.app-card[data-pf-off="1"] {
  background: var(--s1);
  border-color: var(--b0);
}
.app-card[data-pf-off="1"] .app-icon {
  filter: grayscale(1);
  opacity: 0.55;
}
.app-card[data-pf-off="1"]:hover .app-icon { filter: none; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .app-card .app-icon { transition: filter 0.25s, opacity 0.25s; }
}
/* The download button in that state. Still a link (to the app's own page, which
   can explain), never a dead control and never a button that hands over the
   wrong file. */
.btn[data-pf-off="1"] {
  background: var(--b0) !important;
  color: var(--t3) !important;
  border: 1px dashed var(--b2) !important;
  box-shadow: none !important;
}
.btn[data-pf-off="1"]:hover {
  background: var(--b1) !important;
  color: var(--t2) !important;
  transform: none !important;
}

/* ── The line under a hero / download button on an app page ────────── */
.pf-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--t3, rgba(255,255,255,0.58));
  line-height: 1.5;
}
.pf-rail--left { justify-content: flex-start; }
.pf-rail__sep { opacity: 0.4; }
.pf-rail a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.28);
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  border-radius: 4px;
}
.pf-rail a:hover { color: var(--t1, #fff); text-decoration-color: currentColor; }
.pf-rail a:focus-visible { outline: 2px solid var(--blue, #0A84FF); outline-offset: 3px; }
.pf-rail svg { flex-shrink: 0; opacity: 0.85; }

/* ── Public counter: the macOS / Windows split ─────────────────────── */
.dlc-split {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dlc-split__i {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}
.dlc-split__n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--t2); }

/* ── Announcements ─────────────────────────────────────────────────── */
.pf-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}