/* Окно встречи v2 — look "Тихая таблица": component styles that tokens alone cannot express.
   Loaded LAST (after base/grid/sheets/app.css). Source and reasoning: ../ui-concept/UI-PROPOSAL.md §6. */

/* ---------- primitives ---------- */
.btn { border-radius: var(--r-ctl); }
.btn--ghost { border-color: var(--line); background: var(--surface); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--primary { box-shadow: var(--shadow-card); }
.chip { border-color: var(--line); }
.input { background: var(--surface); border-color: var(--line); }
.input:hover { border-color: color-mix(in srgb, var(--line), var(--ink) 25%); }

/* ---------- top bar: CRM-style pill search with a leading magnifier ---------- */
.a-quick::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  background: var(--ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}
.a-quick__input {
  padding-left: 42px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border-color: var(--line);
}
.a-quick__clear { border-radius: var(--r-pill); }
.a-top .icon-btn, .a-days .icon-btn { border-radius: var(--r-pill); }
.a-pick-toggle { border-radius: var(--r-pill); border-color: var(--line-soft); background: var(--surface); }
.a-panel-toggle { font-size: 1.25rem; }
.a-menu { border-color: var(--line-soft); box-shadow: var(--shadow-pop); padding: var(--sp-2); }

/* ---------- city strip: outline pills; an added city is a soft green pill (CRM "Работает") ---------- */
.a-pick__chip {
  border-color: var(--line-soft);
  background: var(--surface);
}
.a-pick__chip:hover { background: var(--surface-2); border-color: var(--line); }
.a-pickbtn { border-color: var(--line-soft); box-shadow: var(--shadow-card); }

/* day switcher: one quiet pill */
.a-dayctl__label { border-radius: var(--r-pill); border-color: var(--line-soft); background: var(--surface); }
.a-dayctl .icon-btn { border-radius: var(--r-pill); }
.a-days__now { border-radius: var(--r-pill); }

/* ---------- desktop cards (grid + "Встреча" panel) on the grey canvas ---------- */
@media (min-width: 900px) {
  .a-main, .a-panel {
    border-color: var(--line-soft);
    box-shadow: var(--shadow-card);
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .a-app { box-shadow: 0 0 0 1px var(--line-soft); }
}
.a-main { border-top-color: var(--line-soft); }

/* ---------- grid: header row like the CRM table header, cells as soft tiles ---------- */
.g-head, .g-head-rail, .g-col-head { background: var(--head-bg); }
.g-head { border-bottom-color: var(--line-soft); }
.g-col-head { border-left-color: var(--line-soft); }
button.g-col-head:hover { background: color-mix(in srgb, var(--head-bg), var(--ink) 5%); }
.g-h-name { letter-spacing: -0.005em; }
.g-h-now { font-weight: var(--fw-medium); }

.g-col { border-left-color: var(--cell-gap); }
.g-cell { border-bottom-color: var(--cell-gap); font-weight: var(--fw-medium); }
.g-fit { border-left-color: var(--cell-gap); }

/* hover row: a hairline; the chosen slot has the 2 px blue outline (--sel-line) */
.g-hover, .g-hover--rail {
  border-width: 1px;
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.g-hover--rail { border-right: 0; }
.g-band { background: var(--sel-bg); border-radius: 0 var(--r-cell) var(--r-cell) 0; }
.g-band--rail { border-radius: var(--r-cell) 0 0 var(--r-cell); }

/* "now": red line with a dot at the rail edge, like calendar apps */
.g-now--rail::before {
  content: "";
  position: absolute;
  right: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--now);
}
.g-now-label { font-weight: var(--fw-bold); letter-spacing: .01em; }

.g-readout { border-top-color: var(--line-soft); }
.g-ro { border-left-color: var(--line-soft); }
.g-ro-start { letter-spacing: -0.01em; }
.g-handle-pill { letter-spacing: 0; }
.g-jump { box-shadow: var(--shadow-pop); }

/* ---------- "Встреча" panel and sheets ---------- */
.sh-city { border-bottom-color: var(--line-soft); }
.sh-city .st {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--st-bad-bg);
}
.sh-city .st[data-st="work"] { background: var(--st-ok-bg); }
.sh-city .st[data-st="early"], .sh-city .st[data-st="late"] { background: var(--st-mid-bg); }
.sh-slot { border-color: var(--line-soft); box-shadow: var(--shadow-card); }
.sh-slot:hover { border-color: var(--line); }
.sh-note { border-left-width: 3px; }
.sh-foot { border-top-color: var(--line-soft); }
.sh-cal__menu { border-color: var(--line-soft); box-shadow: var(--shadow-pop); }
.sh-res__badge { border-color: var(--line-soft); background: var(--surface-2); }

/* ---------- phone bottom bar ---------- */
.a-bar { border-top-color: var(--line-soft); }
/* both bottom actions: one size and one shape (pill, 44 px), no shadow; "Назначить" differs by its fill only */
.a-bar .btn { border-radius: var(--r-pill); box-shadow: none; }
.a-bar .btn--ghost { background: var(--surface); border-color: var(--line); }

@media (forced-colors: active) {
  .a-quick::before { background: CanvasText; }
}