/* ══════════════════════════════════════════════════════════════
   Meetback — share-hub
   Transcribed from design-system/products/meetback/assets/share-hub.html.

   THIS SCREEN IS DARK, and it is the only one that is. That is the reference's
   decision, not a builder's: the QR card is a white panel and the surround is
   near-black so the code is the brightest thing on the screen. In a hall, at a
   glance, that contrast is the feature. tokens.css already carries the dark
   ramp (--dk-*) for exactly this screen; the local names below map onto it so
   the reference's rules read the same as the reference.

   The shell (#app + #nav) is a fixed-height flex column, so this screen owns a
   scroller of its own rather than scrolling the page — the same arrangement
   cards-home uses.
   ══════════════════════════════════════════════════════════════ */

.share-hub {
  --sh-bg: var(--dk-bg);
  --sh-surface: var(--dk-surface);
  --sh-line: var(--dk-line);
  --sh-text: var(--dk-text);
  --sh-muted: var(--dk-muted);
  --sh-faint: #6b7180;

  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sh-bg);
  color: var(--sh-text);
}

/* ── Q42, DIRECTION A — THE PRESENTER ────────────────────────────────────
   Owner, 2026-08-08: "the code takes the optical centre and everything else goes
   to the bottom edge."

   Three bands, and the middle one is the whole direction: the top row is its own
   height, the FOOT is its own height, and the stage takes everything left over
   with the code centred in it. The code therefore grows on a tall phone instead
   of leaving a band of nothing under it, which is the same lesson Q38 taught on
   the wallet.

   ⚠ AND THE TAB BAR IS GONE FROM THIS SCREEN, cleared by share-hub.js. The
   bottom padding is the safe area itself now, not a gap left for chrome that is
   no longer there. */
.sh-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 0 clamp(18px, 5vw, 26px) calc(10px + var(--sab, 0px));
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}

/* ── the top row ──
   Close, the switcher, and a spacer the same width as Close so the switcher sits
   on the TRUE centre rather than being pushed right by the button beside it. */
/* `position: relative` for the menu below, and a layer of its own so an open
   switcher paints over the stage rather than under the QR card — measured: as a
   plain sibling the menu was laid out beneath the stage and the card intercepted
   every click on it, so the switcher opened and could not be used. */
.sh-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding-top: var(--sat, 0px);
  position: relative; z-index: 6;
}
.sh-x, .sh-x-spacer { width: 40px; height: 40px; flex: 0 0 40px; }
.sh-x {
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--sh-surface); color: var(--sh-text); cursor: pointer;
}
.sh-x svg { width: 18px; height: 18px; }

/* ── the stage ──
   THE OPTICAL CENTRE, NOT THE GEOMETRIC ONE. A shape centred by arithmetic in a
   tall column reads as sitting low, because the eye weights the space above more
   than the space below. The foot below carries real content and the top row does
   not, so the code is nudged up by the small margin below rather than by a magic
   translate — same effect, and it survives a foot that changes height. */
/* ⚠ THE NUMBER WAS TUNED AGAINST A MEASUREMENT, NOT PICKED. At 4% the code's
   centre landed at 54% of the room between the top row and the foot — BELOW the
   arithmetic middle, because the stage begins under a top row that the eye reads
   as almost empty. Padding here lifts the centre by half its own height, so it
   takes roughly twice the shortfall. Measured after: 48.7% on both the SE and
   the Pro Max. tests/viewport/share-hub-presenter.test.mjs holds the number. */
.sh-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 15%;
}

.sh-loading { padding: 40px 0; color: var(--sh-muted); font-size: 14px; text-align: center; }

/* ── card switcher ─────────────────────────────────────────── */
.sh-switch {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: calc(12px + var(--sat, 0px)) 0 4px;
  width: 100%; background: none; border: 0; color: inherit;
  font: inherit; cursor: pointer;
}
.sh-switch[disabled] { cursor: default; }
.sh-switch .av {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--sh-line);
  display: grid; place-items: center; background: var(--sh-surface);
}
.sh-switch .av img { width: 100%; height: 100%; object-fit: cover; }
.sh-switch .nm { font-family: var(--font-display, 'Fraunces', serif); font-weight: 700; font-size: 16px; }
.sh-switch .cx { color: var(--sh-faint); font-size: 12px; }
.sh-initial { font-size: 12px; font-weight: 700; color: var(--sh-muted); }

/* ⚠ IT FLOATS NOW, AND IT HAS TO. Under the old single-column layout the menu
   was an ordinary flow item under the switcher. Q42's stage takes all the room
   left over and centres the code in it, so a menu in flow either pushes the code
   down as it opens or — measured — is laid out UNDER the stage, where the QR card
   intercepts every click on it and the switcher becomes unusable. Taken out of
   flow and given a layer, so opening it changes nothing about where the code is. */
.sh-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 4px; width: min(320px, 100%);
  background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
}
.sh-menu[hidden] { display: none; }
.sh-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px; background: none; border: 0; border-bottom: 1px solid var(--sh-line);
  color: var(--sh-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.sh-menu-item:last-child { border-bottom: 0; }
/* Q24 — the same rule as the public card, and the measurement that shows why
   it is a rule rather than a preference about light sheets. This surface is
   DARK (--sh-surface, the --dk-surface token), so the accent fails here in the
   OPPOSITE direction: the DEFAULT accent sits at 3.54:1 on it, below AA for a
   14px row, while the pale yellow that ruins the public card reads 11.12:1. One
   variable, two surfaces, two different ways to be illegible — which is the
   argument for text taking its own surface's ink and never the card's accent.
   Selection is carried by WEIGHT instead, so it does not depend on colour at
   all; aria-selected already carries it to assistive tech. */
.sh-menu-item[aria-selected="true"] { color: var(--sh-text); font-weight: 800; }

/* ── the QR card ───────────────────────────────────────────── */
/* Larger, because it is the one thing on the stage. The cap rises with the
   screen instead of being pinned at 320 — on a 932pt phone the old card left the
   space Q38 was about, one screen over. */
.qr-card {
  margin: 0 auto; width: 100%; max-width: min(360px, 78vw);
  background: var(--surface); border-radius: 26px; padding: 22px 22px 18px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .7);
}
.qr-id { display: flex; align-items: center; gap: 10px; align-self: stretch; margin-bottom: 16px; }
.qr-id .av {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 2px #eef0f4; display: grid; place-items: center; background: #eef0f4;
}
.qr-id .av img { width: 100%; height: 100%; object-fit: cover; }
.qr-id .av .sh-initial { color: var(--sh-faint); }
.qr-id .t { line-height: 1.15; min-width: 0; }
.qr-id .nm { font-family: var(--font-display, 'Fraunces', serif); font-weight: 700; font-size: 15px; color: var(--slate-900); }
.qr-id .ro { font-size: 11.5px; color: var(--sh-faint); }

.qr-frame { width: 100%; aspect-ratio: 1; color: var(--slate-900); display: grid; place-items: center; position: relative; }
/* qr.js emits a bare <svg> with no class, so this targets the element rather
   than the reference's `.qr` hook — the shape is the same, the selector is what
   the generator actually produces. */
.qr-frame svg { width: 100%; height: 100%; }
.qr-none { font-size: 12.5px; color: var(--sh-faint); text-align: center; padding: 0 12px; }
.qr-seal {
  position: absolute; width: 19%; aspect-ratio: 1; background: var(--surface); border-radius: 10px;
  display: grid; place-items: center; box-shadow: 0 0 0 5px #fff;
}
.qr-seal svg { width: 72%; height: 72%; color: var(--profile); }
.qr-cap { margin-top: 14px; font-size: 12.5px; color: var(--sh-faint); font-weight: 600; }

/* ── link row ──────────────────────────────────────────────── */
/* ⚠ NOT A BOX ANY MORE. Owner: "the link stops being a boxed input and becomes a
   quiet line with a small copy control." The surface, the border and the radius
   are gone — what is left is the text and a control that does not announce
   itself. A read-only address dressed as a field invites an edit that cannot
   happen. */
.sh-link {
  margin: 0; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; border-radius: 0;
  padding: 0 2px;
}
.sh-link .u {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--sh-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Small, and quiet with it — the accent was doing the work of a primary action
   on a control that copies a string. */
.sh-link .copy {
  width: 32px; height: 32px; border-radius: 10px; background: var(--sh-surface);
  display: grid; place-items: center; border: none; cursor: pointer; flex-shrink: 0;
}
.sh-link .copy svg { width: 16px; height: 16px; color: var(--sh-text); }

.sh-msg { margin: 10px 2px 0; min-height: 1em; font-size: 12.5px; color: var(--sh-muted); }

/* ── channels ──────────────────────────────────────────────── */
/* ⚠ FOUR UNLABELLED CIRCLES. The owner's own words for direction A. The name is
   the accessible name and lives in the markup only — see the note there for why
   a visually-hidden span would be worse than none. */
.sh-channels {
  margin: 16px 0 0; display: flex; justify-content: center;
  gap: clamp(14px, 6vw, 28px);
}
.sh-channels .ch {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: grid; place-items: center;
  padding: 0; background: var(--sh-surface); border: 1px solid var(--sh-line);
  border-radius: 50%; cursor: pointer; transition: .15s; font: inherit;
}
.sh-channels .ch:hover { background: var(--slate-800); }
.sh-channels .ic { width: 24px; height: 24px; color: var(--sh-text); }
.sh-channels .ic svg { width: 100%; height: 100%; }


/* ── action rows ───────────────────────────────────────────── */
/* ── the foot ──
   Everything that is not the code, at the bottom edge. It is its own height, so
   the stage above takes whatever is left. */
.sh-foot { flex: 0 0 auto; padding-top: 8px; }

.sh-rows { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.sh-rows .row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: 16px;
  padding: 15px 16px; cursor: pointer; color: var(--sh-text); font: inherit; text-align: left;
}
.sh-rows .ic {
  width: 40px; height: 40px; border-radius: 11px; background: var(--slate-800);
  display: grid; place-items: center; color: var(--sh-text); flex-shrink: 0;
}
.sh-rows .ic svg { width: 20px; height: 20px; }
.sh-rows .t { flex: 1; font-size: 15px; font-weight: 600; }
.sh-rows .soon {
  font-size: 11px; font-weight: 700; color: var(--sh-faint); background: var(--slate-800);
  border: 1px solid var(--sh-line); border-radius: 100px; padding: 4px 11px;
}
.sh-rows .row.is-soon { opacity: .6; }
.sh-rows .chev { color: var(--sh-faint); display: grid; place-items: center; }
.sh-rows .chev svg { width: 18px; height: 18px; }



/* A disabled control must LOOK disabled — an inert button at full contrast is
   the same complaint as the v19 row that read as a status. */
.share-hub button[disabled] { opacity: .45; cursor: default; }
.share-hub button[disabled]:hover { background: var(--sh-surface); }

.share-hub button:focus-visible { outline: 2px solid var(--profile); outline-offset: 3px; border-radius: 12px; }

/* Q7 — the share hub is one dark surface; both bands continue it. Declared
   here, beside the styles they must match, keyed off the rendered DOM. --dk-bg
   rather than --sh-bg because body:has() computes at BODY, where a variable
   scoped to .share-hub does not resolve. */
body:has([data-screen="share-hub"]) { background: var(--dk-bg); }
[data-screen="share-hub"] { --edge-top: var(--dk-bg); }