/* One shared shell, with no centered max-width wrapper. */
:root { --header-height:64px; --line:#e7e8e2; }
.site-header { display:grid; grid-template-columns:216px minmax(0,1fr) auto; align-items:center; height:var(--header-height); flex-shrink:0; padding:0 24px; gap:24px; background:#fff; }
.masthead { display:contents; }
.event-brand { grid-column:1; grid-row:1; }
.brand { font-size:22px; letter-spacing:-.7px; }
.deadline { grid-column:3; grid-row:1; }
.deadline [data-countdown-label] { font-size:9px; line-height:1.4; }
#countdown-toggle { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--muted); }
#countdown-toggle:hover { background:#eceee8; color:var(--ink); }
#countdown-toggle svg { width:17px; height:17px; }
.deadline [data-countdown] { font-size:20px; line-height:1.25; min-width:110px; letter-spacing:.5px; }
.tabs { grid-column:2; grid-row:1; height:100%; gap:6px; align-items:center; overflow:visible; }
.tabs button { height:34px; padding:0 12px; border-radius:6px; font-size:12px; }
.tabs button[aria-selected=true] { background:#e9f4e9; color:var(--green-dark); }
[data-page=walkthroughs] .tabs button[aria-selected=true] { background:#eceee8; color:var(--ink); }
[data-page=walkthroughs] .tabs button:focus-visible { outline-color:var(--ink); }
.tabs button[aria-selected=true]::after { display:none; }
.tabs button:hover { background:#f0f2ed; }
#content { padding:0; min-width:0; }
#resources,#qa,#dev { padding:32px 24px; }
#resources h1,#qa h1,#dev h1 { font-size:28px; font-weight:600; }
.component-section>h2,.component-heading h2 { font:600 20px var(--display); }
footer.powered-by { justify-content:flex-end; min-height:40px; padding:8px 24px; flex-shrink:0; gap:8px; }
footer.powered-by img { width:116px; }
footer.powered-by>span { font-size:10px; }
[data-page=schedule] { height:100dvh; }
[data-page=schedule] #content { flex:1; min-height:0; display:flex; }
#schedule { display:flex; flex:1; min-width:0; flex-direction:column; padding:28px 24px 12px; }
#schedule .page-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; flex-shrink:0; }
#schedule h1 { font-size:30px; font-weight:600; letter-spacing:-.8px; }
#schedule .page-heading p { margin:0; font-size:12px; }
#schedule-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; flex:1; min-height:0; align-items:start; }
.schedule-group { display:flex; flex-direction:column; min-height:0; padding:20px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.schedule-group-heading { padding:0 0 16px; font:600 18px/1.5 var(--display); border-bottom:1px solid var(--line); }
.schedule-group-rows { display:grid; grid-auto-rows:clamp(56px,calc((100dvh - 300px)/6),96px); min-height:0; }
#schedule-list .schedule-row { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; position:relative; padding:16px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:#fff; }
#schedule-list .session-title h2 { font:500 17px/1.35 var(--display); letter-spacing:-.25px; }
#schedule-list .session-title a { font:inherit; margin:0; color:var(--green-dark); text-decoration:none; }
#schedule-list .session-title a:hover { text-decoration:underline; }
#schedule-list .schedule-row:last-child { border-bottom:0; }
#schedule-list .session-workshop .session-title a { display:inline-flex; align-items:center; gap:10px; padding:6px 10px; margin-left:-10px; border-radius:5px; background:#e9f4e9; }
#schedule-list .session-time { font-size:12px; gap:5px; }
#schedule-list .session-now { position:absolute; top:12px; right:12px; font-size:10px; }

@media(max-width:999px) {
  :root { --header-height:104px; }
  .site-header { grid-template-columns:1fr auto; grid-template-rows:60px 44px; padding:0 16px; gap:0; }
  .event-brand { grid-column:1; }
  .deadline { grid-column:2; }
  .tabs { grid-column:1 / -1; grid-row:2; height:44px; gap:8px; }
  .tabs button { padding-inline:12px; }
  #schedule { padding:18px 16px 10px; }
  #schedule .page-heading { margin-bottom:16px; }
  #schedule h1 { font-size:26px; }
  #schedule-list { grid-template-columns:1fr; grid-auto-rows:minmax(0,1fr); gap:0; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:8px; }
  .schedule-group,.schedule-group-rows { display:contents; }
  .schedule-group-heading { display:none; }
  #schedule-list .schedule-row { display:grid; align-items:center; grid-template-columns:170px minmax(0,1fr) 30px; gap:12px; padding:3px 14px; border:0; border-radius:0; border-bottom:1px solid var(--line); background:transparent; }
  #schedule-list .schedule-group:last-child .schedule-row:last-child { border-bottom:0; }
  #schedule-list .session-title h2 { font-size:14px; line-height:1.35; }
  #schedule-list .session-time { font-size:11px; }
  #schedule-list .session-now { position:static; padding:2px 5px; justify-self:end; }

  #schedule-list .session-workshop .session-title a { background:transparent; padding:0; margin:0; }
  #schedule-list .schedule-row:last-child { border-bottom:1px solid var(--line); }
  #schedule-list .session-title a { color:var(--green-text); }
}
@media(max-width:650px) {
  .brand { font-size:20px; }
  .tabs { justify-content:space-between; gap:0; }
  .tabs button { padding-inline:9px; font-size:11px; }
  .deadline [data-countdown] { font-size:21px; min-width:114px; }
  #schedule { padding:14px 12px 8px; }
  #schedule .page-heading { display:block; margin-bottom:12px; }
  #schedule .page-heading p { margin-top:5px; font-size:10px; }
  #schedule-list .schedule-row { grid-template-columns:102px minmax(0,1fr) 0; gap:8px; padding:3px 8px; }
  #schedule-list .session-title { grid-column:2; grid-row:1; }
  #schedule-list .session-title h2 { font-size:12px; letter-spacing:0; line-height:1.25; }
  #schedule-list .session-time { grid-column:1; grid-row:1; font-size:9px; gap:3px; }

  #schedule-list .session-now { grid-column:1; grid-row:1; align-self:end; justify-self:start; font-size:8px; padding:0 3px; }
  #resources,#qa,#dev { padding:24px 16px; }
}
@media(max-height:650px) {
  #schedule { padding-top:12px; }
  #schedule .page-heading { margin-bottom:12px; }
  #schedule h1 { font-size:24px; }
  #schedule-list .schedule-row { padding-block:8px; }
  .schedule-group-heading { padding-bottom:8px; }
}
@media(max-width:999px) and (max-height:650px) {
  :root { --header-height:88px; }
  .site-header { grid-template-rows:48px 40px; }
  .tabs { height:40px; }
  #schedule { padding-top:8px; }
  #schedule .page-heading { margin-bottom:8px; }
  #schedule-list .schedule-row { padding-block:1px; }
  #schedule-list .session-title h2 { line-height:1.2; }
  footer.powered-by { min-height:32px; padding-block:4px; }
}
@media(max-width:360px) {
  .site-header { padding-inline:12px; }
  .brand { font-size:18px; }
  .tabs button { padding-inline:7px; font-size:10px; }
}


footer.powered-by { border-top:0; }
#dev-mode-control { display:flex; align-items:center; gap:7px; margin-right:auto; font-size:11px; color:var(--muted); cursor:pointer; }
#dev-mode-control input,#dev-messages { accent-color:var(--ink); margin:0; }
#dev-controls { position:fixed; bottom:48px; left:16px; z-index:20; width:280px; max-width:calc(100vw - 32px); padding:16px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 6px 24px #00000014; font-size:12px; }
#dev-time { display:block; width:100%; margin:8px 0 14px; padding:8px; border:1px solid var(--line); border-radius:5px; background:#fff; font-size:13px; }
.dev-playback { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.dev-playback button { padding:8px 6px; border:1px solid var(--line); border-radius:5px; background:#f7f8f5; color:var(--ink); font:inherit; cursor:pointer; }
.dev-playback button:hover,.dev-playback button[aria-pressed=true] { background:#e9ece5; }
.dev-playback button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.dev-preview-hint { margin:8px 0 12px; color:var(--muted); font-size:11px; line-height:1.5; }
.dev-messages { display:flex; align-items:center; gap:8px; cursor:pointer; }

/* Branding follows the content without a separate footer surface. */
footer.powered-by { background:transparent; border:0; position:static; }
[data-page=walkthroughs] { background:#fff; }
[data-page=walkthroughs] .learning-sidebar { min-height:calc(100dvh - var(--header-height)); }
#schedule-list .session-workshop .session-title a { background:transparent; color:var(--ink); padding:0; margin:0; transition:transform 180ms ease; }
#schedule-list .session-workshop .session-title a::after { content:''; position:absolute; inset:0; }
#schedule-list .session-workshop { transition:background-color 180ms ease; }
#schedule-list .session-workshop:hover:not(.is-current),#schedule-list .session-workshop:focus-within:not(.is-current) { background:#f3f4f0; }
#schedule-list .session-workshop:hover .session-title a { transform:translateX(3px); text-decoration:none; }
#schedule-list .session-title a span { color:var(--muted); transition:transform 180ms ease; }
#schedule-list .session-workshop:hover .session-title a span { transform:translate(2px,-2px); }
@media(prefers-reduced-motion:reduce) { #schedule-list .session-workshop,#schedule-list .session-title a,#schedule-list .session-title a span,#questions .question summary::after { transition:none; transform:none; } }
body { position:relative; min-height:100dvh; }
footer.powered-by { position:absolute; inset:auto 0 0; width:100%; pointer-events:none; }
footer.powered-by label { pointer-events:auto; }
.brand { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.vision-icon { width:32px; height:32px; border-radius:8px; object-fit:cover; flex-shrink:0; }
@media(max-width:650px) { .vision-icon { width:26px; height:26px; border-radius:6px; } .brand { font-size:17px; gap:6px; } }
.brand .vision-icon { width:.85em; height:.85em; border-radius:.22em; }

/* A shared event dot and a quiet start-to-end time ruler. */
#schedule-list { position:relative; }
#schedule-list .schedule-row { padding-right:38px; }
#schedule-list .session-title { position:relative; padding-left:14px; width:fit-content; max-width:100%; }
#schedule-list .is-current .session-time { color:var(--muted); }
#schedule-list .session-now { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.schedule-dot { position:absolute; left:0; top:0; width:6px; height:6px; border-radius:50%; pointer-events:none; z-index:2; transition:opacity 180ms ease; }
.session-ruler { display:none; }
#schedule-list .session-ruler { position:absolute; right:5px; top:16px; bottom:16px; width:18px; display:flex; flex-direction:column; justify-content:space-between; opacity:0; transition:opacity 200ms ease; pointer-events:none; }
#schedule-list .is-current .session-ruler { opacity:1; }
.session-ruler i { display:block; flex-shrink:0; height:1px; width:10px; background:#c7cac3; margin-left:auto; }
.session-ruler i:first-child,.session-ruler i:nth-child(8) { width:16px; }
.session-progress { position:absolute; left:0; top:0; width:20px; height:2px; background:#d9483b; transform:translateY(-50%); transition:top 1s linear; }
@media(max-width:999px) {
  #schedule-list .schedule-row { min-height:54px; padding-right:34px; grid-template-columns:170px minmax(0,1fr); }
  #schedule-list .session-ruler { top:10px; bottom:10px; }
  #schedule-list .session-time { flex-direction:column; gap:0; line-height:1.4; }
  #schedule-list .session-time>span { display:none; }
}
@media(max-width:650px) {
  #schedule-list .schedule-row { grid-template-columns:64px minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  .schedule-dot,#schedule-list .session-ruler,.session-progress { transition:none; }
}

.schedule-dot::before,.schedule-dot::after { content:''; position:absolute; inset:0; border-radius:50%; background:#d9483b; }
.schedule-dot::after { animation:schedule-pulse 2s ease-out infinite; }
.schedule-dot.is-waiting::before { background:#fff; border:1px solid var(--muted); }
.schedule-dot.is-waiting::after { animation:none; background:transparent; }
@keyframes schedule-pulse { 0% { transform:scale(1); opacity:.4; } 75%,100% { transform:scale(2.8); opacity:0; } }
#schedule-list .is-current:not(.is-primary) .session-title h2::before { content:''; position:absolute; left:-14px; top:calc(.675em - 3px); width:6px; height:6px; border-radius:50%; background:#d9483b; }
#schedule-list .is-current:not(.is-primary) .session-ruler { opacity:.65; }
@media(prefers-reduced-motion:reduce) { .schedule-dot::after { animation:none; display:none; } }

#schedule-list .session-title h2 { position:relative; }

/* Keep day modules side by side when they fit, stacked on smaller screens. */
[data-page=schedule] { height:auto; min-height:100dvh; }
[data-page=schedule] #content { flex:1 0 auto; }
#schedule { width:100%; margin-inline:auto; padding-bottom:28px; }
#schedule-list { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:auto; gap:20px; flex:none; border:0; background:transparent; }
.schedule-group { display:flex; padding:20px; }
.schedule-group-heading { display:block; padding-bottom:16px; }
.schedule-group-rows { display:grid; grid-auto-rows:auto; }
#schedule-list .schedule-row { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:84px; padding:16px 34px 16px 0; gap:8px; }
#schedule-list .schedule-row:last-child { border-bottom:0; }
#schedule-list .session-time { flex-direction:row; gap:5px; font-size:12px; line-height:1.4; }
#schedule-list .session-time>span { display:inline; }
#schedule-list .session-title h2 { font-size:17px; line-height:1.35; }
@media(max-width:999px) {
  #schedule { max-width:960px; }
  #schedule-list { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:650px) {
  .schedule-group { padding:16px; }
  #schedule .page-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  #schedule-list .session-title h2 { font-size:15px; }
}