.touch .adorned > * { padding-inline: var(--sp-2); }
@media (max-width: 39.99em) { .touch .card { gap: var(--sp-3); } }
.pg-methods { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 28rem) { .pg-methods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg-methods button { padding-inline: var(--sp-1); }
.pg-date { display: block; font-size: var(--fs-lg); font-weight: 500; color: var(--text-1); -webkit-appearance: none; appearance: none; text-align: left; }
.pg-date::-webkit-date-and-time-value { text-align: left; }
.pg-date[aria-invalid="true"] { border-color: var(--danger); }
.pg-last { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end; }
.pg-last > .btn { justify-self: start; }
.pg-last .adorned { max-width: 10rem; }
.pg-progress { display: grid; gap: var(--sp-2); }
.pg-progress p { color: var(--text-1); font-weight: 500; }
.pg-bar { height: .625rem; }
.pg-head { font-weight: 500; color: var(--text-1); margin-bottom: calc(-1 * var(--sp-2)); }
.pg-list > div { align-items: center; }
.pg-list .k { display: flex; gap: var(--sp-2); align-items: center; color: var(--text-1); }
.pg-list small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.pg-list .v { text-align: right; }
.pg-list .icon { flex: none; color: var(--text-3); }
.pg-list [data-state="past"] :is(.k, .v) { color: var(--text-3); }
.pg-list [data-state="past"] .icon, .pg-list [data-state="now"] .icon { color: var(--accent); }
.pg-note { font-size: var(--fs-xs); line-height: 1.45; }
@container (max-width: 22rem) { .touch .btn .icon { display: none; } .touch .btn { padding-inline: var(--sp-3); } }
@media (max-width: 63.99em) {
  .app:not([data-layout="stage"]) .look-card .compact-meta { grid-column: 1 / -1; grid-row: 3; text-align: left; margin-top: var(--sp-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app:not([data-layout="stage"]) .look-more { grid-row: 1 / span 2; align-self: center; }
}