/* Tools pages: index cards, password field with show/hide, strength meter, crack times and leak-check results. Theme tokens come from styles.css. */

/* ---- Index cards: the whole card is one link (stretched from the title), with a visual button. ---- */
.tool-card { position: relative; }
.tool-badge { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius); background: hsl(var(--link) / 0.12); color: hsl(var(--link)); }
.tool-icon { inline-size: 1.4rem; block-size: 1.4rem; }
.tool-card h3 { font-size: var(--step-1); }
.tool-link { color: inherit; text-decoration: none; }
.tool-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tool-link:focus-visible { outline: none; }
.tool-card:focus-within { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.tool-value { font-weight: 600; }
.tool-card .muted { font-size: var(--step--1); }
@media (hover: hover) {
  .tool-card { transition: border-color 160ms var(--ease-out, ease-out), transform 160ms var(--ease-out, ease-out); }
  .tool-card:hover { border-color: hsl(var(--link) / 0.6); transform: translateY(-2px); }
}

/* ---- Password field with an inline show/hide button ---- */
/* One reading column on the tool pages: the form and every card below it share the same width. */
main > *:not(:has(.tool-card)) { max-width: 48rem; } /* the tools index card grid keeps the full width */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1 1 auto; min-width: 0; padding-inline-end: 6rem; font-family: var(--mono); }
.pw-toggle { position: absolute; inset-block: 0.25rem; inset-inline-end: 0.25rem; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 2.75rem; padding-inline: var(--space-3); border: 0; border-radius: calc(var(--radius) - 0.2rem); background: hsl(var(--secondary)); color: hsl(var(--foreground)); font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer; }
.pw-toggle:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.pw-toggle svg { inline-size: 1.1rem; block-size: 1.1rem; }
.pw-toggle .i-eye-off, .pw-toggle[aria-pressed="true"] .i-eye { display: none; }
.pw-toggle[aria-pressed="true"] .i-eye-off { display: block; }
.private-note { display: flex; gap: var(--space-2); align-items: flex-start; color: hsl(var(--ok)); font-weight: 600; }
.private-note svg { flex: none; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.15rem; }

/* ---- Strength meter: five segments, colour and label per level ---- */
.meter-block { padding: var(--space-4); border-radius: var(--radius); background: hsl(var(--secondary)); }
.meter-block > * + * { margin-block-start: var(--space-3); }
.seg-meter > span { block-size: 0.5rem; transition: background-color 200ms var(--ease-out, ease-out); }
.meter-block[data-score="0"] .strength-label { color: hsl(var(--grade-f)); }
.meter-block[data-score="1"] .strength-label { color: hsl(var(--grade-d)); }
.meter-block[data-score="2"] .strength-label { color: hsl(var(--grade-c)); }
.meter-block[data-score="3"] .strength-label { color: hsl(var(--grade-b)); }
.meter-block[data-score="4"] .strength-label { color: hsl(var(--grade-a)); }
.crack-headline { font-weight: 600; }

/* ---- Result cards ---- */
.stack-result > * + * { margin-block-start: var(--space-4); }
.feedback { list-style: none; padding: 0; }
.feedback > li { position: relative; padding-inline-start: 1.75rem; }
.feedback > li + li { margin-block-start: var(--space-2); }
.feedback > li::before { position: absolute; inset-inline-start: 0; inset-block-start: 0.1rem; display: grid; place-items: center; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; font-size: 0.8rem; font-weight: 800; line-height: 1; }
.feedback > .fb-bad::before { content: "!"; background: hsl(var(--warn)); color: hsl(var(--background)); }
.feedback > .fb-good::before { content: "\2713"; background: hsl(var(--ok)); color: hsl(var(--background)); }

.crack-times { list-style: none; padding: 0; }
.crack-times > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid hsl(var(--border)); margin: 0; }
.crack-times > li:last-child { border-bottom: 0; }
.ct-text { display: flex; flex-direction: column; flex: 1 1 18rem; min-width: 0; }
.ct-label { font-weight: 600; }
.ct-time { font-size: var(--step-1); font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }

/* ---- Leak check result ---- */
.leak-result { display: flex; gap: var(--space-4); align-items: flex-start; border-inline-start: 6px solid hsl(var(--info)); }
.leak-result:focus { outline: none; }
.leak-result:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.leak-text { min-width: 0; }
.leak-text > * + * { margin-block-start: var(--space-2); }
.leak-icon { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; color: hsl(var(--background)); background: hsl(var(--info)); }
.leak-icon svg { inline-size: 1.4rem; block-size: 1.4rem; }
.leak-result[data-kind="ok"] { border-inline-start-color: hsl(var(--ok)); }
.leak-result[data-kind="ok"] .leak-icon { background: hsl(var(--ok)); }
.leak-result[data-kind="ok"] h3 { color: hsl(var(--ok)); }
.leak-result[data-kind="bad"] { border-inline-start-color: hsl(var(--danger)); }
.leak-result[data-kind="bad"] .leak-icon { background: hsl(var(--danger)); }
.leak-result[data-kind="bad"] h3 { color: hsl(var(--danger)); }
.leak-result[data-kind="error"] { border-inline-start-color: hsl(var(--warn)); }
.leak-result[data-kind="error"] .leak-icon { background: hsl(var(--warn)); }

.kanon { padding-inline-start: 1.5rem; }
.kanon > li + li { margin-block-start: var(--space-2); }

@media (max-width: 30rem) {
  .pw-toggle-text { display: none; }
  .pw-wrap input { padding-inline-end: 3.5rem; }
  .leak-result { flex-direction: column; gap: var(--space-3); }
  .ct-time { text-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card, .seg-meter > span { transition: none; }
  .tool-card:hover { transform: none; }
}
.tool-card h3 br { display: none; }
/* The tools index is a full-width grid page: its sections line up with the card grid. */
main:has(.tool-card) > * { max-width: none; }