/*
 * THE MONTH GRID. Week rows of equal height, each holding a date row and a lane
 * area the event bars are positioned inside.
 *
 * The lane area's height is MEASURED rather than fixed, because the row is
 * `flex: 1` — its height is the calendar's divided by however many weeks the
 * month needs. The three heights a row is made of are declared here and read in
 * JS through `--lotics-month-view-*`, so one file decides them.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* The row's three heights are the FIT MATH's numbers — the module that decides
     how many lanes a row can hold — so they arrive from there as data rather
     than being declared twice. */
  .lotics-month-view {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
    background-color: var(--card);
  }

  /* The weekday strip is a LABEL row, not a boundary — space sets it off. */
  .lotics-month-view__weekdays {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    padding-top: var(--lotics-space-2);
    padding-bottom: var(--lotics-space-8);
  }

  .lotics-month-view__weekday {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  .lotics-month-view__week {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: calc(var(--lotics-month-view-date-row) + var(--lotics-month-view-lane));
    border-top: 1px solid var(--border);
  }

  .lotics-month-view__dates {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    height: var(--lotics-month-view-date-row);
    padding-top: var(--lotics-space-4);
  }

  .lotics-month-view__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
    background-color: transparent;
    font: inherit;
    color: inherit;
    appearance: none;
    cursor: default;
  }

  .lotics-month-view__date:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-month-view__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding-inline: var(--lotics-space-4);
    border-radius: var(--lotics-radius-full);
  }

  /*
   * TODAY IS A RING, NOT A FILL. A solid accent disc is what a SELECTED day
   * wears, and a grid where the one filled mark is "today" spends the strongest
   * treatment on the fact the reader is least likely to be acting on. The ring
   * is `0 0 0 1px` inset — an edge drawn with the property that reaches outside
   * the box, so nothing grows.
   */
  .lotics-month-view__badge[data-today] {
    box-shadow: inset 0 0 0 1px var(--lotics-accent);
  }

  .lotics-month-view__lanes {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  /* The column rules run up THROUGH the date row, so a week reads as seven
     columns rather than as a strip of dates over a band of bars. */
  .lotics-month-view__rule {
    position: absolute;
    top: calc(var(--lotics-month-view-date-row) * -1);
    bottom: 0;
    border-left: 1px solid var(--border);
  }

  .lotics-month-view__overflow {
    position: absolute;
    width: calc(100% / 7);
    padding-inline: var(--lotics-space-4);
  }

  .lotics-month-view__more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    height: var(--lotics-month-view-more);
    margin: 0;
    padding-inline: var(--lotics-space-2);
    border: 0 solid transparent;
    background-color: transparent;
    font: inherit;
    color: inherit;
    text-align: start;
    appearance: none;
    cursor: default;
  }

  .lotics-month-view__more:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-month-view__day-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-4);
    padding-block: var(--lotics-space-4);
  }

  .lotics-month-view__day-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
    background-color: transparent;
    font: inherit;
    color: inherit;
    text-align: start;
    appearance: none;
    cursor: default;
  }

  .lotics-month-view__day-heading:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }
}