/* Smaller screens (Handover 2, section 11; 11c for the pages): how each
   page outside the Simulator reflows on a tablet and a phone. Loaded on
   every page after the page's own stylesheets, so these rules win at the
   same specificity. The header's menu and the sheets are the kit's
   (static/kit.css). The Simulator's own regions are not styled here. */

/* -- every page: tap targets on a tablet and a phone ------------------------------------------ */
@media (max-width: 1199px){
  main:not(.sim-main) :is(.btn-primary,.cls-btn-primary),.pg .btn-primary,.hd-row .hd-signin{min-height:40px}
  body:not(:has(main.sim-main)) .modal :is(.btn-primary,.cls-btn-primary){min-height:40px}
}
/* Modals sit outside main, so their buttons are named here. */
@media (max-width: 599px){
  body:not(:has(main.sim-main)) .modal :is(.btn-primary,.cls-btn-primary){min-height:44px}
}
@media (max-width: 767px){
  main:not(.sim-main) .btn,main:not(.sim-main) .cls-btn,.pg .btn{min-height:40px}
  main:not(.sim-main) :is(.btn-primary,.cls-btn-primary),.pg .btn-primary{min-height:44px}
  main:not(.sim-main) .copy-btn{min-height:36px}
  /* A new key's Copy and the Dashboard's Share are the row's one action. */
  main:not(.sim-main) .copy-float{min-height:40px;min-width:4rem}
  main:not(.sim-main) .copy-float + .code{min-height:calc(40px + 1.1rem)}
  main:not(.sim-main) .team-share-btn{min-height:40px;padding:0.3rem 0.8rem}
  /* Fields at 16 px, so Safari on a phone does not zoom in on a tap and
     leave the page scrolling sideways. The Simulator's own fields are its
     agent's (11b); its modals get this. */
  body:not(:has(main.sim-main)) :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=hidden],[type=button],[type=submit]),select,textarea),
  .modal :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=hidden],[type=button],[type=submit]),select,textarea){font-size:16px !important}
  main:not(.sim-main) .page-head{padding-top:1.4rem;margin-bottom:1.2rem}
  main:not(.sim-main) .page-lede{font-size:1rem}
  .ft{margin-top:2rem}
  .ft-links{gap:0.2rem 1rem}
  .ft-links a{display:inline-flex;align-items:center;min-height:36px}
}

/* -- Dashboard (11c) --------------------------------------------------------------------- */
@media (max-width: 767px){
  #team-dash .page-head{align-items:center;row-gap:0.7rem}
  #team-dash .page-head > .page-head-text{flex-basis:100%}
  #team-dash .page-head > .spacer{display:none}
  #team-dash .page-head > .btn-primary{flex:1 1 auto}
  #team-dash .team-sec-head{row-gap:0.5rem}
  #team-dash .team-sec-head .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  #team-dash .team-sec-head .seg button{min-height:36px}
  /* Pick up where you left off: Open fills the row (11c). */
  #team-dash [data-continue-body] > .row > .btn{flex:1 1 auto}
  #team-dash [data-bench-body] .btn{flex:1 1 auto}
}
@media (max-width: 420px){
  /* The meters two by two, as in 11c. */
  .team-meters{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem}
  .team-meter{padding:0.55rem 0.65rem}
  .team-meter-note{font-size:0.6875rem}
}

/* -- Benchmarks (11c) -------------------------------------------------------------------- */
.bm-tabs-select,.bm-strat-select{display:none}
@media (max-width: 767px){
  /* The tabs and the list of strategies become selects. */
  .bm-tabs{display:none}
  .bm-tabs-select{display:block;width:100%;min-height:44px;font-size:1rem}
  .bm-mine-left{display:none}
  .bm-strat-select{display:block;width:100%;min-height:44px;font-size:1rem}
  .bm-mine{gap:0.7rem}
  .bm-head .btn-primary{flex:1 1 auto}
  .bm-lib-head .btn{flex:1 1 auto}
  .bm-vers{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .bm-ver-chip{min-height:36px}
  .bm-run-foot .bm-run-bigger{flex:1 1 100%;background:var(--card)}
}
@media (max-width: 620px){
  /* The numbers table keeps its columns and scrolls inside its card. */
  .bm-table{overflow-x:auto;overscroll-behavior-x:contain}
  .bm-trow{grid-template-columns:minmax(8rem,1.4fr) 5.5rem 7.5rem 7.5rem;min-width:30rem}
  .bm-table-note{min-width:0;max-width:calc(100vw - 4rem)}
  .bm-step-btn{min-width:40px;min-height:40px}
}

/* -- Connect (11c): two tiles a row; config blocks scroll inside themselves ------------------- */
@media (max-width: 767px){
  .team-snip pre{white-space:pre;word-break:normal;overflow-x:auto;overscroll-behavior-x:contain}
  .team-client{min-height:44px}
}

/* -- Keys, Team, Account ----------------------------------------------------------------- */
@media (max-width: 767px){
  .team-member .seg button,.team-share-row .seg button{min-height:36px}
  .team-acct-nav a{display:inline-flex;align-items:center;min-height:36px}
}

/* -- Classes (11c): the assignment editor is read-only on a phone ------------------------- */
@media (max-width: 1199px){
  /* On a tablet the builder's three-up rows fit as many as have room. */
  .cls-builder .cls-grid3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
}
.cls-bigger{display:none}
@media (max-width: 767px){
  .cls-bigger{display:flex;margin-bottom:0.8rem}
  .is-phone-readonly{opacity:0.92}
}