@import "/injurytracker-theme/component-styles/app-bar.css";
@import "/injurytracker-theme/component-styles/enum-with-other.css";
@import "/injurytracker-theme/component-styles/grid.css";
@import "/injurytracker-theme/component-styles/navi-drawer.css";
@import "/injurytracker-theme/component-styles/view-frame.css";
@import "/injurytracker-theme/component-styles/main-layout.css";
@import "/injurytracker-theme/component-styles/setup-hub.css";
@import "/injurytracker-theme/component-styles/coach-mark.css";
@import "/injurytracker-theme/component-styles/contact-us.css";
@import "/injurytracker-theme/shared-styles.css";
@import "/injurytracker-theme/responsive.css";

/* IBM Plex, self-hosted under OFL-1.1 (licence in fonts/OFL.txt).

   Declared AFTER the @import rules above, never before them: CSS requires
   @import to precede every other rule except @charset and @layer, so a
   @font-face placed at the top of the file would silently invalidate all
   eight imports and drop the rest of the theme.

   Self-hosted rather than linked from a font CDN. This app handles minors'
   medical records under a BAA and a FERPA agreement; a CDN <link> would send
   every user's IP to a third party on every page load. Plex is OFL, so
   bundling is permitted. Do not replace these with a Google Fonts link. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/injurytracker-theme/fonts/IBMPlexSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/injurytracker-theme/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/injurytracker-theme/fonts/IBMPlexSans-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/injurytracker-theme/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

:root {
  --app-bar-height: var(--lumo-size-l);

  /* Brand, sampled from IconOnlyT.png. Two values, both consumed below --
     no spare tokens. Naming the logo once means everything else references
     it instead of re-sampling it. */
  --brand-green: hsl(100 57% 27%);
  --brand-pink:  hsl(340 72% 88%);

  /* The app-bar title green is kept as-is by explicit choice. Hue 120 is a
     pure green the logo does not contain, but correcting only the band
     behind it lifts the title from 4.59:1 to 4.77:1 -- AA, not AAA.
     Reversible in one line if that trade is ever revisited. */
  --app-bar-color: hsl(120, 59%, 30%);

  /* Was hue 0 -- a red tint, so the band read faintly "alert" rather than
     brand. The logo's pink sits at 336-353.

     This is the ONLY unconditional declaration. The derived version lives in
     the @supports block below, and must stay there -- see the note on that
     block for why a bare second declaration silently breaks this. */
  --navbar-bg: hsl(340, 72%, 96%);

  /* Kills the blue. Retones nav active state, links, tabs, primary buttons,
     grid sort arrows, checkbox + radio fills, focus rings, and every
     .casting-* rule already written. */
  --lumo-primary-color:          var(--brand-green);
  --lumo-primary-color-50pct:    hsl(100 57% 27% / .5);
  --lumo-primary-color-10pct:    hsl(100 57% 27% / .1);
  --lumo-primary-text-color:     hsl(100 60% 22%);
  --lumo-primary-contrast-color: #fff;

  /* Warm grays. Stock Lumo contrast is blue-tinted, which is why field
     backgrounds read cold next to the pink band. */
  --lumo-contrast-5pct:  hsl(35 18% 94%);
  --lumo-contrast-10pct: hsl(35 15% 88%);
  --lumo-contrast-20pct: hsl(35 12% 79%);
  --lumo-contrast-30pct: hsl(33 10% 68%);
  --lumo-contrast-40pct: hsl(32  9% 57%);
  --lumo-contrast-60pct: hsl(30  8% 42%);

  /* Three steps, and the lightest is bounded by contrast rather than taste:
     Vaadin puts tertiary on placeholders and hints over the 5pct field fill,
     so anything lighter than 40% fails AA at 13px. 52% -- the
     obvious-looking choice -- measures 3.0:1. Gaps stay wide enough to read
     as a hierarchy: 16 / 30 / 40. Do not "correct" tertiary lighter. */
  --lumo-body-text-color:      hsl(90 12% 16%);
  --lumo-secondary-text-color: hsl(60  9% 30%);
  --lumo-tertiary-text-color:  hsl(50  8% 40%);

  /* Success must NOT be the brand green, or a Signed badge becomes
     indistinguishable from a primary button. 50 degrees apart.
     The -10pct variants are not optional: shared-styles.css fills
     .app-badge-error, .note-status-archived, .diff-removed, .note-status-signed
     and .diff-inserted from them. Override only the base tokens and each
     badge keeps a stock blue-tinted fill under freshly re-hued text. */
  --lumo-success-color:       hsl(150 55% 30%);
  --lumo-success-color-10pct: hsl(150 55% 30% / .1);
  --lumo-success-text-color:  hsl(150 60% 22%);
  --lumo-error-color:         hsl(355 62% 45%);
  --lumo-error-color-10pct:   hsl(355 62% 45% / .1);
  --lumo-error-color-50pct:   hsl(355 62% 45% / .5);
  --lumo-error-text-color:    hsl(355 65% 36%);
  --lumo-warning-color:       hsl(38 85% 52%);
  --lumo-warning-color-10pct: hsl(38 85% 52% / .1);
  --lumo-warning-text-color:  hsl(32 80% 30%);

  /* Type. Georgia ships old-style proportional numerals -- its 1 is 7.73px
     and its 0 is 11.05px, so figures physically cannot align in a grid
     column. Plex's digits all measure 9.60px, spread 0.00, and it keeps
     1/l/I and 0/O distinct, which matters for ICD-10 codes like S83.511. */
  --lumo-font-family: 'IBM Plex Sans', system-ui, sans-serif;

  /* Hierarchy by weight and space, not by size. A data tool needs a short
     scale; Lumo's default is a display scale. */
  --lumo-font-size-xxs: 0.6875rem; /* 11 calendar chips  */
  --lumo-font-size-xs:  0.8125rem; /* 13 badges, hints   */
  --lumo-font-size-s:   0.875rem;  /* 14 grid, secondary */
  --lumo-font-size-m:   1rem;      /* 16 body, fields    */
  --lumo-font-size-l:   1.1875rem; /* 19 section titles  */
  --lumo-font-size-xl:  1.5rem;    /* 24 app bar title   */
  --lumo-font-size-xxl: 2rem;      /* 32 view headings   */

  --lumo-line-height-xs: 1.25;
  --lumo-line-height-s:  1.4;
  --lumo-line-height-m:  1.6;

  --transition-duration-s: 160ms;
  --transition-duration-m: 240ms;
  --transition-duration-l: 320ms;

  height: 100vh;
  width: 100vw;
}

/* Derives the band from the ribbon so the two cannot drift apart when someone
   retunes the pink -- but only where the engine can actually compute it.

   The @supports gate is load bearing, and this is NOT the pattern TIER-1.md §1
   specifies. That doc calls for two bare declarations, literal first and derived
   second, describing the first as a fallback. It is not one, and the resulting
   navbar rendered gray.

   Custom properties accept ANY token sequence at parse time. A relative-colour
   value is therefore always accepted as a declaration and, being later, always
   wins the cascade -- on every browser, whether or not it supports the syntax.
   The failure only surfaces later: substituting it into
   `background-color: var(--navbar-bg)` yields something uncomputable, the
   declaration becomes invalid at computed-value time, and the property falls to
   its INITIAL value. It does not revert to the earlier declaration. The band
   then loses its colour entirely and vaadin-app-layout's own base rule
   (background: var(--vaadin-app-layout-navbar-background,
   var(--vaadin-background-container)) -> --lumo-contrast-5pct) shows through.

   @supports is evaluated before the declaration ever enters the cascade, so an
   engine without relative colour syntax never sees it and the literal above
   stands. Do not "simplify" this back into two adjacent declarations. */
@supports (color: hsl(from red h s 96%)) {
  :root {
    --navbar-bg: hsl(from var(--brand-pink) h s 96%);
  }
}

html,
body {
  height: 100vh;
  width: 100vw;
}

/* Fallback insurance. Plex's digits are already equal-width, so this is a
   no-op on the primary face -- it earns its keep when a woff2 fails to load
   and a proportional system font takes over mid-grid. */
vaadin-grid,
vaadin-date-picker,
.monospace,
.app-badge {
  font-variant-numeric: tabular-nums;
}

/* Plex's line box runs taller than Georgia's at the same size, so rows would
   grow ~2px each -- 5.5% fewer visible rows, about one per eighteen. This is
   what makes the swap a density win rather than a density trade. */
vaadin-grid::part(cell) {
  line-height: 1.3;
}

* {
  box-sizing: border-box;
}

vaadin-button {
  min-width: 44px;
}

/* Primary is the one action a screen is asking for, so its three states have to be legible at
   a glance. Lumo's own are not: hover is a 5% black overlay, worth about 2 L* on a fill this
   dark, and disabled is --lumo-contrast-30pct -- a warm mid-gray that still reads as a filled
   control, so "not yet" and "go" differ only in shade. Below, the presence of the fill is the
   enabled signal, and the shadow is the one place in this theme that lifts anything.

   Every rule is stated as brightness or a neutral, never as a second green, for two reasons:
   there is one brand green and everything references it (see --brand-green above, and the
   anchor-button hover in shared-styles.css, which derives its shade the same way), and
   theme="primary" also carries the error, success and contrast variants -- a literal green
   here would turn a red Delete button green on press. */
vaadin-button[theme~="primary"] {
  box-shadow: 0 1px 2px hsl(40 12% 22% / .26);
  transition: filter var(--transition-duration-s) ease,
              box-shadow var(--transition-duration-s) ease;
}

vaadin-button[theme~="primary"]:not([disabled]):hover {
  filter: brightness(1.15);
  box-shadow: 0 2px 6px hsl(40 12% 22% / .3);
}

/* Ordered after :hover deliberately -- the two selectors have equal specificity and both match
   while a button is being pressed, so the later one has to be the pressed state. */
vaadin-button[theme~="primary"]:not([disabled])[active] {
  filter: brightness(0.88);
  box-shadow: none;
}

vaadin-button[theme~="primary"][disabled] {
  background-color: var(--lumo-contrast-10pct);
  color: var(--lumo-contrast-40pct);
  box-shadow: none;
}

/* Lumo dims a disabled primary's parts to .7 over its own darker fill; against the pale fill
   above that drops the label under 2:1, so it carries its own muted colour instead. */
vaadin-button[theme~="primary"][disabled]::part(label),
vaadin-button[theme~="primary"][disabled]::part(prefix),
vaadin-button[theme~="primary"][disabled]::part(suffix) {
  opacity: 1;
}

.root__view-container {
  margin: var(--lumo-space-s);
}

.app-header-outer,
.app-footer-outer {
  z-index: 3;
}

vaadin-grid-cell-content {
  text-overflow: ellipsis;
}

vaadin-text-field {
  align-self: auto;
}

.form-layout {
  padding-left: var(--lumo-space-s);
  padding-right: var(--lumo-space-s);
  margin-bottom: var(--lumo-space-s);
}

.login-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button-layout {
  flex-direction: row;
}

.content-layout {
  box-sizing: border-box;
  height: 100%;
}

.content-layout .form-layout:last-child {
  padding-bottom: 40px;
}

.content-margin {
  margin-left: var(--lumo-space-l);
  margin-right: var(--lumo-space-l);
  margin-top: var(--lumo-space-l);
}

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

.flex-row {
  display: flex;
  flex-direction: row;
}

.text-span {
  text-overflow: ellipsis;
}

.text-error {
  color: var(--lumo-error-color);
  fill: var(--lumo-error-color);
}

.text-success {
  color: var(--lumo-success-color);
  fill: var(--lumo-success-color);
}

.mobile-template {
  flex-direction: column;
  line-height: var(--lumo-line-height-m);
  overflow: hidden;
}

.date-selection {
  flex-direction: column;
  margin-top: var(--lumo-space-s);
  margin-bottom: var(--lumo-space-s);
  margin-right: var(--lumo-space-s);
}

/* .details-drawer-footer {
  background-color: var(--lumo-contrast-5pct);
  padding-left: var(--lumo-space-m);
  padding-right: var(--lumo-space-m);
  padding-top: var(--lumo-space-s);
  width: 100%;
}

.details-drawer-header {
  flex-direction: column;
  box-shadow: inset 0 -1px var(--lumo-contrast-10pct);
  width: 100%;
} */

.margin-horizontal-s {
  margin-left: var(--lumo-space-s);
  margin-right: var(--lumo-space-s);
}

.margin-vertical-l {
  margin-top: var(--lumo-space-l);
  margin-bottom: var(--lumo-space-l);
}

.form-border {
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: var(--lumo-border-radius-m);
}

/* Twelve restriction checkboxes flow into columns instead of one tall list. */
.restrictions-group::part(group-field) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  column-gap: var(--lumo-space-m);
}

.bold-title {
  font-weight: bold;
}

.title {
  font-size: 1rem;
}

.control-title {
  font-size: 1rem;
}

.view-border {
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  padding: var(--lumo-space-m);
}

.monospace {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.bar-vertical {
  display: flex;
  flex-direction: column;
}

.chart-container {
  margin-bottom: var(--lumo-space-m);
  padding: var(--lumo-space-s);
}

.agreement-content {
  overflow: auto;
  border: 1px solid var(--lumo-contrast-20pct);
  padding: var(--lumo-space-m);
  border-radius: var(--lumo-border-radius-m);
  background-color: var(--lumo-base-color);
}

.subscription-layout {
  display: flex;
  flex-direction: column;
  width: 700px;
}

.warning-banner {
  background-color: var(--lumo-warning-color-10pct);
  word-wrap: break-word;
  padding: var(--lumo-space-s);
}

.login-field {
  width: 250px;
}

.email-button {
  max-width: 300px;
  width: 200px;
}

.header-filter {
  max-width: 100%;
  width: 100%;
}

.grid-action-column {
  padding: 0;
}

.grid-action-button {
  padding: 0;
  min-width: 30px;
}

.form-item-spacing {
  padding-bottom: var(--lumo-space-l);
}

.selector-spacing-m {
  margin-bottom: var(--lumo-space-m);
}

.selector-spacing-s {
  margin-bottom: var(--lumo-space-s);
}

.selector-content {
  padding-bottom: var(--lumo-space-l);
}

.show-diff {
  background-color: var(--lumo-warning-color-10pct);
}

vaadin-grid-cell-content {
  white-space: normal;
  overflow-wrap: break-word;
}

/* --bp-tablet (900px) */
@media only screen and (max-width: 899px) {
  .title {
    font-size: 1.25rem;
  }
  .control-title {
    font-size: 0.9rem;
  }
}

/* --bp-phone (600px) */
@media only screen and (max-width: 599px) {
  .text-span {
    font-size: 1rem;
  }
  .content-layout {
    font-size: 1rem;
  }
  .title {
    font-size: 1rem;
  }
  .control-title {
    font-size: 0.8rem;
  }
  .button-layout {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--lumo-base-color);
  }
}

/* The tab is setSizeFull with the "Showing" Select stacked above the panes. Column flex is what
   makes the panes take the space the selector leaves; with the panes at height:100% instead they
   overflowed the tab by the selector's height, and neither box scrolls. */
/* Phase 6 exposure controls on the Season tab. Baseline alignment so the status text sits on the
   Select's label line rather than floating against the button's box. */
.season-exposure-bar {
    display: flex;
    align-items: baseline;
    gap: var(--lumo-space-s);
    padding: var(--lumo-space-s) 0;
    flex-wrap: wrap;
}

.season-exposure-status {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
}

.day-by-day-tab {
    display: flex;
    flex-direction: column;
}

/* The "Showing" range selector and the tour print anchor share this wrapper; without an explicit row
   rule they fell back to .day-by-day-tab's column flex and ended up stacked and misaligned. */
.day-by-day-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lumo-space-m);
}

.day-by-day-panes {
    display: flex;
    flex-direction: row;
    gap: var(--lumo-space-m);
    flex: 1;
    min-height: 0;
    height: auto;
}

.day-by-day-panes .tour-grid {
    flex: 1 1 55%;
    min-width: 0;
}

.day-by-day-panes .daily-sheet-pane {
    flex: 1 1 45%;
    min-width: 0;
    overflow-y: auto;
}

/* Narrow viewports stack the panes. The tour grid keeps its four columns and
   scrolls horizontally -- a genuine phone treatment of it is out of scope (spec §8.5). */
@media only screen and (max-width: 899px) {
    .day-by-day-panes {
        flex-direction: column;
    }
}

.daily-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Only applied when editAllowed -- the click listener that opens CallDialog is attached in that same
   branch, so this is a genuine affordance, not a promise the element can't keep. */
.sheet-call-editable {
    cursor: pointer;
}

.sheet-call-editable:hover {
    background: var(--lumo-contrast-5pct);
}

/* A notice is a band across the sheet, not one more line of call text. */
.sheet-banner {
    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: var(--lumo-border-radius-m);
    background-color: var(--lumo-contrast-5pct);
    padding: var(--lumo-space-s);
    margin-bottom: var(--lumo-space-s);
    font-weight: 600;
}

/* WARNING is a colour band on the printed sources ("STAGE IS NOT AVAILABLE TILL 7PM"). Rendering it
   the same as an INFO notice throws away the severity the model records. */
.sheet-banner-warning {
    border-color: var(--lumo-error-color);
    background-color: var(--lumo-error-color-10pct);
    color: var(--lumo-error-text-color);
}

/* The OUT: footer line. A rule above it separates it from the last call, matching the source
   sheets where OUT sits below a divider under the day's body. */
.sheet-out-strip {
    border-top: 1px solid var(--lumo-contrast-20pct);
    margin-top: var(--lumo-space-m);
    padding-top: var(--lumo-space-s);
    font-weight: 600;
}

/* The per-window edit targets sit inline with the OUT: text, reading as names rather than buttons. */
.sheet-out-edit {
    min-width: 0;
    padding: 0 var(--lumo-space-xs);
    margin-left: var(--lumo-space-xs);
    font-weight: 400;
}

/* Each call is one card. Without the boundary, a call carrying two activities reads as one run of
   undifferentiated lines and which "-> N called" belongs to which activity becomes a guess -- a
   who-is-called misreading produced purely by styling. */
.sheet-call {
    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: var(--lumo-border-radius-m);
    padding: var(--lumo-space-s);
    margin-bottom: var(--lumo-space-m);
}

.sheet-call-header {
    font-weight: 600;
    padding-bottom: var(--lumo-space-xs);
}

/* Indent plus a rule: the indent subordinates the activity to its call's header, the rule separates
   one activity from the next inside the same call. */
.sheet-activity {
    margin-left: var(--lumo-space-m);
    padding-top: var(--lumo-space-xs);
    border-top: 1px solid var(--lumo-contrast-10pct);
}

/* ---- Scheduling phase 5: Calendar tab ---------------------------------- */

/* Colour carries two independent meanings here: the block type tints a cell's top edge (where the
   company is) and the entry type colours each call's dot (what happens). Both appear in the legend.
   Keeping them as an edge and a dot -- different shapes, not just different hues -- is what stops
   them reading as one scale. */
.schedule-calendar-tab {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.calendar-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lumo-space-s);
}

.calendar-month-label {
    font-weight: 600;
    min-width: 11em;
    text-align: center;
}

.calendar-counts {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lumo-space-s);
    align-items: center;
    font-size: var(--lumo-font-size-xs);
    color: var(--lumo-secondary-text-color);
    margin: var(--lumo-space-xs) 0;
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.calendar-swatch {
    width: 14px;
    height: 6px;
    border-radius: 2px;
    display: inline-block;
    background: var(--calendar-block-color, var(--lumo-contrast-30pct));
}

.calendar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    background: var(--calendar-call-color, var(--lumo-contrast-40pct));
}

.calendar-grid,
.calendar-day-list {
    gap: 1px;
    background: var(--lumo-contrast-10pct);
    border: 1px solid var(--lumo-contrast-10pct);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-weekday {
    background: var(--lumo-contrast-5pct);
    font-size: var(--lumo-font-size-xxs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-align: center;
    padding: 4px 6px;
}

.calendar-cell {
    background: var(--lumo-base-color);
    min-height: 5.5em;
    padding: 4px 6px;
    font-size: var(--lumo-font-size-xs);
    line-height: 1.3;
    cursor: pointer;
    box-shadow: inset 0 3px 0 var(--calendar-block-color, transparent);
}

.calendar-cell:focus-visible {
    outline: 2px solid var(--lumo-primary-color);
    outline-offset: -2px;
}

/* Pads stand in for the days before the 1st and after the last. They are not neighbouring-month
   dates -- the month grid never borrows from its neighbours -- so they carry nothing and take no
   click. */
.calendar-pad {
    background: var(--lumo-contrast-5pct);
    cursor: default;
    box-shadow: none;
}

/* A cell whose date falls outside the season's own bounds -- the first/last rendered month
   routinely spills past [season start, season end]. Recedes like .calendar-pad (no pointer, muted
   background) but, unlike a pad, this is a real date: the day number's colour is set back to the
   normal body colour below, since `opacity` (unlike `color`) composites the whole subtree and a
   child can't opt back out of an ancestor's opacity. */
.calendar-outside-season {
    background: var(--lumo-contrast-5pct);
    cursor: default;
    box-shadow: none;
    color: var(--lumo-disabled-text-color);
}

.calendar-outside-season .calendar-day-number {
    color: var(--lumo-body-text-color);
}

.calendar-day-number {
    font-weight: 700;
    display: block;
}

.calendar-band-chip {
    display: inline-block;
    background: var(--calendar-block-color, var(--lumo-contrast-60pct));
    color: var(--lumo-base-color);
    font-size: var(--lumo-font-size-xxs);
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    margin-bottom: 2px;
}

.calendar-call {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 1px;
}

.calendar-more {
    display: block;
    margin-top: 2px;
    color: var(--lumo-secondary-text-color);
}

.calendar-off {
    background: repeating-linear-gradient(-45deg, var(--lumo-base-color), var(--lumo-base-color) 6px,
            var(--lumo-contrast-5pct) 6px, var(--lumo-contrast-5pct) 12px);
}

/* A failed month load. Spans every column of the grid so it reads as one message rather than a
   single stray cell; the day list is single-column already, so this is a no-op there. */
.calendar-load-error {
    grid-column: 1 / -1;
    padding: var(--lumo-space-m);
    text-align: center;
    color: var(--lumo-error-text-color);
}

.block-rehearsal  { --calendar-block-color: #7a8aa6; }
.block-engagement { --calendar-block-color: #4a7fd4; }
.block-tour       { --calendar-block-color: #6b4ad4; }
.block-travel     { --calendar-block-color: #d4864a; }
.block-off        { --calendar-block-color: #9aa5b5; }
.block-tbd        { --calendar-block-color: #b5a04a; }

.call-performance { --calendar-call-color: #d4344a; }
.call-rehearsal   { --calendar-call-color: #4a9fd4; }
.call-tech        { --calendar-call-color: #7a4ad4; }
.call-class       { --calendar-call-color: #4ab58a; }
.call-travel      { --calendar-call-color: #d4864a; }
.call-other       { --calendar-call-color: #8a8f99; }

/* Phone rendering (ViewportContext.PHONE, <=599px). The switch is Java-side because CSS cannot
   restructure the DOM; these rules only re-lay-out what the day list emits. */
.calendar-day-list {
    display: flex;
    flex-direction: column;
}

.calendar-day-row {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.calendar-weekday-inline {
    font-size: var(--lumo-font-size-xxs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lumo-secondary-text-color);
}