/* pw-app.css — the password generator itself (password-app.html, which runs
   in a sandboxed frame, and the offline copy). Builds on /files/style.css for
   the editorial grammar and on the theme tokens the parent page sends in. */

/* In the frame there is no chromebar and the parent page provides the
   gutters, so drop style.css's body padding and the wrapper's width cap. */
html.pw-framed, html.pw-framed body { overflow: hidden; }
body.pw-app { padding: 0; margin: 0; background: var(--bg, #f4f2fa); }
html.pw-framed .pw-app .f-wrap { max-width: none; padding: 2px 0 8px; }

/* Several classes here set `display`, which beats the UA stylesheet's
   [hidden] rule (the trap that showed every panel at once on /files/qr). One
   rule for the whole tool instead of one per class. */
.pw-page [hidden] { display: none !important; }

.pw-method-desc { font-size: 14px; color: var(--dim, #6e6c7e); margin: 12px 0 0; max-width: 64ch; }
.pw-gap { margin-top: 30px; }

.pw-card {
  position: relative;
  background: var(--card, #fff); border: 1px solid var(--f-line); border-radius: 16px;
  padding: 16px; margin: 10px 0;
}
.pw-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pw-label { font-weight: 800; font-size: 16px; color: var(--bright, #1c1a26); }
.pw-bits { font-family: "DM Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--dim, #6e6c7e); }
.pw-meter { height: 6px; border-radius: 999px; background: var(--f-tint); overflow: hidden; margin: 9px 0 7px; }
.pw-meter > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--pw-lvl); transition: width .2s ease; }
.pw-lvl-0 { --pw-lvl: #c0392b; }
.pw-lvl-1 { --pw-lvl: #d68910; }
.pw-lvl-2, .pw-lvl-3, .pw-lvl-4 { --pw-lvl: var(--green, #12996a); }
.pw-time, .pw-note, .pw-genline { font-size: 13px; color: var(--dim, #6e6c7e); }
.pw-note, .pw-genline { margin-top: 4px; }
.pw-err { color: #c0392b; font-size: 14px; font-weight: 600; }
.pw-empty { color: var(--dim, #6e6c7e); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pw-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pw-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg, #f4f2fa); border: 1px solid var(--f-line); border-radius: 11px;
  padding: 8px 8px 8px 14px;
}
.pw-out {
  flex: 1; min-width: 0; font-family: "DM Mono", ui-monospace, monospace; font-size: 16px; line-height: 1.5;
  font-weight: 400; font-style: normal;
  color: var(--bright, #1c1a26); word-break: break-all; overflow-wrap: anywhere; border-radius: 4px;
}
/* Passwords are drawn (see pw.js). The canvas is sized in CSS pixels by the
   script; max-width stops a stale size pushing the row wider while a resize
   redraw is pending. */
.pw-out canvas { display: block; max-width: 100%; }
/* "Show as text" rows: one click selects the whole password. */
.pw-out.pw-text { user-select: all; -webkit-user-select: all; word-break: normal; overflow-wrap: anywhere; }
/* Invisible twin of a row that the canvas reads its font and colours from. */
.pw-probe { position: absolute; left: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.pw-out:focus { outline: none; }
.pw-out:focus-visible { outline: 2px solid var(--accent, #b8911e); outline-offset: 3px; }
.pw-d { color: var(--accent-text, #866933); }
.pw-s { color: #2f6db5; }
.pw-copy { flex-shrink: 0; }
/* Blur for screen-sharing and shoulder-surfers. A row un-blurs while it's
   hovered or focused, so tapping one on a tablet reveals just that one. */
.pw-blur .pw-row:not(:hover):not(:focus-within) .pw-out { filter: blur(7px); }

.pw-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pw-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pw-inline { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--dim, #6e6c7e); font-weight: 600; }
.pw-inline select {
  padding: 5px 8px; border: 1.5px solid var(--f-border); border-radius: 8px;
  background: var(--bg, #f4f2fa); color: var(--text, #3a3848); font: inherit; font-size: 13px;
}
.pw-clip { font-size: 12.5px; color: var(--dim, #6e6c7e); margin-top: 10px; min-height: 1.5em; }

/* Auto-refresh countdown: a hairline that drains, and a line of text. */
.pw-refresh { margin-top: 10px; }
.pw-refresh-track { height: 3px; border-radius: 999px; background: var(--f-tint); overflow: hidden; }
.pw-refresh-bar { height: 100%; width: 0; background: var(--accent, #b8911e); border-radius: 999px; }
.pw-refresh-text { font-size: 12.5px; color: var(--dim, #6e6c7e); margin-top: 5px; min-height: 1.5em; }

/* Checkbox rows inside a settings card. .f-field input would otherwise
   stretch the box to 100% width and pad it like a text field. */
.f-field label.pw-check, .pw-check {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text, #3a3848);
  font-weight: 500; margin: 0; cursor: pointer; line-height: 1.35;
}
.pw-check input[type="checkbox"], .f-field .pw-check input[type="checkbox"] {
  width: auto; padding: 0; margin: 0; flex-shrink: 0; accent-color: var(--accent, #b8911e);
}
.pw-fields .wide, .f-controls > .wide { grid-column: 1 / -1; }
.pw-range { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 12px; align-items: center; }
.pw-range input[type="range"] { padding: 0; accent-color: var(--accent, #b8911e); }
.f-field .pw-range input[type="number"] { padding: 7px 9px; font-family: "DM Mono", ui-monospace, monospace; }
.pw-hint { font-size: 12.5px; color: var(--dim, #6e6c7e); margin: 6px 0 0; }
.f-field select:disabled { opacity: .6; }

.pw-sr, .pw-offscreen {
  position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Hardcoded colours need their own dark values. In the frame, data-theme is
   set from the parent page's message (the platform themes with a cookie the
   sandboxed frame can't read); in the offline copy it follows the device. */
html[data-theme="dark"] .pw-err { color: #ff8a7a; }
html[data-theme="dark"] .pw-s { color: #8ab4ff; }
html[data-theme="dark"] .pw-lvl-0 { --pw-lvl: #ff8a7a; }
html[data-theme="dark"] .pw-lvl-1 { --pw-lvl: #f0b429; }

/* Narrow screens. Kept last so these beat the base rules above. */
@media (max-width: 520px) {
  .pw-out { font-size: 15px; }
  .pw-tools { flex-direction: column; align-items: stretch; }
  .pw-btns .f-btn { flex: 1; }
}