/* Clearer tabs with a soft shimmer, inbox button beside the tabs, and bigger touch targets on phones and tablets. */
@media (min-width:701px){nav.tabs{position:relative}}
nav.tabs{isolation:isolate}
nav.tabs button{font-size:14px;font-weight:700;color:var(--ink);opacity:.72;border-radius:8px 8px 0 0;transition:opacity .2s,background .2s,color .2s}
nav.tabs button:hover{opacity:1;background:color-mix(in srgb,var(--accent) 8%,transparent)}
nav.tabs button[aria-selected="true"]{opacity:1;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:0 0 14px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
/* The shimmer: a band of light that sweeps across the tabs from left to right. */
nav.tabs::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:linear-gradient(100deg,transparent 0%,transparent 40%,color-mix(in srgb,var(--accent) 10%,transparent) 47%,rgba(255,255,255,.28) 50%,color-mix(in srgb,var(--accent) 10%,transparent) 53%,transparent 60%,transparent 100%);
  background-size:250% 100%;background-repeat:no-repeat;animation:qmShimmer 16s ease-in-out infinite}
@keyframes qmShimmer{0%{background-position:120% 0}45%,100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){nav.tabs::after{animation:none;display:none}}

/* PO inbox button sits at the right, next to the tabs. */
#inboxBtn{order:99;margin:0 0 8px 6px;flex:none}
header.top .wrap{align-items:flex-end}
header.top .brandmark{align-self:center}
@media (min-width:701px){header.top .brandmark img{width:34px;height:34px}}

@media (max-width:700px){
  /* Phones keep their current layout: inbox stays beside the logo, tabs stay at the bottom. */
  #inboxBtn{order:0;margin:0 0 8px 0}
  header.top .wrap{align-items:center}
  nav.tabs button{font-size:11px;opacity:.8}
  nav.tabs button[aria-selected="true"]{box-shadow:0 -6px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
  nav.tabs::after{border-radius:0}
}
/* Fingers need room: bigger buttons and fields on touch screens (phones and tablets). */
@media (pointer:coarse) and (min-width:701px){
  .btn{min-height:44px}
  input,select,textarea{font-size:16px}
  #jobRoom textarea{min-height:90px}
}