.wp-block-rank-math-toc-block nav ol{counter-reset:item}.wp-block-rank-math-toc-block nav ol li{display:block}.wp-block-rank-math-toc-block nav ol li:before{content:counters(item, ".") ". ";counter-increment:item}.or-pwgen {
--or-red: #e2000b;
--or-yellow: #f4be3e;
--or-black: #000;
--or-dark: #333;
--or-grey: #545454;
max-width: 720px;
padding: 22px;
border: 2px solid var(--or-black);
border-radius: 10px;
background: #fff;
color: var(--or-dark);
font: inherit;
box-sizing: border-box;
}
.or-pwgen *,
.or-pwgen *::before,
.or-pwgen *::after {
box-sizing: border-box;
}
.or-pwgen__topline {
margin-bottom: 12px;
}
.or-pwgen__eyebrow {
display: inline-block;
font-weight: 800;
font-size: .9rem;
}
.or-pwgen__result-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
margin-bottom: 18px;
}
.or-pwgen__result,
.or-pwgen__specials,
.or-pwgen__length-input {
min-height: 46px;
border: 1px solid #b9b9b9;
border-radius: 6px;
background: #fff;
color: var(--or-black);
font: inherit;
}
.or-pwgen__result {
width: 100%;
padding: 9px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1.05rem;
font-weight: 700;
}
.or-pwgen button {
min-height: 44px;
border: 0;
border-radius: 6px;
cursor: pointer;
font: inherit;
font-weight: 800;
}
.or-pwgen__copy,
.or-pwgen__generate {
padding: 9px 16px;
background: var(--or-red);
color: #fff;
}
.or-pwgen__controls {
display: grid;
gap: 14px;
}
.or-pwgen__length {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.or-pwgen__label {
font-weight: 800;
}
.or-pwgen__step {
width: 44px;
background: #eee;
color: var(--or-black);
}
.or-pwgen__length-input {
width: 78px;
padding: 8px 10px;
text-align: center;
font-weight: 800;
}
.or-pwgen__families {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
}
.or-pwgen__families label {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
cursor: pointer;
font-weight: 700;
}
.or-pwgen__families input {
width: 18px;
height: 18px;
accent-color: var(--or-red);
}
.or-pwgen__specials-wrap {
display: grid;
gap: 6px;
}
.or-pwgen__specials-wrap[hidden] {
display: none;
}
.or-pwgen__specials {
width: 100%;
padding: 9px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1rem;
}
.or-pwgen__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
margin-top: 18px;
}
.or-pwgen__status {
margin: 0;
min-height: 1.25em;
color: var(--or-grey);
font-size: .9rem;
}
.or-pwgen__note {
margin: 16px 0 0;
padding-top: 12px;
border-top: 1px solid #ddd;
color: var(--or-grey);
font-size: .88rem;
line-height: 1.4;
}
.or-pwgen button:hover {
filter: brightness(.94);
}
.or-pwgen button:focus-visible,
.or-pwgen input:focus-visible {
outline: 3px solid var(--or-yellow);
outline-offset: 2px;
}
@media (max-width: 520px) {
.or-pwgen {
padding: 16px;
}
.or-pwgen__result-row {
grid-template-columns: 1fr;
}
.or-pwgen__copy,
.or-pwgen__generate {
width: 100%;
}
.or-pwgen__families {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 10px;
}
}