/* Spaces build (24 Oct 2026): page one, doors, questions and ideas. Classes prefixed spx-s-. */
/* Ported from docs/projects/spaces-challenge-thesis/SPACES-FIRST-PAGE.src.html (the artifact's own sheet), every class
   namespaced spx-s- (CONVENTIONS 4.4). Tokens are the app's (design-tokens.css). The shell's bar, step bar, head, the
   one filled button and Maya are base.css's (lane L1a). */

.spx-s{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
.spx-s-wait{min-height:240px}
.spx-s-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.spx-s-next{justify-self:center;font-size:13px;color:var(--text-3);text-align:center}
.spx-s-small{font-size:13.5px;padding:7px 13px}

/* Maya's disc and a pictogram tile */
.spx-s-mv{width:18px;height:18px;border-radius:50%;flex:none;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--salmon,#f17d6e),var(--rose,#e85a8a) 55%,var(--plum,#b15dde));color:#fff;font-size:10px;font-weight:800;line-height:1}
.spx-s-mv.spx-s-mv-m{width:28px;height:28px;font-size:14px}
.spx-s-pic{display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border-radius:16px}
.spx-s-pic svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.spx-s-face{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.spx-s-face svg{width:62%;height:62%}
.spx-s-face-m{width:30px;height:30px}
.spx-s-face-l{width:52px;height:52px;flex:0 0 52px;box-shadow:0 0 0 3px #fff}

/* page one */
.spx-s-gnote{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--accent-soft);border-radius:16px;padding:12px 14px;max-width:660px;width:100%;justify-self:center;box-sizing:border-box}
.spx-s-gnote .spx-s-pic{width:44px;height:44px;border-radius:12px;flex:none}
.spx-s-gnote .spx-s-t{flex:1;min-width:200px;display:grid;gap:2px;font-size:14px;color:var(--text-2)}
.spx-s-gnote .spx-s-t b{font-size:15px;color:var(--text)}
.spx-s-comm{display:flex;align-items:center;gap:10px;justify-self:center;background:#fff;border:1px solid var(--border);border-radius:999px;padding:5px 14px 5px 5px;max-width:100%;box-sizing:border-box}
.spx-s-comm img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.spx-s-comm b{font-size:14px}
.spx-s-comm span{font-size:13px;color:var(--text-3)}
.spx-s-comm span b{color:var(--text)}
.spx-s-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:660px;width:100%;justify-self:center}
.spx-s-door{display:grid;gap:12px;align-content:start;justify-items:center;text-align:center;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg,18px);padding:18px 12px;cursor:pointer;font:inherit;color:var(--text);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.spx-s-door:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(21,23,43,.35);border-color:var(--accent)}
.spx-s-door .spx-s-pic{width:100%;max-width:150px;aspect-ratio:4/3}
.spx-s-door:hover .spx-s-pic,.spx-s-door-on .spx-s-pic{background:var(--accent);color:#fff}
.spx-s-door b{font-size:16.5px;font-weight:600;line-height:1.25;text-wrap:balance}
/* S10: the outline is the selection (it was Maya's pick, which never moved); her pick keeps its badge */
.spx-s-door.spx-s-door-on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.spx-s-door .spx-s-rec{justify-self:center}
.spx-s-why{font-size:12.5px;color:var(--text-2);line-height:1.35}
@media (max-width:520px){.spx-s-door{padding:12px 8px 14px;gap:9px}.spx-s-door b{font-size:14.5px}}
/* ONE SCREEN AT 100% (Alex, 24 Oct 2026: "the four door tiles are tall, and the first row of tiles is already cut
   off"). Beside a phone's width the doors are the course guide's choice tiles in size (course-wizard.css .ccw-c-opt:
   14px 16px, 15.5px words): the same four, two by two, the picture beside the words instead of over them, and
   "Maya recommends" sitting on the tile's top edge. Page one then fits a 13" laptop at 100% with Maya beside it. The
   phone keeps the tall tiles: there the page scrolls, as a phone page should. */
@media (min-width:521px){
  .spx-s{gap:14px}
  .spx-s-door{position:relative;gap:3px;align-content:center;justify-items:start;text-align:left;min-height:84px;padding:14px 14px 14px 82px}
  .spx-s-door .spx-s-pic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:54px;max-width:none;height:54px;aspect-ratio:auto;border-radius:14px}
  .spx-s-door b{font-size:15.5px}
  .spx-s-door .spx-s-rec{position:absolute;top:-10px;left:14px;justify-self:auto}
  .spx-s-doors{row-gap:16px}
}
.spx-s-know{justify-self:center;display:inline-flex;align-items:center;gap:8px;font: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}
.spx-s-know svg{width:18px;height:18px}
.spx-s-know.spx-s-know-s{font-size:14px;padding:9px 16px}
.spx-s-rec{display:inline-block;font-size:11px;font-weight:700;color:var(--accent-deep);background:var(--accent-soft);border-radius:999px;padding:2px 8px}

/* the questions' panel and rows */
.spx-s-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:center}
.spx-s-panel{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg,18px);padding:18px;max-width:620px;width:100%;justify-self:center;display:grid;gap:12px;box-sizing:border-box}
.spx-s-panel.spx-s-wide{max-width:760px}
.spx-s-panel.spx-s-reach{max-width:660px}
.spx-s-rb{display:grid;gap:4px;text-align:left;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:14px;padding:12px 14px;cursor:pointer;width:100%;font:inherit;color:inherit;box-sizing:border-box}
.spx-s-rb:hover{border-color:var(--accent)}
.spx-s-rb.spx-s-static{cursor:default}
.spx-s-rb.spx-s-static:hover{border-color:var(--border-soft)}
.spx-s-k{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-3)}
.spx-s-v{font-family:var(--font-display,Fraunces,Georgia,serif);font-size:20px;line-height:1.3;color:var(--text)}
.spx-s-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}
.spx-s-told{color:var(--good);background:var(--good-soft)}
.spx-s-guess{color:var(--warn);background:var(--warn-soft)}
.spx-s-conn{color:var(--accent-deep);background:var(--accent-soft)}
.spx-s-choose{display:grid;gap:8px;min-width:0}
.spx-s-lab{font-size:13px;font-weight:600;color:var(--text-3)}
.spx-s-edit{min-width:0;display:flex;gap:8px;align-items:center;border:1.5px solid var(--accent);border-radius:12px;padding:6px 6px 6px 12px;background:#fff}
.spx-s-edit input{flex:1;min-width:0;width:0;border:0;font-family:var(--font-display,Fraunces,Georgia,serif);font-size:18px;color:var(--text);outline:0;background:transparent}
.spx-s-edit .btn{flex:none;min-width:0;font-size:13.5px;padding:7px 13px;box-shadow:none}
.spx-s-chips{display:flex;flex-wrap:wrap;gap:8px}
.spx-s-chips .spx-s-rec{margin-left:6px;vertical-align:1px}
.spx-s-nums{display:flex;flex-wrap:wrap;gap:8px}
.spx-s-num{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px 10px 3px 3px}
.spx-s-faces{display:inline-flex}
.spx-s-faces img,.spx-s-faces .spx-s-face{width:20px;height:20px;border-radius:50%;border:2px solid #fff;margin-left:-6px;object-fit:cover}
.spx-s-faces img:first-child,.spx-s-faces .spx-s-face:first-child{margin-left:0}
.spx-s-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)}
.spx-s-field input{flex:1;min-width:0;width:0;border:0;background:transparent;font: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. */
.spx-s-field textarea[data-grow]{flex:1;min-width:0;width:0;border:0;background:transparent;font: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;}

/* what they buy */
.spx-s-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px;width:100%;justify-self:center}
@media (max-width:520px){.spx-s-offers{grid-template-columns:minmax(0,1fr)}}
.spx-s-of{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;text-align:left;background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:10px;cursor:pointer;font:inherit;color:var(--text)}
.spx-s-of.spx-s-on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.spx-s-of img,.spx-s-of .spx-s-pic{width:72px;height:56px;border-radius:10px;object-fit:cover}
.spx-s-of .spx-s-pic svg{width:46%;height:46%}
.spx-s-of b{display:block;font-size:15px;color:var(--text)}
.spx-s-of span{font-size:13px;color:var(--text-2)}
.spx-s-offshape{display:grid;gap:10px;max-width:640px;width:100%;justify-self:center;background:#fff;border:1.5px solid var(--accent);border-radius:16px;padding:12px 14px;text-align:left;box-sizing:border-box}
.spx-s-two2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px}
@media (max-width:520px){.spx-s-two2{grid-template-columns:minmax(0,1fr)}}
.spx-s-say{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--text-2)}

/* how it runs */
.spx-s-research{display:grid;gap:8px;background:var(--accent-softer);border:1px solid var(--accent-soft);border-radius:16px;padding:14px 16px;max-width:660px;width:100%;justify-self:center;box-sizing:border-box}
.spx-s-research .spx-s-t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.spx-s-research ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.spx-s-research li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:14px;color:var(--text-2)}
.spx-s-research li svg{width:16px;height:16px;color:var(--accent);margin-top:2px}
.spx-s-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.spx-s-op{position:relative;display:grid;gap:8px;justify-items:start;text-align:left;background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:12px;cursor:pointer;font:inherit;color:var(--text)}
.spx-s-op.spx-s-on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* S9: one question per screen, so the choices stand alone, one under another, at a reading width */
.spx-s-opts1{grid-template-columns:minmax(0,1fr);max-width:560px;width:100%;justify-self:center}
.spx-s-opts1 .spx-s-op{grid-template-columns:44px minmax(0,1fr);align-items:center;padding:14px 16px;min-height:64px}
.spx-s-opts1 .spx-s-op-t{grid-template-columns:minmax(0,1fr)}
.spx-s-opts1 .spx-s-txt{display:grid;gap:3px}
.spx-s-opwhy{font-size:13px;color:var(--text-2);font-style:italic}
.spx-s-opwhen{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-deep)}
.spx-s-opwhen svg{width:14px;height:14px}
.spx-s-op .spx-s-pic{width:44px;height:44px;border-radius:12px}
.spx-s-op.spx-s-on .spx-s-pic{background:var(--accent);color:#fff}
.spx-s-op b{font-size:15px;line-height:1.25}
.spx-s-op span{font-size:13px;color:var(--text-2)}
.spx-s-txt{display:grid;gap:3px;justify-items:start}
@media (max-width:620px){.spx-s-opts{grid-template-columns:minmax(0,1fr)}.spx-s-op{grid-template-columns:44px minmax(0,1fr);align-items:center}}
.spx-s-live2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.spx-s-lv{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:10px 12px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--text)}
.spx-s-lv.spx-s-on{border-color:var(--accent);background:var(--accent-softer)}
.spx-s-lv .spx-s-pic{width:34px;height:34px;border-radius:10px;flex:none}
.spx-s-lv > span:last-child{display:grid;gap:1px;font-weight:600;font-size:14px;color:var(--text)}
.spx-s-lv > span:last-child > span{font-weight:400;font-size:12.5px;color:var(--text-3)}
@media (max-width:520px){.spx-s-live2{grid-template-columns:minmax(0,1fr)}}
.spx-s-nolive{justify-self:start;font:inherit;font-size:13.5px;color:var(--accent-deep);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-align:left}
.spx-s-when{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}
.spx-s-when svg{width:16px;height:16px;color:var(--text-3);flex:none}
.spx-s-ok{display:flex;gap:10px;align-items:center;background:var(--good-soft);color:#14532d;border-radius:12px;padding:10px 12px;font-size:14px}
.spx-s-ok svg{width:20px;height:20px;color:var(--good);flex:none}
.spx-s-capsay{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--text-2);background:var(--surface-2);border-radius:12px;padding:9px 11px}

/* who we reach: the signup's tick rows */
.spx-s-tks{display:grid;gap:8px}
.spx-s-tk{display:flex;gap:10px;align-items:center;width:100%;min-height:48px;text-align:left;border:1.5px solid var(--border);background:var(--surface-2);border-radius:12px;padding:10px 13px;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,background .15s}
.spx-s-tk:hover{border-color:var(--accent)}
.spx-s-tk.spx-s-sel{border-color:var(--accent);background:var(--accent-soft)}
.spx-s-tkav{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid var(--border);color:var(--accent)}
.spx-s-tkav svg{width:19px;height:19px}
.spx-s-tkl{min-width:0;flex:1}
.spx-s-tkl b{display:block;font-size:14.5px;font-weight:650;line-height:1.3}
.spx-s-tkl > span{display:block;font-size:12.5px;color:var(--text-3);line-height:1.35;margin-top:2px}
.spx-s-tick{flex:none;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--border-strong,#d8d3c2);background:#fff;position:relative}
.spx-s-tk.spx-s-sel .spx-s-tick{border-color:var(--accent);background:var(--accent)}
.spx-s-tk.spx-s-sel .spx-s-tick::after{content:"";position:absolute;left:5.5px;top:2.5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.spx-s-tkin{display:grid;gap:5px;margin:0 0 4px;padding:2px 4px 4px 48px}
@media (max-width:520px){.spx-s-tkin{padding-left:4px}}
.spx-s-tkin .spx-s-lab{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.spx-s-tkin input{border:1.5px solid var(--border);border-radius:10px;padding:9px 12px;font:inherit;font-size:15px;background:#fff;width:100%;min-width:0;color:var(--text);box-sizing:border-box}
.spx-s-ro{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2);background:#fff;border:1px solid var(--border-soft);border-radius:10px;padding:8px 12px}
.spx-s-ro .spx-s-faces img,.spx-s-ro .spx-s-faces .spx-s-face{width:22px;height:22px}
.spx-s-extra{display:grid;gap:8px;border-top:1px dashed var(--border);padding-top:12px}
/* S3: the promise under the ticks (you can change these later, or come back) */
.spx-s-promise{display:flex;align-items:flex-start;gap:8px;margin:0 0 4px;font-size:14px;line-height:1.45;color:var(--text-2)}
.spx-s-promise svg{margin-top:3px}
.spx-s-promise svg{width:15px;height:15px;flex:none;color:var(--accent)}
.spx-s-later{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* the feed bar (Top of your feed) */
.spx-s-feedprev{display:grid;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:10px}
.spx-s-eb{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.spx-s-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)}
.spx-s-bk img{width:52px;height:52px;flex:0 0 52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff}
.spx-s-bkw{flex:1;min-width:0}
.spx-s-meta{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.92}
.spx-s-tt{font-weight:800;font-size:17px;line-height:1.3;margin-top:2px}
.spx-s-sb2{font-size:13px;opacity:.92;margin-top:2px}
.spx-s-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){.spx-s-bk{flex-wrap:wrap}.spx-s-go{flex:1 1 100%;text-align:center}}

/* a couple more things */
.spx-s-dq{display:grid;gap:8px;text-align:left}
.spx-s-dq + .spx-s-dq{border-top:1px solid var(--border-soft);padding-top:12px}
.spx-s-qt{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spx-s-dq > b{font-family:var(--font-display,Fraunces,Georgia,serif);font-size:19px;font-weight:600;line-height:1.25}
.spx-s-dq .spx-s-why{font-size:13px;color:var(--text-3)}
/* Maya's pick on "What will people buy from you?" (A57, round 2): the badge and her reason, under the card's line */
.spx-s-of .spx-s-rec{font-size:11px;color:var(--accent-deep);margin-bottom:2px}
.spx-s-of .spx-s-ofwhy{display:block;margin-top:3px;font-size:13px;line-height:1.35;color:var(--accent-deep)}

/* The questions at the course guide's density where the frame is one screen tall (900px and up, spaces-base.css):
   the same rows, panels and words, with the course guide's padding (.ccw-c-opt 14px 16px) and its question size
   (Fraunces 18px for an answer, .ccw-c-q 22px for a question). */
@media (min-width:900px){
  .spx-s{gap:12px}
  .spx-s-panel{padding:14px 16px;gap:8px}
  .spx-s-rb{padding:9px 12px;gap:2px}
  .spx-s-v{font-size:18px;line-height:1.28}
  .spx-s-edit input{font-size:17px}
  .spx-s-research{padding:12px 14px;gap:6px}
  .spx-s-op{padding:10px;gap:6px}
  .spx-s-op .spx-s-pic{width:36px;height:36px;border-radius:10px}
  .spx-s-lv{padding:8px 10px}
  .spx-s-lv .spx-s-pic{width:30px;height:30px}
  .spx-s-tk{min-height:44px;padding:8px 12px}
  .spx-s-dq > b{font-size:17px}
  .spx-s-dq{gap:6px}
  .spx-s-dq + .spx-s-dq{padding-top:10px}
  .spx-s-know{font-size:14.5px;padding:9px 18px}
  .spx-s-choose{gap:6px}
  .spx-s-chips{gap:6px}
  .spx-s-edit{padding:4px 4px 4px 12px}
  .spx-s-edit .btn{min-height:36px}
  .spx-s-field{padding:3px 4px 3px 12px}
}