/* Content layer: matte, opaque, readable. No glass below this line - the
   material belongs to the navigation and control layer only. */

/* Panels and rows -------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5) 10px;
}

.panel-note {
  font-size: 12.5px;
  color: var(--ink-3);
}

.rows {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: stretch;
  gap: var(--s4);
  width: 100%;
  padding: 13px var(--s5);
  border: 0;
  border-top: 1px solid var(--hairline);
  background: none;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.rows > .row:first-child {
  border-top: 0;
}

.row:active {
  background: var(--surface-muted);
}

.row.is-static {
  cursor: default;
}

.row-lead {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 52px;
  gap: 1px;
}

.row-time {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.row-time-end {
  font-size: 12px;
  color: var(--ink-3);
}

.row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.row-title {
  font-size: 14.5px;
  font-weight: 570;
  letter-spacing: -0.008em;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.row-meta span {
  overflow-wrap: anywhere;
}

.row-tail {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--ink-3);
}

.row-tail svg {
  width: 18px;
  height: 18px;
}

.row.is-past .row-title,
.row.is-past .row-time {
  color: var(--ink-3);
}

/* A coloured left border on a row is a side-stripe cliche. State is carried
   by a marker dot plus a text label instead. */
.marker {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.marker.is-live { background: var(--live); }
.marker.is-warn { background: var(--warn); }

/* Chips, badges, pills --------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.badge.is-accent {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.badge.is-live {
  background: var(--live-soft);
  color: var(--live);
}

.badge.is-warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.badge.is-soon {
  background: var(--surface-sunken);
  color: var(--ink-3);
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 620;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.btn:active {
  transform: scale(0.975);
}

.btn-primary {
  background: var(--accent-strong);
  color: var(--ink-on-accent);
}

.btn-quiet {
  background: var(--surface-muted);
  color: var(--accent-ink);
}

.btn svg {
  width: 17px;
  height: 17px;
}

@media (hover: hover) and (pointer: fine) {
  .row:hover {
    background: var(--surface-muted);
  }

  .btn-primary:hover {
    background: var(--accent-ink);
  }

  .btn-quiet:hover {
    background: var(--accent-soft);
  }
}

/* Segmented control - a control, therefore glass, and it reuses the very same
   selection lens component as the navigation island. */
.segmented {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  --rim: 7px;
}

.seg {
  position: relative;
  flex: 1 1 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 570;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.seg:active {
  transform: scale(0.97);
}

.seg[aria-selected="true"] {
  color: var(--accent-ink);
  font-weight: 660;
}

.segmented .lens {
  border-radius: var(--r-pill);
}

/* Filter chips wrap rather than scroll: a filter half hidden off-screen is a
   filter the user never finds. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 2px 0;
}

.chip {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.chip:active {
  transform: scale(0.97);
}

.chip[aria-pressed="true"] {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--ink-on-accent);
  font-weight: 640;
}

.chip-count {
  margin-left: 6px;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

/* Search ----------------------------------------------------------------- */
.search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  min-height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-3);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.search:focus-within {
  border-color: var(--accent);
}

.search svg {
  flex: none;
  width: 17px;
  height: 17px;
}

.search input {
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 44px;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}

.search input::placeholder {
  color: var(--ink-3);
}

/* Toggle ----------------------------------------------------------------- */
.switch {
  flex: none;
  width: 50px;
  height: 30px;
  padding: 3px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}

.switch[aria-checked="true"] {
  background: var(--accent-strong);
}

.switch-knob {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 1px 3px rgba(72, 42, 64, 0.28);
  transform: translate3d(0, 0, 0);
  transition: transform var(--dur) var(--ease-out);
}

.switch[aria-checked="true"] .switch-knob {
  transform: translate3d(20px, 0, 0);
}

/* Text blocks ------------------------------------------------------------ */
.prose {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 68ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 62ch;
  text-wrap: pretty;
}

/* States ----------------------------------------------------------------- */
.state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: var(--s6) var(--s5);
}

.state-title {
  font-size: 16px;
  font-weight: 640;
  letter-spacing: -0.012em;
}

.state-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
  text-wrap: pretty;
}

.state-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-control);
  background: var(--accent-tint);
  color: var(--accent-ink);
}

.state-mark svg {
  width: 21px;
  height: 21px;
}

.state.is-error .state-mark {
  background: var(--warn-soft);
  color: var(--warn);
}

.failure {
  max-width: 420px;
  margin: 12vh auto 0;
}

/* Popover and sheet ------------------------------------------------------ */
.popover {
  position: fixed;
  z-index: var(--z-sheet);
  width: min(360px, calc(100vw - 32px));
  max-height: min(60dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
  padding: var(--s4);
  --rim: 8px;
  animation: pop-in var(--dur) var(--ease-out) both;
  transform-origin: var(--pop-origin, top right);
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.94) translate3d(0, -6px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sheet {
  position: fixed;
  left: max(10px, var(--safe-l));
  right: max(10px, var(--safe-r));
  bottom: calc(10px + var(--safe-b) + var(--tg-bottom));
  z-index: var(--z-sheet);
  max-height: 72dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-island);
  padding: var(--s3) var(--s4) var(--s5);
  --rim: 10px;
  animation: sheet-in var(--dur) var(--ease-out) both;
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sheet-grip {
  width: 38px;
  height: 4px;
  margin: 2px auto 12px;
  border-radius: var(--r-pill);
  background: var(--hairline-strong);
}

.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: 10px;
}

.overlay-title {
  font-size: 15px;
  font-weight: 660;
  letter-spacing: -0.012em;
}

.notice {
  display: flex;
  gap: 11px;
  padding: 11px 12px;
  border-radius: var(--r-row);
  background: rgba(255, 253, 253, 0.72);
}

.notice + .notice {
  margin-top: 6px;
}

.notice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notice-title {
  font-size: 13.5px;
  font-weight: 600;
}

.notice-text {
  font-size: 12.5px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .popover,
  .sheet {
    animation-duration: 1ms;
  }

  .switch-knob,
  .row,
  .btn,
  .chip,
  .seg {
    transition-duration: 1ms;
  }
}

.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seg:disabled {
  opacity: 0.38;
  cursor: default;
}

.segmented.is-nav {
  flex: none;
  gap: 0;
}

.segmented.is-nav .seg {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 34px;
  padding: 0 8px;
}

button.notice {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

button.notice:active {
  transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
  button.notice:hover {
    background: rgba(255, 253, 253, 0.95);
  }
}

.search select {
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 44px;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  appearance: none;
  cursor: pointer;
}

/* Touch targets. The visual symbol may stay compact, but every control answers
   to at least 44x44 - on every pointer type, not only on touch. */
.chip,
.seg,
.switch,
.block-link,
.day {
  position: relative;
}

.chip::after,
.seg::after,
.switch::after,
.block-link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translate(-50%, -50%);
}