/* /schedule/ (assets/schedule.js), over the split (split.css) and the New Year page's look (new-year.css: the way round,
   the night glass over the globe, the timeline): the labels on the pins, how each quarter of an hour does along the
   timeline, the meeting's length beside the line, the places and the meeting. */

/* How it does: green, everyone in working hours; amber, nobody asleep; night, somebody is. */
.sc-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #6b7aa8; }
.sc-dot.is-work { background: #45c26a; }
.sc-dot.is-edge { background: #f2a60c; }

/* MARK: Over the globe */

.sc-verdict .sc-dot { width: 12px; height: 12px; margin: 0 2px 0 4px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); }
.sc-verdict.is-work i { color: #8fe3a5; }
.sc-verdict.is-edge i { color: #ffd27a; }
.sc-verdict.is-night i { color: #b9c3ff; }

.sc-labels { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.sc-label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: rgba(10, 15, 32, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 16px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  will-change: transform;
}
.sc-label b { font-weight: 900; color: #ffd27a; font-variant-numeric: tabular-nums; }
/* a label lifted clear of another: a line down to its pin */
.sc-leader { position: absolute; left: 50%; top: 100%; width: 1px; margin-left: -0.5px; background: rgba(255, 255, 255, 0.5); text-decoration: none; }

/* MARK: The timeline */

.sc-heat { top: 50px; height: 7px; border-radius: 4px; }
.sc-heat.is-work { background: rgba(69, 194, 106, 0.95); }
.sc-heat.is-edge { background: rgba(242, 166, 12, 0.7); }
.sc-heat.is-night { background: rgba(255, 255, 255, 0.1); }
/* the buttons at either end, the time between */
.sc-dock #sc-earlier { justify-self: start; }
.sc-dock #sc-later { justify-self: end; }
/* the meeting: from the line, as long as it is */
.sc-band {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 86px;
  background: rgba(255, 210, 122, 0.14);
  border-right: 1px dashed rgba(255, 210, 122, 0.6);
  pointer-events: none;
}

/* MARK: The places */

.sc-place .row-title, .sc-add .row-title { display: flex; align-items: center; }
.sc-when b { font-size: 16px; }
.sc-state { font-weight: 800; }
.sc-state.is-work { color: var(--grass); }
.sc-state.is-edge { color: #b97c06; }
.sc-state.is-night { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc-state.is-edge { color: var(--sun); } }
.sc-x, .sc-plus {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}
.sc-x:hover { color: var(--coral); }
.sc-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-x-space { flex: none; width: 30px; }
.sc-plus { background: var(--accent); color: #fff; cursor: inherit; }
.sc-add:disabled { opacity: 0.55; cursor: default; }
.sc-add:disabled .sc-plus { background: var(--line); color: var(--muted); }
.sc-found { margin-top: 14px; }

/* A few big cities to add with a tap, under the places while there are few. */
.sc-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sc-ideas > span { color: var(--muted); font-size: 14px; font-weight: 800; margin-right: 2px; }
.sc-ideas .pill { border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; color: var(--ink); padding-left: 6px; }
.sc-ideas .pill img, .sc-ideas .pill > span { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.sc-ideas .pill:hover { box-shadow: 0 0 0 2px var(--accent); }

/* MARK: The meeting */

.sc-meeting { padding: 16px 18px 18px; }
.sc-lengths { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-lengths .pill { border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; color: var(--ink); }
.sc-lengths .pill[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: 0 3px 0 var(--accent-lip); }
.sc-summary { display: grid; gap: 2px; margin-top: 16px; }
.sc-summary b { font-size: 19px; font-weight: 900; }
.sc-summary span { color: var(--muted); font-size: 15px; font-weight: 700; }
.sc-meeting .actions { margin-top: 14px; }

@media (max-width: 420px) {
  .sc-when b { font-size: 14.5px; }
  .sc-x, .sc-x-space { width: 26px; }
  .sc-x { height: 26px; }
}