.hidden{
  display: none !important;
}input, textarea{
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  padding: 4px 6px;
}input, textarea, select, button{
  font: inherit;
}button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--sotido-motion-fast) ease,
    color var(--sotido-motion-fast) ease,
    opacity var(--sotido-motion-fast) ease,
    box-shadow var(--sotido-motion-fast) ease;
}button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active{
  box-shadow: none;
}.clickable{
  cursor: pointer;
}
/* ---------------- 2) Variables ---------------- */
:root{  --ev-tone-dark-rgb: 200, 200, 200;
  --ev-tone-light-rgb: 230, 230, 230;
  --ev-tone-rgb: var(--ev-tone-dark-rgb);
  --sotido-brand-telegram: #0088CC;
  --sotido-focus-top: 164px;
  --connector-edge-inset: 18px;

  /* базовые размеры для записей / отступов */
  --ENTRY_H: 30px;            /* высота записи (лист + таймлайн) */
  --ENTRY_V_PADDING: 0px;

  --ROW_GAP: 5px;

  /* историческая переменная — читает JS */
  --TIMELINE_LANE_H: var(--ENTRY_H);
  --TIMELINE_LANE_MID_H: 10px;
  --calendar-bg: var(--sotido-theme-background);
  --calendar-bg-image: none;
  --surface-loading-scrim: color-mix(in srgb, var(--sotido-theme-background) 5%, transparent);
  --skeleton-accent-glow: color-mix(in srgb, var(--sotido-theme-accent) 11%, transparent);
  --skeleton-sheen: color-mix(in srgb, var(--sotido-theme-surface-highest) 16%, transparent);

  /* Buttons */
  --sotido-web-border-subtle: color-mix(
    in srgb,
    var(--sotido-theme-text-primary) var(--sotido-alpha-web-border-subtle-percent),
    transparent
  );
  --sotido-web-secondary-control-fill: color-mix(
    in srgb,
    var(--sotido-theme-text-primary) var(--sotido-alpha-web-secondary-control-fill-dark-percent),
    transparent
  );
  --settings-icon-filter: invert(1);
  --sotido-header-bottom: 0px;
  --sotido-calendar-banner-scroll-spacer-h: 0px;
  --sotido-calendar-top-chrome-measured-h: 0px;
  --sotido-calendar-bottom-chrome-measured-h: 0px;
  --sotido-calendar-top-chrome-state-reserve: calc(env(safe-area-inset-top, 0px) + var(--sotido-recipe-calendar-top-chrome-stack-minimum-reserve));
  --sotido-calendar-bottom-chrome-min-reserve: max(
    var(--sotido-recipe-calendar-lower-chrome-stack-minimum-bottom-reserve),
    calc(var(--sotido-modepanel-min-h) + var(--sotido-recipe-calendar-lower-chrome-stack-horizontal-padding) * 2)
  );
  --sotido-calendar-top-content-inset: max(
    var(--sotido-calendar-top-chrome-measured-h, 0px),
    var(--sotido-calendar-top-chrome-state-reserve)
  );
  --sotido-calendar-top-scroll-runway-h: max(
    var(--sotido-calendar-top-chrome-measured-h, 0px),
    calc(
      env(safe-area-inset-top, 0px)
      + var(--sotido-recipe-calendar-top-chrome-stack-minimum-reserve)
    )
  );
  --sotido-calendar-bottom-content-inset: max(
    var(--sotido-calendar-bottom-chrome-measured-h, 0px),
    var(--sotido-calendar-bottom-chrome-min-reserve)
  );
  --sotido-modepanel-min-h: calc(72px + env(safe-area-inset-bottom, 0px));
  --sotido-modepanel-h: var(--sotido-modepanel-min-h);
  --sotido-modepanel-right: 0px;
  --sotido-modepanel-left: 0px;
  --sotido-story-strip-bottom: calc(max(var(--sotido-modepanel-h, 0px), var(--sotido-modepanel-min-h)) + 10px);
  --sotido-root-demo-floating-cta-top: calc(var(--sotido-header-bottom, 0px) + 48px);
  --sotido-root-demo-floating-cta-reserve: 0px;
  --sotido-root-demo-safe-top: calc(var(--sotido-header-bottom, 0px) + var(--sotido-root-demo-floating-cta-reserve, 0px));
}
html.sotido-calendar-top-chrome-compact{
  --sotido-calendar-top-chrome-state-reserve: calc(
    env(safe-area-inset-top, 0px)
    + var(--sotido-recipe-calendar-top-chrome-stack-compact-minimum-reserve)
  );
}
body.calendar-chrome-focus-mode{
  --sotido-calendar-top-content-inset: env(safe-area-inset-top, 0px);
  --sotido-calendar-top-scroll-runway-h: env(safe-area-inset-top, 0px);
  --sotido-calendar-bottom-chrome-min-reserve: calc(
    env(safe-area-inset-bottom, 0px)
    + var(--sotido-recipe-calendar-lower-chrome-stack-focus-toggle-size)
    + var(--sotido-recipe-calendar-lower-chrome-stack-bottom-padding)
    + var(--sotido-recipe-calendar-lower-chrome-stack-bottom-padding)
  );
  --sotido-calendar-bottom-content-inset: max(
    var(--sotido-calendar-bottom-chrome-measured-h, 0px),
    var(--sotido-calendar-bottom-chrome-min-reserve)
  );
}
body.feed-mode,
body.events-viewer-route,
body.discover-mode{
  --sotido-calendar-top-content-inset: max(
    var(--sotido-calendar-top-chrome-measured-h, 0px),
    calc(
      env(safe-area-inset-top, 0px)
      + var(--sotido-recipe-calendar-top-chrome-stack-compact-minimum-reserve)
    )
  );
}
:is(html[data-theme="light"], body.theme-light, html[data-theme="light"] body){
  --ev-tone-rgb: var(--ev-tone-light-rgb);

  --calendar-bg: var(--sotido-theme-background);
  --surface-loading-scrim: color-mix(in srgb, var(--sotido-theme-background) 5%, transparent);
  --skeleton-accent-glow: color-mix(in srgb, var(--sotido-theme-accent) 9%, transparent);
  --skeleton-sheen: color-mix(in srgb, var(--sotido-theme-surface-highest) 24%, transparent);
  --sotido-web-secondary-control-fill: color-mix(
    in srgb,
    var(--sotido-theme-text-primary) var(--sotido-alpha-web-secondary-control-fill-light-percent),
    transparent
  );
  --settings-icon-filter: invert(0);
}/* ---------------- 3) Base layout ---------------- */
html, body{
  overflow-anchor: none !important;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
}
html{
  overscroll-behavior: none;
  background-color: var(--calendar-bg, var(--sotido-theme-background));
}body{
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  background-color: var(--calendar-bg, var(--sotido-theme-background));
  background-image: var(--calendar-bg-image, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0;
  color: var(--sotido-theme-text-primary);
  position: relative;
}
html:has(body.calendar-mode-list:not(.discover-mode):not(.feed-mode)),
body.calendar-mode-list:not(.discover-mode):not(.feed-mode),
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent{
  overflow-anchor: auto !important;
}
.app-surface-stage,
.app-surface-host,
.app-shell,
#rootContent{
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.calendar-projection-host{
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  box-sizing: border-box;
}

.calendar-event-card{
  --calendar-event-time-column-width: var(--sotido-recipe-calendar-event-card-time-column-width24-hour);
}

.calendar-event-card[data-calendar-time-format="12-hour"]{
  --calendar-event-time-column-width: var(--sotido-recipe-calendar-event-card-time-column-width12-hour);
}

.calendar-event-card .ev-timewrap{
  box-sizing: border-box;
  width: var(--calendar-event-time-column-width);
}

.calendar-day-events-anchor.clickable.is-empty{
  cursor: pointer;
  transition:
    filter var(--sotido-motion-fast) ease,
    transform var(--sotido-motion-fast) ease,
    box-shadow var(--sotido-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine){
  .calendar-date-header.clickable:hover,
  .calendar-day-events-anchor.clickable.is-empty:hover{
    filter: brightness(1.14) saturate(1.08);
    transform: translateY(-1px) scale(1.01);
    box-shadow: inset 0 0 0 1px var(--sotido-theme-accent);
  }
}
.calendar-date-header.clickable:active,
.calendar-day-events-anchor.clickable.is-empty:active{
  transform: scale(0.99);
}
.calendar-date-header.clickable:focus-visible,
.calendar-day-events-anchor.clickable.is-empty:focus-visible{
  outline: 2px solid var(--sotido-theme-accent);
  outline-offset: 1px;
}
.calendar-month-header{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  font-weight: var(--sotido-font-weight-medium);
  cursor: default;
}
.calendar-month-header[data-calendar-month-toggle="1"],
.calendar-month-header[data-calendar-month-navigation-action]{
  cursor: pointer;
}
.calendar-month-header-label{
  display: inline-block;
  margin-bottom: var(--ROW_GAP);
  padding: var(--sotido-recipe-calendar-month-header-vertical-padding) var(--sotido-recipe-calendar-month-header-horizontal-padding);
  font-size: var(--sotido-recipe-calendar-month-header-font-size);
  line-height: var(--sotido-recipe-calendar-month-header-line-height);
  border-radius: 0 var(--sotido-recipe-calendar-month-header-trailing-radius) var(--sotido-recipe-calendar-month-header-trailing-radius) 0;
  background: var(--sotido-recipe-calendar-month-header-surface);
  color: var(--sotido-recipe-calendar-month-header-text);
  box-shadow: var(--sotido-shadow-surface);
  transition:
    background-color var(--sotido-motion-fast) ease,
    color var(--sotido-motion-fast) ease,
    transform var(--sotido-motion-fast) ease;
}
.calendar-month-header.is-current-month .calendar-month-header-label{
  background: var(--sotido-recipe-calendar-month-header-current-surface);
  color: var(--sotido-recipe-calendar-month-header-current-text);
}
.calendar-month-shell.is-month-collapsed > .calendar-month-body{
  height: var(--sotido-recipe-calendar-month-header-collapsed-preview-height);
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  clip-path: inset(0);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--sotido-recipe-calendar-month-header-collapsed-preview-opaque-stop),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--sotido-recipe-calendar-month-header-collapsed-preview-opaque-stop),
    transparent 100%
  );
}
.calendar-month-body[hidden]{
  display: none !important;
}
.calendar-month-shell.is-month-collapsing,
.calendar-month-shell.is-month-expanding{
  overflow: clip;
}
.calendar-month-shell.is-month-collapsing > .calendar-month-body,
.calendar-month-shell.is-month-expanding > .calendar-month-body{
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.calendar-month-navigation-group{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.calendar-month-navigation-shell{
  width: 100%;
  min-width: 0;
}
.calendar-month-navigation-shell .calendar-month-header-label{
  white-space: nowrap;
}
.calendar-month-header[data-loading="1"] .calendar-month-header-label{
  opacity: 0.56;
  cursor: progress;
}
@media (hover: hover) and (pointer: fine){
  .calendar-month-header[data-calendar-month-toggle="1"]:hover .calendar-month-header-label,
  .calendar-month-header[data-calendar-month-navigation-action]:hover .calendar-month-header-label{
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
}
.calendar-month-header[data-calendar-month-toggle="1"]:active .calendar-month-header-label,
.calendar-month-header[data-calendar-month-navigation-action]:active .calendar-month-header-label{
  transform: scale(0.98);
}
.calendar-month-header[data-calendar-month-toggle="1"]:focus-visible,
.calendar-month-header[data-calendar-month-navigation-action]:focus-visible{
  outline: 2px solid var(--sotido-theme-accent);
  outline-offset: 2px;
}
.calendar-month-picker-backdrop{
  display: grid;
  place-items: start center;
  padding:
    max(96px, calc(env(safe-area-inset-top, 0px) + 72px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}
.calendar-month-picker{
  width: min(100%, 360px);
  padding: 10px;
  border-radius: var(--sotido-radius-card);
  background: var(--sotido-theme-surface-chrome);
  color: var(--sotido-theme-text-primary);
  box-shadow: var(--sotido-shadow-surface);
  box-sizing: border-box;
}
.calendar-month-picker-title{
  margin-bottom: 8px;
  font-size: var(--sotido-type-body);
  font-weight: var(--sotido-font-weight-semibold);
}
.calendar-month-picker .sotido-date-picker-day{
  display: none;
}
.calendar-month-picker .sotido-date-picker-month,
.calendar-month-picker .sotido-date-picker-year{
  flex: 1 1 50%;
}
.calendar-month-picker-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}
@media (prefers-reduced-motion: reduce){
  .calendar-month-header-label{
    transition: none;
  }
}
.calendar-date-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--sotido-recipe-calendar-date-header-corner-radius);
  background: var(--sotido-recipe-calendar-date-header-surface);
  color: var(--sotido-recipe-calendar-date-header-text);
  z-index: 3;
  transition:
    filter var(--sotido-motion-fast) ease,
    transform var(--sotido-motion-fast) ease,
    box-shadow var(--sotido-motion-fast) ease;
}
.calendar-date-header.clickable{
  cursor: pointer;
}
.calendar-date-header.is-weekend:not(.is-today){
  background: var(--sotido-recipe-calendar-date-header-weekend-surface);
  color: var(--sotido-recipe-calendar-date-header-weekend-text);
}
.calendar-date-header.is-today{
  background: var(--sotido-recipe-calendar-date-header-today-surface);
  color: var(--sotido-recipe-calendar-date-header-today-text);
}
.calendar-date-header .calendar-date-stack{
  display: flex;
  flex-direction: column;
  gap: var(--sotido-recipe-calendar-date-header-stack-gap);
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  text-align: center;
}
.calendar-date-header .calendar-day-number{
  font-size: var(--sotido-recipe-calendar-date-header-day-number-size);
  font-weight: normal;
  line-height: var(--sotido-recipe-calendar-date-header-day-number-line-height);
  opacity: 0.95;
}
.calendar-date-header .calendar-weekday{
  font-size: var(--sotido-recipe-calendar-date-header-weekday-size);
  font-weight: var(--sotido-font-weight-medium);
  line-height: var(--sotido-recipe-calendar-date-header-weekday-line-height);
  opacity: 0.75;
}
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) .app-shell,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) .app-shell,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) .app-shell,
body.feed-mode .app-shell,
body.events-viewer-route .app-shell,
body.workflow-screen-open .app-shell{
  --sotido-calendar-root-top-spacer-h: 0px;
  --sotido-content-edge-scrim-top-height: clamp(
    72px,
    var(--sotido-calendar-top-content-inset, 72px),
    220px
  );
  --sotido-content-edge-scrim-bottom-height: clamp(
    84px,
    var(--sotido-calendar-bottom-content-inset, 84px),
    220px
  );
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}
.app-top-chrome-stack{
  --sotido-app-top-chrome-content-width: min(
    calc(100% - (2 * var(--sotido-recipe-calendar-top-chrome-stack-outer-inset)) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)),
    var(--sotido-recipe-calendar-top-chrome-stack-max-width)
  );
  grid-row: 1;
  grid-column: 1;
  position: sticky;
  align-self: start;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + var(--sotido-recipe-calendar-top-chrome-stack-safe-area-top-gap));
  justify-self: stretch;
  z-index: var(--sotido-layer-header);
  width: 100%;
  margin-inline: 0;
  display: grid;
  gap: var(--sotido-recipe-calendar-top-chrome-stack-stack-gap);
  pointer-events: none;
  box-sizing: border-box;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity var(--sotido-motion-fast) ease,
    transform var(--sotido-motion-standard) ease,
    visibility 0s linear 0s;
}
.app-top-surface-chrome-host{
  grid-row: 1 / -1;
  grid-column: 1;
  width: var(--sotido-app-top-chrome-content-width);
  min-width: 0;
  margin-inline: auto;
  display: grid;
  pointer-events: auto;
}
.app-top-surface-chrome-host[hidden],
.app-top-surface-chrome-host.ui-shell-hidden{
  display: none !important;
}
.app-top-surface-chrome-host > .event-modal-header,
.app-top-surface-chrome-host > .cal-settings-head{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px;
  border: 0;
  border-radius: var(--sotido-radius-card);
  background: var(--sotido-recipe-backdrop-chrome-surface);
  -webkit-backdrop-filter: blur(var(--sotido-recipe-backdrop-chrome-blur-radius));
  backdrop-filter: blur(var(--sotido-recipe-backdrop-chrome-blur-radius));
  box-shadow: var(--sotido-shadow-surface);
  pointer-events: auto;
}
body.calendar-chrome-focus-mode #appTopChromeStack{
  opacity: 0;
  transform: translateY(calc(-100% - env(safe-area-inset-top, 0px)));
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sotido-motion-fast) ease,
    transform var(--sotido-motion-standard) ease,
    visibility 0s linear var(--sotido-motion-standard);
}
body.calendar-chrome-focus-mode .app-shell{
  --sotido-content-edge-scrim-top-height: env(safe-area-inset-top, 0px);
  --sotido-content-edge-scrim-bottom-height: calc(
    env(safe-area-inset-bottom, 0px)
    + var(--sotido-recipe-calendar-lower-chrome-stack-focus-toggle-size)
    + var(--sotido-recipe-calendar-lower-chrome-stack-bottom-padding)
    + var(--sotido-recipe-calendar-lower-chrome-stack-bottom-padding)
  );
}
.app-shell::after{
  content: '';
  position: fixed;
  inset: 0;
  z-index: calc(var(--sotido-layer-navigation) - 1);
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--sotido-theme-background) 82%, transparent) 0%,
      color-mix(in srgb, var(--sotido-theme-background) 46%, transparent) 56%,
      transparent 100%
    ) top / 100% var(--sotido-content-edge-scrim-top-height, 148px) no-repeat,
    linear-gradient(
      to top,
      color-mix(in srgb, var(--sotido-theme-background) 82%, transparent) 0%,
      color-mix(in srgb, var(--sotido-theme-background) 46%, transparent) 56%,
      transparent 100%
    ) bottom / 100% var(--sotido-content-edge-scrim-bottom-height, 148px) no-repeat;
}
body.discover-mode:not(.event-compose-screen-open):not(.calendar-settings-screen-open):not(.workflow-screen-open) .app-shell::after{
  content: none;
}
#calendarViewSwitcherHost,
#calendarFilterDock,
#calendarStoryControlsHost,
#calendarAudienceSwitcher,
#calendarTopStatusUtilityHost,
#calendarTodayReturnBottomHost,
#calendarTodayReturnTopHost,
#modePanel{
  touch-action: pan-x pinch-zoom;
}
body.workflow-screen-open .app-top-chrome-stack{
  grid-row: 1;
  grid-column: 1;
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--sotido-recipe-calendar-top-chrome-stack-safe-area-top-gap));
  left: auto;
  right: auto;
  transform: none;
  align-self: start;
  align-items: start;
  grid-auto-rows: auto;
  justify-self: stretch;
  z-index: var(--sotido-layer-header);
  width: 100%;
  display: grid;
  pointer-events: none;
  box-sizing: border-box;
}
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) .app-bottom-chrome-stack,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) .app-bottom-chrome-stack,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) .app-bottom-chrome-stack,
body.event-compose-screen-open .app-bottom-chrome-stack,
body.feed-mode .app-bottom-chrome-stack,
body.events-viewer-route .app-bottom-chrome-stack,
body.workflow-screen-open .app-bottom-chrome-stack{
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  position: sticky;
  left: max(0px, env(safe-area-inset-left, 0px));
  right: max(0px, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sotido-recipe-calendar-lower-chrome-stack-bottom-padding));
  justify-self: center;
  z-index: var(--sotido-layer-navigation);
  width: min(
    calc(100% - var(--sotido-recipe-calendar-lower-chrome-stack-viewport-horizontal-inset) * 2 - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)),
    var(--sotido-recipe-calendar-lower-chrome-stack-max-width)
  );
  display: grid;
  gap: var(--sotido-recipe-calendar-lower-chrome-stack-stack-spacing);
  pointer-events: none;
  box-sizing: border-box;
}
#appSurfaceStage{
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}
#appSurfaceStage[aria-hidden="true"],
#appSurfaceStage[data-active-surface-host="calendar"]{
  display: none;
  pointer-events: none;
}
body.workflow-screen-open #appSurfaceStage,
#appSurfaceStage[data-active-surface-host="workflow"]{
  display: block;
  pointer-events: auto;
}
body.workflow-screen-open #appSurfaceStage,
body.workflow-screen-open #appSurfaceWorkflowHost{
  height: 100%;
  min-height: 100%;
}
#appSurfaceWorkflowHost[hidden],
#appSurfaceWorkflowHost[aria-hidden="true"]{
  display: none;
  pointer-events: none;
}
.app-surface-host-workflow{
  width: 100%;
  height: 100%;
  min-height: 0;
}
#rootContent{
  grid-row: 2 / 5;
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) #rootContent,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) #rootContent{
  grid-row: 1;
  scroll-padding-top: var(--sotido-calendar-top-content-inset);
  scroll-padding-bottom: var(--sotido-calendar-bottom-content-inset);
}
/* Scroll padding positions programmatic targets. Stable structural runways make
   the first and final content manually reachable without reflowing retained
   month, day, event, or connector geometry when the banner compacts. */
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) .calendar-projection-host::before,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) .calendar-projection-host::before,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) .calendar-projection-host::before{
  content: '';
  display: block;
  width: 100%;
  height: var(--sotido-calendar-top-scroll-runway-h);
  min-height: var(--sotido-calendar-top-scroll-runway-h);
  pointer-events: none;
  overflow-anchor: none;
}
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) .calendar-projection-host::after,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) .calendar-projection-host::after,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) .calendar-projection-host::after{
  content: '';
  display: block;
  width: 100%;
  height: var(--sotido-calendar-bottom-content-inset);
  min-height: var(--sotido-calendar-bottom-content-inset);
  pointer-events: none;
}
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent{
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.demo-mode.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent{
  scroll-padding-top: calc(
    var(--sotido-calendar-top-content-inset) + var(--sotido-root-demo-floating-cta-reserve, 0px)
  );
}
body.demo-mode.calendar-mode-list:not(.discover-mode):not(.feed-mode) .calendar-projection-host::before{
  height: calc(
    var(--sotido-calendar-top-scroll-runway-h) + var(--sotido-root-demo-floating-cta-reserve, 0px)
  );
  min-height: calc(
    var(--sotido-calendar-top-scroll-runway-h) + var(--sotido-root-demo-floating-cta-reserve, 0px)
  );
}
body.feed-mode #rootContent,
body.events-viewer-route #rootContent{
  grid-row: 1;
  grid-column: 1;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  padding-top: var(--sotido-calendar-top-content-inset);
  padding-bottom: var(--sotido-calendar-bottom-content-inset);
  scroll-padding-top: var(--sotido-calendar-top-content-inset);
  scroll-padding-bottom: var(--sotido-calendar-bottom-content-inset);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
body.event-detail-mode #calendarTopControlsHost{
  display: none !important;
}
body.event-detail-mode #rootContent{
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
}
html[data-app-surface-bundle="events-surface"] #calendarFilterDock,
html[data-app-surface-bundle="events-surface"] #calendarStoryControlsHost,
html[data-app-surface-bundle="events-surface"] #calendarStoryStrip,
html[data-app-surface-bundle="events-surface"] #topRightOverlayActions,
html[data-app-surface-bundle="events-surface"] #workspaceOverlayHead,
html[data-app-surface-bundle="events-surface"] #workspaceOverlay,
html[data-app-surface-bundle="events-surface"] #workspaceOverlay,
html[data-app-surface-bundle="discover-surface"] #calendarFilterDock,
html[data-app-surface-bundle="discover-surface"] #calendarStoryControlsHost,
html[data-app-surface-bundle="discover-surface"] #calendarStoryStrip,
html[data-app-surface-bundle="discover-surface"] #topRightOverlayActions,
html[data-app-surface-bundle="discover-surface"] #workspaceOverlayHead,
html[data-app-surface-bundle="discover-surface"] #workspaceOverlay,
html[data-app-surface-bundle="discover-surface"] #workspaceOverlay{
  display: none !important;
}
body.event-compose-screen-open #calendarThemeBanner,
body.event-compose-screen-open .calendar-theme-banner,
body.event-compose-screen-open #calendarTopControlsHost,
body.event-compose-screen-open .calendar-top-controls-host,
body.event-compose-screen-open #calendarViewSwitcherHost,
body.event-compose-screen-open #calendarFilterDock,
body.event-compose-screen-open .calendar-filter-dock,
body.calendar-settings-screen-open #calendarThemeBanner,
body.calendar-settings-screen-open .calendar-theme-banner,
body.calendar-settings-screen-open #calendarTopControlsHost,
body.calendar-settings-screen-open .calendar-top-controls-host,
body.calendar-settings-screen-open #calendarViewSwitcherHost,
body.calendar-settings-screen-open #calendarFilterDock,
body.calendar-settings-screen-open .calendar-filter-dock,
body.calendar-settings-screen-open #calendarStoryControlsHost,
body.calendar-settings-screen-open #calendarStoryStrip{
  display: none !important;
}
body.event-compose-screen-open #rootContent,
body.calendar-settings-screen-open #rootContent{
  display: none !important;
}
body.workflow-screen-open #calendarThemeBanner,
body.workflow-screen-open .calendar-theme-banner,
body.workflow-screen-open #calendarTopControlsHost,
body.workflow-screen-open .calendar-top-controls-host,
body.workflow-screen-open #calendarViewSwitcherHost,
body.workflow-screen-open #calendarFilterDock,
body.workflow-screen-open .calendar-filter-dock,
body.workflow-screen-open #calendarStoryControlsHost,
body.workflow-screen-open #calendarStoryStrip,
body.workflow-screen-open #workspaceOverlayHead,
body.workflow-screen-open #topRightOverlayActions{
  display: none !important;
}
body.workflow-screen-open #rootContent{
  display: none !important;
}
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent{
  flex: 1 1 auto;
  min-height: 100%;
  box-sizing: border-box;
}
#rootContent.calendar-switch-slide{
  transform: translate3d(34px, 0, 0);
  opacity: 0.06;
}
#rootContent.calendar-switch-slide.calendar-switch-slide-active{
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform var(--sotido-motion-deliberate) cubic-bezier(.22,.78,.25,1), opacity var(--sotido-motion-deliberate) ease;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce){
  #rootContent.calendar-switch-slide,
  #rootContent.calendar-switch-slide.calendar-switch-slide-active{
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    will-change: auto !important;
  }
}
body.feed-mode,
body.events-viewer-route{
  overflow: hidden;
}
body.calendar-mode-panel-rail #rootContent{
  --sotido-modepanel-h: 0px !important;
}
#safeAreaTopBg{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  pointer-events: none;
  z-index: 0;
  background: var(--sotido-theme-surface-highest);
}
.workspace-overlay.is-shell-placeholder,
.task-overlay.is-shell-placeholder{
  order: 2;
  position: fixed;
  inset: 0;
  z-index: var(--sotido-layer-overlay);
  display: block;
  pointer-events: auto;
}
.workspace-shell-placeholder-panel{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(max(var(--sotido-modepanel-h, 0px), var(--sotido-modepanel-min-h)) + 12px);
  min-height: 220px;
  border-radius: var(--sotido-radius-xlarge);
  border: 1px solid var(--sotido-theme-border);
  background: var(--sotido-theme-surface);
  box-shadow: var(--sotido-shadow-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.workspace-shell-placeholder-head{
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  background: var(--sotido-theme-surface-raised);
  color: var(--sotido-theme-text-primary);
  font-size: var(--sotido-type-body);
  font-weight: var(--sotido-font-weight-bold);
}
.workspace-shell-placeholder-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
  color: var(--sotido-theme-text-primary);
  text-align: center;
}
.workspace-shell-placeholder-copy{
  font-size: var(--sotido-type-caption);
  line-height: 1.35;
  opacity: 0.72;
}
.workspace-overlay.is-shell-placeholder[data-workflow-screen="1"],
.task-overlay.is-shell-placeholder[data-workflow-screen="1"]{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sotido-theme-background);
  overflow: hidden;
}
body.workflow-screen-open .workspace-overlay.is-shell-placeholder[data-workflow-screen="1"],
body.workflow-screen-open .task-overlay.is-shell-placeholder[data-workflow-screen="1"]{
  pointer-events: auto;
}
.workflow-shell-skeleton{
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  filter: none;
  pointer-events: auto;
}
.workflow-shell-skeleton-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
  background: var(--sotido-theme-background);
  color: var(--sotido-theme-text-primary);
  border-radius: 0;
  box-shadow: none;
}
.workflow-shell-skeleton-chrome{
  pointer-events: none !important;
}
.workflow-shell-skeleton-chrome .task-main-head,
.workflow-shell-skeleton-chrome .task-second-head,
.workflow-shell-skeleton-chrome .task-mode-subhead-wrap{
  min-width: 0;
}
.workflow-shell-skeleton-tabs .sotido-segmented-control-btn{
  opacity: 0.78;
}
.workflow-shell-skeleton-searchbar{
  display: block;
  min-width: 0;
  min-height: var(--sotido-recipe-form-control-minimum-height);
  color: var(--sotido-theme-text-secondary);
  font-size: var(--sotido-type-body-compact);
  line-height: 1.2;
}
.workflow-shell-skeleton-subtabs{
  flex: 1 1 auto;
  min-width: 0;
}
.workflow-shell-skeleton-section{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding:
    var(--sotido-workflow-top-content-inset, calc(env(safe-area-inset-top, 0px) + 112px))
    12px
    var(--sotido-calendar-bottom-content-inset);
  box-sizing: border-box;
}
.workflow-shell-skeleton-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.workflow-shell-skeleton-row{
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--sotido-radius-panel);
  background: var(--sotido-theme-surface);
  box-sizing: border-box;
}
.workflow-shell-skeleton-avatar,
.workflow-shell-skeleton-line,
.workflow-shell-skeleton-chip{
  position: relative;
  overflow: hidden;
  background: var(--sotido-theme-surface-chrome);
}
.workflow-shell-skeleton-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.workflow-shell-skeleton-lines{
  display: grid;
  gap: 8px;
}
.workflow-shell-skeleton-line{
  display: block;
  height: 10px;
  border-radius: var(--sotido-radius-pill);
}
.workflow-shell-skeleton-line--strong{
  width: min(240px, 72%);
}
.workflow-shell-skeleton-line--muted{
  width: min(320px, 92%);
  opacity: 0.72;
}
.workflow-shell-skeleton-chip{
  width: 72px;
  height: 28px;
  border-radius: var(--sotido-radius-pill);
  color: transparent;
}
.workflow-shell-skeleton-avatar:after,
.workflow-shell-skeleton-line:after,
.workflow-shell-skeleton-chip:after{
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-sheen), transparent);
  animation: workflowSkeletonSweep 1.4s ease-in-out infinite;
}
@keyframes workflowSkeletonSweep{
  100%{
    transform: translateX(100%);
  }
}
.calendar-range-enter{
  --calendar-range-enter-delay: 0ms;
  --calendar-range-enter-duration: var(--sotido-motion-deliberate);
  --calendar-range-enter-offset: var(--sotido-recipe-calendar-list-loading-reveal-offset, 6px);
  transform-origin: 50% 0%;
  animation: calendar-range-enter var(--calendar-range-enter-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--calendar-range-enter-delay);
}.calendar-range-enter[data-calendar-range-enter-direction="previous"]{
  --calendar-range-enter-offset: calc(-1 * var(--sotido-recipe-calendar-list-loading-reveal-offset, 6px));
  transform-origin: 50% 100%;
}
@keyframes calendar-range-enter{
  from{
    opacity: 0;
    transform: translate3d(0, var(--calendar-range-enter-offset), 0) scale3d(0.96, 0.8, 1);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
.calendar-range-exit{
  --calendar-range-exit-delay: 0ms;
  --calendar-range-exit-duration: var(--sotido-motion-deliberate);
  --calendar-range-exit-offset: calc(-1 * var(--sotido-recipe-calendar-list-loading-reveal-offset, 6px));
  transform-origin: 50% 100%;
  animation: calendar-range-exit var(--calendar-range-exit-duration) cubic-bezier(0.4, 0, 0.8, 0.2) both;
  animation-delay: var(--calendar-range-exit-delay);
}
.calendar-range-exit[data-calendar-range-exit-direction="next"]{
  --calendar-range-exit-offset: var(--sotido-recipe-calendar-list-loading-reveal-offset, 6px);
  transform-origin: 50% 0%;
}
@keyframes calendar-range-exit{
  from{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  to{
    opacity: 0;
    transform: translate3d(0, var(--calendar-range-exit-offset), 0) scale3d(0.96, 0.8, 1);
  }
}
.sotido-five-petal-progress{
  --sotido-five-petal-progress-size: var(--sotido-recipe-five-petal-progress-compact-size, 16px);
  --sotido-five-petal-progress-steps: 0;
  --sotido-five-petal-progress-logo-src: url("/static/svg/seclogo.webp");
  --sotido-five-petal-progress-active: var(--sotido-recipe-five-petal-progress-active, var(--sotido-theme-accent));
  position: relative;
  display: inline-block;
  width: var(--sotido-five-petal-progress-size);
  height: var(--sotido-five-petal-progress-size);
  flex: 0 0 auto;
  transform-origin: 50% 50%;
}
.sotido-five-petal-progress-ghost,
.sotido-five-petal-progress-petal{
  position: absolute;
  inset: 0;
  display: block;
  background: var(--sotido-five-petal-progress-active);
  -webkit-mask: center / contain no-repeat var(--sotido-five-petal-progress-logo-src);
  mask: center / contain no-repeat var(--sotido-five-petal-progress-logo-src);
}
.sotido-five-petal-progress-ghost{
  opacity: 0.12;
}
.sotido-five-petal-progress-petal{
  --sotido-five-petal-progress-petal-fill: clamp(0, calc(var(--sotido-five-petal-progress-steps) - var(--sotido-five-petal-progress-petal-index)), 1);
  opacity: var(--sotido-five-petal-progress-petal-fill);
  transition: opacity var(--sotido-motion-instant) linear;
}
.sotido-five-petal-progress[data-motion="grow"] .sotido-five-petal-progress-petal{
  transform: scale(var(--sotido-five-petal-progress-petal-fill));
  transform-origin: 50% 50%;
  transition:
    opacity var(--sotido-motion-standard) ease-out,
    transform var(--sotido-motion-deliberate) cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sotidoFivePetalSequenceGrow{
  0%, 5%{
    opacity: 0;
    transform: scale(0.08);
  }
  18%, 72%{
    opacity: 1;
    transform: scale(1);
  }
  88%, 100%{
    opacity: 0;
    transform: scale(0.08);
  }
}
.sotido-five-petal-progress[data-motion="sequence"] .sotido-five-petal-progress-petal,
.sotido-five-petal-progress[data-spinning="true"] .sotido-five-petal-progress-petal{
  opacity: 0;
  transform: scale(0.08);
  transform-origin: 50% 50%;
  animation: sotidoFivePetalSequenceGrow 1.8s cubic-bezier(0.2, 0, 0, 1) infinite;
  animation-delay: calc(var(--sotido-five-petal-progress-petal-index) * var(--sotido-motion-instant));
}
.sotido-five-petal-progress-petal:nth-of-type(2){
  --sotido-five-petal-progress-petal-index: 0;
  clip-path: polygon(50% 50%, 20.6% 9.5%, 79.4% 9.5%);
}
.sotido-five-petal-progress-petal:nth-of-type(3){
  --sotido-five-petal-progress-petal-index: 1;
  clip-path: polygon(50% 50%, 79.4% 9.5%, 97.6% 65.5%);
}
.sotido-five-petal-progress-petal:nth-of-type(4){
  --sotido-five-petal-progress-petal-index: 2;
  clip-path: polygon(50% 50%, 97.6% 65.5%, 50% 100%);
}
.sotido-five-petal-progress-petal:nth-of-type(5){
  --sotido-five-petal-progress-petal-index: 3;
  clip-path: polygon(50% 50%, 50% 100%, 2.4% 65.5%);
}
.sotido-five-petal-progress-petal:nth-of-type(6){
  --sotido-five-petal-progress-petal-index: 4;
  clip-path: polygon(50% 50%, 2.4% 65.5%, 20.6% 9.5%);
}
.sotido-five-petal-progress[data-force-filled="true"] .sotido-five-petal-progress-petal{
  opacity: 1;
}
.calendar-sync-indicator{
  position: relative;
  justify-self: center;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: var(--sotido-radius-pill);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sotido-motion-instant) ease;
}.calendar-sync-indicator.is-visible{
  visibility: visible;
  opacity: 1;
}.calendar-sync-indicator.is-detached{
  position: fixed;
  top: calc(var(--sotido-header-bottom, 0px) + 40px);
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--sotido-layer-popover) - 2);
}body.demo-mode .calendar-sync-indicator.is-detached{
  top: calc(var(--sotido-root-demo-safe-top, var(--sotido-header-bottom, calc(0px + 0px))) + 40px);
}.calendar-sync-spinner{
  --sotido-five-petal-progress-size: var(--sotido-recipe-five-petal-progress-compact-size, 16px);
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
  transform-origin: 50% 50%;
}
.sotido-loading-inline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
@media (prefers-reduced-motion: reduce){
  .calendar-range-enter,
  .calendar-range-exit{
    animation: none;
  }
  .sotido-five-petal-progress[data-spinning="true"] .sotido-five-petal-progress-petal,
  .sotido-five-petal-progress[data-motion="sequence"] .sotido-five-petal-progress-petal{
    animation: none;
  }
  .sotido-five-petal-progress-petal{
    transition: none;
  }
  .sotido-five-petal-progress[data-motion="sequence"] .sotido-five-petal-progress-petal,
  .sotido-five-petal-progress[data-spinning="true"] .sotido-five-petal-progress-petal{
    opacity: 1;
    transform: scale(1);
  }
}