/* ---- picking a date ----
   datetime-local is three different controls wearing one name, and the one that
   matters is the plain text box an older Android WebView falls back to. None of
   them can be styled and none speaks the language the rest of the app is in. */

.datepicker {
  position: relative;
  display: inline-flex;
}

.datepicker-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}

@media (hover: hover) {
  .datepicker-trigger:hover:not(:disabled) {
    border-color: var(--border-strong);
  }
}

.datepicker-icon {
  color: var(--ink-faint);
  flex: none;
}

.datepicker-panel {
  position: absolute;
  z-index: var(--z-dropdown);
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--bg);
  box-shadow: var(--shadow-md);
}

.opens-above .datepicker-panel {
  inset-block-start: auto;
  inset-block-end: calc(100% + 4px);
}

.datepicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.datepicker-month {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.datepicker-step {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

@media (hover: hover) {
  .datepicker-step:hover {
    background: var(--surface-hover);
    color: var(--ink);
  }
}

/* The carets point out of the month you are in. In a right-to-left interface
   the month before is to the right, so the pair swaps rather than the words. */
[dir="rtl"] .datepicker-step .icon {
  transform: scaleX(-1);
}

/* ---- the grid ---- */

.datepicker-weekdays,
.datepicker-days {
  display: grid;
  grid-template-columns: repeat(7, 2rem);
  gap: 2px;
}

.datepicker-weekday {
  display: grid;
  place-items: center;
  block-size: 1.75rem;
  color: var(--ink-faint);
  font-size: var(--text-2xs);
  /* An abbr, so no underline and no cursor asking to be hovered. */
  text-decoration: none;
  cursor: default;
}

.datepicker-day {
  display: grid;
  place-items: center;
  block-size: 2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

@media (hover: hover) {
  .datepicker-day:hover {
    background: var(--surface-hover);
  }
}

/* Days from the month either side. Drawn rather than left blank so the grid
   keeps its shape, and quiet so they do not read as part of this month. */
.datepicker-day.is-outside {
  color: var(--ink-faint);
}

/* Today is marked, not selected. A ring says "you are here"; the filled one
   says "this is what you chose", and on most days they are different squares. */
.datepicker-day.is-today {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.datepicker-day.is-chosen {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  .datepicker-day.is-chosen:hover {
    background: var(--primary-hover);
  }
}

/* ---- the time, and clearing ---- */

.datepicker-time {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-subtle);
}

.datepicker-time-input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: var(--control-h);
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.datepicker-clear {
  border: none;
  background: none;
  padding: var(--space-1) var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

@media (hover: hover) {
  .datepicker-clear:hover {
    color: var(--danger);
    background: var(--surface-hover);
  }
}

/* ---- the month view ----
   The same grid the date picker draws, at the size of a page. A calendar that
   disagreed with the one in the picker beside it would be two calendars. */

.cal-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cal-month {
  min-inline-size: 10ch;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.cal-empty {
  margin: 0 0 var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

.cal-weekdays,
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}

.cal-weekday {
  padding: var(--space-2);
  color: var(--ink-faint);
  font-size: var(--text-xs);
  text-decoration: none;
  text-align: start;
}

/* One pixel of gap over a background, so the grid lines are the space between
   cells rather than a border on each of them meeting its neighbour's. */
.cal-days {
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.cal-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-block-size: 6.5rem;
  padding: var(--space-2);
  background: var(--bg);
}

.cal-day.is-outside {
  background: var(--surface-2);
}

.cal-date {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.cal-day.is-today .cal-date {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: var(--weight-semibold);
}

.cal-note {
  display: block;
  padding: 2px var(--space-1);
  /* No underline. These are links and they are also the contents of a cell in a
     grid; underlining forty of them turns the month into a page of rules. The
     background and the pointer say they can be clicked. */
  text-decoration: none;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--text-2xs);
  line-height: 1.4;
  /* One line each. A long title must not decide how tall the week is. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  .cal-note:hover {
    background: var(--surface-hover);
  }
}

/* The only colour in the grid, for the only state worth one: a date somebody
   set and then passed. */
.cal-note.is-overdue {
  color: var(--danger);
}

.cal-more {
  color: var(--ink-faint);
  font-size: var(--text-2xs);
  padding-inline: var(--space-1);
}

/* A month of six-and-a-half-rem cells does not fit a phone. The days become a
   list of the ones that have something on them, which is the only part of a
   calendar that survives at this width anyway. */
@media (max-width: 700px) {
  .cal-weekdays {
    display: none;
  }

  .cal-days {
    display: flex;
    flex-direction: column;
  }

  .cal-day {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    min-block-size: 0;
  }

  /* An empty day in a list is a blank row saying nothing. */
  .cal-day:not(:has(.cal-note)) {
    display: none;
  }

  .cal-date {
    min-inline-size: 2ch;
    font-weight: var(--weight-medium);
  }

  .cal-note {
    font-size: var(--text-sm);
    flex-basis: 100%;
  }
}

/* ---- a date on a task ----

   The chip is the control. It shows the date when there is one and a clock when
   there is not, so a list of undated tasks reads as a list rather than as a
   form with an empty field on every line. */
.checklist-when {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  padding: 2px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: none;
  color: var(--ink-faint);
  font-size: var(--text-2xs);
  cursor: pointer;
}

@media (hover: hover) {
  .checklist-when:hover {
    border-color: var(--border);
    color: var(--ink-muted);
  }
}

/* Only once it matters. A chip that turns red the moment a date is set teaches
   somebody to stop reading the colour. */
.checklist-when.is-overdue {
  color: var(--danger);
}

.checklist-when[aria-expanded="true"] {
  border-color: var(--border-strong);
  color: var(--ink);
}

/* Its own row under the item rather than inside it, because a calendar beside a
   text field makes the text field two thirds of the width it needs. */
.checklist-schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-4);
  padding-inline-start: var(--space-8);
}

.repeat-picker {
  min-inline-size: 150px;
}

@media (max-width: 700px) {
  .checklist-schedule {
    padding-inline-start: var(--space-4);
  }
}

/* What the closed Share disclosure says about itself. Quiet, because the common
   case is a note that is not shared and has nothing here at all. */
.notshare > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.notshare-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  color: var(--ink-faint);
}

.notshare-state.is-live {
  color: var(--primary);
}