/* site-staff.css — Crew Portal (per-site worker login, answers, tool ideas)
   2026-09-16. Design-token only (P64: no inline CSS, no raw hex): every value comes
   from tokens.css / clajama-blocks-vars.css, so the portal follows the platform theme
   and a client-brand override can restyle it without touching this file. */

.crew-page {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--spacing-lg, 32px) var(--spacing-md, 20px) 72px;
}

.crew-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 12px);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--spacing-md, 20px);
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  margin-bottom: var(--spacing-lg, 32px);
}

.crew-head h1 {
  margin: 0 0 4px;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.crew-head p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.crew-who {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.crew-who strong {
  color: var(--color-text-primary);
}

.crew-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  padding: var(--spacing-md, 20px);
  margin-bottom: var(--spacing-md, 20px);
}

.crew-card > h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--color-text-primary);
}

.crew-card > .crew-hint {
  margin: 0 0 var(--spacing-sm, 12px);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.crew-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md, 20px);
}

@media (min-width: 900px) {
  .crew-grid.two {
    grid-template-columns: 1fr 1fr;
  }
}

.crew-field {
  display: block;
  margin-bottom: var(--spacing-sm, 12px);
}

.crew-field span {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.crew-field input,
.crew-field textarea,
.crew-field select {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-raised, var(--color-base));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  padding: 10px 12px;
  color: var(--color-text-primary);
  font: inherit;
}

.crew-field input:focus,
.crew-field textarea:focus,
.crew-field select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.crew-field textarea {
  min-height: 84px;
  resize: vertical;
}

.crew-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent);
  color: var(--color-text-on-accent, #0A0A0F);
  border: 0;
  border-radius: var(--radius-md, 10px);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.crew-btn.ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.crew-btn.tiny {
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 500;
}

.crew-btn:hover {
  filter: brightness(1.08);
}

.crew-note {
  border-radius: var(--radius-md, 10px);
  padding: 10px 12px;
  font-size: 0.85rem;
  margin-bottom: var(--spacing-sm, 12px);
  border: 1px solid var(--color-border);
  background: var(--color-raised, var(--color-surface));
  color: var(--color-text-primary);
}

.crew-note.good {
  border-color: var(--color-status-green, #2ECC8A);
  color: var(--color-status-green, #2ECC8A);
}

.crew-note.warn {
  border-color: var(--color-status-warn, #F0B429);
  color: var(--color-status-warn, #F0B429);
}

.crew-note.bad {
  border-color: var(--color-status-red, #FF5C5C);
  color: var(--color-status-red, #FF5C5C);
}

.crew-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crew-list > li {
  border-top: 1px solid var(--color-border-subtle, var(--color-border));
  padding: var(--spacing-sm, 12px) 0;
}

.crew-list > li:first-child {
  border-top: 0;
}

.crew-q {
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.crew-a {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.crew-meta {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.crew-chip {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.crew-chip.new { color: var(--color-text-secondary); }
.crew-chip.reviewing { color: var(--color-status-warn, #F0B429); border-color: var(--color-status-warn, #F0B429); }
.crew-chip.planned { color: var(--color-accent); border-color: var(--color-accent); }
.crew-chip.building { color: var(--color-accent); border-color: var(--color-accent); }
.crew-chip.built { color: var(--color-status-green, #2ECC8A); border-color: var(--color-status-green, #2ECC8A); }
.crew-chip.declined { color: var(--color-status-red, #FF5C5C); border-color: var(--color-status-red, #FF5C5C); }
.crew-chip.open { color: var(--color-status-warn, #F0B429); border-color: var(--color-status-warn, #F0B429); }

.crew-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.crew-inline .crew-field {
  flex: 1 1 240px;
  margin-bottom: 0;
}

.crew-empty {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0;
}

.crew-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 var(--spacing-md, 20px);
  padding: 0;
  list-style: none;
}

.crew-stats li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.crew-stats strong {
  display: block;
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.crew-signout {
  display: inline-block;
  margin-top: 6px;
}

/* ── operator tables (workforce section + admin aggregate) ───────────────── */

.crew-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.crew-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.crew-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  color: var(--color-text-primary);
}

.crew-table tr:last-child td {
  border-bottom: 0;
}

.crew-cell-warn {
  color: var(--color-status-warn, #F0B429);
  font-weight: 600;
}

.crew-table-wrap {
  overflow-x: auto;
}

/* ── operator tables (workforce section + admin aggregate) ───────────────── */

.crew-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.crew-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.crew-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  color: var(--color-text-primary);
}

.crew-table tr:last-child td {
  border-bottom: 0;
}

.crew-cell-warn {
  color: var(--color-status-warn, #F0B429);
  font-weight: 600;
}

.crew-table-wrap {
  overflow-x: auto;
}

/* ══ THE CREW APP (mobile-first rewrite, 2026-09-16) ══════════════════════════════════
   Owner: "Most of the world is on mobile. If a new hire had to use the mikes skins app you
   made theyd need to be trained to know what they are even looking at."

   Rules encoded here:
     * 16px minimum body text, 48px minimum tap target (Apple/Google guidance), 1.5 line-height
     * navigation FIXED to the bottom, inside thumb reach, with the current section highlighted
     * one primary action per screen, full width, at the end of the form
     * plain sentences over labels; no icon-only controls; visible focus for keyboards
   Everything is token-derived (P64: no inline CSS, no raw hex). */

body.site-body {
  background: var(--color-base);
  color: var(--color-text-primary);
  margin: 0;
  font-family: var(--font-body, var(--font-family, var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif)));
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* the app says what it is, at the top, always */
.site-bar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 16px 10px;
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  position: sticky;
  top: 0;
  background: var(--color-base);
  z-index: 5;
}

.site-bar-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-bar-what {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.site-main {
  display: block;
  padding: 0 0 12px;
}

.app-wrap {
  padding: 16px 16px 24px;
  max-width: 560px;
  margin: 0 auto;
}

/* the bottom bar: every section, one thumb-tap away */
.app-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}

.app-tab {
  flex: 1 1 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 6px 2px;
}

.app-tab span { font-size: 1.15rem; line-height: 1; }

.app-tab-on {
  color: var(--color-accent);
  box-shadow: inset 0 2px 0 0 var(--color-accent);
}

body.site-body:not(.site-body-plain) .site-main { padding-bottom: 76px; }

/* headings and text a 16px-minimum reader can scan */
.app-h1 {
  margin: 4px 0 14px;
  font-size: clamp(1.5rem, 6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* The CLIENT's display face (owner 2026-09-21: the crew app must wear the client's design).
     Chain matches what the BUILT SITE does — measured on the live site 2026-09-21: h1/h2 come
     out "Bebas Neue" (the project's font_family) and body copy "DM Sans" (font_body). So headings
     read --font-family FIRST; the app would otherwise disagree with the site it belongs to.
     Falls through to the platform stack, so an unbranded project keeps exactly the type it had. */
  font-family: var(--font-family, var(--font-heading, var(--font-body, var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif))));
}

.app-h2 {
  margin: 22px 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-family, var(--font-heading, var(--font-body, var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif))));
}

.app-lead { margin: 0 0 16px; font-size: 1rem; color: var(--color-text-secondary); }
.app-note-quiet { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.55; }
.app-note-quiet a, .app-a a { color: var(--color-accent); }
.app-q { margin: 0 0 8px; font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.app-a { margin: 0 0 10px; font-size: 1rem; line-height: 1.6; color: var(--color-text-secondary); white-space: pre-wrap; }
.app-empty { color: var(--color-text-secondary); font-size: 1rem; line-height: 1.6; }

.app-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 16px;
}

.app-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 14px 0 6px;
}
.app-label:first-child { margin-top: 0; }

.app-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px;              /* never below 16px: iOS zooms the page otherwise */
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-raised, var(--color-base));
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.app-input:focus-visible, .app-btn:focus-visible, .app-tile:focus-visible, .app-tab:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
textarea.app-input { min-height: 96px; resize: vertical; }

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-raised, var(--color-surface));
  color: var(--color-text-primary);
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}
.app-btn:active { transform: scale(0.985); }
.app-btn-primary { background: var(--color-accent); color: var(--color-text-on-accent, #0A0A0F); border-color: var(--color-accent); }
.app-btn-primary:hover { filter: brightness(1.07); }
.app-btn-quiet { background: transparent; color: var(--color-text-secondary); }
.app-btn-wide { width: 100%; margin-top: 10px; }
.app-card .app-btn { width: 100%; margin-top: 16px; }

.app-row { display: flex; gap: 8px; align-items: stretch; }
.app-row .app-input { flex: 1; }

.app-search { display: flex; gap: 8px; margin-bottom: 14px; }
.app-search .app-input { flex: 1; }
.app-search .app-btn { flex: 0 0 auto; }

/* the start screen's actions: full-width rows, icon + sentence */
.app-actions { display: grid; gap: 10px; margin: 16px 0; }
.app-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease;
}
.app-tile:active { transform: scale(0.99); border-color: var(--color-accent); }
.app-tile-ico { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.app-tile-txt { display: block; }
.app-tile-txt strong { display: block; font-size: 1.08rem; color: var(--color-text-primary); }
.app-tile-txt em { display: block; font-style: normal; font-size: 1rem; color: var(--color-text-secondary); margin-top: 3px; }
.app-tile-mgr { border-style: dashed; }

.app-list { list-style: none; margin: 0; padding: 0; }
.app-list > li { padding: 12px 0; border-bottom: 1px solid var(--color-border-subtle, var(--color-border)); font-size: 1rem; }
.app-list > li:last-child { border-bottom: 0; }
.app-list-cards > li { border: 0; padding: 0; }
.app-list-cards > li.app-card { margin-bottom: 12px; }
.app-row-link { display: block; min-height: 44px; padding: 6px 0; color: var(--color-text-primary); text-decoration: none; font-weight: 600; }

.app-pill {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.app-pill-open { color: var(--color-status-warn, #F0B429); border-color: var(--color-status-warn, #F0B429); }
.app-pill-built { color: var(--color-status-green, #2ECC8A); border-color: var(--color-status-green, #2ECC8A); }
.app-pill-planned, .app-pill-building { color: var(--color-accent); border-color: var(--color-accent); }
.app-pill-declined { color: var(--color-status-red, #FF5C5C); border-color: var(--color-status-red, #FF5C5C); }

.app-steps { margin: 0 0 16px; padding-left: 22px; font-size: 1rem; line-height: 1.6; color: var(--color-text-secondary); }
.app-steps li { margin-bottom: 10px; }

.app-reasons { border: 0; margin: 8px 0 0; padding: 0; }
.app-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 1rem;
}
.app-radio input { width: 22px; height: 22px; flex: 0 0 auto; }

.app-photo {
  margin: 0 0 10px;
  padding: 28px 12px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
}

.app-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.app-chips li { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; color: var(--color-text-secondary); }
.app-chips strong { color: var(--color-text-primary); }

.app-note { border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 0.95rem; border: 1px solid var(--color-border); }
.app-note.good { border-color: var(--color-status-green, #2ECC8A); color: var(--color-status-green, #2ECC8A); }
.app-note.warn { border-color: var(--color-status-warn, #F0B429); color: var(--color-status-warn, #F0B429); }
.app-note.bad { border-color: var(--color-status-red, #FF5C5C); color: var(--color-status-red, #FF5C5C); }

.app-store { margin-bottom: 16px; }
.app-hello { padding-top: 8px; }
.app-footline { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.55; padding: 0 2px 8px; }

.site-foot { text-align: center; padding: 10px 16px 22px; font-size: 0.8rem; color: var(--color-text-muted); }
.site-foot p { margin: 0; }

/* an inline link inside a sentence is still something a thumb has to hit (measured 2026-09-16:
   "Show me how @16px" failed the tap-target rule on a real phone) */
.app-note-quiet a, .app-a a, .app-card a, .app-steps a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 2px;
  font-weight: 700;
}

/* the tab bar carries the current section for EVERY screen, including ones reachable only
   from Start (racks) — six short labels fit a 320px screen with the labels above */
.app-tab { font-size: 0.78rem; }

/* ══ visual hierarchy pass (vision verdict @390px, 2026-09-16: score 62 — "no hero, no focal
   point, hierarchy is flat", "one long uniform stack of dark cards", "emoji in place of real
   icons", "surfaces not obviously token-derived"). Fixes: a real hero, section labels as a
   rhythm, an icon set in the accent, and surfaces that visibly step (base → band → card). ══ */

.app-hero {
  padding: 6px 0 18px;
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  margin-bottom: 16px;
}

.app-hero-h1 {
  margin: 0 0 6px;
  font-size: clamp(1.8rem, 8vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--color-text-primary);
}

.app-hero-sub {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* a section label is the page's rhythm: every group announces itself */
.app-section {
  margin: 22px 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.app-band {
  background: var(--color-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
}

.app-ic {
  flex: 0 0 auto;
  color: var(--color-accent);
}

.app-tile-ico {
  color: var(--color-accent);
  background: var(--color-accent-tint, transparent);
  border-radius: 12px;
  padding: 9px;
  box-sizing: content-box;
}

.app-tab-ico {
  color: inherit;
}

.app-tile {
  background: var(--color-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.03) inset;
}

.app-tile strong { font-size: 1.12rem; }
.app-tile em { color: var(--color-text-secondary); }

.app-card {
  background: var(--color-raised, var(--color-surface));
  border: 1px solid var(--color-border);
}

/* no stores on the list yet: a quiet line, never a dropdown that cannot be used
   (vision judge: "a dead interactive control in the primary task flow") */
.app-store-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--color-text-primary);      /* vision judge flagged secondary-on-base contrast */
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}