/* ————————————————————————————————
   AUTONOMOUS 2026 — Agenda
   Ported verbatim from agenda-2026-prototype.html.
   Single-theme (brand-committed dark).
   Everything is scoped under .autonomous-agenda so nothing
   leaks into the theme and the theme can't leak in either.
   Swap --accent to retune the whole component.
———————————————————————————————— */
.autonomous-agenda{
  /* ── Brand tokens (Mode 1) — exact values from the design system ──
     Black-Primitive #12191C · OffWhite-Primitive #F9F7F7 · Blue-Primitive #0A0AE5
     blue-700 #0D0E59 · blue-300 #B8CDFF · blue-200 #EBF2FF
     Gray-900 #343637 · Gray-700 #939799 · Gray-500 #D8D9DA · Gray-300 #E9EAEB */
  --canvas:#0A0D11;         /* + the live site's page background */
  --black:#12191C;          /* Black-Primitive  */
  --offwhite:#F9F7F7;       /* OffWhite-Primitive */
  --blue:#0A0AE5;           /* Blue-Primitive   */
  --blue-700:#0D0E59;
  --blue-300:#B8CDFF;
  --blue-200:#EBF2FF;
  --gray-900:#343637;
  --gray-700:#939799;
  --gray-500:#D8D9DA;

  /* ── Roles. autonomoussummit.ai paints its page on #0A0D11 and uses
     Black-Primitive as the layer above it, so the agenda follows the same
     stacking: canvas -> Black-Primitive -> lifted hover. Expansions are
     interpolations only — no new hues. ── */
  --bg:var(--canvas);
  --surface:var(--black);   /* Black-Primitive, one step up from the canvas */
  --surface-2:#182125;      /* + hover lift     */
  --sheet:var(--black);     /* drawer sits on the Black-Primitive layer */
  --line:#23282A;           /* + Black↔Gray-900 */
  --line-strong:var(--gray-900);
  --text:var(--offwhite);
  --muted:var(--gray-700);
  --faint:#636768;          /* + Gray-700↔Gray-900 */
  --accent:var(--blue-300);
  --accent-soft:rgba(184,205,255,.14);
  /* Card surface is a translucent wash over --bg, not a solid block. */
  --card-bg:rgba(52,54,55,.16);
  --photo-line:rgba(184,205,255,.10);
  --display:"Chakra Petch",Verdana,sans-serif;
  --body:"DM Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --radius-card:0px;
  --radius-chip:2px;
  /* Offset for themes with a sticky header (Elementor etc). 0 = prototype behaviour. */
  --sticky-top:0;
  /* Container, so the block can sit inside a landing page section. */
  --page-max:80rem;
  --page-pad-x:1.5rem;
  --page-pad-top:0;
  --page-pad-bottom:6rem;

  /* Type. Base matches the surrounding page copy so the block doesn't read
     a size smaller than the section it sits in. */
  --text-base:1rem;
  --text-title:1.3125rem;
  --line-base:1.4;

  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:var(--text-base);
  line-height:var(--line-base);
  -webkit-text-size-adjust:100%;
}
.autonomous-agenda *{box-sizing:border-box;margin:0;padding:0}
.autonomous-agenda ::selection{background:var(--accent);color:var(--black)}
.autonomous-agenda button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.autonomous-agenda :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* Portal wrapper: holds the fixed drawer/backdrop at body level, paints nothing itself. */
.autonomous-agenda.aa-portal{background:none}
/* Sitting on a section that paints its own background or gradient. */
.autonomous-agenda.aa-transparent{background:none}
.autonomous-agenda.aa-transparent .controls{background:none}

/* ————— Page head ————— */
.autonomous-agenda .page{
  max-width:var(--page-max);margin:0 auto;
  padding:var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
/* Timezone note standing alone, for when the masthead is switched off. */
.autonomous-agenda .tzrow{padding-top:1.5rem}
.autonomous-agenda .tzrow .tz{margin-top:0}
/* Embedded in a page that manages its own scroll furniture. */
.autonomous-agenda.aa-static .controls{position:static;background:none}
.autonomous-agenda .masthead{padding:2.75rem 0 1.75rem}
.autonomous-agenda .eyebrow{
  font-family:var(--display);
  font-size:0.75rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
.autonomous-agenda .eyebrow b{color:var(--accent);font-weight:600}
.autonomous-agenda .masthead h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.125rem,5vw,3.375rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin-top:0.625rem;
  text-wrap:balance;
  color:var(--text);
}
.autonomous-agenda .masthead .sub{color:var(--muted);margin-top:0.625rem;max-width:56ch}
.autonomous-agenda .tz{
  display:inline-flex;align-items:center;gap:0.5rem;
  margin-top:1rem;
  font-family:var(--display);font-size:0.75rem;letter-spacing:.06em;
  color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius-chip);
  padding:0.375rem 0.75rem;
}
.autonomous-agenda .tz .dot{width:0.375rem;height:0.375rem;border-radius:50%;background:var(--accent);flex:none}

/* ————— Sticky controls ————— */
.autonomous-agenda .controls{
  position:sticky;top:var(--sticky-top);z-index:40;
  background:linear-gradient(var(--bg) 88%,rgba(10,13,17,0));
  padding:0.875rem 0 1.125rem;
}
.autonomous-agenda .controls-row{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;justify-content:space-between}
/* Equal columns sized to the widest label, so both borders align. */
.autonomous-agenda .daytabs{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0.5rem}
.autonomous-agenda .daytab{
  font-family:var(--display);font-weight:600;
  font-size:0.875rem;letter-spacing:.04em;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:var(--radius-chip);
  padding:0.625rem 1.125rem;
  background:var(--surface);
  transition:color .15s,border-color .15s,background .15s;
}
.autonomous-agenda .daytab .d{display:block;font-size:0.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:0.125rem;transition:color .15s}
.autonomous-agenda .daytab:hover{color:var(--text);border-color:var(--line-strong)}
.autonomous-agenda .daytab[aria-selected="true"]{
  color:var(--text);
  border-color:var(--accent);
  background:var(--accent-soft);
}
.autonomous-agenda .daytab[aria-selected="true"] .d{color:var(--accent)}
.autonomous-agenda .trackpills{display:none;gap:0.375rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-chip);padding:0.25rem}
.autonomous-agenda .pill{
  font-family:var(--display);font-weight:600;font-size:0.78125rem;letter-spacing:.03em;
  color:var(--muted);
  padding:0.5rem 0.875rem;border-radius:var(--radius-chip);
  transition:color .15s,background .15s;
}
.autonomous-agenda .pill[aria-selected="true"]{background:var(--accent);color:var(--black)}

/* ————— Track headers (desktop) ————— */
.autonomous-agenda .trackheads{
  display:grid;
  grid-template-columns:5.5rem 1fr 1fr;
  gap:0 1rem;
  margin:0.375rem 0 0.875rem;
}
.autonomous-agenda .trackhead{
  grid-row:1;
  font-family:var(--display);font-weight:600;font-size:0.8125rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);
  padding-top:0.625rem;
}
.autonomous-agenda .trackhead span{color:var(--muted);font-weight:500}
.autonomous-agenda .trackhead.t1{grid-column:2}
.autonomous-agenda .trackhead.t2{grid-column:3}

/* ————— Schedule grid ————— */
.autonomous-agenda .grid{
  display:grid;
  grid-template-columns:5.5rem 1fr 1fr;
  gap:0.75rem 1rem;
  align-items:stretch;
}
.autonomous-agenda .timelabel{
  grid-column:1;
  font-family:var(--display);
  font-size:0.8125rem;font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  padding-top:0.875rem;
  white-space:nowrap;
}
.autonomous-agenda .timelabel small{display:block;color:var(--faint);font-size:0.6875rem;margin-top:0.0625rem}

/* ————— Session cards —————
   Two-column card: text (time, title, logo) on the left, speaker block on the
   right. The logo pins to the bottom of the text column, so cards in a row
   keep their logos on a common baseline.
————————————————————————————————— */
.autonomous-agenda .card{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "head  media"
    "foot  media";
  column-gap:1rem;
  text-align:left;width:100%;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:1.125rem 1.125rem 1rem;
  transition:border-color .15s,background .15s,transform .15s;
}
/* Edge-led hover. Lifting the fill to a solid grey over a near-black canvas
   reads milky, so the outline carries the state and the fill barely moves. */
.autonomous-agenda .card:hover{
  border-color:rgba(184,205,255,.45);
  background:rgba(184,205,255,.04);
  transform:translateY(-1px);
}
.autonomous-agenda .card.t1{grid-column:2}
.autonomous-agenda .card.t2{grid-column:3}
.autonomous-agenda .card.tall{grid-column:2 / 4}

.autonomous-agenda .card-head{
  grid-area:head;
  display:flex;flex-direction:column;gap:0.5rem;
  min-width:0;
  padding-bottom:1.125rem;
}
.autonomous-agenda .card-time{
  font-family:var(--display);font-size:0.78125rem;font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--muted);white-space:nowrap;
}
.autonomous-agenda .card h3{
  /* 200 (ExtraLight). Google Fonts only serves Chakra Petch 300-700, but the
     autonomoussummit.ai theme self-hosts 200 — so this renders true ExtraLight
     there and falls back to 300 anywhere the 200 face is missing. */
  font-family:var(--display);font-weight:200;
  font-size:var(--text-title);line-height:1.19;letter-spacing:.002em;
  text-wrap:balance;
  color:var(--text);
}
.autonomous-agenda .mtrack{display:none;font-size:0.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ————— Tag chips —————
   Session type leads as a filled chip on headline sessions, topic tags follow
   as outlined chips. Same structure as the Config agenda.
————————————————————————————————— */
.autonomous-agenda .tags{display:flex;flex-wrap:wrap;gap:0.375rem;padding-top:0.125rem}
.autonomous-agenda .tag,
.autonomous-agenda .chip{
  font-family:var(--body);
  font-size:0.5rem;font-weight:500;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius-chip);
  padding:0.25rem 0.5rem 0.3125rem;
  white-space:nowrap;
}
.autonomous-agenda .tag.theme,
.autonomous-agenda .chip.acc{
  background:var(--accent-soft);
  border-color:transparent;
  color:var(--accent);
}

/* ————— Speaker block ————— */
.autonomous-agenda .card-media{grid-area:media;max-width:13rem}
.autonomous-agenda .card.tall .card-media{max-width:32rem}
/* Plenary cards are twice as wide, so the speaker block scales with them. */
.autonomous-agenda .card.tall .person{width:9.25rem}
.autonomous-agenda .card.tall .avatar{width:9.25rem;height:7.25rem;font-size:2.25rem}
.autonomous-agenda .card.tall .person .name{font-size:0.8125rem}
.autonomous-agenda .card.tall .person .role{font-size:0.6875rem}
.autonomous-agenda .people{display:flex;flex-wrap:wrap;gap:0.5rem}
.autonomous-agenda .card.tall .people{gap:0.625rem}
.autonomous-agenda .person{display:flex;flex-direction:column;gap:0.6875rem;width:6.25rem;min-width:0}
.autonomous-agenda .avatar{
  flex:none;width:6.25rem;height:5rem;border-radius:0;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:1.625rem;color:var(--blue-200);
  background:linear-gradient(145deg,var(--blue),var(--blue-700));
}
.autonomous-agenda img.avatar{
  object-fit:cover;display:block;
  background:linear-gradient(145deg,var(--blue),var(--blue-700));
  filter:grayscale(100%);
  transition:filter .35s;
}
.autonomous-agenda .card:hover img.avatar,
.autonomous-agenda .drawer img.avatar:hover{filter:grayscale(0%)}
.autonomous-agenda .person .who{display:flex;flex-direction:column;gap:0.375rem;min-width:0}
.autonomous-agenda .person .name,
.autonomous-agenda .person .role{
  /* The theme sets white-space:nowrap on these, which pushed the role
     straight out of the card. Re-assert wrapping and break long words. */
  white-space:normal;overflow-wrap:anywhere;word-break:normal;
}
.autonomous-agenda .person .name{font-weight:500;font-size:0.75rem;line-height:1.27;color:var(--text)}
.autonomous-agenda a.name{
  color:var(--text);text-decoration:underline;
  text-decoration-color:rgba(249,247,247,.28);text-underline-offset:0.125rem;
  transition:color .15s,text-decoration-color .15s;
}
.autonomous-agenda a.name:hover{color:var(--accent);text-decoration-color:var(--accent)}
.autonomous-agenda .person .role{font-weight:300;font-size:0.625rem;line-height:1.1;color:var(--muted)}

/* ————— Card footer (company logo) ————— */
.autonomous-agenda .card-foot{
  grid-area:foot;
  align-self:end;
  display:flex;align-items:flex-end;
  margin-top:0.875rem;min-width:0;
}
.autonomous-agenda .logo{
  font-family:var(--display);font-weight:700;font-size:0.78125rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);opacity:.85;
}
.autonomous-agenda img.logo{
  display:block;
  width:var(--logo-w,auto);height:var(--logo-h,auto);
  max-height:2rem;max-width:7rem;
  object-fit:contain;object-position:left bottom;
  /* Same treatment as the speaker photos: grayscale at rest, colour on hover.
     brightness lifts dark colour marks (Visa, Salesforce) to a legible light
     grey on the dark card; already-white logos are unaffected (white caps). */
  filter:grayscale(100%) brightness(1.6);
  transition:filter .35s;
}
.autonomous-agenda .card:hover img.logo{filter:none}

.autonomous-agenda .card.tba{border-style:dashed;background:transparent}
.autonomous-agenda .card.tba:hover{transform:none;background:var(--card-bg)}
.autonomous-agenda .card.tba h3{color:var(--muted)}

/* ————— Breaks ————— */
.autonomous-agenda .break{
  grid-column:2 / 4;
  display:flex;align-items:center;gap:0.875rem;
  color:var(--faint);
  font-family:var(--display);font-size:0.75rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  padding:0.375rem 0.125rem;
}


/* ————— Drawer ————— */
.autonomous-agenda .backdrop{
  position:fixed;inset:0;z-index:60;
  background:rgba(5,7,9,.66);
  backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity .22s;
}
.autonomous-agenda .backdrop.open{opacity:1;pointer-events:auto}
.autonomous-agenda .drawer{
  position:fixed;z-index:70;
  top:0;right:0;bottom:0;width:min(26.875rem,100vw);
  background:var(--sheet);
  border-left:1px solid var(--line);
  transform:translateX(102%);
  transition:transform .26s cubic-bezier(.32,.72,.28,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.autonomous-agenda .drawer.open{transform:translateX(0)}
.autonomous-agenda .drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;
  padding:1.375rem 1.5rem 0;
}
.autonomous-agenda .drawer .handle{display:none}
.autonomous-agenda .close{
  flex:none;width:2.125rem;height:2.125rem;border-radius:8px;
  border:1px solid var(--line);
  color:var(--muted);font-size:0.9375rem;line-height:1;
  display:grid;place-items:center;
  transition:color .15s,border-color .15s;
}
.autonomous-agenda .close:hover{color:var(--text);border-color:var(--line-strong)}
.autonomous-agenda .drawer-body{padding:0 1.5rem 2rem;overflow-y:auto;flex:1}
.autonomous-agenda .drawer .kind-row{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap}
.autonomous-agenda .drawer h2{
  font-family:var(--display);font-weight:600;
  font-size:1.5rem;line-height:1.2;text-wrap:balance;
  margin:0.875rem 0 0.375rem;
  color:var(--text);
}
.autonomous-agenda .drawer .when{
  font-family:var(--display);font-size:0.8125rem;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.autonomous-agenda .drawer .section{margin-top:1.5rem}
.autonomous-agenda .drawer .section h4{
  font-size:0.71875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:0.625rem;
}
.autonomous-agenda .drawer .about{color:var(--gray-500);max-width:60ch;white-space:pre-line}
.autonomous-agenda .drawer .people{gap:0.875rem}
.autonomous-agenda .drawer .person{width:7rem}
.autonomous-agenda .drawer .avatar{width:7rem;height:5.625rem;font-size:1.75rem}
.autonomous-agenda .drawer .person .name{font-size:0.8125rem;line-height:1.23}
.autonomous-agenda .drawer .person .role{font-size:0.6875rem;line-height:1.18}
.autonomous-agenda .drawer .note{
  margin-top:1.75rem;padding:0.75rem 0.875rem;
  border:1px dashed var(--line);border-radius:8px;
  color:var(--faint);font-size:0.78125rem;
}

/* ————— Mobile ————— */
@media (max-width:860px){
  .autonomous-agenda{--page-pad-x:0.875rem;--page-pad-bottom:4.5rem}
  .autonomous-agenda .masthead{padding:1.875rem 0 1.25rem}
  .autonomous-agenda .trackpills{display:inline-flex}
  .autonomous-agenda .trackheads{display:none}
  .autonomous-agenda .grid{display:flex;flex-direction:column;gap:0.625rem}
  .autonomous-agenda .timelabel{display:none}
  .autonomous-agenda .mtrack{display:block}
  .autonomous-agenda{--text-title:1.1875rem}
  .autonomous-agenda .card h3{line-height:1.21}
  .autonomous-agenda .card-head{padding-bottom:0.875rem}
  .autonomous-agenda .grid.m-t1 .card.t2{display:none}
  .autonomous-agenda .grid.m-t2 .card.t1{display:none}
  .autonomous-agenda .controls{padding-top:0.625rem}
  .autonomous-agenda .controls-row{gap:0.625rem}
  .autonomous-agenda .daytab{padding:0.5rem 0.875rem;flex:1}
  .autonomous-agenda .daytabs{width:100%}
  .autonomous-agenda .trackpills{width:100%;justify-content:stretch}
  .autonomous-agenda .pill{flex:1;text-align:center}
  /* bottom sheet */
  .autonomous-agenda .drawer{
    top:auto;left:0;right:0;bottom:0;width:100%;
    max-height:86dvh;
    border-left:none;border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;
    transform:translateY(103%);
  }
  .autonomous-agenda .drawer.open{transform:translateY(0)}
  .autonomous-agenda .drawer .handle{
    display:block;width:2.5rem;height:0.25rem;border-radius:2px;
    background:var(--line-strong);margin:0.625rem auto 0;
  }
  .autonomous-agenda .drawer-head{padding-top:0.875rem}
}
/* ————— Narrow phones —————
   Below ~560px a 100px photo column leaves too little room for a 19px title,
   so the card stacks: time + title, then the speakers, then the logo.
————————————————————————————————— */
@media (max-width:560px){
  .autonomous-agenda .card{
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr;
    grid-template-areas:
      "head"
      "media"
      "foot";
    row-gap:0;
  }
  .autonomous-agenda .card-media,
  .autonomous-agenda .card.tall .card-media{max-width:none}
  .autonomous-agenda .card-head{padding-bottom:0.875rem}
  .autonomous-agenda .card-foot{margin-top:0.875rem}
  /* Stacked cards have the full width to play with, so the speaker blocks
     get wider than on desktop — names fit on one line instead of three. */
  .autonomous-agenda .person{width:7.75rem;gap:0.5625rem}
  .autonomous-agenda .avatar{width:7.75rem;height:5.875rem;font-size:1.5rem}
  .autonomous-agenda .drawer .person{width:6.25rem}
  .autonomous-agenda .drawer .avatar{width:6.25rem;height:5rem;font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .autonomous-agenda *{transition:none!important;animation:none!important}
}