/* Free Password Strength Checker. Tool-first layout on the shared Security Briefing palette. */
.pw { --weak: #b3261e; --warn: #8a5a00; --good: #0a7559; }
.pw h2 { margin-bottom: 1rem; }
.pw .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pw-wrap { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.pw-hero { padding: 1rem 0 7.5rem; background: var(--n); color: #fff; }
.pw .pw-hero .g-crumbs, .pw .pw-hero .g-crumbs a, .pw .pw-hero .g-crumbs li { color: #d5dbf0; }
.pw .pw-hero h1 { max-width: 16ch; margin: .75rem 0 .75rem; color: #fff; font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); line-height: 1.05; }
.pw-lede { max-width: 58ch; margin: 0; color: #e6e9f6; font-size: 1.125rem; line-height: 1.5; }
.pw-trust { display: inline-flex; align-items: center; gap: .5rem; margin: 1rem 0 0; color: #fff; font-size: .9375rem; font-weight: 600; }
.pw-trust svg { flex: none; width: 18px; height: 18px; color: var(--m); }
.pw-card { position: relative; display: grid; margin-top: -6rem; border: 1px solid var(--ln); border-top: 4px solid var(--m); border-radius: 6px; background: #fff; box-shadow: 0 10px 30px rgba(7, 26, 94, .12); }
.pw-main, .pw-side { padding: 1.25rem; min-width: 0; }
.pw-side { border-top: 1px solid var(--ln); background: var(--off); border-radius: 0 0 6px 6px; }
.pw-label { display: block; margin-bottom: .375rem; color: var(--n); font-weight: 700; }
.pw-field { display: flex; align-items: stretch; border: 2px solid var(--n); border-radius: 4px; background: #fff; }
.pw-field:focus-within { outline: 3px solid var(--m); outline-offset: 1px; }
.pw .pw-field input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 52px; padding: 0 .875rem; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 1.125rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pw-field button { flex: none; min-width: 56px; min-height: 44px; padding: 0 .75rem; border: 0; border-left: 1px solid var(--ln); background: transparent; color: var(--n); font: 600 .9375rem/1 "DM Sans", system-ui, sans-serif; cursor: pointer; }
.pw-field button:hover { background: var(--off); }
.pw-field button:focus-visible { outline: 2px solid var(--n); outline-offset: -3px; }
.pw-field button[hidden] { display: none; }
.pw-hint { margin: .5rem 0 0; color: var(--mut); font-size: .875rem; line-height: 1.4; }
.pw-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 1.25rem 0 .75rem; }
.pw-meter span { height: 10px; border-radius: 2px; background: var(--ln); transition: background-color .18s ease-out; }
.pw-meter[data-level="0"] span:nth-child(-n+1), .pw-meter[data-level="1"] span:nth-child(-n+2) { background: var(--weak); }
.pw-meter[data-level="2"] span:nth-child(-n+3) { background: #c98a00; }
.pw-meter[data-level="3"] span:nth-child(-n+4), .pw-meter[data-level="4"] span { background: var(--good); }
.pw .pw-verdict { margin: 0; color: var(--n); font: 700 clamp(1.625rem, 1.4rem + 1vw, 2.125rem)/1.15 "Source Serif 4", Georgia, serif; }
.pw-say { margin: .25rem 0 0; font-size: 1.0625rem; }
.pw .pw-findings { margin: .75rem 0 0; padding-left: 1.125rem; font-size: .9375rem; line-height: 1.45; }
.pw .pw-findings li { margin: .25rem 0; }
.pw-next { display: inline-flex; align-items: center; min-height: 44px; margin-top: .875rem; padding: 0 1rem; border-radius: 4px; background: var(--n); color: #fff !important; font-weight: 600; text-decoration: none !important; }
.pw-next:hover { background: #162c86; }
.pw-next[hidden] { display: none; }
.pw .pw-side h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.pw-time { display: grid; gap: .5rem; margin: 0 0 1.125rem; }
.pw-time > div { padding: .75rem .875rem; border: 1px solid var(--ln); border-radius: 4px; background: #fff; }
.pw-time dt { color: var(--mut); font-size: .875rem; line-height: 1.35; }
.pw-time dd { margin: .125rem 0 0; color: var(--n); font: 700 1.25rem/1.2 "Source Serif 4", Georgia, serif; }
.pw-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; margin: 0; font-size: .9375rem; }
.pw-stats > div { display: flex; justify-content: space-between; gap: .5rem; padding: .3125rem 0; border-bottom: 1px solid var(--ln); }
.pw-stats dt { color: var(--mut); }
.pw-stats dd { margin: 0; color: var(--n); font-weight: 700; white-space: nowrap; }
.pw-note { margin: .75rem 0 0; color: var(--mut); font-size: .8125rem; line-height: 1.4; }
.pw-sec { padding-block: 2.5rem; }
.pw-sec + .pw-sec { border-top: 1px solid var(--ln); }
.pw-sec > p, .pw-narrow { max-width: 72ch; }
.pw .pw-scale { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.pw .pw-scale li { display: grid; gap: .25rem; margin: 0; padding: .875rem 1rem; border: 1px solid var(--ln); border-radius: 4px; }
.pw-scale strong { color: var(--n); font: 700 1.125rem/1.2 "Source Serif 4", Georgia, serif; }
.pw-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 90px; margin-top: .25rem; }
.pw-mini i { height: 6px; border-radius: 1px; background: var(--ln); }
.pw-l0 .pw-mini i:nth-child(-n+1), .pw-l1 .pw-mini i:nth-child(-n+2) { background: var(--weak); }
.pw-l2 .pw-mini i:nth-child(-n+3) { background: #c98a00; }
.pw-l3 .pw-mini i:nth-child(-n+4), .pw-l4 .pw-mini i { background: var(--good); }
.g .pw-ex { min-width: 0; }
.pw-ex { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pw-ex caption { padding: 0 0 .625rem; color: var(--mut); font-size: .875rem; text-align: left; }
.pw-ex th, .pw-ex td { padding: .75rem; border-bottom: 1px solid var(--ln); text-align: left; vertical-align: middle; }
.pw-ex thead th { background: var(--n); color: #fff; font-size: .875rem; }
.pw-ex tbody th { font: 500 .9375rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; color: var(--ink); }
.pw-try { min-height: 40px; padding: 0 .875rem; border: 1px solid var(--n); border-radius: 4px; background: #fff; color: var(--n); font: 600 .875rem/1 "DM Sans", system-ui, sans-serif; cursor: pointer; }
.pw-try:hover { background: var(--n); color: #fff; }
.pw-try:focus-visible { outline: 3px solid var(--m); outline-offset: 2px; }
.pw .pw-steps { display: grid; gap: 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: s; }
.pw .pw-steps li { margin: 0; padding-top: .875rem; border-top: 3px solid var(--m); counter-increment: s; }
.pw-steps li::before { content: counter(s); display: block; margin-bottom: .25rem; color: #0a7559; font: 700 1.5rem/1 "Source Serif 4", Georgia, serif; }
.pw-steps h3 { margin: 0 0 .375rem; font-size: 1.25rem; }
.pw-steps p { margin: 0; }
.pw-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: 1.75rem; padding: 1.5rem; border-radius: 6px; background: var(--n); color: #fff; }
.pw .pw-band h3 { margin: 0 0 .25rem; color: #fff; font-size: 1.375rem; }
.pw-band p { margin: 0; color: #e6e9f6; }
.pw-band a { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 1.25rem; border-radius: 4px; background: var(--m); color: var(--n) !important; font-weight: 700; text-align: center; text-decoration: none !important; }
.pw-band a:hover { background: #63e6c5; }
.pw-two { display: grid; gap: 1.5rem; }
.pw-two h2 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
.pw .pw-two ul { margin: 0; padding-left: 1.125rem; }
.pw .pw-two li { margin: .5rem 0; }
.pw-faq .g-q { max-width: 80ch; }
.pw-links { display: grid; gap: 1rem; }
.pw-links h2 { font-size: 1.375rem; }
.pw .pw-links ul { margin: 0; padding: 0; list-style: none; }
.pw .pw-links li { margin: 0; border-bottom: 1px solid var(--ln); }
.pw-links li a { display: flex; align-items: center; min-height: 48px; padding: .375rem 0; font-weight: 600; }
@media (max-width: 639.98px) {
  .pw-ex thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pw-ex, .pw-ex tbody, .pw-ex tr, .pw-ex td, .pw-ex tbody th { display: block; width: 100%; }
  .pw-ex caption { display: block; }
  .pw-ex tr { padding: .75rem 0; border-top: 1px solid var(--ln); }
  .pw-ex td, .pw-ex tbody th { padding: .1875rem 0; border: 0; }
  .pw-ex td[data-l]::before { content: attr(data-l) ": "; color: var(--n); font-weight: 700; }
  .pw-ex td:last-child { padding-top: .5rem; }
}
@media (min-width: 640px) {
  .pw .pw-scale li { grid-template-columns: 9rem 1fr 1fr; align-items: start; gap: 1.25rem; }
  .pw-band { grid-template-columns: minmax(0, 1fr) auto; }
  .pw-band a { white-space: nowrap; }
  .pw-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (min-width: 960px) {
  .pw-hero { padding-bottom: 8rem; }
  .pw-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pw-main, .pw-side { padding: 2rem; }
  .pw-side { border-top: 0; border-left: 1px solid var(--ln); border-radius: 0 6px 6px 0; }
  .pw .pw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .pw-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .pw-meter span { transition: none; } }