/* ==========================================================================
   ARC – die Demos zum Anfassen. Jede baut ein Stück echte App-Oberfläche
   aus dem ARC Lab nach (Kernquest-Stapel, Tages-Wolf, Zeit kaufen, Fokus,
   Analysen, Rangliste). Ohne JavaScript bleiben sie ruhige Standbilder.
   ========================================================================== */

/* --- Fotobühne: weichgezeichnete Landschaft hinter Glas ------------------
   Glas nur dort, wo ein Bild dahinter liegt (Lab Runde 11). Die Bilder sind
   die bgb-*-Fassungen aus dem Lab, 480 px, schon weich. */

.quest-demo,
.store-demo,
.stats-demo,
.social-demo {
  position: relative;
  isolation: isolate;
  padding: clamp(1rem, 3.5vw, 2rem);
  border-radius: var(--r-scene);
}
.demo-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.demo-glow--dusk {
  background-image: url("../assets/lab/bg/dusk.webp");
}
.demo-glow--lake {
  background-image: url("../assets/lab/bg/lake.webp");
}
.demo-glow--night {
  background-image: url("../assets/lab/bg/night.webp");
}
.demo-glow--dunes {
  background-image: url("../assets/lab/bg/dunes.webp");
}

/* --- Kernquest-Stapel ------------------------------------------------------ */

.quest-demo {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  color: #fff;
}
.quest-demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 0.35rem;
}
.quest-demo__label {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1;
}
.quest-demo__count {
  font-size: 1.85rem;
}

.quest-stack {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.quest-stack[hidden] {
  display: none;
}
.quest {
  position: relative;
  display: grid;
  gap: 0.55rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--quest-1), var(--quest-2) 55%, var(--quest-3));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 50px -28px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.quest__kicker {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.quest__title {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.45rem + 0.9vw, 2rem);
  line-height: 1.1;
  text-wrap: balance;
}
.quest__proof {
  display: none;
}
.quest__btn {
  justify-self: start;
  margin-top: 0.35rem;
}

/* Mit JavaScript: echter Wallet-Stapel – vorne die nächste Quest, dahinter
   die anderen als Kanten. Position kommt als data-pos aus home.js. */
.quest-stack.is-stacked {
  grid-template-areas: "stack";
  gap: 0;
  padding-bottom: 1.6rem;
}
.quest-stack.is-stacked .quest {
  grid-area: stack;
  align-self: stretch; /* alle gleich hoch, sonst verschwinden kurze Karten hinter langen */
  transform-origin: 50% 100%; /* hintere Karten schauen unten heraus */
  transition:
    transform 560ms var(--ease-expo),
    opacity 420ms var(--ease-out),
    filter 420ms var(--ease-out);
}
.quest-stack.is-stacked .quest[data-pos="0"] {
  z-index: 3;
}
.quest-stack.is-stacked .quest[data-pos="1"] {
  z-index: 2;
  transform: translateY(0.8rem) scale(0.94);
  filter: brightness(0.8);
}
.quest-stack.is-stacked .quest[data-pos="2"] {
  z-index: 1;
  transform: translateY(1.6rem) scale(0.88);
  filter: brightness(0.62);
}
.quest-stack.is-stacked .quest[data-pos="1"] > *,
.quest-stack.is-stacked .quest[data-pos="2"] > * {
  visibility: hidden;
}
.quest-stack.is-stacked .quest.is-gone {
  z-index: 4;
  transform: translate(118%, -4%) rotate(9deg);
  opacity: 0;
  pointer-events: none;
}

/* Beweis läuft: Knopf weicht, die Probe erscheint in der Karte. */
.quest.is-proving .quest__btn,
.quest.is-proven .quest__btn {
  display: none;
}
.quest.is-proving .quest__proof,
.quest.is-proven .quest__proof {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.25rem;
  margin-top: 0.35rem;
}
.proof__clock {
  font-size: 1.9rem;
}
.proof__unit {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.proof__bar {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.proof__bar > span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(0);
}
.proof__ai {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.proof__ai i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0.12rem;
  background: #fff;
  opacity: 0.25;
  animation: ai-step 900ms var(--ease-in-out) infinite;
}
.proof__ai i:nth-child(2) {
  animation-delay: 150ms;
}
.proof__ai i:nth-child(3) {
  animation-delay: 300ms;
}
@keyframes ai-step {
  40% {
    opacity: 1;
  }
}
.proof__ok {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}
.proof__ok::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--quest-done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2' fill='none' stroke='%230B1630' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.quest.is-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: inherit;
  animation: flash 380ms var(--ease-out) both;
  pointer-events: none;
}
@keyframes flash {
  from {
    opacity: 0.95;
  }
  to {
    opacity: 0;
  }
}

.quest-done {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0 1rem;
  text-align: center;
}
.quest-done[hidden] {
  display: none;
}
.quest-done__wolf {
  width: 11rem;
  height: auto;
  margin-bottom: -0.6rem;
}
.quest-done__text {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.6rem;
}
@media (prefers-reduced-motion: no-preference) {
  .quest-done:not([hidden]) > * {
    animation: rise-in 760ms var(--ease-expo) both;
  }
  .quest-done:not([hidden]) > :nth-child(2) {
    animation-delay: 90ms;
  }
  .quest-done:not([hidden]) > :nth-child(3) {
    animation-delay: 160ms;
  }
  .quest-done:not([hidden]) > :nth-child(4) {
    animation-delay: 240ms;
  }
}

/* --- Tages-Wolf -----------------------------------------------------------
   Bühne 4:5, Hügel auf 160 % Breite gezoomt, Kuppe bei 60 % der Höhe.
   Rechnung: Bildhöhe = 2,866 × Breite; Pfoten auf 62,6 %, Leinwand 58 %. */

.wolf-demo {
  display: grid;
  max-width: 30rem;
  width: 100%;
  margin-inline: auto;
}
.wolf-demo__scene {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-scene);
  overflow: hidden;
  background: var(--floor) url("../assets/lab/hill-night-sm.webp") no-repeat;
  background-size: 160% auto;
  background-position: 50% 21.43%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.wolf-demo__wolf {
  position: absolute;
  left: 20.96%;
  top: 16.92%;
  width: 58.08%;
  height: auto;
  opacity: 0;
  transition: opacity 180ms linear;
}
.wolf-demo__wolf.is-on {
  opacity: 1;
}
.wolf-demo__shadow {
  position: absolute;
  left: 32%;
  top: 59.85%;
  width: 36%;
  height: auto;
  opacity: 0.9;
}
.wolf-demo__panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.1rem;
  margin: -7.5rem 0.85rem 0;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--r-glass);
}
.wolf-demo__readout {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}
.wolf-demo__kicker {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 0.9;
}
.wolf-demo__day {
  font-size: 2.3rem;
}
.wolf-demo__phase {
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Regler: feine Spur wie der Bogen, gefüllter Teil weiß, Daumen als Kreis. */
.range {
  --p: 50%;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: pan-y;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #fff var(--p), rgba(255, 255, 255, 0.2) var(--p));
}
.range::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
}
.range::-moz-range-progress {
  height: 4px;
  border-radius: 4px;
  background: #fff;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: calc(-0.875rem + 2px);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-fast) var(--ease-out);
}
.range::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}
.range:focus-visible {
  outline: none;
}
.range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.range:focus-visible::-moz-range-thumb {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --- Segment-Umschalter (Glas-Kapsel, Auswahl = weiß) -------------------- */

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
}
.seg__btn {
  flex: 1;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}
.seg__btn:hover {
  background: rgba(255, 255, 255, 0.07);
}
.seg__btn[aria-selected="true"],
.seg__btn[aria-checked="true"] {
  background: #fff;
  color: #0b0b0d;
}
.seg--small .seg__btn {
  min-height: 2.5rem;
  font-size: 0.875rem;
}

/* --- Zeit kaufen ------------------------------------------------------------ */

.store-demo {
  max-width: 33rem;
  margin-inline: auto;
}
.time-sheet {
  display: grid;
  gap: 1.15rem;
  padding: 1.4rem 1.25rem 1.3rem;
  border-radius: var(--r-glass);
}
.time-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cookie-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cookie-amount img {
  width: 1.6rem;
  height: 1.6rem;
}
/* Raster und laufende Uhr liegen in DERSELBEN Zelle: das Blatt behält seine
   Höhe, nichts darunter springt beim Kaufen. */
.time-body {
  display: grid;
}
.time-grid,
.time-run {
  grid-area: 1 / 1;
}
.time-grid[hidden],
.time-run[hidden] {
  display: grid;
  visibility: hidden;
}
.time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}
.time-tile {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.3rem;
  min-height: 7.4rem;
  padding: 0.85rem 0.4rem;
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.time-tile:hover {
  background: rgba(255, 255, 255, 0.13);
}
.time-tile:active {
  transform: scale(0.96);
}
.time-tile[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.95);
  color: #0b0b0d;
}
.time-tile:disabled {
  opacity: 0.35;
  cursor: default;
}
.time-tile__min {
  font-size: 1.85rem;
}
.time-tile__unit {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.72;
}
.time-tile__cost {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.875rem;
  font-weight: 700;
}
.time-tile__cost img {
  width: 1.1rem;
  height: 1.1rem;
}
.time-sheet__cta {
  width: 100%;
}
.time-run {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.8rem;
  text-align: center;
}
.time-run__icon {
  width: 3.25rem;
  height: 3.25rem;
}
.time-run__clock {
  font-size: 3.3rem;
}
.time-run__text {
  color: var(--ink-soft);
  max-width: 18rem;
}

/* --- Fokus ------------------------------------------------------------------ */

.focus-demo {
  position: relative;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  aspect-ratio: 900 / 1612;
  border-radius: var(--r-scene);
  overflow: hidden;
  background: #0d0f14;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.focus-demo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.focus-ring {
  position: absolute;
  left: 7%;
  top: 6%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  width: 47%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.focus-ring__svg {
  position: absolute;
  inset: 7%;
  width: 86%;
  height: 86%;
  rotate: -90deg;
}
.focus-ring__track,
.focus-ring__bar {
  fill: none;
  stroke-width: 3;
}
.focus-ring__track {
  stroke: rgba(255, 255, 255, 0.16);
}
.focus-ring__bar {
  stroke: #fff;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s linear;
}
.focus-ring__time {
  font-size: clamp(1.45rem, 1rem + 1.6vw, 1.9rem);
}
.focus-ring__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.focus-demo__btn {
  position: absolute;
  left: 50%;
  bottom: 5%;
  translate: -50% 0;
  min-width: 11rem;
}

/* --- Analysen --------------------------------------------------------------- */

.stats-demo {
  max-width: 34rem;
  width: 100%;
  margin-inline: auto;
}
.stats-card {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem 1.35rem 1.25rem;
  border-radius: var(--r-glass);
}
.stats-card__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.stat {
  display: grid;
  gap: 0.6rem;
}
.stat--right {
  justify-items: end;
  text-align: right;
}
.stat__value {
  font-size: 3.2rem;
}
.stat__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.stat__label img {
  width: 1.3rem;
  height: 1.3rem;
}
.field {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: clamp(3px, 0.9vw, 6px);
}
.field__sq {
  aspect-ratio: 1;
  border-radius: 30%;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 260ms var(--ease-out), transform 360ms var(--ease-expo);
}
.field__sq.is-on {
  background: #fff;
}
.field__sq.is-today {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #fff;
}
.field__sq.is-lit {
  transform: scale(1.18);
}
.stats-card__chart svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart__area {
  fill: #fff;
  fill-opacity: 0.12;
}
.chart__line {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart__flag {
  fill: #fff;
}
.chart__stem {
  stroke: #fff;
  stroke-width: 1.5;
}
.chart__label {
  fill: rgba(255, 255, 255, 0.6);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
  .stats-card__chart.is-drawn .chart__line {
    stroke-dasharray: 1;
    animation: arc-draw 1200ms var(--ease-in-out) both;
  }
  .stats-card__chart.is-drawn .chart__area,
  .stats-card__chart.is-drawn .chart__flag-group {
    animation: fade-in 700ms var(--ease-out) 900ms both;
  }
}

/* --- Gemeinsam: Liga, Challenges, Chats ------------------------------------- */

.social-demo {
  max-width: 35rem;
  margin-inline: auto;
}
.social-sheet {
  display: grid;
  gap: 1.15rem;
  padding: 0.9rem;
  border-radius: var(--r-glass);
}
/* Alle Reiter liegen in DERSELBEN Zelle: das Blatt ist immer so hoch wie der
   längste Reiter, beim Umschalten springt nichts. */
.panels {
  display: grid;
}
.panel {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: 0.9rem;
}
.panel[hidden] {
  display: grid;
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .panel.is-entering {
    animation: rise-in 520ms var(--ease-expo) both;
  }
}

.gems {
  display: flex;
  gap: 0.15rem;
  margin-inline: -0.9rem;
  padding: 0.35rem 0.9rem 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.gems::-webkit-scrollbar {
  display: none;
}
.gem {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
  width: 4.6rem;
  padding: 0.25rem 0 0.35rem;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  scroll-snap-align: start;
}
.gem svg {
  width: 3.6rem;
  height: 3.6rem;
}
.gem.is-current {
  color: var(--ink);
}
.gem.is-locked svg {
  opacity: 0.62;
}
.gem.is-shaking svg {
  animation: gem-shake 420ms var(--ease-out);
}
@keyframes gem-shake {
  20% {
    transform: translateX(-4px) rotate(-6deg);
  }
  45% {
    transform: translateX(4px) rotate(5deg);
  }
  70% {
    transform: translateX(-2px) rotate(-2deg);
  }
}
.gem-hint {
  min-height: 1.4rem;
  margin-top: -0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: center;
}

.league-card,
.ch-card {
  position: relative;
  display: grid;
  gap: 0.45rem;
  padding: 1.15rem 1.2rem 1.2rem;
  border-radius: var(--r-card);
  color: #fff;
  overflow: hidden;
}
.league-card {
  background:
    linear-gradient(180deg, rgba(20, 10, 6, 0.32), rgba(20, 10, 6, 0.58)),
    url("../assets/lab/league-bronze.webp") center 60% / cover no-repeat;
}
.ch-card {
  background:
    linear-gradient(180deg, rgba(4, 12, 14, 0.2), rgba(4, 12, 14, 0.55)),
    url("../assets/lab/bg/lake.webp") center / cover no-repeat;
}
.league-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.league-card__kicker,
.ch-card__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.pill-time {
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.8125rem;
  font-weight: 600;
}
.league-card__name,
.ch-card__name {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  line-height: 1;
}
.league-card__nums {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 0.6rem;
}
.league-card__nums > span {
  display: grid;
  gap: 0.45rem;
  font-size: 2.4rem;
}
.league-card__xp {
  justify-items: end;
}
.league-card__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.league-card__foot,
.ch-card__meta {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.84);
}

.rank {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rank__row {
  display: grid;
  grid-template-columns: 1.4rem 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.6rem;
  padding: 0.5rem 1rem 0.5rem 0.9rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
}
.rank__row img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.rank__row--me {
  background: rgba(255, 255, 255, 0.95);
  color: #0b0b0d;
}
.rank__pos {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.62;
}
.rank__name {
  font-weight: 600;
}
.rank__val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}

.days {
  display: flex;
  gap: 7px;
  margin-top: 0.55rem;
}
.days__sq {
  width: 15px;
  height: 15px;
  border-radius: 4.5px;
  background: rgba(255, 255, 255, 0.22);
}
.days__sq.is-on {
  background: #fff;
}
.days__sq.is-today {
  background: transparent;
  box-shadow: inset 0 0 0 1.6px #fff;
}
.metric-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chat {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem 0.25rem 0.25rem;
}
.chat__sys {
  justify-self: center;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.chat__msg {
  max-width: 80%;
  padding: 0.65rem 0.95rem;
  border-radius: 20px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.chat__msg--them {
  justify-self: start;
  background: rgba(255, 255, 255, 0.11);
  border-bottom-left-radius: 6px;
}
.chat__msg--me {
  justify-self: end;
  background: #fff;
  color: #0b0b0d;
  border-bottom-right-radius: 6px;
}
.safe-list {
  display: grid;
  gap: 0.1rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}
.safe-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.2rem;
  border-top: 1px solid var(--line);
  font-weight: 500;
}
.safe-list img {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
}