/* Effectdev — TERMINAL.SH theme. Global tokens + reset + animations + responsive overlay. */

/* Metric-matched fallback for JetBrains Mono — eliminates layout shift while the
   webfont is loading. size-adjust/ascent/descent/line-gap values were measured
   against Menlo→JetBrains Mono so glyphs occupy the same box during the swap. */
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("Monaco");
  font-display: swap;
  size-adjust: 96.85%;
  ascent-override: 71.43%;
  descent-override: 17.71%;
  line-gap-override: 0%;
}

:root {
  --tt-bg: #000000;
  --tt-bg-panel: #0a0d0a;
  --tt-bg-raised: #0d1410;
  --tt-bg-paper: #06070a;
  --tt-border: rgba(0, 255, 136, 0.22);
  --tt-border-soft: rgba(255, 255, 255, 0.08);
  --tt-green: #00ff88;
  --tt-green-dim: #00cc6e;
  --tt-green-glow: rgba(0, 255, 136, 0.45);
  --tt-amber: #ffb800;
  --tt-cyan: #7df9ff;
  --tt-magenta: #ff5edb;
  --tt-red: #ff5f56;
  --tt-text: #d8e6dc;
  --tt-muted: #6a7a6e;
  --tt-faint: #6a7a6e;
  --tt-font: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--tt-bg);
  color: var(--tt-text);
  font-family: var(--tt-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; }

@keyframes tcaret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes tmarq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

::selection {
  background: var(--tt-green);
  color: #000;
}

.tt-caret {
  display: inline-block;
  width: 10px;
  height: 18px;
  background: var(--tt-green);
  margin-left: 4px;
  vertical-align: -3px;
  animation: tcaret 1.05s steps(2) infinite;
}

.tt-scanline {
  background-image: repeating-linear-gradient(
    0deg, transparent 0, transparent 3px,
    rgba(0, 255, 136, 0.012) 3px, rgba(0, 255, 136, 0.012) 4px
  );
}

button.tt-chip { font-family: var(--tt-font); cursor: pointer; }

/* Long words/URLs wrap on small screens */
img { max-width: 100%; height: auto; }

/* Phosphor glow on the wordmark/chevron logos in nav + footer.
   drop-shadow follows the SVG alpha mask. Kept subtle on the white
   letterforms — the chevron's #00ff88 fill carries the neon vibe on
   its own, so we just add a soft halo for atmosphere. */
img[src*="logo-duo"],
img[src*="logo.svg"] {
  filter:
    drop-shadow(0 0 2px rgba(0, 255, 136, 0.22))
    drop-shadow(0 0 8px rgba(0, 255, 136, 0.10));
  transition: filter 220ms ease;
}
a:hover > img[src*="logo-duo"] {
  filter:
    drop-shadow(0 0 3px rgba(0, 255, 136, 0.32))
    drop-shadow(0 0 10px rgba(0, 255, 136, 0.16));
}

/* ============================================================
   RESPONSIVE OVERLAY
   Targets the inline-styled markup the templates emit.
   Approach: attribute-substring selectors + !important so the
   media-query rules win over the inline styles.
   Breakpoints: tablet ≤1024px · mobile ≤640px
   ============================================================ */

/* === TABLET (max-width: 1024px) ============================ */
@media (max-width: 1024px) {

  /* All major outer wrappers — slim horizontal padding */
  [style*="padding:96px 56px"],
  [style*="padding:80px 56px"],
  [style*="padding:120px 56px"],
  [style*="padding:64px 56px"],
  [style*="padding: 96px 56px"],
  [style*="padding: 80px 56px"],
  [style*="padding: 120px 56px"],
  [style*="padding: 64px 56px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  [style*="padding:80px 56px 96px"] { padding: 64px 32px 72px !important; }
  [style*="padding:80px 56px 64px"] { padding: 56px 32px 48px !important; }
  [style*="padding:64px 56px 72px"] { padding: 48px 32px 56px !important; }
  [style*="padding:64px 56px 56px"] { padding: 48px 32px 40px !important; }
  [style*="padding:24px 56px"] { padding: 20px 32px !important; }

  /* Collapse 4-col and 5-col grids to 2-col */
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Collapse 3-col grids to 2-col */
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* The 5-col footer */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }

  /* Tame the giant hero headings */
  h1[style*="font-size:132px"],
  h1[style*="font-size:128px"],
  h1[style*="font-size:124px"],
  h1[style*="font-size:120px"],
  h1[style*="font-size:112px"],
  h1[style*="font-size:108px"] {
    font-size: 72px !important;
    line-height: 0.98 !important;
  }
  h1[style*="font-size:96px"], h1[style*="font-size:92px"] {
    font-size: 60px !important;
    line-height: 1 !important;
  }
  h2[style*="font-size:96px"] { font-size: 56px !important; }
  h2[style*="font-size:88px"] { font-size: 52px !important; }
  h2[style*="font-size:72px"] { font-size: 48px !important; }
  h2[style*="font-size:64px"] { font-size: 40px !important; }
  h2[style*="font-size:56px"] { font-size: 36px !important; }

  /* Big KPI numbers */
  div[style*="font-size:96px"],
  div[style*="font-size:72px"] { font-size: 52px !important; }
  div[style*="font-size:56px"] { font-size: 42px !important; }
  div[style*="font-size:48px"] { font-size: 36px !important; }
  span[style*="font-size:96px"],
  span[style*="font-size:72px"] { font-size: 52px !important; }
  span[style*="font-size:56px"] { font-size: 42px !important; }
  span[style*="font-size:48px"] { font-size: 36px !important; }

  /* Pre/JSON blocks shouldn't overflow */
  pre { white-space: pre-wrap !important; word-break: break-word !important; }

  /* The ship-log grid rows — let them wrap on tablet */
  [style*="grid-template-columns:110px 110px 1.4fr 1.6fr 1fr 60px"],
  [style*="grid-template-columns: 110px 110px 1.4fr 1.6fr 1fr 60px"],
  [style*="grid-template-columns:110px 110px 1.2fr 1fr 1.6fr 1fr 60px"],
  [style*="grid-template-columns: 110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] {
    grid-template-columns: 90px 90px 1fr 1fr 0.6fr 40px !important;
    font-size: 12px !important;
  }
}

/* === FLEX ROWS that need to wrap below ~900px =============== */
@media (max-width: 900px) {
  /* Work-page hero — title + stats panel side-by-side → wrap */
  [style*="display:flex"][style*="align-items:flex-end"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
  }
  /* Service-block CTA strip (Ready? + button) — wrap */
  [style*="display:flex"][style*="justify-content:space-between"][style*="gap:16px"] {
    flex-wrap: wrap !important;
  }
}

/* === ANY 2-COLUMN HERO LAYOUT — stack at <=900px ============ */
@media (max-width: 900px) {
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns:1fr 1.6fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns: 300px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* The home-page sticky service sidebar — un-stick on small screens */
  [style*="position:sticky"][style*="top:96px"] { position: static !important; }

  /* The about-process 4-col row layout.
     Children = [number, metadata, description, output-box].
     With only 2 columns those 4 items would re-flow to 2 rows of 2 —
     putting the description into the 80px number column. Force the
     description + output box to span the full row instead. */
  [style*="grid-template-columns:100px 200px 1.4fr 1.2fr"],
  [style*="grid-template-columns: 100px 200px 1.4fr 1.2fr"] {
    grid-template-columns: 80px 1fr !important;
    gap: 16px 20px !important;
  }
  [style*="grid-template-columns:100px 200px 1.4fr 1.2fr"] > :nth-child(3),
  [style*="grid-template-columns: 100px 200px 1.4fr 1.2fr"] > :nth-child(3),
  [style*="grid-template-columns:100px 200px 1.4fr 1.2fr"] > :nth-child(4),
  [style*="grid-template-columns: 100px 200px 1.4fr 1.2fr"] > :nth-child(4) {
    grid-column: 1 / -1 !important;
  }

  /* About timeline 3-col row.
     Children = [year, title, description]. Same re-flow trap as the
     process card: with 2 cols + 3 items the description lands back in
     the 80px year column. Span the description across the full row. */
  [style*="grid-template-columns:100px 1fr 2fr"],
  [style*="grid-template-columns: 100px 1fr 2fr"] {
    grid-template-columns: 80px 1fr !important;
    row-gap: 8px !important;
  }
  /* Description = the last div (position:absolute dot is child 1 but
     removed from grid flow; year=2, title=3, description=4=:last-child). */
  [style*="grid-template-columns:100px 1fr 2fr"] > div:last-child,
  [style*="grid-template-columns: 100px 1fr 2fr"] > div:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* === MOBILE refinements for the process card =================
   On phones (≤640px) the 56px hero number is too dominant and the
   80px left column wastes width. Tighten everything. */
@media (max-width: 640px) {
  [style*="grid-template-columns:100px 200px 1.4fr 1.2fr"],
  [style*="grid-template-columns: 100px 200px 1.4fr 1.2fr"] {
    grid-template-columns: 56px 1fr !important;
    gap: 12px 16px !important;
    padding: 22px !important;
  }
  /* Shrink the giant numeral so it doesn't tower over the title */
  [style*="grid-template-columns:100px 200px 1.4fr 1.2fr"] > :nth-child(1),
  [style*="grid-template-columns: 100px 200px 1.4fr 1.2fr"] > :nth-child(1) {
    font-size: 38px !important;
  }
  /* Title was 32px — drop to 26px so it fits a small viewport without
     wrapping the kicker awkwardly */
  [style*="grid-template-columns:100px 200px 1.4fr 1.2fr"] > :nth-child(2) h3 {
    font-size: 26px !important;
  }
}

/* === MOBILE (max-width: 640px) ============================ */
@media (max-width: 640px) {

  /* Tighter horizontal padding everywhere */
  [style*="padding:96px 56px"],
  [style*="padding:80px 56px"],
  [style*="padding:120px 56px"],
  [style*="padding:64px 56px"],
  [style*="padding: 96px 56px"],
  [style*="padding: 80px 56px"],
  [style*="padding: 120px 56px"],
  [style*="padding: 64px 56px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  [style*="padding:80px 56px 96px"] { padding: 48px 18px 56px !important; }
  [style*="padding:80px 56px 64px"] { padding: 40px 18px 40px !important; }
  [style*="padding:64px 56px 72px"] { padding: 40px 18px 48px !important; }
  [style*="padding:64px 56px 56px"] { padding: 40px 18px 32px !important; }
  [style*="padding:24px 56px"] { padding: 16px 18px !important; }
  [style*="padding:96px 56px;"][style*="text-align:center"] { padding: 64px 18px !important; }

  /* Collapse all multi-column grids to single column on mobile */
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Hero headings — readable on phones */
  h1[style*="font-size:132px"],
  h1[style*="font-size:128px"],
  h1[style*="font-size:124px"],
  h1[style*="font-size:120px"],
  h1[style*="font-size:112px"],
  h1[style*="font-size:108px"],
  h1[style*="font-size:96px"],
  h1[style*="font-size:92px"] {
    font-size: 40px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
  }
  h2[style*="font-size:96px"],
  h2[style*="font-size:88px"] { font-size: 36px !important; line-height: 1.05 !important; }
  h2[style*="font-size:72px"] { font-size: 32px !important; line-height: 1.05 !important; }
  h2[style*="font-size:64px"] { font-size: 28px !important; line-height: 1.1 !important; }
  h2[style*="font-size:56px"] { font-size: 26px !important; line-height: 1.1 !important; }
  h3[style*="font-size:34px"],
  h3[style*="font-size:32px"] { font-size: 22px !important; }
  h3[style*="font-size:30px"],
  h3[style*="font-size:28px"] { font-size: 21px !important; }
  h3[style*="font-size:26px"],
  h3[style*="font-size:24px"] { font-size: 20px !important; }
  h3[style*="font-size:22px"] { font-size: 18px !important; }

  /* Big KPI / metric numbers — keep impact but fit */
  div[style*="font-size:96px"],
  div[style*="font-size:72px"] { font-size: 40px !important; }
  div[style*="font-size:56px"] { font-size: 34px !important; }
  div[style*="font-size:48px"] { font-size: 30px !important; }
  div[style*="font-size:44px"],
  div[style*="font-size:42px"] { font-size: 28px !important; }
  span[style*="font-size:96px"],
  span[style*="font-size:72px"] { font-size: 40px !important; }
  span[style*="font-size:56px"] { font-size: 34px !important; }
  span[style*="font-size:48px"] { font-size: 30px !important; }
  span[style*="font-size:44px"],
  span[style*="font-size:42px"] { font-size: 28px !important; }

  /* Body copy size adjustments */
  div[style*="font-size:17px"],
  div[style*="font-size:18px"] { font-size: 15px !important; }
  div[style*="font-size:32px"] { font-size: 20px !important; line-height: 1.4 !important; } /* quote bodies */
  p[style*="font-size:17px"] { font-size: 15px !important; }

  /* The big-quote opening glyph */
  div[style*="font-size:80px"] { font-size: 48px !important; }

  /* Ship log — hide hash + date column on mobile, keep client/detail/metric */
  [style*="grid-template-columns:110px 110px 1.4fr 1.6fr 1fr 60px"],
  [style*="grid-template-columns: 110px 110px 1.4fr 1.6fr 1fr 60px"] {
    grid-template-columns: 1fr 0.6fr !important;
    grid-auto-flow: row !important;
    font-size: 12px !important;
    padding: 14px 14px !important;
  }
  [style*="grid-template-columns:110px 110px 1.4fr 1.6fr 1fr 60px"] > span:nth-child(1),
  [style*="grid-template-columns:110px 110px 1.4fr 1.6fr 1fr 60px"] > span:nth-child(2),
  [style*="grid-template-columns:110px 110px 1.4fr 1.6fr 1fr 60px"] > span:nth-child(6),
  [style*="grid-template-columns: 110px 110px 1.4fr 1.6fr 1fr 60px"] > span:nth-child(1),
  [style*="grid-template-columns: 110px 110px 1.4fr 1.6fr 1fr 60px"] > span:nth-child(2),
  [style*="grid-template-columns: 110px 110px 1.4fr 1.6fr 1fr 60px"] > span:nth-child(6) {
    display: none !important;
  }

  /* Full ship-log table (work page) — same treatment */
  [style*="grid-template-columns:110px 110px 1.2fr 1fr 1.6fr 1fr 60px"],
  [style*="grid-template-columns: 110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] {
    grid-template-columns: 1fr 0.6fr !important;
    font-size: 12px !important;
    padding: 12px 12px !important;
  }
  [style*="grid-template-columns:110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] > span:nth-child(1),
  [style*="grid-template-columns:110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] > span:nth-child(2),
  [style*="grid-template-columns:110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] > span:nth-child(4),
  [style*="grid-template-columns:110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] > span:nth-child(7),
  [style*="grid-template-columns: 110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] > span:nth-child(1),
  [style*="grid-template-columns: 110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] > span:nth-child(2),
  [style*="grid-template-columns: 110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] > span:nth-child(4),
  [style*="grid-template-columns: 110px 110px 1.2fr 1fr 1.6fr 1fr 60px"] > span:nth-child(7) {
    display: none !important;
  }

  /* Hero-button group: wrap and stack full-width */
  [style*="display:flex"][style*="gap:14px"] a[style*="padding:16px 26px"],
  [style*="display:flex"][style*="gap:16px"] a[style*="padding:18px 32px"] {
    width: 100% !important;
    text-align: center !important;
  }

  /* The about-stats sidebar (the panel with key/value rows) — full width */
  [style*="padding:28px"][style*="background:var(--tt-bg-panel)"] { padding: 20px !important; }

  /* TermWindow padding tighter */
  [style*="padding:24px"] { /* inside term window */
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* JSON manifest pre — readable */
  pre[style*="font-size:13px"] { font-size: 11px !important; }
}

/* ============================================================
   NAV (uses .tt-nav from partials/nav.blade.php)
   ============================================================ */
.tt-nav { transition: padding 200ms; }

@media (max-width: 900px) {
  .tt-nav {
    padding: 14px 18px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .tt-nav img { height: 36px !important; }
  .tt-nav .tt-nav-version,
  .tt-nav .tt-nav-status,
  .tt-nav .tt-nav-email { display: none !important; }
  .tt-nav .tt-nav-links {
    order: 3;
    width: 100%;
    margin-left: 0 !important;
    gap: 14px !important;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .tt-nav .tt-nav-cta {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 640px) {
  .tt-nav { padding: 12px 14px !important; }
  .tt-nav img { height: 30px !important; }
  .tt-nav .tt-nav-cta { padding: 7px 10px !important; }
}

/* ============================================================
   FOOTER (uses .tt-footer from partials/footer.blade.php)
   ============================================================ */
@media (max-width: 1024px) {
  .tt-footer { padding: 48px 32px 28px !important; }
}
@media (max-width: 640px) {
  .tt-footer { padding: 40px 18px 24px !important; }
  /* Bottom meta row stacks vertically, no lonely separators */
  .tt-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .tt-footer-sep { display: none !important; }
  .tt-footer-meta-links {
    margin-left: 0 !important;
    word-break: break-word;
  }
}

/* ============================================================
   TERMWINDOW HEADER (uses .tt-win-* from components/term/window.blade.php)
   ============================================================ */
@media (max-width: 640px) {
  .tt-win-header {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  .tt-win-title {
    font-size: 11px !important;
    margin-left: 8px !important;
  }
  .tt-win-accent {
    margin-left: 6px !important;
    font-size: 9px !important;
  }
  /* The decorative minimize / maximize / close icons — drop on mobile */
  .tt-win-controls { display: none !important; }
  .tt-win-body { padding: 16px !important; }
}

/* ============================================================
   CONTACT FORM SUBMIT ROW — wrap below the button on phone
   ============================================================ */
@media (max-width: 640px) {
  /* The submit-row uses grid-column 1/-1 + flex with gap:16. Make it wrap. */
  [style*="grid-column:1 / -1"][style*="display:flex"][style*="gap:16px"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  [style*="grid-column:1 / -1"][style*="display:flex"][style*="gap:16px"] > button {
    width: 100% !important;
  }
}

/* ============================================================
   CONTACT FORM RADIO CHIPS — live :checked visual feedback
   The radios are display:none inside labels; clicks were registering
   but the green selected state only rendered after submit (server old()).
   Use :has(input:checked) so the selection is visible immediately.
   ============================================================ */
form label:has(input[type="radio"]:checked) {
  background: rgba(0, 255, 136, 0.06) !important;
  border-color: var(--tt-green) !important;
  color: var(--tt-green) !important;
}
/* Engagement-type chips have an inner round indicator dot;
   light it up on selection. (Primary-service chips have no inner dot,
   so this rule simply matches nothing for them — harmless.) */
form label:has(input[type="radio"]:checked) > span[style*="border-radius:50%"] {
  background: var(--tt-green) !important;
  border-color: var(--tt-green) !important;
  box-shadow: 0 0 10px var(--tt-green-glow) !important;
}
/* Hover affordance — proves to the user the chip is clickable */
form label:hover:not(:has(input[type="radio"]:checked)) {
  border-color: var(--tt-green-dim) !important;
  color: var(--tt-text) !important;
}