.app {
  min-height: 100vh;
}

.screen {
  min-height: 100vh;
}

.screen[aria-hidden="true"] {
  display: none;
}

/* Connexion */

.login-screen {
  align-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgb(100 135 185 / 10%), transparent 28rem),
    var(--color-canvas);
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: var(--space-6);
  position: relative;
}

.login-card {
  display: grid;
  gap: var(--space-8);
  max-width: 28rem;
  width: 100%;
}

.login-brand {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
}

.login-brand p {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin: 0;
}

.login-form {
  display: grid;
  gap: var(--space-4);
}

.login-email-actions {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}

.login-password-stage {
  display: grid;
  gap: var(--space-4);
}

.login-stage-enter {
  animation: stage-in var(--motion-layout) var(--ease-out);
}

@keyframes stage-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-back {
  justify-self: start;
}

.login-links {
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-copy);
  font-size: var(--text-xs);
  gap: var(--space-3);
  justify-content: center;
  position: absolute;
}

.login-links a {
  color: var(--color-text-muted);
}

.noscript-message {
  margin-top: var(--space-4);
}

/* Structure authentifiée */

.app-shell {
  background: var(--color-canvas);
}

.topbar {
  align-items: center;
  background: rgb(24 26 29 / 94%);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 4rem;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar__context {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__actions {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.topbar__day-ale-import-short {
  display: none;
}

.profile-chip {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  display: inline-flex;
  font-size: var(--text-xs);
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
}

.profile-chip__avatar {
  align-items: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent-contrast);
  display: inline-flex;
  height: 1.55rem;
  justify-content: center;
  width: 1.55rem;
}

.main-content {
  margin: 0 auto;
  max-width: var(--content-max);
  padding: var(--space-8) var(--space-6) var(--space-12);
  width: 100%;
}

.page-heading {
  align-items: end;
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.page-heading h1,
.page-heading p {
  margin: 0;
}

.page-heading h1 {
  font-size: var(--text-2xl);
  font-weight: 620;
  letter-spacing: -0.04em;
}

.page-heading p {
  color: var(--color-text-secondary);
  font-family: var(--font-copy);
  margin-top: var(--space-2);
}

.page-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Catalogue projets */

.project-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 18rem;
  overflow: hidden;
  position: relative;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.project-card:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}

.project-card__visual {
  align-items: end;
  aspect-ratio: 16 / 7;
  background:
    linear-gradient(135deg, transparent 0 44%, rgb(255 255 255 / 9%) 44.5% 45.5%, transparent 46%),
    radial-gradient(circle at 70% 20%, var(--project-accent, #6487b9), transparent 38%),
    linear-gradient(155deg, #0b0e12, #313b48);
  display: flex;
  padding: var(--space-4);
}

.project-card__visual--coast {
  background:
    linear-gradient(180deg, transparent 0 58%, rgb(10 19 29 / 88%) 59%),
    radial-gradient(circle at 26% 23%, #dba463, transparent 5%),
    linear-gradient(178deg, #536c82 0 45%, #b1b5ac 46% 52%, #243b49 53%);
}

.project-card__visual--forest {
  background:
    linear-gradient(165deg, transparent 0 42%, rgb(11 20 16 / 85%) 43%),
    radial-gradient(circle at 75% 16%, #e7c98c, transparent 6%),
    linear-gradient(145deg, #4d625a, #182c26);
}

.project-card__visual--city {
  background:
    repeating-linear-gradient(90deg, transparent 0 13%, rgb(255 255 255 / 5%) 13.5% 14.5%),
    linear-gradient(165deg, #3e5061, #171a22 55%, #090a0d);
}

.project-card__role {
  background: rgb(0 0 0 / 68%);
  border: 1px solid rgb(255 255 255 / 24%);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

.project-card__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.project-card__title {
  font-size: var(--text-lg);
  margin: 0;
}

.project-card__meta {
  color: var(--color-text-secondary);
  display: grid;
  font-family: var(--font-copy);
  font-size: var(--text-sm);
  gap: var(--space-2);
  margin: 0;
}

.project-card__activity {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.project-card__open {
  align-items: center;
  align-self: end;
  color: var(--color-accent-hover);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
  justify-content: space-between;
}

/* Projet / catalogue */

.project-content {
  margin: 0 auto;
  max-width: var(--content-max);
  padding: 0 var(--space-6) var(--space-12);
}

.project-hero {
  background:
    linear-gradient(90deg, rgb(17 19 22 / 98%), rgb(17 19 22 / 68%) 58%, rgb(17 19 22 / 28%)),
    radial-gradient(circle at 82% 33%, #5f7185, transparent 22rem),
    #111316;
  border-bottom: 1px solid var(--color-border);
  margin: 0 calc(var(--space-6) * -1);
  padding: var(--space-8) var(--space-6) var(--space-6);
}

.breadcrumb {
  align-items: center;
  color: var(--color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.breadcrumb button {
  background: none;
  border: 0;
  color: var(--color-accent-hover);
  cursor: pointer;
  padding: 0;
}

.project-title-row {
  align-items: end;
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
}

.project-title-row h1,
.project-title-row p {
  margin: 0;
}

.project-title-row h1 {
  font-size: var(--text-2xl);
  letter-spacing: -0.045em;
}

.project-title-row p {
  color: var(--color-text-secondary);
  font-family: var(--font-copy);
  margin-top: var(--space-2);
}

.catalog-toolbar {
  align-items: end;
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(13rem, 1.6fr) repeat(2, minmax(8rem, 0.75fr)) auto;
  padding: var(--space-4) 0;
  position: sticky;
  top: 4rem;
  z-index: 20;
}

.toolbar-group {
  display: grid;
  gap: var(--space-2);
}

.toolbar-group > label,
.toolbar-label {
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  text-transform: uppercase;
}

.density-control {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: auto minmax(5.5rem, 1fr) auto;
}

.density-control .toolbar-label {
  grid-column: 1 / -1;
}

.view-navigation {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-4) 0;
}

.view-navigation__primary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.view-summary {
  color: var(--color-text-muted);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
}

.day-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}

.day-button {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  min-height: var(--touch-min);
  min-width: 4.2rem;
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.day-button span {
  display: block;
}

.day-button__count {
  color: var(--color-text-muted);
  font-family: var(--font-copy);
  font-size: var(--text-2xs);
}

.day-button[aria-pressed="true"] {
  background: var(--color-surface-raised);
  border-color: var(--color-accent-hover);
  color: var(--color-text);
}

.sequence-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.selection-bar {
  align-items: center;
  background: #24334a;
  border: 1px solid var(--color-selection-strong);
  box-shadow: var(--shadow-panel);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  position: sticky;
  top: 9.3rem;
  z-index: 18;
}

.selection-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.daily-section {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.daily-section__heading {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.daily-section__heading h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.daily-section__heading span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.daily-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--daily-min)), 1fr));
}

.daily-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  display: grid;
  min-width: 0;
  padding: 0;
  position: relative;
  text-align: left;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.daily-card:hover {
  border-color: var(--color-border-strong);
}

.daily-card[aria-selected="true"] {
  border-color: var(--color-selection-strong);
  box-shadow:
    0 0 0 2px var(--color-selection-strong),
    inset 0 0 0 999px var(--color-selection);
}

.daily-card[aria-selected="true"]::after {
  align-items: center;
  background: var(--color-selection-strong);
  color: #101925;
  content: "✓";
  display: flex;
  font-weight: 900;
  height: 1.7rem;
  justify-content: center;
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  width: 1.7rem;
  z-index: 4;
}

.daily-card__media {
  aspect-ratio: 16 / 9;
  background: #090b0e;
  overflow: hidden;
  position: relative;
}

.daily-card__poster,
.player-poster {
  background:
    radial-gradient(circle at var(--poster-x, 68%) var(--poster-y, 32%), var(--poster-light, #b7a37d), transparent 4%),
    linear-gradient(var(--poster-angle, 162deg), transparent 0 43%, rgb(0 0 0 / 66%) 44% 62%, transparent 63%),
    linear-gradient(180deg, var(--poster-sky, #596b79), var(--poster-ground, #1d292f));
  height: 100%;
  position: absolute;
  inset: 0;
  transition: opacity var(--motion-fast) linear;
  width: 100%;
}

.poster--2 {
  --poster-angle: 35deg;
  --poster-ground: #2a1f1f;
  --poster-light: #d8b06c;
  --poster-sky: #5a4850;
  --poster-x: 25%;
  --poster-y: 18%;
}

.poster--3 {
  --poster-angle: 105deg;
  --poster-ground: #182523;
  --poster-light: #9ebc91;
  --poster-sky: #3b5a57;
  --poster-x: 74%;
  --poster-y: 26%;
}

.poster--4 {
  --poster-angle: 205deg;
  --poster-ground: #141923;
  --poster-light: #8aa4cc;
  --poster-sky: #384759;
  --poster-x: 41%;
  --poster-y: 40%;
}

.poster--5 {
  --poster-angle: 70deg;
  --poster-ground: #2b2620;
  --poster-light: #d8c7aa;
  --poster-sky: #60594e;
  --poster-x: 55%;
  --poster-y: 14%;
}

.poster--6 {
  --poster-angle: 148deg;
  --poster-ground: #1b191e;
  --poster-light: #c399bc;
  --poster-sky: #4f4457;
  --poster-x: 83%;
  --poster-y: 36%;
}

.daily-card__scrub {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 7%) 0 1px, transparent 1px 20%),
    linear-gradient(180deg, transparent, rgb(0 0 0 / 26%));
  background-size: 20% 100%, 100% 100%;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity var(--motion-fast) var(--ease-standard);
  z-index: 1;
}

.daily-card.is-scrubbing .daily-card__scrub {
  opacity: 1;
}

.daily-card__scrub-time {
  background: rgb(0 0 0 / 72%);
  bottom: var(--space-2);
  font-family: var(--font-timecode);
  font-size: var(--text-2xs);
  left: var(--scrub-left, 50%);
  padding: var(--space-1) var(--space-2);
  position: absolute;
  transform: translateX(-50%);
}

.daily-card__top,
.daily-card__bottom {
  display: flex;
  gap: var(--space-1);
  left: var(--space-2);
  pointer-events: none;
  position: absolute;
  right: var(--space-2);
  z-index: 3;
}

.daily-card__top {
  align-items: flex-start;
  justify-content: space-between;
  top: var(--space-2);
}

.daily-card__bottom {
  align-items: flex-end;
  bottom: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.daily-card__state {
  align-items: center;
  background: rgb(0 0 0 / 78%);
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
  position: absolute;
  z-index: 2;
}

.daily-card__state--error {
  background: rgb(67 23 23 / 86%);
}

.daily-card__state strong {
  font-size: var(--text-sm);
}

.daily-card__state span {
  color: var(--color-text-secondary);
  font-family: var(--font-copy);
  font-size: var(--text-xs);
}

.daily-card__info {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.daily-card__title {
  align-items: baseline;
  display: flex;
  font-size: var(--text-md);
  gap: 0.15rem;
  justify-content: space-between;
}

.daily-card__title strong {
  font-weight: 700;
}

.pickup {
  color: var(--color-warning);
  font-size: var(--text-2xs);
  vertical-align: super;
}

.daily-card__meta {
  color: var(--color-text-muted);
  display: flex;
  font-family: var(--font-copy);
  font-size: var(--text-xs);
  gap: var(--space-2);
  justify-content: space-between;
}

/* Import */

.upload-dropzone {
  align-items: center;
  border: 1px dashed var(--color-border-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
  min-height: 8rem;
  padding: var(--space-6);
  text-align: center;
}

.upload-dropzone p {
  color: var(--color-text-secondary);
  font-family: var(--font-copy);
  margin: 0;
}

.upload-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.upload-row {
  background: var(--color-canvas-deep);
  border: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-3);
}

.upload-row__main {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.upload-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-row__meta {
  color: var(--color-text-muted);
  display: flex;
  font-family: var(--font-copy);
  font-size: var(--text-xs);
  gap: var(--space-3);
}

.upload-row__actions {
  align-items: center;
  display: flex;
  gap: var(--space-1);
}

.upload-publication {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr auto;
}

/* Lecteur */

.player {
  background: var(--color-player);
  border: 0;
  color: var(--color-text);
  height: 100dvh;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  padding: 0;
  width: 100vw;
}

.player::backdrop {
  background: #000;
}

.player-shell {
  background: #000;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.player-stage {
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.player-poster {
  inset: 0;
  position: absolute;
}

.player-poster::after {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 24%), transparent 25% 75%, rgb(0 0 0 / 24%)),
    linear-gradient(180deg, rgb(0 0 0 / 20%), transparent 30% 70%, rgb(0 0 0 / 36%));
  content: "";
  inset: 0;
  position: absolute;
}

.player-version-watermark {
  background: rgb(0 0 0 / 54%);
  left: 50%;
  padding: var(--space-1) var(--space-2);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.compare-grid {
  background: #000;
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr 1fr;
  inset: 0;
  position: absolute;
}

.compare-cell {
  overflow: hidden;
  position: relative;
}

.compare-cell .player-poster {
  height: 100%;
  width: 100%;
}

.compare-cell__label {
  background: rgb(0 0 0 / 76%);
  left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  position: absolute;
  top: var(--space-3);
  z-index: 2;
}

.compare-split {
  inset: 0;
  position: absolute;
}

.compare-split__base,
.compare-split__overlay {
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.compare-split__overlay {
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}

.compare-split__divider {
  background: #fff;
  bottom: 0;
  box-shadow: 0 0 0 1px #000;
  left: var(--split, 50%);
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 2px;
}

.compare-split__range {
  bottom: 8rem;
  left: 50%;
  max-width: 28rem;
  position: absolute;
  transform: translateX(-50%);
  width: min(72vw, 28rem);
  z-index: 10;
}

.player-chrome {
  inset: 0;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transition: opacity 700ms var(--ease-standard);
  z-index: 20;
}

.player.is-chrome-hidden .player-chrome {
  opacity: 0;
}

.player.is-chrome-hidden .player-chrome button,
.player.is-chrome-hidden .player-chrome input,
.player.is-chrome-hidden .player-chrome select {
  pointer-events: none;
}

.player-topbar,
.player-controls,
.player-edge,
.player-compare-toolbar {
  pointer-events: auto;
}

.player-topbar {
  align-items: center;
  background: linear-gradient(180deg, rgb(0 0 0 / 88%), transparent);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) var(--space-8);
}

.player-title {
  min-width: 0;
}

.player-title strong,
.player-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-title span {
  color: var(--color-text-secondary);
  font-family: var(--font-copy);
  font-size: var(--text-xs);
}

.player-statuses {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.player-controls {
  background: linear-gradient(0deg, rgb(0 0 0 / 94%), rgb(0 0 0 / 62%) 74%, transparent);
  bottom: 0;
  display: grid;
  gap: var(--space-3);
  left: 0;
  padding: var(--space-12) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
  position: absolute;
  right: 0;
}

.timeline-wrap {
  display: grid;
  gap: var(--space-2);
}

.timeline {
  accent-color: var(--color-accent-hover);
  cursor: pointer;
  height: 1rem;
  margin: 0;
  width: 100%;
}

.timeline-meta {
  color: var(--color-text-secondary);
  display: flex;
  font-family: var(--font-timecode);
  font-size: var(--text-xs);
  justify-content: space-between;
}

.player-controls__row {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto auto auto minmax(8rem, 1fr) auto auto auto;
}

.timecode {
  font-family: var(--font-timecode);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.quality-control {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.quality-control .select {
  min-height: 2.35rem;
  width: auto;
}

.player-edge {
  align-items: center;
  background: linear-gradient(90deg, rgb(0 0 0 / 64%), transparent);
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  height: 32%;
  justify-content: center;
  min-width: 4rem;
  position: absolute;
  top: 34%;
}

.player-edge--prev {
  left: 0;
}

.player-edge--next {
  background: linear-gradient(-90deg, rgb(0 0 0 / 64%), transparent);
  right: 0;
}

.player-compare-toolbar {
  align-items: center;
  background: rgb(0 0 0 / 78%);
  border: 1px solid rgb(255 255 255 / 18%);
  display: flex;
  gap: var(--space-2);
  left: 50%;
  padding: var(--space-2);
  position: absolute;
  top: max(5.4rem, calc(env(safe-area-inset-top) + 4.5rem));
  transform: translateX(-50%);
}

.player-compare-toolbar .select {
  min-width: 11rem;
}

.keyboard-help {
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
}

.player-jump-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* Planche composants */

.system-page {
  margin: 0 auto;
  max-width: 88rem;
  padding: var(--space-8) var(--space-6) var(--space-12);
}

.system-header {
  align-items: flex-end;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
}

.system-header h1,
.system-header p {
  margin: 0;
}

.system-header p {
  color: var(--color-text-secondary);
  font-family: var(--font-copy);
  margin-top: var(--space-2);
}

.system-section {
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
  padding: var(--space-8) 0;
}

.system-section h2,
.system-section p {
  margin: 0;
}

.system-section__intro {
  display: grid;
  gap: var(--space-2);
}

.system-section__intro p {
  color: var(--color-text-secondary);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
}

.component-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.component-swatch {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
  min-height: 8rem;
  padding: var(--space-4);
}

.component-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.color-chip {
  background: var(--chip);
  border: 1px solid rgb(255 255 255 / 24%);
  display: grid;
  min-height: 7rem;
  padding: var(--space-3);
}

.color-chip span {
  align-self: end;
  background: rgb(0 0 0 / 66%);
  font-size: var(--text-xs);
  padding: var(--space-1);
}

.color-chip--canvas {
  --chip: #181a1d;
}

.color-chip--surface {
  --chip: #212429;
}

.color-chip--raised {
  --chip: #2a2e34;
}

.color-chip--accent {
  --chip: #6487b9;
}

.color-chip--success {
  --chip: #68a778;
}

.color-chip--warning {
  --chip: #d1a257;
}

.color-chip--danger {
  --chip: #ca7070;
}

.color-chip--focus {
  --chip: #9bc7ff;
}

.system-type-sample {
  font-size: var(--text-xl);
}

.timecode--left {
  text-align: left;
}

.progress--demo {
  max-width: 18rem;
}

.system-daily-grid {
  --daily-min: 18rem;
}

@media (max-width: 980px) {
  .catalog-toolbar {
    grid-template-columns: minmax(12rem, 1fr) 1fr 1fr;
  }

  .density-control {
    grid-column: 1 / -1;
  }

  .player-controls__row {
    grid-template-columns: auto auto minmax(8rem, 1fr) auto auto;
  }

  .player-controls__row .quality-control {
    display: none;
  }
}

@media (max-width: 720px) {
  .breadcrumb button,
  .segmented__button {
    min-height: var(--touch-min);
  }

  .topbar {
    gap: var(--space-2);
    grid-template-columns: auto 1fr auto;
    padding-inline: var(--space-3);
  }

  .topbar__context,
  .profile-chip__name,
  .prototype-flag {
    display: none;
  }

  .topbar__day-ale-import {
    padding-inline: var(--space-3);
  }

  .topbar__day-ale-import-label {
    display: none;
  }

  .topbar__day-ale-import-short {
    display: inline;
  }

  .main-content,
  .project-content {
    padding-inline: var(--space-4);
  }

  .page-heading,
  .project-title-row,
  .system-header {
    align-items: stretch;
    flex-direction: column;
  }

  .project-hero {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }

  .catalog-toolbar {
    grid-template-columns: 1fr 1fr;
    top: 4rem;
  }

  .catalog-toolbar .toolbar-group:first-child,
  .density-control {
    grid-column: 1 / -1;
  }

  .view-navigation {
    align-items: stretch;
    flex-direction: column;
  }

  .selection-bar {
    align-items: stretch;
    flex-direction: column;
    top: 14.2rem;
  }

  .daily-grid {
    gap: var(--space-3);
  }

  .player-compare-toolbar {
    left: var(--space-3);
    max-width: calc(100vw - 1.5rem);
    overflow-x: auto;
    right: var(--space-3);
    transform: none;
  }

  .player-edge {
    min-width: 3rem;
  }

  .system-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .login-email-actions {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding-top: var(--space-6);
  }

  .page-heading {
    margin-bottom: var(--space-4);
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    min-height: 15rem;
  }

  .project-card__visual {
    aspect-ratio: 16 / 6;
  }

  .catalog-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    position: static;
  }

  .catalog-toolbar .toolbar-group:first-child,
  .density-control {
    grid-column: auto;
  }

  .selection-bar {
    position: static;
  }

  .daily-grid {
    grid-template-columns: 1fr;
  }

  .upload-row {
    grid-template-columns: 1fr;
  }

  .upload-row__actions {
    justify-content: flex-end;
  }

  .player-topbar {
    align-items: start;
    grid-template-columns: auto 1fr auto;
  }

  .player-statuses .badge:not(:first-child) {
    display: none;
  }

  .player-controls {
    padding-inline: var(--space-3);
  }

  .player-controls__row {
    grid-template-columns: auto auto 1fr auto;
  }

  .player-controls__row > :nth-child(3),
  .keyboard-help {
    display: none;
  }

  .player-jump-actions {
    justify-content: flex-end;
  }

  .timecode {
    font-size: 1rem;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }

  .compare-cell:nth-child(2) {
    display: none;
  }

  .system-page {
    padding-inline: var(--space-4);
  }
}