/* My connections — the tenant BYOK dialog, owned by services/connections
   (pass 50 self-containment).

   REPAINTED 2026-08-13 on the founder's colour ruling ("the screens are still
   following the old supa colors, so anywhere those appear, we need to update
   them as per the new branding language"). Until today this file was BRAND.md
   §10's first row: the pass-214 reading-paced dialect, left loud on purpose
   pending exactly that call. What went, device by device: 1.5px ink borders,
   the two hard 4px 4px 0 yellow offsets (the panel's and the dialog card's),
   the --warm hovers, the rgba soft-red glow, the 900 headings and uppercase
   800/850 micro-stamps, the 3px soft-red focus rings §5 bans, and the per-row
   entrance stagger §6 bans. What replaced them is §§2-6: hairline cards, one
   flat #fdeceb tint, Inter 400/500 in sentence case, an ink focus ring, and
   nothing that enters.

   Scope note: the category tiles reuse the host shelf's `.tile` class so the
   grid stays visually one surface — only `.conn-tile`'s count line is styled
   here. Everything below the tiles is this service's own. (Neither class has a
   live consumer today: my-connections.js renders panels into the host's grid.)

   TOKENS ARE SERVED, NOT COPIED (founder, 2026-08-20, ruling 1 — "Serve the
   values"). This file used to read the host's :root through 117 literal
   fallbacks — `var(--muted, #5f6368)` — so it would also render standalone.
   That was 117 more copies of BRAND §2 in one file than the estate now keeps
   anywhere, and standalone is what /shell/tokens.css is for: both hosts
   (apps/launcher/ui/index.html, apps/supasales/ui/index.html) link it above
   this sheet, and it publishes every name read below — --ink, --tomato,
   --tomato-dark, --white, --hairline, --box, --wash, --fill, --muted, --faint
   — plus the --lift/--ring/--scrim ink cues this file used to spell as raw
   rgba. The FACE changed name with it: there is no bare --sans in the sheet
   (ruling 3 publishes the homepage face as --font), so the three callers that
   said `var(--sans, …)` now say `var(--font)` and stop leaning on a name no
   host declares any more. --yellow and --warm are still not read at all: §2
   retires a token rather than repointing it at a neutral. */

.conn-tile em.count { color: var(--muted); }

/* ══ the surface: a preferred shelf, then one disclosure ═══════════════════
   Ported from the founder-approved prototype at projects/connections-v2/.
   The host hands this service a grid element laid out for tiles; the surface
   inside it is a stack of panels. The class is doubled on purpose — the host's
   own `.grid` rule is declared after this stylesheet is linked, so an equal
   specificity would lose to it. */
.conn-surface.conn-surface { display: block; }

/* A §4 card: 1px hairline, 16px radius, white, no shadow at rest. It used to
   carry this view's single hard 4px yellow offset. */
.conn-panel {
  padding: 6px 22px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--white);
}
/* §6, near-static: the rows are simply there. The 85ms-per-row entrance they
   used to arrive on is gone along with its keyframes; my-connections.js still
   writes a `--d` custom property nothing reads, which is one line for whoever
   next opens that file. */

/* The category a preferred row came from, never lost. */
.conn-copy .conn-cat {
  display: block;
  margin-top: 0;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.conn-opt.is-live .conn-cat { color: var(--muted); }

/* Two actions where a row used to have one, without breaking its 2-col grid. */
.conn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conn-acts[hidden] { display: none; }
.conn-add.ghost { border-color: var(--box); color: var(--muted); font-weight: 500; }
.conn-add.ghost:hover { border-color: var(--box); color: var(--ink); background: var(--wash); }
/* THE one tomato on this surface (§2): the pill that connects an account. */
.conn-add.go { border: 0; background: var(--tomato); color: var(--white); }
.conn-add.go:hover { background: var(--tomato-dark); color: var(--white); }

/* More connections — a disclosure, closed by default. */
.more-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin-top: 26px;
  padding: 13px 20px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--white);
  color: inherit;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.more-toggle:hover { background: var(--wash); border-color: var(--box); }
.more-toggle .chev { margin-left: auto; color: var(--faint); font-size: 13px; transition: transform .2s ease; }
.more-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.more-toggle em { font-style: normal; color: var(--muted); font-weight: 400; font-size: 13px; }
.more-body { display: grid; gap: 16px; margin-top: 16px; }
.more-body[hidden] { display: none; }
.more-group {
  padding: 2px 20px 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--white);
}
.conn-group-head {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

/* The live check: indeterminate on purpose (§8) — a pulsing dot, not a bar.
   §6 keeps this one: it reports a read that is genuinely in flight. */
.conn-check {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}
.conn-check i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--faint);
  animation: conn-pulse 1.05s ease-in-out infinite;
}
.conn-check[hidden] { display: none; }
@keyframes conn-pulse { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
/* The provider's own verified sentence is longer than a tick. It wraps, and it
   is capped, so a talkative provider cannot squeeze the connection's own name
   out of the row it belongs to. */
.conn-opt .state.ok.wide { white-space: normal; max-width: 34ch; text-align: right; }
/* Saved-but-unchecked: the one line that says what we could not do. */
.conn-note { grid-column: 1 / -1; margin: 7px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.5; }
/* A note the CATEGORY owns — it sits under the group head, above the rows, and
   reads as prose rather than as a row's own muted sub. */
.conn-cat-note { margin: 8px 0 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* The popup card. A §4 card at dialog scale: hairline, 16px radius, white, and
   --lift instead of the hard 4px yellow offset it used to stand on. */
dialog.conn {
  width: min(560px, calc(100vw - 32px));
  max-height: 86vh;
  margin: auto;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(22px, 4vw, 30px);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--lift);
  font-family: var(--font);
}
dialog.conn::backdrop { background: var(--scrim); }
dialog.conn h3 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 500;
}
.conn-lead { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.conn-lead:empty { display: none; }

/* A connection is a row, not a card: the name, a muted sub, state at the end. */
.conn-opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}
.conn-opt:last-of-type { border-bottom: 0; }
.conn-opt.is-pending {
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: 12px;
  background: var(--wash);
}
.conn-opt b { display: block; font-size: 15px; font-weight: 500; }
.conn-opt em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--muted); }
.conn-opt .state { font-size: 13px; font-weight: 500; white-space: nowrap; letter-spacing: 0; }
/* Connected is a settled fact, not the thing the eye should find — §2 spends
   the accent once, and on this surface it is spent on the connect pill. */
.conn-opt .state.ok { color: var(--muted); }
.conn-opt .state.soon { color: var(--muted); font-size: 13px; letter-spacing: 0; }
/* A failed save says why, in the row that failed (pass 210). Tomato at rest
   means invalid and only that (§2), which is exactly what this is. */
.conn-opt .state.err { color: var(--tomato-dark); white-space: normal; font-weight: 500; }

/* The read's verdict when it is not a clean success (pass 210): shown above the
   grid, so "signed out" and "could not reach us" never read as "0 connected". */
.conn-status { min-height: 24px; margin: 12px 0; color: var(--muted); font-size: 13px; font-weight: 400; }
.conn-status[hidden] { display: none; }

/* WhatsApp is the one keyless row: it carries its beta label in the name, and
   its state and action sit together at the end of the row. A §5 calm chip —
   --muted on --fill — where it used to be a 900 uppercase stamp on yellow. */
.conn-copy .conn-beta {
  display: inline;
  margin-top: 0;
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 1px;
}
.conn-end { display: flex; align-items: center; gap: 10px; }

/* The scan panel. The risk note reads first, once — it is not fine print. */
.wa-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--wash);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.wa-say { margin: 0 0 12px; font-size: 15px; font-weight: 500; }
.wa-how { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

/* The number picker's exposed filter (2026-08-20): a leading-digits pattern.
   India, local and voice are fixed by the product at the server. Same 44px /
   12px-radius / --box input as §5's. */
.conn-find { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.conn-find-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}
.conn-find-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--box);
  border-radius: 12px;
  font: 400 14px var(--font);
}
.conn-find-input:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
/* An empty result is a sentence in the list's own place, never a missing list. */
.conn-empty { margin: 14px 0 4px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.wa-code { display: flex; justify-content: center; }
.wa-code[hidden] { display: none; }
.wa-qr {
  width: min(248px, 68vw);
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--white);
  image-rendering: pixelated;
}
.wa-row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* §5's primary button, verbatim: a 999px tomato pill, border 0, weight 500,
   44px tall, no shadow at any depth. */
.wa-go {
  min-height: 44px;
  padding: 11px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--tomato);
  color: var(--white);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease;
}
.wa-go:hover { background: var(--tomato-dark); }

/* §5's secondary button: 1px --line on white, ink text, --wash on hover. */
.conn-add {
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--white);
  color: inherit;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.conn-add:hover { border-color: var(--box); background: var(--wash); color: var(--ink); }
.conn-add[aria-pressed="true"] { border-color: var(--ink); background: var(--wash); }
.conn-add:disabled { cursor: wait; opacity: .62; }

.conn-opt form { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
.conn-opt form[hidden] { display: none; }
/* §5's input: 1px --box, radius 12px, and a focus that takes an ink border plus
   --ring. A focused field never turns tomato. */
.conn-opt input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--box);
  border-radius: 12px;
  font: 400 14px var(--font);
}
.conn-opt input:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.conn-opt form button {
  min-height: 44px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--tomato);
  color: var(--white);
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  cursor: pointer;
}
.conn-opt form button:hover { background: var(--tomato-dark); }

.conn-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.conn-close {
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--white);
  color: inherit;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.conn-close:hover { background: var(--wash); border-color: var(--box); }

/* §5: 2px ink, offset 2 — never a 3px soft-red ring, which reads as an error on
   every tab press. */
dialog.conn button:focus-visible,
dialog.conn input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ══ the walkthrough ("Learn how →") ═══════════════════════════════════════
   The service's own dialog card, one class wider, holding the five stylized
   console screens from conn-guides.js. Everything below is a CSS recreation of
   a provider's UI and is drawn to look like a recreation — a page that could
   pass for a screenshot would start lying the day the provider redesigns. */
dialog.conn.guide { width: min(720px, calc(100vw - 28px)); }
dialog.conn .guide-title { margin: 0 0 4px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; font-weight: 500; }

.guide-steps { position: relative; }
.guide-steps > input { position: absolute; opacity: 0; pointer-events: none; }
.guide-rail { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 16px; }
.guide-rail label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.guide-rail label:hover { border-color: var(--box); background: var(--wash); color: var(--ink); }
.guide-rail label b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fill); color: var(--muted); font-size: 11px; font-weight: 500; }
.pane { display: none; }
.pane-head { margin: 0 0 4px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.pane-sub { margin: 0 0 13px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.pane-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 15px; }
.pane-foot .grow { margin-left: auto; }
/* The chosen step reads as an ink ring on --fill, not a filled tomato pill —
   §5's chosen-chip rule, so the one press that does something stays the only
   red thing in the card. */
#gs1:checked ~ .guide-rail label[for="gs1"],
#gs2:checked ~ .guide-rail label[for="gs2"],
#gs3:checked ~ .guide-rail label[for="gs3"],
#gs4:checked ~ .guide-rail label[for="gs4"],
#gs5:checked ~ .guide-rail label[for="gs5"] { border-color: var(--ink); background: var(--fill); color: var(--ink); }
#gs1:checked ~ .guide-rail label[for="gs1"] b,
#gs2:checked ~ .guide-rail label[for="gs2"] b,
#gs3:checked ~ .guide-rail label[for="gs3"] b,
#gs4:checked ~ .guide-rail label[for="gs4"] b,
#gs5:checked ~ .guide-rail label[for="gs5"] b { background: var(--ink); color: var(--white); }
/* §6 allows a short crossfade on a state change; it does not allow the 10px
   slide this used to enter on. */
#gs1:checked ~ .panes .pane-1,
#gs2:checked ~ .panes .pane-2,
#gs3:checked ~ .panes .pane-3,
#gs4:checked ~ .panes .pane-4,
#gs5:checked ~ .panes .pane-5 { display: block; animation: conn-pane-in .2s ease both; }
@keyframes conn-pane-in { from { opacity: 0; } to { opacity: 1; } }

/* Stylized console recreation — CSS only, deliberately not a screenshot. */
.scr { border: 1px solid var(--hairline); border-radius: 13px; overflow: hidden; background: var(--white); }
.scr-bar { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: var(--wash); border-bottom: 1px solid var(--hairline); }
.scr-dots { display: flex; gap: 5px; }
.scr-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--box); }
.scr-url {
  flex: 1;
  padding: 4px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font: 400 11px ui-monospace, "SF Mono", Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scr-body { display: grid; grid-template-columns: 118px 1fr; min-height: 196px; }
.scr-body.one-col { grid-template-columns: 1fr; }
.scr-side { padding: 11px 9px; border-right: 1px solid var(--hairline); background: var(--wash); display: grid; gap: 5px; align-content: start; }
.scr-side .brandline { margin-bottom: 5px; color: var(--faint); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.scr-nav { padding: 5px 9px; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 400; }
.scr-nav.on { background: var(--fill); color: var(--ink); }
.scr-main { padding: 15px 16px; display: grid; gap: 11px; align-content: start; }
.scr-main.centered { place-content: center; justify-items: center; }
.scr-h { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.scr-card { padding: 12px 13px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--white); display: grid; gap: 9px; }
.scr-card.narrow { width: min(300px, 100%); }
.scr-field { padding: 8px 10px; border: 1px solid var(--box); border-radius: 8px; background: var(--wash); color: var(--muted); font-size: 11px; font-weight: 400; }
/* The recreation's own primary button — a drawing of the provider's, so it
   takes a neutral ink pill rather than spending our accent inside a picture. */
.scr-btn { justify-self: start; padding: 7px 15px; border-radius: 8px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.scr-btn.tight { padding: 5px 11px; }
.cred { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--hairline); border-radius: 9px; background: var(--wash); }
.cred span.lab { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.cred code { font: 500 11.5px ui-monospace, "SF Mono", Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred .revealbtn { padding: 4px 11px; border: 1px solid var(--box); border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.cred .revealbtn:hover { border-color: var(--ink); color: var(--ink); }
.tok-real { display: none; }
.pane-2 > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
#tokShow:checked ~ .scr .tok-mask { display: none; }
#tokShow:checked ~ .scr .tok-real { display: block; }
.revealbtn .show-off { display: none; }
#tokShow:checked ~ .scr .revealbtn .show-on { display: none; }
#tokShow:checked ~ .scr .revealbtn .show-off { display: inline; }
.numrow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 11px; border: 1px solid var(--hairline); border-radius: 9px; font-size: 11px; font-weight: 400; }
.numrow em { font-style: normal; color: var(--muted); font-weight: 400; }
.numrow.picked { border-color: var(--ink); background: var(--fill); }
.verified { padding: 3px 10px; border-radius: 999px; background: var(--fill); color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.jsonblock {
  padding: 13px 15px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--wash);
  font: 400 12px/1.7 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre;
  overflow-x: auto;
}
.jsonblock .k { color: var(--muted); }
/* Every recreation names itself, on every screen. */
.stylenote { margin-top: 10px; color: var(--muted); font-size: 11px; font-weight: 400; }

@media (max-width: 640px) {
  .conn-opt { grid-template-columns: 1fr; align-items: start; }
  .conn-opt .state, .conn-add, .conn-end { justify-self: start; }
  .conn-panel { padding: 4px 16px; }
  .more-group { padding: 2px 15px 10px; }
  .scr-body { grid-template-columns: 1fr; }
  .scr-side { display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .cred { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .conn-add, .conn-opt form button, .conn-close, .wa-go, .more-toggle, .guide-rail label { transition: none; }
  .conn-check i { animation: none; opacity: 1; }
  .pane { animation: none !important; }
  .more-toggle .chev { transition: none; }
}