:root {
  color-scheme: light;
  --bg: #f5efe5;
  --panel: rgba(255, 252, 246, 0.82);
  --panel-strong: #fff9f0;
  --text: #1e1d1a;
  --muted: #665f55;
  --line: rgba(30, 29, 26, 0.08);
  --accent: #d65a31;
  --accent-strong: #a63f1f;
  --accent-soft: #ffd7b5;
  --teal: #2a7f79;
  --gold: #c88d1f;
  --shadow: 0 24px 60px rgba(88, 57, 24, 0.12);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Views differ a lot in height. Scroll anchoring fights the restore when switching between
   them, and the viewport scroller is the root element, not body. */
html {
  overflow-anchor: none;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(214, 90, 49, 0.18), transparent 25%),
    radial-gradient(circle at top right, rgba(42, 127, 121, 0.16), transparent 20%),
    linear-gradient(180deg, #f8f1e7 0%, var(--bg) 100%);
}

button,
input,
select {
  font: inherit;
}

.page-shell {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "words controls"
    "photos photos";
  gap: 16px 24px;
  align-items: end;
  margin-bottom: 24px;
}

.hero-words { grid-area: words; }
.hero-controls { grid-area: controls; }

/* What is actually out there, in pictures. A row of names says nothing at a glance; a row of the
   things does. It scrolls rather than wrapping, so the header stays one band however much is up. */
.hero-photos {
  grid-area: photos;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  min-width: 0;
}

.hero-photo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 0.7rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.04);
  line-height: 0;
  transition: transform 140ms ease;
}

.hero-photo:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .hero-photo {
    width: 56px;
    height: 56px;
  }
}

.hero h1,
.section-heading h2,
.allocation-panel h3,
.money-split h3 {
  margin: 0;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.hero h1 {
  max-width: 10ch;
  font-family: "Instrument Serif", serif;
  font-size: clamp(3.3rem, 8vw, 5.8rem);
  font-weight: 400;
}

.hero-copy,
.inline-note,
.hero-panel ol,
.sale-meta,
.sale-note {
  color: var(--muted);
}

.hero-copy {
  max-width: 58ch;
  margin-top: 16px;
  font-size: 1.02rem;
  line-height: 1.6;
}

.auth-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.92rem;
}

.app-status {
  /* One cell of a two-column grid stretches to the height of whatever sits beside it, which
     turns a one-line message into a tall empty box. It applies to every view, so it spans. */
  grid-column: 1 / -1;
  align-self: start;
  margin: 0 0 4px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 0.92rem;
}

.app-status.is-error {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 500;
}

.hero-panel,
.panel {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.hero-panel {
  padding: 24px;
}

.hero-panel p,
.hero-panel ol {
  margin: 0;
}

.hero-panel ol {
  padding-left: 18px;
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  min-width: 0;
}

/* Grid items default to min-width:auto — the width of their widest unbreakable content — so one
   long word or one no-wrap row widens the whole column and the page scrolls sideways. */
.layout > * {
  min-width: 0;
}

.view-tabs {
  display: flex;
  /* Five tabs do not fit across a phone. Wrapping keeps them all reachable; a scrolling tab bar
     hides the ones that matter most on the screen where there is least room to go looking. */
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.62);
}

.sales-content-tabs {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.62);
}

.view-tab,
.sales-content-tab {
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
}

.view-tab.is-active,
.sales-content-tab.is-active {
  color: var(--text);
  font-weight: 700;
  background: var(--accent-soft);
}

/* The owner picker sits above the view tabs and applies to every view, so it carries the
   weight of the primary choice. */
.sheet-tabs {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sheet-tab {
  display: grid;
  gap: 3px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: rgba(255, 252, 246, 0.62);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.sheet-tab:hover {
  transform: translateY(-1px);
}

.sheet-tab span {
  font-size: 1.08rem;
  font-weight: 700;
}

.sheet-tab small {
  color: var(--muted);
}

.sheet-tab.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.stats-panel,
.list-panel,
.inventory-panel,
.payout-panel,
.links-panel,
.gone-panel,
.access-panel,
.draft-panel,
.ask-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

.panel {
  padding: 24px;
}

.section-heading,
.sale-card-top,
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.section-heading.compact {
  align-items: start;
}

.eyebrow {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  color: var(--accent-strong);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 24px;
}

.stat-card,
.sale-card {
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.stat-card {
  padding: 18px;
}

.stat-card p,
.stat-card strong,
.sale-grid span,
.sale-grid strong,
.sale-title,
.sale-meta,
.sale-note,
.split-chip {
  margin: 0;
}

.stat-card p,
.sale-grid span {
  font-size: 0.82rem;
  color: var(--muted);
}

.stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: 1.7rem;
}

.allocation-panel {
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 215, 181, 0.42), rgba(255, 255, 255, 0.65));
}

.allocation-bars {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.allocation-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 12px;
  align-items: center;
}

.bar-track {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: rgba(30, 29, 26, 0.08);
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
}

.sale-form,
.money-split {
  display: grid;
  gap: 20px;
}

.field-grid {
  display: grid;
  gap: 14px;
}

.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-up {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 8px;
  font-size: 0.94rem;
}

input,
select {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid rgba(30, 29, 26, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
}

input:focus,
select:focus {
  outline: 2px solid rgba(214, 90, 49, 0.2);
  border-color: var(--accent);
}

.multi-sale-dialog {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--text);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.multi-sale-dialog::backdrop {
  background: rgba(30, 29, 26, 0.46);
  backdrop-filter: blur(3px);
}

.multi-sale-dialog form {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.multi-sale-dialog h2,
.multi-sale-dialog p {
  margin: 0;
}

.muted-copy {
  color: var(--muted);
}

.multi-sale-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.multi-sale-fields label {
  display: grid;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

.multi-sale-total {
  padding: 14px;
  border-radius: 14px;
  background: rgba(214, 90, 49, 0.1);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.primary-button,
.ghost-button,
.edit-button,
.danger-button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.primary-button:hover,
.ghost-button:hover,
.edit-button:hover,
.danger-button:hover {
  transform: translateY(-1px);
}

.primary-button {
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}

.ghost-button,
.edit-button {
  background: rgba(30, 29, 26, 0.06);
  color: var(--text);
}

.danger-button {
  color: #8f2515;
  background: rgba(214, 90, 49, 0.14);
}

.sales-table {
  overflow-x: auto;
  /* A grid item defaults to min-width:auto, which is the width of its widest content — so the
     980px table pushes the whole column out and the page scrolls sideways instead of the table.
     Both the scroller and the panel holding it have to say otherwise. */
  min-width: 0;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-strong);
}

.sales-table-header,
.sale-table-row,
.inventory-table-header,
.inventory-table-row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  text-align: left;
}

/* The header and the rows are separate grids sharing a column template. Without this a grid item
   is at least as wide as its own content, so "Payment status" in the header sizes its column wider
   than "Not paid yet" does in the rows, and every column after the first drifts out of line. */
.sales-table-header > *,
.sale-table-row > *,
.inventory-table-header > *,
.inventory-table-row > * {
  min-width: 0;
}

.sales-table-header,
.sale-table-row {
  /* Item, sold price, kept, owed, paying, status, buttons. Cost and Profit were taken out, so
     the template loses two columns with them — leaving them would have left the header naming
     one column while the rows filled another. */
  --sales-row-min-width: 940px;
  --sales-row-columns: minmax(210px, 1.9fr) repeat(3, minmax(84px, 0.75fr)) minmax(80px, 0.65fr) minmax(100px, 0.95fr) 88px;
  min-width: var(--sales-row-min-width);
  grid-template-columns: var(--sales-row-columns);
}

.inventory-table-header,
.inventory-table-row {
  /* Item, price, quantity, total, who you pay, buttons. One fewer since Cost each went. */
  --inventory-row-min-width: 960px;
  --inventory-row-columns: minmax(240px, 2.1fr) minmax(110px, 0.8fr) minmax(80px, 0.6fr) minmax(115px, 0.85fr) minmax(105px, 0.85fr) 218px;
  min-width: var(--inventory-row-min-width);
  grid-template-columns: var(--inventory-row-columns);
}

.sales-table-header,
.inventory-table-header {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sales-list {
  display: grid;
}

.sale-table-row + .sale-table-row,
.inventory-table-row + .inventory-table-row {
  border-top: 1px solid var(--line);
}

.sale-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 700;
}

.sale-table-row [data-field="distributed"] {
  color: var(--muted);
}

.edit-button {
  padding: 7px 11px;
  font-size: 0.82rem;
}

.inventory-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.payout-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 18px;
}

.payout-summary-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(200, 141, 31, 0.13);
}

.payout-summary-card p,
.payout-summary-card strong {
  margin: 0;
}

.payout-summary-card p {
  color: var(--muted);
  font-size: 0.82rem;
}

.payout-summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.35rem;
}

.payout-summary-card.is-made {
  background: rgba(42, 127, 121, 0.12);
}

/* One card per person: what is owed big at the top, the two figures it comes from beneath, then
   the box to take a payment off it. */
.payout-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}

.payout-person {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-strong);
}

.payout-person-owed p,
.payout-person-owed strong {
  margin: 0;
}

.payout-person-owed p {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.payout-person-owed strong {
  display: block;
  margin-top: 4px;
  color: var(--accent-strong);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

.payout-person.is-settled .payout-person-owed strong {
  color: var(--teal);
}

.payout-person-figures {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 0;
  border-block: 1px solid var(--line);
}

.payout-person-figures div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.payout-person-figures dt {
  color: var(--muted);
}

.payout-person-figures dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.payout-pay-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.payout-pay-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.payout-pay-form input {
  min-width: 0;
  padding: 9px 10px;
}

.payout-pay-form button {
  grid-column: 1 / -1;
}

.payout-history {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.85rem;
}

.payout-history li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}

.payout-history-remove {
  padding: 4px 10px;
  font-size: 0.78rem;
}

.payout-date-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.clear-payout-date {
  justify-self: start;
  padding: 0;
  border: 0;
  color: var(--accent-strong);
  font-size: 0.75rem;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
}

.inventory-summary-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(42, 127, 121, 0.1);
}

.inventory-summary-card p,
.inventory-summary-card strong {
  margin: 0;
}

.inventory-summary-card p {
  color: var(--muted);
  font-size: 0.82rem;
}

.inventory-summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.35rem;
}

.inventory-list {
  display: grid;
}

.inventory-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 700;
}

.inventory-table-row [data-field="quantity"],
.inventory-table-row [data-field="ownerPayment"] {
  color: var(--muted);
}

.inventory-actions {
  display: flex;
  gap: 8px;
  justify-content: end;
}

.inventory-edit-row {
  display: grid;
  gap: 16px;
  padding: 18px 16px;
  border-top: 1px solid var(--line);
  background: rgba(214, 90, 49, 0.08);
}

.inventory-edit-table-row {
  border: 0;
  background: rgba(214, 90, 49, 0.08);
}

.inventory-edit-table-row input,
.inventory-edit-table-row select,
.sale-edit-table-row input {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
}

.inventory-edit-table-row output {
  min-width: 0;
  padding: 9px 0;
  font-weight: 700;
}

.inventory-edit-item-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
  gap: 8px;
  min-width: 0;
}

#inventory-view.is-my-items .inventory-table-header,
#inventory-view.is-my-items .inventory-table-row {
  --inventory-row-min-width: 660px;
  --inventory-row-columns: minmax(180px, 1.8fr) minmax(120px, 0.8fr) minmax(80px, 0.6fr) minmax(120px, 0.9fr) 160px;
}

#inventory-view.is-my-items .inventory-table-header span:nth-child(5),
#inventory-view.is-my-items .inventory-table-row [data-field="ownerPayment"],
#inventory-view.is-my-items .inventory-edit-table-row [name="costRule"] {
  display: none;
}

#sales-list-panel.is-my-items .sales-table-header,
#sales-list-panel.is-my-items .sale-table-row {
  --sales-row-min-width: 760px;
  --sales-row-columns: minmax(150px, 1.5fr) repeat(2, minmax(84px, 0.75fr)) minmax(80px, 0.65fr) minmax(100px, 0.95fr) 88px;
}

#sales-list-panel.is-my-items .sales-table-header span:nth-child(4),
#sales-list-panel.is-my-items .sale-table-row [data-field="iPay"],
#sales-list-panel.is-my-items .sale-edit-table-row [name="ownerPayout"] {
  display: none;
}

.sale-form.is-my-items .owner-payment-field {
  display: none;
}

.sale-edit-table-row {
  background: rgba(214, 90, 49, 0.08);
}

.sale-edit-table-row output {
  min-width: 0;
  padding: 9px 0;
  font-weight: 700;
}

.sale-edit-table-row .form-actions {
  gap: 6px;
}

.sale-edit-table-row .ghost-button,
.sale-edit-table-row .primary-button {
  padding: 7px 10px;
  font-size: 0.82rem;
}

.inventory-edit-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.inventory-edit-actions {
  display: flex;
  justify-content: end;
  gap: 10px;
}

.mark-sold-button {
  padding: 7px 11px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.empty-state {
  padding: 28px;
  border: 1px dashed rgba(30, 29, 26, 0.18);
  border-radius: 22px;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.44);
}

@media (max-width: 980px) {
  .hero,
  .layout {
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .four-up,
  .inventory-summary,
  .payout-summary,
  .inventory-edit-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 720px) {
  .page-shell {
    width: min(100% - 20px, 1200px);
    padding-top: 20px;
  }

  .hero h1 {
    font-size: 3.2rem;
  }

  .stats-grid,
  .sheet-tabs,
  .three-up,
  .two-up,
  .four-up,
  .payout-summary,
  .inventory-edit-fields {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .sale-card-top,
  .form-footer,
  .allocation-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: start;
  }

  .inventory-actions {
    justify-content: start;
  }

  .inventory-edit-actions {
    justify-content: start;
  }
}


/* Replaces the three fixed person-tabs. A dropdown rather than tabs because the list of people is
   no longer fixed at three — a new person appears here without any markup changing. */
.people-filter {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.people-filter label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.people-filter select {
  font: inherit;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.75);
  min-width: 11rem;
}


/* A sale of several units reads as one line; its units appear indented beneath when expanded. */
.sale-table-row.is-batch .sale-title {
  font-weight: 700;
}

.sale-table-row.is-batch-unit {
  background: color-mix(in srgb, var(--panel-strong) 55%, transparent);
}

.sale-table-row.is-batch-unit .sale-title {
  padding-left: 1.25rem;
  opacity: 0.75;
}


/* The headline block is gone for now; the header shrinks to just the sign-in controls so the
   table sits at the top of the page rather than below four lines of display type. */
.hero {
  padding-block: 1.25rem;
  min-height: 0;
}

.hero-controls {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* Tells you what eBay knows that the tracker does not. Quiet when there is nothing to do, so it
   does not train people to ignore it — the colour only appears when something is actually waiting. */
.ebay-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.15rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.ebay-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ebay-banner-text strong {
  font-size: 0.95rem;
}

.ebay-banner-text span {
  font-size: 0.82rem;
  opacity: 0.72;
}

.ebay-banner.has-waiting {
  border-color: color-mix(in srgb, #c2571f 45%, var(--line));
  background: color-mix(in srgb, #c2571f 9%, var(--panel-strong));
}

.ebay-banner.has-error {
  border-color: color-mix(in srgb, #9b2c22 50%, var(--line));
  background: color-mix(in srgb, #9b2c22 9%, var(--panel-strong));
}


/* A negative profit has to look different from a small one — losing money and making $3 should not
   read the same at a glance. */
.sale-table-row [data-field="profit"].is-loss {
  color: #9b2c22;
}

@media (prefers-color-scheme: dark) {
  .sale-table-row [data-field="profit"].is-loss {
    color: #e8877c;
  }
}

/* Price research. Every row links out, because a suggested price you cannot check is a guess. */
.market-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.market-intro {
  margin: 0;
  max-width: 62ch;
  opacity: 0.75;
  font-size: 0.9rem;
}

.market-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.market-form input {
  font: inherit;
  flex: 1 1 22rem;
  min-width: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.75);
}

.market-summary {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
}

.market-results {
  display: flex;
  flex-direction: column;
  max-height: 22rem;
  overflow-y: auto;
}

.market-row {
  display: grid;
  grid-template-columns: 5.5rem 5rem 6rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0.25rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  font-size: 0.88rem;
}

.market-row:hover {
  background: rgba(0, 0, 0, 0.035);
}

.market-row strong {
  font-variant-numeric: tabular-nums;
}

/* How many a listing has shifted is the strongest evidence its price is real. */
.market-sold {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.market-condition,
.market-row-title {
  opacity: 0.72;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* How much of the total a profit figure actually covers. Without it a profit computed over three
   of fifty sales looks like the whole picture. */
.stat-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  opacity: 0.62;
}

.stat-card strong.is-loss {
  color: #9b2c22;
}

@media (prefers-color-scheme: dark) {
  .stat-card strong.is-loss {
    color: #e8877c;
  }
}

/* Matching the tracker to eBay. Rows the matcher is unsure about are marked, because the whole
   point is that a person looks at those rather than trusting a score. */
.listing-sync-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sync-results {
  display: flex;
  flex-direction: column;
  max-height: 26rem;
  overflow-y: auto;
}

.sync-group {
  margin: 0.9rem 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.6;
}

.sync-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.4rem;
  border-top: 1px solid var(--line);
}

.sync-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.sync-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sync-row-text strong {
  font-size: 0.9rem;
}

.sync-row-sub {
  font-size: 0.78rem;
  opacity: 0.65;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-row-change {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.86rem;
  white-space: nowrap;
}



/* ---------------------------------------------------------------------------
   Saying which tracker listing is which eBay listing
   --------------------------------------------------------------------------- */

/* The heading block keeps its natural width; the explanation beside it is what wraps. Without
   this the flex row crushes a three-word heading into three lines. */
.links-panel .section-heading > div:first-child,
.ask-panel .section-heading > div:first-child,
.gone-panel .section-heading > div:first-child,
.access-panel .section-heading > div:first-child,
.draft-panel .section-heading > div:first-child {
  flex: 0 0 auto;
}

/* The heading row and the form beneath it are separate blocks, not one crowded band. */
.draft-panel .section-heading {
  margin-bottom: 1rem;
}

.links-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.links-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--muted);
}

.links-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.link-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--panel-strong);
}

/* Already-settled rows recede: the job on this screen is the ones still to do. */
.link-row.is-linked {
  align-items: center;
  background: transparent;
  opacity: 0.78;
}

/* A fixed square whatever shape the photo is, so the rows line up and the eye can run down them. */
.link-photo {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  object-fit: contain;
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.04);
}

.link-body {
  flex: 1 1 auto;
  min-width: 0;
}

.link-ebay-title {
  margin: 0 0 0.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.link-counts,
.link-matched,
.link-prompt {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.link-matched {
  color: var(--teal);
  font-weight: 600;
}

/* A stock count that disagrees is worth noticing, not worth acting on automatically. */
.link-counts.is-different {
  color: var(--accent-strong);
  font-weight: 600;
}

.link-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.link-choice {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.65);
  font: inherit;
  color: inherit;
  cursor: pointer;
  max-width: 22rem;
}

.link-choice:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.link-choice:disabled {
  opacity: 0.5;
  cursor: default;
}

.link-choice strong {
  font-size: 0.9rem;
  line-height: 1.25;
}

.link-choice-detail {
  font-size: 0.76rem;
  color: var(--muted);
}

.link-other {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.link-other-select {
  max-width: 100%;
  margin-left: 0.3rem;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
}

.link-open {
  font-size: 0.8rem;
  color: var(--muted);
}

.link-undo {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .link-row {
    flex-direction: column;
  }

  .link-choice {
    max-width: none;
    width: 100%;
  }
}

/* A listing's eBay photo on a table row. The picture sits beside the name rather than in a column
   of its own: rows without one keep their full width for the title, and nothing shifts. */
.titled-cell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.row-photo {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: cover;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.05);
}

.titled-cell > p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-photo-link {
  display: block;
  flex: 0 0 40px;
  line-height: 0;
  border-radius: 0.4rem;
}

.row-photo-link:hover .row-photo {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Starting a listing
   --------------------------------------------------------------------------- */

.draft-form {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

.draft-form label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 0;
}

.draft-form input,
.draft-form select {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  min-width: 0;
}

/* Evidence on the left, the thing being written on the right, so a price can be checked against
   the listings that justified it without either moving. */
.draft-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.draft-column h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.draft-field {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.7rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.draft-field-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.draft-field input,
.draft-field textarea {
  flex: 1 1 auto;
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  min-width: 0;
}

.draft-field textarea {
  resize: vertical;
  line-height: 1.45;
}

.draft-copy {
  flex: 0 0 auto;
  padding: 0.45rem 0.7rem;
  font-size: 0.8rem;
}

/* eBay refuses a title over 80 characters at posting time, so the count turns red while there is
   still something to be done about it. */
#draft-title-count.is-full {
  color: var(--accent-strong);
  font-weight: 700;
}

.draft-save {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
  margin-top: 0.6rem;
}

.draft-save label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.draft-save select,
.draft-save input {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
}

.draft-save input {
  width: 5.5rem;
}

@media (max-width: 900px) {
  .draft-form,
  .draft-result {
    grid-template-columns: 1fr;
  }
}

/* A listing with sales behind it is evidence; one without is somebody's hope. */
.market-row.has-sold {
  background: rgba(42, 127, 121, 0.07);
}

.market-row.has-sold .market-sold {
  color: var(--teal);
}

/* A listing that has ended still has to be matchable — its sale is the one waiting to record
   itself — but it is not the same thing as one that is still up. */
.link-ended-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.45rem;
  border-radius: 0.6rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.draft-photo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.draft-photo-button {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.draft-photo-button:hover {
  background: var(--accent-strong);
}

.draft-photo-preview {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 0.6rem;
  border: 1px solid var(--line);
}

/* When the tracker is guessing, the screen has to say so — this is the last point where a
   misread model number is still one word to fix rather than a live listing to take down. */
#draft-photo-note.is-unsure {
  color: var(--accent-strong);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Asking the tracker questions
   --------------------------------------------------------------------------- */

.ask-thread {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 6rem;
  max-height: 28rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ask-bubble {
  max-width: min(46rem, 82%);
  padding: 0.65rem 0.9rem;
  border-radius: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.ask-bubble.is-you {
  align-self: flex-end;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.ask-bubble.is-assistant {
  align-self: flex-start;
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.ask-bubble.is-pending {
  opacity: 0.6;
  font-style: italic;
}

.ask-bubble.is-failed {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.ask-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.ask-suggestion {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ask-suggestion:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.ask-form {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.ask-form input {
  flex: 1 1 auto;
  font: inherit;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  min-width: 0;
}

/* A count nobody has checked looks exactly like one that has been. This says which. */
.summary-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
}

/* Forty obvious answers should be one decision, not forty clicks — but they still have to be
   read, so they are laid out to be scanned down rather than tucked behind a count. */
.links-proposals {
  margin: 0.75rem 0 1rem;
  padding: 0.9rem;
  border: 1px solid var(--accent-soft);
  border-radius: 1rem;
  background: rgba(255, 215, 181, 0.16);
}

.links-proposals-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.links-proposals-head > div {
  display: flex;
  gap: 0.5rem;
}

.links-proposal-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  max-height: 30rem;
  overflow-y: auto;
}

.proposal-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.7rem;
  background: var(--panel-strong);
  cursor: pointer;
}

.proposal-row:hover {
  background: #fff;
}

.proposal-photo {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: cover;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.05);
}

.proposal-body {
  min-width: 0;
}

.proposal-ebay {
  margin: 0;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proposal-mine {
  margin: 0;
  font-weight: 600;
  font-size: 0.88rem;
}

.proposal-facts {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.rename-row {
  align-items: flex-start;
  cursor: default;
}

/* The tick box keeps its own size. Every input on the site is full width, and a checkbox in these
   flex rows took that literally: it claimed half the row and pushed the names into a sliver on the
   right. */
.proposal-row input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;
  padding: 0;
  accent-color: var(--accent);
}

.proposal-body {
  flex: 1;
}

/* Struck through, because the old name is what is going away — the new one is the thing to read. */
.rename-from {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
  text-decoration: line-through;
}

.rename-to {
  width: 100%;
  max-width: 34rem;
  margin: 0.15rem 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}

.market-filter {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.62);
}

.market-filter-tab {
  flex: 1 1 auto;
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.market-filter-tab.is-active {
  color: var(--text);
  font-weight: 700;
  background: var(--accent-soft);
}

.link-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.link-add-button {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}

/* Somebody is owed for this and no share has been set. Without saying so the tracker quietly
   answers "nothing", which reads like a settled figure rather than a question nobody answered. */
.needs-fixing {
  color: var(--accent-strong);
  font-weight: 700;
}

.inventory-summary-card.needs-fixing-card {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
}

.inventory-summary-card.needs-fixing-card strong {
  color: var(--accent-strong);
}

/* A refund is the only thing that changes a total without anybody pressing anything, so it looks
   different from the ordinary "here is what sold" banner. */
.ebay-banner.has-refund {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ebay-banner.has-refund #ebay-banner-headline {
  color: var(--accent-strong);
}

/* ---------------------------------------------------------------------------
   The shell: a sidebar beside the work, instead of tabs stacked above it
   --------------------------------------------------------------------------- */

.app-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 24px;
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 56px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  min-width: 0;
}

.sidebar-brand { line-height: 1.05; padding: 0 0.35rem; }
.sidebar-brand .eyebrow { margin: 0; }
.sidebar-brand strong {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.side-tab {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.side-tab:hover { background: rgba(214, 90, 49, 0.09); }
.side-tab.is-active { background: var(--accent-soft); }
.side-tab.is-active .side-tab-name { color: var(--accent-strong); font-weight: 700; }
.side-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.side-tab-name { font-size: 0.95rem; font-weight: 500; }
.side-tab-note { grid-column: 1; font-size: 0.72rem; color: var(--muted); }
.side-tab-count {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  min-width: 1.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.side-tab-count.is-quiet { background: rgba(30, 29, 26, 0.10); color: var(--muted); }

.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.6rem 0.35rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}
.sidebar-foot .people-filter { display: grid; gap: 0.25rem; }
.sidebar-foot select {
  width: 100%;
  font: inherit;
  padding: 0.4rem 0.55rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--text);
}
.sidebar-foot .auth-controls { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.app-main { min-width: 0; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin-bottom: 20px;
}
.topbar .hero-words { flex: 1 1 18rem; min-width: 0; }

/* The menu buttons only exist on a narrow screen, where the sidebar folds away. */
.sidebar-open,
.sidebar-close {
  display: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Today: the screen that says what to do, rather than what already happened
   --------------------------------------------------------------------------- */

.today-panel { grid-column: 1 / -1; min-width: 0; }

.today-jobs { display: flex; flex-direction: column; gap: 0.5rem; }

.today-job {
  display: grid;
  grid-template-columns: 3px auto 1fr auto;
  align-items: center;
  gap: 0 0.9rem;
  padding: 0.75rem 0.9rem 0.75rem 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
  overflow: hidden;
}
.today-job::before {
  content: "";
  grid-column: 1;
  align-self: stretch;
  background: var(--tone, var(--line));
}
.today-job .job-count {
  grid-column: 2;
  padding-left: 0.9rem;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--tone, var(--text));
  font-variant-numeric: tabular-nums;
}
.today-job .job-text { grid-column: 3; min-width: 0; }
.today-job .job-text strong { display: block; font-size: 0.95rem; }
.today-job .job-text span { font-size: 0.82rem; color: var(--muted); }
.today-job .job-go { grid-column: 4; white-space: nowrap; }

.today-job.is-urgent { --tone: var(--accent); }
.today-job.is-waiting { --tone: var(--gold); }
.today-job.is-fine { --tone: var(--teal); }

.today-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
  margin: 1.1rem 0;
}
.today-action {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.today-action:hover { border-color: var(--accent); }
.today-action strong { display: block; font-size: 1rem; }
.today-action span { font-size: 0.8rem; color: var(--muted); }
.today-action.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.today-action.is-primary span { color: rgba(255, 255, 255, 0.85); }
.today-action.is-primary:hover { background: var(--accent-strong); }

.today-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}
.today-columns h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }

.today-money { display: flex; flex-direction: column; }
.money-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.money-line:last-child { border-bottom: 0; }
.money-line .k { color: var(--muted); }
.money-line .v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.money-line .v small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); }
.money-line .v.is-owed { color: var(--accent-strong); }
.money-line .v.is-kept { color: var(--teal); }

.today-recent { display: flex; flex-direction: column; }
.recent-line {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.15rem 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.recent-line:last-child { border-bottom: 0; }
.recent-line img { width: 2.2rem; height: 2.2rem; border-radius: 8px; object-fit: cover; grid-row: 1 / span 2; }
.recent-line .no-photo { background: rgba(0, 0, 0, 0.05); }
.recent-line b { font-size: 0.88rem; font-weight: 500; }
.recent-line .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.recent-line small { grid-column: 2 / -1; font-size: 0.73rem; color: var(--muted); }
.recent-line.is-thin .amt { color: var(--accent-strong); }

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    width: min(1400px, calc(100% - 24px));
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(17rem, 82vw);
    border-radius: 0 24px 24px 0;
    transform: translateX(-102%);
    transition: transform 180ms ease;
    overflow-y: auto;
  }
  .sidebar.is-open { transform: none; }
  .sidebar-open, .sidebar-close { display: inline-flex; }
  .sidebar-close { position: absolute; top: 0.8rem; right: 0.8rem; }
  .today-columns { grid-template-columns: 1fr; }
  .today-job { grid-template-columns: 3px auto 1fr; }
  .today-job .job-go { grid-column: 3; justify-self: start; margin-top: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ---------------------------------------------------------------------------
   Ask from anywhere: the question mark and the panel it opens
   --------------------------------------------------------------------------- */

.ask-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(88, 57, 24, 0.28);
  transition: transform 0.18s ease, background 0.18s ease;
}

.ask-fab:hover,
.ask-fab:focus-visible {
  background: var(--accent-strong);
  transform: translateY(-2px);
}

.ask-fab[hidden] {
  display: none;
}

.ask-dock {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(420px, 92vw);
  padding: 22px 20px 20px;
  background: var(--panel-strong);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(88, 57, 24, 0.16);
  animation: ask-dock-in 0.22s ease;
}

.ask-dock[hidden] {
  display: none;
}

@keyframes ask-dock-in {
  from { transform: translateX(18px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ask-dock { animation: none; }
  .ask-fab  { transition: none; }
}

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

.ask-dock-head h2 {
  margin: 2px 0 0;
  font-size: 1.28rem;
}

.ask-dock-close {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.ask-dock-close:hover { color: var(--text); }

.ask-dock .ask-thread {
  flex: 1;
  min-height: 0;
  /* The shared rule caps the thread at 28rem, which is right on the Ask page and wrong in a
     full-height panel — it left the box floating in the middle with the question line under it. */
  max-height: none;
  overflow-y: auto;
}

.ask-dock .ask-bubble {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Copying a question or an answer
   --------------------------------------------------------------------------- */

.ask-bubble {
  position: relative;
}

.ask-copy {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 0.72rem;
  padding: 2px 7px;
  cursor: pointer;
  /* Hidden until hovered on a mouse, but always there on a touch screen — hover does not exist
     on a phone, and a button that only appears on hover is a button a phone never has. */
  opacity: 0;
  transition: opacity 0.14s ease;
}

.ask-bubble:hover .ask-copy,
.ask-copy:focus-visible {
  opacity: 1;
}

.ask-copy.is-copied {
  opacity: 1;
  border-color: var(--teal);
  color: var(--teal);
}

@media (hover: none) {
  .ask-copy { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Pictures: a bigger look
   --------------------------------------------------------------------------- */

.photo-peek {
  position: fixed;
  z-index: 70;
  padding: 6px;
  border-radius: 14px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.photo-peek[hidden] { display: none; }

.photo-peek img {
  display: block;
  width: 320px;
  height: 320px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

/* Tapping, for the screens that cannot hover. */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 16, 12, 0.72);
  cursor: zoom-out;
}

.photo-lightbox[hidden] { display: none; }

.photo-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  background: #fff;
}

/* ---------------------------------------------------------------------------
   Names that open the listing on eBay
   --------------------------------------------------------------------------- */

.ebay-link {
  color: inherit;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
}

.ebay-link:hover,
.ebay-link:focus-visible {
  color: var(--accent-strong);
  text-decoration-color: var(--accent);
}

.hero-sold-line {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

img.is-zoomable {
  cursor: zoom-in;
}

/* ---------------------------------------------------------------------------
   A pile that belongs to more than one person
   --------------------------------------------------------------------------- */

.row-split {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.share-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  /* The edit row is a grid, so a box appended to it lands in whatever narrow cell is next. These
     are full-width panels underneath the fields, not another column beside them. */
  grid-column: 1 / -1;
  max-width: 720px;
}

.share-editor .dialog-actions {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 2px;
}

.share-editor h4 {
  margin: 0;
  font-size: 0.95rem;
}

.share-editor .share-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.share-line {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 90px minmax(110px, 1fr) 32px;
  gap: 8px;
  align-items: center;
}

/* The chip-in row is who / how much / how many / when — four boxes, no remove button. */
.share-editor .share-line:has(input[type="date"]) {
  grid-template-columns: minmax(110px, 1fr) 110px 110px minmax(140px, 1fr);
}

.share-line input,
.share-line select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  font: inherit;
  color: inherit;
}

.share-total {
  font-size: 0.82rem;
  color: var(--muted);
}

.share-total.is-wrong {
  color: var(--accent-strong);
  font-weight: 600;
}

.share-remove {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

.share-remove:hover { color: var(--accent-strong); }

.contribution-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted);
}

.contribution-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.row-split.needs-saying {
  color: var(--accent-strong);
  font-weight: 600;
}

/* Who gets paid out of a row, one line each — a split pile pays two people. */
.pays-line {
  display: block;
  line-height: 1.35;
}

.pays-line + .pays-line {
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   On a phone, the tables stop being tables
   ---------------------------------------------------------------------------
   A row of the Listed table wants 1090px of columns. On a 390px phone that
   scrolls sideways inside its own box, so reading a price means dragging the
   table left and losing sight of which thing you were looking at.

   Every row becomes a card instead: the name and photo across the top, then one
   labelled line per number. Nothing is hidden — a phone is where the counts get
   checked, so leaving figures out would be the wrong trade.
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .sales-table {
    overflow-x: visible;
  }

  /* The header row named the columns. There are no columns now, and each line
     carries its own name. */
  .inventory-table-header,
  .sales-table-header {
    display: none;
  }

  .inventory-table-row,
  .sale-table-row {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 2px;
    padding: 14px 16px;
  }

  /* Every cell becomes "label ....... value" on one line. */
  .inventory-table-row > *,
  .sale-table-row > * {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }

  .inventory-table-row [data-field]::before,
  .sale-table-row [data-field]::before {
    content: attr(data-phone-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
  }

  /* The name and picture sit across the top, not squeezed beside the numbers. */
  .inventory-table-row .titled-cell,
  .sale-table-row .titled-cell {
    justify-content: flex-start;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }

  .inventory-title,
  .sale-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Buttons go full width and finger-sized rather than sitting in a 90px column. */
  .inventory-actions,
  .sale-actions {
    justify-content: stretch;
    margin-top: 8px;
  }

  .inventory-actions button,
  .sale-actions button {
    flex: 1;
    min-height: 42px;
  }

  /* The editor inside a row was a grid of narrow boxes; one thing per line. */
  .inventory-edit-table-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .share-line {
    grid-template-columns: 1fr 70px;
  }

  .share-editor .share-line:has(input[type="date"]) {
    grid-template-columns: 1fr 1fr;
  }

  .share-editor {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   A phone gets its own shape
   ---------------------------------------------------------------------------
   Not the desktop layout made narrower. The tables become lists of one-line
   rows, the menu moves under your thumb, and tapping a thing opens it properly
   rather than unfolding it in place.
   --------------------------------------------------------------------------- */

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

.list-search {
  display: block;
  margin: 0 0 12px;
}

.list-search input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  font: inherit;
  color: inherit;
}

.list-search input:focus-visible {
  outline: none;
  border-color: var(--accent);
}

/* The bar along the bottom. Hidden on a computer, where the sidebar is better. */
.tab-bar { display: none; }

.thing-sheet { display: none; }

@media (max-width: 720px) {
  .tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Below the bar is the home indicator on a modern iPhone; padding-bottom keeps
       the buttons above it rather than under the thumb-swipe strip. */
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--panel-strong);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(88, 57, 24, 0.08);
  }

  .tab-bar-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    min-height: 48px;
    border: none;
    background: none;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
  }

  .tab-bar-icon { font-size: 1.15rem; line-height: 1; }
  .tab-bar-name { font-size: 0.68rem; letter-spacing: 0.01em; }

  .tab-bar-button.is-active { color: var(--accent-strong); }
  .tab-bar-button.is-active .tab-bar-name { font-weight: 600; }

  .tab-bar-count {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translateX(18px);
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    line-height: 16px;
    text-align: center;
  }

  .tab-bar-count[hidden] { display: none; }

  /* The bar sits over the page, so the page needs room to scroll past it. */
  .layout { padding-bottom: 84px; }

  /* The hamburger stays. Signing in and choosing whose things to show both live in the sidebar,
     and hiding the only way to open it made signing in on a phone impossible — there was
     genuinely nowhere to press. The bottom bar does the moving about; the sidebar is now where
     you sign in and pick a person, so the list of screens inside it is hidden as a duplicate. */
  .sidebar .sidebar-nav { display: none; }

  .sidebar-brand { margin-bottom: 4px; }

  .sidebar-foot {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .people-filter select,
  .auth-controls button {
    min-height: 44px;
  }

  /* The chatbot button moves up off the tab bar. */
  .ask-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 1.35rem;
  }
}

@media (max-width: 720px) {
  /* ---- one line per thing, not a card of labels ----
     The labelled-card version was honest and unusable: 288px a row, 105 rows,
     35 phone screens of scrolling. A row is now a photograph, a name, and the
     one number you came for. Everything else is a tap away. */
  .inventory-table-row,
  .sale-table-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "photo name figure";
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    padding: 10px 14px;
    min-width: 0;
    cursor: pointer;
  }

  /* display:contents, not grid-area. The name lives inside this cell, so making the cell a grid
     item stacked the photograph and the name on top of each other — 81px of cell for what should
     be a 44px picture beside two lines of text. Dissolving the cell lets both take their own
     column instead. */
  .inventory-table-row .titled-cell,
  .sale-table-row .titled-cell {
    display: contents;
  }

  .inventory-table-row .row-photo-link,
  .sale-table-row .row-photo-link {
    grid-area: photo;
  }

  .inventory-table-row .row-photo,
  .sale-table-row .row-photo {
    width: 44px;
    height: 44px;
    flex: none;
  }

  /* The name lifts out of the photo cell and takes the middle column. */
  .inventory-table-row .inventory-title,
  .sale-table-row .sale-title {
    grid-area: name;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.25;
  }

  .row-split { font-size: 0.72rem; }

  /* Everything that is not the headline number is folded away. Nothing is lost —
     it is all on the screen that opens when the row is tapped. */
  .inventory-table-row > *:not(.titled-cell):not(.inventory-title):not([data-field="quantity"]),
  .sale-table-row > *:not(.titled-cell):not(.sale-title):not([data-field="iPay"]) {
    display: none;
  }

  .inventory-table-row [data-field="quantity"],
  .sale-table-row [data-field="iPay"] {
    grid-area: figure;
    display: block;
    justify-self: end;
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .inventory-table-row [data-field]::before,
  .sale-table-row [data-field]::before {
    content: none;
  }
}

/* ---- the screen that opens when a row is tapped ---- */

@media (max-width: 720px) {
  .thing-sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    animation: sheet-in 0.18s ease;
  }

  .thing-sheet[hidden] { display: none; }

  @keyframes sheet-in {
    from { transform: translateX(16px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
  }

  body.sheet-open { overflow: hidden; }

  .thing-sheet-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
    background: var(--panel-strong);
    border-bottom: 1px solid var(--line);
  }

  .thing-sheet-bar strong {
    font-size: 1rem;
    line-height: 1.25;
    min-width: 0;
  }

  .thing-sheet-back {
    flex: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--accent-strong);
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
  }

  .thing-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .thing-sheet-photo {
    width: 100%;
    max-height: 45vh;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
  }

  .thing-sheet-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 16px;
    margin: 0;
  }

  .thing-sheet-facts dt {
    color: var(--muted);
    font-size: 0.86rem;
  }

  .thing-sheet-facts dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .thing-sheet-facts dd small {
    display: block;
    font-weight: 400;
    color: var(--muted);
    font-size: 0.74rem;
  }

  .thing-sheet-link {
    text-align: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--accent-strong);
    text-decoration: none;
  }

  .thing-sheet-edit { min-height: 48px; }

  /* The strip of photos fits rather than running off the side. */
  .hero-photos { overflow: hidden; }
  .hero-photos > *:nth-child(n + 5) { display: none; }
}

@media (max-width: 720px) {
  /* ---- get to the point ----
     The banner across the top was 293px and a section's explanation another 219px: 512px of
     preamble on an 844px screen, so on Sell something even the "Take a photo" button was below
     the fold. An app puts the thing you came for on the first screen. */

  .topbar {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
  }

  #hero-headline {
    font-size: 1.35rem;
    line-height: 1.15;
    margin: 0;
  }

  /* The running totals and the photographs belong to Today. Every other screen has its own
     heading saying what it is, and repeating the shelf's value above it says nothing. */
  body:not([data-view="today"]) #hero-headline,
  body:not([data-view="today"]) #hero-line,
  body:not([data-view="today"]) .hero-photos {
    display: none;
  }

  body:not([data-view="today"]) .topbar {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* A section's explanation is worth reading once, not every time it is opened. It stays, small
     and quiet, rather than taking a third of the screen. */
  .section-heading {
    gap: 4px;
  }

  .section-heading h2 {
    font-size: 1.15rem;
    margin: 0;
  }

  .section-heading .inline-note,
  .panel > .inline-note {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .eyebrow { font-size: 0.62rem; }
}

@media (max-width: 720px) {
  /* ---- put what you came for first ----
     On Sold you scrolled past 660px of eBay tools — "Take the counts from eBay" and "Check a
     price" — before reaching a single sale. They are useful and stay reachable; they just belong
     below the thing the screen is named after rather than in front of it. Ordering rather than
     hiding, because hiding a control on a phone is how signing in became impossible. */
  .layout {
    display: flex;
    flex-direction: column;
  }

  .layout > * { order: 10; }

  #ebay-banner.is-tucked,
  #listing-sync-panel,
  #market-panel {
    order: 90;
  }

  /* Everything eBay-ish shrinks too, since it is no longer the first thing read. */
  #ebay-banner.is-tucked {
    padding: 12px 14px;
  }

  /* ---- the four counts across the top of Listed ----
     212px of cards saying what the sidebar badge already says. Two across instead of one, and
     smaller, so the listings start on the first screen. */
  .inventory-summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .inventory-summary-card {
    padding: 10px 12px;
  }

  .inventory-summary-card p { font-size: 0.7rem; }
  .inventory-summary-card strong { font-size: 1.05rem; }
  .summary-note { font-size: 0.68rem; }

  /* The search box is the thing you reach for, so it sits above the counts. */
  .list-search { order: -1; }
}

@media (max-width: 720px) {
  /* ---- the money summary on Sold ----
     Six cards stacked one per line came to 687px, plus 283px of bars: a thousand pixels of
     summary before a single sale. Two across and shorter says the same thing in a third of the
     room, and these figures are the reason the screen exists so they stay at the top. */
  #stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #stats-grid > * {
    padding: 10px 12px;
  }

  #stats-grid p,
  #stats-grid .stat-label {
    font-size: 0.7rem;
  }

  #stats-grid strong,
  #stats-grid .stat-value {
    font-size: 1.05rem;
  }

  /* The bars draw "Liam keeps" against "owed", which are two of the six cards immediately above
     them. On a computer the picture is worth the room; on a phone it is 283px of repetition
     between you and your sales, so the numbers alone do. Ordering could not move it — it sits
     inside the stats panel rather than beside it. */
  .allocation-panel { display: none; }
}

/* ---- the screen that asks before deleting listings eBay has lost ---- */
.gone-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.gone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
  cursor: pointer;
}

.gone-tick {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}

.gone-title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}

.gone-detail {
  flex: none;
  color: var(--muted);
  font-size: 0.85rem;
}

.gone-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 720px) {
  .gone-row {
    flex-wrap: wrap;
  }

  /* The name takes the row; what is left of it goes underneath rather than squeezing. */
  .gone-title {
    flex: 1 1 60%;
  }

  .gone-detail {
    flex: 1 1 100%;
    padding-left: 30px;
  }

  .gone-actions {
    flex-direction: column;
  }

  .gone-actions button {
    width: 100%;
    min-height: 44px;
  }
}

/* Price and count on a listing matched to eBay: readable, visibly not for typing into. */
input.is-from-ebay {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
}

/* ---- signing in ---------------------------------------------------------------------------- */

.sign-in-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding-inline: 16px;
  padding-block: 32px;
}

.sign-in-card {
  display: grid;
  gap: 14px;
  width: min(400px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.sign-in-card h1 {
  margin: 0 0 4px;
  font-size: 1.8rem;
}

.sign-in-card .eyebrow {
  margin: 0;
}

.sign-in-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.sign-in-card button {
  min-height: 48px;
}

.sign-in-error {
  min-height: 1.2em;
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 600;
}

.sign-in-error:empty {
  min-height: 0;
}

.sign-in-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- view-only, and what only the admin sees ----------------------------------------------- */

.access-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  grid-column: 1 / -1;
  padding: 12px 18px;
  border: 1px solid rgba(42, 127, 121, 0.3);
  border-radius: 16px;
  background: rgba(42, 127, 121, 0.1);
}

.access-banner p {
  margin: 0;
  font-weight: 600;
}

body:not(.is-admin) .admin-only {
  display: none !important;
}

/* While a sign-in screen is up, it is the only thing on the page. */
body.is-signing-in > *:not(.sign-in-screen):not(script) {
  display: none !important;
}

/* Somebody who can look but not change things is not offered the buttons that change things. The
   API refuses them regardless; hiding them just stops the page offering buttons that only say no.
   Asking questions stays, and so does anything that only reads. */
body.is-view-only .edit-button,
body.is-view-only .delete-button,
body.is-view-only .danger-button,
body.is-view-only .mark-sold-button,
body.is-view-only .payout-pay-form,
body.is-view-only .payout-history-remove,
body.is-view-only .thing-sheet-edit,
body.is-view-only #ebay-check-now,
body.is-view-only #sync-load,
body.is-view-only #rename-suggest,
body.is-view-only #listing-sync-panel,
body.is-view-only .side-tab[data-view="draft"],
body.is-view-only .side-tab[data-view="links"],
body.is-view-only .tab-bar-button[data-view="draft"],
body.is-view-only .tab-bar-button[data-view="links"],
body.is-view-only .today-action[data-go="draft"],
body.is-view-only .today-action[data-go="links"],
body.is-view-only #today-jobs,
body.is-view-only .side-tab-count[data-count="today"],
body.is-view-only .side-tab-count[data-count="links"] {
  display: none !important;
}

.access-panel h3 {
  margin: 18px 0 8px;
  font-size: 0.95rem;
}

.access-requests,
.access-people {
  display: grid;
  gap: 8px;
}

.access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.access-row.is-request {
  border-color: rgba(214, 90, 49, 0.35);
  background: rgba(255, 215, 181, 0.35);
}

.access-row p {
  margin: 0;
  font-weight: 600;
}

.access-row > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.access-row small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

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

.access-actions button {
  padding: 7px 12px;
  font-size: 0.85rem;
}

.access-role {
  width: auto;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.85rem;
}

.access-days {
  width: 72px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 0.85rem;
}

.access-days-unit {
  align-self: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- the tracker's own "are you sure?" ---- */

.ask-dialog {
  width: min(420px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--text);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.ask-dialog::backdrop {
  background: rgba(30, 29, 26, 0.46);
  backdrop-filter: blur(3px);
}

.ask-dialog form {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.ask-dialog h2 {
  margin: 0;
  font-size: 1.25rem;
}

.ask-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.ask-dialog label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.ask-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ask-dialog button {
  min-height: 42px;
}

@media (max-width: 720px) {
  .ask-dialog .dialog-actions {
    flex-direction: column-reverse;
  }

  .ask-dialog button {
    width: 100%;
    min-height: 46px;
  }
}