@import url('./family-primitives.css');
@import url('../landing-preview.css');

/* Console adapters only. All navigation/rail geometry is the landing CSS. */
body.console-family{font-family:"Courier New",ui-monospace,Menlo,monospace;color:var(--ink);user-select:none;-webkit-user-select:none}
.console-family .family-original,.console-family #clamshell-toggle{display:none!important}
.console-family>canvas{display:block;touch-action:none}
.console-family #shelfNav .shelfArrow{font:900 10px var(--disp)}
.console-family>#clamshell-tools{display:none!important}
.console-family .family-native-skins,.family-dialog{position:fixed!important;top:66px!important;left:auto!important;right:12px!important;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow:auto;z-index:20!important;background:#101827;color:#f4f2df;border:2px solid #4bd8ec;padding:12px;box-sizing:border-box}
.family-dialog[hidden]{display:none!important}
.family-dialog header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.family-dialog h2,.family-model-options h2{font:900 italic 14px var(--disp);color:#ffdc57}
.family-panel-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;font:12px/1.5 monospace}
.family-dialog button{font:900 italic 11px var(--disp);min-height:44px;padding:8px;border:2px solid #05070e;background:#1c263b;color:#f4f2df;cursor:pointer;box-shadow:3px 3px #000}
.console-family #draftHeader.family-has-models{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.console-family #draftHeader.family-has-models>#draftTop{width:100%}
.family-model-options{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:min(306px,100%);box-sizing:border-box}
.family-model-options button{font:900 italic 11px/1.3 var(--disp);text-transform:uppercase;min-height:44px;min-width:0;padding:7px 9px;border:2px solid #05070e;background:#1c263b;color:#f4f2df;box-shadow:3px 3px #000;cursor:pointer}
.family-model-options button[aria-pressed=true]{background:#4bd8ec;color:#101827;border-color:#05070e}
.family-model-options button:hover{border-color:#ffdc57}
.family-model-options button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.console-family #draftHeader.fully-collapsed>.family-model-options{display:none}
.console-family.family-has-models #draftTop>#draftActions{top:calc(100% + 60px)}
.console-family.family-has-models .family-native-skins,.console-family.family-has-models .family-dialog{top:calc(var(--family-nav-bottom,106px) + 8px)!important;max-height:calc(100dvh - var(--family-nav-bottom,106px) - 20px)}
@media(orientation:landscape){.console-family.family-has-models #draftCartDock{top:calc(var(--family-nav-bottom,106px) + 12px)}}
.family-play-options{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:8px;border-top:1px solid #64748b}
.family-play-options p{grid-column:1/-1;font:12px/1.4 monospace;color:#f4f2df;margin:4px 0}
.family-play-options a{font:900 italic 11px var(--disp);color:#ffdc57;align-self:center;padding:8px}
.family-play-options [hidden]{display:none!important}
.console-family #draftActions #clamshell-tools{position:static;inset:auto!important;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:none;padding:8px 0 0;gap:8px;border:0;border-top:1px solid #64748b;border-radius:0;background:transparent;box-shadow:none}
.console-family #draftActions #clamshell-tools .sp-angle{grid-column:1/-1;grid-row:auto;display:flex;justify-content:space-between;justify-self:stretch;font:12px monospace}
.console-family #draftActions #clamshell-tools .sp-angle input{width:60%;min-height:44px}
.console-family #draftActions #clamshell-tools [data-fold]{grid-column:1;grid-row:auto}
.console-family #draftActions #clamshell-tools [data-light]{grid-column:2;grid-row:auto}
.console-family #draftActions #clamshell-tools select,.console-family #draftActions #clamshell-tools [data-library]{grid-column:1/-1;grid-row:auto;width:100%;min-width:0;min-height:44px;font-size:12px}
@media(orientation:portrait){.console-family .family-native-skins,.family-dialog{top:114px!important;left:12px!important;right:12px!important;width:auto;max-height:calc(100dvh - 130px)}}