/* ui-chrome.css — shared chrome shared by every surface.
 *
 * WHY THIS FILE EXISTS. index.html is the only surface that loaded a
 * stylesheet; sitrep.html, audit.html and commissioning.html are inline-only.
 * So any control that appears on more than one of them was copied, and the
 * copies drifted. Aaron put it plainly looking at four screenshots: the back
 * buttons "are different variations". They were four:
 *
 *   sitrep drawing   filled #F5F5F7, radius 8, 13px/700, inline-styled
 *   sitrep elsewhere no border, no radius, 14px, no padding
 *   audit            transparent, 1px border, radius 8, 13px/600
 *   index dashboards transparent, 1px white border, radius 6, 12px/600
 *
 * Same control, four shapes, because there was nowhere to put it once. This is
 * the same root cause as markup-weight.js and the nine copies of the
 * non-production banner script — see #422 and #425.
 *
 * Add to this file only chrome that genuinely appears on multiple surfaces.
 * It is not a dumping ground for shared-looking CSS.
 */

/* ── Back button ──────────────────────────────────────────────────────────
 * One shape everywhere. Light surfaces get the default; headers on the dark
 * navy use the --on-dark modifier, because the alternative — a light button
 * on a dark bar — is not "consistent", it is unreadable. Consistency here
 * means the same size, radius, weight and arrow, not the same colour.
 */
.ui-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#F4F4F6;
  border:1px solid #E7E7EC;
  border-radius:8px;
  padding:7px 12px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  color:#4A4A55;
  cursor:pointer;
  flex:none;
  -webkit-appearance:none;
  appearance:none;
}
.ui-back:active{ transform:scale(.97); }

.ui-back--on-dark{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.25);
  color:#FFFFFF;
}

/* The field apps run on phones where the header is tight. Shrink the padding
 * rather than the type — a smaller label is harder to hit and harder to read,
 * and the hit target is what matters on a jobsite. */
@media (max-width:480px){
  .ui-back{ padding:6px 10px; }
}