/* Card details: the artwork and its controls form one column; values form another.
   Keep navigation outside the artwork so every photo and the car name stay clear. */
#cardScreen.cardx-screen { width:100%; max-width:960px; }
#cardScreen .cardx { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:none; gap:20px; }
#cardScreen .cardx > * { grid-area:auto; grid-column:auto; min-width:0; }
#cardScreen .cardx-top { margin:0; min-height:44px; }
#cardScreen .cardx-count { text-align:right; line-height:1.5; }
#cardScreen .cardx-gallery-column { position:relative; width:100%; max-width:320px; margin:0 auto; }
#cardScreen .cardx-card-stage { width:100%; margin:0 0 14px; }
#cardScreen .cardx-card .deck-card { width:100%; max-width:320px; transform:none; }
#cardScreen .cardx-gallery-controls { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin-top:12px; }
#cardScreen .cardx-photo-count { position:static; transform:none; padding:0 4px; border:0; border-radius:0; background:none; color:var(--cc-muted); font-size:11px; line-height:1.5; white-space:nowrap; }
#cardScreen .cardx-gallery-controls button { position:relative; inset:auto; flex:0 0 44px; width:44px; height:44px; min-height:44px; margin:0; padding:0; border:1px solid var(--cc-line); border-radius:12px; background:var(--cc-surface); color:var(--cc-cream); box-shadow:none; backdrop-filter:none; transform:none; transition:background .15s ease,border-color .15s ease; }
#cardScreen .cardx-gallery-controls button::before { display:none; }
#cardScreen .cardx-gallery-controls button:is(:hover,:focus-visible,:active) { transform:none; border-color:var(--cc-lime); background:var(--cc-surface-2); box-shadow:none; }
#cardScreen .cardx-gallery-controls button:focus-visible { outline:2px solid var(--cc-lime); outline-offset:3px; }
#cardScreen .cardx-gallery-controls .cardx-photo-add { margin-left:auto; color:var(--cc-lime); }
#cardScreen .cardx-photo-arrow svg { width:20px; height:20px; }
#cardScreen .cardx-thumbs { margin:0; gap:10px; }
#cardScreen .cardx-photo-status { position:relative; inset:auto; transform:none; width:100%; margin:14px 0 0; }
#cardScreen .cardx-details { min-width:0; }
#cardScreen .garage-workspace-detail-status { margin:0 0 20px; }
#cardScreen .cardx-switch { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; margin:0 0 16px; border:0; border-bottom:1px solid var(--cc-line); border-radius:0; background:none; }
#cardScreen .cardx-switch [role="tab"] { min-height:48px; padding:12px 8px; border:0; border-bottom:3px solid transparent; border-radius:0; background:none; color:var(--cc-muted); box-shadow:none; transform:none; }
#cardScreen .cardx-switch [role="tab"][aria-selected="true"] { border-bottom-color:var(--cc-lime); background:none; color:var(--cc-lime); }
#cardScreen .cardx-switch [role="tab"]:focus-visible { outline:2px solid var(--cc-lime); outline-offset:-3px; }
#cardScreen .cardx-panel { padding:18px; }
#cardScreen .cardx-panel-head,#cardScreen .cardx-build-head { gap:12px; }
#cardScreen .cardx-actions { grid-template-columns:minmax(0,1fr) auto; justify-content:stretch; }
#cardScreen .cardx-cta { min-width:0; padding:12px 16px; line-height:1.3; }
#cardScreen .garage-workspace-detail-note:empty { display:none; }
@media(min-width:800px) {
  #cardScreen .cardx { grid-template-columns:minmax(0,320px) minmax(0,1fr); column-gap:36px; row-gap:20px; align-items:start; }
  #cardScreen .cardx > .cardx-top { grid-column:1/-1; }
  #cardScreen .cardx > .cardx-gallery-column { grid-column:1; }
  #cardScreen .cardx > .cardx-details { grid-column:2; }
}
@media(max-width:799px) {
  #cardScreen.cardx-screen { max-width:480px; }
  #cardScreen .cardx-gallery-column { max-width:280px; }
}