/* The crew's screens: My jobs, the job card, the report and the inspection. Phone and the shared
   tablet only (DESIGN.md "Worker screens"): big type, 44px targets, one 58px button pinned to the
   bottom. Never a tenant's name or number. */

body.is-crew { background: var(--linen); }
body.is-crew .site-header { padding-bottom: 0; }
body.is-crew .who-name { display: inline; color: var(--sand); }
.crew { padding-bottom: 110px; } /* room for the pinned button */
.crew-strip {
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--paper); border: 1px dashed var(--gold); border-radius: var(--radius);
  font-size: 0.95rem;
}
.crew-head { margin-bottom: 8px; }
.crew-head h1 { margin: 0; font-size: 2rem; }

.day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 24px 0 10px; padding-bottom: 8px;
  border-bottom: 1.5px solid var(--gold);
  font-size: 1.35rem;
}
.day-head .subtle { font-family: var(--font-body); font-size: 0.95rem; }
.day-head.is-late { color: var(--alert); border-bottom-color: var(--alert); }

.job-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.job-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  min-height: 84px; padding: 14px 16px 14px 20px;
  background: var(--paper);
  border: 1px solid var(--hair); border-left: 6px solid var(--navy); border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
}
.job-row:hover, .job-row:active { border-color: var(--navy); }
.job-row .job-when { grid-column: 1 / -1; font-size: 0.95rem; font-weight: 700; color: var(--muted); }
.job-row .job-what { font-size: 1.15rem; }
.job-row .job-what b { font: 700 1.4rem var(--font-display); color: var(--navy); margin-right: 4px; }
.job-row .status { justify-self: end; font-size: 0.78rem; }
.job-row .unsent { grid-column: 1 / -1; }
/* The job's kind on its left edge: navy for cleans and laundry, gold for repairs and callouts, sand for an inspection. */
.job--repair, .job--callout { border-left-color: var(--gold); }
.job--inspection { border-left-color: var(--sand); }
.crew-empty { padding: 28px; text-align: center; }

/* The job card. */
.job-hero {
  margin: 0 0 14px; padding: 18px 20px;
  background: var(--navy); color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.job-hero .eyebrow { color: var(--sand); }
.job-hero h1 { margin: 0 0 4px; color: var(--paper); font-size: 2.2rem; padding: 0; border: 0; }
.job-hero-when { margin: 0 0 10px; font-size: 1.15rem; color: var(--paper); }
.job-hero .status { background: rgba(255, 255, 255, 0.14); color: var(--paper); }
.knock {
  margin: 0 0 14px; padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--alert-soft); border-left: 6px solid var(--alert);
  color: var(--alert); font-size: 1.15rem; font-weight: 700;
}
.knock.is-empty { background: var(--ok-soft); border-left-color: var(--ok); color: var(--ok); }
.crew .facts { font-size: 1.08rem; }
.crew .facts div { grid-template-columns: 120px 1fr; }
.crew .flash, .crew .unsent, .crew .note { font-size: 1.02rem; }
.unsent { color: var(--alert); font-weight: 700; font-size: 0.92rem; }
.name-pick { margin: 8px 0 16px; padding: 16px; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius); }
.name-pick[hidden] { display: none; }
.name-pick .btn { min-width: 140px; min-height: 58px; font-size: 1.1rem; }
.report { margin-bottom: 12px; }
.crew-send { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hair); }
.crew textarea { font-size: 1.05rem; }
.crew .photo-btn { min-height: 52px; }

.primary-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(247, 243, 234, 0.96); backdrop-filter: blur(6px);
  border-top: 1px solid var(--hair);
}
.primary-btn { width: 100%; max-width: 880px; display: flex; margin: 0 auto; min-height: 58px; font-size: 1.2rem; }

/* The shared tablet: two columns of jobs; the card and report in a comfortable measure. */
@media (min-width: 700px) {
  .job-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-head h1 { font-size: 2.4rem; }
}