/* Phone layouts, last priority (Pat: this is computer work). Stacked cards instead of clipped tables, and 44px targets. */
@media (max-width:699px){
  .brand{min-width:44px;min-height:44px;justify-content:center;padding:0}
  .seg button{min-height:44px;padding:0 16px}
  .tabs button{min-height:44px}
  .pcard .pname,.tbl.resp .pname,.list-table .pname{display:inline-block;padding:11px 0;min-height:44px;line-height:1.3}
  .pcard-head{align-items:flex-start}
  .pcard-head .pname{padding:2px 0}
  .btn.quiet.sm,.btn.sm{min-height:44px}
  .linkbtn{min-height:44px;display:inline-flex;align-items:center}
  summary{min-height:44px;display:flex;align-items:center}
  .evidence summary,.act-det summary{min-height:44px}
  .check{min-height:44px}
  input[type=radio]{width:22px;height:22px}

  /* the saved list: a card per plan, never a clipped row */
  .tbl.resp .list-table tr{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;padding:10px 12px}
  .tbl.resp .list-table .c-cur{grid-column:1;grid-row:1 / span 5;padding:0;display:flex;align-items:flex-start;justify-content:center}
  .tbl.resp .list-table .c-cur::before{display:none}
  .tbl.resp .list-table th,.tbl.resp .list-table td:not(.c-cur){grid-column:2;padding:1px 0}
  .tbl.resp .list-table .row-acts{padding-top:4px}
  /* dialogs with a table in them (export review, lineup details) */
  .dialog .tbl.resp td::before{display:inline;color:var(--muted)}
  .dialog-foot{flex-wrap:wrap}
  .dialog-foot .btn{flex:1 1 auto}
  .steps{gap:4px 12px;font-size:13px}

  /* the document tracker and the assistant */
  .upd-drop{flex-direction:column;align-items:stretch;text-align:left}
  .upd-drop .dz-btns{justify-content:flex-start}
  .asst-log{max-height:60vh}
  .trk-head{align-items:stretch}
  .act-btns .btn{flex:1 1 auto}
  .trk-acts .btn{min-height:44px}
  .timeline li{flex-basis:100%;border-right:0;border-bottom:1px solid var(--line)}
  .timeline li:last-child{border-bottom:0}
}

@media (max-width:699px){
  /* the top bar has too many links for one row: brand and icons on the first row, the links on their own row */
  :root{--header-h:100px}
  .app-header{flex-wrap:wrap;height:var(--header-h);align-content:flex-start;row-gap:0;padding:0 8px}
  .brand{order:1}
  .header-end{order:2;margin-left:auto}
  .nav{order:3;flex:1 0 100%;height:48px;margin:0;overflow-x:auto;gap:0}
  .nav a{padding:0 12px;min-height:48px}
  .hbtn{min-width:44px;justify-content:center}
  .crumb{min-height:44px}
  .secbtn{min-height:44px}
  .chip{padding-right:0}
  .chip button{width:44px;height:44px;margin:-8px 0}
  .trk-switch select,.ctx-controls select{min-height:44px}
  .app-header{box-sizing:border-box}
}

@media (max-width:699px){
  .dialog-head .btn{flex:none;min-width:44px}
  .srclink{min-height:44px;align-items:center}
  .bsrc a{min-height:44px}
}

@media (max-width:699px){
  .timeline a{display:inline-block;padding:10px 0;min-height:44px}
  .ph-name{display:inline-block;padding:8px 0;min-height:44px}
}

@media (max-width:699px){
  #ctx-years{display:none}
  #saved-searches-btn .btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  #saved-searches-btn{padding:0;min-width:44px}
}

@media (max-width:699px){
  .why-d summary{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin-left:-10px}
}