/* =====================================================================
   NetMob 2026 — Full Program page (program/index_sessions.html)
   Adapted from the NetMob 2025 program stylesheet, 2026 palette (blue)
   ===================================================================== */

/* ========= Core variables ========= */
:root{
  /* Brand (2026) */
  --brand:#275dbd;            /* main brand blue (theme-color) */
  --brand-cta:#3b7ae0;        /* lighter blue for accents / hover */
  --brand-dark:#1b4591;       /* darker blue for strong text */
  --brand-soft:#f2f6fd;       /* soft background */
  --accent-red:#275dbd;       /* same highlight red used on the 2026 home page */
  --ink:#1f2433;
  --muted:#5f6b7a;
  --line:#d8e2f2;

  /* Layout */
  --layout-max:1280px;
  --layout-max-xl:1400px;
  --left-col:320px;
  --gap:2rem;

  /* Sticky offsets */
  --sticky-top:90px;          /* distance below the fixed site menu */
  --pane-pad-bottom:24px;

  /* Tracks: MC = dark brand blue, DC = green */
  --mc:#1b4591;
  --mc-soft:#e9f0fc;
  --dc:#059669;
  --dc-soft:#ecfdf5;
}

/* ========= Intro ========= */
.intro{ text-align:center; padding:1.5rem 1rem .5rem; }
.intro p{ margin:.25rem 0; }

/* ========= Program layout (two panes) =========
   In the 2026 HTML the aside and the details div are direct
   children of .program-main, so the grid lives there.          */
.program-main{
  max-width:var(--layout-max);
  margin:0 auto;
  padding:1rem 1rem 2rem;
  display:grid;
  grid-template-columns:minmax(260px,var(--left-col)) minmax(0,1fr);
  gap:var(--gap);
  align-items:start;
}
@media (min-width:1400px){
  .program-main{
    max-width:var(--layout-max-xl);
    grid-template-columns:340px minmax(0,1fr);
  }
}

/* ========= LEFT: at a glance (sticky, own scroll) ========= */
.program-main__glance{
  position:sticky; top:var(--sticky-top);
  max-height:calc(100vh - var(--sticky-top) - var(--pane-pad-bottom));
  overflow:auto;
  padding-right:.25rem;
  scrollbar-gutter:stable;
}
.glance-day{ margin-bottom:1.25rem; }
.glance-day h3{
  font-size:1rem; font-weight:800; margin:.25rem 0 .5rem;
  color:var(--brand);
  border-left:4px solid var(--brand-cta);
  padding-left:.5rem;
}
.glance-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem;
  background:#fff; border:1px solid var(--line);
  border-radius:10px; overflow:hidden;
}
.glance-table th{
  white-space:nowrap; width:11ch; text-align:left; vertical-align:top;
  background:var(--brand-soft); padding:.5rem .6rem;
  border-bottom:1px solid var(--line); font-weight:800; color:var(--ink);
}
.glance-table td{ padding:.5rem .75rem; border-bottom:1px solid var(--line); }
.glance-table tr:last-child th,
.glance-table tr:last-child td{ border-bottom:0; }
.glance-link{ color:var(--brand); text-decoration:none; font-weight:700; }
.glance-link:hover{ text-decoration:underline; color:var(--brand-dark); }

/* ========= RIGHT: details (own scroll) ========= */
.program-main__details{
  min-width:0;
  max-height:calc(100vh - var(--sticky-top) - var(--pane-pad-bottom));
  overflow:auto;
  padding-right:.5rem;
  scroll-behavior:smooth;
  scroll-padding-top:12px;
  scrollbar-gutter:stable;
}

/* Day titles */
.program-day > h2{
  margin:.5rem 0 1rem;
  padding:.55rem .9rem;
  font-size:1.35rem; font-weight:800;
  color:#fff;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand-cta) 100%);
  border-radius:10px;
}
.program-day + .program-day > h2{ margin-top:2rem; }

/* ========= Detail cards ========= */
.detail-block{
  border:1px solid var(--line); border-radius:12px;
  padding:1rem 1.1rem; margin-bottom:1rem; background:#fff;
  scroll-margin-top:12px;
  outline:none;
}
.detail-head{
  display:flex; flex-direction:column; gap:.25rem;
  margin-bottom:.5rem; border-left:4px solid var(--brand);
  padding-left:.6rem;
}
.detail-head--keynote{ border-left-color:var(--accent-red); }
.detail-head--poster{ border-left-color:var(--dc); }
.detail-head h3{ margin:0; font-size:1.08rem; color:var(--ink); }
.detail-head h3 span{ font-weight:800; color:var(--brand); }
.detail-head--keynote h3 span{ color:var(--accent-red); }
.detail-head small{ color:var(--muted); }

/* Keynote card background */
.detail-block--keynote{ background:linear-gradient(180deg, var(--brand-soft) 0%, #fff 60%); }
.detail-block--poster{ background:#fcfdff; }

/* :target highlight */
.detail-block:target{
  box-shadow:0 0 0 3px rgba(39,93,189,.15) inset;
  border-color:var(--brand-cta);
}
.detail-block:target .detail-head{ border-left-color:var(--brand-cta); }

/* ========= Papers & posters ========= */
.paper-list{
  list-style:none; padding-left:0; counter-reset:papers;
  margin:.4rem 0 .25rem;
}
.paper-item{
  position:relative;
  margin:.35rem 0;
  padding:.45rem .7rem .4rem 2rem;   /* room for the number */
  border-radius:8px;
  transition:background-color .15s ease, box-shadow .15s ease;
}
.paper-item::before{
  counter-increment:papers;
  content:counter(papers) ".";
  position:absolute; left:.35rem; top:.45rem;
  font-weight:800; color:var(--brand);
}
.paper-item h4{ margin:0 0 .12rem; font-size:1rem; line-height:1.35; color:var(--ink); }
.paper-item .authors{ margin:0; color:var(--muted); line-height:1.35; }
.paper-item.hit{ outline:2px solid var(--brand-cta); background:var(--brand-soft); }

/* Regular talks: soft blue hover */
.paper-item:hover,
.paper-item:focus-within{ background:var(--brand-soft); }

/* Posters: left accent by track (detected from the tag) */
.detail-block--poster .paper-item:has(.tag--mc){ border-left:4px solid var(--mc); padding-left:2.6rem; border-radius:0 8px 8px 0; }
.detail-block--poster .paper-item:has(.tag--dc){ border-left:4px solid var(--dc); padding-left:2.6rem; border-radius:0 8px 8px 0; }
.detail-block--poster .paper-item:has(.tag)::before{ left:.6rem; }
.detail-block--poster .paper-item:has(.tag--mc):hover{ background:var(--mc-soft); }
.detail-block--poster .paper-item:has(.tag--dc):hover{ background:var(--dc-soft); }

/* MC / DC chips */
.tag{
  display:inline-block; font-size:.75rem; font-weight:800; line-height:1;
  padding:.22rem .45rem; border-radius:999px; vertical-align:middle;
  margin-right:.45rem; letter-spacing:.02em; white-space:nowrap;
  position:relative; top:-1px;
}
.tag--mc{ background:var(--mc); color:#fff; }
.tag--dc{ background:var(--dc); color:#fff; }

/* Optional legend row under poster headings */
.poster-legend{
  margin:.15rem 0 .35rem; color:var(--muted); font-size:.92rem;
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
}

/* ========= Keynotes ========= */
.keynote-card{ margin-top:.5rem; }
.talk-title{ margin:.15rem 0 .7rem; font-size:1.05rem; line-height:1.35; color:var(--brand-dark); }
.keynote-speaker{
  display:flex; align-items:center; gap:.75rem;
  margin:0; padding:.5rem .65rem;
  background:#fff; border:1px solid var(--line); border-radius:10px;
}
.keynote-speaker a{ color:var(--brand); text-decoration:none; font-weight:800; }
.keynote-speaker a:hover{ text-decoration:underline; }
.keynote-speaker a[target="_blank"]::after{ content:" ↗"; font-weight:800; }
.avatar{
  width:64px; height:64px; flex:0 0 64px;
  border-radius:50%; object-fit:cover;
  border:2px solid var(--brand-soft);
  box-shadow:0 0 0 2px var(--brand-cta);
}
.affil{ color:var(--muted); margin:.5rem 0 0; }

/* Optional session chair line */
.session-chair{ margin-top:.5rem; font-size:.9rem; color:var(--muted); font-style:italic; }
.session-chair strong{ color:var(--brand); font-weight:600; }

/* ========= Custom scrollbars ========= */
.program-main__glance::-webkit-scrollbar,
.program-main__details::-webkit-scrollbar{ width:10px; }
.program-main__glance::-webkit-scrollbar-track,
.program-main__details::-webkit-scrollbar-track{ background:#edf2fb; border-radius:8px; }
.program-main__glance::-webkit-scrollbar-thumb,
.program-main__details::-webkit-scrollbar-thumb{
  background:#b3c7ea; border-radius:8px; border:2px solid #edf2fb;
}
.program-main__glance::-webkit-scrollbar-thumb:hover,
.program-main__details::-webkit-scrollbar-thumb:hover{ background:var(--brand-cta); }
.program-main__glance, .program-main__details{
  scrollbar-width:thin; scrollbar-color:#b3c7ea #edf2fb;
}

/* ========= Responsive ========= */
@media (max-width:980px){
  .program-main{ grid-template-columns:1fr; gap:1.5rem; }
  .program-main__glance,
  .program-main__details{ position:static; max-height:none; overflow:visible; padding-right:0; }
}
@media (max-width:560px){
  .program-main{ padding:1rem 16px 2rem; }
  .detail-block{ padding:.85rem .8rem; }
  .keynote-speaker{ align-items:flex-start; }
}

/* ========= Header hero ========= */
.header{ position:relative; block-size:40vh; min-block-size:280px; max-block-size:520px; overflow:hidden; }
.header__image{ position:absolute; inset:0; }
.header__image img{
  inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 40%; display:block;
}
.header__content{
  position:relative; z-index:1; inline-size:100%; block-size:100%;
  display:grid; place-content:center; padding:1.5rem;
}

/* ========= Print ========= */
@media print{
  .menu, .header{ display:none; }
  .program-main{ display:block; }
  .program-main__glance,
  .program-main__details{ position:static; max-height:none; overflow:visible; }
  .detail-block{ break-inside:avoid; }
}

/* ========= Search (sticky at the top of the right pane) ========= */
.program-main__details{ scroll-padding-top:var(--details-pad, 84px); }
.program-tools{
  position:sticky; top:0; z-index:3;
  background:#fff;
  padding:.6rem 0 .75rem;
  border-bottom:1px solid var(--line);
  margin-bottom:.75rem;
}
#program-search{ display:flex; gap:.5rem; align-items:center; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.search-input{
  flex:1 1 auto; min-width:0; max-width:560px;
  padding:.6rem .75rem; font:inherit; font-size:1rem; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; background:#fff;
}
.search-input:focus{ outline:none; border-color:var(--brand-cta); box-shadow:0 0 0 3px rgba(39,93,189,.15); }
.search-btn{
  flex:0 0 auto; padding:.6rem .95rem; border:none; border-radius:8px;
  font:inherit; font-weight:700; cursor:pointer;
  background:var(--brand); color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.08); transition:background-color .2s;
}
.search-btn:hover{ background:var(--brand-dark); }
.search-status{ margin:.45rem 0 0; font-size:.9rem; color:var(--muted); }
.search-status:empty{ display:none; }
.search-results{
  list-style:none; margin:.4rem 0 0; padding:0;
  max-height:45vh; overflow:auto;
}
.search-results:empty{ display:none; }
.search-results li{
  padding:.5rem .65rem; margin:.35rem 0;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  cursor:pointer; transition:background-color .15s, border-color .15s;
}
.search-results li:hover,
.search-results li:focus{ background:var(--brand-soft); border-color:var(--brand-cta); outline:none; }
.search-results li strong{ color:var(--brand); }
.search-results .search-meta,
.search-results .search-authors{ display:block; font-size:.85rem; color:var(--muted); line-height:1.35; }
.search-results .search-meta{ margin-top:.15rem; font-weight:700; }
.search-results .search-authors{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Highlighted result in the program */
.paper-item.hit,
.keynote-content.hit{
  outline:2px solid var(--brand-cta); outline-offset:2px;
  background:var(--brand-soft); border-radius:8px;
}

@media (max-width:980px){
  .program-tools{ top:var(--sticky-top); }
  .search-results{ max-height:40vh; }
}
@media print{ .program-tools{ display:none; } }