/* The tester card itself (RidgeWill/platform#56): drawn beside the form on
   /testers, and on the home page once it has been sent. Shared so the two are
   the same card, which is what lets the page change underneath it. Uses the
   site's colors (chrome.css and home.css define the same tokens). */
/* Stage chips, the home page's project chips at form size. */
.stage { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); white-space: nowrap; color: var(--ink); }
.stage i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--teal-ink); }
.stage.in-dev i { background: #f6c9a8; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dusk); }
.stage.alpha i { background: #b9c9f7; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--blue-600); }
/* The card, with saving state and what is left before it can be sent. */
.tcard { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(18, 48, 127, .12), 0 18px 50px -18px rgba(18, 48, 127, .4); }
.tcard-top { position: relative; color: #fff; padding: 20px 22px 18px; background: #26365a center 62% / cover no-repeat; }
.tcard-top::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18, 48, 127, .94) 0%, rgba(30, 79, 208, .82) 60%, rgba(30, 79, 208, .45) 100%); }
.tcard-top > * { position: relative; }
.tcard-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.saved { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .92; }
.saved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.saved.saving::before { background: #fff; animation: blink .8s ease-in-out infinite alternate; }
.saved:empty { display: none; }
@keyframes blink { to { opacity: .3; } }
.tcard-who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.tcard-who .rw-avatar, .tcard-who .tc-avatar { width: 44px; height: 44px; font-size: 18px; }
.tcard-who b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.tcard-who span.e { font-size: 13.5px; opacity: .92; }
.tcard dl { padding: 6px 22px 10px; }
.tcard dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.tcard dl > div:first-child { border-top: 0; }
.tcard dt { color: var(--ink-3); }
.tcard dd { color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.tcard dd.empty { color: var(--ink-3); font-weight: 400; }
.tcard dd .stage { margin: 0 6px 6px 0; }
.tcard dd .dev { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.tcard dd .dev + .dev { margin-top: 6px; }
.tcard dd .dev svg { color: var(--blue-700); width: 18px; height: 18px; flex: none; }
.tcard dd.pop { animation: pop .7s cubic-bezier(.16, 1, .3, 1); }
@keyframes pop { from { background: #e6faf8; } to { background: transparent; } }
.tcard-send { padding: 16px 22px 20px; background: var(--wash); border-top: 1px solid var(--line); }
.todo { list-style: none; display: grid; gap: 8px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.todo li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.todo li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--ink-3); }
.todo li.warn { color: #7a3f0c; }
.todo li.warn::before { background: #f6c9a8; box-shadow: 0 0 0 1px var(--dusk); }
.todo li.done { color: var(--teal-ink); font-weight: 600; }
.todo li.done::before { background: var(--teal); box-shadow: 0 0 0 1px var(--teal-ink); }
.tcard-send .btn { width: 100%; }
/* Not ready yet: still readable, clearly not pressable. */
.tcard-send .btn:disabled { background: var(--wash-2); color: var(--ink-3) !important; box-shadow: inset 0 0 0 1px var(--line-2); }
.saved.error::before { background: #f6a8a8; }
.sent-on { display: grid; gap: 2px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.sent-on b { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--teal-ink); }
.sent-on b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 1px var(--teal-ink); }
.todo:empty { display: none; }
.tcard-send .problem { margin-bottom: 14px; }
/* A question before something happens: no phone on a card, deleting it. */
.confirm { margin: auto; border: 0; border-radius: 14px; padding: 24px; max-width: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(16, 22, 38, .3); color: var(--ink); }
.confirm::backdrop { background: rgba(16, 22, 38, .45); }
.confirm h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; }
.confirm p { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin: 0 0 20px; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* The home page has no .rw-avatar (that is chrome.css). */
.tc-avatar { border-radius: 50%; overflow: hidden; position: relative; background: var(--teal); color: var(--ink); display: grid; place-items: center; font-weight: 800; flex: none; }
.tc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Edit and Delete, where the form has Send (the account portal's layout). */
.tcard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcard-actions .btn { width: 100%; justify-content: center; }
.btn.danger { color: #b3261e !important; border-color: #e7b5b1; }
.btn.danger:hover { border-color: #b3261e; }
.confirm .btn.danger:not(.ghost) { background: #b3261e; color: #fff !important; border: 0; }
.confirm .btn.danger:not(.ghost):hover { background: #8f1d17; }
.confirm .problem { background: #fdecec; border-left: 3px solid #c62828; border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 14px; color: #8e1b1b; }

/* Sending hands the card to the home page (Jon, 2026-10-25): the rest of the
   form dims, the page changes underneath, and the card lands below the
   projects. Browsers with cross-document view transitions move it there;
   the rest simply open the home page with the card already in place. */
@view-transition { navigation: auto; }
.tcard { view-transition-name: tester-card; }
::view-transition-group(tester-card) { animation-duration: .7s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
/* The dim: one sheet over the page, with the card's own host lifted above
   it. On the home page every section is its own layer (the iOS paint fix),
   so the card cannot rise out of its section: the section rises instead and
   dims itself behind the card with the same shade. */
.handoff-dim { position: fixed; inset: 0; z-index: 55; background: rgba(10, 16, 30, .55); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.handoff-dim.on { opacity: 1; }
/* Only the z-index: on /testers the host is the sticky sidebar, and making it
   relative here would scroll the card away. */
.handing-off .tcard-host { z-index: 56; }
.handing-off main > section.apps { z-index: 56; }
main > section.apps::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(10, 16, 30, .55); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.handing-off.dimmed main > section.apps::after { opacity: 1; }
main > section.apps .tcard-host { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .handoff-dim { transition: none; }
}