/* App layout. Colours, spacing and type come from tokens.css. */
[hidden] {
  display: none !important;
}

.page {
  max-width: 44rem;
  padding-block: var(--space-4) var(--space-8);
}

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

.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-block-end: var(--space-4);
}

.app-header h1 {
  margin: 0;
  font-size: 1.75rem;
}

.sync-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sync-status {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block: 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.banner p {
  margin: 0;
}

.banner-warning {
  border-inline-start-color: var(--color-danger);
}

.panel {
  margin-block-end: var(--space-8);
}

.panel h2 {
  margin-block: 0 var(--space-2);
  font-size: 1.25rem;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.panel-head h2 {
  margin: 0;
}

/* Session list */
.session-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.session-list .card {
  width: 100%;
}

.session-list .card:hover {
  transform: none;
}

.session-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.session-head .card-title {
  margin: 0;
}

.session-volume {
  font-weight: 600;
  white-space: nowrap;
}

.session-list .card-text {
  margin-block: var(--space-1) var(--space-3);
}

/* Inputs the vendored forms.css does not cover */
.field input[type="number"],
.field input[type="date"] {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-inline-size: 0;
}

/* Dialogs */
.sheet {
  width: min(36rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: var(--space-6);
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.sheet-small {
  width: min(24rem, calc(100% - 2rem));
}

.sheet::backdrop {
  background: var(--color-backdrop);
}

.sheet .modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-text);
}

.sheet-small .modal-body {
  margin: 0;
}

.exercise-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.exercise-head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.exercise-head .field {
  flex: 1;
}

.exercise {
  min-inline-size: 0;
}

.set-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: var(--space-2);
}

.set-row .field {
  min-inline-size: 0;
}

.exercise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.form-error {
  margin: 0;
  color: var(--color-invalid);
  font-weight: 600;
}

/* Plate calculator */
.plate-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block: var(--space-3);
}

.plate-form .field {
  flex: 1 1 10rem;
}

.plate-form select {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.plate-result {
  display: block;
  min-block-size: 3em;
  margin-block-end: var(--space-3);
  font-weight: 600;
}

.plate-stack {
  display: flex;
  align-items: center;
  gap: 3px;
  min-block-size: 9rem;
  margin: 0;
  padding: var(--space-3);
  list-style: none;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.plate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 2.25rem;
  block-size: 4rem;
  background: var(--color-secondary);
  color: var(--color-secondary-text);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
}

.plate[data-kg="25"] { block-size: 8rem; }
.plate[data-kg="20"] { block-size: 7.25rem; }
.plate[data-kg="15"] { block-size: 6.5rem; }
.plate[data-kg="10"] { block-size: 5.5rem; }
.plate[data-kg="5"] { block-size: 4.5rem; }
.plate[data-kg="2.5"] { block-size: 3.5rem; inline-size: 2rem; }
.plate[data-kg="1.25"] { block-size: 3rem; inline-size: 1.75rem; }
.plate[data-kg="0.5"] { block-size: 2.5rem; inline-size: 1.5rem; font-size: 0.65rem; }

/* Storage: the text and button arrive after an async call, so their room is reserved. */
#storage-usage {
  min-block-size: 3em;
}

.storage-actions {
  min-block-size: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.storage-actions p {
  margin: 0;
}

.sync-code-form {
  max-inline-size: 28rem;
}

/* A fieldset used only to disable its controls together: no box of its own. */
.bare-fieldset {
  display: block;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sync-code-form .storage-actions {
  margin-block-start: var(--space-3);
}

.sync-code-form p {
  margin-block: var(--space-2) 0;
}

@media (max-width: 30rem) {
  /* Room for two lines, so the status text changing length never moves the page. */
  .sync-status {
    min-block-size: 2.7em;
  }

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

  .sheet {
    padding: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}