/* ==========================================================================
   Tool UI: the shared design for the free tool pages

   Loaded by the six working tools: PDF, website and PowerPoint extractors,
   the metadata extractor, the PDF locker and unlocker, and Grid Maker. Each
   page keeps its own <style> block for the written content below the tool;
   this file owns the tool itself, so the six read as one product.

   The pattern, identical on every page:

     .tu-hero        breadcrumb, h1, one line, "runs in your browser" note
     .tu-app         the one framed workspace, white with a hairline
       .tu-app-head  title on the left, mode or size controls on the right
       .tu-app-body  input: drop zone or URL field, then options
       .tu-split     results: list on the left, document on the right
       .tu-toolbar   Copy, Download, Clear above the results
       .tu-empty     what the results area says before there are any
     .tu-floatbar    the copy bar that appears once the toolbar scrolls away
     toasts          top right, under the navigation bar

   Buttons reuse the site classes. .btn-primary-light (lime) is the one main
   action on each tool; .btn-secondary-light is every secondary action;
   .tu-btn--ghost is the tertiary text button, for Clear and Reset. Adding
   .tu-btn sizes them all as the site button: 48px tall, 12px radius, 1rem
   type, icon on the left (docs/APPLICATION.md, Buttons and links).

   Nothing here moves vertically on hover. Selectors are prefixed with tu-
   or scoped under .tu-page so the light DOM components (related tools,
   contact section, FAQ) are left alone.
   ========================================================================== */

:root {
    --tu-ink: #0D1425;
    --tu-text: #1e293b;
    --tu-body: #475569;
    --tu-muted: #64748b;
    --tu-subtle: #94a3b8;
    --tu-line: #e2e8f0;
    --tu-line-strong: #cbd5e1;
    --tu-surface: #ffffff;
    --tu-canvas: #f8fafc;
    --tu-canvas-deep: #f1f5f9;
    --tu-accent: #0369a1;
    --tu-accent-hover: #075985;
    --tu-accent-tint: #f0f7fb;
    --tu-accent-weak: #e0f2fe;
    --tu-cyan: #00B4D8;
    --tu-lime: #b9e500;
    --tu-lime-hover: #a9d400;
    --tu-lime-active: #9cc400;
    --tu-success: #15803d;
    --tu-success-weak: #f0fdf4;
    --tu-success-line: #bbf7d0;
    --tu-danger: #dc2626;
    --tu-danger-ink: #991b1b;
    --tu-danger-weak: #fef2f2;
    --tu-danger-line: #fecaca;
    --tu-warning: #b45309;
    --tu-radius: 12px;
    --tu-radius-sm: 8px;
    --tu-control-h: 48px;
    --tu-btn-radius: 0.75rem;
    --tu-shadow: 0 1px 2px rgba(13, 20, 37, 0.04), 0 12px 32px -18px rgba(13, 20, 37, 0.14);
    --tu-shadow-pop: 0 1px 2px rgba(13, 20, 37, 0.06), 0 16px 40px -12px rgba(13, 20, 37, 0.22);
    --tu-ring: 0 0 0 3px rgba(3, 105, 161, 0.2);
    --tu-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --tu-nav-clear: 5rem;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

body.tu-page {
    background: #ffffff;
    color: var(--tu-text);
    margin: 0;
    padding-top: 4rem;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

.tu-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 2rem;
    height: auto;
    display: block;
}

/* !important because the PDF unlocker renders a hidden password field with
   both .password-input and .sr-only, and the input styling below is more
   specific than this. */
.tu-page .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --------------------------------------------------------------------------
   Hero: breadcrumb, title, one line, privacy note
   -------------------------------------------------------------------------- */

/* The title and the line under it run the full width of the container, so
   they break at its edge rather than part way across. */
.tu-hero {
    max-width: none;
    margin: 0 0 2rem;
    text-align: left;
}

.tu-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    font-size: 0.85rem;
    color: var(--tu-muted);
}

.tu-crumbs a {
    color: var(--tu-muted);
    text-decoration: none;
    text-underline-offset: 3px;
}

.tu-crumbs a:hover,
.tu-crumbs a:focus-visible {
    color: var(--tu-ink);
    text-decoration: underline;
}

.tu-crumbs i {
    font-size: 0.6rem;
    color: var(--tu-subtle);
}

.tu-crumbs [aria-current] {
    color: var(--tu-ink);
    font-weight: 500;
}

.tu-page .tu-hero .page-title,
.tu-title {
    font-size: clamp(2rem, 4.2vw, 2.85rem);
    line-height: 1.12;
    letter-spacing: -0.022em;
    font-weight: 700;
    color: var(--tu-ink);
    margin: 0 0 0.85rem;
}

.tu-page .tu-hero .page-subtitle,
.tu-lede {
    font-size: 1.075rem;
    line-height: 1.6;
    color: var(--tu-body);
    margin: 0 0 1.1rem;
    max-width: none;
}

.tu-privacy {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--tu-body);
}

.tu-privacy i {
    color: var(--tu-accent);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   The workspace frame. One box per tool, everything else inside it is
   separated by hairlines rather than nested boxes.
   -------------------------------------------------------------------------- */

.tu-app {
    position: relative;
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    box-shadow: var(--tu-shadow);
    margin: 0 0 2.5rem;
}

.tu-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    min-height: 58px;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--tu-line);
}

.tu-app-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--tu-ink);
}

.tu-app-title i {
    color: var(--tu-accent);
    font-size: 0.9rem;
    width: 1rem;
    text-align: center;
}

.tu-app-body {
    padding: 1.5rem 1.25rem;
}

.tu-mt {
    margin-top: 1.25rem;
}

.tu-app-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--tu-line);
}

.tu-section-label {
    display: block;
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tu-ink);
    letter-spacing: 0;
}

.tu-hint {
    font-size: 0.8rem;
    color: var(--tu-muted);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Buttons

   The same three tiers as globalstyle.css, at the same size (48px, 12px
   radius, 1rem, weight 600) so a button in a tool is the button on the rest
   of the site:
     .tu-btn.btn-primary-light     lime, the one main action of the tool
     .tu-btn.btn-secondary-light   outline, every other action
     .tu-btn--ghost                tertiary text button, for Clear and Reset
   -------------------------------------------------------------------------- */

.tu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--tu-control-h);
    min-height: var(--tu-control-h);
    padding: 0 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--tu-btn-radius);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    width: auto;
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, opacity 0.15s ease, text-decoration-color 0.15s ease;
}

.tu-btn i {
    font-size: 0.9em;
    color: inherit;
}

.tu-btn:focus-visible {
    outline: 2px solid var(--tu-accent);
    outline-offset: 3px;
    box-shadow: none;
}

.tu-btn:disabled,
.tu-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}

/* Primary: lime, ink text. Hover deepens the lime and lifts a soft shadow. */
.tu-btn.btn-primary-light {
    background: var(--tu-lime);
    color: var(--tu-ink);
    border-color: var(--tu-lime);
    padding: 0 1.5rem;
    border-radius: var(--tu-btn-radius);
    font-size: 1rem;
    font-weight: 600;
}

.tu-btn.btn-primary-light i {
    color: var(--tu-ink);
}

.tu-btn.btn-primary-light:hover:not(:disabled) {
    background: var(--tu-lime-hover);
    border-color: var(--tu-lime-hover);
    filter: none;
    box-shadow: 0 6px 18px -6px rgba(132, 204, 22, 0.55);
}

.tu-btn.btn-primary-light:active:not(:disabled) {
    background: var(--tu-lime-active);
    border-color: var(--tu-lime-active);
    box-shadow: none;
}

/* Secondary: one outline for every other action. */
.tu-btn.btn-secondary-light {
    background: transparent;
    color: var(--tu-ink);
    border: 1px solid rgba(13, 20, 37, 0.25);
    padding: 0 1.5rem;
    border-radius: var(--tu-btn-radius);
    font-size: 1rem;
    font-weight: 600;
}

.tu-btn.btn-secondary-light i {
    color: inherit;
}

.tu-btn.btn-secondary-light:hover:not(:disabled) {
    background: rgba(13, 20, 37, 0.04);
    border-color: var(--tu-ink);
}

/* Tertiary: Clear, Reset. Accent text that underlines under the pointer;
   kept at the full height so it lines up with the buttons beside it. */
.tu-btn--ghost {
    background: transparent;
    color: var(--tu-accent);
    border-color: transparent;
    font-weight: 600;
    padding: 0 0.5rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
}

.tu-btn--ghost:hover:not(:disabled) {
    background: transparent;
    color: var(--tu-accent);
    text-decoration-color: currentColor;
}

/* Square icon button, same height as the rest. */
.tu-btn--icon {
    width: var(--tu-control-h);
    padding: 0;
}

/* Confirmation after a copy. The scripts add .success for two seconds. */
.tu-btn.success,
.tu-btn.btn-primary-light.success,
.tu-btn.btn-secondary-light.success,
.tu-btn.btn-primary-light.success:hover:not(:disabled),
.tu-btn.btn-secondary-light.success:hover:not(:disabled) {
    background: var(--tu-success-weak);
    border-color: var(--tu-success-line);
    color: var(--tu-success);
    box-shadow: none;
}

.tu-btn.success i,
.tu-btn.btn-primary-light.success i,
.tu-btn.btn-secondary-light.success i {
    color: var(--tu-success);
}

/* A link inside tool copy: accent, a faint underline that turns solid. */
.tu-link {
    color: var(--tu-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(3, 105, 161, 0.35);
    text-underline-offset: 4px;
    font-weight: 500;
}

.tu-link:hover {
    text-decoration-color: currentColor;
}

.tu-link:focus-visible {
    outline: 2px solid var(--tu-accent);
    outline-offset: 3px;
}

/* Spinners: inline (inside a button) and block (loading panel). */
.tu-page .loading-spinner,
.tu-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: tu-spin 0.8s linear infinite;
}

@keyframes tu-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.tu-input,
.tu-page .tu-app .url-input,
.tu-page .tu-app .password-input,
.tu-page .tu-app .suffix-input,
.tu-page .tu-app .section-input {
    display: block;
    width: 100%;
    height: var(--tu-control-h);
    padding: 0 0.875rem;
    background: var(--tu-surface);
    border: 1px solid var(--tu-line-strong);
    border-radius: var(--tu-radius-sm);
    color: var(--tu-ink);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.2;
    outline: none;
    box-shadow: none;
    transform: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.tu-input::placeholder,
.tu-page .tu-app .url-input::placeholder,
.tu-page .tu-app .password-input::placeholder,
.tu-page .tu-app .suffix-input::placeholder,
.tu-page .tu-app .section-input::placeholder {
    color: var(--tu-subtle);
}

.tu-input:hover,
.tu-page .tu-app .url-input:hover,
.tu-page .tu-app .password-input:hover,
.tu-page .tu-app .suffix-input:hover,
.tu-page .tu-app .section-input:hover:not(:disabled) {
    border-color: var(--tu-subtle);
}

.tu-input:focus,
.tu-page .tu-app .url-input:focus,
.tu-page .tu-app .password-input:focus,
.tu-page .tu-app .suffix-input:focus,
.tu-page .tu-app .section-input:focus {
    border-color: var(--tu-accent);
    box-shadow: var(--tu-ring);
    background: var(--tu-surface);
    transform: none;
}

.tu-page .tu-app input:disabled {
    background: var(--tu-canvas);
    color: var(--tu-subtle);
    cursor: not-allowed;
}

/* The URL row: field and its action on one line, stacked on phones. */
.tu-field-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.tu-field-row > .url-input,
.tu-field-row > .tu-input {
    flex: 1;
    min-width: 0;
}

/* Native checkboxes and the custom ones the extractors draw. */
.tu-page .tu-app input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--tu-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.tu-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.tu-page .tu-app .option-item,
.tu-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0 -0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: var(--tu-text);
    font-size: 0.875rem;
    user-select: none;
    transition: background-color 0.15s ease;
}

.tu-page .tu-app .option-item:hover,
.tu-check:hover {
    background: var(--tu-canvas-deep);
}

.tu-page .tu-app .option-item:focus-visible {
    outline: none;
    box-shadow: var(--tu-ring);
}

.tu-page .tu-app .option-label,
.tu-check label {
    color: var(--tu-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.tu-page .tu-app .checkbox-custom {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: var(--tu-surface);
    border: 1.5px solid var(--tu-subtle);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tu-page .tu-app .checkbox-custom.checked {
    background: var(--tu-accent);
    border-color: var(--tu-accent);
}

.tu-page .tu-app .checkbox-custom.checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Segmented control: Unlock / Lock and similar two or three way choices. */
.tu-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--tu-canvas-deep);
    border: 1px solid var(--tu-line);
    border-radius: 10px;
}

.tu-segmented > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 32px;
    padding: 0 0.9rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--tu-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tu-segmented > button i {
    font-size: 0.8em;
}

.tu-segmented > button:hover {
    color: var(--tu-ink);
}

.tu-segmented > button:focus-visible {
    outline: 2px solid var(--tu-accent);
    outline-offset: 2px;
}

.tu-segmented > button.active,
.tu-segmented > button[aria-pressed="true"] {
    background: var(--tu-surface);
    color: var(--tu-ink);
    border-color: var(--tu-line);
    box-shadow: 0 1px 2px rgba(13, 20, 37, 0.08);
}

.tu-segmented > button.active i,
.tu-segmented > button[aria-pressed="true"] i {
    color: var(--tu-accent);
}

/* Radio choices with a line of explanation each. No box per option: the
   dot carries the state and the selected row takes a faint tint. Scripts
   mark the chosen one with .selected. */
.tu-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.25rem 0.5rem;
    margin: 0 0 0 -0.75rem;
}

.tu-choices > * {
    position: relative;
    padding: 0.65rem 0.75rem 0.7rem 2.3rem;
    border-radius: var(--tu-radius-sm);
    background: transparent;
    cursor: pointer;
    transform: none;
    transition: background-color 0.15s ease;
}

.tu-choices > *::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0.85rem;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border: 1.5px solid var(--tu-subtle);
    border-radius: 50%;
    background: var(--tu-surface);
    transition: border-color 0.15s ease, border-width 0.15s ease;
}

.tu-choices > *:hover {
    background: var(--tu-canvas-deep);
}

.tu-choices > *:focus-visible {
    outline: none;
    box-shadow: var(--tu-ring);
}

.tu-choices > .selected {
    background: var(--tu-accent-tint);
}

.tu-choices > .selected::before {
    border-color: var(--tu-accent);
    border-width: 4.5px;
}

.tu-choices h4 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.15rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tu-ink);
}

.tu-choices h4 i {
    color: var(--tu-muted);
    font-size: 0.8em;
}

.tu-choices > .selected h4 i {
    color: var(--tu-accent);
}

.tu-choices p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--tu-muted);
}

.tu-choices .mode-note {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--tu-subtle);
}

/* --------------------------------------------------------------------------
   Drop zone
   -------------------------------------------------------------------------- */

.tu-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 2.25rem 1.5rem;
    text-align: center;
    background: var(--tu-canvas);
    border: 1.5px dashed var(--tu-line-strong);
    border-radius: 10px;
    color: var(--tu-muted);
    cursor: pointer;
    transform: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.tu-drop:hover,
.tu-drop:focus-within {
    border-color: var(--tu-accent);
    background: var(--tu-accent-tint);
}

.tu-drop:focus-within {
    box-shadow: var(--tu-ring);
}

.tu-drop.dragover {
    border-color: var(--tu-accent);
    border-style: solid;
    background: var(--tu-accent-weak);
    box-shadow: var(--tu-ring);
    transform: none;
}

.tu-drop .drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    pointer-events: none;
}

.tu-drop .drop-zone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 0.6rem;
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(13, 20, 37, 0.06);
    color: var(--tu-accent);
    font-size: 1.05rem;
    line-height: 1;
}

.tu-drop .drop-zone-text {
    font-size: 0.975rem;
    font-weight: 600;
    color: var(--tu-ink);
    line-height: 1.4;
}

.tu-drop .drop-zone-subtext,
.tu-drop .file-limit {
    font-size: 0.85rem;
    color: var(--tu-muted);
    line-height: 1.5;
    margin: 0;
}

.tu-browse {
    color: var(--tu-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.tu-page .tu-drop .file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Status, errors, loading
   -------------------------------------------------------------------------- */

.tu-page .tu-app .error-message {
    display: none;
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    background: var(--tu-danger-weak);
    border: 1px solid var(--tu-danger-line);
    border-radius: var(--tu-radius-sm);
    color: var(--tu-danger-ink);
    font-size: 0.875rem;
    line-height: 1.5;
    animation: none;
}

.tu-page .tu-app .error-message i {
    margin-right: 0.5rem;
    color: var(--tu-danger);
}

.tu-page .tu-app .error-message:focus {
    outline: none;
}

.tu-page .tu-app .status-message {
    display: none;
    padding: 0.75rem 1rem;
    margin: 1.25rem 0 0;
    background: var(--tu-canvas);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius-sm);
    color: var(--tu-body);
    font-size: 0.875rem;
    text-align: left;
}

.tu-page .tu-app .loading-container {
    display: none;
    padding: 3rem 1.25rem;
    border-top: 1px solid var(--tu-line);
    text-align: center;
    background: transparent;
    animation: none;
}

.tu-page .tu-app .loading-container .spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto 1rem;
    border: 2.5px solid var(--tu-line);
    border-top-color: var(--tu-accent);
    border-radius: 50%;
    animation: tu-spin 0.8s linear infinite;
}

.tu-page .tu-app .loading-text {
    margin: 0;
    color: var(--tu-ink);
    font-size: 0.95rem;
    font-weight: 500;
}

.tu-page .tu-app .loading-note {
    margin: 0.35rem 0 0;
    min-height: 1.3em;
    color: var(--tu-muted);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Results: empty state, toolbar, list and document
   -------------------------------------------------------------------------- */

.tu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2.5rem 1.25rem 2.75rem;
    border-top: 1px solid var(--tu-line);
    text-align: center;
}

.tu-empty i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 0.4rem;
    border-radius: 50%;
    background: var(--tu-canvas-deep);
    color: var(--tu-subtle);
    font-size: 0.9rem;
}

.tu-empty strong {
    color: var(--tu-ink);
    font-size: 0.9rem;
    font-weight: 600;
}

.tu-empty span {
    color: var(--tu-muted);
    font-size: 0.85rem;
    max-width: 46ch;
}

/* The scripts show results by setting an inline display on the results
   element and hide them with display: none. The empty state sits right after
   it and steps aside whenever the results, or the loading panel before them,
   are on screen. No script has to know it exists. */
.tu-results[style*="block"] ~ .tu-empty,
.tu-results[style*="grid"] ~ .tu-empty,
.tu-results[style*="flex"] ~ .tu-empty,
.loading-container[style*="block"] ~ .tu-empty {
    display: none;
}

.tu-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    margin: 0;
    border-bottom: 1px solid var(--tu-line);
    background: var(--tu-surface);
}

.tu-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tu-toolbar .extracted-title,
.tu-page .tu-toolbar .extracted-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tu-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* List on the left, document on the right. */
.tu-split {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    border-top: 1px solid var(--tu-line);
    animation: none;
}

.tu-split-nav {
    position: sticky;
    top: var(--tu-nav-clear);
    align-self: start;
    max-height: calc(100vh - var(--tu-nav-clear) - 1rem);
    overflow-y: auto;
    padding: 1rem 0.75rem;
    background: var(--tu-canvas);
    border-right: 1px solid var(--tu-line);
    border-bottom-left-radius: var(--tu-radius);
}

.tu-split-nav-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.5rem 0.75rem;
}

.tu-split-nav-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tu-ink);
}

.tu-count {
    font-size: 0.8rem;
    color: var(--tu-muted);
    font-variant-numeric: tabular-nums;
}

.tu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Items are built by the page scripts as li.page-tab or li.slide-tab. */
.tu-list > li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--tu-body);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tu-list > li i {
    color: var(--tu-subtle);
    font-size: 0.8rem;
}

.tu-list > li:hover {
    background: var(--tu-canvas-deep);
    color: var(--tu-ink);
}

.tu-list > li:focus-visible {
    outline: none;
    box-shadow: var(--tu-ring);
}

.tu-list > li.active {
    background: var(--tu-surface);
    border-color: var(--tu-line);
    color: var(--tu-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(13, 20, 37, 0.06);
}

.tu-list > li.active i {
    color: var(--tu-accent);
}

.tu-split-main {
    min-width: 0;
}

.tu-doc,
.tu-page .tu-app .content-card {
    position: relative;
    padding: 1.75rem 2rem 2.25rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 40vh;
    overflow: visible;
}

.tu-page .tu-app .content-card::before {
    content: none;
}

/* Extracted text: plain document typography, headings near black. */
.tu-page .extracted-title {
    color: var(--tu-ink);
}

.tu-page .tu-app .extracted-content {
    max-width: 74ch;
    color: var(--tu-text);
    font-size: 1rem;
    line-height: 1.75;
}

.tu-page .tu-app .extracted-content .h1,
.tu-page .tu-app .extracted-content .h2,
.tu-page .tu-app .extracted-content .h3,
.tu-page .tu-app .extracted-content .h4,
.tu-page .tu-app .extracted-content .h5,
.tu-page .tu-app .extracted-content .h6,
.tu-page .tu-app .extracted-content h1,
.tu-page .tu-app .extracted-content h2,
.tu-page .tu-app .extracted-content h3,
.tu-page .tu-app .extracted-content h4 {
    color: var(--tu-ink);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.tu-page .tu-app .extracted-content .h1 { font-size: 1.6rem; margin: 2rem 0 0.75rem; }
.tu-page .tu-app .extracted-content .h2 { font-size: 1.3rem; margin: 1.75rem 0 0.6rem; }
.tu-page .tu-app .extracted-content .h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
.tu-page .tu-app .extracted-content .h4,
.tu-page .tu-app .extracted-content .h5,
.tu-page .tu-app .extracted-content .h6 { font-size: 1rem; margin: 1.25rem 0 0.4rem; }

.tu-page .tu-app .extracted-content > :first-child,
.tu-page .tu-app .extracted-content > div > :first-child {
    margin-top: 0;
}

.tu-page .tu-app .extracted-content .paragraph {
    margin: 0 0 0.85rem;
    color: var(--tu-text);
    font-size: 1rem;
    line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Floating copy bar. Appears once the results toolbar has scrolled away.
   Centred so it stays clear of the back to top button.
   -------------------------------------------------------------------------- */

.tu-floatbar {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 1.25rem;
    z-index: 1000;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    box-shadow: var(--tu-shadow-pop);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 0.2s ease, transform 0.2s var(--tu-ease), visibility 0.2s;
}

.tu-floatbar.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.tu-floatbar .tu-btn {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Toasts. Three families exist in the tool scripts (metadata .toast, the
   unlocker's .toast-notification and .download-notification, Grid Maker's
   #modal). They all get the same card, top right under the navigation.
   -------------------------------------------------------------------------- */

.tu-page .toast-container {
    position: fixed;
    top: var(--tu-nav-clear);
    right: 1.25rem;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
}

.tu-page .toast,
.tu-page .toast-notification,
.tu-page .download-notification {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 280px;
    max-width: 380px;
    margin: 0;
    padding: 0.85rem 1rem;
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: 10px;
    box-shadow: var(--tu-shadow-pop);
    color: var(--tu-ink);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    pointer-events: auto;
}

/* Metadata extractor: slides in from the right by opacity only. */
.tu-page .toast {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.2s ease, transform 0.2s var(--tu-ease);
}

.tu-page .toast.show {
    opacity: 1;
    transform: translateX(0);
}

.tu-page .toast.success,
.tu-page .toast.error {
    border-color: var(--tu-line);
}

.tu-page .toast-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-size: 0.95rem;
    color: var(--tu-success);
}

.tu-page .toast-icon.error,
.tu-page .toast-notification.error .toast-icon {
    color: var(--tu-danger);
}

.tu-page .toast-notification.info .toast-icon {
    color: var(--tu-accent);
}

.tu-page .toast-message,
.tu-page .toast-content {
    flex: 1;
    color: var(--tu-ink);
    font-size: 0.875rem;
    font-weight: 500;
}

.tu-page .toast-close {
    margin-left: auto;
    padding: 0 0.25rem;
    background: none;
    border: 0;
    color: var(--tu-subtle);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.tu-page .toast-close:hover {
    color: var(--tu-ink);
}

/* PDF unlocker: hidden until the script adds .visible. */
.tu-page .toast-notification {
    position: fixed;
    top: var(--tu-nav-clear);
    right: 1.25rem;
    z-index: 9990;
    display: none;
    animation: tu-toast-in 0.2s var(--tu-ease);
}

.tu-page .toast-notification.visible {
    display: flex;
}

.tu-page .toast-notification.error,
.tu-page .toast-notification.success,
.tu-page .toast-notification.info {
    background: var(--tu-surface);
    color: var(--tu-ink);
    border: 1px solid var(--tu-line);
}

/* The download notice sits bottom centre, where the copy bar sits on the
   extractors, so it never stacks on top of a toast. */
.tu-page .download-notification {
    position: fixed;
    top: auto;
    bottom: 1.25rem;
    left: 50%;
    right: auto;
    z-index: 9990;
    display: none;
    align-items: center;
    transform: translateX(-50%);
    animation: none;
}

.tu-page .download-notification.visible {
    display: flex;
}

.tu-page .download-notification i {
    color: var(--tu-accent);
    font-size: 0.95rem;
}

@keyframes tu-toast-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Written content below the tool. Lighter, fewer boxes, same on every page.
   -------------------------------------------------------------------------- */

.tu-page .use-policy {
    margin: 0 0 1rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--tu-line-strong);
    border-radius: 0;
    max-width: 78ch;
}

.tu-page .use-policy h2 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tu-ink);
    margin: 0 0 0.5rem;
}

.tu-page .use-policy p {
    color: var(--tu-body);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 0.6rem;
}

.tu-page .use-policy p:last-child {
    margin-bottom: 0;
}

.tu-page .use-policy a,
.tu-page .intro-description a,
.tu-page .gm-prose a {
    color: var(--tu-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(3, 105, 161, 0.35);
}

.tu-page .use-policy a:hover,
.tu-page .intro-description a:hover,
.tu-page .gm-prose a:hover { text-decoration-color: currentColor; }

.tu-page .use-policy a:focus-visible,
.tu-page .intro-description a:focus-visible,
.tu-page .gm-prose a:focus-visible { outline: 2px solid var(--tu-accent); outline-offset: 3px; }

.tu-page .intro-section {
    margin: 4rem 0 2.5rem;
    padding: 2.5rem 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--tu-line);
    border-radius: 0;
    box-shadow: none;
}

.tu-page .intro-title {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--tu-ink);
    margin: 0 0 1.25rem;
    max-width: 30ch;
}

.tu-page .intro-description {
    color: var(--tu-body);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 78ch;
}

.tu-page .intro-description > br {
    display: none;
}

.tu-page .intro-description p {
    margin: 0 0 1rem;
}

.tu-page .section-header,
.tu-page .section-header-content {
    border-bottom: 1px solid var(--tu-line);
}

.tu-page .section-title {
    color: var(--tu-ink);
    letter-spacing: -0.01em;
}

.tu-page #ai-tools,
.tu-page #limitations {
    margin-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .tu-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .tu-split-nav {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--tu-line);
        border-bottom-left-radius: 0;
        padding: 0.75rem;
    }

    /* Pages become a horizontal strip instead of a tall column. */
    .tu-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.25rem;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .tu-list > li {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    body.tu-page {
        padding-top: 3.5rem;
    }

    .tu-page .container {
        padding: 1.75rem 1rem 1.5rem;
    }

    .tu-hero {
        margin-bottom: 1.5rem;
    }

    .tu-page .tu-hero .page-subtitle,
    .tu-lede {
        font-size: 1rem;
    }

    .tu-app-head,
    .tu-app-body,
    .tu-app-foot,
    .tu-toolbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .tu-field-row {
        flex-direction: column;
    }

    .tu-field-row > .tu-btn {
        width: 100%;
    }

    .tu-toolbar-actions {
        width: 100%;
    }

    .tu-toolbar-actions > .tu-btn {
        flex: 1 1 auto;
    }

    .tu-doc,
    .tu-page .tu-app .content-card {
        padding: 1.25rem 1rem 1.75rem;
    }

    .tu-drop {
        min-height: 170px;
        padding: 1.75rem 1rem;
    }

    /* Full width, clear of the back to top button on the right. */
    .tu-floatbar {
        left: 1rem;
        right: 4.5rem;
        transform: translateY(12px);
    }

    .tu-floatbar.visible {
        transform: translateY(0);
    }

    .tu-floatbar .tu-btn {
        flex: 1 1 0;
        padding: 0 0.6rem;
    }

    .tu-page .toast-container,
    .tu-page .toast-notification {
        left: 1rem;
        right: 1rem;
        top: 4.5rem;
    }

    .tu-page .toast,
    .tu-page .toast-notification {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .tu-page .download-notification {
        left: 1rem;
        right: 4.5rem;
        transform: none;
        min-width: 0;
        max-width: none;
    }

    .tu-page .intro-section {
        margin-top: 3rem;
        padding-top: 2rem;
    }
}

/* --------------------------------------------------------------------------
   Select menus. /src/js/tu-select.js hides the native select inside a tool
   and draws this button and list in its place, so the options read in the
   site font rather than the system menu. The select itself stays in the
   page, in sync, for the scripts that use it.
   -------------------------------------------------------------------------- */

.tu-select {
    position: relative;
    display: inline-flex;
    min-width: 0;
    vertical-align: middle;
}

.tu-page .tu-select-native {
    display: none !important;
}

.tu-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    height: 34px;
    margin: 0;
    padding: 0 0.65rem 0 0.7rem;
    background: #ffffff;
    border: 1px solid var(--tu-line-strong);
    border-radius: var(--tu-radius-sm);
    color: var(--tu-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.tu-select-trigger:hover:not(:disabled) {
    background: var(--tu-canvas);
    border-color: var(--tu-subtle);
}

.tu-select-trigger:focus-visible {
    outline: none;
    border-color: var(--tu-accent);
    box-shadow: var(--tu-ring);
}

.tu-select-trigger[aria-expanded="true"] {
    border-color: var(--tu-accent);
}

.tu-select-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tu-select-icon {
    color: var(--tu-accent);
    font-size: 0.8rem;
}

.tu-select-prefix {
    color: var(--tu-muted);
    font-weight: 500;
}

.tu-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tu-select-caret {
    flex-shrink: 0;
    width: 10px;
    height: 6px;
    margin-left: auto;
    fill: none;
    stroke: var(--tu-muted);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}

.tu-select-trigger[aria-expanded="true"] .tu-select-caret {
    transform: rotate(180deg);
}

.tu-select-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 300;
    min-width: 100%;
    max-height: min(320px, 60vh);
    overflow-y: auto;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--tu-line);
    border-radius: 10px;
    box-shadow: var(--tu-shadow-pop);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    outline: none;
}

.tu-select-list[hidden] {
    display: none;
}

.tu-select-list--end {
    left: auto;
    right: 0;
}

.tu-select-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.5rem 0.6rem 0.5rem 0.5rem;
    border-radius: 6px;
    color: var(--tu-text);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.tu-select-option.is-active {
    background: var(--tu-canvas-deep);
    color: var(--tu-ink);
}

.tu-select-option[aria-selected="true"] {
    color: var(--tu-accent);
    font-weight: 600;
}

.tu-select-option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tu-select-check {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    visibility: hidden;
}

.tu-select-option[aria-selected="true"] .tu-select-check {
    visibility: visible;
}

.tu-select-hint {
    margin-left: auto;
    padding-left: 1rem;
    color: var(--tu-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Reduced motion: no transitions or entrances. Spinners keep turning, slowly,
   because they are the only sign that work is happening.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tu-page *,
    .tu-page *::before,
    .tu-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .tu-floatbar,
    .tu-floatbar.visible {
        transform: translate(-50%, 0);
    }

    .tu-page .tu-app .loading-container .spinner,
    .tu-page .tu-app .table-loading .spinner,
    .tu-page .loading-spinner,
    .tu-page .tu-spinner {
        animation: tu-spin 2s linear infinite !important;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
    .tu-floatbar,
    .tu-floatbar.visible {
        transform: none;
    }
}