/* ══════════════════════════════════════════════════════════════════
   upgrade-v3.css — SAGAR PORTFOLIO v3 (Sprints 3 + 4)
   ADDITIVE ONLY. Loads LAST, so it refines without rewriting anything.
   Nothing here changes layout structure — it only corrects contrast,
   focus visibility, motion, and adds the engineering title-block.
   ══════════════════════════════════════════════════════════════════ */

/* ── SPRINT 3: Accessibility ────────────────────────────────────── */

/* The old --text-muted (#506080) failed WCAG AA on the dark background
   (~3.1:1). Lift it to a compliant tone site-wide. */
:root{
  --text-muted: #7d90ad !important;   /* now ~4.6:1 on --bg-main */
}

/* Every interactive element gets a visible keyboard focus ring.
   Previously a keyboard user could not see where they were. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--yellow, #ffd60a) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

/* Respect the OS "reduce motion" setting. Some visitors get motion sick;
   this is not optional for an accessible site. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip-to-content link for screen-reader / keyboard users. */
.sp-skip{position:absolute;left:-999px;top:0;z-index:100000;
  background:var(--yellow);color:#0a0e1a;padding:.6rem 1rem;
  font-family:var(--font-mono);font-size:.8rem;border-radius:2px;}
.sp-skip:focus{left:8px;top:8px;}

/* ── SPRINT 4: Engineering title-block (Padma's direction, lightweight) ──
   A real drawing carries a title block in the corner. This is that.

   POSITIONING NOTE: it sits bottom-LEFT of the content area, clear of the
   RED chat launcher (fixed bottom-right, 58px + 1.5rem margin) and clear
   of the chat window when it opens (360px wide, anchored right).
   Left offset tracks --sidebar-w so it never sits on top of the sidebar.
   Raised to 74px so it clears the page footer's copyright line when the
   visitor scrolls to the bottom. */
.sp-titleblock{
  position:fixed;
  left:calc(var(--sidebar-w, 255px) + 14px);
  bottom:16px;
  z-index:40;                    /* below the bot's 100000 — never competes */
  display:grid;grid-template-columns:auto auto;gap:0;
  font-family:var(--font-mono);font-size:.52rem;line-height:1.35;
  color:var(--text-dim);background:rgba(10,14,26,.82);
  border:1px solid var(--border-hi);backdrop-filter:blur(4px);
  border-radius:2px;overflow:hidden;pointer-events:none;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  opacity:.85;transition:opacity .3s ease;
}
.sp-titleblock:hover{opacity:1;}
/* Set by js/titleblock.js when the footer scrolls into view. The block
   yields rather than competing for the same pixels. */
.sp-titleblock.tb-hidden{opacity:0;transform:translateY(8px);pointer-events:none;}
.sp-titleblock div{padding:.25rem .55rem;border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);}
.sp-titleblock b{color:var(--yellow-hi);font-weight:700;letter-spacing:.05em;}
.sp-titleblock .tb-wide{grid-column:1 / -1;border-right:none;}
.sp-titleblock .tb-last{border-bottom:none;}

/* Give the footer breathing room so nothing sits under the title block
   or under the chat launcher on the right. */
.page-footer{
  padding-bottom:2.5rem !important;
  padding-right:5.5rem !important;   /* clears the 58px bot + margin */
}

/* Hide on smaller screens: not enough room, and the bot takes priority. */
@media (max-width:1100px){ .sp-titleblock{display:none;}
  .page-footer{padding-right:var(--content-pad) !important;} }

/* Section reveals that respect reduced motion are handled above.
   Give project images a consistent frame so placeholder and real
   photos both look intentional. */
.project-card img,
.proj-img img,
[class*="project"] img{
  background:#0f1626;
}