/* Kaiwhai Office — 20 Sep 2026: the follow-up sheet's date columns, the season
   calendar, the New lead page and what a show account sees. A file of its own
   so styles.css stays exactly as it was; every rule here is new. */

/* ---------- the follow-up sheet: date columns ----------
   Kept quiet on purpose (Rohan: "quite subtle and not overpowering"): a date
   is plain words, the counting is one small grey line, an empty cell is
   empty, and "today" / "clear" only show on the cell you are pointing at. */
.fu-date { position: relative; padding: 0.42rem 0.55rem 0.4rem; }
.fu-date-show {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  color: var(--espresso);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.fu-date-show:hover { color: var(--bark); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.fu-date-show:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fu-date-none { color: var(--line); }
.fu-date:hover .fu-date-none, .fu-date-none:focus-visible { color: var(--muted); }
.fu-date-tag { margin-top: 0.1rem; font-size: 0.76rem; color: var(--muted); min-height: 0; }
.fu-date-tag:empty { display: none; }
.fu-date-flag { color: var(--terracotta); font-weight: 600; }
.fu-date-quicks { display: flex; gap: 0.6rem; margin-top: 0.15rem; visibility: hidden; }
.fu-date:hover .fu-date-quicks, .fu-date:focus-within .fu-date-quicks { visibility: visible; }
.fu-date-quick {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}
.fu-date-quick:hover { color: var(--bark); }
/* The real date box: out of sight, in place (the picker opens where it is).
   If the picker cannot be opened by the page, it takes the focus and shows. */
.fu-date-input {
  position: absolute;
  left: 0.4rem;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: none;
  opacity: 0;
  pointer-events: none;
}
.fu-date-input:focus {
  position: static;
  width: 100%;
  height: auto;
  margin-top: 0.25rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.85rem;
  opacity: 1;
  pointer-events: auto;
}
/* No pointer to hover with (a phone): the two small links stay visible, and
   the real date box lies, see-through, over the date — so a tap lands on the
   box itself and opens the phone's own date wheel, whatever the browser makes
   of showPicker. */
@media (hover: none) {
  .fu-date-quicks { visibility: visible; }
  .fu-date-none { color: var(--muted); }
  .fu-date-input, .fu-date-input:focus {
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 2.1rem;
    margin: 0;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: auto;
  }
}
.fu-head-date input { padding-right: 0; }
.fu-colset { font-size: 1rem; line-height: 1; padding: 0.1rem 0.4rem 0.3rem; letter-spacing: 0.02em; }
.fu-colset:hover { color: var(--bark); }

/* where a client was met, under the name block */
.fu-source { margin-top: 0.25rem; max-width: 7rem; font-size: 0.7rem; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; }

/* Home and the New lead page open the sheet ON a client: the row glows once */
@keyframes fu-flash { from { background: rgba(201, 163, 106, 0.4); } to { background: transparent; } }
.fu-flash { animation: fu-flash 2.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .fu-flash { animation: none; box-shadow: inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold); } }

/* setting a date column up */
.fu-ds input[type="radio"], .fu-ds input[type="checkbox"] { width: auto; margin: 0.2rem 0 0; flex: 0 0 auto; accent-color: var(--bark); }
.fu-ds-choices { display: flex; flex-direction: column; gap: 0.15rem; margin: 1rem 0 0.4rem; }
.fu-ds-choice { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; padding: 0.4rem 0.5rem; border-radius: 8px; font-weight: 400; cursor: pointer; }
.fu-ds-choice:hover { background: var(--sand); }
.fu-ds-choice-name { display: block; font-weight: 600; color: var(--bark); }
.fu-ds-choice-hint { display: block; font-size: 0.84rem; color: var(--muted); }
.fu-ds-flag { margin-top: 0.7rem; color: var(--espresso); }
.fu-ds-flag .fu-ds-warn { width: 4.6rem; padding: 0.3rem 0.45rem; margin: 0 0.15rem; text-align: center; }
.fu-ds-check { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.8rem 0 0; font-weight: 400; color: var(--espresso); cursor: pointer; }
.fu-ds .modal-actions .fu-ds-remove { margin-right: auto; }

/* Home: who to get back to — the name and status on one line, why under it */
.due {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.05rem 0.6rem;
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--espresso);
  text-align: left;
  cursor: pointer;
}
.due:hover { background: var(--sand); }
.due .who-chip { grid-row: 1 / span 2; align-self: start; margin-top: 0.1rem; min-width: 4.2rem; text-align: center; }
.due-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; min-width: 0; }
.due-name { font-weight: 600; color: var(--bark); overflow-wrap: anywhere; }
.due-status { font-size: 0.78rem; color: var(--muted); }
.due-why { font-size: 0.82rem; color: var(--terracotta); overflow-wrap: anywhere; }

/* ---------- the season calendar ---------- */
body[data-view="calendar"] main { max-width: 1180px; }
.cal-check { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 400; font-size: 0.85rem; color: var(--espresso); cursor: pointer; }
.cal-check input { width: auto; accent-color: var(--bark); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0 0 0.9rem; font-size: 0.82rem; color: var(--muted); }
.cal-legend:empty { display: none; }
.cal-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal-dot { display: inline-block; flex: 0 0 auto; width: 0.85rem; height: 0.6rem; border-radius: 3px; background: var(--tone); border: 1.5px solid var(--tone); }

.cal-t0 { --tone: #5b4636; }     /* bark */
.cal-t1 { --tone: #b5683e; }     /* terracotta */
.cal-t2 { --tone: #66704f; }     /* sage */
.cal-t3 { --tone: #4f6d7a; }     /* slate */
.cal-t4 { --tone: #9a7b2f; }     /* ochre */
.cal-t5 { --tone: #7a5478; }     /* plum */
.cal-tnone { --tone: #8a7a68; }  /* no camp named */

.cal-overlaps { margin: 0 0 1rem; padding: 0.7rem 1rem 0.8rem; border-radius: 12px; background: rgba(181, 104, 62, 0.09); box-shadow: 0 0 0 1px rgba(181, 104, 62, 0.35); }
.cal-overlaps h3 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--terracotta); }
.cal-overlaps .hint { margin: 0.5rem 0 0; font-size: 0.82rem; }
.cal-overlap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; padding: 0.2rem 0; font-size: 0.9rem; }
.cal-overlap-when { font-weight: 600; color: var(--espresso); }
.cal-overlap-and { color: var(--muted); }
.cal-overlap-who { padding: 0; border: none; background: none; font: inherit; color: var(--bark); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; text-align: left; }

.cal-months { display: flex; flex-direction: column; gap: 0.8rem; }
.cal-month { background: #fff; box-shadow: 0 0 0 1px var(--line); border-radius: 12px; padding: 0.65rem 0.9rem 0.75rem; }
.cal-month h3 { margin: 0 0 0.45rem; font-size: 0.98rem; color: var(--bark); }
.cal-month-open h3 { color: var(--muted); font-weight: 500; }
.cal-scroll { overflow-x: auto; }
.cal-strip { display: grid; grid-auto-rows: 1.55rem; row-gap: 3px; min-width: 620px; }
.cal-d28 { grid-template-columns: repeat(28, minmax(0, 1fr)); }
.cal-d29 { grid-template-columns: repeat(29, minmax(0, 1fr)); }
.cal-d30 { grid-template-columns: repeat(30, minmax(0, 1fr)); }
.cal-d31 { grid-template-columns: repeat(31, minmax(0, 1fr)); }
.cal-day { grid-row: 1; font-size: 0.68rem; line-height: 1.55rem; text-align: center; color: var(--muted); border-left: 1px solid var(--sand); }
.cal-we { background: var(--sand); }
.cal-today { background: var(--gold); color: var(--espresso); font-weight: 700; border-radius: 4px; }
.cal-month-open .cal-strip { grid-auto-rows: 1.2rem; }
.cal-month-open .cal-day { line-height: 1.2rem; }

.cal-bar {
  min-width: 0;
  margin: 0 1px;
  padding: 0 0.4rem;
  border: 1.5px solid var(--tone);
  border-radius: 6px;
  background: var(--tone);
  color: #fff;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.cal-bar:hover, .cal-bar:focus-visible { filter: brightness(1.12); outline: 2px solid var(--gold); outline-offset: 1px; }
.cal-bar-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-unsigned { background: #fff; background: color-mix(in srgb, var(--tone) 45%, #fff); color: var(--espresso); }
.cal-quote { background: #fff; color: var(--tone); border-style: dashed; }
.cal-vague { border-style: dotted; opacity: 0.75; }
.cal-from-before { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: none; margin-left: 0; }
.cal-goes-on { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; margin-right: 0; }
.cal-clash { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--terracotta); z-index: 1; }

.cal-list { display: flex; flex-direction: column; margin-top: 0.5rem; }
.cal-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  padding: 0.3rem 0.35rem;
  border: none;
  border-top: 1px solid var(--sand);
  background: none;
  font: inherit;
  font-size: 0.88rem;
  color: var(--espresso);
  text-align: left;
  cursor: pointer;
}
.cal-line:hover { background: var(--sand); }
.cal-line .cal-dot { align-self: center; }
.cal-line-when { flex: 0 0 auto; min-width: 8.5rem; color: var(--muted); font-size: 0.82rem; }
.cal-line-name { font-weight: 600; color: var(--bark); }
.cal-line-sub { color: var(--muted); font-size: 0.82rem; }
.cal-line .badge { margin-left: auto; }
.cal-line-clash .cal-line-when { color: var(--terracotta); font-weight: 600; }
.cal-unread { margin-top: 1.2rem; background: #fff; box-shadow: 0 0 0 1px var(--line); border-radius: 12px; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; }
.cal-unread h3 { margin: 0; font-size: 0.95rem; }
.cal-unread .hint { margin: 0.2rem 0 0.5rem; font-size: 0.85rem; }

/* ---------- the New lead page ---------- */
body[data-view="lead"] main { max-width: 640px; }
.lead-form { background: #fff; box-shadow: 0 0 0 1px var(--line); border-radius: 12px; padding: 0.4rem 1.1rem 1rem; }
.lead-form input, .lead-form textarea { font-size: 1rem; } /* 16px: a phone does not zoom in on focus */
.lead-follow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lead-follow input { width: auto; flex: 1 1 10rem; }
.lead-recent { display: flex; flex-direction: column; background: #fff; box-shadow: 0 0 0 1px var(--line); border-radius: 12px; padding: 0.3rem 1rem; }
.lead-recent .hint { margin: 0.5rem 0; }
.lead-done { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border: none; border-top: 1px solid var(--sand); background: none; font: inherit; color: var(--espresso); text-align: left; }
.lead-done:first-child { border-top: none; }
.lead-done-link { cursor: pointer; }
.lead-done-link:hover .lead-done-name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.lead-done-name { font-weight: 600; color: var(--bark); overflow-wrap: anywhere; }
.lead-done-when { flex: 0 0 auto; color: var(--muted); font-size: 0.85rem; }

/* ---------- a show account: the New lead page and nothing else ----------
   The database is what keeps a show account out of everything else; this only
   takes the links it cannot use off the screen. */
body[data-role="show"] .sidebar-nav,
body[data-role="show"] .topbar,
body[data-role="show"] .tabstrip { display: none; }

/* The sidebar has five links now; on a phone they wrap (activity.css) and stay compact. */
@media (max-width: 820px) {
  .sidebar-nav a { padding: 0.45rem 0.6rem; }
}