.app .readout .affix, .look-sheet .readout .affix { vertical-align: baseline; margin: 0 0 0 .15em; }
.st-title { font-size: var(--fs-md); }
.st-night { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.st-date, .st-time { display: block; -webkit-appearance: none; appearance: none; text-align: left; }
.input::-webkit-date-and-time-value { text-align: left; }
.st-time { padding-inline: var(--sp-2); }
.st-time::-webkit-calendar-picker-indicator { margin: 0; }
.st-error { grid-column: 1/-1; }
.st-quality { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.st-quality .btn { height: auto; min-height: 3.5rem; flex-direction: column; gap: 2px; padding: var(--sp-1) 0; font-size: var(--fs-sm); }
.st-quality .icon { width: 1.5rem; height: 1.5rem; }
.st-quality [aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); }
.st-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
.st-actions .btn { padding-inline: var(--sp-4); }
.st-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.st-card > .btn { justify-self: start; }
.st-head { display: flex; align-items: center; justify-content: space-between; }
.st-line { color: var(--text-2); font-size: var(--fs-sm); }
.st-log .main { white-space: normal; }
.st-log time, .st-sub { display: block; }
.st-sub { color: var(--text-2); }
.st-log .icon-btn { flex: none; }
.st-goal { stroke: var(--text-3); stroke-dasharray: 4 3; }
@container (max-width: 20rem) {
  .st-quality { gap: var(--sp-1); }
  .st-actions [data-action="clear"] .icon { display: none; }
}
@media (max-width: 39.99em) { .touch .card { gap: var(--sp-3); } }
@media (max-width: 63.99em) {
  .app[data-layout] .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[data-layout] .look-more { grid-row: 1 / span 2; align-self: center; }
}