/* The owner page's look: the till's own colours, from the approved plan drawing (design/sources/owner/owner.css).
   Light only for now: light and dark come later with the till, as the plan says. The shared parts it uses, the code
   field, the receipt and the messages, read their colours from the names below, as a brand's theme.css gives them. */

:root {
  --page: #EEF1EF;
  --surface: #FFFFFF;
  --line: #C2CDC8;
  --rule: #E5EAE7;
  --field: #8A9994;
  --text: #16201D;
  --muted: #3F4C48;
  --header: #10272E;
  --header-text: #FFFFFF;
  --header-muted: #B9C7C4;
  --tab-on: #FFFFFF;
  --tab-on-text: #10272E;
  --accent: #0B6E4F;
  --on-accent: #FFFFFF;
  --accent-text: #0B6E4F;
  --good-fill: #DCEFE7;
  --good-text: #0B5A41;
  --warn-text: #9A4708;
  --warn-line: #B45309;
  --bad-fill: #FBE9E7;
  --bad-text: #A12A1B;
  --corner: 8px;
  --body-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --heading-font: var(--body-font);
  --plain-fill: #E3E8E6;
  --plain-text: var(--muted);
  --warn-fill: #FCEBD9;
  --accent-light: var(--good-fill);
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.4;
}

.icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* For screen readers only, such as "bill 15" after each "View". */
.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Top bar: the shop's name, the three pages, and sign out. It clears a phone's notch. */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 8px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--header);
  color: var(--header-text);
}
.bar__name { font-size: 20px; font-weight: 700; }
.bar__name small { display: block; font-size: 13px; font-weight: 400; color: var(--header-muted); }
.tabs { display: flex; gap: 4px; }
.tab {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 8px;
  color: var(--header-text); font-weight: 600; text-decoration: none;
}
.tab[aria-current="page"] { background: var(--tab-on); color: var(--tab-on-text); font-weight: 700; }
.bar__end { margin: 0 0 0 auto; display: flex; align-items: center; gap: 16px; }
.signout {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--header-muted); border-radius: 8px;
  background: transparent; color: var(--header-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}

/* On a phone the pages are under Menu, in a sheet below the bar. */
.menu { display: none; }
.menu__button {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; list-style: none; cursor: pointer;
  border: 1px solid var(--header-muted); border-radius: 8px; color: var(--header-text); font-weight: 600;
}
.menu__button::-webkit-details-marker { display: none; }
.menu__sheet {
  position: absolute; left: 0; right: 0; z-index: 10; margin-top: 8px; padding: 8px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px rgba(16, 39, 46, 0.18);
}
.menu__sheet form { margin: 0; }
.menu__link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 12px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer;
}
.menu__link[aria-current="page"] { background: var(--good-fill); color: var(--good-text); }

main {
  flex: 1;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  padding: 20px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left));
}

.foot {
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 13px;
}
.foot a { color: var(--muted); }

h1 { margin: 0 0 4px; font-size: 26px; }
h2 { margin: 0 0 12px; font-size: 20px; }
p { margin: 0 0 10px; }
.quiet { color: var(--muted); }
.small { font-size: 14px; }

.card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 8px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid var(--field); background: var(--surface); color: var(--text);
}
.button--main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-size: 18px; }
.button--warn { border-color: var(--warn-line); color: var(--warn-text); }
.button--square { width: 52px; height: 52px; padding: 0; }
.button--wide { width: 100%; }
.button--half, .button--grow { flex: 1; }
.button[aria-disabled="true"] { color: var(--line); border-color: var(--line); cursor: default; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; }

label { display: block; margin: 12px 0 4px; font-size: 14px; font-weight: 700; color: var(--muted); }
.input {
  width: 100%; min-height: 50px; padding: 0 12px;
  border: 1px solid var(--field); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 18px;
}
.check { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 16px; font-weight: 400; color: var(--text); }
.check input { flex: none; width: 22px; height: 22px; accent-color: var(--accent); }
.note-good { color: var(--accent-text); font-size: 15px; }
.form-message { margin: 0 0 10px; }
.form-end { margin-top: 18px; }

/* Sign in. The owner code's 8 boxes fill the card's width, as drawn, with code check's fill: 8 apart on a computer
   and 5 on a phone. */
.signin { max-width: 520px; margin: 40px auto; }
.signin .nsys-code {
  gap: 4px;
  margin: 12px 0 18px;
  --nsys-code-gap: 8px;
}
.signin .nsys-label { margin: 0; color: var(--muted); font-weight: 700; }
.signin__note { margin: 16px 0 0; }

/* Reports */
.report { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.report__side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.report__list { flex: 999 1 560px; min-width: 0; }
.day { display: flex; align-items: center; gap: 10px; }
.day__name { flex: 1; margin: 0; text-align: center; font-size: 20px; font-weight: 700; }
.figure__name { color: var(--muted); }
.figure__value { font-size: 38px; font-weight: 700; line-height: 1.2; }

.table-box { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; color: var(--muted); }
td { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
td.money, th.money { text-align: right; }
td.empty { padding: 18px 14px; color: var(--muted); }
.row-link { color: var(--accent-text); font-weight: 700; }
tr.on td { background: var(--good-fill); font-weight: 700; }

/* A bill, shown as its receipt. The shared receipt keeps the paper white. */
.back { margin-bottom: 16px; }
.bill { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.bill__about { flex: 1 1 280px; }

/* Items. Each row opens the item; its name is the link. */
.items { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.items__list { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.items__form { flex: 1 1 360px; min-width: 0; }
.items__form h2 { margin: 0; }
.find { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.find > div { flex: 1 1 240px; }
.item-link { color: inherit; text-decoration: none; }
.item-link:hover, .item-link:focus-visible { text-decoration: underline; }
.items tbody tr:has(.item-link), .groups tbody tr:has(.item-link) { cursor: pointer; }
.items tbody tr:has(.item-link):hover td, .groups tbody tr:has(.item-link):hover td { background: var(--rule); }
.items tbody tr.on:hover td, .groups tbody tr.on:hover td { background: var(--good-fill); }

.shop { max-width: 640px; }

/* Version two: the pages under a tab, as chips above them, and the cards and lists on them, from the version two
   plan drawing (design/sources/v2/v2.css). */
.subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.chip--on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.page-title { margin: 0 0 14px; }
.card h2 { margin: 0 0 12px; }
.list-box th { padding: 10px 12px; font-size: 13px; white-space: nowrap; }
.list-box td { padding: 9px 12px; font-size: 15px; }
.list-box tr:last-child td { border-bottom: 0; }
.facts { margin: 0 0 10px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; text-align: right; min-width: 0; }
.facts .key { font-family: Menlo, Consolas, 'Courier New', monospace; font-size: 14px; overflow-wrap: anywhere; }
.tills, .key-card { max-width: 640px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
td .sub { display: block; font-size: 13px; color: var(--muted); }
/* Bill names, such as 2-0001, never break at their dash. */
.nw { white-space: nowrap; }
.add { margin-top: 12px; }
.add > summary { list-style: none; }
.add > summary::-webkit-details-marker { display: none; }
.add[open] > summary { margin-bottom: 4px; }
.add-till { align-items: center; }
.input--small { width: auto; min-height: 48px; font-size: 16px; }
.cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cols > .main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cols > .aside { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.every ul { margin: 0; padding-left: 20px; }
.every li { margin: 4px 0; }
.key-card { margin-bottom: 14px; border-color: var(--accent); }
.tills .form-end { margin-top: 12px; }
.tills__note { margin: 10px 0 0; }
.message { max-width: 640px; }

/* Version two, step 2: Items' filters and new fields, and Groups, from the version two plan drawing. */
h3 { margin: 14px 0 8px; font-size: 17px; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.title-row h1 { margin: 0; flex: 1; min-width: 200px; }
.button--small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.filters { display: flex; flex-direction: column; gap: 12px; }
.choose select { flex: 0 1 auto; min-width: 170px; max-width: 100%; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 12px; }
.case-price { margin: 6px 0 0; }
.item-facts { margin: 12px 0 0; }
.history div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.history div:last-child { border-bottom: 0; }
.items__form .note-good { margin: 12px 0 10px; }
.groups b { font-weight: 700; }
.switch { display: block; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.switch > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.switch > summary::-webkit-details-marker { display: none; }
.switch[open] > summary { margin-bottom: 8px; }
.switch .row { flex-wrap: wrap; }
.group-message { margin: 12px 0 0; }
.group-note { margin: 12px 0 0; }

/* Version two, step 3: Stock. Its pages, their item lines, and printing a count sheet or transfer note. */
.pill { display: inline-block; padding: 1px 9px; border-radius: 11px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill--warn { background: var(--warn-fill); color: var(--warn-text); }
.pill--good { background: var(--good-fill); color: var(--accent-text); }
.pill--off { background: var(--plain-fill); color: var(--muted); }
.on-phone { display: none; }
.title-row .buttons { flex-wrap: wrap; }
.stock-filters { margin-bottom: 14px; align-items: center; }
.check--inline { margin: 0; }
.stock td .sub { text-align: right; }
.stock-note { margin: 12px 0 0; }
.stock-form .find { margin-bottom: 14px; align-items: flex-end; }
.transfer-where > div { flex: 0 1 auto; }
.transfer-where label { margin-top: 0; }
.lines td { vertical-align: middle; }
.count-lines td { padding: 5px 10px; }
.lines .input--count { width: 84px; min-height: 40px; padding: 0 10px; font-size: 16px; text-align: right; }
.lines .input--line { min-width: 220px; min-height: 40px; font-size: 16px; }
.lines td.warn { color: var(--warn-text); font-weight: 700; }
.lines tr.total td { border-bottom: 0; }
.stock-message { margin: 12px 0 0; }
.chips-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.chip-choice { margin: 0; font-weight: 400; }
.chip-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-choice .chip { min-height: 40px; cursor: pointer; }
.chip-choice input:checked + .chip { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.chip-choice input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc-head > div { flex: 1 1 150px; max-width: 240px; }
.doc-head label { margin-top: 0; }
.doc-head .input--small { width: 100%; }
.lines .input--money-box { width: 112px; min-height: 40px; padding: 0 10px; font-size: 16px; text-align: right; }
.sums { max-width: 380px; margin: 14px 0 0 auto; }
.sums .sum-total dt { color: var(--text); font-weight: 700; font-size: 18px; }
.sums .sum-total dd { font-size: 20px; }
.sums-row { align-items: end; margin-top: 4px; }
.note-box { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--good-fill); color: var(--good-text); font-size: 15px; }
.label-like { padding: 0; margin: 12px 0 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.pay-by { margin-bottom: 4px; }
.pay-form:has(input[name="method"]:not([value="cheque"]):checked) .cheque-only { display: none; }
.unpaid { margin: 4px 0 6px; }
.how ul { margin: 0; padding-left: 20px; }

/* Version two, step 7: a sales invoice on A4, which prints as it shows. */
.invoice-buttons { margin-bottom: 14px; }
.a4 { max-width: 794px; margin: 0 auto; padding: 40px 44px; background: #fff; color: #16201D; border: 1px solid var(--line); border-radius: 4px; }
.a4 h1 { font-size: 22px; }
.a4-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.a4-right { text-align: right; }
.a4 table th, .a4 table td { padding: 8px 6px; }
.a4-sums { max-width: 340px; margin: 14px 0 0 auto; }
.a4-sign { display: flex; justify-content: space-between; margin-top: 70px; }
.a4-sign div { width: 40%; padding-top: 6px; border-top: 1px solid #888; font-size: 14px; }
.a4-credit { margin-top: 30px; text-align: center; font-size: 12px; color: #555; }
@media print {
  .invoice-buttons { display: none !important; }
  .a4 { border: 0; padding: 0; max-width: none; }
}
.how li { margin: 4px 0; }
@media print {
  .bar, .subnav, .aside, .buttons, .foot, .find.choose select[data-submit], .stock-note { display: none !important; }
  .page, body { background: #fff; }
  .table-box { border-color: #888; }
}

/* The pages are under Menu wherever they don't fit across, such as a phone turned sideways or a small tablet. */
@media (max-width: 1180px) {
  .tabs, .bar__end { display: none; }
  .menu { display: block; }
  .bar { position: relative; flex-wrap: nowrap; }
}

@media (max-width: 700px) {
  .bar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .bar__name { font-size: 18px; }

  main { padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
  .signin { margin: 16px auto; }
  .signin .nsys-code { --nsys-code-gap: 5px; --nsys-code-high: 48px; --nsys-code-type: 22px; }
  .figure__value { font-size: 30px; }
  /* Columns a phone has no room for, as drawn. */
  .hn { display: none; }
  /* On a phone the item or group being changed shows above the list, so there is no scrolling down to it. */
  .items__form, .first-on-phone { order: -1; }
  .on-phone { display: inline-block; }
  .stock td .sub { display: none; }
  .lines .input--line { min-width: 104px; padding: 0 8px; }
  .lines .input--count { width: 54px; padding: 0 6px; }
  .lines .input--money-box { width: 84px; padding: 0 6px; }
  /* Buying lines stack on a phone: the item across, then its boxes, each with its name. */
  .buy-lines thead { display: none; }
  .buy-lines tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px 8px; padding: 10px; border-bottom: 1px solid var(--rule); }
  .buy-lines td { padding: 0; border: 0; }
  .buy-lines td:first-child { grid-column: 1 / -1; }
  .buy-lines td:first-child .input { width: 100%; }
  .buy-lines td .hidden { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin: 0 0 2px; font-size: 12px; }
  .buy-lines td:first-child .hidden { display: none; }
  .buy-lines .input--count, .buy-lines .input--money-box, .buy-lines td .hn .input { width: 100%; }
  .buy-lines td.hn { display: block; }
  .buy-lines td[data-amount] { align-self: end; padding-bottom: 10px; font-weight: 700; }
  .lines td, .lines th { padding-left: 6px; padding-right: 6px; }
}

/* Version two, step 9: VAT and SSCL. */
.sums [hidden] { display: none; }
.fact-check { gap: 10px; }
.fact-check svg { flex: none; width: 22px; height: 22px; padding: 2px; border-radius: 4px; background: var(--accent); color: #fff; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tile__name { color: var(--muted); font-size: 14px; }
.tile__value { font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile__sub { font-size: 13px; color: var(--muted); }
.note-warn { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--warn-fill); color: var(--text); font-size: 15px; }
.report-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 14px; }
.report-filters .grow { flex: 1; }
@media print {
  .report-filters { display: none; }
}

/* Version two, step 10: promotions. */
.promotion-items { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.promotion-items:empty { display: none; }
.chip__off { display: inline-flex; align-items: center; margin: 0 -6px 0 6px; padding: 2px; border: 0; background: none; color: inherit; cursor: pointer; }
.chip__off svg { width: 16px; height: 16px; }
.add-item-row { display: flex; gap: 8px; align-items: center; }
.add-item-row .input { flex: 1; min-width: 0; }
.promotions .on-phone { display: none; }
@media (max-width: 760px) {
  .promotions .on-phone { display: block; }
}

/* Version two, step 11: reports. */
.report-list a { display: block; padding: 9px 0; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none; }
.report-list a:last-child { border-bottom: 0; }
.report-list a b { color: var(--accent-text); }
.report-list a > span:not(.pill) { display: block; font-size: 14px; color: var(--muted); }
.report-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.report-columns { flex-basis: 100%; }
.look div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.look div:last-child { border-bottom: 0; }
.look span { display: flex; align-items: center; gap: 8px; }
.look svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.title-row .day--small { gap: 8px; }
@media print {
  .report-filters, .report-columns { display: none; }
}

.look a { color: var(--accent-text); font-weight: 600; white-space: nowrap; }