/* E-78 office jobs & crews screen. office.css carries the look; this file
   adds only the list rows, the pick controls and the history list - big
   targets so a GF on a phone can use it with a thumb. tokens.css rule 1: no
   per-screen colour (every value below is a token). */
a.nav-back, a.nav-home {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
}

.nav-back-button { width: 100%; }

.browse-tabs { display: flex; gap: var(--tap-gap); flex-wrap: wrap; }
.browse-tab { flex: 1 1 10rem; min-height: var(--tap-primary); }
.browse-tab[aria-pressed="true"] {
  font-weight: var(--fw-head);
  border-width: var(--bw-focus);
  border-color: var(--c-accent);
}

.browse-list { list-style: none; margin: 0; padding: 0; }
.browse-list li { margin: 0 0 var(--tap-gap); }
.browse-row {
  display: block;
  width: 100%;
  min-height: var(--tap-primary);
  margin: 0;
  padding: 12px var(--sp-2);
  text-align: left;
}
.browse-row-title {
  display: block;
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
}
.browse-row-line {
  display: block;
  font-size: var(--fs-min);
  font-weight: var(--fw-body);
  color: var(--c-text-2);
}

.browse-select {
  width: 100%;
  min-height: var(--tap);
  font-size: var(--fs-label);
  padding: 8px;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}

.browse-checks {
  border: var(--bw) solid var(--c-rule);
  border-radius: var(--radius);
  margin: var(--sp-2) 0 0;
  padding: var(--sp-1);
}
.browse-checks legend { font-size: var(--fs-label); font-weight: var(--fw-label); }
.browse-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  margin: 0;
  font-weight: var(--fw-body);
}
.browse-check input[type="checkbox"] {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
}

.browse-field input { font-size: var(--fs-label); }

.browse-history { padding-left: var(--sp-2); }
.browse-history li { margin: 0 0 var(--sp-1); }

.browse-done {
  border: var(--bw) solid var(--c-rule);
  border-radius: var(--radius);
  padding: 12px;
  font-weight: var(--fw-label);
}

/* E-78 (JD 01:25 "a lot like our profit app"): show / find / sort row */
.browse-find { font-size: var(--fs-label); }
.browse-sort {
  display: flex; flex-wrap: wrap; gap: var(--tap-gap); align-items: center;
  margin: var(--sp-1) 0;
}
.browse-chip { margin-top: 0; }
.browse-chip[aria-pressed="true"] {
  font-weight: var(--fw-head);
  border-width: var(--bw-focus);
  border-color: var(--c-accent);
}