/* Home, the front page (index.html): what the app is for, one template walked
   through step by step, and joining with a code. Colours come from tokens.css
   only. Every class here starts h-, so nothing meets app.css or Bootstrap. The
   pictures of screens are drawn small, in the app's own colours, and are made up. */

.home-page { --h-track: color-mix(in srgb, var(--text) 9%, var(--surface)); line-height: 1.55; }
.home-page .topbar-wrap { position: sticky; top: 0; z-index: 20; }
.home-page .topbar .brand { flex: 0 0 auto; }
/* Signed out, the bar lines up with the page; an editor's tabs (with-tabs, home.js) take the whole width, as on their other pages. */
.home-page:not(.with-tabs) .topbar { padding-left: max(1.4rem, calc((100% - 1120px) / 2)); padding-right: max(1.4rem, calc((100% - 1120px) / 2)); }
.h-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.home-page h1, .home-page h2, .home-page h3 { margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -.015em; }
.home-page p { margin: 0; }
.h-sec { margin-top: 64px; }
.h-sec-h { margin-bottom: 22px; }
.h-sec-h h2 { font-size: 1.7rem; font-weight: 700; }
.h-sec-h p { color: var(--text-dim); margin-top: .4rem; max-width: 46em; }

/* The opening: what it is, Start a session, joining with a code, and an example running order. */
.h-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; padding: 56px 0 8px; }
.h-hero h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); font-weight: 700; }
.h-lede { font-size: 1.12rem; color: var(--text-dim); margin: 1.1rem 0 1.7rem !important; max-width: 33em; }
.h-lede + .h-lede { margin-top: -.9rem !important; }
.h-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }
.h-join { display: flex; align-items: center; gap: .45rem; color: var(--text-dim); font-size: .95rem; }
.h-join input { width: 8.5rem; letter-spacing: .1em; text-transform: uppercase; }
.h-join input::placeholder { letter-spacing: normal; text-transform: none; }
/* After the example's steps: trying it. */
.home-page .h-walk-try { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: 28px; color: var(--text-dim); }

.h-agenda { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 14px 10px; }
.h-agenda-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0 4px 10px; border-bottom: 1px solid var(--border); }
.h-agenda-h b { font-weight: 700; }
.h-agenda-h span { font-size: .78rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.h-agenda ol { list-style: none; margin: 0; padding: 6px 0 0; }
.h-agenda li { display: flex; align-items: center; gap: .6rem; padding: .36rem .4rem; border-radius: var(--r-sm); font-size: .9rem; }
.h-agenda li.h-now { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.h-agenda .h-t { flex: 1; min-width: 0; }
.h-num { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .74rem; font-weight: 700; background: var(--surface-2); color: var(--text-dim); flex: none; }
.h-now .h-num, .h-step .h-num { background: var(--accent); color: var(--accent-ink); }
.h-where { font-size: .72rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.h-where.h-grouped { color: var(--group-2); }
.h-showing { font-size: .7rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.h-next { display: flex; justify-content: flex-end; padding: 10px 4px 2px; border-top: 1px solid var(--border); margin-top: 6px; }
.h-next span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-agenda-cap { font-size: .8rem; color: var(--text-dim); margin-top: .6rem !important; text-align: center; }

/* Qualia, in its own colour. */
.h-qualia { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--voice-ai); border-radius: var(--r); padding: 28px 30px; }
.h-qualia h2 { font-size: 1.6rem; font-weight: 700; }
.h-qualia h2 span { color: var(--voice-ai); }
.h-qualia > div > p { color: var(--text-dim); margin-top: .5rem !important; }
.h-does { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.h-does li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.h-does svg { width: 22px; height: 22px; stroke: var(--voice-ai); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: .1rem; }
.h-does b { font-weight: 600; }
.h-does span { color: var(--text-dim); }
.h-qualia-foot { font-size: .88rem; color: var(--text-dim); margin-top: 1rem !important; }
.h-qualia .h-viz { height: auto; padding: 20px; }

/* The walk through the example, one step a row, on a line like the agenda's. */
.h-step { display: grid; grid-template-columns: 2.2rem minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 28px; position: relative; padding-bottom: 44px; }
.h-step::before { content: ""; position: absolute; left: calc(1.1rem - 1px); top: 2.2rem; bottom: 6px; width: 2px; background: var(--border); }
.h-step:last-child::before { display: none; }
.h-step .h-num { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
.h-step h3 { font-size: 1.3rem; font-weight: 600; margin-top: .25rem; }
.h-chip { display: inline-block; margin-top: .55rem; font-size: .78rem; font-weight: 600; padding: .12rem .6rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-dim); }
.h-chip.h-grouped { background: color-mix(in srgb, var(--group-2) 16%, var(--surface)); color: var(--text); }
.h-step p { color: var(--text-dim); margin-top: .7rem; max-width: 30em; }

/* The grey ground a picture sits on, and the pictures. */
.h-viz { height: 240px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; padding: 14px; }
.h-viz.h-tall { height: auto; padding: 22px; }
.h-board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; width: 100%; max-width: 300px; box-shadow: var(--shadow-sm); }
.h-q { font-weight: 600; font-size: .84rem; line-height: 1.3; }

.h-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; max-width: 300px; }
.h-note { background: var(--gold-fill); border-radius: 6px; padding: .45rem .55rem; font-size: .7rem; line-height: 1.3; display: flex; flex-direction: column; justify-content: space-between; gap: .3rem; }
.h-note small { font-size: .6rem; font-weight: 700; color: var(--gold); }

.h-side { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 340px; }
.h-side > div { display: flex; flex-direction: column; gap: 5px; }
.h-side .h-col { font-size: .66rem; font-weight: 600; color: var(--text-dim); text-align: center; border-bottom: 3px solid var(--c); padding-bottom: 2px; }
.h-side .h-note { font-size: .62rem; padding: .35rem .4rem; }

.h-sum { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--r-sm); padding: 10px 12px; width: 100%; max-width: 310px; font-size: .73rem; line-height: 1.4; }
.h-sum-h { font-weight: 700; font-size: .8rem; margin-bottom: .3rem; }
.h-sum-by { font-size: .64rem; font-weight: 700; color: var(--voice-ai); margin-bottom: .25rem; }
.h-sum ul { margin: 0; padding-left: 1rem; }
.h-sum li + li { margin-top: .25rem; }

.h-chat { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 300px; }
.h-msg { max-width: 88%; align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .3rem .55rem .35rem; font-size: .76rem; line-height: 1.35; }
.h-msg .h-who { display: block; font-size: .64rem; font-weight: 700; color: var(--text-dim); }
.h-msg.h-ai { background: var(--voice-ai-fill); border-color: transparent; border-left: 3px solid var(--voice-ai); }
.h-msg.h-ai .h-who { color: var(--voice-ai); }
.h-msg.h-mine { align-self: flex-end; background: var(--accent-soft); border-color: transparent; }
.h-msg .h-at { color: var(--voice-ai); font-weight: 600; }
.h-step-q { font-size: .72rem; font-weight: 600; color: var(--text-dim); border-bottom: 1px solid var(--border); padding-bottom: .35rem; }

.h-card-text { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 18px 20px; max-width: 320px; font-size: .9rem; box-shadow: var(--shadow-sm); }

/* A device and a projector, drawn. */
.h-device { width: 210px; border-radius: 26px; background: var(--border-strong); padding: 7px; box-shadow: var(--shadow); flex: none; }
.h-device .h-scr { background: var(--surface); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; height: 380px; }
.h-device .h-bar { display: flex; justify-content: space-between; align-items: center; font-size: .62rem; color: var(--text-dim); padding: .55rem .8rem .45rem; border-bottom: 1px solid var(--border); }
.h-device .h-bar b { color: var(--text); font-weight: 600; }
.h-device .h-body { padding: .7rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; }
.h-device .h-board { box-shadow: none; padding: 0; border: 0; }
.h-device .h-tabs { display: flex; border-top: 1px solid var(--border); font-size: .66rem; text-align: center; }
.h-device .h-tabs span { flex: 1; padding: .45rem 0; color: var(--text-dim); }
.h-device .h-tabs span.h-on { color: var(--accent); font-weight: 700; box-shadow: inset 0 2px 0 var(--accent); }

.h-proj { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); aspect-ratio: 16 / 10; width: 100%; max-width: 440px; display: grid; grid-template-columns: 38% 1fr; gap: 6%; align-items: center; padding: 6%; }
.h-qr { width: 100%; height: auto; display: block; border-radius: 4px; }
.h-qr .h-qr-bg { fill: var(--surface); } .h-qr .h-qr-ink { fill: var(--text); }
.h-proj-t { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.h-proj-s { font-size: .78rem; color: var(--text-dim); margin-top: .4rem !important; }
.h-code { font-size: 1.9rem; letter-spacing: .14em; font-weight: 700; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.h-joined { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-size: .78rem; font-weight: 600; color: var(--accent); }
.h-joined::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Simulated people, from the menu beside Send. */
.h-composer { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.h-menu { width: 13.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: .35rem 0; font-size: .76rem; }
.h-menu .h-head { padding: .2rem .8rem .3rem; font-size: .68rem; font-weight: 700; color: var(--text-dim); }
.h-menu .h-item { padding: .22rem .8rem; }
.h-menu .h-item.h-hover { background: var(--surface-2); }
.h-menu hr { margin: .3rem 0; border: 0; border-top: 1px solid var(--border); opacity: 1; }
.h-menu .h-remove { color: var(--bad); }
.h-row { display: flex; gap: 6px; width: 100%; align-items: center; }
.h-input { flex: 1; min-width: 0; font-size: .74rem; color: var(--text-faint); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: .4rem .55rem; }
.h-icon-btn { width: 34px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); }
.h-icon-btn svg { width: 16px; height: 16px; }
.h-send { font-size: .74rem; font-weight: 600; padding: .35rem .7rem; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); }

.h-rp { width: 100%; max-width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.h-rp-scr { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; padding: 10px; font-size: .64rem; color: var(--text-dim); }
.h-rp-scr .h-ln { height: 6px; border-radius: 6px; background: var(--h-track); margin-top: 6px; }
.h-rp-scr .h-b { height: 7px; border-radius: 7px; background: linear-gradient(90deg, var(--accent) var(--w), var(--h-track) var(--w)); margin-top: 6px; }
.h-rp-ctl { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); font-size: .66rem; color: var(--text-dim); }
.h-play { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.h-play svg { width: 9px; height: 9px; fill: var(--accent-ink); margin-left: 1px; }
.h-track { flex: 1; height: 6px; border-radius: 6px; background: var(--h-track); position: relative; }
.h-track .h-done { position: absolute; inset: 0 auto 0 0; width: 58%; background: var(--accent); border-radius: 6px; }
.h-track .h-mk { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--text-faint); }

/* Cards: the templates, a blank agenda, rehearsing and replaying. */
.h-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.h-cards.h-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: .8rem; }
.h-card .h-txt { padding: 0 .35rem .45rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.h-card h3 { font-size: 1.08rem; font-weight: 600; }
.h-card p { color: var(--text-dim); font-size: .93rem; }
.h-card .h-meta { margin-top: auto; padding-top: .4rem; font-size: .8rem; font-weight: 600; color: var(--accent); }
.h-card.h-tpl { padding: 18px 18px 16px; }
.h-card.h-tpl .h-txt { padding: 0; }
.h-tag { align-self: flex-start; font-size: .7rem; font-weight: 700; padding: .05rem .5rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--text); }
.h-card.h-blank { border-style: dashed; border-color: var(--border-strong); background: transparent; }
.h-card .h-need { color: var(--text); font-size: 1rem; font-style: italic; }
.h-tpl-go { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .5rem; }

.home-page .site-foot { margin-top: 72px; }
/* The start cards open New session at that choice (home.js). */
a.h-card { color: inherit; text-decoration: none; }
a.h-card:hover, a.h-card:focus-visible { border-color: var(--accent); }

@media (max-width: 1000px) { .h-cards.h-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .h-hero, .h-qualia { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .h-step { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .h-step > .h-viz { grid-column: 2; margin-top: 16px; }
  .h-cards, .h-cards.h-four { grid-template-columns: 1fr; }
  .h-qualia { padding: 22px 18px; }
  .h-hero { padding-top: 36px; }
}
/* app.css hides the brand on a narrow screen, where the editor's bar is full; Home is where a visitor learns the name. */
@media (max-width: 575.98px) { .home-page .topbar a.brand { display: inline; } .home-page .topbar { gap: .5rem; padding-left: .8rem; padding-right: .8rem; } }
@media (max-width: 440px) { .h-join { flex-wrap: wrap; } .h-proj-t { font-size: 1rem; } .h-code { font-size: 1.4rem; } }