/* The plan dashboard's fortnight (Views::PlanDashboards::FortnightCard):
   what the days repeat (the plan calendar's attention grid), then each
   week under its head line: this week as a DataTable of days, a later week
   as a details whose summary is the head line and whose body is the same
   table. On a phone each row stacks: the day and its step on one line, what
   it holds under them, then what is wrong. From 48rem it is the table, its
   columns at fixed widths so every week's table lines up with the others.
   The weekly planner's Needs attention card
   (Views::PlanDashboards::NeedsAttentionCard) draws its rows with the same
   classes. */

.fortnight {
  display: block;
}

.fortnight-head {
  display: none;
}

.fortnight-body {
  display: block;
}

.fortnight-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--line-width) solid var(--line);
}

.fortnight-today {
  background: var(--surface-sunken);
}

.fortnight-when {
  padding: 0 var(--space-2);
  border-bottom: 0;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fortnight-what,
.fortnight-why,
.fortnight-rest {
  grid-column: 1 / -1;
  padding: 0 var(--space-2);
  border-bottom: 0;
}

.fortnight-step {
  grid-column: 2;
  grid-row: 1;
  padding: 0 var(--space-2);
  border-bottom: 0;
  text-align: right;
  white-space: nowrap;
}

.fortnight-rest {
  color: var(--ink-muted);
}

/* The day's step with where it has been exported under it, so the steps
   keep one right edge and the column one width. */
.fortnight-step-line {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-1);
}

.fortnight-exported {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* A finish or release step, set in place (FortnightCard#render_status_step). */
.fortnight-step-form {
  display: contents;
}

/* The day opens in the weekly planner; it reads as the day, not a link,
   until it is pointed at. */
.fortnight-day {
  color: var(--ink);
  text-decoration: none;
}

.fortnight-day:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}

.fortnight-day:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.fortnight-problem {
  color: var(--ink);
}

.fortnight-problem-quiet,
.fortnight-done {
  color: var(--ink-muted);
}

/* What repeats sits above the weeks, its readout under the grid. */
.fortnight-repeats {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.fortnight-week {
  border-top: var(--line-width) solid var(--line);
}

/* This week's head line: its name, its steps by kind, and its actions at
   the end. A later week's is a band Disclosure's summary, drawn alike. */
.fortnight-week-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: var(--tap);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-sunken);
}

.fortnight-week-title {
  font-weight: 600;
}

.fortnight-week-subjects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.fortnight-week-more,
.fortnight-week-kinds {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.fortnight-week-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Tracing a row of what repeats fades the days without it. */
.fortnight-row[data-score-match="false"] {
  opacity: 0.35;
}

@media (min-width: 48rem) {
  .fortnight {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .fortnight-head {
    display: table-row;
  }

  .fortnight-body {
    display: table-row-group;
  }

  .fortnight-row {
    display: table-row;
  }

  .fortnight-when,
  .fortnight-what,
  .fortnight-why,
  .fortnight-step,
  .fortnight-rest {
    padding: var(--space-2);
    border-bottom: var(--line-width) solid var(--line);
    vertical-align: baseline;
  }

  .fortnight-col-when {
    width: 8rem;
  }

  .fortnight-col-what {
    width: 28%;
  }

  .fortnight-col-step {
    width: 14rem;
  }

}