/* Star Registry — public sky explorer (Phase R3).
   Full-bleed canvas with floating glass chrome. Tokens inherited from the
   builder so the registry and the poster editor read as one product. */

.sr{
  --bg:#05060b; --panel:rgba(18,19,27,.82); --panel-solid:#14151f;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  --ink:#ececf3; --muted:#9a9ab2; --dim:#6a6a80;
  --accent:#e8dcc4; --accent-ink:#1a1a12; --accent-dim:rgba(232,220,196,.28);
  --focus:#6f7bd6; --danger:#e06a6a;
  --ka:"Noto_Sans_Georgian",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Noto_Serif_Georgian",Georgia,"Times New Roman",serif;
  position:fixed; inset:0; overflow:hidden; background:var(--bg);
  color:var(--ink); font-family:var(--ka); -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; user-select:none;
}
.sr *,.sr *::before,.sr *::after{box-sizing:border-box;}

/* ---------- the sky ---------- */
/* A canvas is a replaced element: inset:0 alone leaves it at its intrinsic
   300x150, so the size has to be stated explicitly. */
.sr-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;
  cursor:grab; touch-action:none;}
.sr-canvas.dragging{cursor:grabbing;}
/* a faint corner vignette keeps the chrome legible over a busy star field */
.sr-vignette{position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse 120% 80% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%);}

/* ---------- top bar ---------- */
.sr-top{position:absolute; z-index:6; top:0; left:0; right:0; padding:18px 20px;
  display:flex; align-items:center; gap:16px; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,11,.72),transparent);}
.sr-top > *{pointer-events:auto;}

.sr-brand{display:flex; align-items:baseline; gap:9px; letter-spacing:.14em;
  font-size:12px; text-transform:uppercase; color:var(--accent); white-space:nowrap;}
.sr-brand b{font-weight:600;}
.sr-brand span{color:var(--dim); letter-spacing:.1em;}
/* the brand is an <a> back to the shop whenever the host page supplies a home url */
a.sr-brand{text-decoration:none; transition:opacity .15s;}
a.sr-brand:hover{opacity:.72;}

/* back to the shop — the only other exit from a full-screen page */
.sr-shop{display:flex; align-items:center; gap:7px; height:40px; padding:0 14px;
  border-radius:11px; text-decoration:none; white-space:nowrap;
  font-size:12px; color:var(--muted); background:var(--panel);
  border:1px solid var(--line); backdrop-filter:blur(14px);
  transition:color .15s, border-color .15s;}
.sr-shop:hover{color:var(--ink); border-color:var(--line-strong);}
.sr-shop svg{width:15px; height:15px; opacity:.7;}

.sr-spacer{flex:1; pointer-events:none;}

/* search */
.sr-search{position:relative; width:min(420px,42vw);}
.sr-search input{-webkit-appearance:none; appearance:none; width:100%; height:40px; padding:0 38px 0 38px; border-radius:11px;
  color:var(--ink); font-family:var(--ka); font-size:14px;
  background:var(--panel); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .15s, box-shadow .15s;}
.sr-search input:focus{outline:none; border-color:var(--accent-dim);
  box-shadow:0 0 0 3px rgba(232,220,196,.08);}
.sr-search input::placeholder{color:var(--dim);}
.sr-search .sr-ico{position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; opacity:.55; pointer-events:none;}
.sr-search .sr-clear{position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:0; border-radius:6px; cursor:pointer; display:none;
  background:transparent; color:var(--muted); font-size:15px; line-height:1;}
.sr-search .sr-clear:hover{color:var(--ink); background:rgba(255,255,255,.07);}
.sr-search.has-value .sr-clear{display:block;}

.sr-results{position:absolute; top:46px; left:0; right:0; max-height:52vh; overflow-y:auto;
  border-radius:12px; background:var(--panel-solid); border:1px solid var(--line);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9); display:none; padding:5px;}
.sr-results.open{display:block;}
.sr-result{padding:9px 11px; border-radius:8px; cursor:pointer; display:flex;
  align-items:baseline; gap:10px;}
.sr-result:hover,.sr-result.active{background:rgba(255,255,255,.06);}
.sr-result b{font-family:var(--serif); font-size:14px; font-weight:600;}
.sr-result i{font-style:normal; font-size:11px; color:var(--dim);
  font-variant-numeric:tabular-nums; letter-spacing:.04em; margin-left:auto;}
.sr-result em{font-style:normal; font-size:12px; color:var(--muted);}
.sr-empty{padding:14px 12px; color:var(--dim); font-size:13px; text-align:center;}

/* counter + language */
.sr-count{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted);
  padding:0 13px; height:40px; border-radius:11px; white-space:nowrap;
  background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(14px);}
.sr-count b{color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums;}
.sr-lang{display:flex; height:40px; border-radius:11px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(14px);}
.sr-lang button{border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:0 12px; font-size:12px; font-family:var(--ka); letter-spacing:.04em;}
.sr-lang button.on{background:var(--accent); color:var(--accent-ink); font-weight:600;}

/* ---------- bottom-left controls ---------- */
.sr-tools{position:absolute; z-index:6; left:20px; bottom:20px; display:flex; gap:8px;
  align-items:center;}
.sr-btn{height:38px; min-width:38px; padding:0 12px; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  color:var(--muted); font-size:13px; font-family:var(--ka);
  background:var(--panel); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:color .15s, border-color .15s, background .15s;}
.sr-btn:hover{color:var(--ink); border-color:var(--line-strong);}
.sr-btn.on{color:var(--accent); border-color:var(--accent-dim);}
.sr-btn:disabled{opacity:.4; cursor:default;}

/* zoom readout, bottom-right */
.sr-scale{position:absolute; z-index:6; right:20px; bottom:20px; font-size:11px;
  color:var(--dim); letter-spacing:.1em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; text-align:right; line-height:1.6;}
.sr-scale b{display:block; color:var(--muted); font-weight:500;}

/* ---------- hint ---------- */
.sr-hint{position:absolute; z-index:5; left:50%; bottom:26px; transform:translateX(-50%);
  font-size:12px; color:var(--dim); letter-spacing:.05em; text-align:center;
  pointer-events:none; transition:opacity .5s; white-space:nowrap;}
.sr-hint.hide{opacity:0;}

/* ---------- detail panel ---------- */
.sr-panel{position:absolute; z-index:7; top:0; right:0; bottom:0; width:min(400px,88vw);
  background:var(--panel-solid); border-left:1px solid var(--line);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.9);
  transform:translateX(101%); transition:transform .34s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; overflow:hidden;}
.sr-panel.open{transform:none;}
.sr-panel-scroll{flex:1; overflow-y:auto; padding:26px 26px 20px;}

.sr-close{position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer; font-size:15px; line-height:1;}
.sr-close:hover{color:var(--ink); border-color:var(--line-strong);}

.sr-eyebrow{font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin-bottom:12px;}
.sr-starname{font-family:var(--serif); font-size:30px; line-height:1.2; font-weight:600;
  color:var(--ink); margin:0 0 4px; word-break:break-word;}
.sr-code{font-size:12px; letter-spacing:.16em; color:var(--accent);
  font-variant-numeric:tabular-nums;}

.sr-rule{height:1px; background:var(--line); margin:22px 0;}
/* a hairline with a single champagne pip — the registry's signature divider */
.sr-rule-pip{position:relative; height:1px; background:var(--line); margin:22px 0;}
.sr-rule-pip::after{content:""; position:absolute; left:50%; top:50%;
  width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px 1px rgba(232,220,196,.5);}

.sr-dedication{font-family:var(--serif); font-size:16px; line-height:1.65; color:var(--ink);}
.sr-dedication .to{display:block; font-family:var(--ka); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:7px;}
.sr-message{margin-top:14px; font-family:var(--serif); font-size:15px; line-height:1.7;
  color:var(--muted); font-style:italic;}

.sr-facts{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px;}
.sr-fact{min-width:0;}
.sr-fact dt{font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin-bottom:5px;}
.sr-fact dd{margin:0; font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums;
  word-break:break-word;}
.sr-fact.wide{grid-column:1 / -1;}

.sr-cta{padding:18px 26px 26px; border-top:1px solid var(--line);}
.sr-claim{width:100%; height:48px; border:0; border-radius:12px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); font-family:var(--ka);
  font-size:14px; font-weight:600; letter-spacing:.03em;
  transition:filter .15s, transform .1s;}
.sr-claim:hover{filter:brightness(1.08);}
.sr-claim:active{transform:translateY(1px);}
.sr-note{margin:11px 0 0; font-size:11px; line-height:1.6; color:var(--dim); text-align:center;}
.sr-taken-note{margin:0; padding:13px 15px; border-radius:10px; font-size:12px;
  line-height:1.6; color:var(--muted); background:rgba(255,255,255,.04);
  border:1px solid var(--line);}

/* ---------- loading ---------- */
.sr-loading{position:absolute; inset:0; z-index:9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; background:var(--bg);
  transition:opacity .6s; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);}
.sr-loading.done{opacity:0; pointer-events:none;}
.sr-orbit{width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.10); border-top-color:var(--accent);
  animation:sr-spin 1s linear infinite;}
@keyframes sr-spin{to{transform:rotate(360deg);}}

/* ---------- intro ----------
   The first screen a visitor from an ad or a Facebook post actually sees.
   The sky alone never says what is for sale or what it costs, so this card
   carries the offer and the three prices and then gets out of the way. It is
   shown once per browser (localStorage), or on demand with ?intro=1. */
.sr-intro{position:absolute; inset:0; z-index:12; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(4,5,9,.74); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  animation:sr-fade .35s ease both;}
.sr-intro.open{display:flex;}
@keyframes sr-fade{from{opacity:0;} to{opacity:1;}}

.sr-intro-card{width:min(460px,100%); max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px); overflow-y:auto;
  padding:34px 34px 26px; border-radius:20px; text-align:center;
  background:linear-gradient(180deg,rgba(24,25,35,.97),rgba(15,16,23,.97));
  border:1px solid var(--line-strong);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95);
  animation:sr-rise .4s cubic-bezier(.2,.7,.3,1) both;}
@keyframes sr-rise{from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;}}

.sr-intro-eyebrow{font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); opacity:.75;}
.sr-intro-title{margin:14px 0 0; font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,5vw,34px); line-height:1.2; color:var(--ink);}
.sr-intro-lead{margin:12px 0 0; font-size:14px; line-height:1.65; color:var(--muted);}

.sr-intro-prices{margin:24px 0 0; border-top:1px solid var(--line);}
.sr-intro-row{display:flex; align-items:baseline; gap:14px; padding:11px 2px;
  border-bottom:1px solid var(--line); font-size:13px; text-align:left;}
.sr-intro-row span{color:var(--muted); flex:1;}
.sr-intro-row b{color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums;
  white-space:nowrap;}

.sr-intro-cta{margin:24px 0 0; width:100%; height:50px; border:0; border-radius:12px;
  cursor:pointer; background:var(--accent); color:var(--accent-ink);
  font-family:var(--ka); font-size:15px; font-weight:600; letter-spacing:.03em;
  transition:filter .15s, transform .1s;}
.sr-intro-cta:hover{filter:brightness(1.08);}
.sr-intro-cta:active{transform:translateY(1px);}
.sr-intro-how{margin:12px 0 0; font-size:12px; line-height:1.6; color:var(--dim);}

.sr-intro-skip{margin:14px 0 0; border:0; background:transparent; cursor:pointer;
  font-family:var(--ka); font-size:12px; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;}
.sr-intro-skip:hover{color:var(--ink);}
.sr-intro-fine{margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:10.5px; line-height:1.6; color:var(--dim);}

/* ---------- mobile ---------- */
@media (max-width:760px){
  /* brand and language share the first row; search takes the second in full */
  .sr-top{flex-wrap:wrap; gap:10px; padding:12px 12px 14px;}
  .sr-brand{flex:1; min-width:0; font-size:11px;}
  .sr-brand span{display:none;}
  .sr-spacer{display:none;}
  .sr-lang{order:2; height:34px;}
  .sr-search{width:100%; order:3;}
  .sr-count{display:none;}
  /* five controls will not fit 390px at desktop sizing */
  .sr-tools{left:12px; right:12px; bottom:12px; gap:6px;}
  .sr-btn{height:34px; min-width:34px; padding:0 9px; font-size:12px;}
  .sr-panel{top:auto; width:100%; height:min(70vh,560px); border-left:0;
    border-top:1px solid var(--line); border-radius:18px 18px 0 0;
    transform:translateY(101%);}
  .sr-panel.open{transform:none;}
  .sr-hint{display:none;}
  .sr-scale{display:none;}
  /* the shop link keeps its icon and drops the word */
  .sr-shop{order:2; height:34px; padding:0 10px;}
  .sr-shop span{display:none;}
  .sr-intro{padding:14px;}
  .sr-intro-card{padding:26px 20px 20px; border-radius:16px;}
}