/* SCEN app components v2: news, meets, showdown, marketplace, leaderboards, account. */
@layer components {
  /* ---------- news ---------- */
  .newslist { display: grid; gap: var(--space-3); }
  .newsitem__link { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-4); align-items: start; padding: var(--space-3); border: 1px solid var(--sys-outline); border-radius: var(--radius-lg); background: var(--sys-surface); text-decoration: none; color: var(--sys-fg); transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
  .newsitem__link:hover { background: var(--sys-surface-2); border-color: var(--sys-outline-strong); transform: translateY(-2px); }
  .newsitem__img { width: 6.5rem; height: 4.75rem; object-fit: cover; border-radius: var(--radius-md); background: var(--sys-surface-3); }
  .newsitem__img--blank { display: block; background: radial-gradient(circle at 30% 40%, var(--sys-accent-mist), transparent 70%), var(--sys-surface-3); }
  .newsitem__body { display: grid; gap: 0.3rem; min-width: 0; }
  .newsitem__meta { font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sys-accent); }
  .newsitem__title { font-family: var(--font-head); font-weight: 600; font-size: var(--text-md); line-height: 1.2; letter-spacing: -0.01em; }
  .newsitem__summary { font-size: var(--text-sm); color: var(--sys-fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  @media (min-width: 48em) { .newsitem__link { grid-template-columns: 11rem 1fr; padding: var(--space-4); } .newsitem__img { width: 11rem; height: 7.5rem; } .newslist--grid { grid-template-columns: repeat(2, 1fr); } }
  .newsfilters { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--sys-outline); border-radius: var(--radius-lg); background: var(--sys-surface); }
  .newsfilters__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .chip { display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.25rem; padding: 0 var(--space-3); font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sys-fg-2); border: 1.5px solid var(--sys-outline-strong); border-radius: var(--radius-pill); text-decoration: none; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
  .chip[aria-current="true"], .chip.is-on { color: var(--sys-on-accent); background: var(--sys-accent); border-color: var(--sys-accent); }
  .chip:hover { color: var(--sys-fg); border-color: var(--sys-fg-3); }
  .chip[aria-current="true"]:hover { color: var(--sys-on-accent); }
  .newsfilters .input { min-height: 2.75rem; }
  .newsfilters__search { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }

  /* ---------- calendar grid ---------- */
  .cal-wrap { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .cal { padding: var(--space-4); border: 1px solid var(--sys-outline); border-radius: var(--radius-lg); background: var(--sys-surface); }
  .cal__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
  .cal__dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
  .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
  /* home: calendars stretch to the height of the cards beside them */
  .calsplit__grid, .calsplit__grid .cal-wrap { height: 100%; }
  .calsplit__grid .cal { display: flex; flex-direction: column; }
  .calsplit__grid .cal__grid { flex: 1; grid-auto-rows: 1fr; }
  .calsplit__grid .cal__day { aspect-ratio: auto; min-height: 2.25rem; }
  .sidepair { display: grid; gap: var(--space-4); align-items: start; }
  @media (min-width: 30em) { .sidepair { grid-template-columns: 1fr 1fr; } }
  .sidepair__slot { display: grid; gap: var(--space-2); align-content: start; }
  .sidepair__slot .eyebrow--plain { width: fit-content; }
  .cal__dow { font-family: var(--font-head); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sys-fg-3); text-align: center; padding-bottom: 0.35rem; }
  .cal__day { display: grid; place-items: center; aspect-ratio: 1; min-height: 2.25rem; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--sys-fg-2); text-decoration: none; position: relative; }
  .cal__day--pad { visibility: hidden; }
  .cal__day--today { outline: 1px solid var(--sys-outline-strong); color: var(--sys-fg); }
  .cal__day--has { background: var(--sys-accent); color: var(--sys-on-accent); box-shadow: var(--elev-1); transition: transform var(--dur-fast) var(--ease-out); }
  .cal__day--has:hover, .cal__day--has:focus-visible { transform: scale(1.08); }
  .gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5) var(--space-3) var(--space-3); font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sys-fg); text-align: left; background: linear-gradient(to top, rgba(12, 11, 10, 0.85), transparent); pointer-events: none; }
  .cal__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.03em; }
  .cal__key { display: flex; align-items: center; gap: 0.4rem; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--sys-fg-3); }
  .calsplit__grid { display: flex; flex-direction: column; }
  .calsplit__grid .cal-wrap { flex: 1; height: auto; }
  .cal__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sys-accent); }
  .cal__day { font-family: var(--font-head); font-weight: 500; }
  .cal__day--past { color: var(--sys-fg-3); }
  .cal__day--has { font-weight: 700; }
  .calsplit { display: grid; gap: var(--space-6); }
  @media (min-width: 64em) { .calsplit { grid-template-columns: 1.25fr 1fr; gap: var(--space-7); align-items: stretch; } }
  .ecard--ghost { display: grid; place-items: center; border: 1px dashed var(--sys-outline-strong); background: radial-gradient(120% 100% at 50% 100%, var(--sys-accent-mist), transparent 60%), var(--sys-surface); box-shadow: none; }
  .ecard--ghost:hover { border-color: var(--sys-accent); transform: translateY(-4px); }
  .ecard--ghost__inner { display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding: var(--space-5); }
  .ecard--ghost .icon { width: 2rem; height: 2rem; color: var(--sys-accent); }
  .ecard--ghost strong { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.02em; }
  .ecard--ghost > .ecard--ghost__inner > span:not(.btn) { font-size: var(--text-sm); color: var(--sys-fg-2); }
  .ecard-grid--side { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

  /* ---------- news page: card grid ---------- */
  .newslist--cards { gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
  .newslist--cards .newsitem__link { grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; height: 100%; align-content: start; }
  .newslist--cards .newsitem__img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
  .newslist--cards .newsitem__body { padding: var(--space-4); gap: var(--space-2); }
  .newslist--cards .newsitem__title { font-size: var(--text-lg); }
  .newslist--cards .newsitem__summary { -webkit-line-clamp: 3; }
  .newslist--cards .newsitem { display: grid; }

  /* ---------- news lead ---------- */
  .newslead { display: grid; gap: var(--space-4); }
  @media (min-width: 64em) { .newslead { grid-template-columns: 1.3fr 1fr; gap: var(--space-5); } }
  .newslead__main { position: relative; display: grid; align-content: end; min-height: 22rem; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--sys-fg); background: var(--sys-surface-2); isolation: isolate; box-shadow: var(--elev-1); transition: transform var(--dur-base) var(--ease-out); }
  .newslead__main img, .newslead__blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--dur-slow) var(--ease-out); }
  .newslead__blank { background: radial-gradient(circle at 30% 30%, var(--sys-accent-mist), transparent 60%), var(--sys-surface-3); }
  .newslead__main::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 11, 10, 0.95), rgba(12, 11, 10, 0.35) 55%, rgba(12, 11, 10, 0.1)); }
  .newslead__main:hover { transform: translateY(-4px); }
  .newslead__main:hover img { transform: scale(1.04); }
  .newslead__body { display: grid; gap: var(--space-2); padding: var(--space-5); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
  .newslead__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
  .newslead__summary { font-size: var(--text-sm); color: var(--sys-fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .newsitem__link--compact { grid-template-columns: 5.5rem 1fr; padding: var(--space-3); }
  .newsitem__link--compact .newsitem__img { width: 5.5rem; height: 4rem; }
  .newsitem__link--compact .newsitem__title { font-size: var(--text-base); }
  @media (min-width: 48em) { .newsitem__link--compact { grid-template-columns: 6.5rem 1fr; } .newsitem__link--compact .newsitem__img { width: 6.5rem; height: 4.5rem; } }

  /* ---------- community standard grid (meets page) ---------- */
  .stdgrid { display: grid; gap: 1px; background: var(--sys-outline); border: 1px solid var(--sys-outline); border-radius: var(--radius-lg); overflow: hidden; }
  @media (min-width: 40em) { .stdgrid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64em) { .stdgrid { grid-template-columns: repeat(3, 1fr); } }
  .std { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6) var(--space-5) var(--space-5); background: var(--sys-surface); transition: background var(--dur-base); }
  .std:hover { background: var(--sys-surface-2); }
  .std__num { position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; color: var(--sys-fg-4); }
  .std .icon { width: 1.5rem; height: 1.5rem; color: var(--sys-accent); margin-bottom: var(--space-2); }
  .std--no .icon { color: var(--sys-error); }
  .std h3 { font-family: var(--font-head); font-weight: 600; font-size: var(--text-md); line-height: 1.25; letter-spacing: -0.01em; text-transform: none; }
  .std p { font-size: var(--text-sm); color: var(--sys-fg-2); }

  /* ---------- instagram grid ---------- */
  .iggrid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 48em) { .iggrid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
  .igtile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); background: var(--sys-surface-2); isolation: isolate; }
  .igtile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .igtile__over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-head); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sys-fg); background: rgba(12, 11, 10, 0.55); opacity: 0; transition: opacity var(--dur-base); }
  .igtile__over .icon { width: 1.25rem; height: 1.25rem; }
  .igtile:hover img, .igtile:focus-visible img { transform: scale(1.05); }
  .igtile:hover .igtile__over, .igtile:focus-visible .igtile__over { opacity: 1; }

  /* ---------- gallery strip + instagram band ---------- */
  .gallery--strip { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 48em) { .gallery--strip { grid-template-columns: repeat(4, 1fr); } .gallery--strip .gallery__item--tall { grid-column: span 2; grid-row: span 2; } }
  .igband { display: grid; gap: var(--space-7); align-items: center; }
  @media (min-width: 56em) { .igband { grid-template-columns: 1.2fr 1fr; } }
  .igband__cards { position: relative; height: 22rem; }
  .igcard { position: absolute; width: 60%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--elev-2); transform: rotate(-6deg); left: 5%; top: 0; }
  .igcard--front { left: auto; right: 5%; top: 2rem; transform: rotate(5deg); }
  .igcard img { width: 100%; height: 100%; object-fit: cover; }
  .igcard__tag { position: absolute; left: 0.75rem; bottom: 0.75rem; font-family: var(--font-head); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sys-fg); background: rgba(12, 11, 10, 0.75); padding: 0.35em 0.6em; border-radius: var(--radius-sm); }
  .preview-banner { position: sticky; top: 0; z-index: 70; padding: 0.5rem var(--gutter); background: var(--sys-accent); color: var(--sys-on-accent); font-family: var(--font-head); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.04em; text-align: center; }

  /* ---------- meet detail ---------- */
  .going { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .going__chip { display: inline-flex; flex-direction: column; padding: var(--space-2) var(--space-3); border: 1px solid var(--sys-outline); border-radius: var(--radius-md); background: var(--sys-surface); font-size: var(--text-sm); font-weight: 500; }
  .going__chip small { color: var(--sys-fg-3); font-size: var(--text-xs); }
  .capbar { height: 0.5rem; background: var(--sys-surface-3); border-radius: var(--radius-pill); overflow: hidden; }
  .capbar > span { display: block; height: 100%; background: linear-gradient(to right, var(--sys-accent), var(--sys-accent-hover)); width: var(--pct, 0%); }

  /* ---------- showdown cards ---------- */
  .carcard { display: grid; gap: var(--space-3); background: var(--sys-surface); border: 1px solid var(--sys-outline); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base); }
  .carcard:hover { transform: translateY(-4px); box-shadow: var(--elev-2); background: var(--sys-surface-2); }
  .carcard__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sys-surface-2); }
  .carcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .carcard:hover .carcard__media img { transform: scale(1.05); }
  .carcard__rank { position: absolute; top: var(--space-3); left: var(--space-3); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--sys-accent); background: rgba(12, 11, 10, 0.75); padding: 0.25em 0.5em 0.15em; border-radius: var(--radius-sm); backdrop-filter: blur(6px); }
  .carcard__body { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
  .carcard__body h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.02em; }
  .carcard__body h3 a { text-decoration: none; color: var(--sys-fg); }
  .votebar { display: flex; }
  .vote { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-4); border: 1.5px solid var(--sys-outline-strong); border-radius: var(--radius-pill); font-family: var(--font-head); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--sys-fg-2); text-decoration: none; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
  .vote:hover:not(:disabled) { color: var(--sys-fg); border-color: var(--sys-accent); transform: translateY(-2px); }
  .vote.is-on { color: var(--sys-on-accent); background: var(--sys-accent); border-color: var(--sys-accent); box-shadow: var(--glow-accent); }
  .vote:disabled { opacity: 0.5; cursor: not-allowed; }
  .vote--lg { min-height: 3.25rem; font-size: var(--text-md); padding: 0 var(--space-6); }

  /* ---------- carousel ---------- */
  .carousel { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .carousel > * { flex: 0 0 min(100%, 40rem); scroll-snap-align: start; }
  .carousel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--sys-surface-2); }
  .carousel--photos > button { flex-basis: min(82%, 34rem); padding: 0; border: 0; background: none; cursor: zoom-in; }

  /* ---------- leaderboards ---------- */
  .board { border-top: 1px solid var(--sys-outline); }
  .board__row { display: grid; grid-template-columns: 3.25rem 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--sys-outline); transition: background var(--dur-fast); }
  .board__row:hover { background: var(--sys-surface); }
  .board__rank { font-family: var(--font-display); font-size: var(--text-xl); color: var(--sys-fg-3); }
  .board__row:nth-child(-n+3) .board__rank { color: var(--sys-accent); }
  .board__name { display: grid; gap: 0.1rem; min-width: 0; }
  .board__name strong { font-family: var(--font-head); font-weight: 600; font-size: var(--text-md); }
  .board__name small { color: var(--sys-fg-3); font-size: var(--text-xs); }
  .board__num { font-family: var(--font-display); font-size: var(--text-2xl); text-align: right; line-height: 1; }
  .board__num small { display: block; font-family: var(--font-head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; color: var(--sys-fg-3); text-transform: uppercase; }
  .tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }

  /* ---------- listings ---------- */
  .listing { display: grid; gap: var(--space-3); background: var(--sys-surface); border: 1px solid var(--sys-outline); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base); }
  .listing:hover { transform: translateY(-4px); box-shadow: var(--elev-2); background: var(--sys-surface-2); }
  .listing__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sys-surface-2); }
  .listing__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .listing:hover .listing__media img { transform: scale(1.05); }
  .listing__body { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
  .listing__body h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.02em; }
  .listing__body h3 a { text-decoration: none; color: var(--sys-fg); }
  .price { font-family: var(--font-head); font-size: var(--text-sm); color: var(--sys-fg-2); }
  .price strong { color: var(--sys-accent); font-weight: 700; font-size: var(--text-md); }
  .tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .tag { font-family: var(--font-head); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3em 0.6em; border: 1px solid var(--sys-outline-strong); border-radius: var(--radius-sm); color: var(--sys-fg-2); }
  .contactrow { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ---------- account ---------- */
  .avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--sys-accent); color: var(--sys-on-accent); font-family: var(--font-display); font-size: 2.2rem; box-shadow: var(--glow-accent); }
  .profile { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
  .statgrid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .statgrid .stat { padding: var(--space-4); background: var(--sys-surface); border: 1px solid var(--sys-outline); border-radius: var(--radius-md); text-align: left; }
  .statgrid .stat__num { font-size: var(--text-2xl); }
  .rowlist { display: grid; gap: var(--space-2); }
  .rowlist__item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--sys-outline); border-radius: var(--radius-md); background: var(--sys-surface); transition: background var(--dur-fast); }
  .rowlist__item:hover { background: var(--sys-surface-2); }
  .rowlist__item a { text-decoration: none; color: var(--sys-fg); font-weight: 500; }
  .rowlist__item--stack { flex-wrap: wrap; align-items: flex-start; padding: var(--space-4) var(--space-5); }
  .rowlist__item--stack > .cluster { margin-left: auto; }
  .btn--danger { --btn-border: var(--sys-error); --btn-fg: var(--sys-error); }
  .btn--danger:hover { background: var(--sys-error); color: var(--sys-on-accent); border-color: var(--sys-error); }
  .inline-form { display: inline; }

  /* ---------- alerts / auth ---------- */
  .alert { padding: var(--space-4); border: 1px solid var(--sys-outline-strong); border-left-width: 4px; border-radius: var(--radius-md); background: var(--sys-surface); }
  .alert--err { border-color: var(--sys-error); }
  .alert--ok { border-color: var(--sys-success); }
  .alert p { color: var(--sys-fg-2); }
  .auth { max-width: 30rem; }
  .filegrid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .filegrid img { width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--radius-sm); }
}