/*
  Theme 7 · Turquoise & Hot Pink. Components follow ~/TheConsignmentRepublic/prototype/tcr-prototype.html.
  Differences from the prototype are for readability: --pink-btn (white text on the brand pink is
  only 3.8:1) and --turq-text for links.
*/

@font-face {
  font-family: "Inter";
  src: url("../lib/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../lib/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../lib/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --slate: #16232b;
  --slate-2: #243541;
  --turq: #1fbfb0;
  --turq-d: #10897e;
  --turq-text: #0e7a70;
  --turq-deep: #0e5f58;
  --turq-l: #d6efec;
  --pink: #e8447f;
  --pink-btn: #d6336f;
  --pink-d: #b02458;
  --pink-l: #fce1eb;
  --paper: #fbf9f6;
  --muted: #66757c;
  --line: #e4e9e9;
  --line-2: #f0f4f4;
  --amber: #b86e0e;
  --amber-l: #fbeeda;
  --error: #b3261e;
  --error-l: #fbe9e7;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 19px;
  margin-top: 2rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--turq-text);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--turq-deep);
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.muted,
.dim {
  color: var(--muted);
}

/* ---------- header ---------- */

.top {
  background: var(--slate);
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand .flag {
  height: 38px;
  width: auto;
  flex: none;
}

.wm {
  line-height: 1;
}

.wmThe {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--turq);
  margin-bottom: 3px;
}

.wmMain {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wmMain em {
  font-style: normal;
  color: var(--pink);
}

.shopChip {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12.5px;
  font-weight: 600;
  color: #9db2ba;
}

.usermenu {
  position: relative;
  margin-left: auto;
}

.usermenu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 10px;
  cursor: pointer;
  color: #9db2ba;
}

.usermenu summary::-webkit-details-marker {
  display: none;
}

.usermenu summary:hover,
.usermenu[open] summary {
  background: rgba(255, 255, 255, 0.08);
}

.usermenu .caret {
  transition: transform 0.15s;
}

.usermenu[open] .caret {
  transform: rotate(180deg);
}

.usermenu .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pink-btn);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whoText {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.usermenu .t {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--paper);
}

.usermenu .s {
  font-size: 11px;
  color: #8fa3aa;
}

.usermenu .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(22, 35, 43, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.menu-head {
  display: flex;
  flex-direction: column;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--slate);
  overflow-wrap: anywhere;
}

.usermenu .menu a,
.usermenu .menu .logout {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: none;
  color: var(--slate);
  text-decoration: none;
  cursor: pointer;
}

.usermenu .menu a:hover,
.usermenu .menu .logout:hover {
  background: var(--turq-l);
}

.usermenu .menu form {
  margin: 0;
}

.usermenu .menu .logout {
  color: var(--pink-d);
  font-weight: 600;
}

/* ---------- tabs ---------- */

.subs {
  background: var(--slate-2);
  padding: 0 22px;
  display: flex;
  gap: 2px;
  min-height: 44px;
  align-items: stretch;
  overflow-x: auto;
}

.subs a {
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  color: #9db2ba;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.subs a:hover {
  color: var(--paper);
}

.subs a.on {
  color: var(--turq);
  font-weight: 600;
}

.subs a.on::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  background: var(--turq);
  border-radius: 3px 3px 0 0;
}

.subs .gear {
  margin-left: auto;
  gap: 6px;
}

.subs .cnt {
  background: rgba(255, 255, 255, 0.14);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
}

.subs a.on .cnt {
  background: var(--turq);
  color: var(--slate);
}

.subnav {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.subnav a {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  text-decoration: none;
}

.subnav a:hover {
  background: var(--turq-l);
  color: var(--slate);
}

.subnav a.on {
  background: var(--slate);
  color: var(--paper);
  box-shadow: none;
  font-weight: 600;
}

/* ---------- page ---------- */

.page,
.container {
  flex: 1;
  width: 100%;
  min-width: 0; /* let wide tables scroll inside their panel instead of widening the page */
  margin: 0 auto;
}

.page {
  max-width: 1300px;
  padding: 26px 30px 40px;
}

.container {
  max-width: 1040px;
  padding: 2rem 1.5rem 3rem;
}

.site-footer {
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}
.site-version { white-space: nowrap; }
.phead-cancel { margin: 0 0 0 auto; align-self: center; }
.phead-cancel .btn:hover { border-color: var(--error); color: var(--error); }

.phead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.phead h1 {
  margin: 0;
}

.phead .sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

.acts {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.narrow {
  max-width: 30rem;
}

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

/* Every button is one height, the Register's (--btn-h): big or small, pink or outlined, a link or a button. */
:root {
  --btn-h: 2.6rem;
}

.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: var(--btn-h);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 0 15px;
  border-radius: 9px;
  border: 0;
  /* A plain button is outlined, never black: pink is the one filled colour (.btn.pink). */
  background: #fff;
  color: var(--slate);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  text-decoration: none;
}

.btn:hover,
.button:hover {
  background: var(--turq-l);
  color: var(--slate);
}

.btn.pink,
.button.primary {
  background: var(--pink-btn);
  color: #fff;
}

.btn.pink:hover,
.button.primary:hover {
  background: var(--pink-d);
}

.btn.ghost {
  background: #fff;
  color: var(--slate);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn.ghost:hover {
  background: var(--turq-l);
}

.btn[hidden],
.button[hidden] {
  display: none;
}

/* "Small" only takes less room across, never a different height. */
.btn.sm {
  padding: 0 12px;
}

form .button,
form .btn {
  margin-top: 0.9rem;
  align-self: flex-start;
}

.link-button {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--turq-text);
  cursor: pointer;
}

/* ---------- stat strip ---------- */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.st {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}

.st .k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.st .v {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.st .d {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.st.flag {
  border-color: var(--pink);
  background: linear-gradient(#fff, #fef7f9);
}

.st.flag .v,
.st.flag .d {
  color: var(--pink-d);
}

.st.flag .d {
  font-weight: 600;
}

/* ---------- search + filter chips ---------- */

.bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.search {
  flex: 1 1 320px;
  min-width: 220px;
  position: relative;
}

.search input {
  width: 100%;
  padding: 10px 13px 10px 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 13.5px;
}

.search svg {
  position: absolute;
  left: 12px;
  top: 11px;
  opacity: 0.4;
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.chip:hover {
  background: var(--turq-l);
  color: var(--slate);
}

.chip.on {
  background: var(--slate);
  color: var(--paper);
  box-shadow: none;
  font-weight: 600;
}

.chip.warn.on {
  background: var(--pink-btn);
  color: #fff;
}

/* ---------- panels + tables ---------- */

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.table-wrap > .panel,
.panel.scroll {
  overflow-x: auto;
  position: relative; /* keeps absolutely positioned bits (e.g. .sr-only) inside the scroll area */
}

table.table,
.panel table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.table-wrap > table.table {
  border: 1px solid var(--line);
  border-radius: 12px;
}

.table th,
.panel th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 16px;
  background: #fafcfc;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td,
.panel td {
  padding: 12px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

.table tr:last-child td,
.panel tr:last-child td {
  border-bottom: 0;
}

th.r,
td.r {
  text-align: right;
}

th.c,
td.c {
  text-align: center;
}

/* ---------- small things ---------- */

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--pink-l);
  color: var(--pink-d);
}

.pill.aqua,
.pill.teal {
  background: var(--turq-l);
  color: var(--turq-deep);
}

.pill.amber {
  background: var(--amber-l);
  color: #8a5a10;
}

.pill.grey {
  background: #eef1f1;
  color: var(--muted);
}

/* "Changed by the artist" and the like: stands out (white on the button pink, for contrast) */
.pill.pink {
  background: var(--pink-btn);
  color: #fff;
}

/* A count on a tab, e.g. Deliveries 3 */
.subs .count {
  display: inline-block;
  min-width: 18px;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--pink-btn);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  color: var(--turq-text);
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.03em;
  box-shadow: inset 0 0 0 1px #c9e4e1;
}

.stock {
  font-weight: 600;
}

.stock.low {
  color: var(--amber);
}

.stock.out {
  color: var(--pink-d);
}

.gets {
  color: var(--turq-text);
  font-weight: 600;
}

.card-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.card-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.card-list a {
  font-weight: 600;
}

/* "coming next" placeholder */
.holder {
  background: #fff;
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 64px 40px;
  text-align: center;
}

.holder .ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--turq-l);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.holder h3 {
  font-size: 20px;
  margin: 0 0 7px;
}

.holder p {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 auto;
  max-width: 44ch;
  line-height: 1.6;
}

.holder .lst {
  text-align: left;
  max-width: 420px;
  margin: 20px auto 0;
  font-size: 13px;
  color: var(--muted);
}

.holder .lst div {
  padding: 7px 0;
  border-bottom: 1px solid var(--line-2);
}

.holder .lst div:last-child {
  border-bottom: 0;
}

/* ---------- forms ---------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

section.narrow > form.stack,
form.stack.narrow,
form.stack.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
  margin: 0 0 0.75rem;
}

legend {
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 0.35rem;
}

label {
  font-weight: 600;
  font-size: 13px;
  margin-top: 0.6rem;
}

label.checkbox {
  font-weight: 400;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  font: inherit;
  font-size: 14px;
  color: var(--slate);
  padding: 0.6rem 0.75rem;
  border: 1px solid #cfd8d8;
  border-radius: 9px;
  background: #fff;
  width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--turq-text);
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--turq);
  box-shadow: 0 0 0 3px var(--turq-l);
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--turq);
  outline-offset: 2px;
}

input.input-validation-error,
select.input-validation-error {
  border-color: var(--error);
}

.hint {
  font-size: 12.5px;
  color: var(--muted);
}

.error,
.field-validation-error {
  color: var(--error);
  font-size: 13px;
}

.validation-summary-errors {
  background: var(--error-l);
  border-radius: 9px;
  padding: 0.75rem 1rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.2rem;
}

.validation-summary-valid {
  display: none;
}

.notice {
  padding: 0.75rem 1rem;
  border-radius: 9px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-weight: 500;
}

/* ---------- small screens ---------- */

@media (max-width: 720px) {
  .top {
    padding: 10px 16px;
    gap: 10px;
  }

  .brand {
    gap: 9px;
  }

  .brand .flag {
    height: 30px;
  }

  .wmMain {
    font-size: 12.5px;
    letter-spacing: 0.04em;
  }

  .shopChip {
    order: 3;
    width: 100%;
    border-left: 0;
    padding-left: 0;
  }

  /* Keep the name when there's no initials circle to stand in for it (pages outside a shop). */
  .usermenu summary:has(.av) .whoText {
    display: none;
  }


  .subs {
    padding: 0 8px;
  }

  .subs a {
    padding: 0 10px;
  }

  .page,
  .container {
    padding: 20px 16px 32px;
  }

  .holder {
    padding: 40px 20px;
  }

  .table {
    min-width: 34rem;
  }
}

/* ---------- settings ---------- */

form.policies {
  max-width: 40rem;
}

/* Policies has the discount explainer with a sample receipt beside it. */
form.policies.wide {
  max-width: 58rem;
}

input.short {
  max-width: 8rem;
}

label.choice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-weight: 400;
  padding: 0.7rem 0.85rem;
  margin-top: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
}

label.choice:hover {
  background: #fafdfd;
}

label.choice:has(input:checked) {
  border-color: var(--turq);
  background: #f3fbfa;
}

label.choice input {
  margin-top: 0.2rem;
  flex: none;
}

label.choice > span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

label.choice strong {
  font-weight: 600;
}

/* ---------- artists ---------- */

.crumb {
  margin: -6px 0 12px;
  font-size: 13px;
}

.acards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.acard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  color: var(--slate);
  text-decoration: none;
}

.acard:hover {
  border-color: var(--turq);
  color: var(--slate);
  box-shadow: 0 2px 10px rgba(22, 35, 43, 0.06);
}

.acard.pending {
  border-color: #f0d3a3;
  background: #fffcf6;
}

.acard.ended {
  opacity: 0.7;
}

.acard > .pill {
  align-self: flex-start;
}

.acard-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.av {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--turq);
  color: var(--slate);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.av.pending {
  background: #d98c1f;
  color: #fff;
}

.av.ended {
  background: #b9c4c4;
  color: #fff;
}

.av.big {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 17px;
}

.acard-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.acard-name {
  font-weight: 600;
  font-size: 15px;
}

.acard-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acard-rows {
  margin: 0;
  font-size: 13px;
}

.acard-rows > div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-top: 1px solid var(--line-2);
}

.acard-rows dt {
  color: var(--muted);
}

.acard-rows dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.phead-who {
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-title {
  font-size: 17px;
  margin: 0 0 10px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.about {
  padding: 18px;
}

.about dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 12px;
  font-size: 13px;
}

.about dt {
  color: var(--muted);
}

.about dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.about h3 {
  font-size: 14px;
  margin: 14px 0 4px;
}

.about p {
  font-size: 13px;
  color: var(--slate-2);
  white-space: pre-line;
}

.holder.small {
  padding: 28px 20px;
}

.vcount {
  display: inline-block;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: 6px;
}

/* ---------- forms with sections ---------- */

form.artist-form {
  max-width: 46rem;
}

.sect {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 2px;
}

.sect:first-of-type {
  margin-top: 0;
}

.f {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.grid2.wide-first {
  grid-template-columns: 1fr 10rem;
}

.deal {
  display: grid;
  grid-template-columns: 12rem 1fr 1fr;
  gap: 0 16px;
  background: #f7fbfb;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 14px 14px;
}

.form-actions {
  display: flex;
  gap: 9px;
  margin-top: 1rem;
}

.form-actions .btn {
  margin-top: 0;
}

@media (max-width: 720px) {
  .two-col,
  .grid2,
  .grid2.wide-first,
  .deal {
    grid-template-columns: 1fr;
  }
}

/* The general input rule above is more specific than .search input; restore room for the icon. */
.bar .search input[type="search"] {
  padding: 10px 13px 10px 36px;
  border-color: var(--line);
  font-size: 13.5px;
}

fieldset.plain {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

fieldset.plain:disabled input,
fieldset.plain:disabled select,
fieldset.plain:disabled textarea {
  background: #f5f7f7;
  color: var(--muted);
}

/* ---------- take in / edit a piece ---------- */

form.product-form {
  max-width: 60rem;
}

.ownerBox {
  background: #f7fbfb;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 14px 14px;
  margin-bottom: 6px;
}

.ownerBox .label {
  font-weight: 600;
  font-size: 13px;
  margin-top: 0.6rem;
}

.readOut {
  padding: 0.6rem 0;
  font-weight: 500;
}

.readOut a {
  font-size: 12.5px;
  margin-left: 6px;
}

.calc {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
  color: var(--turq-deep);
}

.grid3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0 16px;
}

.vtable td {
  padding: 8px 10px;
  vertical-align: top;
}

.vtable input {
  padding: 0.45rem 0.55rem !important;
}

.vtable input.r {
  text-align: right;
}

.vtable input.c {
  text-align: center;
}

.vtable td.gets {
  padding-top: 16px;
}

.code-input {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--turq-text) !important;
  letter-spacing: 0.03em;
}

.del {
  font: inherit;
  font-size: 18px;
  line-height: 1;
  width: 30px;
  height: 30px;
  margin-top: 4px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.del:hover {
  background: var(--pink-l);
  color: var(--pink-d);
}

.addVar {
  align-self: flex-start;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--turq-text);
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
}

.short-field {
  max-width: 30rem;
}

.btn.danger {
  margin-left: auto;
  color: var(--pink-d);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .grid3 {
    grid-template-columns: 1fr;
  }
}

/* ---------- inventory table ---------- */

.expandAll {
  margin-left: auto;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--turq-text);
  background: none;
  border: 0;
  cursor: pointer;
}

table.inv {
  min-width: 900px;
}

table.inv tr.item > td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-2);
}

table.inv tbody.grp.open tr.item > td {
  background: #f7fbfb;
  border-bottom-color: transparent;
}

table.inv tr.item.needs > td {
  background: #fef8fa;
}

table.inv tr.varRow {
  display: none;
}

table.inv tbody.open tr.varRow {
  display: table-row;
}

table.inv tr.varRow > td {
  padding: 9px 16px;
  background: #f7fbfb;
  border-bottom: 1px solid #eaf2f2;
  font-size: 13px;
}

.twist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

span.twist {
  cursor: default;
}

.chev {
  width: 16px;
  flex: none;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  transition: transform 0.15s;
}

.chev.hide {
  visibility: hidden;
}

tbody.open .chev {
  transform: rotate(90deg);
  color: var(--turq-text);
}

.iname {
  font-weight: 600;
}

.imeta {
  font-size: 12px;
  color: var(--muted);
}

.vname {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 25px;
}

a.artist {
  color: var(--slate);
  font-weight: 500;
  text-decoration: none;
}

a.artist:hover {
  text-decoration: underline;
}

.needsBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink-d);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
}

.needsBtn::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

a.edit {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
}

a.edit:hover {
  background: var(--turq-l);
  color: var(--slate);
}

.empty-row {
  padding: 28px !important;
}

.foot {
  padding: 11px 16px;
  background: #fafcfc;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap;
}

.pager {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.pager a {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  text-decoration: none;
  font-weight: 600;
}

.pager a.on {
  background: var(--slate);
  color: var(--paper);
}

/* ---------- import ---------- */

.import-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

.dl-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
}

.guide dl {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 8px 14px;
  margin: 0;
  font-size: 13px;
}

.guide dt {
  font-weight: 600;
}

.guide dd {
  margin: 0;
  color: var(--slate-2);
}

@media (max-width: 900px) {
  .import-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.upload h2 {
  font-size: 19px;
  margin: 4px 0 0;
}

.import-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.import-card .ci {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--turq-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.import-card h2 {
  margin: 4px 0 0;
}

.import-card p {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0;
}

.upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}

.upload input[type="file"] {
  font: inherit;
  font-size: 13px;
}

.upload .btn {
  margin-top: 0;
  align-self: flex-start;
}

.noteRow {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-size: 13.5px;
}

.error-box {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--error-l);
  color: var(--error);
  margin-bottom: 16px;
}

.preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.strip.compact {
  grid-template-columns: repeat(auto-fit, 110px);
  margin: 0;
}

.strip.compact .st {
  padding: 10px 14px;
}

.strip.compact .v {
  font-size: 21px;
  margin-top: 2px;
}

/* For your accountant (Sales → For your accountant) */
.accountant-presets {
  margin: 0 0 10px;
}
.accountant-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 6px;
}
.accountant-downloads .btn {
  margin-top: 0;
}
table.accountant-totals tfoot th {
  border-top: 2px solid var(--line);
}
.accountant-notes {
  margin: 20px 0;
  padding: 12px 16px;
}
.accountant-notes summary {
  cursor: pointer;
}
.accountant-notes dl {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: 6px 16px;
  margin: 10px 0;
}
.accountant-notes dt {
  font-weight: 700;
}
.accountant-notes dd {
  margin: 0;
  color: var(--slate);
}
@media (max-width: 640px) {
  .accountant-notes dl {
    grid-template-columns: 1fr;
  }
  .accountant-notes dd {
    margin-bottom: 6px;
  }
}

.confirm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-weight: 500;
  margin-bottom: 16px;
}

.confirm-bar span {
  flex: 1;
}

.confirm-bar .btn {
  margin-top: 0;
}

table.preview tr.bad td {
  background: #fef8fa;
}

table.preview td {
  vertical-align: top;
}

/* ---------- register ---------- */

.register {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 20px;
  align-items: start;
}

.reg-scan {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.reg-scan .btn {
  margin-top: 0;
  align-self: center;
  padding: 0 22px;
}

input.code-entry {
  font-family: var(--font-mono);
  font-size: 18px !important;
  letter-spacing: 0.04em;
  padding: 0.8rem 1rem !important;
}

.reg-msg {
  margin-bottom: 12px;
}

.reg-results td {
  padding: 10px 14px;
}

.reg-results form,
.ticket form,
.ticket-head form {
  margin: 0;
}

.small {
  font-size: 12px;
}

.reg-ticket {
  padding: 16px 18px;
  position: sticky;
  top: 12px;
}

.ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ticket-empty {
  padding: 18px 0;
}

table.ticket td {
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

td.qty {
  white-space: nowrap;
}

td.qty form {
  display: inline;
}

td.qty span {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  font-weight: 600;
}

.qbtn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.qbtn:hover {
  background: var(--turq-l);
}

.discount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}

.discount-row label {
  margin: 0;
}

.discount-row input {
  max-width: 8rem;
}

.discount-row select {
  width: auto;
}

dl.totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  margin: 12px 0;
  font-size: 14px;
}

dl.totals dd {
  margin: 0;
  text-align: right;
}

dl.totals .grand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.tender {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tender-row {
  display: flex;
  gap: 8px;
}

.tender-row .btn {
  margin-top: 0;
  white-space: nowrap;
}

.quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.change-due {
  min-height: 1.6em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
}

.change-due strong {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--turq-deep);
}

.change-banner {
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-size: 18px;
  margin-bottom: 16px;
}

.change-banner strong {
  font-family: var(--font-display);
  font-size: 26px;
  margin-left: 8px;
}

.receipt {
  max-width: 30rem;
  padding: 18px;
}

.receipt-shop {
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .register {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-ticket {
    position: static;
  }
}

@media print {
  .top, .subs, .acts, .site-footer, .change-banner {
    display: none !important;
  }

  .receipt {
    border: 0;
    box-shadow: none;
  }
}

/* ---------- statements ---------- */

.month-panel {
  padding: 16px 18px;
}

.month-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.month-head .section-title {
  margin: 0;
  min-width: 11rem;
  text-align: center;
}

.month-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.month-actions .btn {
  margin-top: 0;
}

.statement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}

.statement {
  padding: 22px;
}

.statement header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}

.statement h1 {
  margin: 4px 0;
}

.statement .big {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--turq-deep);
}

.statement-total {
  text-align: right;
}

.statement tfoot td {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.paid-stamp {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-weight: 600;
}

.statement-actions {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.statement-actions form {
  margin: 0;
}

.statement-actions .btn {
  margin-top: 0;
  width: 100%;
}

@media (max-width: 900px) {
  .statement-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .no-print {
    display: none !important;
  }

  .statement-layout {
    display: block;
  }

  .statement {
    border: 0;
  }
}

/* register: suggestions while typing */

.reg-find {
  position: relative;
}

.suggest {
  list-style: none;
  margin: -4px 0 12px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(22, 35, 43, 0.1);
}

.suggest form {
  margin: 0;
}

.suggest button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 7.5rem;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--slate);
  cursor: pointer;
}

.suggest button:hover:not(:disabled),
.suggest li.exact button {
  background: var(--turq-l);
}

.suggest button:disabled {
  cursor: default;
  opacity: 0.6;
}

.suggest .s-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest .s-stock {
  text-align: right;
}

.suggest-none {
  margin: -4px 0 12px;
  font-size: 13px;
}

/* ---------- receipts on screen ---------- */

.receipt-screen {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(22, 35, 43, 0.08);
  padding: 22px 20px;
  max-width: 360px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 13px;
  color: #111;
}

.receipt-screen.paper-roll58 {
  max-width: 280px;
  font-size: 11.5px;
}

.receipt-screen.paper-page {
  max-width: 460px;
}

.rc-shop {
  font-size: 1.3em;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rc-sub, .rc-ref, .rc-date, .rc-returns, .rc-foot, .rc-taxno {
  text-align: center;
}

.rc-sub { margin-top: 2px; }
.rc-ref { margin-top: 10px; }
.rc-date { margin-bottom: 6px; color: #444; }

.rc hr {
  border: 0;
  border-top: 2px dashed #999;
  margin: 8px 0;
}

.rc table {
  width: 100%;
  border-collapse: collapse;
}

.rc td {
  padding: 2px 0;
  vertical-align: top;
}

.rc-code { white-space: nowrap; padding-right: 8px !important; width: 1%; }
.rc-name { text-transform: uppercase; font-size: 0.9em; word-break: break-word; }
.rc-qty { font-size: 0.85em; text-transform: none; color: #444; }
.rc-amt { text-align: right; white-space: nowrap; padding-left: 8px !important; }
.rc-grand td { font-size: 1.2em; padding-top: 6px; border-top: 2px solid #111; }
.rc-note { margin-top: 4px; }
.rc-returns { margin-top: 8px; }
.rc-foot { margin-top: 4px; line-height: 1.45; }
.rc-taxno { margin-top: 6px; font-size: 0.9em; }

.done-card {
  padding: 18px;
  margin-bottom: 14px;
  border-color: var(--turq);
  background: #f3fbfa;
}

.done-title {
  font-weight: 700;
  color: var(--turq-deep);
}

.done-change {
  font-size: 18px;
  margin: 10px 0;
}

.done-change strong {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--turq-deep);
  margin-left: 6px;
}

.done-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.done-actions .btn {
  margin-top: 0;
}

/* ---------- receipt settings ---------- */

.receipt-settings {
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.receipt-preview-wrap {
  position: sticky;
  top: 12px;
}

.receipt-preview-wrap .section-title {
  margin-bottom: 2px;
}

@media (max-width: 900px) {
  .receipt-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .receipt-preview-wrap {
    position: static;
  }
}

/* ---------- sales ---------- */

.sales-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.sale-detail {
  position: sticky;
  top: 12px;
}

.sale-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sale-detail-head .btn {
  margin-top: 0;
}

.sales-table tr.sale-row {
  cursor: pointer;
}

.sales-table tr.sale-row:hover td {
  background: #fafdfd;
}

.sales-table tr.sale-row.on td {
  background: var(--turq-l);
}

.st .small-v {
  font-size: 20px;
}

@media (max-width: 900px) {
  .sales-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-detail {
    position: static;
  }
}

/* Receipt settings preview: which lines come from the boxes */
.rc .rc-edit { color: #c62828; }
.rc .rc-example { color: #c62828; opacity: .45; font-style: italic; }
.preview-key .key-edit { color: #c62828; font-weight: 600; }
.preview-key .key-example { color: #c62828; opacity: .55; font-style: italic; font-weight: 600; }

/* ---------- card on a separate terminal ---------- */

.pay-card {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.card-go {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--turq-d);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(16, 137, 126, .25);
  transition: background .15s, transform .05s;
}

.card-go:hover {
  background: var(--turq-deep);
}

.card-go:active {
  transform: translateY(1px);
}

.card-go:focus-visible {
  outline: 3px solid var(--turq);
  outline-offset: 2px;
}

.card-go-icon {
  flex: none;
}

.card-go-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.25;
}

.card-go-text strong {
  font-size: 16px;
}

.card-go-text span {
  font-size: 12px;
  opacity: .85;
}

.card-go-amount {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.or-cash {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.or-cash::before, .or-cash::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.tender.after-card {
  padding-top: 0;
  border-top: 0;
}

.card-pay {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.card-pay-title {
  font-weight: 700;
}

.card-pay-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.card-pay-box {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--pink-l);
  border: 2px solid var(--pink);
  text-align: center;
}

.card-pay-box .k {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pink-d);
}

.card-pay-box .v {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--pink-d);
  line-height: 1.2;
}

.card-pay-box.ref {
  background: var(--turq-l);
  border-color: var(--turq);
}

.card-pay-box.ref .k, .card-pay-box.ref .v {
  color: var(--turq-deep);
}

.card-pay-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.card-pay-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.card-pay-actions .btn {
  margin-top: 0;
}

label.choice.disabled {
  opacity: .55;
  cursor: not-allowed;
}

label.choice.disabled:hover {
  background: none;
}

/* Keep receipt numbers, times, amounts and names on one line; only the items wrap. */
.sales-table th, .sales-table td {
  white-space: nowrap;
}

.sales-table td:nth-child(3) {
  white-space: normal;
}

.cash-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* Settings > Policies: where a discount shows on the receipt */
.discount-explain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  margin: 6px 0 10px;
}

.discount-how ol {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.discount-how .key-edit {
  color: #c62828;
  font-weight: 600;
  white-space: nowrap;
}

.discount-sample {
  max-width: 300px;
}

.rc .rc-mark td {
  font-weight: 700;
  background: #fdecea;
}

label.choice .example {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--turq-deep);
}

@media (max-width: 760px) {
  .discount-explain {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Settings > Policies: a mock of the register's sale panel, with what the settings change boxed in red */
.reg-mock {
  padding: 14px 16px;
  font-size: 14px;
}

.reg-mock-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.preview-mark {
  margin: 10px -6px 0;
  padding: 2px 6px 6px;
  border: 2px solid #c62828;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}

.preview-mark .discount-row {
  margin: 4px 0 0;
}

.preview-mark input:disabled {
  background: #fff;
  color: var(--slate);
  opacity: 1;
}

.preview-empty {
  padding: 8px 2px 2px;
  color: #c62828;
  font-size: 13px;
  font-style: italic;
}

.hint.indent {
  margin: -4px 0 4px 28px;
}

.discount-row .label {
  font-weight: 600;
  font-size: 13px;
}

/* ---------- email receipt ---------- */

.email-receipt {
  margin: 12px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.email-receipt-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Email | Text tabs on the receipt box: the checked tab's panel shows (UAT 65). */
.send-tabs { margin-bottom: 10px; }
.email-receipt:has(.send-tabs input[value="email"]:checked) .send-panel[data-panel="text"],
.email-receipt:has(.send-tabs input[value="text"]:checked) .send-panel[data-panel="email"] { display: none; }
.email-receipt-form a.btn { white-space: nowrap; }
.text-preview {
  margin: 10px 0 6px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.text-bubble {
  background: #e9e9eb;
  color: var(--slate);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.text-copy { margin: 6px 0 0; }
.text-how { margin-top: 8px; font-size: 13px; }
.text-how summary { cursor: pointer; color: var(--turq-text); font-weight: 600; }
.text-how ul { margin: 6px 0 0; padding-left: 18px; }
.text-how li { margin: 3px 0; }

.email-receipt-form label {
  margin: 0;
  font-size: 13px;
}

.email-history {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px;
}

.email-history li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}

.email-history li.sent { color: var(--turq-deep); }
.email-history li.failed { color: var(--error); }
.email-history li.pending { color: var(--muted); }

.email-history form.inline {
  display: inline;
}

.sale-detail .email-receipt {
  margin: 0 0 12px;
  border-top: 0;
  padding-top: 0;
}

/* Settings > Receipt: how an emailed receipt appears in an inbox */
.inbox-title {
  margin-top: 18px;
}

.inbox-preview {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  font-size: 13px;
}

.inbox-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  padding: 4px 0;
  overflow-wrap: anywhere;
}

.inbox-row + .inbox-row {
  border-top: 1px solid var(--line-2);
}

.inbox-row .k {
  color: var(--muted);
}

.inbox-preview .rc-edit-ui {
  color: #c62828;
}

/* ---------- platform (Super Admin) ---------- */

table.platform-shops td {
  vertical-align: top;
}

.platform-shop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.btn.ghost.danger {
  color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

td.overdue {
  color: var(--error);
  font-weight: 600;
}

section.paused {
  margin-top: 40px;
}

table.platform-users td {
  vertical-align: top;
}

table.platform-users tr.off td {
  opacity: .6;
}

table.platform-users td.actions form.inline {
  display: inline;
  margin-left: 10px;
}

.link-button.danger {
  color: var(--error);
}

/* ---------- Super Admin viewing a shop (read only) ---------- */

.read-only-banner {
  background: #fdecea;
  color: #8a1c14;
  border-bottom: 1px solid #f3c2bd;
  padding: 8px 24px;
  font-size: 13px;
  text-align: center;
}

.read-only-banner a {
  margin-left: 10px;
  color: #8a1c14;
  font-weight: 600;
}

body.read-only [disabled] {
  cursor: not-allowed;
  opacity: .55;
}

ul.plain {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.plain li {
  padding: 3px 0;
}

/* ---------- two-step login ---------- */

.two-step .qr svg {
  display: block;
  width: 200px;
  height: 200px;
  margin: 10px 0;
  background: #fff;
}

.two-step code.key {
  font-size: 15px;
  letter-spacing: .04em;
}

.two-step ol.steps li {
  margin-bottom: 18px;
}

ul.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px 28px;
  padding: 12px 16px;
  list-style: none;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 16px;
}

/* ---------- Square Terminal: waiting for the customer ---------- */

.terminal-wait {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--turq-l);
  color: var(--turq-deep);
}

.terminal-wait-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.terminal-wait-text span {
  font-size: 13px;
}

.terminal-wait .terminal-poll {
  display: none;   /* only there to check with Square every 2 seconds */
}

/* While the terminal is charging the sale is frozen (the server refuses changes); show it. */
.register.frozen .reg-ticket form:not(.terminal-wait form) :is(button, input, select) {
  opacity: .4;
  pointer-events: none;
}

.terminal-wait .btn {
  margin-top: 0;
}

.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(14, 95, 88, .25);
  border-top-color: var(--turq-deep);
  animation: tcr-spin .9s linear infinite;
}

@keyframes tcr-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

form.dev-only {
  margin-top: 16px;
  padding: 14px 18px;
  border-style: dashed;
}

/* ---------- pay artists ---------- */

.schedule-note {
  margin: 4px 0 14px;
}

.payees {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.payee-head, .payee > summary {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 1fr 1fr 1.4fr 1.3fr;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.payee-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: #fafdfd;
  border-bottom: 1px solid var(--line);
}

.payee + .payee {
  border-top: 1px solid var(--line-2);
}

.payee > summary {
  cursor: pointer;
  list-style: none;
}

.payee > summary::-webkit-details-marker {
  display: none;
}

.payee > summary:hover {
  background: #fafdfd;
}

.payee.due > summary .who strong::before {
  content: "●";
  color: var(--amber);
  margin-right: 6px;
  font-size: 11px;
}

.payee .who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.payee-body {
  padding: 4px 16px 16px 30px;
  background: #fcfdfd;
  border-top: 1px dashed var(--line);
}

.payee-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.payee-actions p {
  flex-basis: 100%;
  margin: 8px 0 4px;
}

.payee-actions form.inline .btn {
  margin-top: 0;
}

@media (max-width: 760px) {
  .payee-head {
    display: none;
  }

  .payee > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .payee > summary > span:nth-child(3), .payee > summary > span:nth-child(4) {
    display: none;
  }
}

/* ---------- statement: the full split, and clean printing ---------- */

td.nowrap, .nowrap {
  white-space: nowrap;
}

.statement-lines th {
  vertical-align: bottom;
}

.statement-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 14px;
}

.statement-summary dl {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 4px;
  margin: 0;
  min-width: 320px;
}

.statement-summary dd {
  margin: 0;
  padding-left: 28px;
  text-align: right;
}

.statement-summary .grand {
  font-weight: 700;
  font-size: 17px;
  padding-top: 6px;
  border-top: 2px solid var(--slate);
}

.statement-foot {
  margin-top: 22px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

form.choose-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 2px 0 12px;
}

form.choose-dates input[type="date"]:not([type="checkbox"]) {
  width: 11rem;
  flex: 0 0 auto;
  padding: 5px 8px;
}

form.choose-dates .btn {
  margin-top: 0;
}

form.choose-dates .hint {
  flex-basis: 100%;
}

form.pay-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

form.pay-now p,
form.pay-now .hint {
  flex-basis: 100%;
  margin: 0;
}

form.pay-now label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

form.pay-now select,
form.pay-now input[type="text"] {
  width: auto;
  margin: 0;
  padding: 5px 8px;
}

form.pay-now .btn {
  margin-top: 0;
}

form.dates-panel {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

form.dates-panel select {
  width: auto;
  max-width: 30rem;
  flex: 0 1 auto;
  padding: 5px 8px;
}

@media print {
  @page {
    size: letter;
    margin: 14mm 12mm;
  }

  body {
    background: #fff !important;
  }

  main.page, main.container {
    padding: 0;
    max-width: none;
  }

  .crumb, .read-only-banner {
    display: none !important;
  }

  .statement {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: 12px;
  }

  .statement table {
    width: 100%;
    page-break-inside: auto;
  }

  /* Nine columns on a letter page. */
  .statement-lines th, .statement-lines td {
    padding: 5px 5px;
    font-size: 10.5px;
  }

  .statement-lines th {
    letter-spacing: 0;
  }

  .statement-layout, .statement, .panel {
    overflow: visible !important;
  }

  .statement tr {
    page-break-inside: avoid;
  }

  .statement thead {
    display: table-header-group;   /* the column titles repeat on every page */
  }

  .statement .code {
    border: 0;
    padding: 0;
    color: #555;
  }

  .statement .gets, .statement .big {
    color: #000;
  }
}

.payee-history th, .payee-history td {
  padding: 6px 10px;
  text-align: left;
}

.payee-history th.r, .payee-history td.r {
  text-align: right;
}

.payee-history th.c, .payee-history td.c {
  text-align: center;
}

/* Returns */
.return-find { max-width: 560px; }
.return-find .row-inline { display: flex; gap: 8px; align-items: center; }
.return-find .row-inline input { flex: 1 1 auto; margin: 0; }
.return-find .row-inline .btn { margin-top: 0; }
.return-sale { margin-bottom: 14px; }
.return-sale p { margin: 4px 0; }
.return-lines { width: 100%; border-collapse: collapse; }
.return-lines th, .return-lines td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.return-lines th.r, .return-lines td.r { text-align: right; }
.return-lines th.c, .return-lines td.c { text-align: center; }
.return-lines select { width: auto; margin: 0; padding: 5px 8px; }
.return-details { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.return-details label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.return-details select, .return-details input { width: auto; margin: 0; padding: 5px 8px; }
.return-details input[type="text"] { min-width: 16rem; }
.return-tender { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.return-tender legend { font-weight: 600; margin-bottom: 4px; }
.choice-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.return-quote { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.return-quote dl { display: grid; grid-template-columns: auto auto; row-gap: 4px; margin: 0; min-width: 300px; }
.return-quote dd { margin: 0; padding-left: 28px; text-align: right; }
.return-quote .grand { font-weight: 700; font-size: 17px; padding-top: 6px; border-top: 2px solid var(--slate); }
.return-quote .btn { margin-top: 0; }
.return-quote p { margin: 0; text-align: right; }
.return-done { max-width: 640px; }
.statement-returns-title { margin: 18px 0 6px; font-size: 15px; }

@media (max-width: 640px) {
  .return-lines thead { display: none; }
  .return-lines tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .return-lines td { border: 0; padding: 0; }
  .return-lines td:nth-child(4) { grid-column: 1 / -1; }
  .return-quote, .return-quote p { align-items: stretch; text-align: left; }
  .return-quote dl { min-width: 0; }
  .return-details input[type="text"] { min-width: 0; }
}

/* Store credit */
.credit-entry { margin: 8px 0 4px; }
.credit-entry summary { cursor: pointer; color: var(--muted, #667); font-size: 13px; }
.credit-form { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.credit-form input { flex: 1 1 auto; margin: 0; text-transform: uppercase; }
.credit-form .btn { margin-top: 0; }
form.inline { display: inline; }
.pay-credit { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pay-credit p { margin: 0; }
.credit-list { width: 100%; border-collapse: collapse; }
.credit-list th, .credit-list td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.credit-list th.r, .credit-list td.r { text-align: right; }
.credit-list summary { cursor: pointer; }
.credit-history { margin: 6px 0 0; padding-left: 16px; }

/* Returns in the Sales list: money going out */
.sales-table tr.sale-row.return td { color: var(--error); background: var(--error-l); }
.sales-table tr.sale-row.return .code { color: var(--error); }

/* Gift cards */
.gift-entry { margin-top: 10px; }
.gift-entry summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.gift-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.gift-form label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.gift-form input { width: auto; margin: 0; padding: 5px 8px; }
.gift-form input[name="cardNumber"] { min-width: 14rem; }
.gift-form .btn { margin-top: 0; }
.gift-form .hint { flex-basis: 100%; }

.team-role select { width: auto; margin: 0; padding: 4px 8px; }

.section-h { font-size: 17px; margin: 22px 0 8px; }
.period-chips { margin: 4px 0 14px; }
.stock-form { max-width: 640px; }
.stock-form textarea { font-family: ui-monospace, Menlo, monospace; }
.stock-range { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.stock-range input { width: 13rem; margin: 0; }
.stock-form .btn { align-self: flex-start; }
.stock-list { margin-top: 10px; }
.stock-list summary { cursor: pointer; font-weight: 600; }
.stock-list ul { columns: 3 14rem; margin-top: 8px; }
.stock-list li { break-inside: avoid; padding: 2px 0; }
.gift-box { margin: 0 0 16px; }
.gift-box .strip { margin: 6px 0 0; }
.gift-box-head { display: flex; justify-content: space-between; align-items: baseline; }
.gift-search { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 6px; }
.gift-search input:not([type="checkbox"]) { flex: 1 1 18rem; max-width: 26rem; margin: 0; }
.gift-search .btn { margin-top: 0; }
.stock-form .stock-range input:not([type="checkbox"]) { width: 12rem; flex: 0 0 auto; margin: 0; }
.gift-box { padding: 12px 14px; }
.credit-list .code { white-space: nowrap; }
.refund-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .refund-actions .btn { margin-top: 0; }

/* Square onboarding import */
.square-card { margin-bottom: 18px; border-color: var(--turq, #2bb3a3); }
.square-step h3 { font-size: 15px; margin: 18px 0 8px; }
.square-groups select { width: auto; margin: 0; padding: 5px 8px; }
.square-groups .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.square-groups .form-actions .btn { margin-top: 0; }
.codes-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; } .codes-bar .btn { margin-top: 0; }

/* ---- Import: steps, warnings, drop zone, "what will happen", done ---- */
.steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 4px 0 20px; counter-reset: step; flex-wrap: wrap; row-gap: 8px; }
.steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); counter-increment: step; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 12px; flex: none; }
.steps li:not(:last-child)::after { content: ""; width: 28px; height: 1.5px; background: var(--line); margin: 0 10px; }
.steps li.done { color: var(--turq-text); }
.steps li.done::before { content: "✓"; background: var(--turq); border-color: var(--turq); color: #fff; }
.steps li.now { color: var(--slate); font-weight: 600; }
.steps li.now::before { background: var(--pink-btn); border-color: var(--pink-btn); color: #fff; }

.once-note { display: flex; gap: 10px; align-items: flex-start; background: var(--turq-l); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; }
.warn-box { background: var(--amber-l); border: 1px solid #f0d3a6; border-left: 4px solid var(--amber); border-radius: 10px; padding: 12px 14px; margin: 10px 0 14px; font-size: 14px; }
.warn-box strong:first-child { display: block; margin-bottom: 2px; }
.warn-box.strong { background: var(--error-l); border-color: #f2c4bf; border-left-color: var(--error); }
.warn-box label { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-weight: 600; }
.warn-box label input { width: auto; margin-top: 3px; }
.artists-first { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; }
.artists-first .big { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-right: 4px; }

.live-counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.live-counts span { background: var(--line-2); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.live-counts b { font-variant-numeric: tabular-nums; }
.square-groups tr.lead td { background: #fff8ec; }

.dropzone { display: grid; place-items: center; gap: 6px; text-align: center; border: 2px dashed var(--line); border-radius: 12px; padding: 22px 14px;
  background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s; margin: 6px 0 10px; }
.dropzone:hover, .dropzone.over { border-color: var(--turq); background: var(--turq-l); }
.dropzone .big { font-size: 26px; line-height: 1; }
.dropzone .file-name { font-weight: 600; color: var(--turq-text); }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:focus-within { outline: 2px solid var(--turq); outline-offset: 2px; }

dialog.summary { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 20px 60px rgba(22, 35, 43, .3); }
dialog.summary::backdrop { background: rgba(22, 35, 43, .45); }
dialog.summary .sum-head { padding: 18px 22px 6px; }
dialog.summary .sum-head h2 { margin: 0; font-family: var(--font-display); }
dialog.summary .sum-body { padding: 6px 22px 8px; overflow: auto; max-height: calc(100vh - 230px); }
dialog.summary .sum-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
dialog.summary .sum-foot .btn { margin: 0; }
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.sum-grid div { background: var(--paper); border-radius: 10px; padding: 10px 12px; }
.sum-grid .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.sum-grid .v { font-family: var(--font-display); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.owner-list { list-style: none; padding: 0; margin: 4px 0 12px; font-size: 14px; }
.owner-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.owner-list li .n { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.owner-list li.top { font-weight: 600; }
.sum-points { margin: 0 0 6px; padding-left: 18px; font-size: 14px; }
.sum-points li { margin: 3px 0; }

.done-hero { display: flex; gap: 16px; align-items: center; margin: 4px 0 18px; }
.done-hero .tick { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--turq); color: #fff; font-size: 28px; flex: none; }
.done-hero h2 { margin: 0; font-family: var(--font-display); font-size: 26px; }
.done-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.done-actions .btn { margin: 0; }
.undo-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.undo-card form { margin: 0; }
.remap-card { border-color: var(--amber); }
.remap-card select { width: auto; margin: 0; padding: 5px 8px; }

/* ---- Product photos ---- */
.photo-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.photo-row .photo { margin: 0; width: 120px; display: flex; flex-direction: column; gap: 6px; }
.photo-row .photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; background: var(--line-2); }
.photo-row .photo.main img { border: 2px solid var(--turq); }
.photo-row figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.photo-row .linkish { background: none; border: 0; padding: 0; color: var(--turq-text); text-decoration: underline; cursor: pointer; font: inherit; }
.photo-add { position: relative; width: 120px; height: 120px; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center;
  border: 2px dashed var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; font-size: 13px; font-weight: 600; margin: 0; }
.photo-add:hover, .photo-add:focus-within { border-color: var(--turq); background: var(--turq-l); }
.photo-add .big { font-size: 22px; line-height: 1; color: var(--turq-text); }
.photo-add .hint { font-weight: 400; }
.photo-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.photo-add.htmx-request { opacity: .6; pointer-events: none; }
img.thumb, span.thumb { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: none; border: 1px solid var(--line); background: var(--line-2); display: inline-block; vertical-align: middle; }

/* ---- Edit a piece in a side panel (Inventory) ---- */
table.inv tbody.grp tr { cursor: pointer; }
table.inv tbody.grp tr:hover > td { background: var(--line-2); }
table.inv tr.item:focus-visible { outline: 2px solid var(--turq); outline-offset: -2px; }
dialog.drawer { margin: 0 0 0 auto; padding: 0; border: 0; height: 100vh; max-height: 100vh; width: min(820px, 100vw); max-width: 100vw;
  background: var(--paper); box-shadow: -12px 0 40px rgba(22, 35, 43, .25); display: none; flex-direction: column; }
dialog.drawer[open] { display: flex; animation: drawer-in .18s ease-out; }
dialog.drawer::backdrop { background: rgba(22, 35, 43, .4); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.drawer-head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; }
.drawer-close { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.drawer-close:hover { color: var(--slate); }
.drawer-body { overflow: auto; padding: 16px 20px 28px; flex: 1; }
.drawer-body .product-form { border: 0; box-shadow: none; padding: 0; background: transparent; }
.product-form .photos { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { dialog.drawer[open] { animation: none; } }

/* ---- Settings → Roles ---- */
.roles-intro { margin: 0 0 14px; max-width: 760px; }
.role-admin { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; font-size: 14px; }
.role-badge { display: inline-block; background: var(--turq-l); color: var(--turq-deep); font-weight: 700; border-radius: 999px; padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.role-badge.admin { background: var(--pink-l); color: var(--pink-d); }
.role-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.role-card > summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.role-card > summary::-webkit-details-marker { display: none; }
.role-card > summary::after { content: "›"; grid-row: 1; grid-column: 3; color: var(--muted); font-size: 20px; transition: transform .15s; }
.role-card[open] > summary::after { transform: rotate(90deg); }
.role-card .role-who { font-size: 13px; color: var(--muted); }
.role-card .role-what { grid-column: 1 / -1; font-size: 13.5px; color: var(--slate-2); }
.role-form { padding: 0 16px 16px; border-top: 1px solid var(--line-2); }
.role-name { display: flex; gap: 10px; align-items: center; margin: 14px 0; font-weight: 600; }
.role-name input { max-width: 280px; margin: 0; }
.role-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.role-area { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 6px; margin: 0; background: var(--paper); }
.role-area legend { font-weight: 700; font-size: 14px; padding: 0 4px; }
.switch { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; cursor: pointer; font-weight: 500; font-size: 14px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { flex: none; width: 36px; height: 20px; border-radius: 999px; background: #cfd8da; position: relative; transition: background .15s; margin-top: 1px; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + .track { background: var(--turq); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--turq-d); outline-offset: 2px; }
.switch .text { display: flex; flex-direction: column; }
.switch .hint { font-weight: 400; font-size: 12.5px; }
.range-pick { margin: 6px 0 8px; }
.range-pick .label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; flex-wrap: wrap; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: block; padding: 6px 11px; font-size: 13px; font-weight: 600; border-right: 1px solid var(--line); }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--turq); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--turq-d); outline-offset: -2px; }
.role-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.role-actions .btn { margin: 0; }
.role-new { padding: 14px 16px; }
.role-new h2 { margin: 0 0 4px; font-size: 17px; }
/* Name and "Start from" share the row; the button is the same height as the boxes and level with them. */
.role-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.role-add label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 600; font-size: 13px; }
.role-add input, .role-add select, .role-add .btn { margin: 0; height: 2.6rem; box-sizing: border-box; }
.role-add .btn { padding: 0 18px; white-space: nowrap; }
@media (max-width: 640px) {
  .role-add { grid-template-columns: minmax(0, 1fr); }
  .role-add .btn { width: 100%; }
}

/* Team: change a name in place */
.name-edit { display: inline-block; }
.name-edit > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.name-edit > summary::-webkit-details-marker { display: none; }
.name-edit .pen { color: var(--muted); font-size: 13px; }
.name-edit > summary:hover .pen { color: var(--turq-text); }
.name-edit[open] > summary { display: none; }
.name-form { display: flex; gap: 6px; align-items: center; }
.name-form input { margin: 0; width: 200px; padding: 5px 8px; }
.name-form .btn { margin: 0; }

/* Artist pages: invitations (shop side and the artist's own page) */
.invite-card {
  margin-bottom: 16px;
}
.invite-card .acts {
  margin-top: 10px;
}
.invite-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.invite-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
}
/* The shop's "Wrong email? Change it" and the artist's invitation link page */
.change-email {
  margin-top: 10px;
}
.change-email summary {
  cursor: pointer;
  color: var(--turq-text);
}
.change-email .invite-form {
  margin-top: 8px;
}
.invite-page .field-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.invite-page .locked-email {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--line-2);
  overflow-wrap: anywhere;
}
.invite-page .other-login {
  margin-top: 10px;
}
.invite-page .not-for-you {
  margin-top: 18px;
}
.invite-page .invite-request {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--turq);
}
.invite-page .invite-request ul {
  margin: 6px 0;
}
.invite-page .invite-benefits {
  margin: 6px 0 12px;
  padding-left: 1.2rem;
}
.invite-page .invite-benefits li {
  margin: 4px 0;
}

/* The artist's own pages */
.portal-shops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.portal-shop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}
.portal-shop:hover,
.portal-shop:focus-visible {
  border-color: var(--turq-text);
}
.portal-shop dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 8px 0 0;
}
.portal-shop dt {
  color: var(--muted, #6b7280);
  font-size: 0.85em;
}
.portal-shop dd {
  margin: 0;
  text-align: right;
}
.portal-pieces tbody + tbody {
  border-top: 1px solid var(--line, #e5e7eb);
}
.portal-month {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.portal-month:has(.btn) { margin-bottom: 10px; }   /* room under its button before the text that follows */
tr.returned td {
  color: var(--muted, #6b7280);
}

/* Deliveries (artist → shop) */
.delivery-lines .thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  vertical-align: middle;
  margin-right: 8px;
}
.changed-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 14px;
  margin: 10px 0 14px;
  border: 1px solid var(--pink-l);
  border-left: 4px solid var(--pink-btn);
  border-radius: 10px;
  background: #fff;
}
.changed-box .small {
  width: 100%;
  color: var(--muted);
}
.delivery-lines .changed {
  color: var(--pink-btn);
  font-weight: 600;
}
/* An artist's delivery, one step under another (works on a phone): rules, Restock, from My inventory, new items,
   review, send */
.delivery-step {
  padding: 14px 16px;
  margin-bottom: 16px;
}
.delivery-step .stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.delivery-step .row2,
.delivery-step .row3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.delivery-step .row3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rules-box {
  border: 1px solid var(--turq-l);
  border-left: 4px solid var(--turq);
  border-radius: 10px;
  background: #fff;
  padding: 10px 16px;
  margin-bottom: 16px;
}
.rules-box ul {
  margin: 4px 0;
  padding-left: 18px;
}
.restock-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0;
}
.restock-tools input[type="search"] {
  max-width: 18rem;
}
.restock td form {
  display: inline;
}
.new-price summary {
  list-style: none;
  cursor: pointer;
}
.new-price summary::-webkit-details-marker {
  display: none;
}
.new-price[open] {
  min-width: 16rem;
}
.new-price form {
  margin-top: 6px;
}
.choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.choice-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 8px 0;
}
.choice-list li + li {
  border-top: 1px solid var(--line-2);
}
.choice-list .what {
  flex: 1 1 12rem;
  min-width: 0;
}
.choice-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
}
.choice-form label {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 12px;
}
.choice-form input[name="price"]:not([type="checkbox"]) {
  width: 6.5em;
}
.choice-form input.qty:not([type="checkbox"]) {
  width: 4.5em;
}
.table-scroll {
  overflow-x: auto;
}
.send-it {
  border-top: 2px solid var(--turq-l);
  margin-top: 14px;
  padding-top: 12px;
}
.send-it h3 {
  margin: 0 0 6px;
}
.send-it fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.send-it fieldset legend {
  width: 100%;
  padding: 0;
}
.delivery-lines input.qty {
  width: 4.5em;
}
.delivery-lines input.money {
  width: 6em;
  text-align: right;
}
.delivery-lines input.code-input {
  width: 5em;
  text-transform: uppercase;
}
/* Work going back (UAT 73): one choice, one button; the tracking box only for post. */
.pickup-done { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; max-width: 34rem; }
.pickup-done .label { font-weight: 600; }
.pickup-how { display: flex; flex-wrap: wrap; gap: 8px; }
.pickup-how label { flex: 1 1 10rem; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 600; cursor: pointer; }
.pickup-how label:has(input:checked) { border-color: var(--turq); background: #f3fbfa; }
.pickup-tracking { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 600; }
.pickup-done:not(:has(input[value="posted"]:checked)) .pickup-tracking { display: none; }
.pickup-done .hint { margin: 0; }

/* Small number boxes inside tables (beat the general full-width input rule) */
.delivery-lines input.qty:not([type="checkbox"]):not([type="radio"]) {
  width: 5em;
}
.delivery-lines input.money:not([type="checkbox"]):not([type="radio"]) {
  width: 6.5em;
}
.delivery-lines input.code-input:not([type="checkbox"]):not([type="radio"]) {
  width: 5.5em;
}
/* Boxes holding forms and text need room inside their border */
.invite-card,
.about .acts,
.invite-card .acts {
  align-items: center;
}

/* Password boxes: an eye to show or hide what was typed */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  padding-right: 2.75rem;
}
.pw-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.pw-eye:hover,
.pw-eye.on {
  color: var(--turq-text);
  background: var(--turq-l);
}

/* Dropdowns look like the text boxes: same box, our own arrow */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366757c' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem !important;
  line-height: 1.4;
  cursor: pointer;
}
select:disabled {
  cursor: default;
  opacity: 0.7;
}

/* Grid cells can shrink with the page, so boxes never overlap their neighbours */
.grid2 > *,
.grid3 > *,
.deal > * {
  min-width: 0;
}

/* The artist's shop cards look and behave like links */
.portal-shop {
  position: relative;
  border-left: 4px solid var(--turq);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.portal-shop strong {
  color: var(--turq-text);
  font-size: 1.05em;
  padding-right: 1.5rem;
}
.portal-shop::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 1.6em;
  line-height: 1;
  color: var(--turq-text);
}
.portal-shop .go {
  margin-top: 10px;
  color: var(--pink-btn);
  font-weight: 600;
  font-size: 0.9em;
}
.portal-shop:hover,
.portal-shop:focus-visible {
  box-shadow: 0 6px 18px rgba(16, 42, 51, 0.12);
  transform: translateY(-2px);
}
.portal-shop:active {
  transform: translateY(0);
  box-shadow: none;
  background: var(--line-2);
}

/* A photo box while the queue makes it small, or when it couldn't be used */
.photo-row .photo-wait {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: var(--line-2);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.photo-row .photo.failed .photo-wait {
  border-color: var(--error);
  background: var(--error-l);
  color: var(--error);
}
.photo-picks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.photo-picks .photo-add {
  overflow: hidden;
}
/* A picked photo shows one "Photo added" tile, whatever its kind (browsers can't show HEIC) */
.photo-slot {
  position: relative;
}
.photo-slot .empty,
.photo-slot.picked .added {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.photo-slot .added,
.photo-slot.picked .empty {
  display: none;
}
.photo-slot.picked .photo-add {
  border-style: solid;
  border-color: var(--turq);
  background: var(--turq-l);
}
.photo-slot .tick {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: var(--turq-text);
  color: #fff;
  font-weight: 700;
  margin-bottom: 2px;
}
.photo-slot .file {
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.photo-clear {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--slate-2);
  line-height: 1;
  cursor: pointer;
}
.photo-slot.picked .photo-clear {
  display: block;
}
.delivery-lines .thumb.wait {
  display: inline-block;
  background: var(--line-2);
  border: 1px dashed var(--line);
}

/* Piece photos in the artist's lists */
.piece-cell {
  white-space: nowrap;
}
.piece-thumb {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 10px;
  background: var(--line-2);
  border: 1px solid var(--line);
}
.piece-thumb.gap {
  visibility: hidden;
}

/* My work: the artist's own items, full width; adding and changing one happen in the side panel (UAT 66). */
.inventory-board {
  padding: 14px 16px;
}
.inventory-panel .stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inventory-panel .form-actions { display: flex; gap: 8px; margin-top: 8px; }
.inventory-panel .panel-remove { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.field-count { white-space: nowrap; }
.field-count.near { color: var(--amber); font-weight: 600; }
.inventory-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inventory-list li + li {
  border-top: 1px solid var(--line-2);
}
.inventory-list a {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 4px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}
.inventory-list a:hover {
  background: var(--turq-l);
}
.inventory-list .piece-thumb {
  width: 56px;
  height: 56px;
  flex: none;
}
.inventory-list .what {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inventory-list .item-name {
  overflow-wrap: anywhere;
}
.inventory-list .item-variation {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: var(--turq-deep);
  background: var(--turq-l);
  border-radius: 999px;
  padding: 1px 8px;
}
.inventory-list .item-description {
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* two lines in the list; all of it in the panel */
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}
.inventory-list .item-shops {
  flex: none;
  text-align: right;
}
.inventory-list .item-usual { display: block; color: var(--slate); font-weight: 600; }
.inventory-panel .usual-price { max-width: 10rem; }
.piece-thumb.wait {
  border: 1px dashed var(--line);
}
.photo-have {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 120px;
}
.photo-have img,
.photo-have .wait {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.photo-have .wait {
  display: grid;
  place-content: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--line-2);
}
/* My work import / export / photos from the list (UAT 77) */
.phead-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.export-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.export-bar .small { flex: 1 1 14rem; }
.inventory-list li { display: flex; align-items: center; gap: 8px; }
.inventory-list li > a:not(.btn) { flex: 1; min-width: 0; }
.inventory-list .export-tick { flex: none; width: 18px; height: 18px; margin: 0 2px; }
.inventory-list .add-photos { flex: none; white-space: nowrap; }
.import-steps { padding-left: 1.2rem; margin: 0 0 10px; line-height: 1.5; }
.import-preview td { vertical-align: top; }
.import-preview tr.bad td { background: #fff4f4; }
.import-preview tr.skipped td { color: var(--muted); }
.photo-modal {
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(30rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 48px rgba(22, 35, 43, .22); padding: 18px 20px 20px;
}
.photo-modal header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.photo-modal h2 { margin: 0; font-family: var(--font-display); font-size: 20px; }
.photo-modal .stack { display: flex; flex-direction: column; gap: 8px; }
.photo-modal .form-actions { display: flex; gap: 8px; }
body:has(.photo-modal) { overflow: hidden; }
@media (max-width: 560px) {
  .inventory-list li { flex-wrap: wrap; }
  .inventory-list .add-photos { margin-left: 28px; }
  .inventory-list a { flex-wrap: wrap; }
  .inventory-list .item-shops { flex-basis: 100%; text-align: left; padding-left: 66px; }
}

/* Delivery rows save themselves; the changed one says so for a moment */
.line-acts {
  white-space: nowrap;
  text-align: right;
  min-width: 9.5em;
}
.line-acts form {
  display: inline;
}
.saved-tick {
  color: var(--turq-text);
  font-size: 13px;
  font-weight: 600;
  margin-right: 8px;
  animation: saved-fade 3s ease-in forwards;
}
@media (max-width: 720px) {
  .line-acts {
    min-width: 0;
  }
}
@keyframes saved-fade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}
.locked-price {
  min-width: 6.5em;
  display: inline-block;
  text-align: right;
  color: var(--muted);
}

/* Settings → Codes and names */
.codes-preview {
  padding: 16px 18px;
  align-self: start;
}
.codes-preview h3 {
  margin-top: 0;
}
.codes-preview dl {
  display: grid;
  gap: 4px 0;
  margin: 0;
}
.codes-preview dt {
  color: var(--muted);
  font-size: 0.85em;
  margin-top: 8px;
}
.codes-preview dd {
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* The shop checks in a delivery: per line All / Some (how many) / None, and why (optional) when not all */
.checkin .decision {
  min-width: 14rem;
}
.checkin .choices {
  display: flex;
  gap: 4px 12px;
  flex-wrap: wrap;
}
.checkin .choices label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 600;
}
.checkin .decision .some,
.checkin .decision .why {
  display: none;
  margin-top: 6px;
  gap: 6px;
  flex-wrap: wrap;
}
.checkin .decide:has(input[value="Some"]:checked) .some {
  display: flex;
}
.checkin .decide:has(input[value="Some"]:checked) .why,
.checkin .decide:has(input[value="None"]:checked) .why {
  display: flex;
}
.checkin .decision .some label {
  font-size: 13px;
  margin: 0;
}
.checkin .decision .why input {
  min-width: 10rem;
}

/* ---------- The artist's pages: a warm welcome, colour stat cards, each shop in its own colour ---------- */
.shop-c0 { --shop: #0e5f58; --shop-l: #d6efec; }
.shop-c1 { --shop: #b02458; --shop-l: #fce1eb; }
.shop-c2 { --shop: #8a520a; --shop-l: #fbeeda; }
.shop-c3 { --shop: #5b3f8c; --shop-l: #ece6f6; }
.shop-c4 { --shop: #1d5b8f; --shop-l: #e1edf8; }
.shop-c5 { --shop: #2c3e48; --shop-l: #e4e9e9; }

.artist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 8px 0 20px;
}
.artist-badge {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--turq-l);
  color: var(--turq-deep);
  display: grid;
  place-content: center;
  font-size: 18px;
  font-weight: 600;
}
.artist-hello {
  flex: 1 1 280px;
  min-width: 0;
}
.artist-hello h1 {
  margin: 0;
}
.artist-hello .sub {
  margin: 2px 0 0;
}
.artist-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.artist-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.artist-body > .notice,
.artist-body > .error-box,
.artist-body > .invite-card,
.artist-body > .holder {
  margin: 0;
}
.artist-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.stat-card .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.stat-card .big {
  font-size: 24px;
  font-weight: 600;
}
.stat-card .note {
  font-size: 13px;
  color: var(--muted);
}
.artist-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.artist-section h2 {
  margin: 0;
  font-size: 22px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.section-head a {
  font-weight: 600;
  font-size: 14px;
}
.shop-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.shop-card {
  display: flex;
  gap: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 6px solid var(--shop);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(22, 35, 43, 0.06);
  transition: box-shadow 0.15s, transform 0.15s;
}
.shop-card:hover,
.shop-card:focus-visible {
  box-shadow: 0 10px 26px rgba(22, 35, 43, 0.14);
  transform: translateY(-2px);
}
.shop-pic {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
}
.shop-pic.none {
  display: grid;
  place-content: center;
  background: var(--shop-l);
  color: var(--shop);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
}
.shop-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shop-info strong {
  font-size: 17px;
  color: var(--shop);
}
.shop-info .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.chip-s {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}
.chip-s.sold { background: var(--pink-l); color: var(--pink-d); }
.chip-s.owed { background: var(--turq-l); color: var(--turq-deep); }
.chip-s.wait { background: var(--amber-l); color: #8a520a; }
.shop-info .go {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--pink-btn);
}
.lately .mark {
  flex: none;
  background: var(--shop);
}
.lately {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.lately li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
}
.lately li + li {
  border-top: 1px solid var(--line-2);
}
.lately .mark {
  width: 12px;
  height: 36px;
  border-radius: 6px;
}
.lately .what {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lately .gets {
  color: var(--turq-text);
}
@media (max-width: 720px) {
  .shop-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A shop's own pages for the artist carry its colour */
.shop-head {
  border-left: 6px solid var(--shop);
  background: var(--shop-l);
  border-radius: 14px;
  padding: 14px 18px;
}
.shop-head h1 {
  color: var(--shop);
}
/* A shop's logo (UAT 85): shown whole (never cropped) on white, on the artist's shop card and the shop's header. */
.shop-pic.logo { object-fit: contain; background: #fff; border: 1px solid var(--line); }
.shop-head:has(.shop-logo) { justify-content: flex-start; gap: 14px; }
.shop-head .shop-logo { width: 56px; height: 56px; flex: none; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.platform-logo .logo-preview { width: 120px; height: 120px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 12px; }

/* ---------- The artist's delivery page as it was in #113 (restored, UAT 2026-10-05) ---------- */
/* An artist's delivery: their pieces beside this delivery (with sending it underneath); stacked on phones */
.delivery-board {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);   /* the box gets the room its table needs (UAT 80) */
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}
.delivery-board.single {
  grid-template-columns: minmax(0, 1fr);
}
.board-pieces {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.delivery-board .panel {
  padding: 14px 16px;
}
.delivery-board .stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Two boxes side by side that may shrink below their content. */
.delivery-board .row2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.delivery-board .row2 input { min-width: 0; max-width: 100%; }
/* When and Tracking number: side by side while each has room (by the box's own width, not the screen's), else one
   under the other; with Tracking hidden, When takes the row. An iPhone's date box keeps its own width unless told
   (it was wider than half a phone and spilled under the next box). */
.send-it .send-when { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.send-it .send-when input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 2.6rem; }
/* "I'll bring it": nothing to track, so no tracking box. */
.send-it form:has(input[data-no-tracking]:checked) .tracking-field { display: none; }
.table-scroll {
  overflow-x: auto;
}
/* In the half-width delivery box, rows stay narrow: Saved and Remove stack instead of widening the table */
.delivery-box .line-acts {
  min-width: 0;
  white-space: normal;
}
.delivery-box .line-acts form,
.delivery-box .saved-tick {
  display: block;
  margin: 0;
}
.delivery-box .delivery-lines th,
.delivery-box .delivery-lines td {
  padding-left: 8px;
  padding-right: 8px;
}
/* The piece's name reads across (UAT 80): the photo beside it, variation and size under it; the boxes stay slim. */
.delivery-box .delivery-lines td.line-piece { min-width: 9rem; }
/* Every column but the piece's is as narrow as what's in it, so the spare width goes to the name (no gaps). */
.delivery-box .delivery-lines th:not(:first-child),
.delivery-box .delivery-lines td:not(.line-piece) { width: 1%; white-space: nowrap; }
.delivery-box .delivery-lines th, .delivery-box .delivery-lines th:not(:first-child) { white-space: normal; line-height: 1.25; }   /* "How / many" over its slim box */
.delivery-box .line-piece-in .thumb { width: 36px; height: 36px; }
.delivery-box .line-meta > span { white-space: nowrap; }
.delivery-box .delivery-lines th, .delivery-box .delivery-lines td { padding-left: 6px; padding-right: 6px; }
.delivery-box .line-remove {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 15px; cursor: pointer;
}
.delivery-box .line-remove:hover, .delivery-box .line-remove:focus-visible { background: var(--error-l); color: var(--error); }
.delivery-box .line-piece-in { display: flex; align-items: flex-start; gap: 10px; }
.delivery-box .line-piece-in .thumb { flex: none; }
.delivery-box .line-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* A name without spaces (AAAA…) breaks instead of pushing the boxes out of the frame. */
.delivery-box .line-what, .pick-results .pick .what, .delivery-lines .piece-open strong { overflow-wrap: anywhere; }
.delivery-box .line-name { line-height: 1.3; overflow-wrap: anywhere; }
.delivery-box .line-meta { font-size: 12.5px; color: var(--muted); }
.delivery-box .line-what .pill { align-self: flex-start; }
.delivery-box .delivery-lines input:not([type="checkbox"]):not([type="radio"]) { padding-left: 8px; padding-right: 8px; }
.delivery-box .delivery-lines input.qty:not([type="checkbox"]):not([type="radio"]) {
  width: 3.4em;
}
.delivery-box .delivery-lines input.money:not([type="checkbox"]):not([type="radio"]) {
  width: 4.8em;
}
.delivery-box .delivery-lines input.code-input:not([type="checkbox"]):not([type="radio"]) {
  width: calc(12ch + 20px);   /* the longest code (CodeFormat.MaxLength, 12) fits */
}
/* Two lines per piece (UAT 83): the photo and name across the whole box, then the boxes, each with its little label
   (td[data-label]). The column titles aren't needed then. */
.delivery-box .delivery-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.delivery-box .delivery-lines, .delivery-box .delivery-lines tbody { display: block; }
.delivery-box .delivery-lines tbody tr {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 14px;
  padding: 12px 6px; border-bottom: 1px solid var(--line);
}
.delivery-box .delivery-lines tbody tr:last-child { border-bottom: 0; }
.delivery-box .delivery-lines tbody td,
.delivery-box .delivery-lines tbody td:not(.line-piece) { display: block; width: auto; padding: 0; border: 0; text-align: left; }
.delivery-box .delivery-lines tbody td.line-piece { flex: 1 0 100%; min-width: 0; }
.delivery-box .delivery-lines tbody td.r, .delivery-box .delivery-lines tbody td.c { text-align: left; }
.delivery-box .delivery-lines tbody td > .code { display: inline-block; margin-top: calc((var(--btn-h) - 1.9em) / 2); }
.delivery-box .delivery-lines td[data-label]::before {
  content: attr(data-label); display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.2;
}
.delivery-box .delivery-lines td.gets, .delivery-box .delivery-lines td .locked-price { line-height: var(--btn-h); }
.delivery-box .delivery-lines td.line-acts { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 6px; }
.delivery-box .delivery-lines td.line-acts .line-remove { width: 34px; height: 34px; }
.send-it {
  border-top: 2px solid var(--turq-l);
  margin-top: 14px;
  padding-top: 12px;
}
.send-it h3 {
  margin: 0 0 6px;
}
.send-it fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.send-it fieldset legend {
  width: 100%;
  padding: 0;
}
@media (max-width: 900px) {
  .delivery-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The artist's piece picker on a delivery */
/* The main action of step ① (UAT 84): filled turquoise like the step, full width; the arrow points at the box (beside it,
   or below it on phones). Pink stays for Send it. */
.btn.add-to-box { width: 100%; background: var(--turq-d); border-color: var(--turq-d); color: #fff; font-weight: 700; box-shadow: 0 2px 6px rgba(16, 137, 126, .3); }
.btn.add-to-box:hover { background: var(--turq-deep); border-color: var(--turq-deep); color: #fff; }
.btn.add-to-box .add-arrow::after { content: "\2192"; margin-left: 4px; }
@media (max-width: 900px) { .btn.add-to-box .add-arrow::after { content: "\2193"; } }
.pick-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
/* Each tab is a button: the name on one line (a long shop name ends in "…", the full name on hover), the count right after it. */
.pick-tabs a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--btn-h);
  padding: 0 12px;
  border: 1.5px solid var(--turq);
  border-radius: 10px;
  background: #fff;
  color: var(--turq-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92em;
}
.pick-tabs a:hover { background: var(--turq-l); }
.pick-tabs a.on { background: var(--turq-d); border-color: var(--turq-d); color: #fff; box-shadow: 0 2px 6px rgba(16, 137, 126, .3); }
.pick-tabs .pick-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-tabs .pick-count {
  flex: none;
  min-width: 1.6em;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-size: 0.85em;
  text-align: center;
}
.pick-tabs a.on .pick-count { background: #fff; }
.pick-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  background: #fff;
}
.pick-results .pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 400;
}
.pick-results .pick:hover,
.pick-results .pick:has(input:checked) {
  background: var(--turq-l);
}
.pick-results .pick .what {
  flex: 1;
  min-width: 0;
}
.pick-results .pick .here {
  font-size: 0.85em;
  white-space: nowrap;
}
.pick-results .pick .here .code {
  margin-left: 6px;
}
.pick-results .pick .pick-mine { display: block; font-size: 12.5px; color: var(--muted); font-style: italic; }
/* Already in the box (UAT 76): greyed out, not pickable until it's taken out of the box. */
.pick-results .pick.in-box,
.pick-results .pick.in-box:hover { background: var(--line-2); color: var(--muted); cursor: not-allowed; }
.pick-results .pick.in-box strong { color: var(--muted); font-weight: 600; }
.pick-results .pick.in-box input { opacity: .4; }
.pick-results .pick .in-box-tag { color: var(--muted); font-weight: 600; }
.new-version {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.new-version summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.new-version summary::-webkit-details-marker {
  display: none;
}
.as-link {
  color: var(--turq-text);
  font-weight: 600;
  text-decoration: underline;
}
/* The picked piece's price: the shop's, locked, when it's already on the shelf there */
.pick-price {
  display: flex;
  flex-direction: column;
}
.pick-price label {
  margin-top: 0;
}
.pick-price input.locked {
  background: var(--line-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* What a delivery is and how to do one, at the top of the artist's delivery */
/* A drop-off (UAT 68): "How drop-offs work" folded away, the shop's own rules in view, then three numbered boxes:
   ① Add your pieces (turquoise), ② Your drop-off box (a thin pink frame, the page's focus), ③ Send it. */
.delivery-how {
  margin: 0 0 12px;
  font-size: 14px;
}
.delivery-how summary {
  cursor: pointer;
  color: var(--turq-text);
  font-weight: 600;
}
.delivery-how[open] {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
}
.delivery-how .lead {
  margin: 8px 0;
}
.delivery-how ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.delivery-rules {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--amber-l);
  border-radius: 10px;
  font-size: 13.5px;
}
.delivery-rules p { margin: 0; }
.delivery-rules p + p { margin-top: 6px; }
.delivery-board .step {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font: 700 13px var(--font-body);
  color: #fff;
  background: var(--turq);
  margin-right: 8px;
  vertical-align: 2px;
}
.delivery-board .delivery-box .step { background: var(--pink-btn); }
.board-pieces .panel { border-top: 3px solid var(--turq); }
.delivery-board .delivery-box {
  border: 1.5px solid var(--pink);
  box-shadow: 0 6px 18px rgba(232, 68, 127, .10);
  padding-top: 0;
  overflow: hidden;
}
.delivery-box > h2.section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -16px 12px;
  padding: 12px 16px;
  background: var(--pink-l);
  color: var(--pink-d);
}
/* A quiet note at the bottom of the screen (UAT 78): there for a moment, never moves the page or takes the focus. */
.toast {
  position: fixed; left: 50%; top: 50%; z-index: 70; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  width: max-content; max-width: min(22rem, calc(100vw - 48px)); padding: 22px 26px; border-radius: 18px;
  background: rgba(255, 255, 255, .97); color: var(--slate); font-weight: 600; font-size: 16px;
  box-shadow: 0 18px 48px rgba(22, 35, 43, .22); pointer-events: none; opacity: 0;
}
.toast:empty { display: none; }
.toast-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; font-size: 30px; font-weight: 700; }
.toast.ok { animation: toast-fade 1.6s ease forwards; }
.toast.ok .toast-mark { background: var(--turq-d); }
.toast.bad { animation: toast-fade 5s ease forwards; }
.toast.bad .toast-mark { background: var(--error); }
@keyframes toast-fade { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.92); } 10%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast.ok, .toast.bad { animation-name: toast-still; } @keyframes toast-still { 0%, 90% { opacity: 1; } 100% { opacity: 0; } } }
.delivery-lines tr.just-added td { animation: just-added 2.4s ease-out; }
@keyframes just-added { from { background: var(--pink-l); } to { background: transparent; } }
.pick-error { margin: 4px 0; }
/* A line's box that was refused (UAT 79): red, with the reason under it; the next good save clears it. */
.delivery-lines .line-err { display: block; min-width: 9rem; max-width: 14rem; margin-top: 4px; color: var(--error); font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: left; white-space: normal; }
.delivery-lines .line-err:empty { display: none; }
.delivery-lines td:has(> .line-err:not(:empty)) input { border-color: var(--error); background: var(--error-l); box-shadow: 0 0 0 2px rgba(179, 38, 30, .15); }
/* A finished drop-off (checked in, cancelled, declined): a grey record to look at, nothing to change. */
.delivery-board.record .delivery-box { border-color: #cfd6d8; box-shadow: none; background: #f7f9f9; }
.delivery-board.record .delivery-box > h2.section-title { background: #e8eced; color: var(--slate-2); }
.delivery-board.record .delivery-box .box-count { color: var(--muted); }
.delivery-board.record .delivery-lines { color: var(--slate-2); }
.delivery-board.record .delivery-lines img.thumb { filter: grayscale(.35); }
.record-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: #e8eced; color: var(--slate-2); font-size: 14px; }
.delivery-box .box-count {
  margin-left: auto;
  font: 600 13px var(--font-body);
  color: var(--pink-d);
  background: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.delivery-box .send-it { border-top-color: var(--pink-l); }
/* My pieces: a list, each row marked with its shop's colour; a missing photo says so */
/* Column headings that sort the list */
.my-pieces .sort-head {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.my-pieces .sort-head:hover,
.my-pieces .sort-head.on {
  color: var(--turq-text);
}
.my-pieces .sort-arrow {
  margin-left: 4px;
  font-size: 10px;
  letter-spacing: -2px;
  opacity: 0.4;
}
.my-pieces .sort-head.on .sort-arrow {
  opacity: 1;
  letter-spacing: 0;
}
.my-pieces tbody + tbody {
  border-top: 1px solid var(--line);
}
/* Rows are plain (UAT 2026-10-05); each shop's name keeps its colour (.shop-tag) */
.shop-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--shop);
  color: #fff;
  white-space: nowrap;   /* a long shop name stays one pill on a phone (the table scrolls) */
}

/* "Want a different price? Add a new version…" only for a picked piece that's already in the shop */
.delivery-board form .new-version {
  display: none;
}
/* Razor always writes data- attributes (empty for null), so match the value, not the attribute */
.delivery-board form:has(input[name="variationId"][data-on-shelf="true"]:checked) .new-version {
  display: block;
}

/* The shop asked the artist for changes to a sent delivery: a card like the intro, with a pink edge */
.changes-asked {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: inset 5px 0 0 var(--pink-btn);
  padding: 16px 20px 16px 26px;
  margin-bottom: 16px;
}
.changes-asked .ca-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.changes-asked h2 {
  margin: 0;
  font-size: 18px;
}
.changes-asked > p {
  margin: 0 0 12px;
  font-size: 14px;
}
.changes-asked .ca-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--pink-l);
  border-radius: 8px;
  font-size: 15px;
}
.changes-asked .ca-from {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}
.changes-asked .ca-lines {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 14px;
}
.changes-asked .ca-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.changes-asked .ca-foot p {
  margin: 0;
  flex: 1 1 260px;
}

/* My pieces: a short line under the heading */
.artist-section .section-lead {
  margin: -6px 0 10px;
}

/* What a drop-off is, under the heading on a shop's page; the ⓘ opens the steps */
.dropoff-what {
  margin: 0 0 12px;
}
.info-tip {
  display: inline;
}
.info-tip summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  color: var(--turq-text);
  font-weight: 700;
  padding: 0 4px;
}
.info-tip summary::-webkit-details-marker {
  display: none;
}
.info-tip ol {
  margin: 8px 0 0;
  padding: 10px 14px 10px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--slate);
}

/* Square set up once (Settings → Payments → Set up Square) and the Super Admin's reset */
.square-once ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.square-once li {
  margin: 4px 0;
}
.square-change summary {
  cursor: pointer;
  color: var(--turq-text);
  font-weight: 700;
}
.square-change form {
  margin-top: 10px;
}
.platform-square .requests li {
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.platform-square .requests li.open {
  font-weight: 600;
}

/* Settings explain themselves: <read-more> (Formatting/ReadMoreTagHelper) holds the longer "what you'll see / what
   happens behind the scenes" text, closed until asked for. .effects lists what a choice changes, place by place. */
.readmore {
  margin: 2px 0 4px;
}
.readmore > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  /* Quiet, like the hints around it: the body font, a turquoise link and a small chevron that turns when open. */
  font-family: var(--font-body);
  color: var(--turq-text);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.readmore > summary .chev {
  flex: none;
  transition: transform .18s ease;
}
.readmore[open] > summary .chev {
  transform: rotate(180deg);
}
.readmore > summary::-webkit-details-marker {
  display: none;
}
.readmore > summary:hover,
.readmore > summary:focus-visible {
  text-decoration: underline;
}
.readmore > summary .less,
.readmore[open] > summary .more {
  display: none;
}
.readmore[open] > summary .less {
  display: inline;
}
.readmore-body {
  margin: 8px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate-2);
}
.readmore-body p {
  margin: 0 0 8px;
}
.readmore-body p:last-child,
.readmore-body ul:last-child,
.readmore-body dl:last-child {
  margin-bottom: 0;
}
.readmore-body ul,
.readmore-body ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.effects {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) 1fr;
  gap: 4px 14px;
  margin: 0 0 8px;
}
.effects dt {
  font-weight: 600;
  color: var(--slate);
}
.effects dd {
  margin: 0;
}
@media (max-width: 560px) {
  .effects {
    grid-template-columns: 1fr;
  }
  .effects dd {
    margin-bottom: 6px;
  }
}

/* Policies → Returns: "all sales final" hides the ways of taking pieces back (no script needed) */
.returns-policy:has(.all-final input:checked) .returns-options {
  display: none;
}

/* Settings → Payments: the Square Terminal's three steps, each with ✓ when done */
.setup-steps {
  list-style: none;
  counter-reset: step;
  margin: 12px 0 8px;
  padding: 0;
}
.setup-steps > li {
  counter-increment: step;
  position: relative;
  padding: 2px 0 16px 44px;
  border-left: 2px solid var(--line);
  margin-left: 15px;
}
.setup-steps > li:last-child {
  border-left-color: transparent;
  padding-bottom: 4px;
}
.setup-steps > li::before {
  content: counter(step);
  position: absolute;
  left: -16px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  background: #fff;
  color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--line);
}
.setup-steps > li.now::before {
  background: var(--pink-btn);
  color: #fff;
  box-shadow: none;
}
.setup-steps > li.done::before {
  content: "✓";
  background: var(--turq-d);
  color: #fff;
  box-shadow: none;
}
.setup-steps > li.later .step-head {
  color: var(--muted);
}
.step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: 15px;
}
.setup-steps p {
  margin: 4px 0 8px;
}
.pairing {
  margin: 4px 0 8px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--turq-l);
}
.pairing ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.pair-code {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--slate);
  margin: 4px 0 8px;
}
.test-connection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 4px 0 8px;
}
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0 0;
}
.inline-form input {
  flex: 1 1 14rem;
  margin: 0;
}
.inline-form .btn {
  margin: 0;
}

/* Settings → Codes: the dash/number choices only matter with artist codes */
.codes-settings form:has(input[name="CodeUsesArtistCode"][value="false"]:checked) .artist-format {
  opacity: 0.45;
}
.code-rule {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--turq-l);
  font-size: 13.5px;
}
.code-rule a {
  margin-left: 4px;
  white-space: nowrap;
}

/* "Who's selling?" on a register device: big name tiles, then a PIN box */
.who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 12px;
  margin: 8px 0 16px;
}
.who-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5.5rem;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--slate);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}
.who-tile:hover,
.who-tile:focus-visible {
  box-shadow: inset 0 0 0 2px var(--turq);
}
.pin-form {
  text-align: center;
}
.pin-who {
  font-size: 18px;
}
.pin-input {
  max-width: 10rem;
  margin: 4px auto 12px;
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.4em;
  font-family: var(--font-mono);
}
.who-other {
  margin-top: 8px;
}
/* The bar on a register while someone is selling with their PIN */
.pin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  margin: 0 0 12px;
  border-radius: 10px;
  background: var(--turq-l);
  font-size: 14px;
}
.pin-bar form {
  margin: 0;
}

/* Team and the till */
.sect-sub {
  margin: 18px 0 6px;
  font-size: 15px;
}
.pin-next {
  margin: 10px 0 0;
}

/* Settings sections outside a form (Payments' steps, Set up Square, "Who's selling?") look like
   the forms' cards, with a heading like a form section's. */
section.card.policies,
section.card.narrow {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
section.card.narrow {
  max-width: 40rem;
}
section.card.policies {
  max-width: 40rem;
}
section.card.policies.wide {
  max-width: 58rem;
}
section.card > h2.sect {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate);
}
/* Team: one page in cards (how the shop works, people, add someone, roles, tills). */
section.card.team-start,
section.card.team-how,
section.card.team-people,
section.card.team-roles,
section.card.team-tills,
.team-tills ~ section.card,
details.card.team-card,
.team-card ~ section.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  max-width: 58rem;   /* every Settings tab is as wide as Policies */
}
section.card.team-start {
  border-left: 4px solid var(--pink-btn);
}
section.card.team-how {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--turq-l);
  border-color: transparent;
}
section.card.team-how p {
  margin: 2px 0 0;
}
.team-how .label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--turq-deep);
}
table.people tr.off td {
  opacity: 0.55;
}
.person-actions {
  white-space: nowrap;
}
.person-actions > * {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}
.person-actions details > summary {
  cursor: pointer;
  color: var(--turq-text);
  font-size: 14px;
}
.person-actions details[open] .name-form {
  margin-top: 6px;
}
/* Add someone: the PIN box for "a PIN at your till", the email box (and Admin) for "their own email". */
.add-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 10px;
}
.add-someone:has(input[name="Add.Way"][value="pin"]:checked) .for-email,
.add-someone:has(input[name="Add.Way"][value="email"]:checked) .for-pin {
  display: none;
}
table.role-grid td.c,
table.role-grid th.c {
  text-align: center;
}
table.role-grid .admin-row td {
  background: var(--line-2);
}
ul.devices {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
ul.devices > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-2);
}
.device-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.device-actions details > summary {
  cursor: pointer;
  color: var(--turq-text);
  font-size: 14px;
}
/* The Register's "Make this device the till" (admins). */
details.make-till {
  max-width: 48rem;
  margin: 18px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: #fff;
}
details.make-till > summary {
  cursor: pointer;
  font-size: 14px;
}
details.make-till[open] > summary {
  margin-bottom: 8px;
}
/* "Who's selling?": a blocked name, and unlocking the device. */
.who-tile.off {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Team's setup questions, one at a time. */
form.setup {
  max-width: 44rem;
}
form.setup fieldset[hidden] {
  display: none !important;   /* the other questions' answers are still in the form, just not on screen */
}
form.setup fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
form.setup legend .q {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--slate);
}
form.setup:has(input[name="SecondAdmin"][value="false"]:checked) .setup-admin {
  display: none;
}
.helper-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 10px;
}
.setup-review ul li {
  margin: 6px 0;
}
@media (max-width: 640px) {
  .person-actions {
    white-space: normal;
  }
  .helper-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A money box with its $ in front (Policies → minimum payment, the artist's own minimum). */
.money-input { display: inline-flex; align-items: center; gap: 6px; max-width: 12rem; }
.money-input > span { color: var(--muted); font-weight: 600; }
.money-input > input { flex: 1; min-width: 0; }

/* A gentle warning under a field (never blocks saving): the piece's name already has the artist's name in it. */
.hint.warn { color: var(--slate-2); background: var(--amber-l); border-left: 3px solid var(--amber); border-radius: 6px; padding: 6px 9px; display: block; }

/* PIN boxes: dots like a password, but not a password box, so password managers don't fill a saved login into them. */
.pin-mask {
  -webkit-text-security: disc;
  text-security: disc;
}

/* Drop-off requests ("Ask for more") and the conversation on a drop-off. */
.request-note {
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--turq);
  background: var(--turq-l);
  border-radius: 0 8px 8px 0;
  white-space: pre-line;
}
form.request-answer {
  max-width: 52rem;
}
.answer-lines td select,
.answer-lines td input:not(.qty) {
  width: 100%;
  margin: 2px 0;
}
.answer-how {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.answer-how label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 12rem;
}
.ask-form tr.suggested td {
  background: #fff8ef;
}
section.card.arrive {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
  max-width: 44rem;
}
.arrive-lines {
  display: grid;
  gap: 8px;
}
.arrive-lines label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 400;
}
.arrive-lines label span {
  flex: 1;
  min-width: 0;
}
/* One small box per line, the same size however long the name (a long name wraps beside it). As specific as the
   global input rule (its :not()s), or that rule's width: 100% wins and the boxes cover the names. */
.arrive-lines input.qty:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  flex: none;
  width: 5em;
  text-align: right;
}
.running-low .card-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* ---------- a drop-off's messages: a little messenger (bubbles by day, notes for what happened, a box at the bottom) ---------- */
/* As wide as the boxes above it (the drop-off's two, or the shop's page), framed in aqua with a title band, as the
   drop-off box is in pink (UAT 69). */
.dropoff-messages {
  margin-top: 24px;
}
.chat-box {
  background: #fff;
  border: 1.5px solid var(--turq);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--turq) 12%, transparent);
}
.chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  background: var(--turq-l);
  color: var(--turq-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--turq) 25%, transparent);
}
.chat-scroll {
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  padding: 14px 14px 6px;
  background: var(--paper);
  overscroll-behavior: contain;
}
.chat-scroll:focus-visible { outline: 2px solid var(--turq); outline-offset: -2px; }
.chat-empty {
  margin: 18px auto;
  max-width: 26rem;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
ol.chat-thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-day, .chat-event {
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
}
.chat-day span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--line-2);
  border-radius: 999px;
  padding: 3px 10px;
}
.chat-event span {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.chat-msg.more { margin-top: 2px; }
.chat-msg.mine { justify-content: flex-end; }
.chat-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--turq-l);
  color: var(--turq-deep);
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 18px;   /* level with the bubble, above its time */
}
.chat-msg.more .chat-avatar { background: none; }
.chat-wrap {
  display: flex;
  flex-direction: column;
  max-width: min(78%, 30rem);
}
.chat-msg.mine .chat-wrap { align-items: flex-end; }
.chat-who {
  font-size: 12px;
  color: var(--muted);
  margin: 0 4px 3px;
}
.chat-bubble {
  position: relative;
  white-space: pre-line;
  overflow-wrap: anywhere;
  padding: 10px 14px;
  border-radius: 16px;
  line-height: 1.45;
  font-size: 15px;
  background: #fff;
  color: var(--slate);
  border-bottom-left-radius: 4px;
  /* The edge and the shadow as drop-shadows, so they follow the tail too (a border or box-shadow stops at it). */
  filter: drop-shadow(0 0 0.6px color-mix(in srgb, var(--turq) 80%, transparent)) drop-shadow(0 2px 4px rgba(22, 35, 43, .07));
}
.chat-msg.mine .chat-bubble {
  background: var(--pink-btn);
  color: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--pink-btn) 30%, transparent));
}
/* A small tail on the first bubble of each group, pointing at who wrote it. */
.chat-msg:not(.more) .chat-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 12px;
  background: inherit;
}
.chat-msg.theirs:not(.more) .chat-bubble::after {
  left: -6px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.chat-msg.mine:not(.more) .chat-bubble::after {
  right: -6px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.chat-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin: 3px 6px 0;
}
.chat-sent { color: var(--turq-text); }
.chat-write {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 8px;
  padding: 10px 12px 8px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.chat-write textarea {
  resize: none;
  min-height: 42px;
  max-height: 10rem;
  border-radius: 21px;
  padding: 10px 16px;
  line-height: 1.35;
  overflow-y: auto;
}
.chat-send {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--pink-btn);
  color: #fff;
  cursor: pointer;
}
.chat-send:hover { background: var(--pink-d); }
.chat-send:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.chat-write.htmx-request .chat-send { opacity: .6; cursor: progress; }
.chat-error, .chat-hint { grid-column: 1 / -1; }
.chat-error { margin: 0 4px 4px; }
.chat-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.chat-count.near { color: var(--amber); font-weight: 600; }
.delivery-lines .code {
  white-space: nowrap;
}
form.request-answer .answer-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--slate);
}

/* ---------- the role panel (Team): a row per role, opened in a panel sliding in from the right ---------- */
table.role-grid tbody tr:nth-child(even) td { background: var(--paper); }
table.role-grid tr.role-row { cursor: pointer; }
table.role-grid tr.role-row:hover td, table.role-grid tr.role-row.on td { background: var(--turq-l); }
table.role-grid a.role-open { color: var(--slate); text-decoration: none; }
table.role-grid tr.role-row td:first-child strong::after { content: "›"; margin-left: 8px; color: var(--muted); font-weight: 400; }
table.role-grid .admin-row td { cursor: default; }

.side-backdrop { position: fixed; inset: 0; background: rgba(22, 35, 43, .32); z-index: 60; animation: side-fade .18s ease-out; }
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(34rem, 100vw); overflow-y: auto;
  background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(22, 35, 43, .12);
  padding: 20px 22px 28px; animation: side-in .22s ease-out;
}
.side-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.side-panel h2 { margin: 0; font-family: var(--font-display); font-size: 22px; }
.side-panel h2:focus { outline: none; }
.side-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--slate); text-decoration: none; font-size: 16px; }
.side-close:hover { background: var(--line-2); }
.side-sub { color: var(--muted); font-size: 13.5px; margin: 4px 0 12px; }
/* Where a My work item is (UAT 76): calm, plain words, never a warning. */
.where-note { margin: 0 0 10px; padding: 10px 12px; border-radius: 9px; background: var(--turq-l); color: var(--turq-deep); font-size: 14.5px; line-height: 1.45; }
.where-note a { color: var(--turq-text); font-weight: 600; }
.where-list { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 12rem; overflow-y: auto; }
.where-more summary { cursor: pointer; list-style: none; }
.where-more summary::-webkit-details-marker { display: none; }
.where-more .where-show { margin-left: 6px; color: var(--turq-text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.where-more .where-show::after { content: " ⌄"; }
.where-more[open] .where-show { display: none; }
.where-more[open] summary { margin-bottom: 2px; }
.where-note p { margin: 0; font-size: 13.5px; }
.side-panel .role-form { padding: 0; border: 0; }
.side-panel .role-name { flex-direction: column; align-items: stretch; gap: 4px; font-size: 13px; }
.side-panel .role-name input, .side-panel .role-name select { max-width: none; }
.side-panel .role-areas { grid-template-columns: 1fr; }
.side-panel .role-actions { position: sticky; bottom: -28px; background: #fff; padding: 12px 0; margin: 8px 0 0; border-top: 1px solid var(--line-2); }
.role-delete { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.role-delete form .btn { margin-top: 0; }
.role-move .row-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.role-move select { margin: 0; flex: 1 1 12rem; }
body:has(.side-panel) { overflow: hidden; }
@keyframes side-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes side-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .side-panel { width: 100vw; border-left: 0; padding: 16px 16px 24px; }   /* a full-screen sheet */
  @keyframes side-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .side-panel, .side-backdrop { animation: none; }
}

/* Every Settings tab is one width (Policies', 58rem), with the same card and headings. Receipts keeps its own
   layout (the form with its live preview beside it). */
.codes-settings { max-width: 58rem; }
section.card > h2.sect + .hint, section.card > h2.sect + p { margin-top: 0; }
form.stack.card.policies > fieldset > legend,
section.card > h2.sect,
section.card > h3.sect-sub { color: var(--slate); }
@media (prefers-reduced-motion: reduce) {
  .readmore > summary .chev { transition: none; }
}

/* ---------- split payment (Register): pay part of it one way, then the rest ---------- */
.split-entry { margin: 4px 0 10px; }
.split-entry summary { cursor: pointer; color: var(--turq-text); font-size: 13px; font-weight: 500; }
.split-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.split-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; }
.split-form .money-input input { max-width: 9rem; margin: 0; }
.split-form .btn { margin-top: 0; }
.split-now { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between;
  background: var(--turq-l); border-radius: 10px; padding: 10px 12px; margin: 4px 0 10px; font-size: 14px; }
.split-now form { margin: 0; }
.totals .paid-part { color: var(--turq-deep); }

/* ---------- Team: two cards that open and close (How my shop works, People) ---------- */
details.card.team-card > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
details.card.team-card > summary::-webkit-details-marker { display: none; }
details.card.team-card > summary h2.sect { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--slate); }
details.card.team-card > summary .team-card-now { margin-left: auto; color: var(--muted); font-size: 13px; }
details.card.team-card > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .18s ease; align-self: center; }
details.card.team-card[open] > summary::after { transform: rotate(-135deg); }
details.card.team-card[open] > summary { margin-bottom: 12px; }
details.team-sub { border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 14px; }
details.team-sub > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; color: var(--slate); display: flex; align-items: center; gap: 8px; }
details.team-sub > summary::-webkit-details-marker { display: none; }
details.team-sub > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .18s ease; }
details.team-sub[open] > summary::before { transform: rotate(45deg); }
details.team-sub[open] > summary { margin-bottom: 10px; }
.style-pick { display: grid; gap: 10px; }
.style-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; margin: 0; }
.style-option:has(input:checked) { border-color: var(--turq); background: var(--turq-l); }
.style-option input { margin-top: 3px; }
.style-option > span { display: flex; flex-direction: column; gap: 2px; }
.confirm-box { border: 1px solid var(--pink-btn); background: var(--pink-l); border-radius: 10px; padding: 14px 16px; }
.confirm-box p { margin: 0 0 8px; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.confirm-actions form, .confirm-actions .btn { margin: 0; }
.link-note { background: var(--turq-l); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.add-fields .manage-roles { align-self: end; justify-self: start; margin: 0; white-space: nowrap; }
.side-back { display: inline-block; margin-bottom: 6px; color: var(--turq-text); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  details.card.team-card > summary::after, details.team-sub > summary::before { transition: none; }
}

/* Team tab: one button size, and Manage roles on the Role box's line at the same height. */
.add-fields .role-pick { display: flex; align-items: flex-end; gap: 8px; }
.add-fields .role-pick label { flex: 1 1 auto; min-width: 0; }
.add-fields input, .add-fields select, .add-fields .manage-roles { height: 2.6rem; }
.add-fields .manage-roles { display: inline-flex; align-items: center; margin: 0; padding: 0 14px; white-space: nowrap; flex: none; }
/* The roles panel's table, turned: roles across the top, what they can do down the side. */
.role-admin-note { font-size: 13.5px; background: var(--line-2); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
table.role-grid-turned { width: 100%; table-layout: fixed; }
table.role-grid-turned th[scope="row"] { text-align: left; font-weight: 600; font-size: 13px; color: var(--slate-2); width: 7.5rem; }
table.role-grid-turned th.role-col { font-size: 13px; line-height: 1.25; word-break: break-word; }
table.role-grid-turned th.role-col a { color: var(--turq-text); text-decoration: none; font-weight: 700; }
table.role-grid-turned th.role-col a:hover { text-decoration: underline; }
table.role-grid-turned tbody tr:nth-child(even) td, table.role-grid-turned tbody tr:nth-child(even) th { background: var(--paper); }
@media (max-width: 640px) {
  table.role-grid-turned th[scope="row"] { width: 6rem; }
  table.role-grid-turned td, table.role-grid-turned th { padding: 7px 4px; }
}

/* Register: a box and its button on one line, the same height and the same (normal) button size. */
.split-form .money-input input, .split-form .btn, .credit-form input, .credit-form .btn, .gift-form input, .gift-form .btn { height: var(--btn-h); }
.gift-form input { padding: 0 10px; }

/* Money boxes typed like a till (digits fill in from the right): squarer, the amount right-aligned in even digits. */
input[data-money] { text-align: right; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; letter-spacing: .02em; border-radius: 8px; }
input[data-money]::placeholder { color: #b7c2c4; font-weight: 500; }
.split-form { flex-direction: column; align-items: flex-start; gap: 4px; }
.split-label { font-size: 13px; font-weight: 600; margin: 0; }
.split-row { display: flex; align-items: stretch; gap: 8px; }
.split-row .money-input, .split-row .money-input input, .split-row .btn { height: var(--btn-h); margin: 0; }
.split-row .money-input input { max-width: 9rem; }
/* Cash received: the box and its button the same height, on one line. */
.tender-row { align-items: stretch; }
.tender-row input, .tender-row .btn { height: var(--btn-h); margin: 0; }

/* A piece's size (UAT 74): small number boxes, the unit following the cm / inches choice. */
.size-unit { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.size-box:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { width: 5.5em; padding: 4px 8px; text-align: right; }
tr.vsize td { padding-top: 0; border-top: 0; }
.unit-in, form:has(.size-unit input[value="In"]:checked) .unit-cm { display: none; }
form:has(.size-unit input[value="In"]:checked) .unit-in { display: inline; }
.item-size { font-size: 12.5px; color: var(--slate); }
.size-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* A drop-off piece's details panel (UAT 75): photos to page through, the piece's facts, previous / next, the decision. */
.piece-open { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; flex-wrap: wrap; }
.piece-open:hover strong, .piece-open:focus-visible strong { color: var(--turq-text); text-decoration: underline; }
.piece-panel { width: min(38rem, 100vw); }
.piece-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 14px; font-size: 13.5px; }
.piece-nav a { color: var(--turq-text); font-weight: 600; text-decoration: none; }
.piece-nav a:hover { text-decoration: underline; }
.piece-count { color: var(--muted); }
.gallery { position: relative; margin: 0 0 14px; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 12px; background: var(--line-2); }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 2px solid var(--turq-text); outline-offset: 2px; }
.gallery-track figure { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: center; height: min(22rem, 60vw); }
.gallery-track img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-step { position: absolute; top: calc(min(22rem, 60vw) / 2); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(22, 35, 43, .18); font-size: 24px; line-height: 1; cursor: pointer; color: var(--slate); }
.gallery-step:hover { background: #fff; }
.gallery-step.prev { left: 10px; }
.gallery-step.next { right: 10px; }
.gallery-thumbs { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.gallery-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; line-height: 0; }
.gallery-thumbs button[aria-current] { border-color: var(--turq-text); }
.gallery-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.gallery-count { margin-left: auto; color: var(--muted); font-size: 13px; }
.gallery-none { display: flex; align-items: center; gap: 10px; padding: 14px; margin: 0 0 14px; border-radius: 12px; background: var(--line-2); color: var(--muted); font-size: 13.5px; }
.piece-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 10px; font-size: 14px; }
.piece-facts dt { color: var(--muted); }
.piece-facts dd { margin: 0; }
.piece-sect { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; }
.piece-description { white-space: pre-line; margin: 0; }
.piece-decide { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--line-2); }
.piece-decide .decision { min-width: 0; }
.piece-decide .choices label { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .gallery-track { scroll-behavior: auto; } }
/* Damaged or missing (UAT 72): Inventory's side panel, or a page of its own. */
.damage-form { max-width: 34rem; }
.drawer-body .damage-title, .drawer-body .damage-form ~ .crumb { display: none; }   /* the panel has its own title */
.damage-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; }
.damage-form .stack { display: flex; flex-direction: column; gap: 8px; }
.damage-piece { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.damage-piece img, .damage-piece .ph { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--turq-l); flex: none; }
.damage-form .label { margin-top: 6px; font-weight: 600; }
.damage-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.damage-kinds label { flex: 1 1 9rem; display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.damage-kinds label:has(input:checked) { border-color: var(--turq); background: #f3fbfa; }
.damage-form .choice.off { opacity: .55; }
.damage-what { margin-top: 6px; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; }
.damage-what ul { margin: 6px 0 0; padding-left: 18px; }
.damage-what li { margin: 3px 0; }
.damage-email { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.damage-email textarea { font-size: 14px; line-height: 1.45; }
.damage-email:has([data-damage-notify]:not(:checked)) textarea { opacity: .45; }
.damage-form .form-actions { display: flex; gap: 8px; margin-top: 6px; }
.damage-sub { margin: 22px 0 6px; font-size: 15px; }
.damage-history { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.damage-history li { padding: 6px 0; border-top: 1px solid var(--line-2); }
/* Settings → Policies: how a shared discount is split, attached under the Shared choice (only while it's picked). */
.policies .shared-split {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -10px 0 10px 34px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
}
.policies .shared-split .choice-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-weight: 400; }
.policies .shared-split input[type="number"]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { width: 4.5em; padding: 4px 8px; text-align: right; }
.policies fieldset:not(:has(input[name="Input.DefaultDiscountAbsorbedBy"][value="Shared"]:checked)) .shared-split { display: none; }
.policies .discount-case { margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--line-2); }
.policies .discount-case h4 { margin: 0 0 4px; font-size: 15px; }

/* How this device takes cards, under the Register's card button (UAT 87) */
.card-how { margin: 0 0 6px; }
.device-list table.devices { width: 100%; }
.device-list table.devices td { vertical-align: middle; }
.device-list table.devices .pill { margin-left: 6px; }
.device-list select { max-width: 100%; }

/* ---------- Register: selling at a place (UAT 88) ---------- */

.selling-at {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.selling-at .chip {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
}

.selling-at .chip:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.selling-at.away {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--pink-l);
}

.away-at {
  display: block;
  font-size: 11px;
  color: var(--pink-btn);
  white-space: nowrap;
}

/* ---------- Places (UAT 88): a market box ---------- */

.places-grid,
.place-board {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 18px;
  align-items: start;
}

.place-board {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.places-grid > .panel,
.place-board > .panel {
  padding: 18px 20px 20px;
}

.places-grid h2,
.place-board h2 {
  margin: 0 0 14px;
  font-size: 20px;
}

.places-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.place-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
  border-left: 4px solid var(--pink-btn);
}

.place-card strong {
  font-size: 16px;
}

.place-card:hover {
  background: var(--turq-l);
}

.place-card.done {
  border-left-color: var(--line);
}

.places-done {
  margin: 14px 0 0;
  font-size: 15px;
}

.place-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.place-dates input {
  width: 100%;
}

.place-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.place-search > *,
.place-qty > *,
form.place-search .btn,
form.place-qty .btn {
  margin: 0;
}

.place-search input {
  flex: 1;
  min-width: 0;
  height: var(--btn-h);
  margin: 0;
}

.place-found,
.place-lines {
  width: 100%;
  border-collapse: collapse;
}

.place-found td {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

.place-found td.r {
  padding-left: 10px;
}

.place-what,
.place-lines .place-what {
  overflow-wrap: anywhere;
}

.place-what .meta {
  margin-top: 4px;
  line-height: 1.7;
}

.place-board .code {
  white-space: nowrap;
}

.place-lines th {
  padding: 8px 8px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #6b7a80);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.place-lines th.r,
.place-lines td.r {
  text-align: right;
}

.place-lines th.c,
.place-lines td.c {
  text-align: center;
}

.place-lines td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.place-lines tr:last-child td {
  border-bottom: 0;
}

.place-lines th:first-child,
.place-lines td:first-child {
  padding-left: 0;
}

.place-lines th:last-child,
.place-lines td:last-child {
  padding-right: 0;
}

.place-qty {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  margin: 0;
}

form.place-qty input.qty {
  flex: none;
  width: 4.5em;
  max-width: 4.5em;
  height: var(--btn-h);
  margin: 0;
}

.place-box-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.place-box-head h2 {
  margin-bottom: 8px;
}

.place-edit {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .places-grid,
  .place-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .place-lines thead {
    display: none;
  }

  .place-lines tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .place-lines tr:last-child {
    border-bottom: 0;
  }

  .place-lines td,
  .place-lines td:first-child,
  .place-lines td:last-child {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .place-lines td:first-child,
  .place-lines td.place-act {
    flex-basis: 100%;
  }

  .place-lines td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted, #6b7a80);
  }

  .place-found tr {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }

  .place-found td,
  .place-found td.r {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
}

/* Register: a piece being added (one tap, one piece) */
form.add-one.htmx-request button {
  opacity: .55;
  cursor: progress;
}

.suggest form.add-one.htmx-request .s-stock {
  font-size: 0;
}

.suggest form.add-one.htmx-request .s-stock::before {
  content: "Adding…";
  font-size: 12px;
}

/* A place that's over but not brought back (UAT 88) */
.place-ended {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--pink-l);
  border-left: 4px solid var(--pink-btn);
}

.place-ended-acts {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.place-ended-acts a {
  color: var(--turq-text);
}

.place-ended-acts form,
.place-ended-acts form .btn {
  margin: 0;
}

/* A pop-up's takings (UAT 88) */
.place-takings {
  margin-bottom: 20px;
}

.place-takings-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.place-takings-head h2 {
  margin: 0;
  font-size: 20px;
}

.place-takings-head a {
  color: var(--turq-text);
}

.place-takings-note {
  margin: 8px 0 0;
}

.place-takings-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.place-takings-lists > .panel {
  padding: 14px 18px;
}

.place-takings-lists h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.place-mini {
  width: 100%;
  border-collapse: collapse;
}

.place-mini td {
  padding: 6px 0;
  border-top: 1px solid var(--line);
  vertical-align: baseline;
  overflow-wrap: anywhere;
}

.place-mini tr:first-child td {
  border-top: 0;
}

.place-mini td.r {
  text-align: right;
  padding-left: 10px;
  white-space: nowrap;
}

/* ---------- Apply to sell with us (UAT 89): the public form ---------- */

body.apply-page {
  background: var(--paper, #faf8f4);
  margin: 0;
}

body.apply-page.embed {
  background: transparent;
}

.apply {
  max-width: 44rem;
  margin: 0 auto;
  padding: 28px 16px 40px;
}

.embed .apply {
  padding: 4px 4px 12px;
}

.apply-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.apply-head h1 {
  margin: 2px 0 0;
}

.apply-logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
}

.apply-shop {
  font-size: 14px;
  color: var(--turq-text);
  font-weight: 600;
}

.apply-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.apply-card h2,
.apply-card p {
  margin: 0;
}

.apply-title {
  font-size: 22px;
}

.apply-note {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--turq-l);
}

.apply-card label {
  display: block;
  font-weight: 600;
  font-size: 14px;
}

.apply-card input:not([type="radio"]),
.apply-card select,
.apply-card textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  font-weight: 400;
}

.apply-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.apply-for {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px 12px;
  margin: 0;
}

.apply-for legend {
  font-weight: 600;
  font-size: 14px;
  padding: 0 4px;
}

.apply-card label.apply-choice {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  padding: 4px 0;
}

.apply-card .bad input,
.apply-card .bad select,
.apply-card.bad,
.apply-for.bad {
  border-color: #d33;
  box-shadow: 0 0 0 1px #d33;
}

/* The box robots fill in: off-screen for people and screen readers. */
.apply-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.apply-sent {
  align-items: center;
  text-align: center;
  padding: 36px 24px;
}

.apply-tick {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #fff;
  background: var(--turq-d);
}

.apply-foot {
  text-align: center;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .apply-two {
    grid-template-columns: 1fr;
  }

  .apply-card {
    padding: 18px 16px;
  }
}

/* ---------- The Applications tab (UAT 89) ---------- */

.apps-board {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
  align-items: start;
}

.apps-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.app-card,
.apps-form {
  padding: 18px 20px;
}

.app-card.done {
  opacity: .75;
}

.app-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.app-head h2 {
  margin: 0;
  font-size: 19px;
  overflow-wrap: anywhere;
}

.app-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.pill.new {
  background: var(--pink-btn);
  color: #fff;
}

.app-for {
  margin: 8px 0;
}

.app-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.app-photos img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.app-about {
  white-space: pre-line;
  overflow-wrap: anywhere;
  margin: 8px 0;
}

.app-contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 8px 0 12px;
}

.app-contact dt {
  color: var(--muted, #6b7a80);
}

.app-contact dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.app-contact a {
  color: var(--turq-text);
}

.app-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.app-acts form,
.app-acts form .btn,
.app-acts details summary.btn {
  margin: 0;
}

.app-decline[open] {
  flex-basis: 100%;
  order: 3;
}

.app-decline[open] summary {
  margin-bottom: 10px;
}

.app-decline summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.app-decline textarea {
  width: 100%;
  box-sizing: border-box;
}

.apps-form h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.apps-form h3 {
  margin: 18px 0 4px;
  font-size: 15px;
}

.apps-state.on {
  color: var(--turq-text);
  font-weight: 600;
}

.apps-state.off {
  color: var(--muted, #6b7a80);
}

.apps-copy {
  display: flex;
  gap: 8px;
  align-items: center;
}

.apps-copy code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  padding: 8px 10px;
  background: var(--turq-l);
  border-radius: 8px;
}

.apps-copy .btn {
  margin: 0;
}

.apps-code {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
}

@media (max-width: 900px) {
  .apps-board {
    grid-template-columns: 1fr;
  }

  .apps-form {
    order: -1;
  }
}

/* ---------- Set up your form (UAT 89, the form builder) ---------- */

.builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.builder-settings {
  padding: 18px 20px;
}

.builder-settings section + section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.builder-settings h2 {
  margin: 0 0 10px;
  font-size: 17px;
}

.builder-settings textarea,
.builder-question input:not([type="checkbox"]) {
  width: 100%;
  box-sizing: border-box;
}

.builder-open {
  margin-bottom: 10px;
}

.builder-pieces {
  width: 100%;
  border-collapse: collapse;
}

.builder-pieces th {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted, #6b7a80);
  font-weight: 600;
  text-align: center;
  padding: 0 4px 6px;
  white-space: nowrap;
}

.builder-pieces th:first-child {
  text-align: left;
}

.builder-pieces td {
  padding: 8px 4px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

.builder-pieces td.c {
  text-align: center;
  width: 4.5rem;
}

.builder-pieces tr.fixed td.c {
  color: var(--turq-d);
}

.builder-pieces input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--turq-d);
  cursor: pointer;
}

.builder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.builder-question {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.builder-question .check {
  white-space: nowrap;
}

.builder-save {
  margin-top: 20px;
  display: flex;
  gap: 8px;
}

.builder-save .btn {
  margin: 0;
}

.builder-preview {
  position: sticky;
  top: 16px;
}

.apply-preview-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 18px 7px;
  border-radius: 12px 12px 0 0;
  background: var(--pink-btn);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
}

.apply-preview-tab span {
  font-weight: 400;
  font-size: 12.5px;
  opacity: .9;
}

/* The folder: the tab sits on its pink top edge */
.apply-preview-frame {
  border: 1px solid var(--line);
  border-top: 4px solid var(--pink-btn);
  border-radius: 0 14px 14px 14px;
  overflow: hidden;
  background: var(--paper, #faf8f4);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}

.apply-preview-body {
  padding: 16px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.apply-preview-closed {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7d6;
  font-size: 13px;
}

/* The form's photo slots, with a title and description when the shop asks */
.apply-photos {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px 12px;
  margin: 0;
}

.apply-photos legend {
  font-weight: 600;
  font-size: 14px;
  padding: 0 4px;
}

.apply-photo {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}

.apply-photo:last-of-type {
  border-bottom: 0;
}

.apply-photo-no {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--turq-l);
  color: var(--turq-text);
  margin-top: 6px;
}

.apply-photo-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apply-card .apply-photo-fields input,
.apply-card .apply-photo-fields textarea {
  margin-top: 0;
}

/* Applications: the answers and photo captions */
.app-photos figure {
  margin: 0;
  width: 110px;
}

.app-photos figcaption {
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.app-answer {
  margin: 8px 0;
}

.app-answer .app-about {
  margin: 2px 0 0;
}

@media (max-width: 900px) {
  .builder {
    grid-template-columns: 1fr;
  }

  .builder-preview {
    position: static;
  }
}

/* "Other: what kind of work?" shows only when Other is chosen (always shown where :has isn't supported) */
.apply-craft {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.apply-craft:has(select option[value="Other"]:not(:checked)) .apply-craft-other {
  display: none;
}

.apps-other {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 14px;
}

.apply-limit {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted, #6b7a80);
}

.builder-open {
  display: flex;
  margin-bottom: 14px;
}

.apply-limit .field-count {
  margin-left: 8px;
}

.apply-photo-problem:empty {
  display: none;
}

.apply-photo-problem {
  font-size: 13px;
  color: #b42318;
  font-weight: 600;
}

.apply-photo-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.apply-card .apply-photo-two input {
  margin-top: 0;
}

.app-photo-facts {
  color: var(--turq-text);
  font-weight: 600;
}

/* The builder's own folder tab (turquoise), facing the pink Preview tab */
.builder-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 18px 7px;
  border-radius: 12px 12px 0 0;
  background: var(--turq-d);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
}

.builder-tab span {
  font-weight: 400;
  font-size: 12.5px;
  opacity: .9;
}

.builder-side .builder-settings {
  border: 2px solid var(--turq-d);
  border-top-width: 4px;
  border-radius: 0 14px 14px 14px;
}

/* ---------- Applications tab: the steps box and the guide (UAT 89) ---------- */

.apps-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.apps-steps {
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--turq-l), #fff 70%);
  border: 2px solid var(--turq-d);
}

.apps-steps h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.apps-steps ol {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.apps-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.apps-steps li > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.apps-steps .btn {
  margin: 4px 0 0;
}

.apps-step-no {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--turq-d);
  color: #fff;
}

.apps-note {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.apps-form h3:first-child {
  margin-top: 0;
}

.apps-test {
  margin: 12px 0 4px;
}

.apps-empty {
  text-align: center;
  padding: 32px 20px;
}

.apps-empty p {
  margin: 4px 0;
}

.apps-empty-icon {
  font-size: 34px;
}

/* The guide: one collapsible card at the top of the tab */
.guide {
  margin-bottom: 20px;
  border: 2px solid var(--turq-d);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.guide > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon title toggle" "icon sub toggle";
  gap: 2px 14px;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--turq-l), #fff);
}

.guide > summary::-webkit-details-marker {
  display: none;
}

.guide-icon {
  grid-area: icon;
  font-size: 28px;
}

.guide-title {
  grid-area: title;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 700;
  font-size: 19px;
}

.guide-sub {
  grid-area: sub;
  font-size: 13.5px;
  color: var(--muted, #6b7a80);
}

.guide-toggle {
  grid-area: toggle;
  font-size: 13px;
  font-weight: 600;
  color: var(--turq-text);
  white-space: nowrap;
}

.guide-toggle::after {
  content: "Open the guide ⌄";
}

.guide[open] .guide-toggle::after {
  content: "Fold it away ⌃";
}

.guide-body {
  padding: 8px 22px 22px;
}

.guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-steps > li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.guide-steps h3 {
  margin: 4px 0 6px;
  font-size: 17px;
}

.guide-steps p {
  margin: 6px 0;
}

.guide-step-no {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  background: var(--pink-btn);
}

.guide-ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.guide-way {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.guide-way h4 {
  margin: 0;
  font-size: 15px;
}

.guide-way p {
  margin: 0;
  font-size: 13.5px;
}

.guide-way .btn {
  margin: 0;
}

.guide-way-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--turq-text);
  background: var(--turq-l);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Little drawings of each step (not screenshots: every builder looks a bit different) */
.guide-pic {
  border-radius: 10px;
  background: #f3f1ec;
  padding: 10px;
  margin: 4px 0;
}

.gp-site {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  font-size: 10px;
}

.gp-site-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: #1d3b45;
  color: #fff;
}

.gp-site-bar span {
  font-weight: 700;
  margin-right: auto;
}

.gp-site-bar i {
  font-style: normal;
  opacity: .8;
}

.gp-site-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.gp-line {
  height: 6px;
  width: 90%;
  border-radius: 3px;
  background: #e4e1da;
}

.gp-line.short {
  width: 55%;
}

.gp-button {
  margin-top: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--pink-btn);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(214, 51, 111, .2);
}

.gp-form {
  width: 100%;
  box-sizing: border-box;
  border: 2px dashed var(--turq-d);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gp-form span {
  height: 9px;
  border-radius: 3px;
  border: 1px solid #d5dcdc;
}

.gp-form span.half {
  width: 50%;
}

.gp-form em {
  align-self: flex-start;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background: var(--pink-btn);
  border-radius: 4px;
  padding: 2px 6px;
}

.gp-phone {
  width: 70%;
  margin: 0 auto;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gp-bubble {
  background: var(--turq-l);
  border-radius: 10px 10px 10px 2px;
  padding: 6px 8px;
}

.gp-link {
  color: var(--turq-text);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.guide-pic-editor {
  margin: 12px 0;
}

.gp-editor {
  display: grid;
  grid-template-columns: 150px 1fr;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  font-size: 12px;
}

.gp-editor-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: #f7f7f5;
  border-right: 1px solid var(--line);
}

.gp-editor-side span {
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--muted, #6b7a80);
}

.gp-add {
  font-weight: 700;
  color: #1d3b45 !important;
}

.gp-pick {
  background: var(--pink-btn);
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(214, 51, 111, .2);
}

.gp-editor-page {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gp-drop {
  border: 2px dashed var(--pink-btn);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-weight: 700;
  color: var(--pink-btn);
  display: flex;
  flex-direction: column;
}

.gp-drop small {
  font-weight: 400;
  color: var(--muted, #6b7a80);
}

.gp-caption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted, #6b7a80);
}

.guide-builders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-builder {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.guide-builder > summary {
  cursor: pointer;
  padding: 11px 14px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-weight: 600;
}

.guide-builder[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--turq-l);
  border-radius: 10px 10px 0 0;
}

.gb-note {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted, #6b7a80);
}

.guide-builder ol {
  margin: 12px 0 6px;
  padding: 0 16px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.guide-builder .apps-copy {
  margin-top: 6px;
}

.gb-tip {
  margin: 6px 14px 14px !important;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff7d6;
  font-size: 13px;
}

.guide-test {
  margin: 8px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guide-helper {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--pink-l);
  border: 1px solid rgba(214, 51, 111, .25);
}

.guide-helper h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.guide-helper p {
  margin: 0 0 10px;
}

.guide-helper textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 12.5px;
  background: #fff;
}

.guide-helper-acts {
  display: flex;
  gap: 8px;
  margin: 10px 0 0 !important;
}

.guide-helper-acts .btn {
  margin: 0;
}

.guide-trouble {
  margin-top: 16px;
}

.guide-trouble > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--turq-text);
}

.guide-trouble dl {
  margin: 10px 0 0;
}

.guide-trouble dt {
  font-weight: 600;
  margin-top: 10px;
}

.guide-trouble dd {
  margin: 2px 0 0;
  color: var(--muted, #555);
}

@media (max-width: 900px) {
  .guide-ways {
    grid-template-columns: 1fr;
  }

  .gp-editor {
    grid-template-columns: 110px 1fr;
  }

  .guide > summary {
    grid-template-areas: "icon title" "icon sub" "icon toggle";
    grid-template-columns: auto 1fr;
  }
}

.apps-main {
  min-width: 0;
}

/* The steps box stays in view beside the guide and the applications */
.apps-side {
  position: sticky;
  top: 16px;
}

@media (max-width: 900px) {
  .apps-side {
    position: static;
    order: -1;
  }
}

@media (max-width: 600px) {
  .guide-body {
    padding: 4px 14px 16px;
  }

  .guide-steps > li {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }

  .guide-step-no {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

.apps-board {
  grid-template-columns: minmax(0, 1fr) 320px;
}

@media (max-width: 900px) {
  .apps-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .apps-side .apps-form {
    order: 0;
  }
}