/* Israr Mohammed portfolio — the only stylesheet.
   Cascade layers per CLAUDE.md. Design system approved in S2; S3 adds the
   structural foundation (reset, tokens, base, layout, header/nav/footer). */

@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-SemiBold-subset.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback so the swap to the real font doesn't shift layout.
   Values computed from IBM Plex Sans Regular's hhea/OS-2 tables (S2). No
   size-adjust: a browser comparison found none was needed against Arial. */
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Arial");
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  h1, h2, h3, h4, p, dl, dd { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }
}

@layer tokens {
  :root {
    /* color (blueprint §4.2), light values */
    --c-sheet: #F4F6F5;
    --c-ink: #1D2B45;
    --c-graphite: #4E5A6B;
    --c-line: #C9D1D9;
    --c-signal: #2450C8;
    --c-marker: #B7791F;

    /* spacing (blueprint §4.4): 4/8/12/16/24/32/48/64/96, larger steps fluid */
    --space-3xs: .25rem;
    --space-2xs: .5rem;
    --space-xs: .75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: clamp(2.5rem, 2rem + 2vw, 3rem);
    --space-2xl: clamp(3rem, 2.4rem + 3vw, 4rem);
    --space-3xl: clamp(4rem, 3rem + 5vw, 6rem);

    /* type scale (blueprint §4.3) */
    --step--1: clamp(.83rem, .8rem + .15vw, .9rem);
    --step-0: clamp(1.06rem, 1rem + .25vw, 1.13rem);
    --step-1: clamp(1.27rem, 1.18rem + .4vw, 1.5rem);
    --step-2: clamp(1.53rem, 1.38rem + .7vw, 2rem);
    --step-3: clamp(1.83rem, 1.6rem + 1.1vw, 2.66rem);
    --step-4: clamp(2.2rem, 1.85rem + 1.8vw, 3.55rem);

    --font-sans: "IBM Plex Sans", "IBM Plex Sans Fallback", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    --container-max: 80rem;
    --gutter: clamp(1rem, 4vw, 3rem);
  }

  /* dark theme: OS preference only, per blueprint D6 (no manual toggle).
     Values finalized and contrast-checked in S2 (§4.2), unchanged here. */
  @media (prefers-color-scheme: dark) {
    :root {
      --c-sheet: #121A26;
      --c-ink: #E6EBF2;
      --c-graphite: #A7B1C0;
      --c-line: #2C3A4F;
      --c-signal: #8FB0FF;
      --c-marker: #E3A94A;
    }
  }
}

@layer base {
  body {
    background: var(--c-sheet);
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.15;
  }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }

  a { color: var(--c-signal); text-underline-offset: .15em; }
  code, pre { font-family: var(--font-mono); }

  :focus-visible {
    outline: 2px solid var(--c-signal);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

@layer layout {
  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .section {
    padding-block: var(--space-2xl);
  }
  .prose { max-width: 68ch; }
}

@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-s);
    inset-block-start: -3rem;
    background: var(--c-sheet);
    color: var(--c-ink);
    padding: var(--space-2xs) var(--space-s);
    border: 1px solid var(--c-line);
    transition: inset-block-start .15s ease;
    z-index: 10;
  }
  .skip-link:focus-visible { inset-block-start: var(--space-s); }

  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--c-line);
  }
  .site-header .brand {
    font-weight: 600;
    font-size: var(--step-0);
    color: var(--c-ink);
    text-decoration: none;
  }
  .site-header .brand:hover { color: var(--c-signal); }

  .site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-m); }
  .site-nav a { display: inline-block; padding-block: var(--space-2xs); color: var(--c-ink); text-decoration: none; }
  .site-nav a:hover { color: var(--c-signal); text-decoration: underline; }

  .site-footer {
    padding-block: var(--space-l);
    border-block-start: 1px solid var(--c-line);
    color: var(--c-graphite);
    font-size: var(--step--1);
  }

  /* Hero (S4) */
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .hero-primary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
  }
  .hero-headline {
    font-size: var(--step-2);
    font-weight: 600;
    color: var(--c-ink);
  }

  /* Facts list, reused as-is by the S5.3/5.4 case-study spec sheet later */
  .hero-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }
  .hero-facts .fact { display: flex; flex-direction: column; gap: var(--space-3xs); }
  .hero-facts dt {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--c-graphite);
  }
  .hero-facts dd { color: var(--c-ink); }

  @media (width >= 64em) {
    .hero-grid {
      /* 3fr/1fr, not the original 7fr/5fr: the approved headline needs
         627-686px (measured in IBM Plex Sans SemiBold) to hold one line
         across the step-2 clamp's range from 64em up. 7fr/5fr gave the
         primary column a fixed 653px from 1280px viewports upward and
         only 512px right at the 64em/1024px boundary, so the last word
         ("Analyst") kept getting stranded alone on a second line. 3fr/1fr
         keeps a 30px+ margin over the needed width at every width from
         1024px up (verified 1024/1280/1440/1920), including at the tight
         1024px boundary itself. */
      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
      gap: var(--space-2xl);
      align-items: start;
    }
    .hero-facts {
      border-inline-start: 1px solid var(--c-line);
      padding-inline-start: var(--space-l);
    }
  }

  /* Buttons (S4) */
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: var(--space-m);
    border: 1px solid var(--c-signal);
    border-radius: 2px;
    font-weight: 600;
    font-size: var(--step-0);
    text-decoration: none;
  }
  .btn-primary { background: var(--c-signal); color: var(--c-sheet); }
  .btn-primary:hover { background: var(--c-ink); border-color: var(--c-ink); }
  .btn-secondary { background: transparent; color: var(--c-signal); }
  .btn-secondary:hover { background: var(--c-signal); color: var(--c-sheet); }

  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
  }
  .social-links a {
    display: inline-block;
    padding-block: var(--space-2xs);
    color: var(--c-ink);
    text-decoration: none;
  }
  .social-links a:hover { color: var(--c-signal); text-decoration: underline; }

  /* About / Contact (S4) */
  .about h2, .contact h2 { margin-block-end: var(--space-m); }
  .contact .actions { margin-block-start: var(--space-m); }

  /* Selected impact (S5) */
  .impact h2 { margin-block-end: var(--space-m); }
  .impact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  @media (width >= 64em) {
    .impact-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-2xl);
    }
  }
  .impact-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--c-line);
  }
  .impact-item h3 { font-size: var(--step-1); }
  .chart-figure { margin: 0; max-width: 24rem; width: 100%; }
  .chart-caption {
    margin-block-start: var(--space-2xs);
    color: var(--c-graphite);
    font-size: var(--step--1);
  }
  .impact-context { max-width: 60ch; }
  .impact-tools { color: var(--c-graphite); font-size: var(--step--1); }
  /* Text-only item (no baseline to chart, blueprint §4.6): modest emphasis
     via font-size and <strong>, never an isolated big-number stat block. */
  .impact-statement { font-size: var(--step-1); }
  .impact-statement strong { font-weight: 600; }

  /* Impact chart primitives, carried over from the S2-approved specimen
     (design/specimen/specimen.css) unchanged, plus a bar variant for the
     indexed-runtime chart. */
  .chart-line {
    fill: none;
    stroke: var(--c-signal);
    stroke-width: 3;
    stroke-linecap: round;
  }
  /* Default (no JS): fully drawn. The drawn/undrawn split is gated behind
     .js, which only script adds, so JS-off always shows the finished chart
     per blueprint §4.7. */
  .chart-line[data-animate] { stroke-dasharray: 300; stroke-dashoffset: 0; }
  .js .chart-line[data-animate] {
    stroke-dashoffset: 300;
    animation: chart-draw-line .9s ease-out forwards;
  }
  @keyframes chart-draw-line {
    to { stroke-dashoffset: 0; }
  }

  .chart-bar { transform-box: fill-box; transform-origin: bottom; }
  .chart-bar-muted { fill: var(--c-graphite); }
  .chart-bar-signal { fill: var(--c-signal); }
  .js .chart-bar[data-animate] {
    transform: scaleY(0);
    animation: chart-draw-bar .9s ease-out forwards;
  }
  @keyframes chart-draw-bar {
    to { transform: scaleY(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .js .chart-line[data-animate] { stroke-dashoffset: 0; animation: none; }
    .js .chart-bar[data-animate] { transform: scaleY(1); animation: none; }
  }

  .chart-axis { stroke: var(--c-line); stroke-width: 1; }
  .chart-label { fill: var(--c-ink); font-size: 13px; }
  .chart-label-muted { fill: var(--c-graphite); font-size: 13px; }
  .chart-label-dot { fill: var(--c-signal); }
  .chart-label-muted-dot { fill: var(--c-graphite); }

  /* Experience (S6) */
  .experience h2 { margin-block-end: var(--space-m); }
  .timeline {
    display: flex;
    flex-direction: column;
  }
  .timeline-entry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    padding-block: var(--space-l) 0;
    border-block-start: 1px solid var(--c-line);
  }
  .timeline-entry:first-child { padding-block-start: 0; border-block-start: 0; }
  .timeline-entry h3 { font-size: var(--step-1); }
  /* Slightly stronger hierarchy for the current role, size only: no color,
     badge or card per blueprint §4.1/§10 (no logo walls, no stat cards). */
  .timeline-entry--current h3 { font-size: var(--step-2); }
  .timeline-org { font-weight: 400; color: var(--c-graphite); }
  .timeline-meta { color: var(--c-graphite); font-size: var(--step--1); }
  .timeline-bullets {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    max-width: 60ch;
  }
  .timeline-bullets li { padding-inline-start: var(--space-s); position: relative; }
  .timeline-bullets li::before {
    content: "-";
    position: absolute;
    inset-inline-start: 0;
    color: var(--c-graphite);
  }
  .timeline-tools { color: var(--c-graphite); font-size: var(--step--1); }
  .timeline-entry details { max-width: 60ch; }
  .timeline-entry summary {
    display: inline-block;
    padding-block: var(--space-2xs);
    cursor: pointer;
    color: var(--c-signal);
    font-size: var(--step--1);
  }
  .timeline-entry details ul { margin-block-start: var(--space-2xs); }

  /* Skills (S6) */
  .skills h2 { margin-block-end: var(--space-m); }
  .skills-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .skill-group dt {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--c-graphite);
    margin-block-end: var(--space-3xs);
  }
  .skill-used { margin-block-start: var(--space-3xs); font-size: var(--step--1); color: var(--c-graphite); }
  @media (width >= 64em) {
    .skills-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
  }

  /* Education and certifications (S6) */
  .education h2 { margin-block-end: var(--space-m); }
  .education-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .education-grid h3 { font-size: var(--step-1); margin-block-end: var(--space-s); }
  @media (width >= 64em) {
    .education-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
  }

  /* Projects (S7) */
  .projects h2 { margin-block-end: var(--space-m); }
  .project-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  @media (width >= 64em) {
    .project-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-2xl);
    }
  }
  .project-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--c-line);
  }
  .project-body { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .project-body h3, .project-body h4 { font-size: var(--step-1); }
  .project-figure {
    margin: 0;
    border: 1px solid var(--c-line);
  }
  .project-figure img { display: block; width: 100%; height: auto; }
  .project-figure figcaption {
    padding: var(--space-2xs);
    color: var(--c-graphite);
    font-size: var(--step--1);
  }
  .project-views, .project-stack { color: var(--c-graphite); font-size: var(--step--1); }
  .project-links a { font-weight: 600; }

  /* Featured project: spans the grid and, at 64em, splits into a screenshot
     column and a text column (screenshot first, per the owner's direction
     that visual evidence leads). */
  .project-block--featured { grid-column: 1 / -1; }
  .project-block--featured .project-body h3 { font-size: var(--step-2); }
  @media (width >= 64em) {
    .project-block--featured {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-2xl);
      align-items: start;
    }
  }

  /* "Beyond analytics": Sukoon sits apart from the analytics-project grid,
     not as a fifth peer project. */
  .project-beyond {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid var(--c-line);
  }
  .project-beyond > h3 { margin-block-end: var(--space-m); }
  .project-beyond .project-block { padding-block-start: 0; border-block-start: 0; }

  /* Case studies (S8): shared by business-360 and sukoon. */
  .case-header h1 { margin-block-end: var(--space-s); }
  .case-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  @media (width >= 64em) {
    .case-grid {
      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
      gap: var(--space-2xl);
      align-items: center;
    }
  }
  .case-section h2 { margin-block-end: var(--space-m); }

  /* Feature lists, same dash-marker treatment as .timeline-bullets */
  .feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    max-width: 68ch;
  }
  .feature-list li { padding-inline-start: var(--space-s); position: relative; }
  .feature-list li::before {
    content: "-";
    position: absolute;
    inset-inline-start: 0;
    color: var(--c-graphite);
  }

  /* Dashboard walkthrough grid, same pattern as .impact-grid */
  .walkthrough-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  @media (width >= 64em) {
    .walkthrough-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Placed in the last layer so it wins over any layout/components/base
     animation or transition rule through cascade layer order alone,
     without needing !important (CLAUDE.md: no !important). */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms;
      animation-iteration-count: 1;
      transition-duration: .001ms;
    }
  }

  /* Print (S9): applies sitewide since header/footer/actions markup is
     shared across pages, not resume-only. Hides navigation and on-page
     actions, and prints link destinations as visible text (blueprint
     §5.5), since a printed/PDF page can't be clicked. */
  @media print {
    @page { size: A4; margin: 10mm; }
    .site-header, .site-footer, .skip-link, .actions {
      display: none;
    }
    .container { max-width: 100%; }
    .section { padding-block: 0; }
    body { font-size: var(--step--1); line-height: 1.2; }
    h1 { font-size: var(--step-2); }
    h2 { font-size: var(--step-0); margin-block-end: var(--space-3xs); }
    .case-grid, .experience .timeline, .skills-grid, .education-grid, .project-grid { gap: var(--space-3xs); }
    .timeline-entry { padding-block-start: var(--space-3xs); }
    .timeline-bullets, .feature-list { gap: var(--space-3xs); }
    .project-block { gap: var(--space-3xs); padding-block-start: var(--space-3xs); }
    .project-grid { grid-template-columns: repeat(2, 1fr); }
    a[href^="http"], a[href^="/"] { overflow-wrap: anywhere; }
    /* Power BI report links carry a long opaque token that's meaningless on
       paper and would blow out the page count; the link itself still stays
       clickable in the PDF's own link annotations, just not printed as text. */
    a[href^="http"]:not([href*="powerbi.com"])::after {
      content: " (" attr(href) ")";
    }
    a[href^="/"]::after {
      content: " (https://portfolio-website-bo0.pages.dev" attr(href) ")";
    }
  }
}