.calendar-page {
  container-type: inline-size;
  color: var(--text-body);
  padding: 0;
  min-width: 0;
}
.calendar-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 8px;
}
.calendar-intro h1 {
  color: var(--accent-primary);
  font-size: 28px;
  line-height: 1.25;
  margin: 0;
  max-width: 100%;
}
.calendar-controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--toolbar-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
}
.calendar-control-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: max-content;
}
.calendar-control-label {
  flex: none;
  white-space: nowrap;
  font-weight: 700;
  color: var(--accent-primary);
}
.calendar-selects {
  font-size: 13px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.calendar-page select {
  display: block;
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--control-border);
  background: var(--surface);
  border-radius: 6px;
  padding: 5px;
  font: inherit;
  color: var(--text-body);
}
.calendar-note {
  font-size: 13px;
  color: var(--text-muted);
}
.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: stretch;
  margin-top: 0;
}
.calendar-month {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 520px;
}
.calendar-grid {
  flex: 1;
}
.calendar-month-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  text-align: center;
}
.calendar-month-heading h2 {
  margin: 0;
  color: var(--accent-primary);
  font-size: 26px;
}
.calendar-month-heading p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0;
}
.calendar-grid {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
}
.calendar-grid th {
  background: var(--toolbar-bg);
  padding: 10px 0;
  font-weight: 600;
}
.calendar-grid td {
  height: 80px;
  padding: 0;
  border-top: 1px solid var(--line-subtle);
  border-inline-start: 1px solid var(--line-subtle);
  vertical-align: top;
}
.calendar-grid td:first-child {
  border-inline-start: 0;
}
.calendar-day {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  min-height: 80px;
  height: 100%;
  padding: 5px 6px;
  border: 2px solid transparent;
  background: var(--surface);
  text-align: start;
  font: inherit;
  color: var(--text-body);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.calendar-day:hover {
  background: var(--surface-interactive);
}
.calendar-day.is-today {
  border-color: var(--accent-border);
}
.calendar-day.is-selected {
  border-color: var(--accent-primary);
}
.calendar-day.is-selected.is-today {
  box-shadow: inset 0 0 0 2px var(--accent-border);
}
.calendar-day:focus-visible,
.calendar-page button:focus-visible,
.calendar-page a:focus-visible,
.calendar-page select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}
.calendar-dates {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  gap: 3px;
  font-size: 14px;
}
.calendar-dates > span {
  color: var(--text-muted);
  font-size: 12px;
}
.calendar-daf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 14px;
  gap: 0;
  width: 100%;
  min-width: 0;
  color: var(--accent-primary);
  font-size: 14px;
  font-weight: 700;
}
.calendar-cell-layers {
  display: block;
  min-height: 17px;
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  width: 100%;
}
.calendar-empty {
  background: var(--page-bg);
}
.calendar-detail {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: 20px;
  min-width: 0;
}
.calendar-detail h2 {
  color: var(--accent-primary);
  font-size: 24px;
  margin: 4px 0 10px;
}
.calendar-detail h3 {
  font-size: 17px;
  margin: 0 0 10px;
}
.calendar-detail p {
  margin: 8px 0;
}
.calendar-future {
  border-top: 1px solid var(--line-subtle);
  padding-top: 12px;
}
.calendar-future ul {
  padding: 0;
  list-style: none;
  margin: 0;
}
.calendar-future button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  border: 0;
  background: none;
  color: var(--accent-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
  padding: 5px 0;
  width: 100%;
}
.calendar-future-civil {
  color: var(--text-muted);
  font-size: 14px;
  white-space: nowrap;
}
#calendarStatus:not(:empty) {
  padding: 10px 0;
}
#calendarOverlayStatus {
  min-height: 20px;
  font-size: 13px;
  color: var(--text-muted);
}
#calendarOverlayStatus p {
  margin: 5px 0;
}
@container (max-width:820px) {
  .calendar-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .calendar-detail {
    display: block;
  }
}
@media (max-width: 700px) {
  .calendar-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .calendar-day {
    min-height: 80px;
    padding: 4px 3px;
    gap: 1px;
  }
  .calendar-daf {
    font-size: 12px;
  }
  .calendar-cell-layers {
    font-size: 11px;
  }
  .calendar-intro {
    align-items: flex-start;
  }
  .calendar-intro .ui-button {
    flex: none;
  }
  .calendar-page {
    padding: 0;
  }
  .calendar-month-heading h2 {
    font-size: 23px;
  }
}
@media print {
  .calendar-controls,
  .calendar-intro button,
  #calendarOverlayStatus,
  #calendarRetry {
    display: none;
  }
  .calendar-layout {
    display: block;
  }
  .calendar-detail {
    margin-top: 16px;
  }
  .calendar-day {
    break-inside: avoid;
  }
}

/* Feature hidden states must override the shared button display rule. */
.calendar-page [hidden] {
  display: none;
}

.calendar-day.is-selected .calendar-dates > span {
  color: var(--text-body);
}

/* Native auto sizing includes the longest option and the platform's arrow gutter. */
.calendar-controls select {
  width: auto;
  max-width: 100%;
  padding-inline: 5px;
}
.calendar-control-separator {
  flex: 0 0 1px;
  margin-inline: 5px;
  height: 40px;
  background: var(--panel-border);
}
@container (max-width:1050px) {
  .calendar-control-group {
    flex-direction: column;
    gap: 6px;
  }
}
@container (max-width:740px) {
  .calendar-control-group {
    flex-direction: row;
    gap: 12px;
  }
  .calendar-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .calendar-control-separator {
    flex: 0 0 1px;
    margin-inline: 0;
    height: 1px;
    width: 100%;
  }
}

.calendar-today {
  font-size: var(--button-font-size);
  min-height: 35px;
  padding: 5px 12px;
}
/* Reserve the Today slot so date changes never shift the selectors. */
.calendar-controls .calendar-today[hidden] {
  display: inline-flex;
  visibility: hidden;
  pointer-events: none;
}
/* Match the Daf toolbar's fullscreen action without importing study layout rules. */
.calendar-fullscreen.ui-button {
  flex: none;
  margin-inline-start: auto;
  align-self: center;
  min-height: 40px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--accent-primary);
  color: var(--accent-light);
  border-color: var(--accent-border);
  gap: 6px;
}
.calendar-fullscreen.ui-button:hover {
  background: var(--emphasized-hover);
  color: var(--accent-light);
}
.calendar-fullscreen svg {
  fill: currentColor;
}

@media (max-width: 700px) {
  .calendar-intro h1 {
    font-size: 24px;
  }
}
.calendar-page[aria-busy="true"] .calendar-month {
  cursor: progress;
}

/* Keep the printed Daf visible even when the tractate name needs truncation. */
.calendar-tractate {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.calendar-daf-number {
  flex: none;
}

/* Dates must remain readable on every pale overlay, including the red effort band. */
.calendar-day[data-overlay]:not([data-overlay="none"]) .calendar-dates > span {
  color: var(--text-body);
}

/* Numeric rating pairs read left-to-right, matching the two constituent color halves. */
.calendar-day[data-overlay="mine"] .calendar-cell-layers,
.calendar-day[data-overlay="all"] .calendar-cell-layers {
  direction: ltr;
  text-align: center;
}

/* Reserve the final control/header geometry before data arrives. Loading is
   announced through aria-busy instead of inserting/removing a banner above the grid. */
.calendar-intro {
  min-height: 35px;
}
.calendar-month-heading p {
  min-height: 18px;
}
.calendar-grid tbody:empty::after {
  content: "";
  display: table-row;
  height: 400px;
}

@container (max-width:340px) {
  .calendar-control-group {
    flex-direction: column;
    gap: 8px;
  }
}

/* A compact view switch sits directly above the month, rather than another panel. */

/* Selected-date summary remains independent of the painted overlay. */
.calendar-detail {
  display: flex;
  flex-direction: column;
  margin-block-start: 8px;
  padding: 16px;
}
.calendar-detail-heading {
  display: block;
}
.calendar-detail-info {
  display: grid;
  grid-template-rows: 36px 24px 44px 24px;
  min-width: 0;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
}
.calendar-detail-info p {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  margin: 0;
  font-size: inherit;
}
.calendar-detail-info .calendar-summary-holidays {
  display: block;
  align-content: center;
  overflow: auto;
}
.calendar-detail-heading h2 {
  margin: 0;
  font-size: 24px;
  line-height: 28px;
  align-content: center;
  overflow: auto;
}
.calendar-detail-heading h2 a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.calendar-detail-heading h2 a:hover {
  color: var(--text-body);
  text-decoration: none;
}
.calendar-detail-heading h2 svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calendar-summary-holidays {
  font-size: 13px;
}
.calendar-detail .calendar-future {
  margin-block-start: auto;
}
#calendarRatingActions .ui-button {
  margin-block: 3px;
}
#calendarSummaryStatus {
  font-size: 13px;
  color: var(--text-muted);
}
#calendarSummaryStatus:empty {
  display: none;
}
@container (max-width:820px) {
  .calendar-detail {
    margin-block-start: 0;
  }
}

/* Leave room for browser chrome on a 1080px display, including six-week months. */
@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-grid td {
    height: 68px;
  }
  .calendar-day {
    min-height: 68px;
    padding-block: 4px;
    gap: 0;
  }
  .calendar-dates {
    line-height: 12px;
  }
  .calendar-cell-layers {
    min-height: 14px;
    line-height: 14px;
  }
}

/* Settings shares one wrapping row; do not wrap the whole radio group as a unit. */

/* Keep compact calendar identities intact on narrow phones. */
.calendar-dates > *,
.calendar-daf-number {
  white-space: nowrap;
}
@container (max-width:340px) {
  .calendar-dates,
  .calendar-dates > span {
    font-size: 10px;
    gap: 1px;
  }
  .calendar-daf-number {
    font-size: 11px;
  }
}

/* Calendar view controls and content actions remain feature-owned. */
.calendar-controls .calendar-today {
  flex: none;
  align-self: center;
}
.calendar-view-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: 8px;
}
.calendar-view-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.calendar-view-controls select {
  width: auto;
  min-height: 34px;
}
.calendar-day-actions > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 4px 0;
}
.calendar-day-actions .ui-button {
  font-size: 12px;
  text-align: center;
  padding: 4px;
  white-space: normal;
}
.calendar-detail .calendar-future {
  margin-block-start: 0;
}
.calendar-future h3 {
  font-size: 20px;
  color: var(--accent-primary);
}
.calendar-detail-info {
  grid-template-rows: 32px 24px 44px 44px;
}
.calendar-detail-heading h2 {
  overflow: auto;
}
.calendar-day[data-overlay="holidays"] .calendar-cell-layers {
  margin-top: 3px;
}
.calendar-progress-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.calendar-multi-active .calendar-month > .calendar-grid {
  display: none;
}
.calendar-periods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 12px 0;
}
.calendar-period {
  min-width: 0;
}
.calendar-period h3 {
  color: var(--accent-primary);
  text-align: center;
  margin: 6px 0;
  font-size: 20px;
}
.calendar-period .calendar-grid {
  flex: none;
}
.calendar-period .calendar-day {
  min-height: 80px;
  padding: 4px 3px;
  gap: 1px;
}
.calendar-period .calendar-grid td {
  height: 80px;
}
.calendar-period .calendar-daf {
  font-size: 12px;
}
.calendar-period .calendar-dates,
.calendar-period .calendar-dates > span {
  font-size: 10px;
  gap: 1px;
}
.calendar-period .calendar-cell-layers {
  font-size: 11px;
  line-height: 14px;
  min-height: 14px;
}

.calendar-day-editor {
  width: 300px;
  max-width: calc(100vw - 24px);
}
@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-grid td {
    height: 64px;
  }
  .calendar-day {
    min-height: 64px;
    padding-block: 2px;
  }
  .calendar-month {
    min-height: 0;
  }
  .calendar-detail {
    padding: 12px;
  }
  .calendar-detail-info {
    grid-template-rows: 30px 22px 44px 40px;
  }
  .calendar-future {
    padding-top: 8px;
  }
  .calendar-future h3 {
    margin-bottom: 5px;
  }
  .calendar-future button {
    padding: 3px 0;
  }
}

@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-future button {
    font-size: 14px;
    line-height: 18px;
    padding: 3px 0;
  }
  .calendar-future h3 {
    line-height: 24px;
    margin-bottom: 4px;
  }
}

@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-day-actions .ui-button {
    min-height: 26px;
    line-height: 16px;
    padding: 4px;
    box-sizing: border-box;
  }
}

/* Complete views retain the selected-day panel beside their calendar canvas. */
.calendar-multi-active .calendar-layout {
  align-items: start;
}
.calendar-multi-active .calendar-month {
  min-height: 0;
}
.calendar-multi-active .calendar-detail {
  display: block;
  position: sticky;
  top: 12px;
  max-height: none;
  overflow: visible;
}

.calendar-detail-info #calendarCycle {
  grid-row: 4;
}
.calendar-detail-info .calendar-summary-holidays {
  grid-row: 3;
}
@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-detail-info p {
    line-height: 20px;
  }
}

.calendar-study-editor {
  width: 420px;
  max-width: calc(100vw - 24px);
}
#calendarStudyForm {
  display: grid;
  gap: 12px;
}

/* Explicit view families; date/Daf selectors above retain their existing layout. */
.calendar-view-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.calendar-view-family {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.calendar-view-family + .calendar-view-family {
  border-inline-start: 1px solid var(--control-border);
  padding-inline-start: 20px;
}
.calendar-view-family strong {
  font-weight: 700;
  color: var(--accent-primary);
}
.calendar-view-family label {
  cursor: pointer;
  white-space: nowrap;
}
.calendar-view-family input {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
}

.calendar-multi-active .calendar-periods {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@container (max-width:820px) {
  .calendar-multi-active .calendar-detail {
    position: static;
  }
}
@container (max-width:560px) {
  .calendar-multi-active .calendar-periods {
    grid-template-columns: minmax(0, 1fr);
  }
  .calendar-view-choices {
    flex: 1 1 100%;
    gap: 10px;
  }
  .calendar-view-family {
    width: 100%;
  }
  .calendar-view-family + .calendar-view-family {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* Reuse the same detail panel and handlers inside the day dialog outside month view. */
.calendar-popup-details .calendar-layout {
  grid-template-columns: minmax(0, 1fr);
}
#calendarDayEditor [hidden],
#calendarPopupDetails[hidden] {
  display: none;
}
#calendarPopupDetails .calendar-detail {
  margin: 0;
  padding: 0;
  border: 0;
  position: static;
  max-height: none;
  overflow: visible;
}

#calendarPopupDetails {
  padding: 12px;
  box-sizing: border-box;
}

.site-master:fullscreen .calendar-periods {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
}

/* Bottom status row: cool-color study/note squares left, difficulty squares right. */
.calendar-day {
  gap: 0;
  padding: 0 3px;
}
.calendar-dates {
  position: relative;
  min-height: 20px;
  line-height: 14px;
}
.calendar-cell-indicators {
  display: flex;
  flex: none;
  direction: ltr;
  gap: 2px;
}
.calendar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}
.calendar-mark-studied {
  background: #175a9b;
}
.calendar-mark-note {
  background: #7341a5;
}
.calendar-day .calendar-mark[hidden] {
  display: none;
}
.calendar-cell-holidays {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  height: 24px;
  min-height: 24px;
  line-height: 12px;
  font-size: 12px;
  color: var(--text-body);
  white-space: pre-line;
  overflow: hidden;
  text-align: center;
  overflow-wrap: normal;
}
.calendar-cell-meta {
  display: flex;
  flex-wrap: wrap;
  direction: ltr;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px 4px;
  width: 100%;
  min-height: 18px;
  margin-top: auto;
}
.calendar-cell-meta .calendar-cell-layers {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  width: auto;
  max-width: 100%;
  min-height: 18px;
  line-height: 16px;
  direction: ltr;
  overflow: visible;
  margin-left: auto;
}
.calendar-rating-pair {
  display: inline-flex;
  flex: none;
  gap: 2px;
  font-size: 11px;
  line-height: 16px;
  color: var(--text-body);
}
.calendar-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  box-sizing: border-box;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.calendar-day[data-density="full"] {
  min-height: 86px;
}
.calendar-day[data-density="compact"] {
  min-height: 92px;
}
.calendar-day[data-density="compact"] .calendar-dates {
  min-height: 16px;
}
.calendar-day[data-density="compact"] .calendar-mark {
  width: 14px;
  height: 16px;
  font-size: 11px;
  line-height: 14px;
}
.calendar-day[data-density="compact"] .calendar-grade {
  min-width: 12px;
  height: 16px;
  padding-inline: 1px;
  font-size: 10px;
}
.calendar-day[data-density="compact"] .calendar-cell-holidays {
  font-size: 11px;
}
@container (max-width:560px) {
  .calendar-day[data-density="full"] .calendar-dates {
    min-height: 16px;
  }
  .calendar-day[data-density="full"] .calendar-mark {
    width: 14px;
    height: 16px;
    font-size: 11px;
    line-height: 14px;
  }
  .calendar-day[data-density="full"] .calendar-grade {
    min-width: 12px;
    height: 16px;
    padding-inline: 1px;
    font-size: 10px;
  }
}
@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-day[data-density="full"] {
    min-height: 80px;
    padding-block: 0;
  }
  .calendar-day[data-density="full"] .calendar-daf {
    font-size: 13px;
    line-height: 12px;
  }
  .calendar-day[data-density="full"] .calendar-dates {
    min-height: 14px;
    line-height: 12px;
  }
  .calendar-month-heading {
    margin-bottom: 6px;
  }
  .calendar-grid th {
    padding-block: 6px;
  }
}

.calendar-multi-active #calendarPeriods:empty {
  min-height: 100vh;
}

.calendar-page:not(.calendar-multi-active) #calendarMulti,
.calendar-popup-details .calendar-layout > .calendar-detail {
  display: none;
}

@container (min-width:960px) {
  .calendar-presentation-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 6px;
  }
  .calendar-presentation-controls .calendar-view-controls {
    margin: 0;
  }
  .calendar-presentation-controls .calendar-view-controls {
    gap: 8px;
  }
  .calendar-presentation-controls .calendar-view-choices {
    gap: 10px 12px;
  }
  .calendar-presentation-controls
    .calendar-view-family
    + .calendar-view-family {
    padding-inline-start: 12px;
  }
}
@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-controls {
    padding-block: 12px;
  }
  .calendar-month-heading > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
  }
  .calendar-month-heading {
    margin-bottom: 4px;
  }
  .calendar-grid th {
    padding-block: 4px;
  }
}
/* Selected-day card: Daf action icons and Rating summaries, shared editors/store. */
.calendar-detail {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calendar-detail-heading {
  margin: 0;
}
.calendar-detail-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  line-height: 20px;
}
.calendar-detail-info h2 {
  font-size: 27px;
  line-height: 32px;
  overflow: visible;
}
.calendar-detail-info h2 a {
  justify-content: center;
  text-decoration: none;
}
.calendar-detail-info h2 svg {
  width: 15px;
  height: 15px;
}
.calendar-detail-info p {
  font-size: 14px;
  line-height: 20px;
}
.calendar-detail-info .calendar-summary-holidays {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-primary);
  font-size: 13px;
}
.calendar-detail-info #calendarCycle {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 17px;
}
.calendar-detail svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}
.calendar-detail .calendar-detail-heading h2 svg {
  fill: currentColor;
  stroke: none;
}
/* These two controls use the same line-art paths and states as Daf LearningActions. */
.calendar-personal svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calendar-day-actions {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-subtle);
}
.calendar-day-actions > div {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0;
}
.calendar-day-actions .ui-button {
  flex: 0 1 66px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  width: auto;
  padding: 4px 1px;
  border: 0;
  background: none;
  font-size: 12px;
  line-height: 16px;
}
.calendar-day-actions .ui-button:hover {
  background: var(--surface-interactive);
}
.calendar-personal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.calendar-personal .ui-button {
  width: auto;
  min-height: 36px;
  padding: 5px 6px;
  font-size: 13px;
  gap: 6px;
  justify-content: center;
}
.calendar-learned[aria-pressed="true"] rect {
  fill: var(--accent-primary);
  stroke: var(--accent-primary);
}
.calendar-learned[aria-pressed="true"] .study-learned-check {
  stroke: var(--desk-gold-ink);
}
.calendar-learned[aria-pressed="false"] .study-learned-check {
  stroke-dasharray: 0.1 3;
  opacity: 0.55;
}
.calendar-note.has-note .study-note-paper {
  fill: var(--accent-primary);
}
.calendar-note.has-note .study-note-pencil {
  fill: var(--desk-gold-ink);
}
.calendar-rating-section {
  border-top: 1px solid var(--line-subtle);
  padding-top: 10px;
}
.calendar-rating-section h3 {
  margin: 0 0 7px;
  font-size: 15px;
  color: var(--text-body);
  font-weight: 600;
}
.calendar-rating-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.calendar-rating-card {
  border: 1px solid var(--line-subtle);
  border-radius: 6px;
  background: var(--surface);
  padding: 8px 5px;
  text-align: center;
  min-width: 0;
}
.calendar-stat-label {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.calendar-stat {
  color: var(--text-body);
  font-size: 12px;
  line-height: 17px;
}
.calendar-stat small,
.calendar-stat-empty small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}
:is(.calendar-stat, .calendar-stat-empty)
  + :is(.calendar-stat, .calendar-stat-empty) {
  border-top: 1px solid var(--line-subtle);
  margin-top: 5px;
  padding-top: 5px;
}
.calendar-stat-number {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  direction: ltr;
}
.calendar-stat-number b {
  font-size: 25px;
  line-height: 30px;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}
.calendar-stat-number > span {
  font-size: 12px;
  color: var(--text-muted);
}
.calendar-stat-number svg {
  color: var(--calendar-stat-color);
  fill: currentColor;
  stroke: none;
  width: 22px;
  height: 22px;
}
.calendar-stat-empty {
  font-size: 13px;
  color: var(--text-muted);
  min-height: 49px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#calendarRatingActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
#calendarRatingActions .calendar-rate-action {
  flex: 1 1 100%;
  width: auto;
  margin: 0;
  min-height: 34px;
  font-size: 14px;
  gap: 7px;
}
.calendar-rate-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calendar-rate-action.has-rating svg {
  fill: currentColor;
}
.calendar-detail .calendar-future {
  padding-top: 10px;
  border-top: 1px solid var(--line-subtle);
  margin-top: auto;
}
.calendar-detail .calendar-future h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 16px;
  line-height: 21px;
  margin: 0 0 6px;
}
.calendar-detail .calendar-future button {
  padding: 3px 0;
  font-size: 14px;
  line-height: 19px;
}
#calendarPopupDetails .calendar-detail {
  gap: 12px;
}
@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-detail {
    padding: 12px;
    gap: 9px;
  }
  .calendar-detail-info {
    gap: 4px;
  }
  .calendar-detail-info p {
    line-height: 19px;
  }
}

@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-detail .calendar-future button {
    padding-block: 3px;
    line-height: 18px;
    min-height: 24px;
  }
}

.calendar-stat-caption {
  display: block;
  font-size: 11px;
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Shared Daf note-popup presentation; Calendar supplies only its date-bound adapter. */
.study-note {
  width: 400px;
  padding: 0;
}
.study-note .daf-modal-content {
  padding: 20px;
}
#studyNoteForm {
  display: grid;
  gap: 16px;
}
#studyNoteText {
  width: 100%;
  resize: vertical;
}
#studyNoteSave {
  justify-self: start;
}
#studyNoteStatus:empty {
  display: none;
}
#studyNoteStatus {
  font-size: 13px;
  margin: 10px 0 0;
}
.calendar-personal .ui-button {
  color: var(--accent-primary);
}
.calendar-personal svg {
  color: var(--accent-primary);
}
.calendar-learned[aria-pressed="false"] .study-learned-check {
  opacity: 1;
}
.calendar-note.has-note .study-note-paper {
  fill: none;
}
.calendar-note.has-note .study-note-pencil {
  fill: var(--accent-primary);
}
/* Center a single observance line inside the same reserved two-line area. */
.calendar-cell-holidays {
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-holiday-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 24px;
  overflow: hidden;
  width: 100%;
  white-space: pre-line;
}
#studyNoteSave {
  background: var(--emphasized-face);
  color: var(--desk-gold-ink);
  border: 1px solid var(--accent-hover);
  box-shadow:
    inset 0 1px 0 var(--surface-glint),
    0 1px 2px var(--shadow-color);
}
#studyNoteSave:hover {
  background: var(--emphasized-hover);
  color: var(--desk-gold-ink);
}

.calendar-detail-info .calendar-summary-holidays {
  min-height: 38px;
  max-height: 38px;
  align-content: center;
  overflow: auto;
  gap: 0;
}
#calendarSelectedWeekday {
  white-space: nowrap;
}

/* Fieldset appearance belongs to site-settings.css / SiteFieldsetHeading. */
.calendar-presentation-controls {
  display: flex;
  justify-content: center;
  margin: 16px 0 4px;
}
.calendar-presentation-controls .calendar-view-controls {
  width: fit-content;
  max-width: 100%;
  flex: none;
  box-sizing: border-box;
  justify-content: center;
}
.calendar-view-choices {
  justify-content: center;
}
.calendar-stat-empty {
  min-height: 47px;
  height: 47px;
  box-sizing: border-box;
}
.calendar-stat {
  min-height: 47px;
}
.calendar-stat-number {
  height: 30px;
}
.calendar-stat:has(> small),
.calendar-stat-empty:has(> small) {
  min-height: 64px;
  height: 64px;
}
@container (max-width:560px) {
  .calendar-view-family {
    justify-content: center;
  }
}

.calendar-stat,
.calendar-stat-empty {
  box-sizing: content-box;
}
.calendar-stat-empty {
  line-height: 17px;
}
.calendar-stat small,
.calendar-stat-empty small {
  line-height: 17px;
}

#calendarViewFieldset {
  padding-top: 11px;
  padding-bottom: 19px;
  padding-inline: 19px;
}

@container (min-width:561px) {
  #calendarViewFieldset .calendar-view-family + .calendar-view-family {
    margin-inline-start: 5px;
    padding-inline-start: 25px;
  }
}
@container (min-width:960px) {
  #calendarViewFieldset .calendar-view-family + .calendar-view-family {
    padding-inline-start: 17px;
  }
}

/* Matching, content-width fieldsets; progress follows the view choices in RTL. */
.calendar-presentation-controls {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px 16px;
}
.calendar-presentation-controls .calendar-progress-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 11px 19px 19px;
  max-width: 100%;
  box-sizing: border-box;
}
.calendar-presentation-controls .calendar-view-controls {
  margin: 0;
}

/* All four cell badges share one square footprint, including decimal ratings. */
.calendar-day .calendar-mark,
.calendar-day .calendar-grade {
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  line-height: 18px;
}
.calendar-day[data-density="compact"] .calendar-mark,
.calendar-day[data-density="compact"] .calendar-grade {
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  line-height: 18px;
}

/* Reserve one footer row for all four badges, scaling together in narrow cells. */
.calendar-cell-meta {
  container-type: inline-size;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: center;
}
.calendar-cell-meta .calendar-cell-layers,
.calendar-cell-meta .calendar-cell-indicators {
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.calendar-day .calendar-cell-meta :is(.calendar-mark, .calendar-grade) {
  flex: 0 0 auto;
  width: min(
    20px,
    calc(
      (100cqw - (var(--calendar-badge-count, 4) - 1) * 2px) /
        var(--calendar-badge-count, 4)
    )
  );
  min-width: 0;
  height: min(
    20px,
    calc(
      (100cqw - (var(--calendar-badge-count, 4) - 1) * 2px) /
        var(--calendar-badge-count, 4)
    )
  );
  line-height: 1;
  font-size: min(11px, 24cqw);
}

.calendar-cell-meta .calendar-cell-indicators,
.calendar-cell-meta .calendar-cell-layers {
  min-height: 20px;
  align-items: center;
}
.calendar-cell-meta .calendar-rating-pair {
  align-items: center;
}

/* Inline day details follow document flow, independent of calendar length. */
.calendar-layout > .calendar-detail {
  align-self: start;
  height: auto;
  min-height: 0;
  max-height: none;
  position: static;
  overflow: visible;
}
.calendar-layout > .calendar-detail .calendar-future {
  margin-top: 0;
}

/* Selected-day details attach to their cell without a modal backdrop. */
#calendarDayEditor {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  color: var(--text-body);
  box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
  overflow: auto;
  box-sizing: border-box;
}
#calendarDayEditor::backdrop {
  background: transparent;
}

/* Single-sided borders avoid gap antialiasing on fractional grid tracks. */
.calendar-periods:has(> .calendar-cycle-grid) {
  grid-template-columns: minmax(0, 1fr);
}
/* Shas uses real Sunday–Saturday rows in both single and complete-cycle views. */
.calendar-page[data-calendar-view="tractate"] .calendar-month,
.calendar-page[data-calendar-view="tractate"] .calendar-period {
  overflow-x: auto;
}
.calendar-page[data-calendar-view="tractate"] .calendar-grid {
  min-width: 770px;
}
.calendar-page[data-calendar-view="tractate"] .calendar-grid td {
  height: 140px;
}
.calendar-cycle-grid tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}
.calendar-page[data-calendar-view="tractate"] .calendar-day {
  height: 140px;
  min-height: 140px;
  padding: 5px;
}
.calendar-day .calendar-dates-full {
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  min-height: 22px;
  line-height: 18px;
  font-size: 12px;
}
.calendar-dates-full b {
  font-weight: 400;
  white-space: nowrap;
}
.calendar-day .calendar-dates-full > span {
  font-size: 12px;
}
.calendar-cell-weekday {
  display: block;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 6px;
  color: var(--text-muted);
}
/* Reserve the 1080px desktop target without shrinking date/holiday/badge content. */
#calendarOverlayStatus:empty {
  display: none;
}
@media (min-width: 1101px) and (max-height: 980px) {
  .calendar-presentation-controls {
    margin-top: 6px;
  }
}

/* Static completion celebration: scales without distortion and never changes cell flow. */
.calendar-day {
  position: relative;
  isolation: isolate;
}
.calendar-siyum {
  position: absolute;
  top: 0;
  left: 0;
  width: min(44px, 100%);
  height: 44px;
  overflow: hidden;
  z-index: 2;
}
.calendar-siyum-ribbon {
  position: absolute;
  top: 9px;
  left: -16px;
  width: 70px;
  height: 15px;
  transform: rotate(-45deg);
  background: var(--accent-primary);
  color: var(--accent-light);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
}

/* Optional feature visibility is Calendar-owned, including the initial default paint. */
.calendar-page:not(.calendar-ratings-visible) .calendar-rating-section,
.calendar-siyum-hidden .calendar-siyum {
  display: none;
}
.calendar-settings-danger.ui-button {
  background: var(--accent-primary);
  color: var(--desk-gold-ink);
  border-color: var(--accent-border);
  white-space: normal;
  max-width: 100%;
}
.calendar-settings-danger.ui-button:hover {
  background: var(--emphasized-hover);
  color: var(--desk-gold-ink);
}
.calendar-clear-dialog {
  width: 420px;
  max-width: calc(100vw - 24px);
}
.calendar-clear-dialog .daf-modal-content {
  padding: 20px;
  display: grid;
  gap: 16px;
}
.calendar-clear-dialog .daf-modal-content p {
  margin: 0;
}
#calendarClearStatus:empty {
  display: none;
}
.calendar-clear-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.calendar-clear-actions button {
  min-width: 90px;
}
.calendar-page.calendar-wide {
  max-width: none;
}
.calendar-wide .calendar-periods:not(:has(> .calendar-cycle-grid)) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
}

/* Use the shell's two-column fieldset grid and avoid empty status spacing. */
.calendar-preference-settings > p:empty {
  display: none;
}
.calendar-danger-settings .site-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.calendar-danger-settings .site-settings-grid > button {
  grid-column: auto;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  min-height: 40px;
}

/* Fullscreen is a desktop action; keep mobile controls aligned by label column. */
@media (max-width: 1439px) {
  .calendar-controls .calendar-fullscreen { display: none; }
}
@container (max-width: 740px) {
  .calendar-controls .calendar-control-group {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
  }
  .calendar-control-label { flex: 0 0 74px; text-align: start; }
  .calendar-selects { justify-content: flex-start; min-width: 0; }
}

@container (max-width: 820px) {
  .calendar-layout > .calendar-detail { display: none; }
}

@container (max-width: 560px) {
  #calendarViewChoices { align-items: stretch; }
  #calendarViewChoices .calendar-view-family { justify-content: flex-start; }
  #calendarViewChoices .calendar-view-family > strong {
    flex: 0 0 74px;
    text-align: start;
  }
}
/* Mobile details use the viewport rather than the space beside a calendar cell.
   Only the outer sheet scrolls; the content and detail sections stay natural height. */
@media (max-width: 820px) {
  body:has(#calendarDayEditor:popover-open) { overflow: hidden; }
  #calendarDayEditor:popover-open {
    inset: 8px !important;
    width: auto;
    max-width: none;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #calendarDayEditor > .site-popup-titlebar {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  #calendarDayEditor #calendarPopupDetails,
  #calendarDayEditor .calendar-detail {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

/* Narrow calendars reserve a row for study/note marks and a row below for ratings. */
@media (max-width: 700px) {
  .calendar-page .calendar-day {
    min-height: 124px;
    height: 124px;
    padding-inline: 2px;
  }
  .calendar-cell-meta {
    min-height: 38px;
    flex-direction: column;
    align-items: center;
  }
  .calendar-cell-meta .calendar-cell-indicators,
  .calendar-cell-meta .calendar-rating-pair {
    flex-direction: row;
    justify-content: center;
    width: 38px;
    gap: 2px;
  }
  .calendar-cell-meta .calendar-cell-layers {
    align-self: center;
    margin-inline: 0;
    width: 38px;
    max-width: none;
    min-width: 38px;
    justify-content: center;
    align-items: flex-end;
    flex: 0 0 auto;
    min-height: 18px;
    gap: 2px;
  }
  .calendar-day .calendar-cell-meta :is(.calendar-mark, .calendar-grade) {
    width: 18px;
    height: 18px;
    min-width: 18px;
    font-size: 11px;
  }
  .calendar-day .calendar-cell-meta .calendar-mark { font-size: 15px; }
}