/* The week planner. Colours come from brand.css.

   The grid is a table on purpose: activities down the side and the school week
   across the top is what the PDF form does, it is what a teacher expects, and a
   table is the one layout that keeps the two axes legible when it is printed. */

.weeks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 2rem;
}

.week {
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--edge);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}

.week:hover { border-color: var(--gold); }

.week.here {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}

.week.filled::after {
  content: "";
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--gold);
}

.week.here.filled::after { background: var(--gold-bright); }

.sheet { margin-top: 1rem; }

.sheet-title {
  margin: 0 0 0.85rem !important;
  font-size: 1.3rem;
  color: var(--navy-ink);
}

table.plan {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
}

table.plan th,
table.plan td {
  border: 1px solid var(--edge);
  padding: 0;
  vertical-align: top;
}

table.plan thead th {
  padding: 0.45rem 0.6rem;
  background: var(--navy);
  color: var(--on-navy);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
}

table.plan thead th.activity-head { background: var(--navy-deep); }

th.activity-cell {
  width: 12rem;
  padding: 0.5rem 0.6rem;
  background: var(--navy-wash);
  text-align: left;
  font-weight: 600;
}

.activity-name { display: block; color: var(--navy-ink); font-size: 0.92rem; }
.activity-cadence { display: block; font-size: 0.72rem; font-weight: 400; color: var(--gold-ink); }

table.plan td input {
  width: 100%;
  min-height: 2.9rem;
  border: 0;
  padding: 0.5rem 0.6rem;
  background: var(--card);
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
}

table.plan td input:focus {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  background: var(--gold-wash);
}

.notes { margin-top: 1.5rem; }

.notes-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--navy-ink);
}

.notes textarea {
  width: 100%;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  background: var(--card);
  font: inherit;
  color: var(--ink);
  resize: vertical;
}

.notes textarea:focus { outline: 2px solid var(--gold); outline-offset: -2px; }

.planner-saved {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--hit, var(--navy));
  min-height: 1.3rem;
}

.planner-saved.warn { color: var(--wrong); }

.planner-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.planner-warning {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border-left: 5px solid var(--wrong);
  background: var(--warn-wash);
  color: var(--warn-ink);
  font-size: 0.9rem;
}

/* ---- print: the week as a paper form ---- */

@media print {
  .masthead,
  .footer,
  .levels,
  .weeks,
  .page-head .strap,
  .planner-saved,
  .planner-note,
  .planner-warning { display: none; }

  .page h2 { display: none; }

  body { background: #fff; font-size: 10pt; }

  table.plan { min-width: 0; }
  table.plan thead th { background: none; color: #000; border-bottom: 2px solid #000; }
  th.activity-cell { background: none; }
  table.plan td input { min-height: 2.4rem; background: none; }
  .notes textarea { min-height: 4rem; }
}