/* One page, one job. Plain CSS, no build step, no framework — the whole tool is
   a number, four checkboxes and a string, and it should load instantly on a
   phone on the office wifi. Dark mode follows the system rather than adding a
   toggle. */

:root {
  --bg: #fbfbfa;
  --panel: #ffffff;
  --ink: #1b1c1e;
  --muted: #61656c;
  --line: #e2e2df;
  --accent: #1f5f8b;
  --accent-soft: #eaf2f8;
  --error: #a03024;
  --ok: #2f6f4f;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181b;
    --panel: #1e2126;
    --ink: #ececec;
    --muted: #a0a5ad;
    --line: #31353b;
    --accent: #7cb6dd;
    --accent-soft: #22303c;
    --error: #f0a094;
    --ok: #8fd0ae;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

main { max-width: 36rem; margin: 0 auto; }

h1 {
  margin: 0 0 .25rem;
  font-size: 1.5rem;
  letter-spacing: -.01em;
}

.lede { margin: 0 0 1.75rem; color: var(--muted); }

/* -- the form ------------------------------------------------------------ */

form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1.25rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}

.field { display: flex; flex-direction: column; gap: .45rem; }
.field.length { flex: 0 0 7rem; }
.field.sets { flex: 1 1 16rem; }

.label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="number"] {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

input[type="number"]:focus-visible,
button:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  padding-top: .15rem;
}

.check {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  cursor: pointer;
}

.check.wide { margin-top: 1rem; }

.check input { margin: 0; accent-color: var(--accent); }

.hint {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

button {
  margin-top: 1.15rem;
  padding: .6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  button { color: #16181b; }
}

button:hover { filter: brightness(1.06); }

/* -- the password -------------------------------------------------------- */

.result {
  margin-top: 1.5rem;
  padding: 1.1rem 1.15rem;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.password {
  display: block;
  font: 1.3rem/1.4 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
  /* A password is read character by character, so it must wrap anywhere rather
     than scroll off the edge, and word-spacing keeps runs of symbols legible. */
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: .85rem 0 0;
  font-size: .85rem;
  color: var(--muted);
}

.strength { font-weight: 700; color: var(--ink); }
.strength-weak { color: var(--error); }
.strength-fair { color: var(--ink); }
.strength-strong,
.strength-excellent { color: var(--ok); }

.result .copy {
  margin-top: .9rem;
  padding: .4rem .8rem;
  font-size: .9rem;
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.result .copy.copied { border-color: var(--ok); color: var(--ok); }

@media (prefers-color-scheme: dark) {
  .result .copy { color: var(--accent); }
}

.error {
  margin: 1.5rem 0 0;
  padding: .85rem 1rem;
  color: var(--error);
  background: var(--panel);
  border: 1px solid currentColor;
  border-radius: var(--radius);
}

/* -- footer -------------------------------------------------------------- */

footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--muted);
}

footer p { margin: 0 0 .5rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
  overflow-wrap: anywhere;
}