styles.css

:root{
  /* BHN-inspired dark palette with red accent */
  --bg:#171717;
  --card:#111111;
  --border:#1a1a1a;
  --text:#f3f4f6;
  --muted:#9ca3af;
  --brand:#ef4444; /* red-500 */
  --brand-200:#fecaca; /* light red text */
  --brand-700:#b91c1c; /* darker red */
  --accent:#22c55e; /* green for completed */
  --warn:#f59e0b; /* amber */
  --danger:#dc2626; /* red-600 for strong danger */
  /* Blue palette for external open link pill */
  --link:#3b82f6;    /* blue-500 */
  --link-200:#bfdbfe;/* light blue text */
  --link-700:#1d4ed8;/* blue-700 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; min-height:100vh;
}

/* Site header */
.site-header{ position:sticky; top:0; z-index:100; background:#0b0b0b; border-bottom:1px solid var(--border) }
.topnav{ border-bottom:1px solid var(--border); }
.topnav .social{ width:min(1100px, 100%); margin:0 auto; padding:.35rem 1rem; display:flex; gap:1rem; justify-content:flex-end }
.topnav .social a{ color:var(--muted); text-decoration:none; font-size:.9rem }
.topnav .social a:hover{ color:var(--text) }
.mainnav{ width:min(1100px, 100%); margin:0 auto; padding:.75rem 1rem; display:flex; align-items:center; justify-content:space-between }
.mainnav a{color:var(--text);text-decoration: none;font-weight: 600;padding: 1rem .5rem;}
.brand a{ color:var(--brand); text-decoration:none; font-weight:900; letter-spacing:.4px; font-size:1.05rem }
.primary{ display:flex; gap:1rem }
.primary a{ color:var(--muted); text-decoration:none; font-weight:600 }
.primary a:hover{ color:var(--text) }

/* Mainnav dropdown for Shows */
.mainnav .nav-item{ position:relative; margin-top: 1px;}
.mainnav .nav-btn{background:transparent; color:var(--text); border:none; font-weight:600; cursor:pointer; text-decoration:none; }
.mainnav .nav-btn:hover, .mainnav .nav-btn[aria-expanded="true"]{ color:var(--text); border-color:var(--border) }
.mainnav .has-dropdown>a:after{content: "▿";margin-left: .125rem;transform: translateY(.125rem);}
.mainnav .dropdown{position:absolute; top:calc(100% + .4rem); left:0; min-width:260px; background:var(--card); border:1px solid var(--border); border-radius:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.35); padding:.35rem; display:none; z-index:1000 }
.mainnav .dropdown.open{ display:block }
.mainnav .dropdown a{ display:block; padding:.5rem .6rem; border-radius:.35rem; color:var(--text); text-decoration:none; font-weight:500 }
.mainnav .dropdown a:hover{ background:#151515 }

.app-footer{
  padding:1rem; border-top:1px solid var(--border); color:var(--muted)
}
.controls{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.content-section > .controls{ margin-bottom:.75rem }
.controls input[type="search"]{
  background:#0c0c0c; border:1px solid var(--border); color:var(--text); padding:.5rem .6rem; border-radius:.4rem; outline:none;
}
button{
  background:#0c0c0c; color:var(--text); border:1px solid var(--border); padding:.45rem .7rem; border-radius:.4rem; cursor:pointer;
}
button:hover{ border-color:var(--brand) }
.toggle{ display:inline-flex; align-items:center; gap:.35rem; color:var(--muted) }

main{ flex:1; width:min(1100px, 100%); margin:0 auto; padding:1rem }

.content-section{ display:block; }
.section-header{ padding:.5rem 0 1rem 0; border-bottom:1px solid var(--border); margin-bottom:1rem }
.section-header h2{ margin:.25rem 0 .25rem 0; font-size:1.25rem; font-weight:800; letter-spacing:.2px }
.section-subtitle{ margin:0; color:var(--muted) }

#status{ margin:.25rem 0 1rem 0; color:var(--muted) }

.calendar{ display:grid; gap:.75rem }
.group{
  border:1px solid var(--border); border-radius:.6rem; overflow:visible; background:var(--card);
}
.group.today{ border-left:3px solid var(--brand) }
.group-header{ display:flex; justify-content:space-between; align-items:center; padding:.6rem .9rem; background:#0c0c0c; border-bottom:none }
.group-title{ font-weight:600 }
.group-count{ color:var(--muted); font-size:.9rem }

.item{ display:grid; grid-template-columns: 1fr auto; gap:.75rem; padding:.8rem .9rem; border-top:1px solid var(--border) }
.group > .item:first-of-type{ border-top:none }
.item-title{ font-weight:600; line-height:1.25 }
.item-meta{ color:var(--muted); font-size:.9rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap }
.item-actions{ display:flex; align-items:center; gap:.4rem }
.menu-wrap{ position:relative }
.kebab-btn{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  background:#0c0c0c; color:var(--muted); border:1px solid var(--border); border-radius:.4rem; cursor:pointer;
  line-height:1; font-size:18px; padding:0;
}
.kebab-btn:hover, .kebab-btn[aria-expanded="true"]{ color:var(--brand); border-color:var(--brand) }
.menu{ position:absolute; right:0; top:36px; min-width:180px; background:var(--card); border:1px solid var(--border); border-radius:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.35);
  display:none; z-index:9999; overflow:hidden }
.menu.open{ display:block }
.menu-item{ width:100%; padding:.55rem .7rem; text-align:left; border:none; background:transparent; color:var(--text); cursor:pointer; font-size:.95rem }
.menu-item:hover{ background:#151515 }
.menu-sep{ height:1px; background:var(--border); margin:.25rem 0 }
.badge{ padding:.15rem .45rem; border-radius:.35rem; border:1px solid var(--border); background:#0c0c0c; color:var(--muted); font-size:.8rem }
.badge.follow{ border-color:var(--brand); color:var(--brand-200); background:#120808 }
.badge.completed{ border-color:#166534; color:#bbf7d0; background:#062b17 }
.badge.overdue{ border-color:var(--danger); color:#fecaca; background:#2a0b0b }

.item a{ color:var(--brand-200); text-decoration:none }
.item a:hover{ text-decoration:underline }
/* Overdue visual accent */
.item.overdue{ border-left:3px solid var(--danger); padding-left:.75rem }
/* Closed (past-due) items muted */
.item.closed{ opacity:.6 }
/* Title emphasis based on state */
.item-title.following a{ color:var(--brand); }
.item-title.completed a{ color:var(--accent); }

.pill{ padding:.3rem .55rem; border-radius:.5rem; border:1px solid var(--border); background:#0c0c0c; color:var(--text); font-size:.85rem; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer }
.pill:link, .pill:visited{ color:var(--text); text-decoration:none }
.pill:hover, .pill:focus-visible{ border-color:var(--brand); outline:none }

/* Modal Open link uses a blue treatment */
#modalOpenLink.pill{ border-color:var(--link); color:var(--link-200) }
#modalOpenLink.pill:hover, #modalOpenLink.pill:focus-visible{ border-color:var(--link-700); color:var(--link-200); outline:none; box-shadow:0 0 0 2px rgba(29, 78, 216, 0.25) }
/* External link icon */
#modalOpenLink.pill::after{
  content:'\2197'; /* ↗ */
  display:inline-block;
  font-size:.95em;
  line-height:1;
  margin-left:.35rem;
}
.pill.follow{ border-color:var(--brand); color:var(--brand-200) }
.pill.complete{ border-color:#16a34a; color:#bbf7d0 }

@media (max-width: 640px){
  .item{ grid-template-columns: 1fr; }
  .item-actions{ justify-content:flex-start }
}

/* Modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10000 }
.modal-overlay[hidden]{ display:none !important }
.modal{ width:min(800px, 95vw); max-height:90vh; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:.75rem; box-shadow:0 20px 40px rgba(0,0,0,.5) }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1rem .5rem 1rem; border-bottom:1px solid var(--border) }
.modal-header h2{ margin:0; font-size:1.15rem }
.modal-close{ background:#0c0c0c; border:1px solid var(--border); color:var(--muted); border-radius:.4rem; width:36px; height:36px; cursor:pointer }
.modal-close:hover{ border-color:var(--brand); color:var(--brand) }
.modal-meta{ padding:.5rem 1rem; color:var(--muted) }
.modal-body{ padding:1rem; line-height:1.5; color:var(--text) }
.modal-body p{ margin:.5rem 0 }
.modal-footer{ padding:0 1rem 1rem 1rem; display:flex; justify-content:flex-end; gap:.5rem }