/*
  The date picker (web/dates.js) — Liwan's calendar, in this system's
  colours. Two months side by side; the usual periods down the side of a
  period's; today, yesterday and tomorrow over a single date's.
*/
.stay-cal, .date-typed {
  --surface: var(--tblr-bg-surface, #fff);
  --surface-2: #f8fafc;
  --border: var(--tblr-border-color, #e6e8eb);
  --border-strong: #dadfe5;
  --text: var(--tblr-body-color, #182433);
  --text-2: #49566c;
  --text-muted: var(--tblr-secondary, #667382);
  --text-soft: #8a97ab;
  --brand: var(--mr-brand, #0f766e);
  --brand-dark: var(--mr-brand-dark, #0b5a54);
  --brand-light: #d5efec;
  --brand-ring: rgba(15, 118, 110, .2);
  --radius: 6px;
  --radius-lg: 8px;
}

/* A rule that sets `display` outweighs the browser's own [hidden]. */
.stay-cal[hidden] { display: none; }

/* On the page, placed under its field by dates.js, and over everything. */
.stay-cal {
  position: absolute;
  z-index: 1060;
  top: 0;
  left: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(24, 36, 51, .16);
  font-variant-numeric: tabular-nums;
}
.stay-cal__quick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.stay-cal__chip {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 5px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.stay-cal__chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.stay-cal__chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.stay-cal__months { display: flex; gap: 28px; padding: 10px 16px 4px; }
.stay-cal__title { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; font-size: 14px; }
.stay-cal__nav {
  position: absolute;
  top: 3px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.stay-cal__nav:hover { border-color: var(--brand); color: var(--brand); }
.stay-cal__nav--back { inset-inline-start: 0; }
.stay-cal__nav--on { inset-inline-end: 0; }
.stay-cal__grid { display: grid; grid-template-columns: repeat(7, 42px); }
.stay-cal__wd { height: 26px; display: grid; place-items: center; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.stay-cal__wd.is-weekend { color: var(--brand); font-weight: 600; }
.stay-cal__day {
  position: relative;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.stay-cal__day i {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  font-style: normal;
}
.stay-cal__day.is-weekend { background: #f4fafa; }
.stay-cal__day:hover i { box-shadow: inset 0 0 0 2px var(--brand); }
.stay-cal__day:focus-visible { outline: none; }
.stay-cal__day:focus-visible i { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 3px var(--brand-ring); }
.stay-cal__day.is-past { color: var(--text-soft); }
.stay-cal__day[disabled] { cursor: default; opacity: .4; }
.stay-cal__day[disabled]:hover i { box-shadow: none; }
.stay-cal__day.is-today i { color: var(--brand); font-weight: 700; }
/* A period: a band from its first day to its last. */
.stay-cal__day.is-mid::before,
.stay-cal__day.is-start::before,
.stay-cal__day.is-end::before { content: ""; position: absolute; top: 4px; bottom: 4px; background: var(--brand-light); }
.stay-cal__day.is-mid::before { inset-inline: 0; }
.stay-cal__day.is-start::before { inset-inline-start: 50%; inset-inline-end: 0; }
.stay-cal__day.is-end::before { inset-inline-start: 0; inset-inline-end: 50%; }
.stay-cal__day.is-start.is-end::before { display: none; }
.stay-cal__day.is-start i,
.stay-cal__day.is-end i { background: var(--brand); color: #fff; font-weight: 700; }
.stay-cal__foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }
.stay-cal__said { flex: 1; color: var(--text-2); }
/* A period: the usual ones down the side, the two months beside them. */
.stay-cal--period { display: grid; grid-template-columns: auto auto; }
.stay-cal--period[hidden] { display: none; }
.stay-cal__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: var(--surface-2);
  border-inline-end: 1px solid var(--border);
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
}
.stay-cal__preset {
  border: 0;
  background: none;
  text-align: start;
  padding: 8px 12px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
}
.stay-cal__preset:hover { background: var(--surface); }
.stay-cal__preset.is-on { background: var(--surface); color: var(--brand-dark); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .stay-cal__preset.is-on { box-shadow: inset -3px 0 0 var(--brand); }

/* A date typed in place of a date box: the same box, a calendar at its end.
   The digits read left to right; on an Arabic page the box keeps the
   column's alignment and the icon its far side. */
.date-typed { position: relative; display: block; width: 100%; }
.date-typed input[type="text"] { font-variant-numeric: tabular-nums; }
[dir="ltr"] .date-typed input[type="text"] { padding-right: 36px; }
[dir="rtl"] .date-typed input[type="text"] { padding-left: 36px; text-align: right; }
.date-typed__icon {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  cursor: pointer;
}
.date-typed__icon svg { width: 17px; height: 17px; }
.date-typed:focus-within .date-typed__icon { color: var(--brand); }
.mr-multi .date-typed { flex: 1; }

@media (max-width: 900px) {
  .stay-cal--period { grid-template-columns: 1fr; }
  .stay-cal__side { flex-direction: row; flex-wrap: wrap; border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .stay-cal__months { flex-direction: column; max-height: 60vh; overflow: auto; }
}