/* Styles for what the integration added on top of Astra's pages: the
   assigned room and the parent's clue on a hiding row, the preparation
   progress bar, the wand and floor choices on the setup forms, and the
   quiet loading states. Same palette, same rounded chips; loaded last. */

/* ---- hiding rows: room, spot, clue ---- */
.session-room {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
}
.session-room strong {
  display: block;
  font-size: 18px;
  color: var(--rose, #ab2444);
}
.session-room span {
  color: var(--muted, #526172);
  font-size: 14px;
}
.shared-hiding .session-clue,
.session-layout .session-clue {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid #d8b7c2;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 15px;
}
.shared-hiding .session-clue:focus {
  border-color: #ad2347;
  outline: none;
}

/* The row has no title line any more (the room and the instruction name the
   medallion, and so does the picture), so the picture aligns with the room. */
.shared-hiding .session-coin > img,
.session-layout .session-coin > img { margin-top: 2px; }

/* ---- preparation progress ---- */
.prepare-bar {
  height: 10px;
  margin: 28px 0 14px;
  border-radius: 999px;
  background: #f0dde5;
  overflow: hidden;
}
.prepare-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ab2444, #e0788f);
  transition: width .5s ease;
}
/* Working, position unknown.
 *
 * A determinate bar has to be told where it is, and for the long middle of a
 * prepare nothing tells it: the voicing phase reports through a poll that can
 * go quiet, and a bar frozen at 25% for a minute and then sprinting to the end
 * is a worse lie than no bar at all. Reported twice, 16 Sep: "loading is on
 * this status for a minute, then sprints to the end... if we can't do progress
 * well we should replace it with spinning loading".
 *
 * So when no reading has arrived for a while the bar stops claiming a
 * position and says only that something is happening, and it goes back to
 * being a real bar the moment a real reading arrives. */
.prepare-bar.unknown i {
  width: 40% !important;
  transition: none;
  animation: prepare-sweep 1.6s ease-in-out infinite;
}
@keyframes prepare-sweep {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(255%); }
}
@media (prefers-reduced-motion: reduce) {
  .prepare-bar.unknown i { animation-duration: 3.2s; }
}

/* ---- choice chips outside the settings panel (setup, prepare) ---- */
.setup-main .settings-choices,
.session-layout .settings-choices {
  border: 0;
  padding: 0;
  margin: 8px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.setup-main .settings-choices legend,
.session-layout .settings-choices legend {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.setup-main .settings-choices label,
.session-layout .settings-choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid #e4c3d1;
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}
.setup-main .settings-choices input,
.session-layout .settings-choices input {
  width: 16px;
  margin: 0;
  accent-color: #ad2347;
}
.setup-main .settings-choices label:has(:checked),
.session-layout .settings-choices label:has(:checked) {
  background: #f5dfe9;
  border-color: #ad2347;
}
.setup-nav li.skipped {
  opacity: .55;
}
.otp-field input {
  letter-spacing: .3em;
  font-size: 24px;
  max-width: 260px;
}
.session-layout .pet-field {
  display: block;
  margin-top: 18px;
}
.session-layout .pet-field span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* ---- settings ---- */
.settings-status.error { color: #ab2444; font-weight: 700; }
.settings-status.ok { color: #1f6b46; font-weight: 700; }
.settings-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.settings-help a { text-decoration: underline; }

/* ---- library notes and loading ---- */
.family-note {
  margin: 12px 0 0;
  font-size: 14px;
  opacity: .85;
}
.family-loading {
  min-height: 50vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px 20px;
}
.family-loading h1 { font-size: 28px; margin: 0 0 8px; }
.family-loading a { text-decoration: underline; }

/* The setup panel's error line doubles as a status line during onboarding. */
.setup-main .error:not(:empty) {
  margin-top: 14px;
}

/* ================= Setup page: plum brand pass (Asaf, 12 Sep) =================
   Target colours for the grown-ups' setup page, mapped onto the site's own
   tokens where one exists: plum = --ink (#452535), berry = #ad2347, cream =
   --paper (#fffaf3), pink sidebar = #f5dee7, secondary text = --muted. The
   values with no existing token (selected card, input chrome) are as given. */
.setup-shell { background: var(--paper); }
.setup-shell .setup-aside { background: #f5dee7; }
.setup-shell .setup-aside p,
.setup-shell .setup-nav li,
.setup-shell .setup-progress,
.setup-shell .floor-field,
.setup-shell .note,
.setup-shell #space-count { color: var(--muted); }
.setup-shell .setup-nav span { border-color: #b9a9b3; color: var(--ink); }
.setup-shell .setup-nav li.active { color: var(--ink); }
.setup-shell .setup-nav .active span,
.setup-shell .primary { background: #ad2347; border-color: #ad2347; color: #fff; }
.setup-shell .floor-toggle input,
.setup-shell .space-choice input,
.setup-shell .setup-main input[type=checkbox] { accent-color: var(--ink); }
.setup-shell .space-card { border-color: #d8ced3; background: #fffcfa; }
.setup-shell .space-card.selected { background: #f8f5f6; border-color: #b9a9b3; }
.setup-shell .edit-space { color: var(--ink); }
.setup-shell .add-space { color: var(--ink); border-color: #b9a9b3; }
.setup-shell .floor-field input,
.setup-shell .space-editor input,
.setup-shell .setup-main .field input,
.setup-shell .session-clue { background: #fffcfa; border-color: #d8ced3; color: var(--ink); }
.setup-shell .text-button,
.setup-shell a.text-button { color: var(--ink); }
.setup-shell .setup-aside-note { color: #ad2347; }


/* The header's sign-in link, pinned right.

   Five stylesheets have an opinion about this header and they do not agree.
   stage.css lays it out as a three-column grid and puts this link in column
   three; playful.css, which loads after it, replaces that with flex, and the
   grid-column has nothing to attach to. The brand element the middle column
   was sized for is not in the markup either. The result depended on which
   rule won, which is how a sign-in link ends up on the left.

   margin-left:auto works in flex regardless of how many siblings there are,
   and the grid-column still applies if a grid wins, so it is right either way.
   This file loads last on purpose. */
.header .nav-cta {
  margin-left: auto; grid-column: -2; justify-self: end;
  /* A LINK, the way it used to be. playful.css turns this into a red pill with
     a drop shadow, which makes signing in look like the loudest thing on the
     page -- louder than "Join the launch list", which is the actual campaign.
     Signing in is plumbing for somebody who already bought: it should sit
     quietly beside the nav and be found by the people looking for it. */
  background: none; color: inherit; box-shadow: none;
  padding: 0; border-radius: 0; gap: 10px; font-weight: 700;
}
/* Hover the way the nav beside it hovers: the word turns red. playful.css
   keeps a separate rule that paints a DARKER red behind it on hover, and
   killing the background on the base rule does not touch that one -- so the
   pill came back the moment a cursor landed on it, and dark red text on dark
   red is an item that disappears when you reach for it. Same colours the nav
   uses, so the row reads as one row. */
.header .nav-cta:hover { background: none; box-shadow: none; color: var(--rose); }
.home-page .header .nav-cta:hover { color: #ad2347; }

/* The last resort when a coin picture will not load: the glyph the content
   carries, in the space the picture would have taken, so the row does not
   reflow and a parent still has something to match against. */
.session-coin .session-sigil {
  width: 60px; height: 60px; display: grid; place-items: center;
  font-size: 30px; line-height: 1; margin-top: 2px;
  border-radius: 50%; background: #f4dfe8;
}
@media (max-width: 480px) {
  .session-coin .session-sigil { width: 42px; height: 42px; font-size: 22px; }
}

/* One tick for the whole list. Set apart from the rows: it is the end of the
   errand, not another line of it. */
.session-hid-all {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 4px;
  padding: 16px 18px; border: 1px solid #dbb6c6; border-radius: 16px;
  background: #fffaf4; cursor: pointer; font-size: 16px;
}
.session-hid-all input { width: 21px; height: 21px; flex: none; accent-color: #ad2347; margin: 0; }
.session-hid-all strong { display: block; font-weight: 800; }
.session-hid-all .hid-all-count { display: block; font-size: 13px; opacity: .65; margin-top: 2px; }
.session-hid-all:has(input:checked) { border-color: #b42650; background: #f8e8ee; color: #a2244a; }