/* AI Engineer Melbourne 2026 — Schedule component.
   Sits inside @layer theme alongside the other /ai-engineer/style/*.css files.

   All tokens are namespaced --schedule-* so they never collide with site
   tokens. Site values come through as fallbacks — the schedule inherits the
   site's typography (no font-* declarations anywhere in this file) and can
   be retuned by overriding any --schedule-* from outside.
*/
@layer theme {

  /* ------------------------------------------------------------
     Tokens — all derived from site tokens with fallbacks.
     Override any of these from outside .schedule to retune.
  ------------------------------------------------------------ */
  .schedule {
    --schedule-ink:        var(--color-ink, #000);
    --schedule-ink-weak:   var(--color-ink-weak, #333);
    --schedule-ink-muted:  var(--color-ink-muted, #4a4a4a);
    --schedule-bg:         var(--color-bg, #fff);
    --schedule-panel:      var(--color-panel, #e5e5e5);
    --schedule-rule:       var(--color-rule, #dddddd);
    --schedule-hairline:   var(--hairline, 1px solid var(--schedule-rule));
    --schedule-accent:     var(--color-accent-3, #000);
    --schedule-on-accent:  var(--color-on-accent, #fff);
    --schedule-link:       var(--link, #4f46e5);

    /* Structural */
    --schedule-max-width:         1400px;
    --schedule-gap:               1rem;
    /* Sticky toolbar's offset from the viewport top. Override this from
       the host site (e.g. to clear a sticky site header). */
    --schedule-sticky-top:        0px;
    --schedule-time-col:          90px;
    --schedule-time-col-narrow:   60px;
    --schedule-grid-time-col:     70px;
    --schedule-speaker-avatar:    28px;
    --schedule-cell-min-height:   1.75rem;
    --schedule-radius:            3px;
    --schedule-radius-pill:       999px;

    /* Track palette — the one place the schedule uses colour.
       Override --schedule-track-N-bg / --schedule-track-N-fg to rebrand. */
    --schedule-track-0-bg: #dbeafe; --schedule-track-0-fg: #1e40af;
    --schedule-track-1-bg: #fce7f3; --schedule-track-1-fg: #9d174d;
    --schedule-track-2-bg: #dcfce7; --schedule-track-2-fg: #166534;
    --schedule-track-3-bg: #fef3c7; --schedule-track-3-fg: #92400e;
    --schedule-track-4-bg: #e0e7ff; --schedule-track-4-fg: #3730a3;
    --schedule-track-5-bg: #fee2e2; --schedule-track-5-fg: #991b1b;
  }

  /* ------------------------------------------------------------
     Root container
  ------------------------------------------------------------ */
  .schedule {
    max-width: var(--schedule-max-width);
    margin-inline: auto;
    padding-inline: 1rem;
    color: var(--schedule-ink);
  }

  .schedule a { color: var(--schedule-link); }

  .schedule-day-heading {
    margin-block: 2rem 0.75rem;
    padding-block-end: 0;
    /* Hard kill any border-bottom inherited from a generic h2 rule on the
       host page (the dev shell's h2 has one; production typography may
       too). The first row of content (or the grid table's own border-top)
       provides the divider. */
    border-bottom: none;
  }

  /* ------------------------------------------------------------
     View switching

     The fragment renders BOTH the list and grid views into the DOM.
     The section's [data-view] attribute decides which is visible —
     the toggle JS flips that attribute to swap views instantly, with
     no network round-trip. Without JS, the toggle links fall back to
     a full-page navigation (?schedule_view=list|grid), and the server
     sets [data-view] accordingly on first render.
  ------------------------------------------------------------ */
  .schedule .schedule-view { display: none; }
  .schedule[data-view="list"] .schedule-view[data-schedule-view="list"],
  .schedule[data-view="grid"] .schedule-view[data-schedule-view="grid"] {
    display: block;
  }

  /* ------------------------------------------------------------
     Toolbar — view toggle + day nav, one horizontal row, sticky

     The toolbar groups both control clusters so they share a single
     pinned bar at the top of the viewport. The background is opaque so
     scrolled content doesn't bleed through. z-index keeps it above the
     grid cell backgrounds that share the same stacking context.
  ------------------------------------------------------------ */
  .schedule-toolbar {
    position: sticky;
    top: var(--schedule-sticky-top);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-block: 0.75rem 1rem;
    padding-block: 0.6rem;
    background: var(--schedule-bg);
    /* Hairline underline separates sticky bar from the scrolling content
       once the bar is pinned. Also visible at rest — cheap delimiter. */
    border-bottom: var(--schedule-hairline);
  }

  /* Both control clusters lay out with the same flex-row + gap, so the
     four buttons visually belong to one continuous bar. The view toggle
     sits on the left, day nav on the right (margin-inline-start: auto). */
  .schedule-view-toggle,
  .schedule-day-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
  }
  .schedule-day-nav { margin-inline-start: auto; }

  /* Unified pill styling for all four buttons. */
  .schedule-view-toggle a,
  .schedule-day-nav a {
    padding: 0.35rem 0.85rem;
    border: var(--schedule-hairline);
    border-radius: var(--schedule-radius-pill);
    text-decoration: none;
    color: var(--schedule-ink);
    line-height: 1.2;
  }

  .schedule-view-toggle a:hover,
  .schedule-day-nav a:hover {
    border-color: var(--schedule-link);
    color: var(--schedule-link);
  }

  .schedule-view-toggle a.is-active {
    /* Outlined treatment in the link colour — visually clear without
       dropping a heavy black blob into the page (the dev shell maps
       --schedule-accent to black, which dominates everything). */
    background: transparent;
    color: var(--schedule-link);
    border-color: var(--schedule-link);
    font-weight: 600;
  }

  /* ------------------------------------------------------------
     Session card (used in both list + grid views)
  ------------------------------------------------------------ */
  .schedule-session { padding-block: 0.4rem; }

  .schedule-title {
    margin: 0;
    line-height: 1.3;
    /* Allow long unbreakable strings (URLs, model names like "gpt-5-codex")
       to wrap inside narrow grid cells instead of overflowing the column. */
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Title links read as plain bold text — clickable, but no indigo
     underline competing with the chips and bylines. Hover/focus shows
     the affordance. (The grid's whole-card link handles its own hover
     via .schedule-session--linked above; this rule covers the list-view
     title link to the first speaker.) */
  .schedule-title a {
    color: inherit;
    text-decoration: none;
  }
  .schedule-title a:hover,
  .schedule-title a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .schedule-session--break .schedule-title {
    color: var(--schedule-ink-muted);
  }

  .schedule-type {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--schedule-ink-muted);
    margin-inline-end: 0.4rem;
  }

  .schedule-desc {
    margin-block: 0.35rem 0;
    color: var(--schedule-ink-weak);
    /* Cap the reading measure. Without this, descriptions in the list
       view stretch to the full row width (~1300px on a wide screen),
       which is uncomfortable for body text. */
    max-width: 65ch;
  }

  /* Speaker byline */
  .schedule-speakers {
    margin-block: 0.35rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
  }

  .schedule-speaker {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .schedule-speaker-photo {
    width: var(--schedule-speaker-avatar);
    height: var(--schedule-speaker-avatar);
    border-radius: 50%;
    object-fit: cover;
    background: var(--schedule-panel);
  }

  .schedule-speaker-name { line-height: 1.2; }
  .schedule-speaker-job {
    color: var(--schedule-ink-muted);
    line-height: 1.2;
  }

  /* ------------------------------------------------------------
     Track chips — coloured pill per track
  ------------------------------------------------------------ */
  .schedule-track {
    display: inline-block;
    margin-inline-end: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--schedule-radius);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--schedule-panel);
    color: var(--schedule-ink);
  }

  .schedule-track.schedule-track-0,
  .schedule-grid-track-head.schedule-track-0 {
    background: var(--schedule-track-0-bg);
    color:      var(--schedule-track-0-fg);
  }
  .schedule-track.schedule-track-1,
  .schedule-grid-track-head.schedule-track-1 {
    background: var(--schedule-track-1-bg);
    color:      var(--schedule-track-1-fg);
  }
  .schedule-track.schedule-track-2,
  .schedule-grid-track-head.schedule-track-2 {
    background: var(--schedule-track-2-bg);
    color:      var(--schedule-track-2-fg);
  }
  .schedule-track.schedule-track-3,
  .schedule-grid-track-head.schedule-track-3 {
    background: var(--schedule-track-3-bg);
    color:      var(--schedule-track-3-fg);
  }
  .schedule-track.schedule-track-4,
  .schedule-grid-track-head.schedule-track-4 {
    background: var(--schedule-track-4-bg);
    color:      var(--schedule-track-4-fg);
  }
  .schedule-track.schedule-track-5,
  .schedule-grid-track-head.schedule-track-5 {
    background: var(--schedule-track-5-bg);
    color:      var(--schedule-track-5-fg);
  }

  /* ------------------------------------------------------------
     List view — one session per row with time in left gutter
  ------------------------------------------------------------ */
  .schedule-row-list {
    display: grid;
    grid-template-columns: var(--schedule-time-col) 1fr;
    gap: var(--schedule-gap);
    padding-block: 0.5rem;
    border-bottom: var(--schedule-hairline);
  }

  /* Social / break / housekeeping rows in the list view — full-conference
     events (registration, lunch, reception) get more vertical breathing
     room and a top hairline so they read as section breaks in the flow. */
  .schedule-row-list--break {
    margin-block: 0.5rem;
    padding-block: 1rem;
    border-top: var(--schedule-hairline);
  }
  /* If a break row is the very first row of a day, drop the top border so
     it doesn't crowd the day heading above it. */
  .schedule-row-list--break:first-of-type {
    margin-block-start: 0;
    border-top: none;
  }
  /* Two consecutive break rows (e.g. registration + welcome housekeeping)
     would otherwise stack a border-bottom + border-top with margin between,
     producing a visible double line. Collapse to a single divider. */
  .schedule-row-list--break + .schedule-row-list--break {
    margin-block-start: 0;
    border-top: none;
  }

  .schedule-time {
    color: var(--schedule-ink-muted);
    font-variant-numeric: tabular-nums;
    padding-block-start: 0.15rem;
  }

  .schedule-time-end {
    display: block;
    opacity: 0.7;
  }

  /* ------------------------------------------------------------
     Grid view — parallel tracks across columns, time down rows
  ------------------------------------------------------------ */
  .schedule-grid {
    display: grid;
    margin-block-start: 0.5rem;
    border-top: var(--schedule-hairline);
  }

  .schedule-grid-head,
  .schedule-grid-row {
    display: grid;
    /* minmax(0, 1fr) — without the 0 minimum, a long unbreakable word in
       one cell would push that column out and squeeze its neighbours to a
       single character wide. */
    grid-template-columns:
      var(--schedule-grid-time-col)
      repeat(var(--schedule-cols), minmax(0, 1fr));
    gap: 1px;
    background: var(--schedule-rule);
  }

  .schedule-grid-head > *,
  .schedule-grid-row > * {
    background: var(--schedule-bg);
    padding: 0.4rem 0.55rem;
  }

  .schedule-grid-track-head {
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .schedule-grid-time-head { background: var(--schedule-bg); }

  .schedule-grid-time {
    color: var(--schedule-ink-muted);
    font-variant-numeric: tabular-nums;
    padding-block-start: 0.45rem;
  }

  .schedule-grid-cell { min-height: var(--schedule-cell-min-height); }

  /* In the grid, every column is narrow — descriptions blow cell heights
     out and force shorter siblings to leave whitespace below their content
     (rows align by time slot). The list view keeps the descriptions; the
     grid is for at-a-glance "what's on at 12:00" scanning. */
  .schedule-grid-cell .schedule-session,
  .schedule-grid-plenary .schedule-session { padding-block: 0; }
  .schedule-grid-cell .schedule-desc,
  .schedule-grid-plenary .schedule-desc    { display: none; }
  .schedule-grid-cell .schedule-track,
  .schedule-grid-plenary .schedule-track   { margin-block-end: 0.15rem; }

  .schedule-grid-plenary {
    grid-column: 2 / span var(--schedule-cols);
    /* No background — keynotes and socials sit on the same surface as
       everything else in the grid. The track chip / break colour does
       the visual labelling.

       Plenaries (lunch, breaks, keynotes, registration) are full-width
       events — give them noticeably more vertical breathing room than a
       per-track cell so they read as section breaks. The 1px gap between
       grid rows already provides the visible top/bottom hairlines. */
    padding-block: 1.1rem;
  }

  /* Whole-card link wrapper used in grid mode. Looks like body text —
     no underline, inherits colour — but the entire cell area is
     clickable through to the speaker page. */
  a.schedule-session--linked {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  a.schedule-session--linked:hover .schedule-title,
  a.schedule-session--linked:focus-visible .schedule-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  a.schedule-session--linked:focus-visible {
    outline: 2px solid var(--schedule-link);
    outline-offset: 2px;
    border-radius: var(--schedule-radius);
  }

  /* ------------------------------------------------------------
     Footer line
  ------------------------------------------------------------ */
  .schedule-footer {
    margin-block-start: 2rem;
    padding-block-start: 1rem;
    border-top: var(--schedule-hairline);
    color: var(--schedule-ink-muted);
  }

  /* ------------------------------------------------------------
     Narrow screens

     Below ~900px the parallel-track grid gets unreadable, so we
     collapse each row to: time label on the left, all sessions for
     that time stacked vertically on the right. Track chips inside
     each card make it obvious which track a session belongs to.
  ------------------------------------------------------------ */
  @media (max-width: 900px) {
    .schedule-row-list {
      grid-template-columns: var(--schedule-time-col-narrow) 1fr;
      gap: 0.6rem;
    }

    .schedule-grid-head { display: none; }

    .schedule-grid-row {
      /* Drop back to a simple two-column row: time + a single stacked
         column holding all the per-track cells. The 1px gap that gave
         us hairlines in the wide grid would now show up between every
         stacked cell — kill it and use cell borders instead. */
      grid-template-columns: var(--schedule-time-col-narrow) 1fr;
      gap: 0;
      background: transparent;
    }

    .schedule-grid-row > * {
      /* Restore default stacking flow inside the right-hand column so
         multiple cells/plenaries land underneath each other rather than
         spilling onto a second grid row. */
      grid-column: 2;
      padding-inline: 0;
      padding-block: 0.5rem;
    }

    .schedule-grid-row > .schedule-grid-time {
      grid-column: 1;
      grid-row: 1 / -1;
    }

    .schedule-grid-cell:empty { display: none; }
    .schedule-grid-cell + .schedule-grid-cell {
      border-top: 1px dashed var(--schedule-rule);
    }

    .schedule-grid-plenary {
      /* Plenary already has the panel background — just reset the span. */
      grid-column: 2;
    }
  }

}