/* Blind-ID button. Two variants: light (W1, plum) and dark (L2, lavender).
   Size with --bh (button height). Everything scales from it. */
.blindid-btn {
  --bh: 52px;
  --plum: #4A2C5E;
  --lavender: #8E74A8;
  --butter: #F4D35E;
  --red: #D7263D;
  --bg: var(--plum);
  --fg: #FFFFFF;          /* label, person and lines */
  --split: var(--butter); /* vertical bar between ID panel and label */

  display: inline-flex;
  align-items: stretch;
  position: relative;
  height: var(--bh);
  padding: 0 calc(var(--bh) * 0.38) 0 0;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: var(--bg);
  color: var(--fg);
  font: 600 calc(var(--bh) * 0.31) / 1.15 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  overflow: visible;
}
.blindid-btn--dark { --bg: var(--lavender); --fg: var(--plum); --split: var(--butter); }

.blindid-btn, .blindid-btn * , .blindid-btn *::after { box-sizing: border-box; }

/* ID panel: a rectangle that starts at the sign's vertical midline. Its width is fixed from --bh and never flexes,
   so a stretched button (width: 100%) only widens the label area; sign, panel and split stay put on the left. */
.blindid-btn > .idp {
  position: relative;
  flex: 0 0 calc(var(--bh) * 1.62);
  width: calc(var(--bh) * 1.62);
  min-width: calc(var(--bh) * 1.62);
  max-width: calc(var(--bh) * 1.62);
  margin: 0;
  display: grid;
  align-items: center;
  justify-items: start;
  padding: 0 calc(var(--bh) * 0.14) 0 calc(var(--bh) * 0.52);
}
.blindid-btn .idp::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--split);
}
.blindid-btn .idp .inner { height: 58%; width: auto; display: block; }

/* The red sign: full button height, its left half is the button's left end. */
.blindid-btn .badge {
  position: absolute; left: calc(var(--bh) * -0.5); top: 50%;
  /* Square, said outright. The sign is drawn in a square viewBox, but an inline
     SVG with width:auto does not take its width from that: it came out 12px
     wider than tall at every size, which stretched the eye into an oval and put
     a pale halo to the right of it. Unmissable at 32px (owner, 2026-09-23). */
  height: var(--bh); width: var(--bh); transform: translateY(-50%); z-index: 1; display: block;
}
/* The label takes all remaining width. Centre it or leave it left-aligned; the left cluster is unaffected either way. */
.blindid-btn > .label { flex: 1 1 auto; min-width: 0; align-self: center; padding-left: calc(var(--bh) * 0.3); text-align: left; }
.blindid-btn--center > .label { text-align: center; padding-right: calc(var(--bh) * 1.32); } /* balances the panel so text centres on the button */

/* Two-line label: main text, then "by IRLProof.me" underneath. Add blindid-btn--sub and put the two spans inside .label.
   Works from 40px up; below that the second line has no room, so it is hidden automatically. */
.blindid-btn--sub { --by: #C9BBD6; --brand: var(--butter); }
.blindid-btn--sub.blindid-btn--dark { --by: rgba(74, 44, 94, 0.72); }
.blindid-btn--sub > .label { display: grid; gap: calc(var(--bh) * 0.03); line-height: 1.05; }
.blindid-btn--sub > .label .main { font-weight: 600; }
.blindid-btn--sub > .label .sub { font-size: max(0.66em, var(--submin, 10px)); font-weight: 400; color: var(--by); letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; } /* never below 10px (T1) */
.blindid-btn--sub > .label .sub .brand { font-weight: 600; color: var(--brand); }
.blindid-btn--sub > .label .sub .by { font-weight: 400; }
@container style(--bh: 24px), style(--bh: 32px) { .blindid-btn--sub > .label .sub { display: none; } }
.blindid-btn--sub.blindid-btn--sm > .label .sub { display: none; } /* set --sm on 24/32px buttons if your browser lacks style queries */

/* Right-aligned label (S4). */
.blindid-btn--right > .label { text-align: right; }
.blindid-btn--sub.blindid-btn--right > .label { justify-items: end; }

/* Full-width use: width:100% on the button, or a block wrapper. */
.blindid-btn--block { display: flex; width: calc(100% - var(--bh) * 0.5); }

/* Give the button room on its left for the sign's overhang. */
.blindid-btn { margin-left: calc(var(--bh) * 0.5); }

/* ---------------------------------------------------------------------------
   Added for the product (owner, 2026-09-17). The kit above is unchanged, so a
   new kit drops in over it.
   --------------------------------------------------------------------------- */
.blindid-btn:hover { filter: brightness(1.06); }
.blindid-btn:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; }
.blindid-btn:disabled { cursor: progress; opacity: .7; }

/* Follows the reader's theme where a page opts in, so one button works on a
   light site and a dark one without the site choosing. */
@media (prefers-color-scheme: dark) {
  .blindid-btn--auto { --bg: var(--lavender); --fg: var(--plum); --split: var(--butter); }
  .blindid-btn--auto.blindid-btn--sub { --by: rgba(74, 44, 94, 0.72); }
}

/* The button as a link. The kit styles a <button>; the WordPress plugin and
   anything else that needs an <a> gets the same result from here rather than
   carrying two rules of its own. */
a.blindid-btn { text-decoration: none; }
a.blindid-btn:hover, a.blindid-btn:focus { color: var(--fg); text-decoration: none; }

/* A sign-in button is never the width of a window (owner, 2026-09-23). The
   block modifier makes it fill its container, and on a wide page that produced
   a button the width of the screen. Every other provider's button has a
   maximum; this is ours, and it applies wherever the kit is used. */
.blindid-btn--block { max-width: 26rem; }