/* The Reliquary — the keepsake marketplace (build 2026.11.05.1).
   Candlelit glass like the rest of the house; this sheet only
   dresses the new doors, in the Video Store's own idiom. */

.rq-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 8px; }
.rq-head h1 { margin: 0 0 6px; }
.rq-purses { margin: 10px 0 4px; }

/* The shelf doors (build .30): the market leads the room, so the
   four shelves stand at its head as doors a thumb can find — icon,
   name, and how many treasures stand there — above the search. */
.rq-shelves { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0 12px; }
.rq-shelf {
  display: flex; gap: 10px; align-items: center; text-align: left;
  border: 1px solid rgba(216, 178, 90, .35); background: rgba(60, 14, 26, .3);
  color: inherit; border-radius: 14px; padding: 12px 14px; cursor: pointer; font: inherit;
}
.rq-shelf:hover { border-color: rgba(216, 178, 90, .65); }
.rq-shelf.on { background: rgba(216, 178, 90, .85); color: #241408; }
.rq-shelf.on .sub { color: rgba(36, 20, 8, .78); }
.rq-shelf-ico { font-size: 1.5rem; line-height: 1; flex: none; }
.rq-shelf-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-shelf-name { font-weight: 700; }
.rq-byseller { margin: 0 0 10px; }
.rq-escrow { margin: 16px 0 4px; }
.rq-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.rq-tools .input { flex: 1; min-width: 200px; }

.rq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.rq-card {
  border: 1px solid rgba(216, 178, 90, .25); border-radius: 16px; overflow: hidden;
  background: rgba(20, 10, 14, .55); display: flex; flex-direction: column;
}
.rq-card[data-rq-card] { cursor: pointer; }
.rq-card[data-rq-card]:hover { border-color: rgba(216, 178, 90, .55); }
.rq-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: #0b0610; overflow: hidden; }
.rq-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-photo-empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; background: linear-gradient(150deg, rgba(88, 18, 32, .5), rgba(12, 6, 10, .8));
}
.rq-card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rq-card-title { font-weight: 700; font-size: 1.05rem; color: inherit; text-decoration: none; }
.rq-card-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rq-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.rq-price { color: var(--gold, #d8b25a); }
.rq-free { color: var(--gold, #d8b25a); }
.rq-keeps { color: #b9c6ff; font-size: .92rem; line-height: 1.5; margin: 2px 0; }
.rq-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-state { white-space: nowrap; }
/* The sold word, dressed (build .30): a gold ribbon laid across
   the photograph's corner — the card itself stays in full colour,
   never greyed, never dimmed: spoken-for is a fact, not a veil. */
.rq-ribbon {
  position: absolute; top: 18px; right: -40px; z-index: 2; transform: rotate(38deg);
  background: linear-gradient(135deg, #ffe9b0, var(--gold, #d8b25a));
  color: #241408; font-weight: 800; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 44px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); white-space: nowrap;
}

.rq-gallery { display: flex; flex-direction: column; gap: 10px; }
.rq-gallery-main { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #0b0610; display: block; }
.rq-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.rq-thumb.on { border-color: var(--gold, #d8b25a); }
.rq-player { width: 100%; max-height: 62vh; background: #000; border-radius: 12px; display: block; }

.rq-buybox, .rq-ownbox {
  border: 1px solid rgba(216, 178, 90, .3); border-radius: 14px; padding: 16px; margin-top: 16px;
  background: rgba(60, 14, 26, .25);
}
.rq-buyprice { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 1.15rem; margin-bottom: 6px; }
.rq-purse { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; margin: 10px 0; cursor: pointer; }
.rq-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.rq-addr .rq-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .rq-addr { grid-template-columns: 1fr; } }

.rq-report { margin-top: 26px; border-top: 1px solid rgba(216, 178, 90, .18); padding-top: 16px; }
.rq-attest { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; margin: 14px 0; cursor: pointer; }
.rq-progress { margin: 12px 0; background: rgba(255, 255, 255, .08); border-radius: 999px; overflow: hidden; position: relative; }
.rq-progress-bar { height: 10px; width: 0; background: linear-gradient(90deg, #8a2b3a, var(--gold, #d8b25a)); transition: width .2s ease; }

.rq-orders { display: flex; flex-direction: column; gap: 12px; }
.rq-order {
  border: 1px solid rgba(216, 178, 90, .25); border-radius: 14px; padding: 14px;
  background: rgba(20, 10, 14, .55);
}
.rq-order[data-rq-order] { cursor: pointer; }
.rq-order[data-rq-order]:hover { border-color: rgba(216, 178, 90, .55); }
.rq-order-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.rq-order-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.rq-addrbox {
  border: 1px solid rgba(216, 178, 90, .3); border-radius: 12px; padding: 12px 14px; margin-top: 12px;
  background: rgba(60, 14, 26, .25); line-height: 1.6; white-space: pre-line;
}
.rq-timeline { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.rq-step { border: 1px solid rgba(216, 178, 90, .25); border-radius: 999px; padding: 4px 12px; font-size: .88rem; opacity: .55; }
.rq-step.done { opacity: 1; border-color: rgba(216, 178, 90, .7); background: rgba(216, 178, 90, .12); }

/* The empty market (build .30): with nothing yet to sell, the
   shelves still stand dressed — an invitation, not a blank. */
.rq-grid > .rq-empty-market, .rq-grid > .rq-empty-filter { grid-column: 1 / -1; }
.rq-empty-market { text-align: center; padding: 30px 20px; }
.rq-empty-ico { font-size: 2.6rem; line-height: 1.2; }
.rq-empty-line { font-size: 1.18rem; font-weight: 700; margin: 8px 0 6px; }

/* The porch clearance (build .30 rider, the house's standing
   measure from builds .12/.14): on a phone the Reliquary's pages
   leave 120px of room at their foot, so the last card scrolls
   clear of the floating Go Live pill and the Glass Bubble. The
   hero's own clearance is its shortened word — see reliquary.js.
   The floaters themselves are untouched. */
@media (max-width: 640px) {
  .rq-page { padding-bottom: 120px; }
  .rq-shelves { grid-template-columns: 1fr 1fr; }
}

/* The parcel's road (build .31) — the tracking panel, the finest
   surface in the Reliquary: the journey drawn as a road of gold
   nodes on a candlelit line, the number standing large enough to
   read across the room, the seller's papers honored in place, and
   the two ship doors standing side by side in the same dress. */
.rq-track { border-color: rgba(216, 178, 90, .45); background: linear-gradient(180deg, rgba(216, 178, 90, .07), rgba(60, 14, 26, .18)); }
.rq-track-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rq-track-head h3 { margin: 0; }
.rq-testpill { border-color: rgba(255, 120, 90, .8); color: #ffb59f; background: rgba(160, 40, 20, .25); font-weight: 700; }
.rq-testbanner { border: 1px solid rgba(255, 120, 90, .6); border-radius: 10px; padding: 10px 12px; background: rgba(160, 40, 20, .18); line-height: 1.55; }
.rq-track-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.rq-track-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-track-carrier { font-weight: 700; letter-spacing: .02em; }
.rq-track-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.22rem; font-weight: 700; letter-spacing: .06em; word-break: break-all; color: #f3d489; }
.rq-tracknum-inline { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.rq-track-doors { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-journey { display: flex; align-items: flex-start; margin: 18px 2px 6px; }
.rq-node { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; flex: 0 0 auto; width: 76px; opacity: .5; }
.rq-node-ico { font-size: .8rem; color: rgba(216, 178, 90, .9); line-height: 1; }
.rq-node-ico2 { font-size: 1.25rem; line-height: 1.3; }
.rq-node-label { font-size: .8rem; font-weight: 600; line-height: 1.25; }
.rq-node-when { font-size: .72rem; opacity: .8; }
.rq-node.done { opacity: 1; }
.rq-node.done .rq-node-ico { color: #f3d489; text-shadow: 0 0 8px rgba(243, 212, 137, .8); }
.rq-node.current .rq-node-label { color: #f3d489; }
.rq-node-line { flex: 1 1 auto; height: 2px; margin-top: 6px; background: linear-gradient(90deg, rgba(216, 178, 90, .15), rgba(216, 178, 90, .55), rgba(216, 178, 90, .15)); border-radius: 2px; min-width: 10px; }
.rq-snag { border: 1px solid rgba(255, 176, 90, .55); border-radius: 10px; padding: 9px 12px; background: rgba(160, 100, 20, .16); line-height: 1.55; }
.rq-landed { border: 1px solid rgba(140, 220, 150, .5); border-radius: 10px; padding: 9px 12px; background: rgba(30, 120, 50, .14); line-height: 1.55; }
.rq-events { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.rq-event { display: flex; gap: 10px; align-items: flex-start; }
.rq-event-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: #d8b25a; box-shadow: 0 0 6px rgba(216, 178, 90, .7); }
.rq-postage { font-weight: 600; border-top: 1px solid rgba(216, 178, 90, .2); padding-top: 10px; }
.rq-clocknote { border-top: 1px dashed rgba(216, 178, 90, .25); padding-top: 8px; }
.rq-receipts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.rq-receipt img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(216, 178, 90, .4); display: block; }
.rq-receipt-add { display: inline-block; margin-top: 10px; cursor: pointer; text-decoration: underline dotted; }
.rq-shipdoors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.rq-shipdoor { border: 1px solid rgba(216, 178, 90, .3); border-radius: 12px; padding: 12px 14px; background: rgba(60, 14, 26, .18); }
.rq-shipdoor h4 { margin: 2px 0 6px; }
.rq-fromgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rq-parcelgrid { grid-template-columns: repeat(4, 1fr); margin-top: 6px; }
.rq-rate { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(216, 178, 90, .35); border-radius: 10px; background: rgba(216, 178, 90, .06); color: inherit; cursor: pointer; }
.rq-rate:hover { border-color: rgba(216, 178, 90, .8); background: rgba(216, 178, 90, .12); }
.rq-rate-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
@media (max-width: 640px) {
  .rq-shipdoors { grid-template-columns: 1fr; }
  .rq-fromgrid { grid-template-columns: 1fr; }
  .rq-parcelgrid { grid-template-columns: 1fr 1fr; }
  .rq-node { width: 62px; }
  .rq-node-label { font-size: .72rem; }
}

.rq-profile-card .rq-store-row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(216, 178, 90, .14); }
.rq-profile-card .rq-store-row:first-of-type { border-top: none; }
.rq-store-media { flex: 0 0 108px; display: block; }
.rq-store-photo { width: 108px; height: 76px; object-fit: cover; border-radius: 10px; display: block; background: #0b0610; }
.rq-store-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
