/* Shared screen layout corrections (#186). Print keeps each page's own rules. */
@media screen {
  .nav a, .nav button, .nav summary, footer a {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  footer a { padding: 8px 0; }
}

@media screen and (max-width: 980px) {
  .nav {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand auth" "nav nav";
    gap: 12px;
  }
  .nav > .brand, .nav > .brand-group { grid-area: brand; }
  .nav > .auth {
    grid-area: auth;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
  .nav > .segs {
    grid-area: nav;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    justify-content: center;
  }
  .nav .seg { flex: 1; min-width: 0; white-space: normal; text-align: center; }
  .agg, .split, .hero-split { grid-template-columns: minmax(0, 1fr); }
  .agg > *, .split > *, .hero-split > * { min-width: 0; }
  .us .who, .row .who { overflow-wrap: anywhere; }
  .scopes code { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  button:not([tabindex="-1"]), a.btn, input:not([type="checkbox"]), select {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
  }
  summary, .checkbox-label {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
    padding: 12px 8px;
  }
  .checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
}

@media screen and (max-width: 600px) {
  .nav {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "nav" "auth";
  }
  .nav > .brand, .nav > .brand-group { justify-self: center; }
  .nav > .auth { justify-self: center; justify-content: center; gap: 6px; }
}