/* Component overrides. Load after the base V3 visual stylesheet. */
.card-studio .studio-style { padding-bottom: 108px; }
.card-studio .studio-category-heading { margin: 25px 0 11px; font-size: 18px; }
.card-studio .studio-categories { display: flex; gap: 8px; overflow-x: auto; margin: 0 -3px 20px; padding: 3px; scrollbar-width: thin; }
.card-studio .studio-category { min-height: 44px; flex: none; padding: 10px 15px; border: 1px solid #f7f3e94d; border-radius: 999px; color: #f7f3e9; background: transparent; font: inherit; font-size: 16px; }
.card-studio .studio-category[aria-checked=true] { background: #d8f66a; color: #17171e; border-color: #d8f66a; font-weight: 700; }
.card-studio .outfit-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px 9px; }
.card-studio .outfit-choice { min-width: 0; min-height: 118px; padding-bottom: 11px; }
.card-studio .outfit-choice .art-shell { height: 82px; }
.card-studio .outfit-choice strong { display: block; padding: 0 4px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.card-studio .studio-style-actions { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 25; width: 100%; max-width: 480px; margin: 0; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent,#17171ef5 14px,#17171e); }
.card-studio .studio-exit { padding: 0 22px 25px; }
.card-studio:has(.studio-style) .studio-exit { padding-bottom: 100px; }
.card-studio .constitution-note { margin-top: 22px; border: 1px solid #b397ff55; padding: 18px; border-radius: 18px; background: #b397ff12; }
.card-studio .constitution-note p { overflow-wrap: anywhere; margin-top: 7px; }
.card-studio .constitution-code { color: #bc9cff; font-size: 28px; font-weight: 800; line-height: 1.3; }
.card-studio .qr-error .button { min-height: 44px; }
.card-studio .studio-category:focus-visible { outline: 3px solid #bc9cff; outline-offset: 2px; }
.card-studio .studio-result-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; border-left:4px solid #d8f66a; padding:12px 15px; margin:18px 0; background:#d8f66a12; border-radius:0 14px 14px 0; }
.card-studio .studio-result-strip>span { color:#c8c5ce; font-size:15px; }
.card-studio .studio-result-strip>strong { color:#d8f66a; font-size:26px; line-height:1.2; }
.card-studio .studio-result-strip>p { flex-basis:100%; margin:0; font-size:17px; }
.card-studio .assessment-prompt { margin:19px 0; padding:18px; border:1px solid #b397ff66; border-radius:18px; background:#b397ff12; }
.card-studio .assessment-prompt h2 { margin:0; font-size:21px; line-height:1.45; }
.card-studio .assessment-prompt p { margin:9px 0 14px; font-size:16px; line-height:1.65; color:#d4d0dc; }
.card-studio .assessment-prompt .button { min-height:44px; font-size:17px; }
.card-studio .has-body-profile .flip-card { height:calc(660px + (var(--body-part-count, 1) - 1) * 40px); }
.card-studio .has-body-profile .front>.art-shell { inset:126px 12px calc(200px + (var(--body-part-count, 1) - 1) * 40px); }
.card-studio .card-body-identity { position:absolute; z-index:3; bottom:22px; left:20px; right:20px; padding:15px 17px; border-radius:17px; background:#f7f3e9f2; color:#17171e; box-shadow:0 5px 20px #0001; }
.card-studio .card-body-identity>span { display:block; font-size:14px; line-height:1.4; color:#575260; }
.card-studio .card-body-identity>strong { display:block; font-size:51px; line-height:1.1; letter-spacing:1px; margin-top:4px; overflow-wrap:anywhere; }
.card-studio .card-body-identity>strong.is-combined { font-size:36px; letter-spacing:0; }
.card-studio .card-body-identity>p { margin:7px 0 0; font-size:18px; line-height:1.5; font-weight:650; }
.card-studio .card-code-parts { display:grid; gap:8px; margin-top:10px; width:100%; }
.card-studio .studio-result-strip .card-code-parts { flex-basis:100%; margin-top:2px; }
.card-studio .card-code-part { display:grid; grid-template-columns:30px minmax(0,1fr); gap:9px; align-items:start; font-size:17px; line-height:1.5; }
.card-studio .card-code-part>b { display:grid; place-items:center; min-height:26px; border-radius:6px; background:#17171e12; font-size:18px; line-height:1.4; }
.card-studio .card-code-part>span { overflow-wrap:anywhere; font-weight:650; }
.card-studio .studio-result-strip .card-code-part>b { background:#d8f66a22; color:#d8f66a; }
.card-studio .card-body-identity.no-type>strong { font-size:25px; letter-spacing:0; line-height:1.5; }
.card-studio details.constitution-note summary { cursor:pointer; font-weight:700; line-height:1.5; }
.card-studio details.constitution-note>strong { display:block; margin-top:14px; overflow-wrap:anywhere; }
.card-studio .share-mode-note { border-radius:14px; padding:14px 16px; margin:18px 0; background:#d8f66a14; color:#d8f66a; font-size:17px; line-height:1.65; }
@media (max-width: 380px) {
  .card-studio .outfit-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px 10px; }
  .card-studio .outfit-choice .art-shell { height: 96px; }
  .card-studio .studio-category { padding-inline: 13px; }
  .card-studio .studio-style-actions { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-studio *, .card-studio *::before, .card-studio *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* One mounted face: no 3D surface or WebKit backface compositing. */
.card-studio .card-stage { perspective:none; margin-top:10px; }
.card-studio .flip-card,.card-studio .has-body-profile .flip-card { height:auto; transform:none!important; transform-style:flat; transition:none; }
.card-studio .card-face { position:relative; inset:auto; transform:none!important; backface-visibility:visible; -webkit-backface-visibility:visible; visibility:visible!important; padding:16px; min-height:395px; }
.card-studio .card-face h2 { font-size:28px; margin-top:8px; letter-spacing:-.5px; }
.card-studio .card-face.front>.art-shell,.card-studio .has-body-profile .front>.art-shell { position:relative; inset:auto; height:172px; width:100%; margin:4px 0; }
.card-studio .has-body-profile .front>.art-shell { height:125px; }
.card-studio .card-face.front:after { width:260px; height:260px; top:55px; }
.card-studio .card-body-identity { position:relative; inset:auto; padding:10px 12px; border-radius:13px; }
.card-studio .card-body-identity>strong { font-size:34px; margin:2px 0 0; }
.card-studio .card-body-identity>span { font-size:13px; }
.card-studio .card-body-identity.no-type>strong { font-size:22px; }
.card-studio .card-code-parts { gap:4px; margin-top:6px; }
.card-studio .card-code-part { font-size:16px; line-height:1.45; grid-template-columns:24px 1fr; gap:8px; }
.card-studio .card-code-part>b { min-height:23px; font-size:16px; }
.card-studio .card-bottom { position:relative; inset:auto; margin-top:12px; }
.card-studio .back h2 { margin:14px 0 8px; font-size:25px; }
.card-studio .back-lines { margin-top:14px; gap:9px; }
.card-studio .back-line { font-size:17px; line-height:1.5; padding-bottom:10px; gap:8px; }
.card-studio .back-qr-row { margin-top:14px; }
.card-studio .back .mini-qr { height:80px; width:80px; }
.card-studio .card-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card-studio .card-toolbar h1 { font-size:25px; }
.card-studio .flip-button { width:auto; min-height:44px; padding:8px 12px; font-size:16px; margin:0; }
/* Reduce repeated decoration, while keeping navigation available on small phones. */
body.studio #header { padding-bottom:6px; }
body.studio #header .badge { display:none; }
body.studio #header .masthead-line { padding:9px 18px; }
body.studio #header .steps { padding:7px 18px 0; }
body.studio #header .step-caption { padding:6px 18px 0; }
.card-studio .view { min-height:0; padding:14px 18px 20px; }
.card-studio .view>h1 { font-size:28px; }
.card-studio .lede { margin-top:7px; font-size:16px; }
.card-studio .outfit-stage { height:190px; margin:12px 0 10px; }
.card-studio .outfit-stage>.art-shell { padding:8px 20px; }
.card-studio .outfit-meta { margin:10px 0; gap:8px; }
.card-studio .outfit-meta h2 { font-size:24px; }
.card-studio .outfit-meta .pill { font-size:13px; padding:5px 8px; }
.card-studio .studio-category-heading { margin:16px 0 8px; font-size:16px; }
.card-studio .studio-categories { margin-bottom:12px; gap:6px; }
.card-studio .studio-category { padding:8px 12px; }
.card-studio .studio-result-strip,.card-studio .assessment-prompt { display:block; margin:10px 0; padding:10px 12px; }
.card-studio .studio-result-strip summary,.card-studio .assessment-prompt summary { font-size:16px; cursor:pointer; }
.card-studio .studio-result-strip summary strong { color:#d8f66a; }
.card-studio .studio-result-strip p { font-size:14px; margin-top:8px; }
.card-studio .preference-hero { grid-template-columns:1fr 110px; gap:8px; margin:6px 0 18px; }
.card-studio .preference-hero h1 { font-size:25px; line-height:1.4; }
.card-studio .preference-hero .art-shell { height:128px; }
.card-studio .choice-list .choice { min-height:58px; padding:13px; font-size:17px; }
.card-studio .preference-nav,.card-studio .card-save-actions,.card-studio .studio-style-actions { position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:25; width:100%; max-width:480px; margin:0; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,#17171ef5 10px,#17171e); }
.card-studio .card-save-actions { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.card-studio .card-save-actions .button { padding:12px 10px; font-size:17px; }
.card-studio .card-secondary { margin-top:12px; gap:6px; }
.card-studio .card-secondary .button { min-height:44px; padding:8px 12px; font-size:16px; }
.card-studio .studio-style { padding-bottom:20px; }
.card-studio .studio-exit,.card-studio:has(.studio-style) .studio-exit { margin:0; padding:0 18px 12px; }
body.studio #footer { display:block; margin:0 18px; padding:12px 0 20px; }
body.studio #footer summary { min-height:44px; cursor:pointer; }
body.studio:has([data-studio-stage="style"]) #footer,body.studio:has([data-studio-stage="preferences"]) #footer,body.studio:has([data-studio-stage="card"]) #footer { padding-bottom:110px; }
.card-studio .share-options,.card-studio .share-qr-details { margin-top:14px; }
.card-studio .share-options>summary,.card-studio .share-qr-details>summary { cursor:pointer; font-size:16px; min-height:44px; padding:10px 0; }
.card-studio .share-panel { padding:5px 14px; margin-top:4px; }
.card-studio .check-row { gap:10px; padding:12px 0; }
.card-studio .check-row strong { font-size:17px; }
.card-studio .check-row p { font-size:15px; line-height:1.55; margin-top:4px; }
.card-studio .mbti-panel { padding-top:10px; margin-top:0; }
.card-studio .share-options .actions { margin-top:12px; }
.card-studio .share-options .note { margin-top:12px; font-size:15px; }
.card-studio .preview-frame { margin-top:10px; }
.card-studio .preview-frame h2 { font-size:22px; margin-bottom:10px; }
@media (max-height:670px) {
  .card-studio .preference-hero .art-shell { height:105px; }
  .card-studio .outfit-stage { height:170px; }
}

.card-studio .view { animation:none; }
.card-studio .mbti-panel>summary { min-height:44px; padding:9px 0; cursor:pointer; font-size:17px; font-weight:650; }
.card-studio[data-studio-stage="share"]:not(:has(.preview-frame)) .share-options>.actions { position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:25; width:100%; max-width:480px; margin:0; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,#17171ef5 10px,#17171e); }
body.studio:has([data-studio-stage="share"]):not(:has(.preview-frame)) #footer { padding-bottom:110px; }