/* ChrysoKit . Password Strength Checker . styles . 20260516a */

/* ---------- Tokens ---------- */
.ps-app {
  --ps-accent:    var(--color-terra,   #D4A373);
  --ps-display:   #9C5F2E;
  --ps-bg:        var(--surface,       #fff);
  --ps-bg-2:      var(--surface-2,     #FAF6E8);
  --ps-text:      var(--text,          #2A2620);
  --ps-muted:     #5C544A;
  --ps-border:    var(--border,        #E7DFC9);
  --ps-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;

  /* Strength colors (tuned for AA contrast on both themes) */
  --ps-c-vweak:  #B33A22;
  --ps-c-weak:   #B85F12;
  --ps-c-fair:   #8A5A0E;
  --ps-c-strong: #3D7E36;
  --ps-c-vstrong:#1F7050;
  --ps-c-excel:  #145E37;

  /* Finding colors */
  --ps-good:     #145E37;
  --ps-good-bg:  rgba(20, 94, 55, 0.08);
  --ps-good-bd:  rgba(20, 94, 55, 0.32);
  --ps-bad:      #9C2F18;
  --ps-bad-bg:   rgba(156, 47, 24, 0.07);
  --ps-bad-bd:   rgba(156, 47, 24, 0.30);

  --r-sm: 8px; --r-md: 10px; --r-lg: 12px;
}
[data-theme="dark"] .ps-app {
  --ps-display:   #F0B57F;
  --ps-bg:        #211C18;
  --ps-bg-2:      #1A1612;
  --ps-text:      #F4ECDB;
  --ps-muted:     #CBC0AB;
  --ps-border:    #3A2F26;

  --ps-c-vweak:  #FF8E7D;
  --ps-c-weak:   #FFA45A;
  --ps-c-fair:   #F0B450;
  --ps-c-strong: #8FD17A;
  --ps-c-vstrong:#7BD0A8;
  --ps-c-excel:  #6FD49A;

  --ps-good:     #6FD49A;
  --ps-good-bg:  rgba(111, 212, 154, 0.14);
  --ps-good-bd:  rgba(111, 212, 154, 0.38);
  --ps-bad:      #FF8E7D;
  --ps-bad-bg:   rgba(255, 142, 125, 0.12);
  --ps-bad-bd:   rgba(255, 142, 125, 0.38);
}

/* ---------- Layout ---------- */
.ps-app { color: var(--ps-text); }

.ps-app .ps-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ps-app .ps-pw-input {
  flex: 1;
  min-width: 0;
  font-family: var(--ps-mono);
  font-size: 1rem;
}
.ps-app .ps-icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ps-app .ps-icon-btn svg { width: 18px; height: 18px; }

.ps-app .ps-meta {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .82rem;
  color: var(--ps-muted);
  flex-wrap: wrap;
}
.ps-app .ps-tip { font-style: italic; }

/* ---------- Strength bar ---------- */
.ps-app .ps-bar {
  height: 10px;
  border-radius: 6px;
  background: var(--ps-bg-2);
  border: 1px solid var(--ps-border);
  overflow: hidden;
  margin-top: 18px;
}
.ps-app .ps-bar-fill {
  height: 100%;
  width: 0;
  background: var(--ps-c-vweak);
  border-radius: 6px;
  transition: width .25s ease, background .25s ease;
}
.ps-app .ps-label-row {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  margin-top: 8px;
  gap: 10px;
  flex-wrap: wrap;
}
.ps-app .ps-label {
  font-weight: 700;
  color: var(--ps-c-vweak);
}
.ps-app .ps-entropy {
  color: var(--ps-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Crack times ---------- */
.ps-app .ps-crack-box {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.ps-app .ps-crack-card {
  background: var(--ps-bg-2);
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  padding: 12px 14px;
}
.ps-app .ps-crack-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ps-muted);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
}
.ps-app .ps-crack-head svg { width: 14px; height: 14px; }
.ps-app .ps-crack-value {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ps-text);
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.ps-app .ps-crack-sub {
  font-size: .74rem;
  color: var(--ps-muted);
}

/* ---------- Block (findings, suggestions) ---------- */
.ps-app .ps-block { margin-top: 20px; }
.ps-app .ps-block-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ps-text);
}

/* ---------- Findings ---------- */
.ps-app .ps-issues {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-app .ps-issue {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .9rem;
  border: 1px solid;
}
.ps-app .ps-issue svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.ps-app .ps-issue.is-good {
  color: var(--ps-good);
  background: var(--ps-good-bg);
  border-color: var(--ps-good-bd);
}
.ps-app .ps-issue.is-bad {
  color: var(--ps-bad);
  background: var(--ps-bad-bg);
  border-color: var(--ps-bad-bd);
}

/* ---------- Suggestions ---------- */
.ps-app .ps-suggest {
  margin: 0;
  padding-left: 20px;
  color: var(--ps-text);
}
.ps-app .ps-suggest li {
  margin-bottom: 4px;
  color: var(--ps-text);
}
.ps-app .ps-suggest li::marker { color: var(--ps-display); }