@import url("10-design-tokens.css");
/* v0.4.6fd — definitive common card layout: an actual two-child flex row.
   Previous .sp-common-copy was absolutely positioned while multiple grid rules
   tried to relocate it. The label/value now live in .sp-common-text.
   Copy stays vertically centered to the RIGHT, on every theme and content size. */
.sp-sheet .sp-sheet-common #sp-common-grid .sp-common-item{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-width:0!important;
  min-height:72px!important;
  padding:10px 10px 10px 13px!important;
  overflow:hidden!important;
}
.sp-sheet .sp-sheet-common #sp-common-grid .sp-common-item .sp-common-text{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-width:0!important;
}
.sp-sheet .sp-sheet-common #sp-common-grid .sp-common-label,
.sp-sheet .sp-sheet-common #sp-common-grid .sp-common-value{
  display:block!important;
  width:100%!important;
  grid-column:auto!important;
  grid-row:auto!important;
  min-width:0!important;
  margin:0!important;
}
.sp-sheet .sp-sheet-common #sp-common-grid .sp-common-value{
  overflow-wrap:anywhere!important;
}
.sp-sheet .sp-sheet-panel .sp-sheet-common #sp-common-grid .sp-common-item > button.sp-common-copy,
body.glass-on .sp-sheet .sp-sheet-panel .sp-sheet-common #sp-common-grid .sp-common-item > button.sp-common-copy,
body[data-color-mode="light"] .sp-sheet .sp-sheet-panel .sp-sheet-common #sp-common-grid .sp-common-item > button.sp-common-copy{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  float:none!important;
  grid-column:auto!important;
  grid-row:auto!important;
  align-self:center!important;
  justify-self:auto!important;
  flex:0 0 40px!important;
  margin:0!important;
  padding:10px!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  transform:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.sp-sheet .sp-sheet-panel .sp-sheet-common #sp-common-grid .sp-common-item > button.sp-common-copy svg{
  display:block!important;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  flex:0 0 20px!important;
  transform:none!important;
  stroke:currentColor!important;
  fill:none!important;
}
@media(prefers-reduced-motion:reduce){
 .sp-sheet .sp-sheet-panel .sp-sheet-common #sp-common-grid .sp-common-item > button.sp-common-copy{transition:none!important;}
}

/* Phase 4B: display-language control. It sits in the settings header, apart from the profile, data, and game tabs. */
.sp-locale-switch{
  margin:12px 0 0;
  padding:0;
  border:0;
  min-inline-size:0;
  max-width:100%;
}
.sp-locale-switch legend{
  padding:0;
  margin:0 0 4px;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
}
.sp-locale-options{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 18px;
  min-width:0;
}
.sp-locale-option{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-size:15px;
  line-height:1.3;
}
.sp-locale-option input{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
}
.sp-locale-option input:focus-visible{
  outline:2px solid var(--msl-accent,#12b7f0);
  outline-offset:3px;
}
/* Phase 4C-1: a longer English appearance label wraps instead of widening the page. */
.msl-mega-trigger{
  white-space:normal;
  overflow-wrap:anywhere;
}
/* Phase 4C-2: the saved-template suffix is injected by CSS, so English is a later content rule. */
html[data-ui-locale="en"] .sp-template-drawer #platformEdits>.disclosure label::after{
  content:" • Saved template";
}