/* ============================================================
   GP Team Hub - dayplan.css
   The Planner: the week strip on Today, expanded into somewhere to
   write what each day is for. Its own file because activity.css is at
   its size ceiling.
   ============================================================ */

/* ---- The bar above the week ----
   The strip carried no header of its own, so the toggle brings one and
   the strip keeps its place underneath. */
.plan-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;
}
.plan-bar-l{
  font-size:.68rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-faint);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.plan-toggle{
  display:inline-flex;align-items:center;gap:7px;
  flex-shrink:0;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-raised);
  color:var(--ink-soft);
  font-size:.78rem;font-weight:600;
  cursor:pointer;
}
.plan-toggle:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);}
.plan-toggle[aria-pressed="true"]{
  background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);
}
.plan-toggle[aria-pressed="true"]:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.plan-toggle i{font-size:.82em;}

/* ---- The week's own line ---- */
.plan-week{
  margin-top:12px;
  background:var(--surface-high);
  border-radius:var(--radius);
  padding:12px 14px;
}
.plan-week-l{
  display:block;
  font-size:.68rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:6px;
}

/* ---- The seven days ----
   Seven across on a desk and one under the next on a phone, because a
   column an inch wide holds no sentence worth writing. */
.plan-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:10px;
}
@media (min-width:900px){
  .plan-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
}
.plan-day{
  display:flex;flex-direction:column;
  min-width:0;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 11px 11px;
}
/* Which of seven boxes is now is answered the way the rest of the site
   answers it, by coming forward a step rather than by wearing an
   outline. The day's name carries the accent above it. */
.plan-day[data-today="true"]{background:var(--surface-high);border-color:var(--line-strong);}
.plan-day[data-past="true"]{background:var(--surface-page);}
/* Saturday and Sunday are not field days, so they sit back rather than
   competing with the five that are. */
.plan-day[data-weekend="true"]{background:var(--surface-page);border-style:dashed;}
.plan-day[data-weekend="true"] .plan-done{display:none;}
.plan-day-head{
  display:flex;align-items:baseline;gap:7px;
  margin-bottom:8px;
  min-width:0;
}
.plan-day-d{
  font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-faint);
}
.plan-day[data-today="true"] .plan-day-d{color:var(--accent);}
.plan-day-n{font-size:.95rem;font-weight:700;color:var(--ink);line-height:1;}
.plan-day-off{
  margin-left:auto;
  font-size:.64rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---- The two fields ----
   Borderless until they are being used, so seven days of empty boxes
   read as a page to write on rather than as a form to fill in. */
.plan-focus,
.plan-notes{
  display:block;width:100%;
  background:transparent;
  border:0;
  border-radius:var(--radius-sm);
  padding:5px 6px;
  color:var(--ink);
  font:inherit;
  resize:none;
}
.plan-focus{
  font-size:.86rem;font-weight:600;
  line-height:1.45;
  overflow:hidden;
}
.plan-notes{
  font-size:.8rem;line-height:1.55;
  color:var(--ink-soft);
  overflow:hidden;
  min-height:2.4em;
}
.plan-focus::placeholder,
.plan-notes::placeholder{color:var(--ink-faint);}
.plan-focus:hover,
.plan-notes:hover{background:var(--surface-high);}
.plan-focus:focus,
.plan-notes:focus{
  background:var(--surface-high);
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.plan-day[data-past="true"] .plan-focus:hover,
.plan-day[data-past="true"] .plan-notes:hover{background:var(--surface-high);}

/* A hairline between the day's intention and the notes under it, so the
   one line a rep committed to does not read as the first line of a
   paragraph. */
.plan-rule{
  height:1px;background:var(--line);
  margin:7px 2px;
}

/* ---- What actually happened ----
   The day's logged numbers, sat under the plan for that day, because
   the comparison is the whole reason the plan lives on Today rather
   than on a page of its own. */
.plan-done{
  display:flex;flex-wrap:wrap;gap:3px 9px;
  margin-top:auto;
  padding-top:9px;
  font-size:.7rem;color:var(--ink-faint);
}
.plan-done b{color:var(--ink-soft);font-weight:700;}
.plan-done-none{color:var(--ink-faint);font-style:normal;}

/* ---- Saving ---- */
.plan-state{
  font-size:.74rem;color:var(--ink-faint);
  margin-top:9px;min-height:1.2em;
}
.plan-state[data-state="saved"]{color:var(--hue-green);}
.plan-state[data-state="error"]{color:var(--danger);}

@media (prefers-reduced-motion:no-preference){
  .plan-state{transition:color .15s ease;}
}