/* Public tool pages in the new design (croppers/new_ui/tool.html): the hero band with the tool
   beside it, the drop card, the file workspace, the result, and the guide sections below.
   Shared by every public tool; page tokens come from desk.css.

   The file cards, the "Add more files" card and the settings fields are built by
   landing/js/new-ui/tool-core.js and croppers/new_ui/_field.html, so their class names
   (.fcard*, .ph, .seg, .check, .field*) are fixed - the rules for them are kept as they were. */

.tool { margin-top: 4px; }
/* The workspace runs edge to edge so the file cards get the width; the hero band and the guide
   sections below keep the page's own measure. */
main.page-wrap--fluid { max-width: none; padding: 0 24px; }
.page-inner { max-width: 1200px; margin: 0 auto; }
@media (max-width: 760px) { main.page-wrap--fluid { padding: 0 16px; } }
/* The longest trail - PDF Tools > Convert from PDF > PDF to PowerPoint - is wider than a phone,
   and public.css's .crumbs is a flex row that does not wrap.
   The trail sits directly in the fluid wrap, which has no measure of its own, so it needs the
   page's own 1200px to line up with the hero and the guide sections under it; without it the
   crumbs start at the window edge while everything below them is centred. */
.tool-crumbs { padding-top: 18px; flex-wrap: wrap; row-gap: 2px; max-width: 1200px; margin-inline: auto; }

/* The hero's backdrop reaches the window edges; an overflow value on body propagates to the
   viewport, so this stops a 100vw child from raising a sideways scrollbar without turning
   anything into a scroll container. Only tool pages load this file. */
body { overflow-x: hidden; }

/* ── 1. Before any file ────────────────────────────────────────────────────────────────────────
   What the tool is on the left, the tool itself on the right. tool-core.js hides #toolHero and
   #stageEmpty together as soon as a file is added; the backdrop is the height of the band, so
   with both of them gone the band has nothing in flow and collapses to nothing. */
.th { position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(22px, 3.2vw, 46px); align-items: center; max-width: 1200px; margin: 0 auto; }
.th:has(> #stageEmpty[hidden]) { display: none; }
.th__copy, .dropcard { margin-block: clamp(20px, 2.8vw, 38px); }
/* The backdrop is lifted to the top of the document (--th-rise, set by the page's own script from
   the band's offset; 100px - the 62px header and the breadcrumb row - is the no-JS fallback) so the
   grid runs up behind the header instead of starting under the crumbs. The header itself goes clear
   at the top of the page (below), which is what lets it show through. */
.th__bg { position: absolute; top: calc(-1 * var(--th-rise, 100px)); bottom: auto; left: calc(-50vw + 50%); width: 100vw; height: calc(100% + var(--th-rise, 100px)); z-index: -1; pointer-events: none; overflow: hidden; }
.th__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 54px 54px; opacity: .4; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.th__bg i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); }
.th__bg i:nth-child(1) { width: 460px; height: 460px; left: 1%; top: calc(-120px + var(--th-rise, 100px)); background: radial-gradient(circle, rgba(3,61,99,.24), transparent 68%); }
.th__bg i:nth-child(2) { width: 380px; height: 380px; right: 4%; top: calc(40px + var(--th-rise, 100px)); background: radial-gradient(circle, rgba(17,154,212,.22), transparent 68%); }

/* The header over the hero: no band of its own at the top of the page, so the grid and the blobs
   show through it; tool.html adds .is-stuck as soon as the page moves and the white blur comes
   back. Only tool pages load this file, and body wins the tie against site-chrome.css's own rule
   rather than depending on the load order. Once a file is added the hero is gone, so the header
   carries its band again straight away. */
body .sc-header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background .22s ease, border-color .22s ease, box-shadow .22s ease; }
body .sc-header.is-stuck,
body:has(#stageEmpty[hidden]) .sc-header { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom-color: var(--border); box-shadow: 0 10px 26px -22px rgba(10,29,41,.6); }
@media (prefers-reduced-motion: reduce) { body .sc-header { transition: none; } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--primary-text); background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: 999px; padding: 5px 13px 5px 10px; }
.eyebrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.th__copy h1 { font-size: clamp(29px, 3.3vw, 40px); font-weight: var(--fw-bold); letter-spacing: -.035em; line-height: 1.08; margin: 14px 0 10px; text-wrap: balance; }
.th__copy .lead { color: var(--text-muted); font-size: 17px; line-height: 1.55; max-width: 46ch; }
.spec { display: grid; gap: 9px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; font-size: var(--fs-label); }
.spec > div { display: flex; gap: 12px; align-items: baseline; }
.spec dt { min-width: 92px; font-weight: var(--fw-semibold); color: var(--text); }
.spec dd { margin: 0; color: var(--text-muted); }

/* The tool, in a card of its own: its name, the drop area, and the three steps of this tool */
.dropcard { border-radius: 22px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 40px 84px -48px rgba(3,61,99,.5), 0 6px 16px -10px rgba(10,29,41,.18); overflow: hidden; }
.dropcard__bar { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.dropcard__ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--grad); color: var(--on-primary); display: grid; place-items: center; }
.dropcard__ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dropcard__bar b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.dropcard__bar .pill { margin-left: auto; }
.dropcard__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.dropcard__steps li { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--surface); font-size: var(--fs-label); font-weight: var(--fw-medium); line-height: 1.3; }
.dropcard__steps i { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); font-size: 10px; font-style: normal; font-weight: var(--fw-bold); display: grid; place-items: center; }

/* The drop area keeps its own class: tool-core.js puts .dragging on the body for a file dragged
   anywhere on the page, and .over on this element itself. */
.dropzone { margin: 16px; border: 2px dashed var(--border-strong); border-radius: 18px; background: var(--surface-alt); padding: 30px 18px; text-align: center; transition: border-color .15s, background .15s; }
.dropzone.over, body.dragging .dropzone { border-color: var(--primary); background: var(--primary-soft); }
.dropzone__art { position: relative; width: 112px; height: 76px; margin: 0 auto 16px; }
.dropzone__pg { position: absolute; top: 4px; width: 44px; height: 58px; border-radius: 4px; background: #fff; border: 1px solid var(--border-strong); box-shadow: 0 10px 20px -12px rgba(3,61,99,.6); display: grid; align-content: start; gap: 4px; padding: 7px 6px; }
.dropzone__pg i { display: block; height: 3px; border-radius: 2px; background: var(--grid); }
.dropzone__pg i:first-child { width: 60%; height: 5px; background: var(--primary-soft-border); }
.dropzone__pg:nth-child(1) { left: 0; transform: rotate(-9deg); }
.dropzone__pg:nth-child(2) { left: 34px; top: 0; z-index: 1; }
.dropzone__pg:nth-child(3) { left: 68px; transform: rotate(9deg); }
/* A tool that takes one file shows one page, in the middle */
.dropzone__pg--one { left: 34px; top: 0; }
.dropzone .btn--lg { min-width: 212px; max-width: 100%; }
.dropzone__or { color: var(--text-muted); margin-top: 10px; }
.dropzone__note { color: var(--text-faint); font-size: var(--fs-label); margin-top: 12px; }

/* ── 2. Files added ─────────────────────────────────────────────────────────────────────────── */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 14px; align-items: start; max-width: 1600px; margin-inline: auto; padding-top: 18px; }
.files { padding: 15px; }
.files__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.files__bar h2 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.files__bar .count { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--primary-text); }
.files__bar .grow { flex: 1; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr)); gap: 12px; max-height: 600px; overflow: auto}
.fcard { position: relative; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 10px 9px; cursor: grab; transition: border-color .15s, box-shadow .15s, transform .15s; }
.fcard:hover { border-color: var(--primary-soft-border); box-shadow: 0 4px 14px -8px rgba(3,61,99,.35); }
.fcard.dragging { opacity: .45; }
.fcard.drop-target { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fcard__thumb { aspect-ratio: 3 / 4; background: #fff; border: 1px solid var(--border); border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
.fcard__thumb canvas { width: 100%; height: 100%; object-fit: contain; }
.fcard__thumb img { width: 100%; height: 100%; object-fit: contain; }
.fcard__thumb .ph { width: 70%; display: grid; gap: 5px; }
.fcard__thumb .ph i { height: 5px; border-radius: 3px; background: var(--grid); display: block; }
.fcard__thumb .ph i:nth-child(1) { width: 60%; height: 8px; background: var(--primary-soft-border); }
.fcard__thumb .ph i:nth-child(3) { width: 80%; } .fcard__thumb .ph i:nth-child(5) { width: 45%; }
.fcard__ext { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--primary-text); background: var(--primary-soft); border-radius: 6px; padding: 6px 10px; }
.fcard__name { font-size: var(--fs-label); font-weight: var(--fw-semibold); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard__meta { font-size: var(--fs-small); color: var(--text-muted); margin-top: 1px; }
.fcard__order { position: absolute; top: 5px; left: 5px; min-width: 23px; height: 23px; border-radius: 12px; padding: 0 6px; background: var(--grad); color: var(--on-primary); font-size: var(--fs-small); font-weight: var(--fw-bold); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.fcard__remove { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--danger); background: var(--danger); color:var(--border); cursor: pointer; font-size: 14px; line-height: 1; opacity: 0; transition: opacity .15s; }
.fcard:hover .fcard__remove, .fcard__remove:focus-visible { opacity: 1; }
.fcard__remove:hover { color: var(--danger-text); background: var(--surface); border-color: var(--danger); }
.fcard--add { display: grid; place-items: center; text-align: center; border-style: dashed; border-color: var(--border-strong); background: transparent; color: var(--primary-text); cursor: pointer; min-height: 232px; }
.fcard--add:hover { background: var(--primary-soft); border-color: var(--primary); }
.fcard--add svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; margin: 0 auto 6px; display: block; }
.fcard--add span { font-weight: var(--fw-semibold); }
.reorder-hint { font-size: var(--fs-small); color: var(--text-faint); margin-top: 11px; display: flex; gap: 6px; align-items: center; }

/* The settings beside the files: a head, the fields from _field.html, what is loaded, and the run */
.side { position: sticky; top: 76px; padding: 0; overflow: hidden; }
/* Seven fields plus the summary and the button is taller than a short laptop window, and a sticky
   panel that overflows the window can never be scrolled to the bottom. Only while it is sticky. */
@media (min-width: 961px) {
  .side { max-height: calc(100vh - 92px); overflow: hidden auto; overscroll-behavior: contain; }
}
.side__head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.side__head h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.side__body { padding: 15px; display: grid; gap: 14px; }
.side .group { padding: 0; border: none; }
.field-label { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); }
/* Three cells rather than three label-and-value lines: the figures are what is read here */
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.summary div { background: var(--surface-alt); padding: 9px 6px; text-align: center; min-width: 0; }
.summary b { display: block; font-size: var(--fs-body-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.summary span { font-size: var(--fs-caption); color: var(--text-muted); }
.side .btn--lg { width: 100%; }
/* The one button the page is here for, in the gold the home page uses for its own.
   Scoped on body because desk.css loads after this file, so a plain .btn--go would lose its
   background, border and colour to .btn at equal specificity - which is why home.css and
   deskapp.css scope their own copies of this rule too. */
body .btn--go { background: linear-gradient(180deg, #f5bb45, #e59a2a); border: none; color: var(--badge-text); font-weight: var(--fw-semibold); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -14px rgba(201,113,31,.9); }
body .btn--go:hover { background: linear-gradient(180deg, #f8c75f, #d98f20); border-color: transparent; color: var(--badge-text); }
body .btn--go:active { background: linear-gradient(180deg, #e9ad35, #cf8a1e); }
body .btn--go[disabled] { background: var(--surface-alt); color: var(--text-faint); border: 1px solid var(--border); box-shadow: none; }
.side .fine { font-size: var(--fs-small); color: var(--text-faint); text-align: center; }
.seg { display: flex; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 17px; padding: 3px; gap: 3px; }
.seg button { flex: 1; height: 28px; border: none; border-radius: 14px; background: transparent; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--text-muted); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--primary-text); font-weight: var(--fw-semibold); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.tool-error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger-text); border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-label); }

/* ── 3. Result ─────────────────────────────────────────────────────────────────────────────── */
.done { max-width: 620px; margin: 22px auto 0; padding: 30px 26px; text-align: center; }
.done__check { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 12px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; }
.done__check svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.done__check--warn { background: var(--warning-soft); color: var(--warning); }
.done h2 { font-size: 22px; font-weight: var(--fw-bold); }
.done .file { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 18px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); font-weight: var(--fw-semibold); max-width: 100%; }
.done .file svg { width: 18px; height: 18px; fill: none; stroke: var(--danger); stroke-width: 2; flex-shrink: 0; }
.done .file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done .file small { color: var(--text-muted); font-weight: var(--fw-body); white-space: nowrap; }
.done__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.done__note { margin-top: 10px; font-size: var(--fs-label); }
.next { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.next__title { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .06em; color: var(--text-faint); margin-bottom: 10px; }
.next__chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.signup-nudge { margin-top: 18px; font-size: var(--fs-label); color: var(--text-muted); }

/* Working state (server tools) */
.busy-card { max-width: 560px; margin: 22px auto 0; padding: 34px 26px; text-align: center; }
.busy-card h2 { font-size: 20px; font-weight: var(--fw-bold); margin: 12px 0 4px; }
.busy-card__spinner { width: 42px; height: 42px; margin: 0 auto; border: 3px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: spin .9s linear infinite; }
.progress { height: 8px; border-radius: 4px; background: var(--surface-alt); overflow: hidden; margin-top: 18px; }
.progress__bar { height: 100%; width: 2%; background: var(--grad); border-radius: 4px; transition: width .3s; }
.progress__bar--pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.busy { position: relative; pointer-events: none; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Result list */
.out-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 14px 0 18px; text-align: left; }
.out { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); }
.out svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--danger); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.out__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }
.out__meta { color: var(--text-muted); white-space: nowrap; }
.out--failed { opacity: .7; }
.out--failed svg { stroke: var(--text-faint); }

/* ── The guide sections below the tool ─────────────────────────────────────────────────────── */
.page-inner .section { padding-block: clamp(32px, 4.2vw, 52px); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.kicker { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-text); }
/* public.css loads after this file and its `.section h2` is as specific, so the page's own
   heading needs the extra class to win the tie rather than depend on the order. */
.page-inner .section__head h2 { margin: 9px 0 0; font-size: clamp(23px, 2.7vw, 32px); font-weight: var(--fw-bold); letter-spacing: -.03em; }

.hsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.hstep { padding: 18px; display: flex; flex-direction: column; align-items: flex-start; }
.hstep__n { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: var(--on-primary); font-size: 16px; font-weight: var(--fw-bold); display: grid; place-items: center; }
.hstep h3 { margin-top: 12px; font-size: var(--fs-section); font-weight: var(--fw-bold); }
.hstep p { margin-top: 6px; color: var(--text-muted); line-height: 1.55; }

/* The other tools as one list of rows. stars.js wraps each link in a .fav-row, which is a flex
   box, so the row has to work as that wrapper's only flexible child. */
.toollist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2px 20px; }
.toollist .fav-row { border-radius: var(--r-md); }
.toolrow { display: flex; align-items: center; gap: 13px; padding: 9px 13px; border-radius: var(--r-md); border: 1px solid transparent; color: var(--text); text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s; }
.toolrow:hover { background: var(--surface); border-color: var(--border); box-shadow: 0 1px 2px rgba(10,29,41,.05), 0 10px 26px -20px rgba(3,61,99,.4); }
.toolrow__icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; }
.toolrow__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.toolrow__name { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolrow__tag { margin-left: auto; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--success-text); background: var(--success-soft); border-radius: 7px; padding: 2px 6px; }

/* The appended SEO block is styled for every page at once, in pages.css */

/* ── Narrower windows ──────────────────────────────────────────────────────────────────────── */
.mobile-bar { display: none; }
@media (max-width: 1000px) {
  .th { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .th__copy { margin-bottom: 0; }
  .dropcard { margin-top: 20px; }
}
@media (max-width: 960px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
}
@media (max-width: 760px) {
  .side .btn--lg { display: none; }
  /* It breaks out to the window edges, so the pull has to match the page gutter at this width (16px) */
  .mobile-bar { display: flex; position: sticky; bottom: 0; z-index: 9; gap: 10px; align-items: center; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); margin: 14px -16px 0; }
  .mobile-bar .btn { flex: 0 1 auto; }
  /* "Convert to PowerPoint" is the longest action; the count beside it gives way first */
  .mobile-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-label); color: var(--text-muted); white-space: nowrap; }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .fcard__remove { opacity: 1; }
  .dropcard__steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .dropzone .btn--lg { min-width: 0; padding-inline: 14px; }
  .files__bar .btn--sm { padding-inline: 9px; }
}
@media (max-width: 560px) {
  .th__copy h1 { font-size: 29px; }
  .spec > div { flex-direction: column; gap: 2px; }
  .spec dt { min-width: 0; }
  .dropzone { margin: 12px; padding: 24px 14px; }
  .dropzone .btn--lg { min-width: 0; width: 100%; }
  .out { flex-wrap: wrap; }
  .out__meta { width: 100%; padding-left: 28px; white-space: normal; }
}
[hidden] { display: none !important; }

/* Settings fields rendered from croppers/public_tools.py (croppers/new_ui/_field.html) */
.field-wrap[hidden] { display: none !important; }
.field { display: grid; gap: 6px; }
.field .field-label { display: flex; justify-content: space-between; align-items: center; }
.field .field-label output { font-weight: var(--fw-semibold); color: var(--text); letter-spacing: 0; text-transform: none; font-size: var(--fs-label); }
.field-help { font-size: var(--fs-small); color: var(--text-faint); line-height: 1.4; }
.field input[type="file"] { font-size: var(--fs-label); padding: 6px 8px; height: auto; }
.field input[type="range"] { width: 100%; accent-color: var(--primary); }
.side .field-wrap + .field-wrap { margin-top: 2px; }

/* Google ad units (landing/includes/ad_unit.html) */
.page-wrap > .ad-unit { margin-top: 26px; }