/* ============================================================================
   THE ESSENCE — Calendar module. All calendar-specific visual design.
   Depends on essence.css (tokens + components). House style: warm, calm,
   editorial. Events are SOFT-TINT with a saturated left-border, and the tint
   themes itself in light AND dark via color-mix against --color-fg / -bg.
   ========================================================================= */

/* ---- CALENDAR COLOR PALETTE — модульные токены (паттерн --sup-* из
   PORTING поддержки): в концепте жили в essence.css, на проде их дом —
   этот файл, ОБА theme-блока. Плюс module layout variables. -------------- */
:root {
  --cal-rose: #B0705A; --cal-sage: #6E8B6A; --cal-teal: #4F8290; --cal-violet: #7C7398;
  --cal-amber: #C0883E; --cal-blush: #C77A8A; --cal-blue: #5E7CA6; --cal-clay: #9A6E55;
  --cal-now: #D2553F;

  --cal-gutter-w: 60px;
  --cal-hour-h:   50px;          /* height of one hour row  */
  --cal-dayhead-h: 58px;
  --cal-rail-w:   264px;
  --cal-context-w: 340px;
}

[data-theme="dark"] {
  --cal-rose: #D69F86; --cal-sage: #9CBE97; --cal-teal: #7FBAC9; --cal-violet: #ADA3C9;
  --cal-amber: #E3B570; --cal-blush: #E4A3AF; --cal-blue: #96B2D6; --cal-clay: #C9A088;
  --cal-now: #F0765F;
}

/* ============================================================================
   APP SHELL  — chrome (topbar/sidebar/apprail) comes from the REAL shell.css.
   Here: only the layout wiring + the module sub-toolbar + command palette.
   ========================================================================= */
.cal-app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
           background: var(--color-bg); color: var(--color-fg); }
.cal-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.cal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--color-bg); overflow: hidden; }


/* ---- MODULE SUB-TOOLBAR (mirrors PM's board header: controls live in <main>) */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
               height: 56px; padding: 0 16px; background: var(--color-bg-elevated);
               border-bottom: var(--hairline-width) solid var(--color-border); }
.cal-toolbar__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cal-toolbar__right { display: flex; align-items: center; gap: 8px; }

/* «Создать» split affordance inside the real .shell-compose */
.cal-create { position: relative; margin-bottom: 12px; }
.cal-create .shell-compose { width: 100%; margin-bottom: 0; }

/* ---- COMMAND PALETTE (⌘K / «/») — opened by the real .shell-search ------- */
.cmdk-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; justify-content: center;
                align-items: flex-start; padding: 11vh 16px 16px; background: rgba(20,15,10,.42); backdrop-filter: blur(4px); }
.cmdk { width: min(640px, 96vw); max-height: 68vh; display: flex; flex-direction: column; overflow: hidden;
        background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border-strong);
        border-radius: 16px; box-shadow: var(--shadow-pop); animation: modal-in var(--motion-duration-base) var(--ease-spring); }
.cmdk__input-row { display: flex; align-items: center; gap: 12px; padding: 15px 18px; flex: none;
                   border-bottom: var(--hairline-width) solid var(--color-border); }
.cmdk__input-row .icon { color: var(--color-fg-subtle); }
.cmdk__input { flex: 1; border: none; background: none; font-size: 17px; color: var(--color-fg); }
.cmdk__input::placeholder { color: var(--color-fg-subtle); }
.cmdk__esc { font-family: var(--font-mono); font-size: 10px; color: var(--color-fg-subtle);
             border: var(--hairline-width) solid var(--color-border-strong); border-radius: 6px; padding: 3px 7px; }
.cmdk__body { overflow-y: auto; padding: 8px; }
.cmdk__section { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--color-fg-subtle); padding: 10px 10px 4px; }
.cmdk__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.cmdk__item:hover, .cmdk__item.is-active { background: var(--color-bg-muted); }
.cmdk__item .icon { color: var(--color-fg-subtle); flex: none; }
.cmdk__item--create { background: var(--color-accent-soft); }
.cmdk__item--create:hover, .cmdk__item--create.is-active { background: color-mix(in oklch, var(--color-accent) 30%, var(--color-bg-elevated)); }
.cmdk__item--create .icon { color: var(--color-accent-strong); }
.cmdk__main { flex: 1; min-width: 0; }
.cmdk__title { font-size: 14px; font-weight: 500; color: var(--color-fg); }
.cmdk__title .nlp-token { color: var(--color-accent-strong); font-weight: 600; }
.cmdk__sub { font-size: 12px; color: var(--color-fg-subtle); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cmdk__kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--color-fg-subtle);
             border: var(--hairline-width) solid var(--color-border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; flex: none; }

/* ---- MOBILE (канонный md): drawer/хедер даёт shared/mobile_shell ---------- */
@media (max-width: 767.98px) {
  .cal-toolbar .load-meter { display: none; }  /* период читаем на телефоне */
  .cal-toolbar { height: 52px; padding: 0 10px; }
}
@media (max-width: 620px) {
  .shell-search__placeholder, .shell-search__kbd { display: none; }
  .shell-search { flex: none; width: 40px; padding: 0; justify-content: center; }
  .shell-topbar { gap: 8px; }
}

/* ---- TOP BAR -------------------------------------------------------------- */
.cal-topbar { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px; flex: none;
              background: var(--color-bg-elevated); border-bottom: var(--hairline-width) solid var(--color-border);
              position: relative; z-index: var(--z-header); }
.cal-brand { display: flex; align-items: center; gap: 9px; padding-right: 6px; }
.cal-brand__mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
                   background: var(--color-accent); color: var(--color-accent-on); box-shadow: var(--shadow-soft); }
.cal-brand__mark .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.cal-brand__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.cal-brand__name small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .1em;
                         text-transform: uppercase; color: var(--color-fg-subtle); }

.cal-today-btn { height: 34px; padding: 0 14px; border-radius: var(--radius-md); font-weight: 600; font-size: 13px;
                 border: var(--hairline-width) solid var(--color-border-strong); background: var(--color-bg-elevated);
                 color: var(--color-fg); transition: background var(--motion-duration-fast) var(--motion-ease); }
.cal-today-btn:hover { background: var(--color-bg-muted); }
.cal-nav { display: flex; align-items: center; gap: 2px; }
.cal-nav__arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md);
                  color: var(--color-fg-muted); transition: background var(--motion-duration-fast) var(--motion-ease); }
.cal-nav__arrow:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.cal-period { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em;
              min-width: 200px; padding: 0 6px; }
.cal-period sup { font-size: 12px; color: var(--color-fg-subtle); font-weight: 500; }
.cal-spacer { flex: 1; }

/* NL quick-add / search field in the top bar */
.cal-omni { position: relative; display: flex; align-items: center; gap: 8px; width: 320px; max-width: 34vw;
            height: 38px; padding: 0 12px; border-radius: var(--radius-full);
            background: var(--color-bg-muted); border: var(--hairline-width) solid var(--color-border);
            color: var(--color-fg-subtle); transition: border-color var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-fast) var(--motion-ease), background var(--motion-duration-fast) var(--motion-ease); }
.cal-omni:focus-within { background: var(--color-bg-elevated); border-color: var(--color-accent);
                         box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 16%, transparent); }
.cal-omni .icon { color: var(--color-fg-subtle); }
.cal-omni input { flex: 1; border: none; background: none; font-size: 13.5px; color: var(--color-fg); }
.cal-omni input::placeholder { color: var(--color-fg-subtle); }
.cal-omni__hint { font-family: var(--font-mono); font-size: 10px; color: var(--color-fg-subtle);
                  border: var(--hairline-width) solid var(--color-border-strong); border-radius: 5px; padding: 1px 5px; }

/* NL parse preview dropdown */
.nlp-preview { position: absolute; top: calc(100% + 8px); left: 0; width: 380px; padding: 14px;
               background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
               border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); z-index: var(--z-popover); }
.nlp-preview__label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
                      color: var(--color-fg-subtle); margin-bottom: 8px; }
.nlp-preview__card { display: flex; gap: 10px; padding: 10px; border-radius: var(--radius-md);
                     background: var(--color-bg-muted); }
.nlp-preview__accent { width: 3px; border-radius: 3px; background: var(--cal-rose); flex: none; }
.nlp-preview__title { font-weight: 600; font-size: 14px; }
.nlp-preview__meta { font-size: 12px; color: var(--color-fg-muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.nlp-token { color: var(--color-accent-strong); font-weight: 600; }

/* ============================================================================
   LEFT RAIL
   ========================================================================= */

/* «Создать» split button */
.cal-create { position: relative; }
.cal-create__main { display: flex; align-items: center; gap: 9px; width: 100%; height: 48px; padding: 0 18px;
                    border-radius: var(--radius-xl); background: var(--color-accent); color: var(--color-accent-on);
                    font-family: var(--font-display); font-weight: 700; font-size: 15px; box-shadow: var(--shadow-card);
                    transition: transform var(--motion-duration-fast) var(--ease-pop), background var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-base) var(--motion-ease); }
.cal-create__main:hover { background: var(--color-accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.cal-create__main .icon { width: 20px; height: 20px; stroke-width: 2; }

/* Mini month calendar (also reused in editor pickers) */
.mini-cal { user-select: none; }
.mini-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mini-cal__title { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; text-transform: capitalize; }
.mini-cal__nav { display: flex; gap: 2px; }
.mini-cal__nav button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
                        color: var(--color-fg-muted); }
.mini-cal__nav button:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.mini-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mini-cal__dow { text-align: center; font-size: 10px; font-weight: 600; color: var(--color-fg-subtle);
                 padding-bottom: 4px; font-family: var(--font-mono); }
.mini-cal__day { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: 11.5px;
                 border-radius: 50%; color: var(--color-fg); cursor: pointer; font-family: var(--font-mono);
                 transition: background var(--motion-duration-fast) var(--motion-ease); }
.mini-cal__day:hover { background: var(--color-bg-muted); }
.mini-cal__day--out { color: var(--color-fg-subtle); opacity: .5; }
.mini-cal__day--today { color: var(--color-accent-strong); font-weight: 700; }
.mini-cal__day--today::after { content: ""; position: absolute; bottom: 3px; width: 3px; height: 3px;
                               border-radius: 50%; background: var(--color-accent); }
.mini-cal__day--selected { background: var(--color-accent); color: var(--color-accent-on); font-weight: 700; }
.mini-cal__day--selected.mini-cal__day--today::after { background: var(--color-accent-on); }
.mini-cal__day--in-range { background: var(--color-accent-soft); border-radius: 0; }
.mini-cal__day--has-dot::before { content: ""; position: absolute; top: 4px; right: 6px; width: 4px; height: 4px;
                                  border-radius: 50%; background: var(--cal-rose); }

/* Calendars list */
.cal-list__label { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px;
                   font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-subtle); }
.cal-list__add { color: var(--color-fg-subtle); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; }
.cal-list__add:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.cal-list__item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px; border-radius: var(--radius-md);
                  cursor: pointer; transition: background var(--motion-duration-fast) var(--motion-ease); }
.cal-list__item:hover { background: var(--color-bg-muted); }
.cal-list__item:hover .cal-list__more { opacity: 1; }
.cal-check { position: relative; width: 17px; height: 17px; border-radius: 5px; flex: none; cursor: pointer;
             border: 1.5px solid var(--ev, var(--color-border-strong)); background: transparent;
             transition: background var(--motion-duration-fast) var(--motion-ease); }
.cal-check[data-checked="true"] { background: var(--ev); border-color: var(--ev); }
.cal-check[data-checked="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 9px;
             border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.cal-list__name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-list__item[data-off="true"] .cal-list__name { color: var(--color-fg-subtle); }
.cal-list__more { opacity: 0; color: var(--color-fg-subtle); display: grid; place-items: center; width: 22px; height: 22px;
                  border-radius: 5px; transition: opacity var(--motion-duration-fast) var(--motion-ease); }
.cal-list__more:hover { background: var(--color-border); color: var(--color-fg); }

/* ============================================================================
   VIEW CONTAINER + transitions
   ========================================================================= */
.cal-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cal-view[hidden] { display: none; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cal-view.is-entering { animation: view-in var(--motion-duration-base) var(--motion-ease); }

/* ============================================================================
   TIME GRID (Week / Day)
   ========================================================================= */
.tg { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tg__head { display: grid; grid-template-columns: var(--cal-gutter-w) minmax(0, 1fr); flex: none;
            border-bottom: var(--hairline-width) solid var(--color-border); background: var(--color-bg-elevated);
            position: sticky; top: 0; z-index: var(--z-sticky); }
.tg__head-gutter { border-right: var(--hairline-width) solid var(--color-border); }
.tg__days { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; min-width: 0; }
.tg__daycol-head { padding: 8px 4px; text-align: center; border-left: var(--hairline-width) solid var(--color-border);
                   display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.tg__dow { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-fg-muted); }
.tg__dnum { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: var(--font-display);
            font-size: 19px; font-weight: 600; transition: background var(--motion-duration-fast) var(--motion-ease); }
.tg__daycol-head:hover .tg__dnum { background: var(--color-bg-muted); }
.tg__daycol-head--today .tg__dow { color: var(--color-accent-strong); }
.tg__daycol-head--today .tg__dnum { background: var(--color-accent); color: var(--color-accent-on); }
.tg__daycol-head--weekend .tg__dow { color: var(--color-fg-subtle); }

/* all-day lane */
.tg__allday { display: grid; grid-template-columns: var(--cal-gutter-w) minmax(0, 1fr); flex: none;
              border-bottom: var(--hairline-width) solid var(--color-border); min-height: 30px; background: var(--color-bg-elevated); }
.tg__allday-label { font-size: 10px; color: var(--color-fg-subtle); text-align: right; padding: 6px 8px 0 0;
                    border-right: var(--hairline-width) solid var(--color-border); font-family: var(--font-mono); }
.tg__allday-days { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; min-width: 0; }
.tg__allday-cell { border-left: var(--hairline-width) solid var(--color-border); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* scroll body */
.tg__scroll { flex: 1; overflow-y: auto; position: relative; }
.tg__canvas { display: grid; grid-template-columns: var(--cal-gutter-w) minmax(0, 1fr); position: relative; }
.tg__gutter { position: relative; }
.tg__hour { height: var(--cal-hour-h); position: relative; border-right: var(--hairline-width) solid var(--color-border); }
.tg__hour-label { position: absolute; top: -7px; right: 8px; font-size: 10.5px; color: var(--color-fg-subtle);
                  font-family: var(--font-mono); background: var(--color-bg); padding: 0 2px; }
.tg__cols { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; position: relative; min-width: 0; }
.tg__col { position: relative; border-left: var(--hairline-width) solid var(--color-border); }
.tg__col--weekend { background: color-mix(in oklch, var(--color-bg-muted) 45%, var(--color-bg)); }
.tg__col--today { background: color-mix(in oklch, var(--color-accent) 5%, var(--color-bg)); }
.tg__hourline { height: var(--cal-hour-h); border-bottom: var(--hairline-width) solid var(--color-border); position: relative; }
.tg__hourline::after { content: ""; position: absolute; left: 0; right: 0; height: var(--hairline-width);
                       margin-top: calc(var(--cal-hour-h) / 2); background: color-mix(in oklch, var(--color-border) 45%, transparent); }
.tg__col:hover { background: color-mix(in oklch, var(--color-accent) 3%, var(--color-bg)); }

/* NOW line */
.tg__now { position: absolute; left: 0; right: 0; height: 0; z-index: 6; pointer-events: none; }
.tg__now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 9px; height: 9px; border-radius: 50%;
                   background: var(--cal-now); box-shadow: 0 0 0 3px color-mix(in oklch, var(--cal-now) 25%, transparent); }
.tg__now::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cal-now); }
.tg__now-label { position: absolute; left: 6px; top: -18px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
                 color: #fff; background: var(--cal-now); padding: 1px 4px; border-radius: 4px; }

/* ---- EVENT (timed) -------------------------------------------------------- */
.event { position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 4px 8px; overflow: hidden;
         cursor: pointer; z-index: 4; --ev: var(--cal-rose);
         background: color-mix(in oklch, var(--ev) 15%, var(--color-bg-elevated));
         border-left: 3px solid var(--ev);
         color: color-mix(in oklch, var(--ev) 58%, var(--color-fg));
         box-shadow: var(--shadow-soft);
         transition: transform var(--motion-duration-fast) var(--ease-pop), box-shadow var(--motion-duration-fast) var(--motion-ease), filter var(--motion-duration-fast) var(--motion-ease); }
.event:hover { box-shadow: var(--shadow-card); filter: brightness(1.02); z-index: 7; transform: translateY(-1px); }
.event__time { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; opacity: .9; }
.event__title { font-weight: 600; font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event__loc { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event--short { padding: 2px 8px; }
.event--short .event__title { display: inline; } .event--short .event__time { display: inline; margin-right: 5px; }
.event--solid { background: var(--ev); color: #fff; border-left-color: color-mix(in oklch, var(--ev) 60%, black); }
.event--tentative { background: repeating-linear-gradient(45deg, color-mix(in oklch, var(--ev) 12%, var(--color-bg-elevated)) 0 6px, color-mix(in oklch, var(--ev) 20%, var(--color-bg-elevated)) 6px 12px); }
.event--past { opacity: .62; }
.event--meeting .event__title::after { content: "•"; }
.event__badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; }
.event__resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.event.is-dragging { opacity: .85; box-shadow: var(--shadow-pop); z-index: 20; cursor: grabbing; }

/* all-day / month chip */
.chip-ev { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; cursor: pointer; min-width: 0;
           --ev: var(--cal-rose); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
           background: color-mix(in oklch, var(--ev) 15%, var(--color-bg-elevated));
           color: color-mix(in oklch, var(--ev) 58%, var(--color-fg));
           transition: filter var(--motion-duration-fast) var(--motion-ease); }
.chip-ev:hover { filter: brightness(.97); }
.chip-ev__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev); flex: none; }
.chip-ev__time { font-family: var(--font-mono); font-size: 10.5px; opacity: .85; font-weight: 500; }
.chip-ev--solid { background: var(--ev); color: #fff; }
.chip-ev--solid .chip-ev__dot { background: rgba(255,255,255,.85); }

/* ============================================================================
   MONTH GRID
   ========================================================================= */
.mg { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mg__dow { display: grid; grid-template-columns: repeat(7, 1fr); flex: none; border-bottom: var(--hairline-width) solid var(--color-border);
           background: var(--color-bg-elevated); }
.mg__dow span { padding: 8px 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
                color: var(--color-fg-muted); text-align: right; }
.mg__dow span.is-weekend { color: var(--color-fg-subtle); }
.mg__grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; min-height: 0; }
.mg__cell { border-left: var(--hairline-width) solid var(--color-border); border-top: var(--hairline-width) solid var(--color-border);
            padding: 4px 5px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-height: 0; min-width: 0; cursor: pointer;
            transition: background var(--motion-duration-fast) var(--motion-ease); }
.mg__cell:hover { background: color-mix(in oklch, var(--color-accent) 3%, var(--color-bg)); }
.mg__cell:nth-child(7n+1) { border-left: none; }
.mg__cell--out { background: color-mix(in oklch, var(--color-bg-muted) 40%, var(--color-bg)); }
.mg__cell--out .mg__daynum { color: var(--color-fg-subtle); opacity: .6; }
.mg__cell--weekend { background: color-mix(in oklch, var(--color-bg-muted) 30%, var(--color-bg)); }
.mg__daynum { align-self: flex-end; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px;
              border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--color-fg); }
.mg__cell--today .mg__daynum { background: var(--color-accent); color: var(--color-accent-on); }
.mg__daynum small { font-size: 9px; font-weight: 500; text-transform: uppercase; margin-right: 3px; color: var(--color-fg-subtle); }
.mg__more { font-size: 11px; font-weight: 600; color: var(--color-fg-muted); padding: 1px 6px; border-radius: 5px; cursor: pointer; }
.mg__more:hover { background: var(--color-bg-muted); color: var(--color-accent-strong); }

/* ============================================================================
   SCHEDULE / AGENDA (mirrors the mail agenda rows)
   ========================================================================= */
.ag { flex: 1; overflow-y: auto; }
.ag__daygroup { display: grid; grid-template-columns: 132px 1fr; border-bottom: var(--hairline-width) solid var(--color-border); }
.ag__daygroup--today { background: color-mix(in oklch, var(--color-accent) 4%, var(--color-bg)); }
.ag__date { padding: 16px 18px; position: sticky; top: 0; }
.ag__date-num { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1; }
.ag__date-dow { font-size: 12px; color: var(--color-fg-muted); margin-top: 4px; text-transform: capitalize; }
.ag__daygroup--today .ag__date-num, .ag__daygroup--today .ag__date-dow { color: var(--color-accent-strong); }
.ag__events { padding: 8px 0; }
.ag__row { display: flex; align-items: center; gap: 14px; padding: 9px 18px; cursor: pointer; border-left: 2px solid transparent;
           transition: background var(--motion-duration-fast) var(--motion-ease); }
.ag__row:hover { background: var(--color-bg-elevated); border-left-color: var(--ev, var(--cal-rose)); }
.ag__row-time { width: 110px; flex: none; font-family: var(--font-mono); font-size: 12.5px; color: var(--color-fg-muted); }
.ag__row-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ev, var(--cal-rose)); flex: none; }
.ag__row-title { flex: 1; font-weight: 600; font-size: 14px; }
.ag__row-loc { font-size: 12px; color: var(--color-fg-subtle); }
.ag__empty { padding: 12px 18px; color: var(--color-fg-subtle); font-size: 13px; font-style: italic; }

/* ============================================================================
   YEAR VIEW
   ========================================================================= */
.yr { flex: 1; overflow-y: auto; padding: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.yr__month { }
.yr__month-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-bottom: 8px;
                  text-transform: capitalize; cursor: pointer; }
.yr__month-name:hover { color: var(--color-accent-strong); }
.yr__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.yr__dow { text-align: center; font-size: 9px; font-weight: 600; color: var(--color-fg-subtle); font-family: var(--font-mono); padding-bottom: 2px; }
.yr__day { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: 10.5px; border-radius: 50%;
           font-family: var(--font-mono); color: var(--color-fg); cursor: pointer; }
.yr__day:hover { background: var(--color-bg-muted); }
.yr__day--out { color: var(--color-fg-subtle); opacity: .4; }
.yr__day--today { background: var(--color-accent); color: var(--color-accent-on); font-weight: 700; }
.yr__day--busy::after { content: ""; position: absolute; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: var(--cal-rose); }

/* ============================================================================
   QUICK-CREATE POPOVER
   ========================================================================= */
.qc { position: absolute; width: 300px; padding: 14px; background: var(--color-bg-elevated);
      border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
      z-index: var(--z-popover); animation: pop-in var(--motion-duration-fast) var(--ease-pop); }
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.qc__title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.qc__accent { width: 4px; align-self: stretch; border-radius: 4px; background: var(--ev, var(--cal-rose)); }
.qc__title { flex: 1; border: none; background: none; font-size: 16px; font-weight: 600; color: var(--color-fg); }
.qc__title::placeholder { color: var(--color-fg-subtle); font-weight: 500; }
.qc__row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--color-fg-muted); }
.qc__row .icon { color: var(--color-fg-subtle); flex: none; }
.qc__swatches { display: flex; gap: 6px; }
.qc__swatch { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.qc__swatch[aria-pressed="true"] { border-color: var(--color-fg); }
.qc__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px;
              border-top: var(--hairline-width) solid var(--color-border); }

/* ============================================================================
   EVENT READ POPOVER
   ========================================================================= */
.ep { position: absolute; width: 360px; background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); z-index: var(--z-popover); overflow: hidden;
      animation: pop-in var(--motion-duration-fast) var(--ease-pop); }
.ep__accent { height: 5px; background: var(--ev, var(--cal-rose)); }
.ep__head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 8px; }
.ep__title { flex: 1; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.ep__actions { display: flex; gap: 2px; }
.ep__body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.ep__line { display: flex; gap: 12px; font-size: 13.5px; }
.ep__line .icon { color: var(--color-fg-subtle); flex: none; margin-top: 1px; }
.ep__line b { font-weight: 600; }
.ep__attendees { display: flex; flex-direction: column; gap: 6px; }
.ep__attendee { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ep__rsvp { margin-left: auto; font-size: 11px; }
.ep__join { display: flex; align-items: center; gap: 8px; margin: 4px 16px 16px; padding: 12px 14px; border-radius: var(--radius-md);
            background: var(--color-accent-soft); }
.ep__join .btn { margin-left: auto; }

/* ============================================================================
   EDITOR (full) — extends .side-panel with calendar field rows
   ========================================================================= */
.ed__row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.ed__row:last-child { border-bottom: none; }
.ed__row .icon { color: var(--color-fg-subtle); flex: none; margin-top: 8px; width: 18px; height: 18px; }
.ed__row-main { flex: 1; min-width: 0; }
.ed__title-input { width: 100%; border: none; background: none; font-family: var(--font-display); font-size: 20px; font-weight: 600;
                   color: var(--color-fg); padding: 6px 0; border-bottom: 2px solid var(--color-border); }
.ed__title-input:focus { border-bottom-color: var(--color-accent); }
.ed__title-input::placeholder { color: var(--color-fg-subtle); }
.ed__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed__seg { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--radius-md);
           background: var(--color-bg-muted); border: var(--hairline-width) solid var(--color-border); font-size: 13px; cursor: pointer; }
.ed__seg:hover { border-color: var(--color-border-strong); }
input.ed__seg { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-fg); }
input.ed__seg:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 16%, transparent); }
input.ed__seg:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.ed__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed__color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.ed__color { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; }
.ed__color[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 10px;
           border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ed__meeting-card { border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-md); padding: 12px; background: var(--color-bg-muted); }
.ed__guestlink { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
                 background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border); font-family: var(--font-mono); font-size: 12px; }
.ed__guestlink input { flex: 1; border: none; background: none; font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-muted); }

/* attendee autocomplete busy indicator */
.att-busy { color: var(--color-danger-text); }
.att-free { color: var(--color-success-text); }

/* ============================================================================
   OVERLAYS: undo toast, keyboard help, drawers, scrim
   ========================================================================= */
.cal-scrim { position: fixed; inset: 0; background: rgba(20,15,10,.4); backdrop-filter: blur(2px); z-index: var(--z-overlay); }

.toast-wrap { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: var(--radius-full);
         background: var(--color-fg); color: var(--color-bg-elevated); box-shadow: var(--shadow-pop); font-size: 13.5px;
         animation: toast-in var(--motion-duration-base) var(--ease-spring); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.toast__undo { font-weight: 700; color: var(--color-accent); padding: 4px 10px; border-radius: var(--radius-full); }
.toast__undo:hover { background: color-mix(in oklch, var(--color-accent) 18%, transparent); }

.kbd-help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.kbd-help__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0;
                 border-bottom: var(--hairline-width) solid var(--color-border); font-size: 13px; }
.kbd-help__keys { display: flex; gap: 4px; }
.kbd-help__section { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-subtle); margin: 16px 0 6px; grid-column: 1 / -1; }

/* ============================================================================
   MOBILE / RESPONSIVE
   ========================================================================= */
.cal-fab { display: none; position: fixed; right: 18px; bottom: 78px; width: 56px; height: 56px; border-radius: 18px;
           background: var(--color-accent); color: var(--color-accent-on); box-shadow: var(--shadow-pop); place-items: center; z-index: var(--z-sticky); }
.cal-fab .icon { width: 26px; height: 26px; stroke-width: 2.2; }

@media (max-width: 1180px) { .cal-omni { display: none; } }   /* keep the top bar from overflowing with the NL field */
/* Брейкпоинт = канонный md (768): ниже — mobile_shell-хедер, drawer и
   общий .mobile-bottom-nav; выше — обычный десктоп-шелл. */
@media (max-width: 767.98px) {
  .cal-body { padding-bottom: 56px; }                   /* под fixed .mobile-bottom-nav */
  /* Desktop-рельс ниже md. Специфичность 0-2-0 НАМЕРЕННО: propshaft льёт
     стили пофайлово по алфавиту, shell/_shell.css (.shell-sidebar
     {display:flex}) всегда позже calendar/ — равная специфичность
     проиграла бы независимо от нашего порядка в файле. */
  .cal-body > .cal-desktop-rail { display: none; }
  #viewSwitch, #helpBtn { display: none; }              /* виды — в нижней навигации */
  .cal-omni { display: none; }
  .cal-period { font-size: 15px; min-width: 0; max-width: 48vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cal-brand__name { display: none; }
  .cal-fab { display: grid; }
  .cal-context { display: none; }
  .yr { grid-template-columns: repeat(2, 1fr); }
  .side-panel, .ep, .qc { max-width: 96vw; }
}
@media (max-width: 560px) {
  .yr { grid-template-columns: 1fr; }
  .ag__daygroup { grid-template-columns: 92px 1fr; }
  .ag__row-loc { display: none; }   /* keep titles from clipping; full details in the tap-through popover */
  .ag__row { gap: 10px; }

  /* ---- WEEK / DAY time-grid: 7 columns compressed to fit the phone (no clip) ---- */
  .cal-app { --cal-gutter-w: 40px; }                       /* reclaim width for the day columns */
  .tg__dow { font-size: 8.5px; letter-spacing: 0; }
  .tg__daycol-head { padding: 6px 0; gap: 1px; min-width: 0; }
  .cal-main .tg__weather { display: none; }                /* per-day weather is noise in 7 narrow columns; base rule is declared later in file → need specificity to win the cascade */
  .tg__dnum { width: 24px; height: 24px; font-size: 14px; }
  .tg__hour-label, .tg__allday-label { font-size: 9px; }
  .event { left: 1px; right: 1px; padding: 2px 3px; border-radius: 4px; }
  .event__time { font-size: 8.5px; }
  .event__title { font-size: 10px; line-height: 1.15; }
  .event__loc, .event__badge { display: none; }            /* too narrow — full details in the tap-through popover */
  .chip-ev { height: 18px; padding: 0 4px; gap: 3px; font-size: 9.5px; }
  .chip-ev__time { font-size: 8.5px; }

  /* ---- MONTH: dots-first cells, chip labels only where they fit ---- */
  .mg__cell { padding: 3px 2px; }
  .mg__daynum { min-width: 20px; height: 20px; font-size: 11px; }
  .mg__dow span { padding: 6px 3px; font-size: 9px; text-align: center; }
  .mg__cell .chip-ev { height: 15px; padding: 0 3px; font-size: 8.5px; }
  .mg__cell .chip-ev__time { display: none; }              /* only dot + short title in tiny month cells */
}

/* ============================================================================
   BOOKING PAGES (host setup + client booking + confirmation)
   ========================================================================= */
.bk { min-height: 100dvh; background: var(--color-bg); }
.bk-wrap { max-width: 960px; margin: 0 auto; padding: 40px 20px 80px; }
.bk-narrow { max-width: 520px; }

/* client booking page */
.bk-host { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.bk-host__avatar { width: 64px; height: 64px; border-radius: 50%; box-shadow: var(--shadow-card); }
.bk-host__name { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.bk-host__role { color: var(--color-fg-muted); font-size: 14px; }
.bk-service { display: flex; align-items: center; gap: 10px; color: var(--color-fg-muted); font-size: 14px; margin: 14px 0 24px; }
.bk-service .icon { color: var(--color-fg-subtle); }
.bk-cols { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.bk-slot { height: 44px; border-radius: var(--radius-md); border: var(--hairline-width) solid var(--color-border-strong);
           background: var(--color-bg-elevated); font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--color-fg);
           transition: all var(--motion-duration-fast) var(--motion-ease); }
.bk-slot:hover { border-color: var(--color-accent); color: var(--color-accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.bk-slot--active { background: var(--color-accent); color: var(--color-accent-on); border-color: var(--color-accent); }
.bk-tz { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-fg-muted); margin-top: 16px; }

/* host availability grid */
.bk-avail { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; align-items: center; }
.bk-avail__day { font-weight: 600; font-size: 13.5px; }
.bk-avail__slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk-timepill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--radius-md);
               background: var(--color-bg-muted); border: var(--hairline-width) solid var(--color-border); font-family: var(--font-mono); font-size: 12.5px; }
.bk-share { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md);
            background: var(--color-accent-soft); }
.bk-share input { flex: 1; border: none; background: none; font-family: var(--font-mono); font-size: 13px; color: var(--color-accent-strong); }

/* confirmation */
.bk-confirm { text-align: center; }
.bk-confirm__check { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center;
                     background: var(--color-success-soft); color: var(--color-success-text); }
.bk-confirm__check .icon { width: 38px; height: 38px; stroke-width: 2.4; }
.bk-summary { text-align: left; margin: 24px auto 0; }
.bk-summary__row { display: flex; gap: 12px; padding: 12px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.bk-summary__row .icon { color: var(--color-fg-subtle); }

@media (max-width: 720px) { .bk-cols { grid-template-columns: 1fr; } }

/* ============================================================================
   YANDEX-STYLE RICH LAYER — weather · production calendar · right day-panel ·
   week numbers · view options. What makes it read as Яндекс, not Google.
   ========================================================================= */
:root { --cal-context-w: 328px; }

/* weather in day/week column headers */
.tg__weather { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px;
               font-family: var(--font-mono); font-size: 10.5px; color: var(--color-fg-subtle); }
.tg__weather .icon { width: 13px; height: 13px; }
.tg__weather--sun .icon { color: var(--cal-amber); } .tg__weather--rain .icon { color: var(--cal-blue); }

/* week-number block in the gutter head */
.tg__weeknum { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: 100%; }
.tg__weeknum b { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--color-fg-muted); }
.tg__weeknum span { font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-fg-subtle); }

/* production calendar (РФ) — weekends & holidays in red */
.tg__daycol-head--holiday .tg__dow { color: var(--color-danger-text); }
.tg__daycol-head--holiday:not(.tg__daycol-head--today) .tg__dnum { color: var(--color-danger-text); }
.tg__daycol-head--short .tg__dow::after { content: " · сокр."; color: var(--color-warning-text); }
.mini-cal__day--holiday:not(.mini-cal__day--selected):not(.mini-cal__day--out) { color: var(--color-danger-text); }
.mg__cell--holiday:not(.mg__cell--today) .mg__daynum { color: var(--color-danger-text); }
.yr__day--holiday:not(.yr__day--today):not(.yr__day--out) { color: var(--color-danger-text); }

/* video glyph on event chips (Yandex marks Телемост events) */
.event__vid, .chip-ev__vid { display: inline-block; vertical-align: -1px; }

/* ---- RIGHT CONTEXT PANEL (Yandex right day-column) ------------------------ */
.cal-context { width: var(--cal-context-w); flex: none; display: flex; flex-direction: column;
               background: var(--color-bg); border-left: var(--hairline-width) solid var(--color-border); overflow: hidden; }
.cal-context[hidden] { display: none; }
.cal-context__scroll { flex: 1; overflow-y: auto; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 18px; }
.ctx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ctx-date { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.ctx-dow { font-size: 12.5px; color: var(--color-fg-muted); text-transform: capitalize; margin-top: 2px; }
.ctx-weather { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--radius-md);
               background: var(--color-bg-muted); font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--color-fg-muted); }
.ctx-weather .icon { width: 20px; height: 20px; color: var(--cal-amber); }
.ctx-next { border-radius: var(--radius-lg); padding: 14px; background: var(--color-accent-soft); }
.ctx-next__label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-strong); display: flex; align-items: center; gap: 6px; }
.ctx-next__title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; margin-top: 7px; }
.ctx-next__meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-fg-muted); margin-top: 5px; }
.ctx-next__meta .icon { width: 14px; height: 14px; color: var(--color-fg-subtle); }
.ctx-next__in { font-weight: 700; color: var(--color-accent-strong); }
.ctx-next .btn { margin-top: 12px; width: 100%; }
.ctx-sec__title { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-subtle); margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
.ctx-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: var(--hairline-width) solid var(--color-border); cursor: pointer; }
.ctx-row:last-child { border-bottom: none; }
.ctx-row:hover .ctx-row__title { color: var(--color-accent-strong); }
.ctx-row__time { width: 42px; flex: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--color-fg-muted); text-align: right; }
.ctx-row__bar { width: 3px; align-self: stretch; min-height: 26px; border-radius: 3px; background: var(--ev, var(--cal-rose)); flex: none; }
.ctx-row__title { flex: 1; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--motion-duration-fast) var(--motion-ease); }
.ctx-row .icon { color: var(--color-fg-subtle); width: 14px; height: 14px; flex: none; }
.ctx-meta { display: flex; flex-direction: column; gap: 10px; }
.ctx-meta__row { display: flex; gap: 10px; font-size: 12.5px; color: var(--color-fg-muted); line-height: 1.4; }
.ctx-meta__row .icon { color: var(--color-fg-subtle); flex: none; margin-top: 1px; }
.ctx-meta__row b { color: var(--color-fg); font-weight: 600; }
.ctx-empty { font-size: 12.5px; color: var(--color-fg-subtle); font-style: italic; padding: 2px 0; }

/* view-options menu (reuses .menu from essence) */
.viewopts__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border-radius: var(--radius-sm); }
.viewopts__row:hover { background: var(--color-bg-muted); }
.viewopts__row span { font-size: 13px; }

@media (max-width: 1240px) { .cal-context { display: none; } }

/* Дела — to-do list in the left rail (native Yandex feature) */
.todo-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.todo-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--radius-sm);
            cursor: pointer; font-size: 13px; color: var(--color-fg-muted); }
.todo-row:hover { background: var(--color-bg-muted); }
.todo-check { width: 15px; height: 15px; accent-color: var(--color-accent); flex: none; cursor: pointer; }
.todo-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-row.is-done .todo-title { text-decoration: line-through; color: var(--color-fg-subtle); }
.todo-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full);
              background: var(--color-danger-soft); color: var(--color-danger-text); flex: none; }
.todo-badge--today { background: var(--color-accent-soft); color: var(--color-accent-strong); }

/* production-calendar soft-red backgrounds (Yandex weekend/holiday shading) */
.tg__col--holiday { background: color-mix(in oklch, var(--color-danger) 4%, var(--color-bg)); }
.tg__daycol-head--holiday { background: color-mix(in oklch, var(--color-danger) 4%, var(--color-bg-elevated)); }
.mg__cell--holiday { background: color-mix(in oklch, var(--color-danger) 4.5%, var(--color-bg)); }
.mg__cell--holiday.mg__cell--weekend { background: color-mix(in oklch, var(--color-danger) 6%, var(--color-bg)); }

/* ============================================================================
   POWER FEATURES — off-hours shading · context menu · hover-peek · slots ·
   secondary TZ · overcommit meter · analytics. (Vimcal/Cron/Amie-class.)
   ========================================================================= */
.tg__offhours { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
                background: repeating-linear-gradient(-45deg, color-mix(in oklch, var(--color-fg) 3%, transparent) 0 6px, transparent 6px 12px); }
[data-theme="dark"] .tg__offhours { background: repeating-linear-gradient(-45deg, color-mix(in oklch, #000 30%, transparent) 0 6px, transparent 6px 12px); }

.event__vid { display: inline-block; vertical-align: -2px; opacity: .85; }
.event--recur .event__title::after { content: ""; }

/* right-click context menu */
.ctx-menu { position: fixed; z-index: var(--z-popover); min-width: 200px; padding: 6px;
            background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border-strong);
            border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); animation: pop-in var(--motion-duration-fast) var(--ease-pop); }
.ctx-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
                  border-radius: var(--radius-sm); font-size: 13px; color: var(--color-fg); text-align: left; }
.ctx-menu__item:hover { background: var(--color-bg-muted); }
.ctx-menu__item .icon { color: var(--color-fg-subtle); }
.ctx-menu__item--danger { color: var(--color-danger-text); }
.ctx-menu__item--danger:hover .icon { color: var(--color-danger-text); }
.ctx-menu__sep { height: var(--hairline-width); background: var(--color-border); margin: 5px 4px; }

/* hover-peek card */
.peek { position: fixed; z-index: var(--z-popover); width: 272px; display: flex; overflow: hidden;
        background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); pointer-events: none;
        animation: pop-in var(--motion-duration-fast) var(--ease-pop); }
.peek__bar { width: 4px; flex: none; }
.peek__body { padding: 11px 13px; min-width: 0; }
.peek__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.peek__row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-fg-muted); margin-top: 3px; }
.peek__join { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-accent-strong); margin-top: 7px; font-weight: 600; }

/* secondary timezone gutter */
.tg__tz2 { position: absolute; left: 0; width: 100%; text-align: center; font-family: var(--font-mono);
           font-size: 9px; color: var(--color-fg-subtle); }
.tg__gutter--tz2 { border-right: var(--hairline-width) solid var(--color-border); }
/* Вторая шкала времени включена настройкой — холсту нужна третья дорожка, иначе
   колонка часов чужого пояса встала бы поверх дней. */
.tg__canvas--tz2 { grid-template-columns: var(--cal-gutter-w) var(--cal-gutter-w) minmax(0, 1fr); }
.tg__tz2label { position: sticky; top: 0; font-size: 8px; letter-spacing: .06em; text-transform: uppercase;
                color: var(--color-fg-subtle); text-align: center; padding: 2px 0; }

/* Slots — availability-sharing mode (Vimcal/Cron) */
.cal-app.is-slots .tg__col { cursor: crosshair; }
.slot-block { position: absolute; left: 3px; right: 3px; border-radius: 7px; z-index: 5; cursor: pointer;
              background: color-mix(in oklch, var(--color-success) 22%, var(--color-bg-elevated));
              border: 1.5px dashed var(--color-success); color: var(--color-success-text);
              display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.slots-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast);
             display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: var(--radius-full);
             background: var(--color-fg); color: var(--color-bg-elevated); box-shadow: var(--shadow-pop);
             animation: toast-in var(--motion-duration-base) var(--ease-spring); }
.slots-bar b { font-family: var(--font-mono); }
.slots-bar__btn { font-weight: 700; color: var(--color-accent); padding: 6px 12px; border-radius: var(--radius-full); }
.slots-bar__btn:hover { background: color-mix(in oklch, var(--color-accent) 18%, transparent); }
.slots-bar__x { color: var(--color-bg-muted); padding: 4px; }

/* overcommit meter (Sunsama) in day/agenda toolbar */
.load-meter { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-fg-muted); }
.load-meter__bar { width: 96px; height: 6px; border-radius: 999px; background: var(--color-bg-muted); overflow: hidden; }
.load-meter__fill { height: 100%; border-radius: 999px; background: var(--color-success); transition: width var(--motion-duration-base) var(--motion-ease); }
.load-meter__fill.is-over { background: var(--color-danger); }

/* analytics mini-panel */
.stats { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-card { padding: 14px; border-radius: var(--radius-lg); border: var(--hairline-width) solid var(--color-border); background: var(--color-bg-elevated); }
.stat-card__n { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.stat-card__l { font-size: 12px; color: var(--color-fg-muted); margin-top: 2px; }
.stat-bar { display: flex; align-items: center; gap: 10px; }
.stat-bar__label { width: 130px; flex: none; font-size: 13px; }
.stat-bar__track { flex: 1; height: 10px; border-radius: 999px; background: var(--color-bg-muted); overflow: hidden; }
.stat-bar__fill { height: 100%; border-radius: 999px; }

/* ============================================================================
   SETTINGS page · calendar create/edit · sharing · import-export · appts
   (uses the real shell + component classes; layout helpers only)
   ========================================================================= */
.set-main { flex: 1; min-width: 0; overflow-y: auto; }
.set-wrap { max-width: 860px; margin: 0 auto; padding: 30px 30px 90px; }
.set-h1 { font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -.02em; }
.set-lead { color: var(--color-fg-muted); font-size: 14px; margin: 4px 0 26px; }
.set-lead--pending { display: inline-block; padding: 6px 12px; border-radius: var(--radius-md); background: var(--color-bg-muted); color: var(--color-fg-subtle); font-size: 13px; }
.set-section { scroll-margin-top: 20px; margin-bottom: 34px; }
.set-section > .card { padding: 4px 20px; }
.set-section__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 9px; }
.set-section__title .icon { color: var(--color-fg-subtle); }
.set-section__sub { color: var(--color-fg-subtle); font-size: 12.5px; margin: 0 0 14px; }
.set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.set-row:last-child { border-bottom: none; }
.set-row__text { min-width: 0; }
.set-row__label { font-size: 14px; font-weight: 500; }
.set-row__desc { font-size: 12.5px; color: var(--color-fg-subtle); margin-top: 3px; line-height: 1.5; }
.set-row__control { flex: none; display: flex; align-items: center; gap: 10px; }
/* General-settings form (§Общие): tokenised, inline-style-free controls. */
.set-row__sep { color: var(--color-fg-muted); }
.set-field--tz { width: 230px; }
.set-field--tz2 { width: 200px; }
.set-field--time { width: 120px; }
.set-errors { border-color: var(--color-danger); margin-bottom: 18px; }
.set-errors__text { margin: 0; font-size: 13px; color: var(--color-danger); }
.set-actions { display: flex; justify-content: flex-end; padding-top: 18px; }
.set-cal { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.set-cal:last-child { border-bottom: none; }
.set-cal__dot { width: 14px; height: 14px; border-radius: 5px; flex: none; }
.set-cal__name { flex: 1; font-size: 14px; font-weight: 500; }
.set-cal__role { font-size: 11.5px; color: var(--color-fg-subtle); }
.set-cal__actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--motion-duration-fast) var(--motion-ease); }
.set-cal:hover .set-cal__actions { opacity: 1; }
.set-appt { display: flex; align-items: center; gap: 14px; padding: 14px; border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 10px; }
.set-appt:hover { border-color: var(--color-border-strong); }
.set-appt__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent-strong); flex: none; }
.set-appt__main { flex: 1; min-width: 0; }
.set-appt__title { font-weight: 600; font-size: 14px; }
.set-appt__meta { font-size: 12px; color: var(--color-fg-muted); margin-top: 2px; }
.set-dropzone { border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: 26px; text-align: center; color: var(--color-fg-muted); font-size: 13.5px; transition: border-color var(--motion-duration-fast) var(--motion-ease); }
.set-dropzone:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }
.set-copyfield { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: var(--radius-md); background: var(--color-bg-muted); border: var(--hairline-width) solid var(--color-border); }
.set-copyfield input { flex: 1; border: none; background: none; font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-muted); min-width: 0; }
.set-color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.set-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; }
.set-swatch[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
/* recurring-edit scope + confirm dialogs (radio list in a modal) */
.scope-list { display: flex; flex-direction: column; gap: 2px; }
.scope-opt { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--radius-md); cursor: pointer; }
.scope-opt:hover { background: var(--color-bg-muted); }
.scope-opt input { accent-color: var(--color-accent); width: 16px; height: 16px; }
.conflict-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
               background: var(--color-warning-soft); color: var(--color-warning-text); }
.conflict-ic .icon { width: 21px; height: 21px; }
/* invite / RSVP + reschedule reuse .bk-* + booking layout; small extras: */
.rsvp-bar { display: flex; gap: 10px; }
.rsvp-bar .btn { flex: 1; }
.btn--rsvp-yes.is-on { background: var(--color-success); color: #fff; border-color: transparent; }
.btn--rsvp-maybe.is-on { background: var(--color-warning); color: #fff; border-color: transparent; }
.btn--rsvp-no.is-on { background: var(--color-danger); color: #fff; border-color: transparent; }
/* find-a-time availability grid */
.fat-grid { display: grid; gap: 1px; background: var(--color-border); border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.fat-cell { background: var(--color-bg-elevated); height: 26px; }
.fat-cell--busy { background: color-mix(in oklch, var(--color-danger) 24%, var(--color-bg-elevated)); }
.fat-cell--free { background: color-mix(in oklch, var(--color-success) 20%, var(--color-bg-elevated)); }
.fat-cell--pick { background: var(--color-accent); }
.fat-person { display: flex; align-items: center; gap: 8px; font-size: 12.5px; height: 27px; }
.fat-legend { display: flex; gap: 16px; font-size: 12px; color: var(--color-fg-muted); margin-top: 12px; }
.fat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fat-legend i { width: 12px; height: 12px; border-radius: 3px; }

/* ============================================================================
   NO-DEBT STATES — read-only/public · print · loading skeleton · empty
   ========================================================================= */
.cal-view { position: relative; }

/* read-only / public banner + disabled affordances */
.ro-banner { display: flex; align-items: center; gap: 10px; padding: 9px 16px; flex: none;
             background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: 13px; font-weight: 500;
             border-bottom: var(--hairline-width) solid var(--color-border); }
.ro-banner .icon { flex: none; }
.ro-banner b { font-weight: 700; }
.is-readonly .shell-compose, .is-readonly #slotsBtn, .is-readonly .cal-fab,
.is-readonly .cal-create__caret, .is-readonly .event__resize,
.is-readonly .shell-nav-label__add, .is-readonly #todoAdd { display: none !important; }
.is-readonly .tg__col, .is-readonly .mg__cell { cursor: default; }
.is-readonly .event, .is-readonly .chip-ev { cursor: pointer; }

/* empty-state overlay inside a view */
.cal-empty { position: absolute; inset: 0; display: grid; place-items: center; z-index: 8; background: var(--color-bg); }

/* loading skeleton (shimmer) */
@keyframes skel-sh { 0% { background-position: -240px 0; } 100% { background-position: calc(240px + 100%) 0; } }
.skel { background: linear-gradient(90deg, var(--color-bg-muted) 25%, color-mix(in oklch, var(--color-bg-muted) 55%, var(--color-bg-elevated)) 37%, var(--color-bg-muted) 63%);
        background-size: 240px 100%; animation: skel-sh 1.2s ease-in-out infinite; border-radius: 6px; }
.skel-wrap { flex: 1; display: flex; flex-direction: column; padding: 14px; gap: 12px; overflow: hidden; }
.skel-head { display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 8px; }
.skel-head .skel { height: 46px; }
.skel-body { flex: 1; display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 8px; }
.skel-col { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.skel-col .skel:nth-child(odd) { height: 54px; } .skel-col .skel:nth-child(even) { height: 38px; opacity: .7; }

/* print — hide chrome, expand the grid */
@media print {
  .shell-topbar, .shell-sidebar, .shell-apprail, .mobile-bottom-nav, .cal-fab,
  .cal-toolbar__right, .slots-bar, .ro-banner, .cal-context { display: none !important; }
  .cal-app, .cal-body, .cal-main, #main { height: auto !important; overflow: visible !important; display: block !important; }
  .cal-view[hidden] { display: none !important; }
  .tg__scroll, .ag, .yr, .mg { overflow: visible !important; height: auto !important; }
  .cal-toolbar { border-bottom: 1px solid #999; }
  body, .cal-app { background: #fff !important; }
  .tg__offhours { display: none; }
  @page { margin: 10mm; }
}
/* read-only popover: hide edit/dup/delete, keep view + join */
.ep--ro #epEdit, .ep--ro #epDup, .ep--ro #epDel { display: none !important; }

/* ============================================================================
   PAGE GLUE (порт page-level <style> концепта) — редактор-хост, kbd-оверлей,
   скоуп-диалоги, скрытие [hidden] строго внутри модуля.
   ========================================================================= */
.cal-page { display: contents; }
.cal-editor-host { position: fixed; top: 0; right: 0; bottom: 0; width: 468px; max-width: 96vw;
  z-index: var(--z-modal); transform: translateX(100%);
  transition: transform var(--motion-duration-base) var(--ease-spring); }
.cal-editor-host.is-open { transform: none; }
.kbd-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; }
.kbd-overlay .card { width: 640px; max-width: 96vw; max-height: 88vh; overflow: auto; }
.cal-stats-card { width: 580px; max-width: 96vw; max-height: 88vh; overflow: auto; }
.cal-search { max-width: 300px; }
.cal-page [hidden], .cal-editor-host[hidden], .kbd-overlay[hidden], .cmdk-overlay[hidden] { display: none !important; }

.cal-viewopts-menu { right: 0; top: calc(100% + 6px); min-width: 236px; }
.cal-sprite { position: absolute; }

/* Фаза 2: шаринг-диалог «Доступ и права» + share-кнопка в рельсе */
.cal-row { display: flex; align-items: center; gap: 2px; }
.cal-row .shell-nav__item { flex: 1; min-width: 0; }
.cal-row__share { flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; background: none; color: var(--color-fg-subtle); border-radius: var(--radius-sm);
  opacity: 0; cursor: pointer; transition: opacity var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; }
.cal-row:hover .cal-row__share, .cal-row__share:focus-visible { opacity: 1; }
.cal-row__share:hover { color: var(--color-accent); background: var(--color-bg-muted); }
.share-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.share-row__name { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-add { display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--color-border); }
.share-add .select { flex: 1; min-width: 0; }
.share-row .select, .share-add .select { padding: 6px 10px; font-size: 13px; width: auto; }
.cal-todo-input { padding: 4px 8px; font-size: 13px; }

/* Спрайтовые глифы #ci-* — line-иконки без собственных атрибутов: дефолт
   штриха задаём CSS-ом ТОЛЬКО для svg с <use> (инлайн-IconComponent несёт
   свои атрибуты и не задет). Без этого use-глифы заливаются чёрным fill-ом
   (UA-default) — заметно на замкнутых контурах (календарь в empty-state). */
.cal-app svg.icon:has(> use) {
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================================
   1:1 С ПРОТОТИПОМ: меню «Создать», альманах-чипы, погода/произв. в шапках,
   воркспейс-плашка. (Порт стилей concept calendar.css.)
   ========================================================================= */
.cal-create__caret { margin-left: auto; opacity: .8; }
.cal-create__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; padding: 6px;
                    background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
                    border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); z-index: var(--z-dropdown); }
.cal-create__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
                    border-radius: var(--radius-sm); font-size: 13.5px; color: var(--color-fg); text-align: left; }
.cal-create__item:hover { background: var(--color-bg-muted); }
.cal-create__item .icon { color: var(--color-fg-muted); flex: none; }
.cal-create__item small { display: block; font-size: 11px; color: var(--color-fg-subtle); font-weight: 400; }

.chip-ev--almanac { opacity: .85; font-style: normal; cursor: default; }

.tg__weather { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px;
               color: var(--color-fg-subtle); margin-top: 2px; }
.tg__weather .icon { width: 12px; height: 12px; }
.tg__daycol-head--holiday .tg__dow { color: var(--color-danger-text, #C2554D); }
.tg__short { margin-left: 4px; font-size: 9px; color: var(--color-warning-text, #8a6d1a);
             border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; }

/* Воркспейс-плашка прижата к низу рельса (флекс-колонка .shell-sidebar). */
.shell-sidebar .shell-ws { margin-top: auto; }

/* ---- Публичная запись (booking.html screen-2/3) — добор к bk-базе ------- */
.bk-datepicker { padding: 18px 20px 20px; }
.bk-datepicker .mini-cal__title { font-size: 15px; }
.bk-datepicker .mini-cal__grid { gap: 3px; }
.bk-datepicker .mini-cal__dow { font-size: 10.5px; padding-bottom: 8px; }
.bk-datepicker .mini-cal__day { font-size: 14px; }
.bk-datepicker .mini-cal__day:disabled { cursor: default; opacity: .35; }
.bk-slotscol { min-width: 0; }
.bk-slotscol__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.bk-slotscol__day { font-family: var(--font-display); font-weight: 600; font-size: 15px; text-transform: capitalize; }
.bk-slotscol__count { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-subtle); }
.bk-timeslot { height: 44px; border-radius: var(--radius-md); border: var(--hairline-width) solid var(--color-border);
               background: var(--color-bg-elevated); font-family: var(--font-mono); font-size: 13.5px;
               display: grid; place-items: center; transition: all var(--motion-duration-fast) var(--motion-ease); }
.bk-timeslot:hover { border-color: var(--color-accent); color: var(--color-accent-strong); transform: translateY(-1px); }
.bk-timeslot.is-selected { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-on); font-weight: 700; }
.tz-edit { font-weight: 600; color: var(--color-accent-strong); margin-left: 4px; }
.bk-intake { margin-top: 28px; opacity: 0; transform: translateY(12px);
             transition: opacity var(--motion-duration-slow) var(--motion-ease), transform var(--motion-duration-slow) var(--ease-spring); }
.bk-intake.is-shown { opacity: 1; transform: none; }
.bk-intake__summary { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 11px 14px;
                      border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-strong);
                      font-weight: 600; font-size: 13.5px; }
.bk-intake__fields { display: flex; flex-direction: column; gap: 16px; }
.bk-intake__actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.bk-empty-day { color: var(--color-fg-subtle); font-size: 13.5px; padding: 24px 0; text-align: center; }
.bk .icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Публичная запись — семантика строки услуги (вынос inline-стилей, audit 60). */
.bk-wrap--booking { max-width: 760px; }
.bk-service__name { color: var(--color-fg); font-weight: 600; }
.bk-service__price { color: var(--color-accent-strong); font-weight: 600; }
.bk-service__sep { opacity: .5; }
.bk-intake__card { margin: 0 auto; }
.bk-intake__note { margin: 0; }

/* ============================================================================
   PARTICIPANTS (организаторская сторона RSVP, Фаза 2 §11):
   чипы в редакторе + статус-точки/предложение времени в попапе
   ========================================================================= */
.ed__chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 9px;
            border-radius: var(--radius-full); background: var(--color-bg-muted);
            border: var(--hairline-width) solid var(--color-border); font-size: 12px; max-width: 100%; }
.ed__chip-act { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
                border-radius: 50%; color: var(--color-fg-subtle); cursor: pointer; flex: none; }
/* .icon--xs глобально не определён — без явного размера inline-svg раздувается до 300×150. */
.ed__chip-act .icon { width: 12px; height: 12px; }
.ed__chip-act:hover { background: color-mix(in oklch, var(--color-fg) 10%, transparent); color: var(--color-fg); }
.ep__rsvp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-fg-subtle); }
.ep__rsvp-dot--accepted { background: var(--color-success); }
.ep__rsvp-dot--declined { background: var(--color-danger); }
.ep__rsvp-dot--tentative { background: var(--color-warning, #d9a441); }
/* Длинное имя переносится — служебные элементы не должны месить строку. */
.ep__attendee { flex-wrap: wrap; row-gap: 2px; }
.ep__proposed { flex-basis: 100%; margin-left: 16px; font-size: 11px; color: var(--color-accent-strong); }

/* Пикер переговорки в попапе события */
.ep__room { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; margin-top: 6px;
            border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-md);
            background: var(--color-bg-elevated); cursor: pointer; font-size: 12.5px; text-align: left; }
.ep__room:hover:not([disabled]) { border-color: var(--color-border-strong); background: var(--color-bg-muted); }
.ep__room[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.ep__room-name { font-weight: 600; }
.ep__room-sub { color: var(--color-fg-muted); font-size: 11.5px; }
.ep__room-state { margin-left: auto; font-size: 11px; color: var(--color-danger-text); white-space: nowrap; }

/* ============================================================================
   RESOURCES PAGE (переговорки и ресурсы, Фаза 2 §12) — порт
   _agency/calendar/resources.html
   ========================================================================= */
.res-page { min-height: 0; }
.res-main { overflow-y: auto; }
.res-wrap { max-width: 820px; margin: 0 auto; padding: 26px 24px 90px; }
.res-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.res-head .set-h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.res-head .set-lead { color: var(--color-fg-muted); font-size: 13.5px; margin: 2px 0 0; }
.res-back { background: var(--color-bg-elevated); color: var(--color-fg);
            border: var(--hairline-width) solid var(--color-border-strong); box-shadow: none; }
.res-group { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
             color: var(--color-fg-subtle); font-family: var(--font-mono); margin: 24px 2px 12px; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.res-card { border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg); padding: 16px;
            background: var(--color-bg-elevated); box-shadow: var(--shadow-soft);
            transition: border-color var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-fast) var(--motion-ease); }
.res-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
.res-card__top { display: flex; align-items: flex-start; gap: 12px; }
.res-icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none;
            background: var(--color-accent-soft); color: var(--color-accent-strong); }
.res-icon .icon { width: 22px; height: 22px; }
.res-card__body { min-width: 0; flex: 1; }
.res-card__name { font-weight: 600; font-size: 15px; }
.res-card__sub { font-size: 12.5px; color: var(--color-fg-muted); margin-top: 1px; }
.res-card__admin { display: flex; gap: 2px; flex: none; }
.res-feat { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0; }
.res-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
            border-radius: var(--radius-full); background: var(--color-bg-muted); font-size: 11.5px; color: var(--color-fg-muted); }
.res-card__foot { display: flex; gap: 8px; align-items: center; padding-top: 12px;
                  border-top: var(--hairline-width) solid var(--color-border); }
.res-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.res-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.res-status--free .res-dot { background: var(--color-success); }
.res-status--free { color: var(--color-success-text); }
.res-status--busy .res-dot { background: var(--color-danger); }
.res-status--busy { color: var(--color-danger-text); }
.res-actions { margin-left: auto; display: flex; gap: 6px; }
.res-note { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--color-fg-muted);
            background: var(--color-bg-muted); border-radius: var(--radius-md); padding: 11px 13px; line-height: 1.5; margin-top: 2px; }
.res-note .icon { flex: none; width: 16px; height: 16px; color: var(--color-accent-strong); margin-top: 1px; }
.res-page .icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Диалоги страницы ресурсов (native <dialog>) */
.res-dialog { width: min(480px, calc(100vw - 32px)); border: var(--hairline-width) solid var(--color-border);
              border-radius: var(--radius-lg); background: var(--color-bg-elevated); color: var(--color-fg);
              box-shadow: var(--shadow-pop); padding: 20px; }
.res-dialog::backdrop { background: rgba(20,15,10,.4); backdrop-filter: blur(2px); }
.res-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.res-dialog__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.res-dialog__errors { background: color-mix(in oklch, var(--color-danger) 12%, var(--color-bg-elevated));
                      color: var(--color-danger-text); border-radius: var(--radius-md); padding: 10px 12px;
                      font-size: 12.5px; margin-bottom: 12px; }
.res-dialog .field { margin-bottom: 12px; }
.res-dialog__foot { display: flex; gap: 10px; margin-top: 16px; }
.res-dialog__list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; margin-top: 10px; }
.res-dialog__event { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; text-align: left;
                     border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-md);
                     background: var(--color-bg-elevated); cursor: pointer; }
.res-dialog__event:hover { border-color: var(--color-border-strong); background: var(--color-bg-muted); }
.res-dialog__event-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-fg-muted); }
.res-dialog__event-title { font-size: 13.5px; font-weight: 600; }

@media (max-width: 620px) { .res-grid { grid-template-columns: 1fr; } }