/* ============================================================
   Free tools (/tools/*) — scoped styles.
   Loaded only on tool pages so style.css stays untouched.
   Tokens come from style.css :root (Leaf palette).
   ============================================================ */

/* The hidden attribute only works through the browser's display:none rule, and
   several blocks below set display:flex, which would win and leave "hidden"
   elements on screen. Restore the intent for everything inside the tool. */
.ht-tool [hidden] {
    display: none !important;
}

/* The brand sits at the top of the centred stack rather than in a bar of its
   own. The site header is position:fixed with a white panel behind it, so a
   lone logo in it floated over the page instead of belonging to it. Here it
   reads as a signature above the heading: modest, centred, part of the group. */
.ht-brand {
    display: inline-block;
    line-height: 0;
    margin-bottom: 30px;
    opacity: .85;
    transition: opacity .15s ease;
}

.ht-brand:hover { opacity: 1; }

.ht-brand-logo {
    height: 26px;
    width: auto;
    display: block;
}

/* Deliberately short: the dark band is a label, not a landing page. Anyone
   here came to compress a file, so the tool starts almost immediately.
   Specific enough to beat `.page-hatchium .hero`, whose padding is sized for
   the fixed nav and chat bubble that these pages do not have. */
.page-hatchium.page-tool .ht-hero {
    min-height: auto;
    padding: 38px 0 78px;
}

.ht-hero-inner {
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
}


/* Specific enough to beat `.page-hatchium .hero h1` in style.css, which sets
   the full 42px hero size and forces text-align:left. Without this the tool
   heading wrapped to two lines and sat left of its own centred intro. */
.page-hatchium .ht-hero .ht-h1 {
    color: #fff;
    font-size: clamp(23px, 2.6vw, 31px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin: 0 0 10px;
    text-align: center;
    /* Headings are written to sit on one line. If a narrow screen forces a
       wrap, balance it rather than leaving two words stranded. */
    text-wrap: balance;
}

.ht-intro {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 560px;
}

/* ---- Working area: light, so a scan or photo reads against a neutral field ---- */
.ht-tool-section {
    background: var(--gray-50);
    padding: 0 0 56px;
}

/* Lifted over the seam so the card reads as the point of the page. */
.ht-tool {
    max-width: 660px;
    margin: -52px auto 0;
    position: relative;
    z-index: 2;
}

.ht-panel {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px rgba(15, 23, 42, .08);
    padding: 20px;
}

/* ---- Drop zone ---- */
.ht-drop {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.ht-drop:hover,
.ht-drop:focus-visible {
    border-color: var(--noti-btn);
    background: var(--noti-50);
    outline: none;
}

.ht-drop.is-dragging {
    border-color: var(--noti-btn);
    background: var(--noti-50);
}

.ht-drop-icon {
    width: 34px;
    height: 34px;
    color: var(--noti-btn);
    margin-bottom: 10px;
}

.ht-drop-title {
    font-weight: 700;
    font-size: 17px;
    color: #1A1A1A;
    margin: 0 0 4px;
}

.ht-drop-sub {
    font-size: 13.5px;
    color: var(--gray-500);
    margin: 0;
}

/* ---- Target chips ---- */
.ht-step { margin-top: 20px; }

.ht-step-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-500);
    margin: 0 0 10px;
}

/* Equal columns across the full width rather than a wrapping flex row: with
   six presets the row used to end ragged, with the custom field trailing off
   the end like something that had fallen off. */
.ht-chips {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.ht-chip {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 6px;
    text-align: center;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-600);
    cursor: pointer;
    transition: all .15s ease;
}

.ht-chip:hover { border-color: var(--gray-400); color: var(--gray-700); }

.ht-chip.is-active {
    background: var(--noti-dark);
    border-color: var(--noti-dark);
    color: #fff;
}

/* The presets are the discrete choices; this is the continuous one. It spans
   exactly the footprint of the six chips above so the two rows read as one
   control group, and it keeps the card radius rather than the pill radius so
   the shape still says "type into me" instead of "pick me". */
.ht-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 0 18px;
    min-height: 48px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--gray-50);   /* tinted, so it reads as a field rather than more card */
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ht-custom:hover { border-color: var(--gray-300); }

/* Carries the same green as a selected chip once a custom size is in use.
   Without it nothing on screen showed which target was active, because
   choosing a custom size clears every chip. */
.ht-custom.is-active {
    background: var(--noti-50);
    /* A ring rather than a border colour: something in style.css pins
       border-color on this element hard enough that even an inline literal is
       ignored, while box-shadow and outline both apply normally. The ring reads
       identically and does not depend on winning that fight. */
    box-shadow: 0 0 0 1.5px var(--noti-dark);
}

.ht-custom.is-active .ht-custom-label { color: var(--noti-dark); }
.ht-custom.is-active input { color: var(--noti-dark); }
.ht-custom.is-active .ht-custom-unit { color: var(--noti-dark); }

.ht-custom:focus-within {
    border-color: var(--noti-btn);
    box-shadow: 0 0 0 3px rgba(32, 168, 83, .15);
}

/* Takes the slack, which puts the value against the right edge the way a
   settings row does. */
.ht-custom-label {
    flex: 1;
    font-size: 14px;
    color: var(--gray-600);
}

.ht-custom input {
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    width: 78px;
    border: 0;
    outline: none;
    padding: 8px 0;
    background: transparent;
    color: #1A1A1A;
    text-align: right;
}

/* the browser's number spinners crowd a field this small */
.ht-custom input::-webkit-outer-spin-button,
.ht-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ht-custom input { -moz-appearance: textfield; appearance: textfield; }
.ht-custom input::placeholder { color: var(--gray-400); font-weight: 500; }

.ht-custom-unit {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 600;
    min-width: 20px;
}

/* ---- Status ---- */
.ht-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 14.5px;
    color: var(--gray-600);
    font-weight: 600;
}

.ht-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid var(--gray-200);
    border-top-color: var(--noti-btn);
    border-radius: 50%;
    animation: ht-spin .7s linear infinite;
    flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
    .ht-spinner { animation-duration: 2s; }
}

/* ---- Notes: warnings, errors, server-fallback consent ---- */
.ht-note {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-700);
}

.ht-note.is-error {
    border-color: #FECACA;
    background: #FEF2F2;
    color: #991B1B;
}

.ht-note.is-warn {
    border-color: #FDE68A;
    background: #FFFBEB;
    color: #92400E;
}

.ht-note p { margin: 0 0 10px; }
.ht-note p:last-child { margin-bottom: 0; }

.ht-note-btn {
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 0;
    background: var(--noti-btn);
    color: #fff;
    cursor: pointer;
}

.ht-note-btn.is-ghost {
    background: transparent;
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    margin-left: 8px;
}

/* ---- Result ---- */
.ht-result {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}

/* Fixed height, flexible width: a square box strands a wide banner in white
   space and squeezes a tall scan. Letting the width follow the image keeps
   both shapes looking deliberate. */
.ht-result-media {
    flex-shrink: 0;
    width: auto;
    min-width: 84px;
    max-width: 150px;
    height: 108px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

/* contain, not cover: cropping a document to a square hides the very thing
   the visitor wants to check. */
.ht-result-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 3px;
}

.ht-pdf-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--noti-btn);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.ht-pdf-mark svg { width: 26px; height: 26px; }

.ht-result-body { flex: 1; min-width: 0; }

.ht-sizes {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ht-size-before {
    font-size: 15px;
    color: var(--gray-500);
    text-decoration: line-through;
}

.ht-arrow { width: 15px; height: 15px; color: var(--gray-400); flex-shrink: 0; }

.ht-size-after { font-size: 20px; font-weight: 800; color: #1A1A1A; }

.ht-saved {
    font-size: 12px;
    font-weight: 700;
    color: var(--noti-dark);
    background: var(--noti-50);
    padding: 3px 9px;
    border-radius: 999px;
}

.ht-dims { font-size: 13px; color: var(--gray-500); margin: 0 0 12px; }

.ht-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ht-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--noti-btn);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(32, 168, 83, .28);
    transition: background .15s ease, transform .05s ease;
}

.ht-download:hover { background: var(--noti-dark); }
.ht-download:active { transform: translateY(1px); }
.ht-download svg { width: 16px; height: 16px; }

.ht-again {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: 0;
    color: var(--gray-600);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.ht-again:hover { color: var(--noti-dark); }

/* ---- Trust line ---- */
.ht-trust {
    display: block;
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray-500);
    text-align: center;
}

.ht-trust svg {
    width: 14px;
    height: 14px;
    color: var(--noti-btn);
    display: inline-block;
    vertical-align: -2px;
    margin-right: 5px;
}

.ht-noscript {
    max-width: 640px;
    margin: 18px auto 0;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    font-size: 14px;
    text-align: center;
}

/* ---- Content below the tool: plain, no section badges or pitch ---- */
.ht-explain {
    background: var(--gray-50);
    padding: 8px 0 52px;
    border-bottom: 1px solid var(--gray-200);
}

.ht-explain-title {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 12px;
    letter-spacing: -0.2px;
}

.ht-prose {
    color: var(--gray-600);
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0 0 18px;
}

.ht-steps {
    margin: 0;
    padding-left: 20px;
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.65;
}

.ht-steps li { margin-bottom: 10px; }
.ht-steps strong { color: #1A1A1A; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .page-hatchium.page-tool .ht-hero { padding: 24px 0 64px; }
    .ht-tool { margin-top: -46px; }
    .ht-panel { padding: 16px; }
    .ht-drop { padding: 24px 14px; }
    .ht-chips { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ht-chip { font-size: 13.5px; padding: 11px 6px; }
    /* Custom size drops to its own line: sharing a row with the presets left it
       squeezed against them and reading as a sixth option. */
    .ht-custom { padding: 0 15px; min-height: 48px; margin-top: 12px; }
    .ht-custom-label { font-size: 13.5px; }
    .ht-custom input { width: 72px; font-size: 15px; }
    .ht-result { flex-direction: column; align-items: stretch; text-align: center; }
    /* The preview is how someone checks they got the right document, so give
       it the full card width once the card is stacked. */
    .ht-result-media { width: 100%; max-width: none; height: 176px; }
    .ht-sizes { justify-content: center; }
    .ht-actions { justify-content: center; }
}

/* ---- Tools hub ---- */
.ht-hub {
    max-width: 660px;
    margin: -52px auto 0;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* The general tool leads: it does every size, the rest are shortcuts into it. */
.ht-hub-card:first-child { grid-column: 1 / -1; }

.ht-hub-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px rgba(15, 23, 42, .06);
    padding: 16px 16px 16px 14px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.ht-hub-card:hover {
    border-color: var(--noti-btn);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 26px rgba(32, 168, 83, .12);
    transform: translateY(-1px);
}

.ht-hub-card:active { transform: translateY(0); }

/* Glyph for the two general tools; the size variants label themselves, which
   carries more meaning than a third copy of the same compress glyph. */
.ht-hub-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: var(--noti-50);
    color: var(--noti-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ht-hub-icon svg { width: 22px; height: 22px; }

.ht-hub-icon.is-size {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.1;
    text-align: center;
    padding: 0 4px;
}

.ht-hub-body { flex: 1; min-width: 0; }

.ht-hub-title {
    display: block;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 3px;
}

/* Clamped so the four cards in the grid keep a common height however long the
   sentence is; the full description is on the tool page itself. */
.ht-hub-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gray-600);
}

.ht-hub-card:first-child .ht-hub-text { -webkit-line-clamp: 1; }

.ht-hub-go {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--gray-300);
    transition: color .15s ease, transform .15s ease;
}

.ht-hub-card:hover .ht-hub-go { color: var(--noti-btn); transform: translateX(2px); }

@media (max-width: 640px) {
    .ht-hub { grid-template-columns: 1fr; margin-top: -46px; }
    .ht-hub-card { padding: 14px; }
    .ht-hub-icon { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .ht-hub-card, .ht-hub-go { transition: none; }
    .ht-hub-card:hover { transform: none; }
}

/* ---- Footer: the site's dark footer, minus the link grid and the badges ---- */
.ht-footer {
    padding: 46px 0 26px;
    text-align: center;
}

.ht-footer-top {
    max-width: 520px;
    margin: 0 auto 26px;
}

.ht-footer-brand {
    display: inline-block;
    line-height: 0;
    margin-bottom: 14px;
}

.ht-footer-brand img {
    height: 30px;
    width: auto;
    display: block;
}

.ht-footer-line {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}

.ht-footer-nav {
    display: flex;
    gap: 2px 22px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 20px;
}

.ht-footer-nav a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color .15s ease;
    padding: 9px 4px;      /* 22px of text is an awkward thing to hit with a thumb */
    display: inline-block;
}

.ht-footer-nav a:hover { color: var(--noti); }

.ht-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
}

.ht-footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.ht-footer-legal {
    display: flex;
    gap: 12px;
}

.ht-footer-legal a { padding: 8px 4px; display: inline-block; }

.ht-footer-legal a { color: inherit; text-decoration: none; }
.ht-footer-legal a:hover { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 640px) {
    .ht-footer-bottom { flex-direction: column; text-align: center; }
}