/*
 * lms-verify.css — builder-apps-certs
 *
 * The public /verify page and the admin applications status tabs. Colours
 * and easing pull from the project's own tokens (public/assets/css/app.css)
 * — --navy, --bg3, --line, --mut, --ease — rather than the motion library's
 * source palette.
 */

/* ── (D-055) verify on the auth split shell ───────────────────────────────
   The page joined the lms-login family, whose form column is 400px wide —
   right for a two-field sign-in, too narrow for a result card carrying seven
   label/value rows. The widening is scoped to this screen and lives here, in
   the screen's own stylesheet, rather than in lms-login.css, which four other
   auth screens share and none of them wants it. This file is linked AFTER
   lms-login.css so the override lands without an !important. */
.lgn__form--wide { width: min(560px, 100%); }
/* Spacing that used to be inline `style=` on the result wrapper and hint. */
.vf-result { margin-block-start: 22px; }
.vf-rows { display: grid; gap: 11px; font-size: .97rem; }
.vf-card .vf-hint { margin-block-end: 13px; }
.note--err .vf-hint { font-size: .92rem; margin-block-start: 5px; }

/* ── verify: evervault-style decrypt card wrapping the result ─────────── */
.vf-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border);
  padding: 22px;
  isolation: isolate;
}
.vf-card__glyphs {
  position: absolute;
  inset: 0;
  font-family: var(--ff-m, monospace);
  font-size: 11px;
  line-height: 1.35;
  color: var(--brand);
  opacity: 0;
  white-space: pre;
  padding: 10px;
  pointer-events: none;
  user-select: none;
  transition: opacity .25s var(--ease);
  mask-image: radial-gradient(220px circle at var(--vf-x, 50%) var(--vf-y, 50%), #fff, transparent 70%);
  -webkit-mask-image: radial-gradient(220px circle at var(--vf-x, 50%) var(--vf-y, 50%), #fff, transparent 70%);
}
.vf-card:hover .vf-card__glyphs,
.vf-card:focus-within .vf-card__glyphs { opacity: .55; }
.vf-card__body { position: relative; z-index: 1; }

.vf-card--ok { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 35%, transparent); }
.vf-card--revoked { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 40%, transparent); }
.vf-card--err { box-shadow: inset 0 0 0 1px var(--border); }

.vf-status {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.05rem; font-weight: 700; margin-block-end: 14px;
}
.vf-status i { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; }
.vf-status--ok { color: var(--ok); }
.vf-status--revoked { color: var(--danger); }

/* the decoded holder name — scramble target */
.vf-name {
  font-family: var(--ff-m, monospace);
  font-weight: 700;
  letter-spacing: .01em;
}

.vf-hint { font-size: .92rem; color: var(--text-muted); margin-block-start: 6px; }

@media (prefers-reduced-motion: reduce) {
  .vf-card__glyphs { display: none; }
}

/* ── admin applications: the list card ─────────────────────────────────
   The card used to be one wrapping flex row holding the applicant's
   details and the action buttons side by side. Because the details block
   is as wide as its tag list, a card with four tags wrapped its buttons
   onto their own line while a card with two kept them level with the
   name — so no two cards in the list put their actions in the same place,
   and the eye had to hunt for the primary button on every row. Stacking
   them, with a hairline between, gives every card one shape. */
.appcard__body { display: grid; gap: 14px; }
.appcard__actions {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--border);
  /* positioning context for .appcard__popover — see the note on that rule */
  position: relative;
}

/* (responsive sweep R9) The follow-up note popover used to be an inline
   style anchored to the <details> that opens it, and that element sits
   mid-row in a wrapping action bar: at 360px its fixed 280px box overhung
   the card's inline edge by up to 12.8px. Invisible, too, because
   html{overflow-x:clip} amputates the overflow instead of scrolling to it.
   Anchoring to the ACTIONS ROW instead of to the <details> is what fixes it
   — `max-width:100%` then resolves against a box that is always inside the
   card, whatever the row happened to wrap to. */
.appcard__popover {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 6px);
  z-index: 5;
  width: 280px;
  max-width: 100%;
  padding: 12px;
  background: var(--surface-1);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border);
}

/* ── admin applications: animated tabs with sliding highlight pill ────── */
.atabs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  /* QA #8: six status tabs measured clientWidth 299 / scrollWidth 518 at
     375px, with the active one cut in half at the edge and no cue that
     anything lay beyond it. The strip scrolls inside its own box, the
     symmetric edge-fade is the cue (direction-agnostic, so no [dir]
     branch), and lms-verify.js scrolls the active tab to the centre. */
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.atabs::-webkit-scrollbar { display: none; }
.atabs__pill {
  position: absolute;
  top: 4px; bottom: 4px;
  /* window.lmsMovePill writes the active tab's PHYSICAL offsetLeft here,
     so `left` — not `transform` — is the property that moves and the one
     that has to carry the transition. */
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--brand);
  transition: left .35s var(--ease), width .35s var(--ease);
  z-index: 0;
}
.atabs a {
  position: relative;
  z-index: 1;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: center;
  flex: 0 0 auto;
  transition: color .25s var(--ease);
}
.atabs a.on { color: #fff; }
.atabs .cnt {
  display: inline-block; margin-inline-start: 6px; font-size: 11.5px;
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .atabs__pill { transition: none; }
}