/* Level Up — quests surface. Owned by the quests builder.
   The design system lives in app.css; this file only adds the surface's own
   shapes: the comfort meter, the record ladder, the vouch-code block.
   Every rule is scoped under .qs because surface stylesheets are loaded
   globally once a surface has been visited — nothing here may leak into
   another surface, and (learned the hard way) map.css has its own .qrow. */

.qs .qhead p { margin-top: 6px; max-width: 48ch; }

.qs .qsection { margin-top: 38px; }
/* The deck (.qdeck, below) shares the surface's anatomy — eyebrow, meter,
   meta — so those three carry both scopes and cannot drift apart. */
.qs .q-eyebrow,
.qdeck .q-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qs .q-eyebrow .pill { letter-spacing: normal; text-transform: none; font-family: var(--body); }
.qs .qsection > .lotus-edge { width: 44px; margin: 8px 0 16px; }

/* The signature: five rungs of the brand chevron, filled to the quest's
   comfort rung. Always rendered beside the written label, never alone.
   Unfilled slots sit a clear step above the card line (--meter-off, not
   var(--line)) and each glyph is a point larger than v1 — at 1x the empty
   ladder must read as five slots, not as dust. */
.qs .qmeter,
.qdeck .qmeter { display: inline-flex; flex-direction: column; gap: 1px; flex: none; }
.qs .qmeter .rung,
.qdeck .qmeter .rung { width: 11px; height: 7px; color: var(--meter-off); }
.qs .qmeter .rung.on,
.qdeck .qmeter .rung.on { color: var(--accent-text); }

/* -------------------------------------------------------- accepted cards */

.qs .qcard { margin-bottom: 12px; }
.qs .qcard .qtitle { margin-top: 8px; font-size: 17px; }
.qs .qcard .qtitle a { color: var(--text); }
.qs .qcard .qtitle a:hover { color: var(--accent-text); text-decoration: none; }
.qs .qmeta,
.qdeck .qmeta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin-top: 8px; flex-wrap: wrap; }
.qs .qacts { margin-top: 14px; }
.qs .qpanel:not([hidden]) { margin-top: 14px; border-top: 1px solid var(--line); }
.qs .qpanel-line { border-top: 1px solid var(--line); margin-top: 18px; }
.qs .qform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .qs .qform-grid { grid-template-columns: 1fr; } }
.qs .qdecline { padding-top: 12px; }

/* --------------------------------------------------------- open listrows */

.qs .qgroup { margin-top: 20px; }
.qs .qgroup-head { display: flex; align-items: baseline; gap: 10px; margin: 0 16px 4px; }
.qs .qgroup-head h3 { font-size: 15px; }
.qs .qsrow .qsrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qs .qsrow .qtitle { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--text); }
.qs .qsrow .meta { color: var(--muted); font-size: 12.5px; }
.qs .qsrow[role="link"] { cursor: pointer; }
.qs a.qsrow:hover { text-decoration: none; }

.qs .qfilters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.qs .qchips { flex-wrap: wrap; gap: 8px; }
.qs button.chip { cursor: pointer; }
.qs button.chip:hover { color: var(--text); border-color: var(--line); }
.qs button.chip.chip--on:hover { color: var(--accent-text); }
.qs button.chip:active { transform: scale(.96); }

.qs .qdone-date { color: var(--muted); font-size: 12px; width: 56px; flex: none; }

/* ----------------------------------------------------------- the detail */

.qs .qback { display: inline-block; margin-bottom: 20px; color: var(--muted); }
.qs .qback:hover { color: var(--accent-text); text-decoration: none; }
.qs.qdetail .qh1 { margin-top: 10px; max-width: 24ch; }
.qs .qmeta--lg { font-size: 14px; margin-top: 14px; }
.qs .qbody { margin: 18px 0 24px; max-width: 56ch; }
.qs.qdetail section.card, .qs.qdetail .qtake { margin-top: 16px; }

/* ------------------------------------------------------------ the record */

.qs .qcomp { padding: 16px 0 4px; border-top: 1px solid var(--line); margin-top: 12px; }
.qs .qcomp:first-of-type { border-top: 0; margin-top: 4px; padding-top: 8px; }
.qs .qcomp--withdrawn { opacity: .6; }
.qs .qnote { margin-top: 8px; }

.qs .qevi-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.qs .qevi { display: flex; gap: 10px; align-items: flex-start; }
.qs .qevi > .rung { color: var(--accent-text); margin-top: 4px; }
.qs .qevi--retracted > .rung { color: var(--line); }
.qs .qevi--retracted .qevi-label { text-decoration: line-through; text-decoration-color: var(--muted); }
.qs .qevi-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.qs .qevi-label { font-size: 13.5px; font-weight: 500; }
.qs .qevi-retraction { color: var(--muted); }

.qs .qcode {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 10px 14px;
}
.qs .qcode-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.qs .qcode-id { font-size: 12.5px; word-break: break-all; }

.qs .qvouch p { max-width: 56ch; }

/* While a card's log/decline panel is open, its trigger row is hidden so the
   panel's own submit is the one primary action. The attribute selector must
   beat .row's display:flex. */
.qs .qacts[hidden] { display: none; }

/* The phone tab-bar glass fix now lives in app.css (adopted from
   docs/notes/quests-shell-requests.md at integration). */

/* The framing line above the open list. Sits between the rule and the filters,
   at the same muted weight as the eyebrow, so it reads as explanation rather
   than as another control. */
.qs .q-why { margin: -6px 0 16px; max-width: 62ch; }

/* ------------------------------------------------------- the claim sheet

   The chips and the free field are EQUALS — docs/deviations.md D3, and it is
   a hard visual requirement, not a preference: a word cloud smooths, the
   unusual answer is the valuable one, and making the common answer one tap
   and the unusual one a paragraph is a thumb on the scale. So the equality
   lives in the geometry, where a proof can measure it: one grid, two cells,
   the same material (--raised wells with the same border), the same label
   treatment, the same floor. Do not move the field below the chips and do
   not label it optional. */

.qs .claim-h { font-size: 16px; margin-top: 14px; }
.qs .claim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 560px) { .qs .claim-grid { grid-template-columns: 1fr; } }
.qs .claim-half { display: flex; flex-direction: column; min-width: 0; }
/* One rule styles both labels, so they cannot drift apart. label.lbl in
   app.css matches only <label>; the chip group's name is a <span>, hence the
   local, element-agnostic restatement. */
.qs .claim-half .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin: 14px 0 6px; }
.qs .claim-cloud,
.qs textarea.claim-note { flex: 1; min-height: 116px; }
.qs .claim-cloud {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 10px;
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
}
.qs .claim-cloud .chip { align-self: flex-start; }
.qs .claim-cloud .chip:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* ------------------------------------------------------ the witness step */

.qs .qwitness { padding-top: 12px; }
.qs .qwitness-h { font-size: 16px; }
.qs .qwitness p { max-width: 56ch; }
.qs .qwitness .qcode { margin-top: 12px; }

/* The chips as chosen, on the record — verbatim, never joined into prose. */
.qs .qwent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.qs .qwent i {
  font-style: normal;
  font-size: 12px; font-weight: 500;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--accent-text);
}

/* The list header's way back to the deck sits beside the h1, not above it. */
.qs .qhead .spread { align-items: baseline; }

/* ------------------------------------ put it down: the swipe-reveal card

   In-hand cards only. The card's own box (surface, hairline, radius) stays
   on the article; the padding moves onto the sliding body so the revealed
   well sits inside the card's border. Mechanism and well styling live in
   swiperow.css — shared with chat, deliberately. */

.qs .qcard.swrow { padding: 0; }
.qs .qcard.swrow > .swrow__body {
  padding: 20px;
  background: var(--surface);
  border-radius: inherit;
}
/* The non-gesture door, on the card's top right corner. It slides with the
   body, so it stays on screen while the well is open. */
.qs .qcard .swrow-open { position: absolute; top: 12px; right: 12px; }

/* The standing strip after a put-down: the state that carries the undo.
   Same construction as a listrow — a raised well, not an alert. */
.qs .qputdown {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: var(--r-m);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line);
}
.qs .qputdown-msg { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); }

/* =============================================================== the deck

   The default view of Quests (docs/punchlist-2026-08-08.md, DECIDED): one
   card per viewport, riding main#view.bleed — the same archetype Map and
   Feed already use — with the feed's snap-scroll grammar and the quests
   surface's own anatomy: mono eyebrow, Bricolage title, the quest's OWN
   words, the comfort meter beside its written label.

   The ghost on the right edge is the qmeter at architectural scale, filled
   to the quest's actual comfort rung. Decoration that IS the data — the same
   contract as the feed's rungscape — never implying anything the row does
   not say. All colours are app.css tokens; both themes come for free.

   Not scoped under .qs: the deck is its own root (.qdeck), and every class
   here is qdeck/qdcard-prefixed so nothing leaks into another surface. */

.qdeck { position: relative; height: 100dvh; background: var(--canvas); }

.qdeck__scroll {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.qdeck__scroll::-webkit-scrollbar { display: none; }
.qdeck__scroll:focus-visible { outline: none; }

/* ------------------------------------------------------ the standing bar
   On screen at every card: it does not scroll away and is not revealed by a
   gesture. A soft canvas fade underneath keeps it legible while cards slide
   beneath it. */
.qdeck__bar {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px 22px;
  background: linear-gradient(to bottom, var(--canvas) 45%, transparent);
  pointer-events: none;
}
.qdeck__bar > * { pointer-events: auto; }
.qdeck__h1 { font-size: 22px; }
.qdeck__spacer { flex: 1; pointer-events: none; }
.qdeck__exit { color: var(--muted); font-weight: 500; }
.qdeck__exit:hover { color: var(--accent-text); text-decoration: none; }
.qdeck__bartitle {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 46%;
}

/* --------------------------------------------------------------- a card */

.qdcard {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}
.qdcard__body {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 72px 120px 32px 104px;
  z-index: 2;
}
.qdcard__col {
  width: min(640px, 100%);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.qdcard__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}
.qdcard__text { font-size: 16.5px; line-height: 1.55; color: var(--text-hi); max-width: 56ch; }
.qdcard__truth { font-family: var(--mono); font-size: 13.5px; color: var(--text-mid); letter-spacing: .02em; }
.qdcard__cond { font-family: var(--mono); font-size: 13.5px; color: var(--text-mid); max-width: 48ch; line-height: 1.7; }
.qdcard__acts { margin-top: 6px; flex-wrap: wrap; }
/* A primary door is a button whatever element carries it — no link underline. */
.qdeck a.btn:hover { text-decoration: none; }
.qdcard__col > .q-eyebrow { margin: 0; }
.qdcard__col > .qmeta { margin-top: 0; }
.qdcard__col--end .lotus-edge { width: 88px; }

/* Entrance: content steps up as the card snaps in — the feed's gesture, a
   touch quicker. Reduced motion gets the settled state outright. */
.qdcard__col {
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1);
}
.qdcard.live .qdcard__col { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .qdcard__col { opacity: 1; transform: none; }
}

/* The ghost meter: five slots, lit to the rung, standing on the right edge.
   One slot (--one) on a step card, lit when the step is done. */
.qdcard__ghost {
  position: absolute; right: -3vw; top: 50%;
  transform: translateY(-50%) rotate(8deg);
  display: flex; flex-direction: column; gap: 1.6dvh;
  pointer-events: none;
  z-index: 1;
}
.qdcard__ghost .grung {
  width: 15dvh; height: 10dvh;
  background: linear-gradient(180deg, var(--plum), var(--accent));
  clip-path: polygon(50% 0%, 100% 44%, 78% 44%, 78% 100%, 22% 100%, 22% 44%, 0% 44%);
  opacity: .05;
}
.qdcard__ghost .grung.on { opacity: .16; }
.qdcard__ghost--one .grung { width: 34dvh; height: 30dvh; }

/* ---------------------------------------------- the rail, ticks as rungs
   The app's finite-position instrument, as on the feed: a tick per card, the
   current one standing up as the brand rung. Every tick is a real button. */
.qdeck__rail {
  position: absolute; left: 20px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
  z-index: 4;
}
.qdeck__rail .qtick {
  width: 16px; height: 12px;
  display: grid; place-items: center;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
}
.qdeck__rail .qtick .bar {
  width: 10px; height: 2px;
  background: var(--faint);
  border-radius: 1px;
  transition: background var(--t), width var(--t);
}
.qdeck__rail .qtick:hover .bar { background: var(--faint-strong); }
.qdeck__rail .qtick.on .bar {
  width: 12px; height: 11px;
  background: var(--accent-text);
  clip-path: polygon(50% 0%, 100% 44%, 78% 44%, 78% 100%, 22% 100%, 22% 44%, 0% 44%);
  border-radius: 0;
}
.qdeck__count {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--faint-mid);
  margin-top: 8px;
  white-space: nowrap;
}

/* ----------------------------------------- the steppers: tap equivalents
   SC 2.5.7 made furniture: visible previous/next controls, on screen at all
   times, never behind a menu. At either end the dead direction disables —
   which is also how the deck ends and stays ended. */
.qdeck__steppers {
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px;
  z-index: 4;
}
.qdeck__step {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--glass-raised);
  backdrop-filter: blur(10px);
  color: var(--text);
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
  transition: transform var(--t), background var(--t), opacity var(--t);
}
.qdeck__step:hover { background: var(--glass-raised-hov); }
.qdeck__step:active { transform: scale(.9); }
.qdeck__step:disabled { opacity: .35; cursor: default; transform: none; }
.qdeck__step svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------- phone */

@media (max-width: 760px) {
  .qdcard__body { padding: 64px 60px calc(var(--nav-h) + 28px) 36px; }
  .qdcard__title { font-size: clamp(26px, 8vw, 36px); }
  .qdeck__bar { padding: 12px 14px 18px; }
  .qdeck__rail { left: 9px; gap: 6px; }
  .qdeck__count { font-size: 9.5px; margin-top: 6px; writing-mode: vertical-rl; }
  .qdeck__steppers { right: 10px; }
  .qdeck__step { width: 42px; height: 42px; }
  .qdcard__ghost .grung { width: 9dvh; height: 6dvh; }
  .qdcard__ghost--one .grung { width: 22dvh; height: 19dvh; }
}