/* Окно встречи v2 — bottom sheets, side panel, toast (.sh-*). Owner: agent C.
   Needs tokens.css + base.css. Uses only their tokens and primitives (.btn, .chip, .icon-btn, .field, .input,
   .st, .fit-icon, .kbd, .vh, .ellipsis, .mono). */

/* ---------- scrim + sheet (< 900 px) ---------- */
.sh-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--t-sheet) var(--ease);
}
.sh-scrim.is-open { opacity: 1; }

.sh-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sheet);
  margin-inline: auto;
  max-width: 560px;            /* P3: centred on 600–899 px; full width below 560 */
  max-height: 88vh;
  max-height: 88dvh;           /* P24: ≤ 88 % of the screen */
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform var(--t-sheet) var(--ease);
  outline: none;
}
.sh-sheet.is-open { transform: translateY(0); }
.sh-sheet.is-dragging { transition: none; }

.sh-grab {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  width: 96px;
  height: 20px;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}
.sh-grab > span { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.sh-sheet.is-dragging .sh-grab { cursor: grabbing; }

/* ---------- side panel (≥ 900 px, inside D's #panel) ---------- */
.sh-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- view frame ---------- */
.sh-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sh-view[hidden] { display: none; }

.sh-head {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-2);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-2) var(--sp-1) var(--sp-4);
}
.sh-back {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0 0 var(--sp-1) calc(-1 * var(--sp-2));
  padding-inline: var(--sp-2) var(--sp-3);
}
.sh-head__text { min-width: 0; display: grid; gap: 2px; }
.sh-title {
  font: var(--fw-semibold) var(--fs-title)/var(--lh-tight) var(--f-ui);
  overflow-wrap: anywhere;
}
.sh-sub { font: var(--fw-regular) var(--fs-meta)/var(--lh-tight) var(--f-ui); color: var(--ink-2); }
.sh-close { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.sh-view--panel .sh-head { padding-top: var(--sp-3); }

.sh-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-1) var(--sp-4) var(--sp-4);
}

.sh-foot {
  position: sticky;            /* fallback if a host gives no definite height */
  bottom: 0;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 64px;
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--grid-line);
}
.sh-foot[hidden] { display: none; }
.sh-view--panel .sh-foot { padding-bottom: var(--sp-2); border-radius: 0 0 var(--r-sheet) var(--r-sheet); }

/* ---------- shared bits ---------- */
.sh-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sh-row[hidden] { display: none; }
.sh-row--split { justify-content: space-between; }

.sh-chips {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: thin;
  /* room for the 2 px focus ring + 2 px offset inside the scroller */
  padding: var(--sp-1);
  margin: calc(-1 * var(--sp-1));
}
.sh-chips--wrap { flex-wrap: wrap; overflow: visible; }
.sh-chips .chip { flex: none; }
.sh-chips[data-role="durs"] .chip { padding-inline: var(--sp-2); min-width: 3.25rem; }

.sh-sec { display: grid; gap: var(--sp-2); }
.sh-sec[hidden] { display: none; }
.sh-sec__title { font: var(--fw-semibold) var(--fs-meta)/var(--lh-tight) var(--f-ui); color: var(--ink-2); }

.sh-lead { font-size: var(--fs-meta); color: var(--ink-2); }

.sh-note {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: var(--sp-3);
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  border-left: 4px solid var(--line);
  font-size: var(--fs-body);
}
.sh-note[hidden] { display: none; }
.sh-note > svg { font-size: 1.125rem; margin-top: 1px; color: var(--warn); }
.sh-note[data-tone="ok"] { border-left-color: var(--fit-ok); }
.sh-note[data-tone="mid"] { border-left-color: var(--st-mid); }
.sh-note[data-tone="bad"] { border-left-color: var(--ink-2); }
.sh-note--warn { background: var(--warn-bg); border-left-color: var(--warn); color: var(--ink); }
.sh-why { font-size: var(--fs-meta); color: var(--ink-2); }
.sh-empty-text { color: var(--ink-2); }

/* ---------- meet: summary row (P24) ---------- */
.sh-sum {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
}
.sh-sum[hidden] { display: none; }
.sh-sum__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sh-verdict {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-weight: var(--fw-semibold);
}
.sh-when { font-size: var(--fs-meta); color: var(--ink-2); }
.sh-when .mono { color: var(--ink); font-weight: var(--fw-bold); }
.sh-shift { flex: none; display: flex; gap: var(--sp-1); }
.sh-shift__btn { padding-inline: var(--sp-2); font-family: var(--f-time); font-weight: var(--fw-bold); }
.sh-empty { display: grid; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-ctl); background: var(--surface-2); }
.sh-empty[hidden] { display: none; }

/* ---------- meet: cities ---------- */
.sh-cities { list-style: none; padding: 0; margin: 0; }
.sh-city {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 6.5rem;
  align-items: center;
  column-gap: var(--sp-3);
  min-height: var(--tap);
  padding-block: var(--sp-1);
  border-bottom: 1px solid var(--grid-line);
}
.sh-city:last-child { border-bottom: 0; }
.sh-city__name { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); font-weight: var(--fw-semibold); }
.sh-city__name > .ellipsis { max-width: 100%; }
.sh-city__real { font: var(--fw-regular) var(--fs-meta)/var(--lh-tight) var(--f-ui); color: var(--ink-2); max-width: 100%; }
.sh-home { display: inline-flex; align-self: center; font-size: 0.875rem; color: var(--ink-2); }
.sh-city__time { display: grid; justify-items: end; font-weight: var(--fw-medium); }
.sh-city__date { font: var(--fw-semibold) var(--fs-caption)/var(--lh-tight) var(--f-ui); color: var(--ink-2); }
.sh-city .st { justify-self: start; }

.sh-invite { font: var(--fw-regular) var(--fs-meta)/var(--lh-body) var(--f-time); resize: none; white-space: pre; overflow-x: auto; }

/* ---------- switch ---------- */
.sh-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  padding-block: var(--sp-1);
  border-radius: var(--r-ctl);
  font: var(--fw-medium) var(--fs-body)/var(--lh-tight) var(--f-ui);
  text-align: left;
}
.sh-switch[hidden] { display: none; }
.sh-switch__track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 2px solid var(--ink-2);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sh-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.sh-switch[aria-checked="true"] .sh-switch__track { background: var(--ink); border-color: var(--ink); }
.sh-switch[aria-checked="true"] .sh-switch__track::after { transform: translateX(18px); background: var(--surface); }

/* ---------- meet: footer actions ---------- */
.sh-copy { flex: 1 1 auto; min-width: 0; }
.sh-copy > span { overflow: hidden; text-overflow: ellipsis; }
.sh-cal { position: relative; flex: none; }
.sh-cal__btn { padding-inline: var(--sp-3); }
.sh-caret { font-size: var(--fs-meta); margin-left: 2px; }
.sh-cal__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--sp-2));
  z-index: 5;
  min-width: 17rem;
  max-width: calc(100vw - 24px);
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  box-shadow: var(--shadow-sheet);
}
.sh-cal__menu a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.sh-cal__menu a:hover { background: var(--surface-2); }
.sh-cal__menu a:not([href]) { color: var(--ink-2); }
.sh-share { flex: none; }
@media (max-width: 439px) {
  /* three actions on a phone: the copy label wins over its icon */
  .sh-foot:has(.sh-share) .sh-cal__text { display: none; }
  .sh-foot:has(.sh-share) .sh-cal__icon { display: inline-flex; }
}
.sh-cal__icon { display: none; font-size: 1.25rem; }

/* ---------- best: slots ---------- */
.sh-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sh-slot {
  display: grid;
  gap: var(--sp-1);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  text-align: left;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sh-slot:hover { background: var(--surface-2); border-color: var(--ink-2); }
.sh-slot__top { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); }
.sh-slot__date { font-weight: var(--fw-semibold); }
.sh-slot__time { font: var(--fw-bold) var(--fs-readout)/var(--lh-tight) var(--f-time); }
.sh-slot__you { font-size: var(--fs-meta); color: var(--ink-2); }
.sh-slot__verdict { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.sh-slot__cities { font-size: var(--fs-meta); color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- city ---------- */
.sh-hours { display: flex; align-items: end; gap: var(--sp-2); }
.sh-hours[hidden] { display: none; }
.sh-hours > .field { flex: 1 1 0; }
.sh-hours > .field > span { font: var(--fw-semibold) var(--fs-meta)/var(--lh-tight) var(--f-ui); color: var(--ink-2); }
.sh-hours__dash { padding-bottom: var(--sp-3); color: var(--ink-2); }
.sh-week .chip { min-width: 3rem; }

/* ---------- add ---------- */
.sh-search { position: relative; }
.sh-search__icon { position: absolute; left: var(--sp-3); top: 50%; translate: 0 -50%; display: flex; color: var(--ink-2); font-size: 1.125rem; pointer-events: none; }
.sh-search__input { padding-left: calc(var(--sp-3) + 1.125rem + var(--sp-2)); }
.sh-results { display: grid; gap: var(--sp-4); }
.sh-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sh-res {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-2);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-ctl);
  text-align: left;
}
button.sh-res:hover { background: var(--surface-2); }
.sh-res__name { grid-column: 1; font-weight: var(--fw-semibold); }
.sh-res__meta { grid-column: 1; font-size: var(--fs-meta); color: var(--ink-2); }
.sh-res.is-in .sh-res__name { color: var(--ink-2); }
.sh-res__badge { grid-column: 2; grid-row: 1 / span 2; font: var(--fw-semibold) var(--fs-caption)/var(--lh-tight) var(--f-ui); color: var(--ink-2); padding: 2px var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-pill); }
.sh-noresult { display: grid; gap: var(--sp-3); justify-items: start; color: var(--ink-2); }

/* ---------- help ---------- */
.sh-help { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--sp-3); }
.sh-help li::marker { color: var(--ink-2); font-weight: var(--fw-semibold); }
.sh-help .kbd, .sh-keys .kbd { font-size: var(--fs-caption); }
.sh-keys { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-3); margin: 0; align-items: baseline; }
.sh-keys dt { white-space: nowrap; }
.sh-keys dd { margin: 0; color: var(--ink-2); font-size: var(--fs-meta); }

/* ---------- toast (P32) ---------- */
.sh-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--a-bar-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: max-content;
  max-width: min(30rem, calc(100vw - 24px));
  min-height: 48px;
  padding: 2px var(--sp-1) 2px var(--sp-4);
  border-radius: var(--r-ctl);
  background: var(--toast-bg);
  color: var(--toast-ink);
  box-shadow: var(--shadow-handle);
  font: var(--fw-medium) var(--fs-body)/var(--lh-tight) var(--f-ui);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.sh-toast.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.sh-toast__text { padding-block: var(--sp-2); }
.sh-toast:not(:has(.sh-toast__btn:not([hidden]))) { padding-right: var(--sp-4); }
.sh-toast__btn {
  flex: none;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--sp-3);
  border-radius: 8px;
  color: var(--toast-link);
  font-weight: var(--fw-semibold);
}
.sh-toast__btn:hover { background: color-mix(in srgb, var(--toast-bg), var(--toast-ink) 12%); }
.sh-toast__btn:focus-visible { outline-color: var(--toast-link); }
@media (min-width: 900px) {
  .sh-toast { bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
}

@media (forced-colors: active) {
  .sh-sheet, .sh-toast, .sh-cal__menu { border: 1px solid CanvasText; }
  .sh-switch__track { forced-color-adjust: none; border-color: CanvasText; }
}