/* IMMIGR8-370 (H3) — shared CSS for hub section pages.
   Mirrors the index.html / live.html palette so the hub feels unified. */

:root {
  --blue: #003DFF; --blue-dark: #002EB8; --blue-light: #E0E8F4; --blue-ice: #EEF2FB;
  --white: #FFFFFF; --off-white: #F5F7FB; --gray-100: #E8ECF2; --gray-200: #D0D5E0;
  --gray-400: #8B93A7; --gray-600: #5A6178; --gray-800: #2E3345;
  --text: #1A1A2E; --text-muted: #5A6178;
  --green: #16A34A; --green-light: #DCFCE7; --amber: #D97706; --amber-light: #FEF3C7;
  --orange: #EA580C; --orange-light: #FFEDD5;
  --red: #DC2626; --red-light: #FEE2E2;
  --shadow-sm: 0 1px 3px rgba(0, 61, 255, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 61, 255, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 61, 255, 0.1);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; background: var(--off-white); color: var(--text); line-height: 1.6; padding: 2.5rem 1.5rem 4rem; letter-spacing: -0.005em; }
/* IMMIGR8-530 — explicit padding:0 resets stray inline container padding on the
   older inline-CSS pages (migrations*) so every page shares the same 920px frame
   at the same left edge. */
.container { max-width: 920px; margin: 0 auto; padding: 0; }

.topnav { background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; padding: 0.85rem 1.25rem; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; position: relative; }
.topnav-brand { display: flex; align-items: center; gap: 10px; align-self: center; text-decoration: none; }
.topnav-brand img { height: 30px; display: block; }
.topnav-dev { font-size: 13.5px; font-weight: 500; color: var(--gray-400); letter-spacing: -0.01em; }
.topnav-links { display: flex; gap: 0.6rem; font-size: 0.875rem; flex-wrap: wrap; align-items: center; }
.topnav-links a { color: var(--text-muted); text-decoration: none; padding: 0.35rem 0.65rem; border-radius: 6px; font-weight: 500; }
.topnav-links a:hover { color: var(--blue); background: var(--blue-ice); }
.topnav-links a.active { color: var(--blue); background: var(--blue-ice); font-weight: 600; }

/* IMMIGR8-370 (H3) — hamburger + dropdown panel for the 7 sub-sections.
   Desktop: 3 primary links visible + hamburger.
   Mobile (≤640px): all 10 links collapse into the panel. */
.topnav-more {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--gray-100); background: var(--white);
  color: var(--text-muted); font-family: inherit; font-size: 0.85rem;
  font-weight: 500; padding: 0.4rem 0.75rem; border-radius: 6px;
  cursor: pointer; transition: all 120ms; margin-left: 0.25rem;
}
.topnav-more:hover { color: var(--blue); border-color: var(--blue-light); background: var(--blue-ice); }
.topnav-more[aria-expanded="true"] { color: var(--blue); border-color: var(--blue); background: var(--blue-ice); }
.hamburger-bars { width: 14px; height: 12px; position: relative; display: inline-block; }
.hamburger-bars::before, .hamburger-bars::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
}
.hamburger-bars::before { top: 0; box-shadow: 0 5px 0 currentColor; }
.hamburger-bars::after { bottom: 0; }
.topnav-more-panel {
  position: absolute; top: calc(100% + 8px); right: 1.25rem;
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: 10px; box-shadow: var(--shadow-lg); padding: 0.5rem;
  min-width: 200px; z-index: 50; display: flex; flex-direction: column; gap: 0.15rem;
}
.topnav-more-panel[hidden] { display: none; }
.topnav-more-panel a {
  padding: 0.55rem 0.85rem; color: var(--text); text-decoration: none;
  border-radius: 6px; font-size: 0.9rem; font-weight: 500;
}
.topnav-more-panel a:hover { background: var(--blue-ice); color: var(--blue); }
.topnav-more-panel a.active { background: var(--blue-ice); color: var(--blue); font-weight: 600; }
.topnav-more-panel .panel-sep { border-top: 1px solid var(--gray-100); margin: 0.35rem 0; height: 0; padding: 0; }
.topnav-more-panel a[data-mobile-only] { display: none; }
@media (max-width: 640px) {
  .topnav-links > a { display: none; }
  .topnav-more-panel a[data-mobile-only] { display: block; }
  .topnav-more-panel .panel-sep[data-mobile-only] { display: block; }
  .topnav-more-panel { right: 0.75rem; left: 0.75rem; min-width: 0; }
}
@media (min-width: 641px) {
  .topnav-more-panel .panel-sep[data-mobile-only] { display: none; }
}
.topnav-more-label { font-weight: 500; }
@media (max-width: 480px) {
  .topnav-more-label { display: none; }
  .topnav-more { padding: 0.45rem 0.6rem; }
}

/* IMMIGR8-530 — unified content gutter: page heading aligns with the banner
   logo + card titles + footer content (one left column across the page). */
.page-header { margin-bottom: 1.75rem; padding: 0 1.25rem; }
.page-header h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.page-header .subtitle { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.35rem; }
.page-header .meta-row { display: flex; gap: 1rem; align-items: center; margin-top: 0.75rem; font-size: 0.82rem; color: var(--text-muted); }
.page-header .meta-row .count { background: var(--blue-ice); color: var(--blue); padding: 0.15rem 0.55rem; border-radius: 4px; font-weight: 700; }

.section-wrap { background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; padding: 1.5rem 1.65rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }

.card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 0.85rem; transition: border-color 120ms, box-shadow 120ms; }
.card:hover { border-color: var(--blue-light); box-shadow: var(--shadow-sm); }
.card.sensitive { border-left: 3px solid var(--orange); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.card-title { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; flex: 1; min-width: 200px; }
.card-meta { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.card-summary { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0.5rem 0; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px solid var(--gray-100); flex-wrap: wrap; }
.card-path { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.75rem; color: var(--text-muted); }
.card-open { font-size: 0.85rem; font-weight: 600; color: var(--blue); text-decoration: none; padding: 0.25rem 0.7rem; border-radius: 5px; background: var(--blue-ice); }
.card-open:hover { background: var(--blue-light); }
.card-locked { font-size: 0.85rem; color: var(--orange); font-weight: 500; }

.chip { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; letter-spacing: 0; }
.chip.date { background: var(--blue-ice); color: var(--blue); }
.chip.owner { background: var(--green-light); color: var(--green); }
.chip.size { background: var(--off-white); color: var(--text-muted); border: 1px solid var(--gray-100); }
.chip.sensitive-pill { background: var(--orange-light); color: var(--orange); }

.gate-card { background: var(--white); border: 1px solid var(--orange-light); border-left: 4px solid var(--orange); border-radius: 10px; padding: 2rem 1.85rem; text-align: center; }
.gate-card .gate-icon { font-size: 2.5rem; margin-bottom: 0.65rem; }
.gate-card h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.gate-card p { color: var(--text-muted); font-size: 0.92rem; margin: 0.4rem 0; }
.gate-card .gate-btn { margin-top: 1.1rem; background: var(--blue); color: var(--white); border: none; padding: 0.65rem 1.4rem; border-radius: 7px; font-size: 0.92rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.gate-card .gate-btn:hover { background: var(--blue-dark); }
.gate-card .gate-hint { font-size: 0.82rem; font-style: italic; }

.loading, .empty, .error { color: var(--text-muted); font-size: 0.9rem; padding: 1.5rem; text-align: center; }
.error { color: var(--red); }

/* IMMIGR8-372 (H5): inline file preview for platform-role viewers on /research + /audits */
.card-inline-btn { font-size: 0.82rem; font-weight: 600; color: var(--blue); background: var(--blue-ice); border: 1px solid var(--blue-light); padding: 0.25rem 0.7rem; border-radius: 5px; cursor: pointer; font-family: inherit; transition: background 120ms; }
.card-inline-btn:hover { background: var(--blue-light); }
.card-inline-pane { margin-top: 0.85rem; padding-top: 0.8rem; border-top: 1px solid var(--gray-100); }
.card-inline-pane[hidden] { display: none; }
.card-inline-text { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; line-height: 1.5; background: var(--off-white); border: 1px solid var(--gray-100); border-radius: 6px; padding: 0.85rem; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

.hub-card { display: block; background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px; padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; transition: all 120ms; }
.hub-card:hover { border-color: var(--blue-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.hub-card .hub-card-title { font-size: 1.05rem; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; align-items: center; }
.hub-card .hub-card-count { background: var(--blue-ice); color: var(--blue); padding: 0.15rem 0.55rem; border-radius: 4px; font-size: 0.82rem; font-weight: 700; }
.hub-card .hub-card-desc { color: var(--text-muted); font-size: 0.87rem; margin-top: 0.5rem; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
@media (max-width: 760px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hub-grid { grid-template-columns: 1fr; } }

/* IMMIGR8-379 (HS-4): dev hub usability lift — Active Epics + viewer-role toggle + epic chips */
.epic-card { display: block; background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px; padding: 1rem 1.15rem; text-decoration: none; color: inherit; transition: all 120ms; }
.epic-card:hover { border-color: var(--blue-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.epic-card .epic-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.55rem; }
.epic-card .epic-title { font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.35; flex: 1; min-width: 0; }
.epic-card .epic-title a { color: var(--blue); text-decoration: none; }
.epic-card .epic-counts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.epic-card .epic-meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.55rem; flex-wrap: wrap; }
.epic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
@media (max-width: 720px) { .epic-grid { grid-template-columns: 1fr; } }

/* Health pills — visible at-a-glance epic state */
.epic-health { font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.epic-health-green { background: var(--green-light, #d4f7dd); color: var(--green, #1f7a3a); }
.epic-health-yellow { background: #fef3c7; color: #92400e; }
.epic-health-red { background: var(--red-light, #fee2e2); color: var(--red, #b91c1c); }

/* Per-state chips on epic cards */
.chip.state-backlog { background: #f3f4f6; color: #6b7280; }
.chip.state-todo { background: #fef3c7; color: #92400e; }
.chip.state-in-progress { background: #dbeafe; color: #1e40af; }
.chip.state-in-review { background: #fde68a; color: #92400e; }
.chip.state-done { background: var(--green-light, #d4f7dd); color: var(--green, #1f7a3a); }

/* Parent-epic chip on ticket cards (live.html, etc) */
.epic-chip { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 4px; background: var(--blue-ice); color: var(--blue); text-decoration: none; }
.epic-chip:hover { background: var(--blue-light); }

/* Viewer-role toggle (Sandy / Jake / All) */
.viewer-toggle { display: inline-flex; gap: 0.25rem; background: var(--off-white); border: 1px solid var(--gray-100); border-radius: 6px; padding: 0.2rem; font-size: 0.82rem; }
.viewer-toggle button { background: transparent; border: none; padding: 0.3rem 0.75rem; border-radius: 4px; cursor: pointer; font-family: inherit; font-weight: 500; color: var(--text-muted); }
.viewer-toggle button.active { background: var(--white); color: var(--blue); box-shadow: 0 1px 2px rgba(0,0,0,0.05); font-weight: 600; }
.viewer-toggle button:hover:not(.active) { color: var(--text); }

/* Section-header layout that supports a right-aligned toggle */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; gap: 1rem; flex-wrap: wrap; }
.section-head h2 { font-size: 1.05rem; margin: 0; }

/* Hover tooltips — add data-tooltip="…" to any element, anywhere in the hub. */
[data-tooltip] { position: relative; cursor: help; text-decoration: underline dotted var(--gray-400); text-underline-offset: 3px; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--white); padding: 0.65rem 0.85rem; border-radius: 7px;
  font-size: 0.78rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-decoration: none; text-align: left;
  white-space: normal; width: max-content; max-width: 300px; z-index: 100; box-shadow: var(--shadow-lg); pointer-events: none;
}
[data-tooltip]:hover::before {
  content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--text); z-index: 100; pointer-events: none;
}
@media (max-width: 640px) { [data-tooltip]:hover::after { max-width: 220px; left: 0; transform: none; } }

/* Footer — matches the immigr8.net landing page footer */
.hub-footer { border-top: 1px solid var(--gray-100); padding: 3rem 0 1.5rem; margin-top: 2.5rem; }
/* IMMIGR8-530 — footer content shares the page gutter so the footer brand +
   columns sit inside the same column as the banner logo / cards (not flush to
   the frame edge). */
.hub-footer .footer-inner { max-width: 920px; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.hub-footer .footer-brand .logo-img { height: 28px; }
.hub-footer .footer-brand p { font-size: 0.8125rem; color: var(--gray-400); margin-top: 0.75rem; max-width: 260px; line-height: 1.6; text-align: left; }
.hub-footer .footer-col h4 { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-400); margin-bottom: 0.75rem; }
.hub-footer .footer-col a { display: block; font-size: 0.875rem; color: var(--gray-600); text-decoration: none; padding: 0.25rem 0; transition: color 0.2s; }
.hub-footer .footer-col a:hover { color: var(--blue); }
.hub-footer .footer-bottom { max-width: 920px; margin: 2rem auto 0; padding: 1.5rem 1.25rem 0; border-top: 1px solid var(--gray-100); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.hub-footer .footer-bottom p { font-size: 0.75rem; color: var(--gray-400); }
@media (max-width: 720px) { .hub-footer .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .hub-footer .footer-brand { grid-column: 1 / -1; } }

/* Mobile polish across all hub pages */
@media (max-width: 640px) {
  body { padding: 1.25rem 0.9rem 2.5rem; }
  .container { max-width: 100%; }
  .topnav { padding: 0.7rem 0.95rem; margin-bottom: 1.25rem; gap: 0.5rem 0.75rem; }
  .topnav-brand img { height: 26px; }
  .page-header h1 { font-size: 1.4rem; }
  .page-header .subtitle { font-size: 0.9rem; }
  .section-wrap { padding: 1.1rem 1.05rem; }
  .hub-footer { padding: 2rem 0 1.25rem; }
  .hub-footer .footer-inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .hub-footer .footer-bottom { flex-direction: column; gap: 0.35rem; }
}

/* ── Hub tabs (IMMIGR8-599) — shared primitive, see lib/hub-tabs.js ── */
.hub-tablist {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--gray-100);
  margin: 0 0 1.4rem;
}
.hub-tablist [role="tab"] {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--text-muted);
  padding: .6rem .95rem; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.hub-tablist [role="tab"]:hover { color: var(--text); background: var(--blue-ice); }
.hub-tablist [role="tab"].is-active { color: var(--blue); border-bottom-color: var(--blue); }
.hub-tablist [role="tab"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hub-tabpanel[hidden] { display: none; }
@media (max-width: 640px) {
  .hub-tablist { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hub-tablist::-webkit-scrollbar { display: none; }
  .hub-tablist [role="tab"] { white-space: nowrap; }
}