/* =====================================================================
   Screen styles for #/calendar — owned by the calendar screen agent.
   Builds on the design-system primitives (.ui-cal, .ui-month, .ui-daystrip,
   .ui-dayhead, .ui-chip, .ui-kv, .ui-callout…). Classes prefixed calendar-.
   Layer identity = SHAPE + ICON (hue stays the subject's):
     orar solid tint · opționale dashed · activități solid fill · privat hatch + lock
     partajat dotted violet + share · propunere dashed (AI violet) + tag
   ===================================================================== */

.calendar-root { min-width: 0; }
.calendar-root .sh-pagehead { padding-bottom: var(--sp-3); }
.calendar-head-btn .ui-i { width: 18px; height: 18px; }

/* ---------------- toolbar ---------------- */
.calendar-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.calendar-bar__nav { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.calendar-bar__nav [aria-disabled="true"] { opacity: .55; }
.calendar-bar__range { flex: 1 1 220px; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-title-l); line-height: 1.2; letter-spacing: -.01em; }
.calendar-bar__tag { font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0; color: var(--on-primary-soft); background: var(--primary-soft); padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.calendar-bar__seg { flex-shrink: 0; }
@media (max-width: 767px) {
  .calendar-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "range nav" "seg seg"; gap: var(--sp-3) var(--sp-2); }
  .calendar-bar__range { grid-area: range; font-size: var(--fs-title); }
  .calendar-bar__nav { grid-area: nav; gap: 8px; }
  .calendar-bar__seg { grid-area: seg; display: flex; width: 100%; }
  .calendar-bar__seg .ui-seg__btn { flex: 1; }
}

/* ---------------- layer chips + swatches ---------------- */
.calendar-layers { margin-bottom: var(--sp-3); }
.calendar-layer { gap: 7px; }
.calendar-layer[aria-pressed="true"] { background: var(--surface); border-color: var(--line-strong); color: var(--ink); box-shadow: var(--sh-1); }
.calendar-layer[aria-pressed="false"] { background: transparent; border-style: dashed; color: var(--muted); }
.calendar-layer[aria-pressed="false"] .calendar-sw { filter: grayscale(1); opacity: .45; }
.calendar-layer[aria-pressed="false"] > .ui-i { opacity: .6; }
.calendar-layer--more { background: transparent; color: var(--primary-ink); border-color: transparent; font-weight: var(--fw-semibold); }
.calendar-layer--more:hover { background: var(--primary-soft); color: var(--on-primary-soft); border-color: transparent; }

.calendar-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.calendar-sw--orar { background: linear-gradient(135deg, var(--sub-clr) 0 34%, var(--sub-mem) 34% 67%, var(--sub-eng) 67%); }
.calendar-sw--optionale { background: var(--surface); border: 1.5px dashed var(--sub-mem); }
.calendar-sw--activitati { background: var(--sub-inot); }
.calendar-sw--clasa { background: var(--primary); }
.calendar-sw--familie { background: repeating-linear-gradient(135deg, var(--aud-private-bg) 0 2px, transparent 2px 4px); border: 1px solid var(--aud-private-bg); }
.calendar-sw--partajat { background: var(--aud-shared-bg); border: 1.5px dotted var(--aud-shared-fg); }
.calendar-sw--ridicari { background: var(--accent); }

/* ---------------- notes & footnotes ---------------- */
.calendar-notes { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.calendar-note { padding: 10px 14px; }
.calendar-note .ui-link { white-space: nowrap; }
.calendar-foot { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--sp-3); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.calendar-foot .ui-i { margin-top: 2px; flex-shrink: 0; }
.calendar-empty { padding: var(--sp-5); }
.calendar-muted { color: var(--muted); margin-bottom: var(--sp-3); }

/* ---------------- desktop master / detail ---------------- */
.calendar-main { min-width: 0; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); gap: var(--sp-6); align-items: start; }
.calendar-panel {
  position: sticky; top: calc(var(--sh-top-h) + var(--sp-4)); max-height: calc(100dvh - var(--sh-top-h) - var(--sp-8)); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--sp-5);
}
.calendar-panel__sec + .calendar-panel__sec { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.calendar-panel__sec > .ui-eyebrow { display: block; margin-bottom: var(--sp-3); }
.calendar-panel .ui-dayhead { padding-top: 0; }

/* ---------------- week / day grid (on top of .ui-cal) ---------------- */
.calendar-grid .ui-cal__head, .calendar-grid .ui-cal__allday, .calendar-grid .ui-cal__grid { grid-template-columns: var(--gutter-w) var(--cal-cols, repeat(var(--days), minmax(0, 1fr))); }
.calendar-dayhead { cursor: pointer; background: transparent; transition: background-color var(--dur-1); }
.calendar-dayhead:hover { background: var(--surface-3); }
.calendar-dayhead.is-weekend { padding-inline: 0; }
.calendar-dayhead.is-picked:not(.is-today) b { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.calendar-grid .ui-cal__allday > :not(:first-child) { align-content: start; }
.calendar-col--off { background-image: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--accent) 10%, transparent) 8px 16px); }

.calendar-ev {
  /* weighted lanes: --lane = offset, --span = own weight, --lanes = total weight of the overlap group */
  left: calc(3px + (100% - 6px) * var(--lane, 0) / var(--lanes, 1)); right: auto;
  width: calc((100% - 6px) * var(--span, 1) / var(--lanes, 1) - 2px);
}
.calendar-ev .ui-cal-ev__title { display: flex; align-items: center; gap: 3px; min-width: 0; }
.calendar-ev .ui-cal-ev__title .ui-i { flex-shrink: 0; margin-right: 0; }
.calendar-ev__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* multi-line cells: narrow lanes, club slots, the single-day grid */
.calendar-ev.is-narrow .ui-cal-ev__title, .calendar-ev--opt .ui-cal-ev__title, .calendar-grid--day .calendar-ev .ui-cal-ev__title { align-items: flex-start; white-space: normal; }
.calendar-ev.is-narrow .ui-cal-ev__title .ui-i, .calendar-ev--opt .ui-cal-ev__title .ui-i, .calendar-grid--day .calendar-ev .ui-cal-ev__title .ui-i { margin-top: 1px; }
.calendar-ev.is-narrow .calendar-ev__label, .calendar-ev--opt .calendar-ev__label, .calendar-grid--day .calendar-ev__label {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; hyphens: auto;
}
.calendar-ev.is-short { padding-block: 2px; }
.calendar-ev.is-short .ui-cal-ev__time, .calendar-ev.is-narrow .ui-cal-ev__time { display: none; }
.calendar-ev--event { box-shadow: var(--sh-1); border-left-width: 4px; z-index: 2; }
.calendar-ev--act { background-color: var(--_fg); color: var(--surface); border-left-color: color-mix(in srgb, var(--_fg) 70%, #000); z-index: 2; }
.calendar-ev--meal { background-color: var(--surface-2); color: var(--muted); border-left-color: var(--line-strong); }
.calendar-ev--point { min-height: 20px; background-color: var(--surface-2); color: var(--muted); border-left-color: var(--line-strong); border-left-style: dotted; }
.calendar-ev--opt { color: var(--ink-2); }
.calendar-ev--opt .ui-cal-ev__title { font-weight: var(--fw-medium); }
/* week grid: a club slot's time is the gutter's; the space goes to the (alternative) names */
.calendar-grid:not(.calendar-grid--day) .calendar-ev--opt .ui-cal-ev__time { display: none; }
.calendar-ev--shared { background-color: var(--aud-shared-bg); color: var(--aud-shared-fg); border: 1.5px dotted var(--aud-shared-fg); border-left-width: 3px; z-index: 2; }
.calendar-ev.is-dim, .calendar-row.is-dim, .calendar-code.is-dim { opacity: .42; }
.calendar-ev.is-selected { outline: 2px solid var(--primary-ink); outline-offset: 1px; box-shadow: var(--sh-2); z-index: 5; }

/* all-day chips (grid row, agenda) */
.calendar-allday { position: relative; display: flex; align-items: center; gap: 4px; width: 100%; min-height: 24px; text-align: left; cursor: pointer; }
.calendar-allday .ui-i { width: 12px; height: 12px; flex-shrink: 0; }
.calendar-allday > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-allday--dayoff { background: var(--accent-soft); color: var(--accent-ink); }
.calendar-allday--nocourses { background: var(--surface-3); color: var(--ink-2); }
.calendar-allday--pickup { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.calendar-allday.is-selected { box-shadow: inset 0 0 0 2px var(--primary-ink); }
.calendar-allday:hover { filter: brightness(.97); }

/* ---------------- phone: sticky day strip + agenda ---------------- */
.calendar-strip { margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 6px; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-2); }
.calendar-strip .ui-daystrip__day { min-height: 56px; }
.calendar-agenda__day { scroll-margin-top: calc(var(--sh-top-h) + 84px); padding-bottom: var(--sp-2); }
.calendar-agenda__day.is-off .calendar-dayh b { color: var(--accent-ink); }
.calendar-dayh { align-items: center; padding: var(--sp-4) 0 var(--sp-2); }
.calendar-dayh b { font-size: var(--fs-title-l); }
.calendar-today-tag { font-size: var(--fs-label-s); font-weight: var(--fw-bold); color: var(--on-primary); background: var(--primary); padding: 2px 8px; border-radius: var(--r-pill); }
.calendar-dayh__go { margin-left: auto; color: var(--primary-ink); }
.calendar-dayh__go .ui-i { width: 16px; height: 16px; }
.calendar-agenda__list { display: grid; gap: 6px; }
.calendar-empty-day { color: var(--muted); font-size: var(--fs-body-s); padding: 2px 0 var(--sp-2); }
.calendar-allrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.calendar-allrow .calendar-allday { width: auto; max-width: 100%; min-height: 32px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-label-s); }
.calendar-allrow .calendar-allday::after { content: ""; position: absolute; inset: -6px 0; }

.calendar-row, .calendar-group__sum {
  display: grid; grid-template-columns: 46px 4px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; min-height: 58px; padding: 8px 12px 8px 10px; text-align: left;
}
.calendar-row { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); transition: background-color var(--dur-1), box-shadow var(--dur-1); }
.calendar-row:hover { box-shadow: var(--sh-2); }
.calendar-row:active { transform: scale(.995); }
.calendar-row__time { display: grid; gap: 1px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.calendar-row__time b { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--ink); }
.calendar-row__time span { font-size: var(--fs-caption); color: var(--muted); }
.calendar-row__bar { align-self: stretch; width: 4px; min-height: 30px; border-radius: 2px; background: var(--_fg, var(--line-strong)); }
.calendar-row__body { min-width: 0; display: grid; gap: 2px; }
.calendar-row__title { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: 1.3; }
.calendar-row__title > :last-child { min-width: 0; }
.calendar-row__title .ui-i { width: 16px; height: 16px; flex-shrink: 0; color: var(--_fg, var(--muted)); }
.calendar-row__sub { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.calendar-row__trail { display: flex; align-items: center; gap: 6px; }
.calendar-row__trail .ui-state { font-size: var(--fs-label-s); }
/* layer shapes in the agenda */
.calendar-row--activitati { background: var(--_bg, var(--surface)); border-color: color-mix(in srgb, var(--_fg) 30%, transparent); }
.calendar-row--familie { background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--aud-private-bg) 7%, transparent) 7px 14px); }
.calendar-row--familie .calendar-row__bar { background: var(--aud-private-bg); }
.calendar-row--partajat { background: var(--aud-shared-bg); border: 1.5px dotted var(--aud-shared-fg); }
.calendar-row--partajat .calendar-row__bar { background: var(--aud-shared-fg); }
.calendar-row--optionale { border-style: dashed; border-color: var(--_fg, var(--line-strong)); box-shadow: none; }
.calendar-row--optionale .calendar-row__bar { background: repeating-linear-gradient(to bottom, var(--_fg) 0 4px, transparent 4px 7px); }
.calendar-row--k-meal .calendar-row__bar, .calendar-row--k-snack .calendar-row__bar { background: var(--line-strong); }
.calendar-row.is-selected { box-shadow: 0 0 0 2px var(--primary-ink); }

/* routine / optional summaries (collapsible) */
.calendar-group { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.calendar-group__sum { list-style: none; cursor: pointer; border-radius: var(--r-md); }
.calendar-group__sum::-webkit-details-marker { display: none; }
.calendar-group__sum:hover { background: var(--surface-3); }
.calendar-group__chev { width: 18px; height: 18px; color: var(--muted); transition: transform var(--dur-2) var(--ease-standard); }
.calendar-group[open] .calendar-group__chev { transform: rotate(180deg); }
.calendar-group__body { padding: 0 8px 8px; }
.calendar-group__list { display: grid; gap: 4px; }
.calendar-group .calendar-row { box-shadow: none; min-height: 48px; }
.calendar-row__bar--orar { background: linear-gradient(to bottom, var(--sub-clr), var(--sub-mem) 50%, var(--sub-eng)); }
.calendar-row__bar--opt { background: repeating-linear-gradient(to bottom, var(--sub-mem) 0 4px, transparent 4px 7px); }
.calendar-codes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.calendar-code { font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .02em; padding: 1px 6px; border-radius: 5px; background: var(--_bg); color: var(--_fg); }

/* ---------------- month ---------------- */
.calendar-month .ui-month__cell { cursor: pointer; }
.calendar-mev { font-weight: var(--fw-semibold); }
.calendar-mev--familie { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--aud-private-bg) 12%, transparent) 5px 10px); }
.calendar-mev--activitati { background: var(--_fg); color: var(--surface); }
.calendar-mev--partajat { background: var(--aud-shared-bg); color: var(--aud-shared-fg); box-shadow: inset 0 0 0 1px var(--aud-shared-fg); }
.calendar-mmore { display: none; font-size: var(--fs-label-s); font-weight: var(--fw-semibold); color: var(--muted); padding-left: 4px; }
.ui-month__dots i.calendar-dot--clasa { background: var(--primary); }
.ui-month__dots i.calendar-dot--activitati { background: var(--sub-inot); }
.ui-month__dots i.calendar-dot--familie { background: var(--aud-private-bg); }
.ui-month__dots i.calendar-dot--partajat { background: var(--aud-shared-fg); }
.ui-month__dots i.calendar-dot--orar { background: var(--muted); }
@container (min-width: 600px) {
  .calendar-month .ui-month__cell { min-height: 96px; padding: 7px; }
  .calendar-month .ui-month__ev { display: -webkit-box; -webkit-line-clamp: 1; }
  .calendar-month .ui-month__dots { display: none; }
  .calendar-month .calendar-mmore { display: block; }
}
.calendar-monthday { margin-top: var(--sp-2); }

/* ---------------- detail (panel + sheet) ---------------- */
.calendar-detail { display: grid; gap: var(--sp-4); min-width: 0; }
.calendar-detail__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: -6px -6px -8px 0; }
.calendar-detail__layer { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label-s); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.calendar-detail__layer .ui-i { width: 14px; height: 14px; }
.calendar-detail__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-display-s); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.calendar-detail__when { display: flex; align-items: center; gap: 6px; margin-top: -6px; color: var(--ink-2); font-weight: var(--fw-medium); }
.calendar-detail__when .ui-i { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.calendar-detail__aud { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* 27.09 tick off: "✓ Gata" for the person in charge, "Buni a bifat · 15:42" once done */
.calendar-allday__done { color: var(--success); flex-shrink: 0; margin-left: auto; }
.calendar-tick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.calendar-tick__btn { min-height: 48px; padding-inline: 22px; font-size: var(--fs-body); }
.calendar-tick__btn .ui-i { width: 20px; height: 20px; }
.calendar-tick__done { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--success-soft); color: var(--success-ink); font-size: var(--fs-body-s); font-weight: var(--fw-semibold); line-height: 1.3; max-width: 100%; }
.calendar-tick__done .ui-i { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 767px) { .calendar-tick__btn { flex: 1 1 100%; } }
.calendar-detail__kv { background: var(--surface-2); border-radius: var(--r-md); padding: 0 14px; }
.calendar-detail__kv .ui-kv__row { grid-template-columns: minmax(86px, 32%) minmax(0, 1fr); }
.calendar-detail__body { color: var(--ink-2); }
.calendar-detail__callouts { display: grid; gap: var(--sp-2); }
.calendar-detail__callouts p + p { margin-top: 4px; }
.calendar-detail__sec { display: grid; gap: var(--sp-2); min-width: 0; }
.calendar-detail__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-1); }
.calendar-detail__why { display: flex; gap: 6px; align-items: center; }
.calendar-bring { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.calendar-bring li { list-style: disc; }
.calendar-alts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.calendar-alts li { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-semibold); }
.calendar-alts__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px dashed var(--_fg); flex-shrink: 0; }
.calendar-links { display: grid; }
.calendar-links .ui-row, .calendar-link { width: 100%; text-align: left; }
.calendar-link .ui-row__sub { -webkit-line-clamp: 2; }

.calendar-rsvp { display: grid; gap: var(--sp-2); }
.calendar-rsvp + .calendar-rsvp { margin-top: var(--sp-3); }
.calendar-rsvp__btns { display: flex; gap: var(--sp-2); }
.calendar-rsvp__btns .ui-btn { flex: 1; min-height: 44px; }
.calendar-rsvp .ui-caption { display: flex; gap: 6px; align-items: flex-start; }
.calendar-rsvp .ui-caption .ui-i { margin-top: 2px; flex-shrink: 0; }
.calendar-rsvp__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.calendar-stat { display: grid; gap: 2px; padding: 8px 4px; text-align: center; background: var(--surface-2); border-radius: var(--r-sm); }
.calendar-stat b { font-family: var(--font-display); font-size: var(--fs-title-l); font-weight: var(--fw-medium); line-height: 1; }
.calendar-stat span { font-size: var(--fs-label-s); color: var(--muted); }
.calendar-stat--da b { color: var(--success-ink); }
.calendar-stat--nu b { color: var(--danger-ink); }
.calendar-names summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-size: var(--fs-body-s); font-weight: var(--fw-semibold); color: var(--primary-ink); }
.calendar-names p { font-size: var(--fs-body-s); color: var(--ink-2); margin-top: 4px; }
.calendar-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-body-s); }
.calendar-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: var(--fw-semibold); background: var(--surface-3); }
.calendar-pill--semnat { background: var(--success-soft); color: var(--success-ink); }
.calendar-pill--refuzat { background: var(--danger-soft); color: var(--danger-ink); }
.calendar-pill--nesemnat { background: var(--warning-soft); color: var(--warning-ink); }

/* ---------------- upcoming (panel) ---------------- */
.calendar-upcoming { display: grid; gap: 2px; margin-inline: -8px; }
.calendar-up { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: var(--r-md); text-align: left; }
.calendar-up:hover { background: var(--surface-2); }
.calendar-up__date { display: grid; place-items: center; align-content: center; gap: 2px; height: 48px; border-radius: 12px; background: var(--_bg, var(--primary-soft)); color: var(--_fg, var(--on-primary-soft)); line-height: 1; }
.calendar-up__date span { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.calendar-up__date b { font-family: var(--font-display); font-size: 20px; font-weight: var(--fw-medium); }
.calendar-up__body { min-width: 0; display: grid; gap: 2px; }
.calendar-up__title { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-up__title .ui-i { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.calendar-up__sub { font-size: var(--fs-caption); color: var(--muted); }

/* ---------------- layers list (panel + sheet) ---------------- */
.calendar-layerlist { display: grid; }
.calendar-layerlist__row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.calendar-layerlist__row:first-child { border-top: 0; padding-top: 0; }
.calendar-layerlist__ic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.calendar-layerlist__ic .ui-i { width: 18px; height: 18px; }
.calendar-layerlist__ic .calendar-sw { position: absolute; right: -2px; bottom: -2px; box-shadow: 0 0 0 2px var(--surface); }
.calendar-layerlist__body { min-width: 0; }
.calendar-layerlist__sw { min-height: 36px; font-weight: var(--fw-semibold); }
.calendar-layerlist__body > .ui-caption { margin-top: 2px; }
.calendar-layerlist__aud { margin-top: 8px; display: flex; }
.calendar-layerlist__aud .ui-aud { max-width: 100%; }
.calendar-layerlist__na { margin-top: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.calendar-sheet-foot { margin-top: var(--sp-4); }

/* ---------------- ICS export ---------------- */
.calendar-ics { margin-top: var(--sp-3); }
.calendar-ics__lead { position: relative; color: var(--ink-2); }
.calendar-ics__lead .calendar-sw { position: absolute; right: 6px; bottom: 6px; box-shadow: 0 0 0 2px var(--surface); }
.calendar-ics__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; min-width: 0; }
.calendar-ics__meta .ui-aud { max-width: 100%; }
.calendar-mono { font-family: var(--font-mono); font-size: var(--fs-caption); word-break: break-all; }

/* ---------------- add form ---------------- */
.calendar-form { display: grid; gap: var(--sp-4); }
.calendar-form__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.calendar-form__switch { min-height: 44px; }
.calendar-form__note:empty { display: none; }
@media (max-width: 520px) {
  .calendar-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .calendar-form__row > :first-child { grid-column: 1 / -1; }
}

/* phones: the two head actions become 44px round icon buttons beside the large title */
@media (max-width: 767px) {
  .calendar-root .sh-pagehead__row { flex-wrap: nowrap; align-items: center; }
  .calendar-root .sh-pagehead__row .ui-pagehead__title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .calendar-root .sh-pagehead__actions { flex-wrap: nowrap; }
  .calendar-head-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: var(--r-pill); }
  .calendar-head-btn .ui-i { margin: 0; }
  .calendar-head-btn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .calendar-group__chev, .calendar-row { transition: none; }
}

/* ---------------- fixes after QA ---------------- */
.calendar-dayh .calendar-today-tag { color: var(--on-primary); font-size: var(--fs-label-s); }
/* snack: start time only (no end in the real timetable) -> thin marker, not a block */
.calendar-snack { position: absolute; left: 0; right: 0; top: calc((var(--at) - var(--start)) * var(--min) - 1px); height: 0; border-top: 1.5px dotted var(--line-strong); z-index: 1; text-align: right; }
.calendar-snack > span { position: absolute; right: 3px; top: -8px; display: inline-flex; align-items: center; gap: 3px; max-width: calc(100% - 6px); padding: 0 5px; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: var(--fw-semibold); line-height: 15px; white-space: nowrap; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.calendar-snack__time { font-style: normal; }
.calendar-snack .ui-i { width: 10px; height: 10px; }
.calendar-snack::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 20px; }
.calendar-snack:hover > span { color: var(--ink); }
.calendar-ev.is-narrow .ui-cal-ev__title .ui-i { display: none; }
.calendar-ev.is-narrow { padding-inline: 3px 1px; }
@media (min-width: 768px) {
  .calendar-layers { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.calendar-ev { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
/* tablet week: columns are narrow — the time gutter carries the time, cells carry the subject */
@media (max-width: 1099px) {
  .calendar-grid:not(.calendar-grid--day) .ui-cal-ev__time, .calendar-grid:not(.calendar-grid--day) .calendar-snack__time { display: none; }
  .calendar-grid:not(.calendar-grid--day) .ui-cal-ev__title { align-items: flex-start; }
  .calendar-grid:not(.calendar-grid--day) .calendar-ev__label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; hyphens: manual; }
  .calendar-grid:not(.calendar-grid--day) .calendar-ev { font-size: var(--fs-label-s); padding-inline: 5px 3px; }
}

/* ---------------- QA pass 2 ---------------- */
.calendar-up__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-form [hidden] { display: none !important; }
.calendar-ics__row.is-off .ui-row__title { color: var(--ink-2); }
.calendar-ics__details { margin: 0 0 var(--sp-2); }
.calendar-sheet-foot .calendar-detail__why { align-items: flex-start; }
.calendar-sheet-foot .calendar-detail__why .ui-i { margin-top: 2px; flex-shrink: 0; }
/* dimmed (other subjects for a subject teacher): opaque, so hour lines do not show through */
.calendar-ev.is-dim {
  opacity: 1;
  background-color: color-mix(in srgb, var(--_bg, var(--surface-3)) 40%, var(--surface));
  color: color-mix(in srgb, var(--_fg, var(--ink-2)) 50%, var(--surface));
  border-left-color: color-mix(in srgb, var(--_fg, var(--line-strong)) 35%, var(--surface));
}

/* ---------------- i18n (RO/EN) ---------------- */
/* all-day rows: one label ("Toată ziua" / "All day") that wraps inside the 46px time column */
.calendar-row__allday { overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; }
/* longer English labels: toolbar and chips wrap instead of overflowing */
.calendar-bar__today { white-space: nowrap; }
.calendar-bar__seg .ui-seg__btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-detail__layer > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.calendar-detail__kv dd, .calendar-detail__kv dt { min-width: 0; overflow-wrap: anywhere; }
.calendar-stat span { overflow-wrap: anywhere; hyphens: auto; line-height: 1.2; }
.calendar-rsvp__btns .ui-btn { min-width: 0; }
.calendar-ics__row .ui-row__body { min-width: 0; }
.calendar-dayh { flex-wrap: wrap; row-gap: 2px; }
.calendar-up__sub { overflow-wrap: anywhere; }
.calendar-foot > span, .calendar-note .ui-callout__body { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .calendar-bar__range { overflow-wrap: anywhere; }
}

/* content + AI translation ("Tradu" / "Translate", SCREEN_CONTRACT §7.2): below the original, never instead of it */
.calendar-content { display: grid; gap: var(--sp-2); min-width: 0; }
.calendar-tr { display: grid; justify-items: start; gap: 6px; margin-top: 6px; min-width: 0; }
.calendar-tr .ui-btn { margin-inline-start: -8px; }
.calendar-tr .ui-btn .ui-i { width: 16px; height: 16px; }
.calendar-tr__live { color: var(--muted); white-space: pre-line; }
.calendar-tr__err { color: var(--danger-ink); }
.calendar-tr--done { justify-items: stretch; padding: 10px 12px; border-radius: var(--r-md); background: var(--ai-soft, var(--surface-2)); border: 1px dashed var(--st-propus-fg); }
.calendar-tr--done > .ui-btn { justify-self: start; }
.calendar-tr__note { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); }
.calendar-tr__note .ui-i { margin-top: 2px; flex-shrink: 0; }
.calendar-tr__text { white-space: pre-line; color: var(--ink-2); overflow-wrap: anywhere; }
/* the page head is a grid with an auto column: keep it inside the viewport with long (English / QA-padded) strings */
.calendar-root .sh-pagehead { grid-template-columns: minmax(0, 1fr); }
.calendar-root .sh-pagehead > .ui-eyebrow { white-space: normal; overflow-wrap: anywhere; }
.calendar-root .ui-pagehead__text { overflow-wrap: anywhere; }
/* switches with long labels: the text shrinks and wraps, the toggle never leaves the sheet */
.calendar-ics__details > span, .calendar-form__switch > span, .calendar-layerlist__sw > span { min-width: 0; overflow-wrap: anywhere; }
.calendar-ics__details input, .calendar-form__switch input, .calendar-layerlist__sw input { flex-shrink: 0; }
.calendar-muted, .calendar-form .ui-hint, .calendar-form__note { overflow-wrap: anywhere; }
.calendar-ics__row .ui-row__title, .calendar-link .ui-row__title { white-space: normal; overflow-wrap: anywhere; }
.calendar-names summary, .calendar-names p { overflow-wrap: anywhere; }
.calendar-kv__v { display: block; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
/* grids with an implicit auto column grow to their widest child: pin them to the container */
.calendar-detail, .calendar-detail__sec, .calendar-detail__callouts, .calendar-rsvp, .calendar-content, .calendar-layerlist,
.calendar-notes, .calendar-form, .calendar-upcoming, .calendar-agenda__list, .calendar-group__list, .calendar-links { grid-template-columns: minmax(0, 1fr); }
.calendar-detail__actions .ui-btn, .calendar-tr .ui-btn, .calendar-sheet-foot .ui-btn { white-space: normal; text-align: start; max-width: 100%; height: auto; min-height: 36px; }
.calendar-detail__aud > * { max-width: 100%; }
.calendar-rsvp .ui-caption > span, .calendar-detail__why > span, .calendar-tr__note > span, .calendar-consent { min-width: 0; overflow-wrap: anywhere; }
.calendar-detail__callouts .ui-callout__body, .calendar-detail .ui-callout__body { min-width: 0; overflow-wrap: anywhere; }

/* ---------------- timetable changes + base timetable (parent-run class management, 26.09) ---------------- */
/* base timetable in force: one quiet line above the grid */
.calendar-rev { display: grid; gap: 2px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.calendar-rev__line { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2); min-width: 0; }
.calendar-rev__line > .ui-i { margin-top: 2px; flex-shrink: 0; color: var(--muted); }
.calendar-rev__line > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) { .calendar-rev__note { display: none; } }
.calendar-rev__line b { font-weight: var(--fw-semibold); color: var(--ink); }

/* a confirmed change on the grid / in the agenda: solid, warm, with a clock — the day is different */
.calendar-ev--exc { background-color: var(--warning-soft); color: var(--warning-ink); border-left-color: var(--warning); }
.calendar-ev--shortened { border-bottom: 2px dashed var(--warning); }
.calendar-allday--exception { background: var(--warning-soft); color: var(--warning-ink); }
.calendar-row.is-exc { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.calendar-row.is-exc .calendar-row__bar { background: var(--warning); }
.calendar-row.is-exc .calendar-row__title .ui-i { color: var(--warning-ink); }
.calendar-row.is-shortened .calendar-row__time span::after { content: " *"; color: var(--warning-ink); }

/* head button (phones: round icon like the others) */
.calendar-head-btn--exc .ui-i { color: var(--primary-ink); }

/* ---------------- timetable-change form ---------------- */
/* phones: one column (kinds, day/times, PREVIEW, source, "applied directly"); desktop: the live preview sits on the right */
.calendar-exc__main { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 1100px) {
  .calendar-exc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--sp-5); align-items: start; }
  .calendar-exc > .calendar-exc__main, .calendar-exc > .calendar-exc__note, .calendar-exc > .calendar-exc__who { grid-column: 1; }
  .calendar-exc > .calendar-exc__preview { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 0; }
}
.calendar-exc__kinds { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.calendar-exc__kinds > legend { margin-bottom: var(--sp-2); }
.calendar-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.calendar-kind { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; min-height: 48px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1); }
.calendar-kind input { position: absolute; opacity: 0; pointer-events: none; }
.calendar-kind__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); flex-shrink: 0; }
.calendar-kind__ic .ui-i { width: 17px; height: 17px; }
.calendar-kind__txt { min-width: 0; font-weight: var(--fw-semibold); font-size: var(--fs-body-s); line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.calendar-kind:has(input:checked) { border-color: var(--primary-ink); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary-ink); }
.calendar-kind:has(input:checked) .calendar-kind__ic { background: var(--primary-ink); color: var(--on-primary); }
.calendar-kind:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.calendar-exc__khint { min-height: 1.4em; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .calendar-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#cal-x-note { min-height: 64px; }
.calendar-exc__when { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--sp-3); align-items: end; min-width: 0; }
.calendar-exc__when > [data-exc-show] { min-width: 0; }
.calendar-exc__note { display: grid; gap: 6px; min-width: 0; }
.calendar-exc__src { flex-wrap: wrap; gap: 6px; }
@media (max-width: 767px) { .calendar-exc__src { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; } .calendar-exc__src .ui-chip { flex-shrink: 0; } }
.calendar-exc__src .ui-chip { font-size: var(--fs-label-s); min-height: 32px; }
.calendar-exc__src .ui-i { width: 12px; height: 12px; }
.calendar-exc__preview { display: grid; gap: var(--sp-2); padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.calendar-exc__ptitle { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--ink); }
.calendar-exc__ptitle .ui-i { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.calendar-exc__ptitle > span { min-width: 0; overflow-wrap: anywhere; }
.calendar-exc__who, .calendar-form__alt { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2); }
.calendar-exc__who .ui-i, .calendar-form__alt .ui-i { margin-top: 2px; flex-shrink: 0; color: var(--muted); }
.calendar-exc__who > span { min-width: 0; overflow-wrap: anywhere; }
.calendar-form__alt { flex-wrap: wrap; align-items: center; }
.calendar-form__alt .ui-link { background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--fs-caption); }

/* what a change does to the day (form preview + detail) */
.calendar-eff { display: grid; gap: 4px; min-width: 0; }
.calendar-eff__line { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--ink-2); overflow-wrap: anywhere; }
.calendar-eff__line b { font-weight: var(--fw-semibold); color: var(--ink); }
.calendar-eff__line--removed b { color: var(--danger-ink); }
.calendar-eff__line--shortened b, .calendar-eff__line--replaced b { color: var(--warning-ink); }
.calendar-eff__line--kept b { color: var(--success-ink); }
.calendar-eff__none { font-size: var(--fs-body-s); color: var(--muted); }
.calendar-eff__warn { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--warning-ink); background: var(--warning-soft); padding: 6px 10px; border-radius: var(--r-sm); }
.calendar-eff__warn .ui-i { margin-top: 2px; flex-shrink: 0; }
.calendar-eff__warn > span { min-width: 0; overflow-wrap: anywhere; }
.calendar-eff__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 6px; }
.calendar-eff__it { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 0; font-size: var(--fs-caption); line-height: 1.35; }
.calendar-eff__t { color: var(--muted); font-variant-numeric: tabular-nums; }
.calendar-eff__n { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.calendar-eff__n i { font-style: normal; color: var(--warning-ink); font-weight: var(--fw-semibold); }
.calendar-eff__s { font-size: 11px; font-weight: var(--fw-semibold); padding: 1px 8px; border-radius: var(--r-pill); white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.calendar-eff__it.is-removed .calendar-eff__nm { text-decoration: line-through; text-decoration-color: var(--danger-ink); color: var(--muted); }
.calendar-eff__it.is-removed .calendar-eff__s { background: var(--danger-soft); color: var(--danger-ink); }
.calendar-eff__it.is-shortened .calendar-eff__s, .calendar-eff__it.is-replaced .calendar-eff__s { background: var(--warning-soft); color: var(--warning-ink); }
.calendar-eff__it.is-kept .calendar-eff__s { background: var(--success-soft); color: var(--success-ink); }
.calendar-eff__rev { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }
.calendar-eff__rev .ui-i { margin-top: 2px; flex-shrink: 0; }
.calendar-eff__rev > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .calendar-eff__it { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 6px; }
}
.calendar-exc__preview, .calendar-eff { grid-template-columns: minmax(0, 1fr); }
.calendar-eff__more { margin-top: 4px; border-top: 1px solid var(--line); }
.calendar-eff__more > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font-size: var(--fs-body-s); font-weight: var(--fw-semibold); color: var(--primary-ink); }
.calendar-eff__more > summary::-webkit-details-marker { display: none; }
.calendar-eff__more[open] .calendar-group__chev { transform: rotate(180deg); }
.calendar-eff__more .calendar-eff__list { border-top: 0; margin-top: 0; padding-top: 0; }
.calendar-form > .calendar-form__alt { padding: 8px 12px; margin-bottom: calc(-1 * var(--sp-2)); border-radius: var(--r-md); background: var(--surface-2); }
.calendar-rev__go, .calendar-form__alt .ui-link { max-width: 100%; white-space: normal; text-align: start; overflow-wrap: anywhere; }

/* ---------------- 26.09 · no approvals: edit / delete from the calendar, explicit series, tiny "who sees" ---------------- */
/* a series occurrence: a small repeat mark after the title */
.calendar-row__title .calendar-row__rep { width: 13px; height: 13px; color: var(--muted); }
/* who sees a row: the avatar stack (first letters) instead of a long audience text */
.calendar-row__trail .ui-avatar-stack { flex-shrink: 0; }
/* add from the calendar: "+" in a day heading (phones), an empty spot of the grid (tablet / desktop) */
.calendar-dayh__add { flex-shrink: 0; }
.calendar-dayh__add.is-alone, .calendar-dayh__go + .calendar-dayh__add { margin-left: 4px; }
.calendar-dayh__add.is-alone { margin-left: auto; }
.calendar-col--add { cursor: cell; }
@media (hover: hover) { .calendar-col--add:hover { background-color: color-mix(in srgb, var(--primary) 4%, transparent); } }
.calendar-col--add .ui-cal-ev, .calendar-col--add .calendar-snack { cursor: pointer; }
/* detail: the avatar stack + "Modifică" on one line; the latest changes with Anulează */
.calendar-detail__aud { justify-content: space-between; }
.calendar-detail__aud .sh-vis { min-width: 0; }
.calendar-detail__edit { flex-shrink: 0; }
.calendar-detail__hist .ui-list { border-top: 1px solid var(--line); }
.calendar-detail__hist .ui-row { padding-inline: 0; }
/* form: "Cine vede" chips (radio) + avatar stack; "Ce modifici?" for an occurrence of a series */
.calendar-vis, .calendar-form__scope { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--sp-2); }
.calendar-vis > legend, .calendar-form__scope > legend { margin-bottom: var(--sp-2); }
.calendar-vis__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.calendar-vis__chips { gap: var(--sp-2); }
.calendar-vis__who { display: inline-flex; min-height: 24px; align-items: center; }
.calendar-vis__note { margin: 0; overflow-wrap: anywhere; }
.calendar-choice { position: relative; cursor: pointer; padding-inline: 12px; }
.calendar-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.calendar-choice:has(input:checked) { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.calendar-choice:has(input:checked) .ui-i { color: currentColor; }
.calendar-choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.calendar-choice:has(input:disabled) { opacity: .55; cursor: default; }
.calendar-form__scopes { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.calendar-form__scopes .ui-radio { min-height: 44px; }
.calendar-form__scope { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.calendar-form__scope > legend { float: left; width: 100%; padding: 0; }
.calendar-form__scope .ui-caption { margin: 0; overflow-wrap: anywhere; }
.calendar-form__recur, .calendar-form__fam { min-width: 0; }
/* edit sheet opened by tapping an event: the read-only details stay one tap away */
.calendar-form__details { justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--fs-caption); margin-bottom: calc(-1 * var(--sp-2)); }