/* ============================================================================
   TARA — skin-aurora-shell.css (Phase 2 — logged-in app shell, UI "aurora").
   DERIVED from ../S43-login-previews/light-A-aurora.html (login-only final):
   pastel aurora page atmosphere, glass sidebar card, rounded soft shadows,
   Inter type, indigo→teal→rose accent gradient. Palette/tokens mirror the
   Phase-1 sibling skin-aurora.css so gate + shell read as ONE design.
   Every selector is scoped under html[data-ui="aurora"]. CSS only, no new DOM.
   #gate / .gp-* / .gate-* are untouched (Phase-1 file owns those).
   No @keyframes are declared here at all (weak-GPU rule: the atmosphere is
   static gradients only) — the tsh-/ash- prefix rule is therefore trivially met.
   ========================================================================== */

/* ---- tokens (own --ash- namespace; app/theme vars stay untouched) ------- */
html[data-ui="aurora"]{
  --ash-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ash-bg: #eef2fb;
  --ash-bg-2: #f6f8ff;
  --ash-ink: #1a2038;
  --ash-ink-soft: #5a6382;
  --ash-ink-faint: #8b93b0;
  --ash-glass: rgba(255,255,255,0.55);
  --ash-glass-2: rgba(255,255,255,0.38);
  --ash-glass-brd: rgba(255,255,255,0.75);
  --ash-glass-brd-2: rgba(120,130,180,0.16);
  --ash-field: rgba(255,255,255,0.7);
  --ash-field-brd: rgba(120,130,180,0.22);
  --ash-accent: #6366f1;
  --ash-teal: #0ea5a4;
  --ash-rose: #fb7185;
  --ash-gold: #d4a017;
  --ash-up: #16a06f;
  --ash-down: #e5484d;
  --ash-grad: linear-gradient(120deg, #6366f1 0%, #0ea5a4 55%, #fb7185 120%);
  --ash-grad-soft: linear-gradient(120deg, rgba(99,102,241,.14), rgba(14,165,164,.12) 55%, rgba(251,113,133,.12));
  --ash-shadow-1: 0 1px 2px rgba(30,40,90,.06), 0 8px 24px rgba(40,50,110,.09);
  --ash-shadow-2: 0 8px 30px rgba(40,50,110,.14), 0 30px 60px rgba(40,50,110,.14);
  --ash-glow: 0 0 0 4px rgba(99,102,241,.14);
  --ash-radius: 22px;
  --ash-radius-sm: 13px;
  --ash-ease: cubic-bezier(.22,.61,.36,1);
  --ash-ease-back: cubic-bezier(.34,1.56,.64,1);
}

/* ---- page atmosphere (behind #app; the gate paints its own opaque bg) ---
   Static aurora sky: soft pastel radials baked into gradients — no blur
   filters, no drift animation (weak virtualized GPU). Overrides the old
   theme's paper/aurora-breathe body layers inside this skin's scope.       */
html[data-ui="aurora"] body,
html.light[data-ui="aurora"] body{
  font-family:var(--ash-font);
  color:var(--ash-ink);
  background:
    radial-gradient(60% 55% at 15% 20%, rgba(160,180,255,.28), transparent 60%),
    radial-gradient(50% 50% at 85% 15%, rgba(120,240,220,.22), transparent 60%),
    radial-gradient(55% 55% at 80% 85%, rgba(255,170,200,.24), transparent 62%),
    radial-gradient(60% 60% at 20% 90%, rgba(190,170,255,.22), transparent 62%),
    var(--ash-bg, #eef2fb);
  background-attachment:fixed;
}
/* old theme's animated "aurora breathe" layer → off (rule 6: perf) */
html[data-ui="aurora"] body::before,
html.light[data-ui="aurora"] body::before{
  animation:none; filter:none; inset:0; opacity:1;
  background:
    radial-gradient(46vw 46vw at -4% -4%, rgba(142,162,255,.16), transparent 68%),
    radial-gradient(40vw 40vw at 102% 0%, rgba(94,234,212,.13), transparent 68%),
    radial-gradient(44vw 44vw at 96% 104%, rgba(252,165,196,.14), transparent 68%),
    radial-gradient(38vw 38vw at 2% 102%, rgba(196,181,253,.13), transparent 68%);
}
/* old theme's paper-fibre / dark-grain layer → fine film grain (final's look) */
html[data-ui="aurora"] body::after,
html.light[data-ui="aurora"] body::after{
  opacity:.035; mix-blend-mode:overlay; background-size:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================ SIDEBAR ==================================== */
/* glass card: works as overlay drawer (<921px) and docked rail (≥921px);
   transform/transition mechanics from styles.css are left untouched.       */
html[data-ui="aurora"] #sidebar{
  background:var(--ash-glass);
  border-right:1px solid var(--ash-glass-brd);
  box-shadow:1px 0 0 var(--ash-glass-brd-2), 0 8px 24px rgba(40,50,110,.07);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
html[data-ui="aurora"] #app.nav-open #sidebar{
  box-shadow:0 12px 40px rgba(40,50,110,.22), 0 30px 70px rgba(40,50,110,.18);
}

/* brand */
/* 🪙 S170: aurora का logo-tile (grad+shadow) हटाया — owner: सिर्फ़ icon, background कोई color नहीं */
html[data-ui="aurora"] #sidebar .brand .name{
  background:none; -webkit-background-clip:initial; background-clip:initial;
  color:var(--ash-ink); font-weight:800; letter-spacing:.02em; filter:none;
}
html[data-ui="aurora"] #sidebar .brand .sub{
  color:var(--ash-ink-faint); letter-spacing:.24em; font-weight:600;
}

/* nav items */
html[data-ui="aurora"] #sidebar nav a{
  color:var(--ash-ink-soft); font-weight:600; border-radius:var(--ash-radius-sm);
}
html[data-ui="aurora"] #sidebar nav a .ic{ opacity:.8; }
html[data-ui="aurora"] #sidebar nav a:hover{
  background:var(--ash-glass-2); color:var(--ash-ink);
}
html[data-ui="aurora"] #sidebar nav a.active{
  color:#fff; border:none; padding:11px 12px;               /* +1px: old skin's 1px border replaced */
  background:var(--ash-grad); background-size:180% 180%;
  box-shadow:0 8px 22px rgba(99,102,241,.32), inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-ui="aurora"] #sidebar nav a.active::after{        /* route dot */
  width:7px; height:7px; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.8);
}
html[data-ui="aurora"] #sidebar nav a:focus-visible{
  outline:none; box-shadow:var(--ash-glow);
}

/* badges (.nbadge: unread signals / pending users) */
html[data-ui="aurora"] #sidebar nav a .nbadge{
  background:linear-gradient(120deg, #f43f5e, var(--ash-rose));
  color:#fff; box-shadow:0 2px 8px rgba(244,63,94,.35);
}
html[data-ui="aurora"] #sidebar nav a.active .nbadge{
  background:rgba(255,255,255,.24); box-shadow:none;
}

/* group labels (contract rule 2: keyed only on data-paths present in both
   user and staff navs; English-only content) */
html[data-ui="aurora"] #sidebar nav a[data-path="/"],
html[data-ui="aurora"] #sidebar nav a[data-path="/signal"],
html[data-ui="aurora"] #sidebar nav a[data-path="/settings"],
html[data-ui="aurora"] #sidebar nav a[data-path="/generate"]{
  position:relative; margin-top:22px;
}
html[data-ui="aurora"] #sidebar nav a[data-path="/"]::before,
html[data-ui="aurora"] #sidebar nav a[data-path="/signal"]::before,
html[data-ui="aurora"] #sidebar nav a[data-path="/settings"]::before,
html[data-ui="aurora"] #sidebar nav a[data-path="/generate"]::before{
  position:absolute; top:-17px; left:12px; right:12px;
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ash-ink-faint); pointer-events:none; white-space:nowrap;
}
html[data-ui="aurora"] #sidebar nav a[data-path="/"]::before{ content:"Journal"; }
html[data-ui="aurora"] #sidebar nav a[data-path="/signal"]::before{ content:"Signals"; }
html[data-ui="aurora"] #sidebar nav a[data-path="/settings"]::before{ content:"System"; }
html[data-ui="aurora"] #sidebar nav a[data-path="/generate"]::before{ content:"Admin"; }

/* side-foot: install btn · theme row · user row */
html[data-ui="aurora"] .side-foot{ border-top:1px solid var(--ash-glass-brd-2); margin-top:8px; }
html[data-ui="aurora"] #sidebar .btn{                       /* #installBtn + #logoutBtn (display untouched) */
  border:1.5px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm);
  background:var(--ash-field); color:var(--ash-ink); font-weight:700;
  box-shadow:var(--ash-shadow-1);
  transition:transform .3s var(--ash-ease-back), box-shadow .3s var(--ash-ease), border-color .3s;
}
html[data-ui="aurora"] #sidebar .btn:hover{
  transform:translateY(-2px); border-color:var(--ash-accent); box-shadow:var(--ash-shadow-2);
}
html[data-ui="aurora"] #sidebar .btn:active{ transform:translateY(0) scale(.97); }
html[data-ui="aurora"] .theme-row .lbl{ color:var(--ash-ink-soft); font-weight:600; }
html[data-ui="aurora"] .theme-switch{
  border:1.5px solid var(--ash-field-brd); background:rgba(120,130,180,.14);
}
html[data-ui="aurora"] .theme-switch:hover{ border-color:var(--ash-accent); }
html[data-ui="aurora"] .theme-switch .knob{                 /* transform (day/night travel) untouched */
  background:var(--ash-grad);
  box-shadow:0 2px 8px rgba(40,50,110,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
html[data-ui="aurora"] .user-row{ border-top:1px solid var(--ash-glass-brd-2); }
html[data-ui="aurora"] .user-row .uname{ color:var(--ash-ink); }
html[data-ui="aurora"] .user-row .ubadge{
  color:var(--ash-accent); background:rgba(99,102,241,.12);
  padding:2px 7px; border-radius:999px; width:max-content;
  letter-spacing:.14em; font-weight:800;
}

/* ===================== BURGER + DRAWER OVERLAY =========================== */
html[data-ui="aurora"] #navToggle{
  border:1px solid var(--ash-glass-brd); border-radius:var(--ash-radius-sm);
  background:var(--ash-glass); color:var(--ash-ink);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--ash-shadow-1);
}
html[data-ui="aurora"] #navToggle:hover{ color:var(--ash-accent); }
html[data-ui="aurora"] #app.nav-open ~ #navToggle{          /* open state: quiet, sits beside brand */
  background:transparent; border-color:transparent; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--ash-ink-soft);
}
html[data-ui="aurora"] #app.nav-open ~ #navToggle:hover{
  color:var(--ash-ink); border-color:var(--ash-field-brd);
}
html[data-ui="aurora"] .navdim{
  background:rgba(30,40,90,.28);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}

/* ============================== #MAIN ==================================== */
/* base typography only — views' innards are Phase-3 territory */
html[data-ui="aurora"] #main{ color:var(--ash-ink); }
html[data-ui="aurora"] #main .page-h{
  color:var(--ash-ink); font-weight:800; letter-spacing:-.5px;
}
html[data-ui="aurora"] #main .page-sub{ color:var(--ash-ink-soft); }
html[data-ui="aurora"] #main .muted{ color:var(--ash-ink-faint); }

/* ---- light base pass on generic surfaces (subtle; Phase 3 goes deeper) --
   High-opacity white instead of backdrop blur: dozens of cards would be too
   heavy for the weak GPU, and html.light already disables their blur.      */
html[data-ui="aurora"] #main .card,
html[data-ui="aurora"] #main .stat{
  background:rgba(255,255,255,.62); border:1px solid var(--ash-glass-brd);
  border-radius:18px; box-shadow:var(--ash-shadow-1);
}
html[data-ui="aurora"] #main .stat::before{                 /* corner glow → soft aurora tint */
  background:radial-gradient(circle, rgba(99,102,241,.22), transparent 70%);
}
html[data-ui="aurora"] #main .stat.profit::before{ background:radial-gradient(circle, rgba(22,160,111,.2), transparent 70%); }
html[data-ui="aurora"] #main .stat.loss::before{ background:radial-gradient(circle, rgba(229,72,77,.18), transparent 70%); }
html[data-ui="aurora"] #main .stat .t{ color:var(--ash-ink-faint); }
html[data-ui="aurora"] #main .stat .v{
  background:none; -webkit-background-clip:initial; background-clip:initial;
  color:var(--ash-ink); filter:none;
}
html[data-ui="aurora"] #main .stat.profit .v{ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--ash-up); }
html[data-ui="aurora"] #main .stat.loss .v{ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--ash-down); }
html[data-ui="aurora"] #main .stat .s{ color:var(--ash-ink-soft); }
html[data-ui="aurora"] #main .tile{
  background:rgba(255,255,255,.5); border:1px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm);
}
html[data-ui="aurora"] #main .tile .k{ color:var(--ash-ink-faint); }

/* buttons */
html[data-ui="aurora"] #main .btn{
  border:1.5px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm);
  background:var(--ash-field); color:var(--ash-ink); font-weight:700;
  box-shadow:var(--ash-shadow-1);
  transition:transform .3s var(--ash-ease-back), box-shadow .3s var(--ash-ease), border-color .3s;
}
html[data-ui="aurora"] #main .btn:hover{
  transform:translateY(-2px); border-color:var(--ash-accent); box-shadow:var(--ash-shadow-2);
}
html[data-ui="aurora"] #main .btn:active{ transform:translateY(0) scale(.985); }
html[data-ui="aurora"] #main .btn.primary{
  border:none; color:#fff; background:var(--ash-grad); background-size:180% 180%;
  box-shadow:0 8px 22px rgba(99,102,241,.32);
  transition:transform .3s var(--ash-ease-back), box-shadow .3s var(--ash-ease), background-position .6s var(--ash-ease);
}
html[data-ui="aurora"] #main .btn.primary:hover{
  transform:translateY(-2px); filter:none; background-position:100% 0;
  box-shadow:0 14px 30px rgba(99,102,241,.4);
}
html[data-ui="aurora"] #main .btn.primary::after{ display:none; animation:none; }  /* infinite shine sweep off (perf) */
html[data-ui="aurora"] #main .btn.primary:disabled{ opacity:.45; box-shadow:none; transform:none; }
html[data-ui="aurora"] #main .btn.primary:focus-visible{ outline:none; box-shadow:var(--ash-glow), 0 14px 30px rgba(99,102,241,.4); }

/* ---- reduced motion (nothing here animates; calm the hover travel too) -- */
@media (prefers-reduced-motion:reduce){
  html[data-ui="aurora"] #sidebar .btn:hover,
  html[data-ui="aurora"] #main .btn:hover,
  html[data-ui="aurora"] #main .btn.primary:hover{
    transform:none; background-position:0 0; transition:none;
  }
}
