/* =============================================================
   Euromed 2026 — Programme stylesheet
   Editorial-refined aesthetic: deep ocean blue + warm terracotta.
   IMPORTANT: This stylesheet must preserve every class/ID that
   script.js injects into #leftnav, #sessions, and #speakerdetails.
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
    --c-ink:       #0b1f2f;
    --c-ink-soft:  #2a3b4a;
    --c-muted:     #6b7a85;
    --c-surface:   #ffffff;
    --c-bg:        #f4f3ee;   /* warm cream, Moroccan-adjacent */
    --c-bg-alt:    #ecebe4;
    --c-line:      #e2dfd5;
    --c-line-soft: #eeece4;

    --c-primary:   #0a4d6c;   /* deep ocean blue */
    --c-primary-2: #0d6a92;
    --c-accent:    #c4623d;   /* terracotta — Marrakech nod */
    --c-accent-2:  #d97757;
    --c-teal:      #2a9d8f;
    --c-yellow-replace: #c4623d;  /* replaces the legacy #FFC000 labels */

    --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
    --font-body:    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;

    --shadow-xs: 0 1px 2px rgba(11, 31, 47, 0.04);
    --shadow-sm: 0 2px 8px rgba(11, 31, 47, 0.06);
    --shadow-md: 0 6px 20px rgba(11, 31, 47, 0.08);

    --step-xs: 6px;
    --step-sm: 10px;
    --step-md: 16px;
    --step-lg: 24px;
    --step-xl: 40px;
    --step-2xl: 64px;

    --sidebar-w: 300px;
    --content-max: 1280px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: 18px; /* Feedback #2: bumped from 16→17→18 for more visible enlargement */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--c-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 0.4em;
}
h3 { font-size: 1.4rem; color: var(--c-ink); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 0.8em; }

a {
    color: var(--c-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover, a:focus { color: var(--c-accent); text-decoration: underline; }

hr {
    border: 0;
    height: 1px;
    background: var(--c-line);
    margin: var(--step-lg) 0;
}

/* Kill the aggressive `img { width: 100%; }` from the old stylesheet.
   The JS sets explicit widths on headshots/sponsor logos — let them be. */
img { max-width: 100%; height: auto; }

/* ---------- Top bar ---------- */
.topbar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 14px var(--step-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--step-md);
}
.btn-backprogram,
.btn-backschedule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-primary);
    cursor: pointer;
    padding: 6px 2px;
    transition: color 0.15s ease, transform 0.15s ease;
}
.btn-backprogram:hover,
.btn-backschedule:hover {
    color: var(--c-accent);
    text-decoration: none;
    transform: translateX(-2px);
}
.btn-backprogram .nav-arrow,
.btn-backschedule .glyphicon {
    font-size: 1rem;
    line-height: 1;
}
/* `#backtoprogram` keeps the legacy ID; old `.backtoprogram` class kept
   for any deep-link CSS that might reference it. */
.backtoprogram { display: inline; }

/* Mobile hamburger toggle */
.sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}
.sidebar-toggle .bar {
    width: 20px;
    height: 2px;
    background: var(--c-ink);
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.sidebar-toggle.is-active .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sidebar-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.sidebar-toggle.is-active .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Hero ---------- */
/* Structure: wide banner image (the Marrakech photo) + 5-line text stack
   below per client spec:
     1. EuroMed 2026           (big serif display)
     2. Desalination, Water …  (serif subtitle)
     3. 22–25 June 2026        (serif, slightly smaller)
     4. Marrakech, Morocco     (serif, same size as date)
     5. PROGRAMME              (big bold red) */
.hero {
    position: relative;
    background: #ffffff;
    padding: var(--step-lg) var(--step-lg) var(--step-md);
    text-align: center;
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-line);
}
.sessioninstructions { /* legacy id kept — same element */ }

/* Banner frame — responsive image, up to 1100px wide. */
.hero-banner {
    max-width: min(1100px, 100%);
    margin: 0 auto var(--step-md);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 14px -6px rgba(11, 31, 47, 0.18);
    background: #fff;
    line-height: 0;
}
.hero-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Text stack below the banner */
.hero-text {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--step-sm) 0 0;
}

.hero-title,
.program-information {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.hero-title {
    font-size: clamp(1.65rem, 3.5vw, 2.4rem);
    margin: 0 0 6px;
}
.hero-subtitle {
    font-family: var(--font-display);
    font-weight: 600;
    /* Match hero-title size per client request */
    font-size: clamp(1.65rem, 3.5vw, 2.4rem);
    color: var(--c-ink);
    margin: 0 0 14px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.hero-date,
.hero-location {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    color: var(--c-ink);
    margin: 0 0 2px;
    line-height: 1.4;
}
.hero-location { margin-bottom: var(--step-md); }

.hero-kicker {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    color: #c62828;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1;
}

/* ---------- Main layout ---------- */
.container-wrap {
    padding: 0 var(--step-lg);
    margin: 0 auto;
    max-width: var(--content-max);
}
.container-grid {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: var(--step-xl);
    padding: var(--step-xl) 0 var(--step-2xl);
    align-items: start;
}
/* Old `.container` (Bootstrap) override — we use our own grid instead */
#container.container { max-width: var(--content-max); width: 100%; }
.tableBGColor { background: transparent; }

/* ---------- Sidebar ---------- */
.sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
}
.sidebar-inner {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: var(--step-lg);
    box-shadow: var(--shadow-sm);
}
.leftnav { color: var(--c-ink); }

/* Headings inside leftnav (the `<b>Track</b>`, `<b>Filter By Author</b>` etc.
   injected by script.js) */
#leftnav b {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-muted);
    padding-bottom: 8px;
    margin-top: 0;
    border-bottom: 1px solid var(--c-line-soft);
}

/* Grouped filter sections — replaces the legacy <p>&nbsp;</p> spacer soup.
   Each .filter-group is a logical block with proper rhythm. */
.filter-group {
    margin: 0 0 var(--step-lg);
}
.filter-group:last-child { margin-bottom: 0; }
.filter-group > b {
    margin-bottom: 10px;
}
.filter-group .btn-clearsearch { margin-top: 4px; }

/* Defensive: collapse any stray <p>&nbsp;</p> or empty paragraphs that
   might still appear from other code paths. */
#leftnav p { margin: 0; padding: 0; min-height: 0; }
#leftnav p:empty { display: none; }

/* Also hide any leftover hidden <b> elements so their margins don't linger */
#leftnav b[style*="display: none"],
#leftnav b[style*="display:none"] { display: none !important; }

/* The filter tables injected by script.js (.categoryFilter / .dayFilter rows) */
#leftnav table { width: 100%; border-collapse: collapse; margin: 8px 0; }
#leftnav table td { padding: 0; vertical-align: middle; }

.categoryFilter {
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: var(--radius-sm);
}
.categoryFilter:hover td,
.categoryFilter:focus td {
    background: var(--c-bg);
    text-decoration: none;
}
.categoryFilter td {
    padding: 8px 6px !important;
    font-size: 0.92rem;
    color: var(--c-ink-soft);
    transition: color 0.15s ease;
}
.categoryFilter:hover td { color: var(--c-ink); font-weight: 500; }
.dayFilter:hover, .dayFilter:focus { cursor: pointer; }
.speakerFilter:hover, .speakerFilter:focus { cursor: pointer; }

/* Color swatch box (injected as `.box-size` with inline bg color) */
.box-size {
    width: 14px !important;
    height: 14px !important;
    margin: 4px 8px 4px 0 !important;
    border-radius: 3px;
    border: 1px solid rgba(11, 31, 47, 0.1);
    flex-shrink: 0;
}

/* Sidebar action buttons (Print + Download PDF) */
.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: var(--step-lg);
}
.action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    width: 100%;
    background: var(--c-primary);
    color: #fff;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.action-btn:hover,
.action-btn:focus {
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
    outline: none;
}
.action-btn:active { transform: translateY(1px); }
.action-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.action-btn-secondary {
    background: var(--c-surface);
    color: var(--c-primary);
    border-color: var(--c-line);
}
.action-btn-secondary:hover,
.action-btn-secondary:focus {
    background: var(--c-bg);
    color: var(--c-primary);
    border-color: var(--c-primary);
}
.action-label {
    font-size: 0.82rem;
    font-weight: 500;
}

.statement {
    margin-top: var(--step-md);
    font-size: 0.8rem;
    color: var(--c-muted);
    line-height: 1.5;
}

/* ---------- Content area ---------- */
.content { min-width: 0; }
#sessions, #speakerdetails {
    color: var(--c-ink);
    background: transparent;
    padding: 0;
}

/* ---------- Filters row (injected into #sessions) ---------- */
.filters {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: var(--step-lg);
    margin-bottom: var(--step-lg);
    box-shadow: var(--shadow-sm);
}
.filters .row { margin: 0; padding: 0; }
.filters .row > div { padding: 0; display: block; }
.filters .searchFields { margin-top: var(--step-md); }

/* Day filter pills (row of dates) */
.filters table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: var(--step-md);
}
.dayFilter {
    display: inline-block;
    padding: 10px 18px;
    margin: 6px 8px 6px 0;
    background: var(--c-bg);
    color: var(--c-ink);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.dayFilter:hover, .dayFilter:focus {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    transform: translateY(-1px);
    text-decoration: none;
    font-weight: 500;
}
.dayFilter .arrow-right {
    font-size: 0.9em;
    margin-left: 4px;
    opacity: 0.6;
}
.arrow-left { font-size: 1.2em; }
.arrow-right { font-size: 1em; }

/* Search + filters controls */
#Searchfield.form-control {
    height: 46px;
    font-size: 1rem;
    padding: 10px 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    box-shadow: none;
    background: var(--c-bg);
    font-family: var(--font-body);
    color: var(--c-ink);
    transition: border-color 0.15s ease, background 0.15s ease;
}
#Searchfield.form-control:focus {
    outline: none;
    border-color: var(--c-primary);
    background: var(--c-surface);
    box-shadow: 0 0 0 3px rgba(10, 77, 108, 0.1);
}

/* Buttons (override Bootstrap 3 defaults) */
.btn {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: var(--radius-md);
    padding: 10px 18px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    font-size: 0.9rem;
}
.btn-default,
.btn-search {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.btn-default:hover,
.btn-search:hover,
.btn-default:focus,
.btn-search:focus {
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}
.btn-info,
.btn-clearsearch {
    background: var(--c-surface);
    color: var(--c-accent);
    border-color: var(--c-accent);
}
.btn-info:hover,
.btn-clearsearch:hover,
.btn-info:focus,
.btn-clearsearch:focus {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}
.btn-block {
    display: block;
    width: 100%;
}
.show-all-details { margin-top: var(--step-md); }

#searchAll {
    margin: var(--step-md) 0;
    padding: 12px 16px;
    background: rgba(10, 77, 108, 0.06);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--radius-sm);
    color: var(--c-ink-soft);
    font-size: 0.92rem;
}

/* Speaker select dropdown */
#speakersselect,
#filterSpeakerInput {
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    background: var(--c-bg);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--c-ink);
    width: 100%;
    cursor: pointer;
}

/* ---------- Day headers ---------- */
.session-date-header {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 500;
    color: var(--c-primary);
    padding: var(--step-xl) 0 var(--step-md);
    margin: 0;
    border-bottom: 1px solid var(--c-line);
    letter-spacing: -0.01em;
}
#sessions hr {
    display: none; /* the date header provides its own rule */
}

/* ---------- Session cards ---------- */
/* Each session is rendered as a table with a colored `.session-tab` TD on the
   left (bg color from the track), then a `.session-data` wrapper on the right.
   We transform these tables into modern cards. */
#sessions > p,
#sessions table[id] { /* session wrapper tables — IDs are session codes */
    width: 100%;
    margin: var(--step-md) 0;
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#sessions table[id]:hover {
    box-shadow: var(--shadow-md);
}

.session-tab {
    width: 6px !important;
    min-width: 6px;
    padding: 0 !important;
}

.session-data {
    padding: 14px 20px !important;
    margin: 0 !important;
    vertical-align: top;
    color: var(--c-ink);
    font-size: 1rem;
}
.session-data-table {
    width: 100% !important;
    border-collapse: collapse;
}
.session-data-table tbody { background: transparent !important; }
.session-data-body { padding: 0 !important; }
.session-data-row { padding: 0 !important; margin: 0 !important; }
.session-data-row:last-child { border-bottom: none; }

/* Hide empty rows left by the legacy string builder (e.g., commented-out
   Track column leaves <tr class="session-data-row"></tr>). Belt-and-suspenders
   with the JS cleanup in setsessions. */
.session-data-row:empty { display: none !important; }
.session-data tr:empty { display: none !important; }
.session-data td:empty:not(.session-tab) { display: none; }
/* Cap long runs of <br> tags inside session/overview content */
.session-data br + br + br,
.overview br + br + br,
#speakerdetails br + br + br { display: none; }

.session-title {
    font-family: var(--font-display);
    font-size: 1.35rem !important;
    font-weight: 500;
    color: var(--c-ink);
    line-height: 1.3;
    padding: 8px 0 !important;
    letter-spacing: -0.005em;
}
.session-title strong { font-weight: 600; }

/* Time / location row with water-drop icon */
.glyphicon-tint.waterdrop {
    font-family: 'Glyphicons Halflings';
    font-size: 0.9em;
    margin-right: 6px;
    vertical-align: -1px;
}

/* Details / Overview expand button (on the right) */
.session-buttons {
    color: var(--c-primary);
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    font-size: 0.72rem !important;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    float: right;
    transition: all 0.15s ease;
    background: var(--c-surface);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
}
.session-buttons:hover {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.session-buttons .glyphicon {
    font-size: 0.75em;
}
.justify-right { text-align: right; }
.justify-end { justify-content: flex-end; }

/* Overview (expanded content) */
.overview {
    padding: var(--step-md) var(--step-lg) var(--step-lg) !important;
    background: var(--c-bg) !important;
    border-top: 1px solid var(--c-line-soft);
    margin: var(--step-md) -20px -14px !important;
    font-size: 0.95rem;
    color: var(--c-ink-soft);
}
.overview b { color: var(--c-ink); font-weight: 600; }
.overview hr { margin: var(--step-md) 0; }

/* Subsessions / presentations inside the overview */
.subsession-title {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--c-primary) !important;
    font-size: 1.05rem !important;
    line-height: 1.4;
}
.myBtn {
    cursor: pointer;
    display: inline-block;
    padding: 4px 0;
    transition: color 0.15s ease;
}
.myBtn:hover, .myBtn:focus {
    font-weight: 500;
    text-decoration: none;
    color: var(--c-accent);
    cursor: pointer;
}
.myBtn:hover .subsession-title { color: var(--c-accent) !important; }

.session-details {
    padding: 0 0 var(--step-md) var(--step-lg) !important;
    border-left: 2px solid var(--c-line);
    margin-left: 6px;
    margin-top: 6px;
    color: var(--c-ink-soft);
}

/* Safety net: if script.js ever leaves a .session-details unclosed (it used to),
   nested ones must NOT stack their left padding/border — that's what caused
   the diagonal cascade going off-screen. */
.session-details .session-details {
    padding-left: 0 !important;
    border-left: none !important;
    margin-left: 0 !important;
}

/* Speaker name link */
.speaker-name {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--c-primary) !important;
    font-size: 1.1em !important;
}
.speaker-name a { color: inherit; }
.speaker-name a:hover { color: var(--c-accent) !important; }

/* === The legacy "#FFC000 yellow" labels that script.js hardcodes ===
   e.g., <font style="color:#FFC000">Primary Author(s):</font>
   We override the inline color so labels stay readable on cream background. */
font[style*="FFC000"],
font[style*="#FFC000"],
font[style*="color:#FFC000"] {
    color: var(--c-accent) !important;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--font-body);
}
/* The ED7D31 orange used in speaker session listings */
font[style*="ED7D31"] { color: var(--c-primary) !important; }

/* ---------- Speaker detail panel (modal overlay) ---------- */
/* Rendered on top of the schedule, never replacing it — so closing the
   modal returns the user to exactly the session they were viewing. */
#speakerdetails {
    display: none; /* toggled via JS */
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(11, 31, 47, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 5vh 20px;
    animation: fadeIn 0.2s ease;
    scroll-margin-top: 0;
}
.speaker-modal-inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto 40px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: var(--step-xl);
    box-shadow: 0 25px 80px rgba(11, 31, 47, 0.35);
    animation: slideUp 0.25s ease;
}

/* Close (×) button in modal corner */
.speaker-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--c-muted);
    font-size: 28px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    z-index: 2;
}
.speaker-modal-close:hover,
.speaker-modal-close:focus {
    background: var(--c-bg);
    color: var(--c-accent);
    transform: rotate(90deg);
    outline: none;
}

#speakerdetails h3 {
    font-family: var(--font-display);
    color: var(--c-primary);
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 var(--step-md);
    padding-bottom: var(--step-sm);
    padding-right: 40px; /* avoid collision with close button */
    border-bottom: 1px solid var(--c-line);
}
#speakerdetails table {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    width: 100%;
    border-collapse: separate;
    margin: 0 0 var(--step-md);
}
#speakerdetails > b,
.speaker-modal-inner > b {
    display: block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: var(--step-lg) 0 var(--step-sm);
    font-weight: 500;
}
/* The "Back to Schedule" strip injected inside fullhtmlspeaker */
.speaker-modal-inner .backtoprogram {
    background: transparent;
    padding: var(--step-lg) 0 0;
    text-align: center;
    margin-top: var(--step-lg);
    border-top: 1px solid var(--c-line);
}
.speaker-modal-inner .backtoprogram .btn-backschedule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--c-primary);
    color: #fff !important;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    cursor: pointer;
}
.speaker-modal-inner .backtoprogram .btn-backschedule:hover {
    background: var(--c-accent);
    transform: none;
}

/* Responsive: full-screen on narrow viewports */
@media (max-width: 640px) {
    #speakerdetails { padding: 0; }
    .speaker-modal-inner {
        max-width: none;
        margin: 0;
        min-height: 100%;
        border-radius: 0;
        border: none;
        padding: var(--step-lg);
    }
}

/* ---------- Loading spinner (appended by script.js on ready) ---------- */
#tpn-loading {
    background-color: rgba(255, 255, 255, 0.92);
    background-image: url("//api.thepulsenetwork.com/PulseonEngineApi/PulseOnEngineAPI/Templates/Images/pulse-loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
    opacity: 1;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 9999;
    display: none;
}

/* ---------- Modal ---------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: auto;
    background-color: rgba(11, 31, 47, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
    background: var(--c-surface);
    margin: 6vh auto;
    padding: var(--step-xl);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    width: min(720px, 92%);
    box-shadow: 0 25px 80px rgba(11, 31, 47, 0.25);
    position: relative;
    animation: slideUp 0.25s ease;
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.close {
    color: var(--c-muted);
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    float: none;
}
.close:hover, .close:focus {
    color: var(--c-accent);
    text-decoration: none;
    transform: rotate(90deg);
}
#modal-body { color: var(--c-ink); font-size: 0.95rem; }

/* ---------- Legacy column class used in speaker profiles ---------- */
.column { float: left; width: 50%; padding: 1px; }
.inline { display: inline; }
.view-descr .item-descr { display: none; }
.view-descr:hover .item-descr { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    :root { --sidebar-w: 260px; }
    .container-grid { gap: var(--step-lg); }
}

@media (max-width: 780px) {
    .hero { padding: var(--step-xl) var(--step-md) calc(var(--step-xl) + 20px); }
    .container-wrap { padding: 0 var(--step-md); }
    .container-grid {
        grid-template-columns: 1fr;
        padding: var(--step-lg) 0 var(--step-xl);
    }

    .sidebar-toggle { display: inline-flex; }
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(320px, 85vw);
        background: var(--c-surface);
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        box-shadow: var(--shadow-md);
        padding: var(--step-md);
    }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-inner {
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: var(--step-md);
    }
    body:has(.sidebar.is-open)::after {
        content: '';
        position: fixed; inset: 0;
        background: rgba(11, 31, 47, 0.4);
        z-index: 199;
    }

    .topbar-inner { padding: 12px var(--step-md); }
    .hero-meta { padding: 10px 14px; gap: var(--step-sm); }
    .meta-sep { display: none; }

    .session-data { padding: 12px 16px !important; }
    .session-title { font-size: 1.1rem !important; }
    .session-buttons {
        float: none;
        display: inline-flex;
        margin-top: 8px;
    }

    .overview { padding: var(--step-md) !important; margin: var(--step-md) -16px -12px !important; }
    .session-details { padding: 0 0 var(--step-md) var(--step-md) !important; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 2.1rem; }
    .dayFilter { padding: 8px 14px; font-size: 0.82rem; }
    #speakerdetails table { padding: var(--step-md); }
    .modal-content { padding: var(--step-lg); margin: 4vh auto; }
}

/* ---------- Focus styles (accessibility) ---------- */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
button:focus, input:focus, select:focus, a:focus { outline: none; }
input:focus-visible, select:focus-visible {
    outline-offset: 0;
}