/* Possibility Spaces: site styles on top of the Swarm event design system.
   Colours come only from its tokens; npm run check rejects colour literals here. */

/* ---------- chrome ---------- */

.wrap.wide { max-width: 1180px; }

/* doc.css hides its .site label on phones, so the event label gets its own class. */
.topbar .where {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  line-height: 1.35;
}

/* ---------- landing ---------- */

.intro { margin-bottom: var(--space-5); }
.intro h1 { margin-bottom: var(--space-3); }
.intro .lead { margin: 0; }

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

:where(body.doc) .cards { padding-left: 0; }
:where(body.doc) .cards li { margin: 0; }

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--rule);
  color: var(--fg);
  text-decoration: none;
}

.card:hover { border-color: var(--edge); }

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.card-num {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Status pills are monochrome: orange is kept for headlines, links and small labels. */
.status {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg);
  border: 1px solid var(--edge);
  border-radius: 2em;
  padding: .1em .65em;
  white-space: nowrap;
}

:where(body.doc) .card h2 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: var(--space-3) 0 var(--space-2);
  padding: 0;
  border: 0;
}

.card .hook {
  flex: 1;
  margin: 0 0 var(--space-3);
  font-size: .9375rem;
  line-height: 1.45;
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--muted);
}

.card .go {
  font-family: var(--mono);
  color: var(--muted);
  line-height: 1;
}

/* Where to go next at Devcon, for visitors who never open a card. */
.card-next {
  margin: 0 0 var(--space-3);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--accent-text);
}

/* ---------- wide screens: laptop and tablet ---------- */

@media (min-width: 960px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

/* Short landscape screens, like a tablet with the browser's own bars: keep all six cards in view. */
@media (min-width: 960px) and (max-height: 720px) {
  :where(body.doc) main { padding-top: var(--space-4); }
  .intro { margin-bottom: var(--space-4); }
  :where(body.doc) .intro h1 { font-size: 2rem; margin-bottom: var(--space-2); }
  .card { padding: var(--space-3) var(--space-4); }
  :where(body.doc) .card h2 { font-size: 1.125rem; margin: var(--space-2) 0 var(--space-1); }
  .card .hook { margin-bottom: var(--space-2); }
  .card-next { margin-bottom: var(--space-2); }
}

/* ---------- space pages ---------- */

/* Back links are big enough to hit with a thumb. */
.back {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--fg);
  text-decoration: none;
}

.topbar .back { margin-left: auto; font-size: .9375rem; }

/* minmax(0, …) lets the column stay screen-wide when it holds a long unbroken word, like an address. */
.space {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.space-head .eyebrow { margin: 0 0 var(--space-3); }
:where(body.doc) .space-head h1 { margin: 0 0 var(--space-3); }
:where(body.doc) .space-head .subtitle { margin: 0 0 var(--space-2); font-size: 1.1875rem; line-height: 1.45; }

/* Points to At Devcon from the first screen; the section itself stays near the end. */
/* Phones show the one under the subtitle; wide screens the one atop the right column. */
.space-right > .devcon-jump { display: none; }

.devcon-jump {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--space-4);
  font-size: .875rem;
}

.space-demo {
  padding: var(--space-5);
  background: var(--surface);
  border-left: 2px solid var(--accent);
}

.space-demo .label { margin-bottom: var(--space-2); }
.space-demo p:last-child { margin-bottom: 0; }

/* A demo's one action: a plain bordered button like the 01 live check, as orange stays off buttons. */
.demo-action { margin-top: var(--space-4); }

.action {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  border: 1px solid var(--edge);
}

.action:hover { border-color: var(--fg); }

.label {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}

.space-right > * { margin: 0; }
.space-right > * + * { margin-top: var(--space-6); }
:where(body.doc) .space-right section > :last-child { margin-bottom: 0; }

details.bts { border: 1px solid var(--rule); }

details.bts > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

details.bts > summary::-webkit-details-marker { display: none; }
details.bts > summary::after { content: "+"; color: var(--muted); font-size: 1.1rem; }
details.bts[open] > summary::after { content: "−"; }
details.bts > .bts-body { padding: 0 var(--space-4) var(--space-4); }
details.bts .label { margin-top: var(--space-5); }
details.bts .label:first-child { margin-top: 0; }

.note .note-mark { white-space: normal; }
/* A long address in a note wraps instead of pushing a phone screen sideways. */
.note p { min-width: 0; }

:where(body.doc) ul.links { list-style: none; padding: 0; }
:where(body.doc) ul.links li { margin-bottom: var(--space-3); }
ul.links a { font-family: var(--mono); font-size: .9375rem; }

/* Say it straight: one quiet line before At Devcon, so it reads as a footnote, not a feature. */
:where(body.doc) .straight { font-size: .875rem; line-height: 1.5; color: var(--muted); }
.straight .label { display: inline; margin: 0 var(--space-2) 0 0; font-size: .6875rem; }

/* At Devcon: after the demo, the strongest block on the page, since the booth sends people on. */
:where(body.doc) .devcon h2 {
  margin: 0 0 var(--space-4);
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--rule);
}

:where(body.doc) ul.sessions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

:where(body.doc) ul.sessions li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
}

.session-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.session-when { font-size: 1.125rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.session-tags { display: inline-flex; align-items: baseline; gap: var(--space-2); }

.session-kind, .session-badge {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.session-kind { border: 1px solid var(--edge); border-radius: 2em; padding: .1em .65em; }
.session-badge { color: var(--accent-text); }
.session-title { line-height: 1.35; }
.session-where { font-size: .875rem; color: var(--muted); }

/* The next session carries the note card's orange rule; sessions that are over grey out but stay, as a record. */
:where(body.doc) ul.sessions li[data-badge="next"], :where(body.doc) ul.sessions li[data-badge="now"] { border-left: 2px solid var(--accent); }
.session[data-badge="over"], .session[data-badge="over"] .session-badge { color: var(--muted); }
.session[data-badge="over"] .session-kind { border-color: var(--rule); }

:where(body.doc) .devcon .ask { margin: var(--space-4) 0 0; }

.step-zero, .all-spaces {
  display: block;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  text-decoration: none;
}

.step-zero .label { display: block; margin: 0 0 2px; }

.sitefoot .wrap { justify-content: space-between; }

@media (min-width: 960px) {
  .space {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }

  /* The jump to At Devcon leaves the left column, which needs its height for the demo and feedback. */
  .space-head .devcon-jump { display: none; }
  :where(body.doc) .space-head .subtitle { margin-bottom: var(--space-4); }

  /* Layout B: the hook and demo stay in view while the explanation scrolls beside them. */
  .space-left {
    position: sticky;
    top: 0;
    padding-top: var(--space-2);
  }
}

/* ---------- the 01 demo: the chain behind this site ---------- */

.chain {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: chain;
}

:where(body.doc) .chain > li {
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-4) var(--space-6);
  border-left: 1px solid var(--rule);
  counter-increment: chain;
}

:where(body.doc) .chain > li:last-child { padding-bottom: 0; border-left-color: transparent; }

.chain > li::before {
  content: counter(chain);
  position: absolute;
  left: calc(-1 * var(--space-3));
  top: 0;
  width: var(--space-5);
  text-align: center;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--accent-text);
  background: var(--surface);
}

.chain .label { display: block; margin: 0 0 var(--space-1); }

/* Hashes are 64 characters long: let them wrap anywhere instead of pushing a phone sideways. */
.chain code {
  overflow-wrap: anywhere;
  word-break: break-all;
  font-size: .8125rem;
}

.chain p { margin: 0; }
.chain-via { display: block; font-size: .8125rem; color: var(--muted); }

:where(body.doc) ul.chain-earlier { list-style: none; padding: 0; margin: 0; }
:where(body.doc) ul.chain-earlier li { margin: 0 0 var(--space-2); font-size: .875rem; }

/* Each version opens from the visitor's own node or in Freedom: small, after its note. */
:where(body.doc) .chain-open { margin: 0 0 var(--space-2); font-size: .8125rem; color: var(--muted); }
.version-open { display: block; font-size: .8125rem; color: var(--muted); }

/* The printed booth QR code, white in both themes like every QR code on the site. */
.booth-qr img { display: block; width: 160px; height: 160px; margin: 0 0 var(--space-3); }

/* The live check is a plain bordered button: orange stays off buttons. */
.chain-check {
  margin-top: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-4);
  font: inherit;
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--edge);
  cursor: pointer;
}

.chain-check:disabled { color: var(--muted); cursor: progress; }

/* Wide screens: before the first check, the button sits beside "Not checked yet.", and the steps
   tighten, so the booth laptop shows the feedback answers under the demo without scrolling. */
@media (min-width: 960px) {
  :where(body.doc) .chain > li { padding-bottom: var(--space-3); }
  .chain-current:has(> .chain-unchecked) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); }
  .chain-current:has(> .chain-unchecked) > .label { flex-basis: 100%; }
  .chain-current:has(> .chain-unchecked) > .chain-check { margin-top: 0; }
}
.chain-current p + p { margin-top: var(--space-1); }

/* ---------- kiosk mode and the crew page ---------- */

.qr-overlay {
  width: min(92vw, 420px);
  padding: var(--space-5);
  border: 1px solid var(--edge);
  background: var(--bg);
  color: var(--fg);
  text-align: center;
}

/* No design token is a see-through dim, so the backdrop keeps a literal. */
.qr-overlay::backdrop { background: rgba(36, 36, 36, .6); } /* allow-color */

.qr-overlay .qr-title { margin: 0 0 var(--space-4); font-size: 1.125rem; }

/* QR codes keep a white quiet zone in every theme, or phones won't read them. */
.qr-overlay .qr { width: min(70vw, 280px); margin: 0 auto; background: white; } /* allow-color */
.qr-overlay .qr svg { display: block; width: 100%; height: auto; }

.qr-overlay .qr-url {
  margin: var(--space-4) 0;
  font-family: var(--mono);
  font-size: .8125rem;
  overflow-wrap: anywhere;
  color: var(--muted);
}

.qr-close {
  min-height: 48px;
  min-width: 120px;
  padding: 0 var(--space-5);
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--edge);
  cursor: pointer;
}

.crew-settings > * + * { margin-top: var(--space-3); }

.crew-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  font-size: 1.125rem;
}

.crew-switch input { width: 24px; height: 24px; accent-color: var(--fg); }
.crew-field { display: block; font-family: var(--mono); font-size: .75rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }

.crew-settings input[type="text"] {
  min-height: 48px;
  width: min(100%, 320px);
  padding: 0 var(--space-3);
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--edge);
}

/* ---------- KPI 2: the feedback question on booth devices ---------- */

.space-feedback { margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--rule); }
.feedback-question { display: block; margin: 0 0 var(--space-3); }
.feedback-answers, .feedback-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.feedback-answer, .feedback-send, .feedback-skip, .crew-actions button {
  min-height: 48px;
  padding: 0 var(--space-3);
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--edge);
  cursor: pointer;
}

.feedback-text { width: 100%; margin-bottom: var(--space-2); padding: var(--space-2); font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--edge); }
:where(body.doc) .feedback-note { margin: var(--space-2) 0 0; font-size: .8125rem; color: var(--muted); }
:where(body.doc) .feedback-thanks { margin: 0; }
.crew-feedback > * + * { margin-top: var(--space-3); }

/* Short landscape screens, like a tablet with the browser's own bars: keep the hook, the demo
   and the feedback answers in view together. */
@media (min-width: 960px) and (max-height: 720px) {
  :where(body.doc) .space-head h1 { font-size: 2rem; margin-bottom: var(--space-2); }
  :where(body.doc) .space-head .subtitle { font-size: 1.0625rem; }
  .devcon-jump { margin-bottom: var(--space-2); }
  .space-demo { padding: var(--space-4); }
  .space-feedback { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); }
}

.chain-more summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--muted);
}

.chain-more summary .label { margin: 0; }
.chain-more summary::after { content: "+"; }
.chain-more[open] summary::after { content: "−"; }

@media (min-width: 960px) {
  /* When the hook, demo and feedback are taller than the screen, the left column scrolls on its
     own, so nothing in it is out of reach while it stays in view. */
  .space-left { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
  .space-right > .devcon-jump { display: inline-flex; }
  .space-feedback { margin-top: var(--space-4); }
  .feedback-answers { grid-template-columns: repeat(4, 1fr); }
}