:root {
  --ink:#18313a;
  --text:#18313a;
  --muted:#61757b;
  --page:#f3f7f6;
  --paper:#fff;
  --line:#d9e4e1;
  --accent:#16776f;
  --tint:#e7f3f1;
  --danger:#a02825;
  --warning:#80510a;
  --control-border:#c6d4d1;
  --input-border:#b8cbc7;
  --hover:#edf4f2;
  --accent-hover:#105f59;
  --focus:#4c9f98;
  --table-head:#f7faf9;
  --success:#166647;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-synthesis:none;
  color:var(--text);
  background:var(--page);
  font-size:16px;
  line-height:1.5;
  color-scheme:light}
* {
  box-sizing:border-box}
body {
  margin:0}
button,input,select,textarea {
  font:inherit}
button,.button {
  min-height:44px;
  padding:10px 16px;
  border:1px solid var(--control-border);
  border-radius:8px;
  color:var(--ink);
  background:var(--paper);
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px}
button:hover,.button:hover {
  background:var(--hover)}
button:active {
  background:#e3eeec}
button:disabled {
  opacity:.5;
  cursor:not-allowed}
.primary {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)}
.primary:hover {
  background:var(--accent-hover)}
.danger {
  color:var(--danger);
  border-color:var(--danger)}
.ghost {
  background:transparent;
  border-color:transparent}
:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px}
input,select,textarea {
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--input-border);
  border-radius:7px;
  background:white;
  color:var(--text);
  max-width:100%}
label {
  display:grid;
  gap:7px;
  margin-bottom:20px;
  font-size:.875rem;
  font-weight:600}
h1 {
  font-size:2rem;
  line-height:1.2;
  letter-spacing:-.04em;
  margin:4px 0 10px}
h2 {
  line-height:1.25}
p {
  max-width:70ch}
.muted,small {
  color:var(--muted)}
.masthead {
  background:var(--paper);
  color:var(--text);
  border-bottom:1px solid var(--line);
  padding:20px max(32px,calc((100vw - 1100px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px}
.account-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px}
.settings-panel {
  max-width:480px;
  padding:24px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px}
.settings-panel h2 {
  margin-top:0}
.settings-panel input {
  width:100%}
.form-error {
  color:var(--danger)}
.form-success {
  color:var(--success)}
.brand {
  color:inherit;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:16px;
  min-width:0}
.brand small {
  display:block;
  color:var(--muted);
  font-size:13px;
  font-weight:400}
.brand-mark {
  display:grid;
  place-items:center;
  background:var(--accent);
  color:white;
  border-radius:10px;
  width:34px;
  height:34px;
  font-size:.8rem;
  font-weight:800;
  flex:none}
main {
  max-width:1160px;
  margin:auto;
  padding:30px 30px 140px}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:20px;
  margin:6px 0 28px}
.page-heading p {
  margin:0;
  color:var(--muted)}
.supplier-list {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden}
.supplier {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px;
  text-decoration:none;
  color:var(--ink);
  gap:16px;
  border-bottom:1px solid var(--line)}
.supplier:last-child {
  border:0}
.supplier:hover {
  background:var(--table-head)}
.supplier h2 {
  margin:0 0 4px;
  font-size:1.125rem}
.supplier small {
  display:block}
.pill {
  display:inline-flex;
  align-items:center;
  font-size:.875rem;
  font-weight:600;
  border-radius:5px;
  padding:4px 9px;
  background:var(--tint);
  color:var(--accent);
  white-space:nowrap}
.empty {
  padding:48px 24px;
  background:white;
  border:1px dashed #c0ccdd;
  border-radius:12px;
  text-align:center}
.toolbar {
  display:flex;
  gap:12px;
  align-items:center;
  margin:20px 0}
.toolbar label {
  flex:1;
  margin:0}
.toolbar input {
  width:100%}
.save-status {
  font-size:14px;
  font-weight:600;
  color:var(--success)}
.save-status.failed {
  color:var(--danger)}
.products {
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden}
.product {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  padding:20px 16px;
  border-bottom:1px solid var(--line);
  background:white;
  align-items:center}
.product:last-child {
  border-bottom:0}
.product.selected {
  background:#edf7f5;
  box-shadow:inset 3px 0 var(--accent)}
.product h2 {
  font-size:1rem;
  margin:0 0 4px;
  overflow-wrap:anywhere}
.product p {
  font-size:14px;
  margin:4px 0;
  color:var(--muted)}
.product-controls {
  display:flex;
  gap:12px;
  align-items:center}
.product-controls select {
  max-width:130px}
.stepper {
  display:flex;
  align-items:center;
  gap:8px}
.stepper button {
  padding:6px;
  width:44px;
  font-size:22px;
  touch-action:manipulation}
.stepper input {
  width:66px;
  text-align:center;
  padding:8px 2px;
  font-variant-numeric:tabular-nums;
  appearance:textfield}
.stepper input::-webkit-inner-spin-button {
  appearance:none}
.unit-label {
  min-width:44px;
  text-align:center}
.bottom-bar {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:var(--paper);
  color:var(--text);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px max(30px,calc((100vw - 1100px)/2)) calc(16px + env(safe-area-inset-bottom));
  z-index:2}
.bottom-bar small {
  color:var(--muted)}
.bottom-bar strong {
  display:block}
.notice:not(:empty) {
  padding:14px 20px;
  background:#e7f3f1;
  border-radius:8px;
  margin-bottom:20px;
  overflow-wrap:anywhere}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:20px 0}
.table-wrap {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:auto}
table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed}
th,td {
  text-align:left;
  padding:16px;
  vertical-align:top;
  overflow-wrap:anywhere;
  border-bottom:1px solid var(--line)}
th {
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  background:var(--table-head)}
td {
  font-size:.875rem}
tbody tr:last-child>td {
  border-bottom:0}
.num {
  text-align:right;
  font-variant-numeric:tabular-nums}
.review-summary {
  display:flex;
  justify-content:flex-end;
  padding:20px;
  background:var(--table-head)}
.review-summary strong {
  font-size:24px}
.review-summary p {
  margin:0}
.order-note {
  margin-top:16px}
.order-note textarea {
  width:100%;
  min-height:96px;
  margin:0;
  resize:vertical}
.order-note select {
  width:100%;
  margin-top:10px}
.review-note {
  max-width:none;
  margin:16px 0;
  padding:14px 16px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:white;
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:8px}
.note-compare {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px}
.note-compare p {
  min-height:70px;
  margin:6px 0 0;
  padding:10px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--table-head);
  border:1px solid var(--line);
  border-radius:7px}
.issue {
  padding:18px;
  background:#fff1d8;
  border:1px solid #d5b270;
  margin:12px 0;
  border-radius:8px}
.issue h3 {
  margin:0 0 8px}
.issue select {
  margin:8px 8px 8px 0}
.results {
  padding:0;
  list-style:none}
.results li {
  padding:12px;
  border-bottom:1px solid var(--line)}
dialog {
  border:0;
  border-radius:12px;
  padding:28px;
  width:min(600px,calc(100% - 32px));
  max-height:85vh;
  overflow:auto;
  border:1px solid var(--line);
  box-shadow:0 16px 70px #18283b26}
dialog::backdrop {
  background:#18283b99}
dialog h2 {
  margin-top:0}
dialog input {
  width:100%}
#login-error,#conflict-error {
  color:var(--danger)}
.login-panel {
  max-width:430px;
  margin:8vh auto;
  background:white;
  padding:34px;
  border:1px solid var(--line);
  border-radius:16px}
.login-panel .primary {
  width:100%}
.login-panel input {
  width:100%}
.skip {
  position:absolute;
  left:10px;
  top:-100px}
.skip:focus {
  top:10px;
  background:white;
  padding:12px;
  z-index:10}
textarea {
  width:100%;
  min-height:180px}
.back {
  margin-bottom:18px}
.hide {
  display:none!important}
@media(max-width:620px) {
  input,select,textarea {
  font-size:16px}
  .note-compare {
  grid-template-columns:1fr}
  main {
  padding:20px 16px 140px}
h1 {
  font-size:1.75rem}
.login-panel {
  padding:24px;
  margin:6vh auto}
.page-heading {
  flex-direction:column;
  gap:16px}
.page-heading button {
  align-self:stretch}
.supplier {
  padding:20px 16px}
.product {
  grid-template-columns:1fr;
  padding:16px}
.product-controls {
  justify-content:space-between}
.stepper input {
  width:72px}
th,td {
  padding:10px 6px;
  font-size:13px}
.review-table.with-prices th,.review-table.with-prices td {
  font-size:12px;
  padding:10px 3px}
.review-table th:first-child {
  width:28%}
.review-table:not(.with-prices) th:first-child {
  width:42%}
.masthead {
  padding:16px;
  flex-wrap:wrap}
.bottom-bar {
  padding-left:16px;
  padding-right:16px}
.toolbar {
  flex-wrap:wrap}
.toolbar label {
  flex-basis:100%}
}
@media(prefers-reduced-motion:no-preference) {
  button,a {
  transition:background-color .15s}
}
[hidden] {
  display:none!important}

html {
  scroll-padding-bottom:130px}
main {
  padding-bottom:140px}
.review-table th:nth-child(1) {
  width:70%}
.review-table th:nth-child(2) {
  width:30%}
.review-table.with-prices th:nth-child(1) {
  width:42%}
.review-table.with-prices th:nth-child(2) {
  width:20%}
.review-table.with-prices th:nth-child(3) {
  width:18%}
.review-table.with-prices th:nth-child(4) {
  width:20%}
.review-table th {
  word-break:normal}
.review-product strong,.review-product small {
  display:block}
.review-product small {
  margin-top:3px}
.review-order {
  white-space:nowrap}
@media(max-width:620px) {
  html {
  scroll-padding-bottom:100px}
main {
  padding:16px 12px 104px}
  .page-heading:has(#clear) {
  flex-direction:row;
  margin-bottom:14px}
.page-heading #clear {
  align-self:flex-start}
.page-heading:has(#clear) p {
  font-size:13px}
.toolbar {
  gap:8px;
  margin:10px 0 12px}
.product {
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  gap:4px 8px;
  padding:10px 12px}
.product>div:first-child {
  display:contents}
.product h2 {
  grid-column:1/-1;
  font-size:.9375rem;
  line-height:1.25;
  margin-bottom:2px}
.product p {
  grid-column:1;
  font-size:12px;
  line-height:1.3;
  margin:2px 0}
.product-controls {
  grid-column:2;
  grid-row:2;
  gap:8px;
  justify-content:flex-end;
  min-width:0}
.product-controls select {
  max-width:96px;
  padding:8px 6px}
.unit-label {
  min-width:38px;
  font-size:13px}
.stepper {
  gap:8px}
.stepper button {
  min-height:44px;
  width:44px;
  padding:0}
.stepper input {
  min-height:44px;
  width:54px}
.bottom-bar {
  gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.bottom-bar strong {
  font-size:14px;
  line-height:1.2}
.bottom-bar small {
  font-size:12px;
  line-height:1.2}
.bottom-bar .primary {
  flex:none;
  padding:8px 12px}
.product-controls {
  scroll-margin-bottom:100px}
.review-table th:first-child {
  width:68%}
.review-table th:nth-child(2) {
  width:32%}
.review-table.with-prices th:nth-child(1) {
  width:42%}
.review-table.with-prices th:nth-child(2) {
  width:20%}
.review-table.with-prices th:nth-child(3) {
  width:18%}
.review-table.with-prices th:nth-child(4) {
  width:20%}
.review-table.with-prices th,.review-table.with-prices td {
  padding:10px 5px}
}
@media(max-width:350px) {
  .product {
  grid-template-columns:1fr}
  .product p {
  grid-column:1}
  .product-controls {
  grid-column:1;
  grid-row:3;
  justify-content:space-between}
}