/* ==========================================================================
   Convert: thermal-receipt converter. Monochrome only, Quicksand only.
   The whole palette is one eleven-step grey ramp; roles map onto it.
   ========================================================================== */

:root {
  --g0: #ffffff; --g1: #f5f5f5; --g2: #e9e9e9; --g3: #d7d7d7; --g4: #bcbcbc; --g5: #9d9d9d;
  --g6: #767676; --g7: #595959; --g8: #404040; --g9: #262626; --g10: #111111;

  --counter: var(--g2);    /* the surface the slip lies on */
  --paper: var(--g0);
  --ink: var(--g10);
  --ink-2: var(--g7);      /* 7:1 on paper */
  --rule: var(--g4);
  --wash: var(--g1);
  --field: var(--g3);      /* chart area */
  --shadow: 0 1px 2px rgb(0 0 0 / .08), 0 18px 40px -22px rgb(0 0 0 / .35);

  --font: "Quicksand", ui-rounded, system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --tooth: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --counter: var(--g10); --paper: #1c1c1c; --ink: var(--g1); --ink-2: var(--g4);
    --rule: var(--g7); --wash: #242424; --field: #2e2e2e;
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 18px 40px -22px rgb(0 0 0 / .9);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-2) var(--counter); }
body {
  margin: 0; min-height: 100vh;
  background: var(--counter); color: var(--ink);
  font: 500 1rem/1.55 var(--font);
  font-variant-numeric: tabular-nums lining-nums;
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--paper); }
h1, h2, p { margin: 0; }
h1, h2 { font-weight: 700; letter-spacing: -.01em; line-height: 1.1; text-wrap: balance; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 5; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 8px; }
.skip:focus { top: 1rem; }

/* ---------- Top bar and kind switches ---------- */
.top { padding: clamp(1rem, 3vw, 1.75rem) 0 0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem, 4vw, 2.5rem); max-width: 68rem; margin: 0 auto; }
.mark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 700; font-size: 1.35rem; }
.mark svg { width: 1.9rem; height: 1.9rem; }
.top-note { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 40rem) { .top-note { display: none; } }

.kinds { max-width: 68rem; margin: 1.1rem auto 0; }
.kinds-track {
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  padding: .35rem clamp(1rem, 4vw, 2.5rem) .75rem;
  scroll-padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.kinds-track::-webkit-scrollbar { display: none; }
.kinds-track button {
  flex: none; cursor: pointer;
  padding: .55rem 1.05rem; min-height: 2.75rem;
  font-weight: 600; font-size: .98rem;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .12s;
}
.kinds-track button:hover { background: var(--wash); }
.kinds-track button:active { transform: translateY(1px); }
.kinds-track button[aria-selected="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Desk layout ---------- */
.desk {
  display: grid; grid-template-columns: minmax(0, 36rem) minmax(15rem, 20rem);
  justify-content: center; align-items: start; gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) 3rem;
  max-width: 68rem; margin: 0 auto;
}
@media (max-width: 56rem) { .desk { grid-template-columns: minmax(0, 36rem); } }

/* ---------- The slip ---------- */
.slip {
  position: relative;
  background: var(--paper);
  padding: clamp(1.25rem, 4vw, 2.25rem) clamp(1.1rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.25rem);
  margin-bottom: var(--tooth);
  border-radius: 10px 10px 0 0;
  filter: drop-shadow(0 16px 22px rgb(0 0 0 / .12)) drop-shadow(0 1px 1px rgb(0 0 0 / .1));
}
.slip::after { /* torn zigzag bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--tooth)); height: var(--tooth);
  background: var(--paper);
  -webkit-mask: conic-gradient(from 135deg at top, #000 90deg, #0000 0) 0 0 / calc(var(--tooth) * 2) 100% repeat-x;
          mask: conic-gradient(from 135deg at top, #000 90deg, #0000 0) 0 0 / calc(var(--tooth) * 2) 100% repeat-x;
}
.slip-head { text-align: center; padding-bottom: 1rem; border-bottom: 2px dashed var(--rule); }
.slip-head h1 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: .12em; }
.slip-meta { margin-top: .3rem; font-size: .85rem; color: var(--ink-2); }

.line-from { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.amount {
  flex: 1; min-width: 0;
  font-size: clamp(1.9rem, 6vw, 2.5rem); font-weight: 600; line-height: 1.2;
  background: transparent; border: 0; border-bottom: 2px dashed var(--rule); border-radius: 0;
  padding: .2rem 0; width: 100%;
  transition: border-color .2s;
}
.amount:hover { border-bottom-color: var(--ink-2); }
.amount:focus { outline: none; border-bottom: 2px solid var(--ink); }
.amount[aria-invalid="true"] { border-bottom-style: solid; border-bottom-color: var(--ink); background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--wash) 6px 12px); }
.err { font-size: .92rem; font-weight: 600; margin-top: .5rem; }
.err:empty { display: none; }
.err::before { content: "! "; font-weight: 700; }

.unit {
  flex: none; max-width: 48%;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-weight: 600; font-size: 1rem; text-overflow: ellipsis;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center / .7rem;
  border: 2px solid var(--ink); border-radius: 999px;
  padding: .55rem 2.2rem .55rem 1rem; min-height: 2.75rem;
  transition: background-color .2s;
}
.unit:hover { background-color: var(--wash); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .unit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f5f5f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}

.swap-row { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 .75rem; }
.swap-row .rule { flex: 1; border-top: 2px dashed var(--rule); }
.swap {
  width: 2.9rem; height: 2.9rem; display: grid; place-items: center; cursor: pointer;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 50%;
  transition: background-color .2s, transform .12s;
}
.swap svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swap:hover { background: var(--wash); }
.swap.turned svg { animation: turn .5s var(--ease-out); }
@keyframes turn { from { rotate: 180deg; } to { rotate: 0deg; } }

.total-label { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); }
.total-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .25rem; }
.total-value {
  font-size: clamp(2.8rem, 11vw, 4.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  padding: .05em .2em; margin-left: -.2em; border-radius: 10px;
  overflow-wrap: anywhere;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
.total-value.long { font-size: clamp(2.2rem, 8vw, 3.6rem); }
.total-value.longer { font-size: clamp(1.7rem, 6vw, 2.6rem); }
.total-value.changed { background: var(--ink); color: var(--paper); transition-duration: .08s; }

.fine { margin-top: 1rem; font-size: .92rem; color: var(--ink-2); padding-bottom: 1.25rem; border-bottom: 2px dashed var(--rule); }

.state { margin-top: 1rem; padding: .8rem 1rem; font-size: .95rem; font-weight: 600; background: var(--wash); border: 2px solid var(--ink); border-radius: 10px; }
.state.loading::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .5rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* Same amount in: dotted-leader rows */
.also { margin-top: 1.25rem; }
.also h2, .history h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); margin-bottom: .5rem; }
.also ul { list-style: none; margin: 0; padding: 0; }
.also button {
  display: flex; align-items: baseline; gap: .5rem; width: 100%;
  background: none; border: 0; padding: .5rem .5rem; margin: 0 -.5rem; width: calc(100% + 1rem);
  cursor: pointer; text-align: left; border-radius: 8px;
  transition: background-color .15s;
}
.also button:hover { background: var(--wash); }
.also .u { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.also .lead { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--rule); translate: 0 -.3em; }
.also .v { font-weight: 700; white-space: nowrap; }
.also button.current .u { color: var(--ink); font-weight: 700; }
.also button.current .v::before { content: "→ "; }

/* 90-day history */
.history { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px dashed var(--rule); }
.history-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
.history-head h2 { margin-bottom: 0; }
.history-head p { font-size: .88rem; color: var(--ink-2); }
.chart { display: block; width: 100%; height: 8.5rem; margin-top: .75rem; overflow: visible; }
.chart-area { fill: var(--field); }
.chart-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.chart-grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.chart-foot { display: flex; justify-content: space-between; font-size: .82rem; color: var(--ink-2); margin-top: .35rem; }

.slip-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.btn {
  flex: 1 1 10rem; min-height: 3rem; padding: .7rem 1.2rem; cursor: pointer;
  font-weight: 700; font-size: 1rem;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 0 2px 0 rgb(0 0 0 / .15), 0 8px 16px -10px rgb(0 0 0 / .5);
  transition: transform .12s, box-shadow .12s, background-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgb(0 0 0 / .15); }
.btn-quiet { background: var(--paper); color: var(--ink); box-shadow: none; }
.btn-quiet:hover { background: var(--wash); }
.btn:disabled { cursor: not-allowed; background: transparent; color: var(--ink-2); border-style: dashed; border-color: var(--ink-2); box-shadow: none; transform: none; }
.link { background: none; border: 0; padding: .25rem 0; cursor: pointer; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }

/* ---------- The tape ---------- */
.tape { position: sticky; top: 1rem; }
.tape-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.tape-head h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .14em; }
.tape-head .link { font-size: .9rem; }
.tape-list {
  list-style: none; margin: 0; padding: .4rem 1rem; max-height: 70vh; overflow-y: auto;
  background: var(--paper); border-radius: 6px; box-shadow: var(--shadow);
}
.tape-list:empty { display: none; }
.tape-list li { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 2px dashed var(--rule); }
.tape-list li:last-child { border-bottom: 0; }
.t-line { font-weight: 700; overflow-wrap: anywhere; }
.t-when { font-size: .8rem; color: var(--ink-2); }
.tape-list li.new { animation: print .6s var(--ease-out); }
@keyframes print { from { clip-path: inset(0 0 100% 0); translate: 0 -.6rem; } to { clip-path: inset(0 0 0 0); translate: 0 0; } }
.tape-empty { font-size: .92rem; color: var(--ink-2); padding: 1rem; border: 2px dashed var(--rule); border-radius: 10px; }
@media (max-width: 56rem) { .tape { position: static; } .tape-list { max-height: none; } }

/* ---------- Footer ---------- */
.foot { max-width: 68rem; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem; font-size: .88rem; color: var(--ink-2); display: grid; gap: .4rem; }
.foot p { max-width: 75ch; }

/* Phones: unit pickers get the full width so names aren't cut off */
@media (max-width: 30rem) {
  .line-from { flex-wrap: wrap; }
  .amount { flex-basis: 100%; }
  .unit { max-width: 100%; flex: 1 1 100%; }
}

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