/* ============================================================
   responsive.css — loaded last, overrides only.

   The generated stylesheets are left untouched on purpose. If the
   generator is run again it will overwrite portfolio.css, dark-theme.css
   and light-theme.css, and anything fixed inside them would be lost with
   them. Everything here is an override, in one file, so a regenerate
   costs nothing.

   What it fixes, all of it measured rather than guessed:

     - portfolio.css ships with no media queries at all, and light-theme
       has five where dark-theme has twenty-four. The light side is
       therefore the one that breaks first.
     - Below 768px the CSS hides .aicm-nav-links and shows
       .mobile-header-bar, but never hides .aicm-header - so its logo
       stayed on screen and the page showed SYRP twice, one above the
       other.
     - .utility-left-col is `flex: 1 1 58%`. A flex item is min-width:auto
       by default, so it refuses to shrink below its content and came out
       376px wide in a 320px viewport - 28px of sideways scroll on the
       whole page.
     - The headings are fixed sizes: the hero was 32px at 320px wide and
       still 32px at 1229px.
   ============================================================ */

/* ---- 1. one header at a time --------------------------------
   The mobile bar is already switched on at this width; this is the
   matching half that was missing. */
@media (max-width: 768px) {
  .aicm-header {
    display: none !important;
  }
}

/* Above it, the reverse: the mobile bar must not linger. */
@media (min-width: 769px) {
  .mobile-header-bar {
    display: none !important;
  }
}

/* ---- 2. let flex items shrink -------------------------------
   min-width:auto is why a 58% basis became 376px in a 320px window.
   Nothing here changes the layout above the point where it fits. */
.utility-row,
.utility-left-col,
.utility-right-col,
.utility-card,
.footer-mid-row,
.footer-links-group {
  min-width: 0;
}

.utility-card,
.utility-left-col,
.utility-right-col {
  max-width: 100%;
}

@media (max-width: 860px) {
  .utility-row {
    flex-direction: column;
  }
  .utility-left-col,
  .utility-right-col {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ---- 3. fluid headings --------------------------------------
   One clamp each rather than a fixed size, so there is no width where
   the type is suddenly wrong. The floors are what fits 320px; the
   ceilings are what the desktop design already used. */
.hero-title {
  font-size: clamp(1.9rem, 5.6vw, 4rem);
  line-height: 1.06;
}

.section-title,
.what-is-title,
.utility-title,
.quarter-title,
.audits-title {
  font-size: clamp(1.5rem, 3.8vw, 2.75rem);
  line-height: 1.12;
}

.hero-subtitle,
.hero-desc,
.section-desc {
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  line-height: 1.6;
}

/* Long words in a narrow column break rather than push the page wide. */
.hero-title,
.section-title,
.project-name,
.utility-card-title {
  overflow-wrap: break-word;
}

/* ---- 4. something a finger can hit --------------------------
   A touch target wants about 44px. The labels stay the size they are;
   it is the hit area that grows, via padding rather than font-size. */
@media (pointer: coarse) {
  .aicm-nav-links a,
  .mobile-nav-links a,
  .nav-item,
  .menu ul li a,
  .foot-menu a,
  .social-link,
  .mobile-toggle-btn,
  .theme-toggle-btn,
  .floating-theme-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---- 5. media that never exceeds its box --------------------
   The hero and card videos are 1200-1920px wide sources sitting in
   boxes far smaller than that on a phone. */
img,
video,
svg,
canvas {
  max-width: 100%;
}

video {
  height: auto;
}

/* ---- 6. the contact pill ------------------------------------
   It holds a 33-character email address on one unbroken line. At 320px
   it measured 360px wide, so the address ran off the edge - and because
   the page is clipped rather than scrollable, there was no way to reach
   the rest of it. It wraps now, and the address is allowed to break. */
.contract-copy-pill {
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.contract-hash {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(0.68rem, 2.6vw, 0.85rem);
}

.copy-tooltip {
  max-width: 100%;
}

/* ---- 7. the page itself never scrolls sideways --------------
   The two real causes are fixed above. This is the backstop for
   anything inside the generated CSS that starts overflowing later:
   clip, not hidden, so it cannot turn an ancestor into a scroll
   container and break `position: sticky` inside it. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* ------------------------------------------------------------------
   The floating link to the game.

   It inherits the old floating theme toggle's pill, which was built at
   40px tall - fine for a mouse, under the ~44px a finger reliably hits.
   It is also the one control on this page pinned over the content, so
   on a short screen it is the thing most likely to sit on top of
   something being read; the gap below it is widened a little there.
   ------------------------------------------------------------------ */
#floatingGameLink {
  min-height: 44px !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  #floatingGameLink {
    bottom: 16px !important;
    right: 16px !important;
    padding: 10px 18px !important;
  }
}

/* ------------------------------------------------------------------
   Phone ergonomics.

   Measured at 375px: nineteen links and buttons came in under the ~44px
   a finger reliably hits - the repository links at 74x38, the service
   buttons at 176x35, the footer email at 216x15 - and twenty pieces of
   text rendered under 12px, the smallest at 9.5px.

   Both are fine on a desktop with a mouse and a close screen. Neither is
   fine on a phone. The sizes above 520px are left exactly as they are:
   this is a floor for small screens, not a redesign.

   The links below are the standalone, button-like ones. Inline links
   inside a sentence are deliberately not touched - giving those a 44px
   box would blow the line height apart mid-paragraph.
   ------------------------------------------------------------------ */
@media (max-width: 520px) {
  .btn-inquire-service,
  .project-slide-item a,
  a[href*="github.com/champion19007"],
  a[href^="mailto:"],
  a[href*="cal.com"],
  a[href*="ieeexplore"],
  a[href*="drive.google.com"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The card metadata: dates, tags, pills and eyebrows. 9.5px is not a
     size, it is a rumour. */
  .card-sub,
  .card-tag,
  .card-pill,
  [style*="font-size: 11px"],
  [style*="font-size:11px"],
  [style*="font-size: 11.5px"],
  [style*="font-size:11.5px"],
  [style*="font-size: 9.5px"],
  [style*="font-size:9.5px"] {
    font-size: 12px !important;
  }
}

/* The generated themes set these sizes with long selectors AND !important,
   e.g.

     body.theme-dark .home .decentr .list li .card-pill { font-size: 9.5px !important }

   Two !important declarations are settled by specificity, and six classes
   beats one, so the block above lost silently. Repeating the class is the
   least-bad way to outrank a generated rule without copying its whole
   ancestor chain into this file - the chain is what would rot if the site
   were regenerated, whereas the class name is the one part that will not.
   The theme prefix is there so this cannot leak into the other view. */
@media (max-width: 520px) {
  body.theme-dark  .card-pill.card-pill.card-pill.card-pill.card-pill.card-pill.card-pill,
  body.theme-light .card-pill.card-pill.card-pill.card-pill.card-pill.card-pill.card-pill,
  body.theme-dark  .card-sub.card-sub.card-sub.card-sub.card-sub.card-sub.card-sub,
  body.theme-light .card-sub.card-sub.card-sub.card-sub.card-sub.card-sub.card-sub,
  body.theme-dark  .card-tag.card-tag.card-tag.card-tag.card-tag.card-tag.card-tag,
  body.theme-light .card-tag.card-tag.card-tag.card-tag.card-tag.card-tag.card-tag {
    font-size: 12px !important;
  }

  /* Icon-only and wordmark links: height was already fixed above, but a
     22px-wide icon is still a 22px target. Width needs saying separately,
     and justify-content keeps the glyph centred in the wider box. */
  a[href="#home"],
  a[href*="linkedin.com"],
  a[href*="github.com"],
  a[href*="ieeexplore"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* The last one: a bare <span> inside .card-link, sized by the theme at
   11.5px. It has no class of its own, so it is reached through the parent. */
@media (max-width: 520px) {
  body.theme-dark  .card-link.card-link.card-link.card-link.card-link.card-link.card-link span,
  body.theme-light .card-link.card-link.card-link.card-link.card-link.card-link.card-link span {
    font-size: 12px !important;
  }
}

/* The header theme toggle. It is 128x32 and only shows up below 360px,
   where the header reflows and it stops sharing a row with the nav. */
@media (max-width: 520px) {
  .portfolio-header-toggle-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ------------------------------------------------------------------
   The light view is a separate DOM with its own class names, so none of
   the rules above reached it. Measured at 320/375/430: fourteen targets
   under 44px and twenty-five pieces of text under 12px.

   The footer links were the worst of it at 16px tall - four links
   stacked in a column, each a third of the height a thumb needs.
   ------------------------------------------------------------------ */
@media (max-width: 520px) {
  .mobile-toggle-btn,
  .footer-copy-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .btn-explore,
  .roadmap-tab-btn,
  .footer-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* A footer link is the full column width, so centring its label would
     strand the text in the middle of the row. */
  .footer-link { justify-content: flex-start !important; }

  .milestone-tag,
  .copy-tooltip {
    font-size: 12px !important;
  }
}

/* Last one in the light view: the section eyebrow, a bare span inside
   .what-is-pill-tag. */
@media (max-width: 520px) {
  .what-is-pill-tag,
  .what-is-pill-tag span { font-size: 12px !important; }
}