/* The mode switch is a persistent header control in both experiences. */
.site-header .portfolio-mode-switch,.app>header .portfolio-mode-switch{position:static;inset:auto;flex:none;margin:0;z-index:100;box-shadow:none;}
.site-header .portfolio-mode-switch{order:3;}
.site-header .site-nav{order:1;margin-left:auto;}
.site-header .site-menu-btn{order:2;}
.site-header,.app>header{--header-control-gap:24px;}
.site-header .site-header-inner{gap:var(--header-control-gap);}
.site-header .portfolio-mode-switch>a,.site-header .portfolio-mode-switch>span{width:40px;height:40px;}
.app>header .portfolio-mode-switch>a,.app>header .portfolio-mode-switch>span{width:40px;height:40px;}
.app>header .brand{margin-right:auto;}
@media(max-width:860px){
 .site-header,.app>header{--header-control-gap:12px;}
 .site-header .site-header-inner{padding:0 16px;gap:var(--header-control-gap);}
 .site-header .site-slot{flex:1;min-width:0;}
 .site-header .site-menu-btn{margin-left:auto;flex:none;}
 .site-header .portfolio-mode-switch{padding:3px;gap:2px;}
}
.app>header .game-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--header-control-gap);margin-left:auto;}
.app>header .game-header-actions .rulesbtn,.app>header .game-header-actions .toggle{margin-left:0;}
@media(max-width:600px){
 .app>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 14px;padding:12px;}
 .app>header .brand{grid-column:1;grid-row:1;min-width:0;margin:0;align-self:center;}
 .app>header .brand h1{font-size:11px;}
 .app>header .brand .role-tag{font:400 12px/1.3 var(--txt);letter-spacing:.02em;}
 .app>header .portfolio-mode-switch{grid-column:2;grid-row:1;align-self:center;padding:4px;}
 .app>header .portfolio-mode-switch>a,.app>header .portfolio-mode-switch>span{width:36px;height:36px;}
 .app>header .game-header-actions{grid-column:1/-1;grid-row:2;width:100%;margin:0;gap:var(--header-control-gap);}
 .app>header .game-header-actions>button{height:34px;box-sizing:border-box;}
}

.app>header .brand .role-tag{font:400 12px/1.3 var(--txt);letter-spacing:.02em;}
.app>header .brand h1{width:max-content;max-width:100%;}

/* Match the switch footprint and viewport anchor across both modes. */
.site-header .site-header-inner{max-width:none;padding-left:32px;padding-right:32px;}
.app>header{padding-left:32px;padding-right:32px;min-height:64px;box-sizing:border-box;gap:var(--header-control-gap);}
.site-header .portfolio-mode-switch,.app>header .portfolio-mode-switch{width:96px;height:48px;box-sizing:border-box;padding:0;gap:4px;border-width:2px;align-items:center;}
.site-header .portfolio-mode-switch>a,.site-header .portfolio-mode-switch>span,
.app>header .portfolio-mode-switch>a,.app>header .portfolio-mode-switch>span{width:44px;height:44px;flex:none;}
/* Inset the selected circle without shrinking the control or its icon. */
.site-header .portfolio-mode-switch>[aria-current]{padding:3px;background-clip:content-box!important;}
.site-header .portfolio-mode-switch>[aria-current]{background-color:var(--green);}
.site-header .portfolio-mode-switch{height:44px;border-width:1.5px;}
@media(min-width:861px){
 .site-header .site-nav .contact-toggle{height:44px;box-sizing:border-box;}
 .site-header .site-nav .contact-toggle{background:transparent;color:var(--text);font-weight:400;border:1px solid #c9cec7;}
 .site-header .site-nav .contact-toggle:is(:hover,:focus-visible){background:#ece7f5;}
}
@media(max-width:860px){
 .site-header .site-header-inner{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
 .app>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--header-control-gap);padding:4px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));}
 .app>header .brand{grid-column:1;grid-row:1;margin:0;align-self:center;}
 .app>header .portfolio-mode-switch{grid-column:2;grid-row:1;align-self:center;}
 .app>header .game-header-actions{grid-column:1/-1;grid-row:2;width:100%;margin:0;}
}

/* One spacing rule for adjacent header controls, including the mode switch. */
.site-header .site-nav{gap:var(--header-control-gap);}
.site-header .site-nav>.contact-navigation{margin-left:0;}
@media(min-width:861px){
 .site-header .site-nav .work-navigation-toggle{padding-left:0;padding-right:0;min-width:44px;}
 /* Balance visible edges of text controls against the filled contact button. */
 .site-header .site-header-inner{column-gap:32.4px;}
 .site-header .site-nav{gap:32px;flex:0 0 auto;width:max-content;justify-content:flex-start;}
 .site-header .site-nav>.work-navigation{flex:0 0 auto;margin:0;}
 .site-header .site-nav>.work-navigation+.work-navigation{margin-left:0;}
 .site-header .site-nav>.contact-navigation{flex:0 0 auto;margin-left:0;}
}

@media(hover:hover) and (pointer:fine){
 .site-header .portfolio-mode-switch>[aria-current]:hover{background-color:#245f2e;}
}

/* Center each 38px state circle on the pill's 22px-radius end cap.
   Keep the full 44px target; hover paint uses the same inset as selection. */
.site-header .portfolio-mode-switch{position:relative;width:88px;}
.site-header .portfolio-mode-switch>a,.site-header .portfolio-mode-switch>span{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:3px;box-sizing:border-box;background-clip:content-box!important;}
.site-header .portfolio-mode-switch>span{left:-1.5px;}
.site-header .portfolio-mode-switch>a{right:-1.5px;}

/* Expand text-control hover surfaces while preserving visible label spacing. */
@media(min-width:861px){.site-header #site-nav .work-navigation-toggle{padding-left:8px;padding-right:8px}.site-header #site-nav>.work-navigation,.site-header #site-nav>.work-navigation+.work-navigation{margin-left:-8px;margin-right:-8px}}

/* One geometry for the real pixel toggle and its case-study example. */
.app>header .portfolio-mode-switch.pixel-mode-switch,
.toggle-state-pair .portfolio-mode-switch.pixel-mode-switch{width:88px;height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:4px;padding:0;border:2px solid #f4f0e0;box-shadow:none;}
.app>header .portfolio-mode-switch.pixel-mode-switch>a,
.app>header .portfolio-mode-switch.pixel-mode-switch>span,
.toggle-state-pair .portfolio-mode-switch.pixel-mode-switch>span{position:static;transform:none;box-sizing:border-box;width:40px;height:40px;padding:0;flex:none;display:inline-flex;align-items:center;justify-content:center;}

/* Game header actions retain cream foregrounds in every interaction state. */
.app>header .game-header-actions>button:is(:hover,:focus-visible),
.app>header .game-header-actions>button:is(:hover,:focus-visible) :is(span,kbd){color:#f4f0e0!important;}
.app>header .game-header-actions>button:is(:hover,:focus-visible){background:#3548c0;}
@media(min-width:861px){
 .app>header .game-header-actions>button{height:44px;box-sizing:border-box;border:2px solid #f4f0e0;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;}
}

/* Full row, compact row, then two rows only on narrow phones. */
@media(min-width:600px){
 .app>header{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));}
 .app>header .brand{flex:none;margin-right:auto;}
 .app>header .game-header-actions{width:auto;flex:none;margin:0;gap:12px;}
 .app>header .game-header-actions>button{height:44px;box-sizing:border-box;border:2px solid #f4f0e0;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;}
}
@media(min-width:600px) and (max-width:1000px){
 .app>header .game-header-actions{gap:8px;}
 .app>header .game-header-actions .hk,.app>header .rl-full{display:none;}
 .app>header .rl-short{display:inline;}
 .app>header .game-header-actions>button{padding:6px 8px;min-width:44px;}
 .app>header .rl-short{font-size:12px;}
}

/* Separate the active green tile using the toggle's blue, not pale green. */
.app>header .portfolio-mode-switch.pixel-mode-switch [aria-current],
.toggle-state-pair .portfolio-mode-switch.pixel-mode-switch [aria-current]{box-shadow:inset 0 0 0 2px #161c6a;}

.app>header .portfolio-mode-switch.pixel-mode-switch [aria-current],
.toggle-state-pair .portfolio-mode-switch.pixel-mode-switch [aria-current]{background:#2d7a3a;}
@media(hover:hover) and (pointer:fine){
 .app>header .portfolio-mode-switch.pixel-mode-switch [aria-current]:hover{background:#245f2e;}
 .toggle-state-pair .portfolio-mode-switch.pixel-mode-switch [aria-current]:hover{background:#2d7a3a;}
}

/* Final approved header states, consolidated from the page prototypes. */
@media(hover:hover) and (pointer:fine){.site-header .portfolio-mode-switch>[aria-current]:hover{background-color:#245f2e}}.site-header .portfolio-mode-switch>[aria-current]{background-color:var(--green)}@media(min-width:861px){.site-header .site-nav .contact-toggle{background:transparent;color:var(--text);font-weight:400;border:1px solid #c9cec7}.site-header .site-nav .contact-toggle:is(:hover,:focus-visible){background:#ece7f5}.site-header .site-nav .contact-toggle:is(:hover,:focus-visible,:active),.site-header .site-nav .contact-toggle:is(:hover,:focus-visible,:active) span{color:#245f2e!important}}.site-header .portfolio-mode-switch{height:44px;border-width:1.5px}@media(min-width:861px){.site-header .site-nav .contact-toggle{height:44px;box-sizing:border-box}}@media(min-width:861px){.site-header #site-nav{gap:32px;flex:0 0 auto;width:max-content;justify-content:flex-start}.site-header #site-nav>.work-navigation{flex:0 0 auto;margin:0}.site-header #site-nav>.work-navigation+.work-navigation{margin-left:0}.site-header #site-nav>.contact-navigation{flex:0 0 auto;margin-left:0}.site-header #site-nav .work-navigation-toggle{padding-left:0;padding-right:0}.site-header .site-header-inner{column-gap:32.4px}}.site-header .portfolio-mode-switch{position:relative;width:88px}.site-header .portfolio-mode-switch>a,.site-header .portfolio-mode-switch>span{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:3px;box-sizing:border-box;background-clip:content-box!important}.site-header .portfolio-mode-switch>span{left:-1.5px}.site-header .portfolio-mode-switch>a{right:-1.5px}@media(min-width:861px){.site-header #site-nav .work-navigation-toggle{padding-left:8px;padding-right:8px}.site-header #site-nav>.work-navigation,.site-header #site-nav>.work-navigation+.work-navigation{margin-left:-8px;margin-right:-8px}}.site-header .work-navigation-toggle[aria-expanded="true"] svg,.site-header .contact-toggle[aria-expanded="true"] svg{transform:rotate(45deg)}.site-header .contact-toggle svg{transition:transform .15s}@media(prefers-reduced-motion:reduce){.site-header .contact-toggle svg{transition:none}}@media(max-width:860px){.site-header .site-menu-btn{width:auto;min-width:44px;height:44px;padding:0 8px;margin-right:0;gap:4px;font:400 15px var(--font-sans)}.site-header .site-menu-btn svg{flex:none;transition:transform .15s}.site-header .site-menu-btn[aria-expanded="true"] svg{transform:rotate(45deg)}.site-header .site-menu-btn[aria-expanded="true"]{font-weight:600}.site-header .site-menu-btn:hover{background:#ece7f5;font-weight:600}}@media(prefers-reduced-motion:reduce){.site-header .site-menu-btn svg{transition:none}}

/* Preserve the same desktop viewport anchor as the Portfolio header. */
@media(min-width:861px){
 .app>header{padding-left:32px;padding-right:32px;}
}

/* Quest Log holds Menu's position immediately before the mode switch. */
.app>header>.toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0;height:44px;box-sizing:border-box;border:2px solid #f4f0e0;box-shadow:none;}
.app>header>.toggle:is(:hover,:focus-visible),.app>header>.toggle:is(:hover,:focus-visible) :is(span,kbd){color:#f4f0e0!important;}
@media(max-width:1000px){.app>header>.toggle .hk{display:none;}}
@media(min-width:375px) and (max-width:599px){
 .app>header{grid-template-columns:minmax(0,1fr) 88px 88px;gap:12px;padding-top:6px;}
 .app>header>.brand{grid-column:1;grid-row:1;}
 .app>header>.toggle{grid-column:2;grid-row:1;width:88px;padding:0 6px;font-size:8px;}
 .app>header>.portfolio-mode-switch{grid-column:3;grid-row:1;}
 .app>header>.game-header-actions{grid-column:1/-1;grid-row:2;}
}
@media(min-width:375px) and (max-width:860px){.site-header .site-menu-btn{width:88px;flex:none;}}
@media(max-width:374px){
 .app>header>.toggle{grid-column:2;grid-row:2;padding:0 6px;font-size:8px;}
 .app>header>.game-header-actions{grid-column:1;grid-row:2;width:auto;}
}

@media(min-width:600px) and (max-width:1000px){.app>header>.toggle{padding:6px 8px;}}

/* Enlarge the pixel toggle's clickable half without changing its artwork. */
.app>header .portfolio-mode-switch.pixel-mode-switch>a{position:relative;}
.app>header .portfolio-mode-switch.pixel-mode-switch>a::after{
 content:'';position:absolute;inset:-2px;
}
/* Two 40px controls and an 8px gap align exactly beneath the 88px toggle. */
@media(min-width:375px) and (max-width:599px){
 .app>header>.game-header-actions{width:88px;justify-self:end;gap:8px;}
 .app>header .game-header-actions>button{
  position:relative;flex:0 0 40px;width:40px;height:40px;min-width:40px;
  padding:0;box-sizing:border-box;border:2px solid #f4f0e0;box-shadow:none;
  display:inline-flex;align-items:center;justify-content:center;
 }
 .app>header .game-header-actions>button::after{content:'';position:absolute;inset:-2px;}
}