/* QR code generator. Tokens, header and footer come from the site stylesheet. */
.intro h1 { font-size: 22px; margin: 0 0 12px; }
/* The blocks below set their own display, which would otherwise beat the hidden attribute. */
main [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Form */
#make { margin-top: 18px; }
.kinds { display: flex; gap: 18px; margin-bottom: 10px; }
.kinds label, .check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#make input:not([type=radio]):not([type=checkbox]):not([type=color]), #make select, #make textarea {
  font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--text); min-width: 0;
}
#make :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
#text { display: block; width: 100%; resize: vertical; font-family: var(--mono); font-size: 13px; }
.wifi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.wifi label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.wifi label input, .wifi label select { color: var(--text); font-size: 15px; }
.wifi .check { align-self: end; padding-bottom: 8px; }

/* 2FA */
.totp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.totp label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.totp label input, .totp label select { color: var(--text); font-size: 15px; }
.totp .secret { grid-column: 1 / -1; }
.secret-row { display: flex; gap: 8px; }
.secret-row input { flex: 1; font-family: var(--mono); letter-spacing: .04em; }
.secret-row button { white-space: nowrap; }
.adv { grid-column: 1 / -1; font-size: 14px; }
.adv summary { cursor: pointer; color: var(--muted); }
.adv-row { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; }
.adv-row label { flex-direction: row; align-items: center; gap: 8px; }
.small { font-size: 12.5px; margin: 8px 0 0; }
.totp-now { margin: 6px 0 0; font-size: 14px; }

/* Live 2FA code: the seconds left inside a ring that drains over the period, amber for the
   last 5 seconds, then the code (totp.js). */
.otp-live { display: flex; align-items: center; justify-content: center; gap: 10px; }
.otp-timer { position: relative; width: 38px; height: 38px; flex: none; }
.otp-ring { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.otp-secs {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text);
}
.otp-live.ending .otp-secs { color: #c27c00; }
.otp-ring circle { fill: none; stroke-width: 4; }
.otp-track { stroke: var(--line); }
.otp-fill { stroke: var(--accent); stroke-dasharray: 100; stroke-linecap: round; transition: stroke .3s; }
.otp-live.ending .otp-fill { stroke: #e8a317; }
.otp-code { display: inline-block; font-family: var(--mono); font-size: 18px; letter-spacing: .04em; }
.otp-code span + span { margin-left: .3em; }
.totp-note { max-width: 46ch; margin: 10px auto 0; }

.opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; font-size: 14px; }
.opts label { display: inline-flex; align-items: center; gap: 8px; }
.swatch input { width: 34px; height: 30px; padding: 0 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; }

/* Result */
.out { margin: 18px 0 8px; text-align: center; }
.qr {
  display: grid; place-items: center; width: min(100%, 300px); min-height: 200px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden;
}
/* A large PNG shown small. Smooth scaling (not pixelated) keeps the credit badge legible;
   at 1024 px and up the modules stay sharp anyway. */
.qr img { width: 100%; height: auto; display: block; }
.qr .empty { margin: 0; padding: 20px; font-size: 14px; }
.qr .empty.error { color: var(--err); }
.meta { margin: 8px 0 0; font-size: 12.5px; min-height: 1.4em; }
.warn-colors { text-align: left; font-size: 13.5px; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.actions button { padding: 8px 14px; }
.primary { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
.status { min-height: 1.45em; margin: 10px 0 0; font-size: 14px; }
.status.ok { color: var(--ok); }
.status.error { color: var(--err); }

@media (max-width: 560px) {
  .wifi, .totp { grid-template-columns: 1fr; }
}