/* =====================================================================
   nousspace Personal Space (/space/). Page frame: tools/space.py. Behaviour: assets/space.js.
   Uses the reader theme tokens from blog.css (Paper / Sepia / Night), so the light/dark switch
   in the header works here too. Dialogs and popovers are solid (no backdrop blur).
   ===================================================================== */
.is-space { --sp-side: 252px; --sp-card: color-mix(in srgb, var(--bg-2) 70%, var(--bg)); --sp-hover: color-mix(in srgb, var(--ink) 5%, transparent);
  --sp-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 28px rgb(0 0 0 / .06); --sp-good: #4F7A3A; }
[data-theme="night"] .is-space, .is-space:where([data-theme="night"] *) { --sp-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35); --sp-good: #A9D18E; }
.is-space .blog-foot { margin-top: 0; }
.sp { min-height: calc(100svh - 58px); }
.sp *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-muted { color: var(--muted); }
.sp-small { font-size: 13px; }
.sp-soft { margin: 0; color: var(--ink-2); font: 400 15px/1.55 var(--sans); }
.sp-eyebrow { margin: 0 0 .5rem; color: var(--accent); font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boot */
.sp-boot { display: grid; place-items: center; gap: 1rem; min-height: 60svh; color: var(--muted); font: 400 15px var(--sans); }
.sp-boot p { margin: 0; }
.sp-boot-orb { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); animation: sp-breathe 1.6s ease-in-out infinite; }
@keyframes sp-breathe { 50% { transform: scale(.82); opacity: .55; } }
.sp-noscript, .sp-boot-error { max-width: 36rem; margin: 18vh auto; padding: 0 var(--gutter); text-align: center; }

/* ---------- buttons ---------- */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 14px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .18s, border-color .18s, transform .18s var(--ease); white-space: nowrap; }
.sp-btn:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); background: var(--sp-hover); }
.sp-btn:active { transform: scale(.98); }
.sp-btn:disabled { opacity: .55; cursor: progress; }
.sp-btn .sp-i { width: 16px; height: 16px; }
.sp-btn.is-primary { border-color: var(--pop); background: var(--pop); color: var(--pop-ink); }
.sp-btn.is-primary:hover { background: color-mix(in srgb, var(--pop) 86%, var(--accent)); }
.sp-btn.is-ghost { border-color: transparent; background: transparent; }
.sp-btn.is-danger { color: #B3261E; }
[data-theme="night"] .sp-btn.is-danger { color: #FF9C8F; }
.sp-btn.is-primary.is-danger, .sp-confirm .sp-btn.is-danger { border-color: #B3261E; background: #B3261E; color: #fff; }
.sp-btn.is-wide { width: 100%; min-height: 46px; font-size: 15px; }
.sp-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .18s, color .18s; }
.sp-icon-btn:hover { background: var(--sp-hover); color: var(--ink); }
.sp-icon-btn:disabled { opacity: .3; cursor: default; background: none; }
.sp-icon-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.sp-link-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem 0; border: 0; background: none; color: var(--accent); font: 500 14px var(--sans); cursor: pointer; }
.sp-link-btn .sp-i { width: 15px; height: 15px; }
.sp-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 13px var(--sans); cursor: pointer; white-space: nowrap; transition: background .18s, color .18s, border-color .18s; }
.sp-chip .sp-i { width: 15px; height: 15px; }
.sp-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.sp-chip[aria-pressed="true"], .sp-chip[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sp-row-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: .4rem; }
.sp-row-end.is-start { justify-content: flex-start; }
.sp-row-end.is-split { justify-content: space-between; }
.sp-row-end > .sp-muted { margin-right: auto; font-size: 13px; }

/* ---------- app layout ---------- */
.sp-app { display: grid; grid-template-columns: var(--sp-side) minmax(0, 1fr); width: min(1360px, 100%); margin: 0 auto; }
.sp-side { position: sticky; top: 58px; display: flex; flex-direction: column; gap: 1rem; height: calc(100svh - 58px); padding: 1.6rem 1rem 1.2rem var(--gutter); border-right: 1px solid var(--line); }
.sp-side-brand { padding: 0 .7rem; text-decoration: none; }
.sp-side-brand .sp-eyebrow { margin: 0; }
.sp-nav { display: flex; flex-direction: column; gap: 2px; }
.sp-nav-link { display: flex; align-items: center; gap: .7rem; min-height: 40px; white-space: nowrap; padding: 0 .75rem; border-radius: 12px; color: var(--ink-2); font: 500 14.5px var(--sans); text-decoration: none; transition: background .18s, color .18s; }
.sp-nav-link:hover { background: var(--sp-hover); color: var(--ink); }
.sp-nav-link[aria-current="page"] { background: var(--chip); color: var(--ink); }
.sp-nav-link[aria-current="page"] .sp-i { color: var(--accent); }
.sp-nav-gap { height: 1px; margin: .6rem .75rem; background: var(--line); }
.sp-side-foot { display: flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); }
.sp-me { display: flex; flex: 1; align-items: center; gap: .6rem; min-width: 0; padding: .35rem; border-radius: 12px; color: inherit; text-decoration: none; }
.sp-me:hover { background: var(--sp-hover); }
.sp-me > span { display: grid; min-width: 0; font: 400 12px/1.35 var(--sans); }
.sp-me strong { overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sp-me .sp-muted { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-avatar { flex: none; width: var(--s, 36px); height: var(--s, 36px); border-radius: 50%; object-fit: cover; }
.sp-avatar.is-initial { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 500 calc(var(--s, 36px) * .44) / 1 var(--serif); border: 1px solid var(--line); }
.sp-main { min-width: 0; padding: clamp(1.4rem, 3vw, 2.6rem) var(--gutter) 5rem; outline: none; }

@media (max-width: 900px) {
  .sp-app { grid-template-columns: minmax(0, 1fr); }
  .sp-side { position: sticky; top: 58px; z-index: 20; flex-direction: row; align-items: center; height: auto; padding: .5rem var(--gutter); border-right: 0; border-bottom: 1px solid var(--line); background: var(--bg); }
  .sp-side-brand, .sp-side-foot .sp-me > span, .sp-nav-gap { display: none; }
  .sp-nav { flex: 1; flex-direction: row; gap: .25rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .sp-nav::-webkit-scrollbar { display: none; }
  .sp-nav-link { flex: none; min-height: 36px; padding: 0 .7rem; font-size: 13.5px; white-space: nowrap; scroll-snap-align: start; }
  .sp-side-foot { margin: 0; padding: 0 0 0 .4rem; border: 0; border-left: 1px solid var(--line); }
  .sp-me { flex: none; padding: 0; }
}
@media (max-width: 560px) {
  .sp-nav-link span { display: none; }
  .sp-nav-link[aria-current="page"] span { display: inline; }
  .sp-side-foot [data-act="signout"] { display: none; }
}

/* ---------- headings and blocks ---------- */
.sp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.sp-title { margin: 0; font: 400 clamp(30px, 4vw, 44px)/1.08 var(--serif); letter-spacing: -.015em; }
.sp-sub { max-width: 40rem; margin: .55rem 0 0; color: var(--ink-2); font: 400 16px/1.5 var(--sans); }
.sp-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sp-back { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1rem; color: var(--muted); font: 500 13.5px var(--sans); text-decoration: none; }
.sp-back:hover { color: var(--ink); }
.sp-back .sp-i { width: 16px; height: 16px; }
.sp-block { padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-block); background: var(--sp-card); }
.sp-block.is-bare { padding: 0; border: 0; background: none; margin-top: 2.4rem; }
.sp-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sp-block-head h2, .sp-block > h2 { margin: 0; font: 500 18px/1.3 var(--serif); }
.sp-block > h2 { margin-bottom: 1rem; }
.sp-more { color: var(--muted); font: 500 13px var(--sans); text-decoration: none; }
.sp-more:hover { color: var(--ink); }
.sp-count { min-height: 1.2em; margin: .2rem 0 .8rem; font: 400 13px var(--sans); }
.sp-hint { margin: 0 0 .6rem; font-size: 13px; }

/* ---------- empty states ---------- */
.sp-empty { display: grid; justify-items: center; gap: .3rem; padding: clamp(2rem, 6vw, 3.6rem) 1.2rem; border: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--r-block); text-align: center; }
.sp-empty h3 { max-width: 30rem; margin: .4rem 0 0; font: 400 clamp(20px, 2.4vw, 25px)/1.25 var(--serif); }
.sp-empty p { max-width: 30rem; margin: 0 0 .8rem; color: var(--ink-2); font: 400 15px/1.55 var(--sans); }
.sp-empty-mark { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); }
.sp-empty-mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); }
.sp-nothing { padding: 2rem 0; }

/* ---------- overview ---------- */
.sp-hello { margin: .4rem 0 1.6rem; }
.sp-hello-title { margin: 0; font: 400 clamp(36px, 5.4vw, 60px)/1.02 var(--serif); letter-spacing: -.02em; }
.sp-hello-sub { margin: .7rem 0 0; color: var(--ink-2); font: italic 400 clamp(18px, 2vw, 21px)/1.4 var(--serif); }
.sp-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.sp-quick-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem 0 .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; transition: border-color .18s, background .18s, transform .25s var(--ease); }
.sp-quick-btn .sp-i { color: var(--accent); }
.sp-quick-btn:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); background: var(--sp-card); transform: translateY(-1px); }
.sp-quick-btn:first-child { border-color: var(--pop); background: var(--pop); color: var(--pop-ink); }
.sp-quick-btn:first-child .sp-i { color: inherit; }
.sp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0 0 1.6rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-block); background: var(--line); }
.sp-stats > div { padding: 1rem 1.2rem; background: var(--bg); }
.sp-stats dt { color: var(--muted); font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sp-stats dd { margin: .3rem 0 0; font: 400 32px/1 var(--serif); }
.sp-stats small { color: var(--muted); font: 400 14px var(--sans); }
.sp-overview { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "cont insp" "cont act" "colls colls"; gap: 1.2rem; align-items: start; }
.sp-continue { grid-area: cont; align-self: stretch; }
.sp-inspire { grid-area: insp; }
.sp-activity { grid-area: act; }
.sp-colls-block { grid-area: colls; }
@media (max-width: 1000px) { .sp-overview { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cont" "insp" "colls" "act"; } }
.sp-starters { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1rem; font: 400 13px var(--sans); }
.sp-acts { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.sp-acts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: .7rem; padding: .45rem 0; font: 400 14px/1.4 var(--sans); }
.sp-acts li + li { border-top: 1px solid var(--line); }
.sp-act-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.sp-act-verb { color: var(--ink-2); }
.sp-acts strong { font-weight: 500; overflow-wrap: anywhere; }
.sp-acts time { font-size: 12.5px; white-space: nowrap; }

/* Daily inspiration */
.sp-quote { margin: 0; }
.sp-quote blockquote { margin: 0; font: 400 clamp(20px, 2vw, 24px)/1.38 var(--serif); letter-spacing: -.005em; }
.sp-quote blockquote::before { content: "“"; display: block; height: .5em; color: var(--accent); font-size: 2.2em; line-height: .9; }
.sp-quote figcaption { display: grid; gap: .1rem; margin-top: .9rem; font: 400 13.5px/1.4 var(--sans); }
.sp-quote figcaption span { color: var(--muted); }
.sp-inspire .sp-link-btn { margin-top: .9rem; }
.sp-quote.is-hero { max-width: 46rem; margin: .5rem 0 1rem; padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: var(--r-block); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border: 1px solid var(--line); }
.sp-quote.is-hero blockquote { font-size: clamp(24px, 3vw, 34px); }
.sp-quote.is-hero .sp-link-btn { margin-top: 1rem; }


/* ---------- cards ---------- */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 1.1rem; }
.sp-grid.is-notes { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.sp-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-block); background: var(--bg); cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s; }
.sp-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: var(--sp-shadow); }
.sp-card-body { display: flex; flex: 1; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1rem; }
.sp-kind { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font: 400 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sp-kind .sp-i { width: 14px; height: 14px; }
.sp-ns-mark { margin-left: .2rem; padding: 1px 6px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); letter-spacing: .04em; text-transform: none; font-size: 10.5px; }
.sp-card-title { display: -webkit-box; margin: 0; overflow: hidden; font: 500 17px/1.28 var(--serif); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.sp-card-meta { margin: 0; overflow: hidden; color: var(--muted); font: 400 13px/1.4 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.sp-card-text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-2); font: 400 14px/1.5 var(--sans); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.sp-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: auto; padding-top: .45rem; font-size: 12.5px; }
.sp-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--chip); color: var(--muted); }
.sp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-thumb .sp-thumb-fallback { width: 26px; height: 26px; }
.sp-thumb.is-type { background: var(--accent-soft); color: var(--accent); }
.sp-thumb.is-type .sp-i { width: 28px; height: 28px; stroke-width: 1.4; }
.sp-thumb.t-book { background: rgba(160, 110, 60, .18); color: #A06E3C; }
.sp-thumb.t-film { background: rgba(90, 100, 160, .18); color: #6A74B0; }
.sp-thumb.t-music { background: rgba(170, 80, 120, .16); color: #B05A84; }
.sp-thumb.t-person { background: rgba(80, 140, 130, .18); color: #4F8C82; }
.sp-thumb.is-sm { flex: none; width: 64px; aspect-ratio: 4 / 3; border-radius: 10px; }
.sp-thumb.is-sm .sp-i { width: 20px; height: 20px; }
.sp-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 5px; background: rgb(0 0 0 / .72); color: #fff; font: 400 11px/1.4 var(--mono); }
.sp-thumb.is-sm .sp-dur { display: none; }
.sp-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; background: var(--chip); color: var(--ink-2); font: 500 11.5px/1.5 var(--sans); white-space: nowrap; }
.sp-pill.s-in_progress { background: var(--accent-soft); color: var(--accent); }
.sp-pill.s-completed { background: color-mix(in srgb, var(--sp-good) 14%, transparent); color: var(--sp-good); }
.sp-tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.sp-tag { color: var(--muted); font: 400 12px var(--sans); }

.sp-card.is-quote { padding: 1.2rem 1.2rem 1rem; background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.sp-card.is-quote blockquote { margin: 0 0 .7rem; font: 400 18px/1.4 var(--serif); overflow-wrap: anywhere; }
.sp-card.is-quote blockquote::before { content: "“"; color: var(--accent); }
.sp-card.is-quote blockquote::after { content: "”"; color: var(--accent); }
.sp-card.is-note { gap: .5rem; padding: 1.1rem 1.1rem 1rem; }
.sp-card.is-note .sp-card-title { font-size: 18px; }
.sp-card.is-idea { background: color-mix(in srgb, var(--stage) 7%, var(--bg)); }
.sp-stage-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--stage, var(--accent)) 14%, transparent); color: var(--stage, var(--accent)); }
.sp-stage-mark .sp-i { width: 20px; height: 20px; }
.stage-seed { --stage: #9A7B4F; }
.stage-exploring { --stage: #6E9A4A; }
.stage-developing { --stage: #3F8A5C; }
.stage-realized { --stage: #C08A1E; }
[data-theme="night"] .stage-seed { --stage: #D3B183; } [data-theme="night"] .stage-exploring { --stage: #B5DA8E; }
[data-theme="night"] .stage-developing { --stage: #8FD3A6; } [data-theme="night"] .stage-realized { --stage: #F2C45E; }
.sp-pill[class*="stage-"] { background: color-mix(in srgb, var(--stage) 14%, transparent); color: var(--stage); }

/* Rows (list view, continue exploring, search) */
.sp-rows { display: grid; gap: 2px; }
.sp-row { display: flex; align-items: center; gap: .85rem; min-width: 0; padding: .55rem .6rem; border-radius: 14px; cursor: pointer; transition: background .18s; }
.sp-row:hover { background: var(--sp-hover); }
.sp-row-main { display: grid; flex: 1; min-width: 0; gap: .1rem; }
.sp-row-title { overflow: hidden; font: 500 15.5px/1.3 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.sp-row-main .sp-muted { overflow: hidden; font: 400 12.5px/1.4 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.sp-thumb.t-journey { background: var(--accent-soft); color: var(--accent); }
.sp-bar { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 99px; background: var(--chip); }
.sp-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .6s var(--ease); }
.sp-bar.is-inline { flex: none; width: 70px; }

/* ---------- filters ---------- */
.sp-filters { display: grid; gap: .8rem; margin-bottom: .6rem; }
.sp-filters.is-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.2rem; }
.sp-filters.is-inline .sp-search-field { flex: 0 1 320px; }
.sp-search-field { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); transition: border-color .18s; }
.sp-search-field:focus-within { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.sp-search-field .sp-i { color: var(--muted); }
.sp-search-field input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 15px var(--sans); }
.sp-search-field input::placeholder { color: var(--muted); }
.sp-search-field.is-big { min-height: 54px; }
.sp-search-field.is-big input { height: 52px; font-size: 18px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sp-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sp-select select { min-height: 34px; padding: 0 2rem 0 .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center / 14px; color: var(--ink); font: 500 13px var(--sans); appearance: none; cursor: pointer; max-width: 220px; }
.sp-seg { display: inline-flex; margin-left: auto; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.sp-seg .sp-icon-btn { width: 30px; height: 30px; }

/* ---------- collections ---------- */
.sp-coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 1.1rem; }
.sp-coll-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.sp-coll { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-block); background: var(--bg); cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sp-coll:hover { transform: translateY(-2px); box-shadow: var(--sp-shadow); }
.sp-coll-cover { position: relative; display: flex; gap: 6px; align-items: flex-end; height: 104px; padding: 12px; }
.sp-coll-cover img { width: 30%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 16px rgb(0 0 0 / .18); transform: rotate(-2deg); }
.sp-coll-cover img:nth-child(2) { transform: rotate(1.5deg) translateY(-6px); }
.sp-coll-cover img:nth-child(3) { transform: rotate(-1deg) translateY(-2px); }
.sp-coll-pin { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(255 255 255 / .7); color: #14130F; }
.sp-coll-pin .sp-i { width: 15px; height: 15px; }
.sp-coll-body { display: grid; gap: .3rem; padding: .9rem 1rem 1rem; }
.sp-coll-body h3 { margin: 0; font: 500 18px/1.25 var(--serif); }
.sp-coll-body p { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.sp-coll-body .sp-muted { font-size: 12.5px; color: var(--muted); }
.sp-coll-body .sp-bar { margin-top: .3rem; height: 4px; }
.cv-dawn { background: #EBC3AE; }
.cv-dusk { background: #5A4870; }
.cv-moss { background: #9EBF7C; }
.cv-sea { background: #7FB2C6; }
.cv-ember { background: #E58E5C; }
.cv-sand { background: #E2D2B4; }
.cv-night { background: #1F2244; }
.cv-bloom { background: #E8A3BE; }
.sp-coll-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.4rem; padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: var(--r-block); color: #14130F; }
.sp-coll-head.cv-dusk, .sp-coll-head.cv-night { color: #F4EEE4; }
.sp-coll-head .sp-eyebrow, .sp-coll-head .sp-muted, .sp-coll-head .sp-sub { color: inherit; opacity: .78; }
.sp-coll-head .sp-btn { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .82); color: #14130F; }
.sp-coll-head .sp-btn.is-primary { border-color: #14130F; background: #14130F; color: #FFF9F1; }
.sp-coll-head .sp-icon-btn { color: inherit; }
.sp-coll-head .sp-icon-btn:hover, .sp-coll-head .sp-icon-btn[aria-pressed="true"] { background: rgb(255 255 255 / .35); color: inherit; }
.sp-coll-head-text { min-width: 0; max-width: 40rem; }

/* Sortable lists */
.sp-sortable { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sp-sort-row { display: flex; align-items: center; gap: .3rem; padding-left: .3rem; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); transition: box-shadow .2s, opacity .2s; }
.sp-sort-row .sp-row { flex: 1; }
.sp-sort-row.is-dragging { opacity: .45; box-shadow: var(--sp-shadow); }
.sp-grip { display: grid; place-items: center; width: 22px; color: var(--muted); cursor: grab; }
.sp-grip .sp-i { width: 16px; height: 16px; }
.sp-sort-tools { display: flex; align-items: center; padding-right: .3rem; }
@media (max-width: 640px) { .sp-grip { display: none; } .sp-sort-row .sp-pill { display: none; } }

/* ---------- notes & ideas ---------- */
.sp-garden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sp-garden-col { display: grid; align-content: start; gap: .8rem; padding: .9rem; border-radius: var(--r-block); background: color-mix(in srgb, var(--stage) 5%, var(--bg)); border: 1px solid color-mix(in srgb, var(--stage) 18%, var(--line)); }
.sp-garden-col h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font: 500 15px var(--sans); }
.sp-garden-col h3 .sp-muted { margin-left: auto; font-weight: 400; }
.sp-garden-col .sp-stage-mark { width: 28px; height: 28px; }
.sp-garden-col .sp-card.is-idea .sp-stage-mark { display: none; }
.sp-garden-col .sp-soft { font-size: 13.5px; color: var(--muted); }
@media (max-width: 1100px) { .sp-garden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-garden { grid-template-columns: minmax(0, 1fr); } }

/* Editor */
.sp-editor { max-width: 46rem; margin: 0 auto; }
.sp-editor-bar { position: sticky; top: 58px; z-index: 5; display: flex; align-items: center; gap: 1rem; margin: -.4rem 0 1.4rem; padding: .5rem 0; background: var(--bg); }
.sp-editor-bar .sp-back { margin: 0; }
.sp-save-state { font: 400 12.5px var(--sans); }
.sp-editor-actions { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.sp-editor-title { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 clamp(32px, 4.4vw, 46px)/1.12 var(--serif); letter-spacing: -.015em; }
.sp-editor-title::placeholder, .sp-editor-desc::placeholder, .sp-editor-body::placeholder { color: color-mix(in srgb, var(--ink) 30%, transparent); }
.sp-editor-desc { width: 100%; margin-top: .6rem; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink-2); font: italic 400 20px/1.4 var(--serif); }
.sp-md-tools { display: flex; align-items: center; gap: 2px; margin: 1.2rem 0 .6rem; padding: 4px; border: 1px solid var(--line); border-radius: 12px; width: fit-content; max-width: 100%; overflow-x: auto; }
.sp-md-tools button { display: grid; place-items: center; min-width: 32px; height: 30px; padding: 0 .4rem; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 14px var(--sans); cursor: pointer; }
.sp-md-tools button:hover { background: var(--sp-hover); color: var(--ink); }
.sp-md-tools .sp-i { width: 16px; height: 16px; }
.sp-md-hint { padding: 0 .5rem; font: 400 12px var(--sans); white-space: nowrap; }
.sp-editor-body { display: block; width: 100%; min-height: 320px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 calc(var(--fs) * .92)/1.7 var(--serif); resize: none; }
.sp-editor-preview { min-height: 320px; }
.sp-editor-meta { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.sp-stage-pick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.sp-stage-opt { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .9rem .3rem .3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-2); font: 500 13.5px var(--sans); cursor: pointer; transition: border-color .2s, background .2s; }
.sp-stage-opt .sp-stage-mark { width: 28px; height: 28px; }
.sp-stage-opt[aria-checked="true"] { border-color: var(--stage); background: color-mix(in srgb, var(--stage) 10%, var(--bg)); color: var(--ink); }
.sp-prose { font: 400 calc(var(--fs) * .92)/1.7 var(--serif); }
.sp-prose h2, .sp-prose h3, .sp-prose h4 { margin: 1.4em 0 .4em; font-weight: 500; line-height: 1.25; }
.sp-prose p, .sp-prose ul, .sp-prose ol, .sp-prose blockquote { margin: 0 0 .9em; }
.sp-prose blockquote { padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--ink-2); font-style: italic; }
.sp-prose a { color: var(--accent); }
.sp-prose code { padding: 1px 5px; border-radius: 5px; background: var(--chip); font: 400 .85em var(--mono); }
.sp-check { display: inline-block; width: .8em; height: .8em; margin-right: .4em; border: 1.5px solid var(--muted); border-radius: 3px; vertical-align: -.05em; }
.sp-check.is-done { border-color: var(--accent); background: var(--accent); }

/* Meta panel (tags, collections, related) */
.sp-meta-grid { display: grid; gap: 1.2rem; }
.sp-related > span, .sp-meta-grid legend { display: block; margin-bottom: .4rem; color: var(--muted); font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sp-check-list { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.sp-check-chip { position: relative; }
.sp-check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sp-check-chip span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 999px; font: 500 13px var(--sans); color: var(--ink-2); cursor: pointer; }
.sp-check-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.sp-check-chip input:checked + span::before { content: "✓"; margin-right: .35rem; color: var(--accent); }
.sp-check-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-rel-list { display: grid; gap: 2px; margin: 0 0 .4rem; padding: 0; list-style: none; }
.sp-rel-list li { display: flex; align-items: center; gap: .3rem; }
.sp-rel-open { display: flex; flex: 1; align-items: center; gap: .5rem; min-width: 0; padding: .4rem .5rem; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 500 14px var(--sans); text-align: left; cursor: pointer; }
.sp-rel-open:hover { background: var(--sp-hover); }
.sp-kind-dot { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--chip); color: var(--accent); }
.sp-kind-dot .sp-i { width: 15px; height: 15px; }

/* ---------- forms ---------- */
.sp-form { display: grid; gap: 1rem; }
.sp-field { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.sp-field > span:first-child, .sp-field > legend { color: var(--ink-2); font: 500 13px var(--sans); }
.sp-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .sp-field textarea, .sp-field select, .sp-textarea {
  width: 100%; min-height: 42px; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--sans); outline: 0; transition: border-color .18s; }
.sp-field textarea, .sp-textarea { resize: vertical; }
.sp-field input:focus, .sp-field textarea:focus, .sp-field select:focus, .sp-textarea:focus { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.sp-field small { font: 400 12px var(--sans); }
.sp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .sp-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.sp-form-msg { min-height: 1.2em; margin: -.3rem 0 0; color: #B3261E; font: 400 13.5px/1.4 var(--sans); }
[data-theme="night"] .sp-form-msg { color: #FF9C8F; }
.sp-form-msg.is-ok { color: var(--sp-good); }
.sp-form-msg:empty { display: none; }
.sp-textarea { min-height: 140px; font-family: var(--serif); font-size: 17px; line-height: 1.6; }

/* ---------- dialogs ---------- */
.sp-dialog { width: min(480px, 100vw - 24px); max-height: min(88vh, 860px); margin: auto; padding: 1.3rem 1.4rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-block); background: var(--bg); color: var(--ink); box-shadow: 0 30px 90px rgb(0 0 0 / .3); overflow: auto; overscroll-behavior: contain; }
.sp-dialog.is-wide { width: min(680px, 100vw - 24px); }
.sp-dialog::backdrop { background: rgb(12 11 10 / .5); }
.sp-dialog[open] { animation: sp-in .2s var(--ease); }
@keyframes sp-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.sp-dialog-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.sp-dialog-head h2 { margin: 0; font: 400 24px/1.2 var(--serif); }
.sp-dialog-head > .sp-icon-btn { margin-left: auto; }
.sp-dialog-head > .sp-muted { margin-left: auto; font: 400 12.5px var(--sans); }
.sp-dialog-head > .sp-muted + .sp-icon-btn { margin-left: 0; }
.sp-confirm h2 { margin: 0 0 .5rem; font: 400 22px/1.25 var(--serif); }
.sp-confirm p { margin: 0 0 1.2rem; color: var(--ink-2); font: 400 15px/1.5 var(--sans); }
.sp-capture-tabs { margin-bottom: 1.2rem; }
.sp-preview { display: flex; gap: .9rem; align-items: center; padding: .6rem; border: 1px solid var(--line); border-radius: 14px; background: var(--sp-card); }
.sp-preview > img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; flex: none; }
.sp-preview > span { display: grid; gap: .15rem; min-width: 0; font: 400 13px/1.35 var(--sans); }
.sp-preview strong { font: 500 15px/1.3 var(--serif); }
.sp-preview-site { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.sp-preview-state { min-height: 1em; margin: -.4rem 0 0; font: 400 13px/1.4 var(--sans); }
.sp-preview-state:empty { display: none; }
.sp-seg-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.sp-seg-pick label { position: relative; }
.sp-seg-pick input { position: absolute; opacity: 0; }
.sp-seg-pick span { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; font: 500 13.5px var(--sans); cursor: pointer; }
.sp-seg-pick input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sp-seg-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-covers { display: flex; flex-wrap: wrap; gap: .5rem; }
.sp-cover-opt { position: relative; width: 44px; height: 32px; border-radius: 10px; cursor: pointer; }
.sp-cover-opt input { position: absolute; opacity: 0; }
.sp-cover-opt:has(input:checked) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.sp-cover-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.sp-pick-list { display: grid; gap: 2px; max-height: 50vh; margin: .8rem 0; padding: 0; overflow: auto; list-style: none; }
.sp-pick-row { display: flex; align-items: center; gap: .7rem; padding: .45rem .5rem; border-radius: 10px; cursor: pointer; font: 400 14px var(--sans); }
.sp-pick-row:hover { background: var(--sp-hover); }
.sp-pick-row input { width: 17px; height: 17px; accent-color: var(--accent); }
.sp-pick-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.sp-pick-empty { padding: 1rem .5rem; font: 400 14px var(--sans); }

/* Item sheet */
.sp-sheet { display: grid; gap: 1rem; }
.sp-sheet .sp-dialog-head { margin-bottom: 0; }
.sp-sheet-media { overflow: hidden; border-radius: 14px; background: var(--chip); aspect-ratio: 16 / 9; }
.sp-sheet-media img, .sp-sheet-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.sp-sheet-title { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 26px/1.2 var(--serif); }
.sp-sheet-link { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: -.4rem 0 0; font: 500 14px var(--sans); }
.sp-sheet-link a { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent); }
.sp-sheet-link .sp-i { width: 15px; height: 15px; }
.sp-quote-input { font-family: var(--serif) !important; font-size: 19px !important; line-height: 1.45 !important; }
.sp-status-seg { display: inline-flex; flex-wrap: wrap; width: fit-content; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.sp-status-seg button { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: 0 .9rem; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 500 13px var(--sans); cursor: pointer; }
.sp-status-seg button .sp-i { width: 14px; height: 14px; }
.sp-status-seg button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.sp-status-seg button[aria-checked="true"][data-status="completed"] { background: var(--sp-good); color: #fff; }

/* ---------- journeys ---------- */
.sp-journey-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.1rem; }
.sp-journey { display: grid; align-content: start; gap: .6rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--r-block); background: var(--bg); cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sp-journey:hover { transform: translateY(-2px); box-shadow: var(--sp-shadow); }
.sp-journey-top { display: flex; align-items: center; justify-content: space-between; }
.sp-journey-top .sp-muted { display: inline-flex; align-items: center; gap: .3rem; font: 400 12.5px var(--sans); }
.sp-journey-top .sp-i { width: 14px; height: 14px; }
.sp-journey h3 { margin: 0; font: 500 21px/1.22 var(--serif); }
.sp-progress { display: flex; align-items: center; gap: .7rem; font: 400 12.5px var(--sans); }
.sp-progress .sp-bar { flex: 1; }
.sp-progress.is-large .sp-bar { height: 10px; }
.sp-progress.is-large strong { font: 400 26px/1 var(--serif); min-width: 3ch; text-align: right; }
.sp-next { margin: 0; overflow: hidden; color: var(--ink-2); font: 400 13.5px var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.sp-next.is-done { display: inline-flex; align-items: center; gap: .3rem; color: var(--sp-good); }
.sp-next .sp-i { width: 15px; height: 15px; }
.sp-journey-progress { max-width: 40rem; margin: -.4rem 0 1.6rem; }
.sp-journey-progress .sp-muted { margin: .5rem 0 0; font: 400 14px var(--sans); }
.sp-steps { counter-reset: step; }
.sp-step { gap: .5rem; padding: .35rem .3rem .35rem .3rem; }
.sp-step .sp-row-main { padding: .3rem 0; }
.sp-step-status { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 50%; background: var(--bg); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.sp-step-status:hover { border-color: var(--accent); }
.sp-step-status .sp-i { width: 15px; height: 15px; stroke-width: 2.4; }
.sp-half { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.sp-step.is-in_progress .sp-step-status { border-color: var(--accent); }
.sp-step.is-completed .sp-step-status { border-color: var(--sp-good); background: var(--sp-good); }
.sp-step.is-completed .sp-step-title { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.sp-step-num { width: 1.4rem; color: var(--muted); font: 400 12px var(--mono); text-align: center; }
.sp-step-title { display: block; padding: 0; overflow: hidden; border: 0; background: none; color: var(--ink); font: 500 16px/1.3 var(--serif); text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
span.sp-step-title { cursor: default; white-space: normal; }
button.sp-step-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-step-state { font-size: 12px !important; }
.sp-step.is-flash { animation: sp-flash 1.4s ease; }
@keyframes sp-flash { 30% { box-shadow: 0 0 0 3px var(--accent); } }
.sp-add-step { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.sp-add-step .sp-search-field { flex: 1 1 320px; }
.sp-reflect textarea { width: 100%; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--sp-card); color: var(--ink); outline: 0; }

/* ---------- inspiration ---------- */
.sp-masonry { columns: 3 260px; column-gap: 1.1rem; }
.sp-masonry > .sp-card { break-inside: avoid; margin-bottom: 1.1rem; }
.sp-grid.is-faves { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }

/* ---------- settings ---------- */
.sp-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
@media (max-width: 1000px) { .sp-settings { grid-template-columns: minmax(0, 1fr); } }
.sp-avatar-edit { display: flex; align-items: center; gap: 1rem; }
.sp-avatar-edit > div { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.sp-avatar-edit small { flex-basis: 100%; }
.sp-field .sp-muted { font: 400 15px var(--sans); }
.sp-sub-h { margin: .6rem 0 0; font: 500 15px var(--sans); }

/* Interest and intent pickers (onboarding + settings) */
.sp-chip-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.sp-pick-chip { position: relative; }
.sp-pick-chip input { position: absolute; opacity: 0; }
.sp-pick-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font: 500 14px var(--sans); cursor: pointer; transition: all .2s var(--ease); }
.sp-pick-chip span:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.sp-pick-chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sp-pick-chip input:focus-visible + span, .sp-intent input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-chip-pick.is-big .sp-pick-chip span { min-height: 46px; padding: 0 1.2rem; font-size: 15px; }
.sp-intent-pick { display: grid; gap: .45rem; }
.sp-intent { position: relative; }
.sp-intent input { position: absolute; opacity: 0; }
.sp-intent span { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font: 400 15px/1.35 var(--sans); cursor: pointer; transition: all .2s var(--ease); }
.sp-intent span::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 6px; }
.sp-intent input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.sp-intent input:checked + span::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.sp-intent-pick.is-big .sp-intent span { min-height: 54px; font-size: 16px; }

/* ---------- auth + onboarding ---------- */
.sp-auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 440px); gap: clamp(2rem, 6vw, 6rem); align-items: center; width: min(1180px, 100% - 2 * var(--gutter)); min-height: calc(100svh - 58px); margin: 0 auto; padding: 3rem 0; }
.sp-auth-title { margin: 0; font: 400 clamp(38px, 5.4vw, 64px)/1.03 var(--serif); letter-spacing: -.02em; }
.sp-auth-title em { color: var(--accent); }
.sp-auth-lede { max-width: 34rem; margin: 1.2rem 0 1.6rem; color: var(--ink-2); font: 400 17px/1.6 var(--sans); }
.sp-auth-points { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; font: 500 15px var(--sans); }
.sp-auth-points li { display: flex; align-items: center; gap: .7rem; }
.sp-auth-points .sp-i { color: var(--accent); }
.sp-auth-card { padding: clamp(1.4rem, 4vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--r-block); background: var(--sp-card); box-shadow: var(--sp-shadow); }
.sp-auth-card h2 { margin: 0 0 .4rem; font: 400 26px/1.2 var(--serif); }
.sp-auth-card > p.sp-muted { margin: 0 0 1.2rem; font: 400 14.5px/1.5 var(--sans); }
.sp-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 1.4rem; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.sp-auth-tabs a { display: grid; place-items: center; min-height: 38px; border-radius: 999px; color: var(--ink-2); font: 500 14px var(--sans); text-decoration: none; }
.sp-auth-tabs a[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.sp-auth-switch { margin: 1.1rem 0 0; text-align: center; font: 500 14px var(--sans); }
.sp-auth-switch a { color: var(--accent); }
.sp-auth-sent { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.sp-auth-sent p { margin: 0; color: var(--ink-2); font: 400 15px/1.55 var(--sans); }
.sp-auth .sp-small { margin: 1rem 0 0; text-align: center; }
@media (max-width: 820px) { .sp-auth { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2rem 0 3rem; } .sp-auth-points { display: none; } .sp-auth-lede { margin-bottom: 0; } }
.sp-onboard { display: grid; place-items: center; min-height: calc(100svh - 58px); padding: 2rem var(--gutter); background: var(--bg); }
.sp-onboard-card { width: min(640px, 100%); }
.sp-onboard-title { margin: 0 0 .5rem; font: 400 clamp(34px, 5vw, 54px)/1.05 var(--serif); letter-spacing: -.02em; }
.sp-onboard-title em { color: var(--accent); }
.sp-onboard-card > .sp-muted { margin: 0 0 1.6rem; font: 400 16px var(--sans); }
.sp-onboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.sp-onboard-actions > span { display: flex; gap: .5rem; }
.sp-onboard-actions .sp-link-btn { color: var(--muted); }

/* ---------- toasts ---------- */
.sp-toasts { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 200; display: grid; gap: .5rem; justify-items: center; width: min(460px, 100vw - 24px); transform: translateX(-50%); pointer-events: none; }
.sp-toast { display: flex; align-items: center; gap: 1rem; max-width: 100%; padding: .7rem .8rem .7rem 1.1rem; border-radius: 14px; background: var(--pop); color: var(--pop-ink); box-shadow: 0 12px 40px rgb(0 0 0 / .25); font: 500 14px/1.4 var(--sans); pointer-events: auto; animation: sp-toast-in .25s var(--ease); }
.sp-toast.is-error { background: #8C1D18; color: #fff; }
.sp-toast button { flex: none; padding: .3rem .7rem; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; background: transparent; color: inherit; font: 600 13px var(--sans); cursor: pointer; }
.sp-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes sp-toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .sp *, .sp-dialog, .sp-toast { animation: none !important; transition: none !important; }
  .sp-card:hover, .sp-coll:hover, .sp-journey:hover, .sp-quick-btn:hover { transform: none; }
}
@media (max-width: 600px) {
  .sp-dialog, .sp-dialog.is-wide { width: 100vw; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; padding: 1.1rem 1rem 1.2rem; }
  .sp-head { margin-bottom: 1.2rem; }
  .sp-stats dd { font-size: 26px; }
  .sp-quick-btn { flex: 1 1 calc(50% - .5rem); justify-content: flex-start; }
  .sp-seg { margin-left: 0; }
  .sp-select select { max-width: 160px; }
}
/* The page area and the borderless editor fields don't need a focus ring (the caret shows focus). */
.sp-main:focus, .sp-main:focus-visible, .sp-editor-title:focus-visible, .sp-editor-desc:focus-visible, .sp-editor-body:focus-visible, .sp-sheet-title:focus-visible { outline: none; }

/* ---------- My Universe (assets/space-universe.js) ---------- */
.sp-universe-cta { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; padding: 1rem 1.3rem; border-radius: var(--r-block); background: #000; color: #F4EEE4; text-decoration: none; transition: transform .3s var(--ease); }
.sp-universe-cta:hover { transform: translateY(-2px); }
.sp-universe-cta > span:nth-child(2) { display: grid; flex: 1; gap: .15rem; font: 400 14px/1.45 var(--sans); color: rgba(244, 238, 228, .72); }
.sp-universe-cta strong { color: #F4EEE4; font: 500 19px/1.2 var(--serif); }
.sp-universe-mark { display: grid; flex: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #16171F; color: #DCEF6A; }
.sp-universe-mark .sp-i { width: 24px; height: 24px; }
.sp-universe-go { flex: none; color: #DCEF6A; font: 500 14px var(--sans); }
@media (max-width: 560px) { .sp-universe-go { display: none; } }

/* The journey covers the whole screen, header included, on pure black. */
html.u-open, html.u-open body { overflow: hidden; }
.sp-universe { position: fixed; inset: 0; z-index: 90; background: #000; }
.u-loading { display: grid; place-items: center; height: 100%; }
.u { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #000; color: #F4EEE4; outline: none; scrollbar-width: none; }
.u::-webkit-scrollbar { display: none; }
.u-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.u-track { margin-top: -100svh; pointer-events: none; }
.u-bg, .u-fg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.u-bg.is-off { display: none; }
.u-fg { cursor: grab; touch-action: pan-y; }
.u[data-phase="tunnel"] .u-fg { cursor: default; }
.u-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 3vw, 32px); pointer-events: none; }
.u-mark { margin: 0; color: rgba(244, 238, 228, .62); font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.u-icons { display: flex; gap: 6px; pointer-events: auto; }
.u-ico, .u-return { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(244, 238, 228, .16); border-radius: 50%; background: #000; color: rgba(244, 238, 228, .85); cursor: pointer; transition: border-color .2s, color .2s; }
.u-ico:hover, .u-return:hover { border-color: rgba(244, 238, 228, .5); color: #fff; }
.u svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.u button:focus-visible, .u a:focus-visible { outline: 2px solid #DCEF6A; outline-offset: 3px; }
.u-tip { position: absolute; left: 50%; bottom: 30px; margin: 0; color: rgba(255, 255, 255, .62); font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; text-shadow: 0 0 10px #000; }
.u-tip.is-on { opacity: 1; transform: translate(-50%, 0); }
.u-return { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); }
.u-label { position: absolute; top: 0; left: 0; max-width: 260px; padding: 5px 9px; border-radius: 8px; background: #000; color: #F4EEE4; font: 500 12.5px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; border: 1px solid rgba(244, 238, 228, .14); }
.u-card { position: absolute; left: 50%; bottom: 24px; width: min(420px, calc(100% - 32px)); padding: 16px 18px 16px; border: 1px solid rgba(244, 238, 228, .16); border-radius: 18px; background: #000; transform: translateX(-50%); }
.u-card h2 { margin: 6px 36px 4px 0; font: 400 21px/1.22 var(--serif); overflow-wrap: anywhere; }
.u-kind { color: rgba(244, 238, 228, .55); font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.u-by { margin: 0; color: rgba(244, 238, 228, .6); font: 400 13px var(--sans); }
.u-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(244, 238, 228, .7); cursor: pointer; }
.u-x:hover { color: #fff; }
.u-links { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; font: 400 12px var(--sans); color: rgba(244, 238, 228, .5); align-items: center; }
.u-links button { padding: 4px 9px; border: 1px solid rgba(244, 238, 228, .16); border-radius: 999px; background: transparent; color: rgba(244, 238, 228, .82); font: 500 12px var(--sans); cursor: pointer; }
.u-links button:hover { border-color: rgba(244, 238, 228, .45); color: #fff; }
.u-acts { display: flex; gap: 6px; margin-top: 14px; }
.u-acts > * { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid rgba(244, 238, 228, .22); border-radius: 999px; background: transparent; color: #F4EEE4; font: 500 13px var(--sans); text-decoration: none; cursor: pointer; }
.u-acts .is-primary { border-color: #F4EEE4; background: #F4EEE4; color: #000; }
.u-acts svg { width: 15px; height: 15px; }
.u-samples { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.u-sample { position: absolute; top: 50%; left: 50%; max-width: 260px; color: rgba(255, 255, 255, .92); font: 400 15px/1.3 var(--serif); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; visibility: hidden; will-change: transform, opacity; text-shadow: 0 0 10px #000, 0 0 2px #000; }
.u-sample span { display: block; margin-bottom: 4px; color: rgba(255, 255, 255, .5); font: 400 9px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
/* In the tunnel: nothing over the view but a quiet way out. */
.u[data-phase="tunnel"] .u-icons [data-u-list] { display: none; }
.u[data-phase="tunnel"] .u-ico { border-color: transparent; background: transparent; color: rgba(255, 255, 255, .45); }
.u[data-phase="tunnel"] .u-ico:hover { color: #fff; }
.u[data-phase="tunnel"] .u-empty { display: none; }
.u-empty { position: absolute; left: 50%; bottom: 96px; width: min(360px, calc(100% - 32px)); text-align: center; transform: translateX(-50%); }
.u-empty p { margin: 0 0 12px; color: rgba(244, 238, 228, .72); font: 400 14px/1.5 var(--sans); }
.u-empty button { min-height: 36px; padding: 0 16px; border: 1px solid #F4EEE4; border-radius: 999px; background: #F4EEE4; color: #000; font: 500 13px var(--sans); cursor: pointer; }
.u-list { position: absolute; inset: 70px clamp(12px, 3vw, 32px) 16px auto; width: min(420px, calc(100% - 24px)); overflow: auto; padding: 16px 18px; border: 1px solid rgba(244, 238, 228, .16); border-radius: 18px; background: #000; overscroll-behavior: contain; }
.u-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.u-list h2 { margin: 0; font: 400 20px var(--serif); }
.u-list ul { margin: 0; padding: 0; list-style: none; }
.u-list li { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid rgba(244, 238, 228, .1); }
.u-list li button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; color: #F4EEE4; font: 500 14.5px var(--sans); text-align: left; cursor: pointer; }
.u-list li button span { color: rgba(244, 238, 228, .5); font-size: 12px; font-weight: 400; }
.u-list li button:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.u-list small { color: rgba(244, 238, 228, .55); font: 400 12.5px/1.45 var(--sans); }
@media (max-width: 600px) {
  .u-sample { font-size: 14px; max-width: 200px; }
  .u-list { inset: 64px 12px 12px 12px; width: auto; }
}

/* ---------- Guest mode ---------- */
.sp-ghost { display: grid; gap: .7rem; margin-top: 1.3rem; }
.sp-or { display: flex; align-items: center; gap: .8rem; color: var(--muted); font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sp-or::before, .sp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sp-ghost-btn { border-style: dashed; }
.sp-ghost-btn:hover { border-style: solid; }
.sp-ghost-text { margin: 0; color: var(--muted); font: 400 13px/1.5 var(--sans); text-align: center; }
.sp-keep-link { display: flex; align-items: center; gap: .6rem; margin: 0 .2rem; padding: .55rem .75rem; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; color: var(--accent); font: 500 13.5px var(--sans); text-decoration: none; }
.sp-keep-link:hover { border-style: solid; background: var(--accent-soft); }
.sp-keep-link .sp-i { width: 16px; height: 16px; }
.sp-ghost-note { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.2rem; padding: .55rem .6rem .55rem .7rem; border: 1px dashed var(--line); border-radius: 14px; font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.sp-ghost-note p { flex: 1; margin: 0; }
.sp-ghost-note a { color: var(--accent); font-weight: 500; white-space: nowrap; }
.sp-ghost-mark { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--chip); color: var(--ink-2); }
.sp-ghost-mark .sp-i { width: 16px; height: 16px; }
.sp-keep-card { border-style: dashed; }
@media (max-width: 900px) { .sp-keep-link { display: none; } }
@media (max-width: 560px) { .sp-ghost-note { flex-wrap: wrap; } }