/*
 * kit.css — the look every jexter.ch page shares, on top of qry-ui.css (Qry 3): Sugarcube's identity.
 * Sugarcube blue (#33699f, bright #5e9bd6 — the cube's faces), Poppins for titles, the fading blue
 * hairline under the bar, pills for what you click, 12px for what contains. The theme is qry's
 * knobs (light and dark are derived, no dark variant here); every other colour reads a qry token.
 * Page CSS beats qry's layers, so this file wins where it speaks. Mobile first: one column, then more.
 */

/* Poppins 600, vendored (SIL OFL — public/vendor/fonts/OFL.txt): titles only */
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
    src: url(/vendor/fonts/poppins-latin-ext-600-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
    src: url(/vendor/fonts/poppins-latin-600-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --qry-theme-accent: #33699f;          /* Sugarcube blue */
    --qry-theme-chroma: .018;             /* greys lean a little blue */
    --qry-font-display: Poppins, var(--qry-font);
    --qry-radius: 12px;                   /* a surface that contains */
    --qry-btn-radius: 999px;              /* a control you click, sized by its content */
    --jx-brand-bright: #5e9bd6;
    --jx-width: 64rem;                    /* every page, the bar's width: a tool, the home and admin alike */
    --jx-measure: 46rem;                  /* a paragraph's longest line: about 80 characters, then it wraps */
    --jx-gutter: clamp(1rem, 4vw, 2rem);
    /* one elevation, the page: a crisp ring plus contact and ambient shadows */
    --jx-lift: 0 0 0 1px var(--qry-line), 0 1px 2px color-mix(in oklab, var(--qry-shade) 10%, transparent),
        0 16px 36px -24px color-mix(in oklab, var(--qry-shade) 45%, transparent);
}

/* each tool has its tone: its page and its sheet in the catalogue read --jx-tone (qry tokens only) */
:root, [data-tool] { --jx-tone: var(--qry-accent); }
[data-tool="check"] { --jx-tone: var(--qry-danger); }
[data-tool="normalize"] { --jx-tone: var(--qry-warn); }
[data-tool="image-to-pdf"] { --jx-tone: var(--qry-ok); }
[data-tool="convert"] { --jx-tone: var(--qry-purple); }

body.jx-page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--qry-bg); }
h1, h2, h3, .qry-dialog-title { font-family: var(--qry-font-display); font-weight: 600; letter-spacing: -.01em; color: var(--qry-text-strong); }
.jx-spin { animation: jx-spin 1s linear infinite; }
@keyframes jx-spin { to { transform: rotate(360deg); } }

/* a scroll into view clears the sticky bar above (and, on a phone, the tab bar or a dock below) */
html { scroll-padding-top: 4.5rem; }

/* the words a finger needs are not a mouse's: « choose » on a touch screen, « drop » on a computer */
.jx-touch { display: none; }
@media (pointer: coarse) {
    .jx-fine { display: none; }
    .jx-touch { display: revert; }
}

/* ── the reader over the page (kit.js openReader) ────────────────────────── */
dialog.jx-reader { width: min(76rem, 100vw - 2rem); height: min(100dvh - 2rem, 64rem); max-width: none; max-height: none; padding: 0; border: 0;
    border-radius: var(--qry-radius); overflow: hidden; background: var(--qry-surface-2); box-shadow: 0 20px 60px -20px rgb(0 0 0 / .5); }
dialog.jx-reader::backdrop { background: rgb(0 0 0 / .55); }
dialog.jx-reader iframe { display: block; width: 100%; height: 100%; border: 0; }
body:has(dialog.jx-reader[open]) { overflow: hidden; }
@media (max-width: 52rem) { dialog.jx-reader { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; } }

/* ── the bar ─────────────────────────────────────────────────────────────── */
.jx-bar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: .6rem; min-height: 3.6rem;
    padding: .4rem max(var(--jx-gutter), calc((100% - var(--jx-width)) / 2));
    background: var(--qry-glass); backdrop-filter: saturate(1.4) blur(12px);
    /* the Sugarcube signature: a blue hairline that fades out */
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--jx-brand-bright), transparent 70%) 1;
}
.jx-brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--qry-font-display); font-weight: 600; font-size: 1.15rem;
    color: var(--qry-text-strong); text-decoration: none; flex: none; }
.jx-crumb { display: flex; align-items: center; gap: .45rem; min-width: 0; color: var(--qry-text-muted); font-size: .95rem; }
.jx-crumb a { color: inherit; text-decoration: none; }
.jx-crumb a:hover { color: var(--qry-accent); }
.jx-crumb > span:last-child { color: var(--qry-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-spacer { flex: 1; }
.jx-account { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.jx-account .qry-btn { white-space: nowrap; }
.jx-who { display: inline-flex; align-items: center; gap: .35rem; color: var(--qry-text-muted); font-size: .9rem; flex-shrink: 0;   /* the crumb gives way first: « Guest » never reads « G… » */
    text-decoration: none; padding: .3rem .6rem; border-radius: 999px; }
.jx-who:hover { color: var(--qry-accent); background: var(--qry-tint); }

/* the app's views: pills in the bar on a computer, a tab bar at the bottom on a phone */
.jx-views { display: flex; gap: .2rem; margin-left: .75rem; }
.jx-views a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px;
    color: var(--qry-text-muted); text-decoration: none; font-weight: 500; font-size: .93rem; white-space: nowrap;
    transition: background var(--qry-speed) var(--qry-ease), color var(--qry-speed) var(--qry-ease); }
.jx-views a:hover { color: var(--qry-text-strong); background: var(--qry-tint); }
.jx-views a[aria-current="page"] { color: var(--qry-accent); background: color-mix(in oklab, var(--qry-surface), var(--qry-accent) 12%); }
.jx-tabbar { display: none; }
.jx-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.jx-usage { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--qry-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── the page ────────────────────────────────────────────────────────────── */
p { text-wrap: pretty; }                  /* no word left alone on a paragraph's last line */
.jx-main { width: min(var(--jx-width), 100% - 2 * var(--jx-gutter)); margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.5rem) 0 4rem; flex: 1;
    display: flex; flex-direction: column; gap: 1.25rem; }
/* a tool's head, written by page() from its manifest: its mark in its tone, its name, one line */
.jx-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .35rem 1rem; }
.jx-hero h1 { font-size: clamp(1.6rem, 2vw + 1rem, 2.15rem); line-height: 1.1; margin: 0; }
.jx-hero p { grid-column: 1 / -1; color: var(--qry-text-muted); margin: 0; font-size: 1.05rem; line-height: 1.5; max-width: var(--jx-measure); text-wrap: balance; }
.jx-hero-icon, .jx-icon-box { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; flex: none;
    background: color-mix(in oklab, var(--qry-surface), var(--jx-tone) 14%); color: var(--jx-tone); font-size: 1.45rem; }
.jx-section { display: grid; gap: .9rem; }
.jx-needs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0; }
.jx-section-title { font-size: 1.15rem; margin: 1rem 0 0; display: flex; align-items: center; gap: .5rem; }
.jx-step { display: grid; gap: .6rem; }
.jx-step > h2 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .55rem; }
.jx-step > h2 b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .85rem;
    background: var(--qry-accent); color: var(--qry-on-accent); }
.jx-empty { color: var(--qry-text-muted); margin: 0; padding: .5rem 0; }

/* ── the footer ──────────────────────────────────────────────────────────── */
.jx-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1.25rem;
    padding: 1.5rem var(--jx-gutter) max(1.5rem, env(safe-area-inset-bottom));
    color: var(--qry-text-muted); font-size: .85rem; border-top: 1px solid var(--qry-line); }
.jx-footer .jx-brand { font-size: .95rem; }
.jx-footer a:not(.jx-brand) { color: inherit; display: inline-block; padding-block: .5rem; }

/* ── the catalogue: each tool a sheet of paper, its corner folded in its tone ── */
.jx-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 100%), 1fr)); gap: 1.1rem; }
a.jx-tool {
    --fold: 1.6rem;
    position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 15.5rem; padding: 1.3rem 1.2rem 1.1rem;
    background: var(--qry-surface); color: var(--qry-text); text-decoration: none; border-radius: 6px;
    clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
    box-shadow: inset 0 0 0 1px var(--qry-line);
    transition: translate var(--qry-speed) var(--qry-ease), background var(--qry-speed) var(--qry-ease);
}
a.jx-tool::after {                        /* the fold, in the tool's tone */
    content: ''; position: absolute; top: 0; right: 0; width: var(--fold); height: var(--fold);
    background: linear-gradient(225deg, transparent 50%, var(--jx-tone) 50%); border-bottom-left-radius: 4px;
}
a.jx-tool:hover, a.jx-tool:focus-visible { translate: 0 -3px; background: color-mix(in oklab, var(--qry-surface), var(--jx-tone) 5%); outline: none; }
a.jx-tool:focus-visible { box-shadow: inset 0 0 0 2px var(--jx-tone); }
a.jx-tool .jx-icon-box { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; border-radius: 12px; }
a.jx-tool h3 { font-size: 1.08rem; line-height: 1.25; margin: .5rem 0 0; }
a.jx-tool p { margin: 0; color: var(--qry-text-muted); font-size: .92rem; line-height: 1.45; flex: 1; }
a.jx-tool .jx-io { font-size: .8rem; font-weight: 600; color: var(--jx-tone); font-variant-numeric: tabular-nums; }
a.jx-tool .qry-badge { align-self: flex-start; justify-self: start; }   /* a pill, never the row (a card is a grid on a phone) */
@media (max-width: 40rem) {                /* a phone: the sheets become a list, the fold stays */
    .jx-tools { grid-template-columns: 1fr; gap: .6rem; }
    a.jx-tool { --fold: 1.1rem; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .9rem; padding: .9rem 1rem; }
    a.jx-tool .jx-icon-box { grid-row: span 4; align-self: start; }
    a.jx-tool > :not(.jx-icon-box) { grid-column: 2; }
    a.jx-tool h3 { margin: 0; }
    /* the five tools in about one screen: two lines of their summary, the formats left to the tool's page */
    a.jx-tool { padding: .75rem .9rem; }
    a.jx-tool p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .88rem; }
    a.jx-tool .jx-io { display: none; }
}

/* ── the drop zone ───────────────────────────────────────────────────────── */
.jx-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    min-height: 13rem; padding: 2rem 1.25rem; text-align: center; cursor: pointer;
    border: 2px dashed color-mix(in oklab, var(--qry-line-strong), var(--jx-tone) 35%); border-radius: var(--qry-radius);
    background: var(--qry-surface); color: var(--qry-text-muted);
    transition: border-color var(--qry-speed) var(--qry-ease), background var(--qry-speed) var(--qry-ease);
}
.jx-drop:hover, .jx-drop:focus-visible { border-color: var(--jx-tone); background: color-mix(in oklab, var(--qry-surface), var(--jx-tone) 5%); outline: none; }
.jx-drop > span:not(.jx-drop-icon) { display: grid; gap: .35rem; justify-items: center; }
.jx-drop strong { color: var(--qry-text-strong); font-size: 1.1rem; font-family: var(--qry-font-display); font-weight: 600; }
.jx-drop u { color: var(--jx-tone); text-underline-offset: 3px; }
.jx-drop small { color: var(--qry-text-subtle); }
.jx-drop-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; margin-bottom: .4rem;
    background: color-mix(in oklab, var(--qry-surface), var(--jx-tone) 14%); color: var(--jx-tone); font-size: 1.6rem; }
.jx-drop[aria-disabled="true"] { opacity: .55; pointer-events: none; }
@media (pointer: coarse) {                  /* nothing is dropped with a finger: a button-sized card that opens the picker */
    .jx-drop { flex-direction: row; min-height: 0; padding: 1rem 1.1rem; gap: .9rem; text-align: left; border-style: solid; }
    .jx-drop-icon { flex: none; width: 2.75rem; height: 2.75rem; margin: 0; font-size: 1.3rem; }
    .jx-drop > span:not(.jx-drop-icon) { gap: .1rem; justify-items: start; }
}

/* ── a choice (a format, a kind): one segmented row, the chosen one said in a line under it ── */
.jx-choose { display: grid; gap: .5rem; justify-items: start; }
.jx-choose .qry-seg { max-width: 100%; overflow-x: auto; }
.jx-choose .qry-seg label { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.jx-choose p { margin: 0; color: var(--qry-text-muted); font-size: .92rem; max-width: var(--jx-measure); }

/* ── a job ───────────────────────────────────────────────────────────────── */
.jx-jobs { display: grid; gap: .6rem; }
.jx-jobs:empty { display: none; }
.jx-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .9rem; align-items: center; padding: .9rem 1rem;
    background: var(--qry-surface); border-radius: var(--qry-radius); box-shadow: var(--jx-lift); }
.jx-job-icon { grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--qry-surface-2); color: var(--qry-text-muted); font-size: 1.2rem; }
.jx-job-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--qry-text-strong); }
.jx-job-meta { grid-column: 2; color: var(--qry-text-muted); font-size: .85rem; }
.jx-job-actions { grid-row: span 2; grid-column: 3; display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.jx-job progress { grid-column: 2 / -1; width: 100%; height: .35rem; margin-top: .3rem; }
.jx-job .qry-callout { grid-column: 1 / -1; margin: .5rem 0 0; }
.jx-job[data-state="done"] .jx-job-icon { background: color-mix(in oklab, var(--qry-surface), var(--qry-ok) 14%); color: var(--qry-ok); }
.jx-job[data-state="failed"] .jx-job-icon { background: color-mix(in oklab, var(--qry-surface), var(--qry-danger) 14%); color: var(--qry-danger); }

/* ── findings (redaction check) ──────────────────────────────────────────── */
.jx-findings { display: grid; gap: .5rem; }
.jx-finding { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; padding: .75rem 1rem;
    background: var(--qry-surface); border: 1px solid var(--qry-line); border-radius: var(--qry-radius); }
.jx-finding b { color: var(--qry-text-muted); font-weight: 600; font-size: .85rem; }
.jx-finding q { font-family: var(--qry-font-mono); overflow-wrap: anywhere; }

/* ── the sign-in dialog ──────────────────────────────────────────────────── */
.jx-signin { display: grid; gap: .75rem; width: min(24rem, 100%); }
.jx-or { display: flex; align-items: center; gap: .75rem; color: var(--qry-text-muted); font-size: .85rem; }
.jx-or::before, .jx-or::after { content: ''; flex: 1; border-top: 1px solid var(--qry-line); }

/* ── a phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 52rem) {
    .jx-views { display: none; }
    /* the views move to the thumb: a tab bar, as an app has */
    body.jx-page { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }   /* the tab bar is ~4.3rem: clear it, with the toasts */
    .qry-toasts { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
    .jx-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset: auto 0 0; z-index: 20;
        background: var(--qry-glass); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--qry-line);
        padding: .3rem .25rem max(.3rem, env(safe-area-inset-bottom)); }
    .jx-tabbar a { display: grid; justify-items: center; gap: .15rem; padding: .35rem 0; color: var(--qry-text-muted);
        text-decoration: none; font-size: .72rem; font-weight: 600; border-radius: 10px; }
    .jx-tabbar a .qry-icon { font-size: 1.3rem; }
    .jx-tabbar a[aria-current="page"] { color: var(--qry-accent); }
    .jx-tabbar a[aria-current="page"] .qry-icon { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--qry-accent) 35%, transparent)); }
    html { scroll-padding-bottom: 6rem; }
    /* the bar steps aside while the page goes down, back at the first move up (kit.js `tuck`) */
    .jx-bar { transition: translate .25s var(--qry-ease); }
    .jx-bar.is-tucked { translate: 0 -100%; }
    /* a task under way (body.jx-focus) has the screen: the tab bar and the footer step aside, and its
       actions sit in a dock under the thumb (.jx-dock: sticky at the bottom, edge to edge) — the other
       buttons of a dock show their icon only (.jx-label is their word) */
    body.jx-focus .jx-tabbar, body.jx-focus .jx-footer { display: none; }
    body.jx-focus.jx-page { padding-bottom: 0; }
    body.jx-focus .jx-main { padding-bottom: 0; }
    body.jx-focus .qry-toasts { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
    .jx-main .jx-dock { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
        margin: 0 calc(-1 * var(--jx-gutter)); padding: .6rem var(--jx-gutter) max(.6rem, env(safe-area-inset-bottom));
        background: var(--qry-glass); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--qry-line);
        border-radius: 0; box-shadow: none; }
    .jx-dock .qry-btn { min-height: 3rem; }
    .jx-dock .qry-btn.primary { flex: 1; justify-content: center; white-space: nowrap; }
    .jx-dock .jx-spacer { display: none; }
    .jx-dock .qry-btn:has(.jx-label) { flex: none; width: 3rem; padding: 0; justify-content: center; }
    .jx-dock .jx-label { display: none; }
}
@media (max-width: 40rem) {
    /* the bar keeps the brand, the sign-in and the theme: the rest is one tap away */
    .jx-who, .jx-crumb, .jx-usage, .jx-signup { display: none; }
    .jx-job { grid-template-columns: auto minmax(0, 1fr); }
    .jx-job-meta { grid-row: 2; }
    .jx-job-actions { grid-column: 1 / -1; grid-row: 4; justify-content: stretch; margin-top: .5rem; }
    .jx-job progress { grid-row: 3; }
    .jx-job-actions > :not(.icon) { flex: 1 1 auto; justify-content: center; padding-inline: .5rem; }   /* wrap rather than clip */
    .jx-footer { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .jx-spin { animation: none; } .jx-bar { transition: none; } a.jx-tool, a.jx-tool .qry-icon { transition: none; } }
.jx-legal { color: var(--qry-text-muted); font-size: .82rem; text-align: center; }
.jx-legal a { display: inline-block; padding-block: .45rem; }   /* a finger's target, not the text's line */