/* Emily — ledger styles. Owned by W6.
 *
 * Layout only: every colour, radius, shadow and spacing value comes from the
 * tokens in base.css. Mobile first; nothing here may cause horizontal scrolling.
 */

/* ------------------------------------------------------------ shared bits */

.ledger-view { gap: var(--space-4); }
.budget-view { gap: var(--space-4); }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.page-head .h1 { min-width: 0; overflow-wrap: anywhere; }

.list-host { min-width: 0; }
.list-foot { text-align: center; padding-top: var(--space-2); }
.row-center { justify-content: center; }

/* ------------------------------------------------------- expense list rows */

.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1) var(--space-1);
  border-bottom: 1px solid var(--border);
}
.day-label { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
/* Wraps rather than forcing the row wider than a 320px phone. */
.day-total { text-align: right; overflow-wrap: anywhere; }
.day-note { font-weight: 650; }

.exp-row { align-items: center; gap: var(--space-3); }

.exp-emoji {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 1.1rem;
  line-height: 1;
}

.exp-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exp-title {
  font-weight: 650;
  min-width: 0;
  overflow-wrap: anywhere;
}
.exp-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-dim);
  min-width: 0;
}
.exp-meta > span { min-width: 0; overflow-wrap: anywhere; }
.attach-mark { font-size: 0.9rem; line-height: 1; }

.exp-payer { flex: 0 0 auto; }

.exp-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.exp-amount { white-space: nowrap; font-size: 0.95rem; }
.exp-amount-sub { white-space: nowrap; font-size: 0.78rem; }
/* The "not counted" marker sits right under the original amount it qualifies. */
.exp-side .badge { margin-top: 2px; }

/* ------------------------------------------- spending with no exchange rate */
/* One quiet, warm note wherever a total is smaller than the family's real
 * spending, so nobody trusts a number that is missing money. Layout only: every
 * colour comes from the base.css tokens. */

.unc-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
}
.unc-note-lead {
  font-weight: 650;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.unc-note-detail {
  font-size: 0.82rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

/* At 320px the payer avatar costs more room than it earns: the meta line
 * already says who paid. */
@media (max-width: 420px) {
  .exp-payer { display: none; }
}

/* --------------------------------------------------------- expense detail */

.detail-amount {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 560px) {
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-label { font-size: 0.78rem; font-weight: 650; color: var(--text-faint); }
.kv-value { min-width: 0; overflow-wrap: anywhere; }

.receipt {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* --------------------------------------------------------- expense sheet */

/* `hidden` must win over author `display` rules on anything inside a sheet, so a
 * hidden field is actually out of the way. */
.sheet-body [hidden] { display: none !important; }

/* -------------------------------------------------------------- budgets */

.month-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.month-switcher .h2 {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.budget-card { gap: var(--space-2); }

.budget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.budget-figures {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.budget-spent { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }

/* Spending the backend left out of a budget because it had no exchange rate. */
.budget-unc {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--warn);
  overflow-wrap: anywhere;
}

.cat-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.cat-bar-name { flex: 0 1 45%; min-width: 0; }
.cat-bar-name .chip { max-width: 100%; }
.cat-bar-track { flex: 1 1 auto; min-width: 40px; }
.cat-bar-amount { flex: 0 0 auto; white-space: nowrap; font-size: 0.9rem; }

@media (max-width: 420px) {
  .cat-bar-row { flex-wrap: wrap; }
  .cat-bar-name { flex: 1 1 100%; }
}

/* ===========================================================================
 * Calendar — the agenda (W3)
 *
 * Appended by W3 for public/js/views/calendar.js. Layout only: every colour,
 * radius, shadow and space comes from the tokens in base.css.
 * ========================================================================= */

.calendar-view { gap: var(--space-4); }

/* The four ranges stay on one row at 320px: 44px targets, no horizontal scroll. */
.cal-range-host .segmented-item {
  flex: 1 1 auto;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  text-align: center;
}

.cal-filters .input, .cal-filters .select { flex: 1 1 150px; }

/* ------------------------------------------------------- day headings */

.cal-day-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1) var(--space-1);
  border-bottom: 1px solid var(--border);
}
.cal-day-label { min-width: 0; overflow-wrap: anywhere; }
.cal-day-when { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cal-day-count { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }

/* ------------------------------------------------------- agenda rows */

.cal-row { align-items: center; gap: var(--space-3); }

.cal-emoji {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 1.1rem;
  line-height: 1;
}

.cal-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-title { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.cal-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-dim);
  min-width: 0;
}
.cal-meta > span { min-width: 0; overflow-wrap: anywhere; }
.cal-time { font-variant-numeric: tabular-nums; }

/* A recurring event must never read as a one-off: the marker is a real pill with
 * the glyph and the word, and it sits in the row's own meta line. */
.cal-repeat {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 650;
}
.cal-repeat-big { padding: 5px 12px; font-size: 0.8rem; }

.cal-side { flex: 0 0 auto; display: flex; align-items: center; }
.cal-recurring { font-size: 0.95rem; line-height: 1; }

/* At 320px the meta line already carries the 🔁 marker: the extra glyph on the
 * right costs more room than it earns. */
@media (max-width: 420px) {
  .cal-side { display: none; }
}

/* ------------------------------------------------------ one event */

.cal-detail-title { min-width: 0; overflow-wrap: anywhere; }
.cal-detail-when { font-size: 0.95rem; color: var(--text-dim); }
.cal-detail-note {
  font-size: 0.92rem;
  color: var(--text-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cal-repeat-hint { overflow-wrap: anywhere; }

/* ===========================================================================
 * The event draft card in the chat (W3)
 *
 * Appended by W3 for public/js/views/chat.js. It reuses the expense card's own
 * classes (.expense-card, .expense-row, .expense-tags, .expense-prompt) so the
 * chat shows one card shape; these few rules are only what an event needs and an
 * expense has no equivalent of. Layout only: colours come from base.css tokens.
 * ========================================================================= */

.event-title-line {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* "Repeats every year" is the line a family has to notice before confirming a
 * birthday, so it is a real line of its own and not a footnote. */
.event-repeat-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.event-repeat-line-on {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.event-repeat-mark { font-size: 1rem; line-height: 1; flex: 0 0 auto; }

/* A correction shows what the amount was and what it becomes. */
.expense-was {
  color: var(--text-faint);
  text-decoration: line-through;
}

.expense-arrow {
  color: var(--text-dim);
  font-weight: 400;
}

/* ===========================================================================
 * The spending graph — the last 30 days (W6)
 *
 * Appended by W6 for public/js/views/ledger.js. One bar per day, scaled to the
 * busiest day, with the window's total printed beside it. Layout only: every
 * colour comes from the tokens in base.css.
 * ========================================================================= */

.chart-card { min-width: 0; }

/* The bars sit on this line, so the baseline is a real edge rather than the
 * bottom of a stretched drawing. */
.spend-chart-plot {
  min-width: 0;
  border-bottom: 1px solid var(--border);
}

/* `preserveAspectRatio="none"` on the SVG keeps this height and lets only the
 * bars' width follow the card's width, so the graph never distorts vertically. */
.spend-chart-svg {
  display: block;
  width: 100%;
  height: 110px;
}
@media (min-width: 560px) {
  .spend-chart-svg { height: 140px; }
}

/* One slot per day, so a day with no expense reads as an empty slot rather than
 * as a missing day. Today's slot is tinted so the right-hand end is obvious. */
.spend-chart-slot { fill: var(--surface-2); }
.spend-chart-slot-today { fill: var(--accent-soft); }
.spend-chart-bar { fill: var(--accent); }

.spend-chart-axis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.spend-chart-busiest { min-width: 0; overflow-wrap: anywhere; }

/* Nothing here animates — the graph is drawn once when the data arrives — so a
 * reduced-motion reader needs no override. The skeleton's shimmer is base.css's. */

/* ===========================================================================
 * Calendar — the month grid (W3, API.md §8d)
 *
 * Appended by W3 for public/js/views/calendar.js. Layout only: every colour,
 * radius, shadow and space comes from the tokens in base.css. Mobile first, and
 * nothing here may cause horizontal scrolling.
 *
 * The day cells are the app's smallest controls, so their size is arithmetic
 * rather than taste: a control must stay at least 44x44px on a phone. A 320px
 * viewport leaves 320 - 2*var(--space-4) = 288px of content, which is 41px per
 * column — under 44. So on a narrow screen the month card alone runs the full
 * width of the viewport (the outlet's own 16px padding is cancelled by an equal
 * negative margin, which cannot scroll: the outlet clips its overflow) and the
 * columns carry a 1px gap: (320 - 6*1) / 7 = 44.8px wide, with a 48px minimum
 * height. Wider screens put the card back in its place, centred and capped.
 * ========================================================================= */

.cal-view-toggle .segmented-item {
  flex: 1 1 auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  text-align: center;
}

/* --------------------------------------------------- month navigation */

/* The month view is one centred column: a wall calendar wider than 560px reads as
 * a spreadsheet, and the grid stops being a shape at a glance. */
.cal-month { gap: var(--space-4); width: 100%; max-width: 560px; margin-inline: auto; }
.cal-month-nav-host { gap: var(--space-2); }

.cal-month-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cal-month-bar .cal-month-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.cal-month-sub { gap: var(--space-2); }
.cal-month-sub .faint { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ the grid */

.cal-month-card { gap: var(--space-2); padding: var(--space-3); }

.cal-month-weekdays,
.cal-month-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.cal-month-weekdays { padding-bottom: var(--space-1); }
.cal-weekday {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 650;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-month-pad { min-height: 48px; }

/* One day: the number, then the marks, and the count in the corner. */
.cal-month-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 4px 5px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* A day with something on it reads as a real slot; a day without one is quiet
 * text, so the shape of the month is legible at a glance. The picked day keeps
 * its own tint even under the pointer, so the selection never flickers away. */
.cal-month-day:not(.cal-month-day-quiet) { background: var(--surface-2); }
.cal-month-day-quiet { cursor: default; }
.cal-month-day-quiet .cal-day-num { color: var(--text-faint); }
.cal-month-day:not(.cal-month-day-quiet):not(.cal-month-day-picked):hover {
  background: var(--surface-3);
}

.cal-day-num { font-size: 0.82rem; font-weight: 650; line-height: 1.1; }

/* The count: a day with four events must not look like a day with one. */
.cal-day-count {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dim);
}

.cal-day-marks {
  display: flex;
  align-items: center;
  gap: 1px;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.6rem;
  line-height: 1.1;
}
.cal-day-mark { line-height: 1; }
.cal-day-more { font-weight: 700; color: var(--text-dim); }

/* Today is marked distinctly: an accent ring and an accent number. */
.cal-month-day-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.cal-month-day-today .cal-day-num { color: var(--accent-text); }

/* The picked day is the one whose events are listed under the grid. */
.cal-month-day-picked {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.cal-month-day-picked .cal-day-num,
.cal-month-day-picked .cal-day-count { color: var(--accent-text); }

.cal-month-skel { height: 44px; border-radius: var(--radius-sm); }

/* With room to spare, a day is a square: the grid reads as a month rather than
 * as seven flat bars. */
@media (min-width: 560px) {
  .cal-month-day, .cal-month-pad { min-height: 0; aspect-ratio: 1 / 1; }
}

/* At 320px the seven columns need the whole viewport to clear 44px each: the
 * card alone bleeds past the outlet's padding, which its own overflow clips, and
 * `.card`'s `max-width: 100%` is lifted so the bleed is not clamped back. */
@media (max-width: 480px) {
  .cal-month-card {
    margin-inline: calc(-1 * var(--space-4));
    max-width: none;
    padding-inline: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .cal-month-weekdays,
  .cal-month-days { gap: 1px; padding-inline: 2px; }
}

/* ------------------------------------------------- the day under the grid */

.cal-day-panel { gap: var(--space-2); }
.cal-day-panel-title { min-width: 0; overflow-wrap: anywhere; }
.cal-day-hint { text-align: center; overflow-wrap: anywhere; }

/* ===========================================================================
 * Expenses — the analytics screen (/expenses/analytics)
 *
 * Appended for public/js/views/analytics.js. Layout only: every colour comes
 * from the tokens in base.css, so a theme repaints the whole screen. Mobile
 * first, and nothing here may cause horizontal scrolling.
 * ========================================================================= */

.an-view { gap: var(--space-4); }

/* The back link and the title sit together at the start of the head, so the
 * title keeps the room it needs rather than being squeezed to the middle. */
.an-head-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.an-head-left .h1 { min-width: 0; overflow-wrap: anywhere; }

.an-controls { min-width: 0; }
.an-custom-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.an-custom-row .field { flex: 1 1 150px; min-width: 0; }
/* `display: flex` above would otherwise beat the user-agent's `[hidden]` rule,
 * and a period that is not a custom range would still show two date fields. */
.an-custom-row[hidden],
.an-hint[hidden] { display: none !important; }
.an-range-words { margin: 0; overflow-wrap: anywhere; }
.an-hint { margin: 0; overflow-wrap: anywhere; }
.an-hint-warn { color: var(--warn); }

/* The headline figures. Two to a row on a phone, four when there is room, so a
 * figure is never squeezed under its own label. */
.an-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 620px) {
  .an-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.an-kpi-note { font-size: 0.78rem; overflow-wrap: anywhere; }

.an-card { min-width: 0; }

/* -------------------------------------------------- the bar chart, over time */

/* The bars sit on this line, so the baseline is a real edge rather than the
 * bottom of a stretched drawing. */
.an-chart-plot {
  min-width: 0;
  border-bottom: 1px solid var(--border);
}

/* `preserveAspectRatio="none"` keeps this height and lets only the bars' width
 * follow the card's width, so the chart never distorts vertically. */
.an-chart-svg {
  display: block;
  width: 100%;
  height: 110px;
}
@media (min-width: 560px) {
  .an-chart-svg { height: 140px; }
}

/* One slot per bucket, so a stretch with no expense reads as an empty slot
 * rather than as a missing day. The bucket holding today is tinted, so where "now"
 * falls on the axis is obvious. */
.an-chart-slot { fill: var(--surface-2); }
.an-chart-slot-today { fill: var(--accent-soft); }
.an-chart-bar { fill: var(--accent); }

.an-axis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.an-busiest { min-width: 0; overflow-wrap: anywhere; }

/* The numbers behind the chart, for a reader who wants the figures rather than
 * the shape. */
.an-details summary { cursor: pointer; }
.an-table {
  width: 100%;
  margin-top: var(--space-2);
  border-collapse: collapse;
  font-size: 0.85rem;
}
.an-table th,
.an-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
}
.an-table th[scope='col']:not(:first-child),
.an-table td.num { text-align: right; white-space: nowrap; }
.an-table tbody tr:last-child th,
.an-table tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------- the ring, by category */

/* A phone stacks the ring over its legend; with room they sit side by side, so the
 * legend is never squeezed into a column three words wide. */
.an-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
@media (min-width: 560px) {
  .an-split { flex-direction: row; align-items: center; gap: var(--space-5); }
}

.an-donut {
  position: relative;
  width: 148px;
  height: 148px;
  flex: 0 0 auto;
}
.an-donut-svg { display: block; width: 100%; height: 100%; }
.an-donut-track { stroke: var(--surface-2); }
/* Each slice's own stroke colour is set on the element, because a presentation
 * attribute cannot resolve a `var()`. */
.an-donut-seg { transition: none; }

.an-donut-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 26px;
  text-align: center;
}
.an-donut-total {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The legend is the ring's real content: every category with its own amount and
 * its share, as text. */
.an-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}
.an-legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.an-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px var(--border);
}
.an-legend-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.an-legend-amount { flex: 0 0 auto; white-space: nowrap; font-size: 0.9rem; }
.an-legend-share { flex: 0 0 auto; min-width: 3.2em; text-align: right; }

/* --------------------------------------------- who paid, and by month */

.an-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.an-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.an-bar-name {
  flex: 0 1 34%;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}
/* A month's name is a short fixed word, so the bars line up down the column. */
.an-bar-month { flex: 0 0 4.4em; }
.an-bar-track {
  flex: 1 1 auto;
  min-width: 40px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.an-bar-fill {
  height: 100%;
  min-width: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.an-bar-amount { flex: 0 0 auto; white-space: nowrap; font-size: 0.9rem; }
.an-bar-share { flex: 0 0 auto; min-width: 3.2em; text-align: right; }

/* On a narrow phone the bar would be a sliver between a name and two figures,
 * so it drops to its own full-width line and the figures share the line above. */
@media (max-width: 520px) {
  .an-bar-row { flex-wrap: wrap; }
  .an-bar-track { flex: 1 1 100%; order: 9; }
  .an-bar-amount { margin-left: auto; }
  .an-bar-month { flex: 0 0 auto; }
}


/* Only the selection surface moves; date text remains still and readable. */
.cal-month-day { position: relative; isolation: isolate; }
.cal-month-day.cal-month-day-picked { background: transparent; overflow: visible; z-index: 1; }
.cal-day-highlight { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent-soft); pointer-events: none; }