/* Keep English worksheet controls readable across desktop, tablet and phone widths. */
@media screen{
  .toolbar{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .toolbar>.actions,
  .toolbar .tabs,
  .toolbar .print-selection,
  .toolbar .print-controls>#new,
  .toolbar .print-controls>.actions{
    flex:0 0 auto;
  }
  .toolbar>.print-controls{
    flex:1 1 520px;
    min-width:0;
    align-content:flex-start;
    align-items:center;
    justify-content:flex-end;
  }
  .toolbar .tabs button,
  .toolbar .print-controls>#new,
  .toolbar .actions button,
  .toolbar .actions label{
    white-space:nowrap;
  }
  .toolbar .tabs button,
  .toolbar .print-controls>#new,
  .toolbar .actions>#print,
  .toolbar .actions>#save-pdf{
    min-height:42px;
    height:auto;
  }

  /* Grade-topic pages add the PDF note and print selection at run time. */
  .tools{
    display:grid;
    grid-template-columns:minmax(0,1fr) max-content;
    grid-template-areas:
      "preview actions"
      "note selection";
    align-items:center;
    justify-content:stretch;
    gap:8px 12px;
  }
  .tools>div:first-of-type{
    grid-area:preview;
    justify-self:start;
  }
  .tools>div:nth-of-type(2){
    grid-area:actions;
    justify-self:end;
    max-width:100%;
  }
  .tools>div{
    align-items:center;
    flex-wrap:nowrap;
  }
  .tools>div:first-of-type,
  .tools>div:nth-of-type(2),
  .tools>div>button,
  .tools>div>label{
    flex:0 0 auto;
  }
  .tools button,
  .tools>div>label{
    white-space:nowrap;
  }
  .tools>div>button:not([aria-label^="Increase"]):not([aria-label^="Decrease"]){
    min-height:42px;
    height:auto;
  }
  .tools>div:nth-of-type(2)>label{
    margin:0!important;
    font-weight:400;
  }
  .tools>.pdf-save-note{
    grid-area:note;
    align-self:center;
    min-width:0;
    margin:0!important;
  }
  .tools>fieldset{
    grid-area:selection;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;
    min-width:max-content;
    margin:0;
    padding:5px 9px 7px;
    border:1px solid #cfd6d1;
    border-radius:8px;
    font-size:12px;
    white-space:nowrap;
  }
  .tools>fieldset legend{
    padding:0 4px;
    color:#526963;
    font-size:10px;
  }
  .tools>fieldset label{
    display:flex;
    align-items:center;
    gap:4px;
    margin:0!important;
    font-size:12px;
    font-weight:400;
    cursor:pointer;
  }
  .tools>fieldset input{
    width:16px;
    height:16px;
    margin:0;
    accent-color:#087b78;
  }
}

/* The two-column page is narrow just before the sidebar stacks. */
@media screen and (min-width:851px) and (max-width:1050px){
  .tools{
    grid-template-columns:1fr;
    grid-template-areas:
      "preview"
      "actions"
      "selection"
      "note";
  }
  .tools>div:nth-of-type(2),
  .tools>fieldset{
    justify-self:start;
  }
}

@media screen and (min-width:761px) and (max-width:850px){
  .toolbar>.print-controls{
    flex-basis:100%;
    justify-content:flex-start;
  }
}

@media screen and (max-width:700px){
  .tools{
    grid-template-columns:1fr;
    grid-template-areas:
      "preview"
      "actions"
      "selection"
      "note";
  }
  .tools>div:nth-of-type(2),
  .tools>fieldset{
    justify-self:start;
  }
  .tools>div:nth-of-type(2){
    flex-wrap:wrap;
  }
}

@media screen and (max-width:760px){
  .toolbar>.actions,
  .toolbar>.print-controls{
    flex-basis:100%;
  }
  .toolbar>.print-controls{
    justify-content:flex-start;
  }
  .toolbar .print-controls>.actions{
    flex-wrap:wrap;
  }
}

@media print{
  .tools>.pdf-save-note,
  .tools>fieldset{
    display:none!important;
  }
}