/*! Satnam Siri WaheGuru Shaib Ji
 * pwgen.css — Password Generator (redesign). Reuses site tokens/header/footer from main.css. */

.tool-main { max-width: 1040px; padding-top: 30px; padding-bottom: 56px; }
.tool-main svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- tool head ---- */
.tool-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.tool-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; flex: none; }
.tool-ic svg { width: 26px; height: 26px; }
.tool-head > div:not(.tool-ic) { flex: 1; min-width: 0; }
.tool-head h1 { margin: 0; font-size: clamp(1.4rem, 1rem + 1.9vw, 2rem); letter-spacing: -.02em; }
.tool-head p { margin: 3px 0 0; color: var(--muted); font-size: .92rem; }
.tool-head .pill { margin-left: auto; align-self: flex-start; flex: none; }

/* ---- result card ---- */
.result-card { border: 1px solid var(--border); border-radius: 20px; padding: 26px 28px 22px;
  margin-bottom: 22px; box-shadow: var(--shadow-md);
  background:
    radial-gradient(90% 120% at 15% 0%, color-mix(in srgb, var(--c-purple) 12%, transparent), transparent 60%),
    radial-gradient(80% 120% at 90% 10%, color-mix(in srgb, var(--c-blue) 12%, transparent), transparent 55%),
    var(--bg-2); }
.rc-status { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 650;
  font-size: .95rem; margin-bottom: 14px; }
.rc-status svg { width: 20px; height: 20px; }
.rc-main { display: flex; align-items: center; gap: 16px; }
.rc-pw { flex: 1; min-width: 0; text-align: center; font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: clamp(1.3rem, 4vw, 2.3rem); font-weight: 600; letter-spacing: .04em; color: var(--text);
  line-height: 1.3; white-space: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: thin; padding-bottom: 2px; }
.rc-pw::-webkit-scrollbar { height: 5px; }
.rc-pw::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.rc-pw .pw-dot { opacity: .45; }
.rc-actions { display: flex; gap: 8px; flex: none; }
.rc-actions .pw-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-2); color: var(--muted); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.rc-actions .pw-btn:hover { color: var(--accent); border-color: var(--accent); }
.rc-actions .pw-btn svg { width: 20px; height: 20px; }
.rc-actions .pw-btn.copied { color: var(--ok); border-color: var(--ok); }
.pw-btn .i-eye-off, .pw-btn.revealed .i-eye { display: none; }
.pw-btn.revealed .i-eye-off { display: block; }
.pw-btn .i-check { display: none; }
.pw-btn.copied .i-copy { display: none; }
.pw-btn.copied .i-check { display: block; }

.strength-segments { display: flex; gap: 6px; margin: 20px 0 20px; }
.strength-segments .seg { flex: 1; height: 7px; border-radius: 99px; background: var(--bg-3); transition: background .2s; }
.strength-segments .seg.on { background: var(--seg-color, var(--accent)); }

.rc-bar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.regen { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; font-size: 1rem;
  border-radius: 12px; }
.regen svg { width: 18px; height: 18px; }
.rc-readout { display: flex; align-items: center; gap: 10px; }
.rc-readout > svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.rc-readout.strong-read > svg { color: var(--ok); }
.rc-readout .ro-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.rc-readout .ro-v { font-weight: 700; font-size: 1.02rem; }
.rc-readout .ro-note { font-size: .78rem; color: var(--muted); }
.rc-bar .spacer { margin-left: auto; }

/* ---- 2-col: controls + info card ---- */
.pwgen-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pwgen-grid > * { min-width: 0; }
.controls-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 24px; box-shadow: var(--shadow-sm); }

/* tabs */
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border-2); margin-bottom: 22px; }
.tab { padding: 4px 2px 12px; font-size: .96rem; font-weight: 600; color: var(--muted); position: relative; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); }
.tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px; }

.panel[hidden] { display: none; }
.panel { display: flex; flex-direction: column; gap: 22px; }
.field-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.field-top label, .field > label { font-weight: 600; font-size: .95rem; }
.len-chip { text-align: center; border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px;
  min-width: 92px; }
.len-chip b { display: block; font-size: 1.35rem; font-family: ui-monospace, monospace; color: var(--accent); }
.len-chip span { font-size: .74rem; color: var(--muted); }
.len-row { display: flex; align-items: center; gap: 18px; }
.len-row .len-slider { flex: 1; }
.slider-ends { display: flex; justify-content: space-between; font-size: .74rem; color: var(--faint); margin-top: 4px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px;
  background: var(--bg-3); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid var(--bg-2); box-shadow: var(--shadow-sm); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
  cursor: pointer; border: 3px solid var(--bg-2); }

/* character-type cards */
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.type-card { position: relative; border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px;
  cursor: pointer; user-select: none; transition: border-color .12s, background .12s; }
.type-card input { position: absolute; opacity: 0; }
.type-card .check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 6px;
  border: 1.6px solid var(--border); display: grid; place-items: center; }
.type-card .check svg { width: 13px; height: 13px; color: var(--accent-ink); opacity: 0; }
.type-card input:checked ~ .check { background: var(--accent); border-color: var(--accent); }
.type-card input:checked ~ .check svg { opacity: 1; }
.type-card input:checked ~ .tc-sample { color: var(--accent); }
.type-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.tc-sample { font-size: 1.5rem; font-weight: 700; font-family: ui-monospace, monospace; line-height: 1; margin-bottom: 6px; }
.tc-name { font-weight: 600; font-size: .92rem; }
.tc-range { font-size: .78rem; color: var(--muted); font-family: ui-monospace, monospace; }

/* toggle row (exclude look-alikes) */
.toggle-row { display: flex; align-items: center; gap: 12px; }
.toggle-row .tr-text { flex: 1; }
.toggle-row .tr-text b { font-weight: 600; font-size: .95rem; }
.toggle-row .tr-text span { display: block; font-size: .82rem; color: var(--muted); }
.switch-toggle { position: relative; width: 44px; height: 26px; flex: none; cursor: pointer; }
.switch-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-toggle .track { position: absolute; inset: 0; border-radius: 99px; background: var(--bg-3);
  border: 1px solid var(--border); transition: background .15s; }
.switch-toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch-toggle input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.switch-toggle input:checked ~ .track::after { transform: translateX(18px); }

/* advanced options */
details.advanced { border-top: 1px solid var(--border-2); padding-top: 16px; }
details.advanced > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600;
  font-size: .92rem; list-style: none; color: var(--muted); }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary .chev { margin-left: auto; transition: transform .15s; width: 16px; height: 16px; }
details.advanced[open] > summary .chev { transform: rotate(180deg); }
details.advanced .adv-body { padding-top: 16px; }

.mono { font-family: ui-monospace, monospace; color: var(--faint); font-size: .82rem; }
select { font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 10px; }
select:focus, input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="number"] { font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 10px; }
.field-val { font-family: ui-monospace, monospace; font-weight: 700; color: var(--accent); }
.switches { display: flex; flex-wrap: wrap; gap: 12px; }

/* custom-rule blocks */
.blocks { display: flex; flex-wrap: wrap; gap: 10px; }
.block { display: flex; align-items: center; gap: 6px; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 11px; padding: 7px 8px; }
.block .idx { width: 20px; height: 20px; border-radius: 6px; background: var(--bg-2); color: var(--faint);
  font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.block select { padding: 6px 8px; border-radius: 8px; background: var(--bg-2); }
.block input[type="number"] { width: 56px; padding: 6px; text-align: center; }
.block .pw-btn { width: 30px; height: 30px; border: 0; background: none; color: var(--muted); border-radius: 7px;
  display: grid; place-items: center; cursor: pointer; }
.block .pw-btn:hover { background: var(--bg-2); color: var(--text); }
.block .pw-btn svg { width: 15px; height: 15px; }
.add-block { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px dashed var(--border);
  border-radius: 11px; color: var(--accent); font-weight: 600; font-size: .9rem; background: none; cursor: pointer; }
.add-block:hover { background: var(--accent-soft); }
.add-block svg { width: 16px; height: 16px; }
.rule-total { color: var(--muted); font-size: .85rem; }

/* ---- rotating info card ---- */
.info-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 18px; padding: 20px 20px 16px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.ic-head { display: flex; align-items: center; justify-content: space-between; }
.ic-counter { font-size: .72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft);
  padding: 3px 10px; border-radius: 99px; }
.ic-nav { display: flex; gap: 4px; }
.ic-nav button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2);
  color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.ic-nav button:hover { color: var(--text); border-color: var(--accent); }
.ic-nav button svg { width: 15px; height: 15px; }
.ic-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin-top: 4px; }
.ic-icon svg { width: 26px; height: 26px; }
.ic-title { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.ic-body { color: var(--muted); font-size: .9rem; line-height: 1.5; flex: 1; }
.ic-body b { color: var(--text); }
.ic-dots { display: flex; gap: 6px; }
.ic-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background .15s, width .15s; }
.ic-dots i.on { background: var(--accent); width: 18px; border-radius: 4px; }

/* ---- trust bar ---- */
.trust-bar { margin-top: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-2);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px 22px; box-shadow: var(--shadow-sm); }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item .ti-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.trust-item .ti-ic svg { width: 20px; height: 20px; }
.ti-purple { background: color-mix(in srgb, var(--c-purple) 14%, transparent); color: var(--c-purple); }
.ti-green  { background: color-mix(in srgb, var(--c-green) 15%, transparent);  color: var(--c-green); }
.ti-blue   { background: color-mix(in srgb, var(--c-blue) 14%, transparent);   color: var(--c-blue); }
.ti-rose   { background: color-mix(in srgb, var(--c-rose) 14%, transparent);   color: var(--c-rose); }
.trust-item b { font-weight: 650; font-size: .9rem; }
.trust-item span { display: block; font-size: .78rem; color: var(--muted); }

@media (max-width: 820px) {
  .pwgen-grid { grid-template-columns: minmax(0, 1fr); }
  .type-grid { grid-template-columns: 1fr 1fr; }
  .trust-bar { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .rc-bar { gap: 16px; }
  .rc-bar .spacer { display: none; }
}
/* under 750px the icon tile spans the full height of the head (title + description) */
@media (max-width: 750px) {
  .tool-head { align-items: stretch; }
  .tool-ic { height: auto; align-self: stretch; }
}
@media (max-width: 560px) {
  .tool-main { padding-top: 22px; }
  .tool-head { gap: 12px; margin-bottom: 18px; }
  .tool-head p { font-size: .86rem; }
  .result-card { padding: 22px 18px 20px; }
  .controls-card { padding: 20px 16px; }
  /* tabs never overflow the card — shrink gap, keep labels intact, scroll if truly tight */
  .tabs { gap: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; }
  /* custom-rule builder + passphrase controls stay inside the viewport */
  .blocks { gap: 8px; }
  .block { flex: 1 1 100%; min-width: 0; gap: 5px; padding: 6px 7px; }
  .block .idx { width: 18px; height: 18px; }
  .block select { min-width: 0; flex: 1; font-size: .95rem; padding: 6px 18px 6px 8px; }
  .block input[type="number"] { width: 40px; }
  .block .pw-btn { width: 26px; height: 26px; }
  .switches { gap: 10px; }
  .switches .toggle-row { flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .rc-main { flex-direction: column; align-items: stretch; }
  .rc-actions { justify-content: center; }
  .trust-bar { grid-template-columns: 1fr; }
  .rc-readout { flex: 1 0 40%; }
}
@media (max-width: 430px) {
  .tool-head .pill { display: none; }
}
/* hayerapps · v0.1.0 */