/* =====================================================================
   Mono Mate shared kit: mm.css
   One sheet of paper. A hand-inked masthead, every tool drawn as a
   pencilled box, and ads boxed off and hatched so they can never pass
   for the tool. Every page links this file; page-specific styles stay
   in a small <style> block on that page.
   ===================================================================== */

/* ---------- Fonts: self-hosted, so pages don't wait on another server ----------
   Cabin Sketch (hand-drawn headings) 400 and 700; Atkinson Hyperlegible (body) 400, 700 and 400 italic.
   Full Latin and Latin Extended character sets. The browser only downloads a file when the page uses
   that weight and those characters. Both families are free under the SIL Open Font License (see fonts/). */
@font-face { font-family: 'Cabin Sketch'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/cabin-sketch-latin-400-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; }
@font-face { font-family: 'Cabin Sketch'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/cabin-sketch-latin-700-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; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-ext-400-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: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-400-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; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-ext-700-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: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-700-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; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-ext-400-italic.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: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-400-italic.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; }

/* ---------- Stand-ins while the fonts download (slow connections) ----------
   Headings never fall back to a novelty face. Until Cabin Sketch arrives they're set in the site's
   own Atkinson Hyperlegible (same files as above, so nothing extra downloads), and before that in
   the device's plain sans. Each stand-in is scaled to sit on Cabin Sketch's baseline and run a touch
   narrower, so nothing jumps or rewraps when the hand-drawn font swaps in. Body text gets the same treatment. */
@font-face { font-family: 'Hand Stand-in'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');
  size-adjust: 89%; ascent-override: 98.1%; descent-override: 33.5%; line-gap-override: 0%;
  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; }
@font-face { font-family: 'Hand Stand-in'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');
  size-adjust: 98.8%; ascent-override: 88.4%; descent-override: 30.2%; line-gap-override: 0%;
  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; }
@font-face { font-family: 'Hand Stand-in System'; font-style: normal; font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
  size-adjust: 87%; ascent-override: 100.3%; descent-override: 34.3%; line-gap-override: 0%; }
@font-face { font-family: 'Hand Stand-in System'; font-style: normal; font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('HelveticaNeue'), local('Roboto'), local('Roboto-Regular'), local('Liberation Sans'), local('LiberationSans');
  size-adjust: 96.5%; ascent-override: 90.5%; descent-override: 30.9%; line-gap-override: 0%; }
@font-face { font-family: 'Body Stand-in System'; font-style: normal; font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('HelveticaNeue'), local('Roboto'), local('Roboto-Regular'), local('Liberation Sans'), local('LiberationSans');
  size-adjust: 97.7%; ascent-override: 97.2%; descent-override: 29.7%; line-gap-override: 0%; }
@font-face { font-family: 'Body Stand-in System'; font-style: normal; font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
  size-adjust: 97.7%; ascent-override: 97.2%; descent-override: 29.7%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --paper: #FBFBF8;
  --paper-2: #F1F1EC;
  --ink: #141414;
  --ink-2: #4B4B48;
  --ink-faint: rgba(20, 20, 20, .14);
  --on-ink: #FBFBF8;
  --code-light: #FFFFFF;      /* QR preview stays light in both themes */
  --code-ink: #555555;
  --mark-filter: none;
  --mono-shadow: rgba(20, 20, 20, .2);
  /* Paper: fine grain, faint cloudiness, soft edge shading. Subtle in light mode, medium in dark.
     Drawn by the browser, nothing to download. */
  --paper-texture: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='256'%20height='256'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.08%200%200%200%200%200.08%200%200%200%200%200.08%200.66%200%200%200%20-0.36'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23g%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='720'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.006'%20numOctaves='3'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.08%200%200%200%200%200.08%200%200%200%200%200.08%200.18%200%200%200%20-0.075'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23m%29'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(60,55,40,0.05) 100%);

  --font-hand: "Cabin Sketch", "Hand Stand-in", "Hand Stand-in System", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Body Stand-in System", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --step-hero: clamp(36px, 7vw, 74px);
  /* Small phones: the headline shrinks so its underlined part (which never wraps) still fits */
  --step-hero-small: min(36px, max(26px, calc((100vw - 32px) / 10.2)));
  --step-h2: clamp(32px, 4.4vw, 46px);
  --step-panel: 30px;
  --step-card: 26px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161615; --paper-2: #20201E; --ink: #EDEDE8; --ink-2: #B4B4AE;
    --ink-faint: rgba(237, 237, 232, .16); --on-ink: #161615; --mark-filter: invert(1);
    --mono-shadow: rgba(0, 0, 0, .55);
    --paper-texture: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='256'%20height='256'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.88'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.93%200%200%200%200%200.93%200%200%200%200%200.93%200.552%200%200%200%20-0.293'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23g%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='720'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.006'%20numOctaves='3'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.93%200%200%200%200%200.93%200%200%200%200%200.93%200.182%200%200%200%20-0.073'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23m%29'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(0,0,0,0.35) 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #161615; --paper-2: #20201E; --ink: #EDEDE8; --ink-2: #B4B4AE;
  --ink-faint: rgba(237, 237, 232, .16); --on-ink: #161615; --mark-filter: invert(1);
    --mono-shadow: rgba(0, 0, 0, .55);
    --paper-texture: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='256'%20height='256'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.88'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.93%200%200%200%200%200.93%200%200%200%200%200.93%200.552%200%200%200%20-0.293'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23g%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='720'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.006'%20numOctaves='3'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.93%200%200%200%200%200.93%200%200%200%200%200.93%200.182%200%200%200%20-0.073'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23m%29'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(0,0,0,0.35) 100%);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0; color: var(--ink); background-color: var(--paper);
  font-family: var(--font-body); font-size: 17px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing: antialiased;
}
/* paper texture: one fixed layer under the content */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--paper-texture);
}
.wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
/* Cabin Sketch is drawn with hatching, which reads as grey at small sizes. So it's kept for headings
   and numbers 26px and up; buttons, labels and anything smaller use Atkinson Hyperlegible. */
h1, h2, h3, .card h4, .hand { font-family: var(--font-hand); font-weight: 700; letter-spacing: .01em; }
h1, h2, h3, h4 { text-wrap: balance; }
a { color: var(--ink); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 20; background: var(--ink); color: var(--on-ink);
  padding: 8px 14px; font-weight: 700; text-decoration: none; border-radius: 6px;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

/* Hand-drawn boxes: the border lives on a roughened pseudo-element so text stays crisp */
.sketch { position: relative; }
.sketch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 2px solid var(--ink);
  border-radius: 255px 14px 225px 12px / 12px 225px 14px 255px;
  filter: url(#rough);
}

/* ---------- Masthead ---------- */
header.site { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding-block: 24px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand img { width: 46px; height: 46px; filter: var(--mark-filter); }
.brand span { font-family: var(--font-hand); font-weight: 700; font-size: 32px; line-height: 1; }
.motto { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.site-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-nav a { font-weight: 700; font-size: 17px; text-decoration: none; position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--ink);
  border-radius: 3px; transform: scaleX(.35) rotate(-1deg); transform-origin: left; transition: transform .2s; filter: url(#rough);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1) rotate(-1deg); }

/* ---------- Hero ---------- */
.hero { padding-block: 40px 28px; max-width: 820px; }
.hero h1 { font-size: var(--step-hero); line-height: 1.02; margin: 0 0 18px; }
@media (max-width: 420px) { .hero h1 { font-size: var(--step-hero-small); } }
.hero h1 .under { position: relative; white-space: nowrap; }
.hero h1 .under svg { position: absolute; left: 0; bottom: -.12em; width: 100%; height: .32em; overflow: visible; }
.hero p { margin: 0; font-size: 19px; color: var(--ink-2); max-width: 56ch; }
.hero .eyebrow { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
/* The eyebrow sits inside the h1 so each tool's name is part of its main heading (good for search). */
.hero h1 .eyebrow { font-family: var(--font-body); line-height: 1.4; margin-bottom: 14px; }

/* ---------- Ads ----------
   Hidden until ads are switched on in mm-settings.js (mm.js then adds html.ads-on).
   Labelled "Advertisement" (one of the two labels AdSense allows),
   hatched, dashed, and never placed beside a tool's buttons. */
.ad { display: none; }
.ads-on .ad {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-2); font-size: 14px; padding: 34px 16px 16px;
  background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--ink-faint) 9px 10.5px);
}
.ads-on .ad::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 2px dashed var(--ink-2); border-radius: 10px 220px 12px 240px / 240px 12px 220px 10px;
  filter: url(#rough);
}
.ads-on .ad.ad-off { display: none; }
.ad-tag {
  position: absolute; top: 9px; left: 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  background: var(--paper); color: var(--ink); padding: 0 8px; transform: rotate(-2deg);
}
.ad-fill { display: none; }
.ads-placeholder .ad-fill { display: block; }
.ad ins.adsbygoogle { width: 100%; position: relative; }
.ad-banner { min-height: 120px; margin-block: 4px 40px; }
.ad-box { min-height: 290px; }

/* ---------- Tool layout ---------- */
.tool { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
/* Two columns from tablet width up, so the result sits beside the form. Below that, one column. */
@media (max-width: 719px) { .tool { grid-template-columns: minmax(0, 1fr); } }
/* Narrow two-column range (tablets): pairs of fields stack so each one keeps a usable width */
@media (min-width: 720px) and (max-width: 900px) { .tool .row { grid-template-columns: minmax(0, 1fr); } }
.panel { padding: 28px; }
@media (max-width: 480px) { .panel { padding: 22px 18px; } }
.panel > * { position: relative; }
.panel h2 { font-size: var(--step-panel); line-height: 1.1; margin: 0 0 20px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.panel-head h2 { margin: 0; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tabs */
.tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.tabs button {
  position: relative; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-2);
  background: transparent; border: 0; padding: 8px 14px; cursor: pointer;
}
.tabs button::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 3px; background: var(--ink);
  border-radius: 3px; transform: scaleX(0) rotate(-1deg); transition: transform .2s; filter: url(#rough);
}
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { transform: scaleX(1) rotate(-1deg); }
.tabs button:hover { color: var(--ink); }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; min-width: 0; }
.field label, .field .label { font-weight: 700; font-size: 15px; }
.field .optional { font-weight: 400; color: var(--ink-2); }
.hint { font-size: 14px; color: var(--ink-2); margin: 0; }
.input { position: relative; }
.input::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border: 2px solid var(--ink);
  border-radius: 6px 160px 8px 140px / 140px 8px 160px 6px; filter: url(#rough);
}
.input input, .input textarea, .input select {
  font: inherit; color: var(--ink); background: transparent; width: 100%;
  border: 0; padding: 13px 15px; border-radius: 8px;
}
.input input::placeholder, .input textarea::placeholder { color: var(--ink-2); opacity: .8; }
.input input:focus, .input textarea:focus, .input select:focus { outline: none; background: var(--paper-2); }
.input:focus-within::before { border-width: 3px; }
/* Where you are in a form: the same dashed outline buttons and links get */
.input:focus-within { outline: 3px dashed var(--ink); outline-offset: 4px; }
.input textarea { min-height: 120px; resize: vertical; display: block; }
.input select { appearance: none; padding-right: 36px; cursor: pointer; }
.input select option { color: #141414; background: #FBFBF8; }
.input.select::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
@media (max-width: 480px) { .row { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }

.error { color: var(--ink); font-weight: 700; font-size: 15px; margin: 0 0 12px; padding-left: 26px; position: relative; }
.error::before { content: "✗"; position: absolute; left: 4px; font-family: var(--font-hand); font-size: 18px; line-height: 1.3; }
.error:empty { display: none; }

details.more { margin-top: 6px; padding-top: 18px; border-top: 2px dashed var(--ink-faint); }
details.more + details.more { margin-top: 18px; }
details.more summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font-size: 28px; line-height: 1; }
details.more[open] summary::after { content: "−"; }
details.more .inner { padding-top: 18px; }

.colour { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.colour input[type="color"] { width: 36px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.colour code { font-size: 14px; color: var(--ink-2); }
.logo-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
input[type="range"] { width: 100%; accent-color: var(--ink); }

/* Buttons */
.btn {
  position: relative; font: inherit; font-weight: 700; color: var(--ink); background: transparent;
  border: 0; padding: 10px 16px; cursor: pointer; isolation: isolate; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--ink);
  border-radius: 8px 120px 10px 140px / 140px 10px 120px 8px; filter: url(#rough); transition: transform .12s;
}
.btn:hover::before { transform: rotate(-.8deg) scale(1.02); }
.btn:active::before { transform: scale(.97); }
.btn-small { font-size: 14px; padding: 8px 14px; }
.btn-primary { color: var(--on-ink); font-size: 19px; padding: 15px 20px; width: 100%; letter-spacing: .01em; }
.btn-primary::before { background: var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled::before { transform: none; }
.linklike { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* QR preview: the ad-free zone */
.preview { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); }
@media (max-width: 719px) { .preview { position: relative; top: 0; } }
.code-frame {
  position: relative; aspect-ratio: 1 / 1; max-width: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--code-light);
}
.code-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border: 2px solid var(--ink); border-radius: 4px 6px 5px 3px; filter: url(#rough);
}
.code-frame img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.code-frame.is-example img { opacity: .22; }
.code-frame .example-tag {
  position: absolute; z-index: 2; font-family: var(--font-hand); font-weight: 700; font-size: 26px;
  color: #141414; background: #FFFFFF; padding: 4px 14px; transform: rotate(-4deg);
  border: 2px solid #141414; border-radius: 6px 40px 8px 30px / 30px 8px 40px 6px;
}
.code-empty { color: var(--code-ink); font-size: 17px; font-weight: 700; padding: 24px; text-align: center; }

.receipt { margin-top: 18px; font-size: 15px; overflow-wrap: anywhere; padding-left: 16px; border-left: 3px solid var(--ink); }
.receipt strong { display: block; font-size: 14px; color: var(--ink-2); }
.receipt .target { font-weight: 700; }
.receipt .detail { display: block; color: var(--ink-2); margin-top: 2px; }
.size-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.size-note:empty { display: none; }

.downloads { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.secondary-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* Download PNG with its own size menu beside it (the size only applies to the PNG) */
.png-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.png-row .btn-primary { flex: 3 1 11rem; width: auto; white-space: nowrap; padding-inline: 14px; }
.size-pick { flex: 1 1 7.5rem; display: grid; gap: 4px; }   /* drops under the button when there isn't room */
.size-pick label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.size-pick .input select { padding: 16px 34px 16px 12px; }
.vector-note { text-align: center; }
/* Phones: a shortcut from the form down to the result */
.jump { display: none; margin: 0 0 14px; }
.jump a { font-weight: 700; }
@media (max-width: 719px) { .jump { display: block; } }
.status { font-size: 14px; color: var(--ink-2); min-height: 21px; margin: 0; }
.privacy-line { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- Drop zone (Markdown converter, image tools) ----------
   A dashed, hand-drawn box. Clicking anywhere in it opens the file picker. */
.drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 230px; padding: 28px 18px; text-align: center; cursor: pointer;
  transition: background-color .15s;
}
.drop::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border: 2px dashed var(--ink);
  border-radius: 12px 200px 14px 180px / 180px 14px 200px 12px; filter: url(#rough);
}
.drop:hover::before, .drop.over::before { border-style: solid; border-width: 3px; }
.drop.over { background: var(--paper-2); }
.drop:focus-within { outline: 3px dashed var(--ink); outline-offset: 4px; }
.drop-big { font-family: var(--font-hand); font-weight: 700; font-size: 30px; line-height: 1.1; }
.drop .btn { pointer-events: none; }
.drop .hint { max-width: 32ch; }
.drop.small { min-height: 0; padding: 18px; flex-direction: row; flex-wrap: wrap; gap: 8px 14px; }
.drop.small .drop-big { font-size: 26px; }
.drop.small .hint { display: none; }
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .drop .drop-big.mouse-only, .drop .or { display: none; }
  .touch-only { display: inline; }
}


/* ---------- Image tools: the list of images and what became of them ---------- */
.checker { background-color: #FFFFFF; background-image: linear-gradient(45deg, #E4E4DF 25%, transparent 25%, transparent 75%, #E4E4DF 75%), linear-gradient(45deg, #E4E4DF 25%, transparent 25%, transparent 75%, #E4E4DF 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.img-empty {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px; padding: 24px; color: var(--ink-2); font-size: 17px; font-weight: 700;
}
.img-empty::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border: 2px solid var(--ink-faint);
  border-radius: 6px 160px 8px 140px / 140px 8px 160px 6px; filter: url(#rough);
}
.batch-sum { margin: 0 0 6px; font-weight: 700; font-size: 17px; }
.batch-sum:empty { display: none; }
.img-list { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.img-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; grid-template-areas: "thumb info badge actions";
  gap: 4px 14px; align-items: center; padding-block: 12px; border-top: 2px dashed var(--ink-faint);
}
.img-row:first-child { border-top: 0; }
.img-thumb {
  grid-area: thumb; position: relative; width: 56px; height: 56px; overflow: hidden; border-radius: 6px;
  background-color: var(--paper-2);
}
.img-row[data-state="done"] .img-thumb { background-color: #FFFFFF; background-image: linear-gradient(45deg, #E4E4DF 25%, transparent 25%, transparent 75%, #E4E4DF 75%), linear-gradient(45deg, #E4E4DF 25%, transparent 25%, transparent 75%, #E4E4DF 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb img:not([src]) { display: none; }
.img-row[data-state="error"] .img-thumb::after { content: "✗"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-hand); font-size: 30px; }
.img-row[data-state="working"] .img-thumb::after {
  content: ""; position: absolute; inset: 14px; border: 3px solid var(--ink-faint); border-top-color: var(--ink);
  border-radius: 50%; animation: img-spin .9s linear infinite;
}
@keyframes img-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .img-row[data-state="working"] .img-thumb::after { border-color: var(--ink); border-style: dotted; } }
.img-thumb[role="button"] { cursor: pointer; }
.img-row.current .img-thumb { outline: 3px solid var(--ink); outline-offset: 2px; }
.img-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.img-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-meta { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.img-row[data-state="error"] .img-meta { color: var(--ink); }
.img-badge { grid-area: badge; font-family: var(--font-hand); font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.img-badge.small-text { font-family: var(--font-body); font-size: 14px; }
.img-actions { grid-area: actions; display: flex; align-items: center; gap: 4px; }
.img-x {
  width: 40px; height: 40px; flex: none; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font: 700 24px/1 var(--font-body); border-radius: 50%;
}
.img-x:hover { color: var(--ink); background: var(--paper-2); }
/* A narrow list (phones, or the results box on a tablet): the buttons drop under the name */
@container (max-width: 430px) {
  .img-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "thumb info badge" "thumb actions actions"; }
  .img-thumb { width: 48px; height: 48px; }
  .img-actions { gap: 8px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 460px) {
    .img-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "thumb info badge" "thumb actions actions"; }
    .img-thumb { width: 48px; height: 48px; }
  }
}
.batch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.batch-row .btn-primary { flex: 2 1 12rem; width: auto; white-space: nowrap; }
.batch-row .btn:not(.btn-primary) { flex: 1 1 7rem; }
/* Settings under the drop zone */
.settings { margin-top: 24px; }

/* The before-and-after viewer (image compressor) */
.viewer { margin: 0 0 18px; }
.viewer-frame {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 140px;
  overflow: hidden; border-radius: 6px;
}
/* The box takes the picture's own shape, up to a height that leaves the buttons in view */
.viewer-frame img { max-width: 100%; max-height: min(56vh, 380px); object-fit: contain; display: block; }
.viewer-frame.zoomed { display: block; height: min(56vh, 380px); overflow: auto; cursor: grab; }
.viewer-frame.zoomed.panning { cursor: grabbing; }
.viewer-frame.zoomed img { max-width: none; max-height: none; }
.viewer-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 14px; font-weight: 700;
  color: #141414; background: #FFFFFF; padding: 3px 10px; border: 2px solid #141414;
  border-radius: 6px 40px 8px 30px / 30px 8px 40px 6px; transform: rotate(-2deg);
}
.viewer-box { position: relative; }
.viewer-box::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border: 2px solid var(--ink);
  border-radius: 4px 6px 5px 3px; filter: url(#rough);
}
.viewer figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; }
.viewer-name { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; flex: 1 1 10rem; }
.viewer-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hold { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold.held::before, .zoom[aria-pressed="true"]::before { background: var(--ink); }
.hold.held, .zoom[aria-pressed="true"] { color: var(--on-ink); }

/* A slider with its value beside the label */
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.range-head output { font-weight: 700; font-variant-numeric: tabular-nums; }
.range-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-top: -2px; }

/* ---------- Lower band: promises (+ ad box when ads are on) ---------- */
.lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-block: 72px 56px; align-items: start; }
@media (min-width: 861px) {
  .ads-on .lower:has(> .ad:not(.ad-off)) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.lower h2, .section-title { font-size: var(--step-h2); line-height: 1.05; margin: 0 0 28px; }
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 36px; }
.promise h3 { font-size: 26px; margin: 0 0 4px; }
.promise p { margin: 0; color: var(--ink-2); }
.ads-on .ads-off-only, .ads-on-only { display: none; }
.ads-on .ads-on-only { display: block; }

/* ---------- Guide (plain-English help under each tool) ---------- */
.guide { margin-block: 8px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 760px; }
.guide h2 { font-size: var(--step-h2); line-height: 1.05; margin: 0 0 24px; }
/* Each question is an accordion: click it to reveal the answer. Works without JavaScript. */
.guide .faq { border-top: 2px dashed var(--ink-faint); }
.guide .faq:last-of-type { border-bottom: 2px dashed var(--ink-faint); }
.guide .faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.guide .faq summary::-webkit-details-marker { display: none; }
.guide .faq summary h3 { font-family: var(--font-body); font-size: 19px; line-height: 1.3; letter-spacing: 0; margin: 0; }
.guide .faq summary::after { content: "+"; flex: none; font-family: var(--font-hand); font-weight: 700; font-size: 30px; line-height: 1; }
.guide .faq[open] summary::after { content: "−"; }
.guide .faq summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.guide .faq-a { padding-bottom: 16px; }
.guide p, .guide li { margin: 0 0 10px; max-width: 65ch; }
.guide ul { margin: 0 0 10px; padding-left: 1.2em; }

/* ---------- Text pages (About, Contact, Privacy) ---------- */
.prose { max-width: 760px; margin-block: 8px 64px; }
.prose h2 { font-size: 32px; line-height: 1.1; margin: 46px 0 14px; }
.prose > :first-child { margin-top: 0; }
.prose h3 { font-size: 26px; line-height: 1.15; margin: 28px 0 8px; }
.prose p, .prose li { max-width: 65ch; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 1.2em; }
.prose li { margin: 0 0 8px; }
.prose li::marker { color: var(--ink-2); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .88em; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.prose a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose .updated { color: var(--ink-2); font-size: 15px; margin-bottom: 28px; }
.prose .note { color: var(--ink-2); font-size: 15px; }
/* A boxed summary at the top of a text page */
.short { padding: 26px 28px 14px; margin: 0 0 18px; }
.short h2 { font-size: 28px; margin: 0 0 14px; }
.short ul { margin: 0 0 12px; }
@media (max-width: 480px) { .short { padding: 22px 18px 10px; } }
.head-mono { display: flex; align-items: baseline; gap: 14px; }

/* ---------- Cards (homepage directory, related tools) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px;
  color: var(--ink); text-decoration: none; isolation: isolate; min-width: 0;
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 2px solid var(--ink);
  border-radius: 14px 225px 12px 255px / 255px 12px 225px 14px; filter: url(#rough); transition: transform .15s;
}
a.card:hover::before, a.card:focus-visible::before { transform: rotate(-.6deg) scale(1.012); }
.card-kind { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.card h3, .card h4 { font-size: var(--step-card); line-height: 1.08; margin: 0; }
.card p { margin: 0; color: var(--ink-2); }
.card .go { margin-top: auto; padding-top: 10px; font-weight: 700; }
.card .go::after { content: " →"; }
.card.bench::before { border-style: dashed; border-color: var(--ink-2); }
.card.bench ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--ink-2); }
.card.bench li::before { content: "○ "; font-family: var(--font-hand); }
.related { margin-block: 0 64px; }
.related h2 { font-size: 30px; margin: 0 0 20px; }

/* ---------- Footer ---------- */
footer.site { position: relative; padding-block: 26px 44px; font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; }
footer.site::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); filter: url(#rough); }
footer.site .hand { font-size: 26px; color: var(--ink); }
footer.site p { margin: 0; }
/* Footer links in two groups: the tools, and the pages about Mono Mate */
footer.site .foot-nav { display: flex; gap: 22px 64px; flex-wrap: wrap; align-items: flex-start; }
.foot-h { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
footer.site .foot-col a { display: inline-block; padding-block: 3px; font-size: 15px; }
footer.site a { color: var(--ink); }

/* ---------- Mono, the helper dot (assets/mm-mono.js) ----------
   Mono stands on the bottom edge of any element with data-mono. On pages Mono is 20px,
   the size of the old promise dots; the masthead logo stays 46px. */
.brand-mono { position: relative; display: inline-block; flex: none; width: 46px; height: 46px; transform-origin: 50% 100%; }
.brand-mono.alive { animation: mono-breathe 3.2s ease-in-out infinite alternate; }
.mono-perch { position: relative; display: inline-block; flex: none; width: 20px; height: 20px; align-self: center; }
.mono-track { position: relative; height: 40px; }
.mono { position: absolute; left: 0; bottom: 0; width: var(--s); height: var(--s); pointer-events: none; }
.mono-y, .mono-breathe, .mono-spin { position: absolute; inset: 0; display: block; }
.mono-y { transform-origin: 50% 100%; }
.mono-breathe { transform-origin: 50% 100%; }
.mono.awake .mono-breathe { animation: mono-breathe 3.2s ease-in-out infinite alternate; }
.mono-spin { transform-origin: 50% 50%; }
.mono-img { width: 100%; height: 100%; display: block; filter: var(--mark-filter); user-select: none; -webkit-user-drag: none; }
.mono-shadow {
  position: absolute; left: 8%; right: 8%; bottom: calc(var(--s) * -0.07); height: calc(var(--s) * 0.14);
  border-radius: 50%; background: var(--mono-shadow); filter: blur(calc(var(--s) * 0.04)); transform-origin: 50% 50%;
}
.mono-sparks { position: absolute; left: -50%; top: -60%; width: 200%; height: 120%; overflow: visible; opacity: 0; pointer-events: none; }
.mono-sparks line { stroke: var(--ink); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@keyframes mono-breathe { from { transform: scale(1, 1); } to { transform: scale(1.03, .975); } }

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