/* Spaces build (24 Oct 2026): the kinds area's styles. Every class is namespaced (base spx-, guide spg-, kinds spk-, content spt-, home-tidy sph-). */
/* Lane L4: I already know, What's it for?, the event, one-to-one calls and Something missing. Ported from the artifact's
   base styles and parts/kinds.css (docs/projects/spaces-challenge-thesis), on the app's design tokens. */

.spk{display:grid;gap:14px;justify-items:stretch;width:100%}
.spk > *{justify-self:center;max-width:100%}
.spk-head{text-align:center}
.spk-head h2{font-family:var(--display,Fraunces,serif);font-size:34px;line-height:1.1;margin:0 0 6px}
.spk-head p{margin:0;color:var(--text-2)}

/* the panel, the field, chips, labels */
.spk-panel{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg,18px);padding:18px;max-width:620px;width:100%;display:grid;gap:12px;box-sizing:border-box}
.spk-w660{max-width:660px}
.spk-w760{max-width:760px}
.spk-wnone{max-width:none}
.spk-lab{font-size:13px;font-weight:600;color:var(--text-3)}
.spk-field{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);border-radius:12px;padding:5px 5px 5px 13px;background:var(--surface-2)}
.spk-field input{flex:1;min-width:0;width:0;border:0;background:transparent;font-family:inherit;font-size:15px;color:var(--text);padding:8px 0;outline:0}
/* Grows with what is said or typed (voice-input.js grow, Alex 29 Oct 2026), up to about six lines, then scrolls. */
.spk-field textarea[data-grow]{flex:1;min-width:0;width:0;border:0;background:transparent;font-family:inherit;font-size:15px;color:var(--text);padding:8px 0;outline:0;resize:none;display:block;box-sizing:border-box;margin:0;line-height:1.45;max-height:9.5em;overflow-y:hidden;}
.spk-field:has(input[aria-invalid="true"]){border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.spk-speakrow{display:flex}
.spk-chips{display:flex;flex-wrap:wrap;gap:8px}
.spk-chip{font-family:inherit;font-size:14px;font-weight:600;color:var(--text-2);background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:7px 13px;cursor:pointer}
.spk-chip.on{color:var(--accent-deep);background:var(--accent-soft);border-color:var(--accent)}
.spk-chip .spk-rec{margin-left:6px;vertical-align:1px}
.spk-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.spk-row.spk-left{justify-content:flex-start}
.spk-sm{font-size:12.5px;color:var(--text-3)}

/* buttons: the app's own (btn-primary / btn-secondary), sized as the artifact draws them */
.spk .spk-big{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:17px;padding:15px 26px;min-width:min(100%,320px);border-radius:999px}
.spk .spk-small{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;padding:7px 13px;border-radius:999px}
.spk .btn svg{width:18px;height:18px}
.spk .spk-small svg{width:16px;height:16px}
.spk .spk-ghost,.spk-typed .btn-primary{background:#fff !important;color:var(--text) !important;border:1.5px solid var(--border) !important;box-shadow:none !important}
.spk-cta{display:grid;justify-items:center;gap:8px}
/* the button's row spans the column (the button stays centred in it), so a row pinned at the foot of a long screen
   covers what scrolls under it edge to edge */
.spk > .spk-cta{justify-self:stretch}
.spk-next{font-size:13px;color:var(--text-3);text-align:center}
.spk-know{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:15px;font-weight:600;color:var(--accent-deep);background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:11px 20px;cursor:pointer}
.spk-know svg{width:18px;height:18px}

/* Maya's small mark, and the "from" pill */
.spk-mv{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;background:linear-gradient(135deg,#ff5c8a,#8b5cf6);color:#fff;font-size:10px;font-weight:800}
.spk-from{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px 10px 3px 3px;justify-self:start}
.spk-from.spk-center{justify-self:center}

/* pictograms, option cards, the "Maya recommends" tag */
.spk-pic{display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border-radius:16px}
.spk-pic svg{width:55%;height:55%}
.spk-rec{display:inline-block;font-size:11.5px;font-weight:700;color:var(--accent-deep);background:var(--accent-soft);border-radius:999px;padding:2px 8px;white-space:nowrap}
.spk-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.spk-opts2{grid-template-columns:repeat(2,minmax(0,1fr))}
.spk-goals{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:620px){.spk-opts2,.spk-goals{grid-template-columns:minmax(0,1fr)}}
.spk-op{position:relative;display:grid;gap:8px;justify-items:start;align-content:start;text-align:left;font-family:inherit;background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:12px;cursor:pointer;color:var(--text)}
.spk-op.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.spk-op .spk-pic{width:44px;height:44px;border-radius:12px}
.spk-op.on .spk-pic{background:var(--accent);color:#fff}
.spk-op b{font-size:15px;line-height:1.25}
.spk-op .spk-txt{display:grid;gap:3px;justify-items:start}
.spk-op .spk-txt > span:not(.spk-rec){font-size:13px;color:var(--text-2)}
.spk-when{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--text-2)}
.spk-when svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--text-3)}

/* I already know: the one sentence, Maya's read-back, the six tiles */
.spk-one{gap:8px}
.spk-read{gap:10px}
.spk-rc{font-size:13.5px}
.spk-more{display:inline-flex;align-items:center;gap:5px;color:var(--warn);background:var(--warn-soft);border-color:var(--warn-soft)}
.spk-more svg{width:15px;height:15px}
.spk-red{display:grid;gap:8px;border-top:1px dashed var(--border);padding-top:10px}
.spk-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:660px;width:100%}
@media (max-width:560px){.spk-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spk-kd{position:relative;display:grid;gap:8px;justify-items:center;align-content:start;text-align:center;font-family:inherit;color:var(--text);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg,18px);padding:32px 10px 16px;cursor:pointer}
.spk-kd:hover{border-color:var(--accent)}
/* S11: the rest of the kinds, one quiet link under the three */
.spk-kmore{display:block;margin:6px auto 0;border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 6px;min-height:44px}
.spk-kd .spk-pic{width:64px;height:64px}
.spk-kd .spk-pic svg{width:32px;height:32px}
.spk-kd:hover .spk-pic{background:var(--accent);color:#fff}
.spk-kd.spk-on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.spk-kd .spk-rec{position:absolute;top:9px;left:50%;transform:translateX(-50%);font-size:11px}
.spk-kd b{font-size:15px;line-height:1.2}
.spk-kd .spk-s{font-size:12.5px;color:var(--text-3)}

/* the goal line on Set up and Launch */
.spk-goal{display:flex;gap:8px;align-items:flex-start;max-width:660px;margin:0 auto 14px;font-size:13.5px;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.spk-goal svg{width:16px;height:16px;flex:none;color:var(--accent);margin-top:1px}
.spk-goal > span{flex:1;min-width:0}
.spk-goalc{flex:none;border:0;background:none;color:var(--accent-deep);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0 2px;text-decoration:underline}

/* the event's "A couple more things" */
.spk-dq{display:grid;gap:8px;text-align:left}
.spk-dq + .spk-dq{border-top:1px solid var(--border-soft);padding-top:12px}
/* the webinar wizard's own questions, after the artifact's: their own region, no box of its own (empty, it takes no room) */
.spk-wizq{display:contents}
.spk-wizq > .spk-dq{border-top:1px solid var(--border-soft);padding-top:12px}
.spk-dq > b{font-family:var(--display,Fraunces,serif);font-size:19px;font-weight:600;line-height:1.25}
.spk-qt{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spk-why{font-size:13px;color:var(--text-3)}
.spk-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap}
.spk-tag .spk-mv{width:14px;height:14px;font-size:8px}
.spk-told{color:var(--good);background:var(--good-soft)}
.spk-conn{color:var(--accent-deep);background:var(--accent-soft)}

/* one-to-one calls: the choices beside the one booking sheet, and the feed bar */
.spk-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:16px;max-width:860px;width:100%;align-items:start}
@media (max-width:820px){.spk-two{grid-template-columns:minmax(0,1fr)}}
.spk-choose{display:grid;gap:8px;min-width:0}
.spk-rows{display:grid;gap:8px}
.spk-rr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;font-family:inherit;color:var(--text);background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:10px 12px;cursor:pointer;width:100%}
.spk-rr.spk-off{background:var(--surface-2)}
.spk-rr.spk-off .spk-ic,.spk-rr.spk-off b{opacity:.55}
.spk-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.spk-ic svg{width:21px;height:21px}
.spk-rr b{display:block;font-size:14.5px;font-weight:600}
.spk-rr .spk-s{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.spk-sw{width:42px;height:24px;border-radius:999px;background:var(--border-strong,#c9c9d6);position:relative;flex:none;transition:background .15s}
.spk-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.spk-onr .spk-sw{background:var(--accent)}
.spk-onr .spk-sw::after{transform:translateX(18px)}
.spk-prev{display:grid;gap:8px;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-lg,18px);padding:12px;min-width:0}
.spk-eb{font-family:var(--mono,'JetBrains Mono',monospace);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.spk-sheet{background:#fff;border:1px solid var(--border-soft);border-radius:14px;overflow:hidden;box-shadow:0 10px 24px -16px rgba(21,23,43,.35)}
.spk-sheet[inert]{pointer-events:none;user-select:none}
.spk-psheet{display:grid;gap:8px;padding:14px}
.spk-psheet p{margin:0;font-weight:700}
.spk-bar{max-width:860px;width:100%}
.spk-feed{display:grid;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:10px}
.spk-bk{display:flex;align-items:center;gap:14px;background:var(--accent);color:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 12px 26px -14px rgba(21,23,43,.55)}
.spk-bk img,.spk-bk .spk-noface{width:52px;height:52px;flex:0 0 52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff}
.spk-noface{display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.spk-noface svg{width:55%;height:55%}
.spk-bk .spk-w{flex:1;min-width:0}
.spk-meta{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.92}
.spk-tt{font-weight:800;font-size:17px;line-height:1.3;margin-top:2px}
.spk-sb2{font-size:13px;opacity:.92;margin-top:2px}
.spk-go{flex:0 0 auto;border-radius:10px;background:#fff;color:var(--accent-deep);font-weight:700;font-size:14.5px;padding:11px 16px;white-space:nowrap}
@media (max-width:520px){.spk-bk{flex-wrap:wrap}.spk-go{flex:1 1 100%;text-align:center}}
.spk-post{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--border-soft);border-radius:10px;padding:9px 10px;font-size:13px;color:var(--text-2)}
.spk-post img,.spk-post .spk-noface{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:none;flex:none}

/* Something missing? */
.spk-ask{gap:8px}
.spk-ok{display:flex;gap:10px;align-items:center;background:var(--good-soft);color:#14532d;border-radius:12px;padding:10px 12px;font-size:14px}
.spk-ok svg{width:20px;height:20px;flex:none;color:var(--good)}
.spk-reqs{display:grid;gap:6px;border-top:1px solid var(--border-soft);padding-top:10px;margin-top:6px}
.spk-reqh{font-size:13.5px;color:var(--text-2);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.spk-req{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--text-2)}
.spk-req svg{width:16px;height:16px;flex:none;color:var(--text-3);margin-top:2px}
.spk-askhint{display:block;font-size:13px;font-weight:600;color:var(--warn);margin-top:2px}

@media (max-width:520px){.spk-panel{padding:14px}.spk-head h2{font-size:28px}}

/* ══ ONE SCREEN AT 100% (Alex, 24 Oct 2026). The headline and the main button at the course guide's size
   (course-wizard.css .ccw-g-h1 30px, .ccw-g-go 16px; spaces-base.css .spx-head, .spx-big), and from 900px, where the
   frame is one screen tall, these screens at the course guide's density: the same panels, tiles and words, with its
   padding (.ccw-c-opt 14px 16px). The six kinds keep their three-by-two tiles, the picture smaller. ══ */
.spk-head h2{font-size:30px;line-height:1.12;margin-bottom:4px}
.spk-head p{font-size:15px}
.spk .spk-big{font-size:16px;padding:14px 24px;min-width:min(100%,300px)}
@media (max-width:520px){.spk-head h2{font-size:26px}}
@media (min-width:900px){
  .spk{gap:12px}
  .spk-panel{padding:14px 16px;gap:10px}
  .spk-op{padding:10px;gap:6px}
  .spk-op .spk-pic{width:36px;height:36px;border-radius:10px}
  .spk-kinds{gap:10px}
  .spk-kd{padding:12px 10px 8px;gap:3px}
  .spk-kd .spk-pic{width:36px;height:36px;border-radius:11px}
  .spk-kd .spk-pic svg{width:20px;height:20px}
  .spk-kd b{font-size:14.5px}
  .spk-one{padding:12px 14px}
  .spk-kd .spk-rec{top:-10px}
  .spk-chips{gap:6px}
  .spk-chip{padding:6px 12px}
  .spk-dq{gap:6px}
  .spk-dq + .spk-dq, .spk-wizq > .spk-dq{padding-top:10px}
  .spk-one{gap:6px}
  .spk-field{padding:3px 4px 3px 12px}
  .spk-rr{padding:8px 10px}
  .spk-ic{width:36px;height:36px}
  .spk-prev{padding:10px}
  .spk-dq > b{font-size:17px}
  .spk-cta{gap:6px}
  .spk-know{font-size:14.5px;padding:9px 18px}
}