/* Shared components: button, chip, segmented control, avatar and stack, card, sheet, toast, skeleton,
   empty state, tabs. Colours only through tokens. */

/* ---- Buttons ---------------------------------------------------------------- */
/* Icons in buttons keep their size when the button is squeezed. */
.btn > svg { flex-shrink: 0; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-5);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: none;
  font-weight: 600;
  white-space: nowrap;
  isolation: isolate;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), opacity var(--duration) var(--ease), transform 120ms var(--ease);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; }

/* Primary: a flat ticket stub. Notches on both sides, and a band of light on hover. */
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 97%, var(--black)) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 97%, var(--black)) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 6px at 0 50%, transparent 97%, var(--black)) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 97%, var(--black)) right / 51% 100% no-repeat;
}
.btn-primary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--black) 10%, transparent) 42% 58%, transparent 58%);
  transform: translateX(-110%);
  transition: transform 700ms var(--ease);
}
.btn-primary:hover:not(:disabled)::before { transform: translateX(110%); }
.btn-secondary { background: var(--color-surface-2); border-color: var(--color-border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); }
.btn-ghost { color: var(--color-text-muted); }
.btn-ghost:hover:not(:disabled) { color: var(--color-text); background: var(--color-surface-2); }
.btn-danger { border-color: var(--color-danger); color: var(--color-danger); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--color-danger) 12%, transparent); }
.btn-block { width: 100%; }
.btn-small { min-height: 38px; padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.btn-large { min-height: 56px; padding: var(--space-3) var(--space-7); font-size: var(--text-lg); }
.btn-live { background: var(--color-live); color: var(--white); min-height: 38px; padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }

.btn.is-loading { color: transparent; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-text);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.btn-primary.is-loading::after { border-color: var(--on-accent); border-top-color: transparent; }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap-size);
  height: var(--tap-size);
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease), transform 120ms var(--ease);
}
.icon-btn:hover { color: var(--color-text); background: var(--color-surface-2); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn.is-round { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--glass-border); }
.icon-btn.on-dark { color: var(--white); background: color-mix(in srgb, var(--black) 62%, transparent); }
.icon-btn-primary { background: var(--accent); color: var(--on-accent); }
.icon-btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); }

.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-size: var(--text-sm); }
.link-btn:hover { text-decoration: underline; }

/* ---- Cards, chips, badges --------------------------------------------------- */
.card {
  display: block;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
.card.stack, .card.stack-tight, .card.row-icon { display: flex; }
.card-link { transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease); }
.card-link:hover { border-color: var(--color-border); }
.card-link:active { transform: scale(0.99); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.chip-accent, .chip-active { background: var(--accent-soft); color: var(--accent-strong); }
.chip-live { background: var(--color-live); color: var(--white); }
.chip-overlay { background: var(--color-bg); color: var(--color-text); }
.chip-filter { min-height: 38px; padding: 0 var(--space-4); background: var(--color-surface-2); border: 1px solid var(--glass-border); color: var(--color-text-muted); font-weight: 500; }
.chip-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--highlight);
  color: var(--on-highlight);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.badge-inline, .tab .badge, .seg .badge, .side-item .badge { position: static; display: inline-block; flex: none; }
.tab .badge, .seg .badge { margin-left: var(--space-1); }
.award { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 10px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; }

/* ---- Avatars: the uploaded picture, otherwise colour and letter ---------------- */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: 50%;
  color: var(--avatar-text);
  font-size: calc(var(--size) * 0.44);
  font-weight: 700;
  line-height: 1;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-c1 { background: var(--avatar-1); } .avatar-c2 { background: var(--avatar-2); } .avatar-c3 { background: var(--avatar-3); }
.avatar-c4 { background: var(--avatar-4); } .avatar-c5 { background: var(--avatar-5); } .avatar-c6 { background: var(--avatar-6); }
.avatar-c7 { background: var(--avatar-7); } .avatar-c8 { background: var(--avatar-8); } .avatar-c9 { background: var(--avatar-9); }
.avatar-c10 { background: var(--avatar-10); } .avatar-c11 { background: var(--avatar-11); } .avatar-c12 { background: var(--avatar-12); }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > * { margin-left: -9px; box-shadow: 0 0 0 2px var(--color-bg); }
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-more { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--size); height: var(--size); background: var(--color-surface-3); border-radius: 50%; font-size: calc(var(--size) * 0.36); font-weight: 600; }

/* ---- Forms ------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-label { font-size: var(--text-sm); font-weight: 600; }
.field-hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.form-error { color: var(--color-danger); font-size: var(--text-sm); }
.toggle-row, .pick-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-size); cursor: pointer; }
.inline-form { display: flex; gap: var(--space-2); align-items: center; }

/* ---- States ------------------------------------------------------------------ */
.state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-4); text-align: center; }
.state-empty { border: 1.5px dashed var(--color-border); border-radius: var(--radius-lg); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--color-border); border-top-color: var(--accent); border-radius: 50%; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { position: relative; overflow: hidden; background: var(--color-surface-2); border-radius: var(--radius-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--white) 5%, transparent) 42% 58%, transparent 58%); transform: translateX(-100%); animation: shimmer 1.4s var(--ease) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---- Tabs and segmented control ------------------------------------------------ */
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; min-height: var(--tap-size); padding: var(--space-1) var(--space-3); background: none; border: 0; border-bottom: 2px solid transparent; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.tab:hover { color: var(--color-text); }
.tab.is-active { color: var(--color-text); border-bottom-color: var(--highlight); }
.segmented { display: flex; gap: 2px; padding: 4px; background: var(--color-surface-2); border-radius: var(--radius-full); }
.seg { flex: 1; min-height: 38px; padding: 0 var(--space-3); background: none; border: 0; border-radius: var(--radius-full); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.seg.is-active { background: var(--color-surface-3); color: var(--color-text); box-shadow: var(--shadow-sm); }

/* ---- Lists ------------------------------------------------------------------- */
.list-row { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid transparent; border-radius: var(--radius-md); transition: border-color var(--duration) var(--ease), transform 120ms var(--ease); }
.list-row-link:active { transform: scale(0.99); }
.list-row-main { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.list-row-button { background: none; border: 0; padding: 0; color: inherit; text-align: left; }
.list-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.list-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex: none; }
.list-row.is-unread { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.list-row.is-me { border-color: var(--accent); }
.list-row-link:hover { border-color: var(--glass-border); }
.section-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.rank { width: 24px; text-align: center; font-family: var(--font-mono); color: var(--highlight); flex: none; }

/* ---- Stat tiles ---------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-md); }
.stat-tile strong { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; line-height: 1; }
.stat-tile:nth-child(3n + 1) strong { color: var(--highlight); }
.stat-tile:nth-child(3n + 2) strong { color: var(--highlight-2); }
.stat-tile:nth-child(3n) strong { color: var(--highlight-3); }

/* ---- Sheets and toasts ------------------------------------------------------------ */
/* Above the viewer (70), below the camera (90): dialogs opened from the viewer must be on top of it. */
.overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: var(--color-overlay); animation: fade-in var(--duration) var(--ease); }
.sheet { width: 100%; max-width: 560px; max-height: 92dvh; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--glass-border); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: sheet-up 280ms var(--ease); }
.sheet:focus { outline: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-5); }
.sheet-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-5) calc(var(--space-5) + var(--safe-bottom)); overflow-y: auto; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(32px); opacity: 0; } }

.toast-host { position: fixed; left: 50%; bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-5)); z-index: 95; display: flex; flex-direction: column; gap: var(--space-2); width: min(92vw, 420px); transform: translateX(-50%); pointer-events: none; }
.toast { padding: var(--space-3) var(--space-4); background: var(--color-surface-3); border: 1px solid var(--glass-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); animation: sheet-up 240ms var(--ease); }
.toast-error { border-color: var(--color-danger); }

/* ---- Uploads ------------------------------------------------------------------- */
.upload-list { display: flex; flex-direction: column; gap: var(--space-2); }
.upload-item { display: flex; align-items: center; gap: var(--space-3); }
.upload-thumb { width: 56px; height: 56px; flex: none; object-fit: cover; background: var(--color-surface-2); border-radius: var(--radius-sm); }
.upload-info { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: var(--text-sm); }
.upload-info progress { width: 100%; accent-color: var(--accent); }

/* ---- Media grid ------------------------------------------------------------------ */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(110px, 30%), 1fr)); gap: 3px; border-radius: var(--radius-md); overflow: hidden; }
.media-tile { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; background: var(--color-surface-2); border: 0; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; transition: scale 400ms var(--ease); }
.media-tile:hover img { scale: 1.05; }
.media-badge { position: absolute; right: 6px; bottom: 6px; display: flex; padding: 4px; background: var(--color-overlay); border-radius: 50%; color: var(--white); }
.media-tile.is-selected { outline: 3px solid var(--accent); outline-offset: -3px; }

/* ---- Viewer ------------------------------------------------------------------------ */
.viewer { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--black); color: var(--white); animation: fade-in var(--duration) var(--ease); }
.viewer:focus { outline: none; }
.viewer-top { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--space-2) + var(--safe-top)) max(var(--space-3), var(--safe-right)) var(--space-2) max(var(--space-3), var(--safe-left)); }
.viewer-position { font-size: var(--text-sm); }
.viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.viewer-stage img, .viewer-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-prev, .viewer-next { position: absolute !important; top: 50%; transform: translateY(-50%); }
.viewer-prev { left: max(var(--space-2), var(--safe-left)); }
.viewer-next { right: max(var(--space-2), var(--safe-right)); }
.viewer-info { padding: var(--space-3) var(--space-4) calc(var(--space-4) + var(--safe-bottom)); }
.viewer-caption { overflow-wrap: anywhere; }
.viewer-meta { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- Camera ----------------------------------------------------------------------- */
.camera { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--black); color: var(--white); }
.camera-top { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--space-2) + var(--safe-top)) var(--space-3) var(--space-2); }
.camera-timer { font-variant-numeric: tabular-nums; color: var(--color-live); font-weight: 700; }
.camera-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.camera-video { width: 100%; height: 100%; object-fit: contain; }
.camera-video.is-mirrored { transform: scaleX(-1); }
.camera-message { padding: var(--space-4); text-align: center; }
.camera-controls { display: flex; align-items: center; justify-content: space-around; gap: var(--space-3); min-height: 100px; padding: var(--space-3) var(--space-4) calc(var(--space-4) + var(--safe-bottom)); }
.shutter { width: 68px; height: 68px; background: var(--white); border: 4px solid var(--black); outline: 3px solid var(--white); border-radius: 50%; transition: transform 120ms var(--ease); }
.shutter:active { transform: scale(0.92); }
.record-btn { display: flex; align-items: center; justify-content: center; width: var(--tap-size); height: var(--tap-size); background: color-mix(in srgb, var(--white) 12%, transparent); border: 0; border-radius: 50%; }
.record-btn.is-recording { width: 68px; height: 68px; outline: 3px solid var(--color-live); }
.record-dot { width: 18px; height: 18px; background: var(--color-live); border-radius: 50%; }
.record-stop { width: 24px; height: 24px; background: var(--color-live); border-radius: 4px; }
.camera-spacer { width: var(--tap-size); }
@media (orientation: landscape) and (max-height: 520px) {
  .camera { flex-direction: row; flex-wrap: wrap; }
  .camera-top { position: absolute; top: 0; left: 0; z-index: 1; }
  .camera-stage { height: 100%; }
  .camera-controls { flex-direction: column; min-height: 0; height: 100%; padding: var(--space-3) max(var(--space-4), var(--safe-right)) var(--space-3) var(--space-3); }
  .camera-message { position: absolute; left: 0; right: 120px; bottom: 0; }
}

/* ---- Sheet becomes a centred dialog from tablet up, and in landscape phones keeps full height -- */
@media (min-width: 768px) {
  .overlay { align-items: center; padding: var(--space-5); }
  .sheet { border: 1px solid var(--glass-border); border-radius: var(--radius-xl); max-height: 86dvh; }
  .sheet-body { padding-bottom: var(--space-5); }
  .toast-host { bottom: var(--space-5); }
}
@media (max-width: 340px) {
  .btn { padding-inline: var(--space-4); }
  .sheet-body { padding-inline: var(--space-3); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .sheet { max-height: 100dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .toast-host { bottom: calc(var(--space-3) + var(--safe-bottom)); }
}