/* ============================================================
   Small additions to the site's .st-* simple-tools design system
   (wwwroot/css/simple-tools.css), for the Q cluster tools whose
   shape does not fit a few fields and one answer: the typing
   test, bulk QR generator and quote image generator.

   EVERYTHING HERE IS SCOPED under a .qt- prefix, so loading this
   file changes no page that has not opted into it.
   ============================================================ */

/* ---- typing test ---- */

.qt-passage {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    line-height: 1.7;
    padding: 16px;
    border-radius: 12px;
    background: var(--surface-2, #f7f8fc);
    border: 1px solid var(--border, #e3e6ee);
    user-select: none;
}

.qt-char-correct { color: #1faa63; }
.qt-char-wrong { color: #fff; background: #d64545; border-radius: 2px; }
.qt-char-pending { color: var(--ink-3, #5f677d); }
.qt-char-cursor { border-left: 2px solid #5b8def; }

.qt-input {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
    border: 1px solid var(--border, #d9dde8);
    border-radius: 10px;
    resize: none;
}

.qt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.qt-stat {
    background: linear-gradient(135deg, #eef1fd, #f6f2ff);
    border: 1px solid #ddd7fb;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
}

.qt-stat-value { font-size: 22px; font-weight: 700; color: #6a45d8; font-variant-numeric: tabular-nums; }
.qt-stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3, #5f677d); }

.qt-duration-btns { display: flex; gap: 8px; margin-bottom: 12px; }

.qt-duration-btns button.is-active {
    background: linear-gradient(140deg, #5b8def, #7b5bf0);
    border-color: transparent;
    color: #fff;
}

/* ---- bulk QR generator ---- */

.qt-qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.qt-qr-card {
    border: 1px solid var(--border, #e3e6ee);
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    background: #fff;
}

.qt-qr-card canvas, .qt-qr-card img { max-width: 100%; }

.qt-qr-card-text {
    font-size: 11.5px;
    color: var(--ink-3, #5f677d);
    word-break: break-all;
    margin: 6px 0;
    max-height: 3.2em;
    overflow: hidden;
}

/* ---- quote image generator ---- */

.qt-quote-canvas-wrap {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    overflow-x: auto;
}

.qt-quote-canvas-wrap canvas {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border, #e3e6ee);
}

.qt-swatches { display: flex; gap: 8px; flex-wrap: wrap; }

.qt-swatch {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 2px solid var(--border, #d9dde8);
    cursor: pointer;
}

.qt-swatch.is-selected { border-color: #5b8def; box-shadow: 0 0 0 2px rgba(91, 141, 239, .25); }

.theme-dark .qt-passage { background: #12151c; border-color: #2b3040; }
.theme-dark .qt-input { background: #0f1218; border-color: #2b3040; color: #e8eaf2; }
.theme-dark .qt-stat { background: #191a2b; border-color: #322a55; }
.theme-dark .qt-qr-card { background: #171a22; border-color: #2b3040; }