/* ==========================================================================
   active.subastral.css
   Mirrors active.subtarot.css — same patterns, same token usage.
   ========================================================================== */

.astral_submenu {
  display: flex;
  flex-direction: column;
  gap: var(--space_3);
  min-height: 0;
}

.astral_submenu__header {
  font-size: var(--text_sm);
  color: var(--color_text_secondary);
}

.astral_submenu__label {
  font-size: var(--text_xs);
  color: var(--color_text_muted);
}

/* ── Inputs & selects ── */
.astral_submenu__input {
  width: 100%;
  border: 1px solid var(--color_border);
  border-radius: var(--radius_sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color_text_primary);
  padding: 8px 10px;
  font: inherit;
  box-sizing: border-box;
}

.astral_submenu__input:focus {
  outline: none;
  border-color: var(--color_focus);
  box-shadow: 0 0 0 2px rgba(141, 167, 232, 0.2);
}

.astral_submenu__select {
  width: 100%;
  border: 1px solid var(--color_border);
  border-radius: var(--radius_sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color_text_primary);
  padding: 8px 36px 8px 10px;
  font: inherit;
  box-sizing: border-box;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(215, 222, 234, 0.9) 50%),
    linear-gradient(135deg, rgba(215, 222, 234, 0.9) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.astral_submenu__select:focus,
.astral_submenu__input:focus {
  outline: none;
  border-color: var(--color_focus);
  box-shadow: 0 0 0 2px rgba(141, 167, 232, 0.2);
}

.astral_submenu__select option {
  background: #121726;
  color: var(--color_text_primary);
}

/* Compact select variant for planet/house grids */
.astral_submenu__select--sm {
  padding: 4px 28px 4px 6px;
  font-size: var(--text_xs);
  background-position:
    calc(100% - 12px) calc(50% - 2px),
    calc(100% - 6px)  calc(50% - 2px);
}

/* ── Visibility toggling ── */
.astral_submenu__view.hidden,
.astral_submenu__screen_wrap.hidden,
.astral_submenu .hidden {
  display: none !important;
}

/* ── Hub view ── */
.astral_submenu__hub {
  display: flex;
  flex-direction: column;
  gap: var(--space_2);
  min-height: 0;
}

.astral_submenu__new_btn {
  align-self: center;
  width: min(240px, 100%);
  border: 1px solid var(--color_border);
  border-radius: var(--radius_sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color_text_primary);
  padding: 10px 12px;
  cursor: pointer;
}

.astral_submenu__new_btn:hover {
  border-color: var(--color_focus);
}

.astral_submenu__new_btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Status lines ── */
.astral_submenu__status {
  min-height: 1.2em;
  font-size: var(--text_xs);
  color: var(--color_text_muted);
}

.astral_submenu__status.is_error {
  color: var(--color_error);
}

.astral_submenu__status.is_success {
  color: var(--color_success, #9edb9e);
}

/* ── History list ── */
.astral_submenu__history {
  display: flex;
  flex-direction: column;
  gap: var(--space_2);
  overflow-y: auto;
  min-height: 0;
}

.astral_submenu__history_item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius_md);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color_text_primary);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.astral_submenu__history_item:hover {
  border-color: var(--color_border);
  background: rgba(255, 255, 255, 0.06);
}

.astral_submenu__history_title {
  display: block;
  font-size: var(--text_sm);
}

.astral_submenu__history_time {
  display: block;
  margin-top: 2px;
  font-size: var(--text_xs);
  color: var(--color_text_muted);
}

.astral_submenu__empty {
  color: var(--color_text_muted);
  font-size: var(--text_sm);
}

/* ── Wizard view ── */
.astral_submenu__wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space_3);
  min-height: 0;
}

.astral_submenu__wizard_step0 {
  display: flex;
  flex-direction: column;
  gap: var(--space_3);
}

.astral_submenu__wizard_subtitle {
  margin: 0;
  font-size: var(--text_xs);
  color: var(--color_text_muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--space_2);
  border-bottom: 1px solid var(--color_border);
}

.astral_submenu__screen_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space_2);
  overflow-y: auto;
  min-height: 0;
}



/* ── Token balance ── */
.astral_submenu__token_balance {
  font-size: var(--text_xs);
  color: var(--color_text_muted);
  text-align: center;
}

/* ── Form grid (core-data screen) ── */
.astral_submenu__form_grid {
  display: flex;
  flex-direction: column;
  gap: var(--space_2);
}

.astral_submenu__form_row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.astral_submenu__time_row {
  display: flex;
  align-items: center;
  gap: var(--space_2);
}

.astral_submenu__time_sep {
  color: var(--color_text_muted);
  font-weight: 700;
}

/* ── Planet / Planetoid grid ── */
.astral_submenu__planet_grid {
  display: grid;
  grid-template-columns: 90px 1fr 62px 28px;
  gap: 0.25em 0.3em;
  align-items: center;
}

.astral_submenu__house_grid {
  display: grid;
  grid-template-columns: 80px 1fr 62px;
  gap: 0.25em 0.3em;
  align-items: center;
}

.astral_submenu__grid_header {
  font-size: var(--text_xs);
  color: var(--color_text_muted);
  text-align: center;
}

.astral_submenu__planet_label {
  font-size: var(--text_xs);
  color: var(--color_text_secondary);
}

.astral_submenu__rx_cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.astral_submenu__checkbox {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--color_focus);
}

/* ── Wizard nav bar ── */
.astral_submenu__wizard_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space_2);
  padding-top: var(--space_2);
  border-top: 1px solid var(--color_border);
}

/* ── Shared button styles ── */
.astral_submenu__back_btn {
  align-self: flex-start;
  border: 1px solid var(--color_border);
  border-radius: var(--radius_sm);
  background: transparent;
  color: var(--color_text_secondary);
  padding: 7px 10px;
  cursor: pointer;
}

.astral_submenu__back_btn:hover {
  border-color: var(--color_focus);
  color: var(--color_text_primary);
}

.astral_submenu__start_btn {
  border: 1px solid var(--color_border);
  border-radius: var(--radius_sm);
  background: rgba(255, 255, 255, 0.07);
  color: var(--color_text_primary);
  padding: 10px 12px;
  cursor: pointer;
}

.astral_submenu__start_btn:hover {
  border-color: var(--color_focus);
}

.astral_submenu__start_btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Progress view ── */
.astral_submenu__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space_2);
}

.astral_submenu__progress_title {
  margin: 0;
  font-size: var(--text_sm);
  color: var(--color_text_secondary);
  text-align: center;
}

.astral_submenu__progress_message,
.astral_submenu__progress_step {
  margin: 0;
  font-size: var(--text_xs);
  color: var(--color_text_muted);
  text-align: center;
}

.astral_submenu__progress_bar_wrap {
  width: 100%;
  height: 18px;
  border: 1px solid var(--color_border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.astral_submenu__progress_bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(141,167,232,0.9), rgba(215,222,234,0.9));
  transition: width 0.3s ease-out;
}

.astral_submenu__progress_actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.astral_submenu__progress_actions button {
  border: 1px solid var(--color_border);
  border-radius: var(--radius_sm);
  background: transparent;
  color: var(--color_text_secondary);
  padding: 7px 10px;
  cursor: pointer;
}

.astral_submenu__progress_actions button:hover {
  border-color: var(--color_focus);
  color: var(--color_text_primary);
}

.astral_submenu__progress_actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Optional section toggle (event chart houses / planetoids) ── */

.astral_submenu__optional_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space_2);
  border-bottom: 1px solid var(--color_border);
  margin-bottom: var(--space_2);
}

.astral_submenu__optional_label {
  font-size: var(--text_xs);
  color: var(--color_text_muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Content area that gets greyed when toggle is off */
.astral_submenu__optional_content {
  transition: opacity 0.2s ease;
}

.astral_submenu__optional_content--disabled {
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
}

/* Toggle switch */
.astral_submenu__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.astral_submenu__toggle_input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.astral_submenu__toggle_track {
  display: block;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color_border);
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.astral_submenu__toggle_track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color_text_muted);
  transition: transform 0.2s ease, background 0.2s ease;
}

.astral_submenu__toggle_input:checked + .astral_submenu__toggle_track {
  background: rgba(141, 167, 232, 0.25);
  border-color: var(--color_focus);
}

.astral_submenu__toggle_input:checked + .astral_submenu__toggle_track::after {
  transform: translateX(14px);
  background: var(--color_focus);
}

/* ==========================================================================
   APPEND TO: active.subastral.css
   Notes screen — event tags (chips) + note fields
   ========================================================================== */

/* ── Notes screen layout ── */
.astral_submenu__notes_tags_section {
  display: flex;
  flex-direction: column;
  gap: var(--space_2);
}

.astral_submenu__notes_tags_label,
.astral_submenu__notes_intro_label {
  font-size: var(--text_xs);
  color: var(--color_text_muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.astral_submenu__notes_hint {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
  font-size: var(--text_xs);
}

.astral_submenu__notes_divider {
  height: 1px;
  background: var(--color_border);
  margin: var(--space_2) 0;
}

.astral_submenu__notes_section {
  display: flex;
  flex-direction: column;
  gap: var(--space_2);
}

/* ── Event tag chips ── */
.astral_submenu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.astral_submenu__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--color_border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color_text_secondary);
  font-size: var(--text_xs);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.astral_submenu__chip:hover {
  border-color: var(--color_focus);
  color: var(--color_text_primary);
}

.astral_submenu__chip--active {
  border-color: var(--color_focus);
  background: rgba(141, 167, 232, 0.15);
  color: var(--color_text_primary);
}

/* ── Note rows ── */
.astral_submenu__notes_list {
  display: flex;
  flex-direction: column;
  gap: var(--space_2);
}

.astral_submenu__note_row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.astral_submenu__note_textarea {
  width: 100%;
  flex: 1;
  border: 1px solid var(--color_border);
  border-radius: var(--radius_sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color_text_primary);
  padding: 8px 10px;
  font: inherit;
  font-size: var(--text_xs);
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.astral_submenu__note_textarea:focus {
  outline: none;
  border-color: var(--color_focus);
  box-shadow: 0 0 0 2px rgba(141, 167, 232, 0.2);
}

.astral_submenu__note_textarea::placeholder {
  color: var(--color_text_muted);
  opacity: 0.6;
}

.astral_submenu__note_remove_btn {
  flex-shrink: 0;
  margin-top: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color_border);
  border-radius: 50%;
  background: transparent;
  color: var(--color_text_muted);
  font-size: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.astral_submenu__note_remove_btn:hover {
  border-color: var(--color_error, #e07070);
  color: var(--color_error, #e07070);
}

/* ── Add note button ── */
.astral_submenu__notes_add_btn {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--color_border);
  border-radius: var(--radius_sm);
  color: var(--color_text_muted);
  font-size: var(--text_xs);
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.astral_submenu__notes_add_btn:hover {
  border-color: var(--color_focus);
  color: var(--color_text_secondary);
}