/* A finish is independent of a color palette. Sample cards inherit their own finish. */
[data-button-look]{--button-fill:var(--accent);--button-ink:var(--bg);--button-edge:transparent;--button-radius:9px;--button-shadow:0 2px 0 #0002;--button-filter:none;--secondary-fill:color-mix(in srgb,var(--surface) 75%,transparent)}
[data-button-look="glass"]{--button-fill:color-mix(in srgb,var(--accent) 12%,transparent);--button-ink:var(--text);--button-edge:color-mix(in srgb,var(--accent) 35%,transparent);--button-radius:14px;--button-shadow:inset 0 1px 0 #ffffff22,0 8px 25px #0002;--button-filter:blur(18px);--secondary-fill:color-mix(in srgb,var(--surface) 55%,transparent)}
[data-button-look="outline"]{--button-fill:transparent;--button-ink:var(--accent);--button-edge:color-mix(in srgb,var(--accent) 70%,transparent);--button-radius:5px;--button-shadow:none;--secondary-fill:transparent}
[data-button-look="capsule"]{--button-fill:var(--accent);--button-ink:var(--bg);--button-edge:transparent;--button-radius:999px;--button-shadow:0 4px 14px #0002}
[data-button-look="glow"]{--button-fill:color-mix(in srgb,var(--accent) 8%,var(--bg));--button-ink:var(--accent);--button-edge:color-mix(in srgb,var(--accent) 65%,transparent);--button-radius:8px;--button-shadow:inset 0 0 14px color-mix(in srgb,var(--accent) 9%,transparent),0 0 18px color-mix(in srgb,var(--accent) 13%,transparent)}
[data-button-look="raised"]{--button-fill:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,white),var(--accent));--button-ink:var(--bg);--button-edge:color-mix(in srgb,var(--accent) 65%,white);--button-radius:11px;--button-shadow:inset 0 1px 0 #ffffff66,0 3px 0 color-mix(in srgb,var(--accent) 40%,var(--bg)),0 7px 12px #0004}
html[data-button-look] body :is(.primary,.land-button,.tutorial-actions button,#theme-done),.button-look-example{background:var(--button-fill);color:var(--button-ink);border:1px solid var(--button-edge);border-radius:var(--button-radius);box-shadow:var(--button-shadow);backdrop-filter:var(--button-filter);font-weight:600;letter-spacing:.1px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
html[data-button-look] body :is(.secondary,.production-btn,.module-option,.small-action,.response-options button,.relief-depots button){border-radius:min(var(--button-radius),18px);border-color:var(--line);background:var(--secondary-fill);box-shadow:none}
html[data-button-look] body :is(.primary,.land-button,.secondary,.small-action,.tutorial-actions button,#theme-done):hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
html[data-button-look] body :is(.primary,.land-button,.secondary,.small-action,.tutorial-actions button,#theme-done):active:not(:disabled){transform:translateY(1px)}
html[data-button-look] body :is(.primary,.land-button,.secondary,.small-action,.tutorial-actions button,#theme-done):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.appearance-tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);margin:0 0 17px;padding-bottom:4px}.appearance-tabs button{flex:1;min-height:44px;border-radius:7px;font-size:11px;color:var(--muted)}.appearance-tabs button[aria-selected="true"]{background:var(--surface);color:var(--text)}
#theme-picker [hidden]{display:none!important}.button-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.button-look-option{text-align:left;padding:16px 10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 35%,var(--bg));min-width:0}.button-look-option[aria-pressed="true"]{border-color:var(--accent);background:var(--surface)}
.button-look-example{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:43px;padding:10px 11px;font-size:10px;pointer-events:none}.button-look-example i{font-size:14px;font-style:normal}.look-title{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:11px;font-weight:600}.look-title b{visibility:hidden;color:var(--accent)}.button-look-option[aria-pressed="true"] .look-title b{visibility:visible}.button-look-option small{display:block;color:var(--muted);font-size:9px;line-height:1.5;margin-top:4px;min-height:27px}
@media(max-width:779px){.button-look-option{padding:12px 9px 10px}.button-look-example{font-size:9px;padding:9px}.look-title{margin-top:14px}#theme-picker h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){html[data-button-look] body button,.button-look-example{transition:none!important}html[data-button-look] body button:hover,html[data-button-look] body button:active{transform:none!important}}

/* Rectangular decorative layers retain the illuminated border and full touch target. */
[data-button-look="flight"]{--button-radius:0px;--button-fill:transparent;--button-ink:var(--text);--button-edge:transparent;--button-shadow:none}
html[data-button-look="flight"] body :is(.primary,.land-button,.secondary,.production-btn,.module-option,.small-action,.tutorial-actions button,.orbit-secondary button,.destination-card,#theme-done,#theme-toggle),[data-button-look="flight"]>.button-look-example{
 --hull-border:color-mix(in srgb,var(--accent) 50%,var(--surface));--hull-fill:var(--surface);position:relative;isolation:isolate;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;color:var(--text);min-height:44px;
}
html[data-button-look="flight"] body :is(.primary,.land-button,.secondary,.production-btn,.module-option,.small-action,.tutorial-actions button,.orbit-secondary button,.destination-card,#theme-done,#theme-toggle)::before,[data-button-look="flight"]>.button-look-example::before,
html[data-button-look="flight"] body :is(.primary,.land-button,.secondary,.production-btn,.module-option,.small-action,.tutorial-actions button,.orbit-secondary button,.destination-card,#theme-done,#theme-toggle)::after,[data-button-look="flight"]>.button-look-example::after{
 content:'';position:absolute;pointer-events:none;inset:0;z-index:-2;background:var(--hull-border);clip-path:none;transition:background .18s ease;
}
html[data-button-look="flight"] body :is(.primary,.land-button,.secondary,.production-btn,.module-option,.small-action,.tutorial-actions button,.orbit-secondary button,.destination-card,#theme-done,#theme-toggle)::after,[data-button-look="flight"]>.button-look-example::after{
 inset:1px;z-index:-1;background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 13%,var(--hull-fill)),var(--hull-fill) 65%);clip-path:none;
}
html[data-button-look="flight"] body :is(.primary,.land-button,.tutorial-actions button,#theme-done),[data-button-look="flight"]>.button-look-example{--hull-border:var(--accent);--hull-fill:color-mix(in srgb,var(--accent) 6%,var(--bg));letter-spacing:.4px}
html[data-button-look="flight"] body #orbit-land{padding:14px 16px 14px 24px;text-align:left}
html[data-button-look="flight"] body .land-button small{color:var(--accent);letter-spacing:2px;font-size:8px}
html[data-button-look="flight"] body .land-button>i,[data-button-look="flight"]>.button-look-example>i{display:grid;place-items:center;align-self:stretch;min-width:39px;border-left:1px solid color-mix(in srgb,var(--accent) 35%,transparent);margin-left:12px;color:var(--accent);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 8%,transparent));font-style:normal}
[data-button-look="flight"]>.button-look-example{padding:10px 12px;min-height:50px}
[data-button-look="flight"]>.button-look-example>i{min-width:30px;margin-left:3px}
html[data-button-look="flight"] body .orbit-secondary{gap:10px}
html[data-button-look="flight"] body .orbit-secondary button{padding:10px 13px;--corner:9px}
html[data-button-look="flight"] body #theme-toggle{padding:0 13px}
html[data-button-look="flight"] body :is(.primary,.land-button,.secondary,.production-btn,.module-option,.small-action,.tutorial-actions button,.orbit-secondary button,.destination-card,#theme-done,#theme-toggle):hover:not(:disabled){--hull-border:var(--accent);--hull-fill:color-mix(in srgb,var(--accent) 14%,var(--bg));filter:none}
html[data-button-look="flight"] body :is(.module-option.selected,.module-option.active){--hull-border:var(--accent);--hull-fill:color-mix(in srgb,var(--accent) 18%,var(--bg))}
.button-look-option[data-button-look="flight"]{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;column-gap:16px;align-items:center;padding:16px}.button-look-option[data-button-look="flight"] .button-look-example{grid-row:1/3}.button-look-option[data-button-look="flight"] .look-title{margin:0}.button-look-option[data-button-look="flight"] small{min-height:0}
@media(max-width:779px){html[data-button-look="flight"] body .orbit-secondary button{padding:7px 10px}html[data-button-look="flight"] body #orbit-land{padding:11px 14px 11px 21px}.button-look-option[data-button-look="flight"]{grid-template-columns:1fr 1fr;padding:12px;gap:10px}.button-look-option[data-button-look="flight"] .button-look-example{font-size:9px;padding:10px}.button-look-option[data-button-look="flight"] .button-look-example>i{min-width:18px}html[data-button-look="flight"] body #theme-toggle{padding:0 9px}}
@media(max-width:779px){html[data-button-look="flight"] body #orbit-land{position:fixed;left:16px;right:16px;bottom:63px;width:auto;min-height:60px}}

/* Landing cards share the Flight Deck button finish and typography. */
html[data-button-look="flight"] body #orbit-home .destination-card.selected{--hull-border:var(--accent);--hull-fill:color-mix(in srgb,var(--accent) 6%,var(--bg))}
html[data-button-look="flight"] body .destination-info strong{font:600 18px/1.2 'DM Sans','Segoe UI',sans-serif;letter-spacing:.1px;color:var(--text)}
html[data-button-look="flight"] body .destination-info small{color:var(--muted);line-height:1.5}
html[data-button-look="flight"] body .destination-check{border-radius:0;border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent);background:transparent}
html[data-button-look="flight"] body .destination-card.tutorial-target{outline:1px solid var(--accent)!important;outline-offset:3px;box-shadow:none!important}
html[data-button-look="flight"] body .destination-card:focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px}
@media(max-width:779px){html[data-button-look="flight"] body .destination-info strong{font-size:12px}html[data-button-look="flight"] body .destination-info{right:27px}}
@media(max-width:950px) and (max-height:500px){html[data-button-look="flight"] body .destination-info strong{font-size:12px}}
/* Tutorial and weather panels use the same rectangular Flight Deck finish. */
html[data-button-look="flight"] body :is(#walkthrough,#orbit-alerts){border:1px solid color-mix(in srgb,var(--accent) 50%,var(--surface));border-radius:0;background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),var(--surface) 65%);box-shadow:none;backdrop-filter:none;color:var(--text);font-family:'DM Sans','Segoe UI',sans-serif}
html[data-button-look="flight"] body #walkthrough h2{font:600 18px/1.3 'DM Sans','Segoe UI',sans-serif;letter-spacing:.1px;color:var(--text)}
html[data-button-look="flight"] body #orbit-alerts b{font-family:'DM Sans','Segoe UI',sans-serif;font-weight:600;letter-spacing:.1px;color:var(--text)}
html[data-button-look="flight"] body :is(#walkthrough p,#orbit-alerts small){color:var(--muted)}
html[data-button-look="flight"] body #orbit-alerts:hover{border-color:var(--accent);background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 20%,var(--surface)),var(--surface) 65%);filter:none}
html[data-button-look="flight"] body #orbit-alerts:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:779px){html[data-button-look="flight"] body #walkthrough h2{font-size:16px}}