/* =========================================================================
   /garage/ - THE VAULT GRAMMAR (card-grammar pass, 2026-10-05).

   Loaded after garage.css, ge-signature.css and ge-cards.css. The markup and
   garage.js are the live ones; this sheet only re-voices them:
     * the status card becomes a hero with the live species as a picture card;
     * the stored-dinosaur TABLE becomes a grid of SLOT CARDS (the framework's
       vault .slot: picture well, identity, a fact list, mutation chips, the
       slot's own actions at the bottom) - pure CSS over the same rows, so
       every button garage.js binds stays the same button;
     * actions, meters, chips and dialogs take the register's corners, faces
       and type.
   ========================================================================= */

.garage-main{ max-width:1280px; gap:var(--gc-s5); }
.garage-main .ge-pagehead.gc-head{ display:block; margin:6px auto 0; }
.garage-main .gc-title{ font-size:var(--gc-t-page); }
.garage-main > #garage-content{ display:grid; gap:var(--gc-s5); }

/* register corners for the page's own controls */
.ge-act{ border-radius:var(--gc-r-s) !important; font-family:var(--gc-f-mono); }
.ge-act.sm{ border-radius:var(--gc-r-s) !important; }
.ge-pill,.ge-prime-chip,.ge-slot-tag,.ge-skin-chip{ border-radius:var(--gc-r-pill) !important; }
.ge-meter{ border-radius:var(--gc-r-pill); }
.ge-meter i{ border-radius:var(--gc-r-pill); }
.garage-teleport input[type="text"],.garage-slot-field select{ border-radius:var(--gc-r-s) !important; }
.ge-preview-btn{ border-radius:var(--gc-r-s); }
.ge-preview-frame{ border-radius:var(--gc-r); }

/* ---- the status hero ---------------------------------------------------- */
.ge-status.sw-card{ padding:var(--gc-s5); }
#status-live-head.ge-hero{
  display:grid; grid-template-columns:minmax(200px,280px) minmax(0,1fr) minmax(220px,300px);
  align-items:center; gap:var(--gc-s5);
}
#status-live-head[hidden]{ display:none; }
.gg-pic{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--gc-edge); border-radius:var(--gc-r); background:var(--gc-well);
}
.gg-pic::after{
  content:""; position:absolute; left:14%; right:14%; bottom:6%; height:12%; border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.42),transparent); pointer-events:none;
}
.gg-pic img{
  position:absolute; inset:4% 4% 2%; width:92%; height:94%; z-index:1;
  object-fit:contain; object-position:center bottom; filter:drop-shadow(0 12px 16px rgba(0,0,0,.35));
}
.ge-hero-id{ flex-direction:column; align-items:flex-start; gap:10px; }
.ge-hero-name{ font:700 clamp(30px,3.6vw,46px)/1 var(--gc-f-display) !important; text-transform:uppercase; }
.ge-hero-growth{ justify-items:stretch; min-width:0; }

/* ---- the live cards (vitals, diet, preview) ---------------------------- */
.ge-dash-grid{ gap:var(--gc-s4); }
.ge-card-head .sw-kicker,.garage-main .sw-kicker{ color:var(--gc-accent-hi) !important; }

/* ---- action cards ------------------------------------------------------ */
.ge-action-grid{ gap:var(--gc-s4); }
.gg-kadaver-link{
  display:inline-flex; align-items:center; gap:8px; justify-self:start; margin-top:2px;
  padding:9px 14px; border:1px solid rgba(var(--sw-accent-rgb),.55); border-radius:var(--gc-r-pill);
  background:rgba(var(--sw-accent-rgb),.10); color:var(--sw-ink);
  font:700 var(--gc-t-micro)/1.2 var(--gc-f-mono); letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
}
.gg-kadaver-link:hover{ border-color:var(--gc-accent); background:rgba(var(--sw-accent-rgb),.18); text-decoration:none; }

/* ---- THE SLOT CARDS (stored dinosaurs) --------------------------------- */
.garage-stored-section .ge-table-wrap{ overflow:visible; }
#stored-table{ display:block; min-width:0; width:100%; border:0; }
#stored-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#stored-body{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:var(--gc-s4); }
#stored-body tr{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"pic pic" "who who" "grow sex" "prime when" "muts muts" "act act";
  border:1px solid var(--gc-edge); border-radius:var(--gc-r); overflow:hidden;
  background:var(--gc-face); box-shadow:var(--gc-shadow);
  transition:border-color .2s ease,transform .22s ease,box-shadow .25s ease;
}
#stored-body tr:hover{ background:var(--gc-face); border-color:var(--gc-edge-hi); transform:translateY(-3px); box-shadow:var(--gc-shadow-hi); }
#stored-body tr::before{
  content:""; grid-area:pic; display:block; aspect-ratio:16/9;
  border-bottom:1px solid var(--gc-edge);
  background:var(--gg-pic,none) center 92% / auto 92% no-repeat,var(--gc-well);
}
#stored-body td{ display:block; min-width:0; padding:8px var(--gc-s4); border:0 !important; color:var(--sw-ink-2); font:500 13.5px/1.4 var(--gc-f-ui); }
#stored-body td:nth-child(1){ grid-area:who; padding-top:var(--gc-s3); }
#stored-body td:nth-child(2){ grid-area:grow; }
#stored-body td:nth-child(3){ grid-area:sex; }
#stored-body td:nth-child(4){ grid-area:prime; }
#stored-body td:nth-child(5){ grid-area:muts; }
#stored-body td:nth-child(6){ grid-area:when; }
#stored-body td:nth-child(7){ grid-area:act; margin-top:6px; padding:12px var(--gc-s4) var(--gc-s4); border-top:1px solid var(--gc-edge) !important; }
/* the fact labels (vault grammar: small caps label over the value) */
#stored-body td:nth-child(2)::before,#stored-body td:nth-child(3)::before,#stored-body td:nth-child(4)::before,
#stored-body td:nth-child(5)::before,#stored-body td:nth-child(6)::before{
  display:block; margin:0 0 4px; color:var(--sw-ink-3);
  font:700 9.5px/1.3 var(--gc-f-mono); letter-spacing:.16em; text-transform:uppercase;
}
#stored-body td:nth-child(2)::before{ content:"Wachstum"; }
#stored-body td:nth-child(3)::before{ content:"Geschlecht"; }
#stored-body td:nth-child(4)::before{ content:"Prime"; }
#stored-body td:nth-child(5)::before{ content:"Mutationen"; }
#stored-body td:nth-child(6)::before{ content:"Eingelagert"; }
/* garage.js labels its own mutation groups (Mutationen / Vererbt / ...): the
   card's label then stands down so the word is not printed twice */
#stored-body td:nth-child(5):has(.ge-mut-label)::before{ display:none; }
#stored-body td.ge-num{ color:var(--sw-ink); font:700 18px/1.2 var(--gc-f-num); }
#stored-body td:nth-child(3),#stored-body td:nth-child(6){ color:var(--sw-ink); }
#stored-body td:nth-child(6){ font-size:12.5px; }
/* identity: a given name on top, the species under it (or the species alone) */
#stored-body td:first-child{ color:var(--sw-ink); }
#stored-body .ge-species-name{ display:block; color:var(--sw-ink); font:700 var(--gc-t-item)/1.08 var(--gc-f-display); text-transform:uppercase; letter-spacing:.01em; overflow-wrap:anywhere; }
#stored-body .ge-name-edit{ display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:none; color:var(--sw-ink); cursor:pointer; }
#stored-body .ge-dino-name{ font:700 var(--gc-t-item)/1.08 var(--gc-f-display); text-transform:uppercase; }
#stored-body .ge-name-edit + .ge-species-name{ display:block; margin-top:4px; color:var(--sw-ink-3); font:700 var(--gc-t-micro)/1.3 var(--gc-f-mono); letter-spacing:.14em; }
#stored-body .ge-slot-tag{ display:inline-flex; margin:8px 8px 0 0; }
#stored-body .ge-name-add{ display:inline-flex; margin-top:8px; border-radius:var(--gc-r-pill); }
#stored-body td.prime-yes span,#stored-body td.prime-no span{ border-radius:var(--gc-r-pill); font:700 10px/1 var(--gc-f-mono); letter-spacing:.12em; text-transform:uppercase; }
#stored-body .mutation-list{ min-width:0 !important; }
#stored-body .ge-mut-group{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:0 0 6px; }
#stored-body .ge-mut-label{ width:100%; color:var(--sw-ink-3); font:700 9px/1.3 var(--gc-f-mono); letter-spacing:.12em; text-transform:uppercase; }
#stored-body .ge-mut-chip{ border-radius:var(--gc-r-pill); }
#stored-body .ge-row-actions{ justify-content:flex-start; gap:8px; }
#stored-body .ge-row-actions .ge-act{ flex:1 1 auto; }
.garage-stored-section #stored-empty,.garage-stored-section #stored-status{ margin:0; }

/* ---- my skins: the shop's card grammar --------------------------------- */
.ge-skin-grid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:var(--gc-s4); }
.ge-skin-card{
  position:relative; padding:0 var(--gc-s4) var(--gc-s4); overflow:hidden;
  border:1px solid var(--gc-edge); border-radius:var(--gc-r); background:var(--gc-face); box-shadow:var(--gc-shadow);
}
.ge-skin-card.is-previewing{ border-color:var(--gc-accent); box-shadow:var(--gc-shadow-hi); }
.gg-skin-well{
  position:relative; margin:0 calc(-1 * var(--gc-s4)) 4px; aspect-ratio:16/10; overflow:hidden;
  border-bottom:1px solid var(--gc-edge); background:var(--gc-well);
}
.gg-skin-well img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
.ge-skin-name{ font:700 19px/1.15 var(--gc-f-display); text-transform:uppercase; color:var(--sw-ink); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width:980px){
  #status-live-head.ge-hero{ grid-template-columns:minmax(0,220px) minmax(0,1fr); }
  #status-live-head .ge-hero-growth{ grid-column:1 / -1; }
}
@media (max-width:640px){
  #status-live-head.ge-hero{ grid-template-columns:minmax(0,1fr); gap:var(--gc-s3); }
  .gg-pic{ max-width:340px; width:100%; justify-self:center; }
  .ge-hero-id{ align-items:center; text-align:center; }
  #stored-body{ grid-template-columns:minmax(0,1fr); }
  .gg-kadaver-link{ justify-self:stretch; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  #stored-body tr{ transition:none; }
  #stored-body tr:hover{ transform:none; }
}