/* =========================================================================
   ATBC 2026 — View-specific styles
   ========================================================================= */

/* =========================== AT A GLANCE =========================== */
.glance-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }

.daybar { display: flex; gap: 4px; padding: 4px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-md); overflow-x: auto; }
.daybar .tab { display: flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 76px; padding: 7px var(--sp-4); }
.daybar .tab b { font-size: var(--fs-sm); }
.daybar .tab small { font-size: 10px; }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--sp-5); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); }
.legend__sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }

/* Time bands (plenary / break / lunch) */
.band {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md); margin-block: var(--sp-2); border: 1px solid var(--border);
}
.band__time { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); min-width: 96px; }
.band__title { font-weight: 700; }
.band__textwrap { display: flex; flex-direction: column; gap: 1px; }
.band__talk { font-style: italic; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 500; }
.band__sub { color: var(--text-soft); font-size: var(--fs-sm); }
.band--plenary { background: linear-gradient(100deg, var(--accent-soft), transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.band--plenary .band__title { color: var(--accent); }
.band--break { background: var(--grid-band); }
.band--break .band__title { color: var(--text-soft); font-weight: 600; }
.band--lunch { background: var(--grid-band); }
.band--ceremony { background: linear-gradient(100deg, var(--primary-soft), transparent); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.band--ceremony .band__title { color: var(--primary); }
.band__icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); flex: none; }
.band__icon svg { width: 17px; height: 17px; }
.band__events { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Slot section */
.slot-sec { margin-block: var(--sp-5); }
.slot-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.slot-head h3 { font-size: var(--fs-lg); }
.slot-head .time { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--primary); font-weight: 700; }
.slot-head .note { color: var(--muted); font-size: var(--fs-xs); }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--sp-3); }

.scard {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border); overflow: hidden;
  transition: var(--transition); min-height: 116px;
}
.scard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sc-color, var(--primary)); }
.scard:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.scard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.scard__room { font-size: var(--fs-xs); font-weight: 700; color: var(--text-soft); display: inline-flex; align-items: center; gap: 4px; }
.scard__id { font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 600; }
.scard__name { font-weight: 700; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text); }
.scard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.scard__topic { font-size: 11px; color: var(--muted); font-weight: 600; }
.scard__count { font-size: var(--fs-xs); color: var(--text-soft); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ===================== TIMETABLE (at-a-glance grid) =============== */
.tt-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-xs);
  -webkit-overflow-scrolling: touch;
}
.tt { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
.tt th, .tt td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.tt thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); }
.tt__corner {
  position: sticky; left: 0; z-index: 4; background: var(--surface-3);
  text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap;
}
.tt__corner svg { width: 13px; height: 13px; display: inline; vertical-align: -2px; margin-right: 4px; }
.tt__colh { padding: var(--sp-3) var(--sp-4); text-align: left; min-width: 200px; }
.tt__slot { display: block; font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.tt__time { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--primary); font-weight: 700; margin-top: 2px; }
.tt__roomh {
  position: sticky; left: 0; z-index: 2; background: var(--surface-2);
  text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 700; font-size: var(--fs-sm);
  white-space: nowrap; color: var(--text); vertical-align: top; min-width: 120px;
}
.tt__roomh small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.tt__td { padding: 5px; vertical-align: top; }
.tt__td--empty { text-align: center; }
.tt__empty { color: var(--border-strong); font-size: var(--fs-lg); }
.tt__cell {
  display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 70px;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 4px); border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border); position: relative; transition: var(--transition);
}
.tt__cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--sc-color, var(--primary)); }
.tt__cell:hover { text-decoration: none; border-color: var(--sc-color, var(--border-strong)); box-shadow: var(--shadow-sm); transform: translateY(-1px); background: var(--surface-2); }
.tt__cellhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tt__id { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--muted); }
.tt__typelabel { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.tt__time--head { font-size: var(--fs-md); color: var(--text); }
.tt__colh .tt__time--head { display: block; }
.tt__name { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); color: var(--text); }
.tt__n { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: auto; }
.tt-note { margin-top: var(--sp-3); font-size: var(--fs-xs); display: flex; align-items: center; gap: 6px; }
.tt-note svg { width: 14px; height: 14px; flex: none; }

.band--poster { background: linear-gradient(100deg, color-mix(in srgb, var(--t-poster) 14%, transparent), transparent); border-color: color-mix(in srgb, var(--t-poster) 30%, var(--border)); }
.band--poster .band__title { color: var(--t-poster); }

.legend-wrap { margin-bottom: var(--sp-5); }
.legend__summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); padding: 6px 0; list-style: none; }
.legend__summary::-webkit-details-marker { display: none; }
.legend__summary svg { width: 15px; height: 15px; }
.legend-wrap[open] .legend { margin-top: var(--sp-2); }

/* =========================== PROGRAM ============================== */
.prog-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); }
.prog-blocks { display: flex; flex-direction: column; gap: var(--sp-3); }
.search-banner { display: flex; align-items: center; gap: 7px; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-soft); }
.search-banner svg { width: 16px; height: 16px; color: var(--primary); }
.linkish { color: var(--primary); font-weight: 700; text-decoration: underline; }
.prog-day { margin-bottom: var(--sp-8); }
.prog-slot-label {
  display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-3);
  position: sticky; top: var(--header-h); z-index: 10; padding: var(--sp-2) 0; background: var(--bg);
}
.prog-slot-label h3 { font-size: var(--fs-lg); }
.prog-slot-time { font-family: var(--font-mono); color: var(--primary); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -.02em; }
.prog-slot-label .line { flex: 1; height: 1px; background: var(--border); }

.session-card { padding: 0; overflow: hidden; }
.session-card__head { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4) var(--sp-5); cursor: pointer; transition: var(--transition); }
.session-card__head:hover { background: var(--surface-2); }
.session-card__stripe { width: 5px; align-self: stretch; border-radius: var(--r-full); background: var(--sc-color, var(--primary)); flex: none; }
.session-card__time { flex: none; min-width: 80px; font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-md); color: var(--primary); line-height: 1.2; white-space: nowrap; padding-top: 1px; letter-spacing: -.02em; }
.session-card--event .session-card__head:hover { background: transparent; }
.session-card--event .session-card__title { font-weight: 700; font-size: var(--fs-md); }
.session-card__sub .event-talk { font-style: italic; color: var(--text-soft); font-size: var(--fs-sm); }
.pentry-list { border-top: 1px solid var(--border); }
.pentry { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); align-items: baseline; }
.pentry:first-child { border-top: 0; }
.pentry__time { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--primary); min-width: 74px; flex: none; }
.pentry__main { flex: 1; min-width: 0; }
.pentry__title { font-weight: 700; }
.pentry__sub { display: block; font-style: italic; color: var(--text-soft); font-size: var(--fs-sm); }
@media (max-width: 560px) { .session-card__time { min-width: 0; font-size: var(--fs-sm); } .session-card__head { gap: var(--sp-3); } }
.session-card__main { flex: 1; min-width: 0; }
.session-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: 6px; }
.room-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--border-strong); font-weight: 800; font-size: var(--fs-sm); color: var(--text); letter-spacing: -.01em; }
.room-tag svg { width: 14px; height: 14px; color: var(--primary); }
.session-card__code { font-family: var(--font-mono); color: var(--primary); font-weight: 800; }
.session-card__title { font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-snug); }
.session-card__sub { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.session-card__sub span { display: inline-flex; align-items: center; gap: 5px; }
.session-card__sub svg { width: 14px; height: 14px; }
.session-card__chev { color: var(--muted); transition: transform var(--transition); flex: none; align-self: center; }
.session-card.is-open .session-card__chev { transform: rotate(180deg); }
.session-card__body { display: none; border-top: 1px solid var(--border); }
.session-card.is-open .session-card__body { display: block; }

.talk-list { list-style: none; padding: 0; }
.talk {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
  cursor: pointer; transition: var(--transition); align-items: flex-start;
}
.talk:first-child { border-top: 0; }
.talk:hover { background: var(--surface-2); }
.talk__num { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--primary); background: var(--primary-soft); width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.talk__main { flex: 1; min-width: 0; }
.talk__title { font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.talk__id { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; margin-left: 5px; white-space: nowrap; vertical-align: 1px; }
.talk__authors { color: var(--muted); font-size: var(--fs-xs); margin-top: 3px; }
.talk__authors b { color: var(--text-soft); font-weight: 700; }
/* The presenter's affiliation, bound to the presenter name (in parentheses). */
.talk__org { color: var(--primary); font-weight: 600; }
.talk__tags { display: flex; gap: 6px; align-items: center; flex: none; }
.talk__flag { font-size: var(--fs-xs); color: var(--muted); }

/* =========================== ABSTRACTS ============================ */
.abs-layout { display: grid; grid-template-columns: 248px 1fr; gap: var(--sp-6); align-items: start; }
.abs-sidebar { position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-5); }
.facet h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: var(--sp-3); font-weight: 700; }
.facet__list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; margin: -4px; padding: 4px; }
.facet__opt {
  display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--text-soft); cursor: pointer; transition: var(--transition); text-align: left; width: 100%;
}
.facet__opt:hover { background: var(--surface-3); color: var(--text); }
.facet__opt.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.facet__opt .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.facet__opt .n { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.facet__opt.is-active .n { color: var(--primary); }

.abs-results-head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.abs-count { font-weight: 700; }
.abs-count b { color: var(--primary); }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.active-filters .chip--btn.is-active { padding-right: 6px; }
.active-filters .chip__x { display: inline-flex; }

.abs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--sp-3); }
.acard { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); cursor: pointer; }
.acard__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.acard__title { font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-snug); }
.acard__authors { color: var(--text-soft); font-size: var(--fs-sm); }
.acard__authors b { color: var(--text); }
.acard__summary { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.acard__foot { margin-top: auto; padding-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.acard__foot span { display: inline-flex; align-items: center; gap: 5px; }
.acard__foot svg { width: 13px; height: 13px; }

.load-more { display: flex; justify-content: center; margin-top: var(--sp-6); }

@media (max-width: 860px) {
  .abs-layout { grid-template-columns: 1fr; }
  .abs-sidebar { position: static; }
  .facet__list { flex-direction: row; flex-wrap: wrap; max-height: none; }
}

/* ======================= SESSION / ABSTRACT DETAIL ================ */
.detail-head { margin-bottom: var(--sp-6); }
.detail-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-bottom: var(--sp-4); }
.detail-back:hover { color: var(--primary); text-decoration: none; }
.detail-back svg { width: 16px; height: 16px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.detail-title { font-size: var(--fs-3xl); letter-spacing: -.02em; }
.detail-sub { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); color: var(--text-soft); font-weight: 600; font-size: var(--fs-sm); }
.detail-sub span { display: inline-flex; align-items: center; gap: 6px; }
.detail-sub svg { width: 16px; height: 16px; color: var(--primary); }

.abstract-body { font-size: var(--fs-md); line-height: 1.7; color: var(--text-soft); max-width: 72ch; }
.abstract-body p + p { margin-top: var(--sp-4); }
/* In a session's expanded talks and on the full abstract page, let the abstract
   use the full width with slightly smaller text. */
.session-card__body .abstract-body,
.detail-grid .abstract-body { max-width: none; font-size: var(--fs-base); line-height: 1.6; }

.callout { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-left-width: 4px; }
.callout h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--primary); margin-bottom: 6px; }
.callout p { color: var(--text-soft); font-size: var(--fs-md); line-height: var(--lh-snug); }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-2) var(--sp-4); }
.kv dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.kv dd { font-size: var(--fs-sm); color: var(--text); }

.author-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.author { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-full); background: var(--surface-3); font-size: var(--fs-sm); font-weight: 600; }
.author.is-presenter { background: var(--primary-soft); color: var(--primary); }
.author.is-presenter::before { content: "★"; font-size: 10px; }

.detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-8); align-items: start; }
.detail-side { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } .detail-side { position: static; } .detail-title { font-size: var(--fs-2xl); } }

/* ============================== INFO ============================== */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.info-card { padding: var(--sp-5); }
.info-card__icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-bottom: var(--sp-3); }
.info-card__icon svg { width: 22px; height: 22px; }
.info-card h3 { font-size: var(--fs-md); margin-bottom: 6px; }
.info-card p { color: var(--text-soft); font-size: var(--fs-sm); line-height: var(--lh-snug); }

.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); font-size: var(--fs-xl); }
.prose p { color: var(--text-soft); line-height: 1.7; margin-bottom: var(--sp-3); }
.prose ul { color: var(--text-soft); line-height: 1.7; padding-left: var(--sp-5); margin-bottom: var(--sp-3); }
.prose li { margin-bottom: 6px; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-3); padding: 2px 6px; border-radius: 5px; }

/* ============================== AUTHORS =========================== */
.az { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-5); }
.az__l { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: var(--fs-sm); color: var(--text-soft); cursor: pointer; }
.az__l:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.az__h { font-size: var(--fs-md); color: var(--primary); margin: var(--sp-5) 0 var(--sp-2); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 9px var(--sp-3); border-bottom: 1px solid var(--border); }
.au-row:hover { text-decoration: none; background: var(--surface-2); }
.au-row__name { font-weight: 600; }
.au-row__n { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ================================ NOW ============================= */
.now-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-6); box-shadow: var(--shadow-xs); }
.now-clock { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 800; color: var(--primary); letter-spacing: -.02em; }
.now-day { margin-left: var(--sp-3); font-weight: 600; color: var(--text-soft); }
.now-h { font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; margin: var(--sp-4) 0 var(--sp-3); }
.now-h svg { width: 20px; height: 20px; color: var(--primary); }
.now-hero { text-align: center; padding: var(--sp-16) var(--sp-4); }
.now-hero .now-clock { font-size: clamp(2.5rem, 9vw, var(--fs-5xl)); display: block; margin-bottom: var(--sp-3); }
.now-hero h1 { margin-bottom: var(--sp-2); }

/* skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }