/* app.css — the few rules the gallery app adds to the design system. Tokens only: no colour or size by hand. */

.top__name { font-size: var(--text-s); letter-spacing: var(--track-open); text-transform: uppercase; color: var(--c-text); text-decoration: none; }
.top__nav form { display: contents; }
.top__nav button {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--c-text-dim);
}
.top__nav button:hover { color: var(--c-text); }
@media (max-width: 30rem) { .top__nav button { letter-spacing: var(--track-none); white-space: nowrap; } }

.dialog--static { position: static; }
dialog.dialog { margin: auto; }
.dialog .field { margin-top: var(--space-3); }
.dialog__error { margin-top: var(--space-3); }

.up__size { flex: none; font-size: var(--text-xs); color: var(--c-text-dim); font-variant-numeric: tabular-nums; }
.tile[aria-pressed] { cursor: pointer; }
.tile[aria-pressed] img { pointer-events: none; }
.meter__text span { min-width: 0; }
.stack > form { display: block; }

.images-head { position: sticky; top: 0; z-index: 5; margin-top: var(--space-7); margin-bottom: var(--space-4); padding-block: var(--space-3); background: var(--c-ground); }
.tile__check { position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-items: center; width: var(--space-5); height: var(--space-5); border-radius: var(--radius-round); background: var(--c-text); color: var(--c-on-white); pointer-events: none; }
.tile__check[hidden] { display: none; }
.rows td:first-child a { display: inline-flex; align-items: center; min-height: var(--space-5); }
.up form { display: inline; }
#unfinished-list { list-style: none; padding: 0; }
@media (max-width: 30rem) {
  /* gv.css sets this rule before the wide setting, so it never wins on a phone; here it comes last */
  .top__nav a { letter-spacing: var(--track-none); white-space: nowrap; }
  .top__nav { gap: 0 var(--space-3); }
}

.dialog__actions--stack { flex-direction: column; align-items: stretch; }
.dialog__actions--stack .btn { width: 100%; }