/* The two password tools: the checker (/tools/password/) and the generator (/tools/generator/).
   Like an iLoveIMG page: a big headline, one line, then one big thing to look at and press.
   Everything else waits below the fold, quieter. Mobile first. Anton only for the headlines, the
   passwords and the crack times. Green and red only ever mean a good or a bad result. */
.pw-page [hidden] { display: none !important; }

/* the headline and one line under it */
.pw-hero { padding: 16px 16px 18px; gap: 12px; }
.pw-hero h1 { font-size: clamp(32px, 7.6vw, 64px); max-width: 980px; }
.gen-hero h1 { font-size: clamp(36px, 11.4vw, 72px); }

.pw-label { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pw-safe { display: flex; gap: 8px; align-items: flex-start; padding: 0 8px; font-size: 15px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.pw-safe svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ink); }
.pw-note { font-size: 13px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }

/* ---------- the checker ---------- */
/* min-height keeps room for the result, so nothing else shows above the fold and nothing jumps */
.pw-check { max-width: 680px; min-height: 560px; margin: 0 auto; padding: 0 16px 36px; display: flex; flex-direction: column; gap: 12px; }
.pw-field {
  display: flex; align-items: center; gap: 6px; padding: 5px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--white);
}
.pw-field:focus-within { border-color: var(--blue); }
.pw-field input {
  flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 6px 0 17px;
  border: 0; background: transparent; color: var(--ink); font: 600 20px/1.2 var(--body);
}
.pw-field input:focus { outline: none; }
.pw-field input::placeholder { color: #80868F; font-weight: 500; opacity: 1; }
.pw-show {
  flex: none; min-height: 52px; min-width: 82px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 700 17px/1 var(--body); cursor: pointer;
}
.pw-show:hover { background: var(--line); }

/* the result */
.pw-card {
  margin-top: 4px; padding: 18px; border: 2px solid var(--line); border-radius: 24px; background: var(--white);
  display: flex; flex-direction: column; gap: 16px;
}
.pw-part { display: flex; flex-direction: column; }
.pw-time { overflow-wrap: anywhere;
  margin-top: 8px; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 10vw, 64px);
  line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; color: var(--ink);
}
.pw-time.is-weak { color: var(--wrong-dark); }
.pw-time.is-strong { color: var(--right-dark); }
.pw-time.is-wait { font-family: var(--body); font-size: 20px; font-weight: 700; line-height: 1.3; text-transform: none; color: var(--muted); }
.pw-bar { height: 12px; margin-top: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pw-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ink); transition: width .3s ease, background-color .3s ease; }
.pw-bar.is-weak i { background: var(--wrong); }
.pw-bar.is-strong i { background: var(--right); }
.pw-tips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.4; color: #3A3F47; }
.pw-tips b { color: var(--ink); font-weight: 800; }
.pw-tips a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.pw-oops { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pw-oops p { font-size: 17px; font-weight: 600; line-height: 1.4; }
.pw-oops .btn { min-height: 52px; }

.pw-leak { padding-top: 14px; border-top: 2px solid var(--line); }
.pw-leak-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.pw-leak-line svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.pw-leak-line.is-found { color: var(--wrong-dark); }
.pw-leak-line.is-clear { color: var(--right-dark); }
.pw-leak-line.is-wait, .pw-leak-line.is-error { color: var(--muted); font-weight: 600; }
.pw-how { margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.pw-spin { border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--muted); animation: pwspin .8s linear infinite; }
@keyframes pwspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pw-spin { animation: none; } .pw-bar i { transition: none; } }

/* ---------- the generator ---------- */
/* The password and its time sit in boxes of a fixed height and the text is sized to fit them,
   so the buttons underneath never move while you tap. */
.gen { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; display: flex; flex-direction: column; gap: 8px; }
.gen button { -webkit-tap-highlight-color: transparent; }
.gen-card {
  padding: 14px 16px 12px; border: 2px solid var(--ink); border-radius: 26px; background: var(--white);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.gen-pw { --max: 42px; width: 100%; height: calc(var(--max) * 3.3); margin-top: 4px; display: flex; align-items: center; justify-content: center; }
.gen-pw > span {
  display: block; max-width: 100%; font-family: var(--display); font-weight: 400; font-size: var(--max); line-height: 1.1;
  letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; -webkit-user-select: all; user-select: all;
}
.gen-pw.is-random > span { letter-spacing: .05em; line-break: anywhere; word-break: break-all; }   /* even halves, not a break after ! or ? */
.gen-nojs { display: block; font: 600 18px/1.4 var(--body); letter-spacing: 0; color: var(--muted); -webkit-user-select: text; user-select: text; }
.gen-crack { width: 100%; margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; }
.gen-time { --max: 32px; width: 100%; height: calc(var(--max) * 2.1); margin-top: 4px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.gen-time > span {
  display: block; max-width: 100%; font-family: var(--display); font-weight: 400; font-size: var(--max); line-height: 1.02;
  letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance;
}
.gen-time.is-weak { color: var(--wrong-dark); }
.gen-time.is-strong { color: var(--right-dark); }
.gen-level { min-height: 28px; margin-top: 4px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.gen-level b { padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.gen-level.is-strong b { background: var(--right-tint); color: var(--right-dark); }
.gen-level.is-weak { color: var(--wrong-dark); }
.gen-level.is-weak b { background: var(--wrong-tint); color: var(--wrong-dark); }

/* one big button, then the quieter choices */
.gen-copy { width: 100%; min-height: 64px; margin-top: 2px; font-size: 20px; font-weight: 800; }
.gen button:disabled { cursor: default; }
.gen-copy:disabled { opacity: .45; }
.gen-copy:not(:disabled):active, .gen-new:not(:disabled):active, .gen-step:not(:disabled):active, .pw-mode:not(:disabled):active { transform: scale(.97); }
.gen-more { display: flex; flex-direction: column; gap: 8px; }
.gen-msg { min-height: 1.45em; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.gen-new {
  align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px;
  border: 2px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 700 17px/1 var(--body); cursor: pointer;
  transition: border-color .15s ease;
}
.gen-new svg { flex: none; width: 20px; height: 20px; }
@media (hover: hover) { .gen-new:not(:disabled):hover { border-color: var(--ink); } }
.gen-opts { margin-top: 6px; padding: 12px; border-radius: 22px; background: var(--paper); display: flex; flex-direction: column; gap: 10px; }
.pw-modes { display: flex; gap: 4px; padding: 4px; border: 2px solid var(--line); border-radius: 999px; background: var(--white); }
.pw-mode {
  flex: 1 1 0; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); font: 700 17px/1 var(--body); cursor: pointer;
}
.pw-mode.is-on { background: var(--ink); color: var(--white); }
@media (hover: hover) { .pw-mode:not(.is-on):not(:disabled):hover { background: var(--paper); } }
.gen-size { display: flex; align-items: center; gap: 6px; padding: 4px; border: 2px solid var(--line); border-radius: 999px; background: var(--white); }
.gen-step {
  flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.gen-step svg { width: 20px; height: 20px; }
.gen-step:disabled { opacity: .35; }
@media (hover: hover) { .gen-step:not(:disabled):hover { background: var(--line); } }
.gen-count { flex: 1 1 auto; text-align: center; font: 700 17px/1.2 var(--body); color: var(--ink); white-space: nowrap; }
.gen-note { text-align: center; font-size: 15px; line-height: 1.4; color: var(--muted); }
.gen .pw-safe { justify-content: center; margin-top: 10px; text-align: left; }
.gen .pw-note { text-align: center; text-wrap: balance; }

/* ---------- below the fold: the other tool, tips, questions, ACE ---------- */
.pw-sec { max-width: 680px; margin: 0 auto 44px; padding: 0 16px; }
.pw-h2 { margin-bottom: 16px; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 7.4vw, 42px); line-height: 1.05; letter-spacing: .01em; }

.pw-list { list-style: none; counter-reset: rule; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pw-list li { counter-increment: rule; position: relative; min-height: 38px; padding-left: 52px; font-size: 18px; line-height: 1.45; color: #3A3F47; }
.pw-list li::before {
  content: counter(rule); position: absolute; left: 0; top: -1px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--white); font: 800 18px/38px var(--body); text-align: center;
}
.pw-list li b { display: block; color: var(--ink); font-weight: 800; }

.faq { border-bottom: 2px solid var(--line); }
.faq:first-of-type { border-top: 2px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 60px; padding: 12px 0; font-size: 18px; font-weight: 800; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 24px; text-align: center; font-size: 26px; font-weight: 600; line-height: 1; }
.faq[open] summary::after { content: "\2212"; }
.faq p { padding: 0 38px 18px 0; font-size: 17px; line-height: 1.5; color: #3A3F47; text-wrap: pretty; }

.pw-links { max-width: 680px; margin: 0 auto 44px; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.pw-next {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 20px 10px 10px;
  border: 2px solid var(--line); border-radius: 22px; color: var(--ink); text-decoration: none;
  font-size: 18px; font-weight: 600; line-height: 1.3; transition: border-color .15s ease, background-color .15s ease;
}
.pw-next::after { content: "\2192"; flex: none; margin-left: auto; font-size: 22px; font-weight: 800; }
.pw-next img, .pw-next-icon { flex: none; width: 48px; height: 48px; border-radius: 12px; }
.pw-next-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--white); }
.pw-next-icon svg { width: 26px; height: 26px; }
.pw-next b { font-weight: 800; }
@media (hover: hover) { .pw-next:hover { border-color: var(--ink); background: var(--paper); } }

.pw-page .lobby-block { max-width: 680px; }
.pw-page .lobby-block .muted { text-wrap: pretty; }

@media (min-width: 720px) {
  .pw-hero { padding: 26px 20px 22px; gap: 12px; }
  .pw-check { max-width: 720px; min-height: 500px; padding: 0 20px 44px; }
  .pw-card { padding: 26px 28px 22px; }
  .gen { max-width: 720px; padding: 0 20px 72px; gap: 10px; }
  .gen-card { padding: 16px 32px 14px; }
  .gen-pw { --max: 58px; height: calc(var(--max) * 2.3); }
  .gen-time { --max: 40px; }
  .gen-copy { align-self: center; width: min(100%, 440px); }
  /* the quieter choices in one row under Copy: New one, Words or Random, how long */
  .gen-more { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; }
  .gen-opts { display: contents; }
  .gen-opts .pw-modes { flex: 0 1 240px; }
  .gen-size { flex: 0 1 250px; }
  .gen-note { flex: 1 0 100%; }
  .pw-sec, .pw-links { padding: 0 20px; margin-bottom: 52px; }
  .pw-list li { font-size: 19px; }
}
@media (max-width: 359px) {
  .gen-pw { --max: 36px; }
  .gen-time { --max: 28px; }
  .gen-opts { padding: 10px; }
  .pw-next { font-size: 17px; padding-right: 16px; }
}