/* WASP DESIGN — receipt generator.
   Thesis: the only physical object on screen is the paper. The chrome is a warm
   workbench — sand and kraft tones, flat and hairline-ruled — and the sheet is
   the one pure white thing on it, the only element that casts a shadow. Panels
   and buttons carry a chamfered corner echoing the faceted plates in the mark.
   Warmth is carried by the greys themselves: every neutral is mixed toward
   ochre, so nothing on screen is a cold grey. */

:root {
  color-scheme: light;

  /* A ladder from the deepest surface up to the paper. */
  --bed: #e3d7c3;
  --ground: #ece2d2;
  --panel: #f7f2e9;
  --input: #fffdf8;
  --paper: #ffffff;

  --line: #d9cbb4;
  --haze: #6b5f50;
  --text: #2b2520;

  /* Wasp amber. Bright enough to fill with, too light to set text in, so
     anything that must read as type uses the burnt variant. */
  --sting: #f2b417;
  --sting-ink: #8a5a00;

  /* Locked to the Word template — do not retheme. */
  --doc-text: #666666;
  --doc-label: #b7b7b7;
  --doc-fill: #f3f3f3;

  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --chamfer: 9px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- top rail */

.rail {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 60px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Echoes the logo lockup: heavy WASP over letter-spaced DESIGN. The drawn
   mark is unreadable at rail size, so it appears only on the sheet. */
.rail__wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__wordmark b {
  font: 700 15px/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--text);
}

.rail__wordmark i {
  font: 400 8px/1 var(--sans);
  font-style: normal;
  letter-spacing: 0.3em;
  color: var(--haze);
}

.rail__rule {
  width: 1px;
  height: 24px;
  background: var(--line);
}

.rail__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--haze);
  white-space: nowrap;
}

.readout {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid #d09a10;
  background: var(--sting);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.readout__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5c3d00;
}

.readout__value {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text);
}

.rail__actions {
  display: flex;
  gap: 8px;
}

/* ------------------------------------------------------------------ layout */

.split {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(420px, 520px) 1fr;
  min-height: 0;
}

.form {
  overflow-y: auto;
  padding: 20px;
  margin: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ------------------------------------------------------------------ panels */

.panel {
  margin: 0;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

.panel__legend {
  margin: 0 0 12px;
  font-weight: 400;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--haze);
}

.grid {
  display: grid;
  gap: 12px;
}

.grid--2 {
  grid-template-columns: 1fr 1fr;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--haze);
}

.input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  background: var(--input);
  color: var(--text);
  font: inherit;
  transition: border-color 120ms ease;
}

.input--data {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.input::placeholder {
  color: #7f7263;
}

.input:hover {
  border-color: #c2b096;
}

.input:focus {
  outline: none;
  border-color: #c2b096;
  border-left-color: var(--sting-ink);
}

.hint {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--haze);
}

.hint--rail {
  margin: 0;
}

/* -------------------------------------------------------------- line items */

.itemhead,
.item {
  display: grid;
  grid-template-columns: 1.05fr 1.7fr 0.85fr 0.6fr 0.8fr 32px;
  gap: 6px;
  align-items: center;
}

.itemhead {
  padding-bottom: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--haze);
}

.item {
  padding: 5px 0;
}

.item select.input,
.item input.input {
  padding: 7px 8px;
  font-size: 13px;
}

.item select.input {
  padding-right: 4px;
}

.item__total {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text);
  padding-right: 2px;
}

.item__remove {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--haze);
  font: 400 14px/1 var(--sans);
  cursor: pointer;
}

.item__remove:hover {
  border-color: var(--line);
  color: var(--text);
}

.empty {
  margin: 4px 0 0;
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--haze);
  border-top: 1px dashed var(--line);
  text-align: center;
}

.itemfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.itemfoot__total {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--haze);
}

.itemfoot__total b {
  margin-left: 8px;
  font-size: 14px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ----------------------------------------------------------------- buttons */

.btn {
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

.btn:hover {
  border-color: var(--sting-ink);
  color: var(--sting-ink);
}

.btn:active {
  background: var(--ground);
}

.btn--ghost {
  background: none;
}

:focus-visible {
  outline: 2px solid var(--sting-ink);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ errors */

.errors {
  margin: 0;
  padding: 12px 14px 12px 30px;
  border: 1px solid #dfbf8a;
  background: #fdf4e3;
  color: #7a4f00;
  font-size: 13px;
}

.errors li {
  margin: 2px 0;
}

/* ------------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 18px;
  border: 1px solid #4a4038;
  background: var(--text);
  color: var(--panel);
  font-family: var(--mono);
  font-size: 12px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

/* --------------------------------------------------------------- print bed */

.bed {
  overflow: auto;
  padding: 28px;
  background: var(--bed);
  background-image: radial-gradient(circle at 1px 1px, #d2c2a7 1px, transparent 0);
  background-size: 22px 22px;
}

.bed__scaler {
  width: 8.5in;
  height: 11in;
  transform: scale(var(--fit, 1));
  transform-origin: top center;
  /* Reclaim the layout space the transform leaves behind. */
  margin: 0 calc((var(--fit, 1) - 1) * 4.25in) calc((var(--fit, 1) - 1) * 11in);
}

.sheet {
  width: 8.5in;
  height: 11in;
  padding: 0.375in 1in 1in;
  background: var(--paper);
  box-shadow: 0 20px 48px rgba(94, 70, 33, 0.18), 0 2px 6px rgba(94, 70, 33, 0.12);
  color: var(--doc-text);
  font-family: var(--sans);
  font-size: 11pt;
  line-height: 1.15;
  overflow: hidden;
}

/* ------------------------------------------- the document itself (Word 1:1) */

.doc {
  position: relative;
  height: 100%;
}

.doc__logo {
  position: absolute;
  left: 0;
  top: 0.125in;
  width: 1.4218in;
  height: 1.4218in;
}

.doc__contact {
  position: absolute;
  left: 5.4269in;
  top: 0.2604in;
  width: 1.794in;
  padding: 0.1in;
  font-size: 14pt;
  line-height: 1.15;
}

.doc__contact p {
  margin: 0;
  white-space: nowrap;
}

.doc__gap--xl {
  height: 1.005in;
}

.doc__gap--l {
  height: 0.352in;
}

.doc__gap--s {
  height: 0.192in;
}

.doc__title {
  margin: 0;
  font-size: 22pt;
  font-weight: 400;
  line-height: 1.15;
  text-align: right;
  color: var(--doc-text);
}

.meta,
.lines {
  border-collapse: collapse;
  table-layout: fixed;
}

.meta {
  width: 100%;
}

.meta td {
  vertical-align: top;
  height: 0.306in;
  padding: 0.04in 0.08in;
  border: 1px solid #fff;
  background: var(--doc-fill);
  color: var(--doc-text);
  font-size: 11pt;
  text-align: left;
}

.meta__head td {
  font-size: 8pt;
  color: var(--doc-label);
}

.meta .meta__due {
  /* Word centres the amount with blank paragraphs above and below it. */
  vertical-align: middle;
  text-align: right;
}

.lines {
  /* 7800 of the 9360 twip content column. */
  width: 83.33%;
  margin-right: auto;
}

.lines th,
.lines td {
  vertical-align: top;
  padding: 0.05in 0.08in;
  border: 1px solid #fff;
  color: var(--doc-text);
  font-size: 11pt;
  font-weight: 400;
  text-align: left;
}

.lines thead th {
  height: 0.375in;
  background: var(--doc-fill);
  font-size: 8pt;
  color: var(--doc-label);
}

.lines tbody td {
  height: 0.5in;
  background: #fff;
}

.lines tbody .desc {
  font-size: 7pt;
}

.lines tbody .qty {
  text-align: center;
}

.lines tbody .total {
  text-align: right;
}

.lines tfoot td {
  height: 0.2in;
  background: var(--doc-fill);
  font-size: 10pt;
  font-weight: 700;
  text-align: right;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .split {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  /* Preview first: read the receipt, then edit it underneath. */
  .bed {
    order: -1;
    padding: 16px 12px;
    /* As an auto-sized grid row, a scroll container contributes zero height and
       collapses to its padding. The whole column scrolls here instead. */
    overflow: visible;
    /* ...but without overflow clamping it, the sheet's 8.5in min-content width
       would stretch the 1fr column past the viewport. */
    min-width: 0;
  }

  .form {
    border-right: none;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .rail {
    height: 52px;
    padding: 0 14px;
    gap: 12px;
  }

  /* The wordmark already names the app; the mono label is the first thing to go. */
  .rail__title,
  .rail__rule {
    display: none;
  }

  .readout {
    padding: 5px 12px;
  }

  .readout__value {
    font-size: 17px;
  }

  /* The form now sits at the bottom of a long scroll, so the exports move into
     thumb reach instead of living off the top of it. */
  .rail__actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--ground);
  }

  .btn {
    flex: 1;
    padding: 13px 12px;
  }

  .split {
    padding-bottom: 78px;
  }

  .toast {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .grid--2 {
    grid-template-columns: 1fr;
  }

  .itemhead {
    display: none;
  }

  /* iOS zooms the whole page when a focused field is under 16px. */
  .input,
  .item select.input,
  .item input.input {
    font-size: 16px;
    padding: 11px 10px;
  }

  .item {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "type type remove"
      "desc desc desc"
      "price qty total";
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }

  .item__type {
    grid-area: type;
  }

  .item__desc {
    grid-area: desc;
  }

  .item__price {
    grid-area: price;
  }

  .item__qty {
    grid-area: qty;
  }

  .item__total {
    grid-area: total;
    align-self: center;
    font-size: 15px;
  }

  .item__remove {
    grid-area: remove;
    width: 40px;
    height: 40px;
  }
}

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

/* ------------------------------------------------------------------- print */

@page {
  size: letter;
  margin: 0;
}

@media print {
  .rail,
  .form,
  .toast {
    display: none !important;
  }

  body {
    display: block;
    background: #fff;
  }

  .split {
    display: block;
  }

  .bed {
    overflow: visible;
    padding: 0;
    background: #fff;
  }

  .bed__scaler {
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
  }

  .sheet {
    margin: 0;
    box-shadow: none;
  }

  /* Browsers drop backgrounds when printing; the shaded cells must survive. */
  .meta td,
  .lines th,
  .lines td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}