/* Keptsheet fee calculator. Yellow cells are inputs and the result sits in a selected cell, like the workbook. */
:root {
  --paper: #f2f5f1; --surface: #ffffff; --ink: #15211c; --muted: #4f5f58;
  --rule: #d5ddd7; --rule-soft: #e6ece7;
  --cell: #fff4b8; --cell-edge: #8a7410;
  --keep: #0c6b4a; --keep-tint: #e2f2ea; --loss: #b3261e; --loss-tint: #fbe6e3;
  --focus: #1d4ed8; --link: #0b5cad;
  --font: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1512; --surface: #17211c; --ink: #e7efea; --muted: #a2b3ab;
    --rule: #2c3a34; --rule-soft: #222e29;
    --cell: #3a3413; --cell-edge: #a8921f;
    --keep: #52d4a0; --keep-tint: #15382b; --loss: #ff8e80; --loss-tint: #3c1b17;
    --focus: #8ab4ff; --link: #8cc3ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--font); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
a { color: var(--link); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: 1rem; z-index: 10; background: var(--surface); padding: 0.5rem 0.75rem; }

.top { padding: 1.1rem 0 0; }
.brand { margin: 0; font-weight: 800; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.55rem; }
.brand::before { content: ""; width: 1.05rem; height: 1.05rem; background: var(--cell); border: 2px solid var(--keep); }

.intro { padding: 1.5rem 0 1.75rem; }
h1 { margin: 0 0 0.9rem; max-width: 16em; font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; }
.lede { margin: 0; max-width: 38rem; font-size: 1.1rem; color: var(--muted); }

/* Calculator: answer first on a phone, form on the left and sticky answer on the right on a desktop. */
.calc { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.side { display: contents; }
.keep { order: 1; } .sheet { order: 2; } .receipt { order: 3; }

.keep { position: relative; margin: 0 8px 8px 0; padding: 1rem 1.25rem 1.1rem; background: var(--surface); border: 3px solid var(--keep); }
.keep::after { content: ""; position: absolute; right: -9px; bottom: -9px; width: 11px; height: 11px; background: var(--keep); border: 2px solid var(--paper); }
.keep p { margin: 0; }
.keep-label { font-weight: 650; color: var(--muted); }
.keep-value { font-size: clamp(2.9rem, 12vw, 4.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--keep); }
.keep-flag { display: none; margin-top: 0.4rem !important; padding: 0.4rem 0.6rem; font-weight: 700; color: var(--loss); background: var(--loss-tint); }
.keep-sub { margin-top: 0.4rem !important; color: var(--muted); }
[data-state="loss"] .keep { border-color: var(--loss); }
[data-state="loss"] .keep::after { background: var(--loss); }
[data-state="loss"] .keep-value { color: var(--loss); }
[data-state="loss"] .keep-flag, [data-state="even"] .keep-flag { display: block; }
[data-state="even"] .keep-flag { color: var(--ink); background: var(--rule-soft); }
[data-state="empty"] .keep-value { color: var(--muted); }

.receipt { background: var(--surface); border: 1px solid var(--rule); }
.receipt h3 { margin: 0; padding: 0.65rem 1rem; font-size: 0.95rem; background: var(--rule-soft); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.5rem 1rem; vertical-align: baseline; border-top: 1px dotted var(--rule); }
th { text-align: left; font-weight: 500; }
td { text-align: right; white-space: nowrap; }
.detail { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
tr.sum th, tr.sum td { font-weight: 700; border-top: 1px solid var(--ink); }
tr.net th, tr.net td { font-size: 1.1rem; font-weight: 800; background: var(--keep-tint); color: var(--keep); border-top: 1px solid var(--ink); }
[data-state="loss"] tr.net th, [data-state="loss"] tr.net td { background: var(--loss-tint); color: var(--loss); }
.estimate { margin: 0; padding: 0.7rem 1rem; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--rule); }

.sheet { background: var(--surface); border: 1px solid var(--rule); }
fieldset { margin: 0; padding: 0; border: 0; }
.sheet fieldset + fieldset { border-top: 1px solid var(--rule); }
legend { width: 100%; padding: 0.6rem 1rem; font-weight: 700; font-size: 0.95rem; background: var(--rule-soft); }
.row { display: grid; grid-template-columns: 1fr 7rem; gap: 0.2rem 1rem; align-items: center; padding: 0.65rem 1rem; border-top: 1px solid var(--rule-soft); }
.lab { display: grid; }
.lab label { font-weight: 600; }
.cur { font-weight: 400; color: var(--muted); }
.hint, .note { font-size: 0.85rem; color: var(--muted); }
.note { margin: 0; }
.err { grid-column: 1 / -1; font-size: 0.85rem; font-weight: 600; color: var(--loss); }
.row.stack { grid-template-columns: 1fr; }
.row .note { padding-top: 0.2rem; }
.cur-note { margin: 0 1rem 0.65rem; padding: 0.5rem 0.7rem; border-left: 4px solid var(--cell-edge); background: var(--cell); color: var(--ink); }
.cur-note[hidden] { display: none; }

input[type="text"], select { width: 100%; padding: 0.5rem 0.6rem; font: inherit; color: var(--ink); background: var(--cell); border: 1px solid var(--cell-edge); border-radius: 2px; }
input[type="text"] { text-align: right; }
select { padding-right: 0.3rem; }
input[aria-invalid="true"] { border-color: var(--loss); border-width: 2px; }
input.check { width: 1.5rem; height: 1.5rem; margin: 0; justify-self: end; accent-color: var(--keep); }

.product { margin: 0 0 2.5rem; padding: 0.9rem 1.1rem; background: var(--surface); border-left: 4px solid var(--keep); max-width: 44rem; }
.product p { margin: 0; }
.product-main { font-weight: 650; }
.product-sub { margin-top: 0.3rem !important; font-size: 0.9rem; color: var(--muted); }

.band { padding: 0.5rem 0 2.25rem; }
h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; }
h3 { margin: 0; font-size: 1rem; }
.fee { display: grid; gap: 0.2rem 2rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.fee p { margin: 0; max-width: 42rem; }

details { border-top: 1px solid var(--rule); max-width: 46rem; }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { position: relative; padding: 0.85rem 2rem 0.85rem 0; font-weight: 650; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.55rem; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--muted); }
details[open] summary::after { content: "\2212"; }
details p { margin: 0 0 1rem; max-width: 42rem; }

.plain { margin: 0 0 1.25rem; padding-left: 1.2rem; max-width: 44rem; }
.plain li { margin-bottom: 0.4rem; }
#assumptions h3 { margin-bottom: 0.5rem; }
.foot { padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9rem; }
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 0.6rem; }
.foot nav a { padding: 0.4rem 0; }

/* Country pages (etsy-fees-*): prose, a worked-example receipt and one call to action. */
.prose p { margin: 0 0 1rem; max-width: 42rem; }
.example { max-width: 36rem; margin-bottom: 1.25rem; }
.example h3:not(:first-child) { border-top: 1px solid var(--rule); }
.go { display: inline-block; padding: 0.7rem 1.1rem; font-weight: 700; color: var(--paper); background: var(--keep); border: 2px solid var(--keep); text-decoration: none; }
.go:hover { text-decoration: underline; }
.go + p { margin-top: 0.75rem; }

@media (min-width: 48rem) {
  .fee { grid-template-columns: 12rem 1fr; }
}
@media (min-width: 60rem) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 2rem; align-items: start; }
  .side { display: block; grid-column: 2; grid-row: 1; }
  .sheet { grid-column: 1; grid-row: 1; order: 0; }
  .keep, .receipt { order: 0; }
  .receipt { margin-top: 1.25rem; }
}
@media (min-width: 60rem) and (min-height: 50rem) {
  .side { position: sticky; top: 1rem; }
}