:root{
  --dense-panel-padding:14px;
}

main,.section,.section>.panel,.section .grid{min-width:0;max-width:100%}

/* Desktop: turn the blue hero into a compact single-row search toolbar. */
@media (min-width:901px){
  .search-wrap{
    max-width:1420px;
    min-height:92px;
    padding:14px 22px;
    display:grid;
    grid-template-columns:max-content minmax(300px,1fr);
    align-items:center;
    gap:18px;
  }
  .engines{
    margin:0;
    flex-wrap:nowrap;
    align-items:center;
  }
  .engine{white-space:nowrap}
  .search-form{
    width:100%;
    max-width:none;
    min-width:0;
    padding:5px;
    border-radius:11px;
    box-shadow:0 8px 22px rgba(17,63,132,.16);
  }
  .search-form input{min-height:46px}
  .search-form button{min-height:46px}

  .layout{padding-top:16px}

  /* One visual panel per top-level section. Title and subgroup navigation share the header row when chips exist. */
  .section{
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    grid-template-areas:
      "heading subnav"
      "panel panel";
    align-items:center;
    column-gap:16px;
    row-gap:11px;
    margin-bottom:16px;
    padding:var(--dense-panel-padding);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    overflow:visible;
  }
  .section-head{
    grid-area:heading;
    margin:0;
    align-items:center;
    white-space:nowrap;
  }
  .section-title{gap:8px}
  .section .subnav{
    grid-area:subnav;
    margin:0;
    min-width:0;
    align-items:center;
  }
  .section>.panel{
    grid-area:panel;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .group+.group{margin-top:17px;padding-top:16px}
  .group-head{margin-bottom:9px}

  /* Common entry becomes a single horizontal shortcut bar. */
  #quick{
    grid-template-columns:max-content minmax(0,1fr);
    grid-template-areas:"heading panel";
    column-gap:16px;
    row-gap:0;
    padding:10px 12px;
    min-height:72px;
  }
  #quick .section-title .bar{height:16px}
  #quick .grid{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:8px;
  }
  #quick .card{min-height:50px}
}

/* Tablet/mobile: keep search in two rows and show every common shortcut without horizontal scrolling. */
@media (max-width:900px){
  .search-wrap{
    max-width:none;
    padding:13px 14px 15px;
  }
  .engines{margin-bottom:8px}
  .search-form{width:100%;max-width:none;min-width:0}

  .layout,.sidebar,main,.section,.section>.panel{min-width:0;max-width:100%}
  .sidebar{width:100%}
  .section{
    margin-bottom:14px;
    padding:11px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:13px;
    box-shadow:var(--shadow);
    overflow:visible;
  }
  .section-head{margin:0 0 8px}
  .section>.subnav{margin:0 0 10px;max-width:100%}
  .section>.panel{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .group+.group{margin-top:16px;padding-top:15px}

  #quick{padding:10px 11px}
  #quick>.panel{width:100%;overflow:visible}
  #quick .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,180px));
    justify-content:start;
    width:100%;
    max-width:100%;
    min-width:0;
    gap:8px;
    overflow:visible;
    padding:1px 1px 3px;
  }
  #quick .card{
    flex:none;
    width:100%;
    min-width:0;
    max-width:none;
  }
}

@media (max-width:580px){
  .search-wrap{padding:11px 10px 13px}
  .section{padding:10px}
  .section-head{margin-bottom:7px}
  #quick .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:340px){
  #quick .grid{grid-template-columns:minmax(0,1fr)}
}