/* 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; }
/* Delete account: out of the way under the account buttons, plain about what goes. */
.settings-delete { margin-top: 28px; padding-top: 18px; border-top: 1px solid #ead8df; }
.settings-delete-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: #ab2444; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.settings-delete-panel { display: grid; gap: 12px; margin-top: 14px; max-width: 600px; }
.settings-delete-panel[hidden] { display: none; }
.settings-delete-panel p { margin: 0; }
.settings-delete-go { border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 800; color: #fff; background: #ab2444; cursor: pointer; }
.settings-delete-go:disabled { opacity: .5; cursor: default; }
.settings-delete-panel .family-secondary { justify-self: start; }

/* ---- 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. */
/* ---- the hiding rows, compact (20 Sep) ---- */
/* Six rows in one screen: the coin, one sentence with the room as a
   dropdown, a clue icon, the tick. The select and the icon use the page's
   own borders and red; the row's height is the select's. */
.shared-hiding .session-coin,
.session-layout .session-coin {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  column-gap: 14px; row-gap: 0;
  align-items: center;
  padding: 10px 0;
  margin: 0;
}
.shared-hiding .session-coin > img,
.session-layout .session-coin > img {
  grid-row: auto; width: 44px; height: 44px; margin: 0; align-self: center;
}
.shared-hiding .session-what { grid-column: 2; min-width: 0; }
/* The sentences differ in length, so the sentence gets a fixed column and
   the dropdowns line up down the page. */
.shared-hiding .session-room { margin: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 6px 10px; }
.shared-hiding .session-say { flex: 0 0 150px; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shared-hiding .session-room-select { flex: 1 1 auto; min-width: 0; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shared-hiding .session-room-select,
.session-layout .session-room-select {
  width: auto; min-width: 0; max-width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid #d6aabc; border-radius: 12px; background: #fffcf7;
  color: #ab2444; font: 700 15px var(--sans);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ab2444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  cursor: pointer;
}
.shared-hiding .session-room-select:focus { outline: none; border-color: #ad2347; }
.shared-hiding .session-other,
.session-layout .session-other {
  display: block; width: min(100%, 320px); margin-top: 8px;
  padding: 8px 12px; border: 1px solid #d6aabc; border-radius: 12px;
  background: #fff; font: 15px var(--sans); color: var(--ink);
}
.shared-hiding .session-other[hidden] { display: none; }
.session-clue-btn {
  grid-column: 3;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #d6aabc; background: #fffcf7; color: #ab2444;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.session-clue-btn:hover { background: #f5dfe9; }
.session-clue-btn.has-clue { background: #ad2347; border-color: #ad2347; color: #fff; }
/* Clear secondary actions, using the family pages' warm rose palette. */
.shared-hiding .session-clue-btn {
  width: auto; height: auto; min-height: 44px; max-width: 190px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid #ddb6c4; color: #942344; background: #f3dce5;
  box-shadow: none;
  font: 700 14px var(--sans); white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.shared-hiding .session-clue-btn:hover { background: #ebcbd9; border-color: #c78fa5; }
.shared-hiding .session-clue-btn:active { box-shadow: none; }
.shared-hiding .session-clue-btn:focus-visible { outline: 3px solid #ad2347; outline-offset: 3px; }
.shared-hiding .session-clue-btn svg { flex: 0 0 17px; width: 17px; height: 17px; }
.shared-hiding .session-clue-btn.has-clue { background: #edf1e8; border-color: #c8d4bc; color: #415d42; box-shadow: none; }
.shared-hiding .session-clue-btn.has-clue:hover { background: #e1e8da; }
.session-clue-words { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shared-hiding .session-room-select { min-width: 124px; flex-shrink: 0; }
.shared-hiding .session-say { flex-basis: 130px; }
@media (max-width: 480px) {
  .shared-hiding .session-clue-btn { max-width: 44vw; padding: 10px 12px; font-size: 13px; }
}
/* how many Pip can help with */
.clue-meter { margin: 26px 0 22px; padding: 16px 18px; background: #ffffff; border: 1px solid #e8ded5; border-radius: 14px; }
.clue-meter p { margin: 0 0 12px; font-size: 15px; color: #b3203f; }
.clue-meter p span { color: #8a596b; font-weight: 600; }
.clue-meter i { display: block; height: 5px; border-radius: 99px; background: #eae3de; overflow: hidden; }
.clue-meter i b { display: block; height: 100%; border-radius: 99px; background: #ad2347; transition: width .4s ease; }
.clue-meter.all p { color: #2f7a4f; }
.clue-meter.all i b { background: #3f9a63; }
/* the one nudge before starting without them */
/* A character-led aside, not a second QR tile. */
.why-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 18px; padding: 16px;
  border: 1px solid #e8ded5; border-radius: 18px; background: #ffffff; color: var(--ink); }
.why-pip { position: relative;
  width: 112px; height: 112px; overflow: hidden; border-radius: 12px; background: #e2ebf5; }
.why-pip img { position: absolute; width: 200px; max-width: none; height: auto; left: -44px; top: 1px; }
.why-card .why-kicker { display: block; margin-bottom: 6px; font: 800 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #986379; }
.why-card strong { display: block; margin-bottom: 8px; font: 700 19px/1.2 var(--serif); color: var(--ink); }
.why-card p { margin: 0; font: 14px/1.55 var(--sans); color: #795568; }
.why-card .why-copy { min-width: 0; }
.why-card .why-copy .nowrap { white-space: nowrap; }   /* "Your hiding place. Her hints." wraps between the two, never inside */
.clue-dialog label { color: #795568; }
.clue-dialog .clue-ladder { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.clue-dialog .clue-ladder:empty { display: none; }
.clue-dialog .clue-ladder li { color: #ad2347; font-weight: 600; }
.clue-dialog .clue-ladder textarea {
  display: block; width: 100%; resize: vertical; min-height: 3.2em;
  padding: 10px 12px; border: 1px solid #bd8c9e; border-radius: 10px;
  background: #fff; color: var(--ink); font: 400 15px/1.4 var(--sans);
}
@media (max-width: 480px) {
  .shared-hiding .session-coin, .session-layout .session-coin {
    grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 10px;
  }
  .shared-hiding .session-coin > img, .session-layout .session-coin > img { width: 38px; height: 38px; }
  .shared-hiding .session-room { flex-wrap: wrap; }
  .shared-hiding .session-say { flex-basis: auto; white-space: normal; }
}

/* ---- take this plan to your phone (20 Sep) ---- */
/* A white card in the pink aside: the QR at the left, the words at the
   right. Same rounded corners and rose as the rest of the page. */
.handoff-card {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center;
  margin-top: 72px; padding: 16px; border-radius: 18px;
  background: #fffdf9; border: 1px solid #e8ded5; color: var(--ink);
}
.handoff-qr {
  width: 112px; height: 112px; padding: 8px; box-sizing: border-box; border-radius: 12px; background: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.handoff-qr img { width: 100%; height: 100%; display: block; }
.handoff-card strong { display: block; font-size: 17px; line-height: 1.25; margin-bottom: 6px; color: #ad2347; }
.handoff-card p { margin: 0; font-size: 13px; line-height: 1.5; color: #795568; }
.handoff-card small { display: block; margin-top: 4px; opacity: .7; }
.handoff-card.unavailable .handoff-qr { background: #f5e6ec; }
@media (max-width: 850px) { .handoff-card { display: none; } }   /* a phone does not need a code for a phone */

/* ---- the phone page ---- */
/* Six rows, the title and one button in one screen with no scrolling
   (Asaf, 20 Sep), then roomier: a wider gap under the title, larger type,
   and no ruled lines between rows, since the dropdown boxes already mark
   where one coin ends and the next begins. The clue bubble sits level
   with the dropdown. */
.hide-page { max-width: 560px; margin: 0 auto; padding: 22px 5vw 28px; }
.hide-page h1 { font: 500 32px/1.1 var(--serif); margin: 0 0 22px; }
.hide-page .shared-hiding { margin: 0 0 18px; }
.hide-page .session-coin { grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 12px; padding: 9px 0; align-items: end; border-bottom: 0; }
.hide-page .session-coin > img { width: 42px; height: 42px; align-self: center; }
.hide-page .session-room { flex-wrap: wrap; gap: 5px 8px; }
.hide-page .session-say { flex-basis: 100%; font-size: 16px; white-space: normal; }
.hide-page .session-room-select { max-width: none; padding: 10px 32px 10px 12px; font-size: 16px; background-position: right 11px center; }
.hide-page .session-other { font-size: 16px; }
.hide-page .session-clue-btn { width: 42px; height: 42px; align-self: end; }
.hide-page .settings-status:empty { display: none; }
.hide-page .hide-done-btn { width: 100%; justify-content: center; padding: 16px 24px; font-size: 17px; border-radius: 26px; margin-top: 6px; }
.hide-done { text-align: center; padding-top: 60px; }
.hide-done .family-secondary { margin-top: 20px; }

/* Two coins in one room while a room sits empty (onboarding.js roomTwins).
   A note, never a stop: 22 Sep. */
.shared-hiding .session-twin {
  margin: 4px 0 0; font-size: 12.5px; line-height: 1.35;
  color: #9a5b00;
}

/* The floor is a dropdown now (onboarding.js floorSelect), styled as the
   text box it replaced. */
.floor-field select,
.setup-shell .floor-field select {
  min-width: 0; width: 100%; padding: 10px; border: 1px solid #d0a6b5;
  border-radius: 8px; background: #fffaf7; color: #432335; font: inherit;
}
/* 24 Sep: on a tablet, point at the keyboard's own microphone. */
.clue-dialog .clue-say { margin: 8px 0 0; font-size: 14px; color: #795568; }

/* Pip learning the names while the parent hides (24 Sep). */
.prep-strip { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px;
  border-radius: 12px; background: #fff6e3; border: 1px solid #efd9a8; color: #6b4a14; }
.prep-strip span { font-weight: 600; }
.prep-strip small { color: #8a6a34; }
.prep-strip .prepare-bar { margin: 0; }
.family-play[disabled] { opacity: .55; cursor: default; }

/* the full-screen button (29 Sep): bottom right, as in the adventure; readable on the light pages and the dark ones */
.site-fs{position:fixed;right:16px;bottom:16px;z-index:60;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(18,43,70,.62);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 4px 14px rgba(8,26,42,.25);opacity:.8;transition:opacity .25s,transform .2s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.site-fs[hidden]{display:none}
.site-fs:hover{opacity:1;transform:scale(1.06)}
.site-fs .fs-contract{display:none}
.site-fs.is-full .fs-expand{display:none}
.site-fs.is-full .fs-contract{display:inline}
/* a phone: the clue pill gets its own line under the room, full words */
@media (max-width: 480px) {
  .shared-hiding .session-clue-btn { grid-column: 2 / -1; justify-self: start; margin-top: 8px; max-width: 100%; }
  .shared-hiding .session-room-select { min-width: 0; flex-shrink: 1; }
}

/* Optional phone handoff stays secondary to finishing setup here. */
.handoff-card .handoff-kicker { display: block; margin: 0 0 6px; color: #8d6877;
  font: 800 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.handoff-card strong { color: var(--ink); }
@media (max-width: 850px) {
  .why-card { display: none; }
}

.session-layout .why-card { margin-top: 40px; }
.why-card + .handoff-card { margin-top: 16px; }
@media (max-width: 480px) { .clue-meter { margin: 22px 0 18px; padding: 14px; } .clue-meter p span { display: block; margin-top: 4px; } }

/* 1 Oct, Asaf on the tablet ("Hide a little magic"): a long room name pushed its drop-down under the
   "where exactly" button. The drop-down shrinks (a long name ends in an ellipsis) and, when the sentence and
   it no longer fit side by side, goes under the sentence: never under the button. */
.shared-hiding .session-room { flex-wrap: wrap; }
.shared-hiding .session-room-select { flex: 1 1 120px; min-width: 0; flex-shrink: 1; max-width: 100%; }

/* 8 Oct: in the iPad app the app is the full screen: no full-screen buttons */
html.in-app .site-fs{display:none!important}

/* Pip's hero films: their edges fade into the page, so a video's colour
   handling (BT.709 shows a shade lighter than CSS on Macs) can never draw
   a band against the background. */
.play-stage .pip-film {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px, #000 calc(100% - 80px), transparent 100%), linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 140px, #000 calc(100% - 80px), transparent 100%), linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-composite: intersect;
}

/* 26 Oct, App Review: in the iPad app, nothing points at the launch list or Kickstarter. A store app
   saying "coming soon" reads as a pre-launch app (2.2) and as sending buyers elsewhere (3.1.1). The app
   keeps "I have a kit" and sign-in; the website keeps all of it. */
html.in-app a[href="#get-kit"],
html.in-app .stage-left > .stage-kicker,
html.in-app .home-launch:not(.launch-closing),
html.in-app .launch-closing-invitation,
html.in-app #launch-dialog{display:none!important}