/* ============================================================
   style/text-tools.css  —  the standalone Text Tools pages

   Loaded only by pages under /text-tools/, so nothing here can reach
   the PDF, image, QR, barcode or calculator tools. It sits on top of
   main.css and reuses its page frame (.pagebox, .tool-area, the
   sticky header, the footer); only what is specific to a text tool is
   defined here.

   Scrolling, which the brief is emphatic about:
     · the page is the only vertical scroll container. Nothing here
       sets a viewport height or wraps the tool in its own scroller;
     · the two text boxes scroll internally, between a sensible floor
       and ceiling, so a pasted novel cannot stretch the page forever;
     · long output that is not a textarea (tables, code) scrolls inside
       its own box rather than pushing the page sideways.
   ============================================================ */

/* ── Page frame ─────────────────────────────────────────── */
.ttx-wrap { width: 100%; text-align: left; }

.ttx-crumbs {
    margin-bottom: 14px;
    font-size: 13px;
    color: #64748b;
}
.ttx-crumbs a { color: #0369a1; text-decoration: none; }
.ttx-crumbs a:hover { text-decoration: underline; }
.ttx-crumbs span[aria-current] { color: #475569; }

.ttx-wrap > h1 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}
.ttx-lede {
    margin: 0 0 20px;
    font-size: 15px;
    color: #475569;
    line-height: 1.65;
    max-width: 70ch;
}

/* ── The tool itself ────────────────────────────────────── */
.ttx-tool {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
}

.ttx-field { margin-bottom: 14px; min-width: 0; }
.ttx-field > label,
.ttx-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

/* The boxes. A floor so an empty tool still looks like a tool, and a
   ceiling so pasting a large file scrolls the box rather than the
   page. `resize: vertical` leaves the reader in charge past that. */
.ttx-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 240px;
    max-height: 560px;
    padding: 12px 13px;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.6;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    resize: vertical;
    overflow: auto;
}
.ttx-textarea:focus {
    outline: none;
    border-color: #0369a1;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, .15);
}
.ttx-textarea[readonly] { background: #f8fafc; }

/* Code in, code out: a proportional font makes indentation unreadable
   and hides the trailing spaces these tools exist to manage. */
.ttx-textarea.is-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    tab-size: 2;
    white-space: pre;
    overflow-x: auto;      /* long lines scroll here, not the page */
}

.ttx-meta {
    margin: 6px 0 0;
    font-size: 12px;
    color: #94a3b8;
}

/* Find & Replace's highlight pane. It looks like a text box and scrolls
   like one, but it is a div: <mark> cannot live inside a <textarea>.
   Built from text nodes and <mark> elements in the script, never from
   innerHTML — the content is the reader's own text, and running it back
   through the HTML parser to draw a yellow box would be an XSS route. */
.ttx-preview {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    cursor: text;
    color: #475569;
}
.ttx-preview:empty::before {
    content: "Matches will be highlighted here.";
    color: #94a3b8;
}
.ttx-preview mark {
    padding: 1px 2px;
    border-radius: 3px;
    background: #fef08a;
    color: #713f12;
}

/* ── Controls ───────────────────────────────────────────── */
.ttx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}
.ttx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.ttx-btn:hover { background: #f0f9ff; border-color: #7dd3fc; }
.ttx-btn:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
.ttx-btn.is-primary { color: #fff; background: #0369a1; border-color: #0369a1; }
.ttx-btn.is-primary:hover { background: #075985; }
.ttx-btn.is-done { color: #065f46; background: #d1fae5; border-color: #6ee7b7; }

/* Extra controls — password length, a word to count, min and max. */
.ttx-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    padding: 14px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
}
.ttx-options input[type="text"],
.ttx-options input[type="number"],
.ttx-options select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14.5px;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
}
.ttx-options input:focus,
.ttx-options select:focus {
    outline: none;
    border-color: #0369a1;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, .15);
}
.ttx-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
    min-height: 42px;
}
.ttx-check input { width: 17px; height: 17px; accent-color: #0369a1; flex: 0 0 auto; }

/* ── The line that answers back ─────────────────────────── */
.ttx-status {
    margin: 0;
    padding: 10px 13px;
    font-size: 13.5px;
    line-height: 1.55;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
}
.ttx-status.is-ok { background: #ecfdf5; color: #065f46; }
.ttx-status.is-warn { background: #fffbeb; color: #92400e; }

/* ── Supporting content ─────────────────────────────────── */
.ttx-info { margin-top: 26px; }
.ttx-info h2 {
    margin: 26px 0 10px;
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
}
.ttx-info h3 {
    margin: 18px 0 8px;
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
}
.ttx-info p,
.ttx-info li {
    font-size: 14.5px;
    line-height: 1.7;
    color: #475569;
}
.ttx-info ol,
.ttx-info ul { margin: 0 0 14px; padding-left: 22px; }
.ttx-info li { margin-bottom: 6px; }

/* A worked example: what went in, what came out. */
.ttx-example {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 12px 0 16px;
}
.ttx-example figure { margin: 0; min-width: 0; }
.ttx-example figcaption {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.ttx-example pre {
    margin: 0;
    padding: 12px 13px;
    max-height: 220px;
    overflow: auto;          /* long samples scroll in the box */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    white-space: pre-wrap;
    word-break: break-word;  /* a long URL wraps rather than widening the page */
}

.ttx-faq details {
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
}
.ttx-faq summary {
    font-size: 14.5px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
}
.ttx-faq summary:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
.ttx-faq details p { margin: 9px 0 0; }

/* ── Related tools, and the directory's cards ───────────── */
.ttx-related { margin-top: 28px; }
.ttx-related h2 { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: #0f172a; }

.ttx-cards {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ttx-cards a {
    display: block;
    min-width: 0;
    padding: 13px 15px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ttx-cards a:hover {
    border-color: #7dd3fc;
    box-shadow: 0 6px 18px rgba(3, 105, 161, .08);
    transform: translateY(-1px);
}
.ttx-cards a:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
.ttx-cards strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
}
.ttx-cards span {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: #64748b;
}

.ttx-note {
    display: flex;
    gap: 11px;
    padding: 13px 15px;
    margin: 18px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 11px;
}
.ttx-note i { color: #0369a1; margin-top: 3px; flex: 0 0 auto; }

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 640px) {
    .ttx-tool { padding: 14px; }
    .ttx-wrap > h1 { font-size: 21px; }
    .ttx-textarea { min-height: 190px; max-height: 420px; font-size: 15px; }
    .ttx-actions .ttx-btn { flex: 1 1 auto; justify-content: center; }
    .ttx-options { grid-template-columns: 1fr; padding: 12px; }
    .ttx-cards { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   Bits the landing pages need that main.css does not have

   The four landing pages are built from main.css's own workbench
   classes — .tt-section, .tt-toolbar, .tt-textarea, .tt-stats-grid,
   .tt-tabs, .tt-tool-card — so they look like the workbench because
   they are it. Only these few are missing there.
   ═══════════════════════════════════════════════════════════ */

/* A label that is read out but not drawn: the workbench markup relies
   on placeholders, and a placeholder is not a label. */
.tt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The tool cards are links now, not divs, so they need the anchor
   defaults turned off and the inner spans laid out as blocks. */
a.tt-tool-card { text-decoration: none; color: inherit; }
a.tt-tool-card:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
.tt-tool-card > span { display: block; min-width: 0; }
.tt-tool-name, .tt-tool-desc { display: block; }

/* The search results are links too. */
a.tt-search-result-item { text-decoration: none; display: block; }

/* One extra button in the output row, and it is an anchor. */
a.tt-btn { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   Live Statistics, compact

   Fifteen readouts as 140px cards is three rows of chunky boxes
   pushing the tools below the fold — a lot of the page spent on
   numbers nobody came for. As wrapping pills with the figure and its
   label on one line, the same fifteen take a row or two.

   Scoped to this stylesheet, which only the four landing pages load,
   so the combined Text Tools workbench keeps the look it has.
   ═══════════════════════════════════════════════════════════ */

.tt-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    /* The grid tracks from main.css must be cancelled, or a stale
       grid-template-columns would still size a flex container's
       children in browsers that keep the declaration around. */
    grid-template-columns: none;
}

.tt-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    text-align: left;
    border-radius: 999px;
    box-shadow: none;
    white-space: nowrap;
}
.tt-stat:hover {
    transform: none;
    border-color: #7dd3fc;
    background: #f0f9ff;
}

.tt-stat-val {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
    word-break: normal;          /* a long word must not stack vertically */
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;     /* only the longest-word tile can need it */
}

.tt-stat-lbl {
    font-size: 11.5px;
    font-weight: 500;
    text-transform: none;        /* sentence case reads faster at this size */
    letter-spacing: 0;
    color: #64748b;
}

@media (max-width: 640px) {
    .tt-stats-grid { gap: 6px; }
    .tt-stat { padding: 5px 10px; }
    .tt-stat-val { font-size: 13.5px; }
    .tt-stat-lbl { font-size: 11px; }
}

/* ── The one button that overwrites the editor ──────────────
   It replaces what you typed, so it reads as a warning rather
   than as a sibling of Copy, and it turns into its own undo
   after it fires. */
#btn-output-apply {
    border-color: #fbbf24;
    color: #92400e;
    background: #fffbeb;
}

#btn-output-apply:hover {
    border-color: #f59e0b;
    background: #fef3c7;
}

#btn-output-apply.is-undo {
    border-color: #10b981;
    color: #065f46;
    background: #ecfdf5;
}

#btn-output-apply.is-undo:hover {
    border-color: #059669;
    background: #d1fae5;
}