/* ==================================================================
   UsefulTab — single shared stylesheet
   Sections: tokens / base / layout / chrome / components / tool shell
             / preview + paper / print
   ================================================================== */

/* Brand palette — Indigo / Slate "Tab" identity. Indigo accent on a cool
   off-white slate canvas; the mark is a browser-tab shape in indigo. */
:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-subtle: #f1f2f8;
  --text: #1e2430;
  --text-muted: #55607a;
  --text-faint: #8a92a5;
  --border: #e6e9f0;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef0fe;
  /* Indigo already clears WCAG AA on white (5.9:1) for text and white-on-fill,
     so the ink tokens are the same accent — no separate darker text shade. */
  --accent-ink: #4f46e5;
  --accent-ink-hover: #4338ca;
  --success: #16794f;
  --warning: #a55b09;
  --danger: #b91c1c;

  /* The mark's own colors, for the logo and anything that must match it. */
  --brand-indigo: #4f46e5;
  --brand-indigo-soft: #eaeaff;
  --brand-slate: #1e2430;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-page: 0 14px 38px rgba(30, 40, 60, 0.15);
  --shadow-card: 0 8px 22px rgba(79, 70, 229, 0.08);

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 1152px;
  --wrap-narrow: 768px;
}

/* ---------------------------------------------------------------- base */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* -------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

/* The home page's one content section. Its top padding is the only gap
   between the hero copy and the tool grid, so the grid reads as the hero's
   payoff rather than a separate slab. */
.section {
  padding: 32px 0 64px;
}

/* -------------------------------------------------------------- chrome */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: rgba(247, 248, 251, 0.82);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* The fox mark. It carries its own color, so no background plate. */
.brand__mark {
  width: 34px;
  height: 34px;
  display: block;
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .site-footer__inner {
    flex-direction: row;
  }
}

/* ---------------------------------------------------------- components */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--brand-indigo-soft);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--success);
}

.dot--accent {
  background: var(--accent);
}

.dot-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--success);
}

.tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-subtle);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.btn {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.btn--primary {
  background: var(--accent-ink);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-ink-hover);
}

.btn--ghost {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--accent);
}

.btn--subtle {
  background: var(--surface-subtle);
  color: var(--text);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Hero — centered, indigo gradient wash, search + trust row (Option A) */

.hero {
  padding: 64px 0 44px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, var(--bg) 60%);
}

.hero h1 {
  max-width: 20ch;
  margin: 20px auto 0;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--brand-slate);
}

.hero p {
  max-width: 42rem;
  margin: 16px auto 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

.hero__search {
  display: flex;
  max-width: 540px;
  margin: 28px auto 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 4px 4px 4px 16px;
  align-items: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hero__search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.hero__search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 15px;
  color: var(--text);
}

.hero__search button {
  border: none;
  background: var(--accent);
  color: #fff;
  padding: 10px 22px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s;
}

.hero__search button:hover {
  background: var(--accent-hover);
}

.hero__trust {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-faint);
}

.hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero__trust svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

/* Category sections (home page) */

.cat-section {
  margin-top: 44px;
}

.cat-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.cat-section__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.cat-section__icon svg {
  width: 20px;
  height: 20px;
}

.cat-section__head h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-slate);
}

.cat-section__count {
  font-size: 13px;
  color: var(--text-faint);
}

.cat-section__all {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.cat-section__all:hover {
  text-decoration: underline;
}

/* Category landing page: chip row + count line */

.cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.cat-nav__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cat-nav__chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cat-nav__chip--active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.cat-nav__icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: inherit;
}

.cat-nav__icon svg {
  width: 16px;
  height: 16px;
}

.cat-page__count {
  margin-bottom: 22px;
  font-size: 14px;
  color: var(--text-faint);
}

/* Categories index — card per category */

.cat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.cat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.cat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.12);
  transform: translateY(-2px);
}

.cat-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.cat-card__icon svg {
  width: 22px;
  height: 22px;
}

.cat-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cat-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.cat-card__blurb {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.45;
}

.cat-card__count {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
}

/* Page heading block */

.page-head {
  margin-bottom: 32px;
}

.page-head h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-head p {
  max-width: 42rem;
  margin-top: 8px;
  color: var(--text-muted);
}

/* Prose pages (about / privacy / explainers) */

.prose {
  padding: 48px 0;
}

.prose h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.prose h2 {
  margin-top: 32px;
  font-size: 20px;
  font-weight: 700;
}

.prose p,
.prose li {
  line-height: 1.7;
  color: var(--text-muted);
}

.prose p {
  margin-top: 16px;
}

.prose ul {
  margin: 16px 0 0;
  padding-left: 24px;
}

.prose li {
  margin-top: 8px;
}

.prose strong {
  color: var(--text);
}

/* Tool grid */

.tool-search {
  width: 100%;
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  outline: none;
}

.tool-search:focus {
  border-color: var(--accent);
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tool-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tool-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}

.tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.14);
}

/* `display: flex` above is an author rule and beats the UA's
   `[hidden] { display: none }`, so the search filter's `card.hidden = true`
   needs this to actually hide a non-matching card. */
.tool-card[hidden] {
  display: none;
}

.tool-card.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.tool-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tool-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}

.tool-card__icon svg {
  width: 20px;
  height: 20px;
}

.tool-card__name {
  font-size: 18px;
  font-weight: 700;
}

.tool-card__desc {
  flex: 1;
  margin: 4px 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.tool-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tool-card__cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
}

.tool-empty {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
  color: var(--text-muted);
}

/* ---------------------------------------------------------- tool shell */

.tool-shell {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 24px 16px;
}

.tool-shell__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .tool-shell__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.tool-shell__head h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tool-shell__head p {
  margin-top: 4px;
  color: var(--text-muted);
}

.tool-shell__body {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 20px;
}

/* A grid item's automatic minimum size is its CONTENT size, and the rendered
   sheet of paper inside the preview is sized in px by each tool's JS. Without
   this the paper pushes the single mobile column past the viewport and the whole
   page scrolls sideways. Pin both tracks' minimum to zero and let .stage --
   which is already overflow:auto -- be the one thing that scrolls. */
.tool-shell__body > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .tool-shell__body {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  }
}

.tool-shell__explainer {
  max-width: 42rem;
  margin-top: 48px;
}

.tool-shell__explainer h2 {
  font-size: 18px;
  font-weight: 700;
}

.tool-shell__explainer p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* FAQ. The questions are also emitted as FAQPage JSON-LD by build.py, so this
   block must stay visible: structured data may only describe content a visitor
   can actually read. <details> keeps the answers collapsed without JS. */
.tool-shell__faq {
  max-width: 42rem;
  margin-top: 48px;
}

.tool-shell__faq h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__item summary {
  padding: 14px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

/* Chevron drawn from a border so it needs no icon asset. */
.faq__item summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.faq__item[open] summary::before {
  transform: rotate(45deg);
}

.faq__item summary:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.faq__item p {
  margin: 0 0 16px;
  padding-left: 17px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

.related {
  margin-top: 48px;
}

.related__title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
}

/* Control panel */

.panel {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

@media (min-width: 1024px) {
  .panel {
    position: sticky;
    top: 80px;
  }
}

.panel__section + .panel__section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.panel__title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.panel__note {
  font-size: 12px;
  color: var(--text-muted);
}

.link-btn {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
}

/* Form controls */

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field {
  display: block;
}

.field > span,
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Small spacing utilities, used sparingly inside panels. */
.mt-sm {
  margin-top: 10px;
}

.mt-md {
  margin-top: 16px;
}

.input,
select.input {
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  outline: none;
}

.input:focus {
  border-color: var(--accent);
}

textarea.input {
  height: auto;
  min-height: 220px;
  padding: 14px;
  line-height: 1.6;
  resize: vertical;
}

.drop {
  position: relative;
  display: block;
  padding: 18px;
  border: 2px dashed var(--border);
  border-radius: 16px;
  background: var(--surface-subtle);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.drop:hover,
.drop.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.drop strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.drop small {
  font-size: 12px;
  color: var(--text-muted);
}

.drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Segmented button group */

.seg {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.seg button {
  flex: 1;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.seg button[aria-pressed="true"] {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Bordered segmented group (ImageFit style) */

.seg--bordered {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
}

.seg--bordered button {
  border-radius: 0;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 500;
}

.seg--bordered button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: none;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-muted);
}

.check input {
  accent-color: var(--accent);
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

/* Status readout */

.status {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

.status strong {
  font-size: 14px;
}

.status p {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-subtle);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.pill[data-kind="ok"] {
  background: #e6f5ed;
  color: var(--success);
}

.pill[data-kind="warn"] {
  background: #fff0de;
  color: var(--warning);
}

.status-note {
  margin-top: 14px;
  padding: 12px;
  border-radius: 11px;
  background: var(--surface-subtle);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Change summary chips */

.changes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.changes div {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.changes span {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
}

.changes b {
  font-size: 12px;
}

/* Image queue */

.queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 210px;
  margin: 12px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.queue li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
}

.queue img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--surface-subtle);
  object-fit: cover;
}

.queue b {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.queue small {
  font-size: 11px;
  color: var(--text-muted);
}

.queue__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.icon-btn {
  padding: 2px 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
}

.icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.icon-btn--remove {
  font-size: 18px;
  line-height: 1;
}

.icon-btn--remove:hover {
  color: var(--danger);
}

/* Conversion queue rows (no thumbnail): info + actions only. */
.conv {
  grid-template-columns: 1fr auto !important;
}

.conv__info {
  min-width: 0;
}

.conv--error small {
  color: var(--danger);
}

.conv--done small {
  color: var(--success);
}

.conv__badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.conv--working .conv__badge {
  color: var(--accent);
}

.conv--done .conv__badge {
  color: var(--success);
}

.conv--error .conv__badge {
  color: var(--danger);
}

.btn--sm {
  padding: 5px 10px;
  font-size: 12px;
}

/* Converted-photo cards shown in the preview stage. */
.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  align-items: start;
}

.result-card {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.result-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #eef0f6;
  overflow: hidden;
}

.result-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.result-card__state {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.result-card--working .result-card__state {
  color: var(--accent);
}

.result-card--error .result-card__state {
  color: var(--danger);
}

.result-card__cap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.result-card__cap b {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card__cap small {
  font-size: 12px;
  color: var(--text-muted);
}

.result-card--error .result-card__cap small {
  color: var(--danger);
}

.result-card__cap .btn--sm {
  margin-top: 4px;
  align-self: flex-start;
}

/* ------------------------------------------------ preview and paper */

.preview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}

.preview__bar strong {
  font-size: 14px;
}

.preview__bar span {
  font-size: 12px;
  color: var(--text-muted);
}

.stage {
  min-height: 600px;
  min-width: 0;
  padding: 28px;
  overflow: auto;
}

/* On a phone the four header links (~230px) plus the brand exceed a 390px
   viewport, so the fixed-gap flex row spilled ~37px and scrolled the page
   sideways. Let the inner row wrap the nav under the brand and let the nav
   itself wrap and tighten, so the header can never exceed the viewport width.
   No hamburger: four short links wrap cleanly and stay one tap away. */
@media (max-width: 639px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 0;
  }

  .site-nav {
    flex-wrap: wrap;
    gap: 8px 16px;
    min-width: 0;
    font-size: 13px;
  }
}

/* On a phone the stage is the feedback loop the tool depends on, so give the
   sheet more of the width and stop reserving 600px of empty matte above it. */
@media (max-width: 639px) {
  .stage {
    min-height: 380px;
    padding: 12px;
  }
}

.stage--matte {
  background: #eef0f6;
}

.pages {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
}

.page-shell {
  position: relative;
}

.page-label {
  margin-bottom: 6px;
  font-size: 11px;
  text-align: center;
  color: var(--text-muted);
}

/* A rendered sheet of paper. Width/height are set inline by each tool. */
.paper {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-page);
  transform-origin: top center;
}

.paper__body {
  height: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  color: #111;
  tab-size: 4;
}

.paper__number {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 10px;
  line-height: 1;
  color: #aaa;
}

.empty-state {
  max-width: 620px;
  margin: 0 auto;
  padding: 64px 0;
  text-align: center;
  color: var(--text-muted);
}

.empty-state h3 {
  margin-bottom: 8px;
  font-size: 24px;
  color: var(--text);
}

.empty-state p {
  line-height: 1.7;
}

.empty-state .badge {
  margin-top: 12px;
}

/* Off-screen measurement root used by the PrintFit engine. */
.measure-root {
  position: fixed;
  left: -100000px;
  top: 0;
  z-index: -100;
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------- print */

@media print {
  .no-print,
  .preview__bar,
  .page-label,
  .paper__number {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .tool-shell,
  .stage {
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .preview {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .stage--matte {
    background: #fff;
  }

  .pages {
    display: block;
    gap: 0;
  }

  /* Each sheet becomes one physical page; tools set the exact inch size. */
  .page-shell {
    break-after: page;
    page-break-after: always;
    margin: 0 !important;
  }

  .page-shell:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .paper {
    transform: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}