/*
 * The calendars of kiopstudio/calendar (templates/components/), loaded with
 * the controller (package.json, "autoimport").
 *
 * The `.calendar-day` tile stands on its own: it looks the same in every
 * mask, and only the arrangement hangs off the root element's modifier. A
 * further mask therefore needs a block down here, but no change to the tile.
 * The tile carries no decoration of its own - no rule, no fill. What a day
 * looks like beyond its number is the day template's business: a template
 * of the application brings its own rules, and those of the bundle give it
 * the shape - .calendar-day__head, .calendar-day__cell, and in a month line
 * .calendar-line-day, .calendar-line__head and .calendar-line__cell.
 *
 * Everything inside scales with the width of the calendar itself, not with
 * the window: `cqi` is one percent of the container's inline size, and
 * clamp() holds a size between a floor that stays readable and the size it
 * takes when there is room. A calendar in a narrow wrapper - twelve of them
 * on a year page - shrinks as a whole instead of spilling over its column.
 * The padding of `.calendar` is the one exception: an element cannot query
 * its own size, so that value stays fixed.
 *
 * The colours and the radius are custom properties, set without weight
 * (:where), so an application - or a single calendar - sets them on
 * .calendar without caring which stylesheet comes first:
 *   --calendar-surface             the card the calendar sits on
 *   --calendar-muted               weekday names, week numbers, labels
 *   --calendar-radius              the corners of the calendar and a tile
 *   --calendar-weekend-color       the weekend's text, see "Weekend"
 *   --calendar-weekend-background  the weekend's tile
 *   --calendar-today-color         today's text, see "Today"
 *   --calendar-today-background    today's tile
 */
:where(.calendar) {
    --calendar-surface: #fff;
    --calendar-muted: #6b6b6b;
    --calendar-radius: 0.5rem;
    /* The weekend's red */
    --calendar-weekend-color: #c62828;
    --calendar-weekend-background: transparent;
    /* Today's amber: a warm fill no other day carries, its number in a dark
       shade of the same colour */
    --calendar-today-color: #7a4b00;
    --calendar-today-background: #ffe08a;
}

.calendar {
    /* Makes this element the reference every size below is measured against */
    container-type: inline-size;
    background-color: var(--calendar-surface);
    border-radius: var(--calendar-radius);
    padding: 0.75rem;
}

.calendar__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: clamp(0.2rem, 1.35cqi, 0.75rem);
    margin-bottom: clamp(0.2rem, 1.35cqi, 0.75rem);
}

.calendar__title {
    font-size: clamp(0.8125rem, 2cqi, 1.125rem);
    font-weight: 700;
}

.calendar__subtitle {
    color: var(--calendar-muted);
    font-size: clamp(0.5625rem, 1.45cqi, 0.8125rem);
    font-weight: 700;
}

/* --- The grid --------------------------------------------------------------- */

/* Heading row and weeks share the same column layout, otherwise the weekday
   names would not stand above their days. */
.calendar__weekdays,
.calendar__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(0.0625rem, 0.45cqi, 0.25rem);
}

.calendar__week {
    margin-top: clamp(0.0625rem, 0.45cqi, 0.25rem);
}

/* A mask that names its rows puts the number in front of them. The column is
   only as wide as the number needs; the seven day columns keep sharing the
   rest in equal parts. */
.calendar--with-week-number .calendar__weekdays,
.calendar--with-week-number .calendar__week {
    grid-template-columns: minmax(0, auto) repeat(7, minmax(0, 1fr));
}

/* A cell at the end of every row (Month::$weekTemplate). Every row is a grid
   of its own, so the column takes a fixed width rather than its content's -
   otherwise each row would size it differently and the days would not line
   up. */
.calendar--with-week-summary .calendar__weekdays,
.calendar--with-week-summary .calendar__week {
    grid-template-columns: repeat(7, minmax(0, 1fr)) clamp(3.5rem, 15cqi, 6rem);
}

.calendar--with-week-summary.calendar--with-week-number .calendar__weekdays,
.calendar--with-week-summary.calendar--with-week-number .calendar__week {
    grid-template-columns: minmax(0, auto) repeat(7, minmax(0, 1fr)) clamp(3.5rem, 15cqi, 6rem);
}

.calendar__week-number {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: clamp(0.0625rem, 0.45cqi, 0.25rem);
    color: var(--calendar-muted);
    font-size: clamp(0.5rem, 1.35cqi, 0.75rem);
    font-weight: 700;
}

.calendar__weekday {
    color: var(--calendar-muted);
    font-size: clamp(0.5rem, 1.35cqi, 0.75rem);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

/* The cell a week template draws at the end of its row: the figures to the
   right, set off from the days by a rule. What it says - and in which
   colour - is the week template's business. */
.calendar__week-summary {
    font-size: clamp(0.5rem, 1.35cqi, 0.75rem);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: clamp(0.1rem, 0.55cqi, 0.3rem) clamp(0.05rem, 0.2cqi, 0.1rem);
    border-left: 1px solid rgb(0 0 0 / 8%);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.calendar__week-summary-head {
    text-align: right;
}

/* Tile heights. A week shows seven days instead of thirty-one, so the tile
   may grow tall enough for a day to carry more than its number. */
.calendar--month .calendar-day {
    min-height: clamp(1.5rem, 7.1cqi, 4rem);
}

.calendar--week .calendar-day {
    min-height: clamp(2.5rem, 12.4cqi, 7rem);
}

/* In the week the tile is nearly twice as tall as in the month, so the number
   grows with it. */
.calendar--week .calendar-day--plain .calendar-day__number {
    font-size: clamp(1rem, 4.9cqi, 2.75rem);
}

/* --- The tile itself -------------------------------------------------------- */

.calendar-day {
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* --- Weekend -------------------------------------------------------------------
   The days AbstractCalendar::$weekendDays names - Saturday and Sunday unless a
   calendar says otherwise - in every mask and day template: their column
   headings and their tiles, in --calendar-weekend-color and
   --calendar-weekend-background. So the text alone, or text and tile, without
   a new rule. A tile that brings a background of its own keeps it. */
.calendar__weekday--weekend,
.calendar-day--weekend {
    color: var(--calendar-weekend-color);
}

.calendar-day--weekend {
    border-radius: var(--calendar-radius);
    background-color: var(--calendar-weekend-background);
}

/* Without data the tile carries only its number - then it may be large and
   sit in the middle, instead of clinging to the top of an empty tile. The
   floor stays small: in a narrow wrapper the tile is only a couple of rem
   high, and a bigger number would not fit into it. */
.calendar-day--plain {
    align-items: center;
    justify-content: center;
}

.calendar-day--plain .calendar-day__number {
    font-size: clamp(0.75rem, 4.45cqi, 2.5rem);
    line-height: 1;
}

.calendar-day__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(0.1rem, 0.55cqi, 0.3rem) clamp(0.05rem, 0.2cqi, 0.1rem);
}

.calendar-day__weekday {
    color: var(--calendar-muted);
    font-size: clamp(0.5rem, 1.35cqi, 0.75rem);
    line-height: 1.2;
    text-transform: uppercase;
}

.calendar-day__number {
    font-size: clamp(0.5625rem, 1.45cqi, 0.8125rem);
    font-weight: 700;
    line-height: 1.2;
}

/* Any value inside a tile. The day templates put it there - the grid does not
   know what it says, but gives it one consistent shape. */
.calendar-day__cell {
    padding: clamp(0.1rem, 0.55cqi, 0.3rem) clamp(0.05rem, 0.2cqi, 0.1rem);
    font-size: clamp(0.5rem, 1.35cqi, 0.75rem);
    /* One line, always: a figure that wrapped in a narrow tile would make its
       row taller than the others. The columns are equal (minmax(0, 1fr)), so
       what does not fit is cut rather than widening its column. */
    white-space: nowrap;
    overflow: hidden;
    /* Figures of equal width, so values line up in columns even as they change */
    font-variant-numeric: tabular-nums;
}

/* --- Month line ------------------------------------------------------------------
   MonthLine: every day of the month a column of its own, in one row that
   scrolls sideways where it is wider than its place. A day's head and cells
   have fixed heights - each day is a box of its own, and the label column in
   front has to line up with all of them. The day is only as wide as "10,25"
   in its cells and its border need, with a narrow gap, so all 31 days of a
   month fit side by side on a wide screen. */
.calendar__line {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(2.125rem, 1fr);
    gap: 0.125rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

/* In a card the card's body already holds the line off its edges */
.component-card__body > .calendar--line {
    padding: 0;
}

.calendar__line--labelled {
    grid-template-columns: max-content;
}

.calendar-line-day {
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--calendar-radius);
    overflow: hidden;
}

.calendar-line__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    line-height: 1.1;
}

.calendar-line-day .calendar-line__head {
    border-bottom: 1px solid rgb(0 0 0 / 10%);
    background-color: rgb(0 0 0 / 3%);
}

.calendar-line__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    padding: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calendar-line-day__weekday {
    font-size: 0.6875rem;
    font-weight: 300;
    text-transform: uppercase;
}

.calendar-line-day__number {
    font-size: 1rem;
    font-weight: 700;
}

.calendar-line-labels__label {
    justify-content: flex-start;
    padding-right: 0.5rem;
    color: var(--calendar-muted);
    font-weight: 300;
}

/* --- Today -----------------------------------------------------------------------
   A calendar with showToday (AbstractCalendar::$showToday) sets today's tile
   apart in every mask and day template, in --calendar-today-color and
   --calendar-today-background. Today wins over the fills of the day templates
   and over the weekend - it is the one tile that has to be found at a glance -,
   by weight rather than by order: the application's rules for its day
   templates may come before or after this stylesheet. */
.calendar.calendar--show-today .calendar-day--today {
    border-radius: var(--calendar-radius);
    background-color: var(--calendar-today-background);
    color: var(--calendar-today-color);
}

.calendar.calendar--show-today .calendar-day--today .calendar-day__cell {
    color: inherit;
}

/* --- In a card -------------------------------------------------------------------
   A calendar in a card (LiveCalendar with a title) is read at a glance: the
   day numbers larger, the figures below them smaller than the number but
   still easy to read. The weekday names and week numbers stay small and
   light - they only label the columns and rows. The tiles grow with their
   content (min-height). */
.calendar--in-card .calendar__weekday,
.calendar--in-card .calendar__week-number {
    font-size: 0.75rem;
    font-weight: 300;
}

.calendar--in-card .calendar__weekdays {
    margin-bottom: clamp(0.0625rem, 0.45cqi, 0.25rem);
}

.calendar--in-card .calendar-day__number {
    font-size: clamp(0.875rem, 3.4cqi, 1.375rem);
    line-height: 1.1;
}

.calendar--in-card .calendar-day__cell,
.calendar--in-card .calendar__week-summary {
    font-size: clamp(0.5625rem, 2.5cqi, 1rem);
}