/* ============================================================================
   TARA — S44 skin layer (Phase 0 base + Phase 1 login scaffold).
   This file holds the skin-neutral scaffold. The two finalist looks live in
   skin-terminal.css (UI-1, dark) and skin-aurora.css (UI-2, light), both
   scoped under html[data-ui="…"]. Loaded after styles.css so it wins.
   ========================================================================== */

/* ---- gate scaffold ---------------------------------------------------- */
#gate{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;padding:0;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
#gate .gp-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#gate .gp-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 22px;flex:0 0 auto}
#gate .gp-brand{display:flex;align-items:center;gap:10px;min-width:0}
#gate .gp-logo{display:inline-flex;width:26px;height:26px}
#gate .gp-logo svg{width:100%;height:100%}
#gate .gp-logo img{width:100%;height:100%;object-fit:contain;display:block;background:none}  /* 🪙 S170 */
#gate .gp-name{font-weight:800;letter-spacing:.14em;font-size:18px}
#gate .gp-tag{font-size:10.5px;letter-spacing:.22em;opacity:.6}
#gate .gp-right{display:flex;align-items:center;gap:10px}
#gate .gp-live{font-size:11px;letter-spacing:.12em;padding:3px 9px;border-radius:20px;
  border:1px solid transparent;white-space:nowrap}
#gate .gp-live[data-state="live"]{color:#22c55e;border-color:rgba(34,197,94,.35)}
#gate .gp-live[data-state="demo"]{color:#f59e0b;border-color:rgba(245,158,11,.35)}
#gate .gate-theme{position:static;width:34px;height:34px;border-radius:10px;border:1px solid rgba(128,128,128,.3);
  background:transparent;cursor:pointer;font-size:15px;line-height:1}

#gate .gp-wrap{position:relative;z-index:2;flex:1 1 auto;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,460px);
  gap:26px;align-items:start;justify-content:center;
  width:min(1240px,100%);margin:0 auto;padding:8px 22px 18px}
#gate .gp-scene{min-width:0;min-height:340px}
#gate .gp-card-slot{min-width:0}

#gate .gp-ticker{position:relative;z-index:2;flex:0 0 auto;overflow:hidden;white-space:nowrap;
  padding:7px 0;font-size:12.5px;border-top:1px solid rgba(128,128,128,.18);
  border-bottom:1px solid rgba(128,128,128,.18)}
#gate .gp-ticker .tkrow{display:inline-block;padding-left:100%;animation:gp-marquee 36s linear infinite;will-change:transform}
#gate .gp-ticker .tk{margin:0 14px}
#gate .gp-ticker .tk .up{color:#22c55e;font-style:normal}
#gate .gp-ticker .tk .dn{color:#ef4444;font-style:normal}
#gate .gp-ticker .tksep{opacity:.4}
@keyframes gp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

#gate .gp-quotes{position:relative;z-index:2;flex:0 0 auto;padding:14px 22px 18px;text-align:center}
#gate .gq{max-width:860px;margin:0 auto;animation:gq-in .7s ease}
#gate .gq-text{font-size:15px;line-height:1.55}
#gate .gq-verse .gq-text{font-size:17px;font-weight:600}
#gate .gq-meaning{font-size:12.5px;opacity:.75;margin-top:4px}
#gate .gq-attr{font-size:11.5px;opacity:.55;margin-top:4px;letter-spacing:.08em}
#gate .gq-dots{margin-top:8px}
#gate .gq-dots .qd{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.25;margin:0 3px}
#gate .gq-dots .qd.on{opacity:.9}
@keyframes gq-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- shared card internals -------------------------------------------- */
#gate .gate-hello{font-size:14px;letter-spacing:.04em;margin:2px 0 12px;opacity:.9}
#gate .gcur{display:inline-block;width:9px;height:15px;margin-left:5px;vertical-align:-2px;
  background:currentColor;animation:gp-blink 1.05s steps(1) infinite}
@keyframes gp-blink{50%{opacity:0}}
#gate .gfield{margin-top:10px}
#gate .gin{display:flex;align-items:center;gap:8px;position:relative}
#gate .gin input{flex:1 1 auto;min-width:0}
#gate .gprompt{display:none;font-size:12px;white-space:nowrap;opacity:.75;user-select:none}
#gate .geye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;font-size:14px;opacity:.7}
#gate .geye:hover{opacity:1}
#gate .gbtn-google{display:flex;align-items:center;justify-content:center;gap:8px}

/* ---- staging demo bar (?demo=1 only) ----------------------------------- */
#gpDemoBar{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:3000;
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;max-width:96vw;
  background:rgba(15,18,30,.92);color:#cbd5e1;border:1px solid rgba(148,163,184,.35);
  border-radius:12px;padding:7px 10px;font-size:11px;backdrop-filter:blur(6px)}
#gpDemoBar b{letter-spacing:.1em;margin-right:4px;color:#93c5fd}
#gpDemoBar button{border:1px solid rgba(148,163,184,.3);background:rgba(30,41,59,.8);
  color:#e2e8f0;border-radius:8px;padding:3px 8px;cursor:pointer;font-size:11px}
#gpDemoBar button:hover{background:rgba(51,65,85,.9)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:980px){
  #gate .gp-wrap{grid-template-columns:1fr;gap:16px}
  #gate .gp-scene{order:2;min-height:260px}
  #gate .gp-card-slot{order:1;max-width:520px;margin:0 auto;width:100%}
}
@media (max-width:520px){
  #gate .gp-top{padding:10px 14px}
  #gate .gp-wrap{padding:4px 12px 14px}
  #gate .gp-tag{display:none}
}

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #gate .gp-ticker .tkrow{animation:none;padding-left:0}
  #gate .gq{animation:none}
  #gate .gcur{animation:none}
}