/* Attendee badge (nameplate) live preview (/profile). Loaded only there --
   see TicketLayout. Built over the owner-supplied artwork asset
   (badge-bg.webp -- see Web/Public/ticket/badge/); every position below is
   measured from that asset's own pixel geometry (the "Roku" example card,
   which shows the icon/text at their real intended positions -- the blank
   template cards' placeholder circle is only a rough guide), not guessed. */

/* ---- mobile layout: preview stacked below the form --------------------- */

/* Below the 768px grid breakpoint (the @media block below), .profile-main-
   grid's children (#profile-form, then #profile-badge-preview --
   ProfilePage.swift) are just two ordinary block boxes with no gap of their
   own, so the preview card sat right against the Save button above it. A
   clear break, bigger than #661's 28px field rhythm (that's a rhythm
   *within* the form; this is a break between the form and an unrelated
   card) but built from the same unit. Overridden back to 0 inside that
   @media block, where the grid's own 24px `gap` already separates the two
   columns. */
#profile-badge-preview {
  margin-top: 56px; /* 2 * 28px */
}

/* .profile-main-grid wraps #profile-form and #profile-badge-preview
   (ProfilePage.swift). Single column (preview below the form) until there
   is room for a side-by-side layout without squeezing the form fields. */
@media (min-width: 768px) {
  .profile-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    align-items: start;
    gap: 24px;
  }

  #profile-badge-preview {
    margin-top: 0;
    position: sticky;
    /* Clears app.css's fixed .topbar (--site-header-height, 0px once it
       goes position: static below 960px -- see app.css) plus a 16px gap,
       matching --page-gutter's spirit without a token for it. Previously
       just `16px`, which put the sticky card *under* the topbar (z-index
       20) once scrolled -- the topbar visibly ate into it. */
    top: calc(var(--site-header-height, 0px) + 16px);
    /* Stays below the fixed topbar (z-index: 20, app.css) and above
       ordinary content. */
    z-index: 10;
    /* Never taller than the viewport once stuck, so a short window can't
       clip its bottom off-screen -- the same 16px gap mirrored below. */
    max-height: calc(100vh - var(--site-header-height, 0px) - 32px);
    overflow-y: auto;
  }
}

.badge-preview-card {
  position: relative;
  width: min(100%, 300px);
  margin: 0 auto;
  aspect-ratio: 862 / 1379; /* the extracted background asset's own ratio */
  border-radius: 6% / 4%;
  overflow: hidden;
  background: #633590; /* the purple band's own colour, as a fallback before JS sets the role colour */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  container-type: inline-size; /* so the text below can scale in cqw */
}

.badge-preview-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The asset's bottom ~13.5% is transparent -- the card's own
     background-color (set inline per role, see profile-badge.js) shows
     through it. */
}

/* Covers the artwork's baked-in "April 12 - 14, 2026" (last year's dates)
   with this year's, in roughly the same position/style. Sized generously
   (not just the date line's own height) to also cover a cherry-blossom
   petal decoration that sits just below it in the artwork -- left
   uncovered, its top sliver peeks out under a tighter patch. Delete this
   once 2027 artwork exists -- see this file's top doc comment.
   Re-measured 2026-09-25 against the 300dpi render (name_badge_2026.pdf ->
   hi-1.png, 1024px-tall card coordinate space): "TOKYO"'s glyphs
   (including their white outline) end at y=227, fully faded out by
   y~232 -- the old `top: 21.5%` (y=220) started 7-12px *above* that and
   was clipping TOKYO's own bottom edge, nearly invisible only because the
   patch's sky-gradient fill happens to be close to the artwork's own sky
   colour there. `top: 24%` (y=246) clears it with margin; `height` is
   trimmed to match so the bottom edge (~34.5%, y=353) -- and so the
   petal coverage -- is unchanged from before. */
.badge-preview-date-patch {
  position: absolute;
  left: 0;
  width: 100%;
  top: 24%;
  height: 10.5%;
  background: linear-gradient(#b3dde3, #bfe4e7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1.5cqw;
}

.badge-preview-date {
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "M PLUS Rounded 1c", system-ui, sans-serif;
  font-weight: 700;
  font-size: 4.6cqw;
  color: #0093a5;
}

/* Both the icon and the name/affiliation text overlap the role strip's
   vertical range in the real artwork (the icon circle's bottom third, in
   particular) -- they come after .badge-preview-role in the DOM
   (profile-badge.js's mountShell) specifically so they paint on top of it
   instead of being clipped by it. */
.badge-preview-icon-wrap {
  position: absolute;
  left: 3.1%;
  top: 76.3%;
  width: 25%;
  aspect-ratio: 1;
}

.badge-preview-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* "可変要素丸アイコン 白い縁をつける" -- a white border around the icon. */
  border: 0.9cqw solid #fff;
  box-sizing: border-box;
  background: #e9ecef;
}

.badge-preview-text {
  position: absolute;
  left: 30%;
  top: 75%;
  width: 66%;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4cqw;
  color: #fff;
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "M PLUS Rounded 1c", system-ui, sans-serif;
}

/* .detail-card p (app.css) sets a muted grey on every <p> inside the
   surrounding heading/lead box -- these two selectors need the extra class
   for specificity to still win white text on the purple band. */
.badge-preview-card .badge-preview-company {
  margin: 0;
  color: #fff;
  font-size: 2.6cqw;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.badge-preview-card .badge-preview-name {
  margin: 0;
  color: #fff;
  font-size: 5.4cqw;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.badge-preview-role {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13.5%;
  display: flex;
  align-items: center;
  /* The artwork's own role labels (see the "Roku / ORGANIZER" card) start
     right after the icon column, left-aligned -- not centered under the
     whole strip, which is what put the label's first glyph(s) behind the
     icon. .badge-preview-icon-wrap ends at left:3.1% + width:25% = 28.1%;
     this clears it with a gap, then leaves a small margin before the
     strip's rounded right corner. */
  justify-content: flex-start;
  padding: 0 5% 0 31%;
  color: #fff; /* default; profile-badge.js overrides this inline for organizer's pale strip */
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "M PLUS Rounded 1c", system-ui, sans-serif;
  font-weight: 800;
  /* Spaced caps, matching the artwork's role labels (STAFF / SPONSOR / ...). */
  letter-spacing: .12em;
  /* Was 10cqw, centered under the full-width strip -- fine on its own, but
     with the label now confined to the ~64% column right of the icon
     (100% - the 31%/5% padding above), 10cqw made ORGANIZER (the longest
     label, tied with ATTENDEE at 9 characters but wider) overflow that
     column. 7.5cqw keeps ORGANIZER inside it with margin at every card
     width, in cqw units so it still scales with the card like the rest of
     this file (percentages of *height* don't apply -- cqw only tracks the
     container's inline size). */
  font-size: 7.5cqw;
}