.app .look-card .readout.pw { --pw-max: 1.375rem; font: 500 var(--pw-fs, var(--pw-max))/1.2 var(--font-mono); letter-spacing: 0; white-space: normal; word-break: break-all; height: 3.4rem; overflow: hidden; user-select: all; }
.look-sheet .readout { font: 500 var(--fs-xl)/1.3 var(--font-mono); letter-spacing: 0; white-space: normal; word-break: break-all; user-select: all; }
.pw-bar { display: block; margin-top: var(--sp-3); }
.pw-bar[data-level="weak"]::before { background: var(--danger); }
.pw-bar[data-level="fair"]::before { background: var(--warn); }
.len { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: var(--sp-4); align-items: center; }
.len .input { text-align: center; font-size: var(--fs-lg); }
.sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.sets .chip { justify-content: center; padding-inline: 0; }
.toggle .hint { margin-left: var(--sp-2); white-space: nowrap; color: var(--text-3); font: 400 var(--fs-sm) var(--font-mono); }
@media (min-width: 64em) { .app .look-card .readout.pw { --pw-max: 2rem; height: 5.5rem; } }
@media (max-width: 63.99em) {
  .app .look-card > div:first-child { display: contents; }
  .app .look-card .eyebrow { grid-area: 1 / 1 / 2 / -1; justify-self: start; }
  .app .look-card .look-more { grid-row: 1; }
  .app .look-card .readout.pw { grid-column: 1 / -1; margin-block: var(--sp-1) var(--sp-2); }
  .app-page .app .look-card .compact-meta { grid-area: 3 / 1; align-self: center; text-align: left; line-height: 1.25; }
  .app-page .app .look-card .look-actions { display: flex; grid-area: 3 / 2; position: relative; z-index: 1; }
  .look-card .look-actions .btn { height: var(--control-sm); padding-inline: var(--sp-3); }
  .pw-long { display: none; }
}
@container (max-width: 19rem) { .look-card .look-actions .btn { padding-inline: .625rem; } .look-card .look-actions .btn > span { display: none; } }