/* The Space-app explainer. Colours come from the CSS variables the page's
   inline theme defines, so light/dark stay one system. Everything here must
   read without JavaScript: the stylesheet only decorates markup that is
   complete on its own — hiding is the script's job, never the CSS's. */

.expicks{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.expick{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; /* touch target floor — small chips are misses on phones */
  padding:9px 16px; border-radius:999px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--hair-2); font:inherit; font-size:14.5px; font-weight:500;
  cursor:pointer; transition:background .12s ease, border-color .12s ease;
}
.expick:hover{border-color:var(--clay)}
.expick[aria-pressed="true"]{
  background:var(--clay-wash); color:var(--clay);
  border-color:var(--clay); font-weight:600;
}
.expick:focus-visible, .launcher summary:focus-visible{
  outline:2px solid var(--clay); outline-offset:3px;
}

.ex{margin-top:34px}
.ex-head{font-size:19px}
.ex-pair{
  display:grid; gap:18px; margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.ex-side .cap{
  font-size:12.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:10px;
}

/* The private-app miniature. Sizes are em-based so 200% text zoom grows the
   whole phone instead of clipping its labels. */
.mini{
  background:var(--raised); border:1px solid var(--hair);
  border-radius:20px; padding:1em; max-width:26em;
}
.mini-top{font-size:.85em; font-weight:600}
.mini-line{font-size:.75em; color:var(--ink-3); margin-top:.2em}
/* Home's widget board, in miniature. The app lays the real one out as a
   mosaic — a content-rich module takes a full row, glanceable ones pair up
   two-across — and the miniature keeps that shape, because the shape is the
   point: the dock is identical in every Space, so the board is what makes
   one Space its own app.

   This replaced a flat stack of .mini-card rows under an "All modules"
   drawer. Both are gone from the product: modules are widgets now, and the
   drawer became the Space tab. */
.board{
  display:grid; grid-template-columns:1fr 1fr;
  gap:.5em; margin-top:.7em;
}
.w{
  background:var(--surface); border:1px solid var(--hair);
  border-radius:12px; padding:.6em .7em; min-height:3.2em;
  display:flex; flex-direction:column; justify-content:space-between; gap:.3em;
}
.w.wide{grid-column:1 / -1; min-height:0}
.w b{font-size:.78em; font-weight:600; color:var(--ink-2)}
.w .n{
  font-size:1.45em; font-weight:700; line-height:1;
  color:var(--clay); font-variant-numeric:tabular-nums;
}

.dock, .dockbar{
  display:flex; gap:.25em; margin:.8em 0 0; padding:.35em;
  list-style:none; background:var(--canvas);
  border:1px solid var(--hair); border-radius:14px;
}
.dockbar{background:var(--surface); margin-top:12px}
.dock li, .dockbar li{
  flex:1; text-align:center; font-size:.68em; font-weight:500;
  color:var(--ink-2); padding:.55em .15em; border-radius:9px;
  overflow-wrap:break-word;
}
.dock li.on, .dockbar li.on{background:var(--clay-wash); color:var(--clay); font-weight:600}

/* The Front Door miniature — deliberately website-shaped, not phone-shaped,
   so the two sides read as different rooms of the same Space. */
.door{
  background:var(--raised); border:1px solid var(--hair);
  border-radius:16px; padding:1.1em; max-width:26em;
}
.door-hero{display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap}
.door-hero span{font-size:1.3em}
.door-hero b{font-size:1.05em}
.door-hero p{width:100%; margin-top:.25em; color:var(--ink-2); font-size:.9em}
.door-actions{
  display:flex; flex-wrap:wrap; gap:.5em;
  margin:.9em 0 0; padding:0; list-style:none;
}
.door-actions li{
  background:var(--clay-deep); color:#fff; font-weight:600;
  border-radius:10px; padding:.55em .9em; font-size:.85em;
}
.door-mods{
  display:flex; flex-wrap:wrap; gap:.4em;
  margin:.7em 0 0; padding:0; list-style:none;
}
.door-mods li{
  background:var(--canvas); border:1px solid var(--hair);
  border-radius:999px; padding:.35em .8em; font-size:.8em; color:var(--ink-2);
}
.door-enter{
  display:inline-block; margin-top:1em; font-size:.85em; font-weight:600;
  color:var(--clay); border-top:1px solid var(--hair); padding-top:.8em;
}
.door-enter::after{content:" →"}

@media (prefers-reduced-motion:reduce){
  .expick{transition:none}
}