/* =====================================================================
   CardGremlin app shell — the ONLY place sidebar, top bar, nav, brand and
   the phone tab bar are styled. Colors, spacing and radii come from the
   tokens at the top of style.css. Markup lives in web.page().
   ===================================================================== */
.skip-link{
  position:fixed;z-index:100;top:var(--cg-space-2);left:var(--cg-space-2);transform:translateY(-160%);
  padding:var(--cg-space-2) var(--cg-space-4);border-radius:var(--cg-radius-sm);
  background:var(--cg-cta);color:var(--cg-on-cta);font-weight:700;text-decoration:none;
}
.skip-link:focus{transform:none}

.app-shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr);align-items:stretch}
.workspace-content{min-width:0;display:flex;flex-direction:column}

/* ---------- Brand (one logo, transparent, works on any surface) ---------- */
.brand{display:flex;align-items:center;justify-content:center;margin:0;padding:0;line-height:0;background:transparent;border:0;box-shadow:none}
.brand img{display:block;width:100%;height:auto;max-width:160px;object-fit:contain}

/* ---------- Sidebar ---------- */
.app-sidebar{
  position:sticky;top:0;align-self:start;height:100vh;
  display:flex;flex-direction:column;gap:var(--cg-space-2);
  padding:var(--cg-space-5) var(--cg-space-3) var(--cg-space-4);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--cg-sidebar);color:var(--cg-text);border-right:1px solid var(--cg-border);
}
.app-sidebar-header{padding:var(--cg-space-1) var(--cg-space-2) var(--cg-space-4);display:flex;justify-content:center}
.app-desktop-nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0}
.app-mobile-nav{display:none}
.app-nav-primary,.app-nav-secondary{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;border:0}
.app-nav-section-label{
  margin:var(--cg-space-5) var(--cg-space-3) var(--cg-space-1);
  font-size:var(--cg-text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cg-muted);
}
.app-nav-primary>.nav-link:first-child{margin-bottom:var(--cg-space-1)}

.nav-link{
  position:relative;display:flex;align-items:center;gap:var(--cg-space-3);
  min-height:var(--cg-control-height);padding:var(--cg-space-2) var(--cg-space-3);margin:0;
  border-radius:var(--cg-radius-sm);color:var(--cg-text-secondary);
  font-size:var(--cg-text-sm);font-weight:600;text-decoration:none;
  transition:background var(--cg-ease),color var(--cg-ease);
}
.nav-link .nav-icon{flex:0 0 18px;width:18px;height:18px;opacity:.85}
.nav-link:hover{background:var(--cg-row-hover);color:var(--cg-text)}
.nav-link:hover .nav-icon{opacity:1}
.nav-link:focus-visible{outline:none;box-shadow:var(--cg-ring)}
.nav-link.nav-active,.nav-link[aria-current="page"]{background:var(--cg-primary-soft);color:var(--cg-primary);font-weight:700}
.nav-link.nav-active .nav-icon,.nav-link[aria-current="page"] .nav-icon{opacity:1}
.nav-link.nav-active::before,.nav-link[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--cg-primary);
}
/* "Existing PYC" reads as a child of "Pick Your Card". */
.nav-link.nav-child{margin-left:var(--cg-space-5);min-height:36px;padding-block:var(--cg-space-1);font-size:var(--cg-text-sm);font-weight:500}
.nav-link.nav-child .nav-icon{flex-basis:15px;width:15px;height:15px}
.nav-link.nav-child.nav-active::before{left:calc(-1 * var(--cg-space-5))}
.nav-link .nav-badge{
  margin-left:auto;min-width:22px;height:22px;padding:0 var(--cg-space-2);border-radius:var(--cg-radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cg-cta);color:var(--cg-on-cta);font-size:var(--cg-text-xs);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
}

.theme-toggle{
  display:block;width:100%;min-height:var(--cg-control-height);padding:var(--cg-space-2) var(--cg-space-3);
  border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius-sm);background:transparent;
  color:var(--cg-text-secondary);font:inherit;font-size:var(--cg-text-sm);font-weight:600;cursor:pointer;
  transition:background var(--cg-ease),color var(--cg-ease);
}
.theme-toggle:hover{background:var(--cg-row-hover);color:var(--cg-text)}
.theme-toggle:focus-visible{outline:none;box-shadow:var(--cg-ring)}
.app-desktop-nav>.theme-toggle{margin-top:var(--cg-space-5)}
.app-desktop-nav>.app-build-stamp{display:block;margin:var(--cg-space-2) var(--cg-space-1) 0;font-size:var(--cg-text-xs);color:var(--cg-muted)}

/* ---------- Top bar ---------- */
.workspace-topbar{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,440px) minmax(0,1fr);align-items:center;
  gap:var(--cg-space-4);min-height:64px;padding:var(--cg-space-2) clamp(18px,3vw,40px);
  border-bottom:1px solid var(--cg-border);background:var(--cg-bg);
}
.workspace-breadcrumb{display:flex;align-items:center;gap:var(--cg-space-2);min-width:0;font-size:var(--cg-text-sm);color:var(--cg-muted)}
.workspace-breadcrumb strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cg-text);font-weight:600}
.workspace-global-search{
  display:flex;align-items:center;height:42px;margin:0;overflow:hidden;
  border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius-pill);background:var(--cg-input);
  transition:border-color var(--cg-ease),box-shadow var(--cg-ease);
}
.workspace-global-search::before{
  content:"";flex:0 0 18px;height:18px;margin-left:var(--cg-space-3);background-color:var(--cg-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.workspace-global-search:focus-within{border-color:var(--cg-primary);box-shadow:var(--cg-ring)}
.workspace-topbar .workspace-global-search input[type=search]{
  flex:1;min-width:0;width:auto;max-width:none;min-height:0;margin:0;height:100%;padding:0 var(--cg-space-3);
  border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;color:var(--cg-text);font-size:var(--cg-text-sm);
}
.workspace-global-search button{
  height:100%;padding:0 var(--cg-space-4);border:0;border-left:1px solid var(--cg-border);border-radius:0;
  background:transparent;color:var(--cg-primary);font:inherit;font-size:var(--cg-text-sm);font-weight:700;cursor:pointer;
}
.workspace-global-search button:hover{background:var(--cg-row-hover)}
.workspace-topbar-actions{display:flex;justify-content:flex-end}
.workspace-create-action{border-radius:var(--cg-radius-pill)}

/* ---------- Header search dropdown (global_search.js; plain form without it) ---------- */
.workspace-search{position:relative;min-width:0;scroll-margin-top:72px;--gs-side:248px}
.gs-panel{
  position:absolute;z-index:35;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  width:min(600px,calc(100vw - var(--gs-side) - 2 * clamp(18px,3vw,40px)));min-width:min(100%,320px);
  max-height:min(70vh,620px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:var(--cg-space-1) 0;background:var(--cg-surface);color:var(--cg-text);
  border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius);box-shadow:var(--cg-shadow-raised);
}
.gs-panel[hidden]{display:none}
.gs-section + .gs-section{margin-top:var(--cg-space-1);border-top:1px solid var(--cg-border)}
.gs-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px var(--cg-space-3);padding:10px 14px 4px}
.gs-heading{margin:0;font-family:var(--cg-font-body);font-size:var(--cg-text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cg-muted)}
.gs-note{font-size:var(--cg-text-xs);color:var(--cg-muted)}
.gs-item{
  display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 14px;
  color:inherit;text-decoration:none;cursor:pointer;
}
.gs-item:hover,.gs-item.is-active,.gs-more:hover,.gs-more.is-active{background:var(--cg-row-hover)}
.gs-item.is-active,.gs-more.is-active{box-shadow:inset 3px 0 0 var(--cg-primary)}
.gs-thumb{
  flex:0 0 42px;width:42px;height:58px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--cg-border);border-radius:6px;background:var(--cg-surface-soft);
}
.gs-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.gs-thumb-ref img{object-fit:contain}
.gs-nophoto{padding:0 2px;text-align:center;font-size:10px;line-height:1.15;color:var(--cg-muted)}
.gs-body{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.gs-name{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--cg-text-sm);font-weight:700;color:var(--cg-text)}
.gs-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-badge{flex:none;padding:0 7px;border-radius:var(--cg-radius-pill);background:var(--cg-neutral-soft);color:var(--cg-text-secondary);font-size:var(--cg-text-xs);font-weight:600;white-space:nowrap}
.gs-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--cg-text-xs);color:var(--cg-text-secondary)}
.gs-line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:var(--cg-text-xs);color:var(--cg-text-secondary)}
.gs-fact{white-space:nowrap}
.gs-match{padding:1px 8px;border:1px solid var(--cg-border);border-radius:var(--cg-radius-pill);font-weight:700;white-space:nowrap;color:var(--cg-text)}
.gs-status,.gs-tag{padding:1px 8px;border:1px solid transparent;border-radius:var(--cg-radius-pill);font-weight:700;white-space:nowrap}
.gs-status-active{background:var(--cg-success-soft);color:var(--cg-success)}
.gs-status-sold_out{background:var(--cg-warning-soft);color:var(--cg-warning)}
.gs-status-ended,.gs-status-old_variation,.gs-status-saved,.gs-status-unknown{background:var(--cg-neutral-soft);color:var(--cg-info);border-color:var(--cg-border-strong)}
.gs-tag{background:var(--cg-primary-soft);color:var(--cg-primary);border:1px dashed var(--cg-primary)}
.gs-more{
  display:flex;align-items:center;min-height:44px;padding:8px 14px;
  color:var(--cg-primary);font-size:var(--cg-text-sm);font-weight:700;text-decoration:none;cursor:pointer;
}
.gs-empty{margin:0;padding:10px 14px;font-size:var(--cg-text-sm);color:var(--cg-text-secondary)}
.gs-item:focus-visible,.gs-more:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--cg-primary)}
@media(min-width:769px) and (max-width:1279px){.workspace-search{--gs-side:224px}}
@media(max-width:768px){
  .gs-panel{left:0;right:0;transform:none;width:auto;min-width:0}
  .gs-item{min-height:64px}
}

/* ---------- Page container ---------- */
.app-main{width:100%;max-width:1480px;min-width:0;margin:0 auto;padding:var(--cg-space-8) clamp(18px,3vw,40px) 64px}

@media(min-width:769px) and (max-width:1279px){
  .workspace-breadcrumb>span{display:none}
  .app-shell{grid-template-columns:224px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .nav-link,.theme-toggle,.workspace-global-search{transition:none}
}

/* ---------- Phone: header + menu sheet + bottom tab bar ---------- */
.mobile-bottom-nav{display:none}
@media(max-width:768px){
  .app-shell{display:block}
  .app-sidebar{
    position:sticky;top:0;z-index:30;height:auto;min-height:0;overflow:visible;
    flex-direction:row;align-items:center;justify-content:space-between;gap:var(--cg-space-3);
    padding:var(--cg-space-2) var(--cg-space-3);border-right:0;border-bottom:1px solid var(--cg-border);
  }
  .app-sidebar-header{padding:0;justify-content:flex-start}
  .brand{width:auto;max-width:132px}
  .brand img{max-width:132px;max-height:50px;width:auto}
  .app-desktop-nav{display:none}

  .app-mobile-nav{display:block;min-width:0}
  .app-mobile-nav>summary{
    list-style:none;display:inline-flex;align-items:center;min-height:var(--cg-control-height);padding:0 var(--cg-space-4);
    border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius-pill);background:var(--cg-surface);
    color:var(--cg-text);font-size:var(--cg-text-sm);font-weight:700;cursor:pointer;
  }
  .app-mobile-nav>summary::-webkit-details-marker{display:none}
  /* Opens as a full-width sheet; "Close menu" replaces the Menu button. */
  .app-mobile-nav[open]{
    position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + var(--cg-space-2));left:var(--cg-space-3);right:var(--cg-space-3);width:auto;
    --nav-sheet-max:calc(100dvh - 24px - 84px - env(safe-area-inset-top,0px));
    --nav-sheet-close:max(44px,var(--cg-control-height));
    max-height:var(--nav-sheet-max);overflow:hidden;
    padding:var(--cg-space-2) var(--cg-space-2) var(--cg-space-3);
    border:1px solid var(--cg-border);border-radius:var(--cg-radius);background:var(--cg-surface);box-shadow:var(--cg-shadow-raised);
  }
  .app-mobile-nav[open]>summary{display:none}
  .app-mobile-close{display:none}
  .app-mobile-nav[open]>.app-mobile-close{
    display:flex;align-items:center;justify-content:center;width:100%;
    height:var(--nav-sheet-close);margin:0 0 var(--cg-space-2);
    border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius-pill);background:var(--cg-surface-soft);
    color:var(--cg-text);font:inherit;font-size:var(--cg-text-sm);font-weight:700;cursor:pointer;
  }
  /* The links scroll on their own below the fixed Close button, so nothing slides underneath it. */
  .app-mobile-nav-scroll{
    /* An explicit height instead of flex: <details> does not reliably act as a flex container on every Android Chrome. */
    max-height:calc(var(--nav-sheet-max) - var(--nav-sheet-close) - var(--cg-space-2) * 2 - var(--cg-space-3) - 2px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:var(--cg-space-2);
  }
  .app-mobile-nav .nav-link{min-height:48px;font-size:var(--cg-text-md)}
  .app-mobile-nav .nav-link.nav-active::before,.app-mobile-nav .nav-link[aria-current="page"]::before{display:none}
  .app-mobile-nav .theme-toggle{margin-top:var(--cg-space-4)}

  /* Second header row: search is always one tap away. */
  .workspace-topbar{display:block;min-height:0;padding:var(--cg-space-2) var(--cg-space-3) var(--cg-space-3);border-bottom:0}
  .workspace-breadcrumb,.workspace-topbar-actions{display:none}
  .workspace-global-search{width:100%;height:var(--cg-control-height)}
  .workspace-topbar .workspace-global-search input[type=search]{font-size:16px}

  .app-main{padding:var(--cg-space-4) var(--cg-space-3) calc(108px + env(safe-area-inset-bottom))}

  /* Height of the fixed tab bar below, so a sticky bar can sit above it. ui.js replaces this estimate with the
     measured height (large Android font sizes make the bar taller). */
  :root{--mobile-bottom-nav-height:calc(68px + env(safe-area-inset-bottom))}
  /* Listing setup save bar: clear the tab bar and the raised List button, and step aside while a field has focus
     so it never floats over the field being typed in or the on-screen keyboard. */
  .batch-prep-save-bar{bottom:calc(var(--mobile-bottom-nav-height) + 16px)}
  .batch-prep-form:has(:is(input,textarea,select):focus) .batch-prep-save-bar{position:static}

  /* Bottom tab bar: opaque, icon over label, raised "List" action. */
  .mobile-bottom-nav{
    position:fixed;z-index:40;left:0;right:0;bottom:0;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:0;
    padding:var(--cg-space-2) var(--cg-space-2) calc(var(--cg-space-2) + env(safe-area-inset-bottom));
    background:var(--cg-sidebar);border-top:1px solid var(--cg-border);box-shadow:var(--cg-shadow-raised);
  }
  .mobile-tab{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;padding:var(--cg-space-1) 2px;border-radius:var(--cg-radius-sm);background:transparent;
    color:var(--cg-text-secondary);font-size:var(--cg-text-xs);font-weight:600;text-decoration:none;
  }
  .mobile-tab-icon{flex:0 0 22px;width:22px;height:22px}
  .mobile-tab.is-active{color:var(--cg-primary);font-weight:700}
  .mobile-tab.is-active .mobile-tab-icon{stroke-width:2.3}
  .mobile-tab.is-active::after{content:"";width:18px;height:3px;border-radius:3px;background:var(--cg-primary)}
  .mobile-tab:focus-visible{outline:none;box-shadow:var(--cg-ring)}
  .mobile-tab-primary{color:var(--cg-text-secondary)}
  .mobile-tab-primary .mobile-tab-icon{
    flex-basis:44px;width:44px;height:44px;padding:11px;margin-top:-20px;border-radius:50%;
    background:var(--cg-cta);color:var(--cg-on-cta);stroke:var(--cg-on-cta);
    box-shadow:var(--cg-shadow-raised),0 0 0 4px var(--cg-sidebar);
  }
  .mobile-tab-primary.is-active::after{display:none}
  .mobile-tab .mobile-tab-badge{
    position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:var(--cg-radius-pill);
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--cg-danger-solid);color:#fff;font-size:var(--cg-text-xs);font-weight:800;line-height:1;
    box-shadow:0 0 0 2px var(--cg-sidebar);
  }
}

/* =====================================================================
   Shared components — buttons, form controls, chips, cards, stat tiles.
   One definition each, built only from the tokens in style.css. Pages
   add layout on top of these; they should not redefine colors.
   ===================================================================== */

/* ---------- Buttons: one yellow primary action per area ---------- */
.button,button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--cg-space-2);
  min-height:var(--cg-control-height-sm);padding:var(--cg-space-2) var(--cg-space-4);
  border:1px solid transparent;border-radius:var(--cg-radius-sm);
  background:var(--cg-cta);color:var(--cg-on-cta);
  font:inherit;font-size:var(--cg-text-sm);font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background var(--cg-ease),border-color var(--cg-ease),color var(--cg-ease);
}
.button:hover,.button:focus-visible{background:var(--cg-cta-hover);color:var(--cg-on-cta);text-decoration:none}
.button.secondary{background:var(--cg-surface-soft);color:var(--cg-text);border-color:var(--cg-border-strong)}
.button.secondary:hover,.button.secondary:focus-visible{background:var(--cg-row-hover);border-color:var(--cg-primary);color:var(--cg-primary)}
.button.ghost{background:transparent;color:var(--cg-primary);border-color:transparent}
.button.ghost:hover,.button.ghost:focus-visible{background:var(--cg-primary-soft);color:var(--cg-primary)}
.button.danger{background:var(--cg-danger-solid);border-color:var(--cg-danger-solid);color:#fff}
.button.danger:hover,.button.danger:focus-visible{background:var(--cg-danger-solid);color:#fff;filter:brightness(1.12)}
.button:disabled,.button[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.button:focus-visible,a:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:none;box-shadow:var(--cg-ring)}
@media(max-width:768px){.button,button.button{min-height:var(--cg-control-height)}}
@media(prefers-reduced-motion:reduce){.button{transition:none}}

/* ---------- Form controls ---------- */
label{margin:0;color:var(--cg-text-secondary);font-size:var(--cg-text-sm);font-weight:600}
/* :where() keeps this base at element-level specificity so page rules can adjust it. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])),select,textarea{
  width:100%;max-width:none;min-height:var(--cg-control-height);margin-top:var(--cg-space-2);
  padding:var(--cg-space-2) var(--cg-space-3);
  border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius-sm);outline:0;
  background:var(--cg-input);color:var(--cg-text);
  font:inherit;font-size:var(--cg-text-md);
}
input::placeholder,textarea::placeholder{color:var(--cg-muted);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--cg-primary);box-shadow:var(--cg-ring)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--cg-primary)}

/* ---------- Status chips: color always means the same thing ----------
   danger = act now · warning = look soon · success = healthy · neutral = info */
.status-pill,.tag,.inventory-status,.inventory-management,.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:26px;padding:var(--cg-space-1) 10px;border-radius:var(--cg-radius-pill);
  background:var(--cg-neutral-soft);color:var(--cg-info);
  font-size:var(--cg-text-xs);font-weight:700;line-height:1;letter-spacing:.02em;white-space:nowrap;
}
.status-success,.state-success,.inventory-status-active,.inventory-managed-single,.severity-1,.status-pill-success,.status-pill.listing-status-active{background:var(--cg-success-soft);color:var(--cg-success)}
.status-warning,.state-warning,.inventory-status-empty,.duplicate-tag,.severity-2,.status-pill-warning{background:var(--cg-warning-soft);color:var(--cg-warning)}
.status-danger,.state-danger,.severity-4,.severity-3{background:var(--cg-danger-soft);color:var(--cg-danger)}
.status-neutral,.state-neutral,.inventory-status-ended,.inventory-status-none,.inventory-not-listed,.inventory-unmatched{background:var(--cg-neutral-soft);color:var(--cg-info)}
.notice{padding:var(--cg-space-3) var(--cg-space-4);border:1px solid var(--cg-border);border-left:4px solid var(--cg-primary);border-radius:var(--cg-radius-sm);background:var(--cg-primary-soft)}
.notice.warning,.warning{border-color:var(--cg-warning);background:var(--cg-warning-soft);color:var(--cg-warning)}

/* ---------- Cards and stat tiles ---------- */
.app-main :where(.panel,.listing-section,.edit-section,.listing-overview,.details-panel,.action-summary-card,.batch-card){
  background:var(--cg-surface);border:1px solid var(--cg-border);border-radius:var(--cg-radius);
  box-shadow:var(--cg-shadow-card);color:var(--cg-text);
}
.metric,.facts>div{
  padding:var(--cg-space-4) var(--cg-space-5);border:1px solid var(--cg-border);border-radius:var(--cg-radius);
  background:var(--cg-surface);box-shadow:var(--cg-shadow-card);color:var(--cg-text);
}
.metric span{display:block;color:var(--cg-muted);font-size:var(--cg-text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.metric strong{display:block;margin-top:var(--cg-space-2);color:var(--cg-text);
  font-family:var(--cg-font-display);font-size:var(--cg-text-stat);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
a.metric{text-decoration:none;transition:border-color var(--cg-ease),background var(--cg-ease)}
a.metric:hover,a.metric:focus-visible{border-color:var(--cg-primary);background:var(--cg-row-hover)}

/* ---------- Tables ---------- */
th{color:var(--cg-muted);font-size:var(--cg-text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
td{font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--cg-row-hover)}

/* ---------- Page header ---------- */
.page-eyebrow{color:var(--cg-primary);font-size:var(--cg-text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.app-main h1,.app-main .page-header h1{font-family:var(--cg-font-display);font-size:var(--cg-text-display);font-weight:800;line-height:1.1;letter-spacing:-.02em}

/* =====================================================================
   Dashboard — today's priorities first, then quick actions and the numbers.
   ===================================================================== */
.dashboard-header{margin-bottom:var(--cg-space-6)}
.dashboard-header .page-subtitle{margin-top:var(--cg-space-2)}

/* Header: the Customize control sits beside the title and drops below it when opened. */
/* The shared `.app-main header.page-header{flex-wrap:nowrap}` (style.css) is more specific than a bare
   `.dashboard-header` rule, so wrapping must be declared at equal-or-higher specificity or the open panel
   squeezes the heading to nothing. Closed: heading left, Customize button right. Open: the panel drops onto
   its own full-width row below the heading; the heading keeps its width either way. */
.app-main header.page-header.dashboard-header{flex-wrap:wrap}
.dashboard-header .page-header-main{min-width:0;flex:1 1 260px}
.dash-customize{flex:0 0 auto;min-width:0;max-width:100%;margin-top:var(--cg-space-3)}
.dash-customize[open]{flex:1 1 100%;width:100%}
.dash-customize>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:var(--cg-control-height)}
.dash-customize>summary::-webkit-details-marker{display:none}
.dash-customize-form{display:grid;gap:var(--cg-space-3);box-sizing:border-box;width:100%;max-width:520px;margin-top:var(--cg-space-3);padding:var(--cg-space-4);border:1px solid var(--cg-border);border-radius:var(--cg-radius);background:var(--cg-surface);box-shadow:var(--cg-shadow-card)}
.dash-check{display:flex;align-items:flex-start;gap:var(--cg-space-3);min-height:var(--cg-control-height);cursor:pointer}
.dash-check input{flex:0 0 auto;width:22px;height:22px;margin:2px 0 0}
.dash-check span{display:grid;gap:2px;min-width:0}
.dash-check small{color:var(--cg-muted);font-size:var(--cg-text-sm)}
.dash-customize-actions{display:flex;flex-wrap:wrap;gap:var(--cg-space-3)}

/* Cards */
.dash-card{min-width:0;margin:0 0 var(--cg-space-5);padding:var(--cg-space-5);border:1px solid var(--cg-border);border-radius:var(--cg-radius-lg);background:var(--cg-surface);box-shadow:var(--cg-shadow-card)}
.dash-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--cg-space-3);margin:0 0 var(--cg-space-4)}
.dash-section-head h2{margin:0;font-size:var(--cg-text-lg);font-weight:700}
.dash-section-head .page-eyebrow{margin:0 0 var(--cg-space-1)}
.dash-link{font-size:var(--cg-text-sm);font-weight:600;text-decoration:none;white-space:nowrap}
.dash-link:hover{text-decoration:underline}
/* Phone: the text links are 16-20px tall; grow the touch area to 44px with padding cancelled by margin so panels keep their layout. */
@media (max-width:768px){.dash-link{display:inline-block;padding:13px 8px;margin:-13px -8px}}
.dash-muted{margin:0;color:var(--cg-muted);font-size:var(--cg-text-sm)}
.dash-footnote{margin:var(--cg-space-4) 0 0;color:var(--cg-muted);font-size:var(--cg-text-xs)}
.dash-unavailable{margin:0 0 var(--cg-space-3);padding:var(--cg-space-3) var(--cg-space-4);border:1px dashed var(--cg-border-strong);border-radius:var(--cg-radius);color:var(--cg-text-secondary);font-size:var(--cg-text-sm)}
.dash-stale-note{margin:0 0 var(--cg-space-3);padding:var(--cg-space-3) var(--cg-space-4);border-radius:var(--cg-radius);background:var(--cg-warning-soft);color:var(--cg-warning);font-size:var(--cg-text-sm);font-weight:600}
.dash-fresh{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--cg-space-3);border-radius:var(--cg-radius-pill);background:var(--cg-neutral-soft);color:var(--cg-text-secondary);font-size:var(--cg-text-xs);font-weight:600;white-space:nowrap}
.dash-fresh.is-stale{background:var(--cg-warning-soft);color:var(--cg-warning)}

/* Today's priorities */
.dash-priority-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--cg-space-3)}
.dash-priority-link{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--cg-space-3) var(--cg-space-4);
  min-height:64px;padding:var(--cg-space-3) var(--cg-space-4);border:1px solid var(--cg-border);
  border-left:4px solid var(--cg-border-strong);border-radius:var(--cg-radius);background:var(--cg-surface-soft);
  color:var(--cg-text);text-decoration:none;transition:border-color var(--cg-ease),background var(--cg-ease);
}
.dash-priority-link:hover,.dash-priority-link:focus-visible{background:var(--cg-row-hover);border-color:var(--cg-primary);color:var(--cg-text)}
.dash-priority.is-danger .dash-priority-link{border-left-color:var(--cg-danger)}
.dash-priority.is-warning .dash-priority-link{border-left-color:var(--cg-warning)}
.dash-priority.is-success .dash-priority-link{border-left-color:var(--cg-success)}
.dash-priority-count{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--cg-radius-sm);background:var(--cg-primary-soft);color:var(--cg-primary);font-size:var(--cg-text-lg);font-weight:800;font-variant-numeric:tabular-nums}
.dash-priority.is-danger .dash-priority-count{background:var(--cg-danger-soft);color:var(--cg-danger)}
.dash-priority.is-warning .dash-priority-count{background:var(--cg-warning-soft);color:var(--cg-warning)}
.dash-priority.is-success .dash-priority-count{background:var(--cg-success-soft);color:var(--cg-success)}
.dash-priority-copy{display:grid;gap:2px;min-width:0}
.dash-priority-copy strong{font-size:var(--cg-text-md);font-weight:700;overflow-wrap:anywhere}
.dash-priority-copy small{color:var(--cg-text-secondary);font-size:var(--cg-text-sm);overflow-wrap:anywhere}
.dash-priority-go{color:var(--cg-primary);font-size:var(--cg-text-sm);font-weight:700;white-space:nowrap}
.dash-notes{margin:var(--cg-space-3) 0 0;padding:0 0 0 var(--cg-space-5);color:var(--cg-text-secondary);font-size:var(--cg-text-sm)}
.dash-clear,.dash-unsure{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cg-space-3) var(--cg-space-4);padding:var(--cg-space-4);border-radius:var(--cg-radius)}
.dash-clear{background:var(--cg-success-soft)}
.dash-clear-mark{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--cg-radius-pill);background:var(--cg-success);color:var(--cg-surface);font-weight:800}
.dash-clear-copy{display:grid;gap:2px;flex:1 1 200px;min-width:0}
.dash-clear-copy strong{color:var(--cg-text);font-size:var(--cg-text-md)}
.dash-clear-copy small{color:var(--cg-text-secondary);font-size:var(--cg-text-sm)}
.dash-unsure{display:block;background:var(--cg-warning-soft);color:var(--cg-text)}
.dash-unsure>strong{color:var(--cg-warning)}
.dash-unsure .dash-notes{margin-top:var(--cg-space-2)}
.dash-clear-actions{display:flex;flex-wrap:wrap;gap:var(--cg-space-2)}
.dash-unsure .dash-clear-actions{margin-top:var(--cg-space-3)}
.dash-clear-actions a{display:inline-flex;align-items:center;min-height:var(--cg-control-height);padding:0 var(--cg-space-4);border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius-pill);background:var(--cg-surface);color:var(--cg-text);font-size:var(--cg-text-sm);font-weight:600;text-decoration:none}
.dash-clear-actions a:hover,.dash-clear-actions a:focus-visible{border-color:var(--cg-primary);color:var(--cg-primary)}

/* Quick actions */
.dash-quick{padding:var(--cg-space-4) var(--cg-space-5)}
.dash-quick .dash-section-head{margin-bottom:var(--cg-space-3)}
.dash-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--cg-space-3)}
.dash-action{display:grid;align-content:center;gap:2px;min-width:0;min-height:56px;padding:var(--cg-space-3) var(--cg-space-4);border:1px solid var(--cg-border);border-radius:var(--cg-radius);background:var(--cg-surface-soft);color:var(--cg-text);text-decoration:none}
.dash-action:hover,.dash-action:focus-visible{border-color:var(--cg-primary);background:var(--cg-row-hover);color:var(--cg-text)}
.dash-action strong{font-size:var(--cg-text-md);font-weight:700;overflow-wrap:anywhere}
.dash-action small{color:var(--cg-muted);font-size:var(--cg-text-xs);overflow-wrap:anywhere}
.dash-action.is-featured{background:var(--cg-cta);border-color:var(--cg-cta);color:var(--cg-on-cta)}
.dash-action.is-featured:hover,.dash-action.is-featured:focus-visible{background:var(--cg-cta-hover);border-color:var(--cg-cta-hover);color:var(--cg-on-cta)}
.dash-action.is-featured small{color:var(--cg-on-cta)}

/* Store performance + opportunities */
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cg-space-5);align-items:start;margin:0 0 var(--cg-space-5)}
.dash-grid>.dash-card{margin:0}
.dash-grid>.dash-card:only-child{grid-column:1/-1}
.dash-perf-list{display:grid}
.dash-perf-row{display:flex;align-items:center;justify-content:space-between;gap:var(--cg-space-4);padding:var(--cg-space-3) 0;border-top:1px solid var(--cg-border)}
.dash-perf-row:first-child{border-top:0;padding-top:0}
.dash-perf-label{display:grid;gap:2px;min-width:0;font-weight:600}
.dash-perf-label small,.dash-perf-value small{color:var(--cg-muted);font-size:var(--cg-text-xs);font-weight:400}
.dash-perf-value{display:grid;justify-items:end;gap:2px;text-align:right;min-width:0}
.dash-perf-value strong{font-size:var(--cg-text-lg);font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dash-perf-row.is-unavailable .dash-perf-value strong{color:var(--cg-muted)}
.dash-opp-row{display:flex;flex-wrap:wrap;gap:var(--cg-space-2);margin:0 0 var(--cg-space-3)}
.dash-opp{display:inline-flex;align-items:center;gap:6px;min-height:var(--cg-control-height);padding:0 var(--cg-space-4);border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius-pill);background:var(--cg-surface-soft);color:var(--cg-text);font-size:var(--cg-text-sm);text-decoration:none}
.dash-opp:hover,.dash-opp:focus-visible{border-color:var(--cg-primary);color:var(--cg-primary)}
.dash-opp.is-unavailable{border-style:dashed;color:var(--cg-text-secondary)}
.dash-opp.is-unavailable strong{color:var(--cg-muted)}
.dashboard-economics{margin-top:var(--cg-space-4)}
.dashboard-economics>summary{cursor:pointer;color:var(--cg-muted);font-size:var(--cg-text-sm)}
.dashboard-economics .economics{margin-top:var(--cg-space-3)}
.dashboard-economics .economics div{background:var(--cg-surface-soft);color:var(--cg-muted)}
.dashboard-economics .economics strong{color:var(--cg-text)}

/* Optional Inventory health panel (Customize). Off by default. */
.dashboard-review-panel{padding:var(--cg-space-6)}
.dashboard-review-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--cg-space-4);margin:0 0 var(--cg-space-4)}
.dashboard-review-heading h2{margin:0;font-size:var(--cg-text-lg);font-weight:700}
.dashboard-review-heading p:not(.page-eyebrow){margin:var(--cg-space-1) 0 0;color:var(--cg-muted);font-size:var(--cg-text-sm)}
.dashboard-review-heading .page-eyebrow{margin:0 0 var(--cg-space-1)}
.dashboard-review-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 var(--cg-space-2);
  border-radius:var(--cg-radius-pill);background:var(--cg-danger-soft);color:var(--cg-danger);
  font-family:var(--cg-font-body);font-size:var(--cg-text-sm);font-weight:700;vertical-align:middle;font-variant-numeric:tabular-nums;
}
.dashboard-view-all,.dashboard-review-footer a{font-size:var(--cg-text-sm);font-weight:600;text-decoration:none;white-space:nowrap}
.dashboard-view-all:hover,.dashboard-review-footer a:hover{text-decoration:underline}

.dashboard-review-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--cg-space-3)}
.dashboard-review-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--cg-space-3) var(--cg-space-4);
  padding:var(--cg-space-4);border:1px solid var(--cg-border);border-left:4px solid var(--cg-border-strong);
  border-radius:var(--cg-radius);background:var(--cg-surface-soft);
}
.dashboard-review-row:has(.severity-4),.dashboard-review-row:has(.severity-3){border-left-color:var(--cg-danger)}
.dashboard-review-row:has(.severity-2){border-left-color:var(--cg-warning)}
.dashboard-review-row:has(.severity-1){border-left-color:var(--cg-success)}
.dashboard-review-row:hover{background:var(--cg-row-hover)}
.dashboard-review-content{min-width:0;grid-column:1;grid-row:1}
.dashboard-review-title{display:block;color:var(--cg-text);font-size:var(--cg-text-md);font-weight:700;line-height:1.3;text-decoration:none;overflow-wrap:anywhere}
.dashboard-review-title:hover{color:var(--cg-primary)}
.dashboard-review-why{margin:var(--cg-space-1) 0 0;color:var(--cg-text-secondary);font-size:var(--cg-text-sm)}
.dashboard-review-meta{margin:var(--cg-space-1) 0 0;color:var(--cg-muted);font-size:var(--cg-text-xs);font-variant-numeric:tabular-nums}
.dashboard-review-reason{justify-self:start;grid-column:1;grid-row:2}
.dashboard-review-action{white-space:nowrap}
.dashboard-row-tools{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:stretch;gap:var(--cg-space-2)}
.dashboard-row-tools form{margin:0}
.button.dashboard-hide-button,.button.dashboard-undo-button{white-space:nowrap;min-height:var(--cg-control-height)}
.dashboard-hidden{margin-top:var(--cg-space-4)}
.dashboard-hidden ul{max-height:min(60vh,520px);overflow-y:auto}
.dashboard-hide-notice{margin:0 0 var(--cg-space-4)}
.dashboard-review-empty{padding:var(--cg-space-5);border:1px dashed var(--cg-border-strong);border-radius:var(--cg-radius);color:var(--cg-text-secondary)}
.dashboard-review-empty p{margin:var(--cg-space-1) 0 0}
.dashboard-review-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cg-space-2) var(--cg-space-5);margin-top:var(--cg-space-4);color:var(--cg-muted);font-size:var(--cg-text-xs)}
.dashboard-review-footer span{margin-right:auto}

@media(max-width:900px){
  .dash-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .dash-card{padding:var(--cg-space-4);margin-bottom:var(--cg-space-4)}
  .dash-quick{padding:var(--cg-space-3) var(--cg-space-4)}
  .dash-priority-link{grid-template-columns:40px minmax(0,1fr);gap:var(--cg-space-2) var(--cg-space-3)}
  .dash-priority-count{width:40px;height:40px}
  .dash-priority-go{grid-column:2}
  .dash-section-head{flex-wrap:wrap}
  .dash-perf-row{flex-wrap:wrap}
  .dashboard-review-panel{padding:var(--cg-space-4)}
  .dashboard-review-heading{flex-direction:column;gap:var(--cg-space-2)}
  .dashboard-review-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--cg-space-3)}
  .dashboard-review-content{grid-column:1/-1}
  .dashboard-review-action{min-height:var(--cg-control-height)}
  .dashboard-review-reason{grid-column:1/-1}
  .dashboard-row-tools{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cg-space-3)}
  .dashboard-row-tools:has(> .button:only-child){grid-template-columns:minmax(0,1fr)}
  .dashboard-row-tools .button,.dashboard-hide-button,.dashboard-undo-button{width:100%;min-height:var(--cg-control-height);justify-content:center}
  .dashboard-hidden li .dashboard-hide-form,.dashboard-hidden li .dashboard-undo-button{width:100%}
  .dashboard-row-tools .dashboard-hide-button{border-color:var(--cg-border-strong)}
}
@media(prefers-reduced-motion:reduce){.dash-priority-link{transition:none}}

.app-main .page-header,
.app-main .dashboard-header,
.app-main .listing-header,
.app-main .edit-header{
  margin-bottom:20px;padding-bottom:18px;
}
.app-main .page-subtitle{margin-top:6px;font-size:.95rem;line-height:1.5}
.app-main table :where(th){font-size:.74rem;letter-spacing:.05em;text-transform:uppercase}
/* ---------- Inventory (rebuilt) ----------
   Every row answers, in order: what card is it, how many are in stock, what do I do about it.
   Card name is the biggest thing on the row; Pick Your Card listings share one header; one primary
   action per row. Theme tokens only (no literal colors). On a phone each row becomes a stacked card. */
.inventory-results .inventory-set-field>small,
.inventory-results .inventory-number-field>small{display:none}
.inventory-results .inventory-pencil{opacity:.75}
.inventory-results .inventory-pencil:hover,.inventory-results .inventory-pencil:focus-visible{opacity:1}

/* Quick looks, filter bar, chips */
.inv-presets{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cg-space-2);margin:0 0 var(--cg-space-3)}
.inv-presets-label{margin-right:var(--cg-space-1);font-size:var(--cg-text-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cg-muted)}
.inv-preset{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--cg-space-3);border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius-pill);background:var(--cg-surface);color:var(--cg-text);font-size:var(--cg-text-sm);font-weight:600;text-decoration:none;white-space:nowrap}
.inv-preset:hover{background:var(--cg-row-hover)}
.inv-preset.is-on{border-color:var(--cg-primary);background:var(--cg-primary-soft);color:var(--cg-primary)}
.inventory-search-shell .inv-filterbar{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cg-space-3);align-items:stretch}
.inv-bar{display:grid;grid-template-columns:minmax(180px,2fr) minmax(150px,1.3fr) minmax(120px,.8fr) minmax(170px,1.1fr) minmax(90px,.5fr) minmax(90px,.5fr) auto;gap:var(--cg-space-3);align-items:end}
@media (min-width:769px) and (max-width:1500px){.inv-bar{grid-template-columns:repeat(4,minmax(0,1fr))}.inv-bar .inv-search{grid-column:1/-1}.inv-bar .inv-set,.inv-bar .inv-bar-actions{grid-column:span 2}}
/* A chosen Set or Language is marked on the control itself as well as by its removable chip below. */
.inv-field.is-active>span{color:var(--cg-primary)}
.inventory-search-shell .inv-filterbar .inv-field.is-active :is(input,select){border-color:var(--cg-primary);box-shadow:0 0 0 1px var(--cg-primary)}
.inv-field{display:grid;gap:var(--cg-space-1);min-width:0;margin:0}
.inv-field>span{font-size:var(--cg-text-xs);font-weight:700;color:var(--cg-text-secondary)}
.inventory-search-shell .inv-filterbar .inv-field :is(input,select){width:100%;min-width:0;min-height:var(--cg-control-height-sm);margin:0}
.inventory-search-shell .inv-filterbar .inv-field-small :is(input[type=number],input:not([type])){min-width:84px}
.inv-filterbar input[type=number]{-moz-appearance:textfield;appearance:textfield}
.inv-filterbar input[type=number]::-webkit-inner-spin-button,
.inv-filterbar input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.inv-bar-actions{display:flex;align-items:center;gap:var(--cg-space-2)}
.inv-more{border:1px solid var(--cg-border);border-radius:var(--cg-radius);background:var(--cg-surface-soft)}
.inv-more>summary{display:flex;align-items:center;gap:var(--cg-space-2);min-height:var(--cg-control-height-sm);padding:0 var(--cg-space-4);cursor:pointer;list-style:none;color:var(--cg-primary);font-weight:700}
.inv-more>summary::-webkit-details-marker{display:none}
.inv-more>summary::after{content:"▾";margin-left:auto;color:var(--cg-muted)}
.inv-more[open]>summary::after{content:"▴"}
.inv-badge{padding:0 var(--cg-space-2);border-radius:var(--cg-radius-pill);background:var(--cg-primary);color:var(--cg-on-primary);font-size:var(--cg-text-xs);line-height:20px}
.inv-more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--cg-space-3);padding:var(--cg-space-1) var(--cg-space-4) var(--cg-space-3)}
.inv-toggles{display:flex;flex-wrap:wrap;gap:var(--cg-space-2) var(--cg-space-5);padding:0 var(--cg-space-4) var(--cg-space-3)}
.inv-check input{flex:none;margin:0}
.inv-check{display:inline-flex;align-items:center;gap:var(--cg-space-2);min-height:32px;font-size:var(--cg-text-sm);color:var(--cg-text)}
.inv-more-actions{padding:0 var(--cg-space-4) var(--cg-space-4)}
.inv-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cg-space-2);margin-top:var(--cg-space-3)}
.inv-chip{display:inline-flex;align-items:center;gap:var(--cg-space-2);min-height:32px;padding:0 var(--cg-space-3);border:1px solid var(--cg-border-strong);border-radius:var(--cg-radius-pill);background:var(--cg-surface);color:var(--cg-text);font-size:var(--cg-text-sm);font-weight:600;text-decoration:none}
.inv-chip:hover{background:var(--cg-row-hover)}
.inv-chip [aria-hidden]{color:var(--cg-muted);font-weight:800}
.inv-clear-all{padding:0 var(--cg-space-2);color:var(--cg-primary);font-size:var(--cg-text-sm);font-weight:700}
.inv-sortline{margin:var(--cg-space-1) 0 0;font-size:var(--cg-text-sm);color:var(--cg-text-secondary)}
.inv-sortline strong{color:var(--cg-text)}
.inv-vocab{margin:var(--cg-space-1) 0 0;font-size:var(--cg-text-xs)}

/* Table (desktop) */
.inv-table{width:100%;border-collapse:collapse}
.inv-table thead th{padding:var(--cg-space-3) var(--cg-space-4);border-bottom:1px solid var(--cg-border-strong);text-align:left}
.inv-th-sort{display:inline-flex;align-items:center;gap:var(--cg-space-1);color:var(--cg-text-secondary);font:inherit;text-decoration:none}
.inv-th-sort:hover{color:var(--cg-text)}
.inv-table th.is-sorted .inv-th-sort{color:var(--cg-text)}
.inv-sort-arrow{color:var(--cg-muted);font-size:.7rem}
.inv-table th.is-sorted .inv-sort-arrow{color:var(--cg-primary);font-size:.8rem}
.inv-table td{padding:var(--cg-space-3) var(--cg-space-4);border-bottom:1px solid var(--cg-border);vertical-align:top}
.inv-table td::before{content:none}
.inv-row:hover td{background:var(--cg-row-hover)}
.inv-cell-card{width:46%}
.inv-cell-in-stock{width:17%}
.inv-cell-price{width:10%;font-size:var(--cg-text-md);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-cell-updated{width:9%;font-size:var(--cg-text-sm);color:var(--cg-muted);white-space:nowrap}
.inv-cell-actions{width:18%}
.inv-table .relist-pick{flex:none;width:22px;height:22px;margin:var(--cg-space-1) 0 0}

/* Card cell: name, then one muted line, then the eBay title */
.inv-card{display:flex;align-items:flex-start;gap:var(--cg-space-3);min-width:0}
.inv-card-main{display:grid;flex:1 1 auto;gap:var(--cg-space-1);min-width:0}
.inv-card .inventory-card-name{display:block;color:var(--cg-text);font-size:var(--cg-text-md);font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.inv-card .inventory-listing-title{color:var(--cg-text-secondary);font-size:var(--cg-text-sm);font-weight:500;line-height:1.35}
.app-main .inv-card .inventory-listing-thumb-wrap,
.inv-card .card-preview-wrap,.inv-card .catalog-thumb-missing,.inv-card .inventory-listing-thumb-missing,
.inv-thumb-placeholder{flex:0 0 48px;width:48px}
.app-main .inv-card .inventory-listing-thumb-wrap .photo-zoom-thumb{width:48px;height:66px;object-fit:contain;background:var(--cg-surface-soft);border-radius:var(--cg-radius-sm)}
.inv-thumb-placeholder{height:66px;border:1px dashed var(--cg-border-strong);border-radius:var(--cg-radius-sm);background:var(--cg-neutral-soft)}
.inv-meta{display:flex;flex-wrap:wrap;align-items:center;color:var(--cg-text-secondary);font-size:var(--cg-text-sm);line-height:1.5}
.inv-meta-part{display:inline-flex;align-items:center;gap:var(--cg-space-1);min-width:0}
.inv-meta-part+.inv-meta-part::before{content:"·";margin:0 var(--cg-space-2);color:var(--cg-muted)}
.inv-meta-part:last-child{margin-left:var(--cg-space-3)}
.inv-meta-part:last-child::before{content:none!important}
.inv-meta .inventory-finish{display:inline;margin:0;color:inherit;font-size:inherit}
.inv-meta .inventory-finish.is-conflict{color:var(--cg-warning);font-weight:700;font-style:normal}
.inv-meta .inventory-sku{color:var(--cg-primary);font-weight:700;letter-spacing:.02em;text-decoration:none;overflow-wrap:anywhere}
.inv-meta .inventory-sku:hover{text-decoration:underline}
.inv-meta .inventory-sku.is-empty{color:var(--cg-muted);font-weight:400}
.inv-meta .inventory-editable-value{font-size:inherit}
.inv-from-title{color:var(--cg-muted);font-size:var(--cg-text-xs);font-style:italic}
.inv-ident{color:var(--cg-muted);font-size:var(--cg-text-xs);font-weight:600;white-space:nowrap}
.inv-ident.is-verified{color:var(--cg-success)}
.inv-ident.is-unverified::before{content:"○";margin-right:3px}
.inventory-historical-qty{color:var(--cg-muted);font-size:var(--cg-text-sm);font-weight:700;white-space:nowrap}

/* Stock cell: the number, then status chips */
.inv-stock{display:grid;gap:var(--cg-space-2);justify-items:start}
.inv-stock-qty{display:flex;align-items:baseline;gap:var(--cg-space-2)}
.inv-qty{color:var(--cg-text);font-size:var(--cg-text-lg);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.inv-qty.is-zero{color:var(--cg-danger)}
.inv-qty.is-low{color:var(--cg-warning)}
.inv-stock-label{color:var(--cg-muted);font-size:var(--cg-text-xs)}
.inv-chip-row{display:flex;flex-wrap:wrap;gap:var(--cg-space-1) var(--cg-space-2)}
.inv-chip-row :is(.inventory-status,.inventory-sold-recently,.inv-count-chip,.inventory-management){min-height:24px;padding:2px 10px;font-size:var(--cg-text-xs)}
.inv-stock .inventory-status-empty{background:var(--cg-danger-soft);color:var(--cg-danger)}
.inventory-sold-recently{display:inline-flex;align-items:center;border-radius:var(--cg-radius-pill);background:var(--cg-success-soft);color:var(--cg-success);font-weight:700;line-height:1;white-space:nowrap}
.inventory-status-live-again{background:var(--cg-warning-soft);color:var(--cg-warning)}
.inventory-status-maybe-live{background:transparent;color:var(--cg-warning);border:1px dashed var(--cg-warning);text-decoration:none}
.inventory-sold-history{display:block;margin-top:var(--cg-space-1);color:var(--cg-success);font-weight:600}

/* Actions: one primary, secondary links quiet */
.inv-actions{display:grid;gap:var(--cg-space-2);justify-items:start}
.inv-actions>.button{min-height:var(--cg-control-height-sm);white-space:nowrap}
.inv-secondary{display:flex;flex-wrap:wrap;gap:0 var(--cg-space-3)}
.inv-secondary .inv-link{min-height:32px;padding:0;border:0;background:none;color:var(--cg-primary);font-size:var(--cg-text-sm);font-weight:600;text-decoration:none;white-space:nowrap}
.inv-secondary .inv-link:hover{text-decoration:underline}
.inv-noaction{font-size:var(--cg-text-sm)}

/* Pick Your Card group header: parent title and photo once */
.inv-group-row td{padding:var(--cg-space-3) var(--cg-space-4);border-top:1px solid var(--cg-border-strong);background:var(--cg-surface-soft)}
.inv-group{display:flex;align-items:center;gap:var(--cg-space-3)}
.inv-group-main{display:grid;flex:1 1 auto;gap:var(--cg-space-1);min-width:0}
.inv-group-title{color:var(--cg-text);font-size:var(--cg-text-md);font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.inv-count-chip{display:inline-flex;align-items:center;border-radius:var(--cg-radius-pill);background:var(--cg-neutral-soft);color:var(--cg-info);font-weight:700;line-height:1;white-space:nowrap}
.inv-count-chip.is-out{background:var(--cg-danger-soft);color:var(--cg-danger)}
.inv-count-chip.is-quiet{background:none;color:var(--cg-muted);font-weight:500}
.app-main .inv-group .inventory-listing-thumb-wrap{flex:0 0 48px;width:48px}
.app-main .inv-group .inventory-listing-thumb-wrap .photo-zoom-thumb{width:48px;height:66px;object-fit:contain;background:var(--cg-surface);border-radius:var(--cg-radius-sm)}
.inv-row.is-grouped td:first-child{padding-left:var(--cg-space-6);border-left:3px solid var(--cg-border-strong)}
.app-main .inv-row.is-grouped .inv-card .inventory-listing-thumb-wrap,
.inv-row.is-grouped .inv-card .card-preview-wrap,.inv-row.is-grouped .inv-thumb-placeholder{flex-basis:36px;width:36px}
.app-main .inv-row.is-grouped .inv-card .inventory-listing-thumb-wrap .photo-zoom-thumb{width:36px;height:50px}
.inv-row.is-grouped .inv-thumb-placeholder{height:50px}

@media(max-width:768px){
  .inventory-results .inventory-pencil{min-width:34px;min-height:34px}
  /* Touch area: the pencil keeps its 34px look and layout, and an invisible 44px zone around it is also tappable. The set and
     card-number pencils touch edge to edge in the identity line (34px apart), so their zone grows sideways only. */
  .inventory-results .inventory-pencil{position:relative}
  .inventory-results .inventory-pencil::after{content:"";position:absolute;inset:-5px}
  .inventory-results .inventory-inline-identity .inventory-pencil::after{inset:0 -5px}
  .inventory-results .inventory-inline-title .inventory-pencil::after{content:none}
  .inv-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-bar .inv-search,.inv-bar .inv-set,.inv-bar .inv-bar-actions{grid-column:1/-1}
  .inventory-search-shell .inv-filterbar .inv-field-small{grid-column:auto}
  .inv-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inventory-search-shell .inv-filterbar .inv-more-grid .inv-field{grid-column:auto}
  .inv-bar-actions .button{flex:1 1 0}
  .inv-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .inv-presets::-webkit-scrollbar{display:none}
  .inv-presets>*{flex:0 0 auto}
  .inv-table,.inv-table tbody{display:block}
  .inv-table thead{display:none}
  .inv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"card price" "card stock" "actions actions";gap:var(--cg-space-1) var(--cg-space-3);margin:var(--cg-space-3);padding:var(--cg-space-3);border:1px solid var(--cg-border);border-radius:var(--cg-radius);background:var(--cg-surface)}
  .inv-table .inv-row>td{display:block;padding:0;border:0;background:none}
  .inv-row:hover td{background:none}
  .inv-cell-card{grid-area:card;width:auto}
  .inv-cell-price{grid-area:price;width:auto;text-align:right}
  .inv-cell-in-stock{grid-area:stock;width:auto;justify-self:end}
  .inv-cell-actions{grid-area:actions;width:auto;margin-top:var(--cg-space-2);padding-top:var(--cg-space-3)!important;border-top:1px solid var(--cg-border)!important}
  .inv-table .inv-row>td.inv-cell-updated{display:none}
  .inv-stock{justify-items:end}
  .inv-chip-row{flex-direction:column;align-items:flex-end}
  .inv-meta{gap:0 var(--cg-space-3)}
  .inv-meta-part+.inv-meta-part::before{content:none}
  .inv-meta-part:last-child{margin-left:0;flex-basis:100%}
  .inv-actions{justify-items:stretch}
  .inv-actions>.button{width:100%;min-height:var(--cg-control-height);justify-content:center}
  .inv-secondary{justify-content:space-between}
  .inv-secondary .inv-link{min-height:44px;display:inline-flex;align-items:center}
  .inv-row.is-grouped{margin-top:0;margin-bottom:var(--cg-space-1);border-left:3px solid var(--cg-border-strong)}
  .inv-row.is-grouped td:first-child{padding-left:0!important;border-left:0!important}
  .inv-table .inv-group-row{display:block;margin:var(--cg-space-3) var(--cg-space-3) 0;border:1px solid var(--cg-border);border-radius:var(--cg-radius);background:var(--cg-surface-soft)}
  .inv-table .inv-group-row>td{display:block;padding:var(--cg-space-3);border:0}
  .inv-group{flex-wrap:wrap}
  .inv-group-main{flex:1 1 calc(100% - 64px)}
  .inv-group>.inv-link{flex-basis:100%;min-height:44px;display:inline-flex;align-items:center}
  .inv-table .relist-pick{width:28px;height:28px}
  .inv-table tr:has(td[colspan]):not(.inv-group-row){display:block}
}
@media(prefers-reduced-motion:reduce){.inv-preset,.inv-chip{transition:none}}

/* ---------- Browse Cards: compact, aligned cards ----------
   Status and the pick control are what matter while choosing; the full
   identity/match facts stay one tap away under "Card details". */
.catalog-result-card .catalog-result-more{margin-top:8px}
.catalog-result-card .catalog-result-more>summary{
  cursor:pointer;list-style:none;color:var(--cg-primary);font-size:.78rem;font-weight:750;
  padding:4px 0;min-height:28px;display:inline-flex;align-items:center;
}
.catalog-result-card .catalog-result-more>summary::-webkit-details-marker{display:none}
.catalog-result-card .catalog-result-more>summary::after{content:"▾";margin-left:5px;font-size:.7rem}
.catalog-result-card .catalog-result-more[open]>summary::after{content:"▴"}
html body .app-main .catalog-result-more .catalog-result-grid{grid-template-columns:1fr;gap:6px;margin:6px 0 4px}
html body .app-main .catalog-result-more .catalog-result-grid>div{display:block}
html body .app-main .catalog-result-more .catalog-result-source{display:block;font-size:.76rem;margin:4px 0 0}
html body .app-main .catalog-result-card[data-pyc-status="unlisted"] .catalog-result-more .catalog-result-grid{display:grid}
.catalog-result-card .catalog-result-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.catalog-result-card .catalog-result-title h3{flex:1 1 100%;order:3;margin:2px 0 0}
@media(min-width:769px){
  html body .app-main .catalog-result-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
  html body .app-main .catalog-result-list .catalog-result-image .catalog-thumb{width:128px;height:179px}
  .catalog-result-card:hover{border-color:var(--cg-border-strong)}
}
@media(max-width:768px){
  html body .app-main .catalog-result-card .catalog-result-more{margin-top:2px}
}
.app-main .pyc-select-form .notice,
.app-main .pyc-select-form .catalog-physical-save{font-size:.84rem;line-height:1.45;padding:9px 13px;margin:8px 0}
.app-main .pyc-select-form .catalog-physical-save{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}

/* ---------- Pick Your Card: clear ways to start ---------- */
.app-main .pyc-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.app-main .pyc-start-card{
  display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:var(--cg-radius);
  background:var(--cg-surface);border:1px solid var(--cg-border);box-shadow:var(--cg-shadow-card);
  color:var(--cg-text);text-decoration:none;transition:border-color .15s ease,transform .15s ease;
}
.app-main .pyc-start-card:hover,.app-main .pyc-start-card:focus-visible{border-color:var(--cg-primary);transform:translateY(-1px)}
.app-main .pyc-start-card strong{font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.app-main .pyc-start-card span{color:var(--cg-text-secondary);font-size:.88rem;line-height:1.45;flex:1}
.app-main .pyc-start-card em{font-style:normal;font-weight:800;font-size:.86rem;color:var(--cg-primary);margin-top:6px}
.app-main .pyc-start-primary{background:var(--cg-primary-soft);border-color:var(--cg-primary)}
.app-main .pyc-empty h2{font-size:1.05rem;margin:0 0 6px}
@media(max-width:900px){.app-main .pyc-start{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.app-main .pyc-start-card{transition:none}}

/* ---------- Unlisted card details: never truncate a select ---------- */
.app-main .catalog-unlisted-fields{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.app-main .catalog-unlisted-fields select,
.app-main .catalog-unlisted-fields input:not([type=checkbox]){width:100%;text-overflow:ellipsis}
.app-main .catalog-unlisted-fields select{padding-right:28px}

/* ---------- Pick Your Card: start with your usual details ---------- */
.app-main .pyc-defaults{
  margin:12px 0;padding:14px 16px;border-radius:var(--cg-radius);
  background:var(--cg-primary-soft);border:1px solid var(--cg-primary);
}
.app-main .pyc-defaults h3{margin:0 0 2px;font-size:1.02rem;font-weight:800}
.app-main .pyc-defaults p{margin:0 0 10px;color:var(--cg-text-secondary);font-size:.86rem;line-height:1.45}
.app-main .pyc-defaults-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.app-main .pyc-defaults-grid label{display:grid;gap:4px;min-width:0;font-size:.78rem;font-weight:700;color:var(--cg-text-secondary)}
.app-main .pyc-defaults-grid input,.app-main .pyc-defaults-grid select{
  width:100%;min-width:0;height:44px;padding:8px 10px;font-size:1rem;
  border:1px solid var(--cg-border-strong);border-radius:8px;background:var(--cg-surface);color:var(--cg-text);
}
.app-main .pyc-defaults-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}
.app-main .pyc-defaults-overwrite{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--cg-text-secondary)}
.app-main .pyc-defaults-overwrite input{width:20px;height:20px;accent-color:var(--cg-primary)}
.app-main .pyc-defaults-status{font-size:.84rem;font-weight:700;color:var(--cg-primary)}

/* ---------- Saved Pick Your Card drafts ---------- */
.app-main .pyc-draft-items{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.app-main .pyc-draft-items li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:10px 12px;border:1px solid var(--cg-border);border-radius:10px;background:var(--cg-surface-soft)}
.app-main .pyc-draft-items a{color:var(--cg-primary);text-decoration:none}
.app-main .pyc-draft-items span{color:var(--cg-text-secondary);font-size:.86rem}
.app-main .pyc-draft-head{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin:0 0 12px}
.app-main .pyc-draft-head label{display:grid;gap:4px;font-size:.78rem;font-weight:700;color:var(--cg-text-secondary)}
.app-main .pyc-draft-head input,.app-main .pyc-draft-head textarea{width:100%;padding:9px 10px;border:1px solid var(--cg-border-strong);border-radius:8px;background:var(--cg-surface);color:var(--cg-text);font:inherit;font-size:1rem}
.app-main .pyc-draft-checklist,.app-main .pyc-draft-bulk{margin:0 0 12px;padding:10px 14px}
.app-main .pyc-draft-checklist summary,.app-main .pyc-draft-bulk summary{cursor:pointer;font-weight:800;min-height:34px;display:flex;align-items:center}
.app-main .pyc-draft-checklist ul{margin:8px 0 2px;padding-left:20px;color:var(--cg-text-secondary);font-size:.9rem;line-height:1.5}
.app-main .pyc-draft-rows{display:grid;gap:12px;margin:0 0 6px}
.app-main .pyc-draft-row{padding:14px;border:1px solid var(--cg-border);border-radius:var(--cg-radius);background:var(--cg-surface);box-shadow:var(--cg-shadow-card)}
.app-main .pyc-draft-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.app-main .pyc-draft-thumb{flex:none;width:56px}
.app-main .pyc-draft-thumb img{width:56px;height:auto;border-radius:6px}
.app-main .pyc-draft-thumb small{display:none}
.app-main .pyc-draft-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.app-main .pyc-draft-id small{color:var(--cg-muted)}
.app-main .pyc-draft-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.app-main .pyc-draft-field{display:grid;gap:4px;min-width:0;font-size:.78rem;font-weight:700;color:var(--cg-text-secondary);align-content:start}
.app-main .pyc-draft-field--wide{grid-column:1/-1}
.app-main .pyc-draft-field input,.app-main .pyc-draft-field select{width:100%;min-width:0;height:44px;padding:8px 10px;border:1px solid var(--cg-border-strong);border-radius:8px;background:var(--cg-surface);color:var(--cg-text);font-size:1rem}
.app-main .pyc-draft-fixed strong{display:flex;align-items:center;min-height:44px;font-size:.95rem;color:var(--cg-text)}
.app-main .pyc-draft-fixed small{margin-left:6px;font-weight:600;color:var(--cg-muted)}
.app-main .pyc-draft-remove{display:flex;align-items:center;gap:6px;font-size:.84rem;white-space:nowrap;min-height:44px}
.app-main .pyc-draft-actions{margin:14px 0}
.app-main .pyc-draft-cancel{margin:6px 0 14px}
.app-main .pyc-save-draft{margin:16px 0;padding:14px 16px;border:1px solid var(--cg-primary);border-radius:var(--cg-radius);background:var(--cg-primary-soft)}
.app-main .pyc-save-draft p{margin:8px 0 0}
@media(max-width:768px){.app-main .pyc-draft-head{grid-template-columns:1fr}}

/* ---------- Images that cannot load ---------- */
.app-main .catalog-thumb-missing.is-broken{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;
  width:100%;max-width:128px;aspect-ratio:5/7;min-height:0;
  border:1px dashed var(--cg-border-strong);border-radius:8px;
  background:var(--cg-surface-soft);color:var(--cg-muted);font-size:.78rem;
}
.app-main .catalog-result-list .catalog-result-image .catalog-thumb-missing.is-broken{box-sizing:border-box;width:100%;max-width:128px;height:auto;aspect-ratio:5/7;font-size:.7rem;overflow:hidden}
.app-main .pyc-draft-thumb .catalog-thumb-missing.is-broken,.app-main .inventory-card-cell .catalog-thumb-missing.is-broken{width:56px;height:78px;font-size:.62rem;padding:2px}
@media(min-width:769px){html body .app-main .catalog-result-list{align-items:start}}

/* ---------- Browse Cards filters: compact on phones ---------- */
@media(max-width:768px){
  html body .app-main .catalog-filter-panel .panel-header p{display:none}
  html body .app-main .catalog-filter-panel{padding:12px 14px}
  html body .app-main .catalog-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html body .app-main .catalog-filter-grid label{font-size:.78rem;gap:3px}
  html body .app-main .catalog-filter-grid select,html body .app-main .catalog-filter-grid input{height:44px;padding:6px 8px;font-size:.95rem;min-width:0}
  html body .app-main .catalog-filter-grid .button{grid-column:1/-1;min-height:46px}
}

/* ---------- Orders: pick by bin ---------- */
.app-main .order-bin-group{margin:0 0 12px;padding:14px 16px}
.app-main .order-bin-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px}
.app-main .order-bin-head h2{margin:0;font-size:1.5rem;letter-spacing:.01em}
.app-main .order-bin-head .muted{margin-left:auto}
.app-main .order-bin-group.is-missing{border-style:dashed}
.app-main .order-bin-group.is-picked-locally{opacity:.6}
.app-main .order-bin-table small{display:block;color:var(--cg-muted)}
.app-main .order-bin-table td[data-label='Order'] a{margin-left:6px;font-weight:700}
@media(max-width:768px){html body .app-main .order-print-scope .order-summary-bar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}

/* ---------- Orders: phone pick list, ship shortcuts, sync strip ---------- */
.app-main .order-sync-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm)}
.app-main .order-sync-strip-text{flex:1 1 220px;font-size:.9rem;color:var(--cg-text-secondary)}
.app-main .pick-progress-bar{position:sticky;top:0;z-index:20;display:grid;gap:6px;margin:0 0 8px;padding:8px 14px;border-radius:var(--cg-radius);border:1px solid var(--cg-border,rgba(128,140,160,.35));background:var(--cg-surface,Canvas);box-shadow:var(--cg-shadow-card)}
.app-main .pick-progress-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.app-main .pick-progress-text strong{font-size:1.1rem}
.app-main .pick-progress-text span{color:var(--cg-text-secondary);font-size:.9rem}
.app-main .pick-progress-meter{height:10px;border-radius:999px;background:rgba(128,140,160,.28);overflow:hidden}
.app-main .pick-progress-meter span{display:block;height:100%;width:0;border-radius:999px;background:var(--cg-primary,#3b82f6);transition:width .2s ease}
.app-main .pick-progress-bar.is-complete .pick-progress-meter span{background:var(--cg-success,#16a34a)}
.app-main .pick-progress-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.app-main .pick-progress-actions .button{min-height:44px}
.app-main .order-bin-group{scroll-margin-top:90px}
.app-main .order-print-scope.hide-finished .order-bin-group.is-picked-locally{display:none}
.app-main .order-bin-group.is-picked-locally .order-bin-head h2::after{content:" ✓";color:var(--cg-success,#16a34a)}
.app-main .ship-queue{margin-top:16px;border-color:var(--cg-success,#16a34a)}
.app-main .ship-queue-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.app-main .ship-queue-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm)}
.app-main .ship-queue-list li[hidden]{display:none}
.app-main .ship-link{min-height:44px;display:inline-flex;align-items:center}
.app-main .order-footer-actions{display:flex;flex-wrap:wrap;gap:8px}
.app-main .order-pick-card.is-picked-locally .ship-link{background:var(--cg-primary,#3b82f6);color:#fff;border-color:transparent}
.app-main .pick-session-finish{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:768px){
  .app-main .pick-progress-actions .button{flex:1 1 140px;justify-content:center}
  .app-main .ship-queue-list li .ship-link{flex:1 1 100%;justify-content:center}
}
.app-main .order-pack-hint{margin:4px 0 0;font-size:.9rem;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.app-main .order-pack-hint span{color:var(--cg-text-secondary);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.app-main .order-pack-hint a{font-size:.8rem}
.app-main .ship-queue-list li .order-pack-hint{flex:1 1 100%;margin:0}
.app-main .packing-form{display:grid;gap:12px}
.app-main .packing-tier{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 10px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm);padding:10px 12px;margin:0}
.app-main .packing-tier legend{font-weight:700;padding:0 4px}
.app-main .packing-tier label{display:grid;gap:4px;font-size:.8rem;font-weight:650}
.app-main .packing-tier input{min-height:42px;min-width:0}
.app-main .packing-tier label:nth-of-type(2){grid-column:span 2}
.app-main .packing-summary{margin:0;padding-left:18px;display:grid;gap:4px}
@media(max-width:768px){
  .app-main .packing-tier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-main .packing-tier label:nth-of-type(2){grid-column:1/-1}
}
@media print{.pick-progress-bar,.pick-progress-actions,.ship-queue,.order-sync-strip,.new-orders-banner,.pick-sync-status{display:none!important}}
@media print{.order-pack-hint a{display:none!important}}.app-main .order-sync-strip-link{font-size:.85rem;font-weight:650}
.app-main .phone-urls{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.app-main .phone-url{font-size:1.25rem;font-weight:800;word-break:break-all}
.app-main .phone-command{white-space:pre-wrap;word-break:break-word;padding:10px 12px;border-radius:var(--cg-radius-sm);background:var(--cg-surface-soft,rgba(128,140,160,.12));font-size:.85rem}
.app-main .order-sales-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.app-main .order-sales-strip>div{padding:10px 12px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm);background:var(--cg-surface,transparent);display:grid;gap:2px}
.app-main .order-sales-strip span{font-size:.75rem;font-weight:700;color:var(--cg-text-secondary)}
.app-main .order-sales-strip strong{font-size:1.2rem}
.app-main .order-sales-strip>.sales-take-home{border-color:var(--cg-success,#15803d)}
.app-main .sales-take-home details{font-size:.75rem}
.app-main .sales-take-home summary{cursor:pointer;color:var(--cg-text-secondary);font-weight:700}
.app-main .sales-take-home details small{display:block;margin-top:2px;line-height:1.4}
.app-main .order-sales-strip small{color:var(--cg-text-secondary);font-size:.78rem}
.app-main .order-sales-strip p{grid-column:1/-1;margin:0;font-size:.78rem}
@media print{.order-sales-strip{display:none!important}}

.app-main .new-orders-banner{position:sticky;top:0;z-index:25;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;border-color:var(--cg-success,#16a34a)}
.app-main .new-orders-banner[hidden]{display:none}

.app-main .order-bin-footer{margin-top:18px;display:grid;gap:10px}
.app-main .order-bin-footer .order-summary-bar{margin:0}

.app-main .pick-stock-note{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:700;background:rgba(128,140,160,.18);color:var(--cg-text-secondary)}
.app-main .pick-stock-note.is-out{background:rgba(220,38,38,.14);color:#dc2626}
.app-main a.pick-stock-note{text-decoration:none}
@media print{a.pick-stock-note{color:#000!important}}

.app-main .passcode-form{display:grid;gap:8px;max-width:360px;margin:8px 0}
.app-main .passcode-form label{display:grid;gap:4px;font-weight:650;font-size:.85rem}
.app-main .passcode-form input{min-height:44px}
.lan-login{min-height:100vh;display:grid;place-items:center;padding:16px}
.lan-login-card{max-width:380px;width:100%;display:grid;gap:10px;text-align:center}
.lan-login-card img{margin:0 auto;border-radius:16px}
.lan-login-card form{display:grid;gap:10px;text-align:left}
.lan-login-card label{display:grid;gap:4px;font-weight:650}
.lan-login-card input{min-height:46px;font-size:1rem}

.app-main .sync-now-form{display:inline-flex;margin:0}
.app-main .order-header-actions .sync-now-form .button{width:100%}
@media print{.sync-now-form{display:none!important}}

.app-main .sales-days{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.app-main .sales-days li{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;font-size:.85rem}
.app-main .sales-day{color:var(--cg-text-secondary);font-variant-numeric:tabular-nums}
.app-main .sales-bar{height:12px;border-radius:999px;background:rgba(128,140,160,.18);overflow:hidden}
.app-main .sales-bar span{display:block;height:100%;background:var(--cg-primary,#2563eb);border-radius:999px}
.app-main .sales-day-total{font-variant-numeric:tabular-nums;white-space:nowrap}
.app-main .sales-top{list-style:none;margin:0;padding:0;display:grid}
.app-main .sales-top li{display:grid;grid-template-columns:28px 1fr auto;gap:4px 10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--cg-border,rgba(128,140,160,.25))}
.app-main .sales-top li:last-child{border-bottom:0}
.app-main .sales-rank{color:var(--cg-text-secondary);font-weight:800;font-variant-numeric:tabular-nums}
.app-main .sales-title small{display:block;color:var(--cg-text-secondary);font-size:.8rem}
.app-main .sales-meta{font-size:.85rem;white-space:nowrap}
.app-main .sales-left{font-weight:700}
.app-main .restock-check .sales-top li{grid-template-columns:72px 1fr auto}
.app-main .restock-bin{font-weight:800;font-size:1rem}
@media(max-width:640px){.app-main .restock-check .sales-top li{grid-template-columns:64px 1fr}}
.app-main .sales-left.is-out{color:#dc2626}
@media(max-width:640px){.app-main .sales-top li{grid-template-columns:24px 1fr}
.app-main .sales-meta{grid-column:2;white-space:normal;color:var(--cg-text-secondary)}}


.app-main .pyc-sold-out{color:#dc2626;font-weight:700}

.app-main .order-same-buyer{margin:6px 0 0;padding:6px 10px;border-radius:var(--cg-radius-sm);background:rgba(217,119,6,.12);font-size:.85rem}

.app-main .bin-code{font-weight:800;font-size:1.05rem}
.app-main .bins-list li{grid-template-columns:1fr auto}
.app-main .bin-cards li{grid-template-columns:56px 1fr auto;align-items:center}
.app-main .bin-photo .inventory-listing-thumb{width:48px;height:auto}
.app-main .bin-photo{width:48px;overflow:hidden}
.app-main .bin-photo .order-listing-photo-missing{display:flex;align-items:center;justify-content:center;width:48px;height:66px;font-size:.6rem;text-align:center;border:1px dashed var(--cg-border,rgba(128,140,160,.5));border-radius:6px}
.app-main .bin-labels{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.app-main .bin-label{margin:0;display:grid;gap:6px;break-inside:avoid}
.app-main .bin-label[hidden]{display:none}
.app-main .bin-label-pick{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--cg-text-secondary);margin:0;font-weight:600}
.app-main .bin-label-face{padding:8px;border:1px dashed var(--cg-border,rgba(128,140,160,.5));border-radius:8px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:center;background:#fff;color:#000}
.app-main .bin-label.is-selected .bin-label-face{border-style:solid;border-color:var(--cg-primary,#2563eb)}
.app-main .bin-qr svg{width:72px;height:72px;display:block}
.app-main .bin-label figcaption{min-width:0}
.app-main .bin-label figcaption strong{display:block;font-size:1rem;line-height:1.2;overflow-wrap:anywhere;word-break:break-word}
.app-main .bin-label-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.app-main .bin-label-tools input[type=search]{flex:1 1 12rem;max-width:20rem;margin:0}
.app-main .bin-label-tools select{width:auto;margin:0}
.app-main .bin-label-address-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.app-main .bin-label-address-form label{margin:0;flex:1 1 16rem}
.app-main .bin-label-create{display:grid;gap:.75rem}
.app-main .bin-label-create h2,.app-main .bin-label-create p{margin:0}
.app-main .bin-label-create-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:end}
.app-main .bin-label-create-form label{grid-column:1/-1;font-weight:700}
.app-main .bin-label-create-form input{min-width:0;box-sizing:border-box;min-height:44px;width:100%;font:inherit}
.app-main .bin-label-create-form button{min-height:44px}
@media(max-width:600px){.app-main .bin-label-create-form{grid-template-columns:minmax(0,1fr)}}
@media print{
  .bin-label-pick,.bin-label-tools,.bin-label-address,.bin-label-create,.bin-label-note{display:none!important}
  .bin-labels{grid-template-columns:repeat(3,1fr)!important}
  body.bin-print-selection .bin-label:not(.is-selected){display:none!important}
  .bin-label[hidden]{display:grid!important}
  body.bin-print-selection .bin-label[hidden]:not(.is-selected){display:none!important}
}

.app-main .order-note{margin:6px 0 0;padding:6px 10px;border-radius:var(--cg-radius-sm);background:rgba(37,99,235,.12);font-size:.9rem}
.app-main .order-note-edit{margin-top:8px}
.app-main .order-note-edit summary{cursor:pointer;font-weight:650;font-size:.85rem}
.app-main .order-note-edit form{display:grid;gap:6px;margin-top:6px}
.app-main .order-note-edit textarea{min-height:56px;width:100%;box-sizing:border-box}
@media print{.order-note-edit{display:none!important}}
/* Phone order cards: the small secondary controls get a 44px touch area (the Picked, Ship and label buttons already do). */
@media (max-width:768px){
  /* Edit sits inline after the packaging text: grow its touch area with padding and cancel it with negative margin so the line does not get taller or wider. */
  html body .app-main .order-pack-hint a{display:inline-block;padding:13px 11px;margin:-13px -11px}
  html body .app-main .order-note-edit summary{padding:13px 0;box-sizing:border-box;min-height:44px}
  html body .app-main .order-sync-strip-link{display:inline-flex;align-items:center;min-height:44px}
  html body .app-main .order-pick-table .pick-inventory-link{min-height:44px}
}

.app-main .order-bin-link{font-size:.8rem;font-weight:650}
@media print{.order-bin-link{display:none!important}}

.app-main .whats-new-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 14px}
.app-main .whats-new-banner[hidden]{display:none}
.app-main .whats-new-actions{display:flex;gap:8px;flex-wrap:wrap}
.app-main .whats-new-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.app-main .whats-new-item{padding:10px 12px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm)}
.app-main .whats-new-item p{margin:4px 0 0;color:var(--cg-text-secondary);font-size:.9rem}

.app-main .label-form{display:inline-flex;margin:0}
.app-main .label-form .button{min-height:44px}
.app-main .label-bought-heading{margin:14px 0 4px;font-size:1rem}
.app-main .label-bought-list li{opacity:.85}
@media print{.label-form{display:none!important}}/* Inline Price/Qty editors: keep a real, typeable box at every width (it used to collapse to just
   the browser's up/down arrows inside the narrow table column). */
.app-main .inventory-results .inventory-inline-edit.inventory-inline-price.is-editing,
.app-main .inventory-results .inventory-inline-edit.inventory-inline-quantity.is-editing{
  display:inline-flex;flex:0 1 auto;width:auto!important;max-width:100%}
.app-main .inventory-results .inventory-inline-price .inventory-inline-form,
.app-main .inventory-results .inventory-inline-quantity .inventory-inline-form{
  display:inline-flex;flex-wrap:wrap;flex:0 1 auto;width:auto!important;max-width:100%;gap:4px}
.app-main .inventory-results .inventory-inline-price .inventory-inline-form input[type=number],
.app-main .inventory-results .inventory-inline-quantity .inventory-inline-form input[type=number]{
  box-sizing:border-box;flex:0 0 84px!important;width:84px!important;min-width:84px!important;
  max-width:84px!important;padding:4px 8px;text-align:right;font-size:16px;
  -moz-appearance:textfield;appearance:textfield}
.app-main .inventory-results .inventory-inline-quantity .inventory-inline-form input[type=number]{
  flex-basis:60px!important;width:60px!important;min-width:60px!important;max-width:60px!important}
.app-main .inventory-results .inventory-inline-actions{display:inline-flex;gap:4px;flex:0 0 auto}
/* Phone: an open Set / # editor takes the whole row instead of a squeezed half-column. */
@media (max-width:768px){
.app-main .inventory-results .inventory-inline-identity.is-editing .inventory-inline-form{
  display:flex;flex-wrap:nowrap;gap:4px;width:100%;max-width:100%}
.app-main .inventory-results .inventory-inline-identity.is-editing .inventory-inline-form input:not([type=hidden]){
  flex:1 1 auto;min-width:120px;width:auto;font-size:16px}}
.app-main .inventory-results .inventory-inline-form input[type=number]::-webkit-inner-spin-button,
.app-main .inventory-results .inventory-inline-form input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;margin:0}

/* Inventory tab counts */
html body .app-main .inventory-view-tabs .inventory-tab-count{display:inline-block;margin-left:.5rem;padding:0 .45rem;min-width:1.4rem;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.35rem;text-align:center;background:rgba(127,127,127,.18);color:inherit}
html body .app-main .inventory-view-tabs .button:not(.secondary) .inventory-tab-count{background:rgba(255,255,255,.25)}
@media (max-width:768px){
  html body .app-main .inventory-view-tabs{display:flex;flex-wrap:nowrap;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-.25rem;padding:.1rem .25rem}
  html body .app-main .inventory-view-tabs::-webkit-scrollbar{display:none}
  html body .app-main .inventory-view-tabs .button{flex:0 0 auto;white-space:nowrap;min-height:2.5rem;padding:.4rem .7rem;font-size:.9rem}
  html body .app-main .inventory-view-tabs .inventory-tab-count{margin-left:.35rem}
}

/* Printable restock list */
.restock-print-title{display:none}
@media print{
  body:has(.restock-print-scope),
  body:has(.restock-print-scope) .app-shell,
  body:has(.restock-print-scope) .workspace-content,
  body:has(.restock-print-scope) .app-main{display:block!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;background:#fff!important;color:#111!important;overflow:visible!important}
  body:has(.restock-print-scope) .skip-link,
  body:has(.restock-print-scope) .app-sidebar,
  body:has(.restock-print-scope) .workspace-topbar,
  body:has(.restock-print-scope) .mobile-bottom-nav,
  body:has(.restock-print-scope) .page-header,
  body:has(.restock-print-scope) .inventory-search-shell,
  body:has(.restock-print-scope) .inventory-match-review-hint,
  body:has(.restock-print-scope) .inventory-pager,
  body:has(.restock-print-scope) .inventory-actions,
  body:has(.restock-print-scope) .inventory-pencil,
  body:has(.restock-print-scope) .inventory-inline-form,
  body:has(.restock-print-scope) .inventory-card-cell img,
  body:has(.restock-print-scope) .inventory-listing-thumb-missing,
  body:has(.restock-print-scope) .inventory-results-header{display:none!important}
  body:has(.restock-print-scope) .restock-print-title{display:block!important;font-size:1.2rem;font-weight:700;margin:0 0 .6rem}
  body:has(.restock-print-scope) .inventory-results{border:0!important;box-shadow:none!important;padding:0!important}
  body:has(.restock-print-scope) table{width:100%;border-collapse:collapse}
  body:has(.restock-print-scope) th,body:has(.restock-print-scope) td{border-bottom:1px solid #bbb;padding:.3rem .4rem;color:#111!important;background:#fff!important}
  body:has(.restock-print-scope) tr{break-inside:avoid;box-shadow:none!important;border:0!important;border-radius:0!important;margin:0!important;padding:.15rem 0!important;background:#fff!important}
  body:has(.restock-print-scope) td[data-label="Updated"],
  body:has(.restock-print-scope) td[data-label="Status"],
  body:has(.restock-print-scope) td[data-label="Actions"],
  body:has(.restock-print-scope) .inventory-identity-source,
  body:has(.restock-print-scope) .inventory-listing-title{display:none!important}
}

/* Printable draft photo / pull checklist */
.draft-print-title{display:none}
@media print{
  body:has(.draft-print-scope),
  body:has(.draft-print-scope) .app-shell,
  body:has(.draft-print-scope) .workspace-content,
  body:has(.draft-print-scope) .app-main{display:block!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;background:#fff!important;color:#111!important;overflow:visible!important}
  body:has(.draft-print-scope) .skip-link,
  body:has(.draft-print-scope) .app-sidebar,
  body:has(.draft-print-scope) .workspace-topbar,
  body:has(.draft-print-scope) .mobile-bottom-nav,
  body:has(.draft-print-scope) .page-header,
  body:has(.draft-print-scope) .notice,
  body:has(.draft-print-scope) .pyc-draft-head,
  body:has(.draft-print-scope) .pyc-draft-bulk,
  body:has(.draft-print-scope) .pyc-draft-checklist,
  body:has(.draft-print-scope) .pyc-draft-actions,
  body:has(.draft-print-scope) .pyc-draft-cancel,
  body:has(.draft-print-scope) .pyc-draft-fingerprint,
  body:has(.draft-print-scope) .pyc-draft-history,
  body:has(.draft-print-scope) .pyc-draft-remove,
  body:has(.draft-print-scope) .pyc-draft-thumb{display:none!important}
  body:has(.draft-print-scope) .draft-print-title{display:block!important;font-size:1.15rem;font-weight:700;margin:0 0 .6rem}
  body:has(.draft-print-scope) .pyc-draft-row{break-inside:avoid;box-shadow:none!important;border:0!important;border-bottom:1px solid #bbb!important;border-radius:0!important;background:#fff!important;color:#111!important;padding:.35rem 0!important;margin:0!important}
  body:has(.draft-print-scope) .pyc-draft-fields{display:flex!important;flex-wrap:wrap;gap:.2rem 1.4rem}
  body:has(.draft-print-scope) .pyc-draft-field{display:block!important;width:auto!important;min-width:0!important;margin:0!important;padding:0!important}
  body:has(.draft-print-scope) .pyc-draft-field--wide{display:none!important}
  body:has(.draft-print-scope) .pyc-draft-id{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem}
  body:has(.draft-print-scope) .pyc-draft-row input,
  body:has(.draft-print-scope) .pyc-draft-row select{border:0!important;background:transparent!important;color:#111!important;appearance:none;-webkit-appearance:none;padding:0!important}
}


/* Seller photos on draft cards */
html body .app-main .pyc-photo-box{display:grid;gap:.5rem;margin-top:.7rem;padding:.7rem;border:1px dashed var(--cg-border,rgba(127,127,127,.4));border-radius:12px}
html body .app-main .pyc-photo-box>small{opacity:.8}
html body .app-main .pyc-photo-slot{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem}
html body .app-main .pyc-photo-label{font-weight:700;min-width:8.5rem}
html body .app-main .pyc-photo-thumb{display:block;width:3.2rem;height:4.4rem;object-fit:cover;border-radius:6px;border:1px solid var(--cg-border,rgba(127,127,127,.4))}
html body .app-main .pyc-photo-none{opacity:.7;font-size:.85rem}
html body .app-main .pyc-photo-slot input[type=file]{max-width:100%;flex:1 1 12rem;min-width:0}
html body .app-main .pyc-draft-row{scroll-margin-top:90px}
.app-main .pyc-variation-more{margin:12px 0 4px}
.app-main .pyc-variation-more[hidden]{display:none}
html body .app-main .pyc-photo-pick{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;flex:1 1 12rem;cursor:pointer}
html body .app-main .pyc-photo-pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
html body .app-main .pyc-photo-pick:focus-within{outline:2px solid var(--cg-primary,#2563eb);outline-offset:2px}
html body .app-main .pyc-photo-preview:not([hidden]){display:block;width:4.5rem;height:6rem;object-fit:contain;border-radius:7px;border:1px solid var(--cg-border,rgba(127,127,127,.4));background:var(--cg-surface,transparent)}
html body .app-main .pyc-photo-choice{flex:1 1 100%;font-size:.82rem;opacity:.85}
@media print{body:has(.draft-print-scope) .pyc-photo-box{display:none!important}}


/* Search and preparation filters for large saved PYC drafts; hidden form rows
   remain submitted on Save, and all rows appear on the printed checklist. */
html body .app-main .pyc-draft-filters{display:grid;gap:.6rem;margin:.9rem 0 1rem;padding:12px 14px;border:1px solid var(--cg-border);border-radius:var(--cg-radius);background:var(--cg-surface)}
html body .app-main .pyc-draft-filters>label{display:grid;gap:.3rem;font-size:.82rem;font-weight:700;max-width:480px}
html body .app-main .pyc-draft-filters input[type=search]{width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--cg-border-strong);border-radius:8px;background:var(--cg-surface);color:var(--cg-text);font:inherit;font-size:1rem}
html body .app-main .pyc-draft-filter-buttons{display:flex;flex-wrap:wrap;gap:.4rem}
html body .app-main .pyc-draft-filter-buttons button{min-height:42px;white-space:normal}
html body .app-main .pyc-draft-filters>small{color:var(--cg-text-secondary)}
html body .app-main .pyc-draft-filter-results{margin:0;font-size:.82rem;color:var(--cg-text-secondary)}
html body .app-main .pyc-draft-row[hidden]{display:none!important}
html body .app-main .pyc-draft-own-photo{display:grid;gap:.2rem;text-align:center;text-decoration:none}
html body .app-main .pyc-draft-own-photo img{width:56px;height:77px;object-fit:cover;border-radius:6px}
html body .app-main .pyc-draft-own-photo small{display:block;font-size:.65rem;color:var(--cg-text-secondary)}
@media(max-width:768px){html body .app-main .pyc-draft-filter-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
html body .app-main .pyc-draft-filter-buttons button{padding:8px 6px}}
@media print{
  html body:has(.draft-print-scope) .pyc-draft-filters{display:none!important}
  html body:has(.draft-print-scope) .pyc-draft-row[hidden]{display:block!important}
}

/* Draft preflight (read-only) */
.pyc-draft-preflight ul{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.35rem}
.pyc-draft-preflight li{padding:.4rem .6rem;border-radius:8px;border:1px solid var(--cg-border,#d8dce3);font-size:.92rem}
.pyc-preflight-blocker{border-left:4px solid #c0392b!important}
.pyc-preflight-warning{border-left:4px solid #d68910!important}
.pyc-preflight-info{border-left:4px solid #5b7fa6!important}
.pyc-preflight-go{color:var(--cg-primary);font-weight:700;text-decoration:underline;text-underline-offset:2px;padding:14px 2px}
.pyc-draft-row.is-jump-target{outline:3px solid var(--cg-primary);outline-offset:2px}
.pyc-preflight-tag{display:inline-block;min-width:3.4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
@media print{.pyc-draft-preflight{display:none!important}}
.pyc-draft-approval form{display:grid;gap:.6rem;margin-top:.5rem}
.pyc-draft-approved{border-left:4px solid #1e8449}
@media print{.pyc-draft-approval{display:none!important}}
.pyc-draft-statusline{margin:.4rem 0 .8rem;padding:.5rem .75rem;border-radius:10px;border:1px solid var(--cg-border,#d8dce3);font-size:.95rem}
.pyc-draft-statusline a{margin-left:.5rem;white-space:nowrap}
.pyc-status-fix{border-left:4px solid #c0392b}
.pyc-status-ready{border-left:4px solid #d68910}
.pyc-status-ok{border-left:4px solid #1e8449}
.pyc-publish-prep{margin-top:1rem;display:grid;gap:.75rem}
.pyc-publish-prep>details>summary{cursor:pointer;font-weight:600}
@media print{.pyc-draft-statusline,.pyc-publish-prep{display:none!important}}

/* Dashboard snapshot tiles that open a filtered list */
.app-main a.metric{color:inherit;text-decoration:none}
.app-main a.metric:hover strong,.app-main a.metric:focus-visible strong{color:var(--cg-primary,#2563eb)}

/* Back from eBay's label screen: point at "I bought the label" */
.app-main .label-form.is-asking{display:grid;gap:4px;flex-basis:100%;padding:8px;border:2px solid var(--cg-success,#16a34a);border-radius:var(--cg-radius-sm,8px)}
.app-main .label-form.is-asking .label-ask{margin:0 0 6px;font-weight:700;font-size:.9rem}
.app-main .label-form.is-asking button{width:100%}

/* Browse Cards: filter by listing status */
.app-main .catalog-status-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}
.app-main .catalog-status-filter .button{min-height:36px;padding:6px 12px;white-space:nowrap;flex:0 0 auto}
.app-main .catalog-result-card[hidden]{display:none!important}
@media (max-width:768px){.app-main .catalog-status-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}}

/* Orders summary on phones: just orders and cards to pick (plus "check before picking" when there is something to check) */
@media (max-width:768px){
  .app-main .order-summary-bar>.order-summary-optional{display:none}
}

/* The exact card chosen in a Pick Your Card order, above the listing title */
.app-main .pick-variation{display:block;font-size:1.05rem;line-height:1.3;margin:0 0 2px}
.app-main .pick-variation+.pick-item-title{font-size:.85rem;color:var(--cg-text-secondary)}

/* Existing PYC summary facts: label above value, compact tiles (two per row on phones) */
.app-main .facts>div>span:first-child,.app-main .facts>div>strong{display:block}
.app-main .pyc-summary-facts>div,.app-main .pyc-live-facts>div{min-height:0;display:grid;gap:3px;align-content:start;padding:10px 12px}
.app-main .pyc-summary-facts>div>span{display:block;font-size:.75rem;font-weight:700;color:var(--cg-text-secondary)}
.app-main .pyc-summary-facts>div>strong{display:block;font-size:1rem;overflow-wrap:anywhere}
@media (max-width:768px){.app-main .pyc-summary-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .app-main .pyc-summary-facts>.pyc-sku-fact{grid-column:1/-1}}

/* Existing PYC variations on phones: photo beside card, SKU/qty/price on one line, details small */
@media (max-width:768px){
  html body .app-main .pyc-variation-table tbody tr{display:grid!important;grid-template-columns:64px repeat(3,minmax(0,1fr));gap:2px 10px;padding:10px!important;align-items:start}
  html body .app-main .pyc-variation-table tbody td{display:block!important;padding:0!important;border:0!important;min-width:0}
  html body .app-main .pyc-variation-table tbody td::before{display:block;font-size:.65rem}
  html body .app-main .pyc-variation-table td.pyc-v-photo{grid-column:1;grid-row:1/span 2}
  html body .app-main .pyc-variation-table td.pyc-v-photo::before,html body .app-main .pyc-variation-table td.pyc-v-card::before{display:none}
  html body .app-main .pyc-variation-table td.pyc-v-photo img,html body .app-main .pyc-variation-table td.pyc-v-photo .catalog-thumb-missing,html body .app-main .pyc-variation-table td.pyc-v-photo>*{max-width:64px}
  html body .app-main .pyc-variation-table td.pyc-v-card{grid-column:2/-1;grid-row:1;font-size:1rem}
  html body .app-main .pyc-variation-table td.pyc-v-sku{grid-column:2;grid-row:2}
  html body .app-main .pyc-variation-table td.pyc-v-qty{grid-column:3;grid-row:2}
  html body .app-main .pyc-variation-table td.pyc-v-price{grid-column:4;grid-row:2}
  html body .app-main .pyc-variation-table td.pyc-v-detail{grid-column:1/-1;font-size:.78rem;color:var(--cg-text-secondary);display:flex!important;gap:6px;align-items:baseline}
  html body .app-main .pyc-variation-table td.pyc-v-detail::before{flex:0 0 7.5rem}
}

/* List Cards upload box: phone wording (take or choose), desktop wording (click or drag) */
.app-main .photo-batch-touch-title{display:none}
@media (hover:none) and (pointer:coarse){
  .app-main .photo-batch-pointer-title{display:none}
  .app-main .photo-batch-touch-title{display:block}
}

/* Store checkup */
.app-main .audit-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.app-main .audit-item a{display:grid;grid-template-columns:minmax(2.6rem,auto) minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--cg-border,rgba(128,140,160,.35));border-left-width:4px;border-radius:var(--cg-radius-sm,8px);color:inherit;text-decoration:none;background:var(--cg-surface,transparent)}
.app-main .audit-item a:hover,.app-main .audit-item a:focus-visible{border-color:var(--cg-primary,#2563eb)}
.app-main .audit-danger a{border-left-color:var(--cg-danger,#dc2626)}
.app-main .audit-warning a{border-left-color:var(--cg-warning,#d97706)}
.app-main .audit-success a{border-left-color:var(--cg-success,#16a34a)}
.app-main .audit-neutral a{border-left-color:var(--cg-border-strong,#94a3b8)}
.app-main .audit-count{font-size:1.5rem;font-weight:800;text-align:right}
.app-main .audit-text{display:grid;gap:2px}
.app-main .audit-text small{color:var(--cg-text-secondary)}
.app-main .audit-go{font-size:1.2rem;color:var(--cg-text-secondary)}
.app-main .audit-clear ul{margin:0;padding-left:1.2rem;color:var(--cg-text-secondary)}
@media print{.app-main .audit-go{display:none}}
.app-main .audit-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:768px){.app-main .audit-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Relist an ended listing on eBay (link to eBay's own relist form) */
.app-main .inventory-quick-check-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Sales page: compact trend chart, collapsible lists, fixed-width bin column */
.app-main .sales-trend{margin:0 0 12px;padding:12px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm,8px);background:var(--cg-surface,transparent)}
.app-main .sales-trend svg{display:block;width:100%;height:120px;overflow:visible}
.app-main .sales-col-hit{fill:transparent}
.app-main .sales-col-bar{fill:var(--cg-primary,#2563eb)}
.app-main .sales-col:hover .sales-col-bar,.app-main .sales-col:focus .sales-col-bar{fill:var(--cg-primary-strong,#1d4ed8)}
.app-main .sales-col:hover .sales-col-hit{fill:rgba(128,140,160,.12)}
.app-main .sales-axis{stroke:var(--cg-border,rgba(128,140,160,.45));stroke-width:.3;vector-effect:non-scaling-stroke}
.app-main .sales-trend figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:.78rem;color:var(--cg-text-secondary)}
.app-main .sales-more{margin-top:8px}
.app-main .sales-more[open]>summary{display:none}
.app-main .sales-range{margin:6px 0}
.app-main .sales-more summary,.app-main .sales-day-table summary{cursor:pointer;font-weight:700;color:var(--cg-primary,#2563eb)}
.app-main .sales-day-table summary{font-size:1.1rem;color:inherit}
.app-main .sales-count{display:inline-block;margin-left:6px;padding:0 8px;border-radius:999px;font-size:.8rem;background:rgba(128,140,160,.18);vertical-align:middle}
.app-main .restock-no-bin{margin:10px 0 0;font-size:.9rem}
.app-main .restock-check .sales-top li{grid-template-columns:8rem minmax(0,1fr) auto}
.app-main .restock-bin{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media(max-width:640px){
  .app-main .restock-check .sales-top li{grid-template-columns:minmax(0,1fr)}
  .app-main .restock-check .sales-meta{grid-column:1}
}

/* Card recognition page */
.app-main .recog-summary{margin-bottom:12px}
.app-main .recog-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;list-style:none;margin:0 0 8px;padding:0}
.app-main .recog-fields li{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm,8px)}
.app-main .recog-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.app-main .recog-list li{padding:8px 10px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm,8px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.app-main .recog-list li.is-confirmed{opacity:.55}
.app-main .recog-edit{min-height:40px;padding:0 16px}
.app-main .recog-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;cursor:pointer}
.app-main .recog-pick input{width:20px;height:20px;margin-top:2px}
.app-main .recog-main{display:grid;gap:2px;min-width:0}
.app-main .recog-title{overflow-wrap:anywhere}
.app-main .recog-conflict{display:block;color:var(--warn-text,#9a5b00);font-size:.85rem;margin-top:.15rem}
.app-main .recog-answer{font-size:.92rem}
/* Recognition rows: your listing photo beside the catalog's picture, so a wrong match is visible at a glance */
.app-main .recog-list li:has(.recog-thumbs){grid-template-columns:auto minmax(0,1fr) auto}
.app-main .recog-thumbs{order:-1;display:flex;gap:8px;align-self:start}
.app-main .recog-thumb{display:grid;gap:2px;justify-items:center;width:84px}
.app-main .recog-thumb small{font-size:.7rem;color:var(--cg-muted,#667085)}
.app-main .recog-thumb-box{display:block;width:84px;height:116px}
.app-main .recog-thumb-box .inventory-listing-thumb-wrap.photo-zoom{display:block;width:100%;height:100%}
.app-main .recog-thumb-box .inventory-photo-open{position:static;display:grid;place-items:center;width:100%;height:100%;min-height:0;margin:0;padding:0;
  border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:9px;background:var(--cg-surface-soft,rgba(128,140,160,.08));cursor:zoom-in;box-shadow:none}
.app-main .recog-thumb-box .inventory-listing-thumb{width:100%;height:100%;object-fit:contain;border-radius:8px}
.app-main .recog-thumb-missing{display:grid;place-items:center;width:100%;height:100%;font-size:.72rem;text-align:center;color:var(--cg-muted,#667085);
  border:1px dashed var(--cg-border,rgba(128,140,160,.45));border-radius:9px}
@media(max-width:640px){.app-main .recog-list li:has(.recog-thumbs){grid-template-columns:minmax(0,1fr)}}
/* Mouse devices: hover over the photos to see both enlarged side by side (no click). Touch devices keep tap-to-enlarge. */
@media (hover:hover) and (pointer:fine){
  .app-main .recog-thumbs{position:relative}
  .app-main .recog-thumb-box .inventory-listing-thumb-wrap.photo-zoom{position:static}
  .app-main .recog-thumb-box .photo-zoom-trigger{pointer-events:none;cursor:zoom-in}
  .app-main .recog-thumb-box .photo-zoom-close{display:none}
  .app-main .recog-thumb-box .photo-zoom-preview{display:none;position:absolute;inset:auto;top:-8px;
    z-index:80;width:auto;padding:0;background:none;backdrop-filter:none;pointer-events:none}
  .app-main .recog-thumb:first-child .photo-zoom-preview{left:186px}
  .app-main .recog-thumb:last-child:not(:first-child) .photo-zoom-preview{left:496px}
  .app-main .recog-thumbs:hover .photo-zoom-preview,.app-main .recog-thumbs:focus-within .photo-zoom-preview{display:block}
  .app-main .recog-thumb-box .photo-zoom-preview img{width:300px!important;max-width:none!important;height:auto!important;max-height:none!important;
    border:1px solid var(--cg-border,rgba(128,140,160,.45));box-shadow:0 18px 50px rgba(0,0,0,.5)}
}
/* Hover zoom for Inventory / Dashboard card photos on mouse devices (see ui.js) */
.cg-hover-zoom{position:fixed;z-index:400;pointer-events:none;padding:0;background:none}
.cg-hover-zoom[hidden]{display:none}
.cg-hover-zoom img{display:block;border-radius:12px;background:#fff;border:1px solid rgba(128,140,160,.45);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.cg-hover-zoom p{margin:6px 0 0;padding:2px 8px;border-radius:6px;background:rgba(15,23,42,.85);color:#fff;font-size:.75rem;text-align:center}
@media (hover:hover) and (pointer:fine){
  .app-main .inventory-card-cell .photo-zoom-trigger,.app-main .dashboard-inventory-card .photo-zoom-trigger{cursor:zoom-in}
}
.app-main .title-suggestion{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.app-main .title-suggestion .button{padding:2px 10px;min-height:0}
.app-main .recog-chip{display:inline-block;margin-left:4px;padding:0 8px;border-radius:999px;font-size:.75rem;font-weight:700;background:rgba(128,140,160,.18)}
.app-main .recog-chip.is-high{background:rgba(22,163,74,.18);color:var(--cg-success,#15803d)}
.app-main .recog-chip.is-medium{background:rgba(217,119,6,.18);color:var(--cg-warning,#b45309)}

/* Batch editor: say plainly whether a row is a suggestion or an accepted catalog match */
.batch-grid-match{display:inline-block;justify-self:start;width:max-content;max-width:100%;margin:2px 0;padding:0 7px;border-radius:999px;font-size:.72rem;font-weight:700}
.batch-grid-match.is-exact{background:rgba(22,163,74,.16);color:var(--cg-success,#15803d)}
.batch-grid-match.is-suggested{background:rgba(217,119,6,.16);color:var(--cg-warning,#b45309)}
:root[data-theme="dark"] .batch-grid-match.is-exact{color:#4ade80}
:root[data-theme="dark"] .batch-grid-match.is-suggested{color:#fbbf24}

/* Batch editor: "Change match" on a suggested row opens a compact card over the table instead of
   stretching the row with full-size inputs. */
.app-main .batch-grid-identity-inline{margin:4px 0 2px;padding:0;font-size:.8rem}
.app-main .batch-grid-identity-inline>summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;
  color:var(--cg-primary,#2563eb);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.app-main .batch-grid-identity-inline>summary::-webkit-details-marker{display:none}
.app-main .batch-grid-change-match{background:none;border:0;padding:0;color:var(--cg-primary,#2563eb);font-weight:700;
  font-size:.8rem;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.app-main .batch-grid-identity-pop{position:absolute;z-index:30;left:8px;top:calc(100% - 8px);width:min(340px,80vw);
  padding:12px;border:1px solid var(--cg-border,rgba(128,140,160,.45));border-radius:10px;
  background:var(--cg-surface-raised,var(--cg-surface,#fff));box-shadow:0 12px 32px rgba(0,0,0,.28)}
:root[data-theme="dark"] .app-main .batch-grid-identity-pop{background:#1e293b}
.app-main .batch-grid-identity-pop-title{margin:0 0 8px;font-weight:800;font-size:.9rem}
.app-main .batch-grid-identity-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.app-main .batch-grid-identity-fields label{display:grid;gap:3px;margin:0;font-size:.74rem;font-weight:700}
.app-main .batch-grid-identity-fields label.is-wide{grid-column:1/-1}
.app-main .batch-grid-table .batch-grid-identity-fields input,.app-main .batch-grid-identity-fields input{min-height:34px;height:34px;padding:5px 9px;font-size:.86rem;font-weight:600;width:100%;max-width:none}
.app-main .batch-grid-identity-pop-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.app-main .batch-grid-identity-pop-actions .button{min-height:32px;padding:4px 14px}
@media (max-width:760px){
  .app-main .batch-grid-identity-pop{position:static;width:auto;margin-top:6px;box-shadow:none}
}

/* "Your last sale" hint under a price field (seller's own sales; tap to fill) */
.app-main .batch-grid-price-hint{display:block;margin-top:4px;padding:0;border:0;background:none;cursor:pointer;
  font-size:.72rem;font-weight:700;line-height:1.25;text-align:left;color:var(--cg-primary,#2563eb);
  text-decoration:underline dotted;text-underline-offset:2px;white-space:normal}
:root[data-theme="dark"] .app-main .batch-grid-price-hint{color:#93c5fd}

/* Recognition fix pop-up */
.recog-dialog{width:min(520px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;border:1px solid var(--cg-border);border-radius:16px;background:var(--cg-surface);color:var(--cg-text);box-shadow:var(--cg-shadow-raised)}
.recog-dialog::backdrop{background:rgba(8,12,20,.6)}
.recog-dialog-body{display:grid;gap:12px;padding:16px;margin:0}
.recog-dialog-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.recog-dialog-head h2{margin:0;font-size:1.1rem}
.recog-dialog-count{font-size:.8rem;color:var(--cg-muted)}
.recog-dialog-listing{margin:0;padding:10px 12px;border-radius:10px;background:var(--cg-surface-soft);font-size:.9rem;overflow-wrap:anywhere}
.recog-dialog-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.recog-dialog-fields label{display:grid;gap:4px;font-size:.8rem;font-weight:700;color:var(--cg-muted)}
.recog-dialog-fields label.is-wide{grid-column:1/-1}
.recog-dialog-fields input{min-height:44px;font-size:1rem;padding:0 12px;border:1px solid var(--cg-border);border-radius:10px;background:var(--cg-bg,var(--cg-surface));color:var(--cg-text)}
.recog-dialog-message{margin:0;min-height:1.2em;font-size:.88rem}
.recog-dialog-message[data-kind=error]{color:var(--cg-warning,#b45309)}
.recog-dialog-message[data-kind=ok]{color:var(--cg-success,#15803d);font-weight:700}
.recog-dialog-candidates{display:grid;gap:6px}
.recog-candidate{min-height:44px;text-align:left;padding:8px 12px;border:1px solid var(--cg-border);border-radius:10px;background:var(--cg-surface-soft);color:var(--cg-text);font:inherit;font-size:.9rem;cursor:pointer}
.recog-dialog-actions{display:grid;grid-template-columns:auto auto 1fr;gap:8px}
.recog-dialog-actions .button{min-height:46px}
.recog-dialog-close{justify-self:center;border:0;background:none;color:var(--cg-muted);font:inherit;font-size:.85rem;padding:6px 12px;cursor:pointer}
.app-main .pyc-low-stock{color:#b45309;font-weight:700}
.app-main .pyc-stock-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.app-main .pyc-stock-chip[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:1px}
.app-main .pyc-variation-table tr[data-pyc-stock="out"]{background:rgba(220,38,38,.07)}


/* Sets that sold: no rank column, so the set name gets the whole first column. */
.app-main .sales-sets .sales-top li{grid-template-columns:minmax(0,1fr) auto}
.app-main .sales-sets .sales-title{font-weight:700}
@media(max-width:640px){.app-main .sales-sets .sales-top li{grid-template-columns:minmax(0,1fr)}
.app-main .sales-sets .sales-meta{grid-column:1}}

/* In-app relist page */
.app-main .relist-layout{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:start}
.app-main .relist-photo{width:100%;height:auto;border-radius:var(--cg-radius-sm,8px);border:1px solid var(--cg-border,rgba(128,140,160,.35))}
.app-main .relist-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.app-main .relist-fields label{display:flex;flex-direction:column;gap:4px;font-weight:600}
.app-main .relist-fields input{font-size:1.1rem;padding:10px}
.app-main .relist-confirm{display:flex;gap:8px;align-items:flex-start;margin:12px 0;font-weight:600}
.app-main .relist-form .actions,.app-main .relist-result .actions{display:flex;flex-wrap:wrap;gap:8px}
.app-main .relist-switch,.app-main .relist-result{margin-top:12px}
@media(max-width:640px){.app-main .relist-layout{grid-template-columns:minmax(0,1fr)}
.app-main .relist-photo{max-width:200px}}

/* Card recognition: summary tiles (phone: one column of compact tiles) */
.app-main .recog-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.app-main .recog-summary .summary-card{display:grid;gap:2px;padding:12px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm,8px);background:var(--cg-surface,transparent)}
.app-main .recog-summary .summary-card span{font-size:.8rem;color:var(--cg-text-secondary)}
.app-main .recog-summary .summary-card strong{font-size:1.25rem}
.app-main .recog-summary .summary-card small{color:var(--cg-text-secondary)}
@media(max-width:640px){.app-main .recog-summary{grid-template-columns:minmax(0,1fr)}}
.app-main .recog-variant-all{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-basis:100%}
.app-main .recog-ack{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;flex:1 1 16rem}
.app-main .relist-bulk-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.app-main .relist-bulk-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.app-main .relist-bulk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:12px;align-items:center;padding:10px;border:1px solid var(--cg-border,rgba(128,140,160,.35));border-radius:var(--cg-radius-sm,8px)}
.app-main .relist-bulk-row.is-blocked{opacity:.8;grid-template-columns:minmax(0,1fr)}
.app-main .relist-bulk-row small{display:block}
.app-main .relist-bulk-pick{display:flex;gap:10px;align-items:flex-start}
.app-main .relist-bulk-row .relist-fields input{font-size:1rem;padding:8px}
@media(max-width:640px){.app-main .relist-bulk-row{grid-template-columns:minmax(0,1fr)}}

/* Ended listing whose exact title is already live on eBay again */
.photo-load-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0}
.inventory-toolbar{display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:center;padding:.5rem 1rem 0}
.inventory-toolbar form{display:contents}
.inventory-toolbar-note{margin:.4rem 1rem .6rem;font-size:.9em}

/* Dashboard "Get started" checklist (new sellers) */
.app-main .gs-card{margin:0 0 14px;padding:16px;border:1px solid var(--cg-border);border-radius:14px;background:var(--cg-surface,#fff)}
.app-main .gs-card[hidden]{display:none}
.app-main .gs-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.app-main .gs-head h2{margin:2px 0 0;font-size:1.15rem}
.app-main .gs-actions{display:flex;gap:8px;flex-wrap:wrap}
.app-main .gs-bar{height:8px;margin:12px 0;border-radius:99px;background:var(--cg-primary-soft);overflow:hidden}
.app-main .gs-bar span{display:block;height:100%;border-radius:99px;background:var(--cg-primary)}
.app-main .gs-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.app-main .gs-step{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-radius:10px}
.app-main .gs-step.is-next{background:var(--cg-primary-soft)}
.app-main .gs-mark{flex:0 0 22px;height:22px;margin-top:1px;border:2px solid var(--cg-border);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;color:#fff}
.app-main .gs-step.is-done .gs-mark{background:var(--cg-primary);border-color:var(--cg-primary)}
.app-main .gs-step.is-next .gs-mark{border-color:var(--cg-primary)}
.app-main .gs-copy{display:grid;gap:2px;line-height:1.35}
.app-main .gs-copy a{text-decoration:none}
.app-main .gs-copy small{color:var(--cg-text-secondary)}
.app-main .gs-step.is-done .gs-copy a{color:var(--cg-text-secondary);font-weight:500}
.app-main .gs-step.is-done .gs-copy strong{font-weight:500;text-decoration:line-through;text-decoration-thickness:1px}

/* Lower stale prices page */
.app-main .price-cut-row label,.app-main .price-cut-row.is-skipped{display:flex;align-items:center;gap:12px;width:100%}
.app-main .price-cut-row.is-skipped{opacity:.65}
.app-main .price-cut-photo{flex:0 0 52px;height:72px;display:inline-flex;align-items:center;justify-content:center}
.app-main .price-cut-copy{flex:1;display:grid;gap:2px;min-width:0}
.app-main .price-cut-change{white-space:nowrap;font-variant-numeric:tabular-nums}
.app-main .price-cuts-floor,.app-main .price-cuts-switch{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.app-main .price-cuts-run>button{margin-top:12px;min-height:44px}
.app-main .stale-price-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}

.app-main .stale-price-bar label{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.app-main .stale-price-bar input[name=percent]{width:3.4em;min-height:38px;text-align:center}
.app-main .stale-price-bar .button{min-height:38px}
.app-main .stale-many-link{margin-left:auto;font-weight:700}
.app-main .price-cut-done{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.app-main .action-lowered-note{display:inline-block;margin-top:8px;font-size:.8rem;color:var(--cg-text-secondary)}
.app-main .action-lower-price-form{display:inline}

.app-main .sales-delta{display:block;margin-top:2px;font-weight:700;color:var(--cg-muted,#64748b)}
.app-main .sales-delta.is-up{color:#15803d}
.app-main .sales-delta.is-down{color:#b45309}
:root[data-theme='dark'] .app-main .sales-delta.is-up{color:#4ade80}
:root[data-theme='dark'] .app-main .sales-delta.is-down{color:#fbbf24}

/* ---------- Action Center (theme tokens only) ---------- */
.app-main .action-attention{margin:0;color:var(--cg-text-secondary)}
.app-main .action-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cg-space-3);margin:var(--cg-space-4) 0}
.app-main .action-summary-card{display:flex;flex-direction:column;gap:var(--cg-space-1);padding:var(--cg-space-4);
  background:var(--cg-surface);color:var(--cg-text);border:1px solid var(--cg-border);border-top:3px solid var(--cg-border-strong);
  border-radius:var(--cg-radius);box-shadow:var(--cg-shadow);text-decoration:none;min-width:0}
.app-main .action-summary-card:hover{background:var(--cg-row-hover)}
.app-main .action-summary-card:focus-visible{outline:none;box-shadow:var(--cg-ring)}
.app-main .action-summary-card.state-warning{border-top-color:var(--cg-warning)}
.app-main .action-summary-card.state-success{border-top-color:var(--cg-success)}
.app-main .action-summary-card.state-neutral{border-top-color:var(--cg-border-strong)}
.app-main .action-summary-count{font-family:var(--cg-font-display);font-size:var(--cg-text-stat);font-weight:800;line-height:1}
.app-main .action-summary-card h2{margin:0;font-size:var(--cg-text-md);font-weight:700;color:var(--cg-text)}
.app-main .action-summary-card p{margin:0;font-size:var(--cg-text-sm);color:var(--cg-text-secondary)}
.app-main .action-summary-link{margin-top:auto;padding-top:var(--cg-space-2);font-size:var(--cg-text-sm);font-weight:700;color:var(--cg-primary)}

.app-main .action-list-panel{padding:0;overflow:hidden}
.app-main .action-list-panel .panel-header{padding:var(--cg-space-4) var(--cg-space-4) var(--cg-space-2)}
.app-main .action-list{list-style:none;margin:0;padding:0}
.app-main .action-recommendation-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto minmax(180px,auto);
  gap:var(--cg-space-4);align-items:center;padding:var(--cg-space-4);border-top:1px solid var(--cg-border);background:var(--cg-surface)}
.app-main .action-recommendation-row:first-child{border-top:0}
.app-main .action-recommendation-row:hover{background:var(--cg-row-hover)}
.app-main .action-recommendation-row.no-action{background:var(--cg-surface-soft)}
.app-main .action-row-photo{width:64px;display:flex;align-items:center;justify-content:center}
.app-main .action-row-main{min-width:0;display:flex;flex-direction:column;gap:var(--cg-space-1)}
.app-main .action-row-name{font-family:var(--cg-font-display);font-weight:700;font-size:var(--cg-text-md);color:var(--cg-text);
  text-decoration:none;overflow-wrap:anywhere}
.app-main .action-row-name:hover{color:var(--cg-primary);text-decoration:underline}
.app-main .action-row-evidence{margin:0;font-size:var(--cg-text-sm);color:var(--cg-text-secondary);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.app-main .action-row-meta{margin:0;font-size:var(--cg-text-xs);color:var(--cg-muted)}
.app-main .action-row-examples{font-size:var(--cg-text-xs)}
.app-main .action-row-again{display:inline-block;align-self:flex-start;padding:2px var(--cg-space-2);border-radius:var(--cg-radius-pill);
  font-size:var(--cg-text-xs);font-weight:700;background:var(--cg-info-soft);color:var(--cg-info)}
.app-main .action-row-status{display:flex;justify-content:flex-end}
.app-main .action-chip{display:inline-block;padding:3px var(--cg-space-3);border-radius:var(--cg-radius-pill);
  font-size:var(--cg-text-xs);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.app-main .action-chip.is-ok{background:var(--cg-success-soft);color:var(--cg-success)}
.app-main .action-chip.is-warn{background:var(--cg-warning-soft);color:var(--cg-warning)}
.app-main .action-chip.is-info,.app-main .action-chip.is-neutral{background:var(--cg-neutral-soft);color:var(--cg-info)}
.app-main .action-row-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--cg-space-2)}
.app-main .action-row-primary,.app-main .action-row-secondary{display:flex;flex-wrap:wrap;gap:var(--cg-space-2)}
.app-main .action-row-secondary{opacity:.95}
.app-main .action-row-actions .button{min-height:var(--cg-control-height-sm);justify-content:center}
.app-main .action-row-secondary .button{font-size:var(--cg-text-sm)}
.app-main .action-recommendation-plan{margin:var(--cg-space-1) 0 0;padding:var(--cg-space-2) var(--cg-space-3);
  background:var(--cg-surface-soft);border:1px solid var(--cg-border);border-radius:var(--cg-radius-sm);
  font-size:var(--cg-text-sm);color:var(--cg-text-secondary)}
.app-main .action-list-empty{padding:var(--cg-space-8) var(--cg-space-4);text-align:center;color:var(--cg-text-secondary)}
.app-main .action-listing-thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--cg-radius-sm)}
.app-main .action-photo-missing{display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;
  border-radius:var(--cg-radius-sm);background:var(--cg-surface-soft);color:var(--cg-muted);font-size:var(--cg-text-xs)}

/* "Not restocking": hide form, confirmation and Hidden (N) list */
.app-main .restock-hide-form{display:inline;margin:0}
.app-main .restock-hidden{margin-top:var(--cg-space-4);padding:var(--cg-space-3) var(--cg-space-4);
  background:var(--cg-surface);border:1px solid var(--cg-border);border-radius:var(--cg-radius)}
.app-main .restock-hidden summary{cursor:pointer;font-weight:700;color:var(--cg-text);min-height:var(--cg-control-height-sm);
  display:flex;align-items:center}
.app-main .restock-hidden ul{list-style:none;margin:var(--cg-space-2) 0 0;padding:0}
.app-main .restock-hidden li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cg-space-3);padding:var(--cg-space-2) 0;
  border-top:1px solid var(--cg-border)}
.app-main .restock-hidden-title{font-weight:600;color:var(--cg-text);flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.app-main .restock-hidden-notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cg-space-3)}
.app-main .restock-again{display:block;margin-top:2px;font-weight:700;color:var(--cg-info)}

@media (max-width:1100px){
  .app-main .action-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-main .action-recommendation-row{grid-template-columns:64px minmax(0,1fr) minmax(170px,auto)}
  .app-main .action-row-status{grid-column:3;grid-row:1;justify-content:flex-end}
  .app-main .action-row-actions{grid-column:2 / -1}
  .app-main .action-row-actions .action-row-primary,.app-main .action-row-actions .action-row-secondary{flex-direction:row}
}
@media (max-width:650px){
  /* Phone: four compact count tiles (2 x 2) so the recommendation list starts on the first screen. The whole tile is the
     link and keeps its count + heading; the sentence and link label are desktop detail. */
  .app-main .action-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cg-space-2);margin:var(--cg-space-3) 0}
  .app-main .action-summary-card{padding:var(--cg-space-3);gap:var(--cg-space-1);min-height:var(--cg-control-height)}
  .app-main .action-summary-card p,.app-main .action-summary-link{display:none}
  .app-main .action-summary-card h2{font-size:var(--cg-text-sm);line-height:1.25}
  .app-main .panel.action-list-panel{background:transparent;border:0;box-shadow:none;overflow:visible}
  .app-main .action-list-panel .panel-header{padding:var(--cg-space-2) 0}
  /* #83 added a sentence about the priority order under this heading; keep it, but set it smaller so the first recommendation still starts on the first screen. */
  .app-main .action-list-panel .panel-header p.muted{font-size:var(--cg-text-sm);line-height:1.35}
  /* #97's Show/Hide PYC button added a 56px row that pushed the first recommendation below the tab bar at 360/390 px; on a phone the same switch is the PYC select inside Filter recommendations, and the 'Filters on' line reports it. */
  .app-main .action-list-panel .action-pyc-toggle{display:none}
  .app-main .action-list{display:flex;flex-direction:column;gap:var(--cg-space-3)}
  .app-main .action-recommendation-row,.app-main .action-recommendation-row:first-child{
    display:flex;flex-direction:column;align-items:stretch;gap:var(--cg-space-3);padding:var(--cg-space-4);
    border:1px solid var(--cg-border);border-radius:var(--cg-radius);box-shadow:var(--cg-shadow)}
  .app-main .action-row-photo{width:100%;justify-content:flex-start}
  .app-main .action-row-status{justify-content:flex-start}
  .app-main .action-row-evidence{-webkit-line-clamp:3}
  .app-main .action-row-actions{gap:var(--cg-space-3)}
  .app-main .action-row-primary{flex-direction:column}
  /* The two quiet actions (Not restocking, Snooze) sit side by side so a recommendation is not a whole screen tall;
     a lone one, or a narrow phone, falls back to full width. */
  .app-main .action-row-secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .app-main .action-row-secondary .button{white-space:normal;line-height:1.2;padding-inline:var(--cg-space-2)}
  .app-main .action-row-actions .button,.app-main .action-row-secondary .button{width:100%;min-height:var(--cg-control-height)}
  .app-main .action-row-actions form{display:block;width:100%}
  .app-main .restock-hidden li{flex-direction:column;align-items:stretch}
}

/* Browse Cards: scope controls, set line on cross-set results, and Load more */
.app-main .catalog-filter-panel .panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--cg-space-3)}
.app-main .catalog-reset{white-space:nowrap;font-weight:700;color:var(--cg-primary)}
.app-main .catalog-result-set{margin:2px 0 0;font-size:var(--cg-text-sm);color:var(--cg-text-secondary)}
.app-main .catalog-result-set strong{color:var(--cg-text)}
.app-main .catalog-pick-set-link{margin-top:var(--cg-space-2);justify-content:center;text-align:center}
.app-main .catalog-scope-note,.app-main .catalog-pyc-set-note{margin:var(--cg-space-3) 0}
.app-main .catalog-more{display:grid;justify-items:center;gap:var(--cg-space-3);margin:var(--cg-space-5) 0}
.app-main .catalog-more .catalog-count{margin:0}
.app-main .catalog-more .catalog-load-more{min-width:min(100%,260px);min-height:var(--cg-control-height);justify-content:center}
.app-main .catalog-more .catalog-load-more.is-disabled{opacity:.6;pointer-events:none}
.app-main .catalog-more .catalog-capped{margin:0;width:100%}
.app-main .catalog-more [hidden]{display:none}
.app-main .catalog-status-filter [data-catalog-status-partial]{flex:1 1 100%}
.app-main .catalog-result-card[data-pyc-status="reference"] .catalog-result-select:empty{display:none}
.pyc-status--reference{border-color:var(--cg-border);background:var(--cg-surface-soft);color:var(--cg-text-secondary)}
@media (max-width:768px){
  html body .app-main .catalog-filter-grid .catalog-filter-search{grid-column:1/-1}
  .app-main .catalog-more .catalog-load-more{width:100%}
}

/* Pick Your Card draft beta pass (2026-10-15): what is missing at a glance, the Preview outcome, and
   real 44px phone tap targets for the Browse Cards -> Preview -> Draft controls that were 18-42px. */
html body .app-main .pyc-draft-need{font-weight:700}
html body .app-main .pyc-draft-need:empty{display:none}
html body .app-main .pyc-draft-need.is-gap{color:var(--cg-warning)}
html body .app-main .pyc-draft-need.is-complete{color:var(--cg-success)}
html body .app-main .pyc-draft-nextstep{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:0 0 .8rem;padding:.6rem .75rem;border:1px solid var(--cg-border);border-radius:10px;background:var(--cg-surface);font-weight:650}
html body .app-main .pyc-draft-nextstep[hidden],html body .app-main .pyc-draft-nextstep [hidden]{display:none}
html body .app-main .pyc-draft-row{scroll-margin-top:84px}
html body .app-main .pyc-preview-outcome{margin:.6rem 0}
html body .app-main .pyc-preview-outcome p{margin:0}
html body .app-main .pyc-preview-outcome ul{margin:.35rem 0 0;padding-left:1.2rem}
html body .app-main .pyc-save-draft{margin:.6rem 0}
@media(max-width:768px){
  html body .app-main .catalog-status-filter .button,
  html body .app-main .pyc-draft-filter-buttons button{min-height:44px}
  html body .app-main .catalog-result-card .catalog-result-more>summary,
  html body .app-main .pyc-draft-checklist summary,
  html body .app-main .pyc-draft-bulk summary,
  html body .app-main .pyc-draft-preflight>summary,
  html body .app-main .pyc-draft-hosting>summary,
  html body .app-main .pyc-draft-verify>summary,
  html body .app-main .pyc-draft-history>summary{min-height:44px;display:flex;align-items:center;padding-top:0;padding-bottom:0}
  html body .app-main .catalog-reset,
  html body .app-main .pyc-draft-statusline a,
  html body .app-main .pyc-draft-items a{display:inline-flex;align-items:center;min-height:44px}
  html body .app-main .pyc-defaults-overwrite{min-height:44px}
}

/* Pick Your Card simplification (PR #70 follow-up): short primary screens, details one tap away.
   Browse: one Help, usual details folded, unlisted-copy fields only on picked cards.
   Preview: count + Save first, checklist and source table folded. Draft: one progress area, a Publishing
   checks fold with its own count, short photo hints and a Save bar that shows only for unsaved edits. */
html body .app-main details.catalog-help,
html body .app-main details.pyc-defaults-fold,
html body .app-main details.pyc-publish-details{margin:0 0 .6rem;border:1px solid var(--cg-border);border-radius:12px;background:var(--cg-surface);padding:.1rem .8rem}
html body .app-main details.catalog-help>summary,
html body .app-main details.pyc-defaults-fold>summary,
html body .app-main details.pyc-publish-details>summary,
html body .app-main details.pyc-preview-more>summary{cursor:pointer;font-weight:750;min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .5rem}
html body .app-main details.catalog-help[open]>summary,
html body .app-main details.pyc-defaults-fold[open]>summary,
html body .app-main details.pyc-publish-details[open]>summary{border-bottom:1px solid var(--cg-border);margin-bottom:.5rem}
html body .app-main details.catalog-help p,html body .app-main details.pyc-publish-details .pyc-publish-prep>p{margin:.3rem 0;color:var(--cg-text-secondary);font-size:.9rem;line-height:1.45}
html body .app-main details.pyc-defaults-fold .pyc-defaults{border:0;box-shadow:none;background:transparent;padding:0 0 .6rem;margin:0}
html body .app-main details.pyc-preview-more{margin:.6rem 0;padding:.1rem .8rem}
html body .app-main .pyc-draft-only{margin:.2rem 0 .5rem;font-size:.9rem;color:var(--cg-text-secondary)}
html body .app-main .pyc-draft-only strong{color:var(--cg-warning)}
html body .app-main .pyc-save-draft .pyc-draft-only{margin:.4rem 0 0}
html body .app-main .pyc-draft-progress{margin:0 0 .8rem}
html body .app-main .pyc-draft-progress .pyc-draft-nextstep{margin:0 0 .4rem}
html body .app-main .pyc-publish-count{font-weight:800}
html body .app-main .pyc-publish-count.pyc-status-fix{color:var(--cg-warning);border:0}
html body .app-main .pyc-publish-count.pyc-status-ready{color:var(--cg-primary);border:0}
html body .app-main .pyc-publish-count.pyc-status-ok{color:var(--cg-success);border:0}
html body .app-main .pyc-publish-prep{margin-top:.2rem}
html body .app-main .pyc-draft-checklist-head{margin:.6rem 0 .2rem;font-size:.98rem}
html body .app-main ul.pyc-draft-checklist{margin:.2rem 0 .8rem;padding-left:1.2rem;color:var(--cg-text-secondary);font-size:.9rem;line-height:1.45}
html body .app-main .pyc-photo-box>small{display:block;color:var(--cg-text-secondary);font-size:.8rem;line-height:1.35}
/* Unlisted-copy fields appear once the card is picked (script on); without the script they always show. */
html body .app-main .pyc-select-form[data-pyc-enhanced] .catalog-result-card:not(.is-selected) .catalog-unlisted-intake{display:none}
/* Unsaved-changes bar: above the phone tab bar, never over a field being typed into. */
html body .app-main .pyc-save-bar{position:sticky;bottom:12px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.8rem 0;padding:.6rem .8rem;border:1px solid var(--cg-primary);border-radius:14px;background:color-mix(in srgb,var(--cg-surface) 96%,transparent);box-shadow:var(--cg-shadow-raised);backdrop-filter:blur(10px)}
html body .app-main .pyc-save-bar[hidden],
html body .app-main .pyc-save-bar.is-docked{display:none}
html body .app-main .pyc-save-bar-text{font-weight:750}
html body .app-main .pyc-save-bar .button{min-height:44px}
html:has(.pyc-save-bar){scroll-padding-bottom:140px}
@media(max-width:768px){
  html body .app-main .pyc-save-bar{bottom:calc(76px + env(safe-area-inset-bottom))}
  html body .app-main .pyc-save-bar.is-typing{display:none}
  html body .app-main .pyc-save-bar .button{flex:0 0 auto;min-width:140px}
  html body .app-main details.catalog-help>summary,
  html body .app-main details.pyc-defaults-fold>summary,
  html body .app-main details.pyc-publish-details>summary,
  html body .app-main details.pyc-preview-more>summary,
  html body .app-main .pyc-draft-preflight>summary{min-height:44px}
}
@media print{
  html body .app-main .pyc-save-bar,html body .app-main .pyc-draft-progress{display:none!important}
}
/* Unlisted-copy fields show only for a card whose "unlisted copies" box is ticked. */
html body .app-main .pyc-select-form[data-pyc-enhanced] .catalog-result-card:not(:has(input[data-pyc-kind=unlisted]:checked)) .catalog-unlisted-intake{display:none}
/* Photos: front and back side by side; Upload/Replace appear only once a file is chosen (script on). */
html body .app-main .pyc-photo-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .75rem}
html body .app-main .pyc-photo-box>strong,html body .app-main .pyc-photo-box>small{grid-column:1/-1}
html body .app-main .pyc-draft-form[data-pyc-enhanced] .pyc-photo-slot:not(.has-file)>button.secondary{display:none}
html body .app-main .pyc-photo-box{margin-bottom:.7rem}

/* ---- List Cards intake: Front only / Front + Back, Take Photo, capture page ---- */
html body .app-main .photo-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.6rem}
html body .app-main .photo-way{display:grid;gap:.15rem;padding:.7rem .85rem;border:1px solid var(--cg-border);border-radius:12px;background:var(--cg-surface-soft);min-height:3.25rem;overflow-wrap:anywhere}
html body .app-main .photo-way small{color:var(--cg-text-secondary);font-size:.8rem}
html body .app-main .photo-way.is-active{border:2px solid var(--cg-primary)}
html body .app-main .photo-way.is-soon{opacity:.72;border-style:dashed}
html body .app-main .photo-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:0;padding:0;border:0;min-width:0}
html body .app-main .photo-mode>legend{grid-column:1/-1;padding:0 0 .35rem;font-weight:800}
html body .app-main .photo-mode-option{position:relative;display:flex;align-items:center;gap:.6rem;min-height:3.5rem;padding:.65rem .8rem;border:2px solid var(--cg-border);border-radius:12px;background:var(--cg-surface);cursor:pointer;min-width:0}
html body .app-main .photo-mode-option input{width:1.4rem;height:1.4rem;flex:0 0 auto;accent-color:var(--cg-primary)}
html body .app-main .photo-mode-option span{display:grid;gap:.1rem;min-width:0;overflow-wrap:anywhere}
html body .app-main .photo-mode-option small{color:var(--cg-text-secondary);font-size:.8rem;font-weight:600}
html body .app-main .photo-mode-option:has(input:checked){border-color:var(--cg-primary);background:color-mix(in srgb,var(--cg-primary) 12%,var(--cg-surface))}
html body .app-main .photo-mode-option:has(input:focus-visible){outline:3px solid var(--cg-primary);outline-offset:2px}
html body .app-main .photo-add-actions{display:grid;gap:.4rem}
html body .app-main .photo-take-button{position:relative;display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:4rem;padding:.8rem 1rem;font-size:1.25rem;font-weight:800;cursor:pointer;text-align:center}
html body .app-main .photo-take-button:has(input:focus-visible){outline:3px solid var(--cg-text);outline-offset:3px}
html body .app-main .photo-take-large{min-height:5.5rem;font-size:1.5rem}
html body .app-main .photo-take-hint{color:var(--cg-text-secondary);font-size:.82rem}
html body .app-main .photo-batch-upload .photo-batch-picker-button{min-height:3rem}
/* Primary gallery upload first; camera remains a smaller secondary action. */
html body .app-main .photo-batch-upload .photo-batch-dropzone{gap:.45rem;padding:1.1rem;border-color:var(--cg-cta);background:color-mix(in srgb,var(--cg-cta) 8%,var(--cg-surface-soft))}
html body .app-main .photo-batch-upload .photo-batch-dropzone strong{font-size:1.2rem;font-weight:800}
html body .app-main .photo-batch-upload .photo-batch-picker-button{min-height:3.5rem;width:100%;box-sizing:border-box;margin-top:.35rem;padding:.7rem 1rem;border-color:transparent;border-radius:var(--cg-radius-sm);background:var(--cg-cta);color:var(--cg-on-cta);font-size:1.15rem;font-weight:800;text-align:center}
html body .app-main .photo-batch-upload .photo-batch-dropzone:hover .photo-batch-picker-button,html body .app-main .photo-batch-upload .photo-batch-dropzone:focus-within .photo-batch-picker-button{background:var(--cg-cta-hover)}
html body .app-main .photo-take-secondary{min-height:3rem;font-size:1rem;font-weight:700}
html body .app-main .photo-batch-upload.is-uploading{opacity:.85}
html body .app-main .photo-batch-pair-photos.is-single{grid-template-columns:minmax(0,1fr)}
html body .app-main .photo-batch-no-back,
html body .app-main .batch-prep-no-back{display:grid;gap:.4rem;align-content:start;padding:.7rem;border:1px dashed var(--cg-border-strong,var(--cg-border));border-radius:10px;min-height:5rem}
html body .app-main .photo-batch-add-back .button{min-height:3rem;position:relative;cursor:pointer}
html body .app-main .photo-capture{display:grid;gap:.8rem}
html body .app-main .photo-capture-next{margin:0;font-size:1.1rem;font-weight:800}
html body .app-main .photo-capture-status{min-height:1.4rem;font-weight:700;color:var(--cg-text-secondary)}
html body .app-main .photo-capture-error-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
html body .app-main .photo-capture-error[hidden],html body .app-main [data-capture-skip-back][hidden]{display:none}
html body .app-main .photo-capture-done{display:flex;justify-content:center;min-height:3.25rem;font-weight:800}
html body .app-main .photo-capture-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.6rem}
html body .app-main .photo-capture-tile a{display:grid;gap:.25rem;color:inherit;text-decoration:none;border:1px solid var(--cg-border);border-radius:10px;padding:.35rem;background:var(--cg-surface-soft);min-height:44px}
html body .app-main .photo-capture-tile img{display:block;width:100%;height:7rem;object-fit:contain;border-radius:6px}
html body .app-main .photo-capture-tile-label{display:grid;font-size:.8rem;overflow-wrap:anywhere}
html body .app-main .photo-capture-tile-label small{color:var(--cg-text-secondary)}
@media(max-width:480px){
  html body .app-main .photo-mode-option{flex-direction:column;align-items:flex-start;gap:.35rem;padding:.55rem .65rem}
  html body .app-main .photo-capture-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Phone tap targets found by the beta walkthrough sweep (360/390 px): bare links and summaries were 14-38 px tall. */
@media (max-width:768px){
  .app-main .catalog-status-filter .button{min-height:44px}
  .app-main .order-note-edit summary,.app-main .order-bin-link,.app-main .order-pick-table .pick-inventory-link,
  .app-main .action-row-name,.app-main .sales-find-link{display:inline-flex;align-items:center;min-height:44px}
  .app-main .sales-find-link{padding:0 6px}
}