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

/* Brand palette sampled from the UtilityFox mark: fox orange, cream, charcoal. */
:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-subtle: #f6f1e9;
  --text: #24282c;
  --text-muted: #6f6a63;
  --border: #e6ddd0;
  --accent: #f4601a;
  --accent-hover: #d84e0d;
  --accent-soft: #fdeee6;
  /* Darker orange for text and for fills that carry white text: the bright
     mark orange only reaches 3.2:1 on white, which fails WCAG AA. */
  --accent-ink: #c2410c;
  --accent-ink-hover: #9a3412;
  --success: #16794f;
  --warning: #a55b09;
  --danger: #b91c1c;

  /* The mark's own colors, for the logo and anything that must match it. */
  --fox-orange: #f4601a;
  --fox-cream: #fcf2e3;
  --fox-charcoal: #33383d;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-page: 0 14px 38px rgba(30, 40, 60, 0.15);
  --shadow-card: 0 10px 30px rgba(20, 30, 50, 0.09);

  --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(250, 247, 242, 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 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

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

.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 */

.hero {
  padding: 56px 0 0;
}

.hero h1 {
  max-width: 48rem;
  margin-top: 20px;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

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

/* 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(3, 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);
}

/* `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-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.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);
}

.keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.keyword-list li {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  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 #d9cbb8;
  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);
}

/* ------------------------------------------------ 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 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: #ece5da;
}

.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;
  }
}