/* Scorpio mode's own page — extracted out of vocabulary.css's Personal
   Room drawer styles (was an accordion nested inside the Library page).
   mockup/Space.dc.html — normal page background, white surface cards,
   same tokens as every other page; the page used to run its own
   garnet/rose palette (--bg/--surface/--ink all repointed, a rose top
   border on the personal-body panel) which read as a separate, locked-
   off room rather than a page of this site — removed entirely, so this
   page now just falls through to :root's real tokens in both themes. */
.scorpio-page { background: var(--bg); }

/* mockup/Space.dc.html header: eyebrow → h1 → tagline, with the "Free
   during preview" chip at the right — replaces the old "SUBSCRIBER
   SPACE" pill + feature-chip row + italic footnote. */
.scorpio-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.scorpio-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.scorpio-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.scorpio-head-top h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.1; color: var(--ink); }
.scorpio-tagline { margin: 0; font-size: 16px; color: var(--ink-dim); max-width: 52ch; }
.scorpio-preview-chip {
  flex: none; padding: 4px 10px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  font-size: 12px; font-weight: 700;
}

.voc-personal-body { margin-top: 24px; display: flex; flex-direction: column; gap: 28px; }
.voc-personal-note {
  margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); font-style: italic;
}

/* mockup/Space.dc.html — "Saved charts" then "Your working material",
   each a plain section (h2 + content), not its own card */
.sp-section { display: flex; flex-direction: column; gap: 14px; }
.sp-section-h { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); }

.sp-start-card {
  display: flex; flex-direction: column; gap: 8px; align-self: flex-start;
  min-height: 120px; box-sizing: border-box; justify-content: center;
  padding: 20px 22px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid var(--line);
}
.sp-start-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.sp-start-text { font-size: 14px; color: var(--ink); }
.sp-start-btn { align-self: flex-start; margin-top: 4px; text-decoration: none; }

.sp-chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.sp-chart-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s var(--ease-soft), transform .15s var(--ease-soft);
}
.sp-chart-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-1px); }
.sp-chart-card.is-default { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.sp-chart-card[hidden] { display: none; }
.sp-chart-badge {
  align-self: flex-start; padding: 2px 8px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.sp-chart-link { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; padding-right: 26px; }
.sp-chart-link b { font-size: 17px; font-weight: 700; }
.sp-chart-meta { font-size: 13px; color: var(--ink-faint); }
.sp-chart-evo { font-size: 13px; color: var(--ink-dim); }
.sp-chart-star {
  position: absolute; top: 14px; right: 14px;
  width: 24px; height: 24px; line-height: 22px; text-align: center;
  font-size: 14px; cursor: pointer; border-radius: 50%;
  background: none; border: 1px solid transparent; color: var(--ink-faint);
  transition: color .15s var(--ease-soft), border-color .15s var(--ease-soft);
}
.sp-chart-star:hover { color: #d8a300; border-color: color-mix(in srgb, #d8a300 35%, transparent); }
.sp-chart-star.is-fav { color: #d8a300; }
.sp-new-chart-card {
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; padding: 20px; border-radius: var(--radius-lg);
  border: 1px dashed var(--control); color: var(--ink-dim);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: border-color .15s var(--ease-soft), color .15s var(--ease-soft);
}
.sp-new-chart-card:hover { border-color: var(--accent); color: var(--accent); }
.sp-all-charts-link { display: inline-block; margin-top: 12px; }

/* "Your working material" — one flat 3-column grid, one card level each */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sp-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.sp-card-head { display: flex; align-items: center; gap: 10px; }
.sp-card-icon {
  flex: none; width: 32px; height: 32px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--surface-2); color: var(--ink-dim);
}
.sp-card-icon[data-kind="water"] { background: color-mix(in srgb, var(--growth) 12%, var(--surface-2)); color: var(--growth); }
.sp-card-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.sp-card-blurb { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-body, var(--ink-dim)); }
.sp-card-body { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 6px; }
/* flex-direction set explicitly (not just the display:flex default) so
   it wins over .sp-card-body's column direction when both classes land
   on the same element (Year ahead, The older texts) */
.sp-card-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.sp-card-btn {
  font: inherit; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer;
  min-height: 40px; padding: 0 16px; border: none; border-radius: var(--radius-sm);
  background: var(--accent); transition: background .15s var(--ease-soft);
}
.sp-card-btn:hover { background: var(--accent-hover); }
.sp-card-btn:disabled { opacity: .5; cursor: not-allowed; }
/* one action style everywhere except the Start-here card's own primary
   button — a plain accent text link with its own → already in the label */
.sp-card-link {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer;
  background: none; border: none; padding: 0; text-decoration: none;
}
.sp-card-link:hover { color: var(--accent-hover); }
.sp-preview-box {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg);
}
.sp-preview-meta { font-size: 13px; color: var(--ink-faint); }
.sp-preview-text { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-preview-link { display: block; font-size: 13px; color: var(--ink-dim); text-decoration: none; }
.sp-preview-link:hover { color: var(--accent); }
.sp-preview-hint { font-size: 13px; color: var(--ink-faint); }
.sp-card-full { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.sp-card-full[hidden] { display: none; }
.sp-noted-group + .sp-noted-group { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-soft); }

.sp-data-link { align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; }
.sp-data-link:hover { color: var(--accent); }

/* the access funnel's "next step" marker — exactly one card carries it
   at a time */
.voc-funnel-next {
  margin-left: auto; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 12px; letter-spacing: .06em;
  background: color-mix(in srgb, var(--scorpio) 16%, transparent);
  color: var(--scorpio-2);
}
.voc-personal-label {
  display: flex; align-items: center; margin-bottom: 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; color: var(--voc-kind, var(--growth));
}
.voc-personal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 8px; border-radius: 50%;
  font-family: var(--serif); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0;
  background: color-mix(in srgb, var(--voc-kind, var(--growth)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--voc-kind, var(--growth)) 30%, transparent);
  color: var(--voc-kind, var(--growth));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--voc-kind, var(--growth)) 7%, transparent);
}
.voc-personal-blurb {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim);
}
/* Year Ahead — reuses .alch-save's Scorpio-tinted button styling (see
   style.css) so it reads as part of the same "deeper" premium register
   as Alchemize, rather than inventing a third button language */
.voc-year-ahead-chart-label {
  display: flex; flex-direction: column; gap: 3px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint);
  margin-bottom: 8px;
}
.voc-year-ahead-chart-label select {
  font: inherit; font-size: 12.5px; width: 100%; box-sizing: border-box;
  padding: 7px 8px; border-radius: var(--radius-sm); background: var(--voc-paper);
  border: 1px solid color-mix(in srgb, var(--scorpio) 22%, var(--line));
  color: var(--ink);
}
.voc-year-ahead-chart-label select:focus {
  outline: none; border-color: var(--scorpio);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--scorpio) 14%, transparent);
}
.voc-year-ahead-row { display: flex; align-items: flex-end; gap: 8px; }
.voc-year-ahead-year-label {
  display: flex; flex-direction: column; gap: 3px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint);
}
.voc-year-ahead-year-label input {
  font: inherit; font-size: 12.5px; width: 72px; padding: 7px 8px;
  border-radius: var(--radius-sm); background: var(--voc-paper);
  border: 1px solid color-mix(in srgb, var(--scorpio) 22%, var(--line));
  color: var(--ink);
}
.voc-year-ahead-year-label input:focus {
  outline: none; border-color: var(--scorpio);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--scorpio) 14%, transparent);
}
.voc-year-ahead-btn { flex: 1 1 auto; text-align: center; }
.voc-year-ahead-status {
  margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--ink-faint);
}
.voc-year-ahead-status.is-done { color: var(--scorpio); }
.voc-year-ahead-status.is-error { color: #c0392b; }
.voc-personal-list { display: flex; flex-direction: column; gap: 5px; }
.voc-personal-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, var(--voc-kind, var(--growth)) 5%, var(--voc-paper));
  border: 1px solid color-mix(in srgb, var(--voc-kind, var(--growth)) 18%, var(--line));
  border-left: 3px solid color-mix(in srgb, var(--voc-kind, var(--growth)) 50%, transparent);
  transition: border-color .15s var(--ease-soft), transform .15s var(--ease-soft),
    box-shadow .15s var(--ease-soft);
}
.voc-personal-item:hover {
  border-color: color-mix(in srgb, var(--voc-kind, var(--growth)) 55%, var(--line));
  border-left-color: var(--voc-kind, var(--growth));
  transform: translateX(2px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--voc-kind, var(--growth)) 14%, transparent);
}
.voc-personal-pin { flex-direction: column; align-items: stretch; gap: 6px; cursor: default; }
.voc-personal-pin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.voc-personal-pin-title { color: var(--ink); text-decoration: none; }
.voc-personal-pin-title:hover { color: var(--voc-kind, var(--growth)); }
.voc-personal-pin-alch-title { color: var(--scorpio); }
.voc-personal-pin-actions { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.voc-personal-pin-toggle {
  font: inherit; font-size: 12px; color: var(--ink-faint); cursor: pointer;
  background: none; border: none; padding: 0;
}
.voc-personal-pin-toggle:hover { color: var(--voc-kind, var(--growth)); }
.voc-personal-pin-syn {
  display: block; font-size: 12px; line-height: 1.5; color: var(--ink-dim); font-style: italic;
  padding-top: 4px; border-top: 1px dashed var(--line-soft);
}
.voc-personal-pin-syn[hidden] { display: none; }
.voc-personal-go { font-size: 12px; color: var(--voc-kind, var(--growth)); white-space: nowrap; }
.voc-ask-del {
  font: inherit; font-size: 12px; margin-left: 10px; cursor: pointer;
  background: none; border: none; padding: 0; color: var(--ink-faint);
  text-decoration: underline; text-underline-offset: 2px;
}
.voc-ask-del:hover { color: var(--scorpio-2); }

/* a note: click the title to unfold it in place first (what you came
   here for), then a separate explicit link to jump to the chart/sky/
   combination it's actually about — not an immediate navigate-away */
.voc-personal-note { flex-direction: column; align-items: stretch; gap: 0; padding: 0; cursor: default; }
.voc-personal-note-toggle {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: none; border: none; padding: 9px 11px; color: var(--ink);
}
.voc-personal-note-title { flex: 1; min-width: 0; font-size: 13px; }
.voc-personal-note-toggle .voc-personal-fold {
  font-size: 12px; color: var(--ink-faint); transition: transform .2s var(--ease-soft);
}
.voc-personal-note.is-open .voc-personal-fold { transform: rotate(180deg); }
.voc-personal-note-body {
  padding: 8px 11px 11px; margin: 0 11px; border-top: 1px dashed var(--line-soft);
}
.voc-personal-note-body[hidden] { display: none; }
.voc-personal-note-body p {
  margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim);
  white-space: pre-wrap;
}
.voc-personal-more {
  display: inline-block; margin-top: 10px; font-size: 12px; color: var(--growth);
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--growth) 35%, transparent);
}

.voc-personal-chart-search {
  font: inherit; font-size: 12.5px; width: 100%; box-sizing: border-box;
  padding: 7px 10px; margin-bottom: 8px; border-radius: var(--radius-sm);
  background: var(--voc-paper); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--voc-kind, var(--growth)) 20%, var(--line));
}
.voc-personal-chart-search:focus {
  outline: none; border-color: var(--voc-kind, var(--growth));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--voc-kind, var(--growth)) 14%, transparent);
}
/* the chart list drops the colored pin/note tinting the other groups use —
   this list gets long, and a flat row (matching the chart-page sidebar's
   own saved-chart list) stays legible where the tinted style turns noisy */
.voc-personal-chart-list { max-height: 260px; overflow-y: auto; gap: 2px; }
.voc-personal-chart-row {
  gap: 8px; background: transparent; border: none; border-left: none;
  border-radius: var(--radius-sm); padding: 7px 8px;
}
.voc-personal-chart-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: none; transform: none; box-shadow: none;
}
.voc-personal-chart-row.is-default { background: color-mix(in srgb, #d8a300 8%, transparent); }
.voc-personal-chart-row[hidden] { display: none; }
.voc-personal-chart-empty[hidden] { display: none; }
.voc-personal-chart-link {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.voc-personal-default-btn {
  flex: none; width: 24px; height: 24px; line-height: 22px; text-align: center;
  font-size: 14px; cursor: pointer; border-radius: 50%;
  background: none; border: 1px solid transparent; color: var(--ink-faint);
  transition: color .15s var(--ease-soft), border-color .15s var(--ease-soft);
}
.voc-personal-default-btn:hover { color: #d8a300; border-color: color-mix(in srgb, #d8a300 35%, transparent); }
.voc-personal-default-btn.is-default { color: #d8a300; }
.voc-personal-chart-empty { font-size: 12px; color: var(--ink-faint); font-style: italic; padding: 6px 2px; }

/* the date+name pair was left an unstyled <div> when the name field was
   added — it defaulted to block layout instead of participating in this
   flex row properly, which is what was actually throwing "+ Log it" out
   of alignment with everything else here. align-items: flex-start pins
   every item (including the round button) to the same top edge instead
   of stretching or centering against whichever sibling happens to be
   tallest. */
.voc-journal-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.voc-journal-form-row {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 180px; min-width: 0;
}
.voc-journal-form input[type="date"] {
  font: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--voc-paper); border: 1px solid color-mix(in srgb, var(--water) 22%, var(--line));
  color: var(--ink); width: 100%; box-sizing: border-box;
}
.voc-journal-form-row input[type="text"] {
  font: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--voc-paper); border: 1px solid color-mix(in srgb, var(--water) 22%, var(--line));
  color: var(--ink); width: 100%; box-sizing: border-box;
}
.voc-journal-form > input[type="text"] {
  font: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--voc-paper); border: 1px solid color-mix(in srgb, var(--water) 22%, var(--line));
  color: var(--ink); flex: 2 1 220px; min-width: 0;
  align-self: stretch;
}
.voc-journal-form input:focus {
  outline: none; border-color: var(--water);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--water) 16%, transparent);
}
.voc-journal-form button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: var(--radius-pill); border: none;
  background: var(--water); color: #fff; flex: none;
  transition: background .15s var(--ease-soft), transform .15s var(--ease-soft);
}
.voc-journal-form button:hover { background: color-mix(in srgb, var(--water) 85%, #000); transform: translateY(-1px); }

/* each entry gets the same "paper item" treatment as the drawer's other
   lists (pins, notes, saved charts) — a colored left edge and a faint
   tint of --voc-kind (water, for this group), instead of the flat
   generic card it started as before this pass */
/* a journey, not a stack of cards: each entry's own colored left edge
   bridges into the next one's through the gap between them, so the
   whole list reads as one continuous thread running down through the
   Library rather than disconnected boxes — a small waypoint dot marks
   each entry along it. */
#voc-journal-list { position: relative; }
.voc-journal-entry {
  position: relative;
  padding: 11px 13px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--water) 5%, var(--voc-paper));
  border: 1px solid color-mix(in srgb, var(--water) 16%, var(--line));
  border-left: 3px solid color-mix(in srgb, var(--water) 45%, transparent);
  margin-bottom: 8px;
  transition: border-color .15s var(--ease-soft), box-shadow .15s var(--ease-soft);
}
.voc-journal-entry:hover {
  border-color: color-mix(in srgb, var(--water) 40%, var(--line));
  border-left-color: var(--water);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--water) 12%, transparent);
}
.voc-journal-entry:not(:last-child)::before {
  content: ""; position: absolute; left: -1px; bottom: -9px;
  width: 3px; height: 9px;
  background: color-mix(in srgb, var(--water) 30%, transparent);
}
.voc-journal-entry::after {
  content: ""; position: absolute; left: -1px; top: 19px;
  width: 5px; height: 5px; margin-left: -1px; border-radius: 50%;
  background: var(--water);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--water) 5%, var(--voc-paper));
}
.voc-journal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.voc-journal-head-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.voc-journal-fold-btn {
  flex: none; width: 20px; height: 20px; padding: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%; cursor: pointer;
  color: var(--ink-faint);
  transition: color .15s var(--ease-soft), background .15s var(--ease-soft);
}
.voc-journal-fold-btn:hover { color: var(--water); background: color-mix(in srgb, var(--water) 14%, transparent); }
.voc-journal-fold { display: inline-block; font-size: 12px; transition: transform .18s var(--ease-soft); }
.voc-journal-fold-btn[aria-expanded="true"] .voc-journal-fold { transform: rotate(180deg); }
/* the dateline: a diary page's own heading, not a UI timestamp — serif
   throughout, the given name (if any) carrying the weight, the entry
   number + date reduced to a small caption underneath it */
.voc-journal-heading { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.voc-journal-name {
  font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink);
}
.voc-journal-meta { display: flex; align-items: baseline; gap: 6px; }
.voc-journal-num {
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: var(--ink-faint); white-space: nowrap;
}
.voc-journal-date {
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: var(--ink-faint); text-decoration: none; white-space: nowrap;
}
.voc-journal-date:hover { color: var(--water); text-decoration: underline; }
.voc-journal-gist {
  display: flex; align-items: center; gap: 7px; margin-top: 6px;
  padding-left: 24px; font-size: 12px; color: var(--ink-dim);
}
.voc-journal-gist[hidden] { display: none; }
.voc-journal-gist-glyph {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  font-family: var(--serif); font-size: 12px; color: var(--water);
  background: color-mix(in srgb, var(--water) 16%, transparent);
}
.voc-journal-gist-words {
  font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voc-journal-body[hidden] { display: none; }
/* lines up with the gist row's own left inset (past the fold caret),
   so the reading column stays put whether an entry is folded or open —
   one divider (before the scan results) is enough; a second one between
   the head and the text just added weight without adding meaning */
.voc-journal-body { margin-top: 6px; padding-left: 24px; }
/* the entry itself, set like a page, not a UI string — a serif body
   text at a size meant to be read, and an opening mark (the classic
   diary/quote convention) instead of a plain paragraph */
.voc-journal-text {
  position: relative;
  margin: 0 0 8px; padding-left: 14px;
  font-family: var(--serif); font-size: 15px; line-height: 1.65; color: var(--ink);
}
.voc-journal-text::before {
  content: "“"; position: absolute; left: -3px; top: -2px;
  font-size: 22px; color: color-mix(in srgb, var(--water) 55%, var(--ink-faint));
}
/* a quiet "…" in place of a standing trash icon — options (rename,
   delete, clear-all) live behind it instead of cluttering the entry
   itself, and the same spot is where future entry actions belong */
.voc-journal-more-wrap { position: relative; flex: none; }
.voc-journal-more {
  width: 22px; height: 22px; line-height: 18px; text-align: center;
  font-size: 13px; letter-spacing: -1px; color: var(--ink-faint); cursor: pointer;
  background: none; border: none; border-radius: 50%;
  transition: color .15s var(--ease-soft), background .15s var(--ease-soft);
}
.voc-journal-more:hover, .voc-journal-more[aria-expanded="true"] {
  color: var(--water); background: color-mix(in srgb, var(--water) 14%, transparent);
}
.voc-journal-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 3;
  display: flex; flex-direction: column; min-width: 148px; padding: 5px;
  border-radius: var(--radius-sm); background: var(--voc-paper-2);
  border: 1px solid color-mix(in srgb, var(--water) 20%, var(--line));
  box-shadow: 0 6px 18px color-mix(in srgb, #000 18%, transparent);
}
.voc-journal-menu[hidden] { display: none; }
.voc-journal-menu-item {
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  padding: 7px 9px; border-radius: 5px; color: var(--ink-dim);
  background: none; border: none;
  transition: background .12s var(--ease-soft), color .12s var(--ease-soft);
}
.voc-journal-menu-item:hover { background: color-mix(in srgb, var(--water) 12%, transparent); color: var(--ink); }
.voc-journal-menu-item.is-danger:hover { background: color-mix(in srgb, #c0392b 12%, transparent); color: #c0392b; }
.voc-journal-menu-divider { height: 1px; margin: 4px 2px; background: var(--line-soft); }

/* past the first 5, the rest fold away into one quiet "view more" line
   rather than a wall of entries — opening it reveals month-by-month
   chapters, each itself closed by default */
.voc-journal-history { margin-top: 4px; }
.voc-journal-history > summary {
  list-style: none; cursor: pointer; padding: 7px 2px;
  font-size: 12px; color: var(--ink-faint); font-style: italic;
  transition: color .15s var(--ease-soft);
}
.voc-journal-history > summary::-webkit-details-marker { display: none; }
.voc-journal-history > summary:hover { color: var(--water); }
.voc-journal-history > summary .mini-cap {
  font-style: normal; font-size: 12px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .06em; margin-left: 4px;
}
.voc-journal-chapter {
  margin: 6px 0 6px 2px; padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--water) 25%, transparent);
}
.voc-journal-chapter > summary {
  list-style: none; cursor: pointer; padding: 4px 0;
  font-family: var(--serif); font-size: 12.5px; color: var(--ink-dim);
  transition: color .15s var(--ease-soft);
}
.voc-journal-chapter > summary::-webkit-details-marker { display: none; }
.voc-journal-chapter > summary:hover { color: var(--water); }
.voc-journal-chapter > summary .mini-cap {
  font-family: var(--sans, inherit); font-size: 12px; color: var(--ink-faint);
  margin-left: 4px;
}
.voc-journal-chapter .voc-journal-entry:first-of-type { margin-top: 8px; }
.voc-journal-scan {
  font: inherit; font-size: 12px; color: var(--ink-faint); cursor: pointer;
  background: none; border: none; padding: 0;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
}
.voc-journal-scan:hover:not(:disabled) { color: var(--water); }
.voc-journal-scan:disabled { cursor: wait; opacity: .6; }
.voc-journal-scan-hint { margin: 0; font-size: 12px; color: var(--ink-faint); font-style: italic; }
.voc-journal-scan-result { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.voc-scan-row {
  margin: 0 0 2px; padding: 5px 7px; border-radius: 6px;
  font-size: 12px; color: var(--ink-dim); cursor: pointer;
  transition: background .15s var(--ease-soft), color .15s;
}
.voc-scan-row:hover, .voc-scan-row:focus-visible {
  background: color-mix(in srgb, var(--water) 10%, var(--voc-paper));
  color: var(--ink);
}
.voc-scan-row.is-selected {
  background: color-mix(in srgb, var(--water) 16%, var(--voc-paper)); color: var(--ink);
}
.voc-scan-row.is-error, .voc-scan-row.is-empty { cursor: default; margin: 0 0 4px; padding: 0; }
.voc-scan-row.is-error { color: #c0392b; }
.voc-scan-orb { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin-left: 4px; }
/* the row whose own written synthesis shares the most words with the
   journal note itself — a lexical best-guess at "which of these is what
   you were actually describing," not a claim of certainty. A soft
   breathing glow rather than a solid fill — it should read as "this one
   is alive/worth a look," not as a flat selected-state block. */
.voc-scan-row.is-likely {
  background: transparent;
  border-left: 2px solid var(--growth);
  padding-left: 5px;
  color: var(--ink);
  animation: voc-likely-glow 2.6s ease-in-out infinite;
}
.voc-scan-row.is-likely:hover { background: color-mix(in srgb, var(--growth) 12%, transparent); }
.voc-scan-row.is-likely.is-selected {
  background: color-mix(in srgb, var(--growth) 18%, var(--surface-3));
}
@keyframes voc-likely-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--growth) 0%, transparent); }
  50% { box-shadow: 0 0 9px 1px color-mix(in srgb, var(--growth) 25%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .voc-scan-row.is-likely { animation: none; } }
/* a small planet, gently drifting in place — "this one moved into view" */
.voc-scan-likely {
  margin-right: 3px; display: inline-block;
  animation: voc-planet-drift 3.4s ease-in-out infinite;
}
@keyframes voc-planet-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1.5px) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) { .voc-scan-likely { animation: none; } }
.voc-scan-detail {
  display: none; margin: 6px 0 2px; padding: 8px 10px;
  border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0;
  background: var(--surface-3); font-size: 12px; line-height: 1.55; color: var(--ink-dim);
}
.voc-scan-detail.is-open { display: block; }
.voc-scan-detail p { margin: 0; }
.voc-scan-detail .voc-scan-empty, .voc-scan-detail .voc-scan-loading {
  color: var(--ink-faint); font-style: italic;
}
.sp-signin-row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.sp-start-card.is-signed-out .sp-start-btn { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.sp-share-del { font: inherit; font-size: 13px; font-weight: 700; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong, #CFC7B8); background: transparent; color: var(--ink); cursor: pointer; }
.sp-share-del:hover { border-color: var(--ink); }

/* step 5, moves 15–16: a card's blurb opens with it; the older texts are one line */
.sp-card-full > .sp-card-blurb { margin: 0 0 10px; }
.sp-older-line { margin: 16px 0 0; font-size: 14px; color: var(--ink-dim); }
.sp-older-line a { color: var(--accent); font-weight: 700; }

/* ---- Your space, back in line with the mockup (Space.dc.html) ---- */
.scorpio-preview-chip { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; padding: 5px 12px; }
.sp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sp-section-link { font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
.sp-section-link:hover { text-decoration: underline; }

/* saved charts: 3 columns, at most 5 cards and "+ New chart" */
.sp-chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-chart-card { position: relative; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.sp-chart-signs { font-size: 14px; color: var(--ink-dim); min-height: 1.4em; }
.sp-chart-star { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; font-size: 18px; color: var(--ink-faint); cursor: pointer; border-radius: 999px; }
.sp-chart-star.is-fav { color: #d8a300; }
.sp-chart-star:disabled { cursor: default; }
.sp-new-chart-card { min-height: 110px; }
.sp-own-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 22px 24px; border: 1.5px dashed var(--line-strong, var(--line)); border-radius: var(--radius-lg);
}
.sp-own-text { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-dim); max-width: 52ch; }
.sp-own-text b { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); }

/* working material: 3 columns of equal-height cards, the action at the bottom */
.sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.sp-card { height: 100%; box-sizing: border-box; }
.sp-card-content { display: flex; flex-direction: column; gap: 8px; }
.sp-card-content:empty { display: none; }
.sp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
  font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.sp-btn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sp-btn.is-primary { background: var(--accent); color: var(--on-accent, #fff); }
.sp-btn.is-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sp-btn:disabled { opacity: .6; cursor: wait; }
a.sp-preview-box { text-decoration: none; color: inherit; }
a.sp-preview-box:hover .sp-preview-text { color: var(--accent); }
.sp-sky-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sp-sky-chips:empty { display: none; }
.sp-sky-chip { padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--ink-dim); }
.sp-progress { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sp-progress span { display: block; height: 100%; background: var(--accent); }

@media (max-width: 1100px) {
  .sp-chart-grid, .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sp-chart-grid, .sp-grid { grid-template-columns: minmax(0, 1fr); }
  .scorpio-head-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- the transit journal page (/space/journal) ---- */
.jr-page { max-width: 760px; }
.jr-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
.jr-back:hover { text-decoration: underline; }
.jr-head h1 { margin: 4px 0 6px; font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.1; color: var(--ink); }
.jr-compose { margin: 24px 0 28px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.jr-textarea { width: 100%; box-sizing: border-box; min-height: 88px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.55; resize: vertical; }
.jr-textarea:focus, .jr-title-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.jr-title-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.jr-title-input[hidden], .jr-date-input[hidden], .jr-quiet-btn[hidden] { display: none; }
.jr-compose-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.jr-quiet-btn { min-height: 44px; padding: 0 4px; border: none; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-dim); cursor: pointer; }
.jr-quiet-btn:hover { color: var(--accent); }
.jr-date-input { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.jr-log { margin-left: auto; }
.jr-list { display: flex; flex-direction: column; gap: 16px; }
.jr-empty { margin: 0; font-size: 15px; color: var(--ink-dim); }
.jr-entry { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.jr-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jr-date { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-faint); }
.jr-more-wrap { position: relative; }
.jr-more { width: 44px; height: 44px; border: none; background: none; border-radius: 999px; font-size: 18px; color: var(--ink-faint); cursor: pointer; }
.jr-more:hover { background: var(--surface-2); color: var(--ink); }
.jr-menu { position: absolute; right: 0; top: 44px; z-index: 5; display: flex; flex-direction: column; min-width: 180px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.jr-menu[hidden] { display: none; }
.jr-menu button { min-height: 44px; padding: 0 12px; border: none; background: none; text-align: left; font: inherit; font-size: 14px; color: var(--ink); border-radius: 8px; cursor: pointer; }
.jr-menu button:hover { background: var(--surface-2); }
.jr-menu .is-danger { color: var(--dynamic, #b4443a); }
.jr-menu-divider { height: 1px; margin: 4px 6px; background: var(--line); }
.jr-title { margin: 6px 0 4px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--ink); }
.jr-text { margin: 6px 0 0; font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.jr-sky { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.jr-sky-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.jr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: 13px; color: var(--ink-dim); }
button.jr-chip { cursor: pointer; min-height: 44px; }
button.jr-chip:hover, .jr-chip.is-selected { border-color: var(--accent); color: var(--accent); }
.jr-chip.is-likely { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--ink); font-weight: 700; }
.jr-chip.is-loading, .jr-chip.is-quiet { border-style: dashed; }
.jr-chip-detail { font-size: 14px; line-height: 1.55; color: var(--ink-dim); max-width: 64ch; }
.jr-chip-detail[hidden] { display: none; }
.jr-sky-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
.jr-sky-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .jr-head h1 { font-size: 32px; } .jr-log { margin-left: 0; } }
/* Year Ahead: whose year (your own chart by default, or a friend's) */
.sp-ya-for { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-dim); }
.sp-ya-for select { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--control); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }

/* Phase 2, step 4: the reflection under a journal entry, and "Why this?" */
.jr-reflect { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.jr-reflect[hidden] { display: none; }
.jr-reflect-text { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink); }
.jr-reflect-text.is-preview { color: var(--ink-dim); font-style: italic; }
.jr-reflect-key { margin: 6px 0 0; font-size: 12px; color: var(--ink-faint); }
.jr-why { margin-top: 8px; font-size: 14px; color: var(--ink-dim); }
.jr-why > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); font-weight: 600; }
.jr-why-h { margin: 6px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.jr-why ul { margin: 0 0 6px; padding-left: 18px; line-height: 1.6; }
.jr-why li span { color: var(--ink-faint); }

/* Phase 2, step 5: the safeguard's support note (calm, not an alarm) */
.jr-care { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); }
.jr-care p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.jr-care a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--accent); }