/* ============================================================================
   JSOOR Gaming · THE SELL SURFACE — layout only
   ----------------------------------------------------------------------------
   Three regions: the menu, the ticket, and the money rail at 420px. The money
   rail is the retail checkout column: its figure is pinned at the top and its
   commit at the bottom, and only what is between them scrolls — a column that
   collects money has to keep the total in view while it does.

   ONE COLOUR, ONE MEANING. Amber is "not recorded yet" — the same amber as the
   tab's dirty dot — so the draft and a typed tender wear it, and nothing that
   is already on the visit ever does.

   Motion follows shell.css's doctrine. Adding an item, changing a quantity and
   pressing a method happen dozens of times a night, so they only get the press
   scale. The one thing that expands in place and is occasional — what a line
   went for — fades in from 98%, 150ms, ease-out, from its own line.
   ========================================================================= */

.stage.stage--ticket { grid-template-columns: minmax(0, 1fr) 420px; }
.sell-work { min-block-size: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.sell-work > .panel, .sell-money { min-block-size: 0; overflow: hidden; }

.sell-kbd, .sell-commit kbd, .sell-why kbd {
  display: inline-block; margin-inline-start: 6px; padding: 1px 5px; border-radius: var(--r-xs);
  border: 1px solid color-mix(in oklab, currentColor 35%, transparent);
  font: 500 var(--t-micro)/1.3 var(--font-mono); letter-spacing: .02em; opacity: .8;
}
.sell-hint { font-size: var(--t-meta); line-height: 1.5; color: var(--muted); }
.sell-hint.is-warn, .sell-why.is-warn { color: var(--warn-fg); }
.sell-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sell-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block: 14px 8px; }
.sell-x { flex: none; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 0; border-radius: var(--r-xs);
          background: transparent; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .sell-x:hover { background: var(--sunken); color: var(--ink); } }

/* ══ THE MENU ═══════════════════════════════════════════════════════════════ */
.sell-menu { gap: 12px; }
.sell-for { display: flex; flex-direction: column; gap: 6px; }
.sell-groups { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain;
               display: flex; flex-direction: column; gap: 14px; margin-inline: -16px; padding-inline: 16px; }
.sell-group-h { margin: 0 0 6px; font-size: var(--t-meta); font-weight: 600; color: var(--muted); }
.sell-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sell-item { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-block-size: 68px;
             padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card);
             color: var(--ink); font-family: inherit; text-align: start; cursor: pointer;
             transition: transform var(--dur-press) var(--ease-out), border-color var(--dur) var(--ease); }
.sell-item b { font-size: var(--t-body); font-weight: 600; line-height: 1.3; }
.sell-item-price { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--muted); }
.sell-item:active:not([disabled]) { transform: scale(0.97); }
.sell-item[disabled] { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .sell-item:hover:not([disabled]) { border-color: var(--accent); }
}

/* ══ THE TICKET ═════════════════════════════════════════════════════════════ */
.sell-ticket { gap: 10px; }
.sell-scroll { flex: 1; }
.sell-row { display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding-block: 6px;
            border-block-end: 1px solid var(--hairline); font-size: var(--t-body); }
.sell-q { flex: none; inline-size: 34px; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--faint); }
.sell-name { flex: 1; min-inline-size: 0; color: var(--ink); line-height: 1.35; }
.sell-name em { font-style: normal; color: var(--muted); }
.sell-name em::before { content: "· "; color: var(--faint); }
.sell-badge { margin-inline-start: 6px; vertical-align: 1px; }
.sell-fig, .sell-pricebtn { flex: none; font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.sell-fig s, .sell-pricebtn s { margin-inline-end: 8px; color: var(--faint); font-weight: 400; }

/* The draft: under the ticket, dashed in amber, and never mistaken for owed. */
.sell-draft { margin-block-start: 14px; padding: 10px 12px 4px; border: 1.5px dashed var(--warn-bd);
              border-radius: var(--r-sm); background: color-mix(in oklab, var(--warn-bg) 35%, transparent); }
.sell-draft:not(.has-lines) { border-color: var(--hairline); background: transparent; }
.sell-draft:not(.has-lines) .js-chip { opacity: .6; }
.sell-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-end: 6px; }
.sell-draft-sum { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--warn-fg); }
.sell-draft:not(.has-lines) .sell-draft-sum { color: var(--faint); }
.sell-draft-empty { padding-block: 6px 10px; font-size: var(--t-meta); line-height: 1.5; color: var(--muted); }
.sell-drow .sell-row { border-block-end-color: color-mix(in oklab, var(--warn-bd) 40%, transparent); }
.sell-drow:last-child .sell-row { border-block-end: 0; }

.sell-qty { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--sunken); }
.sell-qty button { inline-size: 30px; block-size: 30px; border: 0; background: transparent; color: var(--ink-2); font-size: 15px; cursor: pointer;
                   border-radius: var(--r-pill); transition: transform var(--dur-press) var(--ease-out); }
.sell-qty button:active { transform: scale(0.9); }
.sell-qty span { min-inline-size: 18px; text-align: center; font-family: var(--font-mono); font-size: var(--t-meta); }
/* The price is a BUTTON, because it is the thing most often changed. */
.sell-pricebtn { padding: 5px 9px; border: 1px solid transparent; border-radius: var(--r-xs); background: transparent;
                 font-size: var(--t-body); cursor: pointer; text-decoration: underline dotted var(--faint); text-underline-offset: 4px; }
.sell-drow.is-open .sell-pricebtn { border-color: var(--accent); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .sell-pricebtn:hover { border-color: var(--border-strong); } }

/* What it went for — in place, from its own line. */
.sell-price-edit { display: flex; flex-direction: column; gap: 12px; margin-block: 2px 10px; padding: 12px;
                   border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card);
                   transform-origin: top right; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
@starting-style { .sell-price-edit { opacity: 0; transform: scale(0.98); } }
.sell-price-top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sell-price-in { display: flex; flex-direction: column; gap: 6px; flex: 0 1 180px; }
.sell-price-read { display: flex; gap: 18px; margin: 0; }
.sell-price-read dt { font-size: var(--t-micro); color: var(--faint); }
.sell-price-read dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--t-body); color: var(--ink); }
.sell-price-read .is-down { color: var(--info-fg); }
.sell-price-read .is-up { color: var(--warn-fg); }
.sell-price-row { display: flex; flex-direction: column; gap: 6px; }
.sell-price-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.sell-commit { flex: none; display: flex; flex-direction: column; gap: 6px; padding-block-start: 12px; border-block-start: 1px solid var(--hairline); }
.sell-commit .js-btn { inline-size: 100%; }
.sell-why { font-size: var(--t-meta); line-height: 1.45; color: var(--muted); }

/* ══ THE MONEY RAIL ═════════════════════════════════════════════════════════ */
.sell-money { gap: 0; padding: 0; }
.sell-money-scroll { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 16px 12px; }
.sell-money > .sell-commit { padding: 12px 16px 14px; }

/* THE ONE FIGURE. Big, in the display face, and pinned. It is the only thing
   on the tab set this large, because it is the only thing on the tab an
   operator must be able to read from where the customer is standing. */
.sell-figure { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px;
               border-block-end: 1px solid var(--hairline); }
.sell-figure-k { font-size: var(--t-meta); font-weight: 600; color: var(--muted); }
.sell-figure-n { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; line-height: .95;
                 letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sell-figure-sub { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--faint); }
.sell-figure.is-clear .sell-figure-n { color: var(--ok-fg); }
.sell-figure.is-change .sell-figure-n { color: var(--warn-fg); }

.sell-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-block-start: 14px; padding: 4px;
             border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--sunken); }
.sell-mode-opt { min-block-size: 34px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted);
                 font: 600 var(--t-body) var(--font-sans); cursor: pointer; transition: transform var(--dur-press) var(--ease-out); }
.sell-mode-opt.is-on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.sell-mode-opt[disabled] { opacity: .45; cursor: not-allowed; }
.sell-mode-opt:active:not([disabled]) { transform: scale(0.98); }
.sell-mode + .sell-hint { margin-block-start: 8px; }

.sell-people { display: flex; flex-direction: column; gap: 6px; }
.sell-rec { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ok-fg); }
.sell-rec.is-bad { color: var(--bad-fg); }
.sell-person { display: flex; align-items: center; gap: 12px; inline-size: 100%; padding: 9px 12px; border: 1px solid var(--hairline);
               border-radius: var(--r-sm); background: var(--raised); color: var(--ink); font-family: inherit; text-align: start; cursor: pointer;
               transition: transform var(--dur-press) var(--ease-out); }
.sell-person.is-on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.sell-person[disabled] { cursor: default; opacity: .7; }
.sell-person:active:not([disabled]) { transform: scale(0.99); }
.sell-person-main { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.sell-person-main b { font-size: var(--t-body); font-weight: 600; }
.sell-person-main > span { font-size: var(--t-micro); color: var(--muted); }
.sell-person-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 2px; }
.sell-person-owes { margin-inline-start: auto; flex: none; font-family: var(--font-mono); font-size: var(--t-body); font-weight: 600; }
.sell-person-owes.is-zero { font-family: var(--font-sans); font-size: var(--t-meta); font-weight: 500; color: var(--faint); }
.sell-attr { margin-block-start: 6px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--sunken);
             font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2); }
.sell-attr b { color: var(--ink); }

/* The rule is ON the method: where the money lands is its second line. */
.sell-tenders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sell-method { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 10px;
               border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); color: var(--ink);
               font-family: inherit; text-align: start; cursor: pointer; transition: transform var(--dur-press) var(--ease-out); }
.sell-method b { font-size: var(--t-body); font-weight: 600; }
.sell-method span { font-size: var(--t-micro); color: var(--faint); }
.sell-method.is-drawer span { color: var(--ok-fg); }
.sell-method:active:not([disabled]) { transform: scale(0.97); }
.sell-method[disabled] { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .sell-method:hover:not([disabled]) { border-color: var(--accent); } }
.sell-tenders + .sell-hint { margin-block-start: 10px; }

.sell-tender-list { display: flex; flex-direction: column; gap: 6px; margin-block-start: 10px; }
.sell-tender { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: var(--r-sm);
               border: 1px solid var(--warn-bd); background: color-mix(in oklab, var(--warn-bg) 35%, transparent); }
.sell-tender-k { display: flex; flex-direction: column; gap: 2px; flex: 1; min-inline-size: 0; }
.sell-tender-k b { font-size: var(--t-body); font-weight: 600; }
.sell-tender-k span { font-size: var(--t-micro); color: var(--muted); }
.sell-tender.is-drawer .sell-tender-k span { color: var(--ok-fg); }
.sell-tender-amt { flex: 0 0 150px; }
.sell-tender-amt .js-input { min-block-size: 40px; }
.sell-sum { margin-block-start: 8px; }

.sell-report { margin-block-start: 12px; padding: 4px 12px 2px; border: 1px solid var(--ok-bd); border-radius: var(--r-sm);
               background: color-mix(in oklab, var(--ok-bg) 40%, transparent);
               transition: opacity 200ms var(--ease-out); }
@starting-style { .sell-report { opacity: 0; } }
.sell-report .sell-block-head { margin-block: 6px 0; }
.sell-report .kv { padding-block: 7px; font-size: var(--t-micro); }

/* ══ NARROWER THAN THE DESIGN SIZE ═══════════════════════════════════════════
   The menu stacks over the ticket before anything is dropped, and the rail
   keeps its column so the figure stays pinned. Below that the whole stage
   stacks and scrolls itself — nothing is hidden to keep a layout. */
@media (max-width: 1360px) {
  .stage.stage--ticket { display: grid; grid-template-columns: minmax(0, 1fr) 380px; overflow: hidden; }
  .sell-work { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr); }
  .sell-tenders { grid-template-columns: repeat(2, 1fr); }
  .sell-figure-n { font-size: 2.8rem; }
}
@media (max-width: 860px) {
  .stage.stage--ticket { display: flex; flex-direction: column; overflow-y: auto; }
  .sell-work { grid-template-rows: none; }
  .sell-work > .panel, .sell-money { overflow: visible; flex: none; }
  .sell-groups { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .sell-item, .sell-qty button, .sell-mode-opt, .sell-person, .sell-method, .sell-price-edit { transition-property: opacity; }
  .sell-item:active, .sell-qty button:active, .sell-mode-opt:active, .sell-person:active, .sell-method:active { transform: none; }
  @starting-style { .sell-price-edit { transform: none; } }
}