/*
 * pages.css — Shared styles for tab pages (Resources, Company, Platform)
 * and the mobile navigation drawer used across all pages.
 * Loaded globally via BaseLayout.
 */

/* ══ MOBILE HAMBURGER ══ */
.mob-menu-btn {
  display:none; background:transparent; border:none; cursor:pointer;
  padding:8px 6px; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; flex-shrink:0; margin-left:6px;
}
.mob-menu-btn span {
  display:block; width:22px; height:1.5px; background:#1c1c1e;
  border-radius:2px; transition:all 0.2s ease-in-out; transform-origin:center;
}
.mob-menu-btn.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.mob-menu-btn.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.mob-menu-btn.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
@media (max-width:900px) { .mob-menu-btn { display:flex; } }

/* ══ MOBILE DRAWER ══ */
.mob-overlay {
  position:fixed; inset:0; z-index:90; background:rgba(0,0,0,0.55);
  backdrop-filter:blur(2px); opacity:0; pointer-events:none;
  transition:opacity 0.25s ease-in-out;
}
.mob-overlay.open { opacity:1; pointer-events:all; }

.mob-drawer {
  position:fixed; top:0; right:0; bottom:0; width:320px; max-width:92vw;
  background:#0e0e10; z-index:100; transform:translateX(100%);
  transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
.mob-drawer.open { transform:translateX(0); }
.mob-drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:0.5px solid rgba(255,250,240,0.10); flex-shrink:0;
}
.mob-drawer-head .wordmark { font:700 20px 'Inter'; letter-spacing:-0.5px; color:#fffaf0; }
.mob-drawer-head .wordmark .accent { color:var(--nd-orange); }
.mob-close {
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,250,240,0.55); font-size:26px; line-height:1;
  padding:2px 4px; transition:color 0.15s; font-weight:300;
}
.mob-close:hover { color:#fffaf0; }
.mob-nav { flex:1; }
.mob-sec-hdr {
  padding:16px 20px 8px; font-family:'SF Mono',monospace; font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,250,240,0.32);
}
.mob-link {
  display:flex; align-items:center; padding:13px 20px;
  font:500 14px 'Inter'; color:rgba(255,250,240,0.78); text-decoration:none;
  border-bottom:0.5px solid rgba(255,250,240,0.06); transition:color 0.15s, background 0.15s;
}
.mob-link:hover { color:var(--nd-orange); background:rgba(255,250,240,0.03); }
.mob-link.active { color:var(--nd-orange); }
.mob-apps {
  display:grid; grid-template-columns:1fr 1fr; gap:0.5px;
  background:rgba(255,250,240,0.08);
  border-top:0.5px solid rgba(255,250,240,0.08);
  border-bottom:0.5px solid rgba(255,250,240,0.08);
}
.mob-app {
  display:flex; align-items:center; gap:9px; padding:11px 16px;
  background:#0e0e10; text-decoration:none; transition:background 0.15s;
}
.mob-app:hover { background:rgba(255,250,240,0.04); }
.mob-app img { width:26px; height:26px; border-radius:6px; flex-shrink:0; }
.mob-app .an { font:500 12px 'Inter'; color:rgba(255,250,240,0.82); }
.mob-app .ac {
  font-family:'SF Mono',monospace; font-size:9px; letter-spacing:0.06em;
  color:rgba(255,250,240,0.35); text-transform:uppercase; margin-top:1px;
}
.mob-res {
  display:grid; grid-template-columns:1fr 1fr; gap:0.5px;
  background:rgba(255,250,240,0.08);
  border-top:0.5px solid rgba(255,250,240,0.08);
  border-bottom:0.5px solid rgba(255,250,240,0.08);
}
.mob-res-item {
  display:flex; align-items:center; padding:11px 16px; background:#0e0e10;
  font:400 12.5px 'Inter'; color:rgba(255,250,240,0.68); text-decoration:none;
  transition:all 0.15s;
}
.mob-res-item:hover { color:var(--nd-orange); background:rgba(255,250,240,0.04); }
.mob-actions {
  padding:16px 20px; border-top:0.5px solid rgba(255,250,240,0.10);
  display:flex; flex-direction:column; gap:10px; flex-shrink:0;
}
.mob-actions .btn-primary  { width:100%; text-align:center; padding:11px 18px; font-size:13px; }
.mob-actions .btn-secondary {
  width:100%; text-align:center; padding:10px 18px; font-size:13px;
  border-color:rgba(255,250,240,0.22); color:rgba(255,250,240,0.78); background:transparent;
}
.mob-actions .btn-secondary:hover { border-color:var(--nd-orange); color:var(--nd-orange); }
.mob-foot-note {
  padding:12px 20px; font-family:'SF Mono',monospace; font-size:10px;
  letter-spacing:0.06em; color:rgba(255,250,240,0.28);
  border-top:0.5px solid rgba(255,250,240,0.07); flex-shrink:0;
}

/* ══ TAB-PAGE CHROME (Resources / Company / Platform) ══ */

.res-subnav {
  background:#fff; border-bottom:0.5px solid var(--nd-border-panel);
  position:sticky; top:68px; z-index:40;
}
.res-subnav .row {
  max-width:1280px; margin:0 auto; padding:0 48px;
  display:flex; align-items:center;
}
.res-crumb {
  display:flex; align-items:center; font-family:'SF Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:0.06em; color:var(--nd-text-secondary);
  padding:18px 28px 18px 0; border-right:0.5px solid var(--nd-border-panel);
  white-space:nowrap; flex-shrink:0;
}
.res-crumb a { color:var(--nd-text-secondary); transition:color 0.15s; }
.res-crumb a:hover { color:var(--nd-orange); }
.res-crumb .sep { margin:0 10px; color:var(--nd-text-tertiary); }
.res-crumb .here { color:var(--nd-text-primary); }
.res-tabs {
  display:flex; align-items:center; flex:1; padding-left:28px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.res-tabs::-webkit-scrollbar { display:none; }
.res-tab {
  background:transparent; border:none; cursor:pointer; padding:18px 0;
  margin-right:26px; font:500 13px 'Inter'; color:var(--nd-text-secondary);
  position:relative; transition:color 0.15s; white-space:nowrap;
}
.res-tab:hover { color:var(--nd-text-primary); }
.res-tab.active { color:#1c1c1e; }
.res-tab.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-0.5px;
  height:2px; background:var(--nd-orange);
}
.res-ver {
  display:flex; gap:8px; align-items:center; margin-left:auto;
  font-family:'SF Mono',ui-monospace,monospace; font-size:11px;
}
.res-ver .pill {
  border:0.5px solid var(--nd-border-panel); border-radius:3px;
  padding:2px 7px; letter-spacing:0.06em; color:var(--nd-text-secondary);
}

/* ── Hero ── */
.res-hero {
  background:#0e0e10; color:#fffaf0; padding:68px 0 60px;
  position:relative; overflow:hidden;
}
.res-hero::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,250,240,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,250,240,0.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 40% 50%,black 0%,black 60%,transparent 90%);
  pointer-events:none;
}
.res-hero-inner { max-width:1280px; margin:0 auto; padding:0 48px; position:relative; }
.res-hero h1 {
  font:800 50px/1.06 'Inter'; letter-spacing:-1.3px; margin:0 0 18px; text-wrap:balance;
}
.res-hero h1 .accent { color:var(--nd-orange); }
.res-hero .lede {
  font:400 15.5px/1.65 'Inter'; color:rgba(255,250,240,0.70); margin:0 0 32px; max-width:580px;
}
.res-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:0.5px solid rgba(255,250,240,0.12); padding-top:26px; max-width:580px;
}
.res-stats .st-v { font:700 26px/1.0 'Inter'; letter-spacing:-0.6px; color:#fffaf0; }
.res-stats .st-v small { font-size:12px; color:var(--nd-orange); font-weight:600; margin-left:2px; }
.res-stats .st-l {
  font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(255,250,240,0.48); margin-top:4px;
}

/* ── Content ── */
.res-content { background:var(--nd-bg-app); min-height:560px; }
.res-section { display:none; }
.res-section.active { display:block; }
.res-inner { max-width:1280px; margin:0 auto; padding:52px 48px 80px; }
.res-sh { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; }
.res-sh .idx {
  font-family:'SF Mono',monospace; font-size:11px; letter-spacing:0.14em;
  color:var(--nd-orange); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:6px;
}
.res-sh .idx::before { content:''; width:14px; height:1px; background:var(--nd-orange); display:inline-block; }
.res-sh h2 { font:700 28px/1.1 'Inter'; letter-spacing:-0.7px; margin:0; color:#1c1c1e; }
.res-sh .ct { font-family:'SF Mono',monospace; font-size:11px; color:var(--nd-text-tertiary); letter-spacing:0.06em; }

/* ── Filter row ── */
.filter-row { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.filter-lbl {
  font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--nd-text-tertiary); margin-right:2px;
}
.fbtn {
  background:#fff; border:0.5px solid var(--nd-border-panel); border-radius:4px;
  padding:5px 12px; font:500 11px 'Inter'; cursor:pointer; color:var(--nd-text-secondary);
  transition:all 0.15s;
}
.fbtn:hover { border-color:var(--nd-text-secondary); color:var(--nd-text-primary); }
.fbtn.active { border-color:var(--nd-orange); color:var(--nd-orange); background:rgba(255,137,37,0.05); }

/* ══ RESPONSIVE ══ */
@media (max-width:1280px) { .res-ver { display:none; } }
@media (max-width:1180px) {
  .res-crumb a:first-child,.res-crumb .sep:first-of-type { display:none; }
  .res-crumb { padding-right:18px; }
}
@media (max-width:900px) {
  .nav .row { padding:0 24px; height:60px; }
  .nav-links { display:none; }
  .nav-actions .btn-secondary { display:none; }
  .brand .wordmark { font-size:19px; }
  .utility-bar .row { padding:8px 24px; }
  .utility-bar .left span.mono { display:none; }
  .res-subnav { top:60px; }
  .res-subnav .row { padding:0 0 0 16px; }
  .res-crumb { display:none; }
  .res-tabs { padding-left:0; padding-right:20px; }
  .res-tab { font-size:12.5px; margin-right:20px; }
  .res-ver { display:none; }
  .res-hero { padding:52px 0 48px; }
  .res-hero-inner { padding:0 24px; }
  .res-hero h1 { font-size:40px; }
  .res-inner { padding:40px 24px 64px; }
  footer.site-foot { padding:48px 24px 24px; }
  footer.site-foot .top { grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:640px) {
  .utility-bar .row { padding:7px 16px; }
  .utility-bar .right .pill,
  .utility-bar .right a:nth-child(3),
  .utility-bar .right a:nth-child(4) { display:none; }
  .nav .row { padding:0 16px; height:54px; }
  .brand .wordmark { font-size:18px; }
  .nav-actions .btn-primary { font-size:11px; padding:7px 13px; }
  .res-subnav { top:54px; }
  .res-subnav .row { padding:0; }
  .res-tabs { padding-left:16px; padding-right:16px; }
  .res-tab { font-size:12px; margin-right:16px; padding:14px 0; }
  .res-hero { padding:44px 0 40px; }
  .res-hero-inner { padding:0 16px; }
  .res-hero h1 { font-size:32px; letter-spacing:-0.7px; margin-bottom:14px; }
  .res-hero .lede { font-size:14px; }
  .res-stats { grid-template-columns:repeat(2,1fr); gap:16px; padding-top:18px; }
  .res-stats .st-v { font-size:20px; }
  .res-inner { padding:32px 16px 56px; }
  .res-sh h2 { font-size:20px; }
  .filter-row { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:4px; }
  .filter-row::-webkit-scrollbar { display:none; }
  .fbtn { white-space:nowrap; flex-shrink:0; }
  .contact { padding:56px 16px; }
  .contact h2 { font-size:28px; }
  .contact .cta-row { flex-direction:column; align-items:stretch; }
  .contact .cta-row button { width:100%; }
  footer.site-foot { padding:36px 16px 20px; }
  footer.site-foot .top { grid-template-columns:1fr 1fr; gap:28px; }
  footer.site-foot .top .brand-block { grid-column:1/-1; }
  footer.site-foot .bottom { flex-direction:column; gap:10px; text-align:center; }
}
@media (max-width:400px) {
  .res-hero h1 { font-size:27px; }
  .res-stats { grid-template-columns:1fr 1fr; }
  footer.site-foot .top { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS

   Every rule below lives inside a media query — the desktop layout is
   deliberately untouched. This block lives in pages.css rather than
   global.css because the two files carry duplicate ≤900/≤640/≤400
   blocks and pages.css is loaded last, so this is the only place a
   mobile override reliably wins.

   Ordered: touch targets, then layout density, then the app mockups.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── Touch targets (≤900) ───────────
   Apple HIG asks for 44px, WCAG 2.5.8 for 24px. Controls that read as
   buttons get 44px; inline text links get 36px. */
@media (max-width:900px) {
  .btn-primary,
  .btn-secondary,
  .btn-blue {
    min-height:44px; padding:12px 20px; font-size:13px;
    display:inline-flex; align-items:center; justify-content:center;
  }

  .mob-menu-btn { min-width:44px; min-height:44px; margin-left:2px; }
  .mob-close {
    min-width:44px; min-height:44px; margin-right:-8px; font-size:28px;
    display:flex; align-items:center; justify-content:center;
  }

  /* Keep the utility bar slim; grow only the hit areas inside it. */
  .utility-bar .row { padding:0 24px; min-height:44px; }
  .utility-bar .right a,
  .utility-bar .left a { display:inline-flex; align-items:center; min-height:36px; }
  .lang-current { min-height:36px; }
  .lang-opt { min-height:40px; }

  /* Drawer rows read as list items. */
  .mob-link { min-height:48px; }
  .mob-app { min-height:56px; }
  .mob-res-item { min-height:44px; display:flex; align-items:center; }

  /* The row spacing lived on the <li>, so the anchor's hit area was only
     16px tall — below the 24px WCAG 2.5.8 floor. Moving the spacing into
     the anchor makes the tappable area match what the row looks like. */
  footer.site-foot ul li { padding:0; }
  footer.site-foot ul li a {
    display:flex; align-items:center; min-height:40px;
  }

  /* Anchor targets must clear the sticky nav. */
  :target, section[id] { scroll-margin-top:76px; }
}

/* ─────────── Layout density (≤640) ─────────── */
@media (max-width:640px) {
  .utility-bar .row { padding:0 16px; min-height:44px; }

  /* Three hero stats read better as three compact columns than as a
     stacked list, which cost ~200px before any content appeared. */
  .hero-meta {
    grid-template-columns:repeat(3,1fr);
    gap:16px 12px; margin-top:30px; padding-top:20px;
  }
  .hero-meta .item { padding-right:8px; }
  .hero-meta .val { font-size:19px; }
  .hero-meta .val small { font-size:10px; }
  .hero-meta .lbl { font-size:9px; letter-spacing:0.08em; margin-top:6px; }

  /* Two ~150px columns hyphenated mid-word; one column reads. */
  .insights-row { grid-template-columns:1fr; }
  .insights .item { padding:26px 20px; }
  .insights .item .val { font-size:28px; }
  .insights .item:first-child { border-top:none; }

  /* Horizontally scrolled tab rails need room at the end so the last
     tab never sits flush against the viewport edge. */
  .tabs { padding-right:16px; }

  /* Vertical rhythm — the homepage ran past 10,000px on a phone. */
  section.block { padding:48px 0; }
  .section-head { margin-bottom:24px; }
  /* The .viz slot reserves 60px for a ~40px glyph. On a short one-column
     card that reserve reads as a gap between the icon and the heading. */
  .cap { padding:20px 18px; gap:8px; }
  .cap .viz { height:44px; margin-bottom:2px; }
  .cap h3 { margin:2px 0 4px; }
  .cap-grid, .sol-grid { gap:12px; }
  .screen-strip { gap:16px; }
}

/* ─────────── App-window mockups (≤640) ───────────
   The mocks are desktop app screenshots. At phone width the absolutely
   centred window title collided with the right-hand status text, and
   the 200px min-width sidebar left the main panel clipped mid-control.
   Stacking the two panes gives both of them full width. */
@media (max-width:640px) {
  .app-window .chrome { padding:8px 12px; gap:10px; }
  .app-window .chrome .title {
    position:static; transform:none; font-size:11px;
    flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .app-window .chrome .extra { flex-shrink:0; font-size:10px; }
  .app-window .chrome .traffic span { width:10px; height:10px; }

  .app-window .body { flex-direction:column; }
  .app-window .sidebar {
    width:100%; min-width:0;
    border-right:none; border-bottom:0.5px solid #d9d9d9;
  }
  .app-window .main { overflow:visible; }
  .app-window .toolbar { flex-wrap:wrap; row-gap:6px; }

  /* Side-by-side mock panels: the narrow pane fell below the width its
     own table needs and clipped it. Stacking is the only fit at 393px. */
  .app-window .mock-panes { flex-direction:column; padding:12px; gap:12px; }
  .app-window .mock-panes > div:first-child { min-height:200px; }

  /* Gauges carry an inline pixel width from the mock generator. A zero
     flex-basis outranks that width, so the row divides the space it has
     instead of overflowing and being clipped by the window frame. */
  .app-window .mock-gauge { flex:1 1 0; min-width:0; }
  .app-window .mock-gauge svg { width:100%; height:auto; }

  /* The 320px floor left half the card empty once the panes stacked. */
  .screen-card .frame { min-height:0; padding:12px; }
  .screen-card .meta { padding:14px 16px; }
}

/* ─────────── Very small (≤400) ───────────
   360–393px covers most phones in use, so this range is a primary
   layout, not an edge case — it keeps the multi-column grids. */
@media (max-width:400px) {
  .hero-meta { grid-template-columns:repeat(3,1fr); gap:14px 10px; }
  .hero-meta .val { font-size:17px; }
  .hero-meta .lbl { font-size:8.5px; letter-spacing:0.06em; }

  footer.site-foot .top { grid-template-columns:1fr 1fr; gap:24px; }
  footer.site-foot .top .brand-block { grid-column:1/-1; }
}