.calendaria {
  &.big-cal {
    display: flex;
    opacity: var(--calendaria-bigcal-idle-opacity, 1);
    position: fixed;
    flex-direction: column;
    border-radius: 0.75rem;
    overflow: hidden;
    color: var(--atlas-text, rgb(224 224 224));
    background: var(--atlas-bg, rgb(31 31 31));
    box-shadow:
      0 0.5rem 2rem rgb(0 0 0 / 30%),
      0 0 0 0.0625rem var(--atlas-border, rgb(74 74 74));

    .calendar-header {
      display: flex;
      position: relative;
      flex-direction: column;
      border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      cursor: grab;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
    }

    .header-row {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      padding: 0.5rem 0.5rem 0.375rem;
    }

    .header-row-bottom {
      padding-top: 0;
    }

    .header-row-equivalent {
      contain: inline-size;
      gap: 0;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin-top: -0.5rem;
      padding-top: 0;
      padding-bottom: 0;
    }

    .equivalent-date-subtitle {
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-style: italic;
      font-size: 0.75rem;
      line-height: 1.4;
      cursor: pointer;
      transition: color 0.15s;

      &:hover {
        color: var(--atlas-primary, rgb(74 144 226));
      }

      i {
        opacity: 0.6;
        margin-right: 0.25rem;
      }
    }

    .equivalent-date-sep {
      opacity: 0.7;
      flex-shrink: 0;
      align-self: center;
      width: 0.25rem;
      height: 0.25rem;
      margin: 0 0.375rem;
      border-radius: 50%;
      background: var(--atlas-text-dim, rgb(153 153 153));
    }

    .calendar-title {
      flex: 1;
      margin: 0;
      color: var(--atlas-title-text, rgb(255 255 255));
      font-weight: bold;
      font-size: 1rem;
      font-family: var(--font-body);
      text-align: center;
      white-space: nowrap;
    }

    .calendar-indicators {
      gap: 0.5rem;
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      min-width: 0;
      overflow: hidden;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: var(--font-size-12, 0.75rem);
    }

    .calendar-actions {
      gap: 0.375rem;
      display: flex;
      flex-shrink: 0;
      align-items: center;
    }

    .header-divider {
      width: 0.0625rem;
      height: 1rem;
      background: var(--atlas-border, rgb(74 74 74));
    }

    button:not(.add-note-btn) {
      border-color: var(--atlas-border, rgb(74 74 74));
      border-radius: 0.25rem;
      color: var(--atlas-text, rgb(224 224 224));
      background: var(--atlas-button-bg, rgb(58 58 58));

      &:hover {
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }
    }

    .header-row button {
      min-width: 1.5rem;
      height: 1.5rem;
      padding: 0.125rem 0.25rem;

      &:disabled {
        opacity: 0.35;
        cursor: default;
      }
    }

    .view-select {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      box-sizing: border-box;
      width: 3.375rem;
      min-width: 3.375rem;
      height: 1.5rem;
      margin: 0;
      padding: 0 0.375rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.25rem;
      color: var(--atlas-text, rgb(224 224 224));
      font-size: 0.75rem;
      line-height: 1.375rem;
      text-align: center;
      cursor: pointer;
      background: var(--atlas-button-bg, rgb(58 58 58));
      background-image: none;

      &:hover {
        border-color: var(--atlas-primary, rgb(74 144 226));
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }

    .calendar-main-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: fit-content;
      height: fit-content;
      padding: 0.5rem;
    }

    .calendar-grid {
      display: flex;
      flex-direction: column;
      width: fit-content;
      height: fit-content;
    }

    .calendar-weekdays {
      display: grid;
      margin-bottom: 0.25rem;
      font-weight: bold;
      text-align: center;
    }

    .weekday-header {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(var(--calendaria-day-size) - var(--calendaria-day-gap));
      height: var(--calendaria-weekday-height);
      margin: 0 calc(var(--calendaria-day-gap) / 2);
      border-radius: 0.25rem;
      overflow: hidden;
      color: var(--atlas-weekday-header, rgb(224 224 224));
      font-size: 0.9rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: var(--atlas-bg-lighter, rgb(42 42 42));

      &.rest-day {
        color: var(--atlas-rest-day, rgb(139 157 195));
      }
    }

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

    .calendar-week {
      display: grid;
      position: relative;

      &.intercalary-row {
        display: flex;
        justify-content: center;

        .calendar-day.intercalary {
          justify-content: center;
          width: 100%;

          .day-number {
            justify-content: center;
          }

          .festival-name {
            font-weight: 500;
          }
        }
      }
    }

    .calendar-day {
      display: flex;
      position: relative;
      flex-direction: column;
      box-sizing: border-box;
      width: var(--calendaria-day-size);
      height: var(--calendaria-day-size);
      padding: 0.25rem;
      border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0.25rem;
      cursor: pointer;
      background: var(--atlas-bg, rgb(31 31 31));
      transition: background 0.2s ease;

      &:not(.empty):hover {
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }

      &.odd-day {
        background: rgb(0 0 0 / 20%);
      }

      &.empty {
        opacity: 0.3;
        background: var(--atlas-bg-lighter, rgb(42 42 42));
      }

      &.other-month,
      &.other-week {
        opacity: 0.4;
        cursor: pointer;
        background: transparent;

        &:hover {
          opacity: 0.6;
          background: var(--atlas-bg-hover, rgb(53 53 53));
        }
      }

      &.today {
        z-index: 1;
        position: relative;
        border-color: var(--atlas-today, rgb(255 100 0));
        background: color-mix(in srgb, var(--atlas-today, rgb(255 100 0)) 18%, var(--atlas-bg, rgb(31 31 31)));
        box-shadow: 0 0 0.375rem var(--atlas-today, rgb(255 100 0));

        .day-number {
          color: var(--atlas-today, rgb(255 100 0));
          font-weight: 700;
        }
      }

      &.selected {
        z-index: 1;
        position: relative;
        border-color: var(--atlas-primary, rgb(74 144 226));
        background: color-mix(in srgb, var(--atlas-primary, rgb(74 144 226)) 10%, var(--atlas-bg, rgb(31 31 31)));
        cursor: pointer;
        box-shadow: 0 0 0.375rem var(--atlas-primary, rgb(74 144 226));
      }

      &.today.selected {
        box-shadow:
          0 0 0.375rem var(--atlas-primary, rgb(74 144 226)),
          inset 0 0 0 0.125rem var(--atlas-today, rgb(255 100 0));
      }

      &.has-notes {
        border-color: var(--atlas-border, rgb(74 74 74));
      }

      &.festival-day {
        position: relative;
        border-color: var(--festival-color, var(--atlas-callout-border, rgb(212 175 55)));
        background: color-mix(in srgb, var(--festival-color, var(--atlas-callout-border, rgb(212 175 55))) 15%, var(--atlas-bg, rgb(31 31 31)));

        &::after {
          opacity: 0.6;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          height: 0.1875rem;
          content: '';
          background: linear-gradient(90deg, transparent, var(--festival-color, var(--atlas-callout-text, rgb(255 215 0))) 50%, transparent);
        }

        .day-number {
          color: var(--festival-color, var(--atlas-callout-text, rgb(255 215 0)));
        }
      }

      &:hover .day-notes .add-note-btn {
        opacity: 1;
      }

      &.fogged {
        opacity: 0.3;
        pointer-events: none;
        background: repeating-linear-gradient(
          45deg,
          transparent,
          transparent 0.25rem,
          color-mix(in srgb, var(--atlas-text, rgb(224 224 224)) 8%, transparent) 0.25rem,
          color-mix(in srgb, var(--atlas-text, rgb(224 224 224)) 8%, transparent) 0.5rem
        );

        .day-notes,
        .day-moons,
        .day-weather-pill {
          display: none;
        }
      }
    }

    .day-number {
      gap: 0.25rem;
      display: flex;
      align-items: center;
      margin-bottom: 0.25rem;
      color: var(--atlas-text, rgb(224 224 224));
      font-weight: bold;
      font-size: var(--font-size-14);
    }

    .festival-icon-wrapper[data-action] {
      cursor: pointer;
    }

    .festival-icon {
      color: var(--festival-color, var(--atlas-callout-text, rgb(255 215 0)));
      font-size: var(--font-size-12);
    }

    img.festival-icon {
      width: 1em;
      height: 1em;
      object-fit: contain;
      vertical-align: middle;
    }

    .day-weather-pill + .day-notes {
      margin-top: 0;
    }

    .day-notes {
      gap: 0.25rem;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      min-height: 1rem;

      .day-notes-items {
        gap: 0.25rem;
        display: flex;
        flex: 1;
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
        overflow: hidden;
      }

      .add-note-btn {
        opacity: 0;
        flex-shrink: 0;
        transform: none;

        &:hover {
          transform: scale(1.2);
        }
      }
    }

    .note-indicator {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: transform 0.1s ease;

      i,
      img {
        pointer-events: none;
      }

      i {
        font-size: 0.875rem;
      }

      img {
        object-fit: cover;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
      }

      &:hover {
        transform: scale(1.2);
      }
    }

    .note-pip {
      flex-shrink: 0;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.1s ease;

      &:hover {
        transform: scale(1.4);
      }
    }

    .note-banner {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0.0625rem 0.25rem;
      border-radius: 0.1875rem;
      overflow: hidden;
      cursor: pointer;
      transition: filter 0.1s ease;

      .note-banner-text {
        overflow: hidden;
        color: var(--atlas-text-on-color, rgb(255 255 255));
        font-weight: 600;
        font-size: 0.625rem;
        text-overflow: ellipsis;
        text-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 50%);
        white-space: nowrap;
      }

      &:hover {
        filter: brightness(1.15);
      }
    }

    .add-note-btn {
      display: flex;
      opacity: 0;
      z-index: 5;
      position: absolute;
      right: 0.125rem;
      bottom: 0.125rem;
      justify-content: center;
      align-items: center;
      width: 0.875rem;
      height: 0.875rem;
      min-height: 0.875rem;
      padding: 0;
      border: none;
      border-radius: 0;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: 0.875rem;
      cursor: pointer;
      pointer-events: auto;
      background: none;
      box-shadow: none;
      transition:
        opacity 0.2s,
        color 0.15s,
        transform 0.1s;

      i {
        margin: 0;
      }

      &:hover {
        background: none;
        box-shadow: none;
        transform: scale(1.2);
      }

      &:active {
        background: none;
      }
    }

    .day-moons {
      gap: 0.125rem;
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      max-height: 1.5rem;
      overflow: hidden;
    }

    .moon-phase {
      display: inline-flex;
      align-items: center;
      height: var(--font-size-12);
      cursor: pointer;

      img {
        width: auto;
        height: 100%;
        pointer-events: none;
      }
    }

    .moon-phase.tinted,
    span.calendaria-moon-icon.tinted {
      border-radius: 50%;
      overflow: hidden;
      background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(255 255 255));

      img {
        mix-blend-mode: multiply;
      }
    }

    .moon-overflow {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: var(--font-size-12);
      min-width: var(--font-size-12);
      height: var(--font-size-12);
      padding: 0 0.1875rem;
      border-radius: 0.1875rem;
      color: var(--atlas-text, rgb(224 224 224));
      font-weight: 600;
      font-size: 0.625rem;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
    }

    .day-bottom {
      display: flex;
      flex-direction: column;
      margin-top: auto;
    }

    .day-weather-pill {
      gap: 0.2rem;
      display: inline-flex;
      align-items: center;
      height: var(--font-size-12);
      padding: 0 0.25rem;
      border-radius: 0.5rem;
      font-size: var(--font-size-10);
      line-height: 1;
      white-space: nowrap;
      background: rgb(255 255 255 / 6%);

      i,
      span {
        pointer-events: none;
      }

      i {
        font-size: var(--font-size-10);
      }

      &.forecast {
        opacity: 0.5;
      }
    }

    .mini-weather-icon {
      opacity: 0.7;
      position: absolute;
      right: 0.125rem;
      bottom: 0.125rem;
      width: 0.75rem;
      height: 0.75rem;
      font-size: 0.625rem;
      line-height: 0.75rem;
      text-align: center;

      &.forecast {
        opacity: 0.4;
      }
    }

    img.calendaria-moon-icon {
      display: inline;
      width: auto;
      height: 1em;
      vertical-align: middle;
    }

    span.calendaria-moon-icon {
      display: inline-flex;
      align-items: center;
      height: 1em;
      vertical-align: middle;

      img {
        width: auto;
        height: 100%;
      }
    }

    .event-bar {
      -webkit-text-stroke: 0.0313rem var(--atlas-shadow-light, rgb(0 0 0 / 20%));
      display: flex;
      z-index: 10;
      position: absolute;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      height: 1rem;
      padding: 0 0.625rem;
      border: 0.0625rem solid var(--atlas-shadow-light, rgb(0 0 0 / 20%));
      border-radius: 0.75rem;
      overflow: hidden;
      color: var(--atlas-text-on-color, rgb(255 255 255));
      font-weight: 600;

      i,
      span,
      img {
        pointer-events: none;
      }

      font-size: 0.625rem;
      text-overflow: ellipsis;
      text-shadow:
        -0.0625rem -0.0625rem 0 var(--atlas-text-shadow-on-color, rgb(0 0 0 / 50%)),
        0.0625rem -0.0625rem 0 var(--atlas-text-shadow-on-color, rgb(0 0 0 / 50%)),
        -0.0625rem 0.0625rem 0 var(--atlas-text-shadow-on-color, rgb(0 0 0 / 50%)),
        0.0625rem 0.0625rem 0 var(--atlas-text-shadow-on-color, rgb(0 0 0 / 50%)),
        0 0.125rem 0.25rem var(--atlas-text-shadow-on-color, rgb(0 0 0 / 50%));
      white-space: nowrap;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: 0 0.125rem 0.25rem var(--atlas-shadow-light, rgb(0 0 0 / 20%));
      transition:
        box-shadow 0.15s ease,
        filter 0.15s ease,
        transform 0.15s ease;

      &:hover {
        z-index: 20;
        box-shadow: 0 0.25rem 0.5rem var(--atlas-shadow-color, rgb(0 0 0 / 40%));
        filter: brightness(1.1);
        transform: translateY(-0.125rem);
      }

      .event-bar-icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        margin-right: 0.375rem;
        color: var(--atlas-text-on-color, rgb(255 255 255));
        line-height: 1;
        filter: drop-shadow(0 0.0625rem 0.125rem var(--atlas-text-shadow-on-color, rgb(0 0 0 / 50%)));

        &:is(img) {
          width: 0.875rem;
          height: 0.875rem;
          object-fit: cover;
          border-radius: 50%;
        }
      }

      .event-bar-text {
        flex: 1;
        overflow: hidden;
        line-height: 1;
        text-overflow: ellipsis;
      }

      .event-bar-continuation {
        flex-shrink: 0;
        margin-right: 0.375rem;
        color: var(--atlas-text-on-color, rgb(255 255 255));
        font-size: 0.75rem;
        filter: drop-shadow(0 0.0625rem 0.125rem var(--atlas-text-shadow-on-color, rgb(0 0 0 / 50%)));
      }

      &.event-bar-condensed {
        -webkit-text-stroke: 0;
        height: 0.375rem;
        padding: 0;
        border-radius: 0.125rem;
        overflow: hidden;
        text-shadow: none;
        box-shadow: none;
        transition:
          height 0.15s ease,
          padding 0.15s ease,
          z-index 0s;

        .event-bar-icon,
        .event-bar-text,
        .event-bar-continuation {
          opacity: 0;
          transition: opacity 0.1s ease;
        }

        &:hover {
          z-index: 30;
          height: 1rem;
          padding: 0 0.625rem;
          box-shadow: 0 0.25rem 0.5rem var(--atlas-shadow-color, rgb(0 0 0 / 40%));
          filter: none;
          transform: none;

          .event-bar-icon,
          .event-bar-text,
          .event-bar-continuation {
            opacity: 1;
          }
        }
      }

      &.bookend-start {
        border-radius: 0.75rem 0.125rem 0.125rem 0.75rem;
      }

      &.bookend-end {
        border-radius: 0.125rem 0.75rem 0.75rem 0.125rem;
      }

      &.bookend-start.bookend-end {
        border-radius: 0.75rem;
      }

      &:not(.bookend-start, .bookend-end) {
        border-radius: 0.125rem;
      }
    }

    .calendar-week-view {
      width: fit-content;
      height: fit-content;
      background: var(--atlas-bg, rgb(31 31 31));
    }

    .week-grid {
      gap: 0.0625rem;
      grid-template-columns: var(--calendaria-week-day-width) repeat(var(--hours-per-day, 24), var(--calendaria-week-hour-width));
      display: grid;
      width: fit-content;
      height: fit-content;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.25rem;
      background: var(--atlas-border-light, rgb(58 58 58));
    }

    .week-corner-header {
      border-right: 0.125rem solid var(--atlas-border, rgb(74 74 74));
      border-bottom: 0.125rem solid var(--atlas-border, rgb(74 74 74));
      background: var(--atlas-bg-lighter, rgb(42 42 42));
    }

    .week-hour-label {
      gap: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
      border-bottom: 0.125rem solid var(--atlas-border, rgb(74 74 74));
      overflow: hidden;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-weight: 600;
      font-size: 0.75rem;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
    }

    .week-day-header {
      display: flex;
      z-index: 5;
      position: sticky;
      left: 0;
      align-items: center;
      padding: 0.25rem 0.5rem;
      border-right: 0.125rem solid var(--atlas-border, rgb(74 74 74));
      font-size: 0.85rem;
      white-space: nowrap;
      background: var(--atlas-bg, rgb(31 31 31));

      &.today {
        border-right: 0.1875rem solid var(--atlas-today, rgb(255 100 0));
        background: var(--atlas-highlight-bg, rgb(255 100 0 / 20%));
      }

      &.rest-day {
        color: var(--atlas-rest-day, rgb(139 157 195));
      }
    }

    .week-time-cell {
      position: relative;
      border-right: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      overflow: visible;
      cursor: pointer;
      background: var(--atlas-bg, rgb(31 31 31));
      transition: background 0.15s ease;

      &:hover {
        background: var(--atlas-bg-hover, rgb(53 53 53));

        .add-note-btn {
          opacity: 1;
        }
      }

      .add-note-btn {
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);

        &:hover {
          transform: translate(-50%, -50%) scale(1.2);
        }
      }

      &.current-hour {
        border: 0.05rem solid var(--atlas-today, rgb(255 100 0));
      }

      &.selected {
        border: 0.05rem solid var(--atlas-primary, rgb(74 144 226));
      }
    }

    .week-event-block {
      --hour-span: 1;

      gap: 0.25rem;
      display: flex;
      z-index: 10;
      position: absolute;
      top: 0.125rem;
      bottom: 0.125rem;
      left: 0.125rem;
      flex-direction: row;
      align-items: center;
      width: calc(var(--hour-span) * 100% + (var(--hour-span) - 1) * 0.0625rem - 0.25rem);
      padding: 0.25rem 0.375rem;
      border-top: 0.1875rem solid var(--atlas-shadow-color, rgb(0 0 0 / 40%));
      border-radius: 0.25rem;
      overflow: hidden;
      color: var(--atlas-text-on-color, rgb(255 255 255));
      font-size: 0.6875rem;
      text-shadow: 0 0.0625rem 0.125rem var(--atlas-text-shadow-on-color, rgb(0 0 0 / 50%));
      cursor: pointer;
      box-shadow:
        0 0.125rem 0.25rem var(--atlas-shadow-light, rgb(0 0 0 / 20%)),
        inset 0 0.0625rem 0 var(--calendaria-highlight);
      transition:
        box-shadow 0.15s ease,
        filter 0.15s ease,
        transform 0.15s ease;

      &.cont-left,
      &.cont-right,
      &.cont-left.cont-right {
        left: 0;
        width: calc(var(--hour-span) * (var(--calendaria-week-hour-width) + 0.0625rem) - 0.0625rem);
      }

      &.cont-left {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &.cont-right {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:hover {
        z-index: 20;
        box-shadow:
          0 0.25rem 0.5rem var(--atlas-shadow-color, rgb(0 0 0 / 40%)),
          inset 0 0.0625rem 0 var(--calendaria-highlight);
        filter: brightness(1.15);
        transform: translateY(-0.125rem);
      }

      .event-icon {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;

        i {
          font-size: 0.75rem;
        }

        img {
          object-fit: cover;
          width: 0.875rem;
          height: 0.875rem;
          border-radius: 50%;
        }
      }

      &.has-image-icon {
        background: transparent;
        border-top: none;
        box-shadow: none;
        text-shadow: none;

        .event-icon img {
          width: 1.25rem;
          height: 1.25rem;
          flex-shrink: 0;
        }
      }

      .event-name {
        min-width: 0;
        overflow: hidden;
        font-weight: 600;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &.compact {
        gap: 0.125rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.125rem 0.25rem;
        text-align: center;

        .event-icon {
          i {
            font-size: 0.875rem;
          }

          img {
            width: 1rem;
            height: 1rem;
          }
        }

        .event-name {
          max-width: 100%;
          font-size: 0.5625rem;
        }
      }
    }

    .calendar-year-view {
      width: fit-content;
      height: fit-content;
    }

    .year-grid {
      display: flex;
      flex-direction: column;
      width: fit-content;
      height: fit-content;
    }

    .year-row {
      grid-template-columns: repeat(3, auto);
      display: grid;
    }

    .year-cell {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      width: fit-content;
      height: fit-content;
      margin: -0.0625rem;
      padding: var(--calendaria-year-cell-padding);
      border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      cursor: pointer;
      background: var(--atlas-bg, rgb(31 31 31));
      transition:
        border-color 0.2s,
        box-shadow 0.2s;

      &:hover {
        z-index: 1;
        border-color: var(--atlas-border, rgb(74 74 74));
        box-shadow: 0 0.125rem 0.5rem var(--atlas-shadow-light, rgb(0 0 0 / 20%));
      }

      &.current-year {
        z-index: 2;
        border-color: var(--atlas-today, rgb(255 100 0));
        box-shadow: 0 0 0.25rem var(--atlas-today, rgb(255 100 0));
      }
    }

    .year-header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: var(--calendaria-year-header-height);
      padding-bottom: 0.25rem;
      border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      color: var(--atlas-title-text, rgb(255 255 255));
      font-weight: bold;
      font-size: 1.2rem;
      text-align: center;
    }

    .year-months {
      gap: var(--calendaria-year-month-gap);
      grid-template-columns: repeat(3, var(--calendaria-year-month-width));
      display: grid;
      margin-top: var(--calendaria-year-month-gap);
    }

    .month-mini {
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--calendaria-year-month-width);
      height: var(--calendaria-year-month-height);
      border-radius: 0.125rem;
      font-size: 0.8rem;
      cursor: pointer;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
      transition: background 0.2s;

      &:hover {
        color: var(--atlas-text-on-color, rgb(255 255 255));
        background: var(--atlas-primary, rgb(74 144 226));
      }

      &.current-month {
        border: 0.0625rem solid var(--atlas-today, rgb(255 100 0));
        box-shadow: 0 0 0.25rem var(--atlas-today, rgb(255 100 0));
      }

      &.no-days {
        opacity: 0.4;
        cursor: default;
        pointer-events: none;
      }
    }
  }
}

.calendaria {
  &.calendar-editor {
    &.standard-form {
      gap: 0;
    }

    fieldset legend {
      gap: 0.5rem;
      display: flex;
      align-items: center;
    }

    .legend-help {
      opacity: 0.6;
      height: 1.25rem;
      margin-right: 0.125rem;
      padding: 0;
      border: none;
      font-size: var(--font-size-14);
      cursor: pointer;
      background: none;

      &:hover {
        opacity: 1;
      }
    }

    .window-content {
      gap: 0;
      grid-template-columns: auto 1fr;
      grid-template-rows: 1fr auto;
      display: grid;
      height: 100%;
      padding: 0;
      overflow: hidden;
    }

    .flexrow {
      align-items: flex-start;
    }

    section.tab {
      padding: 0.75rem;
      overflow-y: auto;
    }

    .warning {
      color: var(--atlas-warning, rgb(255 193 7));
    }

    .format-input.invalid {
      border-color: var(--atlas-error, rgb(244 67 54));
      outline: 0.0625rem solid var(--atlas-error, rgb(244 67 54));
    }

    .format-preview {
      font-style: italic;

      &.error {
        color: var(--atlas-error, rgb(244 67 54));
      }
    }

    .template-selector {
      gap: 0.5rem;
      display: flex;
      flex-direction: column;
      align-items: stretch;

      select {
        flex: 1;
      }

      .template-actions {
        gap: 0.5rem;
        display: flex;
        justify-content: flex-end;
      }
    }

    .header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;

      legend {
        float: left;
        margin: 0;
      }
    }

    .validation-info {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.5rem 0.75rem;
      border-radius: 0.25rem;
      font-size: var(--font-size-14);
      background: var(--atlas-surface-dim-50, rgb(45 45 45 / 50%));

      i {
        color: var(--atlas-success, rgb(76 175 80));
      }

      &.warning i {
        color: var(--atlas-warning, rgb(255 193 7));
      }

      .mismatch {
        color: var(--atlas-warning, rgb(255 193 7));
      }
    }

    .items-list {
      grid-template-columns: var(--list-columns, 2fr 1fr auto);
      row-gap: 0.5rem;
      display: grid;

      > .list-header,
      > .item {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        display: grid;
        align-items: center;
        padding: 0.25rem 0.5rem;
        column-gap: 0.5rem;
      }

      > .item:not(.flexrow) {
        row-gap: 0.5rem;

        > * {
          grid-column: 1 / -1;
        }

        > .flexrow {
          grid-template-columns: subgrid;
          display: grid;
          align-items: center;
          column-gap: 0.5rem;
        }
      }

      label.checkbox {
        justify-self: center;
      }

      input.duplicate {
        border-color: var(--atlas-error, rgb(244 67 54));
        color: var(--atlas-error, rgb(244 67 54));
      }
    }

    .months-list {
      --list-columns: 2fr 1fr 3.5rem 3.5rem 1fr 1fr auto;
    }

    .weekdays-list {
      --list-columns: 2fr 1fr auto auto;
    }

    .named-weeks-list {
      --list-columns: 2fr 1fr 5rem auto;
    }

    .week-cycle-list {
      --list-columns: 8rem repeat(var(--cycle-days, 7), minmax(1.75rem, 1fr)) auto;

      .col-cycle-day {
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .named-weeks-list.no-week-number {
      --list-columns: 2fr 1fr auto;
    }

    .named-years-list {
      --list-columns: 2fr 6rem auto;
    }

    .festivals-list {
      --list-columns: auto 2fr 3fr auto;
    }

    .festival-toolbar {
      gap: 0.5rem;
      display: flex;
      margin-bottom: 0.5rem;
    }

    .festival-icon-display {
      --button-background-color: transparent;
      --button-border-color: transparent;

      padding: 0.25rem;
      font-size: 1.25em;

      &:hover {
        --button-hover-text-color: currentcolor;

        opacity: 0.8;
      }

      img {
        width: 1em;
        height: 1em;
        object-fit: contain;
        vertical-align: middle;
      }
    }

    .festival-name {
      font-weight: 500;
    }

    .festival-item.highlight-flash {
      animation: festival-highlight 1.5s ease;
    }

    @keyframes festival-highlight {
      0%,
      30% {
        background: color-mix(in srgb, var(--calendaria-ui-accent) 30%, transparent);
      }

      100% {
        background: transparent;
      }
    }

    .canonical-hours-list {
      --list-columns: 2fr 1fr 3.5rem 3.5rem auto;
    }

    .eras-list {
      --list-columns: 2fr 0.5fr 5rem 5rem auto;
    }

    .moons-list {
      --list-columns: 3fr 0.7fr auto auto;
    }

    .item {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.5rem;
      border: 0.0625rem solid var(--calendaria-ui-border);
      border-radius: 0.25rem;
      background: var(--calendaria-ui-surface-50);
    }

    .item-controls {
      gap: 0.125rem;
      display: flex;
      flex: none;
      align-items: center;

      button {
        --button-background-color: transparent;
        --button-border-color: transparent;

        padding: 0.25rem;
        font-size: 0.85em;

        &:disabled {
          opacity: 0.3;
        }

        &:hover:not(:disabled) {
          --button-hover-text-color: var(--atlas-text, rgb(224 224 224));
        }

        &[data-action='toggleCustomWeekdays'] {
          color: var(--atlas-warning, rgb(234 179 8));

          &.toggled {
            color: var(--atlas-success, rgb(76 175 80));
          }
        }

        &[data-action='removeMonth'],
        &[data-action='removeWeekday'],
        &[data-action='removeSeason'],
        &[data-action='removeFestival'],
        &[data-action='removeMoon'],
        &[data-action='removeMoonPhase'],
        &[data-action='removeEra'] {
          &:hover:not(:disabled) {
            --button-hover-text-color: var(--atlas-error, rgb(244 67 54));
          }
        }
      }
    }

    .item-fields {
      gap: 0.5rem;
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      align-items: center;

      input[type='text'] {
        flex: 1;
        min-width: 6.25rem;
      }

      .abbr-field {
        flex: none;
        width: 3.4375rem;
      }

      .days-field {
        flex: none;
        width: 3.4375rem;
      }

      .day-field {
        flex: none;
        width: 3.75rem;
      }

      .type-field {
        flex: none;
        width: 5.9375rem;
      }

      .range-fields,
      .date-fields {
        gap: 0.5rem;
        display: flex;
        align-items: center;

        label {
          font-weight: normal;
          font-size: var(--font-size-12);
        }
      }

      .rest-day {
        gap: 0.25rem;
        display: flex;
        align-items: center;
        font-size: var(--font-size-14);
        white-space: nowrap;

        label {
          font-weight: normal;
        }
      }
    }

    .computed-value {
      font-weight: 600;
      font-size: var(--font-size-16);
    }

    .leap-days-note {
      font-size: var(--font-size-13);
      white-space: nowrap;
    }

    .notice {
      gap: 0.5rem;
      display: flex;
      align-items: flex-start;
      margin-bottom: 0.75rem;
      padding: 0.5rem 0.75rem;
      border-radius: 0.25rem;
      font-size: var(--font-size-13);
      line-height: 1.4;

      i {
        flex: none;
        margin-top: 0.15rem;
      }
    }

    .list-header {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.25rem 0.5rem;
      font-weight: 600;
      font-size: var(--font-size-14);

      > span {
        text-align: center;
      }
    }

    .seasons-list {
      &.date-based {
        --list-columns: 1.5fr 0.75fr auto 1.5fr 1.5fr 1fr auto;
      }

      &.periodic {
        --list-columns: 1.5fr 0.75fr auto 4rem 1fr auto;
      }
    }

    .season-item {
      border-left: 0.1875rem solid var(--season-color, var(--atlas-border, rgb(74 74 74)));
    }

    .season-icon-display {
      --button-background-color: transparent;
      --button-border-color: transparent;

      padding: 0.25rem;
      font-size: 1.25em;

      &:hover {
        --button-hover-text-color: currentcolor;

        opacity: 0.8;
      }
    }

    .season-date-fields {
      gap: 0.375rem;
      display: flex;
      align-items: center;

      select {
        flex: 1;
        min-width: 0;
      }

      input[type='number'] {
        flex: 0 0 2.5rem;
      }
    }

    .moon-item {
      padding: 0.75rem 0.5rem;

      .moon-header {
        .color-input-wrapper {
          gap: 0.5rem;
          display: flex;
          align-items: center;
        }

        color-picker {
          flex: 0 0 8rem;
        }

        .moon-color-preview {
          flex-shrink: 0;
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }

          &.tinted {
            background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(255 255 255));
          }

          &.tinted img {
            mix-blend-mode: multiply;
          }
        }
      }

      .moon-fields {
        gap: 0.75rem;
        display: flex;
        flex-direction: column;
        padding-top: 0.75rem;
      }

      .anchor-phases {
        .anchors-list {
          --list-columns: 4rem 1fr 4rem 1fr auto;
        }

        .anchors-list select {
          width: 100%;
        }

        .add-anchor-btn {
          grid-column: 1 / -1;
          width: fit-content;
          margin-top: 0.5rem;
          white-space: nowrap;
        }
      }

      .moon-phases-section {
        margin-top: 0.5rem;

        .phases-list {
          --list-columns: auto 1.6fr 1fr 1fr 4.25rem 4.25rem auto;

          &.randomized-phases {
            --list-columns: auto 1.6fr 1fr 1fr 4.25rem auto;
          }
        }

        .empty-phases {
          display: flex;
          justify-content: center;
          padding-top: 0.75rem;
          text-align: center;
        }

        .phase-icon-btn {
          width: 2rem;
          height: 2rem;
          padding: 0.125rem;
          border: none;
          border-radius: 50%;
          overflow: hidden;
          cursor: pointer;
          background: transparent;

          &.tinted {
            background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(255 255 255));
          }

          &.tinted img {
            mix-blend-mode: multiply;
          }

          img {
            object-fit: contain;
            width: 100%;
            height: 100%;
          }

          .phase-emoji {
            font-size: 1.25rem;
            line-height: 1;
          }
        }
      }

      .moon-phase-slider {
        margin: 1.125rem 0 0.5rem;
        border: 0.0625rem solid color-mix(in srgb, var(--atlas-bg-lighter, rgb(42 42 42)) 70%, transparent);
        border-radius: 0.25rem;

        .slider-track {
          position: relative;
          width: 100%;
          height: 1.25rem;
          border-radius: 0.25rem;
          overflow: visible;

          --calendaria-starfield:
            radial-gradient(0.0625rem 0.0625rem at 10% 20%, rgb(255 255 255 / 80%), transparent), radial-gradient(0.0625rem 0.0625rem at 25% 70%, rgb(255 255 255 / 60%), transparent),
            radial-gradient(0.0625rem 0.0625rem at 40% 30%, rgb(255 255 255 / 70%), transparent), radial-gradient(0.0625rem 0.0625rem at 55% 80%, rgb(255 255 255 / 50%), transparent),
            radial-gradient(0.0625rem 0.0625rem at 70% 15%, rgb(255 255 255 / 80%), transparent), radial-gradient(0.0625rem 0.0625rem at 85% 60%, rgb(255 255 255 / 60%), transparent),
            radial-gradient(0.0625rem 0.0625rem at 95% 40%, rgb(255 255 255 / 70%), transparent), radial-gradient(0.0313rem 0.0313rem at 5% 50%, rgb(255 255 255 / 40%), transparent),
            radial-gradient(0.0313rem 0.0313rem at 15% 85%, rgb(255 255 255 / 40%), transparent), radial-gradient(0.0313rem 0.0313rem at 30% 10%, rgb(255 255 255 / 40%), transparent),
            radial-gradient(0.0313rem 0.0313rem at 45% 55%, rgb(255 255 255 / 40%), transparent), radial-gradient(0.0313rem 0.0313rem at 60% 45%, rgb(255 255 255 / 40%), transparent),
            radial-gradient(0.0313rem 0.0313rem at 75% 90%, rgb(255 255 255 / 40%), transparent), radial-gradient(0.0313rem 0.0313rem at 90% 25%, rgb(255 255 255 / 40%), transparent),
            linear-gradient(to bottom, rgb(13 16 51) 0%, rgb(10 10 26) 50%, rgb(5 5 16) 100%);

          background: var(--calendaria-starfield);
        }

        .slider-segment {
          display: flex;
          position: absolute;
          top: 0;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          height: 100%;
          border-right: 0.0625rem solid rgb(255 255 255 / 15%);
          transition: background 0.15s;

          &:first-child {
            border-radius: 0.25rem 0 0 0.25rem;
          }

          &:last-child {
            border-right: none;
            border-radius: 0 0.25rem 0.25rem 0;
          }

          &:hover {
            background: rgb(255 255 255 / 10%);
          }

          .phase-icon-wrapper {
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
            overflow: hidden;
            pointer-events: none;
          }

          &.tinted .phase-icon-wrapper {
            background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(255 255 255));
          }

          &.tinted .phase-icon-wrapper img {
            mix-blend-mode: multiply;
          }

          .phase-icon {
            object-fit: contain;
            width: 100%;
            height: 100%;
          }

          .phase-emoji {
            font-size: 0.75rem;
            line-height: 1;
          }

          .phase-percent {
            position: absolute;
            top: -1.125rem;
            left: 50%;
            font-size: var(--font-size-13);
            white-space: nowrap;
            cursor: pointer;
            transform: translateX(-50%);
          }
        }

        .slider-handle {
          z-index: 10;
          position: absolute;
          top: -0.0625rem;
          width: 0.25rem;
          height: calc(100% + 0.125rem);
          border-radius: 0.125rem;
          cursor: col-resize;
          background: var(--atlas-accent, rgb(168 144 96));
          transition:
            background 0.15s,
            box-shadow 0.15s;
          transform: translateX(-50%);

          &:hover,
          &.dragging {
            background: color-mix(in srgb, var(--atlas-accent, rgb(168 144 96)) 80%, rgb(255 255 255));
            box-shadow: 0 0 0.5rem var(--atlas-accent, rgb(168 144 96));
          }

          &::before {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0.0625rem;
            height: 0.75rem;
            border-radius: 0.0625rem;
            content: '';
            background: rgb(255 255 255 / 50%);
            transform: translate(-50%, -50%);
          }
        }
      }
    }

    .cycle-item {
      flex-direction: column;
      align-items: stretch;
      padding: 0.75rem;

      .cycle-header-grid {
        gap: 0.75rem;
        grid-template-columns: 1fr 5rem 5rem 8.75rem auto;
        display: grid;
        padding-bottom: 0.5rem;
        border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));

        .grid-col {
          gap: 0.25rem;
          display: flex;
          flex-direction: column;
          align-items: center;

          label {
            font-weight: 600;
            font-size: var(--font-size-14);
            text-align: center;
            white-space: nowrap;
          }

          input,
          select {
            width: 100%;
          }
        }

        .col-controls {
          .item-controls {
            gap: 0.25rem;
            display: flex;
          }
        }
      }

      .cycle-stages-section {
        legend {
          font-weight: bold;
          font-size: var(--font-size-14);
        }

        .stages-list {
          gap: 0.25rem;
          display: flex;
          flex-direction: column;
          overflow-y: auto;
        }

        .stage-item {
          gap: 0.5rem;
          display: flex;
          align-items: center;
          padding: 0.25rem 0.5rem;

          .col-stage-name {
            flex: 1;
            min-width: 6.25rem;
          }

          .item-controls {
            gap: 0.25rem;
            display: flex;
            flex: none;
          }
        }
      }
    }

    .empty-list {
      gap: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem;
      border: 0.0625rem dashed var(--atlas-border, rgb(74 74 74));
      border-radius: 0.25rem;
      font-style: italic;
      text-align: center;
      background: var(--atlas-surface-dim-50, rgb(45 45 45 / 50%));
    }

    footer.form-footer {
      grid-column: 1 / -1;
      grid-row: 2;
      padding: 0.5rem 1rem;
      border-top: 0.0625rem solid var(--calendaria-ui-border);
      background: var(--calendaria-ui-surface-dim);

      button {
        flex: none;
        width: fit-content;

        &[data-action='exportCalendar'] {
          flex: 1;
        }

        &[data-action='saveCalendar'] {
          flex: 2;
        }
      }
    }

    .season-climate-list {
      --list-columns: auto 1fr auto;
    }

    .zone-climate-list {
      --list-columns: 1fr auto;
    }
  }

  &:not(.climate-editor, .calendar-note-sheet) {
    nav.sheet-tabs {
      gap: 0;
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      width: max-content;
      min-width: 8rem;
      max-width: 8rem;
      height: 100%;
      padding: 0;
      border-top: none;
      border-right: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-bottom: none;

      .tab-group {
        display: flex;
        flex-direction: column;

        .tab-group-header {
          padding: 0.5rem;
          font-weight: 500;
          font-size: var(--font-size-18);
          text-align: left;
        }
      }

      [data-tab] {
        gap: 0.5rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        max-width: 100%;
        padding: 0.5rem;
        border-bottom: none;
        border-left: 0.1875rem solid var(--group-color, transparent);
        border-radius: 0;
        font-size: var(--font-size-14);
        text-align: left;

        > span:not(.notification-pip) {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        i {
          width: 1.25em;
          margin: 0;
          text-align: center;
        }

        &.active {
          border-left-color: var(--group-color, var(--atlas-accent, rgb(168 144 96)));
          background: color-mix(in srgb, var(--group-color, var(--atlas-accent, rgb(168 144 96))) 40%, transparent);
        }
      }
    }

    .nav-search {
      position: relative;

      input[type='search'] {
        margin: 0;
        padding: 0 0.3rem 0 2rem;
        border: none;
        border-radius: 0;
        font-size: var(--font-size-11);
      }

      > i {
        position: absolute;
        top: 50%;
        left: 0.5rem;
        font-size: var(--font-size-16);
        pointer-events: none;
        transform: translateY(-50%);
      }
    }
  }
}

.theme-light {
  .calendaria {
    &.calendar-editor {
      footer.form-footer {
        border-top-color: var(--atlas-border-light, rgb(58 58 58));
        background: var(--atlas-bg-lighter, rgb(42 42 42));
      }

      .warning {
        color: var(--atlas-error, rgb(244 67 54));
      }

      .item {
        border-color: var(--atlas-border-light, rgb(58 58 58));
        background: none;
      }

      .empty-list {
        color: unset;
        background: unset;
      }
    }
  }
}

.chat-message .cal-timestamp-banner {
  opacity: 0.85;
  padding: 0.25rem 0.5rem;
  color: var(--color-text-primary, rgb(50 50 50));
  font-style: italic;
  font-weight: 500;
  font-size: var(--font-size-11, 0.85rem);
  font-family: var(--font-sans, sans-serif);
  text-align: right;
}

.calendaria {
  &.chat-announcement,
  &.chat-reminder {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
  }

  &.chat-announcement {
    .announcement-date {
      color: var(--color-text-primary, inherit);
      font-weight: 500;
      font-size: 0.9em;
    }

    .announcement-content {
      color: var(--color-text-subtle, inherit);
      font-size: 0.85em;
      line-height: 1.4;
    }
  }

  &.chat-reminder {
    .reminder-message {
      color: var(--color-text-primary, inherit);
      font-size: 0.9em;

      strong {
        color: var(--color-text-emphatic, inherit);
      }
    }
  }

  &.chat-release {
    .release-header {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      font-size: 1rem;

      i {
        color: rgb(233 30 140);
        font-size: 1.25rem;
      }
    }

    .release-body {
      h4 {
        margin: 1rem 0 0.25rem;
      }

      .release-patreon {
        padding: 0.5rem;
        border: 0.0625rem solid var(--color-border-dark, rgb(120 120 120));
        border-radius: 0.25rem;

        strong {
          display: block;
          margin-bottom: 0.25rem;

          a {
            color: var(--color-text-hyperlink, rgb(30 100 200));
            text-decoration: none;

            &:hover {
              text-decoration: underline;
            }

            i {
              margin-right: 0.25rem;
            }
          }
        }
      }

      .release-blurb {
        a {
          color: var(--color-text-hyperlink, rgb(30 100 200));
        }
      }

      code {
        font-size: 0.9em;
      }
    }

    .open-note {
      margin-top: 0.5rem;
    }
  }

  &.chat-output {
    h3 {
      margin: 0 0 0.15rem;
      font-size: 1rem;
    }

    .forecast-zone {
      margin-bottom: 0.35rem;
      color: var(--color-text-subtle, inherit);
      font-size: 0.8rem;
    }
  }

  .open-note {
    gap: 0.35rem;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-hyperlink, rgb(30 100 200));
    font-size: 0.85em;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }

    i,
    img {
      font-size: 1em;
    }

    img {
      width: 1em;
      height: 1em;
    }
  }
}

.calendaria {
  &.chronicle {
    display: flex;
    position: fixed;
    flex-direction: column;
    border-radius: 0.75rem;
    overflow: hidden;
    color: var(--atlas-text, rgb(224 224 224));
    background: var(--atlas-bg, rgb(31 31 31));
    box-shadow:
      0 0.5rem 2rem rgb(0 0 0 / 30%),
      0 0 0 0.0625rem var(--atlas-border, rgb(74 74 74));

    .scroll-toolbar {
      gap: 0.75rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 0.375rem 0.75rem;
      border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      cursor: grab;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
    }

    .toolbar-icon {
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: var(--font-size-14, 0.875rem);
      pointer-events: none;
    }

    .toolbar-title {
      color: var(--atlas-text, rgb(224 224 224));
      font-weight: 600;
      font-size: var(--font-size-13, 0.8125rem);
      pointer-events: none;
    }

    .toolbar-title--locked {
      gap: 0.375rem;
      display: inline-flex;
      align-items: center;
      max-width: 22rem;
      overflow: hidden;
      color: var(--atlas-accent, var(--atlas-text, rgb(224 224 224)));
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: auto;
    }

    .scroll-locked-range {
      gap: 0.375rem;
      display: flex;
      flex-basis: 100%;
      justify-content: center;
      align-items: center;
      color: var(--atlas-accent, var(--atlas-text, rgb(224 224 224)));
      font-size: var(--font-size-12, 0.75rem);

      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .toolbar-actions {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      margin-left: auto;
    }

    .toolbar-select {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      width: fit-content;
      height: 1.75rem;
      padding: 0 0.375rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.25rem;
      color: var(--atlas-text, rgb(224 224 224));
      font-size: var(--font-size-12, 0.75rem);
      line-height: 1.75rem;

      option {
        color: var(--atlas-text, rgb(224 224 224));
        background: var(--atlas-bg, rgb(31 31 31));
      }

      text-align: center;
      cursor: pointer;
      background: var(--atlas-input-bg, rgb(48 48 48));
    }

    .toolbar-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.5rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.25rem;
      color: var(--atlas-text, rgb(224 224 224));
      cursor: pointer;
      background: var(--atlas-button-bg, rgb(58 58 58));
      transition: background 0.15s;

      &:hover {
        background: var(--atlas-button-hover, rgb(74 74 74));
      }
    }

    .category-filter {
      position: relative;
    }

    .category-filter-toggle {
      position: relative;

      &.category-filter-toggle--active {
        color: var(--atlas-bg, rgb(31 31 31));
        background: var(--atlas-accent, var(--atlas-button-hover, rgb(74 74 74)));
      }
    }

    .category-filter-badge {
      position: absolute;
      top: -0.25rem;
      right: -0.25rem;
      min-width: 0.875rem;
      height: 0.875rem;
      padding: 0 0.1875rem;
      border-radius: 0.4375rem;
      color: var(--atlas-bg, rgb(31 31 31));
      font-size: 0.625rem;
      line-height: 0.875rem;
      text-align: center;
      pointer-events: none;
      background: var(--atlas-accent, rgb(240 62 62));
    }

    .category-filter-menu {
      z-index: 100;
      position: absolute;
      top: calc(100% + 0.25rem);
      right: 0;
      width: max-content;
      max-height: 18rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.375rem;
      overflow-y: auto;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
      box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 25%);
    }

    .category-filter-menu-header {
      padding: 0.375rem 0.625rem;
      border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: 0.75rem;
    }

    .category-filter-list {
      margin: 0;
      padding: 0.25rem 0;
      list-style: none;
    }

    .category-filter-item {
      padding: 0;
    }

    .category-filter-option {
      gap: 0.5rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      padding: 0.3125rem 0.75rem;
      border: none;
      border-radius: 0;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: var(--font-size-13, 0.8125rem);
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
      background: transparent;

      &:hover {
        background: var(--atlas-button-hover, rgb(74 74 74));
      }

      &.category-filter-option--active {
        color: var(--atlas-text, rgb(224 224 224));
        font-weight: 600;
        background: color-mix(in srgb, var(--atlas-accent, var(--atlas-button-hover, rgb(74 74 74))) 30%, transparent);

        i {
          color: var(--atlas-accent, var(--atlas-text, rgb(224 224 224)));
        }
      }
    }

    .category-filter-menu-footer {
      padding: 0.25rem;
      border-top: 0.0625rem solid var(--atlas-border, rgb(74 74 74));

      .category-filter-clear {
        gap: 0.375rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0.3125rem 0.5rem;
        border: none;
        border-radius: 0.25rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: 0.75rem;
        cursor: pointer;
        background: transparent;

        &:hover {
          color: var(--atlas-text, rgb(224 224 224));
          background: var(--atlas-button-hover, rgb(74 74 74));
        }
      }
    }

    .scroll-container {
      flex: 1;
      padding: 0.5rem 0.75rem;
      overflow-y: auto;
      background: var(--atlas-bg, rgb(31 31 31));
    }

    .scroll-empty {
      gap: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem 1rem;
      color: var(--atlas-text-dim, rgb(153 153 153));

      i {
        opacity: 0.4;
        font-size: 1.5rem;
      }
    }

    .scroll-entry {
      position: relative;
      padding: 0.375rem 0;
    }

    .entry-header {
      gap: 0.375rem;
      display: flex;
      align-items: baseline;
      margin-bottom: 0.25rem;
    }

    .entry-weekday {
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: var(--font-size-10, 0.625rem);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .entry-date {
      color: var(--atlas-text-heading, rgb(238 238 238));
      font-weight: 700;
      font-size: var(--font-size-14, 0.875rem);
    }

    .entry-today-badge {
      padding: 0 0.3125rem;
      border-radius: 0.5rem;
      color: rgb(255 255 255);
      font-weight: 600;
      font-size: var(--font-size-10, 0.625rem);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: var(--atlas-today, rgb(255 100 0));
    }

    .entry-body {
      padding-left: 0.375rem;
    }

    .entry-banner {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      margin-bottom: 0.1875rem;
      padding: 0.1875rem 0.5rem;
      border-left: 0.125rem solid var(--banner-color, var(--atlas-text-dim, rgb(153 153 153)));
      border-radius: 0.1875rem;
      color: color-mix(in srgb, var(--banner-color, var(--atlas-text-dim, rgb(153 153 153))) 70%, var(--atlas-text, rgb(224 224 224)));
      font-weight: 600;
      font-size: var(--font-size-12, 0.75rem);
      background: color-mix(in srgb, var(--banner-color, var(--atlas-text-dim, rgb(153 153 153))) 8%, var(--atlas-bg, rgb(31 31 31)));

      .banner-icon {
        font-size: 0.75rem;
      }

      .banner-moon-icon.tinted {
        display: inline-flex;
        width: 0.875rem;
        height: 0.875rem;
        border-radius: 50%;
        overflow: hidden;
        background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(255 255 255));

        img {
          mix-blend-mode: multiply;
          width: 100%;
          height: 100%;
        }
      }
    }

    .entry-notes {
      gap: 0.0625rem;
      display: flex;
      flex-direction: column;
    }

    .note-item {
      gap: 0.25rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 0.125rem 0.375rem;
      border-radius: 0.1875rem;
      cursor: pointer;
      transition: background 0.15s;

      &:hover {
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }
    }

    .note-icon {
      display: inline-flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      width: 1rem;
      height: 1rem;
      font-size: 0.75rem;

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .note-name {
      color: var(--atlas-text, rgb(224 224 224));
      font-weight: 600;
      font-size: var(--font-size-13, 0.8125rem);
    }

    .note-author {
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-style: italic;
      font-size: var(--font-size-10, 0.625rem);
    }

    .note-excerpt {
      width: 100%;
      margin: 0.125rem 0 0;
      color: var(--atlas-text-secondary, rgb(170 170 170));
      font-size: var(--font-size-11, 0.6875rem);
      line-height: 1.3;
    }

    .note-content {
      width: 100%;
      margin-top: 0.125rem;
      color: var(--atlas-text-secondary, rgb(170 170 170));
      font-size: var(--font-size-11, 0.6875rem);
      line-height: 1.3;

      .note-full-content {
        display: none;
      }

      .collapse-toggle {
        display: none;
      }
    }

    .note-content--full .note-full-content {
      display: block;
    }

    .scroll-entry.expanded .note-content {
      .note-full-content {
        display: block;
      }

      .note-excerpt-preview,
      .expand-toggle {
        display: none;
      }

      .collapse-toggle {
        display: flex;
      }
    }

    .expand-toggle,
    .collapse-toggle {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1rem;
      height: 1rem;
      margin-top: 0.125rem;
      border: none;
      border-radius: 50%;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: 0.5rem;
      cursor: pointer;
      background: var(--atlas-button-bg, rgb(58 58 58));
      transition: background 0.15s;

      &:hover {
        background: var(--atlas-button-hover, rgb(74 74 74));
      }
    }

    &[data-depth='full'] .note-content {
      .note-full-content {
        display: block;
      }

      .note-excerpt-preview,
      .expand-toggle,
      .collapse-toggle {
        display: none;
      }
    }

    .entry-empty {
      padding: 0.125rem 0.375rem;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-style: italic;
      font-size: var(--font-size-11, 0.6875rem);
    }

    .add-note-btn {
      display: flex;
      opacity: 0;
      justify-content: center;
      align-items: center;
      width: 1.125rem;
      height: 1.125rem;
      margin-top: 0.1875rem;
      border: 0.0625rem dashed var(--atlas-border, rgb(74 74 74));
      border-radius: 50%;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: 0.5rem;
      cursor: pointer;
      background: transparent;
      transition:
        opacity 0.15s,
        background 0.15s;

      &:hover {
        opacity: 1;
        background: var(--atlas-button-hover, rgb(74 74 74));
      }
    }

    .scroll-entry:hover .add-note-btn {
      opacity: 0.5;
    }

    .entry-fog-overlay {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      padding: 0.25rem 0.5rem;
      border-radius: 0.1875rem;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-style: italic;
      font-size: var(--font-size-11, 0.6875rem);
      background: rgb(0 0 0 / 20%);

      i {
        opacity: 0.5;
      }
    }

    .entry-divider {
      height: 0.0625rem;
      margin-top: 0.375rem;
      background: var(--atlas-divider, rgb(65 65 65));
    }

    .scroll-entry--festival {
      .entry-header {
        padding-left: 0.375rem;
        border-left: 0.125rem solid var(--atlas-callout-border, rgb(212 175 55));
      }

      .note-item--festival {
        border: 0.0625rem solid var(--atlas-callout-border, rgb(212 175 55));
        border-radius: 0.1875rem;
        background: var(--atlas-callout-bg, rgb(212 175 55 / 15%));

        .note-name {
          color: var(--atlas-callout-text, rgb(255 215 0));
        }
      }
    }

    /* ── Timeline View Mode ── */
    &.chronicle--timeline {
      .scroll-container {
        padding: 0;
      }

      .timeline-entries {
        position: relative;
        padding: 1.5rem 1rem;
      }

      .timeline-entries::before {
        opacity: 0.4;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 0.1875rem;
        content: '';
        background: var(--atlas-accent, rgb(168 144 96));
        transform: translateX(-50%);
      }

      .timeline-entry {
        display: flex;
        position: relative;
        align-items: flex-start;
        width: 100%;
        padding: 0.75rem 0;
      }

      .timeline-entry:nth-child(odd) {
        flex-direction: row-reverse;
      }

      .timeline-entry:nth-child(odd) .timeline-card {
        margin-right: 0;
        margin-left: 2.5rem;
      }

      .timeline-entry:nth-child(odd) .timeline-date-banner {
        flex-direction: row-reverse;
        text-align: right;
      }

      .timeline-entry:nth-child(even) .timeline-card {
        margin-right: 2.5rem;
        margin-left: 0;
      }

      .timeline-card {
        flex: 0 0 calc(50% - 2.5rem);
        max-width: calc(50% - 2.5rem);
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 0.5rem;
        overflow: hidden;
        background: color-mix(in srgb, var(--atlas-bg-lighter, var(--atlas-bg, rgb(31 31 31))) 95%, var(--atlas-accent, rgb(168 144 96)));
        box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 25%);
      }

      .timeline-node {
        z-index: 2;
        position: absolute;
        top: 1.25rem;
        left: 50%;
        transform: translateX(-50%);
      }

      .timeline-node-dot {
        width: 1rem;
        height: 1rem;
        border: 0.1875rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 50%;
        background: var(--atlas-bg, rgb(31 31 31));
        box-shadow: 0 0 0 0.125rem var(--atlas-bg, rgb(31 31 31));
      }

      .timeline-node::after {
        opacity: 0.5;
        position: absolute;
        top: 50%;
        width: 2.25rem;
        height: 0.125rem;
        content: '';
        background: var(--atlas-border, rgb(74 74 74));
        transform: translateY(-50%);
      }

      .timeline-entry:nth-child(odd) .timeline-node::after {
        left: 100%;
      }

      .timeline-entry:nth-child(even) .timeline-node::after {
        right: 100%;
      }

      .timeline-node-dot--today {
        border-color: var(--atlas-today, rgb(255 100 0));
        background: var(--atlas-today, rgb(255 100 0));
        box-shadow:
          0 0 0 0.125rem var(--atlas-bg, rgb(31 31 31)),
          0 0 0.5rem 0.125rem var(--atlas-today, rgb(255 100 0));
      }

      .timeline-node-dot--festival {
        border-color: var(--atlas-accent, rgb(168 144 96));
        background: var(--atlas-accent, rgb(168 144 96));
        box-shadow: 0 0 0 0.125rem var(--atlas-bg, rgb(31 31 31));
      }

      .timeline-date-banner {
        gap: 0.375rem;
        display: flex;
        align-items: center;
        padding: 0.375rem 0.625rem;
        border-bottom: 0.125rem solid var(--atlas-accent, rgb(168 144 96));
        background: color-mix(in srgb, var(--atlas-accent, rgb(168 144 96)) 25%, var(--atlas-bg-lighter, var(--atlas-bg, rgb(31 31 31))));
      }

      .timeline-weekday {
        color: var(--atlas-text, rgb(224 224 224));
        font-size: var(--font-size-10, 0.625rem);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .timeline-date {
        color: var(--atlas-accent, rgb(168 144 96));
        font-weight: 700;
        font-size: var(--font-size-14, 0.875rem);
      }

      .timeline-today-badge {
        padding: 0.0625rem 0.375rem;
        border-radius: 0.5rem;
        color: rgb(255 255 255);
        font-weight: 600;
        font-size: var(--font-size-10, 0.625rem);
        text-transform: uppercase;
        background: var(--atlas-today, rgb(255 100 0));
      }

      .timeline-card-body {
        padding: 0.5rem 0.625rem;
      }

      .timeline-fog-overlay {
        gap: 0.375rem;
        display: flex;
        align-items: center;
        padding: 0.625rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-style: italic;
        font-size: var(--font-size-11, 0.6875rem);
        background: rgb(0 0 0 / 20%);
      }

      .timeline-entry--empty .timeline-card {
        opacity: 0.4;
        border-style: dashed;
      }

      .timeline-entry--empty .timeline-node-dot {
        opacity: 0.5;
        width: 0.625rem;
        height: 0.625rem;
      }

      .note-item {
        padding: 0.25rem 0;
        cursor: pointer;
      }

      .note-name {
        font-weight: 600;
        font-size: var(--font-size-12, 0.75rem);
      }

      .note-excerpt {
        margin-top: 0.125rem;
        font-size: var(--font-size-11, 0.6875rem);
        line-height: 1.4;
      }

      .note-full-content {
        font-size: var(--font-size-11, 0.6875rem);

        img {
          max-width: 100%;
          margin-top: 0.25rem;
          border-radius: 0.25rem;
        }
      }

      .entry-banner {
        margin-bottom: 0.25rem;
        font-size: var(--font-size-11, 0.6875rem);
      }

      .add-note-btn {
        opacity: 0;
        margin-top: 0.25rem;
        transition: opacity 0.15s;
      }

      .timeline-entry:hover .add-note-btn {
        opacity: 1;
      }

      .entry-empty {
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-style: italic;
        font-size: var(--font-size-11, 0.6875rem);
      }
    }
  }
}

@media print {
  .calendaria {
    .chronicle {
      .scroll-toolbar {
        display: none;
      }

      .scroll-container {
        height: auto;
        overflow: visible;
      }

      .scroll-entry {
        break-inside: avoid;
      }

      .scroll-entry.expanded .note-content,
      .note-content {
        .note-full-content {
          display: block;
        }

        .note-excerpt-preview,
        .expand-toggle,
        .collapse-toggle {
          display: none;
        }
      }

      .add-note-btn {
        display: none;
      }

      .entry-fog-overlay {
        background: rgb(200 200 200 / 30%);
      }
    }
  }
}

.calendaria-cinematic {
  inset: 0;
  display: flex;
  z-index: 10000;
  position: fixed;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: var(--font-primary, 'Signika', sans-serif);
  pointer-events: all;

  &::before {
    inset: 0;
    z-index: 1;
    position: absolute;
    pointer-events: none;
    content: '';
    background: radial-gradient(ellipse at center, transparent 40%, rgb(0 0 0 / 50%) 100%);
  }

  .cinematic-bg {
    inset: 0;
    z-index: 0;
    position: absolute;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-bot) 100%);
  }

  .cinematic-vignette-pulse {
    --pulse-color: var(--atlas-accent, rgb(168 144 96));

    inset: 0;
    opacity: 0;
    z-index: 1;
    position: absolute;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 30%, var(--pulse-color) 100%);

    &.active {
      animation: cinematic-vignette-flash 0.8s ease-out forwards;
    }
  }

  .cinematic-pixi-canvas {
    inset: 0;
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .cinematic-content {
    display: flex;
    z-index: 3;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .cinematic-calendar-page {
    gap: 0.75rem;
    display: flex;
    opacity: 0;
    flex-direction: column;
    align-items: center;
    padding: 1.875rem 3rem 1.5rem;
    border: 0.0625rem solid color-mix(in srgb, var(--atlas-border, rgb(140 120 80)) 50%, transparent);
    border-radius: 0.25rem;
    color: var(--atlas-text, rgb(40 30 20));
    background: linear-gradient(
      170deg,
      color-mix(in srgb, var(--atlas-bg-lighter, rgb(195 180 145)) 85%, transparent) 0%,
      color-mix(in srgb, var(--atlas-bg, rgb(180 165 130)) 80%, transparent) 40%,
      color-mix(in srgb, var(--atlas-bg-hover, rgb(170 155 120)) 75%, transparent) 100%
    );
    box-shadow:
      0 0.25rem 1.5rem rgb(0 0 0 / 40%),
      inset 0 0.0625rem 0 rgb(255 255 255 / 15%),
      inset 0 0 2.5rem color-mix(in srgb, var(--atlas-border, rgb(140 120 80)) 10%, transparent);
    transition: opacity 0.25s ease-out;
    animation: cinematic-page-drift 8s ease-in-out infinite;
  }

  &[data-content-ready='true'] .cinematic-calendar-page {
    opacity: 1;
  }

  .cinematic-fixed-section {
    gap: 0.75rem;
    display: flex;
    position: absolute;
    top: 35%;
    left: 50%;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 50rem;
    transform: translate(-50%, -50%);
  }

  .cinematic-dynamic-section {
    gap: 1rem;
    display: flex;
    position: absolute;
    top: calc(35% + 7.5rem);
    left: 50%;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 56.25rem;
    transform: translateX(-50%);
  }

  .cinematic-bottom-section {
    gap: 0.625rem;
    display: flex;
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 50rem;
    transform: translateX(-50%);
  }

  .cinematic-date-counter {
    overflow: hidden;
    text-align: center;
  }

  .cinematic-date-label {
    display: block;
    color: var(--atlas-text-heading, rgb(50 35 20));
    font-weight: 700;
    font-size: 3rem;
    text-shadow: 0 0.0625rem 0 rgb(255 255 255 / 20%);
    letter-spacing: 0.04em;
  }

  .cinematic-time-label {
    display: block;
    color: var(--atlas-text-heading, rgb(50 35 20));
    font-weight: 600;
    font-size: 1.75rem;
    text-shadow: 0 0.0625rem 0 rgb(255 255 255 / 20%);
    letter-spacing: 0.04em;
    opacity: 0.85;
  }

  .cinematic-time-label:empty {
    display: none;
  }

  .cinematic-season-badge {
    gap: 0.5rem;
    display: flex;
    align-items: center;
    min-height: 1.875rem;
    padding: 0.25rem 1rem;
    border: 0.0625rem solid color-mix(in srgb, var(--cinematic-season-color, var(--atlas-accent, rgb(120 100 60))) 40%, rgb(100 80 40 / 30%));
    border-radius: 0.75rem;
    color: var(--atlas-text-heading, rgb(60 40 20));
    font-weight: 600;
    font-size: 1rem;
    background: color-mix(in srgb, var(--cinematic-season-color, var(--atlas-accent, rgb(120 100 60))) 25%, rgb(60 45 25 / 30%));
    transition:
      background 0.5s ease,
      border-color 0.5s ease;
  }

  .cinematic-season-icon {
    color: var(--cinematic-season-color, var(--atlas-accent, rgb(120 100 60)));
    transition: color 0.5s ease;
  }

  .cinematic-weather-display {
    gap: 0.5rem;
    display: flex;
    opacity: 0;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.75rem;
    color: var(--atlas-text-dim, rgb(80 60 35));
    font-size: 0.95rem;
    transition: opacity 0.5s ease;
  }

  .cinematic-weather-icon {
    color: var(--cinematic-weather-color, var(--atlas-text-dim, rgb(100 80 50)));
    font-size: 1.2rem;
    transition: color 0.4s ease;
  }

  .cinematic-weather-label {
    font-style: italic;
  }

  .cinematic-weather-temp {
    opacity: 0.85;
    font-weight: 600;
  }

  .cinematic-weather-wind {
    opacity: 0.7;
    font-size: 0.85rem;
  }

  .cinematic-moon-strip {
    gap: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 7.5rem;
    padding: 1rem 0;
    transition: opacity 0.5s ease;
  }

  .cinematic-moon {
    backdrop-filter: blur(0.25rem);
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.375rem 0.625rem;
    border: 0.0625rem solid color-mix(in srgb, var(--atlas-border, rgb(255 255 255)) 20%, transparent);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--atlas-bg, rgb(0 0 0)) 75%, transparent);
  }

  .cinematic-moon-icon-wrap {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(255 255 255));
  }

  .cinematic-moon-img {
    inset: 0;
    mix-blend-mode: multiply;
    object-fit: contain;
    position: absolute;
    width: 4.5rem;
    height: 4.5rem;
    transition: opacity 0.6s ease;
  }

  .cinematic-moon-name {
    color: var(--atlas-text, rgb(220 215 200));
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 80%);
    letter-spacing: 0.04em;
  }

  .cinematic-moon-phase-name {
    color: var(--atlas-text-dim, rgb(185 180 165));
    font-style: italic;
    font-size: 0.7rem;
    text-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 80%);
  }

  .cinematic-moon--full .cinematic-moon-icon-wrap {
    box-shadow: 0 0 1rem color-mix(in srgb, var(--moon-color, rgb(200 200 220)) 40%, transparent);
  }

  .cinematic-event-stage {
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    display: grid;
    width: 100%;
    min-height: 1.25rem;
    padding: 0 1.25rem;
  }

  .cinematic-event-card {
    backdrop-filter: blur(0.5rem);
    gap: 0.75rem;
    display: flex;
    opacity: 0;
    align-items: center;
    padding: 0.625rem 1.5rem;
    border: 0.0625rem solid rgb(255 255 255 / 12%);
    border-radius: 0.5rem;
    color: var(--atlas-text, rgb(240 235 220));
    font-size: 1.05rem;
    background: color-mix(in srgb, var(--atlas-bg, rgb(20 18 15)) 55%, transparent);
    animation: cinematic-card-slide 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    i {
      color: var(--event-color, var(--atlas-accent, rgb(168 144 96)));
      font-size: 1.2rem;
      filter: drop-shadow(0 0 0.25rem var(--event-color, var(--atlas-accent, rgb(168 144 96))));
    }
  }

  .cinematic-event-name {
    font-weight: 500;
    text-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 40%);
  }

  .cinematic-event--festival {
    backdrop-filter: blur(0.375rem);
    padding: 0.875rem 1.75rem;
    border: 0.0625rem solid color-mix(in srgb, var(--atlas-callout-border, rgb(212 175 55)) 50%, transparent);
    font-weight: 700;
    font-size: 1.25rem;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--atlas-callout-border, rgb(212 175 55)) 10%, transparent) 0%,
      color-mix(in srgb, var(--atlas-callout-text, rgb(180 140 20)) 5%, transparent) 100%
    );
    animation:
      cinematic-card-slide 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards,
      cinematic-festival-shimmer 2.5s ease-in-out infinite 0.5s;

    i {
      color: var(--atlas-callout-text, rgb(212 175 55));
      filter: drop-shadow(0 0 0.375rem color-mix(in srgb, var(--atlas-callout-border, rgb(212 175 55)) 50%, transparent));
    }
  }

  .cinematic-progress-bar {
    width: 50%;
    height: 0.125rem;
    border-radius: 0.125rem;
    overflow: hidden;
    background: rgb(255 255 255 / 8%);
  }

  .cinematic-progress-fill {
    height: 100%;
    border-radius: 0.125rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--atlas-accent, rgb(168 144 96)) 40%, transparent) 0%, color-mix(in srgb, var(--atlas-accent, rgb(168 144 96)) 70%, transparent) 100%);
    box-shadow: 0 0 0.375rem color-mix(in srgb, var(--atlas-accent, rgb(168 144 96)) 30%, transparent);
    transition: width 0.15s linear;
  }

  .cinematic-controls {
    margin-top: 0.25rem;
  }

  .cinematic-skip {
    backdrop-filter: blur(0.125rem);
    gap: 0.375rem;
    display: flex;
    align-items: center;
    padding: 0.375rem 1.125rem;
    border: 0.0625rem solid rgb(255 255 255 / 12%);
    border-radius: 0.375rem;
    color: var(--atlas-text-dim, rgb(180 175 165));
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    background: rgb(255 255 255 / 4%);
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;

    &:hover {
      border-color: rgb(255 255 255 / 22%);
      color: var(--atlas-text, rgb(230 225 215));
      background: rgb(255 255 255 / 10%);
    }

    &:active {
      background: rgb(255 255 255 / 16%);
    }
  }
}

@property --sky-top {
  inherits: false;
  initial-value: rgb(10 10 18);
  syntax: '<color>';
}

@property --sky-mid {
  inherits: false;
  initial-value: rgb(15 15 26);
  syntax: '<color>';
}

@property --sky-bot {
  inherits: false;
  initial-value: rgb(21 21 37);
  syntax: '<color>';
}

@keyframes cinematic-vignette-flash {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

@keyframes cinematic-page-drift {
  0%,
  100% {
    transform: translateY(0) rotate(-0.3deg);
  }

  50% {
    transform: translateY(-0.25rem) rotate(0.3deg);
  }
}

@keyframes cinematic-card-slide {
  0% {
    opacity: 0;
    transform: translateX(3.75rem) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes cinematic-festival-shimmer {
  0%,
  100% {
    border-color: color-mix(in srgb, var(--atlas-callout-border, rgb(212 175 55)) 35%, transparent);
    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--atlas-callout-border, rgb(212 175 55)) 10%, transparent);
  }

  50% {
    border-color: color-mix(in srgb, var(--atlas-callout-border, rgb(212 175 55)) 70%, transparent);
    box-shadow:
      0 0 1.25rem color-mix(in srgb, var(--atlas-callout-border, rgb(212 175 55)) 25%, transparent),
      inset 0 0 0.625rem color-mix(in srgb, var(--atlas-callout-border, rgb(212 175 55)) 5%, transparent);
  }
}

.calendaria {
  &.climate-editor {
    .window-content {
      overflow-y: auto;
    }

    .form-group .form-fields:has(input[type='range']) {
      input[type='range'] {
        flex: 1;
      }
    }

    .weather-weight-grid {
      gap: 0.4rem;
      grid-template-columns: repeat(4, 1fr);
      display: grid;
    }

    .weather-weight-pill {
      gap: 0.4rem;
      display: flex;
      align-items: center;
      padding: 0.4rem 0.6rem;
      border: 0.0625rem solid color-mix(in srgb, var(--weather-color) 50%, transparent);
      border-radius: 0.25rem;
      background: color-mix(in srgb, var(--weather-color) 15%, transparent);
      transition:
        border-color 0.15s ease,
        background 0.15s ease;

      &.active {
        border-color: var(--weather-color);
        background: color-mix(in srgb, var(--weather-color) 35%, transparent);
      }

      i {
        flex-shrink: 0;
        width: 1rem;
        color: var(--weather-color);
        font-size: 0.9rem;
        text-align: center;
      }

      .weather-label {
        flex: 1;
        overflow: hidden;
        font-size: var(--font-size-14);
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      input {
        width: 3.5rem;
        height: 1.125rem;
        padding: 0 0.25rem;
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        font-size: var(--font-size-14);
        text-align: right;
      }
    }

    .preset-row {
      gap: 0.5rem;
      grid-template-columns: 1.5rem 1fr 3.75rem 1.25rem;
      display: grid;
      align-items: center;
      padding: 0.25rem 0;

      input[type='number'] {
        text-align: right;
      }
    }

    .preset-icon {
      text-align: center;
    }

    .preset-name {
      gap: 0.25rem;
      display: flex;
      align-items: center;

      input {
        flex: 1;
      }

      .preset-reset-alias {
        flex: none;
        padding: 0.125rem 0.25rem;
        font-size: 0.75rem;
      }
    }

    .units {
      font-size: 0.85rem;
    }

    &.zone-mode .preset-row {
      grid-template-columns: 1.5rem 1.5rem 1fr 5rem 5rem 5rem 4rem;
    }

    .preset-temp-input {
      text-align: right;
    }

    .preset-header {
      border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      font-weight: 600;
      font-size: var(--font-size-14);

      span {
        text-align: center;
      }
    }

    .form-fields.temperature > i,
    .form-fields.range > i {
      flex: 0 0 0.5rem;
      text-align: center;
    }

    .daylight-fieldset {
      .solstice-value {
        font-weight: 600;
      }

      .solstice-date {
        font-size: 0.85rem;
      }
    }

    .modifier-relative {
      color: var(--atlas-primary, rgb(74 144 226));
    }

    .zero-weight-warning {
      border-color: var(--atlas-warning, rgb(255 193 7));
      box-shadow: 0 0 0.1875rem var(--atlas-warning, rgb(255 193 7));
    }

    .wind-direction-grid {
      gap: 0.25rem 0.75rem;
      grid-template-columns: repeat(4, 1fr);
      display: grid;
    }

    &.zone-mode .sheet-tabs.tabs {
      gap: 0;
      margin-bottom: 0.5rem;
      border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));

      a {
        gap: 0.4rem;
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-bottom: 0.125rem solid transparent;
        font-weight: 500;
        cursor: pointer;
        transition:
          color 0.15s ease,
          border-color 0.15s ease;

        &.active {
          border-bottom-color: var(--atlas-accent, rgb(168 144 96));
        }
      }
    }
  }

  &.weather-probability-dialog {
    .window-content {
      display: flex;
      flex-direction: column;
      max-height: 46.875rem;
    }

    .weather-probability-content {
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: 0.5rem;
      overflow: hidden;
    }

    .probability-table-wrapper {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }

    .probability-table {
      width: 100%;
      margin: 0.75rem 0;
      border-collapse: collapse;

      th {
        padding: 0.25rem 0.5rem;
        border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        font-size: var(--font-size-11);
        text-align: center;
        white-space: nowrap;
      }

      td {
        padding: 0.35rem 0.5rem;
        vertical-align: middle;
      }

      tr:nth-child(even) {
        background: color-mix(in srgb, var(--atlas-text, rgb(224 224 224)) 3%, transparent);
      }

      .preset-icon {
        width: 1.5rem;
        text-align: center;
      }

      .preset-name {
        width: 1%;
        white-space: nowrap;
      }

      .preset-weight {
        width: 1%;
        text-align: center;
        white-space: nowrap;
      }

      .preset-percent {
        width: 100%;
      }
    }

    .percent-bar-container {
      position: relative;
      height: 1.25rem;
      border-radius: 0.1875rem;
      overflow: hidden;
      background: color-mix(in srgb, var(--atlas-text, rgb(224 224 224)) 5%, transparent);
    }

    .percent-bar {
      opacity: 0.6;
      height: 100%;
      border-radius: 0.1875rem;
      transition: width 0.3s ease;
    }

    .percent-label {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      font-weight: bold;
      font-size: var(--font-size-11);
      line-height: 1.25rem;
      text-align: center;
    }

    .temp-range-footer {
      margin-top: 0.5rem;
      padding: 0.5rem;
      border-top: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      text-align: center;

      i {
        margin-right: 0.25rem;
      }
    }
  }
}

.climate-editor {
  .form-fields.temperature .season-alias-toggle {
    flex: 0 0 auto;
    width: auto;
    margin-left: 0.25rem;
    padding: 0 0.4rem;
    border: none;
    cursor: pointer;
    background: transparent;
    transition: color 0.15s ease;
  }

  .form-fields.temperature .season-alias-toggle:hover,
  .form-fields.temperature .season-alias-toggle.has-alias {
    color: var(--atlas-accent, rgb(168 144 96));
  }

  fieldset.season-alias-row {
    margin: 0.25rem 0 0.75rem;
    border-left: 0.1875rem solid var(--atlas-accent, rgb(168 144 96));
  }

  fieldset.season-alias-row .form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }

  fieldset.season-alias-row .season-alias-clear {
    width: auto;
    padding: 0.25rem 0.5rem;
    background: transparent;
  }
}

.calendaria {
  &.condition-builder {
    --cb-border-1: rgb(230 180 34);
    --cb-border-2: rgb(217 72 72);
    --cb-border-3: rgb(74 143 212);
    --cb-border-4: rgb(72 184 88);

    min-width: 16.25rem;
    max-width: 80vw;
    max-height: 75vh;

    .cb-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding-bottom: 2rem;
      overflow-y: auto;
    }

    .cb-group-legend {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      padding: 0.5rem 0.625rem;
      font-weight: normal;
      font-size: var(--font-size-12);
    }

    .cb-group {
      &.depth-1 {
        border-color: var(--cb-border-1);
      }

      &.depth-2 {
        border-color: var(--cb-border-2);
      }

      &.depth-3 {
        border-color: var(--cb-border-3);
      }

      &.depth-4 {
        border-color: var(--cb-border-4);
      }
    }

    .cb-remove-group {
      cursor: pointer;
    }

    .cb-empty {
      margin: 0;
      padding: 0.5rem;
      font-style: italic;
      font-size: var(--font-size-11);
      text-align: center;
    }

    .cb-group-actions {
      gap: 0.375rem;
      display: flex;
    }

    .cb-add-btn {
      gap: 0.375rem;
      display: flex;
      opacity: 0.6;
      flex: 1;
      justify-content: center;
      align-items: center;
      padding: 0.375rem 0.5rem;
      border: 0.0625rem dashed currentcolor;
      border-radius: 0.25rem;
      font-size: var(--font-size-11);
      cursor: pointer;
      background: transparent;
      transition:
        border-color 0.15s ease,
        opacity 0.15s ease;

      &:hover {
        opacity: 1;
      }
    }

    .cb-condition {
      margin: 0;
    }

    .cb-condition-legend {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      padding: 0 0.75rem;
      font-weight: 600;
      font-size: var(--font-size-11);

      .cb-remove {
        font-size: var(--font-size-14);
      }
    }

    .cb-condition-row {
      gap: 0.375rem;
      display: flex;
      flex-direction: column;

      select,
      input {
        width: 100%;
      }
    }

    .cb-date-inputs {
      gap: 0.25rem;
      display: flex;
      align-items: center;
    }

    .cb-special-label {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      padding: 0.25rem 0.5rem;
      border-radius: 0.1875rem;
      font-weight: 600;
      font-size: var(--font-size-11);
      white-space: nowrap;

      i {
        opacity: 0.7;
        font-size: var(--font-size-10);
      }
    }

    .cb-special-value {
      flex: 1;
      padding: 0.25rem 0.5rem;
      font-style: italic;
      font-size: var(--font-size-11);
    }

    .cb-labeled-input {
      gap: 0.25rem;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .cb-offset-group {
      gap: 0.25rem;
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: center;
      width: 100%;
    }

    .cb-inline-label {
      font-size: var(--font-size-11);
      white-space: nowrap;
    }

    .cb-remove {
      cursor: pointer;
    }

    .form-footer button {
      width: 100%;
    }
  }
}

.calendaria {
  &.set-date-dialog {
    .timepoints-section {
      border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0.25rem;

      .timepoints-header {
        gap: 0.5rem;
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        user-select: none;

        i {
          width: 0.75rem;
          font-size: var(--font-size-13);
        }

        h3 {
          flex: 1;
          margin: 0;
          font-size: var(--font-size-13);
        }

        .timepoints-count {
          padding: 0.125rem 0.5rem;
          border-radius: 0.625rem;
          font-size: var(--font-size-13);
        }
      }

      .timepoints-content {
        padding: 0.5rem;
        border-top: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      }

      .timepoints-list {
        max-height: 11.25rem;
        margin: 0 0 0.5rem;
        padding: 0;
        overflow-y: auto;
        list-style: none;
      }

      .timepoint-row {
        gap: 0.5rem;
        display: flex;
        align-items: center;
        padding: 0.375rem 0.5rem;
        border-radius: 0.25rem;

        .timepoint-info {
          flex: 1;
          min-width: 0;
          cursor: pointer;

          .timepoint-name {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .timepoint-date {
            display: block;
            opacity: 0.7;
            font-size: var(--font-size-11);
          }
        }

        .timepoint-name-input {
          flex: 1;
        }

        .timepoint-actions {
          gap: 0.25rem;
          display: flex;
        }

        .timepoint-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 1.75rem;
          height: 1.75rem;
          padding: 0;
          cursor: pointer;

          &.delete:hover {
            color: var(--atlas-error, rgb(244 67 54));
          }
        }
      }

      .no-timepoints {
        opacity: 0.7;
        margin: 0;
        padding: 1rem;
        font-size: var(--font-size-12);
        text-align: center;
      }

      .save-timepoint-btn {
        gap: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0.5rem;
        border: 0.0625rem dashed var(--atlas-border-light, rgb(58 58 58));
        border-radius: 0.25rem;
        font-size: var(--font-size-12);
        cursor: pointer;
        background: transparent;

        &:hover {
          border-color: var(--atlas-accent, rgb(168 144 96));
          color: var(--atlas-accent, rgb(168 144 96));
        }
      }
    }
  }

  &.reset-section-dialog {
    .reset-list {
      margin: 0.5rem 0 0 1.5rem;
      padding: 0;
      list-style-type: disc;
      color: var(--atlas-text-secondary, rgb(170 170 170));
      font-size: var(--font-size-13);

      li {
        margin-bottom: 0.25rem;
      }
    }
  }

  &.custom-weekdays-dialog {
    .custom-weekdays-list {
      gap: 0.375rem;
      display: flex;
      flex-direction: column;
    }

    .custom-weekday-header,
    .custom-weekday-row {
      gap: 0.5rem;
      grid-template-columns: 1fr 5rem 4rem;
      display: grid;
      align-items: center;
    }

    .custom-weekday-header {
      span {
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-weight: 600;
        font-size: var(--font-size-14);
        text-align: center;
      }
    }

    .custom-weekday-row {
      input[type='checkbox'] {
        justify-self: center;
        width: 1rem;
        height: 1rem;
      }
    }
  }

  &.custom-weekdays-dialog,
  &.season-icon-dialog {
    .form-footer {
      button[data-action='disable'],
      button[data-action='reset'] {
        flex: none;
      }
    }
  }

  &.token-reference-dialog {
    .content {
      gap: 1rem;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow-y: auto;
    }

    .context-hint {
      opacity: 0.8;
      margin: 0 0 0.5rem;
      font-style: italic;
      font-size: var(--font-size-12);
    }

    .token-groups {
      gap: 0.75rem;
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow-y: auto;
    }

    .token-group {
      h3.group-header {
        margin: 0 0 0.375rem;
        padding-bottom: 0.25rem;
        border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
        font-size: var(--font-size-h4);
      }

      .token-list {
        gap: 0.125rem;
        display: flex;
        flex-direction: column;
      }

      .token-item {
        gap: 0.75rem;
        display: flex;
        opacity: 0.5;
        align-items: baseline;
        padding: 0.25rem 0.5rem;
        border-radius: 0.1875rem;
        font-size: var(--font-size-12);

        &.highlighted {
          opacity: 1;
        }

        &:hover {
          opacity: 1;
        }

        .token-code {
          flex-shrink: 0;
          min-width: 5rem;
          padding: 0.125rem 0.375rem;
          border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
          border-radius: 0.1875rem;
          font-size: var(--font-size-11);
          font-family: var(--font-mono);
        }

        .token-description {
          opacity: 0.8;
        }

        &.highlighted .token-description {
          opacity: 1;
        }
      }
    }

    .token-syntax-help {
      padding: 0.75rem;
      border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0.25rem;
      font-size: var(--font-size-12);

      h3 {
        margin: 0 0 0.375rem;
        font-size: var(--font-size-h4);
      }

      p {
        opacity: 0.8;
        margin: 0 0 0.5rem;
      }

      .syntax-examples {
        margin: 0;
        padding-left: 1.25rem;

        li {
          margin-bottom: 0.25rem;
        }

        code {
          padding: 0.125rem 0.25rem;
          border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
          border-radius: 0.125rem;
          font-size: var(--font-size-11);
        }
      }
    }
  }

  &.nav-collapsed {
    nav.sheet-tabs {
      min-width: 2.5rem;
      max-width: 2.5rem;
      overflow: hidden auto;

      .nav-search {
        display: none;
      }

      .tab-group {
        .tab-group-header {
          height: 0.125rem;
          margin: 0.25rem 0.375rem;
          padding: 0;
          border-radius: 0.0625rem;
          overflow: hidden;
          color: transparent;
          font-size: 0;
          line-height: 0;
          background: var(--group-color, var(--atlas-border, rgb(74 74 74)));
        }
      }

      [data-tab] {
        justify-content: center;
        padding: 0.5rem 0;

        > span:not(.notification-pip) {
          display: none;
        }

        > i {
          margin: 0;
        }
      }
    }
  }
}

.dialog-date-picker {
  .form-grid {
    gap: 0.75rem;
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
  }

  .form-group {
    gap: 0.25rem;
    display: flex;
    flex-direction: column;

    > label {
      font-weight: 500;
      font-size: var(--font-size-11);
    }

    input:not([type='checkbox']),
    select {
      box-sizing: border-box;
      height: 2rem;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      font-size: var(--font-size-13);
    }

    input[type='number'] {
      -moz-appearance: textfield;
      appearance: textfield;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }
}

.calendaria-enricher {
  display: inline;
  font-family: inherit;

  &--error {
    color: var(--atlas-error, rgb(244 67 54));
    text-decoration: line-through;
    cursor: help;
  }

  &--badge,
  &--link {
    gap: 0.25em;
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
    border-radius: 0.1875rem;
    font-size: 0.95em;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--atlas-bg-lighter, rgb(42 42 42));

    i {
      opacity: 0.7;
      font-size: 0.85em;
    }
  }

  &--badge {
    color: var(--atlas-text, rgb(224 224 224));

    i {
      color: var(--atlas-accent, rgb(168 144 96));
    }
  }

  &--link {
    color: var(--atlas-text, rgb(224 224 224));
    text-decoration: none;
    cursor: pointer;

    i {
      color: var(--atlas-accent, rgb(168 144 96));
    }

    &:hover {
      border-color: var(--atlas-accent, rgb(168 144 96));
      color: var(--atlas-title-text, rgb(255 255 255));
      text-decoration: none;
      background: var(--atlas-bg-hover, rgb(53 53 53));
      box-shadow: 0 0 0.25rem rgb(from var(--atlas-accent, rgb(168 144 96)) r g b / 30%);

      i {
        opacity: 1;
      }
    }
  }

  &--dimmed {
    opacity: 0.5;
    font-style: italic;
  }

  &--progress {
    gap: 0.375em;
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.375rem;
    border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
    border-radius: 0.1875rem;
    font-size: 0.95em;
    line-height: 1.4;
    background: var(--atlas-bg-lighter, rgb(42 42 42));
  }

  &--progress-bar {
    display: inline-block;
    width: 4rem;
    height: 0.5rem;
    border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
    border-radius: 0.25rem;
    overflow: hidden;
    vertical-align: middle;
    background: var(--atlas-bg, rgb(31 31 31));
  }

  &--progress-fill {
    display: block;
    height: 100%;
    border-radius: 0.25rem;
    background: var(--atlas-accent, rgb(168 144 96));
    transition: width 0.3s ease;
  }

  &--summary,
  &--almanac {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-left: 0.125rem solid var(--atlas-accent, rgb(168 144 96));
    border-radius: 0.1875rem;
    font-size: 0.95em;
    line-height: 1.4;
    background: var(--atlas-bg-lighter, rgb(42 42 42));
  }
}

.calendaria-enricher--moon-icon {
  display: inline;
  width: auto;
  height: 1em;
  max-height: 1rem;
  vertical-align: middle;
}

.calendaria-enricher--moon-icon-wrapper {
  display: inline-block;
  max-width: 1rem;
  max-height: 1rem;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
  vertical-align: middle;

  &.tinted {
    background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(255 255 255));

    img {
      mix-blend-mode: multiply;
    }
  }
}

.calendaria {
  &.minimizing {
    opacity: 0 !important;
    max-height: none !important;
    transition: opacity 0.25s ease-out !important;
  }

  .hidden {
    display: none !important;
  }

  .range-value {
    flex: 0;
    min-width: 2.5em;
    color: var(--atlas-text-secondary, rgb(170 170 170));
    font-size: var(--font-size-13);
    text-align: center;
  }

  .slider-with-ticks {
    gap: 0.125rem;
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: column;

    .slider-ticks {
      display: flex;
      justify-content: space-between;
      padding: 0 0.5rem;

      span {
        width: 0.0625rem;
        height: 0.375rem;
        background: var(--atlas-border-light, rgb(58 58 58));
      }
    }
  }

  .weather-indicator,
  .season-indicator,
  .era-indicator,
  .cycle-indicator {
    gap: 0.25rem;
    display: inline-flex;
    align-items: center;

    i {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 0.85em;
    }
  }

  .weather-indicator {
    padding: 0.25rem 0.5rem;
    border: 0.0625rem solid color-mix(in srgb, var(--weather-color, var(--atlas-text-dim, rgb(153 153 153))) 30%, transparent);
    border-radius: 0.25rem;
    color: var(--atlas-text, rgb(224 224 224));
    background: color-mix(in srgb, var(--weather-color, var(--atlas-text-dim, rgb(153 153 153))) 15%, transparent);

    i {
      color: var(--weather-color, var(--atlas-text-dim, rgb(153 153 153)));
    }

    &.clickable {
      cursor: pointer;
      transition:
        background 0.15s ease,
        border-color 0.15s ease;

      &:hover {
        border-color: var(--weather-color, var(--atlas-text-dim, rgb(153 153 153)));
        background: color-mix(in srgb, var(--weather-color, var(--atlas-text-dim, rgb(153 153 153))) 30%, transparent);
      }
    }

    &.no-weather {
      border: 0.0625rem dashed var(--atlas-border, rgb(74 74 74));
      color: var(--atlas-text-dim, rgb(153 153 153));
      background: transparent;

      &:hover {
        border-color: var(--atlas-success, rgb(76 175 80));
        background: color-mix(in srgb, var(--atlas-positive-bg, rgb(76 175 80 / 20%)) 20%, transparent);
      }
    }

    .weather-temp {
      opacity: 0.8;
      margin-left: 0.15rem;
      padding-left: 0.25rem;
      border-left: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      font-size: 0.85em;
    }

    &.weather-mode-temp .weather-temp {
      margin-left: 0;
      padding-left: 0;
      border-left: none;
    }
  }

  .season-indicator {
    color: var(--season-color, var(--atlas-text-dim, rgb(153 153 153)));

    i {
      color: var(--season-color, var(--atlas-text-dim, rgb(153 153 153)));
    }
  }

  .calendaria-widget-indicator {
    gap: 0.25rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    cursor: default;

    i {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 0.75em;
      line-height: 1;
    }

    .widget-label {
      line-height: 1;
    }

    &.clickable {
      cursor: pointer;
    }
  }

  .calendar-indicators .calendaria-widget-indicator {
    color: var(--widget-color, var(--atlas-text-dim, rgb(153 153 153)));

    i {
      color: var(--widget-color, var(--atlas-text-dim, rgb(153 153 153)));
    }
  }

  .calendaria-widget-custom {
    display: flex;
    align-items: center;
  }
}

#journal {
  .directory-footer {
    .calendaria-footer {
      gap: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding-top: 0.125rem;
      border-top: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));

      .calendaria-footer-btn {
        border: none;
        background: none;
        box-shadow: none;

        &:hover,
        &:active,
        &:focus {
          border: none;
          box-shadow: none;
        }
      }

      i {
        font-size: var(--font-size-16);
      }
    }
  }
}

.calendaria-snap-indicator {
  display: flex;
  opacity: 0;
  z-index: 59;
  position: fixed;
  justify-content: center;
  align-items: center;
  height: 2rem;
  padding: 0 0.75rem;
  border: 0.125rem dashed var(--atlas-primary, rgb(74 144 226));
  border-radius: 0.375rem;
  pointer-events: none;
  background: color-mix(in srgb, var(--atlas-primary, rgb(74 144 226)) 15%, transparent);
  transition: opacity 0.15s ease;

  &.visible {
    opacity: 1;
  }

  &::before {
    display: block;
    opacity: 0.5;
    width: 3.75rem;
    height: 0.25rem;
    border-radius: 0.125rem;
    content: '';
    background: var(--atlas-primary, rgb(74 144 226));
  }
}

.calendaria-pinned {
  z-index: 1000 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: max-content;
  margin-bottom: 0.5rem;
  cursor: grab;
  pointer-events: auto !important;
}

#context-menu.calendaria {
  .context-item {
    &.sticky-active {
      color: var(--atlas-title-text, rgb(255 255 255));
      background: var(--atlas-primary, rgb(74 144 226));

      &:hover {
        background: var(--atlas-primary, rgb(74 144 226));
      }
    }

    &:has(.note-row) {
      display: flex;
      align-items: center;
    }

    .note-row {
      display: flex;
      flex: 1;
      align-items: center;
      min-width: 0;
    }

    .note-name {
      max-width: 9.375rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .note-actions {
      gap: 0.5rem;
      display: inline-flex;
      margin-left: auto;
      padding-left: 0.5rem;

      i {
        opacity: 0.6;
        cursor: pointer;
        transition: opacity 0.15s ease;

        &:hover {
          opacity: 1;
        }
      }
    }
  }
}

.moon-tooltip-row {
  gap: 0.375rem;
  display: flex;
  align-items: center;
  padding: 0.125rem 0;

  img {
    width: 0.875rem;
    height: 0.875rem;
    border: none;
  }
}

img.calendaria-moon-icon {
  display: inline;
  width: auto;
  height: 1em;
  vertical-align: middle;
}

span.calendaria-moon-icon {
  display: inline-flex;
  align-items: center;
  height: 1em;
  vertical-align: middle;

  &.tinted {
    border-radius: 50%;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(255 255 255));

    img {
      mix-blend-mode: multiply;
    }
  }

  img {
    width: auto;
    height: 100%;
  }
}

.calendaria-hud {
  display: inline-flex;
  opacity: var(--calendaria-hud-idle-opacity, 1);
  z-index: 100;
  position: fixed;
  flex-direction: column;
  align-items: center;
  color: var(--atlas-text, rgb(224 224 224));
  font-family: var(--font-primary, 'Signika', 'Palatino Linotype', serif);
  transition: opacity 0.3s ease-in-out 2s;

  &:hover {
    opacity: 1;
    transition-delay: 0s;
  }

  .content {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
  }

  .dome {
    z-index: 1;
    position: absolute;
    bottom: calc(100% - 0.875rem);
    left: 50%;
    width: 10rem;
    height: 5rem;
    border: 0.125rem solid rgb(26 26 26);
    border-bottom: none;
    border-radius: 5rem 5rem 0 0;
    overflow: hidden;
    cursor: pointer;
    transition:
      opacity 0.3s ease,
      border-color 0.3s ease;
    transform: translateX(-50%);

    &:focus {
      outline: 0.125rem solid rgb(100 180 255 / 60%);
      outline-offset: 0.125rem;
    }

    &::before {
      inset: 0;
      z-index: 10;
      position: absolute;
      border: 0.125rem solid rgb(20 20 20 / 90%);
      border-bottom: none;
      border-radius: 5rem 5rem 0 0;
      pointer-events: none;
      content: '';
      box-shadow: inset 0 0 1.25rem rgb(0 0 0 / 40%);
    }

    &.hidden {
      display: none;
    }
  }

  .scene-canvas,
  .slice-canvas {
    inset: 0;
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .bar-wrapper {
    display: contents;

    &.tray-up {
      position: relative;

      .tray {
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-top: 0;
        margin-bottom: -0.0625rem;
        border-top: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-bottom: none;
        border-radius: 0.375rem 0.375rem 0 0;
        transform: translateX(-50%);
      }
    }
  }

  .bar {
    grid-template-columns: 1fr auto 1fr;
    display: inline-grid;
    z-index: 10;
    position: relative;
    align-items: center;
    align-content: center;
    min-height: 2.25rem;
    max-height: 3rem;
    padding: 0 0.625rem;
    border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
    border-radius: 0.375rem;
    cursor: grab;
    background: var(--atlas-bg, rgb(31 31 31));
    box-shadow: 0 0 0.625rem var(--atlas-shadow-color, rgb(0 0 0 / 40%));

    &.dragging {
      cursor: grabbing;
    }

    &.locked {
      cursor: default;
    }

    &.has-events {
      border-color: var(--event-glow, rgb(238 136 136));
    }
  }

  &:not(.compact) {
    .bar {
      display: grid;
      box-sizing: border-box;
      width: calc(50rem * var(--hud-width-scale, 1));
    }

    .section {
      min-width: 0;
      overflow: hidden;
    }

    .indicators {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;

      .weather-indicator {
        max-width: 100%;
        overflow: hidden;
      }

      .weather-label,
      .season-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .tray {
      gap: 0.25rem;
      box-sizing: border-box;
      max-width: calc(50rem * var(--hud-width-scale, 1));
      padding: clamp(0.25rem, calc(0.375rem * var(--hud-width-scale, 1)), 0.375rem) clamp(0.375rem, calc(0.625rem * var(--hud-width-scale, 1)), 0.625rem);

      .time-btn {
        width: 1.625rem;
        height: 1.625rem;
        font-size: 0.75rem;
      }

      .select {
        height: 1.625rem;
        padding: 0 0.375rem;
        font-size: 0.75rem;
        line-height: 1.5rem;
      }
    }
  }

  .section {
    gap: 0.625rem;
    display: flex;
    align-items: center;

    &.left {
      padding-right: 0.3125rem;
    }

    &.right {
      justify-content: flex-end;
      padding-left: 0.3125rem;
    }
  }

  .btn {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1.375rem;
    height: 1.375rem;
    min-height: 1.375rem;
    max-height: 1.375rem;
    margin: 0;
    padding: 0;
    border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
    border-radius: 0.1875rem;
    color: var(--atlas-text-dim, rgb(153 153 153));
    line-height: 1;
    cursor: pointer;
    background: var(--atlas-button-bg, rgb(58 58 58));
    transition:
      color 0.15s ease,
      background 0.15s ease;

    &:hover {
      color: var(--atlas-text, rgb(224 224 224));
      background: var(--atlas-bg-hover, rgb(53 53 53));
    }

    &:focus-visible {
      outline: 0.125rem solid var(--atlas-primary, rgb(74 144 226));
      outline-offset: 0.0625rem;
    }

    i {
      font-size: var(--font-size-13, 0.8125rem);
    }
  }

  .btn-group {
    gap: 0.25rem;
    display: flex;
    flex-shrink: 0;
    align-items: center;

    &.left,
    &.right {
      min-width: 3.75rem;
    }

    &.right {
      justify-content: flex-end;
    }
  }

  .info-panel {
    gap: 0.5rem;
    display: flex;
    position: relative;
    flex: 1 1 0;
    justify-content: right;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    cursor: default;
  }

  .date {
    gap: 0.25em;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    color: var(--atlas-text, rgb(224 224 224));
    font-weight: 500;
    font-size: clamp(var(--font-size-10, 0.625rem), calc(var(--font-size-12, 0.75rem) * var(--hud-width-scale, 1)), var(--font-size-12, 0.75rem));
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;

    &:hover {
      color: var(--atlas-primary, rgb(74 144 226));
    }

    &.hidden {
      display: none;
    }

    &.compressed {
      font-size: var(--font-size-10, 0.625rem);
    }
  }

  .events {
    gap: 0.25rem;
    display: flex;
    align-items: center;
  }

  .event-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    background: color-mix(in srgb, var(--event-color, rgb(168 100 100)) 25%, transparent);
    transition:
      background 0.15s ease,
      transform 0.15s ease;

    &:hover {
      background: color-mix(in srgb, var(--event-color, rgb(168 100 100)) 45%, transparent);
      transform: scale(1.1);
    }

    .event-icon {
      color: var(--event-color, rgb(238 136 136));
      font-size: var(--font-size-11, 0.6875rem);
    }

    img.event-icon {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 0.25rem;
    }
  }

  .center {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
  }

  .time-wrapper {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 0 0.3125rem;

    &:has(.play-btn):hover {
      .play-btn {
        opacity: 1;
        pointer-events: auto;
      }

      .time {
        opacity: 0.3;
      }
    }
  }

  .time {
    padding: 0 0.5rem;
    color: var(--atlas-text, rgb(224 224 224));
    font-size: clamp(var(--font-size-12, 0.75rem), calc(var(--font-size-14, 0.875rem) * var(--hud-width-scale, 1)), var(--font-size-14, 0.875rem));
    font-family: Consolas, Monaco, monospace;
    text-align: center;
    letter-spacing: 0.0313rem;
    white-space: nowrap;
  }

  .play-btn {
    display: flex;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
    border: none;
    color: var(--atlas-text-dim, rgb(153 153 153));
    cursor: pointer;
    pointer-events: none;
    background: transparent;
    transition:
      opacity 0.15s ease,
      color 0.15s ease;
    transform: translate(-50%, -50%);

    i {
      font-size: 1.25rem;
    }

    &:hover {
      color: var(--atlas-text, rgb(224 224 224));
    }
  }

  &.time-flowing .time {
    animation: calendaria-time-pulse 2s ease-in-out infinite;
  }

  .indicators {
    gap: 0.5rem;
    display: flex;
    flex-shrink: 0;
    align-items: center;

    .weather-indicator,
    .season-indicator,
    .era-indicator,
    .cycle-indicator {
      font-size: clamp(var(--font-size-10, 0.625rem), calc(var(--font-size-12, 0.75rem) * var(--hud-width-scale, 1)), var(--font-size-12, 0.75rem));
      cursor: default;
    }

    .weather-indicator {
      &.weather-mode-temp,
      &.weather-mode-icon {
        padding: 0.15rem 0.35rem;
      }

      &.weather-mode-temp .weather-temp {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
      }
    }

    .weather-label,
    .season-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .season-indicator {
      overflow: hidden;
    }

    .era-indicator,
    .cycle-indicator {
      color: var(--atlas-text-dim, rgb(153 153 153));
    }

    .calendaria-widget-indicator {
      color: var(--widget-color, var(--atlas-text-dim, rgb(153 153 153)));

      i {
        color: var(--widget-color, var(--atlas-text-dim, rgb(153 153 153)));
      }
    }
  }

  .tray {
    gap: 0.25rem;
    display: flex;
    opacity: 0;
    z-index: 5;
    justify-content: center;
    align-items: center;
    max-height: 0;
    margin-top: -0.0625rem;
    padding: 0 0.625rem;
    border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    overflow: hidden;
    background: var(--atlas-bg, rgb(31 31 31));
    transition:
      opacity 0.25s ease,
      max-height 0.25s ease,
      padding 0.25s ease;

    .calendaria-widget-custom {
      font-size: var(--font-size-11, 0.6875rem);
    }
  }

  &:hover .tray,
  .tray.visible {
    opacity: 1;
    max-height: 2.625rem;
    padding: 0.375rem 0.625rem;
  }

  .time-btn {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
    border-radius: 0.25rem;
    color: var(--atlas-text-dim, rgb(153 153 153));
    cursor: pointer;
    background: var(--atlas-button-bg, rgb(58 58 58));
    transition:
      color 0.15s ease,
      background 0.15s ease;

    &:hover {
      color: var(--atlas-text, rgb(224 224 224));
      background: var(--atlas-bg-hover, rgb(53 53 53));
    }

    &:focus,
    &:focus-visible {
      outline: none;
      box-shadow: none;
    }

    i {
      font-size: var(--font-size-14, 0.875rem);
    }

    &.time-shortcut {
      color: var(--atlas-accent, rgb(168 144 96));

      &:hover {
        color: var(--atlas-accent, rgb(168 144 96));
        background: color-mix(in srgb, var(--atlas-accent, rgb(168 144 96)) 15%, transparent);
      }
    }

    &.custom-jump {
      width: auto;
      min-width: 1.625rem;
      padding: 0 0.25rem;
      font-weight: 600;
      font-size: var(--font-size-10, 0.625rem);
    }
  }

  .select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-width: 3.25rem;
    height: 1.625rem;
    padding: 0 0.375rem;
    border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
    border-radius: 0.25rem;
    color: var(--atlas-text-dim, rgb(153 153 153));
    font-size: 0.75rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    background: var(--atlas-button-bg, rgb(58 58 58));
    transition:
      border-color 0.15s ease,
      color 0.15s ease,
      background 0.15s ease;

    option {
      color: var(--atlas-text-dim, rgb(153 153 153));
      background: var(--atlas-bg, rgb(31 31 31));
    }

    &:hover {
      border-color: var(--atlas-border, rgb(74 74 74));
      color: var(--atlas-text, rgb(224 224 224));
      background: var(--atlas-button-hover, rgb(74 74 74));
    }

    &:focus {
      outline: none;
      box-shadow: none;
    }

    &[data-action='setIncrement'] {
      width: 3.25rem;
      min-width: 3.25rem;
    }
  }

  &.dome-below {
    .dome {
      top: calc(100% - 0.875rem);
      bottom: auto;
      border: 0.125rem solid rgb(26 26 26);
      border-top: none;
      border-radius: 0 0 5rem 5rem;

      &::before {
        border: 0.125rem solid rgb(20 20 20 / 90%);
        border-top: none;
        border-radius: 0 0 5rem 5rem;
      }
    }

    &.compact .dome {
      top: calc(100% - 0.625rem);
      border-radius: 0 0 3.75rem 3.75rem;

      &::before {
        border-radius: 0 0 3.75rem 3.75rem;
      }
    }
  }

  &.compact {
    .dome {
      bottom: calc(100% - 0.625rem);
      width: 7.5rem;
      height: 3.75rem;
      border-radius: 3.75rem 3.75rem 0 0;

      &::before {
        border-radius: 3.75rem 3.75rem 0 0;
      }
    }

    .center {
      flex-shrink: 0;
    }

    .btn-group {
      gap: 0.1875rem;

      &.left,
      &.right {
        min-width: 3.125rem;
      }
    }

    .section {
      gap: 0.5rem;
    }

    .info-panel,
    .indicators {
      gap: 0.25rem;
    }

    .bar {
      gap: 0.5rem;
      height: 1.875rem;
      padding: 0 0.5rem;
    }

    .btn {
      width: 1.125rem;
      height: 1.125rem;
      min-height: 1.125rem;
      max-height: 1.125rem;

      i {
        font-size: var(--font-size-11, 0.6875rem);
      }
    }

    .date {
      font-size: var(--font-size-10, 0.625rem);
    }

    .time {
      padding: 0 0.375rem;
      font-size: var(--font-size-12, 0.75rem);
    }

    .indicators {
      .weather-indicator,
      .season-indicator,
      .era-indicator,
      .cycle-indicator,
      .calendaria-widget-indicator {
        font-size: var(--font-size-12, 0.75rem);
      }

      .calendaria-widget-indicator i,
      .calendaria-widget-indicator .widget-label {
        font-size: var(--font-size-12, 0.75rem);
      }
    }

    .select {
      min-width: 2.5rem;
      height: 1.375rem;
      padding: 0.0625rem 0.25rem;
      font-size: var(--font-size-10, 0.625rem);
    }

    .slice {
      min-width: 6.25rem;
      min-height: 1.25rem;
    }

    .slice-overlay {
      .time {
        font-size: var(--font-size-10, 0.625rem);
      }

      .play-btn {
        width: 0.875rem;
        height: 0.875rem;
        min-height: 0.875rem;
        max-height: 0.875rem;
        font-size: 0.5rem;
      }
    }
  }

  &.slice-mode .dome {
    display: none;
  }

  .slice {
    display: grid;
    position: relative;
    align-items: center;
    min-width: 7.5rem;
    min-height: 1.5rem;
    border: 0.0625rem solid rgb(0 0 0 / 30%);
    border-radius: 0.25rem;
    overflow: hidden;
    cursor: pointer;

    &:focus {
      outline: 0.125rem solid rgb(100 180 255 / 60%);
      outline-offset: 0.0625rem;
    }

    &:has(.play-btn):hover .slice-overlay .play-btn {
      opacity: 1;
    }
  }

  .slice-overlay {
    display: flex;
    z-index: 2;
    position: relative;
    justify-content: center;
    align-items: center;
    pointer-events: none;

    .time {
      padding: 0 0.25rem;
      color: rgb(255 255 255);
      font-weight: 600;
      font-size: clamp(var(--font-size-10, 0.625rem), calc(var(--font-size-12, 0.75rem) * var(--hud-width-scale, 1)), var(--font-size-12, 0.75rem));
      text-shadow:
        0 0 0.125rem rgb(0 0 0),
        0 0 0.25rem rgb(0 0 0),
        0.0625rem 0.0625rem 0.125rem rgb(0 0 0),
        -0.0625rem -0.0625rem 0.125rem rgb(0 0 0),
        0.0625rem -0.0625rem 0.125rem rgb(0 0 0),
        -0.0625rem 0.0625rem 0.125rem rgb(0 0 0);
    }

    .play-btn {
      display: flex;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      justify-content: center;
      align-items: center;
      width: 1.125rem;
      height: 1.125rem;
      min-height: 1.125rem;
      max-height: 1.125rem;
      padding: 0;
      border: none;
      border-radius: 50%;
      color: rgb(255 255 255);
      font-size: var(--font-size-10, 0.625rem);
      line-height: 1;
      pointer-events: auto;
      background: rgb(0 0 0 / 40%);
      transition: opacity 0.2s ease;
      transform: translate(-50%, -50%);

      &:hover {
        background: rgb(0 0 0 / 60%);
      }

      i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .bar.near-snap {
    border-color: var(--atlas-primary, rgb(74 144 226));
    box-shadow:
      0 0 0.625rem var(--atlas-shadow-color, rgb(0 0 0 / 40%)),
      0 0 0.5rem var(--atlas-primary, rgb(74 144 226));
    animation: calendaria-wobble 0.15s ease-in-out infinite;
  }
}

@keyframes calendaria-wobble {
  0%,
  100% {
    transform: rotate(-1.5deg);
  }

  50% {
    transform: rotate(1.5deg);
  }
}

@keyframes calendaria-time-pulse {
  0%,
  100% {
    color: var(--atlas-text, rgb(224 224 224));
  }

  50% {
    color: var(--atlas-success, rgb(76 175 80));
  }
}

.calendaria {
  &.importer-app {
    max-height: 80vh;
    overflow: hidden;

    legend {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0 0.5rem;
    }

    .content {
      gap: 0.75rem;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }

    .no-importers {
      padding: 2rem;
      text-align: center;

      i {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 2rem;
      }
    }

    .grid {
      gap: 0.75rem;
      grid-template-columns: 17.5rem 1fr;
      display: grid;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .left {
      gap: 0.75rem;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    .right {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }

    .source-section {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;

      .form-group {
        margin-bottom: 0.5rem;
      }
    }

    .description {
      padding: 0.25rem 0;
      font-size: 0.85rem;
      line-height: 1.3;
    }

    .importer-instructions {
      margin: 0.5rem 0;
      padding: 0.5rem 0.75rem;
      border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0.375rem;
      font-size: 0.8rem;

      .instructions-title {
        margin: 0 0 0.35rem;
        font-weight: bold;

        i {
          margin-right: 0.35rem;
          opacity: 0.7;
        }
      }

      .instructions-steps {
        margin: 0 0 0.5rem 1.25rem;
        padding: 0;
        line-height: 1.4;

        li {
          margin: 0.15rem 0;
        }
      }

      .macro-block {
        position: relative;

        .copy-macro-btn {
          width: 100%;
          margin-bottom: 0.35rem;
          padding: 0.35rem 0.5rem;
          font-size: 0.8rem;
          cursor: pointer;

          i {
            margin-right: 0.35rem;
          }
        }

        .macro-source {
          box-sizing: border-box;
          width: 100%;
          max-height: 12rem;
          margin: 0;
          padding: 0.5rem;
          overflow: auto;
          border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
          border-radius: 0.25rem;
          background: rgb(0 0 0 / 20%);
          font-family: var(--font-monospace, monospace);
          font-size: 0.7rem;
          line-height: 1.3;
          white-space: pre;
          resize: vertical;
        }
      }
    }

    .file-upload-zone {
      gap: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 0;
      max-width: 100%;
      padding: 0.75rem;
      border: 0.0625rem dashed var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0.375rem;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.2s;

      &:hover,
      &.dragover {
        border-color: var(--atlas-primary, rgb(74 144 226));
      }

      &.has-file {
        justify-content: space-between;
        border-style: solid;
        cursor: default;

        .file-name {
          flex: 1;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .clear-file {
          padding: 0.15rem 0.35rem;
          border: none;
          font-size: 0.8rem;
          cursor: pointer;
          background: none;
          box-shadow: none;
        }
      }

      i {
        opacity: 0.7;
        font-size: 1.25rem;
      }

      span {
        font-size: 0.85rem;
      }
    }

    .import-from-module {
      width: 100%;
      padding: 0.5rem;
      border: none;
      background: none;
      box-shadow: none;

      i {
        margin-right: 0.5rem;
      }
    }

    .module-loaded {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.5rem 0.75rem;
      border-radius: 0.375rem;

      span {
        flex: 1;
        font-size: 0.85rem;
      }

      .clear-module {
        padding: 0.15rem 0.35rem;
        border: none;
        font-size: 0.8rem;
        cursor: pointer;
        background: none;
        box-shadow: none;
      }

      i:first-child {
        opacity: 0.7;
      }
    }

    .import-error {
      gap: 0.5rem;
      display: flex;
      align-items: flex-start;
      padding: 0.5rem;
      border-radius: 0.25rem;
      background: rgb(255 0 0 / 10%);

      i {
        flex-shrink: 0;
        color: var(--atlas-error, rgb(244 67 54));
      }

      span {
        font-size: 0.85rem;
        white-space: pre-wrap;
      }
    }

    .preview-header {
      padding: 0.25rem 0 0.5rem;
      font-weight: 600;
      font-size: 1rem;
      text-align: center;
    }

    .preview-grid {
      gap: 0.25rem;
      grid-template-columns: 1fr 1fr;
      display: grid;
    }

    .preview-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.2rem 0.35rem;
      font-size: 0.85rem;

      .preview-value {
        font-weight: 600;
        font-size: 0.95rem;
      }

      .preview-label {
        opacity: 0.7;
        font-size: 0.75rem;
      }
    }

    .undated-notice {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      margin-top: 0.5rem;
      padding: 0.5rem 0.75rem;
      border-radius: 0.25rem;
      color: var(--atlas-primary, rgb(33 150 243));
      font-size: 0.85rem;
      background: color-mix(in srgb, var(--atlas-primary, rgb(74 144 226)) 10%, transparent);

      i {
        font-size: 1rem;
      }
    }

    .import-options {
      .import-field {
        display: flex;
        flex-direction: column;
        margin-bottom: 0.35rem;

        label {
          margin-bottom: 0.15rem;
          font-size: 0.85rem;
        }

        input {
          width: 100%;
          padding: 0.25rem 0.35rem;
          font-size: 0.85rem;
        }
      }
    }

    .note-selection {
      flex: 1;
      min-height: 0;

      legend {
        flex-shrink: 0;

        .note-count {
          opacity: 0.7;
          font-weight: normal;
          font-size: 0.85rem;
        }
      }
    }

    .note-bulk-actions {
      gap: 0.35rem;
      display: flex;
      flex-shrink: 0;
      justify-content: flex-end;
      margin-bottom: 0.5rem;

      .bulk-btn {
        padding: 0.35rem 0.65rem;
        border: none;
        font-size: 0.9rem;
        background: none;
        box-shadow: none;

        &:hover {
          background: var(--atlas-border, rgb(74 74 74));
        }
      }
    }

    .note-selection-table {
      scrollbar-gutter: stable;
      display: flex;
      flex: 1;
      flex-direction: column;
      border-radius: 0.25rem;
      overflow-y: auto;
    }

    .note-row {
      gap: 0.35rem;
      grid-template-columns: 1fr 3.125rem 4.5rem;
      display: grid;
      align-items: center;
      padding: 0.3rem 0.5rem;
      border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));

      &:last-child {
        border-bottom: none;
      }

      &.header {
        z-index: 1;
        position: sticky;
        top: 0;
        font-weight: 600;
        font-size: 0.8rem;
        background: var(--calendaria-ui-surface-dim);

        .note-radios {
          display: flex;
          justify-content: space-around;

          i {
            opacity: 0.8;
            font-size: 0.75rem;
          }
        }
      }

      &:not(.header):hover {
        background: var(--calendaria-ui-surface);
      }
    }

    .note-name {
      overflow: hidden;
      font-size: 0.85rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .note-date {
      opacity: 0.8;
      font-size: 0.8rem;
      text-align: center;
    }

    .note-radios {
      display: flex;
      justify-content: space-around;
      align-items: center;

      input[type='radio'] {
        width: 0.875rem;
        height: 0.875rem;
        margin: 0;
        cursor: pointer;
      }
    }

    .no-notes {
      display: flex;
      opacity: 0.6;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      text-align: center;

      i {
        margin-bottom: 0.75rem;
        font-size: 2rem;
      }

      p {
        margin: 0;
        font-size: 0.9rem;
      }
    }

    .form-footer {
      justify-content: center;
      border-top: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
    }
  }
}

.calendaria {
  &.mini-cal {
    --mini-day-size: 3.25rem;
    --mini-gap: 0.1875rem;

    opacity: var(--calendaria-minical-idle-opacity, 1);
    z-index: var(--z-index-ui);
    position: fixed;
    transition: opacity 0.3s ease-in-out 2s;

    &:hover {
      opacity: 1;
      transition-delay: 0s;
    }

    .minical-container {
      display: flex;
      position: relative;
      flex-direction: column;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.875rem;
      overflow: visible;
      background: var(--atlas-bg, rgb(31 31 31));
      box-shadow: 0 0.25rem 0.75rem var(--atlas-shadow-color, rgb(0 0 0 / 40%));
      transition: border-radius 0.2s ease;

      &:has(.minical-sidebar:is(.visible, .locked)) {
        border-radius: 0.875rem 0 0 0.875rem;

        .minical-top-row {
          border-radius: 0.875rem 0 0;
        }

        .minical-time-display {
          border-radius: 0 0 0 0.875rem;
        }

        .minical-time-controls {
          border-radius: 0 0 0 0.875rem;
        }
      }
    }

    .minical-top-row {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      padding: 0.375rem 0.5rem;
      border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0.875rem 0.875rem 0 0;
      cursor: grab;
      background: var(--atlas-bg-lighter, rgb(42 42 42));

      &.near-snap {
        border-color: var(--atlas-primary, rgb(74 144 226));
        box-shadow:
          0 0 0.625rem var(--atlas-shadow-color, rgb(0 0 0 / 40%)),
          0 0 0.5rem var(--atlas-primary, rgb(74 144 226));
        animation: calendaria-wobble 0.15s ease-in-out infinite;
      }

      .title-group {
        gap: 0;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        min-width: 0;
      }

      .title {
        color: var(--atlas-title-text, var(--atlas-text, rgb(224 224 224)));
        font-weight: 600;
        font-size: 0.95rem;
        white-space: nowrap;
      }

      .equivalent-dates-row {
        gap: 0.25rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        font-style: italic;
        font-size: 0.65rem;
      }

      .equivalent-date-link {
        color: var(--atlas-text-dim, rgb(153 153 153));
        cursor: pointer;
        transition: color 0.15s;

        &:hover {
          color: var(--atlas-primary, rgb(74 144 226));
        }
      }

      .nav-btn {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: none;
        border-radius: 0.25rem;
        color: var(--atlas-text, rgb(224 224 224));
        cursor: pointer;
        background: transparent;
        transition: background 0.15s;

        &:hover {
          background: var(--atlas-bg-hover, rgb(53 53 53));
        }

        &:disabled {
          opacity: 0.2;
          pointer-events: none;
        }
      }

      &.position-locked {
        cursor: default;
      }
    }

    .minical-sidebar {
      gap: 0.25rem;
      display: flex;
      z-index: -1;
      position: absolute;
      top: -0.0625rem;
      bottom: -0.0625rem;
      left: 100%;
      flex-direction: column;
      align-items: center;
      width: 1.875rem;
      padding: 0.375rem 0;
      border-left: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0 0.875rem 0.875rem 0;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
      transition: transform 0.2s ease;
      transform: translateX(-100%);

      &.visible {
        transform: translateX(0);
      }

      &.locked {
        transform: translateX(0);
      }
    }

    .minical-container:has(.notes-panel.visible) .minical-sidebar {
      border-radius: 0;
    }

    .notes-panel {
      display: flex;
      opacity: 0;
      z-index: -2;
      position: absolute;
      top: -0.0625rem;
      bottom: -0.0625rem;
      left: calc(100% + 1.875rem);
      flex-direction: column;
      width: 13.75rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-left: none;
      border-radius: 0 0.875rem 0.875rem 0;
      pointer-events: none;
      background: var(--atlas-bg, rgb(31 31 31));
      box-shadow: 0.25rem 0 0.75rem var(--atlas-shadow-color, rgb(0 0 0 / 40%));
      transition:
        transform 0.25s ease,
        opacity 0.25s ease;
      transform: translateX(-100%);

      &.visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
      }
    }

    .notes-panel-header {
      gap: 0.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.375rem 0.5rem;
      border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0 0.875rem 0 0;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
    }

    .notes-panel-title {
      overflow: hidden;
      color: var(--atlas-title-text, var(--atlas-text, rgb(224 224 224)));
      font-weight: 600;
      font-size: 0.85rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .notes-panel-close {
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.5rem;
      padding: 0;
      border: none;
      border-radius: 0.25rem;
      color: var(--atlas-text, rgb(224 224 224));
      cursor: pointer;
      background: transparent;
      transition:
        background 0.15s,
        color 0.15s;

      &:hover {
        color: var(--atlas-error, rgb(244 67 54));
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }
    }

    .notes-panel-filter-bar {
      gap: 0.25rem;
      display: flex;
      align-items: center;
      padding: 0.25rem 0.375rem;
      border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
    }

    .notes-filter-select {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      flex: 1;
      min-width: 0;
      height: 1.375rem;
      padding: 0 0.25rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.1875rem;
      color: var(--atlas-text, rgb(224 224 224));
      font-size: 0.625rem;
      line-height: 1.375rem;
      cursor: pointer;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
      background-image: none;

      &:hover {
        border-color: var(--atlas-primary, rgb(74 144 226));
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }

    .notes-filter-clear {
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      width: 1.25rem;
      height: 1.25rem;
      padding: 0;
      border: none;
      border-radius: 0.1875rem;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: 0.625rem;
      cursor: pointer;
      background: transparent;
      transition:
        color 0.15s,
        background 0.15s;

      &:hover {
        color: var(--atlas-error, rgb(244 67 54));
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }
    }

    .notes-section-label {
      gap: 0.25rem;
      display: flex;
      align-items: center;
      padding: 0.125rem 0.25rem;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-weight: 600;
      font-size: 0.625rem;
      text-transform: uppercase;
      letter-spacing: 0.0313rem;

      i {
        color: var(--atlas-primary, rgb(74 144 226));
        font-size: 0.5625rem;
      }
    }

    .notes-section-divider {
      width: 100%;
      height: 0.0625rem;
      margin: 0.125rem 0;
      background: var(--atlas-border-light, rgb(58 58 58));
    }

    .notes-panel-empty {
      padding: 0.5rem;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-style: italic;
      font-size: 0.75rem;
      text-align: center;
    }

    .notes-panel-list {
      gap: 0.25rem;
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 0.375rem;
      overflow-y: auto;
    }

    .notes-panel-item {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.375rem 0.5rem;
      border-radius: 0.25rem;
      cursor: pointer;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
      transition: background 0.15s;

      &:hover {
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }
    }

    .note-item-icon {
      display: flex;
      position: relative;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      width: 1.25rem;
      height: 1.25rem;

      > i {
        font-size: 0.875rem;
      }

      img {
        object-fit: contain;
        width: 1.125rem;
        height: 1.125rem;
      }
    }

    .note-item-content {
      gap: 0.0625rem;
      display: flex;
      flex: 1;
      flex-direction: column;
      min-width: 0;
    }

    .note-item-title {
      overflow: hidden;
      color: var(--atlas-text, rgb(224 224 224));
      font-weight: 500;
      font-size: 0.8rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .note-item-meta {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      min-width: 0;
      overflow: hidden;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: 0.65rem;
    }

    .note-item-time {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .note-item-repeat {
      min-width: 0;
      overflow: hidden;
      color: var(--atlas-primary, rgb(74 144 226));
      font-size: 0.6rem;
      text-overflow: ellipsis;
      white-space: nowrap;

      i {
        font-size: 0.5rem;
      }

      &::before {
        margin-right: 0.375rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        content: '•';
      }
    }

    .note-item-author {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &::before {
        margin-right: 0.375rem;
        content: '•';
      }
    }

    .note-item-edit {
      display: flex;
      opacity: 0;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      width: 1.375rem;
      height: 1.375rem;
      padding: 0;
      border: none;
      border-radius: 0.1875rem;
      color: var(--atlas-text-dim, rgb(153 153 153));
      cursor: pointer;
      background: transparent;
      transition:
        opacity 0.15s,
        background 0.15s,
        color 0.15s;

      &:hover {
        color: var(--atlas-primary, rgb(74 144 226));
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }
    }

    .notes-panel-item:hover .note-item-edit {
      opacity: 1;
    }

    .notes-panel-item.festival-note {
      border-left: 0.1875rem solid var(--atlas-primary, rgb(74 144 226));
    }

    i.note-visibility-badge {
      display: flex;
      position: absolute;
      right: -0.1875rem;
      bottom: -0.1875rem;
      justify-content: center;
      align-items: center;
      width: 0.625rem;
      height: 0.625rem;
      border-radius: 50%;
      color: var(--atlas-text, rgb(224 224 224));
      font-size: 0.4rem;
      line-height: 1;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
      box-shadow: 0 0 0 0.0625rem var(--atlas-border, rgb(74 74 74));
    }

    .minical-sidebar-separator {
      width: 1rem;
      height: 0.125rem;
      margin: 0.125rem auto;
      background: color-mix(in srgb, var(--atlas-text-dim, rgb(153 153 153)) 50%, var(--atlas-border, rgb(74 74 74)));
    }

    .minical-sidebar-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.5rem;
      padding: 0;
      border: none;
      border-radius: 0.25rem;
      color: var(--atlas-text, rgb(224 224 224));
      cursor: pointer;
      background: transparent;
      transition:
        background 0.15s,
        color 0.15s;

      &:hover {
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }

      &[disabled] {
        opacity: 0.3;
        cursor: default;
        pointer-events: none;
      }

      &.pin-btn.has-sticky {
        color: var(--atlas-primary, rgb(74 144 226));
      }

      &.pin-btn.sticky-position {
        color: var(--atlas-error, rgb(244 67 54));
      }
    }

    .calendar-indicators {
      gap: 0.5rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin: 0 0.5rem 0.25rem;
      padding: 0.25rem 0;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: var(--font-size-12, 0.75rem);
    }

    .minical-grid {
      z-index: 1;
      position: relative;
      padding: 0.5rem;
      background: var(--atlas-bg, rgb(31 31 31));
    }

    .minical-weekdays {
      gap: var(--mini-gap);
      grid-template-columns: repeat(var(--mini-weekday-count, 7), var(--mini-day-size));
      display: grid;
      width: fit-content;
      margin: 0 auto 0.25rem;

      .weekday {
        padding: 0.125rem 0;
        color: var(--atlas-weekday-header, rgb(224 224 224));
        font-weight: 600;
        font-size: 0.7rem;
        text-align: center;
        text-transform: uppercase;

        &.rest-day {
          color: var(--atlas-rest-day, rgb(139 157 195));
        }
      }
    }

    .minical-days {
      gap: var(--mini-gap);
      grid-template-columns: repeat(var(--mini-weekday-count, 7), var(--mini-day-size));
      display: grid;
      width: fit-content;
      margin: 0 auto;
    }

    .intercalary-row {
      gap: var(--mini-gap);
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;

      .minical-day.intercalary {
        width: 100%;
        background: color-mix(in srgb, var(--festival-color, var(--atlas-callout-border, rgb(212 175 55))) 15%, var(--atlas-bg, rgb(31 31 31)));

        .festival-name {
          color: var(--festival-color, var(--atlas-callout-text, rgb(255 215 0)));
          font-weight: 500;
          font-size: 0.85rem;
          white-space: nowrap;
        }
      }
    }

    .minical-day {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      width: var(--mini-day-size);
      height: var(--mini-day-size);
      border-radius: 0.25rem;
      cursor: pointer;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
      transition: background 0.15s;

      &:hover {
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }

      &.empty {
        cursor: default;
        background: transparent;
      }

      &.other-month,
      &.other-week {
        opacity: 0.4;
        cursor: pointer;
        background: transparent;

        &:hover {
          opacity: 0.6;
          background: var(--atlas-bg-hover, rgb(53 53 53));
        }

        .minical-day-num {
          color: var(--atlas-text, rgb(224 224 224));
        }
      }

      &.today {
        background: color-mix(in srgb, var(--atlas-today, rgb(255 100 0)) 18%, var(--atlas-bg, rgb(31 31 31)));
        box-shadow: inset 0 0 0 0.075rem var(--atlas-today, rgb(255 100 0));

        .minical-day-num {
          color: var(--atlas-today, rgb(255 100 0));
          font-weight: 700;
        }
      }

      &.selected {
        background: color-mix(in srgb, var(--atlas-primary, rgb(74 144 226)) 10%, var(--atlas-bg, rgb(31 31 31)));
        box-shadow: inset 0 0 0 0.075rem var(--atlas-primary, rgb(74 144 226));
      }

      &.today.selected {
        box-shadow:
          inset 0 0 0 0.075rem var(--atlas-primary, rgb(74 144 226)),
          inset 0 0 0 0.15rem var(--atlas-today, rgb(255 100 0));
      }

      &.festival {
        background: color-mix(in srgb, var(--festival-color, var(--atlas-callout-border, rgb(212 175 55))) 15%, var(--atlas-bg, rgb(31 31 31)));

        .minical-day-num {
          color: var(--festival-color, var(--atlas-callout-text, rgb(255 215 0)));
        }
      }

      &.fogged {
        opacity: 0.3;
        pointer-events: none;

        .note-badge,
        .moon-tiny,
        .moon-tint,
        .mini-weather-icon {
          display: none;
        }
      }

      .minical-day-num {
        color: var(--atlas-text, rgb(224 224 224));
        font-weight: 500;
        font-size: 0.9rem;
      }

      .note-badge {
        place-items: center;
        display: grid;
        position: absolute;
        bottom: 0.1563rem;
        left: 0.15rem;
        width: 1rem;
        height: 1rem;
        padding: 0;
        border-radius: 0.25rem;
        font-weight: 500;
        font-size: 0.85rem;
        line-height: 1;
      }

      .mini-weather-icon {
        opacity: 0.7;
        position: absolute;
        right: 0.125rem;
        bottom: 0.125rem;
        width: 0.75rem;
        height: 0.75rem;
        font-size: 0.625rem;
        line-height: 0.75rem;
        text-align: center;

        &.forecast {
          opacity: 0.4;
        }
      }

      .moon-tint {
        position: absolute;
        top: 0.125rem;
        right: 0.125rem;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        overflow: hidden;
        background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(255 255 255));

        img {
          pointer-events: none;
        }

        &.clickable {
          cursor: pointer;
          transition: transform 0.15s ease;

          &:hover {
            z-index: 10;
            filter: brightness(1.2);
            transform: scale(1.3);
          }
        }
      }

      .moon-tiny {
        position: absolute;
        top: 0.125rem;
        right: 0.125rem;
        width: 0.75rem;
        height: 0.75rem;

        &.clickable {
          cursor: pointer;
          transition: transform 0.15s ease;

          &:hover {
            z-index: 10;
            filter: brightness(1.2);
            transform: scale(1.3);
          }
        }

        &.tinted {
          mix-blend-mode: multiply;
          position: static;
          width: 100%;
          height: 100%;
        }
      }
    }

    .minical-time-display {
      display: flex;
      z-index: 1;
      position: relative;
      justify-content: center;
      align-items: center;
      padding: 0.5rem 0.625rem;
      border-top: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0 0 0.875rem 0.875rem;
      background: var(--atlas-bg-lighter, rgb(42 42 42));

      &[data-action='toggle'] {
        cursor: pointer;
      }

      .time-value {
        color: var(--atlas-title-text, var(--atlas-text, rgb(224 224 224)));
        font-weight: 600;
        font-size: 1.1rem;
        font-family: monospace;
        letter-spacing: 0.0625rem;
        transition: opacity 0.15s;
      }

      .date-value {
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: 0.85rem;
      }

      .hidden {
        display: none;
      }

      .time-toggle {
        inset: 0;
        display: flex;
        opacity: 0;
        position: absolute;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        background: var(--atlas-bg-lighter, rgb(42 42 42));
        transition: opacity 0.15s;

        i {
          color: var(--atlas-text, rgb(224 224 224));
          font-size: 1.2rem;
        }

        &.active i {
          color: var(--atlas-primary, rgb(74 144 226));
        }
      }

      &[data-action='toggle']:hover .time-value {
        opacity: 0;
      }

      &[data-action='toggle']:hover .time-toggle {
        opacity: 1;
        pointer-events: auto;
      }
    }

    .minical-time-controls {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      height: 2.75rem;
      margin-bottom: -2.75rem;
      padding: 0.5rem 0.625rem;
      border-top: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 0 0 0.875rem 0.875rem;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
      transition:
        transform 0.25s ease,
        margin-bottom 0.25s ease;
      transform: translateY(-100%);

      &.visible {
        margin-bottom: 0;
        transform: translateY(0);
      }

      .controls-group {
        gap: 0.25rem;
        display: flex;
        align-items: center;
      }

      .time-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 0.25rem;
        color: var(--atlas-text, rgb(224 224 224));
        cursor: pointer;
        background: var(--atlas-button-bg, rgb(58 58 58));
        transition:
          border-color 0.15s,
          background 0.15s;

        &:hover {
          border-color: var(--atlas-primary, rgb(74 144 226));
          background: var(--atlas-bg-hover, rgb(53 53 53));
        }

        &:focus {
          outline: none;
          box-shadow: none;
        }

        &.custom-jump {
          width: auto;
          min-width: 1.75rem;
          padding: 0 0.25rem;
          font-weight: 600;
          font-size: var(--font-size-11);
        }
      }

      .increment-select {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        width: 3.25rem;
        min-width: 3.25rem;
        height: 1.75rem;
        margin: 0;
        padding: 0 0.375rem;
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 0.25rem;
        color: var(--atlas-text, rgb(224 224 224));
        font-size: 0.75rem;
        line-height: 1.625rem;
        text-align: center;
        cursor: pointer;
        background: var(--atlas-button-bg, rgb(58 58 58));
        background-image: none;

        &:hover {
          border-color: var(--atlas-primary, rgb(74 144 226));
        }

        &:focus {
          outline: none;
          box-shadow: none;
        }
      }
    }

    &.micro {
      --mini-day-size: 2.25rem;
      --mini-gap: 0;

      .minical-container {
        border-radius: 0.5rem;

        &:has(.minical-sidebar:is(.visible, .locked)) {
          border-radius: 0.5rem 0 0 0.5rem;

          .minical-top-row {
            border-radius: 0.5rem 0 0;
          }

          .minical-grid {
            border-radius: 0 0 0 0.5rem;
          }

          .minical-time-controls {
            border-radius: 0 0 0 0.5rem;
          }
        }

        &:has(.minical-time-controls.visible) .minical-grid {
          border-radius: 0;
        }
      }

      cursor: grab;

      .minical-top-row {
        position: relative;
        padding: 0.25rem 0.375rem;
        border-radius: 0.5rem 0.5rem 0 0;

        .title {
          font-size: 0.8rem;
        }

        .equivalent-dates-row {
          display: none;
        }

        .nav-btn {
          width: 1.25rem;
          height: 1.25rem;
        }

        .title-group {
          position: relative;
        }

        .time-toggle {
          inset: 0;
          display: flex;
          opacity: 0;
          position: absolute;
          justify-content: center;
          align-items: center;
          border-radius: 0.25rem;
          cursor: pointer;
          pointer-events: none;
          background: var(--atlas-bg-lighter, rgb(42 42 42));
          transition: opacity 0.15s;

          i {
            color: var(--atlas-text, rgb(224 224 224));
            font-size: 0.85rem;
          }

          &.active i {
            color: var(--atlas-primary, rgb(74 144 226));
          }

          &.clock-locked i {
            color: var(--atlas-warning, rgb(255 193 7));
          }
        }

        .title-group:hover .time-toggle {
          opacity: 1;
          pointer-events: auto;
        }
      }

      .calendar-indicators {
        gap: 0.375rem;
        margin: 0 0.375rem 0.125rem;
        padding: 0.125rem 0;
        font-size: var(--font-size-11, 0.6875rem);
      }

      .minical-grid {
        padding: 0.375rem;
        border-radius: 0 0 0.5rem 0.5rem;
      }

      .minical-weekdays {
        display: none;
      }

      .minical-day {
        border-radius: 50%;
        overflow: hidden;

        .minical-day-num {
          font-weight: 700;
          font-size: 0.8rem;
        }

        .note-badge {
          bottom: 0.0625rem;
          left: 0.0625rem;
          width: 0.75rem;
          height: 0.75rem;
          border-radius: 50%;
          font-size: 0;
        }

        .moon-tiny:not(.tinted) {
          top: auto;
          right: 0.0625rem;
          bottom: 0.0625rem;
          width: 0.75rem;
          height: 0.75rem;
        }

        .moon-tint {
          top: auto;
          right: 0.0625rem;
          bottom: 0.0625rem;
          width: 0.75rem;
          height: 0.75rem;
        }

        .mini-weather-icon {
          display: none;
        }
      }

      .intercalary-row .minical-day.intercalary .festival-name {
        font-size: 0.7rem;
      }

      .minical-time-display {
        display: none;
      }

      .minical-time-controls {
        border-radius: 0 0 0.5rem 0.5rem;

        .time-shortcut,
        [data-action='reverse'],
        [data-action='forward'] {
          display: none;
        }
      }

      .minical-sidebar {
        gap: 0.125rem;
        opacity: 0;
        top: -0.0625rem;
        bottom: -0.0625rem;
        width: 1.5rem;
        padding: 0.25rem 0;
        border-radius: 0 0.5rem 0.5rem 0;
        pointer-events: none;
        transition: opacity 0.2s ease;

        &.visible,
        &.locked {
          opacity: 1;
          pointer-events: auto;
        }
      }

      .minical-sidebar-btn {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.75rem;
      }

      .minical-sidebar-separator {
        display: none;
      }

      .notes-panel {
        left: calc(100% + 1.5rem);
        width: 8rem;
        border-radius: 0 0.5rem 0.5rem 0;
      }

      .notes-panel-header {
        display: none;
      }

      .notes-panel-filter-bar {
        display: none;
      }

      .notes-panel-list {
        gap: 0.125rem;
        padding: 0.25rem;
      }

      .notes-panel-item {
        gap: 0.25rem;
        padding: 0.25rem 0.375rem;
      }

      .note-item-icon {
        width: 1rem;
        height: 1rem;

        > i:not(.note-visibility-badge) {
          font-size: 0.75rem;
        }

        img {
          width: 0.875rem;
          height: 0.875rem;
        }
      }

      .note-item-title {
        font-size: 0.7rem;
      }

      .note-item-author {
        display: none;
      }

      .note-item-meta {
        font-size: 0.6rem;
      }

      .note-item-edit {
        width: 1.125rem;
        height: 1.125rem;
      }

      .minical-container:has(.notes-panel.visible) .minical-sidebar {
        border-radius: 0;
      }
    }
  }
}

.calendaria {
  &.calendar-note-sheet {
    color: var(--atlas-text, rgb(224 224 224));
    background: var(--atlas-bg, rgb(31 31 31));

    .window-header {
      border-color: var(--atlas-border, rgb(74 74 74));
      color: var(--atlas-text, rgb(224 224 224));
      background: var(--atlas-bg-lighter, rgb(42 42 42));
    }

    .window-header .header-controls {
      gap: 0.25rem;
      display: flex;
      align-items: center;
      margin-right: auto;
      margin-left: 0;

      .header-divider {
        width: 0.0625rem;
        height: 1rem;
        margin: 0 0.125rem;
        background: var(--atlas-border, rgb(74 74 74));
      }
    }

    .window-header button.header-control {
      --button-background-color: var(--atlas-bg, rgb(31 31 31));
      --button-focus-outline-color: none;
      --button-hover-background-color: var(--atlas-bg-hover, rgb(53 53 53));
      --button-hover-text-color: var(--atlas-text, rgb(224 224 224));
      --button-text-color: var(--atlas-text-dim, rgb(153 153 153));

      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.5rem;
      min-height: unset;
      padding: 0;
      border: none;
      border-radius: 0.25rem;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: var(--font-size-12, 0.75rem);
      text-transform: none;
      background: var(--atlas-bg, rgb(31 31 31));
      box-shadow: none;

      &:hover,
      &:focus {
        color: var(--atlas-text, rgb(224 224 224));
        background: var(--atlas-bg-hover, rgb(53 53 53));
        box-shadow: none;
      }
    }

    &.minimized .window-title {
      visibility: visible;
    }

    &.view-mode .window-content {
      padding: 0;
    }

    &.edit-mode .window-content {
      gap: 0;
      display: flex;
      flex-direction: column;
      padding: 0.5rem;

      nav.sheet-tabs {
        gap: 0;
        display: flex;
        flex-shrink: 0;
        flex-direction: row;
        width: 100%;
        min-width: unset;
        max-width: unset;
        padding: 0;
        border-right: none;
        border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        overflow: hidden;

        .tab-group {
          gap: 0;
          display: flex;
          flex-direction: row;
          width: 100%;
        }

        [data-tab] {
          gap: 0.375rem;
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
          padding: 0.5rem 0.25rem;
          border-bottom: 0.125rem solid transparent;
          border-radius: 0;
          color: var(--atlas-text-dim, rgb(153 153 153));
          font-size: var(--font-size-12);
          text-transform: uppercase;
          letter-spacing: 0.03em;

          &.active {
            border-bottom-color: var(--atlas-accent, rgb(168 144 96));
            color: var(--atlas-text, rgb(224 224 224));
          }
        }
      }

      section.tab {
        flex: 1;
        min-height: 0;
        overflow-y: auto;

        &.active[data-tab='content'] {
          display: flex;
          flex-direction: column;
          overflow-y: hidden;
        }
      }
    }
  }

  .calendar-note-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    .note-accent-bar {
      flex-shrink: 0;
      width: 100%;
      height: 0.25rem;
    }

    .note-body {
      gap: 1rem;
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 1rem;
      overflow-y: auto;
    }

    .note-header {
      gap: 0.75rem;
      display: flex;
      align-items: center;
    }

    .note-icon {
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: color-mix(in srgb, var(--note-color, var(--atlas-primary, rgb(74 144 226))) 15%, var(--atlas-bg, rgb(31 31 31)));

      .theme-light & {
        background: color-mix(in srgb, var(--note-color, var(--atlas-primary, rgb(74 144 226))) 8%, var(--atlas-bg, rgb(31 31 31)));
      }

      i {
        color: var(--note-color, var(--atlas-text, rgb(224 224 224)));
        font-size: 1.5rem;
      }

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      img.tinted {
        filter: drop-shadow(0 62.5rem 0 var(--note-color, var(--atlas-text, rgb(224 224 224))));
        transform: translateY(-62.5rem);
      }
    }

    .note-header-text {
      gap: 0.125rem;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .note-title {
      margin: 0;
      overflow: hidden;
      color: var(--atlas-text-heading, rgb(238 238 238));
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 1.2;
      font-family: var(--font-primary);
      text-overflow: ellipsis;
    }

    .visibility-label {
      gap: 0.25rem;
      display: inline-flex;
      align-items: center;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: var(--font-size-11);

      i {
        font-size: var(--font-size-10);
      }
    }

    .note-metadata {
      gap: 0.375rem;
      display: flex;
      flex-direction: column;
      padding: 0.625rem 0.75rem;
      border: 0.0625rem solid color-mix(in srgb, var(--note-color, var(--atlas-primary, rgb(74 144 226))) 12%, var(--atlas-border, rgb(74 74 74)));
      border-radius: 0.375rem;
      background: color-mix(in srgb, var(--note-color, var(--atlas-primary, rgb(74 144 226))) 6%, var(--atlas-bg-lighter, var(--atlas-bg, rgb(31 31 31))));

      .theme-light & {
        background: color-mix(in srgb, var(--note-color, var(--atlas-primary, rgb(74 144 226))) 4%, var(--atlas-bg, rgb(31 31 31)));
      }
    }

    .metadata-row {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      font-size: var(--font-size-13);
      line-height: 1.4;

      > i:first-child {
        flex-shrink: 0;
        width: 1rem;
        color: var(--note-color, var(--atlas-text-dim, rgb(153 153 153)));
        font-size: var(--font-size-12);
        text-align: center;
      }

      .meta-arrow {
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: var(--font-size-10);
      }

      .time-separator {
        color: var(--atlas-text-dim, rgb(153 153 153));
      }

      &.equivalent {
        opacity: 0.75;
        font-size: var(--font-size-12);
      }

      .calendar-name {
        font-weight: 600;
      }
    }

    .equivalent-dates {
      gap: 0.25rem;
      display: flex;
      flex-direction: column;
      padding-top: 0.375rem;
      border-top: 0.0625rem solid color-mix(in srgb, var(--note-color, var(--atlas-primary, rgb(74 144 226))) 10%, var(--atlas-border-light, rgb(58 58 58)));
    }

    .note-presets {
      gap: 0.375rem;
      display: flex;
      flex-wrap: wrap;

      .preset-tag {
        gap: 0.375rem;
        display: inline-flex;
        align-items: center;
        padding: 0.1875rem 0.625rem;
        border: 0.0625rem solid color-mix(in srgb, var(--preset-color, var(--atlas-divider, rgb(65 65 65))) 25%, var(--atlas-border, rgb(74 74 74)));
        border-radius: 1rem;
        font-size: var(--font-size-12);
        background: color-mix(in srgb, var(--preset-color, var(--atlas-primary, rgb(74 144 226))) 8%, var(--atlas-bg, rgb(31 31 31)));
      }

      .preset-dot {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--preset-color, var(--atlas-primary, rgb(74 144 226)));
      }
    }

    .note-content {
      flex: 1;
      padding-top: 0.75rem;
      border-top: 0.0625rem solid var(--atlas-border-light, var(--atlas-border, rgb(74 74 74)));
      line-height: 1.6;

      &:empty::before {
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-style: italic;
        content: 'No content';
      }
    }
  }

  .note-tab-content,
  .note-tab-schedule,
  .note-tab-settings {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;

    select,
    input[type='text'],
    input[type='number'],
    button:not(.header-control) {
      box-sizing: border-box;
      height: 2rem;
    }

    select,
    input[type='text'],
    input[type='number'] {
      border-color: var(--atlas-border, rgb(74 74 74));
      color: var(--atlas-text, rgb(224 224 224));
      background: var(--atlas-input-bg, rgb(48 48 48));
    }

    select option {
      color: var(--atlas-text, rgb(224 224 224));
      background: var(--atlas-bg, rgb(31 31 31));
    }

    input[type='checkbox'],
    input[type='checkbox']:checked,
    input[type='checkbox']:indeterminate {
      --checkbox-background-color: var(--atlas-input-bg, rgb(48 48 48));
      --checkbox-border-color: var(--atlas-border, rgb(74 74 74));
      --checkbox-checked-color: var(--atlas-primary, rgb(74 144 226));
      --checkbox-checkmark-color: var(--atlas-text-on-color, rgb(255 255 255));

      width: var(--checkbox-size);
      height: var(--checkbox-size);
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.1875rem;

      &:checked,
      &:indeterminate {
        border-color: transparent;
      }
    }

    fieldset {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0;
      padding: 0.5rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.25rem;

      legend {
        color: var(--atlas-text, rgb(224 224 224));
        font-weight: 600;
        font-size: var(--font-size-12);
      }
    }

    input[type='text']:not(prose-mirror *),
    input[type='number']:not(prose-mirror *),
    select:not(prose-mirror *) {
      border-radius: 0.1875rem;
    }

    button:not(prose-mirror *) {
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.1875rem;
    }

    .hint {
      margin: 0 0 0.375rem;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-style: italic;
      font-size: var(--font-size-10);
    }

    .inline-form {
      gap: 0.375rem;
      display: flex;
      align-items: center;

      select {
        flex: 1;
        min-width: 6.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      input[type='number'] {
        width: 4.375rem;
      }
    }

    .inline-form,
    .form-group-stacked {
      select,
      input {
        height: 2rem;
        min-height: 2rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.1875rem;
        font-size: var(--font-size-11);
        line-height: 1;
      }
    }

    .form-group-stacked {
      gap: 0.125rem;
      display: flex;
      flex-direction: column;

      label {
        font-weight: 500;
        font-size: var(--font-size-11);
      }

      select {
        width: 100%;
      }
    }

    .add-btn {
      gap: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.1875rem;
      color: var(--atlas-text, rgb(224 224 224));
      font-size: var(--font-size-11);
      cursor: pointer;
      background: var(--atlas-input-bg, rgb(48 48 48));

      &:hover {
        color: var(--atlas-text-heading, rgb(238 238 238));
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }
    }

    .tag-list {
      gap: 0.375rem;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }

    .tag {
      gap: 0.375rem;
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding: 0.25rem 0.5rem;
      border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      border-radius: 1rem;
      font-size: var(--font-size-11);
      background: var(--atlas-bg-hover, rgb(53 53 53));

      .theme-light & {
        background: color-mix(in srgb, var(--atlas-text, rgb(224 224 224)) 8%, transparent);
      }

      .tag-value {
        overflow: hidden;
        color: var(--atlas-text, rgb(224 224 224));
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .remove-btn {
      margin: 0;
      padding: 0;
      border: none;
      color: var(--atlas-text-dim, rgb(153 153 153));
      line-height: 1;
      cursor: pointer;
      background: none;

      &:hover {
        color: var(--atlas-error, rgb(244 67 54));
      }

      i {
        font-size: var(--font-size-10);
      }
    }

    .festival-banner {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.5rem 0.75rem;
      border-radius: 0.25rem;
      color: var(--atlas-callout-text, rgb(255 215 0));
      font-size: var(--font-size-11);
      background: var(--atlas-callout-bg, rgb(212 175 55 / 15%));

      i {
        color: var(--atlas-warning, rgb(255 193 7));
      }

      a[data-action] {
        color: var(--atlas-callout-text, rgb(255 215 0));
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }

  .note-tab-content {
    flex: 1;
    min-height: 0;

    .form-row-header {
      gap: 0.5rem;
      grid-template-columns: 1fr auto;
      display: grid;
    }

    .emblem-controls {
      gap: 0.5rem;
      display: flex;
      align-items: center;
    }

    .icon-picker {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      cursor: pointer;
      overflow: hidden;

      &:hover .icon-preview {
        opacity: 0.8;
      }
    }

    .icon-preview {
      font-size: 1.5rem;
    }

    img.icon-preview {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    color-picker.color-input {
      width: 10.5rem;
      background: transparent;
      align-items: stretch;

      input[type='text'] {
        flex: 1;
        min-width: 0;
      }

      input[type='color'] {
        flex: 0 0 auto;
        width: 1.5rem;
        height: 100%;
        padding: 0;
        border: none;
        border-radius: 0 0.25rem 0.25rem 0;
      }

      input[type='color']::-webkit-color-swatch-wrapper {
        padding: 0;
      }

      input[type='color']::-webkit-color-swatch,
      input[type='color']::-moz-color-swatch {
        border: none;
        border-radius: 0 0.25rem 0.25rem 0;
      }
    }

    .editor-fieldset {
      flex: 1;
      min-height: 31.25rem;

      prose-mirror {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;

        .editor-menu {
          border-color: var(--atlas-border, rgb(74 74 74));
          color: var(--atlas-text, rgb(224 224 224));
          background: var(--atlas-bg-lighter, rgb(42 42 42));

          /* Content auto-saves on tab/mode change and close, so the editor's own save button is redundant. */
          li:has(> button[data-action='save']) {
            display: none;
          }

          button {
            color: var(--atlas-text-dim, rgb(153 153 153));

            &:hover {
              color: var(--atlas-text, rgb(224 224 224));
              background: var(--atlas-bg-hover, rgb(53 53 53));
            }

            &.active {
              color: var(--atlas-text, rgb(224 224 224));
              background: var(--atlas-bg-hover, rgb(53 53 53));
            }
          }

          .pm-dropdown ul {
            border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
            color: var(--atlas-text, rgb(224 224 224));
            background: var(--atlas-bg, rgb(31 31 31));

            li {
              color: var(--atlas-text, rgb(224 224 224));

              &:hover {
                background: var(--atlas-bg-hover, rgb(53 53 53));
              }

              &.divider {
                border-color: var(--atlas-border-light, rgb(58 58 58));
              }
            }

            ul {
              border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
              background: var(--atlas-bg, rgb(31 31 31));
            }
          }
        }

        .editor-container {
          flex: 1;
          min-height: 28rem;
          overflow-y: auto;
          color: var(--atlas-text, rgb(224 224 224));
          background: var(--atlas-input-bg, rgb(48 48 48));

          textarea {
            color: var(--atlas-text, rgb(224 224 224));
            background: var(--atlas-input-bg, rgb(48 48 48));
          }
        }
      }
    }
  }

  .note-tab-schedule {
    .repeat-end-group {
      gap: 0.25rem;
      display: flex;
      align-items: center;

      .clear-btn {
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 0.25rem;
        background: var(--atlas-input-bg, rgb(48 48 48));
        color: var(--atlas-text, rgb(224 224 224));
        cursor: pointer;
      }

      .clear-btn:hover {
        border-color: var(--atlas-accent, rgb(168 144 96));
        color: var(--atlas-accent, rgb(168 144 96));
      }
    }

    .schedule-mode-fieldset {
      margin-bottom: 0.5rem;

      .schedule-mode-options {
        gap: 0.5rem;
        display: flex;
      }

      .mode-option {
        gap: 0.5rem;
        flex: 1;
        padding: 0.5rem 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-12);
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 0.25rem;
        background: var(--atlas-input-bg, rgb(48 48 48));
        color: var(--atlas-text, rgb(224 224 224));
        cursor: pointer;
        transition:
          background 0.15s,
          border-color 0.15s;
      }

      .mode-option:hover:not(:disabled) {
        border-color: var(--atlas-accent, rgb(168 144 96));
      }

      .mode-option.active {
        border-color: var(--atlas-accent, rgb(168 144 96));
        background: color-mix(in srgb, var(--atlas-accent, rgb(168 144 96)) 15%, transparent);
        color: var(--atlas-accent, rgb(168 144 96));
      }

      .mode-option:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }

    .form-row-dates {
      gap: 0.5rem;
      grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
      display: grid;
    }

    .form-row-dates--recurring {
      grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) auto auto;
    }

    .duration-days-label {
      gap: 0.125rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: normal;
      font-size: var(--font-size-10);
      white-space: nowrap;
      cursor: pointer;

      input[type='number'] {
        width: 3.5rem;
      }
    }

    .date-fieldset,
    .repeat-end-fieldset {
      gap: 0.25rem;
      display: flex;
      flex-direction: column;

      .form-group {
        gap: 0.375rem;
        display: flex;
        align-items: center;
      }
    }

    .date-picker-btn {
      gap: 0.375rem;
      display: flex;
      flex: 1;
      align-items: center;
      min-width: 0;
      height: 2rem;
      padding: 0.125rem 0.375rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.1875rem;
      color: var(--atlas-text, rgb(224 224 224));
      font-size: var(--font-size-11);
      line-height: 1.4;
      cursor: pointer;
      background: var(--atlas-input-bg, rgb(48 48 48));

      &:disabled {
        opacity: 0.5;
        cursor: default;
        pointer-events: none;
      }

      &:hover:not(:disabled) {
        background: var(--atlas-bg-hover, rgb(53 53 53));
      }

      i {
        flex-shrink: 0;
        font-size: var(--font-size-10);
      }

      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .time-fieldset .time-grid {
      gap: 0.25rem 0.375rem;
      grid-template-columns: auto 1fr auto;
      display: grid;
      align-items: center;

      > label {
        font-weight: 600;
        font-size: var(--font-size-11);
      }

      .time-inputs {
        gap: 0.125rem;
        display: flex;
        align-items: center;

        input {
          width: 2rem !important;
          padding: 0.125rem 0.25rem;
          border-radius: 0.1875rem;
          font-size: var(--font-size-11);
          text-align: center;
        }

        .time-separator {
          font-weight: 600;
        }
      }

      .all-day-label {
        gap: 0.125rem;
        grid-column: 3;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 0.5rem;
        font-weight: normal;
        font-size: var(--font-size-10);
        cursor: pointer;

        input[type='checkbox'] {
          margin: 0;
        }
      }
    }

    .conditions-fieldset {
      .condition-actions {
        gap: 0.5rem;
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
      }

      .cb-open-builder {
        gap: 0.375rem;
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0.625rem;
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 0.25rem;
        color: var(--atlas-text, rgb(224 224 224));
        font-size: var(--font-size-11);
        cursor: pointer;
        background: transparent;

        &:hover {
          border-color: var(--atlas-primary, rgb(74 144 226));
          color: var(--atlas-title-text, var(--atlas-text, rgb(224 224 224)));
          background: var(--atlas-bg-hover, rgb(53 53 53));
        }
      }

      .preset-group {
        flex: 1;

        select {
          width: 100%;
        }
      }

      .condition-groups {
        gap: 0.375rem;
        display: flex;
        flex-wrap: wrap;
      }

      .condition-group {
        gap: 0.375rem;
        display: inline-flex;
        align-items: center;
        width: fit-content;
        padding: 0.25rem 0.375rem;
        border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
        border-radius: 0.25rem;
        background: var(--atlas-bg-hover, rgb(53 53 53));

        .theme-light & {
          background: unset;
        }

        .group-mode {
          flex-shrink: 0;
          padding: 0.125rem 0.375rem;
          border-radius: 0.1875rem;
          color: var(--atlas-title-text, var(--atlas-text, rgb(224 224 224)));
          font-weight: 600;
          font-size: var(--font-size-10);
          text-transform: uppercase;
          background: var(--atlas-bg-hover, rgb(53 53 53));

          .theme-light & {
            background: unset;
          }
        }

        .group-pills {
          gap: 0.25rem;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }

        .condition-pill {
          padding: 0.125rem 0.5rem;
          border-radius: 1rem;
          font-size: var(--font-size-11);
          cursor: context-menu;
          background: var(--atlas-bg-hover, rgb(53 53 53));

          .theme-light & {
            background: rgb(0 0 0 / 10%);
          }
        }

        .condition-group {
          border-style: dashed;
          background: var(--atlas-bg-hover, rgb(53 53 53));

          .theme-light & {
            background: unset;
          }
        }
      }
    }

    .schedule-row {
      gap: 0.5rem;
      grid-template-columns: 1fr auto;
      display: grid;
      align-items: stretch;
    }

    .max-occurrences-fieldset {
      justify-content: flex-start;
    }

    .occurrences-fieldset {
      .occurrence-list {
        gap: 0.25rem;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          gap: 0.5rem;
          display: flex;
          align-items: center;
          padding: 0.25rem 0.5rem;
          border-radius: 0.1875rem;
          font-size: var(--font-size-11);
          background: var(--atlas-bg-hover, rgb(53 53 53));

          .theme-light & {
            background: rgb(0 0 0 / 10%);
          }

          i {
            color: var(--atlas-text-dim, rgb(153 153 153));
            font-size: var(--font-size-10);
          }
        }
      }
    }
  }

  .note-tab-settings {
    .settings-row {
      gap: 0.5rem;
      display: flex;
      align-items: flex-start;

      > fieldset {
        flex: 0 1 auto;
        min-width: 0;
      }

      > .macro-fieldset {
        flex: 1 1 auto;
      }
    }

    .presets-fieldset {
      .inline-form {
        align-items: flex-end;
      }

      multi-select {
        flex: 1;
        align-self: flex-end;

        .tags {
          gap: 0.25rem;
          display: flex;
          flex-wrap: wrap;
          min-height: 1.5rem;
          max-height: 1.5rem;
          padding-right: 0.25rem;
          overflow-y: auto;
        }

        select {
          height: 1.625rem !important;
          padding: 0.125rem 0.375rem !important;
          border-radius: 0.1875rem;
          font-size: var(--font-size-11) !important;
          line-height: 1.4 !important;
        }

        .tag {
          padding: 0.125rem 0.375rem;
          font-size: var(--font-size-10);
          cursor: pointer;

          &:hover {
            background: var(--atlas-border-light, rgb(58 58 58));
          }
        }
      }

      .new-preset-input {
        align-self: flex-end;
        width: 10rem;
        padding: 0.125rem 0.375rem;
        border-radius: 0.1875rem;
        color: var(--atlas-text, rgb(224 224 224));
        font-size: var(--font-size-11);
        line-height: 1.4;

        &::placeholder {
          color: var(--atlas-text-dim, rgb(153 153 153));
          font-style: italic;
        }
      }

      .add-btn {
        align-self: flex-end;
      }
    }

    .visibility-group,
    .display-style-group {
      gap: 0.5rem;
      display: flex;
      align-items: center;

      label {
        gap: 0.25rem;
        display: flex;
        align-items: center;
        font-size: var(--font-size-11);
        cursor: pointer;
      }

      .visibility-label {
        gap: 0.25rem;
        display: flex;
        align-items: center;
        font-size: var(--font-size-11);
      }
    }

    .reminder-controls {
      gap: 0.75rem;
      display: flex;
      flex-wrap: wrap;

      .form-group-stacked {
        flex: 1 1 auto;
        min-width: 7.5rem;

        label {
          margin-bottom: 0.25rem;
          font-size: var(--font-size-11);
        }

        .inline-form {
          gap: 0.25rem;
          display: flex;
          align-items: center;

          input[type='number'] {
            flex: 0 0 auto;
            width: 3.75rem;
          }

          .hint {
            color: var(--atlas-text-dim, rgb(153 153 153));
            font-size: var(--font-size-10);
          }
        }
      }

      .reminder-users {
        flex: 1 1 100%;
      }
    }

    .ownership-fieldset:disabled {
      opacity: 0.45;
    }

    .ownership-list {
      gap: 0.375rem;
      display: flex;
      flex-direction: column;
    }

    .ownership-row {
      gap: 0.75rem;
      display: flex;
      align-items: center;
      padding: 0.375rem 0.5rem;
      border-radius: 0.25rem;
      background: var(--atlas-bg-hover, rgb(53 53 53));

      .theme-light & {
        background: color-mix(in srgb, var(--atlas-text, rgb(224 224 224)) 8%, transparent);
      }

      .user-name {
        gap: 0.5rem;
        display: flex;
        flex: 1;
        align-items: center;
        font-weight: 500;
        font-size: var(--font-size-12);
      }

      select {
        width: 8rem;
      }

      .ownership-locked {
        gap: 0.25rem;
        display: flex;
        align-items: center;
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-style: italic;
        font-size: var(--font-size-11);

        i {
          font-size: var(--font-size-10);
        }
      }
    }
  }
}

.calendaria {
  &.note-viewer {
    grid-template:
      'search  search' auto
      'filters results' 1fr
      'footer  footer' auto
      / 14rem 1fr;
    display: grid;
    position: fixed;
    border-radius: 0.75rem;
    overflow: hidden;
    color: var(--atlas-text, rgb(224 224 224));
    background: var(--atlas-bg, rgb(31 31 31));
    box-shadow:
      0 0.5rem 2rem rgb(0 0 0 / 30%),
      0 0 0 0.0625rem var(--atlas-border, rgb(74 74 74));

    input[type='checkbox'],
    input[type='checkbox']:checked,
    input[type='checkbox']:indeterminate {
      --checkbox-background-color: var(--atlas-input-bg, rgb(48 48 48));
      --checkbox-border-color: var(--atlas-border, rgb(74 74 74));
      --checkbox-checked-color: var(--atlas-primary, rgb(74 144 226));
      --checkbox-checkmark-color: var(--atlas-text-on-color, rgb(255 255 255));

      width: var(--checkbox-size);
      height: var(--checkbox-size);
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.1875rem;

      &:checked,
      &:indeterminate {
        border-color: transparent;
      }
    }

    .note-viewer-search {
      gap: 0.5rem;
      grid-area: search;
      display: flex;
      align-items: center;
      padding: 0.5rem 0.75rem;
      border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      cursor: grab;
      background: var(--atlas-bg-lighter, rgb(42 42 42));

      .search-input-wrapper {
        gap: 0.375rem;
        display: flex;
        flex: 1;
        align-items: center;
        height: 1.625rem;
        padding: 0 0.375rem;
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 0.25rem;
        background: var(--atlas-bg, rgb(31 31 31));
        overflow: hidden;

        .search-icon {
          color: var(--atlas-text-dim, rgb(153 153 153));
          font-size: var(--font-size-12, 0.75rem);
        }

        input {
          flex: 1;
          padding: 0;
          border: none;
          outline: none;
          color: var(--atlas-text, rgb(224 224 224));
          font-size: var(--font-size-12, 0.75rem);
          background: transparent;

          &::placeholder {
            color: var(--atlas-text-dim, rgb(153 153 153));
          }
        }

        .search-clear {
          display: flex;
          flex-shrink: 0;
          justify-content: center;
          align-items: center;
          width: 1.25rem;
          height: 1.25rem;
          padding: 0;
          border: none;
          border-radius: 50%;
          color: var(--atlas-text-dim, rgb(153 153 153));
          cursor: pointer;
          background: transparent;

          &:hover {
            color: var(--atlas-text, rgb(224 224 224));
            background: var(--atlas-bg-hover, rgb(53 53 53));
          }
        }
      }

      .close-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 0.25rem;
        padding: 0;
        border: none;
        border-radius: 0.25rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        cursor: pointer;
        background: transparent;

        &:hover {
          color: var(--atlas-text, rgb(224 224 224));
          background: var(--atlas-bg-hover, rgb(53 53 53));
        }
      }
    }

    .note-viewer-filters {
      gap: 0.625rem;
      grid-area: filters;
      display: flex;
      flex-direction: column;
      padding: 0.625rem;
      border-right: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      overflow-y: auto;
      background: var(--atlas-bg-lighter, rgb(42 42 42));

      .filter-group {
        gap: 0.25rem;
        display: flex;
        flex-direction: column;
      }

      .filter-label {
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-weight: 600;
        font-size: var(--font-size-11, 0.6875rem);
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      .filter-select {
        padding: 0.25rem 0.375rem;
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 0.25rem;
        color: var(--atlas-text, rgb(224 224 224));
        font-size: var(--font-size-12, 0.75rem);
        background: var(--atlas-bg, rgb(31 31 31));
      }

      multi-select {
        font-size: var(--font-size-12, 0.75rem);

        .tags {
          gap: 0.25rem;
          display: flex;
          flex-wrap: wrap;
          padding-right: 0.25rem;
        }

        .tag {
          padding: 0.125rem 0.375rem;
          border-radius: 0.1875rem;
          color: var(--atlas-text, rgb(224 224 224));
          font-size: var(--font-size-10, 0.625rem);
          cursor: pointer;
          background: color-mix(in srgb, var(--atlas-primary, rgb(74 144 226)) 20%, var(--atlas-bg, rgb(31 31 31)));

          &:hover {
            background: color-mix(in srgb, var(--atlas-primary, rgb(74 144 226)) 35%, var(--atlas-bg, rgb(31 31 31)));
          }
        }

        select {
          padding: 0.125rem 0.375rem;
          border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
          border-radius: 0.25rem;
          color: var(--atlas-text, rgb(224 224 224));
          font-size: var(--font-size-11, 0.6875rem);
          background: var(--atlas-bg, rgb(31 31 31));
        }
      }

      .filter-checkboxes {
        gap: 0.375rem;
        padding-top: 0.5rem;
        border-top: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      }

      .filter-checkbox {
        gap: 0.375rem;
        display: flex;
        align-items: center;
        color: var(--atlas-text, rgb(224 224 224));
        font-size: var(--font-size-12, 0.75rem);
        cursor: pointer;
      }

      .clear-filters-btn {
        gap: 0.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: auto;
        padding: 0.25rem 0.5rem;
        border: 0.0625rem solid var(--atlas-primary, rgb(74 144 226));
        border-radius: 0.25rem;
        color: var(--atlas-primary, rgb(74 144 226));
        font-size: var(--font-size-11, 0.6875rem);
        cursor: pointer;
        background: transparent;

        &:hover {
          background: color-mix(in srgb, var(--atlas-primary, rgb(74 144 226)) 15%, transparent);
        }
      }
    }

    .note-viewer-results {
      grid-area: results;
      position: relative;
      overflow-y: auto;
      scrollbar-gutter: stable;

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

      .note-group-header {
        padding: 0.4rem 0.75rem 0.2rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: var(--font-size-12);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      .note-row {
        gap: 0.5rem;
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
        cursor: pointer;
        transition: background 0.1s ease;

        &:hover {
          background: var(--atlas-bg-hover, rgb(53 53 53));
        }

        &.selected {
          background: color-mix(in srgb, var(--atlas-primary, rgb(74 144 226)) 12%, transparent);
        }

        .note-select-checkbox {
          flex-shrink: 0;
          cursor: pointer;
        }

        .note-color {
          flex-shrink: 0;
          width: 0.25rem;
          min-height: 1.75rem;
          border-radius: 0.125rem;
        }

        .note-icon {
          flex-shrink: 0;
          width: 1.25rem;
          height: 1.25rem;
          color: var(--note-color, var(--atlas-text-dim, rgb(153 153 153)));
          font-size: 1.125rem;
          text-align: center;
        }

        img.note-icon {
          object-fit: cover;
          border-radius: 50%;
        }

        .note-info {
          gap: 0.0625rem;
          display: flex;
          flex: 1;
          flex-direction: column;
          min-width: 0;

          .note-name {
            overflow: hidden;
            color: var(--atlas-text, rgb(224 224 224));
            font-weight: 500;
            font-size: var(--font-size-13, 0.8125rem);
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .note-date {
            color: var(--atlas-text-dim, rgb(153 153 153));
            font-size: var(--font-size-11, 0.6875rem);
          }
        }

        span.note-tags {
          gap: 0.375rem;
          display: flex;
          flex-shrink: 0;
          align-items: center;

          i {
            display: inline-block;
            width: 0.75rem;
            color: var(--atlas-text-dim, rgb(153 153 153));
            font-size: 0.6875rem;
            text-align: center;
          }

          .tag-visibility {
            color: var(--atlas-warning, rgb(255 193 7));
          }

          .tag-duration {
            color: var(--atlas-accent, rgb(168 144 96));
          }

          .tag-recurrence {
            color: var(--atlas-primary, rgb(74 144 226));
          }

          .tag-festival {
            color: var(--atlas-callout-text, rgb(255 215 0));
          }
        }
      }

      .note-viewer-empty {
        gap: 0.75rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3rem 1.5rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        text-align: center;

        .empty-icon {
          opacity: 0.4;
          font-size: 2rem;
        }

        p {
          margin: 0;
          font-size: var(--font-size-13, 0.8125rem);
        }
      }
    }

    .note-viewer-footer {
      gap: 0.5rem;
      grid-area: footer;
      display: flex;
      align-items: center;
      height: 2rem;
      padding: 0 0.75rem;
      border-top: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      background: var(--atlas-bg-lighter, rgb(42 42 42));

      .create-note-fab {
        display: flex;
        z-index: 1;
        position: absolute;
        bottom: 2.75rem;
        right: 0.75rem;
        justify-content: center;
        align-items: center;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border: none;
        border-radius: 50%;
        color: var(--atlas-text-on-color, rgb(255 255 255));
        font-size: var(--font-size-14, 0.875rem);
        cursor: pointer;
        background: var(--atlas-primary, rgb(74 144 226));
        box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 30%);
        transition:
          background 0.15s ease,
          transform 0.15s ease;

        &:hover {
          background: var(--atlas-primary-hover, color-mix(in srgb, var(--atlas-primary, rgb(74 144 226)) 85%, rgb(255 255 255)));
          transform: scale(1.1);
        }
      }

      .note-count {
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: var(--font-size-11, 0.6875rem);
        white-space: nowrap;
      }

      .bulk-controls {
        gap: 0.375rem;
        display: flex;
        align-items: center;
        margin-left: auto;
      }

      .selection-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: none;
        border-radius: 0.25rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: var(--font-size-12, 0.75rem);
        cursor: pointer;
        background: transparent;

        &:hover {
          color: var(--atlas-text, rgb(224 224 224));
          background: var(--atlas-bg-hover, rgb(53 53 53));
        }
      }

      .select-all-checkbox {
        cursor: pointer;
      }

      .selection-count {
        min-width: 1rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: var(--font-size-11, 0.6875rem);
        text-align: center;
      }

      .bulk-actions {
        gap: 0.125rem;
        display: flex;
        align-items: center;
        margin-left: 0.25rem;
        padding-left: 0.375rem;
        border-left: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      }

      .bulk-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: none;
        border-radius: 0.25rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: var(--font-size-11, 0.6875rem);
        cursor: pointer;
        background: transparent;

        &:hover:not(:disabled) {
          color: var(--atlas-text, rgb(224 224 224));
          background: var(--atlas-bg-hover, rgb(53 53 53));
        }

        &:disabled {
          opacity: 0.3;
          cursor: not-allowed;
        }
      }
    }
  }
}

.scene-config nav.tabs {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  row-gap: 0.25rem;
}

/* Keep tabs at content width so the strip wraps instead of clipping when many tabs are present. */
.scene-config nav.tabs > * {
  flex-shrink: 0;
}

.calendaria-scene-config {
  max-height: 60vh;
  overflow: hidden auto;
  padding-right: 0.5rem;
}

.calendaria-scene-config fieldset > legend {
  padding: 0 0.4rem;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-12, 0.75rem);
  letter-spacing: 0.05em;
}

.calendaria-scene-config .form-group.slim:last-child {
  margin-bottom: 0;
}

.calendaria {
  &.secondary-calendar {
    .secondary-calendar-container {
      gap: 0.5rem;
      display: flex;
      flex-direction: column;
      padding: 0.5rem;
    }

    .secondary-header {
      gap: 0.5rem;
      display: flex;
      align-items: center;

      button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: none;
        border-radius: 0.25rem;
        color: var(--atlas-text, rgb(200 200 220));
        cursor: pointer;
        background: var(--atlas-bg-hover, rgb(40 40 70));
        transition: background 0.15s ease;

        &:hover {
          background: var(--atlas-bg-lighter, rgb(55 55 90));
        }
      }

      .header-center {
        flex: 1;
        text-align: center;

        .calendar-name {
          margin: 0;
          color: var(--atlas-primary, rgb(123 104 238));
          font-weight: 600;
          font-size: 0.8rem;
          line-height: 1.2;
        }

        .month-year {
          color: var(--atlas-text, rgb(200 200 220));
          font-weight: 500;
          font-size: 0.9rem;
          line-height: 1.4;
        }
      }
    }

    .secondary-grid {
      .weekday-row {
        grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
        display: grid;

        .weekday-header {
          padding: 0.125rem 0;
          color: var(--atlas-text-dim, rgb(140 140 170));
          font-weight: 600;
          font-size: 0.65rem;
          text-align: center;
          text-transform: uppercase;
        }
      }

      .week-row {
        grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
        display: grid;
      }

      .day-cell {
        aspect-ratio: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.25rem;
        cursor: default;

        .day-number {
          color: var(--atlas-text, rgb(200 200 220));
          font-size: 0.75rem;
        }

        &.today {
          background: var(--atlas-primary, rgb(123 104 238));

          .day-number {
            color: rgb(255 255 255);
            font-weight: 700;
          }
        }

        &.other-month {
          opacity: 0.3;
        }
      }

      .weekday-row,
      .week-row {
        grid-template-columns: repeat(var(--weekday-count, 7), 1fr);
      }
    }

    .intercalary-section {
      gap: 0.25rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 0.25rem;
      border-top: 0.0625rem solid var(--atlas-border, rgb(58 58 94));

      .intercalary-day {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.25rem;
        color: var(--atlas-text-dim, rgb(140 140 170));
        font-style: italic;
        font-size: 0.7rem;
        background: var(--atlas-bg-hover, rgb(40 40 70));

        &.today {
          color: rgb(255 255 255);
          background: var(--atlas-primary, rgb(123 104 238));
        }
      }
    }

    .secondary-footer {
      gap: 0.375rem;
      display: flex;
      align-items: center;
      padding-top: 0.25rem;
      border-top: 0.0625rem solid var(--atlas-border, rgb(58 58 94));

      button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: none;
        border-radius: 0.25rem;
        color: var(--atlas-text, rgb(200 200 220));
        cursor: pointer;
        background: var(--atlas-bg-hover, rgb(40 40 70));
        transition: background 0.15s ease;

        &:hover {
          background: var(--atlas-bg-lighter, rgb(55 55 90));
        }
      }

      .calendar-select {
        flex: 1;
        padding: 0.25rem 0.375rem;
        border: 0.0625rem solid var(--atlas-border, rgb(58 58 94));
        border-radius: 0.25rem;
        color: var(--atlas-text, rgb(200 200 220));
        font-size: 0.75rem;
        background: var(--atlas-bg, rgb(26 26 46));
      }
    }
  }
}

.calendaria {
  &.settings-panel {
    fieldset {
      legend {
        gap: 0.5rem;
        display: flex;
        align-items: center;
        font-size: var(--font-size-15);
      }
    }

    .reset-section,
    .legend-help {
      opacity: 0.6;
      height: 1.25rem;
      margin-right: 0.125rem;
      padding: 0;
      border: none;
      font-size: var(--font-size-14);
      cursor: pointer;
      background: none;

      &:hover {
        opacity: 1;
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }

    .reset-section {
      margin-left: auto;

      &:hover {
        color: var(--atlas-error, rgb(244 67 54));
      }
    }

    .legend-help:hover {
      color: var(--atlas-primary, rgb(74 144 226));
    }

    .form-group label,
    label {
      font-size: var(--font-size-14);
    }

    span {
      font-size: var(--font-size-13);
    }

    input,
    select {
      font-size: var(--font-size-14);
    }

    &.standard-form {
      gap: 0;

      .form-group > label {
        flex: 2;
      }
    }

    .search-highlight,
    fieldset.search-highlight {
      background: color-mix(in srgb, var(--calendaria-ui-accent) 20%, transparent) !important;
    }

    a.button,
    a.link-button {
      border: none;
      transition:
        background 0.15s ease,
        opacity 0.15s ease;

      &:hover {
        border: none;
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }

      &:disabled {
        opacity: 0.4;
      }
    }

    button[type='submit'],
    button.primary {
      border: 0.0625rem solid var(--button-border-color);
      background: var(--button-background-color);

      &:hover {
        border-color: var(--button-hover-border-color);
        background: var(--button-hover-background-color);
      }
    }

    .window-content {
      gap: 0;
      grid-template-columns: auto 1fr;
      grid-template-rows: 1fr auto;
      display: grid;
      max-width: 100%;
      height: 100%;
      padding: 0;
      overflow: hidden;
    }

    .settings-footer {
      gap: 1rem;
      grid-column: 1 / -1;
      grid-row: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 1rem;
      border-top: 0.0625rem solid var(--calendaria-ui-border);
      background: var(--calendaria-ui-surface);

      .footer-left,
      .footer-right {
        gap: 0.5rem;
        display: flex;
        align-items: center;
        min-width: 7.5rem;
      }

      .footer-right {
        justify-content: flex-end;
      }

      .save-indicator {
        gap: 0.35rem;
        display: flex;
        align-items: center;
        color: var(--calendaria-ui-success);
        font-size: var(--font-size-13);

        &[data-state='saving'] {
          color: var(--calendaria-ui-accent);
        }
      }

      .footer-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.2;
      }

      .module-name {
        font-weight: 600;
        font-size: var(--font-size-14);
      }

      .version-link {
        font-size: var(--font-size-13);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .social-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.25rem;
        color: var(--calendaria-ui-text-dim);
        font-size: var(--font-size-14);
        text-decoration: none;
      }
    }

    nav.sheet-tabs {
      grid-column: 1;
      grid-row: 1;
      min-height: 0;
      overflow-y: auto;
    }

    section.tab {
      grid-column: 2;
      grid-row: 1;
      display: none;
      min-width: 0;
      padding: 1rem;
      overflow-y: auto;

      &.active {
        gap: 1rem;
        display: flex;
        flex-direction: column;
      }
    }

    .section-hint {
      margin-top: -0.25rem;
      margin-bottom: 0.5rem;

      &.success {
        color: var(--calendaria-ui-success);

        i {
          margin-right: 0.25rem;
        }
      }
    }

    .info-box {
      gap: 0.75rem;
      display: flex;
      align-items: flex-start;
      padding: 0.75rem 1rem;
      border-left: 0.1875rem solid var(--calendaria-ui-accent);
      border-radius: 0.25rem;
      background: var(--calendaria-ui-surface-50);

      i {
        margin-top: 0.125rem;
        color: var(--calendaria-ui-accent);
        font-size: var(--font-size-14);
      }

      p {
        margin: 0;
        font-size: var(--font-size-13);
      }
    }

    .welcome-section {
      flex-shrink: 0;

      .welcome-content {
        .welcome-text {
          margin: 0 0 0.75rem;
          font-size: var(--font-size-13);
          line-height: 1.5;

          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
    }

    .recent-settings {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;

      .recent-list {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
      }

      .recent-item {
        gap: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.1rem 0.25rem;
        border-radius: 0.25rem;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.15s ease;

        &:hover {
          background: rgb(128 128 128 / 15%);
        }

        .recent-time {
          white-space: nowrap;
        }
      }
    }

    .button-row {
      gap: 0.5rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      &.app-controls {
        > button:first-child {
          flex: 1;
        }

        > button:nth-child(2),
        > button:nth-child(3) {
          flex: 2;
        }
      }

      button,
      a.link-button {
        gap: 0.5rem;
        display: inline-flex;
        align-items: center;
        width: fit-content;
        border: 0.0625rem solid var(--button-border-color);
        border-radius: 0.25rem;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        background: var(--button-background-color);

        &:hover {
          background: var(--button-hover-background-color);
        }

        i {
          width: 1rem;
          font-size: var(--font-size-14);
          text-align: center;
        }
      }
    }

    .time-jumps-grid {
      gap: 0.25rem 0.5rem;
      grid-template-columns: 1fr repeat(4, 4.5rem);
      display: grid;
      align-items: start;

      .time-jumps-header {
        display: contents;

        span {
          font-weight: 600;
          line-height: 1.2;
          text-align: center;

          &:first-child {
            text-align: left;
          }
        }
      }

      .time-jumps-row {
        display: contents;

        input[type='number'] {
          width: 100%;
          text-align: center;
        }
      }
    }

    .form-group .form-fields:has(input[type='range']) {
      input[type='range'] {
        flex: 1;

        &::-webkit-slider-runnable-track {
          height: 0.375rem;
        }

        &::-moz-range-track {
          height: 0.375rem;
        }
      }

      .input-suffix {
        flex: none;
      }
    }

    .categories-list {
      gap: 0.5rem;
      display: flex;
      flex-direction: column;
      margin-bottom: 0.75rem;
    }

    .category-row {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.25rem 0;

      .category-icon-display {
        --button-background-color: transparent;
        --button-border-color: transparent;
        --button-hover-background-color: transparent;
        --button-hover-border-color: transparent;

        flex: 0 0 2rem;
        width: 2rem;
        padding: 0.25rem;
        font-size: 1.25em;
        text-align: center;

        &:hover {
          --button-hover-text-color: currentcolor;

          opacity: 0.8;
        }

        &:focus {
          outline: none;
          box-shadow: none;
        }
      }

      input[type='text'] {
        flex: 1;
      }

      .icon-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2rem;
        height: 2rem;
        padding: 0;

        &.danger:hover {
          color: var(--atlas-title-text, rgb(255 255 255));
          background: var(--calendaria-ui-error);
        }
      }
    }

    .empty-message {
      font-style: italic;
      font-size: var(--font-size-13);
    }

    .add-button {
      gap: 0.5rem;
      display: inline-flex;
      align-items: center;
      width: fit-content;
      margin: 0 auto;
      padding: 0.5rem 1rem;
      border: 0.0625rem solid var(--button-border-color);
      border-radius: 0.25rem;
      cursor: pointer;
      background: var(--button-background-color);

      &:hover {
        background: var(--button-hover-background-color);
      }
    }

    .about-header {
      gap: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 0.75rem;
    }

    .module-info {
      gap: 0.375rem;
      display: flex;
      flex-direction: column;

      .info-row {
        gap: 0.5rem;
        display: flex;
        font-size: var(--font-size-14);

        .info-label {
          font-weight: 500;
        }
      }
    }

    .kofi-button {
      gap: 0.5rem;
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 0.75rem;
      border-radius: 0.375rem;
      color: rgb(255 255 255);
      font-weight: 500;
      font-size: var(--font-size-14);
      text-decoration: none;
      white-space: nowrap;
      background: rgb(255 94 91);
      transition: background 0.15s ease;

      &:hover {
        color: rgb(255 255 255);
        background: rgb(229 69 66);
      }
    }

    .custom-theme-editor {
      margin-top: 1rem;
    }

    .color-table-header {
      gap: 0.5rem;
      grid-template-columns: 1fr 9rem 2.25rem;
      display: grid;
      align-items: center;
      padding: 0.25rem 0.5rem;
      border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      font-size: var(--font-size-13);
      text-align: center;
    }

    .color-table-row {
      gap: 0.5rem;
      grid-template-columns: 1fr 9rem 2.25rem;
      display: grid;
      align-items: center;
      padding: 0.375rem 0.5rem;
      border-radius: 0.25rem;

      &:hover {
        background: rgb(128 128 128 / 15%);
      }
    }

    .color-category-section {
      margin-bottom: 1rem;
    }

    .color-category-header {
      padding: 0.375rem 0.5rem;
      border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      color: var(--calendaria-ui-text-dim);
      font-weight: 600;
      font-size: var(--font-size-11);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .col-usage {
      line-height: 1.3;
    }

    button.col-reset {
      justify-self: center;
    }

    .theme-delete-btn:hover {
      color: var(--calendaria-ui-error, var(--atlas-error, rgb(244 67 54)));
    }

    .format-location {
      border-radius: 0.25rem;

      > .form-group {
        margin-bottom: 0.5rem;

        label {
          font-weight: 500;
        }
      }
    }

    .format-row {
      gap: 1rem;
      display: flex;
      flex-wrap: wrap;
    }

    .format-column {
      gap: 0.375rem;
      display: flex;
      flex: 1;
      flex-direction: column;
      min-width: 12.5rem;

      select {
        width: 100%;
      }

      .format-custom-input {
        width: 100%;

        &.hidden {
          display: none;
        }

        &.invalid {
          border-color: var(--atlas-error, rgb(244 67 54));
          outline: 0.0625rem solid var(--atlas-error, rgb(244 67 54));
        }
      }

      .format-preview {
        font-style: italic;

        &:empty {
          display: none;
        }

        &.error {
          color: var(--atlas-error, rgb(244 67 54));
        }
      }
    }

    .permissions-table {
      gap: 0.5rem 1rem;
      grid-template-columns: 1fr 4.5rem 4.5rem 4.5rem;
      display: grid;
      align-items: center;
    }

    .permissions-header {
      display: contents;

      span {
        padding: 0.25rem 0;
        font-weight: 500;
        font-size: var(--font-size-13);
        text-align: center;
      }

      span:first-child {
        text-align: left;
      }

      &::after {
        grid-column: 1 / -1;
        margin-bottom: 0.25rem;
        border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
        content: '';
      }
    }

    .permissions-list {
      display: contents;
    }

    .permission-row {
      display: contents;

      label.permission-name {
        padding: 0.25rem 0;
        font-weight: 500;
      }

      input[type='checkbox'] {
        justify-self: center;
      }

      .hint {
        grid-column: 1 / -1;
        padding-bottom: 0.5rem;
        border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      }

      &:last-child .hint {
        padding-bottom: 0;
        border-bottom: none;
      }
    }

    .form-group.disabled {
      opacity: 0.4;
      pointer-events: none;
    }

    .season-triggers-list,
    .moon-triggers-list {
      gap: 0.5rem;
      display: flex;
      flex-direction: column;
      margin-bottom: 1rem;
    }

    .trigger-header {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.25rem 0;
      font-weight: 500;
      font-size: var(--font-size-13);

      span:first-child {
        flex: 0 0 10rem;
      }

      span:nth-child(2) {
        flex: 1;
      }

      span:last-child {
        width: 1.75rem;
      }
    }

    .season-trigger-row,
    .moon-trigger-row {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.25rem 0;
    }

    .season-trigger-row {
      > select:first-child {
        flex: 0 0 10rem;
      }

      > select:nth-child(2) {
        flex: 1;
      }
    }

    .moon-trigger-row {
      > select:first-child {
        flex: 0 0 7.5rem;
      }

      > select:nth-child(2) {
        flex: 0 0 7.5rem;
      }

      > select:nth-child(3) {
        flex: 1;
      }
    }

    .moon-triggers-list .trigger-header {
      span:first-child {
        flex: 0 0 7.5rem;
      }

      span:nth-child(2) {
        flex: 0 0 7.5rem;
      }

      span:nth-child(3) {
        flex: 1;
      }
    }

    .fieldset-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;

      > .hint {
        flex: 1;
        margin: 0;
      }
    }

    .form-group .form-fields > .add-button {
      margin-right: 0;
    }

    .add-trigger-row {
      gap: 0.5rem;
      display: flex;
      align-items: center;

      select {
        min-width: 6.25rem;
      }
    }

    .toolbar-apps-checkboxes {
      gap: 0.5rem;
      display: flex;
      margin-right: 0.1875rem;

      .checkbox-inline {
        gap: 0.25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;

        input[type='checkbox'] {
          margin: 0;
        }

        i {
          font-size: var(--font-size-14);
        }
      }
    }
  }

  &.preset-manager {
    .window-content {
      padding: 0;
    }

    fieldset legend {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      font-size: var(--font-size-15);
    }

    .reset-section {
      opacity: 0.6;
      height: 1.25rem;
      margin-right: 0.125rem;
      margin-left: auto;
      padding: 0;
      border: none;
      font-size: var(--font-size-14);
      cursor: pointer;
      background: none;

      &:hover {
        opacity: 1;
        color: var(--atlas-error, rgb(244 67 54));
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }

    .preset-manager-layout {
      display: flex;
      height: calc(100% - 3rem);
      overflow: hidden;
    }

    .preset-list-panel {
      gap: 0;
      display: flex;
      flex-direction: column;
      width: max-content;
      min-width: 8rem;
      max-width: 8rem;
      padding: 0;
      border-right: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
    }

    .preset-list {
      gap: 0;
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow-y: auto;
    }

    .restore-presets-link {
      padding: 0.375rem 0.5rem;
      border: none;
      color: var(--atlas-link, rgb(100 160 255));
      font-size: var(--font-size-11);
      cursor: pointer;
      background: none;

      &:hover {
        color: var(--atlas-link, rgb(100 160 255));
      }

      &:focus,
      &:focus-visible,
      &:active {
        border: none;
        outline: none;
        box-shadow: none;
      }
    }

    .preset-list-item {
      gap: 0.5rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 2rem;
      padding: 0 0.5rem;
      border-left: 0.1875rem solid transparent;
      border-radius: 0;
      font-size: var(--font-size-13);
      text-align: left;
      cursor: pointer;

      &:hover {
        background: rgb(0 0 0 / 5%);
      }

      &.active {
        border-left-color: var(--atlas-accent, rgb(168 144 96));
        background: color-mix(in srgb, var(--atlas-accent, rgb(168 144 96)) 40%, transparent);
      }

      .preset-icon-btn {
        flex: 0 0 auto;
        width: 1.25em;
        padding: 0;
        border: none;
        outline: none;
        font-size: 1em;
        text-align: center;
        cursor: pointer;
        background: none;
        box-shadow: none;
      }

      .preset-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .preset-editor-panel {
      flex: 1;
      padding: 1rem;
      overflow-y: auto;

      fieldset {
        margin-bottom: 0.75rem;
      }

      .preset-icon-btn {
        &,
        &:focus,
        &:focus-visible,
        &:active {
          border: none;
          outline: none;
          box-shadow: none;
        }
      }

      prose-mirror {
        display: flex;
        flex-direction: column;

        .editor-container {
          min-height: 15rem;
          overflow-y: auto;
        }
      }

      .empty-editor {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-style: italic;
      }
    }

    .preset-manager-footer {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      border-top: 0.0625rem solid var(--calendaria-ui-border);
      background: var(--calendaria-ui-surface);

      .footer-left {
        gap: 0.5rem;
        display: flex;
        flex-shrink: 0;

        button {
          white-space: nowrap;
        }
      }

      .save-btn {
        gap: 0.5rem;
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 1.25rem;
        white-space: nowrap;
      }
    }

    .open-manager-btn {
      gap: 0.5rem;
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
    }
  }
}

.calendaria-settings-search {
  display: flex;
  z-index: 10000;
  position: fixed;
  flex-direction: column;
  max-height: 30rem;
  border-radius: 0.25rem;
  overflow: hidden auto;
  background: var(--calendaria-ui-surface-dim);
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 20%);

  .search-result {
    gap: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border: none;
    border-bottom: 0.0625rem solid var(--calendaria-ui-border);
    color: var(--atlas-title-text, rgb(255 255 255));
    text-align: left;
    cursor: pointer;
    background: transparent;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      color: var(--atlas-title-text, rgb(255 255 255));
      background: var(--calendaria-ui-border);
    }

    .result-label {
      flex: 1;
      overflow: hidden;
      font-size: var(--font-size-12);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .result-tab {
      flex-shrink: 0;
      font-size: var(--font-size-10);
    }
  }

  .no-results {
    padding: 0.75rem;
    font-style: italic;
    font-size: var(--font-size-12);
    text-align: center;
  }
}

.theme-light {
  .calendaria-settings-search {
    border: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));

    .search-result:hover {
      background: rgb(0 0 0 / 8%);
    }
  }

  .calendaria {
    &.settings-panel {
      .settings-footer {
        border-top-color: var(--atlas-border-light, rgb(58 58 58));
        background: var(--atlas-bg-lighter, rgb(42 42 42));
      }

      .settings-footer .save-indicator {
        color: rgb(21 128 61);
      }

      .recent-settings .recent-item:hover {
        background: rgb(0 0 0 / 8%);
      }
    }
  }
}

.calendaria {
  &.sun-dial {
    --dial-sun-size: 0.9375rem;
    --dial-size: 18.75rem;

    z-index: 100;
    position: fixed;
    opacity: var(--calendaria-sundial-idle-opacity, 0.4);
    transition: opacity 0.3s ease-in-out 2s;

    &:hover {
      opacity: 1;
      transition-delay: 0s;
    }

    .container {
      position: relative;
      width: var(--dial-size);
      height: var(--dial-size);
      cursor: grab;

      &:active {
        cursor: grabbing;
      }
    }

    .sky {
      isolation: isolate;
      position: relative;
      width: 100%;
      height: 100%;
      border: 0.1875rem solid rgb(201 170 113);
      border-radius: 50%;
      overflow: hidden;
    }

    .scene-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .markers {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .handle-container {
      position: absolute;
      top: 0;
      left: 50%;
      width: 0;
      height: 50%;
      pointer-events: none;
      transform-origin: bottom center;
    }

    .handle {
      clip-path: polygon(50% 100%, 0% 0%, 50% 15%, 100% 0%);
      position: absolute;
      top: -0.625rem;
      left: -0.75rem;
      width: 1.5rem;
      height: 1.875rem;
      cursor: grab;
      pointer-events: all;
      background: rgb(255 100 0);
      box-shadow:
        0 0 0.625rem rgb(0 0 0 / 50%),
        0 0 0.3125rem rgb(255 100 0 / 50%);
      filter: drop-shadow(0 0 0.125rem rgb(255 255 255));

      &:hover {
        background: rgb(255 132 51);
        box-shadow:
          0 0 0.9375rem rgb(0 0 0 / 70%),
          0 0 0.5rem rgb(255 100 0 / 80%);
        transform: scale(1.1);
      }

      &:active {
        cursor: grabbing;
        transform: scale(1.05);
      }
    }

    .time-display {
      position: absolute;
      top: 50%;
      left: 50%;
      text-align: center;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .day-offset {
      color: rgb(255 100 0);
      font-weight: bold;
      font-size: calc(var(--dial-size) * 0.047);
      line-height: 1;
      font-family: 'Modesto Condensed', 'Palatino Linotype', serif;
      text-align: center;
      text-shadow: 0 0 0.5rem rgb(255 100 0 / 80%);
      min-height: calc(var(--dial-size) * 0.053);
    }

    .time {
      width: calc(var(--dial-size) * 0.45);
      padding: 0;
      border: none;
      outline: none;
      color: rgb(255 100 0);
      font-weight: bold;
      font-size: calc(var(--dial-size) * 0.12);
      height: auto;
      line-height: 1.2;
      font-family: 'Modesto Condensed', 'Palatino Linotype', serif;
      text-align: center;
      text-shadow: 0 0 0.625rem rgb(255 100 0 / 80%);
      cursor: text;
      background: transparent;
      pointer-events: all;

      &:focus {
        text-shadow: 0 0 0.9375rem rgb(255 100 0);
      }
    }

    .dial-controls {
      display: flex;
      gap: 0.25rem;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: all;
    }

    .container:hover .dial-controls {
      opacity: 1;
    }

    .dial-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--dial-size) * 0.09);
      height: calc(var(--dial-size) * 0.09);
      padding: 0;
      border: none;
      border-radius: 50%;
      background: rgb(0 0 0 / 40%);
      color: rgb(255 100 0);
      font-size: calc(var(--dial-size) * 0.04);
      cursor: pointer;
      transition: background 0.15s ease;
      box-shadow: none;

      &:hover,
      &:focus {
        background: rgb(0 0 0 / 60%);
        color: rgb(255 132 51);
        border: none;
        box-shadow: none;
      }

      &:active {
        border: none;
        box-shadow: none;
      }

      &.clock-locked {
        color: rgb(180 180 180);
      }
    }

    .resize-handle {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 1rem;
      height: 1rem;
      cursor: nwse-resize;
      opacity: 0;
      transition: opacity 0.2s;

      &::after {
        content: '';
        position: absolute;
        bottom: 0.125rem;
        right: 0.125rem;
        width: 0.5rem;
        height: 0.5rem;
        border-right: 0.125rem solid rgb(201 170 113);
        border-bottom: 0.125rem solid rgb(201 170 113);
      }
    }

    .container:hover .resize-handle {
      opacity: 0.6;
    }

    .resize-handle:hover {
      opacity: 1 !important;
    }
  }
}

:root {
  --calendaria-day-gap: 0.125rem;
  --calendaria-day-size: 5.3125rem;
  --calendaria-highlight: rgb(255 255 255 / 20%);
  --calendaria-note-badge-bg: rgb(225 180 56);
  --calendaria-note-badge-text: rgb(0 0 0);
  --calendaria-ui-accent: var(--color-warm-1, rgb(238 155 58));
  --calendaria-ui-border: var(--color-cool-4, rgb(48 40 49));
  --calendaria-ui-error: var(--color-level-error, rgb(206 7 7));
  --calendaria-ui-success: var(--color-level-success, rgb(38 178 49));
  --calendaria-ui-surface: var(--color-cool-5-75, rgb(11 10 19 / 75%));
  --calendaria-ui-surface-50: var(--color-cool-5-50, rgb(11 10 19 / 50%));
  --calendaria-ui-surface-dim: var(--color-cool-5, rgb(11 10 19));
  --calendaria-ui-text-dim: var(--color-text-light-6, rgb(153 153 153));
  --calendaria-week-day-width: 6.25rem;
  --calendaria-week-header-height: 1.5rem;
  --calendaria-week-hour-height: 1.5rem;
  --calendaria-week-hour-width: 1.5625rem;
  --calendaria-weekday-height: 1.75rem;
  --calendaria-year-cell-padding: 0.5rem;
  --calendaria-year-gap: 0.75rem;
  --calendaria-year-header-height: 2rem;
  --calendaria-year-month-gap: 0.25rem;
  --calendaria-year-month-height: 1.5rem;
  --calendaria-year-month-width: 3.125rem;
}

.theme-light {
  --calendaria-highlight: rgb(255 255 255 / 40%);
  --calendaria-note-badge-bg: rgb(225 180 56);
  --calendaria-note-badge-text: rgb(0 0 0);
}

.calendaria {
  &.time-keeper {
    opacity: var(--calendaria-timekeeper-idle-opacity, 0.4);
    position: fixed;
    width: 12.5rem;
    padding: 0.375rem;
    border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
    border-radius: 0.375rem;
    pointer-events: auto;
    background: color-mix(in srgb, var(--atlas-bg, rgb(31 31 31)) 95%, transparent);
    box-shadow: 0 0.125rem 0.5rem var(--atlas-shadow-color, rgb(0 0 0 / 40%));
    transition: opacity 0.3s ease-in-out 2s;

    &:hover {
      opacity: 1;
      transition-delay: 0s;

      .controls {
        opacity: 1;
        max-height: 1.875rem;
        margin-top: 0.375rem;
      }

      .readonly {
        opacity: 1;
        max-height: 1.875rem;
        margin-top: 0.375rem;
        padding: 0.25rem 0;
      }
    }

    &.sticky-tray {
      opacity: 1;

      .controls {
        opacity: 1;
        max-height: 1.875rem;
        margin-top: 0.375rem;
      }

      .readonly {
        opacity: 1;
        max-height: 1.875rem;
        margin-top: 0.375rem;
        padding: 0.25rem 0;
      }
    }

    .time-display.near-snap {
      border-color: var(--atlas-primary, rgb(74 144 226));
      box-shadow:
        0 0 0.625rem var(--atlas-shadow-color, rgb(0 0 0 / 40%)),
        0 0 0.5rem var(--atlas-primary, rgb(74 144 226));
      animation: calendaria-wobble 0.15s ease-in-out infinite;
    }

    .time-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: grab;

      &:active {
        cursor: grabbing;
      }

      &:hover .stopwatch-btn {
        opacity: 1;
        pointer-events: auto;
      }
    }

    .time-wrapper {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;

      &:hover {
        .play-btn {
          opacity: 1;
          pointer-events: auto;
        }

        .time {
          opacity: 0.3;
        }
      }
    }

    .time {
      color: var(--atlas-text, rgb(224 224 224));
      font-weight: bold;
      font-size: 1.25rem;
      line-height: 1.2;
      font-family: monospace;
      letter-spacing: 0.0625rem;
      transition: opacity 0.15s ease;
    }

    .play-btn {
      display: flex;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      justify-content: center;
      align-items: center;
      padding: 0.25rem;
      border: none;
      color: var(--atlas-text-dim, rgb(153 153 153));
      cursor: pointer;
      pointer-events: none;
      background: transparent;
      transition:
        opacity 0.15s ease,
        color 0.15s ease;
      transform: translate(-50%, -50%);

      i {
        font-size: 1.25rem;
      }

      &:hover {
        color: var(--atlas-text, rgb(224 224 224));
      }
    }

    .date {
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: 0.6875rem;
      line-height: 1.2;
    }

    .controls {
      gap: 0.25rem;
      display: flex;
      opacity: 0;
      justify-content: center;
      align-items: center;
      max-height: 0;
      overflow: hidden;
      transition:
        opacity 0.2s ease-out,
        max-height 0.2s ease-out;
    }

    .time-btn {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      height: 1.5rem;
      padding: 0;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.1875rem;
      color: var(--atlas-text, rgb(224 224 224));
      cursor: pointer;
      background: var(--atlas-button-bg, rgb(58 58 58));
      transition: background 0.15s ease;

      &:hover {
        background: var(--atlas-button-hover, rgb(74 74 74));
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }

      i {
        font-size: 0.625rem;
      }
    }

    .increment-select {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      box-sizing: border-box;
      width: 3.25rem;
      min-width: 3.25rem;
      height: 1.75rem;
      margin: 0;
      padding: 0 0.375rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.1875rem;
      color: var(--atlas-text, rgb(224 224 224));
      font-size: 0.75rem;
      line-height: calc(1.75rem - 0.125rem);
      text-align: center;
      cursor: pointer;
      background: var(--atlas-button-bg, rgb(58 58 58));
      background-image: none;

      &:hover {
        background: var(--atlas-button-hover, rgb(74 74 74));
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }

    .readonly {
      gap: 0.25rem;
      display: flex;
      opacity: 0;
      justify-content: center;
      align-items: center;
      max-height: 0;
      padding: 0;
      overflow: hidden;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: 0.6875rem;
      transition:
        opacity 0.2s ease-out,
        max-height 0.2s ease-out,
        margin-top 0.2s ease-out,
        padding 0.2s ease-out;

      i {
        font-size: 0.6875rem;
      }
    }

    .stopwatch-btn {
      display: flex;
      opacity: 0;
      position: absolute;
      right: -4rem;
      justify-content: center;
      align-items: center;
      width: 1.25rem;
      height: 1.25rem;
      padding: 0;
      border: none;
      border-radius: 0.25rem;
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: 0.75rem;
      cursor: pointer;
      pointer-events: none;
      background: transparent;
      transition:
        opacity 0.15s ease,
        color 0.15s ease;

      &:hover {
        color: var(--atlas-text, rgb(224 224 224));
      }
    }
  }

  &.stopwatch {
    --stopwatch-size: 12.5rem;

    opacity: var(--calendaria-stopwatch-idle-opacity, 1);
    position: fixed;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;

    &:hover .resize-handle {
      opacity: 1;
    }

    .wrapper {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      width: var(--stopwatch-size);
    }

    .face {
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: var(--stopwatch-size);
      height: var(--stopwatch-size);
      border: none;
      border-radius: 50%;
      cursor: grab;
      background: transparent;

      &:active {
        cursor: grabbing;
      }
    }

    .stopwatch-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      pointer-events: none;
    }

    .display {
      display: flex;
      z-index: 10;
      position: absolute;
      top: 50%;
      left: 50%;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    .time {
      color: var(--atlas-text, rgb(224 224 224));
      font-weight: bold;
      font-size: calc(var(--stopwatch-size) * 0.06);
      line-height: 1;
      font-family: monospace;
      letter-spacing: 0.0313rem;
      user-select: none;
      pointer-events: none;

      .ms {
        font-size: 0.7em;
      }
    }

    .controls {
      gap: calc(var(--stopwatch-size) * 0.03);
      display: flex;
      position: absolute;
      bottom: 100%;
      left: 50%;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.125rem;
      pointer-events: auto;
      transform: translateX(-50%);
    }

    .sw-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: calc(var(--stopwatch-size) * 0.07);
      height: calc(var(--stopwatch-size) * 0.07);
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-size: calc(var(--stopwatch-size) * 0.042);
      cursor: pointer;
      pointer-events: auto;
      transition:
        color 0.15s ease,
        transform 0.1s ease;

      &:hover:not(.disabled) {
        color: var(--atlas-text, rgb(224 224 224));
        transform: scale(1.2);
      }

      &.disabled {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
      }

      &.sw-notification.active {
        color: var(--atlas-primary, rgb(74 144 226));
      }

      &.sw-start {
        color: var(--atlas-success, rgb(76 175 80));
      }

      &.sw-pause {
        color: var(--atlas-warning, rgb(255 193 7));
      }

      &.sw-reset {
        color: var(--atlas-error, rgb(244 67 54));
      }

      &.sw-mode {
        color: var(--atlas-primary, rgb(74 144 226));
      }
    }

    .laps {
      width: var(--stopwatch-size);
      margin-top: 1.5625rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.5rem;
      background: var(--atlas-bg, rgb(31 31 31));
      box-shadow: 0 0.125rem 0.375rem var(--atlas-shadow-color, rgb(0 0 0 / 40%));
    }

    .laps-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.25rem 0.5rem;
      border-bottom: 0.0625rem solid var(--atlas-border-light, rgb(58 58 58));
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-weight: 600;
      font-size: 0.5625rem;
      text-transform: uppercase;

      .clear-laps {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0.875rem;
        height: 0.875rem;
        padding: 0;
        border: none;
        border-radius: 0.1875rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: 0.5rem;
        cursor: pointer;
        background: transparent;
        transition: color 0.15s ease;

        &:hover {
          color: var(--atlas-error, rgb(244 67 54));
        }
      }
    }

    .lap-list {
      max-height: 3.75rem;
      margin: 0;
      padding: 0.25rem 0.5rem;
      overflow-y: auto;
      list-style: none;
    }

    .lap {
      display: flex;
      justify-content: space-between;
      padding: 0.125rem 0;
      color: var(--atlas-text, rgb(224 224 224));
      font-size: 0.625rem;
      font-family: monospace;

      .lap-index {
        color: var(--atlas-text-dim, rgb(153 153 153));
      }
    }

    .resize-handle {
      opacity: 0;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0.875rem;
      height: 0.875rem;
      cursor: nwse-resize;
      transition: opacity 0.15s ease;

      &::after {
        position: absolute;
        bottom: 0.125rem;
        right: 0.125rem;
        width: 0.5rem;
        height: 0.5rem;
        border-bottom: 0.125rem solid var(--atlas-text-dim, rgb(153 153 153));
        border-right: 0.125rem solid var(--atlas-text-dim, rgb(153 153 153));
        content: '';
      }

      &:hover::after {
        border-color: var(--atlas-primary, rgb(74 144 226));
      }
    }
  }
}

.calendaria {
  .day-tooltip {
    line-height: 1.4;
    text-align: center;

    .date {
      margin-bottom: 0.125rem;
      font-size: 0.9rem;
    }

    .festival {
      color: rgb(74 158 255);
      font-size: 0.85rem;
    }

    .season {
      opacity: 0.7;
      font-size: 0.8rem;
    }

    .sun {
      opacity: 0.7;
      margin-top: 0.25rem;
      font-size: 0.8rem;

      i {
        opacity: 0.7;
        margin: 0 0.125rem;
      }

      .fa-sun {
        color: rgb(251 191 36);
      }

      .fa-moon {
        color: rgb(167 139 250);
      }
    }

    .equivalent-dates {
      margin-top: 0.25rem;
      padding-top: 0.25rem;
      border-top: 0.0625rem solid rgb(255 255 255 / 10%);
      text-align: left;
    }

    .equivalent-date {
      opacity: 0.7;
      font-size: 0.75rem;
      line-height: 1.5;

      i {
        opacity: 0.6;
        margin-right: 0.25rem;
      }
    }

    .tooltip-notes {
      margin-top: 0.25rem;
      padding-top: 0.25rem;
      border-top: 0.0625rem solid rgb(255 255 255 / 10%);
      text-align: left;
    }

    .tooltip-note {
      gap: 0.25rem;
      display: flex;
      align-items: center;
      opacity: 0.7;
      font-size: 0.75rem;
      line-height: 1.5;

      &.festival {
        font-weight: 600;
      }

      &.more {
        opacity: 0.6;
        font-style: italic;
      }
    }

    .tooltip-note-icon {
      flex-shrink: 0;
      width: 0.75rem;
      height: 0.75rem;
      font-size: 0.75rem;
      text-align: center;
    }

    img.tooltip-note-icon {
      object-fit: cover;
      border-radius: 50%;
    }
  }

  .weather-tooltip {
    line-height: 1.4;

    .header {
      margin-bottom: 0.125rem;
      font-size: 0.9rem;
    }

    .row {
      opacity: 0.7;
      font-size: 0.8rem;

      i {
        opacity: 0.7;
        width: 0.9em;
        margin-right: 0.25rem;
        text-align: center;
      }
    }
  }
}

.calendaria-moon-picker {
  z-index: 100001;
  position: fixed;
  padding: 0.75rem;
  border: 0.0625rem solid var(--atlas-border, rgb(58 58 94));
  border-radius: 0.625rem;
  cursor: grab;
  background: var(--atlas-bg, rgb(26 26 46));
  box-shadow: 0 0.25rem 1.25rem rgb(0 0 0 / 60%);

  .radial {
    position: relative;
    width: var(--radial-size);
    height: var(--radial-size);
    margin: 0.5rem auto;
  }

  .radial-item {
    --angle: calc(360deg / var(--moon-count) * var(--moon-index));
    --radius: calc(var(--radial-size) / 2 - 1rem);

    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s ease;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1));

    &:hover {
      transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1)) scale(1.1);
    }

    &.selected {
      .radial-icon {
        outline: 0.125rem solid var(--atlas-primary, rgb(123 104 238));
        outline-offset: 0.125rem;
      }

      .name {
        margin-bottom: 0.25rem;
        color: var(--atlas-primary, rgb(123 104 238));
      }
    }
  }

  .radial-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.1875rem;
    border-radius: 50%;
    background: var(--atlas-bg-hover, rgb(40 40 70));
    box-shadow: 0 0.125rem 0.375rem rgb(0 0 0 / 40%);

    &.tinted {
      background-color: color-mix(in srgb, var(--moon-color, transparent) 50%, rgb(40 40 70));

      img {
        mix-blend-mode: multiply;
        filter: brightness(1.2) contrast(1.1);
      }
    }

    img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }

  .name {
    color: var(--atlas-text, rgb(224 224 224));
    font-weight: 500;
    font-size: var(--font-size-10, 0.625rem);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
}

.calendaria {
  &.weather-picker {
    &.standard-form {
      gap: 0;
    }

    .content {
      gap: 0.75rem;
      display: flex;
      flex-direction: column;
      max-height: 70vh;
      padding-left: 0.25rem;
      overflow-y: auto;
    }

    .zone-info-bar {
      padding: 0.5rem 0.75rem;
      border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      border-radius: 0.25rem;
      background: var(--atlas-bg-lighter, rgb(42 42 42));
    }

    .period-selector {
      gap: 0.25rem;
      display: flex;
      padding: 0 0.25rem;

      .period-tab {
        gap: 0.35rem;
        display: flex;
        opacity: 0.6;
        flex: 1;
        justify-content: center;
        align-items: center;
        padding: 0.35rem 0.5rem;
        border: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
        border-radius: 0.25rem;
        font-size: var(--font-size-11);
        cursor: pointer;
        background: var(--atlas-bg-lighter, rgb(42 42 42));
        transition:
          opacity 0.15s,
          background 0.15s;

        &:hover {
          opacity: 0.85;
        }

        &.active {
          opacity: 1;
          border-color: var(--atlas-accent, rgb(168 144 96));
          background: color-mix(in srgb, var(--atlas-accent, rgb(168 144 96)) 15%, transparent);
        }

        &.current span::after {
          font-size: 0.5rem;
          vertical-align: super;
          content: ' ●';
        }
      }
    }

    .columns {
      gap: 0.25rem;
      display: flex;
      min-height: 0;
      padding-bottom: 0.75rem;
    }

    .presets {
      gap: 0.75rem;
      display: flex;
      flex: 0 0 fit-content;
      flex-direction: column;
      padding-left: 0.25rem;
      overflow-y: auto;
    }

    .details {
      gap: 0.25rem;
      display: flex;
      flex: 0 0 22rem;
      flex-direction: column;
      padding-right: 0.25rem;
      padding-left: 0.25rem;
      border-left: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      overflow-y: auto;

      .precip-intensity-label {
        flex: 0 0 auto;
        width: 4.5rem;
      }

      .save-as-preset-toggle {
        gap: 0.4rem;
        display: flex;
        align-items: center;
        margin-top: auto;
        padding-top: 0.5rem;
        color: var(--atlas-text-dim, rgb(153 153 153));
        font-size: var(--font-size-13);
        cursor: pointer;

        input[type='checkbox'] {
          margin: 0;
        }
      }
    }

    .category-header {
      display: block;
      margin: 0.5rem 0;
      padding-bottom: 0.25rem;
      border-bottom: 0.0625rem solid var(--atlas-border, rgb(74 74 74));
      color: var(--atlas-text-dim, rgb(153 153 153));
      font-weight: 600;
      font-size: var(--font-size-15);

      &:first-child {
        margin-top: 0;
      }
    }

    .weather-category {
      .weather-buttons {
        gap: 0.4rem;
        grid-template-columns: repeat(3, 1fr);
        display: grid;
      }
    }

    .weather-btn {
      gap: 0.4rem;
      display: flex;
      align-items: center;
      padding: 0.4rem 0.6rem;
      border: 0.0625rem solid color-mix(in srgb, var(--weather-color) 50%, transparent);
      border-radius: 0.25rem;
      color: var(--atlas-text, rgb(224 224 224));
      text-align: left;
      cursor: pointer;
      background: color-mix(in srgb, var(--weather-color) 20%, var(--atlas-bg-lighter, rgb(42 42 42)));
      transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;

      &:hover {
        border-color: var(--weather-color);
        background: color-mix(in srgb, var(--weather-color) 35%, var(--atlas-bg-lighter, rgb(42 42 42)));
        transform: translateY(-0.0625rem);
      }

      &:active {
        transform: translateY(0);
      }

      &.active {
        border-color: var(--weather-color);
        background: color-mix(in srgb, var(--weather-color) 40%, var(--atlas-bg-lighter, rgb(42 42 42)));
        box-shadow: 0 0 0 0.0625rem var(--weather-color);
      }

      &.zone-disabled {
        opacity: 0.4;
        order: 1;
      }

      i {
        flex-shrink: 0;
        width: 1rem;
        color: var(--weather-color);
        font-size: 0.9rem;
        text-align: center;
      }

      .weather-label {
        overflow: hidden;
        font-size: 0.8rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .footer {
      gap: 0.5rem;
      display: flex;
      padding-top: 0.5rem;
      border-top: 0.0625rem solid var(--atlas-border, rgb(74 74 74));

      .footer-btn {
        gap: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 1.5rem;
        border: none;
        border-radius: 0.25rem;
        color: var(--atlas-text-on-color, rgb(255 255 255));
        font-weight: 500;
        font-size: 0.9rem;
        cursor: pointer;
        transition: opacity 0.15s ease;

        &:hover {
          opacity: 0.85;
        }

        i {
          font-size: 1rem;
        }
      }

      .clear-btn {
        flex-shrink: 0;
        background: var(--atlas-error, rgb(244 67 54));
      }

      .random-btn {
        flex-shrink: 0;
        background: var(--atlas-primary, rgb(74 144 226));
      }

      .save-btn {
        flex: 1;
        background: var(--atlas-success, rgb(76 175 80));
      }
    }
  }

  &.weather-editor {
    footer.form-footer {
      grid-column: 1 / -1;
      grid-row: 2;
      padding: 0.5rem 1rem;
      border-top: 0.0625rem solid var(--calendaria-ui-border);
      background: var(--calendaria-ui-surface);

      button {
        flex: none;
        width: fit-content;

        &.primary {
          flex: 1;
        }
      }
    }

    .form-fields.range > i {
      flex: 0 0 0.5rem;
      text-align: center;
    }

    nav.sheet-tabs {
      min-width: 8.25rem;
      max-width: 8.25rem;
      overflow: hidden auto;
    }

    .no-preset-selected {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: var(--atlas-text-secondary, rgb(170 170 170));
      font-style: italic;
    }
  }

  .weather-wind,
  .weather-precip {
    opacity: 0.7;
    margin-left: 0.25rem;
    font-size: 0.8em;
  }

  .weather-wind {
    i {
      display: inline-block;
    }
  }
}