/* =============================================================================
   date.css — the date field and its calendar.

   Its own stylesheet rather than more of forms.css or select.css: this is the first
   control with a calendar grid, and neither of those files describes anything like
   it. Same rules apply — semantic tokens only, no hard-coded colour, spacing or
   height (DesignTokenTests enforces it), logical properties throughout.

   THREE STRUCTURAL RULES:

     1. THE FIELD NEVER CHANGES HEIGHT, and looks identical before and after the
        circuit attaches. The calendar toggle appears only when enhanced, so the
        input reserves room for it in both states — otherwise every date box on the
        page twitches when the circuit lands.
     2. THE CALENDAR IS ALWAYS SIX WEEKS TALL. A popover that resizes between
        months moves the row the user is aiming at, out from under the cursor.
     3. THE POPOVER IS `position: fixed`, positioned by islands.js, and keeps its
        NATURAL width — it is wider than the box it hangs under, which is why it
        does not opt into the anchor-matching that a dropdown list uses.
   ========================================================================== */

.hrc-date {
  position: relative;
  min-inline-size: 0;
}

/* -- the field ---------------------------------------------------------------
   The input keeps .hrc-input, so it inherits the frame, the invalid border and
   the mid-correction state every other text control has. The wrapper exists only
   to hang the toggle button beside it without either overlapping the text. */

.hrc-date__field {
  position: relative;
  display: flex;
  align-items: stretch;
  min-inline-size: 0;
  /* Cap on the wrapper so the calendar toggle sits at the right edge of the input
     rather than floating far right in a wide section. Matches .hrc-input +
     .hrc-select__field (packet edit-tenant 2026-07-30). Opt-out with .hrc-date--wide. */
  max-inline-size: var(--hrc-input-max-inline-size);
}

.hrc-date--wide .hrc-date__field {
  max-inline-size: none;
}

.hrc-date__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  /* Room for the toggle, reserved whether or not it is rendered — see rule 1. The
     text must never run under the button. */
  padding-inline-end: var(--hrc-space-xl);
}

.hrc-date__toggle {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hrc-space-xl);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--hrc-radius-sm);
  color: var(--hrc-ink-muted);
  cursor: pointer;
}

.hrc-date__toggle:hover {
  color: var(--hrc-ink);
}

.hrc-date__toggle:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: calc(var(--hrc-focus-offset) * -1);
}

/* Inline SVG in currentColor, so it follows the theme in both directions. Sized in
   em so it tracks the density scale with the text beside it. */
.hrc-date__toggle-glyph {
  inline-size: 1.05em;
  block-size: 1.05em;
}

/* -- the popover -------------------------------------------------------------
   Fixed, so no scrolling ancestor can clip it. Coordinates written by islands.js
   through the CSSOM — which strict CSP allows; what it forbids is a style="…"
   attribute in markup. */

.hrc-date__popover {
  position: fixed;
  z-index: var(--hrc-z-popover);
  display: flex;
  flex-direction: column;
  gap: var(--hrc-space-xs);
  /* Real coordinates arrive on open; these keep it sane for the frame before that
     runs, and if the script never loads it is simply never shown. */
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: var(--hrc-space-xs);
  background-color: var(--hrc-surface);
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius-sm);
  box-shadow: var(--hrc-shadow-pop);
}

.hrc-date__popover[hidden] {
  display: none;
}

/* -- header: month and year ---------------------------------------------------
   Native selects, deliberately (see DatePicker's remarks): calendar chrome over
   twelve fixed values and a bounded year range, not a dropdown over tenant data.
   They are what stops anyone clicking back four hundred months for a birth date. */

.hrc-date__header {
  display: flex;
  align-items: center;
  gap: var(--hrc-space-2xs);
}

.hrc-date__month,
.hrc-date__year {
  min-inline-size: 0;
  padding-inline: var(--hrc-space-2xs);
  padding-block: var(--hrc-space-2xs);
  background-color: var(--hrc-surface);
  color: var(--hrc-ink);
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius-xs);
  font-size: var(--hrc-text-sm);
  font-family: inherit;
}

.hrc-date__month {
  flex: 1 1 auto;
}

.hrc-date__year {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.hrc-date__month:focus-visible,
.hrc-date__year:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: var(--hrc-focus-offset);
}

.hrc-date__nav {
  flex: 0 0 auto;
  inline-size: var(--hrc-space-lg);
  padding: var(--hrc-space-2xs);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--hrc-radius-xs);
  color: var(--hrc-ink-muted);
  font-size: var(--hrc-text-lg);
  line-height: 1;
  cursor: pointer;
}

.hrc-date__nav:hover {
  background-color: var(--hrc-surface-hover);
  color: var(--hrc-ink);
}

.hrc-date__nav:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: var(--hrc-focus-offset);
}

/* -- the grid ----------------------------------------------------------------
   ONE tab stop. The grid takes focus and moves a highlight with
   aria-activedescendant; forty-two tab stops is not a keyboard interface. */

.hrc-date__grid {
  display: flex;
  flex-direction: column;
  gap: var(--hrc-space-2xs);
}

.hrc-date__grid:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: var(--hrc-focus-offset);
}

.hrc-date__weekdays,
.hrc-date__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--hrc-space-2xs);
}

.hrc-date__weekday {
  padding-block: var(--hrc-space-2xs);
  color: var(--hrc-ink-muted);
  font-size: var(--hrc-text-xs);
  font-weight: var(--hrc-weight-medium);
  text-align: center;
}

.hrc-date__day {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Square, and never below the touch target the responsive contract implies —
     a calendar is the densest grid of hit areas in the product. */
  min-inline-size: var(--hrc-space-lg);
  min-block-size: var(--hrc-space-lg);
  padding: var(--hrc-space-2xs);
  border: 1px solid transparent;
  border-radius: var(--hrc-radius-xs);
  color: var(--hrc-ink);
  font-size: var(--hrc-text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.hrc-date__day:hover {
  background-color: var(--hrc-surface-hover);
}

/* Days belonging to the neighbouring month. Dimmed, still selectable: someone
   looking at 31 March who wants 1 April should not have to change month to reach
   a day already on screen. */
.hrc-date__day--adjacent {
  color: var(--hrc-ink-subtle);
}

/* Today is marked with an outline, never a fill — a fill here competes with the
   selection, and two "this one" signals is worse than one. */
.hrc-date__day--today {
  border-color: var(--hrc-border-strong);
}

.hrc-date__day--selected {
  background-color: var(--hrc-accent);
  color: var(--hrc-accent-on);
  font-weight: var(--hrc-weight-medium);
}

/* The keyboard cursor. A ring rather than a fill, so it stays legible ON TOP of
   the selected day — the two states genuinely co-occur and must both be readable
   (colour alone never carries meaning, WCAG 1.4.1). */
.hrc-date__day--active {
  outline: var(--hrc-focus-ring);
  outline-offset: calc(var(--hrc-focus-offset) * -1);
}

.hrc-date__day[aria-disabled="true"] {
  color: var(--hrc-ink-subtle);
  cursor: not-allowed;
}

.hrc-date__day[aria-disabled="true"]:hover {
  background-color: transparent;
}

/* -- month-boundary shortcuts ------------------------------------------------
   Each button shows the date it will produce, because a shortcut whose result has
   to be guessed is not a shortcut. They act on the month BEING VIEWED. */

.hrc-date__footer {
  display: flex;
  gap: var(--hrc-space-2xs);
  padding-block-start: var(--hrc-space-2xs);
  border-block-start: 1px solid var(--hrc-border);
}

.hrc-date__shortcut {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0;
  min-inline-size: 0;
  padding-inline: var(--hrc-space-xs);
  padding-block: var(--hrc-space-2xs);
  background: none;
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius-xs);
  text-align: start;
  cursor: pointer;
}

.hrc-date__shortcut:hover {
  background-color: var(--hrc-surface-hover);
}

.hrc-date__shortcut:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: var(--hrc-focus-offset);
}

.hrc-date__shortcut-label {
  color: var(--hrc-accent);
  font-size: var(--hrc-text-xs);
  white-space: nowrap;
}

.hrc-date__shortcut-value {
  color: var(--hrc-ink-muted);
  font-size: var(--hrc-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}