/* =============================================================================
   identity.css — brand identity layer (loaded LAST, after app-refresh.css).
   Gives the dashboard its own face: display typography (Space Grotesk),
   green promoted to brand colour #2 (green = human), film-grain texture,
   and the signature score RING (the 87→0 motif from the ads).
   Fully additive — revert = remove the <link> in index.html.
   ============================================================================= */

:root{
  --font-display:"Space Grotesk","Inter","Segoe UI",sans-serif;
  --ok2:#46d987;
  --ok-glow:rgba(63,185,80,.45);
}

/* ---- 1. Display typography -------------------------------------------------
   Headings, buttons and numbers get a characterful face; body stays Inter. */
.view-title,.pane-title,.btn,
.plan-name,.plan-price,.dc-title,.cl-title,.cl-date,
.upz-title,.feat-lock-title,
.nav-group-label,.ftl-head,.ftl-round,
.usage-bar b,.tno-cred-txt b{
  font-family:var(--font-display);
}
.view-title{letter-spacing:-.02em;font-weight:700}
.pane-title{letter-spacing:.16em}
.btn{letter-spacing:.01em}
.plan-price{letter-spacing:-.03em}

/* ---- 2. Green joins the brand ----------------------------------------------
   The product's promise is "green" — the aurora and the output pane say so. */
body::before{
  background:
    radial-gradient(38% 50% at 16% 20%, rgba(124,131,255,.26), transparent 62%),
    radial-gradient(32% 44% at 84% 12%, rgba(163,113,247,.20), transparent 60%),
    radial-gradient(42% 54% at 78% 90%, rgba(63,185,80,.14), transparent 62%),
    radial-gradient(34% 46% at 22% 94%, rgba(124,131,255,.12), transparent 60%);
}
body.light::before{opacity:.45}

/* input → output story: a coloured hairline on each pane's top edge and a
   status dot next to the pane title. Input = purple (AI in), output = green
   (human out). ::before is free on .pane (fx-* animations own ::after). */
.workspace>.pane{position:relative}
.workspace>.pane::before{
  content:"";position:absolute;top:0;left:7%;right:7%;height:2px;z-index:8;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(124,131,255,.65),transparent);
}
.workspace>.pane:last-of-type::before{
  background:linear-gradient(90deg,transparent,rgba(63,185,80,.6),transparent);
}
.workspace .pane-title::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:8px;vertical-align:1px;
  background:var(--acc);box-shadow:0 0 10px var(--acc);
}
.workspace>.pane:last-of-type .pane-title::before{
  background:var(--ok2);box-shadow:0 0 10px var(--ok-glow);
}

/* ---- 3. Film grain ----------------------------------------------------------
   A fine static noise overlay kills the flat "AI gradient" look. */
.app-shell::before{
  content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
body.light .app-shell::before{opacity:.03}

/* ---- 4. Signature: the score ring -------------------------------------------
   The chip becomes a real ring gauge — same motif as the 87→0 ring in the ads.
   app.js keeps driving --lvl (0-100) and --col; the conic sweep animates. */
@property --lvl{syntax:'<number>';initial-value:0;inherits:false}
.ring{
  width:48px;height:48px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from -90deg, var(--col) calc(var(--lvl,0)*3.6deg), rgba(127,140,170,.30) 0);
  box-shadow:0 0 24px -9px var(--col);
  transition:--lvl .9s cubic-bezier(.22,1,.36,1), --col .5s linear, box-shadow .4s;
}
.ring::before{
  content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--panel);
}
body.light .ring::before{box-shadow:inset 0 1px 4px rgba(30,40,70,.15)}
.ring .ring-num{
  position:relative;z-index:1;font-family:var(--font-display);
  font-size:12.5px;font-weight:700;text-shadow:none;
}
.ring .ring-bar{display:none}
.ring.safe::after{inset:-3px;border-radius:50%}

/* mini ring used in the file-job live ticker (PPTX / Word) */
.gring{
  --sz:38px;flex:0 0 auto;width:var(--sz);height:var(--sz);border-radius:50%;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  background:conic-gradient(from -90deg, var(--col,#7c83ff) calc(var(--lvl,0)*3.6deg), rgba(127,140,170,.18) 0);
  box-shadow:0 0 16px -6px var(--col,#7c83ff);
  transition:--lvl .6s ease, box-shadow .4s;
}
.gring::before{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--panel2)}
.gring b{position:relative;z-index:1;font-family:var(--font-display);font-size:10.5px;font-weight:700;color:var(--ink)}
.ftl-left{display:flex;align-items:center;gap:11px}

@media (prefers-reduced-motion:reduce){
  .ring,.gring{transition:none}
}