/*
 * Converter page styles. Brand tokens come from brand.css — use var(--color-*),
 * never a raw hex, so a token change propagates.
 *
 * Two constraints shape everything here:
 *
 * 1. `style-src 'self'` forbids inline <style> blocks and style="..." attributes,
 *    so every former inline style is a utility class at the bottom of this file.
 *    Do not reintroduce inline styles — the CSP is what makes the privacy claim
 *    enforceable, and 'unsafe-inline' would weaken both.
 *
 * 2. WCAG AA on a dark surface. The brand's verified-contrast table is all
 *    dark-background pairs, which is why this page is dark. Colour is never the
 *    only signal: every callout carries a worded heading as well as its accent
 *    border, and the accents are used as borders (3:1 threshold) rather than as
 *    body text (4.5:1) wherever the ratio would be marginal.
 *
 * Measured against the surface each is used on:
 *   white on navy-dark 16.0:1 · white on navy 10.9:1 · white on navy-light 9.1:1
 *   gray-300 on navy 5.9:1 · cyan on navy 7.0:1 · cyan on navy-light 5.1:1
 *   lime on navy-dark 13.9:1 · navy-dark on coral 6.3:1 · navy-dark on lime 15.4:1
 */

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-on-dark);
  background: var(--color-bg-dark);
}

.wrap { max-width: 56rem; margin: 0 auto; }

header {
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--color-border-dark);
  padding: 2.5rem 1.25rem;
}

h1 {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.sub { margin: 0; color: var(--color-text-secondary); font-size: var(--text-base); }

/* Lime on navy-dark, 13.9:1 — the strongest thing on the page, which is correct:
   it is the claim the whole product rests on. */
.badge {
  display: inline-block;
  margin-top: .9rem;
  padding: .25rem .75rem;
  border-radius: 9999px;
  background: rgba(var(--color-lime-rgb), .12);
  border: 1px solid var(--color-lime);
  color: var(--color-lime);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

main { padding: 1.75rem 1.25rem 4rem; }

.card {
  background: var(--color-bg-card-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: 1rem;
  box-shadow: var(--shadow-dark-md);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: .35rem;
}

select, input[type=file] {
  width: 100%;
  padding: .75rem 1rem;
  min-height: 44px;
  border: 1px solid var(--color-border-dark);
  border-radius: .5rem;
  background: var(--color-navy-dark);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
select:focus, input[type=file]:focus {
  border-color: var(--color-cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-cyan-rgb), .2);
}
input[type=file]::file-selector-button {
  margin-right: .75rem;
  padding: .4rem .8rem;
  border: 1px solid var(--color-border-dark);
  border-radius: .375rem;
  background: var(--color-navy-light);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-weight: var(--font-semibold);
  cursor: pointer;
}

.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > div { flex: 1 1 12rem; }

/* Coral is the brand's primary CTA colour, with --color-text-on-primary (navy dark,
   6.3:1) as the label. The guidelines paired coral with white until 2026-08-09, which
   was 2.8:1 and failed AA; corrected at source in martkos-it-branding. */
button {
  margin-top: 1rem;
  padding: .75rem 1.5rem;
  min-height: 44px;
  border: 0;
  border-radius: .5rem;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background-color .2s ease;
}
button:hover { background: var(--color-primary-hover); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.dl { background: var(--color-success); color: var(--color-navy-dark); }

a { color: var(--color-link); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

pre {
  background: var(--color-navy-dark);
  border: 1px solid var(--color-border-dark);
  color: var(--color-gray-100);
  padding: 1rem;
  border-radius: .5rem;
  overflow: auto;
  max-height: 22rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
code { font-family: var(--font-mono); font-size: var(--text-sm); }

/*
 * Callouts. Text stays white on navy-light (9.1:1) and the accent lives in the
 * border, which only needs 3:1 as a UI component. Each also states its meaning in
 * words, so the colour is reinforcement rather than the signal.
 */
.warn, .err, .cap, .quote {
  background: var(--color-navy-light);
  color: var(--color-text-on-dark);
  padding: .8rem 1rem;
  border-radius: 0 .5rem .5rem 0;
  font-size: var(--text-sm);
}
.warn  { border-left: 3px solid var(--color-warning); margin: .4rem 0; }
.err   { border-left: 3px solid var(--color-error); }
.cap   { border-left: 3px solid var(--color-cyan); margin: 1rem 0; }
.quote { border-left: 3px solid var(--color-lime); margin: 1rem 0; }

.ok { color: var(--color-lime); font-weight: var(--font-semibold); }
.muted { color: var(--color-text-secondary); font-size: var(--text-sm); }
.net { font-family: var(--font-mono); font-size: var(--text-sm); }

/*
 * Drag-and-drop affordance. The whole document is the drop target, so the feedback
 * has to be page-level rather than a small outlined box — otherwise the visitor aims
 * for a box that was never required.
 */
.drop-hint { margin: .5rem 0 0; }

body.dragging { outline: 3px dashed var(--color-cyan); outline-offset: -8px; }
body.dragging .drop-hint { color: var(--color-cyan); font-weight: var(--font-semibold); }

/*
 * Do NOT add `pointer-events: none` to the contents of main while dragging.
 *
 * It was here to stop children "swallowing" dragover/drop, which they never could —
 * both events bubble to the window listeners. What it did instead was make the file
 * input unclickable for as long as the class was set, so any missed dragleave left
 * the page in a state where dropping a file worked and clicking Choose file silently
 * did nothing. That is indistinguishable from a broken browser, and it cost an hour
 * of chasing Chrome before the CSS turned out to be the culprit.
 */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Utility classes replacing former inline style="..." attributes. */
.sub-note { margin-top: .7rem; font-size: var(--text-sm); }
.field { margin-top: 1rem; }
.status { margin-left: .75rem; }
.tight { margin: .4rem 0 0; }
.tight-lg { margin: .6rem 0 0; }
.gap-y { margin: .4rem 0; }
.mt { margin-top: 1rem; }
.mt-sm { margin-top: .8rem; }