/* ═════════════════════════════════════════════════════════════════════════════════════════
   CatMeowPOS — redesign port: BINS profile + CHECKOUT receipt
   Loads after app.css. Additive only: it defines new classes and scopes every override to
   .co-receipt, so nothing here can reach a screen that did not opt in.
   Self-contained: no external references of any kind, which the shell contract rejects.

   Phone note: checked at 390px (Ian's iPhone), which is where the four-across stat strips and
   the two-column metrics grid have to fold. Breakpoints match app.css's own 560/780 pair
   rather than inventing a third.
   ═════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Bin tile ─────────────────────────────────────────────────────────────────────────── */
.bin-block{position:relative}
.bin-block.neg{border-color:rgba(255,71,87,.45)}
.bin-negflag{position:absolute;top:9px;right:9px;font-size:9px;font-weight:800;letter-spacing:.08em;
  padding:2px 6px;border-radius:5px;background:rgba(255,71,87,.16);color:var(--red);border:1px solid rgba(255,71,87,.4)}
.bin-block.neg .bin-chip{margin-right:34px}
.bin-price{display:flex;align-items:baseline;gap:6px;font-size:19px;font-weight:700;
  font-family:var(--font-mono-ish);margin:0 0 9px;line-height:1.1}
.bin-price>span{font-size:11px;font-weight:600;color:var(--muted);font-family:inherit}
.bin-price .bin-units{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted)}
.bin-strip3{display:flex;align-items:stretch;gap:6px;margin:0 0 10px}
.bin-strip3>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  border:1px solid var(--line);border-radius:7px;padding:4px 2px}
.bin-strip3 .lb{font-size:9px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.bin-strip3 .vl{font-size:12px;font-weight:700}

/* ── Bin profile: tabs ────────────────────────────────────────────────────────────────── */
.bin-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-2px 0 14px}
.bin-tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  color:var(--muted);font-weight:700;font-size:13px;padding:8px 14px}
.bin-tabs button.on{color:var(--txt);border-bottom-color:var(--accent2)}
.bin-tabs button:hover{color:var(--txt)}
/* The inactive tab is hidden, never unmounted — _binSaveEdits reads bp_name/bp_fund/bp_icon/
   bp_color and returns early if bp_name is gone, so unmounting would silently drop an edit. */
.bin-tab[hidden]{display:none !important}

/* ── Bin profile: recovery bar + stat strip ───────────────────────────────────────────── */
.bin-recline{font-size:12.5px;color:var(--muted);margin:7px 0 14px}
.bin-recline b{color:var(--txt)}
.bin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.bin-stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 8px;text-align:center}
.bin-stat .k{font-size:10px;letter-spacing:.04em;color:var(--muted)}
.bin-stat .v{font-size:19px;font-weight:700;margin-top:1px;font-family:var(--font-mono-ish)}
.bin-stat .v span{font-size:13px;color:var(--muted);font-weight:600}

/* ── Bin profile: cost entries ────────────────────────────────────────────────────────── */
.bin-entwrap{background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.bin-entry{display:flex;align-items:center;gap:10px;padding:9px 11px;min-width:0}
.bin-entry+.bin-entry{border-top:1px solid var(--line)}
.bin-entry .mid{flex:1;min-width:0}
.bin-entry .n1{font-size:12.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bin-entry .n2{font-size:10.5px;color:var(--muted);line-height:1.3}
.bin-entry .qty{flex:none;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:1px 8px;font-size:11px;color:var(--muted);white-space:nowrap}
.bin-entry .amt{flex:none;font-weight:700;font-size:12.5px;white-space:nowrap}
.bin-entry.rec{background:rgba(47,143,255,.06)}
.bin-entry.rec .amt{color:var(--muted)}
.bin-enttot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;
  border-top:1px solid var(--line);background:var(--panel);font-size:11.5px;color:var(--muted)}
.bin-enttot b{margin-left:auto;color:var(--txt)}

/* ── Bin profile: metrics tab ─────────────────────────────────────────────────────────── */
.bin-metgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bin-kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--line)}
.bin-kv span:first-child{color:var(--muted);flex:none}
.bin-kv span:last-child{text-align:right;min-width:0}
.bin-kv span.muted{color:var(--muted)}
.bin-warnbox{background:rgba(255,159,67,.10);border:1px solid rgba(255,159,67,.38);border-radius:9px;
  padding:9px 11px;font-size:11.5px;color:var(--orange);margin-top:11px}
.bin-warnbox b{color:var(--orange)}
.bin-warnbox .btn{color:var(--txt)}

@media(max-width:560px){
  .bin-stats{grid-template-columns:1fr 1fr}
  .bin-metgrid{grid-template-columns:1fr;gap:4px}
  .bin-stat .v{font-size:17px}
  .bin-entry .qty{display:none}          /* the unit count is in the running total below */
  .bin-tabs button{flex:1;padding:8px 6px}
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   CHECKOUT — "single receipt screen" (design B) skin over the shipped Confirm transaction
   modal. Every rule is scoped to .co-receipt, which 02-coReceiptSkin.js puts on that one
   modal. The markup underneath is completeTransaction's buildPreview(), untouched: this
   changes how those numbers look, never which numbers they are.
   ═════════════════════════════════════════════════════════════════════════════════════════ */
.modal.co-receipt{max-width:660px}
.co-receipt .modal-head{border-bottom-color:var(--line2)}
.co-receipt .modal-body{padding:16px 18px 18px}

/* The two summary blocks — "I give" / "Buyer gives" — become the receipt's two columns. */
.co-receipt .modal-body>.row2>.hint{background:var(--panel2);border:1px solid var(--line2);
  border-radius:11px;padding:11px 13px;font-size:12.5px;color:var(--txt);line-height:1.55}
.co-receipt .modal-body>.row2>.hint b{display:block;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:4px;
  font-family:var(--font-mono-ish)}

/* Warning strip: the shipped short/over notice is the one review flag that exists today, so
   it gets design A's strip treatment rather than a left border on a grey box. */
.co-receipt .hint[style*="--orange"]{background:rgba(255,159,67,.10);border:1px solid rgba(255,159,67,.38);
  border-left-width:3px;border-radius:9px;color:var(--orange)}

.co-receipt .section-title{margin:18px 0 8px;font-size:11px;letter-spacing:.08em}

/* Item rows: half-height compact rows (§13) instead of full-height list items. */
.co-receipt .line-item{padding:7px 10px;margin-bottom:5px;border-radius:8px;gap:8px}
.co-receipt .line-item .li-name{font-size:12.5px}
.co-receipt .line-item .li-name span{font-size:11px}
.co-receipt .s-cost{font-size:11.5px;white-space:nowrap}

.co-receipt .modal-foot{border-top-color:var(--line2);padding:13px 18px}

@media(max-width:560px){
  .co-receipt .s-cost{white-space:normal;text-align:right}
  .co-receipt .modal-body{padding:14px}
}

/* ---- REVIEW FIXES (2026-09-09) ----

   1. The status chip and the ⋮ menu button shared the same top-right corner. The chip only
      reserved room for the button on a bin flagged NEG, so on every other bin "RECOVERING"
      rendered as "RECOVE" underneath it at 390px. The dots button is on every tile, so the
      room is reserved on every tile. */
.bin-block .bin-chip { margin-right: 34px; }

/* 2. Add cost was a full-width red bar, which is the exact thing the bins design says it
      stopped being: "blue and matched to See in Metrics rather than a full-width red bar".
      Scoped to the bin panel, so the app-wide meaning of .btn.primary is untouched. */
#modalRoot .bin-panel .btn.primary,
#modalRoot .bp-actions .btn.primary {
  background: var(--blue); border-color: var(--blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 10px rgba(47, 143, 255, .28);
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   BIN AS A CARD TILE (Ian 2026-09-10) — files/01-inventory-catalog.html §4, right-hand block.
   The tile chrome itself is NOT redeclared here: .pcard.lg-card, .lg-ph, .lg-dot, .lg-dots,
   .lg-cap, .lg-priceline, .lg-nm, .lg-set and the three .lg-stat boxes are the card tile's own
   rules, and a bin tile carries the same classes so it inherits them. Everything below is only
   what a bin has and a card does not: no photo, a dashed shell, an icon-and-name body, and the
   ＋ that keeps Add cost on the tile.
   ═════════════════════════════════════════════════════════════════════════════════════════ */

/* The strip is now the top of the grid, not a band above it. Its own gap matches .grid.cols4's
   9px row gap closely enough that the bin row and the first card row read as consecutive. */
#binsStrip .bins-head{margin:2px 0 7px}
#binsStrip .bins-tiles{margin:0 0 9px}

/* Dashed shell = "this holds things, it is not a thing" — the mockup's own signal for a tile
   with no photo. The card tile's blue ring is dropped so the two never compete. */
.pcard.lg-card.bin-card{background:#191920;border:1.5px dashed #4a4a55;box-shadow:none}
.pcard.lg-card.bin-card:hover{border-color:var(--accent2);box-shadow:var(--glow-blue)}
.pcard.lg-card.bin-card.profit{border-color:rgba(52,211,153,.5)}
.pcard.lg-card.bin-card.neg{border-color:rgba(255,71,87,.5)}

/* Where the photo would be. aspect-ratio, not a height: it is the same 63:88 the grid gives a
   card's .imgwrap at cols4/cols2, so a bin sits at exactly the height of the tiles beside it.
   The photo gradient is dialled back to a bottom scrim only — there is no art to darken.
   flex:1 as well as the ratio: .pcard is a 230px-min column, so on a narrow track the ratio
   alone would leave dead space between the icon and the caption. The ratio sets the preferred
   height, the flex fills whatever the tile actually is. */
.bin-card .lg-ph{position:relative;aspect-ratio:63/88;background:transparent;flex:1 1 auto;min-height:0}
.bin-card .lg-ph::after{background:linear-gradient(180deg,transparent 0,transparent 58%,rgba(10,13,19,.85) 100%)}
/* The band above the caption (Ian 2026-09-11): the name moved into the caption where a card keeps
   its own, so this band holds the picture alone. 6%..46% of the tile clears the caption on the
   narrowest 4-wide tile (~180px, where the caption is ~half the height) and stays centred on the
   widest. The picture is capped by the band, so a tall tile grows the picture and a short one
   shrinks it. */
.bin-body{position:absolute;top:6%;left:0;right:0;height:40%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 10px}
/* The picture (bins/21): two-thirds of the tile wide, which on a 63:88 tile is about a third of
   its height — the band Ian asked for. currentColor, so it takes the caption's white. */
.bin-body .bin-art{display:block;width:75%;height:auto;max-height:100%;color:#eef2f8}   /* 75% of the padded band = two-thirds of the tile */
.bin-body p{margin:6px 0 0;color:#eef2f8;font-weight:600;font-size:15px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ＋ Add cost. The tile lost its footer button, so the affordance sits beside the ⋮ rather
   than vanishing. Same 26px hit box, which is the smallest thing on the tile a thumb finds. */
.bin-card .bin-plus{right:40px;font-size:16px;font-weight:600}

/* NEG rides the price line. Both corners are spoken for now (fund dot, menu), and next to the
   money is where it belongs anyway: it qualifies the number above it. */
.bin-card .bin-negflag{position:static;margin-left:auto;flex:0 0 auto;align-self:center}

/* Phone at 390px. Default density there is 2 columns (~180px wide), where the tile reads in
   full; at 4 columns it is ~83px, so the icon and name step down rather than wrap. */
@media(max-width:560px){
  .bin-body .bin-art{width:60%}
  .bin-body p{font-size:12.5px}
  .grid.cols4 .bin-body .bin-art{width:56%}
  .grid.cols4 .bin-body p{font-size:10px;margin-top:4px}
  .grid.cols4 .bin-card .bin-plus{display:none}   /* ⋮ → Add cost is the phone route */
}
/* 6-wide desktop density is a ~200px tile: same idea, one step less. */
.grid.cols6 .bin-body .bin-art{width:62%}
.grid.cols6 .bin-body p{font-size:12.5px}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   ADD BIN TILE + PICTURE PICKER (Ian 2026-09-11)
   ═════════════════════════════════════════════════════════════════════════════════════════ */
/* The tile that leads the bins-only grid (bins/15, bins/17): a bin shell in the accent blue,
   the ＋ centred where a bin's picture sits, nothing else on it. */
.pcard.lg-card.bin-card.bin-new{border-color:var(--accent2);cursor:pointer}
.pcard.lg-card.bin-card.bin-new:hover{background:#1c2130}
.bin-new .bin-body{top:0;height:100%}
.bin-new .bin-plusbig{display:block;font-size:46px;line-height:1;font-weight:300;color:var(--accent2)}
.bin-new .lg-ph::after{display:none}
/* The picker, ported from the prototype's .iconpick (proto/css/app.css). Scoped to the modal —
   the New bin panel and the bin profile are the only two places it is drawn. */
#modalRoot .iconpick{display:flex;gap:7px;flex-wrap:wrap}
#modalRoot .iconpick button{width:58px;height:48px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--muted);display:grid;place-items:center;padding:0;cursor:pointer}
#modalRoot .iconpick button .bin-art{width:44px;height:auto;display:block}
#modalRoot .iconpick button:hover{color:var(--txt);border-color:var(--line2)}
#modalRoot .iconpick button.on{border-color:var(--accent);background:#3a2d05;color:var(--accent)}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   DRAWERS + SHARED OWNERSHIP (Ian 2026-09-13)
   New bin docks left, the profile docks right, on the POS dock mechanism (redesign-pos.css,
   .rd-dock-*). bin-dock only narrows the panel from the POS's half-screen to a form's width;
   under 781px the dock does not apply and both are the ordinary sheet.
   ═════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width:781px){
  #modalRoot.rd-dock.bin-dock .modal{width:min(540px,94vw)}
}
/* The ownership control inside a bin drawer: wireFundChips draws the proportional bar
   (.fc-bar); this gives it a shape, the same one the card profile gives it. */
.bin-own{margin:0 0 4px}
.bin-own #fundChips .fc-bar{height:6px;border-radius:99px;background:var(--panel2);overflow:hidden;display:flex;margin-top:8px}
.bin-own #fundChips .fc-bar span{height:100%;display:block}
.bin-own .field>label{display:none}   /* "Business" — the section heading above it already says who owns it */
/* Six boxes on the Metrics tab, three across; two across on a phone (the phone rule for
   .bin-stats is one level less specific, so it is restated here). */
.bin-stats.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.bin-stats.six .k{font-size:9.5px;letter-spacing:.05em;line-height:1.2}
.bin-stat .v.good{color:var(--green)}
.bin-stat .v.bad{color:var(--red)}
@media(max-width:560px){ .bin-stats.six{grid-template-columns:1fr 1fr} }