/* shop.css — Giftella Registry storefront styling.
 *
 * FOUNDER, 27 Aug 2026. Two jobs:
 *   1. Let the registry pages USE the page. They were pinned to a 720px
 *      column, so on any real screen the content sat in a narrow strip with
 *      empty space either side. A registry is a storefront; it should feel
 *      like one.
 *   2. Give every gift the same anatomy everywhere: photo, name, price,
 *      and the row of stores you can buy it from.
 */

/* ── Page shell ─────────────────────────────────────────────────────── */
.wrap { max-width: 1240px !important; padding: 32px 32px 96px !important; }
@media (max-width: 900px) { .wrap { padding: 28px 20px 80px !important; } }

/* Step 1 reads as a form, so it keeps a comfortable measure — but centred
   inside the wide shell rather than pinning the whole page. Step 2 and 3
   are browsing surfaces and get the full width. */
.step-narrow { max-width: 780px; margin-inline: auto; }
.step-wide   { max-width: 100%; }

/* A two-column split for the details step on desktop: the form on the left,
   a live preview of what guests will see on the right. */
.reg-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 38px; align-items: start; }
@media (max-width: 1040px) { .reg-split { grid-template-columns: 1fr; gap: 26px; } }
.reg-aside { position: sticky; top: 26px; }

/* ── Section headings ───────────────────────────────────────────────── */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 34px 0 14px; flex-wrap: wrap; }
.sec-head h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 24px; margin: 0; }
.sec-head .sec-sub { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.sec-count { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 1.6px;
             text-transform: uppercase; color: var(--gold2); white-space: nowrap; }

/* ── The gift card, used by search results, the starter grid and previews ─ */
.gcards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 560px) { .gcards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } }

.gcard { position: relative; display: flex; flex-direction: column; text-align: left;
         background: var(--card); border: 1px solid var(--card-line); border-radius: 18px;
         overflow: hidden; padding: 0; font-family: inherit; color: var(--text);
         transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.gcard:hover { border-color: var(--gold); transform: translateY(-2px);
               box-shadow: 0 10px 26px rgba(20,12,40,.10); }

/* Photo well. No emoji, no glyph: an empty product slot is a soft neutral
   surface that fills in when the photo lands. A cartoon icon sitting on top
   of a real product shot is the thing that made these look unfinished. */
.gcard-img { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--bg2); overflow: hidden; }
.gcard-img::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 12%, rgba(255,255,255,.42) 48%, transparent 84%);
  transform: translateX(-100%); animation: gshimmer 1.5s infinite; }
.gcard-img.has-img::after, .gcard-img.no-img::after { display: none; }
@keyframes gshimmer { to { transform: translateX(100%); } }
.gcard-img img { position: relative; z-index: 1; width: 100%; height: 100%;
                 object-fit: contain; background: #fff; opacity: 0; transition: opacity .28s ease-out; }
.gcard-img img.loaded { opacity: 1; }
/* When no photo can be found we show a quiet wordmark, never an emoji. */
.gcard-img .gcard-noimg { position: absolute; inset: 0; z-index: 1; display: none;
  align-items: center; justify-content: center; font-family: 'DM Serif Display', Georgia, serif;
  font-size: 15px; color: var(--muted); opacity: .5; letter-spacing: .5px; }
.gcard-img.no-img .gcard-noimg { display: flex; }

.gcard-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gcard-cat { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.7px;
             text-transform: uppercase; color: var(--gold2); }
.gcard-name { font-family: 'DM Serif Display', Georgia, serif; font-size: 15px; line-height: 1.28;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gcard-price { font-size: 13px; font-weight: 700; }

/* ── Store row: the "where do I buy this" line ──────────────────────── */
/* Five store marks plus a price did not fit a 200px card, so the price was
   getting clipped at the card edge. Wrap instead of overflow. */
.gshop { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; row-gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.gshop-marks { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; row-gap: 4px; }
.gshop-mark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  text-decoration: none; line-height: 1; flex: none;
  box-shadow: 0 0 0 1.5px var(--card); transition: transform .12s ease; }
.gshop-mark:hover { transform: scale(1.16); }
.gshop-mark.is-direct { box-shadow: 0 0 0 1.5px var(--gold); }
.gshop-more { font-size: 10px; color: var(--muted); margin-left: 2px; }
.gshop-from { font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap;
              white-space: nowrap; border-bottom: 1px solid var(--card-line); }
.gshop-from:hover { border-bottom-color: var(--gold); }
.gshop-from.is-any { color: var(--muted); font-weight: 500; border: 0; }

.gshop-list { display: grid; gap: 6px; margin-top: 10px; }
.gshop-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  padding: 9px 11px; border-radius: 11px; border: 1px solid var(--card-line); background: var(--card);
  font-size: 13px; transition: border-color .14s ease, background .14s ease; }
.gshop-row:hover { border-color: var(--gold); background: var(--bg2); }
.gshop-row-label { font-weight: 600; }
.gshop-row-go { margin-left: auto; font-size: 12px; color: var(--muted); }

/* ── Add control on a card ──────────────────────────────────────────── */
.gcard-add { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--bg2); color: var(--text); transition: background .14s ease, color .14s ease; }
.gcard-add:hover { background: var(--gold); color: #1a1327; }
.gcard.added .gcard-add { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--text); }
.gcard.added { border-color: var(--gold); }
.gcard-flag { position: absolute; top: 9px; right: 9px; z-index: 3; padding: 3px 8px; border-radius: 100px;
  background: var(--gold); color: #1a1327; font-size: 10px; font-weight: 800; letter-spacing: .4px;
  opacity: 0; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease; }
.gcard.added .gcard-flag { opacity: 1; transform: none; }

/* ── Search surface ─────────────────────────────────────────────────── */
.gsearch-out.as-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  max-height: none; overflow: visible; padding: 4px 0 0; }
@media (max-width: 560px) { .gsearch-out.as-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; } }
.gsearch-none { padding: 18px 4px; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ── Cash fund card ─────────────────────────────────────────────────── */
.fund-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 18px; padding: 22px 22px 20px; }
.fund-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fund-head h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 21px; margin: 0; }
.fund-sub { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
.fund-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fund-preset { font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 9px 14px; border-radius: 100px; background: var(--bg2); color: var(--text);
  border: 1.5px solid transparent; transition: all .14s ease; }
.fund-preset:hover { border-color: var(--gold); }
.fund-preset.on { background: color-mix(in srgb, var(--gold) 18%, transparent); border-color: var(--gold); }

/* ── Guest page: use the screen ─────────────────────────────────────── */
/* view.html pinned its gift grid and toolbars to 1080px and the hero copy
   to 760px. On a laptop that left a third of the window empty either side
   of a storefront. Widened to match the builder. */
.rprog, .gfilters, .grid { max-width: 1240px !important; }
.grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
@media (max-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* Gift photos on the guest page follow the same rule as the builder: the
   product shot, nothing sitting on top of it. */
.gift .ph .emoji, .gift .photo .emoji { transition: opacity .2s ease; }
.gift .ph.has-img .emoji, .gift .photo.has-img .emoji { opacity: 0 !important; }

/* create.html keeps its own inline <style> AFTER these links, and it sets
   .starter-grid to a fixed 3 columns. The starter grid now renders .gcard
   markup, so it must follow the card grid instead. An id selector wins
   without needing !important. */
#starterGrid.gcards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
@media (max-width: 560px) {
  #starterGrid.gcards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}
#giftSearchResults.as-grid { max-height: none; overflow: visible; }

/* ── Theme picker ───────────────────────────────────────────────────── */
/* Ten options instead of four, shown as a colour chip plus a name rather
   than a big coloured slab. Reads as a palette, takes less room, and no
   longer needs white text hacks to stay legible on the dark ones. */
.theme-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.themes .theme-pill { display: flex !important; align-items: center; gap: 8px;
  background: var(--card) !important; color: var(--text) !important;
  border: 1.5px solid var(--card-line) !important; border-radius: 12px !important;
  padding: 9px 11px !important; font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: left !important; transform: none !important; transition: border-color .14s ease, background .14s ease; }
.themes .theme-pill:hover { border-color: var(--gold) !important; }
.themes .theme-pill.active { border-color: var(--text) !important; background: var(--bg2) !important; }
.theme-pill .tsw { width: 17px; height: 17px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.theme-pill.gold       .tsw { background: linear-gradient(135deg,#fdf3d4,#e0b93f); }
.theme-pill.sage       .tsw { background: linear-gradient(135deg,#d9ecd9,#4a8a6a); }
.theme-pill.blush      .tsw { background: linear-gradient(135deg,#fae0e7,#b54068); }
.theme-pill.navy       .tsw { background: linear-gradient(135deg,#d0d8e8,#1a2b5c); }
.theme-pill.sky        .tsw { background: linear-gradient(135deg,#dcecf9,#3f7fb5); }
.theme-pill.sunny      .tsw { background: linear-gradient(135deg,#fbeecb,#c78d1b); }
.theme-pill.terracotta .tsw { background: linear-gradient(135deg,#f6ddd0,#a4522f); }
.theme-pill.lilac      .tsw { background: linear-gradient(135deg,#e8dffa,#7a5cb8); }
.theme-pill.forest     .tsw { background: linear-gradient(135deg,#d8e9d9,#38683f); }
.theme-pill.ink        .tsw { background: linear-gradient(135deg,#e2e0e8,#2a2438); }

/* ── Cash fund: collapsed by default ────────────────────────────────── */
.fund-card { padding: 0 !important; border-style: solid !important; overflow: hidden; }
.fund-toggle { display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 15px 18px; background: none; border: 0; cursor: pointer;
  font-family: inherit; color: var(--text); text-align: left; }
.fund-toggle:hover { background: var(--bg2); }
.fund-toggle-ico { font-size: 20px; flex: none; }
.fund-toggle-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fund-toggle-txt b { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 17px; }
.fund-toggle-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.fund-toggle-chev { font-size: 20px; color: var(--muted); flex: none; width: 24px; text-align: center; }
.fund-open { padding: 4px 18px 18px; border-top: 1px solid var(--card-line); }
.fund-collapsed .fund-open { display: none; }
.fund-card .fund-head, .fund-card .fund-sub { display: none; }

/* ── Quick look ─────────────────────────────────────────────────────── */
.gcard.has-peek { cursor: pointer; }
.gcard.has-peek:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.peek-host { position: fixed; inset: 0; z-index: 9000; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(20,12,40,.52); backdrop-filter: blur(3px); }
.peek-host.open { display: flex; animation: peekIn .16s ease-out; }
@keyframes peekIn { from { opacity: 0; } to { opacity: 1; } }

.peek-card { position: relative; width: min(820px, 100%); max-height: 88vh; overflow: auto;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 22px;
  box-shadow: 0 24px 70px rgba(20,12,40,.34); animation: peekUp .2s cubic-bezier(.2,.7,.3,1); }
@keyframes peekUp { from { transform: translateY(14px) scale(.99); } to { transform: none; } }

.peek-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 14px;
  background: var(--bg2); color: var(--text); }
.peek-x:hover { background: var(--gold); color: #1a1327; }

.peek-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 700px) { .peek-grid { grid-template-columns: 1fr; } }

.peek-img { position: relative; aspect-ratio: 1 / 1; background: var(--bg2); overflow: hidden;
  border-right: 1px solid var(--card-line); }
@media (max-width: 700px) { .peek-img { aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--card-line); } }
.peek-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  background: #fff; opacity: 0; transition: opacity .28s ease-out; }
.peek-img img.loaded { opacity: 1; }
.peek-img .gcard-noimg { position: absolute; inset: 0; z-index: 1; display: none;
  align-items: center; justify-content: center; font-family: 'DM Serif Display', Georgia, serif;
  color: var(--muted); opacity: .5; }
.peek-img.no-img .gcard-noimg { display: flex; }

.peek-body { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.peek-name { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: 26px; line-height: 1.2; margin: 2px 0 0; }
.peek-price { display: flex; align-items: baseline; gap: 10px; font-size: 19px; font-weight: 700; }
.peek-from { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.peek-facts { margin: 12px 0 0; display: grid; gap: 8px; }
.peek-facts > div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: baseline; }
.peek-facts dt { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); margin: 0; }
.peek-facts dd { margin: 0; font-size: 13.5px; line-height: 1.5; text-transform: capitalize; }
@media (max-width: 560px) {
  .peek-facts > div { grid-template-columns: 1fr; gap: 2px; }
}
.peek-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 1.9px;
  text-transform: uppercase; color: var(--gold2); margin-top: 14px; }
.peek-add { width: 100%; margin-top: 16px !important; }
.peek-fine { font-size: 11.5px; color: var(--muted); opacity: .8; margin: 10px 0 0; line-height: 1.5; }

/* ── Step 1 panels ──────────────────────────────────────────────────────
   The details form used to be one long stack of eight fields. Grouping it
   into a few titled panels, with the optional bits folded away, keeps the
   first thing a new person sees short and obvious. */
.panel {
  background: var(--bg2);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 16px;
}
.panel .field:last-child { margin-bottom: 0; }
.panel .field-row:last-child .field { margin-bottom: 0; }
.panel-head { margin-bottom: 16px; }
.panel-t {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400; font-size: 20px; line-height: 1.25; margin: 0 0 4px;
}
.panel-s { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.more {
  background: var(--bg2);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  margin-bottom: 16px;
}
.more > summary {
  list-style: none; cursor: pointer;
  padding: 18px 22px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 3px 12px;
}
.more > summary::-webkit-details-marker { display: none; }
.more-t { grid-column: 1; font-weight: 700; font-size: 15px; }
.more-s { grid-column: 1; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.more-x {
  grid-column: 2; grid-row: 1 / span 2;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--card-line);
  display: grid; place-items: center;
  font-size: 18px; color: var(--muted);
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.more[open] .more-x { transform: rotate(45deg); }
.more > summary:hover .more-x { border-color: var(--gold); color: var(--gold2); }
.more-body { padding: 0 22px 22px; }
@media (max-width: 540px) {
  .panel, .more > summary { padding: 18px; }
  .more-body { padding: 0 18px 18px; }
}

/* Divider inside the search results grid, above the padded suggestions. */
.gsearch-more {
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 1.9px; text-transform: uppercase;
  color: var(--muted);
  padding: 10px 0 2px;
  border-top: 1px solid var(--card-line);
  margin-top: 6px;
}

/* Web-search results share the SAME grid as the catalog results. `display:
   contents` lifts the wrapper's children into the parent grid, otherwise the
   whole batch collapses into a single grid cell and stacks. */
.gsearch-web { display: contents; }
.gsearch-none { grid-column: 1 / -1; }
/* A web result is a real product we found, not a curated shelf pick. The
   label says so honestly rather than pretending it came from our catalog. */
.gcard-cat.from-web { color: var(--plum); }

/* ── Step 3, the moment it goes live ──────────────────────────────────────
   It used to be a flat white card with a grey URL box and three buttons of
   equal weight, so the thing you actually came to do (send the link) had no
   more pull than "open dashboard". */
.success-card { text-align: center; padding: 34px 26px 30px; }
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 2px;
  color: var(--gold2); background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  padding: 5px 12px; border-radius: 100px; margin-bottom: 16px;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #3fbf72;
  box-shadow: 0 0 0 0 rgba(63,191,114,.7); animation: livePulse 2s infinite;
}
@keyframes livePulse {
  70%  { box-shadow: 0 0 0 7px rgba(63,191,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,191,114,0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.success-mark {
  width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 34px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.success-card h2 {
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(24px, 4.6vw, 32px); line-height: 1.2; margin: 0 0 8px;
}
#successSub {
  color: var(--muted); font-size: 14.5px; line-height: 1.6;
  max-width: 520px; margin: 0 auto 6px;
}
.success-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold2); margin-bottom: 20px;
}

/* The link IS the product on this page, so the whole row is the button. */
.share-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font-family: inherit; cursor: pointer; text-align: left;
  background: var(--bg2); border: 1.5px solid color-mix(in srgb, var(--gold) 34%, transparent);
  border-radius: 14px; padding: 14px 14px 14px 18px; margin-bottom: 14px;
  transition: border-color .16s ease, transform .16s ease;
}
.share-link:hover { border-color: var(--gold); transform: translateY(-1px); }
.share-link-url {
  flex: 1; min-width: 0; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--text); overflow-wrap: anywhere;
}
.share-link-copy {
  flex: none; font-size: 12.5px; font-weight: 700; color: var(--gold2);
  padding: 8px 14px; border-radius: 100px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.share-link.is-manage { border-style: dashed; margin-bottom: 0; }
.share-link.is-manage .share-link-url { font-size: 11.5px; color: var(--muted); }

/* Sending it is the real next action. */
.share-targets {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px;
}
.share-chip {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 100px; padding: 10px 16px;
  transition: border-color .16s ease, transform .16s ease;
}
.share-chip:hover { border-color: var(--gold); transform: translateY(-1px); }

.next-beats {
  display: grid; gap: 10px; text-align: left; margin: 22px 0 0;
  padding: 18px; border-radius: 16px; background: var(--bg2);
}
.next-beats .beat { display: flex; gap: 11px; align-items: flex-start; }
.next-beats b {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold2);
}
.next-beats span { font-size: 13px; line-height: 1.55; color: var(--muted); }

.manage-card {
  margin-top: 22px; padding: 18px; border-radius: 16px; text-align: left;
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
}
.manage-head {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--gold2); margin-bottom: 8px;
}
.manage-sub { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }

/* ── Search: it must always LOOK like it is working ──────────────────────
   Founder, 27 Aug 2026: "i searched for something and it took so long i
   didn't know if it was working." Nothing here makes the network faster;
   it makes the waiting legible, which is the half that was missing. */

/* The Search button becomes a spinner the moment a query is live. */
.gsearch.is-searching .gsearch-go { color: transparent; pointer-events: none; }
.gsearch.is-searching .gsearch-go::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 15px; height: 15px; margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
    border-radius: 50%; animation: gspin .6s linear infinite;
}
.gsearch-go { position: relative; }
@keyframes gspin { to { transform: rotate(360deg); } }

/* Skeleton cards while the web leg runs — same footprint as a real result,
   so the grid does not jump when the answers land. */
.gcard.skel {
    border-radius: 14px; overflow: hidden; background: var(--bg2);
    border: 1px solid var(--line); min-height: 232px; position: relative;
    pointer-events: none;
}
.gcard.skel::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    transform: translateX(-100%); animation: gshimmer 1.15s ease-in-out infinite;
}

/* Paste-a-link is no longer a panel that competes with search. It is one
   quiet line that opens only when someone actually needs it. */
.paste-fold { margin-top: 12px; }
.paste-fold > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center;
    gap: 7px; font-size: 12.5px; color: var(--muted); padding: 7px 2px;
    transition: color .16s ease;
}
.paste-fold > summary::-webkit-details-marker { display: none; }
.paste-fold > summary:hover { color: var(--text); }
.paste-fold > summary::before { content: '🔗'; font-size: 12px; }
.paste-fold[open] > summary { color: var(--text); font-weight: 600; }

/* ── Save, where the work is ─────────────────────────────────────────────
   Founder, 27 Aug 2026: "there should be a save option around here rather
   than me having to go to the end of the page". Two places now: on the list
   header you are actually editing, and a sticky bar that follows you. */

.reg-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px; margin-top: 24px;
}
.reg-head h2 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400; font-size: 20px; margin: 0;
}
.reg-head #addedCount { color: var(--gold2); }
.reg-save {
    flex: none; cursor: pointer;
    font-size: 13px; font-weight: 600; font-family: inherit;
    color: var(--bg); background: var(--gold2);
    border: 0; border-radius: 100px; padding: 9px 18px;
    transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.reg-save:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px var(--gold2); }
.reg-save:active { transform: translateY(0); }
.reg-save[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* The sticky bar. Sits above the theme toggle, never under it. */
.savebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; justify-content: center;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}
.savebar.in .savebar-in { transform: none; opacity: 1; }
.savebar-in {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    max-width: 560px; width: 100%;
    padding: 11px 12px 11px 16px;
    border-radius: 100px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 14px 40px -12px rgba(20, 12, 40, .38);
    transform: translateY(140%); opacity: 0;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
}
.savebar-dot {
    flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold2); box-shadow: 0 0 0 0 var(--gold2);
    animation: savePulse 2s ease-out infinite;
}
@keyframes savePulse {
    0%   { box-shadow: 0 0 0 0 rgba(160, 130, 60, .45); }
    70%  { box-shadow: 0 0 0 7px rgba(160, 130, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(160, 130, 60, 0); }
}
.savebar-txt {
    flex: 1; min-width: 0;
    font-size: 13.5px; font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.savebar-btn {
    flex: none; cursor: pointer; font-family: inherit;
    font-size: 13.5px; font-weight: 700;
    color: var(--bg); background: linear-gradient(135deg, var(--gold2), var(--gold));
    border: 0; border-radius: 100px; padding: 10px 20px;
    transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.savebar-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px var(--gold2); }
.savebar-btn:active { transform: translateY(0); }
.savebar-btn[disabled] { opacity: .65; cursor: default; transform: none; box-shadow: none; }

/* Saved state — the bar confirms, then retires itself. */
.savebar.done .savebar-dot { background: #3f9c6d; animation: none; }
.savebar.done .savebar-btn { display: none; }

@media (max-width: 520px) {
    .reg-head { flex-wrap: wrap; gap: 8px; }
    .savebar-txt { font-size: 12.5px; }
    .savebar-in { padding-left: 14px; gap: 10px; }
    .savebar-btn { padding: 10px 16px; font-size: 13px; }
}

/* The theme toggle lives at bottom-right (theme.css .gmode) and the save bar
   spans the bottom. On a phone they sit on top of each other, so the toggle
   steps up out of the way for exactly as long as the bar is showing. The
   toggle is appended to <body> while the bar lives inside the page wrapper,
   so they are not siblings and a CSS-only selector cannot reach across —
   updateSaveUI() sets this class on <body> instead. */
body.savebar-up .gmode { bottom: 84px; }
.gmode { transition: bottom .34s cubic-bezier(.2, .8, .2, 1); }

/* On narrow screens keep the bar clear of the toggle's corner even mid-slide. */
@media (max-width: 520px) {
    .savebar { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}