/* Shared Group identity, cover and editor components. Custom colors are validated
   identity data; normal controls and status colors keep their Floodlit tokens. */
.group-crest { display: block; object-fit: contain; flex: none; border-radius: 0; background: transparent; }
.group-cover { position: relative; isolation: isolate; overflow: hidden; min-height: 252px; padding: var(--space-6); background: var(--group-primary); }
.group-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--group-cover-veil); pointer-events: none; }
.group-cover[data-mode="identity"]::after { background: var(--group-identity-veil); }
.group-cover__scene, .group-cover__pattern, .group-cover__watermark { position: absolute; z-index: -2; pointer-events: none; }
.group-cover__scene { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 52%; opacity: 0; }
.group-cover__pattern { inset: 0; overflow: hidden; opacity: .58; }
.group-cover__pattern::before { content: ""; position: absolute; inset: -50% -10% -50% 24%; background-image: var(--group-field); background-size: cover; transform: rotate(-14deg); }
.group-cover__watermark { width: min(260px, 85%); height: auto; right: 0; bottom: -44px; opacity: 0; }
.group-cover[data-mode="clay"] .group-cover__scene { opacity: 1; }
.group-cover[data-mode="clay"] .group-cover__pattern { opacity: 0; }
.group-cover[data-identity-style="plain"] .group-cover__pattern, .group-cover[data-identity-style="crest"] .group-cover__pattern { opacity: 0; }
.group-cover[data-mode="identity"][data-identity-style="crest"] .group-cover__watermark { opacity: .22; }
.group-cover__content { min-height: 204px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-5); }
.group-cover .page-head { margin: 0; }
.group-cover .page-head__row { align-items: center; }
.group-cover__identity { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.group-cover__crest { width: 88px; height: 88px; filter: drop-shadow(var(--group-crest-shadow)); }
.group-cover__copy { min-width: 0; }
.group-cover__name { font: var(--type-h1); color: var(--text-strong); overflow-wrap: anywhere; }
.group-cover__motto { margin-top: var(--space-2); color: var(--text-strong); font: var(--type-label); overflow-wrap: anywhere; }
.group-cover__facts { display: flex; flex-wrap: wrap; gap: var(--space-4); font: var(--type-caption); color: var(--text-strong); }
.group-cover__facts > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.group-cover--compact { min-height: 164px; padding: var(--space-4); }
.group-cover--compact .group-cover__content { min-height: 132px; gap: var(--space-3); }
.group-cover--compact .group-cover__crest { width: 52px; height: 52px; }
.group-cover--compact .group-cover__name { font: var(--type-h3); }
.group-cover--compact .group-cover__motto { font: var(--type-caption); }
.group-directory-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.group-directory-card .group-cover { border-radius: 0; box-shadow: none; }
.group-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-6); }
.group-editor__preview { position: sticky; top: var(--space-5); display: grid; gap: var(--space-4); min-width: 0; }
.group-editor__preview .section-head { margin: 0; }
.group-editor__preview .section-head h2 { font: var(--type-h3); }
.group-editor__preview .group-cover__name { font: var(--type-h2); }
.group-editor__preview .group-cover__crest { width: 76px; height: 76px; }
.group-editor__mini-meta { display: block; margin-top: var(--space-1); }
.group-editor__settings { min-width: 0; }
.group-editor__choices { min-width: 0; padding: 0; overflow: hidden; }
.group-editor__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: var(--border-width) solid var(--border-faint); padding: var(--space-2); }
.group-editor__tabs .chip { justify-content: center; border-radius: var(--radius-md); box-shadow: none; background: transparent; min-height: var(--tap-min); }
.group-editor__tabs .chip[aria-selected="true"] { background: var(--surface-raised); box-shadow: var(--shadow-key-quiet); color: var(--text-strong); }
.group-editor__panel { padding: var(--space-5); }
.group-editor__reset { padding: 0 var(--space-4) var(--space-3); display: flex; justify-content: flex-end; }
.group-editor__panel[hidden], .group-editor [hidden] { display: none; }
.group-editor__initials { max-width: 160px; font-family: var(--font-display); font-weight: var(--weight-display); text-transform: uppercase; }
.group-patterns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.group-pattern { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-1); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); font: var(--type-caption); color: var(--text-strong); }
.group-pattern__sample { display: block; width: 48px; height: 48px; background-size: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-key-quiet); }
.group-pattern > .ct-icon { position: absolute; right: var(--space-1); top: var(--space-1); opacity: 0; color: var(--text-accent); }
.group-pattern[aria-pressed="true"], .group-scene[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-pattern[aria-pressed="true"] > .ct-icon { opacity: 1; }
.group-cover-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.group-cover-type { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); cursor: pointer; }
.group-cover-type:has(input:checked) { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-cover-type input { margin-top: var(--space-1); accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.group-cover-type strong { display: block; font: var(--type-label); }
.group-cover-type small { display: block; margin-top: var(--space-1); font: var(--type-caption); color: var(--text-muted); }
.group-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.group-scene { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 0; border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); text-align: left; color: var(--text-strong); }
.group-scene img { width: 100%; height: auto; aspect-ratio: 1.7; object-fit: cover; object-position: 65% center; }
.group-scene > span { padding: var(--space-2); font: var(--type-caption); min-height: 48px; }
.group-scene__check { position: absolute; right: var(--space-2); top: var(--space-2); display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent); }
.group-scene[aria-pressed="true"] .group-scene__check { display: flex; }
.group-palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.group-palette.swatch { height: auto; justify-content: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); color: var(--text-strong); background: var(--surface-sunken); cursor: pointer; }
.group-palette.swatch i { width: 26px; height: 26px; flex: none; background: linear-gradient(90deg, var(--palette-primary) 50%, var(--palette-secondary) 50%); }
.group-palette > .ct-icon { margin-left: auto; opacity: 0; }
.group-palette:has(input:checked) > .ct-icon { opacity: 1; color: var(--text-accent); }
.group-palette:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.group-editor__color-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.group-color-input { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); min-height: var(--tap-min); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); }
.group-color-input input { width: 36px; height: 36px; border: 0; padding: 0; background: transparent; flex: none; cursor: pointer; }
.group-editor__club .field { margin-top: var(--space-2); }
.group-editor__footer { position: sticky; bottom: 0; z-index: var(--z-sticky); grid-column: 1 / -1; padding: var(--space-3) 0; background: var(--surface-page); border-top: var(--border-width) solid var(--border-faint); }
.group-editor__preview-action { display: none; }
body:has(.group-editor) .toast-zone { bottom: calc(var(--control-h) + var(--space-3) * 2 + var(--border-width) + var(--space-4)); }
@media (max-width: 959px) {
  body:has(.group-editor) .toast-zone { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--control-h) + var(--space-3) * 3 + var(--border-width) + var(--space-4)); }
  .group-editor { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); max-width: var(--layout-narrow); margin-inline: auto; }
  .group-editor__preview { position: static; }
  .group-editor__preview .group-cover { min-height: 208px; }
  .group-editor__preview .group-cover__content { min-height: 160px; }
  .group-editor__mini { display: none; }
  .group-editor__preview-action { display: inline-flex; }
  .group-editor__footer { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--space-3)); }
}
@media (max-width: 600px) {
  .group-cover .page-head__row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3); }
  .group-cover .page-head__row > .grow { grid-column: 2; }
  .group-cover .page-head h1 { font: var(--type-h2); }
  .group-cover { padding: var(--space-5); min-height: 212px; }
  .group-cover__content { min-height: 172px; }
  .group-cover__crest { width: 68px; height: 68px; }
  .group-cover__identity { gap: var(--space-3); }
  .group-cover__name { font: var(--type-h2); }
  .group-cover--compact { min-height: 160px; }
  .group-cover--compact .group-cover__content { min-height: 120px; }
  .group-editor__panel { padding: var(--space-4); }
  .group-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-editor__footer { padding-bottom: var(--space-3); }
}
@media (max-width: 400px) {
  .group-patterns { gap: var(--space-1); }
  .group-pattern__sample { width: 40px; height: 40px; }
  .group-pattern { font-size: var(--fs-caption); }
  .group-color-input { flex-wrap: wrap; }
  .group-cover-types { grid-template-columns: minmax(0, 1fr); }
  .group-editor__footer .button { padding-inline: var(--space-3); }
}
.group-bot-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.group-bot-choice { cursor: pointer; min-height: 64px; padding: var(--space-3); border-radius: var(--radius-md); border: var(--border-width) solid var(--border-faint); }
.group-bot-choice:has(input:checked) { border-color: var(--accent); }
.group-bot-choice input { flex: none; width: 20px; height: 20px; accent-color: var(--accent); }

.group-directory-card { text-decoration: none; transition: box-shadow var(--dur-fast); }
.group-directory-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.group-directory-card .group-cover { height: 100%; }
.group-mode-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.group-mode-row label { margin: 0; }
.group-mode-row label > span { display: inline-flex; align-items: center; }
.group-mode-row .toggle { flex: none; }
.group-palette.swatch i { border: 0; box-shadow: none; overflow: hidden; }
.group-bot-choice { display: grid; grid-template-columns: 20px 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.group-bot-choice__name { min-width: 0; font: var(--type-label); overflow-wrap: anywhere; }
.group-bot-choice input { margin: 0; }
.group-bot-choice:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.event-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; min-width: 0; }
.event-card__cover { flex: 1; position: relative; isolation: isolate; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); padding: var(--space-5); background: var(--surface-sunken); }
.event-card__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.event-card__cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--surface-page), transparent 100%); }
.event-card__top, .event-card__facts { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.event-card__identity { min-width: 0; display: grid; gap: var(--space-2); }
.event-card__identity h2 { font: var(--type-h3); overflow-wrap: anywhere; }
.event-card__identity .caption { color: var(--text-body); overflow-wrap: anywhere; }
.event-card__crests { display: flex; gap: var(--space-2); padding-bottom: var(--space-2); }
.event-card__details { display: grid; gap: var(--space-3); margin-top: auto; }
.event-card__group { display: flex; align-items: center; gap: var(--space-2); font: var(--type-caption); min-width: 0; }
.event-card__group > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-card__facts .facts { flex: none; }
.event-card__deadline { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.event-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
@media (max-width: 600px) { .event-card__cover { padding: var(--space-4); min-height: 208px; } }

/* Card metadata uses one type scale and icon frame in both featured and compact cards. */
:is(.featured-challenge__facts, .event-card__facts) :is(.facts .num, .event-card__deadline) { font: var(--type-label); color: var(--text-body); font-variant-numeric: tabular-nums; }
:is(.featured-challenge__facts, .event-card__facts) .meaning-icon { width: var(--space-5); height: var(--space-5); }
/* Tall calendar artwork needs optical inset beside the wider game-count sculpture. */
:is(.featured-challenge__facts, .event-card__facts) .event-card__deadline .meaning-icon { padding: calc(var(--space-1) / 2); }
.event-card__facts .facts { gap: var(--space-2); }