/* Dark comparison tools are separate from every proposed website identity. */
.concept-bar{display:block;padding:0 var(--edge);background:#252c33;border-bottom:6px solid #192127;color:#e2eaf0;font:400 16px/1.4 var(--font-body)}
.preview-heading{display:flex;align-items:center;gap:24px;min-height:70px;padding-block:14px}
.preview-heading .back-concepts{font-size:16px;font-weight:400;text-decoration:none;display:inline-flex;gap:8px;align-items:center;color:#d3e2ec}
.preview-status{display:flex;align-items:center;gap:12px}
.preview-status .concept-name{font-size:18px;font-weight:500;color:#fff}
.preview-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:10px;padding:9px 12px;background:#35414c;border:1px solid #70808d;border-radius:6px;font:500 16px/1.4 var(--font-body);color:#fff;cursor:pointer;min-height:42px}
.preview-toggle[hidden],.preview-controls[hidden]{display:none}
.preview-toggle svg{width:18px;height:18px;transition:transform .18s ease}
.preview-toggle[aria-expanded=false] svg{transform:rotate(180deg)}
.preview-controls{padding:0 0 18px}
.preview-purpose{margin:0 0 12px;color:#c0ccd6;font:400 16px/1.5 var(--font-body);max-width:none}
.choice-group{display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:center;gap:16px;padding:12px 0;border-top:1px solid #48555f}
.concept-bar .choice-label{margin:0;color:#fff;font:600 16px/1.4 var(--font-body);letter-spacing:0;white-space:nowrap;text-wrap:nowrap;overflow-wrap:normal;hyphens:none}
.choice-buttons,.font-options,.logo-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:8px;width:100%;padding:0;border:0}
.color-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.concept-bar .choice-button{appearance:none;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin:0;padding:10px 12px;border:1px solid #61717f;border-radius:6px;background:#343e48;color:#edf3f7;font:400 16px/1.3 var(--font-body);cursor:pointer;text-align:left;box-shadow:none}
.concept-bar .choice-button:hover{background:#435260;border-color:#b4c6d4}
.concept-bar .choice-button[aria-pressed=true]{background:#e1eff8;border-color:#d9edf9;color:#173c55;box-shadow:inset 0 0 0 1px #d9edf9}
.concept-bar .choice-button:focus-visible,.preview-toggle:focus-visible,.concept-bar a:focus-visible{outline:3px solid #c6eaff;outline-offset:3px}
.concept-bar .choice-button .choice-check{display:inline-block;visibility:hidden;flex:0 0 15px;width:15px;height:auto;margin:0;background:none;border:0;border-radius:0;font:500 17px/1 var(--font-body);color:#173c55}
.concept-bar .choice-button[aria-pressed=true] .choice-check{visibility:visible}
.concept-bar .choice-button .color-chip{display:block;flex:0 0 18px;width:18px;height:18px;margin:0;border-radius:4px;background:var(--swatch);border:1px solid #ffffff55}
.concept-bar .choice-button>span:not(.color-chip):not(.choice-check){display:block;flex:1 1 auto;min-width:0;width:auto;height:auto;margin:0;border:0;border-radius:0;background:none;white-space:normal}
.font-options .choice-button{min-width:0}
.logo-options .choice-button{min-width:0;flex:1 1 180px}
/* Fixed vector identities; website typography remains an independent choice. */
.site-header{grid-template-columns:minmax(330px,1fr) auto auto;gap:24px;padding-block:22px}
.brand{display:block;width:350px;max-width:100%;min-width:0;color:var(--ink);text-decoration:none;--logo-accent:var(--accent)}
.brand-graphic{display:flex;align-items:center;width:100%;height:78px}
.brand-graphic>svg{display:block;width:100%;height:100%;overflow:visible}
.brand .brand-sub{display:block;margin-top:8px;font:400 16px/1.45 var(--font-body);letter-spacing:0;color:var(--muted);max-width:none}
.site-header nav .mobile-register{display:none}
.footer-brand{display:block;width:320px;max-width:100%;color:var(--ink);--logo-accent:var(--accent)}
.site-footer>*{min-width:0}
.footer-brand .brand-graphic{height:78px}
.footer-identity>p:first-of-type{margin-top:12px}
@media(max-width:1350px){.choice-buttons,.font-options,.logo-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1200px){.site-header{grid-template-columns:minmax(0,1fr) auto}.site-header nav{grid-column:1/-1;grid-row:2}.site-header>.button{grid-column:2;grid-row:1}}
@media(max-width:820px){.concept-bar{padding:0 16px}.preview-heading{flex-wrap:wrap;gap:12px;padding-block:14px}.preview-heading .back-concepts{width:100%}.preview-status{padding-left:0;border-left:0;gap:8px}.preview-toggle{font-size:16px;gap:6px;padding:8px}.choice-group{display:block;padding-block:14px}.concept-bar .choice-label{margin-bottom:10px}.choice-buttons{gap:6px}.concept-bar .choice-button{font-size:16px;min-height:46px;padding:9px 10px}.color-options .choice-button{flex:1 1 150px}.font-options .choice-button{flex:1 1 125px;min-width:0}.logo-options .choice-button{flex:1 1 100%}.site-header{display:block;padding-top:24px}.brand{width:350px;max-width:100%}.brand-graphic{height:78px}.site-header>.button{display:none}.site-header nav{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);gap:8px 22px;flex-wrap:wrap}.site-header nav .mobile-register{display:inline-flex;color:var(--accent)}.footer-brand{width:300px}.footer-brand .brand-graphic{height:72px}}
@media print{.logo-options,.mobile-register{display:none!important}}
@media(max-width:820px){.font-options{grid-template-columns:repeat(2,minmax(0,1fr))}.color-options,.logo-options{grid-template-columns:minmax(0,1fr)}.concept-bar .choice-button{min-width:0;overflow-wrap:anywhere}}

/* Balanced two-column navigation on narrow phones. */
@media(max-width:480px){.site-header nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}.site-header nav a{min-width:0;justify-self:start}.site-header nav .mobile-register{justify-self:start}}