/* Kaiwhai Office — breadcrumbs (19 Sep 2026): the coloured name block, the
   Activity page, and the follow-up sheet's status pick-list. A file of its
   own so styles.css stays exactly as it was; every rule here is new. */

/* ---------- the name block: one colour per person ---------- */
.who-chip {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
}
.who-0 { background: #5b4636; }  /* Francois: bark */
.who-1 { background: #b5683e; }  /* Carmyn: terracotta */
.who-2 { background: #66704f; }  /* Rohan: sage */
.who-3 { background: #4f6d7a; }  /* spare colours for new accounts */
.who-4 { background: #7a5478; }
.who-5 { background: #9a7b2f; }
.who-6 { background: #3f7568; }
.who-7 { background: #a2535c; }
.who-none { background: var(--sand-deep); color: var(--muted); }

/* ---------- the Activity page and the History popup ---------- */
body[data-view="activity"] main { max-width: 980px; }
.crumb-list { background: #fff; box-shadow: 0 0 0 1px var(--line); border-radius: 12px; padding: 0.4rem 1.1rem 1rem; }
.crumb-day {
  margin: 1.1rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.crumb {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
}
.crumb-day + .crumb, .fu-history .crumb:first-child { border-top: none; }
.crumb-when { flex: 0 0 auto; min-width: 3.4rem; font-size: 0.8rem; color: var(--muted); padding-top: 0.12rem; }
.fu-history .crumb-when { min-width: 8.6rem; }
.crumb .who-chip { flex: 0 0 auto; min-width: 4.2rem; text-align: center; }
.crumb-body { flex: 1 1 auto; min-width: 0; }
.crumb-what { color: var(--espresso); font-size: 0.93rem; overflow-wrap: anywhere; }
.crumb-name { font-weight: 600; color: var(--bark); }
.crumb-area { margin-left: 0.5rem; font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.crumb-detail { margin-top: 0.15rem; font-size: 0.84rem; color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.fu-history { max-height: 60vh; overflow-y: auto; }

/* ---------- the follow-up sheet ---------- */
.fu-who-head { padding: 0.55rem 0.6rem; font-weight: 600; font-size: 0.82rem; color: var(--bark); }
.fu-who { padding: 0.55rem 0.6rem; }
.fu-fixed input { font-weight: 700; }

.fu-status-cell { padding: 0.4rem 0.5rem; }
.fu-status-pick {
  width: 100%;
  padding: 0.3rem 0.4rem;
  font-size: 0.88rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--espresso);
}
.fu-status-pick:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.fu-status-typed { margin-top: 0.3rem; font-size: 0.85rem; color: var(--espresso); overflow-wrap: anywhere; }
.fu-status-by { margin-top: 0.3rem; font-size: 0.76rem; color: var(--muted); }
.fu-status-by .who-chip { font-size: 0.68rem; padding: 0.05rem 0.4rem; }

.fu-statusbar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.8rem; }
.fu-statusbar:empty { display: none; }
.fu-statusbar-label { font-size: 0.82rem; color: var(--muted); margin-right: 0.15rem; }
.fu-statuschip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--bark);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.fu-statuschip:hover { background: var(--sand); }
.fu-statuschip.on { background: var(--bark); border-color: var(--bark); color: #fff; }
.fu-statuschip-n {
  min-width: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--sand);
  color: var(--bark);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}
.fu-statuschip.on .fu-statuschip-n { background: rgba(255, 255, 255, 0.22); color: #fff; }

.fu-actions .btn-small { padding-left: 0.55rem; padding-right: 0.55rem; }

.fu-statuslist { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.8rem 0; }
.fu-statusline { display: flex; align-items: center; gap: 0.35rem; }
.fu-statusline input { flex: 1 1 auto; min-width: 0; }

/* Home's recent activity: the name is the coloured block now */
.act .who-chip { justify-self: start; }

/* The sidebar has four links now. On a phone it lies flat along the top:
   let the links wrap instead of pushing the page wider than the screen. */
@media (max-width: 820px) {
  .sidebar-nav { flex-wrap: wrap; }
}