/* Round 17: three remaining visual corrections, layered over Round 16. */

@media (min-width:761px){
  /* Every onward control now resolves against the hero itself. Earlier pages
     used different positioned grid wrappers, which made identical bottom
     values appear at different heights. */
  body:not(.home-page) .subhero,
  body.portfolio-page .portfolio-hero-refresh{
    position:relative!important;
  }
  body:not(.home-page) .subhero .subhero-grid,
  body.portfolio-page .portfolio-hero-refresh .portfolio-hero-refresh-inner{
    position:static!important;
  }
  body:not(.home-page) .subhero .hero-corner-links,
  body.experience-page .subhero .portfolio-subhero-actions,
  body.portfolio-page .portfolio-hero-refresh .portfolio-hero-actions{
    position:absolute!important;
    top:auto!important;
    right:clamp(58px,4.5vw,92px)!important;
    bottom:clamp(76px,9vh,90px)!important;
    transform:none!important;
  }
  body:not(.home-page) .subhero .hero-corner-links .hero-crosslink,
  body.experience-page .subhero .portfolio-subhero-actions .hero-crosslink,
  body.portfolio-page .portfolio-hero-refresh .portfolio-hero-actions .hero-crosslink{
    height:35px!important;
    min-height:35px!important;
    padding:0 17px!important;
    font-size:.72rem!important;
    letter-spacing:.012em!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(0,0,0,.26),
      0 2px 0 rgba(111,70,7,.30),
      0 6px 13px rgba(0,0,0,.18)!important;
  }
}

@media (max-width:760px){
  /* Keep Let's Connect attached to the paragraph while giving the credential
     marks their own clearly separated line. */
  .home-page .home-credential-connect{
    margin:-2px 0 20px!important;
  }
  .home-page .hero-executive-credentials .executive-credentials-row{
    margin:0 0 10px!important;
  }
  .home-page .compact-metrics-four{
    grid-auto-rows:minmax(50px,auto)!important;
    margin:0 0 11px!important;
  }
  .home-page .compact-metrics-four > .compact-metric{
    min-height:50px!important;
    padding:5px 9px!important;
  }

  /* The input and candidate layers—not the td—were enforcing a 44px row.
     Remove that floor so each row can honor the calculated square geometry. */
  #sudoku-grid td input,
  #sudoku-grid td .mini{
    min-height:0!important;
    height:100%!important;
  }

  /* Restore a playable square board. Vertical room comes from the utility and
     instruction redesign, not from shrinking the grid against viewport height. */
  .sudoku-app:not(.is-simulated-fullscreen){
    --sudoku-phone-board:min(80vw,312px);
  }
  .sudoku-app:not(.is-simulated-fullscreen) .sudoku-board-pane{
    width:var(--sudoku-phone-board)!important;
  }
  .sudoku-app:not(.is-simulated-fullscreen) #sudoku-grid td{
    height:calc((var(--sudoku-phone-board) - 16px) / 9)!important;
  }

  /* Full screen gets a little more board presence while retaining the same
     compact controls and a complete initial-viewport control set. */
  .sudoku-app.is-simulated-fullscreen,
  .sudoku-app:fullscreen,
  .sudoku-app:-webkit-full-screen{
    --sudoku-phone-board:min(86vw,340px);
  }
  .sudoku-app.is-simulated-fullscreen .sudoku-board-pane,
  .sudoku-app:fullscreen .sudoku-board-pane,
  .sudoku-app:-webkit-full-screen .sudoku-board-pane{
    width:var(--sudoku-phone-board)!important;
  }
  .sudoku-app.is-simulated-fullscreen #sudoku-grid td,
  .sudoku-app:fullscreen #sudoku-grid td,
  .sudoku-app:-webkit-full-screen #sudoku-grid td{
    height:calc((var(--sudoku-phone-board) - 16px) / 9)!important;
  }

  .sudoku-control-pane{
    gap:5px!important;
  }
  .sudoku-control-group{
    margin-bottom:5px!important;
    padding-bottom:5px!important;
  }
  .sudoku-control-label{
    margin-bottom:4px!important;
  }
  .sudoku-button-grid{
    gap:4px!important;
  }
  .sudoku-btn{
    min-height:30px!important;
    padding:4px 6px!important;
  }
  .sudoku-app,
  .sudoku-app:not(.is-simulated-fullscreen),
  .sudoku-app.is-simulated-fullscreen,
  .sudoku-app:fullscreen,
  .sudoku-app:-webkit-full-screen{
    gap:6px!important;
  }
  .sudoku-status{
    margin-top:6px!important;
    min-height:24px!important;
    padding:0!important;
    line-height:24px!important;
  }
}

/* Board utilities occupy a shallow, non-playable row above the grid. */
.sudoku-board-utilities{
  position:relative;
  z-index:6;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  width:min(100%,524px);
  min-height:30px;
  margin:0 auto 5px;
}
.sudoku-help-control{position:relative}
.sudoku-utility-btn,
.sudoku-fullscreen-quick.sudoku-utility-btn{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  padding:0!important;
  border:1px solid rgba(223,168,47,.92)!important;
  border-radius:7px!important;
  background:#082844!important;
  color:#efb334!important;
  font:800 .78rem/1 "Manrope",sans-serif!important;
  transform:none!important;
  box-shadow:0 3px 8px rgba(0,0,0,.16)!important;
}
.sudoku-help-popover{
  position:absolute;
  top:34px;
  right:0;
  z-index:12;
  display:flex;
  flex-direction:column;
  gap:4px;
  width:min(240px,76vw);
  padding:10px 12px;
  border:1px solid rgba(223,168,47,.68);
  border-radius:8px;
  background:#fff;
  color:#5f6b78;
  font-size:.68rem;
  line-height:1.4;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transform:translateY(-3px);
  pointer-events:none;
  box-shadow:0 9px 24px rgba(7,25,43,.18);
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
.sudoku-help-popover strong{color:#07192b;text-transform:uppercase;letter-spacing:.06em}
.sudoku-help-control:hover .sudoku-help-popover,
.sudoku-help-control:focus-within .sudoku-help-popover,
.sudoku-help-popover.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

/* The directory reads as a compact navigation list instead of centered copy. */
#portfolio-case-directory{scroll-margin-top:88px}
.portfolio-case-directory{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start!important;
  justify-content:stretch!important;
  gap:5px 24px!important;
  width:min(calc(100% - 48px),620px)!important;
  margin:10px auto 0!important;
  padding:2px 0 2px 16px!important;
  border-left:2px solid rgba(214,168,79,.72)!important;
  text-align:left!important;
}
.portfolio-case-directory a{
  display:block!important;
  position:relative;
  padding-left:12px;
  color:#5f7182!important;
  font-size:.68rem!important;
  line-height:1.45!important;
  white-space:normal!important;
}
.portfolio-case-directory a::before{
  content:"›";
  position:absolute;
  left:0;
  color:#c28d27;
  font-weight:800;
}
.portfolio-case-directory a::after{display:none!important}

@media (max-width:760px){
  .sudoku-board-utilities{width:100%;min-height:28px;margin-bottom:4px}
  .portfolio-case-directory{
    grid-template-columns:1fr!important;
    gap:4px!important;
    width:min(calc(100% - 54px),310px)!important;
    padding-left:13px!important;
  }
  .portfolio-case-directory a{font-size:.65rem!important;line-height:1.42!important}
}