/* Etsy Pricing Calculator — shared styles. Mobile-first, system fonts, no tracking. */
:root {
  --navy: #0e2a5c;
  --navy-dark: #0a1f45;
  --ink: #1a2233;
  --muted: #5b6472;
  --line: #e3e6ec;
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --cream: #fbf7ec;
  --gold: #d4a017;
  --gold-dark: #7a5c00; /* gold dark enough for text on white (6.3:1) */
  --green: #14663c; /* darkened from #1a7f4b so the profitable verdict passes WCAG AA (6.2:1 on its background) */
  --green-bg: #e6f4ec;
  --red: #b3261e;
  --red-bg: #fdecea;
  --amber-bg: #fdf3d7;
  --radius: 12px;
  --max: 1080px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 17px;
}
a { color: var(--navy); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
/* Skip link: hidden until keyboard focus, then visible at the top. */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 12px 18px; z-index: 100; border-radius: 0 0 10px 0; font-weight: 700; }
.skip-link:focus { left: 0; color: #fff; }
h1, h2, h3 { color: var(--navy); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 2em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.small { font-size: .85rem; color: var(--muted); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 18px; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: #fff; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.brand { font-weight: 800; color: var(--navy); text-decoration: none; font-size: 1.05rem; }
.brand span { color: var(--gold-dark); }
.site-nav a { margin-left: 16px; font-size: .95rem; text-decoration: none; color: var(--muted); }
.site-nav a:hover { color: var(--navy); text-decoration: underline; }

/* Hero */
.hero { background: var(--navy); color: #fff; padding: 44px 0 36px; }
.hero h1 { color: #fff; font-size: 2.1rem; margin-bottom: .35em; }
.hero p.lede { font-size: 1.15rem; color: #d7deea; max-width: 640px; }
.hero .pill-row { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero .pill { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: .85rem; }
.btn { display: inline-block; background: var(--gold); color: #241a00; font-weight: 700; text-decoration: none; border: none; border-radius: 10px; padding: 13px 22px; font-size: 1rem; cursor: pointer; min-height: 48px; }
.btn:hover { filter: brightness(.96); }
.btn-secondary { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
.btn-small { padding: 9px 14px; font-size: .9rem; min-height: 40px; }

/* Calculator */
.calc { padding: 28px 0 8px; }
.calc-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 860px) {
  .calc-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .results { position: sticky; top: 16px; }
}
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h2 { margin-top: 0; font-size: 1.25rem; }
.field { margin-bottom: 14px; }
.field-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 5px; }
/* Inline input-error box (role="alert") and the invalid-field outline. */
.error-box { background: var(--red-bg); border: 2px solid var(--red); border-radius: var(--radius); padding: 12px 14px; font-size: .92rem; color: #7a1f1a; margin-bottom: 14px; }
.error-box ul { margin: .4em 0 0; padding-left: 1.2em; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red); outline: 2px solid var(--red); outline-offset: 1px; }
.field label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 5px; }
.field .hint { font-size: .82rem; color: var(--muted); font-weight: 400; }
input[type="number"], input[type="text"], select {
  width: 100%; padding: 12px 12px; font-size: 1rem; border: 1.5px solid #c9cfd8; border-radius: 9px; background: #fff; color: var(--ink);
}
input[type="number"]:focus, input[type="text"]:focus, select:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input-prefix { position: relative; }
.input-prefix span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.input-prefix input { padding-left: 30px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 14px; }
legend { font-weight: 700; padding: 0 6px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 14px; }
.radio-row label { font-weight: 400; display: flex; align-items: center; gap: 6px; margin: 0; }
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--navy); }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.hidden { display: none !important; }

/* Results */
.results .verdict { border-radius: var(--radius); padding: 14px 16px; font-weight: 800; font-size: 1.1rem; margin-bottom: 14px; }
.verdict.profitable { background: var(--green-bg); color: var(--green); }
.verdict.losing { background: var(--red-bg); color: var(--red); }
.verdict.breakeven { background: var(--amber-bg); color: #7a5b00; }
.big-number { font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.big-number.negative { color: var(--red); }
.big-number.positive { color: var(--green); }
table.fees { width: 100%; border-collapse: collapse; font-size: .98rem; margin: 10px 0; }
table.fees td { padding: 7px 0; border-bottom: 1px solid var(--line); }
table.fees td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.fees tr.total td { font-weight: 800; border-bottom: none; }
table.fees tr.subtotal td { font-weight: 700; }
.note-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: .92rem; margin-top: 12px; }
.note-box.warn { background: var(--amber-bg); border-color: #ecd27a; }

/* Saved recipes */
.recipe-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; }
.recipe-item .name { font-weight: 700; }
.recipe-item .meta { font-size: .85rem; color: var(--muted); }
.recipe-item .actions { display: flex; gap: 6px; }
.btn-link { background: none; border: none; color: var(--navy); font-weight: 700; cursor: pointer; padding: 8px; font-size: .9rem; }
.btn-link.danger { color: var(--red); }

/* Sections */
.section { padding: 8px 0 24px; }
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.step .num { display: inline-block; background: var(--navy); color: #fff; font-weight: 800; border-radius: 50%; width: 32px; height: 32px; line-height: 32px; text-align: center; margin-bottom: 8px; }
.fee-explainer { background: var(--cream); border: 1px solid #efe3bd; border-radius: var(--radius); padding: 20px; }
.fee-explainer table { width: 100%; border-collapse: collapse; }
.fee-explainer td { padding: 6px 0; border-bottom: 1px solid #eadfba; }
.fee-explainer td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 700px) { .craft-grid { grid-template-columns: repeat(3, 1fr); } }
.craft-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--ink); background: #fff; }
.craft-card:hover { border-color: var(--navy); }
.craft-card h3 { margin-bottom: .25em; }
.craft-card p { margin: 0; font-size: .9rem; color: var(--muted); }
details { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
details summary { font-weight: 700; cursor: pointer; color: var(--navy); }
details p { margin: .6em 0 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 26px 0; margin-top: 30px; font-size: .9rem; color: var(--muted); }
.site-footer a { color: var(--navy); }

/* Craft pages */
.craft-hero { background: var(--navy); color: #fff; padding: 36px 0 28px; }
.craft-hero h1 { color: #fff; }
.craft-hero p { color: #d7deea; }
.prose { max-width: 720px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.cta-box { background: var(--cream); border: 1px solid #efe3bd; border-radius: var(--radius); padding: 20px; margin: 24px 0; text-align: center; }

/* ---- v2: disclaimer, country rates, break-even, export, supported table ---- */
.disclaimer-box {
  background: var(--amber-bg); border: 2px solid #ecd27a; border-radius: var(--radius);
  padding: 14px 16px; font-size: .92rem; margin: 20px 0 4px; color: #4d3d00;
}
.disclaimer-box a { color: var(--navy); }
.rate-line { font-size: .9rem; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.warn-text { color: #7a5b00; font-weight: 700; }
.price-box { background: #eef3fb; border-color: #c3d2ea; }
.price-box strong { color: var(--navy); font-size: 1.05rem; }
.export-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.export-row .btn { flex: 1 1 160px; text-align: center; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.supported { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
table.supported th, table.supported td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.supported th { background: var(--bg-soft); color: var(--navy); }
table.fees td:first-child { overflow-wrap: anywhere; }

/* Print / PDF summary: hidden on screen, only the summary prints. */
.print-summary { display: none; }
.print-summary h1 { font-size: 1.4rem; }
.print-summary h2 { font-size: 1.1rem; margin-top: 1.2em; }
.print-summary table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.print-summary td { padding: 5px 0; border-bottom: 1px solid #ddd; }
.print-summary td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.print-summary .print-meta { color: #555; font-size: .9rem; }
.print-summary .print-disclaimer { font-size: .85rem; color: #555; margin-top: 1.2em; }
@media print {
  body > *:not(#printSummary) { display: none !important; }
  #printSummary { display: block !important; }
  body { font-size: 12pt; color: #000; }
}

/* ---- v2: small-screen usability (360px and up) ---- */
input:disabled { background: var(--bg-soft); color: var(--muted); cursor: not-allowed; }
.radio-row label, .check-row { min-height: 44px; }
.input-prefix input { padding-left: 36px; } /* room for two-character symbols (C$, A$) */
@media (max-width: 420px) {
  body { font-size: 16px; }
  h1, .hero h1 { font-size: 1.65rem; }
  h2 { font-size: 1.3rem; }
  .hero { padding: 30px 0 26px; }
  .hero p.lede { font-size: 1.05rem; }
  .wrap { padding: 0 14px; }
  .card { padding: 16px 14px; }
  .site-nav { display: none; } /* nav links are duplicated by on-page sections on small screens */
  .big-number { font-size: 1.7rem; }
  .results .verdict { font-size: 1rem; padding: 12px 14px; }
  table.fees { font-size: .92rem; }
  .input-row { gap: 8px; }
  .btn { min-height: 48px; padding: 13px 18px; }
  .export-row .btn { flex: 1 1 100%; }
  .craft-grid { grid-template-columns: 1fr; }
  .recipe-item { flex-direction: column; align-items: flex-start; }
  .recipe-item .actions { width: 100%; }
  .recipe-item .actions .btn-link { min-height: 44px; }
  .disclaimer-box { font-size: .88rem; }
}

/* ---- v3: supported-countries table becomes stacked country cards below 480px ----
   Desktop table is untouched above 480px. Below 480px each row becomes one card
   showing all four details (country as the card title, the other three labelled),
   so nothing is hidden behind a sideways scroll. */
@media (max-width: 480px) {
  .table-scroll { overflow-x: visible; }
  table.supported { min-width: 0; }
  /* Hide the header row visually but keep it for screen readers. */
  table.supported thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  table.supported, table.supported tbody, table.supported tr, table.supported td { display: block; }
  /* Each row becomes one country card. */
  table.supported tbody tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-soft); padding: 12px 14px; margin-bottom: 12px;
  }
  table.supported td { border-bottom: none; padding: 4px 0; }
  /* The country name is the card title. */
  table.supported td:first-child {
    font-size: 1.05rem; font-weight: 800; color: var(--navy); padding-bottom: 6px;
  }
  /* Every other cell shows its column label above the value. */
  table.supported td:not(:first-child)::before {
    content: attr(data-label);
    display: block; font-size: .78rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px;
  }
}