:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --blue:rgb(2, 47, 77);
}

*{box-sizing:border-box}
body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
}

/* Fixed site header */
.site-header{
  position:sticky;
  top:0;
  width:100%;
  background:var(--blue);
  z-index:40;
  border-bottom:1px solid rgb(0, 81, 134);
  backdrop-filter: blur(6px);
}
.site-header .header-inner{
  max-width:1000px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  
}
.site-header .logo{ font-weight:2000; color:var(--card); text-decoration:none }
.site-header .main-nav{ display:flex; gap:12px }
.site-header .main-nav a{ color:var(--card); text-decoration:none; padding:8px; border-radius:6px }
.site-header .main-nav a:hover{ color:var(--text); background:rgba(16,24,40,0.03) }
.site-header #tagline{ margin:0; text-align:center; padding:8px 12px; color:var(--card); font-size:0.95rem }


.house{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(26px, 5vw, 44px); /* responsive: min 26px, up to 44px */
  line-height:1;
  padding:6px 8px;
  color:var(--card);
  text-decoration:none;
}
.house:hover{ transform:translateY(-2px); transition:transform 150ms ease }

/* Terminal-style logo */
.logo-terminal{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#072238;
  color:#dbeafe;
  padding:8px 14px;
  border-radius:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  text-decoration:none;
  box-shadow: 0 4px 12px rgba(2,10,23,0.25);
}
.logo-terminal .prompt{ color:#60a5fa; font-weight:700 }
.logo-terminal .cmd{ color:#bbf7d0 }
.logo-terminal .cursor{ color:#93c5fd; margin-left:4px; opacity:1 }

/* Add top spacing so main content isn't hidden beneath the sticky header */
h2{ margin:0 0 8px 0; text-align:center }
/* Make main content and left column a bit larger */
main{ padding:28px; max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 320px 1fr; gap:24px; align-items:start }
.card{ background:var(--card); padding:22px; border-radius:12px; box-shadow:0 8px 24px rgba(16,24,40,0.08); }
.avatar{ width:140px; height:140px; border-radius:999px; object-fit:cover; display:block; margin:0 auto 14px }

/* Right column wrapper so reports + secondary box stack on the right */
.right-column{ display:flex; flex-direction:column; gap:18px }
.right-column .card{ width:100% }

@media (max-width:900px){
  main{ grid-template-columns: 1fr; }
  .right-column{ order:3 }
}

/* Slightly larger headings inside cards */
h2{ font-size:1.25rem }
.links h3{ font-size:1.05rem }
h1{ margin:0 }
h2{ margin:0 0 8px 0; text-align:center }
.bio{ color:var(--muted) }
/* Hide bullets for lists used as bio, and normalize spacing */
.bio{ list-style: none; margin: 0; padding: 0; }
.bio li{ margin: 6px 0; }
.actions{ display:flex; gap:8px; justify-content:center; margin-top:12px }
.btn{ display:inline-block; padding:8px 12px; background:var(--blue); color:#fff; border-radius:6px; text-decoration:none }
.theme-btn{
  width:44px; height:44px; border-radius:50%; background:var(--card); color:var(--blue); border:none; font-size:20px; display:inline-grid; place-items:center; cursor:pointer; box-shadow:0 4px 10px rgba(2,47,77,0.12);
}
.theme-btn:active{ transform:translateY(1px) }
.links ul{ padding-left:18px }
/* Secondary card style */
.card-secondary{ background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); border-left:4px solid #e6eef8 }
footer{ text-align:center; margin:22px 0; color:var(--muted) }

/* Controls for adding boxes */
.add-controls{ max-width:1200px; margin:12px auto; padding:0 28px; display:flex; justify-content:flex-end }
.add-controls .btn{ background:linear-gradient(180deg,#0369a1,#075985); color:#fff }

/* Container for dynamically added boxes */
#boxesContainer{ max-width:1200px; margin:0 auto; padding:0 28px 28px 28px; display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:18px }
.dynamic-box .box-controls{ margin-top:10px; display:flex; justify-content:flex-end }
.btn-small{ padding:6px 8px; font-size:0.9rem; border-radius:6px }
.btn-danger{ background:#ef4444; color:#fff; border:none; cursor:pointer }
.btn-danger:active{ transform:translateY(1px) }

/* Reports list styling: center and make wider */
.reports-list{
  max-width:1100px;
  margin:18px auto;
  padding:24px;
  box-sizing:border-box;
}
@media (max-width:900px){
  .reports-list{ padding:16px; margin:12px; }
}

/* If main uses a two-column grid (like on index), make the reports section span both columns */
.reports-list{
  grid-column: 1 / -1;
}

/* Profile modal / overlay */
.profile-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(2,10,23,0.45);
  backdrop-filter: blur(6px);
  z-index:1000;
  padding:24px;
}
.profile-modal{ max-width:1100px; width:min(1100px,96%); position:relative; margin:0 auto; display:block; }
.profile-modal .card{ padding:28px; display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; box-sizing:border-box }
.profile-close{ position:absolute; right:18px; top:18px; background:transparent; border:none; color:var(--card); font-size:20px; cursor:pointer }

/* Ensure cloned avatar is circular and large */
.profile-modal .avatar{ border-radius:999px; object-fit:cover }

/* content wrapper inside cloned card */
.profile-content{ display:flex; flex-direction:column; gap:12px; width:100%; }
.profile-content h2, .profile-content h3{ margin:0 }
.profile-content p{ margin:0 }

/* Desktop: make modal wider and lay out card content horizontally */
@media (min-width: 900px) {
  .profile-overlay{ padding:36px; }
  .profile-modal{ width:1100px; }
  .profile-modal .card{ flex-direction:row; align-items:flex-start; text-align:left; gap:28px; padding:32px; }
  .profile-modal .card .avatar{ width:220px; height:220px; margin:0; flex:0 0 220px }
  .profile-modal .card .profile-content{ margin-top:0; width:100%; flex:1 }
  /* ensure other content in the cloned card expands to use available space */
  .profile-modal .card > *:not(.avatar){ flex:1 }
}

.profile-extra{ margin-top:18px; width:100%; text-align:left; background:rgba(255,255,255,0.03); padding:12px; border-radius:8px }
.profile-extra h3{ margin:0 0 8px 0; color:var(--card) }
.profile-extra .extra-bio{ margin:0 0 10px 0; color:var(--card); opacity:0.9 }
.profile-extra .extra-list{ margin:0 0 10px 0; padding-left:18px }
.profile-extra .extra-list li{ margin-bottom:6px }
.profile-extra .extra-contact a{ color:var(--card); text-decoration:underline }

.profile-extra .sub-list{ margin:6px 0 0 12px; padding-left:18px; list-style-type: disc }
.profile-extra .sub-list li{ margin-bottom:4px; font-size:0.95rem }

/* utility: hide element even if some other rules try to show it */
.hidden-while-overlay{ display:none !important; }

/* Dark mode */
body.dark{
  --bg: #0b1220;
  --card: #071022;
  --text: #e6eef8;
  --muted: #93a3bf;
}