/* The price sheet on the client's Billing in the desktop console (desk-prices.js). Rows on a glass
   box that scrolls sideways in a narrow window; a typed-over price turns its field ochre; a waived
   one-time price is struck through; change panels are ink under the row; the add row has a dashed
   top rule. Classes start with d-ps / d-pmoney / d-pcell. Tokens come from desk.css (body.is-desk). */

.d-ps { background: rgba(251, 247, 240, .78); border-radius: 14px; overflow-x: auto; scrollbar-width: thin; }
.d-ps__sheet { min-width: 880px; display: flex; flex-direction: column; }
.d-ps [hidden] { display: none !important; }

/* rows: Item · Catalog · One-time · Monthly or Yearly · Billed · Tag · actions */
.d-ps__row { display: grid; grid-template-columns: minmax(170px, 1.7fr) minmax(100px, 1fr) 124px 136px 86px minmax(96px, auto) minmax(80px, auto); gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-900); transition: background .4s var(--ease); }
.d-ps__row--head { border-top: 0; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.d-ps__row.is-flash { background: var(--ochre-100); box-shadow: inset 3px 0 0 var(--ochre); }
.d-ps__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d-ps__item strong { font-weight: 600; font-size: 14px; }
.d-ps__item .d-meta { overflow-wrap: anywhere; }
.d-ps__cat { font: 500 12.5px var(--mono); color: var(--ink-500); }
.d-ps__cell { min-width: 0; }
.d-ps__billed { font-size: 13px; color: var(--ink-600); }
.d-ps__tag { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.d-ps__rowacts { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-ps__none::before { content: "\2014"; font-size: 12.5px; color: var(--ink-500); }
.d-ps__money { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.d-ps__money .d-pcell { flex: 1; }
.d-ps__amt { font: 500 13.5px var(--mono); color: var(--ink-900); }

/* a note or a panel spans the whole row */
.d-ps__note, .d-ps__panel { grid-column: 1 / -1; }
.d-ps__note { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: var(--sand-300); font-size: 13.5px; }
.d-ps__note--bad { background: var(--warn-bg); color: var(--warn-ink); }
.d-ps__panel { display: flex; flex-direction: column; gap: 8px; }

/* the $ field: 30px, mono */
.d-pmoney { display: flex; align-items: center; gap: 2px; width: 100%; height: 30px; padding: 0 8px; border-radius: 8px; background: var(--sand-50); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .1); font: 500 13px var(--mono); cursor: text; }
.d-pmoney__cur { color: var(--ink-500); }
.d-pmoney__in { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 500 13.5px var(--mono); color: var(--ink-900); }
.d-pmoney:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.d-pmoney.is-custom { background: var(--ochre-100); box-shadow: inset 0 0 0 1.5px var(--ochre); }
.d-pmoney.is-waived .d-pmoney__in { text-decoration: line-through; color: var(--ink-500); }
.d-pmoney.is-off { opacity: .7; cursor: default; }
.d-pcell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d-pcell__note { font: 500 11px var(--mono); color: var(--ink-500); }
.d-pcell__note--waived { color: var(--sage-ink); text-transform: uppercase; letter-spacing: .08em; }

/* the ink panels: Next bill or Now, Charge it on the next bill, Remove */
.d-ps__ink { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ink-900); color: var(--sand-100); font-size: 14px; }
.d-ps__ink p { margin: 0; }
.d-ps__ink strong { font-weight: 600; }
.d-ps__phead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.d-ps__effect { margin: 0; font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.d-ps__why { margin: 0; font-size: 12.5px; color: var(--ink-300); }
.d-ps__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-ps__agree { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; cursor: pointer; align-self: flex-start; }
.d-ps__agree input { width: 16px; height: 16px; margin: 0; accent-color: var(--rust-600); cursor: pointer; }
.d-ps__ink .d-seg { background: rgba(243, 236, 224, .12); }
.d-ps__ink .d-seg > button { color: var(--ink-300); }
.d-ps__ink .d-seg > [aria-pressed="true"] { background: var(--sand-100); color: var(--ink-900); }
.d-ps__ink .d-btn:not(.d-btn--primary) { background: rgba(243, 236, 224, .14); color: var(--sand-100); }
.d-ps__ink .d-btn:not(.d-btn--primary):hover { background: rgba(243, 236, 224, .22); }
.d-ps__ink .d-link { color: var(--sand-300); }

/* the light forms: edit a custom charge, add a charge */
.d-ps__form { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(31, 26, 22, .05); }
.d-ps__form > .d-meta { margin: 0; }
.d-ps__grid { display: grid; grid-template-columns: minmax(180px, 1.4fr) 140px auto; gap: 10px 12px; align-items: end; }
.d-ps__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.d-ps__field--wide { grid-column: 1 / -1; }
.d-ps__flabel { font: 500 12.5px var(--d-chrome); color: var(--ink-600); }
.d-ps__in { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; outline: 0; background: var(--sand-50); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .1); font: 400 13.5px var(--body); color: var(--ink-900); min-width: 0; }
.d-ps__in:focus { box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.d-ps__field .d-seg { align-self: flex-start; }
.d-ps__result { display: flex; flex-direction: column; gap: 8px; }
.d-ps__result:empty { display: none; }

/* + Add a charge */
.d-ps__add { padding: 10px 16px 12px; border-top: 1px dashed rgba(31, 26, 22, .25); }
.d-ps__addbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.d-ps__addbar .d-meta { flex: 1 1 260px; }

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