/* ---------- Dexo -- production onboarding (claimless, monochrome) ---------- */
/*
   Ports the approved Visual Review V2/V5 design system into production,
   verbatim -- this is a port, not a new design pass. Screen 1's object,
   icon, sheen, and ripple are V2's ORIGINAL rules with exactly one
   intentional change (the ripple's corrective transform, see the comment
   above .dexo-object below) -- frozen per instruction, not touched again
   here. Screens 4-8's rules (buttons, search, personalize, preview,
   success) are V3's refined versions, carried through V4/V5 unchanged and
   approved as part of that same baseline.

   Direction: near-black/charcoal/graphite, smoked glass, soft off-white,
   restrained gray. No permanent accent color -- the card supplies color,
   not the chrome. Sans-serif throughout (Inter) -- serif stays reserved
   for the exhibit itself (shell.css), never used here.

   Does not read from or modify shell/shell.css or any atmospheres/*.css.
*/

:root{
  --ink:#09090a;
  --panel:#141416;
  --panel-2:#1b1b1e;
  --paper:#efeee9;
  --muted:#8b8a87;
  --muted-2:#5c5b58;
  --hairline:rgba(255,255,255,0.09);
  --hairline-strong:rgba(255,255,255,0.16);
  --glass:rgba(255,255,255,0.035);
  --glass-2:rgba(255,255,255,0.06);
  --danger:#e0796b;
  --good:#8fcf9f;

  --ease:cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ background:var(--ink); }
body{
  margin:0;
  min-height:100svh;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--ink);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{
  max-width:420px;
  margin:0 auto;
  min-height:100svh;
  padding:56px 22px 44px;
  display:flex;
  flex-direction:column;
}
.wrap.wide{ max-width:520px; }
body.full-bleed .wrap{ max-width:none; padding:0; min-height:100vh; }

.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  padding:16px 20px;
  pointer-events:none;
}
.topbar .brand{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.24em;
  color:var(--muted-2);
}
body.chrome-hidden .topbar{ display:none; }

.status-line{
  font-size:13px;
  color:var(--muted);
  min-height:18px;
  margin-bottom:10px;
  text-align:center;
}
.status-line.error{ color:var(--danger); }
.status-line.success{ color:var(--good); }
body.full-bleed .status-line{ display:none; }

.screen{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  animation:screenIn 0.45s var(--ease) both;
}
@keyframes screenIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.eyebrow{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--muted-2);
  text-align:center;
  margin:0 0 22px;
}
h1.h-title, h2.h-title{
  font-family:'Inter',sans-serif;
  font-weight:500;
  color:var(--paper);
  text-align:center;
  margin:0 0 10px;
  letter-spacing:-0.01em;
}
h1.h-title{ font-size:22px; }
h2.h-title{ font-size:19px; }
.h-sub{
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
  text-align:center;
  margin:0 0 30px;
  max-width:32ch;
  margin-left:auto;
  margin-right:auto;
}
.h-micro{
  font-size:11.5px;
  color:var(--muted-2);
  text-align:center;
  margin-top:12px;
}

/* ---------- Buttons -- neutral/glass, no color introduced ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:15px 22px;
  border-radius:13px;
  border:1px solid var(--hairline-strong);
  background:var(--glass-2);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--paper);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:0.015em;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 24px rgba(0,0,0,0.28);
  transition:border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s var(--ease);
}
.btn:hover{ border-color:rgba(255,255,255,0.26); background:rgba(255,255,255,0.085); }
.btn:active{ transform:scale(0.982); box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.3); }
.btn:disabled{ opacity:0.4; cursor:default; }
.btn-primary{
  background:linear-gradient(180deg, #fbfaf7, #e8e6df);
  border-color:rgba(255,255,255,0.4);
  color:#111113;
  font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 14px 30px rgba(0,0,0,0.4);
}
.btn-primary:hover{ background:linear-gradient(180deg, #ffffff, #eeece5); }
.btn-primary:active{ box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 14px rgba(0,0,0,0.35); }
.btn-quiet{
  border:none;
  background:none;
  backdrop-filter:none;
  box-shadow:none;
  color:var(--muted);
  font-size:12.5px;
  font-weight:500;
  padding:10px;
  width:auto;
}
.btn-quiet:hover{ color:var(--paper); background:none; }

.actions{ display:flex; flex-direction:column; gap:11px; margin-top:4px; }

/* ---------- Fields ---------- */
.field{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--hairline);
  background:var(--glass);
  color:var(--paper);
  font-size:14.5px;
  margin-bottom:12px;
}
.field::placeholder{ color:var(--muted-2); }
.field:focus{ outline:none; border-color:var(--hairline-strong); background:var(--glass-2); }

/* ---------- Screen 1: First Tap -- FROZEN, V2 original ----------
   Every rule in this block is V2's ORIGINAL, byte-for-byte -- object
   size/shape, gradient, shadow, the diagonal sheen, the icon (unchanged
   path data, unchanged size, unchanged position), all three rings, all
   original timing. The icon is not moved, resized, or redrawn here, and
   per explicit instruction this is not to be touched again for further
   alignment polish -- any remaining imperfection is accepted and tracked
   in the polish backlog, not fixed in this pass.

   The ONE intentional change is the single `transform: translate(0,
   -1.9479px);` line inside .nfc-ripple below, carried over from the
   approved Visual Review V5: it moves the ripple (not the icon) to
   originate from the icon's true painted center rather than the object's
   geometric center. See the Visual Review V4/V5 packages for the full
   derivation if ever revisited. */
.dexo-object{
  position:relative;
  width:150px;
  height:210px;
  margin:0 auto 34px;
  border-radius:16px;
  background:linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015) 55%);
  border:1px solid var(--hairline-strong);
  box-shadow:0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dexo-object::before{
  content:'';
  position:absolute;
  inset:-40%;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{
  0%, 100%{ transform:translateX(-20%) translateY(-10%); }
  50%{ transform:translateX(20%) translateY(10%); }
}
.nfc-glyph{ position:relative; width:34px; height:34px; }
.nfc-glyph svg{ width:100%; height:100%; opacity:0.8; }
.nfc-ripple{
  position:absolute;
  inset:0;
  margin:auto;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  opacity:0;
  animation:ripple 3.2s ease-out infinite;
  transform:translate(0, -1.9479px);
}
.nfc-ripple.r2{ animation-delay:1.1s; }
.nfc-ripple.r3{ animation-delay:2.2s; }
@keyframes ripple{
  0%{ width:34px; height:34px; opacity:0.55; }
  75%{ width:120px; height:120px; opacity:0; }
  100%{ width:120px; height:120px; opacity:0; }
}

/* ---------- Deliberate-action confirmation (Add this Dexo / Dexo added) ---------- */
.confirm-mark{
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--hairline-strong);
  background:var(--glass-2);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  animation:popIn 0.4s var(--ease) both;
}
.confirm-mark svg{ width:18px; height:18px; }
@keyframes popIn{
  from{ opacity:0; transform:scale(0.8); }
  to{ opacity:1; transform:scale(1); }
}

/* ---------- Search ---------- */
.search-shell{ margin-bottom:20px; }
.search-field-wrap{ position:relative; }
.search-field-wrap .search-icon{
  position:absolute;
  left:15px; top:50%;
  transform:translateY(-50%);
  width:15px; height:15px;
  color:var(--muted-2);
  pointer-events:none;
}
.search-field-wrap .field{ padding-left:41px; }

.results-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin-bottom:16px;
}
.result-tile{
  background:none;
  border:none;
  padding:0;
  text-align:left;
  cursor:pointer;
  color:inherit;
  font:inherit;
}
.result-tile .r-img-wrap{
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:5/7;
  margin-bottom:9px;
  transition:transform 0.2s var(--ease);
}
.result-tile:active .r-img-wrap{ transform:scale(0.97); }
.result-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.result-tile .r-name{ font-size:13px; font-weight:500; color:var(--paper); }
.result-tile .r-meta{ font-size:11.5px; color:var(--muted-2); margin-top:1px; }
.load-more-row{ display:flex; justify-content:center; margin:6px 0 18px; }

/* ---------- Personalize ---------- */
.artifact-hero{
  position:relative;
  display:flex;
  justify-content:center;
  margin-bottom:20px;
  padding:20px 0;
}
.artifact-hero .glow{
  position:absolute;
  inset:0;
  margin:auto;
  width:220px; height:220px;
  border-radius:50%;
  filter:blur(46px);
  opacity:0.35;
  pointer-events:none;
  z-index:0;
}
.artifact-hero img{
  position:relative;
  z-index:1;
  width:min(48vw, 190px);
  border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
}
.artifact-caption{ text-align:center; margin-bottom:26px; }
.artifact-caption .a-name{ font-size:16.5px; font-weight:600; color:var(--paper); }
.artifact-caption .a-meta{ font-size:12px; color:var(--muted-2); margin-top:2px; }

.section-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin:0 0 14px;
}

.origin-field{ margin-bottom:22px; }
.origin-field textarea{
  width:100%;
  min-height:96px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--hairline);
  background:var(--glass);
  color:var(--paper);
  font-family:inherit;
  font-size:14px;
  line-height:1.55;
  resize:none;
}
.origin-field textarea::placeholder{ color:var(--muted-2); }
.origin-field textarea:focus{ outline:none; border-color:var(--hairline-strong); }

.details-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--hairline);
  background:var(--glass);
  color:var(--muted);
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
  margin-bottom:2px;
}
.details-toggle .chev{ transition:transform 0.2s; opacity:0.6; }
.details-panel{
  overflow:hidden;
  max-height:0;
  transition:max-height 0.3s var(--ease);
}
.details-panel.open{ max-height:260px; }
.details-panel-inner{ padding:16px 2px 6px; }
.light-field{ margin-bottom:14px; }
.light-field label{
  display:block;
  font-size:11px;
  color:var(--muted-2);
  margin-bottom:5px;
}
.light-field input{
  width:100%;
  padding:8px 0;
  border:none;
  border-bottom:1px solid var(--hairline);
  background:none;
  color:var(--paper);
  font-family:inherit;
  font-size:13.5px;
}
.light-field input:focus{ outline:none; border-bottom-color:var(--hairline-strong); }

/* ---------- Preview ---------- */
.preview-frame{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  border:none;
  background:var(--ink);
}
.preview-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(9,9,10,0.85), rgba(9,9,10,0));
}
.preview-bar .btn-quiet{ flex:0 0 auto; color:rgba(239,238,233,0.7); }
.preview-bar .btn-primary{ flex:1; }

/* ---------- Success ---------- */
.success-mark{
  width:54px; height:54px;
  border-radius:50%;
  border:1px solid var(--hairline-strong);
  background:var(--glass-2);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px;
}
.success-mark svg{ width:20px; height:20px; }

@media (min-width:640px){
  .wrap{ padding-top:88px; }
}
@media (min-width:820px){
  .results-grid{ grid-template-columns:repeat(3, 1fr); gap:20px; }
  .wrap.wide{ max-width:640px; }
}