/* ============================================================
   5i.fi/pw — password generator. Inherits tokens + background
   from ../styles.css; mirrors the /ip tools look.
   ============================================================ */

:root {
  --field:  #0F141A;
  --danger: #F2686B;
}

.pw-wrap {
  max-width: var(--maxw);   /* shared site width, from ../styles.css */
  margin: 0 auto;
  padding: 0 24px 40px;
}
.ip-page .footer { max-width: var(--maxw); }
.node-id__path { color: var(--muted); }

.share-btn {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--hairline-2);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.share-btn:hover { color: var(--aqua); border-color: var(--aqua-dim); }

/* ---------- Hero ---------- */
.page-hero { padding: clamp(48px, 9vw, 96px) 0 clamp(28px, 5vw, 44px); }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}
.page-hero__lede {
  max-width: 56ch;
  color: #C4CCD4;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  margin: 0;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}
.tab {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.tab:hover { color: var(--text); border-color: var(--hairline-2); background: var(--panel); }
.tab.is-active { color: var(--bg); background: var(--aqua); border-color: var(--aqua); font-weight: 600; }

/* ---------- Panels ---------- */
.tool { display: none; padding: clamp(24px, 4vw, 36px) 0 8px; }
.tool.is-active { display: block; animation: toolIn .28s ease; }
.tool:focus-visible { outline: none; }
@keyframes toolIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Generated output ---------- */
.gen__out {
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 3.6vw, 1.6rem);
  color: var(--aqua);
  background: var(--field);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  padding: 20px 20px;
  min-height: 68px;
  display: flex;
  align-items: center;
  word-break: break-all;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .16s ease;
  user-select: all;
}
.gen__out:hover { border-color: var(--aqua-dim); }
.gen__out:focus-visible { outline: none; border-color: var(--aqua-dim); box-shadow: 0 0 0 3px rgba(63,224,200,0.14); }
.gen__out.is-empty { color: var(--muted-dim); }

.gen__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.btn {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--hairline-2);
  border-radius: 9px;
  padding: 11px 18px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.btn:hover { color: var(--aqua); border-color: var(--aqua-dim); }
.btn--primary { color: var(--bg); background: var(--aqua); border-color: var(--aqua); font-weight: 600; }
.btn--primary:hover { color: var(--bg); filter: brightness(1.08); }

/* ---------- Strength meter ---------- */
.meter {
  height: 6px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 22px;
}
.meter__bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--muted-dim);
  transition: width .25s ease, background .25s ease;
}
.meter__bar.is-weak   { background: var(--danger); }
.meter__bar.is-fair   { background: var(--amber); }
.meter__bar.is-strong { background: var(--aqua); }
.meter__bar.is-vstrong{ background: #58f5b0; }
.meter__label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  margin: 10px 2px 0;
}
.meter__label b { color: var(--text); font-weight: 600; }
.meter__label .err { color: var(--danger); }

/* ---------- Controls ---------- */
.controls { margin-bottom: 26px; display: flex; flex-direction: column; gap: 22px; }
.ctl { display: flex; flex-direction: column; gap: 10px; }
.ctl__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.lbl {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ctl__val {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--aqua);
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--hairline-2);
  border-radius: 999px;
  outline-offset: 6px;
  accent-color: var(--aqua);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--aqua);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px rgba(63,224,200,0.4);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--aqua);
  cursor: pointer;
  border: none;
}

/* checkbox pills */
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.opt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--hairline-2);
  border-radius: 9px;
  padding: 9px 14px;
  cursor: pointer;
  user-select: none;
  transition: border-color .16s ease;
}
.opt:hover { border-color: var(--aqua-dim); }
.opt input { accent-color: var(--aqua); width: 15px; height: 15px; cursor: pointer; }

select.inp {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--hairline-2);
  border-radius: 9px;
  padding: 10px 34px 10px 13px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.inp:focus { outline: none; border-color: var(--aqua-dim); box-shadow: 0 0 0 3px rgba(63,224,200,0.14); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--panel-2);
  border: 1px solid var(--aqua-dim);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .gen__actions { flex-direction: column; }
  .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tool.is-active { animation: none; }
  .meter__bar { transition: none; }
}