/* ═══ CARD PROFILE — redesign Design A ═════════════════════════════════════════
   Styles ONLY the reflowed edit panel (.modal.cardprofile). Every rule is scoped to
   that class, so a card panel that fails to reflow — or any other modal — is
   untouched and looks exactly as it shipped.
   Colours come from the app's theme variables, never from the prototype's hex codes,
   so the panel follows whatever theme is on. Tuned at 390px (iPhone) as well as
   desktop. No at-import rule and no external resource reference: the shell contract rejects both,
   and it scans comments too, so this sentence has to avoid writing either one out. */

.modal.cardprofile{max-width:1080px}
.modal.cardprofile .modal-body{padding:14px}

/* ---- header becomes Design A's panel head: name, then the actions, then ✕ ---- */
.modal.cardprofile .modal-head{gap:9px;padding:11px 14px;flex-wrap:wrap}
/* .cp-headfoot, not .modal-foot: cpReflow (profile/05) leaves the real #modalFoot behind,
   empty, so modalError() (ui/modal-menu) still has a direct child of .modal to insert its
   banner before. Only the live buttons move here. */
.modal.cardprofile .modal-head .cp-headfoot{position:static;border-top:none;background:transparent;
  padding:0;margin-left:auto;gap:7px;flex-wrap:wrap;justify-content:flex-end;display:flex}
.modal.cardprofile .modal-head .cp-headfoot button{padding:6px 12px;font-size:12.5px}
/* the leftover empty footer: no border, no padding, no visible strip at the bottom */
.modal.cardprofile .modal-foot:empty{display:none}
.modal.cardprofile .cp-nameField{margin:0;flex:1 1 180px;min-width:120px}
.modal.cardprofile .cp-nameField label{display:none}
.modal.cardprofile .cp-nameField input{background:transparent;border:1px solid transparent;padding:3px 6px;
  border-radius:8px;font-size:15px;font-weight:700;color:var(--txt);overflow:hidden;text-overflow:ellipsis}
.modal.cardprofile .cp-nameField input:hover{border-color:var(--line)}
.modal.cardprofile .cp-nameField input:focus{background:var(--panel2);border-color:var(--accent2)}

/* ---- two-pane frame ---- */
.modal.cardprofile .cp-wrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;align-items:start}
.modal.cardprofile .cp-main{min-width:0}

/* ---- left rail: never changes, whichever tab is open ---- */
.modal.cardprofile .cp-art :is(#ei_photoBox,#es_photoBox,#cl_photoBox){width:100% !important;height:auto !important;aspect-ratio:5/7;
  border-radius:10px !important;margin-bottom:9px}
.modal.cardprofile .cp-art :is(#ei_photoBox,#es_photoBox,#cl_photoBox) img{max-height:none !important;max-width:100% !important;
  width:100%;height:100%;object-fit:contain;border-radius:8px}
.modal.cardprofile .cp-big{font-size:24px;font-weight:700;line-height:1.15;color:var(--accent)}
.modal.cardprofile .cp-sub{font-size:11.5px;color:var(--muted);margin-bottom:8px}
.modal.cardprofile .cp-railbtn .btn{width:100%;justify-content:center;margin-bottom:9px;white-space:nowrap}
.modal.cardprofile .cp-kv{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11.5px;padding:4px 0;border-bottom:1px solid var(--line)}
.modal.cardprofile .cp-kv>span{min-width:0;overflow-wrap:anywhere}
.modal.cardprofile .cp-kv>span:first-child{color:var(--muted)}
.modal.cardprofile .cp-kv>span:last-child{text-align:right}
.modal.cardprofile .cp-kv .label-dot{margin-right:5px}
.modal.cardprofile .cp-kvslot{flex:1;min-width:0;display:flex;justify-content:flex-end}
.modal.cardprofile .cp-kvslot .field{margin:0;flex:1;min-width:0}
.modal.cardprofile .cp-kvslot .field label{display:none}
.modal.cardprofile .cp-kvslot input{background:transparent;border:1px solid transparent;padding:2px 5px;
  border-radius:6px;text-align:right;font-size:11.5px}
.modal.cardprofile .cp-kvslot input:hover{border-color:var(--line)}
.modal.cardprofile .cp-kvslot input:focus{background:var(--panel2);border-color:var(--accent2)}
.modal.cardprofile .cp-strong{border-bottom:none;font-weight:600}
.modal.cardprofile .cp-strong>span:first-child{color:var(--txt)}

/* ---- tabs ---- */
.modal.cardprofile .cp-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:12px}
.modal.cardprofile .cp-tab{padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;
  background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.modal.cardprofile .cp-tab:hover{color:var(--txt)}
.modal.cardprofile .cp-tab.on{color:var(--txt);border-bottom-color:var(--accent2)}

/* ---- stat tiles ---- */
.modal.cardprofile .cp-statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:12px}
.modal.cardprofile .cp-stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.modal.cardprofile .cp-stat .cp-k{font-size:10.5px;letter-spacing:.5px;color:var(--muted)}
.modal.cardprofile .cp-stat .cp-v{font-size:18px;font-weight:700;margin-top:1px;overflow:hidden;text-overflow:ellipsis}

/* ---- boxes ---- */
.modal.cardprofile .cp-lab{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:5px}
.modal.cardprofile .cp-warnbox,
.modal.cardprofile .cp-infobox{border-radius:9px;padding:8px 11px;font-size:11.5px;margin-top:10px;line-height:1.45}
.modal.cardprofile .cp-warnbox{background:rgba(255,159,67,.10);border:1px solid rgba(255,159,67,.35);color:var(--orange)}
.modal.cardprofile .cp-infobox{background:rgba(47,143,255,.10);border:1px solid rgba(47,143,255,.32);color:var(--muted)}
.modal.cardprofile .cp-warnbox:empty,
.modal.cardprofile .cp-costsum:empty,
.modal.cardprofile .cp-splitbox:empty{display:none}
.modal.cardprofile .cp-warnbox .hint,
.modal.cardprofile .cp-infobox .hint{background:transparent;border:none;padding:0;font-size:inherit;color:inherit}
.modal.cardprofile .cp-costsum{background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;margin-top:9px}
/* wireFundChips() draws the proportional bar (.fc-bar); this only gives it a shape,
   scoped to this panel so it cannot fight whatever rule ships for it elsewhere. */
.modal.cardprofile #fundChips .fc-bar{height:6px;border-radius:99px;background:var(--panel2);
  overflow:hidden;display:flex;margin:2px 0 6px}
.modal.cardprofile #fundChips .fc-bar span{height:100%}

/* ---- the shipped ownership control, restyled into Design A's ovals ----
   This is public/js/pos/funding/03-fundChipsHTML.js rendering as it always does.
   It is NOT reimplemented here; only its skin changes, and only inside this panel. */
.modal.cardprofile #fundChips>label{font-size:11px}
.modal.cardprofile #fundChips .fc-chip{border-radius:99px;padding:4px 12px;font-size:11.5px;font-weight:600}
.modal.cardprofile #fundChips .fc-chip.primary{background:rgba(47,143,255,.16);background-image:none;
  border-color:var(--accent2);color:var(--txt);box-shadow:none;transform:none;filter:none}
.modal.cardprofile #fundChips .fc-pct{padding:5px 8px !important}

/* ---- the shipped price chart, restyled into Design A's range pills ---- */
.modal.cardprofile #ei_priceChart #psRange .btn{border-radius:99px;padding:2px 10px;font-size:11px}
.modal.cardprofile #ei_priceChart #psRange .btn.active{border-color:var(--accent2);color:var(--txt);
  background:rgba(47,143,255,.16);background-image:none;box-shadow:none}

/* ---- form rows inside a pane are narrower than the old full-width modal ---- */
.modal.cardprofile .cp-pane .row2,
.modal.cardprofile .cp-pane .row3{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.modal.cardprofile .cp-pane .es-section{margin:0 0 10px}
.modal.cardprofile .cp-pane .field:last-child{margin-bottom:0}
.modal.cardprofile #ei_notes{min-height:84px}

/* ---- phone (checked at 390px): rail folds to art + price, kv rows run full width ---- */
@media(max-width:780px){
  .modal.cardprofile .cp-wrap{grid-template-columns:minmax(0,1fr);gap:12px}
  .modal.cardprofile .cp-rail{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:start}
  .modal.cardprofile .cp-kvs{grid-column:1/-1}
  .modal.cardprofile .cp-statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal.cardprofile .modal-head .cp-headfoot{margin-left:0;flex:1 1 100%;justify-content:flex-start}
  .modal.cardprofile .cp-tab{min-height:44px}
}

/* ---- REVIEW FIX (2026-09-09) ----
   At 390px the header wrapped to Delete / Cancel / Save stacked above the card name, so the
   first thing on screen was two red buttons of equal weight, one of which deletes the card,
   with nothing yet saying which card you were on. Two changes, both phone-only:
   the name row comes first, and Delete drops to the outline treatment .btn.danger uses
   elsewhere so it can never be mistaken for Save at a glance. */
@media (max-width: 767px) {
  .modal.cardprofile .modal-head { flex-wrap: wrap; }
  .modal.cardprofile .cp-nameField { order: -1; flex: 1 1 100%; }
  .modal.cardprofile .modal-head .btn.danger,
  .modal.cardprofile .modal-head [data-del],
  .modal.cardprofile .modal-head button[onclick*="elete"] {
    background: transparent; border-color: #5c2027; color: var(--red);
    box-shadow: none;
  }
}

/* ═══ CHANGE PRINTING (2026-09-10) ════════════════════════════════════════════
   The rail button, and the prompt it opens. The prompt is its own fixed layer, not a
   .modal, because openModal replaces #modalRoot and would take the card profile with
   it. z-index sits above .overlay (960) and below the toast (100001), so a confirmation
   covers the panel it is about while its own toast still lands on top. */
.modal.cardprofile .cp-railbtn [data-cpprint]{width:100%;justify-content:center;margin-bottom:9px}
/* Change printing and its ⓘ share a row; the popover anchors under the ⓘ like the Cart ones. */
.modal.cardprofile .cp-printrow{display:flex;gap:6px;align-items:center;margin-bottom:9px}
.modal.cardprofile .cp-railbtn .cp-printrow .btn{flex:1;width:auto;margin-bottom:0}
.modal.cardprofile .cp-printrow{position:relative}
.modal.cardprofile .cp-printrow .side-info{position:static;display:inline-flex;flex:none}
/* The rail is narrow: the popover hangs from the row's left edge and grows right, or it clips on the modal's edge. */
.modal.cardprofile .cp-printrow .side-info.open .side-info-pop{left:0;right:auto;border-top-right-radius:10px;border-top-left-radius:0}
.modal.cardprofile .cp-noprint{font-size:11px;line-height:1.45;color:var(--muted);margin:0 0 9px}

.cpp-ov{position:fixed;inset:0;z-index:970;background:#000b;backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:12px;animation:fade .15s}
.cpp{width:min(430px,100%);max-height:min(86vh,720px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.cpp-head{display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.cpp-body{padding:12px 14px;overflow:auto;-webkit-overflow-scrolling:touch}
.cpp-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  padding:11px 14px;border-top:1px solid var(--line);background:var(--panel)}
.cpp-foot .btn{flex:0 1 auto}
.cpp-note{margin:0 0 10px;font-size:11.5px;line-height:1.5;color:var(--muted)}

/* ---- step 1: pick a printing ---- */
.cpp-list{display:flex;flex-direction:column;gap:6px}
.cpp-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:7px 9px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);
  color:var(--txt);font:inherit}
.cpp-row:hover{border-color:var(--accent2)}
.cpp-row.on,.cpp-row:disabled{cursor:default;opacity:.6;border-style:dashed}
.cpp-row.on:hover{border-color:var(--line)}
.cpp-th{width:34px;height:47px;flex:none;border-radius:5px;background:#15181f;object-fit:contain;display:block}
.cpp-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cpp-rv{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}
.cpp-cur{margin-left:6px;font-size:10px;font-weight:700;color:var(--muted);
  border:1px solid var(--line2);border-radius:99px;padding:1px 6px;white-space:nowrap}
.cpp-rs{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.cpp-rp{flex:none;font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap}

/* ---- step 2: from / to ---- */
.cpp-fromto{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:11px}
.cpp-side{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0}
.cpp-side.to{border-color:var(--accent2);background:rgba(47,143,255,.10)}
.cpp-lab{display:block;font-size:10.5px;letter-spacing:.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
.cpp-nm{font-size:13px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.cpp-meta{font-size:11px;color:var(--muted);margin-top:1px;overflow-wrap:anywhere}
.cpp-var{font-size:11.5px;font-weight:700;margin-top:5px;overflow-wrap:anywhere}
.cpp-price{font-size:16px;font-weight:700;color:var(--accent);margin-top:5px}
.cpp-info,.cpp-warn{border-radius:9px;padding:8px 11px;font-size:11.5px;line-height:1.5;margin-top:9px}
.cpp-info{background:rgba(47,143,255,.10);border:1px solid rgba(47,143,255,.32);color:var(--muted)}
.cpp-warn{background:rgba(255,159,67,.10);border:1px solid rgba(255,159,67,.35);color:var(--orange)}

/* Phone (the iPhone Ian actually holds at a table): the prompt fills the width, the
   footer buttons stretch so Cancel is never a 44px sliver next to the primary, and
   Cancel keeps the left edge so the safe choice is under the thumb. */
@media (max-width: 480px){
  .cpp-ov{padding:8px}
  .cpp{max-height:92vh}
  .cpp-foot{justify-content:stretch}
  .cpp-foot .btn{flex:1 1 30%;justify-content:center;padding-left:8px;padding-right:8px}
}

/* ---- SHORT SCREENS: fit the panel without an inner scroll (Ian, 2026-09-10) ----
   Measured on his actual 1272x668: the panel is 601px tall holding 660px of content, so it
   scrolled by 63px on EVERY tab. Identical on all five, which says the overflow is the rail
   and the chrome around it, not any one tab's fields, so that is what gets trimmed.

   Height-keyed, not width-keyed. A 1440x900 desktop had the room already and keeps the
   roomier rhythm; this only bites where the screen is actually short. */
@media (max-height: 760px) {
  .modal.cardprofile .modal-body { padding: 10px; }
  .modal.cardprofile .modal-head { padding: 8px 12px; gap: 7px; }
  .modal.cardprofile .modal-head .cp-headfoot button { padding: 5px 10px; font-size: 12px; }
  .modal.cardprofile .cp-wrap { grid-template-columns: 178px minmax(0, 1fr); gap: 12px; }
  /* The art is the single tallest thing in the rail. 5/7 is the card's real shape, so it is
     capped rather than distorted. */
  .modal.cardprofile .cp-art :is(#ei_photoBox,#es_photoBox,#cl_photoBox) { max-height: 210px !important; }
  .modal.cardprofile .cp-big { font-size: 21px; }
  .modal.cardprofile .cp-sub { margin-bottom: 5px; }
  .modal.cardprofile .cp-railbtn .btn { margin-bottom: 6px; padding: 6px 10px; font-size: 12.5px; }
  .modal.cardprofile .cp-kv { padding: 4px 0; font-size: 12px; }
  .modal.cardprofile .field { margin-bottom: 8px; }
  .modal.cardprofile .field label { margin-bottom: 2px; }
  /* Eight trade-in rows pushed the Cost tab 101px past the panel; the list scrolls, not the panel. */
  .modal.cardprofile .cp-trades { max-height: 150px; overflow: auto; }
  /* The database card's profile (pos/pickers/06) is one pane: facts plus the price history. At
     180px the chart ran 25px past the panel on Ian's 1272x668, so it gives up 40px here. */
  .modal.cardprofile.cp-catalog #cpc_priceChart > div[style*="height"] { height: 140px !important; }
}

/* ---- Market tab (profile/13, 14) and the catalog-only profile (pos/pickers/06) ---- */
.modal.cardprofile .cp-conds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.modal.cardprofile .cp-cond{font-size:11.5px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.modal.cardprofile .cp-cond b{color:var(--txt);margin-right:3px}
.modal.cardprofile .cp-cond.on{border-color:var(--accent2);color:var(--txt)}
.modal.cardprofile .cp-facts{margin-bottom:12px}
.modal.cardprofile #cpc_priceChart canvas{max-height:220px}
.modal.cardprofile.cp-catalog .cp-art img{display:block;width:100%;aspect-ratio:5/7;object-fit:contain;border-radius:10px;margin-bottom:9px;cursor:zoom-in}
/* A rail label never breaks mid-word ("Printin g" at half width); the value wraps instead. */
.modal.cardprofile .cp-kv>span:first-child{white-space:nowrap;overflow-wrap:normal}

/* ---- Cost tab shaped like Price (Ian 2026-09-15) ---- */
.modal.cardprofile .cp-acqrow{margin-bottom:12px}
.modal.cardprofile .cp-acqrow .field{margin:0}
.modal.cardprofile .cp-stat .cp-v small{font-size:11px;font-weight:600;color:var(--muted)}
.modal.cardprofile .cp-trades .trade-row{margin-bottom:6px}
.modal.cardprofile .cp-trades .trade-total{margin:2px 0 8px}
.modal.cardprofile .cp-trades #ei_addBuy{margin-top:0}
.modal.cardprofile .cp-trades:has(.trade-row) #ei_addBuy{margin-top:2px}
/* No traded cards, no "Trade total: C$0.00" line under an empty list. */
.modal.cardprofile .cp-trades:not(:has(.trade-row)) .trade-total{display:none}

/* A cart line on the profile (pos/cart-side/09): no cost, profit or age tiles yet, and the
   line editor's photo block keeps the rail's width. An info box with nothing in it hides. */
.modal.cardprofile.cp-line .cp-statrow{display:none}
.modal.cardprofile .cp-art .cl-photo{max-width:none;flex:none}
.modal.cardprofile .cp-infobox:empty{display:none}