/* Area "journey" (docs/V2_BUILD.md). Only this area edits this file.
   Tokens of tokens.css only: no other color, font, shadow or radius. Lists are full-width lines,
   never cards or tiles; style colors only say a style. Every class starts with hsm-jr-. */

/* Shared lines --------------------------------------------------------------------------- */
.hsm-jr-lines { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hsm-rule); }
.hsm-jr-lines > li, .hsm-jr-lines > div { border-bottom: 1px solid var(--hsm-rule); }
.hsm-jr-lines + .hsm-jr-lines { margin-top: 0; }
.hsm-jr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.hsm-jr-cols.hsm-jr-lines { border-top: 0; }
.hsm-jr-cols.hsm-jr-lines > li, .hsm-jr-cols.hsm-jr-lines > div { border-top: 1px solid var(--hsm-rule); border-bottom: 0; margin-bottom: -1px; }
.hsm-jr-cols--gap { row-gap: 48px; }
.hsm-jr-cols--gap .hsm-jr-lines { margin-top: 16px; }
@media (max-width: 900px) { .hsm-jr-cols { grid-template-columns: minmax(0, 1fr); } }

.hsm-jr-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; padding: 18px 0; margin: 0; }
.hsm-jr-line dt { margin: 0; }
.hsm-jr-line dd { margin: 0; }
.hsm-jr-line__value {
  font: 600 20px/1.2 var(--hsm-font-wide); letter-spacing: var(--hsm-track); text-transform: uppercase;
  color: var(--hsm-white); text-align: right;
}
.hsm-jr-line__value a { text-decoration: none; }
.hsm-jr-line__value a:hover { text-decoration: underline; }
.hsm-jr-line__value--text { font-size: 16px; max-width: 360px; }
@media (max-width: 800px) { .hsm-jr-line__value--text { grid-column: 1 / -1; text-align: left; } }
.hsm-jr-line__detail { grid-column: 1 / -1; color: var(--hsm-muted); font-size: 14px; }
.hsm-jr-line__detail a { text-decoration: none; }
.hsm-jr-line__detail a:hover { text-decoration: underline; }

.hsm-jr-subtitle { margin: 32px 0 0; }
.hsm-jr-intro { max-width: 720px; margin: 16px 0 0; }
.hsm-jr-empty { margin: 0; padding: 24px 0; list-style: none; }
.hsm-jr-after { margin: 12px 0 0; }
.hsm-jr-count { margin: 8px 0 0; }
.hsm-jr-help { color: var(--hsm-muted); font-weight: 400; letter-spacing: 1px; text-transform: none; }

/* A thin flat meter (progress, share). --share = width, --style = color. */
.hsm-jr-meter { position: relative; display: block; height: 4px; background: var(--hsm-rule); }
.hsm-jr-meter::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); background: var(--style, var(--hsm-text)); }

/* Page head -------------------------------------------------------------------------------- */
.hsm-jr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px 64px; margin-top: 40px; }
.hsm-jr-head__who { position: relative; min-width: 0; max-width: 760px; }
.hsm-jr-head__who .hsm-accent { top: 6px; }
.hsm-jr-head__who .hsm-h1 { margin-top: 0; overflow-wrap: anywhere; }
.hsm-jr-head__line { margin: 12px 0 4px; font: 600 14px var(--hsm-font); letter-spacing: 1.5px; text-transform: uppercase; color: var(--hsm-white); }
.hsm-jr-head__actions { display: grid; justify-items: end; gap: 12px; }
.hsm-jr-head__links { margin: 4px 0 0; font-size: 14px; }
@media (max-width: 800px) { .hsm-jr-head__actions { justify-items: start; } }

.hsm-jr-year { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; }
.hsm-jr-year .hsm-date { margin: 0; }
.hsm-jr-year .hsm-link { margin-left: auto; }

.hsm-jr-years { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px; }
.hsm-jr-years a {
  padding: 6px 10px; border: 1px solid var(--hsm-rule); color: var(--hsm-muted); text-decoration: none;
  font: 600 12px var(--hsm-font); letter-spacing: 2px;
}
.hsm-jr-years a[aria-current] { color: var(--hsm-white); border-color: var(--hsm-white); }
.hsm-jr-recap__year { font-size: 120px; line-height: .9; }
@media (max-width: 800px) { .hsm-jr-recap__year { font-size: 72px; } }

/* Styles split, top lists, months ----------------------------------------------------------- */
.hsm-jr-share { display: grid; grid-template-columns: 180px minmax(0, 1fr) 150px; gap: 24px; align-items: center; padding: 16px 0; }
.hsm-jr-share .hsm-tag { justify-self: start; }
.hsm-jr-share__bar { position: relative; height: 6px; background: var(--hsm-rule); }
.hsm-jr-share__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share); background: var(--style); }
.hsm-jr-share__value { text-align: right; font-size: 14px; color: var(--hsm-text); }
@media (max-width: 800px) {
  .hsm-jr-share { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .hsm-jr-share__bar { grid-column: 1 / -1; grid-row: 2; }
}

.hsm-jr-rank { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; }
.hsm-jr-rank__n { font: 600 12px var(--hsm-font); letter-spacing: var(--hsm-track); color: var(--hsm-muted); }
.hsm-jr-rank__name { font: 600 16px/1.3 var(--hsm-font-wide); letter-spacing: 2px; text-transform: uppercase; color: var(--hsm-white); text-decoration: none; overflow-wrap: anywhere; }
a.hsm-jr-rank__name:hover { text-decoration: underline; }
.hsm-jr-rank__count { font-size: 14px; color: var(--hsm-muted); text-align: right; }

.hsm-jr-months { max-width: 720px; }
.hsm-jr-month { display: grid; grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 16px; align-items: center; padding: 10px 0; }
.hsm-jr-month .hsm-jr-meter { height: 6px; }
.hsm-jr-month__count { text-align: right; font-weight: 600; }

/* Badges and collections ------------------------------------------------------------------- */
.hsm-jr-badge { display: grid; grid-template-columns: 40px minmax(0, 1fr) 96px; gap: 16px; align-items: center; padding: 16px 0; }
.hsm-jr-badge__picto { display: grid; place-items: center; width: 40px; height: 40px; }
.hsm-jr-badge__picto svg { width: 34px; height: 34px; }
.hsm-jr-badge__text { display: grid; gap: 2px; min-width: 0; }
.hsm-jr-badge__name { font: 600 14px/1.3 var(--hsm-font-wide); letter-spacing: 2px; text-transform: uppercase; color: var(--hsm-muted); }
.hsm-jr-badge.is-earned .hsm-jr-badge__name { color: var(--hsm-white); }
.hsm-jr-badge__progress { display: grid; gap: 6px; justify-items: end; text-align: right; }
.hsm-jr-badge__progress .hsm-jr-meter { width: 100%; }
.hsm-jr-badge.is-earned .hsm-jr-badge__progress .hsm-overline { color: var(--hsm-white); }

.hsm-jr-collection { display: grid; grid-template-columns: minmax(0, 1fr) 240px 170px; gap: 24px; align-items: center; padding: 16px 0; }
.hsm-jr-collection__name { font: 600 16px/1.3 var(--hsm-font-wide); letter-spacing: 2px; text-transform: uppercase; color: var(--hsm-white); text-decoration: none; }
.hsm-jr-collection__name:hover { text-decoration: underline; }
.hsm-jr-collection__count { text-align: right; font-size: 14px; }
.hsm-jr-collection.is-complete .hsm-jr-meter { --style: var(--hsm-white); }
@media (max-width: 800px) {
  .hsm-jr-collection { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .hsm-jr-collection .hsm-jr-meter { grid-column: 1 / -1; grid-row: 2; }
}

/* Map and places ------------------------------------------------------------------------------ */
.hsm-jr-map { height: 440px; margin-top: 24px; }
@media (max-width: 800px) { .hsm-jr-map { height: 300px; } }
.hsm-jr-place { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 0; align-items: baseline; }
.hsm-jr-place .hsm-place { font-size: 16px; text-decoration: none; }
.hsm-jr-place .hsm-place:hover { text-decoration: underline; }
.hsm-jr-place .hsm-muted { grid-row: 2; }
.hsm-jr-place__count { grid-row: 1 / span 2; font-size: 14px; color: var(--hsm-muted); }

.hsm-jr-more summary { padding: 16px 0; cursor: pointer; font: 600 12px var(--hsm-font); letter-spacing: var(--hsm-track); text-transform: uppercase; }
.hsm-jr-more .hsm-jr-lines { margin-top: 0; }

/* Event page block ------------------------------------------------------------------------- */
.hsm-jr-attend { display: grid; gap: 16px; justify-items: inherit; width: 100%; padding-top: 24px; border-top: 1px solid var(--hsm-rule); }
.hsm-jr-attend > * { margin: 0; }
.hsm-jr-attend__counts { font: 600 14px var(--hsm-font); letter-spacing: 1.5px; text-transform: uppercase; color: var(--hsm-white); }
.hsm-jr-attend__ask { font-weight: 600; }
.hsm-jr-attend__hint { max-width: 300px; }
.hsm-jr-actions { display: grid; justify-items: inherit; gap: 12px; margin: 0; }
.hsm-jr-friends { display: grid; gap: 8px; margin: 0; }
.hsm-jr-friends dd { margin: 2px 0 0; font-size: 14px; }
.hsm-jr-friends a { text-decoration: none; font-weight: 600; }
.hsm-jr-friends a:hover { text-decoration: underline; }
.hsm-jr-checked { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--hsm-white); }
.hsm-jr-checked svg { position: static; transform: none; color: var(--hsm-white); }

/* Notes: flat line with a colored left edge, like components/messages.html. */
.hsm-jr-note { margin: 0; padding: 10px 14px; background: var(--hsm-field); border-left: 4px solid var(--hsm-frenchcore); font-size: 14px; text-align: left; }
.hsm-jr-note--error { border-left-color: var(--hsm-hardcore); }

/* Attendance buttons: the .hsm-btn component with fixed color pairs (docs/CHARTE.md, section 4). */
.hsm-jr-btn--go { --body: var(--hsm-coral); --cap: var(--hsm-hardstyle); }
.hsm-jr-btn--here { --body: var(--hsm-coral); --cap: var(--hsm-uptempo); }
.hsm-jr-btn--soft { --body: var(--hsm-black); --cap: var(--hsm-hardtek); color: var(--hsm-white); }
/* Chosen: the v1 "unfollow" button (pink body, orange end-cap, yellow star, white text). */
.hsm-jr-btn[aria-pressed="true"] { --body: var(--hsm-hardtek); --cap: #F8A03C; color: #FFFFFF; }
.hsm-jr-btn[aria-pressed="true"] .hsm-btn__icon { background: #FAFF16; }
.hsm-jr-actions .hsm-jr-btn, .hsm-jr-pick__action .hsm-jr-btn { min-width: 240px; }
.hsm-jr-btn:disabled { cursor: progress; filter: saturate(.4); }
.hsm-jr-btn.htmx-request { cursor: progress; }

.hsm-jr-textbtn {
  background: none; border: 0; padding: 0; color: var(--hsm-muted); font: 400 14px var(--hsm-font); cursor: pointer; text-decoration: none;
}
.hsm-jr-textbtn:hover { color: var(--hsm-white); text-decoration: underline; }
.hsm-jr-remove { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: inherit; }
.hsm-event__side .hsm-jr-remove { justify-content: flex-end; }
.hsm-jr-visibility { width: 100%; max-width: 300px; text-align: left; }

/* Details after the event: left-aligned form in the aside. */
.hsm-jr-details { width: 100%; text-align: left; border-top: 1px solid var(--hsm-rule); }
.hsm-jr-details summary {
  padding: 16px 0; cursor: pointer; font: 600 12px var(--hsm-font); letter-spacing: var(--hsm-track); text-transform: uppercase; color: var(--hsm-white);
}
.hsm-jr-details form { display: grid; gap: 20px; padding-bottom: 8px; }
.hsm-jr-details textarea { resize: vertical; }
.hsm-jr-sets { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; max-height: 320px; overflow-y: auto; }
.hsm-jr-sets legend { padding: 0; margin-bottom: 8px; }
.hsm-jr-sets label { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.hsm-jr-sets input { accent-color: var(--hsm-coral); width: 16px; height: 16px; flex: none; }
.hsm-jr-ratings { display: grid; gap: 14px; }
.hsm-jr-rating { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; }
.hsm-jr-rating legend { float: left; padding: 0; }
.hsm-jr-rating__scale { display: flex; }
.hsm-jr-rating__scale label { position: relative; }
.hsm-jr-rating__scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hsm-jr-rating__scale span {
  display: grid; place-items: center; width: 36px; height: 36px; margin-left: -1px; border: 1px solid var(--hsm-field);
  font: 600 14px var(--hsm-font); color: var(--hsm-muted); cursor: pointer;
}
.hsm-jr-rating__scale label:first-child span { margin-left: 0; }
.hsm-jr-rating__scale input:checked + span { background: var(--hsm-white); border-color: var(--hsm-white); color: var(--hsm-ink); }
.hsm-jr-rating__scale label:first-child input:checked + span { background: none; border-color: var(--hsm-muted); color: var(--hsm-white); }
.hsm-jr-rating__scale input:focus-visible + span { outline: 2px solid var(--hsm-white); outline-offset: 2px; }
.hsm-jr-rating__scale span:hover { color: var(--hsm-white); }
@media (max-width: 420px) { .hsm-jr-rating { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Pick rows (retro-entry, events to confirm) ---------------------------------------------- */
.hsm-jr-picks { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hsm-rule); }
.hsm-jr-pick {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center;
  padding: 20px calc(var(--hsm-stripe) + 24px) 20px 0; border-bottom: 1px solid var(--hsm-rule);
}
.hsm-jr-pick::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: var(--hsm-stripe); background: var(--style, var(--hsm-rule)); }
.hsm-jr-pick:hover { background: color-mix(in srgb, var(--style, transparent) 6%, transparent); }
.hsm-jr-pick__main { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; text-decoration: none; min-width: 0; }
.hsm-jr-pick__date { display: grid; gap: 2px; }
.hsm-jr-pick__day { font: 600 18px/1.2 var(--hsm-font-wide); letter-spacing: 2px; color: var(--hsm-white); }
.hsm-jr-pick__what { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.hsm-jr-pick__name { font: 600 20px/1.2 var(--hsm-font-wide); letter-spacing: 2px; text-transform: uppercase; color: var(--hsm-white); overflow-wrap: anywhere; }
.hsm-jr-pick__main:hover .hsm-jr-pick__name { text-decoration: underline; }
.hsm-jr-pick__action { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; margin: 0; }
.hsm-jr-pick__action .hsm-jr-note { flex-basis: 100%; }
.hsm-jr-missing { margin-top: 40px; }
@media (max-width: 800px) {
  .hsm-jr-pick { grid-template-columns: minmax(0, 1fr); padding-right: calc(var(--hsm-stripe) + 12px); }
  .hsm-jr-pick__main { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hsm-jr-pick__name { font-size: 18px; }
  .hsm-jr-pick__action { justify-content: start; }
  .hsm-jr-pick__action .hsm-jr-btn { min-width: 0; }
}

.hsm-jr-search { grid-template-columns: 1fr 200px 220px; max-width: none; }
@media (max-width: 800px) { .hsm-jr-search { grid-template-columns: minmax(0, 1fr); } }

/* People ------------------------------------------------------------------------------------- */
.hsm-jr-usersearch { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-top: 32px; max-width: 720px; }
.hsm-jr-usersearch .hsm-field { flex: 1 1 260px; }
.hsm-jr-usersearch .hsm-jr-note { flex-basis: 100%; }
.hsm-jr-people { margin-top: 16px; }
.hsm-jr-person { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; }
.hsm-jr-person__who { display: grid; gap: 2px; min-width: 0; }
.hsm-jr-person__name { font: 600 16px var(--hsm-font-wide); letter-spacing: 2px; text-transform: uppercase; color: var(--hsm-white); text-decoration: none; overflow-wrap: anywhere; }
.hsm-jr-person__name:hover { text-decoration: underline; }
.hsm-jr-person__action:empty { display: none; }
@media (max-width: 600px) {
  .hsm-jr-person { grid-template-columns: 48px minmax(0, 1fr); }
  .hsm-jr-person__action { grid-column: 2; }
}

.hsm-jr-avatar { display: grid; place-items: center; object-fit: cover; aspect-ratio: 1; background: var(--hsm-field); color: var(--hsm-muted); font: 600 20px var(--hsm-font-wide); }
.hsm-jr-avatar--small { width: 48px; height: 48px; }
.hsm-jr-avatar--large { width: 200px; height: 200px; font-size: 72px; }
@media (max-width: 800px) { .hsm-jr-avatar--large { width: 120px; height: 120px; font-size: 48px; } }

.hsm-jr-profile { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: end; margin-top: 40px; }
.hsm-jr-profile__who { min-width: 0; flex: 1 1 320px; }
.hsm-jr-profile__who .hsm-h1 { margin-top: 0; overflow-wrap: anywhere; }
.hsm-jr-profile__rel { margin: 8px 0 0; color: var(--hsm-muted); }
.hsm-jr-profile__bio { max-width: 640px; }
.hsm-jr-profile__actions { margin-top: 20px; }

/* Story 9:16 (to screenshot): big type, flat colors, no gradient --------------------------------- */
/* Outer box = the 9:16 frame and the size container; every length inside is in cqw of the frame. */
.hsm-jr-storypage { min-height: 100svh; display: grid; place-items: center; align-content: center; gap: 16px; padding: 0; }
.hsm-jr-story {
  container-type: inline-size; position: relative; overflow: hidden;
  width: min(100vw, calc(100svh * 9 / 16)); aspect-ratio: 9 / 16; background: var(--hsm-ink); color: var(--hsm-white);
}
@media (min-width: 700px) { .hsm-jr-story { outline: 1px solid var(--hsm-rule); } }
.hsm-jr-story__in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7cqw 7cqw 6cqw; }
.hsm-jr-story__in > * { margin: 0; }
.hsm-jr-story__top { display: flex; justify-content: space-between; align-items: center; font: 600 3.4cqw var(--hsm-font); letter-spacing: .5cqw; }
.hsm-jr-story__top img { height: 4.2cqw; width: auto; }
.hsm-jr-story__title { position: relative; margin-top: 7cqw; }
.hsm-jr-story__spike { position: absolute; left: -12cqw; top: 13cqw; width: 22cqw; height: auto; transform: rotate(-90deg); }
.hsm-jr-story__kicker { margin: 0; font: 400 4.6cqw/1.2 var(--hsm-font-wide); letter-spacing: 1cqw; text-transform: uppercase; }
.hsm-jr-story__kicker strong { font-weight: 700; display: block; }
.hsm-jr-story__year { margin: 1cqw 0 0 -1cqw; font: 700 29cqw/0.9 var(--hsm-font-wide); letter-spacing: -.5cqw; color: var(--hsm-white); }
.hsm-jr-story__lines { margin: 7cqw 0 0; border-top: 1px solid var(--hsm-field); }
.hsm-jr-story__lines div { display: flex; justify-content: space-between; align-items: baseline; padding: 1.6cqw 0; border-bottom: 1px solid var(--hsm-field); }
.hsm-jr-story__lines dt { font: 600 3.3cqw var(--hsm-font); letter-spacing: .7cqw; text-transform: uppercase; color: var(--hsm-muted); }
.hsm-jr-story__lines dd { margin: 0; font: 600 6.5cqw/1 var(--hsm-font-wide); letter-spacing: .4cqw; }
.hsm-jr-story__artist { margin-top: auto; padding-top: 5cqw; }
.hsm-jr-story__label { margin: 0; font: 600 3.3cqw var(--hsm-font); letter-spacing: .7cqw; text-transform: uppercase; color: var(--hsm-muted); }
.hsm-jr-story__name { margin: 1cqw 0; font: 600 8.5cqw/1.05 var(--hsm-font-wide); letter-spacing: .6cqw; text-transform: uppercase; overflow-wrap: anywhere; }
.hsm-jr-story__band {
  margin: 5cqw -7cqw 0; padding: 3.5cqw 7cqw; background: var(--style); color: var(--hsm-ink);
  display: grid; gap: 1.5cqw;
}
.hsm-jr-story__band span { font: 600 3.3cqw var(--hsm-font); letter-spacing: .7cqw; text-transform: uppercase; }
.hsm-jr-story__band strong { font: 700 7cqw/1 var(--hsm-font-wide); letter-spacing: .5cqw; text-transform: uppercase; }
.hsm-jr-story__foot { margin-top: 4cqw; display: flex; justify-content: space-between; gap: 2cqw; white-space: nowrap; font: 600 2.6cqw var(--hsm-font-wide); letter-spacing: .4cqw; text-transform: uppercase; }
.hsm-jr-story__back { margin: 0 0 24px; padding: 0 20px; font-size: 14px; color: var(--hsm-muted); text-align: center; }
@media (max-width: 800px) { .hsm-jr-search .hsm-field > .hsm-overline[aria-hidden="true"] { display: none; } }